Cârlige web Dialogflow: cum să vă dezvoltați local și să vă implementați în funcțiile Cloud

Când echipa noastră a început să construiască chatbot-ul Nila la LINE HACK 2018, știam la fel de mult ca Jon Snow despre cum să construim un cârlig web. Unii dintre noi am avut o experiență în ceea ce privește Firebase și scrierea funcțiilor Cloud, așa că am presupus că va fi destul de ușor, mai ales când am găsit Editorul Inline - dar am ajuns să construim prima versiune complet pe Glitch, un mediu live pentru rularea Node. Aplicații .js. În timp ce Glitch este excelent pentru învățare, ne-am fi putut ușura viața prin crearea unui mediu de dezvoltare locală.

Acest articol explică modul de a construi un cârlig web prin dezvoltarea locală și implementarea în cloud. Este un set de sfaturi și trucuri care vor face dezvoltarea cârligului web mai rapidă, practică și mai sigură:

  • Mai repede - rulează local, se implementează numai atunci când trebuie
  • Practic - depanați aplicația dvs. cu solicitări live de pe cârligul dvs. web
  • Mai sigur - linting și completarea automată de la editorul preferat

1. Începeți cu un șablon și rulați-l local

Deși în acest articol se pune accent pe conexiunile web Dialogflow, bănuiesc că acești pași sunt identici pentru dezvoltarea oricărui cârlig web. Dacă utilizați Dialogflow, atunci puteți începe cu Editorul Inline pentru îndeplinire. Primul lucru de făcut este să apucați codul respectiv și să îl modificați pentru a rula local.

În simpleServer.js, am preluat codul de împlinire Dialogflow din Inline Editor, am eliminat codul specific Firebase și am adăugat expres pentru a servi cârligul web. Veți avea nevoie de un pachet.json cu dependențele pentru expres, flux-dialog-îndeplinire și acțiuni-pe-google. Rulați cârligul web de către nodul simpleServer.js și apoi deschideți http: // localhost: 8080 / pentru a verifica dacă funcționează.

2. Utilizați ngrok pentru a servi http local la https publice

Ngrok este un serviciu gratuit care vă oferă un URL https securizat public pentru serverul dvs. web local. Puteți instala ngrok global (descărcați binarul sau npm install global), dar preferința mea este să instalați ca o dependență dev:

npm instalați ngrok - salvare-dev

Și apoi modificați pachetul dvs..json:

  ...
  "scripturi": {
    "tunel": "ngrok http 8080"
  },

Acum, de fiecare dată când doriți să creați o adresă URL https pentru mediul dvs. de dezvoltare locală, utilizați doar tunelul de rulare npm. Ngrok va rula și va crea un URL https:

Se execută ngrok pentru a obține o adresă URL https publică pentru serverul dvs. local

Acum puteți copia URL-ul https sub „Redirecționare” (evidențiat cu roșu) pentru a fi cârligul web de îndeplinire în Dialogflow:

Configurați îndeplinirea dialogului pentru a utiliza o adresă URL de redirecționare ngrok

În acest moment, aș testa că totul funcționează trimițând un „salut” în consola de testare a Dialogflow:

Motivul pentru care prefer să instalez ca dependență dev este acela că, atunci când un alt dezvoltator se alătură echipei, nu au nevoie să instaleze nimic în plus - pot folosi doar tunelul npm run pentru a-și crea URL-ul https.

Puteți renunța la ngrok folosind Ctrl-C (și nu va mai servi adresa URL publică). De fiecare dată când reporniți ngrok, veți primi o nouă adresă URL, ceea ce înseamnă că va trebui să actualizați adresa URL în consola Dialogflow. O modalitate este de a trece la unul dintre planurile plătite de ngrok.

3. Reîncărcare (nodemon) și depanare (cod VS)

În acest moment, aveți o adresă publică care tunelează tot traficul către mașina noastră locală care rulează un șablon de bază Dialogflow. Vom dori să edităm codul și vom vedea instantaneu modificările din cârligul nostru web (de exemplu, prin intermediul simulatorului Dialogflow).

Nodemon este cel mai bun prieten al lui Node.j, repornind serverul ori de câte ori detectează modificări. Ca ngrok, îl instalez ca o dependență dev:

npm instalați nodemon - salvare-dev

Și modificați din nou scripturile package.json:

  "scripturi": {
    "dev": "nodemon --respect simpleServer.js",
    "tunel": "ngrok http 8080"
  },

Apoi începeți mediul dvs. dev cu npm run dev.

Argumentul --respect permite debuggerul. În VS Code, puteți crea o configurație de depanare care funcționează cu nodemon după cum urmează:

  1. În meniul „Debug”, selectați „Open Configurations” pentru a deschide fișierul laun.json.
  2. Utilizați butonul „Adăugați configurare…” pentru a adăuga o nouă configurație de depanare „Node.js: Attach”. Configurația rezultată ar trebui să arate astfel:
"configurații": [
  {
    "tip": "nod",
    "cerere": "atașați",
    "nume": "Atașați",
    "port": 9229
  }
]

Pentru a testa acest lucru, apăsați F5 pentru a începe debugging-ul (ar trebui să vedeți Debugger-ul atașat. Pe terminal). Apoi introduceți un punct de pauză în agentul dvs. de bun venit. Accesați consola de testare Dialogflow și spuneți „salut” din nou. Debuggerul va opri execuția la punctul dvs. de întrerupere.

4. Stil de cod (opțional)

În timp ce configurăm VS Code, s-ar putea să fie un moment bun pentru a configura o linterie. Îmi place să folosesc JavaScript Standard Style, deoarece este simplu - nu-mi plac 100% din reguli, dar este destul de aproape și îmi place faptul că este un stil fix, astfel încât nu există nici o ceartă / pierdere de timp cu tweaking ESLint Opțiuni. De asemenea, este ușor de instalat:

npm instalați standard - salvare-dev

Adăugați o comandă lint la pachetul dvs..json:

"scripturi": {
    ...
    "linte": "standard"
  },

Apoi puteți verifica codul dvs. cu npm run lint sau să remediați toate erorile cu npm run lint - --fix.

Cu toate acestea, probabil că doriți funcția de remediere în editor. VS Code are o extensie pentru Standard. După instalarea acestui lucru, adăugați {"key": "cmd + l", "command": "standard.executeAutofix"} la keybindings.json, schimbând cmd + l pentru orice scurtătură de tastatură pe care doriți să o utilizați. Acum puteți atinge acea scurtătură pentru a vă menține codul în stilul Standard. :)

5. (a) Desfășurarea în funcțiile Cloud pentru Firebase

După ce ne-am luat la revedere de la funcțiile Cloud, eliminându-le la pasul 1, este timpul să revenim la desfășurare. Reamintim că codul nostru original Funcții Cloud arăta astfel:

export.dialogflowFirebaseFulfillment =
    funcții.https.onRequest ((cerere, răspuns) => {...})

Se dovedește că o aplicație expresă este, de asemenea, o funcție care ia o cerere / răspuns, deci satisface cerințele funcțiilor Cloud pentru (cerere, răspuns) => {...}.

Prin urmare, putem împărți simplele noastre server.js existente în server.js și app.js. Fișierul app.js conține aplicația noastră care poate fi rulată fie pe Node.js, fie pe funcții Cloud.

Rularea unei aplicații expres prin funcțiile Cloud

Această arhitectură ne oferă capacitatea de a rula local cu ngrok și nod atunci când ne dezvoltăm și să ne implementăm în funcții Cloud pentru producție.

Rezultatul:

Nu uitați să instalați dependențele pentru Firebase: npm install firebase-funcții firebase-admin --save.

În continuare, implementarea ...

Dacă nu cunoașteți implementarea funcțiilor Cloud, puteți arunca o privire asupra documentației Firebase.

Pași de bază:

  1. Instalați Firebase CLI: npm instalați -g firebase-tools @ cel mai recent
  2. Creați firebase.json care conține:
    {"funcții": {"sursa": ".", "predeploy": ["npm run lint"]}}
  3. Executați utilizarea firebase - adăugați în folderul proiectului dvs. pentru a selecta proiectul Firebase și pentru a atribui un alias.
  4. Modificați pachetul.json pentru a indica scriptul „principal” către „cloudFuncs.js”:
    "principal": "cloudFuncs.js",
  5. Dacă doriți să utilizați Node 8 (probabil că da!) Atunci adăugați și acest lucru la package.json:
    "motoare": {"nod": "8"},
  6. Încercați să implementați: firebase deploy - funcții unice
