Web kuke dijalogflowa: kako se lokalno razviti i implementirati u Cloud funkcije

Kada je naš tim započeo s izradom Nila chatbota na LINE HACK 2018, znali smo koliko i Jon Snow o tome kako napraviti web kuku. Neki od nas imali su iskustva s Firebaseom i pisanjem Cloud Functions, pa smo pretpostavili da će to biti prilično jednostavno, pogotovo kada smo pronašli Inline Editor - ali završili smo izgradnju prve verzije u potpunosti na Glitchu, okruženju uživo za pokretanje čvora .js aplikacije. Iako je Glitch odličan za učenje, mogli smo si olakšati život postavljanjem lokalnog razvojnog okruženja.

U ovom se članku objašnjava kako izraditi internetsku udicu razvijanjem lokalno i razmještanjem u oblaku. To je skup savjeta i trikova koji će razvoj web kuka učiniti bržim, praktičnijim i sigurnijim:

  • Brže - pokrenite lokalno, implementirajte samo kada trebate
  • Praktično - uklanjanje pogrešaka u aplikaciji pomoću zahtjeva uživo s vaše web kuke
  • Sigurnije - povezivanje i automatsko dovršavanje iz vašeg omiljenog uređivača

1. Započnite s predloškom i pokrenite ga lokalno

Premda je u ovom članku žarište web-kuka Dialogflowa, pretpostavljam da su ovi koraci isti za razvoj bilo koje web kuke. Ako koristite Dialogflow, možda biste za ispunjenje započeli s Inline Editorom. Prvo što trebate učiniti je zgrabiti taj kod i izmijeniti ga da radi lokalno.

U simpleServer.js uzeo sam kod ispunjavanja Dialogflow iz Inline Editor-a, uklonio specifični kôd Firebase i dodao express za posluživanje web kuke. Trebat će vam package.json s ovisnostima za ekspresno, dijaloško ispunjavanje i radnje na googleu. Pokrenite web kuku pomoću čvora simpleServer.js, a zatim otvorite http: // localhost: 8080 / da provjerite da li radi.

2. Koristite ngrok za posluživanje lokalnog http-a za javne https

Ngrok je besplatna usluga koja vam pruža javni sigurni https URL na vaš lokalni web poslužitelj. Ngrok možete instalirati globalno (preuzmite binarni ili npm install globalni), ali moja je preferencija da se instalira kao razvojna ovisnost:

npm instalirati ngrok --save-dev

A zatim izmijenite svoj package.json:

  ...
  "skripte": {
    "tunel": "ngrok http 8080"
  }

Sada kad god želite stvoriti https URL u vašem lokalnom razvojnom okruženju, samo koristite npm run tunel. Ngrok će se pokrenuti i stvoriti https URL:

Pokretanje ngrok za dobivanje javnog https URL-a za vaš lokalni poslužitelj

Sada možete kopirati https URL u odjeljku "Prosljeđivanje" (označen crvenom bojom) kako bi bio vaš web kuka za ispunjenje u Dialogflowu:

Konfigurirajte Ispunjenje Dialogflowa tako da koristi ngrok URL za prosljeđivanje

U ovom trenutku testirao bih da sve funkcionira slanjem "zdravo" u testnu konzolu Dialogflowa:

Razlog kojeg više volim instalirati kao razvojnu ovisnost je taj što kad se drugi programer pridruži timu, ne treba im ništa posebno instalirati - mogu samo koristiti npm run tunnel da stvore svoj https URL.

Možete napustiti ngrok pomoću Ctrl-C (i prestat će posluživati ​​vaš javni URL). Svaki put kada ponovo pokrenete ngrok, dobit ćete novi URL, što znači da ćete morati ažurirati URL u dijaloškoj konzoli. Jedan od načina za to je nadogradnja na jedan od ngrok plaćenih planova.

3. Učitavanje (nodemon) i uklanjanje pogrešaka (VS kod)

U ovom trenutku imate javni URL koji tunelira sav promet na našem lokalnom stroju koji pokreće osnovni predložak Dialogflowa. Željeli bismo urediti kôd i odmah vidjeti promjene u našem web kuku (npr. Putem simulatora Dialogflow).

Nodemon je Node.js najbolji prijatelj i ponovno pokreće poslužitelj kad god otkrije promjene. Poput ngroka, instaliram ga kao dev ovisnost:

