Hogyan hozzunk létre egy Alexa készséget a webhelyére

Sep 12, 2025

kézikönyv

Sokan közülünk most van valamiféle hang asszisztense az otthon körül, függetlenül attól, hogy egy Amazon Echo, az Apple Homepod vagy a Google Home. Úgy tűnik, hogy a hang hatalmas hatással lesz a mindennapi életünkre, és mint webes fejlesztőknek meg kell kérdeznünk magunkat, mi az a módok, amiket javíthatunk felhasználói tapasztalat Hangok végrehajtásával weboldalakon és webes alkalmazásokba?

Ebben a bemutatóban egy egyszerű Alexa készséget építünk, amely frissíti a honlapon lévő híreket. A kategória típus a felhasználó hangbevitelétől függ. Segítene, ha már van néhány tapasztalata az AWS-vel, de van egy csomó dokumentáció, hogy segítsen abban, hogy segítsen, ha egy savanyúságba kerül.

Új weboldal építése? Tartsa a dolgokat egyszerűen weboldal építője . Van tervezési fájlokat tárolni? Tartsa biztonságban felhő tároló .

10 lépés egy vonzó felhasználói élményhez

Mire lesz szükségem?

Először keresse meg a fájlokat a bemutatóhoz A Githubon .

Önnek is regisztrálnia kell egy Amazon fejlesztői fiók és egy Aws-fiók .

A Firebase-t használják a felhasználói bemenetünk tárolására, ezért győződjön meg róla, hogy jelentkezzen be a Firebase számla . A hírek API-t is használjuk, hogy megkapjuk a legfrissebb híreket, így kapj magadnak egy ingyenes API kulcsot Newsapi.org .

Szándékok, kijelentések és résidők

Alexa skill: Utterances — Itt vannak a kijelentések, amelyek az Alexa fejlesztői konzolon belül vannak, a készségünkért. Ne habozzon többet

Miután létrehozott, navigáljon fejlesztő.Amazon.com/alexa/console/ask és kattintson a hozzon létre készségre. Az első dolog, amit meg kell tennünk, az Alexa Developer konzol belsejében be kell állítanunk. A szándék az, amit a készség felhasználója próbál elérni. A kijelentések olyan konkrét kifejezések, amelyeket a felhasználók azt mondanak, amikor Alexa-val beszélünk, például: "Melyik nap?". A slot egy olyan változó, amely egy kijelentéshez kapcsolódik, például: "Mennyi az {Place}?". Ez a {Place} az egyéni slot.

Válassza ki a műszerfal bal oldali oldalát, és kattintson a Szándék hozzáadása gombra. Győződjön meg róla, hogy az egyéni szándék létrehozása van kiválasztva és írja be ContentUpdate A szövegmezőben: Ez most később lesz a funkciónév.

Most továbblépünk a kijelentésekre, ahol az, ahol meg kell vinnünk kategória a felhasználó, hogy a felhasználó frissíteni akar. A kategóriát a Slot Name-ként fogjuk használni, majd a következő kijelentések beállítása:

 "Update {kategória}"
"{Kategória} történetek"
"Update to {kategória}"
"Állítsa be a történeteket a {kategória} -hez

Végül meg kell teremteni egy slot típusot, ahol meg kell írnunk egy pár bemenetet, amit elvárunk, hogy a felhasználóból származik. A műszerfal bal oldalán kattintson a Hozzáadás gombra a slot típusok között. Írja be az "NewStype" -t, és kattintson az "Customing Custom Slot Type" gombra. A slot értékek alatt hozzá kell adnod néhány hírkategóriába. Sport-, üzleti, technológiai és politikát fogunk használni. Miután befejeződött, győződjön meg róla, hogy a Slot típusú kategóriába tartozó slot típusát választotta ki.

Aws lambda funkció

