كيف تستخدم Flows مع Google Vision API و Google Cloud Functions

Bird

06‏/10‏/2020

منشئ التدفق

1 min read

كيف تستخدم Flows مع Google Vision API و Google Cloud Functions

تُعتبر Flows محرك أتمتة قوي يسمح بالسحب والإفلات لإنشاء تدفقات اتصالات. في البداية قمنا بتصميمه كحل بدون كود، لكننا وجدنا أن العديد من المستخدمين يمكنهم الحصول على سلوك قوي للغاية من خلال كتابة بعض الأكواد لحالات استخدام محددة. يمكن أن تكون هذه الأكواد داخل Flow Builder، أو يمكن أن تكون وظائف سحابية من جهات خارجية مثل وظائف AWS Lambda أو وظائف Google Cloud.

هذه مجرد مظاهرة بسيطة باستخدام GoogleCloud Functions وFlows للقيام بالتعرف على الصور للصورة المرسلة على Telegram.

التدفقات وما بعدها

بصفتي مطورًا لـ Flows، أفكر غالبًا في من هم مستخدمونا، ولماذا يستخدمون Flows، وما الذي يحتاجون إليه لتحقيق أهدافهم؛ ثم، أي الميزات التي نحتاج إلى تنفيذها لخدمة هؤلاء المستخدمين بأفضل طريقة.

تُعد Flows أداة قوية لأتمتة العمليات باستخدام السحب والإفلات لإنشاء تدفقات الاتصالات. لقد صممناها في البداية كحل بدون كود، لكننا وجدنا أن العديد من المستخدمين يمكنهم الحصول على سلوك قوي حقًا بكتابة بعض الكود لحالات استخدام محددة. على سبيل المثال، يمكنك إنشاء تدفقات تولد بشكل تلقائي العملاء المحتملين والحالات في Salesforce استنادًا إلى تفاعلات العملاء عبر قنوات متعددة. يمكن وضع هذه الأكواد داخل Flows، أو يمكن أن تكون وظائف سحابية من طرف ثالث مثل وظائف AWS Lambda أو وظائف Google Cloud. 

حالة استخدام مثيرة للاهتمام: التعرف على الصور 

كمثال قصير ومضحك، سأريك كيف تنفذ تطبيقًا يتعرف على النقانق. سنقوم بإعداد تدفق في Flows، سيستقبل الصور من المستخدمين ويقرر، ما إذا كانوا قد أرسلوا هوت دوج أم لا.

بالنسبة للعديد من عملائنا، يمكن أن يكون هذا النوع من التعرف على الصور قويًا جدًا. تخيل أنك تدير خدمة توصيل وأردت التحقق تلقائيًا من عمليات التسليم الناجحة. مشابه لما سأعرضه، يمكنك استخدام بيانات الموقع وصور الطرود وحتى توقيعات المستلمين لإنشاء تدفق تحقق في Flows. 

خطة للنجاح

أولاً، سنقوم بإعداد وظيفة سحابية، تتلقى طلبًا مع رابط URL لصورة، ثم تستخدم واجهة برمجة التطبيقات للتعرف على الصور لمعالجة الصورة، وترد ما إذا كان هناك نقانق في الصورة أم لا.

ثم سنقوم ببناء تدفق، يتلقى رسالة من مستخدم عبر قناة الرسائل (تيليجرام في هذه الحالة)، ينفذ الوظيفة السحابية المذكورة أعلاه، ويرد على المستخدم ما إذا كان هناك نقانق في الصورة التي أرسلها.

أولاً، سنقوم بإعداد وظيفة سحابية، تتلقى طلبًا مع رابط URL لصورة، ثم تستخدم واجهة برمجة التطبيقات للتعرف على الصور لمعالجة الصورة، وترد ما إذا كان هناك نقانق في الصورة أم لا.

ثم سنقوم ببناء تدفق، يتلقى رسالة من مستخدم عبر قناة الرسائل (تيليجرام في هذه الحالة)، ينفذ الوظيفة السحابية المذكورة أعلاه، ويرد على المستخدم ما إذا كان هناك نقانق في الصورة التي أرسلها.