npm instaliraj nodemon --save-dev

I opet izmijenite skripte package.json:

  "skripte": {
    "dev": "nodemon --inspect simpleServer.js",
    "tunel": "ngrok http 8080"
  }

Zatim pokrenite svoje dev okruženje s npm run dev.

Argument --inspect omogućava uklanjanje pogrešaka. U VS kodu možete stvoriti pogrešku u konfiguraciji koja radi s nodemonom na sljedeći način:

  1. U izborniku "Debug" odaberite "Open Configurations" za otvaranje datoteke start.json.
  2. Upotrijebite gumb "Dodaj konfiguraciju ..." da biste dodali novu konfiguraciju uklanjanja pogrešaka "Node.js: Priloži". Rezultirajuća konfiguracija trebala bi izgledati ovako:
"konfiguracije": [
  {
    "type": "čvor",
    "zahtjev": "priložiti",
    "name": "Priloži",
    "port": 9229
  }
]

Da biste to isprobali, pritisnite F5 za početak uklanjanja pogrešaka (na uređaju trebali biste vidjeti dodatak za ispravljanje pogrešaka). Zatim postavite prekid u svom agentu dobrodošlice (). Idite na testnu konzolu Dialogflow i ponovo pozdravite. Program za uklanjanje pogrešaka zaustavit će izvršenje na vašoj prijelomnoj točki.

4. Stil koda (izborno)

Dok postavljamo VS kod, moglo bi biti dobro vrijeme za postavljanje brotera. Volim koristiti JavaScript Standard Style jer je jednostavan - ne sviđa mi se 100% pravila, ali dovoljno je blizak i volim činjenicu da je to fiksni stil, tako da nema prepirke i gubljenja vremena za podešavanje ESLint-a opcije. To je i jednostavno instalirati:

npm instalirajte standardni --save-dev

Dodajte naredbu lint u svoj paket.json:

"skripte": {
    ...
    "lint": "standardno"
  }

Tada možete provjeriti svoj kôd npm run lint ili popraviti sve pogreške npm run lint - --fix.

Međutim, vjerojatno želite značajku popravka u svom uređivaču. VS Code ima proširenje za Standard. Nakon što ovo instalirate, dodajte {"key": "cmd + l", "command": "standard.executeAutofix"} u svoj keybindings.json, mijenjajući cmd + l za onu tipku prečaca koju želite koristiti. Sada možete pritisnuti tu prečicu kako biste kôd zadržali u stilu Standard. :)

5. (a) Uvođenje u funkciju oblaka za Firebase

Nakon što smo se oprostili od oblačnih funkcija uklanjajući ih u koraku 1, vrijeme je da se vratimo na implementaciju. Podsjetimo da je naš izvorni Cloud Function kôd izgledao ovako:

export.dialogflowFirebaseFulfillment =
    function.https.onRequest ((zahtjev, odgovor) => {...})

Ispada da je ekspresna aplikacija ujedno funkcija koja uzima zahtjev / odgovor, tako da zadovoljava uvjete Cloud Functions za (zahtjev, odgovor) => {...}.

Stoga postojeći simpleServer.js možemo podijeliti na server.js i app.js. Datoteka app.js sadrži našu aplikaciju koja se može pokrenuti na Node.js ili Cloud Functions.

Trčanje ekspresne aplikacije putem Cloud Functions

Ova nam arhitektura pruža mogućnost lokalnog pokretanja s ngrokom i čvorom dok razvijamo i implementaciju u Cloud Functions za proizvodnju.

Rezultat:

Ne zaboravite instalirati ovisnosti za Firebase: npm instalirajte firebase-funkcije firebase-admin --save.

Slijedi implementacija…

Ako niste upoznati s primjenom Cloud funkcija, možete pogledati dokumentaciju Firebase.

Osnovni koraci:

  1. Instalirajte Firebase CLI: npm install -g firebase-tools @ najnovije
  2. Napravite firebase.json koji sadrži:
    {"function": {"source": ".", "predeploy": ["npm run lint"]}}
  3. Pokrenite upotrebu firebase -add unutar mape projekta da biste odabrali svoj Firebase projekt i dodijelili pseudonim.
  4. Uredite package.json da biste glavnu skriptu usmjerili na "cloudFuncs.js":
    "main": "cloudFuncs.js",
  5. Ako želite koristiti Node 8 (vjerojatno to radite!), Dodajte i ovo u package.json:
    "motori": {"node": "8"},
  6. Pokušajte implementirati: firebase implementirati samo funkcije
