Che cos'è Flow Builder?

Flow Builder (o Flows) è il motore di automazione visiva di Bird per creare flussi di comunicazione tra i vari canali — non è necessario alcun codice, anche se può essere esteso con codice personalizzato.

Perché utilizzare Google Cloud Functions con Flows?

Le Funzioni Cloud ti permettono di eseguire codice serverless per elaborare dati (come analizzare immagini o recuperare dati da un API esterna) e restituire i risultati al tuo flusso.

Cosa fa l'API Google Vision in questa configurazione?

Esegue l'analisi delle immagini, identificando oggetti, etichette o concetti (come “hot dog”) e restituisce dati strutturati al tuo Flow.

Come collego una Cloud Function a Flow Builder?

Usa il passaggio Recupera Variabili per chiamare l'endpoint HTTPS pubblico della funzione. La risposta (ad es., { "isHotDog": true } ) può essere utilizzata nei passaggi successivi.

Può essere utilizzato per casi aziendali reali?

Assolutamente. Lo stesso approccio può convalidare le foto di consegna, rilevare articoli danneggiati, riconoscere documenti o verificare i media caricati.

Cosa rende questa integrazione potente?

Combina visioni AI , e comunicazione multicanale , consentendo automazioni più intelligenti senza la necessità di mantenere l'infrastruttura.

Ho bisogno di esperienza nella programmazione per seguire?

Una conoscenza di base di JavaScript (per la Google Cloud Function) è utile, ma la maggior parte del processo - dalla connessione dei canali alla logica di flusso - è visiva e adatta ai principianti.

Come utilizzare Flows con Google Vision API e Google Cloud Functions

Uccello

6 ott 2020

Flow Builder

1 min read

Come utilizzare Flows con Google Vision API e Google Cloud Functions

Punti Chiave

- Flows è più di uno strumento no-code — è un motore di automazione flessibile che ti consente di estendere i flussi di lavoro con codice utilizzando servizi esterni come Google Cloud Functions o AWS Lambda.
- Questo tutorial dimostra come costruire un chatbot di Telegram che utilizza Google Vision API per identificare le immagini (come rilevare se una foto contiene un hotdog 🥪).
- L'esempio mostra come Flows possa facilmente connettersi a API di riconoscimento immagini per elaborare automaticamente i contenuti inviati dagli utenti.
- Gli sviluppatori possono sfruttare questa architettura per costruire automazioni nel mondo reale, come la verifica delle consegne, controlli d’identità o flussi di lavoro per il controllo qualità.
- Integrando Google Vision API all'interno di una Cloud Function si abilitano intuizioni potenziate da AI (rilevamento oggetti, fiducia nell'etichetta, estrazione di metadati) su cui Flows può agire dinamicamente.
- Il passo “Fetch Variables” in Flow Builder è il ponte — chiama la funzione cloud e memorizza la risposta dell'API per un uso successivo nella conversazione.
- I blocchi di risposta possono utilizzare variabili come {{isHotDog}} per personalizzare le risposte, trasformando i dati grezzi in messaggi di chat contestuali.
- Benché la demo sia giocosa, dimostra come gli sviluppatori possano mescolare logica no-code con funzioni serverless per sbloccare potenti capacità di automazione attraverso i canali di messaggistica.

Punti salienti del Q&A

