Wie man Flows mit der Google Vision API und Google Cloud Functions verwendet
Vogel
06.10.2020
Flow-Builder
1 min read

Wichtige Erkenntnisse
Flows is more than a no-code tool — es ist eine flexible Automatisierungs-Engine, die es Ihnen ermöglicht, Workflows mit Code zu erweitern, indem Sie externe Dienste wie Google Cloud Functions oder AWS Lambda nutzen.
Dieses Tutorial zeigt, wie man einen Telegram-Chatbot erstellt, der die Google Vision API verwendet, um Bilder zu identifizieren (wie z.B., wenn festgestellt wird, ob ein Foto einen Hotdog 🥪 enthält).
Das Beispiel zeigt, wie Flows einfach an Bilderkennungs-APIs angebunden werden kann, um vom Benutzer eingereichte Inhalte automatisch zu verarbeiten.
Entwickler können diese Architektur nutzen, um Automatisierungen in der realen Welt zu erstellen, wie beispielsweise Lieferüberprüfungen, ID-Checks oder Qualitätskontroll-Workflows.
Die Integration der Google Vision API in eine Cloud Function ermöglicht KI-gestützte Einblicke (Objekterkennung, Label-Vertrauen, Metadatenextraktion), auf die Flows dynamisch reagieren kann.
Der Schritt „Fetch Variables“ im Flow Builder ist die Brücke — er ruft die Cloud-Funktion auf und speichert die API-Antwort zur weiteren Verwendung im Gespräch.
Antwortblöcke können Variablen wie {{isHotDog}} verwenden, um Antworten zu personalisieren und Rohdaten in kontextbezogene Chatnachrichten zu verwandeln.
Obwohl die Demo spielerisch ist, demonstriert sie, wie Entwickler No-Code-Logik mit serverlosen Funktionen mischen können, um leistungsstarke Automatisierungsfähigkeiten über Messaging-Kanäle hinweg freizuschalten.
Q&A Highlights
Was ist Flow Builder?
Flow Builder (oder Flows) ist Birds visuelle Automatisierungsengine zur Erstellung von Kommunikationsworkflows über verschiedene Kanäle hinweg — kein Code erforderlich, obwohl er mit benutzerdefiniertem Code erweitert werden kann.
Warum Google Cloud Functions mit Flows verwenden?
Cloud Functions ermöglichen es Ihnen, serverlosen Code auszuführen, um Daten zu verarbeiten (wie das Analysieren von Bildern oder das Abrufen externer API-Daten) und die Ergebnisse zurück in Ihren Flow einzuspeisen.
Was macht Google Vision API in diesem Setup?
Es führt eine Bildanalyse durch — identifiziert Objekte, Labels oder Konzepte (wie „Hot Dog“) — und gibt strukturierte Daten an Ihren Flow zurück.
Wie verbinde ich eine Cloud Function mit Flow Builder?
Verwenden Sie den Schritt Fetch Variables, um den öffentlichen HTTPS-Endpunkt der Funktion aufzurufen. Die Antwort (z. B.
{ "isHotDog": true }) kann in späteren Schritten verwendet werden.Kann dies für echte Business Cases verwendet werden?
Absolut. Der gleiche Ansatz kann Lieferfotos validieren, beschädigte Gegenstände erkennen, Dokumente erkennen oder hochgeladene Medien überprüfen.
Was macht diese Integration mächtig?
Es kombiniert AI vision, serverlose Flexibilität, und mehrkanalige Kommunikation und ermöglicht intelligentere Automatisierungen, ohne Infrastruktur zu warten.
Brauche ich Programmiererfahrung, um folgen zu können?
Grundkenntnisse in JavaScript (für die Google Cloud Function) helfen, aber der Großteil des Prozesses – vom Verbinden der Kanäle bis zur Flusslogik – ist visuell und anfängerfreundlich.
Flows ist eine leistungsstarke Drag-and-Drop-Automatisierungs-Engine zur Erstellung von Kommunikationsabläufen. Ursprünglich haben wir es als No-Code-Lösung konzipiert, aber wir haben festgestellt, dass viele Benutzer durch das Schreiben von etwas Code für spezifische Anwendungsfälle wirklich leistungsstarkes Verhalten erzielen konnten. Diese Code-Snippets können sich innerhalb des Flow Builder befinden, oder sie können 3rd-Party-Cloud-Funktionen wie AWS Lambda-Funktionen oder Google Cloud Functions sein.
Dies ist eine einfache Demonstration der Verwendung von GoogleCloud Functions und Flows, um Bildkennung auf einem über Telegram gesendeten Bild durchzuführen.
Flows und Beyond
Als Entwickler von Flows denke ich oft darüber nach, wer unsere Nutzer sind, warum sie Flows verwenden und was sie benötigen, um ihre Ziele zu erreichen; und dann, welche Funktionen wir implementieren müssen, um diesen Nutzern bestmöglich zu dienen.
Flows ist eine leistungsstarke Drag-and-Drop-Automatisierungsmaschine zur Erstellung von Kommunikationsabläufen. Ursprünglich haben wir es als No-Code-Lösung konzipiert, aber wir fanden heraus, dass viele Nutzer wirklich leistungsstarke Funktionen durch das Schreiben von Code für spezifische Anwendungsfälle erreichen konnten. Zum Beispiel können Sie Flows erstellen, die automatisch Leads und Fälle in Salesforce generieren basierend auf Kundeninteraktionen über mehrere Kanäle hinweg. Diese Codeabschnitte können innerhalb von Flows sein, oder sie können 3rd Party-Cloud-Funktionen wie AWS Lambda-Funktionen oder Google Cloud Functions sein.
Ein interessantes Anwendungsbeispiel: Bilderkennung
Für ein kurzes und lustiges Beispiel werde ich Ihnen zeigen, wie man eine App implementiert, die Hotdogs erkennt. Wir werden einen Flow in Flows einrichten, der Bilder von Nutzern empfängt und entscheidet, ob sie einen Hotdog geschickt haben oder nicht.
Für viele unserer Kunden kann diese Art der Bilderkennung sehr leistungsstark sein. Stellen Sie sich vor, Sie betreiben einen Lieferservice und möchten Lieferungen automatisch verifizieren. Ähnlich wie ich es Ihnen zeigen werde, könnten Sie Standortdaten, Fotos von Paketen und sogar Unterschriften der Empfänger verwenden, um einen Verifizierungs-Flow in Flows zu erstellen.
Ein Plan für Erfolg
Einrichten der Google Cloud Function
Zuerst müssen wir eine Cloud-Funktion einrichten. Um schnell zu starten, folgen Sie Googles Cloud Functions quickstart tutorial. Als ‚Trigger‘ wählen Sie HTTP-Auslöser, Ausführungsumgebung: Node.js 10, und fügen Sie im Quellcode-Feld den Codeausschnitt ein. Es ist ein einfacher Code, der überprüft, ob die Anfrage JSON-Code enthält und mit ja oder nein antwortet.

