Apa itu Flow Builder?

Flow Builder (atau Alur) adalah mesin otomatisasi visual Bird untuk membuat alur komunikasi di berbagai saluran — tidak memerlukan kode, meskipun dapat diperluas dengan kode kustom.

Mengapa menggunakan Google Cloud Functions dengan Flows?

Cloud Functions memungkinkan Anda untuk menjalankan kode tanpa server untuk memproses data (seperti menganalisis gambar atau mengambil data API eksternal) dan mengalirkan hasilnya kembali ke alur Anda.

Apa yang dilakukan Google Vision API dalam pengaturan ini?

Ini melakukan analisis gambar — mengidentifikasi objek, label, atau konsep (seperti "hot dog") — dan mengembalikan data terstruktur ke Alur Anda.

Bagaimana cara menghubungkan Fungsi Cloud ke Flow Builder?

Gunakan langkah Fetch Variables untuk memanggil endpoint HTTPS publik dari fungsi. Respons (misalnya, { "isHotDog": true } ) dapat digunakan di langkah-langkah selanjutnya.

Bisakah ini digunakan untuk kasus bisnis yang nyata?

Tentu saja. Pendekatan yang sama dapat memvalidasi foto pengiriman, mendeteksi barang yang rusak, mengenali dokumen, atau memverifikasi media yang diunggah.

Apa yang membuat integrasi ini kuat?

Ini menggabungkan visi AI , fleksibilitas tanpa server , dan komunikasi multisaluran , memungkinkan automasi yang lebih cerdas tanpa memelihara infrastruktur.

Apakah saya perlu pengalaman pemrograman untuk mengikuti?

Familiaritas dasar dengan JavaScript (untuk Google Cloud Function) sangat membantu, tetapi sebagian besar proses — dari menghubungkan saluran hingga logika alur — bersifat visual dan ramah bagi pemula.

Cara menggunakan Flows dengan Google Vision API dan Google Cloud Functions

Burung

6 Okt 2020

Pembuat Alur

1 min read

Cara menggunakan Flows dengan Google Vision API dan Google Cloud Functions

Poin Penting

- Flows lebih dari sekadar alat tanpa kode — ini adalah mesin otomatisasi fleksibel yang memungkinkan Anda memperluas alur kerja dengan kode menggunakan layanan eksternal seperti Google Cloud Functions atau AWS Lambda.
- Tutorial ini menunjukkan cara membuat chatbot Telegram yang menggunakan Google Vision API untuk mengidentifikasi gambar (seperti mendeteksi jika sebuah foto mengandung hotdog 🥪).
- Contoh ini menunjukkan bagaimana Flows dapat dengan mudah terhubung ke API pengenalan gambar untuk memproses konten yang diserahkan oleh pengguna secara otomatis.
- Pengembang dapat memanfaatkan arsitektur ini untuk membangun otomatisasi dunia nyata, seperti verifikasi pengiriman, pemeriksaan ID, atau alur kerja kontrol kualitas.
- Mengintegrasikan Google Vision API di dalam Cloud Function memungkinkan wawasan bertenaga AI (deteksi objek, kepercayaan label, ekstraksi metadata) yang dapat direspon oleh Flows secara dinamis.
- Langkah “Ambil Variabel” di Flow Builder adalah jembatan — ia memanggil fungsi cloud dan menyimpan respons API untuk digunakan lebih lanjut dalam percakapan.
- Blok balasan dapat menggunakan variabel seperti {{isHotDog}} untuk mempersonalisasi respons, mengubah data mentah menjadi pesan obrolan kontekstual.
- Sementara demo ini bersifat menyenangkan, ia menunjukkan bagaimana pengembang dapat menggabungkan logika tanpa kode dengan fungsi tanpa server untuk membuka kemampuan otomatisasi yang kuat di berbagai saluran pesan.

Sorotan Tanya jawab