Che cos'è Flow Builder?
Flow Builder (o Flows) è il motore di automazione visiva di Bird per creare flussi di comunicazione tra i vari canali — non è necessario alcun codice, anche se può essere esteso con codice personalizzato.
Perché utilizzare Google Cloud Functions con Flows?
Le Funzioni Cloud ti permettono di eseguire codice serverless per elaborare dati (come analizzare immagini o recuperare dati da un API esterna) e restituire i risultati al tuo flusso.
Cosa fa l'API Google Vision in questa configurazione?
Esegue l'analisi delle immagini, identificando oggetti, etichette o concetti (come “hot dog”) e restituisce dati strutturati al tuo Flow.
Come collego una Cloud Function a Flow Builder?
Usa il passaggio Recupera Variabili per chiamare l'endpoint HTTPS pubblico della funzione. La risposta (ad es., { "isHotDog": true }) può essere utilizzata nei passaggi successivi.
Può essere utilizzato per casi aziendali reali?
Assolutamente. Lo stesso approccio può convalidare le foto di consegna, rilevare articoli danneggiati, riconoscere documenti o verificare i media caricati.
Cosa rende questa integrazione potente?
Combina visioni AI, e comunicazione multicanale, consentendo automazioni più intelligenti senza la necessità di mantenere l'infrastruttura.
Ho bisogno di esperienza nella programmazione per seguire?
Una conoscenza di base di JavaScript (per la Google Cloud Function) è utile, ma la maggior parte del processo - dalla connessione dei canali alla logica di flusso - è visiva e adatta ai principianti.

Flows è un potente motore di automazione drag-and-drop per la creazione di flussi di comunicazione. Inizialmente l'abbiamo concepito come una soluzione senza codice, ma abbiamo scoperto che molti utenti possono ottenere comportamenti davvero potenti scrivendo un po' di codice per casi d'uso specifici. Questi frammenti di codice possono trovarsi all'interno di Flow Builder, o possono essere funzioni cloud di terze parti come le funzioni AWS Lambda o le Google Cloud Functions.

Questa è una semplice dimostrazione utilizzando Google Cloud Functions e Flows per fare riconoscimento delle immagini su un'immagine inviata su Telegram.

Flussi e oltre

Come sviluppatore di Flows, penso spesso a chi sono i nostri utenti, perché utilizzano Flows e cosa hanno bisogno per raggiungere i loro obiettivi; e poi, quali funzionalità dobbiamo implementare per servire al meglio quegli utenti.

Flows è un potente motore di automazione drag-and-drop per creare flussi di comunicazione. Lo abbiamo inizialmente concepito come una soluzione no-code, ma abbiamo scoperto che molti utenti possono ottenere comportamenti davvero potenti scrivendo del codice per casi d'uso specifici. Ad esempio, puoi creare flussi che generano automaticamente lead e casi in Salesforce basati sulle interazioni dei clienti attraverso più canali. Questi frammenti di codice possono trovarsi all'interno di Flows, oppure possono essere funzioni cloud di terze parti come funzioni AWS Lambda o funzioni Google Cloud.

Un caso d'uso interessante: Riconoscimento Immagini

Per un esempio breve e divertente, ti mostrerò come implementare un'app che riconosce i hot dog. Configureremo un flusso in Flows, che riceverà immagini dagli utenti e deciderà se hanno inviato un hot dog o meno.

Per molti dei nostri clienti, questo tipo di riconoscimento delle immagini può essere molto potente. Immagina di gestire un servizio di consegna e volessi verificare automaticamente le consegne riuscite. Simile a ciò che sto per mostrarti, potresti utilizzare dati sulla posizione, foto dei pacchi e persino firme dei destinatari per creare un flusso di verifica in Flows.

Un caso d'uso interessante: Riconoscimento Immagini

Un piano per il successo

Per prima cosa, imposteremo una funzione cloud, che riceve una richiesta con un URL a un'immagine, poi utilizza un'API di riconoscimento delle immagini per elaborare l'immagine, e risponde se c'è un hotdog nell'immagine o meno.

Poi costruiremo un flusso, che riceve un messaggio da un utente tramite un canale di messaggistica (Telegram in questo caso), esegue la funzione cloud sopra e risponde all'utente se c'è un hotdog in una foto che ha inviato.

Impostare la Google Cloud Function

