Reach

Grow

Manage

Automate

Reach

Grow

Manage

Automate

Cara menggunakan Flows dengan Google Vision API dan Google Cloud Functions

Pembuat Alur

1 min read

Cara menggunakan Flows dengan Google Vision API dan Google Cloud Functions

Pembuat Alur

1 min read

Cara menggunakan Flows dengan Google Vision API dan Google Cloud Functions

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

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

Flows dan Beyond

Sebagai pengembang Flows, saya sering berpikir siapa pengguna kami, mengapa mereka menggunakan Flows, dan apa yang mereka perlukan untuk mencapai tujuan mereka; dan kemudian, fitur mana yang perlu kami implementasikan untuk melayani pengguna tersebut sebaik mungkin.

Flows adalah mesin otomatisasi drag-and-drop yang kuat untuk membuat alur komunikasi. Awalnya kami merancangnya sebagai solusi tanpa kode, tetapi kami menemukan banyak pengguna dapat mendapatkan perilaku yang sangat kuat dengan menulis kode untuk kasus penggunaan tertentu. Bagian-bagian kode ini dapat berada di dalam Flows, atau bisa menjadi fungsi cloud pihak ke-3 seperti AWS Lambda atau Google Cloud Functions.

Kasus penggunaan menarik: Pengenalan Gambar 

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

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

Sebuah rencana untuk sukses

Pertama, kami akan menyiapkan fungsi cloud, yang menerima permintaan dengan URL ke gambar, lalu menggunakan API pengenalan gambar untuk memproses gambar, dan merespons apakah ada hotdog di gambar tersebut atau tidak.

Kemudian kami akan membangun alur, yang menerima pesan dari pengguna melalui saluran pesan (dalam hal ini Telegram), menjalankan fungsi cloud di atas, dan merespons pengguna apakah ada hotdog di gambar yang dia kirimkan.

Pertama, kami akan menyiapkan fungsi cloud, yang menerima permintaan dengan URL ke gambar, lalu menggunakan API pengenalan gambar untuk memproses gambar, dan merespons apakah ada hotdog di gambar tersebut atau tidak.

Kemudian kami akan membangun alur, yang menerima pesan dari pengguna melalui saluran pesan (dalam hal ini Telegram), menjalankan fungsi cloud di atas, dan merespons pengguna apakah ada hotdog di gambar yang dia kirimkan.

Pertama, kami akan menyiapkan fungsi cloud, yang menerima permintaan dengan URL ke gambar, lalu menggunakan API pengenalan gambar untuk memproses gambar, dan merespons apakah ada hotdog di gambar tersebut atau tidak.

Kemudian kami akan membangun alur, yang menerima pesan dari pengguna melalui saluran pesan (dalam hal ini Telegram), menjalankan fungsi cloud di atas, dan merespons pengguna apakah ada hotdog di gambar yang dia kirimkan.

Menyiapkan Google Cloud Function

Pertama, kita perlu mengatur fungsi cloud. Untuk memulai dengan cepat, buat fungsi cloud menggunakan tutorial ini: https://cloud.google.com/functions/docs/quickstart-console. Sebagai 'Pemicu' pilih pemicu HTTP, lingkungan eksekusi: Node.js 10, dan di bidang kode sumber masukkan potongan kode. Ini adalah kode sederhana, yang memeriksa apakah permintaan berisi 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 tersebut. 

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

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

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

Menyiapkan Google Vision API

Untuk membuatnya lebih pintar, mari tambahkan pengenalan gambar. Untuk tujuan ini, kita akan menggunakan Google Vision API. Untuk memulai, ikuti langkah 1-4 dari tutorial ini: https://cloud.google.com/vision/docs/quickstart-client-libraries. Dalam tutorial, Anda akan mengaktifkan Vision API dan membuat akun layanan untuk menggunakannya.

Sekarang kembali ke fungsi cloud yang Anda buat. Aktifkan "Environment variables, networking, timeouts and more" dan dalam file "Service account" 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 kode. Pada 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"
  }
 }


pada tab "Index.js" perbarui kode yang ada dengan cuplikan 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 dengan versi sebelumnya? Kami menambahkan permintaan ke VisionAPI, yang mengembalikan ‘labels’ yang ditemukan pada gambar.  Kemudian kita menyaring label ini berdasarkan deskripsi: jika mengandung “hot dog” dan jika memiliki kepercayaan lebih dari 60% pada label tersebut. Jika ada setidaknya 1 label tersisa setelah disaring, itu berarti kita menemukan hotdog pada gambar.