Most át fogunk menni Lambda Inside Aws . Válassza a Funkció létrehozása lehetőséget, majd válassza ki a Blueprints rádió dobozt. Győződjön meg róla, hogy kiválasztja a Alexa-Skill-Kit-SDK-tényt A listából, és kattintson a Konfigurálás gombra. Adja meg a funkciót egy nevet, majd hozzon létre egy új szerepet. Ha befejezte, kattintson az oldal alján található Funkció létrehozása elemre. Az Alexa Skills Kit kiválasztásához ki kell választania a funkciót, majd maga a funkcióra mozoghat. Nem fogjuk használni a projekt beépített kódszerkesztőjét; Ehelyett helyben írjuk ki a funkciókat, majd feltöltünk egy zip fájlt. Győződjön meg róla, hogy másolja az index.js fájl tartalmát a Lambda szerkesztőben, mivel ezt a helyi projektünkbe beillesztjük.

Hozzon létre egy helyi projektet

Elkezdjük létrehozni egy új csomópont-projektet helyi szinten. Saját index.js fájlunkon belül beillesztjük a Lambda-tól csak vett tartalmat. A Firebase-t és az Alexa SDK-t kell importálnunk az NPM segítségével.

 NPM Install Alexa-SDK
NPM Telepítse a Firebase

Győződjön meg róla, hogy tartalmazza az index.js fájl tetején található hivatkozásokat.

CONST Alexa = igényel ("Alexa-SDK");
var firebase = szükséges ("Firebase");

Már van néhány alapértelmezett kódot, amelyek közül az egyiket hívják Launchrequest ”. Ez arra szolgál, hogy üdvözölje a felhasználót a készséghez. Mindössze annyit kell tennie, hogy itt van az üdvözlő üzenet, hogy "üdvözöljük a Website Update" -t.

 'Launchrequest': Funkció () {
        Ez.Él (": Kérdés", "Üdvözöljük a webhelyfrissítéssel");
    },

Ha használja a :mond parancs, majd az Alexa az üzenet után véget vet, míg ha használod :kérdez Ezután Alexa nyolc másodpercet hallgat a következő kérésre. Használjuk :kérdez , hogy az Alexa készen álljon a frissítési kérésünkre.

Firebase konfiguráció

Ezután hozzá kell adnunk a Firebase konfigurációs adatainkat az index.js fájl tetején.

 var config = {
    APIKEY: "& LT; API_KEY & GT;",
    Authomomain: "& lt; project_id & gt; .firebaseApp.com",
    DATABASEURL: "HTTPS: // & lt; Database_name & gt; .firebaseio.com",
    Projectid: "& LT; PROJEKT_ID & GT;",
    StorageBucket: "& lt; bucket & gt; .appspot.com",
    MessagingsenderID: "& LT; SENDER_ID & GT;"
  };
Firebase.initializeApp (config);

ContentUpdate funkció

Alexa skill: Simulator — Az Alexa Simulator nagyszerű módja annak, hogy tesztelje képességét a gépen anélkül, hogy szükség van egy Amazon echo eszközre

Korábban a bemutatóban létrehoztunk egy "ContentUpdate" -et. Ez azt jelenti, hogy meg kell teremteni a ContentUpdate Funkció, ahol válaszolunk a felhasználói bemenetre a létrehozott kifejezések alapján. Tehát, ha a felhasználó azt mondta, hogy "a sport frissítése", akkor ezt a funkciót hívják. Kezdjük egy változó létrehozásával Kategória , amely a felhasználó hangbevitelét veszi. Ezután tároljuk a kategóriatípust a Firebase adatbázis belsejében, és megkapjuk Alexát, hogy elmondja nekünk az általunk frissített kategória nevét.

 'ContentUpdate': Funkció () {
    VAR KategóriaTípus = ez.Event.request.intent.slots.Kategória.Value;
    ha (firebase.apps.length === 0) {
      Firebase.initializeApp (config);
    }
         Firebase.Database (). Ref ('/'). Set ({
            Előreferencia: Kategória
            }). Ezután ((adatok) = & gt; {
            Firebase.App (). Törlés (). Ezután ()
            }). fogás ((err) = & gt; {
            konzol.log (hibás);
            })
        ez.Az (': Ask', 'Frissítve' + Kategóriák);
},