أولاً، سنقوم بإعداد وظيفة سحابية، تتلقى طلبًا مع رابط URL لصورة، ثم تستخدم واجهة برمجة التطبيقات للتعرف على الصور لمعالجة الصورة، وترد ما إذا كان هناك نقانق في الصورة أم لا.

ثم سنقوم ببناء تدفق، يتلقى رسالة من مستخدم عبر قناة الرسائل (تيليجرام في هذه الحالة)، ينفذ الوظيفة السحابية المذكورة أعلاه، ويرد على المستخدم ما إذا كان هناك نقانق في الصورة التي أرسلها.

إعداد وظيفة Google Cloud

أولاً، سنحتاج إلى إعداد وظيفة سحابية. لبدء الاستخدام بسرعة، اتبع دليل بدء التشغيل السريع لوظائف Google السحابية. كـ‘مشغل’ اختر مشغل HTTP، بيئة التنفيذ: Node.js 10، وفي حقل التعليمات البرمجية المصدر أدخل الشيفرة البرمجية. إنها شيفرة برمجية بسيطة، تتحقق مما إذا كان الطلب يحتوي على شيفرة JSON وتجيب بنعم أو لا.

/**
 * 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.


بعد ذلك، ستحتاج إلى نشر هذه الوظيفة. لاختبارها داخل منصة Google Cloud، اتبع الخطوات من الدليل. 

لاختبارها من متصفحك، اذهب إلى العنوان التالي وأدخل العنوان المحدد للوظيفة الخاصة بك:

https://your-function-address.cloudfunctions.net/HotDogOrNot/?url=hello يجب أن يعيد {“isHotDog”: true} والعنوان https://your-function-address.cloudfunctions.net/HotDogOrNot يجب أن يعيد {“isHotDog”: false}.

عمل جيد! لقد قمت بإعداد وظيفة سحابية من Google. الآن نحتاج إلى جعل الوظيفة السحابية أكثر ذكاءً.

إعداد واجهة برمجة تطبيقات Google Vision

لجعلها أكثر ذكاءً، دعنا نضيف التعرف على الصور. لهذا الغرض، سنستخدم Google Vision API. للبدء، اتبع الخطوات 1-4 في دليل البدء السريع لواجهة Vision API. في البرنامج التعليمي ستقوم بتفعيل واجهة Vision API وإنشاء حساب خدمة لاستخدامها.

الآن عُد إلى وظيفة السحابة التي أنشأتها. فعّل “متغيرات البيئة، الشبكات، المهلات وأكثر” وفي ملف “حساب الخدمة” اختر حساب خدمة VisionAPI الذي أنشأته للتو. الآن يمكننا الوصول إلى واجهة Vision API داخل وظيفتنا.

Advanced options interface of a cloud service configuration.


الآن دعنا نغير الكود. في تبويب “Package.json”، أدخل هذا الكود. سيضيف مكتبة Google Vision API كاعتماد لوظيفتك.

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


في تبويب "Index.js" حدّث الكود الحالي مع المقطع البرمجي التالي.

/**
 * 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.


ما الفرق مقارنةً بالإصدار السابق؟ أضفنا طلبًا إلى VisionAPI، الذي يُرجع ‘التصنيفات’ التي وجدها على الصورة.  ثم نقوم بتصفية هذه التصنيفات وفقًا للوصف: إذا كان يحتوي على “hot dog” وإذا كان لديه ثقة تتجاوز 60% في هذا التصنيف. إذا كان هناك على الأقل تصنيف واحد متبقي بعد التصفية، فهذا يعني أننا وجدنا هوت دوغ في الصورة.

لفهم كيف تعمل Google Vision API ولمشاهدة استجابات النموذج، تحقق من وثائق Vision API الرسمية.

بعد ذلك، قم بنشر الإصدار الجديد من وظيفتنا. لاختباره من متصفحك، ابحث عن أي صورة لهوت دوغ واحفظ رابطها. الآن اذهب إلى عنوان URL الخاص بوظيفتك (بإدخال العنوان الصحيح لوظيفتك) https://your-function-address.cloudfunctions.net/HotDogOrNot?url=url_to_image واستبدل “url_to_image” برابط للصورة المعثور عليها. إذا كان هناك هوت دوغ في الصورة، ستُرجع الصفحة {“isHotDog”: true}.

الآن دعونا نربط هذه الوظيفة بـ Flow Builder.

إنشاء تدفق في Flows

قم بتسجيل الدخول إلى لوحة تحكم Bird أو اشترك للحصول على حساب إذا لم يكن لديك حساب.

إذا كنت جديدًا في Flows ولم تقم بإعداد أي قنوات، فستحتاج إلى الذهاب إلى صفحة إعداد القنوات، واختيار إعداد قناة Telegram. اخترت Telegram لهذا العرض التوضيحي لأنه من السهل والسريع الإعداد.

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


الآن لديك قناة يمكننا استخدامها في Flows. اذهب إلى صفحة Flows، قم بإنشاء تدفق مخصص جديد، واختر مشغل قناة "Telegram".

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


سيتم توجيهك إلى صفحة التدفق، حيث يجب عليك اختيار قناة Telegram كمشغل، في حالتنا هي "Hotdog". يرجى إضافة خطوتين: "جلب المتغيرات" و"الرد على رسالة القناة".

داخل خطوة "جلب المتغيرات"، سنقوم باستدعاء وظيفة السحابة الخاصة بنا واسترداد الرد في المتغير "isHotDog" والذي سيتضمن "true" أو "false" كاستجابة من وظيفة GoogleCloud. في حقل URL، يرجى إدخال عنوان URL لوظيفتك https://your-function-address.cloudfunctions.net/HotDogOrNot واملأ جميع الحقول الأخرى كما في صورة محتوى خطوة "جلب المتغيرات".

وفي خطوة "الرد على رسالة القناة"، سنرد على العميل برسالة تحتوي على الإجابة بنعم أو لا. لذلك، أدخل في حقل "الرد بالرسالة" النص التالي "هل النقانق في الصورة؟ {{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.

‍

إذا كانت لديك أي مشكلة في بناء التدفق، يمكنك استخدام الكود التالي:

{
  "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.


لاختباره، أرسل صورة إلى بوت Telegram الخاص بك.

حتى الآن، يبدو رائعًا! لقد أنشأنا روبوت دردشة صغيرًا، الذي يتحقق من صور العملاء المرسلة. لجعله أكثر جمالًا، دعونا نضيف بعض الخطوات كما هو موضح أدناه: 


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


إذا كانت لديك أي مشكلة في بناء التدفق، يمكنك استخدام الكود التالي:

{
  "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
 }

النتائج

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.


بينما هذا مثال ممتع، نحن نعتقد أن هذه النوعية من الوظائف يمكن أن تكون مفيدة للغاية لمستخدمينا. 

إذا كنت ترغب في ميزات أكثر مثل هذه مضمنة في Flows، اكتب إلى فريق الدعم لدينا لإعلامنا. 

أخبار أخرى

اقرأ المزيد من هذه الفئة

A person is standing at a desk while typing on a laptop.

منصة AI-native الكاملة التي تتماشى مع نمو عملك.

اتصل بالمبيعات

ابدأ مجانًا

© 2025 Bird

اتصل بالدعم

A person is standing at a desk while typing on a laptop.

منصة AI-native الكاملة التي تتماشى مع نمو عملك.

اتصل بالمبيعات

ابدأ مجانًا

© 2025 Bird

اتصل بالدعم

A person is standing at a desk while typing on a laptop.

منصة AI-native الكاملة التي تتماشى مع نمو عملك.

اتصل بالمبيعات

ابدأ مجانًا

© 2025 Bird

اتصل بالدعم