Implementați un cârlig web la funcțiile Cloud pe Firebase

Dacă implementarea se finalizează cu succes, puteți deschide punctul final al testului în browser-ul dvs. la: https: // us-central1- [proiectul vostru].

Iar adresa URL a cârligului web este https: // us-central1- [proiectul tău] .cloudfunctions.net / app / dialogflow.

În cele din urmă, adăugați un script de implementare la pachetul dvs..json, astfel încât să puteți rula npm run deploy-cf pentru a se implementa în Firebase oricând:

  "scripturi": {
    ...
    "deploy-cf": "implementare firebase - funcții unice"
  },

Local Node.js împotriva funcțiilor Cloud

  • Variabilele de mediu trebuie setate prin comanda firebase. Exemplu:
    Funcții firebase: config: set apiKey = "KEY API"
  • Automatizați obținerea și setarea variabilelor de mediu cu un script urmând sfaturile lui Allan Hasegawa.
  • Variabilele globale nu se vor comporta așa cum vă așteptați:
    „Nu există nicio garanție că starea unei funcții Cloud va fi păstrată pentru invocările viitoare.” Https://cloud.google.com/functions/docs/bestpractices/tips

5. (b) Desfășurare în Google App Engine (bonus!)

Google a adăugat recent funcții de scalare mai flexibile la App Engine și asistență pentru Nodul 10. Diferența dintre rularea cârligului dvs. web pe App Engine și Cloud Functions este destul de subtilă. Din câte am înțeles, Firebase poate rula o mulțime de funcții Cloud împreună în multe cazuri și gestionează care sunt dezactivate atunci când nu sunt utilizate. App Engine rulează pe de altă parte aplicația dvs. într-una sau mai multe instanțe dedicate care pot fi scalate automat în funcție de cerere.

Când cererea este zero, App Engine poate scala la zero instanțe - aceasta este valoarea implicită, care este bine pentru gestionarea costurilor atunci când experimentați. App Engine are cote gratuite (28 de ore de zi pe zi) ceea ce înseamnă că este posibil să nu suportați niciun cost pentru o singură instanță (dar nu mă citați pe asta!).

Am considerat că implementarea către App Engine este mult mai ușoară decât funcțiile Cloud.

  1. Instalați instrumentul liniei de comandă gcloud - consultați documentația
  2. Activați API-ul Cloud Build pentru proiectul dvs. pe pagina API și servicii Google Cloud Platform.
  3. Creați un fișier numit app.yaml în rădăcina proiectului dvs., care conține:
    runtime: nodejs8
    sau alternativ pentru cele mai recente Node.js trebuie să ofere:
    runtime: nodejs10
    (Dacă alegeți nodejs10, atunci trebuie să modificați versiunea de nod în „motoare” de la package.json.)
  4. Deploy: gcloud app deploy --project [yourprojectid]

Dacă implementarea a fost reușită, atunci deschideți browserul dvs. la https: // [yourprojectid] .appspot.com și cârligul dvs. web va fi disponibil la https: // [yourprojectid] .appspot.com / dialogflow.

Încă o dată, faceți ordine cu un script de implementare la pachetul dvs..json, astfel încât să puteți rula npm run deploy-ae pentru a o implementa oricând:

"scripturi": {
    ...
    "deploy-ae": "gcloud app deploy --project [yourprojectid]"
  },

rezumat

Acum ar trebui să poți:

  • Creați un mediu de dezvoltare locală pentru proiectul dvs. de conectare web, cu capacități de scurgere și depanare - în browserul preferat
  • Serviți-vă mediul local ca URL https public folosind ngrok
  • Implementați aplicația în funcțiile Cloud pe Firebase ȘI în Google App Engine

Acest proiect a început ca un cârlig web pentru Dialogflow, dar tehnicile discutate ar funcționa pentru orice proiect de cârlig web.

Puteți găsi tot codul pe github: webhook-template. Folosesc acest lucru ca punct de plecare pentru orice proiect de cârlig web - sper să vi se pară util.