Apa itu Flow Builder?
Flow Builder (atau Alur) adalah mesin otomatisasi visual Bird untuk membuat alur komunikasi di berbagai saluran — tidak memerlukan kode, meskipun dapat diperluas dengan kode kustom.
Mengapa menggunakan Google Cloud Functions dengan Flows?
Cloud Functions memungkinkan Anda untuk menjalankan kode tanpa server untuk memproses data (seperti menganalisis gambar atau mengambil data API eksternal) dan mengalirkan hasilnya kembali ke alur Anda.
Apa yang dilakukan Google Vision API dalam pengaturan ini?
Ini melakukan analisis gambar — mengidentifikasi objek, label, atau konsep (seperti "hot dog") — dan mengembalikan data terstruktur ke Alur Anda.
Bagaimana cara menghubungkan Fungsi Cloud ke Flow Builder?
Gunakan langkah Fetch Variables untuk memanggil endpoint HTTPS publik dari fungsi. Respons (misalnya, { "isHotDog": true }) dapat digunakan di langkah-langkah selanjutnya.
Bisakah ini digunakan untuk kasus bisnis yang nyata?
Tentu saja. Pendekatan yang sama dapat memvalidasi foto pengiriman, mendeteksi barang yang rusak, mengenali dokumen, atau memverifikasi media yang diunggah.
Apa yang membuat integrasi ini kuat?
Ini menggabungkan visi AI, fleksibilitas tanpa server, dan komunikasi multisaluran, memungkinkan automasi yang lebih cerdas tanpa memelihara infrastruktur.
Apakah saya perlu pengalaman pemrograman untuk mengikuti?
Familiaritas dasar dengan JavaScript (untuk Google Cloud Function) sangat membantu, tetapi sebagian besar proses — dari menghubungkan saluran hingga logika alur — bersifat visual dan ramah bagi pemula.

Flows adalah mesin otomatisasi drag-and-drop yang kuat untuk membuat alur komunikasi. Kami awalnya merancangnya sebagai solusi tanpa kode, tetapi kami menemukan banyak pengguna dapat mendapatkan perilaku yang sangat kuat dengan menulis beberapa kode untuk kasus penggunaan tertentu. Potongan kode ini dapat berada di dalam Flow Builder, atau mereka dapat berupa fungsi cloud pihak ketiga seperti fungsi AWS Lambda atau fungsi Google Cloud.

Ini adalah demonstrasi sederhana menggunakan Fungsi GoogleCloud dan Flows untuk melakukan pengenalan gambar pada gambar yang dikirim di Telegram.

Aliran dan Selainnya

Sebagai pengembang Flows, saya sering memikirkan siapa pengguna kami, mengapa mereka menggunakan Flows, dan apa yang mereka butuhkan untuk mencapai tujuan mereka; dan kemudian, fitur mana yang perlu kami implementasikan untuk melayani pengguna tersebut dengan sebaik-baiknya.

Flows adalah mesin otomatisasi seret dan lepas yang kuat untuk membuat alur komunikasi. Kami awalnya menganggapnya sebagai solusi tanpa kode, tetapi kami menemukan banyak pengguna dapat menghasilkan perilaku yang sangat kuat dengan menulis beberapa kode untuk kasus penggunaan tertentu. Misalnya, Anda dapat membuat alur yang secara otomatis menghasilkan prospek dan kasus di Salesforce berdasarkan interaksi pelanggan di berbagai saluran. Potongan kode ini bisa berada di dalam Flows, atau bisa juga merupakan fungsi cloud pihak ketiga seperti fungsi AWS Lambda atau Fungsi Google Cloud.

Kasus penggunaan yang menarik: Pengenalan Gambar

Untuk contoh yang singkat dan lucu, saya akan menunjukkan kepada Anda bagaimana cara mengimplementasikan aplikasi yang mengenali hot dog. Kami akan mengatur alur di Flows, yang akan menerima gambar dari pengguna dan memutuskan, apakah mereka mengirimkan hotdog atau tidak.