In primo luogo, dobbiamo configurare una funzione cloud. Per iniziare rapidamente, segui il tutorial veloce delle Cloud Functions di Google. Come 'Attivatore' scegli l'attivazione HTTP, ambiente di esecuzione: Node.js 10, e nel campo del codice sorgente inserisci il frammento di codice. È un codice semplice, che verifica se la richiesta contiene codice JSON e risponde sì o no.

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

Successivamente, dovrai distribuire questa funzione. Per testarla all'interno della Google Cloud Platform, segui i passaggi del tutorial.

Per testare dal tuo browser, vai al seguente URL inserendo l'indirizzo specifico per la tua funzione:

https://il-tuo-indirizzo-funzione.cloudfunctions.net/HotDogOrNot/?url=hello dovrebbe restituire {“isHotDog”: true} e l'indirizzo https://il-tuo-indirizzo-funzione.cloudfunctions.net/HotDogOrNot dovrebbe restituire {“isHotDog”: false}.

Ottimo lavoro! Hai configurato una funzione cloud di Google. Ora dobbiamo rendere la nostra funzione cloud più intelligente.

/**
 * 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 }));
 };

Successivamente, dovrai distribuire questa funzione. Per testarla all'interno della Google Cloud Platform, segui i passaggi del tutorial.

Per testare dal tuo browser, vai al seguente URL inserendo l'indirizzo specifico per la tua funzione:

Ottimo lavoro! Hai configurato una funzione cloud di Google. Ora dobbiamo rendere la nostra funzione cloud più intelligente.

/**
 * 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 }));
 };

Successivamente, dovrai distribuire questa funzione. Per testarla all'interno della Google Cloud Platform, segui i passaggi del tutorial.

Per testare dal tuo browser, vai al seguente URL inserendo l'indirizzo specifico per la tua funzione:

Ottimo lavoro! Hai configurato una funzione cloud di Google. Ora dobbiamo rendere la nostra funzione cloud più intelligente.

Impostare l'API Google Vision

Per renderlo più intelligente, aggiungiamo il riconoscimento delle immagini. A tale scopo utilizzeremo il Google Vision API. Per iniziare, segui i passaggi da 1 a 4 nella guida rapida all'API Vision. Nel tutorial attiverai l'API Vision e creerai un account di servizio per utilizzarla.

Ora torna alla funzione cloud che hai creato. Attiva "Variabili di ambiente, networking, timeout e altro" e nel file "Account di servizio" scegli l'account di servizio VisionAPI che hai appena creato. Ora possiamo accedere all'API Vision all'interno della nostra funzione.

Advanced options interface of a cloud service configuration.

Ora cambiamo il codice. Nella scheda "Package.json", inserisci questo codice. Aggiungerà la libreria Google Vision API come dipendenza alla tua funzione.

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

sulla scheda "Index.js" aggiorna il codice esistente con il seguente frammento di codice.

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

Qual è la differenza rispetto alla versione precedente? Abbiamo aggiunto una richiesta all'API Vision, che restituisce le 'etichette' trovate nell'immagine. Poi filtriamo queste etichette in base alla descrizione: se contiene “hot dog” e se ha una fiducia maggiore del 60% in quell'etichetta. Se rimane almeno 1 etichetta dopo il filtro, significa che abbiamo trovato un hotdog nell'immagine.

Caratteristiche dell'API Vision	Cosa consente nei flussi
Etichette degli oggetti (es. “hot dog”)	Identificare oggetti e automatizzare azioni basate sul rilevamento
Punteggi di fiducia	Controllare la precisione (es. > 60% di fiducia attiva il flusso di lavoro)
Estrazione di metadati	Includere contesto come numeri, oggetti e ambiente
Libreria espandibile	Aggiungere più rilevamento alimentato da IA oltre agli hot dog

Per capire come funziona il Google Vision API e per visualizzare esempi di risposte, controlla la documentazione ufficiale dell'API Vision.

Dopo, distribuisci la nuova versione della nostra funzione. Per testarla dal tuo browser, trova qualsiasi immagine di un hotdog e salva il suo URL. Ora vai all'URL della tua funzione (inserendo l'indirizzo corretto per la tua funzione) https://il-tuo-indirizzo-funzione.cloudfunctions.net/HotDogOrNot?url=url_dell_immagine e sostituisci il “url_dell_immagine” con un URL all'immagine trovata. Se c'è un hotdog nell'immagine, la pagina restituirà {“isHotDog”: true}.

Ora colleghiamo questa funzione a Flow Builder.

Ora cambiamo il codice. Nella scheda "Package.json", inserisci questo codice. Aggiungerà la libreria Google Vision API come dipendenza alla tua funzione.

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

sulla scheda "Index.js" aggiorna il codice esistente con il seguente frammento di codice.

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

Caratteristiche dell'API Vision	Cosa consente nei flussi
Etichette degli oggetti (es. “hot dog”)	Identificare oggetti e automatizzare azioni basate sul rilevamento
Punteggi di fiducia	Controllare la precisione (es. > 60% di fiducia attiva il flusso di lavoro)
Estrazione di metadati	Includere contesto come numeri, oggetti e ambiente
Libreria espandibile	Aggiungere più rilevamento alimentato da IA oltre agli hot dog

Per capire come funziona il Google Vision API e per visualizzare esempi di risposte, controlla la documentazione ufficiale dell'API Vision.

Ora colleghiamo questa funzione a Flow Builder.

Ora cambiamo il codice. Nella scheda "Package.json", inserisci questo codice. Aggiungerà la libreria Google Vision API come dipendenza alla tua funzione.

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

sulla scheda "Index.js" aggiorna il codice esistente con il seguente frammento di codice.

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

Caratteristiche dell'API Vision	Cosa consente nei flussi
Etichette degli oggetti (es. “hot dog”)	Identificare oggetti e automatizzare azioni basate sul rilevamento
Punteggi di fiducia	Controllare la precisione (es. > 60% di fiducia attiva il flusso di lavoro)
Estrazione di metadati	Includere contesto come numeri, oggetti e ambiente
Libreria espandibile	Aggiungere più rilevamento alimentato da IA oltre agli hot dog

Per capire come funziona il Google Vision API e per visualizzare esempi di risposte, controlla la documentazione ufficiale dell'API Vision.

Ora colleghiamo questa funzione a Flow Builder.

Creare un flusso in Flussi

Accedi al Bird Dashboard o registrati per un account se non ne hai uno.

Se sei nuovo a Flows e non hai canali impostati, dovrai andare nella pagina di configurazione del canale e scegliere di impostare il canale Telegram. Ho scelto Telegram per questa demo perché è facile e veloce da configurare.

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

Ora hai un canale che possiamo utilizzare in Flows. Vai alla pagina Flows, crea un nuovo flusso personalizzato e scegli il trigger del canale “Telegram”.

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

Verrai reindirizzato a una pagina del flusso, dove dovresti scegliere il tuo canale Telegram come trigger, nel nostro caso è “Hotdog”. Si prega di aggiungere 2 passaggi: “Recupera variabili” e “Rispondi al messaggio del canale”.

All'interno del passaggio “Recupera variabili” chiameremo la nostra funzione cloud e otterremo la risposta nella variabile “isHotDog” che conterrà “true” o “false” come risposta dalla funzione GoogleCloud. Nel campo URL si prega di inserire l'URL della tua funzione https://your-function-address.cloudfunctions.net/HotDogOrNot e compilare tutti gli altri campi come nell'immagine "Contenuto del passaggio Recupera variabili".

E all'interno del passaggio “Rispondi al messaggio del canale” risponderemo al cliente con un messaggio contenente la risposta sì o no. Per questo inserisci nel campo "Rispondi con messaggio" il seguente testo "Hotdog nell'immagine? {{isHotDog}}".