Miután elmentette az index.js fájlt, meg kell cipelnie a projektet. Keresse meg a projektmappát a parancssorból, és írja be a következő parancsot.

 ZIP -R index.zip *

Fejezze vissza a funkcióba a Lambda belsejében, és görgessen le a funkciókód részre. A Kód-bejegyzés típusának legördülő mezőjéből válassza a "A .zip fájl feltöltése" lehetőséget. Most már képes feltölteni a zip fájlt.

Mielőtt tesztelné a projektet az Alexa szimulátoron belül, vegye be az ARN-t a lambda oldal jobb felső sarkában, és adja meg az Alexa konzol végpontrészét. A készség teszteléséhez mindössze annyit kell mondanod, hogy "nyílt webfrissítés", és Alexa válaszol a "Welcome to Webfrissítésre". Ha most azt mondod, hogy a "Sport frissítése", Alexa meg kell mondania, hogy "frissíted a sportra". A "Sport" szót a Firebase adatbázisban is előnyben kell adni.

Hírek oldal

Alexa skill: Final page — Itt van a végleges HTML oldal. Megjeleníti az Alexa-n keresztül kért kategóriát

Végül töltse le a létrehozott híroldalt (index.html) az Alexa Project - HTML mappából Github .

Nyissa meg a Main.js fájlt, és írja be a saját Firebase konfigurációs adatait az 1-8 vonalon, mint például a bemutatóban.

A Hírek API kulcsait is meg kell adnia a Main.js fájl 11. sorában.

 var myapikey = "& lt; yourapikey" & gt;

Ha most megnyitja az index.html fájlt, betöltenie kell néhány hír történetét a kiválasztott kategóriából. Minden alkalommal, amikor elmondja Alexa-t, hogy frissítsen egy új kategóriával (sport, technológia, üzleti vagy politika), az oldalon található hírügyintézmény kategóriája megváltozik.

Alexa, tovább!

Ez csak egy kis példa arra, hogy mit tudsz elérni Alexával, és remélhetőleg jó alapot ad neked a jövőbeli hangprojektek számára. Mindig is hozzáadhatsz több slot értéket, hogy több kategóriát kapjunk az API-ből, vagy akár frissíthetik a projektet, hogy húzza a saját honlapjait / hozzászólásait. Nem várhatom, hogy lássam, hogy a webes és az alkalmazásfejlesztők hogyan fogják magukban foglalni Alexát a projektjeikben.

Megvan a webhelyed fel és fut?Teljesen ellenőrizze a legjobbat web hosting Szolgáltatások.

Ezt a cikket eredetileg a 313. \ t háló , A világ legjobban értékesítő magazinja webes tervezőknek és fejlesztőknek. Vásároljon ki kérdezést 313 vagy Iratkozzon fel itt .

Kapcsolódó cikkek:

Miért a hang UIS a következő nagy dolog a webdesignban
Hangprototípus hozzáadva az Adobe XD-hez
Az összes Amazon eszköz végső útmutatója

Hogyan hozzunk létre egy Alexa készséget a webhelyére

Mire lesz szükségem?

Szándékok, kijelentések és résidők

Aws lambda funkció

Hozzon létre egy helyi projektet

Firebase konfiguráció

ContentUpdate funkció

Hírek oldal

Alexa, tovább!

kézikönyv - Most Popular Articles

Építsen egy blogot a rács és a flexbox segítségével

Hogyan rajzoljon reálisabb számokat

A természetes nyelvi feldolgozás megértése

Affinity Designer: Hogyan kell használni az export személyt

Hozzon létre egy csempe anyagot az anyagtervezőben

Élesítse a kemény felületi modellezést a 3DS max

Az akrilok kifejező csendéletének festése

Hozzon létre egy tökéletesen geometriai logót illusztrátor

Kategóriák