Bagi banyak pelanggan kami, jenis pengenalan gambar ini bisa sangat kuat. Bayangkan Anda menjalankan layanan pengiriman dan ingin memverifikasi pengiriman yang berhasil secara otomatis. Mirip dengan apa yang akan saya tunjukkan, Anda bisa menggunakan data lokasi, foto paket, dan bahkan tanda tangan penerima untuk membuat alur verifikasi di Flows.

Kasus penggunaan yang menarik: Pengenalan Gambar

Rencana untuk sukses

Pertama, kita akan menyiapkan fungsi cloud, yang menerima permintaan dengan URL ke sebuah gambar, kemudian menggunakan API pengenalan gambar untuk memproses gambar tersebut, dan memberi tahu apakah ada hotdog dalam gambar tersebut atau tidak.

Lalu kita akan membangun alur, yang menerima pesan dari pengguna melalui saluran pesan (Telegram dalam hal ini), menjalankan fungsi cloud di atas, dan memberi tahu pengguna apakah ada hotdog dalam gambar yang dia kirim.

Menyiapkan Fungsi Google Cloud

Pertama, kita perlu menyiapkan fungsi cloud. Untuk memulai dengan cepat, ikuti tutorial cepat Cloud Functions dari Google. Sebagai 'Trigger', pilih pemicu HTTP, lingkungan eksekusi: Node.js 10, dan di kolom kode sumber masukkan potongan kode. Ini adalah kode sederhana, yang memeriksa apakah permintaan mengandung kode JSON dan menjawab ya atau tidak.

/**
 * Responds to any HTTP request.
 *
 * @param {!express:Request} req HTTP request context.
 * @param {!express:Response} res HTTP response context.
 */
 exports.helloWorld = (req, res) => {
  let message = req.query.url ? "yes" : "no";
  res.setHeader('Content-Type', 'application/json');
  res.status(200).send(JSON.stringify({ isHotDog: message }));
 };

Google Cloud Console interface with options for creating a new Cloud Function.

Selanjutnya, Anda perlu menerapkan fungsi ini. Untuk mengujinya di dalam Google Cloud Platform, ikuti langkah-langkah dari tutorial.

Untuk menguji dari browser Anda, pergi ke URL berikut dengan memasukkan alamat spesifik untuk fungsi Anda:

https://alamat-fungsi-anda.cloudfunctions.net/HotDogOrNot/?url=hello seharusnya mengembalikan {“isHotDog”: true} dan alamat https://alamat-fungsi-anda.cloudfunctions.net/HotDogOrNot seharusnya mengembalikan {“isHotDog”: false}.

Kerja yang bagus! Anda telah menyiapkan fungsi cloud google. Sekarang kita perlu membuat fungsi cloud kita lebih pintar.

/**
 * Responds to any HTTP request.
 *
 * @param {!express:Request} req HTTP request context.
 * @param {!express:Response} res HTTP response context.
 */
 exports.helloWorld = (req, res) => {
  let message = req.query.url ? "yes" : "no";
  res.setHeader('Content-Type', 'application/json');
  res.status(200).send(JSON.stringify({ isHotDog: message }));
 };

Selanjutnya, Anda perlu menerapkan fungsi ini. Untuk mengujinya di dalam Google Cloud Platform, ikuti langkah-langkah dari tutorial.

Untuk menguji dari browser Anda, pergi ke URL berikut dengan memasukkan alamat spesifik untuk fungsi Anda:

Kerja yang bagus! Anda telah menyiapkan fungsi cloud google. Sekarang kita perlu membuat fungsi cloud kita lebih pintar.

/**
 * Responds to any HTTP request.
 *
 * @param {!express:Request} req HTTP request context.
 * @param {!express:Response} res HTTP response context.
 */
 exports.helloWorld = (req, res) => {
  let message = req.query.url ? "yes" : "no";
  res.setHeader('Content-Type', 'application/json');
  res.status(200).send(JSON.stringify({ isHotDog: message }));
 };

