Webové háčiky Dialogflow: ako sa vyvíjať lokálne a nasadiť do cloudových funkcií

Keď náš tím začal stavať chatu Nila na LINE HACK 2018, vedeli sme rovnako ako Jon Snow o tom, ako zostaviť webový háčik. Niektorí z nás mali skúsenosti s funkciou Firebase a písaním cloudových funkcií, takže sme predpokladali, že to bude celkom jednoduché, najmä keď sme našli editor Inline - ale nakoniec sme skonštruovali prvú verziu úplne na Glitch, živé prostredie na spustenie uzla. .js aplikácie. Kým závada je skvelá na učenie, mohli sme si uľahčiť život vytvorením prostredia miestneho rozvoja.

Tento článok vysvetľuje, ako zostaviť webový háčik lokálnym vývojom a nasadením do cloudu. Je to sada tipov a trikov, vďaka ktorým bude vývoj webových háčikov rýchlejší, praktickejší a bezpečnejší:

  • Rýchlejšie - spúšťajte lokálne, nasadzujte ho iba v prípade potreby
  • Praktické - odlaďte svoju aplikáciu živými požiadavkami z webového háku
  • Bezpečnejšie - vloženie a automatické dopĺňanie z vášho obľúbeného editora

1. Začnite so šablónou a spustite ju lokálne

Zatiaľ čo v tomto článku sa zameriavame na webové háčiky Dialogflow, mám podozrenie, že tieto kroky sú rovnaké pre vývoj všetkých webových háčikov. Ak používate dialógové okno, môžete začať s Inline Editorom na splnenie. Prvá vec, ktorú musíte urobiť, je chytiť tento kód a upraviť ho tak, aby bežal lokálne.

V simpleServer.js som vzal kód plnenia Dialogflow z Inline Editora, odstránil som špecifický kód Firebase a pridal expres, aby slúžil webovému háčiku. Budete potrebovať package.json so závislosťami pre expresné, dialógové splnenie a akcie na google. Spustite webový hák uzlom simpleServer.js a potom otvorte http: // localhost: 8080 / a skontrolujte, či funguje.

2. Použite ngrok na poskytovanie miestnych http na verejné https

Ngrok je bezplatná služba, ktorá vám poskytuje verejne zabezpečenú https URL na miestny webový server. Ngrok môžete nainštalovať globálne (stiahnuť binárne alebo npm inštalovať globálne), ale uprednostňujem inštaláciu ako závislosť dev:

npm install ngrok --save-dev

A potom upravte súbor package.json:

  ...
  "skripty": {
    "tunnel": "ngrok http 8080"
  },

Teraz kedykoľvek budete chcieť vytvoriť https URL pre vaše miestne prostredie dev, stačí použiť npm run tunnel. Ngrok spustí a vytvorí https URL:

Spustením programu ngrok získate verejnú https URL pre váš lokálny server

Teraz môžete skopírovať webovú adresu https pod položkou „Preposielanie“ (zvýraznená červenou farbou), aby sa stala vašim webovým háčikom v dialógovom okne:

Nakonfigurujte plnenie Dialogflow tak, aby používal adresu URL na presmerovanie hovorov

V tomto okamihu by som otestoval, že všetko funguje tak, že do testovacej konzoly Dialogflow pošleme „ahoj“:

Dôvod, prečo by som radšej inštaloval ako závislosť od dev, je ten, že keď sa k tímu pripojí ďalší vývojár, nepotrebujú inštalovať nič navyše - na vytvorenie https URL môžu použiť iba npm run tunnel.

Program ngrok môžete ukončiť pomocou klávesov Ctrl-C (a tým sa prestane zobrazovať vaša verejná adresa URL). Zakaždým, keď reštartujete ngrok, dostanete novú URL, čo znamená, že budete musieť aktualizovať URL v konzole Dialogflow. Jedným zo spôsobov, ako to obísť, je upgrade na jeden z platených programov spoločnosti ngrok.

3. Obnovenie (nodemon) a ladenie (kód VS)

V tomto okamihu máte verejnú webovú adresu, ktorá tuneluje všetok prenos do nášho miestneho počítača, ktorý používa základnú šablónu Dialogflow. Chystáme sa upraviť kód a okamžite vidieť zmeny v našom webovom háku (napr. Prostredníctvom simulátora Dialogflow).

Nodemon je najlepším priateľom Node.js a reštartuje server vždy, keď zistí zmeny. Rovnako ako ngrok, inštalujem ho ako závislosť dev:

npm install nodemon --save-dev

A znova upravte svoje skripty package.json:

  "skripty": {
    "dev": "nodemon --inspect simpleServer.js",
    "tunnel": "ngrok http 8080"
  },

Potom spustite svoje dev prostredie pomocou npm run dev.

Argument --inspect umožňuje debugger. V VS Code môžete vytvoriť ladiacu konfiguráciu, ktorá pracuje s nodemon takto:

  1. V ponuke „Debug“ vyberte „Open Configurations“ a otvorte súbor launch.json.
  2. Pomocou tlačidla „Pridať konfiguráciu ...“ pridajte novú ladiacu konfiguráciu „Node.js: Attach“. Výsledná konfigurácia by mala vyzerať takto:
"konfigurácie": [
  {
    "type": "node",
    "žiadosť": "priložiť",
    "name": "Attach",
    "port": 9229
  }
]

Vyskúšajte to stlačením klávesu F5, čím spustíte ladenie (na termináli by ste mali vidieť Debugger.). Potom vložte do svojho uvítacieho agenta bod prerušenia. Prejdite na skúšobnú konzolu Dialogflow a znova povedzte „ahoj“. Ladiaci program zastaví vykonávanie na vašom mieste prerušenia.

4. Štýl kódu (voliteľné)

Aj keď nastavujeme VS kód, môže byť vhodný čas na nastavenie smerovača. Rád používam štandardný štýl JavaScriptu, pretože je jednoduchý - nepáči sa mi 100% pravidiel, ale je dosť blízko a milujem skutočnosť, že ide o pevný štýl, takže nie je potrebné zdokonaľovať / strácať čas vylepšovaním ESLint. možnosti. Inštalácia je tiež jednoduchá:

npm install standard - save-dev

Pridajte príkaz lint do súboru package.json:

"skripty": {
    ...
    "lint": "standard"
  },

Potom môžete skontrolovať svoj kód pomocou npm run lint alebo opraviť všetky chyby pomocou npm run lint - --fix.

Pravdepodobne však budete chcieť funkciu opravy vo svojom editore. Kód VS má rozšírenie pre štandard. Po inštalácii pridajte do svojho súboru keybindings.json {"key": "cmd + l", "command": "standard.executeAutofix"} a zmeňte cmd + l pre ktorúkoľvek klávesovú skratku, ktorú chcete použiť. Teraz môžete stlačiť túto skratku, aby sa váš kód zachoval v štandardnom štýle. :)

5. a) Nasadenie do cloudových funkcií pre základňu Firebase

Po rozlúčení s cloudovými funkciami ich odstránením v kroku 1 je čas, aby sme sa vrátili k nasadeniu. Pripomeňme, že náš pôvodný kód funkcií cloudu vyzeral takto:

export.dialogflowFirebaseFulfillment =
    features.https.onRequest ((žiadosť, odpoveď) => {...})

Ukázalo sa, že expresná aplikácia je tiež funkciou, ktorá prijíma požiadavku / odpoveď, takže spĺňa požiadavky funkcií cloudu pre (žiadosť, odpoveď) => {...}.

Preto môžeme rozdeliť naše existujúce simpleServer.js na server.js a app.js. Súbor app.js obsahuje našu aplikáciu, ktorú je možné spustiť na serveroch Node.js alebo Cloud Functions.

Spustenie expresnej aplikácie prostredníctvom funkcií cloudu

Táto architektúra nám umožňuje lokálne spustenie s uzlom ngrok a uzlom, keď sa vyvíjame, a nasadiť do cloudových funkcií na výrobu.

Výsledok:

Nezabudnite nainštalovať závislosti pre Firebase: npm nainštalujte funkcie firebase-funkcie firebase-admin - uložte.

Ďalej nasadenie ...

Ak nie ste oboznámení s nasadením funkcií cloudu, môžete sa pozrieť na dokumentáciu Firebase.

Základné kroky:

  1. Nainštalujte Firebase CLI: npm install -g firebase-tools @ latest
  2. Vytvorte súbor firebase.json obsahujúci:
    {"function": {"source": ".", "predeploy": ["npm run lint"]}}
  3. Spustiť použitie firebase - pridajte ho do priečinka projektu, aby ste vybrali svoj projekt Firebase a priradili alias.
  4. Upravte súbor package.json tak, aby smeroval „hlavný“ skript na „cloudFuncs.js“:
    "main": "cloudFuncs.js",
  5. Ak chcete použiť uzol 8 (pravdepodobne to urobíte!), Pridajte ho aj do balíka.json:
    "motory": {"uzol": "8"},
  6. Pokúste sa nasadiť: rozmiestniť firebase - iba funkcie