Als Nächstes müssen Sie diese Funktion bereitstellen. Um sie innerhalb von Google Cloud Platform zu testen, folgen Sie den Schritten aus dem Tutorial.
Um sie aus Ihrem Browser zu testen, gehen Sie zur folgenden URL und fügen Sie die spezifische Adresse für Ihre Funktion ein:
https://your-function-address.cloudfunctions.net/HotDogOrNot/?url=hello sollte {“isHotDog”: true} zurückgeben und die Adresse https://your-function-address.cloudfunctions.net/HotDogOrNot sollte {“isHotDog”: false} zurückgeben.
Gute Arbeit! Sie haben eine Google Cloud-Funktion eingerichtet. Jetzt müssen wir unsere Cloud-Funktion intelligenter machen.
Einrichtung der Google Vision API
Um es intelligenter zu machen, fügen wir Bilderkennung hinzu. Zu diesem Zweck verwenden wir die Google Vision API. Um loszulegen, folgen Sie den Schritten 1-4 im Vision API Schnellstart-Leitfaden. Im Tutorial aktivieren Sie die Vision API und erstellen ein Dienstkonto, um es zu nutzen.
Kehren Sie nun zur erstellten Cloud-Funktion zurück. Aktivieren Sie „Umgebungsvariablen, Netzwerkeinstellungen, Zeitüberschreitungen und mehr“ und wählen Sie in der Datei „Servicekonto“ das soeben erstellte VisionAPI-Dienstkonto aus. Nun können wir innerhalb unserer Funktion auf die Vision API zugreifen.