Selanjutnya, Anda perlu menerapkan fungsi ini. Untuk mengujinya di dalam Google Cloud Platform, ikuti langkah-langkah dari tutorial.

Untuk menguji dari browser Anda, pergi ke URL berikut dengan memasukkan alamat spesifik untuk fungsi Anda:

Kerja yang bagus! Anda telah menyiapkan fungsi cloud google. Sekarang kita perlu membuat fungsi cloud kita lebih pintar.

Mengatur Google Vision API

Untuk menjadikannya lebih pintar, mari kita tambahkan pengenalan gambar. Untuk tujuan ini, kita akan menggunakan Google Vision API. Untuk memulai, ikuti langkah 1-4 di panduan cepat Vision API. Di tutorial ini, Anda akan mengaktifkan Vision API dan membuat akun layanan untuk menggunakannya.

Sekarang kembali ke fungsi cloud yang Anda buat. Alihkan "Variabel lingkungan, jaringan, batas waktu, dan lainnya" dan di file "Akun layanan" pilih akun layanan VisionAPI yang baru saja Anda buat. Sekarang kita dapat mengakses Vision API di dalam fungsi kita.

Advanced options interface of a cloud service configuration.

Sekarang mari kita ubah kodenya. Di tab "Package.json", masukkan kode ini. Ini akan menambahkan pustaka Google Vision API sebagai ketergantungan untuk fungsi Anda.

{
  "name": "sample-http",
  "version": "0.0.1",
  "dependencies": {
  "@google-cloud/vision": "^1.11.0"
  }
 }

di tab "Index.js" perbarui kode yang ada dengan potongan kode berikut.

/**
 * Responds to any HTTP request.
 *
 * @param {!express:Request} req HTTP request context.
 * @param {!express:Response} res HTTP response context.
 */
 exports.helloWorld = (request, response) => {
  var url = request.query.url || request.body.url;
  if (url == null || url == "" ) {
  response.status(400).json({ error: "Must include a 'url' query parameter." });
  }
  
  
  getImageLabels(url)
  .then(labels => {
  // You can use 'console.log(labels);' command to check labels you got
  // We filter all labels if they contain "hot dog" in label description
  // And have a score > 0.6, which mean that VisionAPI is at least 60% sure that there is a hotdog on a picture
  labels = labels.filter(function(label) {
  return label.description.toLowerCase().includes("hot dog") && label.score > 0.6;
  });
  
  // If labels array contains at least 1 element, then we found a hot-dog!
  if (labels.length > 0) {
  response.status(200).json({isHotDog: true, error: ""});
  } else {
  response.status(200).json({isHotDog: false, error: ""});
  }
  })
  .catch(err => {
  response.status(500).json({ error: err });
  });
 };
  
 async function getImageLabels(imageUrl) {
  // Imports the Google Cloud client library
  const vision = require('@google-cloud/vision');
  // Creates a client
  const client = new vision.ImageAnnotatorClient();
  // Performs label detection on the image file
  const [result] = await client.labelDetection(imageUrl);
  const labels = result.labelAnnotations;
  return labels
 }

Development environment displaying the code for a package.json file.

Apa perbedaannya dibandingkan versi sebelumnya? Kami menambahkan permintaan ke VisionAPI, yang mengembalikan ‘label’ yang ditemukan di gambar. Kemudian kami menyaring label ini berdasarkan deskripsi: jika itu mengandung “hot dog” dan jika memiliki kepercayaan lebih besar dari 60% pada label tersebut. Jika ada setidaknya 1 label yang tersisa setelah penyaringan, itu berarti kita menemukan hotdog di gambar.

Fitur Vision API	Apa yang Diaktifkan dalam Alur
Label objek (misalnya, “hot dog”)	Identifikasi objek dan otomatisasi tindakan berdasarkan deteksi
Skor kepercayaan	Kontrol ketepatan (misalnya, > 60% kepercayaan memicu alur kerja)
Ekstraksi metadata	Sertakan konteks seperti angka, objek, dan lingkungan
Pustaka yang dapat diperluas	Menambahkan lebih banyak deteksi bertenaga AI di luar hot dog