Untuk memahami bagaimana Google VisionAPI bekerja dan seperti apa responnya, periksa dokumentasi mereka, https://cloud.google.com/vision/docs

Setelah itu, terapkan versi baru dari fungsi kita. Untuk mengujinya dari browser Anda, temukan gambar hotdog dan simpan URL-nya. Sekarang pergi ke URL fungsi Anda (masukkan alamat yang benar untuk fungsi Anda) https://your-function-address.cloudfunctions.net/HotDogOrNot?url=url_to_image dan ganti “url_to_image” dengan URL dari gambar yang ditemukan tersebut. Jika ada hotdog dalam gambar, halaman akan mengembalikan {“isHotDog”: true}.

Sekarang mari hubungkan fungsi ini ke Flow Builder.

Membuat sebuah flow di Flows

Masuk ke dalam Dashboard Bird atau daftar akun jika Anda belum memilikinya.

Jika Anda baru di Flows dan belum memiliki saluran yang diatur, Anda perlu pergi ke halaman pengaturan Saluran, dan pilih 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 dialihkan ke halaman alur, di mana Anda harus memilih saluran Telegram Anda sebagai pemicu, dalam kasus kami adalah “Hotdog”. Silakan tambahkan 2 langkah: “Fetch variables” dan “Reply to channel message”.

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

Dan di dalam langkah “Reply to channel message” kami akan merespons pelanggan dengan pesan yang berisi jawaban ya atau tidak. Untuk itu masukkan di bidang "Reply with message" teks berikut "Hotdog pada gambar? {{isHotDog}}".

User interface with a form featuring fields like URL, Method, and Headers, along with options for body content and a section for setting header type, all related to configuring a web request in a cloud function environment.


Interface showing a message type selection dropdown, and options for status reports.

Jika Anda mengalami kesulitan membangun alur, Anda dapat menggunakan cuplikan berikut:

{
  "id": "",
  "revisionId": "",
  "trigger": "onReceivedConversationMessage",
  "options": {
  "callbacks": [],
  "targets": []
  },
  "metadata": {
  "title": "Image recognition",
  "isDraft": false,
  "triggerIntent": "onReceivedTelegramMessage"
  },
  "steps": [
  {
  "id": "19c3560f-a8d0-4787-8714-37c698108b69",
  "action": "fetchVariables",
  "options": {
  "url": "https://your-function-address.cloudfunctions.net/HotDogOrNot",
  "variableKeys": [
  "isHotDog"
  ],
  "intent": "fetchVariables",
  "label": "Is there a hotdog on the image?",
  "method": "POST",
  "body": "{\"url\":\"{{messageImage}}\"}",
  "contentType": "application/json"
  }
  },
  {
  "id": "ca9314a2-2f9d-489c-b4b1-50fc7a0b2cb6",
  "action": "sendConversationMessage",
  "options": {
  "content": {
  "text": "Hotdog on the image? {{isHotDog}}",
  "image": {
  "url": ""
  },
  "audio": {
  "url": ""
  },
  "video": {
  "url": ""
  },
  "file": {
  "url": ""
  },
  "location": {
  "latitude": "",
  "longitude": ""
  },
  "email": {
  "from": {
  "name": "",
  "address": ""
  },
  "subject": "",
  "content": {},
  "headers": null
  }
  },
  "type": "text",
  "recipients": {
  "conversationIds": [
  "{{conversationId}}"
  ]
  },
  "intent": "replyConversationMessage",
  "highThroughput": false
  }
  }
  ],
  "published": true,
  "createdAt": "2020-08-28T18:25:19.665815708Z",
  "updatedAt": "2020-08-29T01:15:43.669252097Z",
  "revisionCount": 22
 }


Flowchart illustrating an image recognition process.


Untuk mengujinya, kirim gambar ke bot Telegram Anda.

Sejauh ini, terlihat keren! Kami menciptakan bot obrolan kecil, yang memeriksa gambar yang dikirim pelanggan. Untuk membuatnya lebih menarik, mari kita tambahkan beberapa langkah lagi seperti yang ditunjukkan di bawah ini: 


A flowchart diagram illustrating an image recognition process using Telegram Bot and Vision API.


Jika Anda mengalami kesulitan membangun alur, Anda dapat menggunakan cuplikan berikut:

{
  "id": "",
  "revisionId": "",
  "trigger": "onReceivedConversationMessage",
  "options": {
  "callbacks": [],
  "targets": []
  },
  "metadata": {
  "title": "Image recognition",
  "isDraft": false,
  "triggerIntent": "onReceivedTelegramMessage"
  },
  "steps": [
  {
  "id": "0c3e4f35-0950-44dd-8682-0a21a111de77",
  "action": "switch",
  "options": {
  "cases": [
  {
  "conditions": [
  {
  "variable": "{{messageImage}}",
  "operator": "isEmptyOrNotSet",
  "value": "",
  "options": {
  "intent": "custom"
  }
  }
  ],
  "steps": [
  {
  "id": "ffd13531-a3b9-41de-a2fa-0e515feed2fe",
  "action": "sendConversationMessage",
  "options": {
  "content": {
  "text": "Please send an image.",
  "image": {
  "url": ""
  },
  "audio": {
  "url": ""
  },
  "video": {
  "url": ""
  },
  "file": {
  "url": ""
  },
  "location": {
  "latitude": "",
  "longitude": ""
  },
  "email": {
  "from": {
  "name": "",
  "address": ""
  },
  "subject": "",
  "content": {},
  "headers": null
  }
  },
  "type": "text",
  "recipients": {
  "conversationIds": [
  "{{conversationId}}"
  ]
  },
  "intent": "replyConversationMessage",
  "label": "Ask to send an image",
  "highThroughput": false
  }
  },
  {
  "id": "3d752bc6-cf35-4971-8155-44a2bea4bb49",
  "action": "endFlow",
  "options": {
  "intent": "endFlow"
  }
  }
  ],
  "id": "aa_QVqjIn9"
  }
  ],
  "defaultCase": {
  "steps": [
  {
  "id": "8f3748cf-9059-44fb-a177-bc0dab194e7b",
  "action": "sendConversationMessage",
  "options": {
  "content": {
  "text": "Thank you for the image! We started to detect a hotdog on the image.",
  "image": {
  "url": ""
  },
  "audio": {
  "url": ""
  },
  "video": {
  "url": ""
  },
  "file": {
  "url": ""
  },
  "location": {
  "latitude": "",
  "longitude": ""
  },
  "email": {
  "from": {
  "name": "",
  "address": ""
  },
  "subject": "",
  "content": {},
  "headers": null
  }
  },
  "type": "text",
  "recipients": {
  "conversationIds": [
  "{{conversationId}}"
  ]
  },
  "intent": "replyConversationMessage",
  "label": "Send \"Thanks for the image\"",
  "highThroughput": false
  }
  },
  {
  "id": "808debc0-974d-4b3f-bd4f-ed4efb30a499",
  "action": "fetchVariables",
  "options": {
  "url": "https://your-function-address.cloudfunctions.net/HotDogOrNot",
  "variableKeys": [
  "isHotDog"
  ],
  "intent": "fetchVariables",
  "label": "Send image to VisionAPI",
  "method": "POST",
  "body": "{\"url\":\"{{messageImage}}\"}",
  "contentType": "application/json"
  }
  },
  {
  "id": "c9f771fb-06ff-4362-b783-07e4bd3ff53d",
  "action": "switch",
  "options": {
  "cases": [
  {
  "conditions": [
  {
  "variable": "{{isHotDog}}",
  "operator": "==",
  "value": "true",
  "options": {
  "intent": "custom"
  }
  }
  ],
  "steps": [
  {
  "id": "02629417-e3ac-4bfa-94a9-83047c250d54",
  "action": "sendConversationMessage",
  "options": {
  "content": {
  "text": "There is a hotdog on the image. Thank you!",
  "image": {
  "url": ""
  },
  "audio": {
  "url": ""
  },
  "video": {
  "url": ""
  },
  "file": {
  "url": ""
  },
  "location": {
  "latitude": "",
  "longitude": ""
  },
  "email": {
  "from": {
  "name": "",
  "address": ""
  },
  "subject": "",
  "content": {},
  "headers": null
  }
  },
  "type": "text",
  "recipients": {
  "conversationIds": [
  "{{conversationId}}"
  ]
  },
  "intent": "replyConversationMessage",
  "label": "Send \"we detected a hotdog!\"",
  "highThroughput": false
  }
  }
  ],
  "id": "AWzLv6jksY"
  }
  ],
  "defaultCase": {
  "steps": [
  {
  "id": "b00034ce-db49-4ddf-bf8f-2be006e3fbbd",
  "action": "sendConversationMessage",
  "options": {
  "content": {
  "text": "Sorry, we didn't detect a hotdog on the image. Please try again.",
  "image": {
  "url": ""
  },
  "audio": {
  "url": ""
  },
  "video": {
  "url": ""
  },
  "file": {
  "url": ""
  },
  "location": {
  "latitude": "",
  "longitude": ""
  },
  "email": {
  "from": {
  "name": "",
  "address": ""
  },
  "subject": "",
  "content": {},
  "headers": null
  }
  },
  "type": "text",
  "recipients": {
  "conversationIds": [
  "{{conversationId}}"
  ]
  },
  "intent": "replyConversationMessage",
  "label": "Notify that we didn't detect a hotdog",
  "highThroughput": false
  }
  }
  ],
  "id": "mwk5RoiCo"
  },
  "intent": "smsConditional"
  }
  },
  {
  "id": "8778c563-c045-4aa6-80e5-4c2a29b38b3f",
  "action": "endFlow",
  "options": {
  "intent": "endFlow"
  }
  }
  ],
  "id": "iuFXBNrWTr"
  },
  "intent": "smsConditional",
  "label": "Check if user sent an image"
  }
  }
  ],
  "published": true,
  "createdAt": "2020-08-28T18:25:19.665815708Z",
  "updatedAt": "2020-08-29T01:25:15.614170299Z",
  "revisionCount": 26
 }