Jetzt ändern wir den Code. Fügen Sie auf einer „Package.json“-Registerkarte diesen Code ein. Er fügt Ihrer Funktion die Google Vision API-Bibliothek als Abhängigkeit hinzu.
Aktualisieren Sie auf der Registerkarte "Index.js" den vorhandenen Code mit dem folgenden Code-Snippet.

Was ist der Unterschied zur vorherigen Version? Wir haben eine Anfrage an VisionAPI hinzugefügt, die die ‘labels’ zurückgibt, die sie auf dem Bild gefunden hat. Dann filtern wir diese Labels nach Beschreibung: ob es „Hotdog“ enthält und ob es eine Zuversicht von mehr als 60 % in dieses Label hat. Wenn nach dem Filtern mindestens 1 Label übrig bleibt, bedeutet das, dass wir einen Hotdog auf dem Bild gefunden haben.
Um zu verstehen, wie die Google Vision API funktioniert, und um Beispielsantworten anzusehen, lesen Sie die offizielle Vision API-Dokumentation.
Danach bereitstellen der neuen Version unserer Funktion. Um es von Ihrem Browser aus zu testen, suchen Sie ein beliebiges Bild eines Hotdogs und speichern Sie die URL. Gehen Sie nun zur URL Ihrer Funktion (indem Sie die richtige Adresse für Ihre Funktion einfügen) https://your-function-address.cloudfunctions.net/HotDogOrNot?url=url_to_image und ersetzen Sie „url_to_image“ durch eine URL des gefundenen Bildes. Wenn sich ein Hotdog auf dem Bild befindet, gibt die Seite {„isHotDog“: true} zurück.
Jetzt verbinden wir diese Funktion mit dem Flow Builder.
Erstellen eines Flows in Flows
Melden Sie sich im Bird Dashboard an oder registrieren Sie sich für ein Konto, wenn Sie noch keins haben.
Wenn Sie neu bei Flows sind und noch keine Kanäle eingerichtet haben, müssen Sie zur Kanaleinrichtungsseite gehen und wählen, den Telegram-Kanal einzurichten. Ich habe Telegram für diese Demo gewählt, weil es einfach und schnell einzurichten ist.

Jetzt haben Sie einen Kanal, den wir in Flows verwenden können. Gehen Sie zur Flows-Seite, erstellen Sie einen neuen benutzerdefinierten Flow und wählen Sie den „Telegram“-Kanal-Trigger.

Sie werden auf eine Flow-Seite weitergeleitet, auf der Sie Ihren Telegram-Kanal als Auslöser auswählen sollten, in unserem Fall ist es „Hotdog“. Bitte fügen Sie 2 Schritte hinzu: „Variablen abrufen“ und „Nachricht an Kanal antworten“.
Im Schritt „Variablen abrufen“ werden wir unsere Cloud-Funktion aufrufen und die Antwort in die Variable „isHotDog“ abrufen, die „wahr“ oder „falsch“ als Antwort von der GoogleCloud-Funktion enthalten wird. Im URL-Feld bitte die URL zu Ihrer Funktion einfügen https://your-function-address.cloudfunctions.net/HotDogOrNot und alle anderen Felder wie auf dem Bild „Inhalt des Variablenabrufschritts“ ausfüllen.
Und im Schritt „Nachricht an Kanal antworten“ werden wir dem Kunden mit einer Nachricht antworten, die die Ja- oder Nein-Antwort enthält. Für diese fügen Sie im Feld „Mit Nachricht antworten“ folgenden Text ein: „Hotdog auf dem Bild? {{isHotDog}}“.


Wenn Sie Probleme beim Erstellen des Flows haben, können Sie das folgende Snippet verwenden:

Um es zu testen, senden Sie ein Bild an Ihren Telegram-Bot.
Bis jetzt sieht es cool aus! Wir haben einen kleinen Chatbot erstellt, der Bilder überprüft, die Kunden senden. Um es hübscher zu machen, fügen wir einige weitere Schritte hinzu, wie unten gezeigt:

Wenn Sie Probleme beim Erstellen des Flows haben, können Sie das folgende Snippet verwenden:
Ergebnisse


Während dies ein lustiges Beispiel ist, glauben wir, dass diese Art von Funktionalität für unsere Benutzer sehr nützlich sein kann.
Wenn Sie mehr Funktionen wie diese in Flows integriert haben möchten, schreiben Sie an unser Support-Team, um uns dies mitzuteilen.