Untuk memahami cara kerja Google Vision API dan melihat respons contoh, periksa dokumentasi Vision API resmi.

Setelah itu, deploy versi baru dari fungsi kami. Untuk mengujinya dari browser Anda, cari gambar hotdog dan simpan URL-nya. Sekarang pergi ke URL fungsi Anda (memasukkan alamat yang benar untuk fungsi Anda) https://alamat-fungsi-anda.cloudfunctions.net/HotDogOrNot?url=url_ke_gambar dan ganti “url_ke_gambar” dengan URL gambar yang ditemukan. Jika ada hotdog di gambar, halaman akan mengembalikan {“isHotDog”: true}.

Sekarang mari kita hubungkan fungsi ini ke Flow Builder.

Sekarang mari kita ubah kodenya. Di tab "Package.json", masukkan kode ini. Ini akan menambahkan pustaka Google Vision API sebagai ketergantungan untuk fungsi Anda.

{
  "name": "sample-http",
  "version": "0.0.1",
  "dependencies": {
  "@google-cloud/vision": "^1.11.0"
  }
 }

di tab "Index.js" perbarui kode yang ada dengan potongan kode berikut.

/**
 * Responds to any HTTP request.
 *
 * @param {!express:Request} req HTTP request context.
 * @param {!express:Response} res HTTP response context.
 */
 exports.helloWorld = (request, response) => {
  var url = request.query.url || request.body.url;
  if (url == null || url == "" ) {
  response.status(400).json({ error: "Must include a 'url' query parameter." });
  }
  
  
  getImageLabels(url)
  .then(labels => {
  // You can use 'console.log(labels);' command to check labels you got
  // We filter all labels if they contain "hot dog" in label description
  // And have a score > 0.6, which mean that VisionAPI is at least 60% sure that there is a hotdog on a picture
  labels = labels.filter(function(label) {
  return label.description.toLowerCase().includes("hot dog") && label.score > 0.6;
  });
  
  // If labels array contains at least 1 element, then we found a hot-dog!
  if (labels.length > 0) {
  response.status(200).json({isHotDog: true, error: ""});
  } else {
  response.status(200).json({isHotDog: false, error: ""});
  }
  })
  .catch(err => {
  response.status(500).json({ error: err });
  });
 };
  
 async function getImageLabels(imageUrl) {
  // Imports the Google Cloud client library
  const vision = require('@google-cloud/vision');
  // Creates a client
  const client = new vision.ImageAnnotatorClient();
  // Performs label detection on the image file
  const [result] = await client.labelDetection(imageUrl);
  const labels = result.labelAnnotations;
  return labels
 }

Fitur Vision API	Apa yang Diaktifkan dalam Alur
Label objek (misalnya, “hot dog”)	Identifikasi objek dan otomatisasi tindakan berdasarkan deteksi
Skor kepercayaan	Kontrol ketepatan (misalnya, > 60% kepercayaan memicu alur kerja)
Ekstraksi metadata	Sertakan konteks seperti angka, objek, dan lingkungan
Pustaka yang dapat diperluas	Menambahkan lebih banyak deteksi bertenaga AI di luar hot dog

Untuk memahami cara kerja Google Vision API dan melihat respons contoh, periksa dokumentasi Vision API resmi.

Sekarang mari kita hubungkan fungsi ini ke Flow Builder.

Sekarang mari kita ubah kodenya. Di tab "Package.json", masukkan kode ini. Ini akan menambahkan pustaka Google Vision API sebagai ketergantungan untuk fungsi Anda.

{
  "name": "sample-http",
  "version": "0.0.1",
  "dependencies": {
  "@google-cloud/vision": "^1.11.0"
  }
 }

di tab "Index.js" perbarui kode yang ada dengan potongan kode berikut.