Hasil

A chat interface shows a humorous exchange about detecting a hotdog in an image.A mobile chat interface shows an AI chatbot identifying a photo of a hot dog.


Walaupun ini adalah contoh yang menyenangkan, kami percaya bahwa jenis fungsionalitas ini dapat sangat berguna bagi pengguna kami. 

Jika Anda menginginkan fitur seperti ini yang terintegrasi di Flows, tulislah kepada tim dukungan kami untuk memberi tahu kami. 

Mari hubungkan Anda dengan pakar Bird.
Lihat kekuatan penuh dari Bird dalam 30 menit.

Dengan mengirimkan, Anda setuju Bird dapat menghubungi Anda tentang produk dan layanan kami.

Anda dapat berhenti berlangganan kapan saja. Lihat Pernyataan Privasi Bird untuk detail tentang pemrosesan data.

Perusahaan

Newsletter

Tetap terinformasi dengan Bird melalui pembaruan mingguan ke kotak masuk Anda.

Dengan mengirimkan, Anda setuju Bird dapat menghubungi Anda tentang produk dan layanan kami.

Anda dapat berhenti berlangganan kapan saja. Lihat Pernyataan Privasi Bird untuk detail tentang pemrosesan data.

Mari hubungkan Anda dengan pakar Bird.
Lihat kekuatan penuh dari Bird dalam 30 menit.

Dengan mengirimkan, Anda setuju Bird dapat menghubungi Anda tentang produk dan layanan kami.

Anda dapat berhenti berlangganan kapan saja. Lihat Pernyataan Privasi Bird untuk detail tentang pemrosesan data.

Perusahaan

Newsletter

Tetap terinformasi dengan Bird melalui pembaruan mingguan ke kotak masuk Anda.

Dengan mengirimkan, Anda setuju Bird dapat menghubungi Anda tentang produk dan layanan kami.

Anda dapat berhenti berlangganan kapan saja. Lihat Pernyataan Privasi Bird untuk detail tentang pemrosesan data.

Mari hubungkan Anda dengan pakar Bird.
Lihat kekuatan penuh dari Bird dalam 30 menit.

Dengan mengirimkan, Anda setuju Bird dapat menghubungi Anda tentang produk dan layanan kami.

Anda dapat berhenti berlangganan kapan saja. Lihat Pernyataan Privasi Bird untuk detail tentang pemrosesan data.

R

Reach

G

Grow

M

Manage

A

Automate

Perusahaan

Newsletter

Tetap terinformasi dengan Bird melalui pembaruan mingguan ke kotak masuk Anda.

Dengan mengirimkan, Anda setuju Bird dapat menghubungi Anda tentang produk dan layanan kami.

Anda dapat berhenti berlangganan kapan saja. Lihat Pernyataan Privasi Bird untuk detail tentang pemrosesan data.