Nasadiť webový hák do funkcií cloudu na platforme Firebase

Ak je nasadenie úspešne dokončené, môžete koncový bod testu otvoriť v prehliadači na adrese: https: // us-central1- [yourprojectid] .cloudfunctions.net / app / (poznámka: za účelom porovnania trasy sa vyžaduje lomka /).

A webová háčiková adresa URL je https: // us-central1- [yourprojectid] .cloudfunctions.net / app / dialogflow.

Nakoniec pridajte implementačný skript do balíka package.json, aby ste mohli spustiť npm spustiť deploy-cf a nasadiť do Firebase kedykoľvek:

  "skripty": {
    ...
    "deploy-cf": "firebase nasadiť - iba funkcie"
  },

Miestne Node.js vs Cloudové funkcie

  • Premenné prostredia je potrebné nastaviť pomocou príkazu firebase. Príklad:
    funkcie firebase: config: set apiKey = "THE API KEY"
  • Automatizujte získavanie a nastavovanie premenných prostredia pomocou skriptu podľa pokynov Allana Hasegawu.
  • Globálne premenné sa nebudú správať podľa očakávaní:
    „Neexistuje žiadna záruka, že stav funkcie Cloud bude zachovaný pre budúce vyvolania.“ Https://cloud.google.com/functions/docs/bestpractices/tips

5. (b) Nasadenie do služby Google App Engine (bonus!)

Spoločnosť Google nedávno pridala flexibilnejšie funkcie škálovania do aplikácie App Engine a podporu pre uzol 10. Rozdiel medzi spustením webového pripojenia v aplikácii App Engine a funkciami cloudu je pomerne malý. Z toho, čo som pochopil, Firebase potenciálne spúšťa spolu veľa funkcií cloudu na mnohých prípadoch a riadi, ktoré z nich sú deaktivované, keď sa nepoužívajú. Aplikácia Engine na druhej strane spúšťa vašu aplikáciu na jednej alebo viacerých vyhradených inštanciách, ktoré sa dajú automaticky upravovať podľa potreby.

Ak je dopyt nulový, aplikácia App Engine môže škálovať na nulové prípady - toto je predvolená hodnota, ktorá je vhodná na správu nákladov pri experimentovaní. App Engine má bezplatné kvóty (28 inštančných hodín za deň), čo znamená, že za jednu inštanciu nemusíte mať žiadne náklady (ale na to ma neuvádzajte!).

Zistil som, že nasadenie v App Engine je oveľa jednoduchšie ako funkcie Cloud.

  1. Nainštalujte nástroj príkazového riadka gcloud - pozri dokumentáciu
  2. Povoľte rozhranie Cloud Build API pre svoj projekt na stránke API a služby platformy Google Cloud Platform.
  3. V koreňovom adresári projektu vytvorte súbor s názvom app.yaml, ktorý obsahuje:
    runtime: nodejs8
    alebo alternatívne pre najnovšie Node.js ponúka:
    runtime: nodejs10
    (Ak zvolíte nodejs10, musíte tiež upraviť verziu uzla v „engine“ balíka package.json.)
  4. Nasadenie: nasadenie aplikácie gcloud --project [yourprojectid]

Ak bolo nasadenie úspešné, otvorte prehliadač na adrese https: // [yourprojectid] .appspot.com a váš webový háčik bude k dispozícii na adrese https: // [yourprojectid] .appspot.com / dialogflow.

Opäť upravte rozmiestnenie skriptu do balíka package.json, aby ste mohli spustiť npm spustiť rozmiestnenie a nasadiť kedykoľvek:

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

zhrnutie

Teraz by ste mali byť schopní:

  • Vytvorte miestne vývojové prostredie pre váš webový háčikový projekt s funkciami lintingu a ladenia - vo vašom obľúbenom prehliadači
  • Poskytujte svoje miestne prostredie ako verejnú https URL pomocou programu ngrok
  • Aplikáciu nasaďte na cloudové funkcie na Firebase A do Google App Engine

Tento projekt sa začal ako webový hák pre Dialogflow, ale diskutované techniky by fungovali pre akýkoľvek projekt webového háku.

Celý kód nájdete na stránke github: webhook-template. Používam to ako východiskový bod pre akýkoľvek projekt s webovým háčikom - dúfam, že sa vám tiež bude hodiť.