/**
 * Responds to any HTTP request.
 *
 * @param {!express:Request} req HTTP request context.
 * @param {!express:Response} res HTTP response context.
 */
 exports.helloWorld = (request, response) => {
  var url = request.query.url || request.body.url;
  if (url == null || url == "" ) {
  response.status(400).json({ error: "Must include a 'url' query parameter." });
  }
  
  
  getImageLabels(url)
  .then(labels => {
  // You can use 'console.log(labels);' command to check labels you got
  // We filter all labels if they contain "hot dog" in label description
  // And have a score > 0.6, which mean that VisionAPI is at least 60% sure that there is a hotdog on a picture
  labels = labels.filter(function(label) {
  return label.description.toLowerCase().includes("hot dog") && label.score > 0.6;
  });
  
  // If labels array contains at least 1 element, then we found a hot-dog!
  if (labels.length > 0) {
  response.status(200).json({isHotDog: true, error: ""});
  } else {
  response.status(200).json({isHotDog: false, error: ""});
  }
  })
  .catch(err => {
  response.status(500).json({ error: err });
  });
 };
  
 async function getImageLabels(imageUrl) {
  // Imports the Google Cloud client library
  const vision = require('@google-cloud/vision');
  // Creates a client
  const client = new vision.ImageAnnotatorClient();
  // Performs label detection on the image file
  const [result] = await client.labelDetection(imageUrl);
  const labels = result.labelAnnotations;
  return labels
 }

Fitur Vision API	Apa yang Diaktifkan dalam Alur
Label objek (misalnya, “hot dog”)	Identifikasi objek dan otomatisasi tindakan berdasarkan deteksi
Skor kepercayaan	Kontrol ketepatan (misalnya, > 60% kepercayaan memicu alur kerja)
Ekstraksi metadata	Sertakan konteks seperti angka, objek, dan lingkungan
Pustaka yang dapat diperluas	Menambahkan lebih banyak deteksi bertenaga AI di luar hot dog

Untuk memahami cara kerja Google Vision API dan melihat respons contoh, periksa dokumentasi Vision API resmi.

Sekarang mari kita hubungkan fungsi ini ke Flow Builder.

Membuat alur di Flows

Masuk ke Dashboard Bird atau daftar untuk akun jika Anda belum memiliki satu.

Jika Anda baru di Flows dan Anda belum mengatur saluran, Anda perlu pergi ke halaman pengaturan Saluran, dan memilih untuk mengatur saluran Telegram. Saya memilih Telegram untuk demo ini karena mudah dan cepat untuk diatur.

Interface titled "Channel setup" with options to integrate communication platforms such as Telegram, Messenger, LINE, WeChat, SMS, WhatsApp, Email, and Instagram.

Sekarang Anda memiliki saluran yang dapat kita gunakan di Flows. Pergi ke halaman Flows, buat alur kustom baru, dan pilih pemicu saluran “Telegram”.

User interface for selecting a communication channel trigger, showing options such as Telegram, Facebook Messenger, Email, Incoming Order Activity, and Shopify Order.

Anda akan diarahkan ke halaman alur, di mana Anda harus memilih saluran Telegram Anda sebagai pemicu, dalam kasus kita ini adalah “Hotdog”. Harap tambahkan 2 langkah: “Ambil variabel” dan “Balas pesan saluran”.

Di dalam langkah “Ambil variabel” kita akan memanggil fungsi cloud kita dan mengambil respons ke dalam variabel “isHotDog” yang akan berisi “true” atau “false” sebagai respons dari fungsi GoogleClound. Di bidang URL silakan masukkan URL ke fungsi Anda https://your-function-address.cloudfunctions.net/HotDogOrNot dan isi semua bidang lainnya seperti pada gambar "Isi langkah Ambil variabel".

Dan di dalam langkah “Balas pesan saluran” kita akan membalas pelanggan dengan pesan yang berisi respons ya atau tidak. Untuk itu masukkan di bidang "Balas dengan pesan" teks berikut "Hotdog di gambar? {{isHotDog}}".