Uključite web kuku u Cloud Functions na Firebaseu

Ako se implementacija uspješno dovrši, testnu krajnju točku u pregledniku možete otvoriti na adresi: https: // us-central1- [yourprojectid] .cloudfunctions.net / app / (imajte na umu, prolazna crta / potrebna je za ekspresno podudaranje rute).

A URL web udice je https: // us-central1- [yourprojectid] .cloudfunctions.net / app / dialogflow.

Konačno, dodajte skriptu za implementaciju u package.json, tako da u bilo koje vrijeme možete pokrenuti npm run-cf da biste je implementirali u Firebase:

  "skripte": {
    ...
    "decom-cf": "firebase implementacija - samo funkcije"
  }

Lokalni Node.js vs Cloud Functions

  • Promjenljive okoline moraju se postaviti pomoću naredbe firebase. Primjer:
    funkcije vatrogasne baze: config: set apiKey = "KLJUČ API-ja"
  • Automatizirajte dobivanje i postavljanje varijabli okruženja sa skriptu slijedeći savjet Allana Hasegawa.
  • Globalne varijable neće se ponašati onako kako očekujete:
    "Ne postoji jamstvo da će se stanje Cloud funkcije sačuvati za buduće prizive." Https://cloud.google.com/functions/docs/bestpractices/tips

5. (b) Uvođenje u Google App Engine (bonus!)

Google je nedavno dodao App fleksibilnije značajke skaliranja u App Engine i podršku za čvor 10. Razlika između pokretanja vaše mrežne kuke na App Engineu i Cloud Functions prilično je suptilna. Koliko razumijem, Firebase potencijalno pokreće puno Cloud funkcija zajedno na puno primjeraka i upravlja onim koji su deaktivirani kada se ne koriste. S druge strane, App Engine pokreće vašu aplikaciju na jednom ili više namjenskih instanci koje se automatski mogu skalirati ovisno o potražnji.

Kad je potražnja jednaka nuli, App Engine može se smanjiti na nulu instanci - ovo je zadana postavka koja je dobra za upravljanje troškovima kada eksperimentirate. App Engine ima besplatne kvote (28 inča sati dnevno) što znači da možda nećete imati troškova za jednu instancu (ali nemojte mi to navoditi!).

Otkrio sam da je raspoređivanje u App Engine puno lakše od Cloud Functions.

  1. Instalirajte alat gcloud naredbenog retka - pogledajte dokumentaciju
  2. Omogućite API za izgradnju oblaka za svoj projekt na stranici API-ja i usluga Google Cloud Platform.
  3. Stvorite datoteku pod nazivom app.yaml u korijenu vašeg projekta koja sadrži:
    vrijeme izvođenja: nodejs8
    ili alternativno za najnoviji Node.js može ponuditi:
    vrijeme izvođenja: nodejs10
    (Ako odaberete nodejs10, tada morate izmijeniti i verziju čvora u "motorima" paketa.json.)
  4. Uvođenje: gcloud app implementiranje --project [yourprojectid]

Ako je implementacija bila uspješna, otvorite svoj preglednik na https: // [yourprojectid] .appspot.com, a vaša web kuka bit će dostupna na https: // [yourprojectid] .appspot.com / dialogflow.

Još jednom, pospremite skriptu za implementaciju na vaš package.json kako biste u bilo kojem trenutku mogli pokrenuti npm run-ae za implementaciju:

"skripte": {
    ...
    "implementiraj-ae": "aplikacije gcloud implementirati --project [yourprojectid]"
  }

Sažetak

Sada biste trebali moći:

  • Napravite lokalno razvojno okruženje za svoj projekt za povezivanje putem weba, uz mogućnost povezivanja i uklanjanja pogrešaka - u svom omiljenom pregledniku
  • Služite lokalnom okruženju kao javni https URL koristeći ngrok
  • Instalirajte aplikaciju na Cloud Functions na Firebase AND u Google App Engine

Ovaj je projekt započeo kao web kuka za Dialogflow, ali će razmatrane tehnike raditi na bilo kojem projektu s web kukom.

Sav kôd možete pronaći na github: webhook-template. Koristim ovo kao polazište za bilo koji projekt web kuka - nadam se da će vam se to dogoditi korisno.