Jak utworzyć umiejętność Alexa na swojej stronie

Sep 15, 2025

Jak

Wielu z nas ma teraz jakiś asystent głosowy w domu, czy jest to Echo Amazon Echo, Apple Hompod czy Google Home. Wygląda na to, że głos ma ogromny wpływ na sposób, w jaki idziemy na nasze codzienne życie, a jako programistów internetowych musimy zadać sobie, jakie są sposoby, jakie możemy poprawić doświadczenie użytkownika Wdrażając głos do naszych stron internetowych i aplikacji internetowych?

W tym samouczku zamierzamy zbudować prostą umiejętność Alexa, która aktualizuje treści wiadomości na stronie internetowej. Typ kategorii będzie zależał od wejścia głosowego przez użytkownika. Pomogłoby to, jeśli masz już doświadczenie z AWS, ale istnieje wiele dokumentacji, aby pomóc Ci, jeśli dostaniesz się w marynarce.

Budowanie nowej strony? Trzymaj rzeczy proste z dobrym Kreator strony internetowej . Masz pliki projektowe do przechowywania? Trzymaj je bezpieczne magazyn w chmurze .

10 kroków do angażującego doświadczenia użytkownika

Czego potrzebuję?

Najpierw znajdź pliki do tego samouczka na Github. .

Musisz także zarejestrować się Konto Developer Amazon. i an. Konto AWS. .

Firebase zostanie użyty do przechowywania naszych wejściowych użytkowników, więc upewnij się, że zarejestruj się Konto FireBase. . Będziemy również korzystać z API News, aby uzyskać najnowsze historie wiadomości, więc zdobądź darmowy klucz API w Newsapi.org. .

Intencje, wypowiedzi i automaty

Alexa skill: Utterances — Oto wypowiedzi, jakie konfigurujemy w konsoli Dewelopera Alexa dla naszych umiejętności. Możesz dodać więcej

Po ustawieniu się, przejdź do deweloper.amazon.com/alexa/console/ask. i kliknij Utwórz umiejętności. Pierwszą rzeczą, którą musimy zrobić, to ustawić intencje, wypowiedzi i typy szczelin w konsoli Dewelopera Alexa. Intent jest tym, czego użytkownik umiejętności próbuje osiągnąć. Wypowiedzi to specyficzne frazy, które użytkownicy powiedzą podczas rozmowy z Alexą, na przykład: "Jaki to dzień?". Slot jest zmienną, która odnosi się do wypowiedzi, na przykład: "O której godzinie jest w {miejsce}?". To zrobiłoby {miejsce} niestandardowe gniazdo.

Wybierz zamiary od lewej strony pulpitu nawigacyjnego i kliknij przycisk Dodaj zamiary. Upewnij się, że wybrano i wpisz cechy intent ContentUpdate. W polu tekstowym: teraz stanie się teraz naszą nazwą funkcji.

Teraz przechodzimy na wypowiedzi, w miejscu, w którym będziemy musieli wziąć Kategoria wiadomości, do którego użytkownik chce zaktualizować. Będziemy używać kategorii jako naszej nazwy Slot, a następnie skonfigurować następujące wypowiedzi:

 "Aktualizacja {kategoria}"
Historie "{kategoria}"
"Zaktualizuj do {kategorii}"
"Ustaw historie do {kategorii}"

Wreszcie musimy stworzyć typ gniazda, gdzie napiszemy kilka wejść, które spodziewamy się dostać od użytkownika. Od lewej strony pulpitu nawigacyjnego kliknij Dodaj obok typy gniazd. Wpisz "Newstype" i kliknij przycisk "Utwórz niestandardowy typ gniazda". W przypadku wartości gniazda będziesz musiał dodać w niektórych kategoriach wiadomości. Wykorzystamy sport, biznes, technologię i politykę. Po zakończeniu upewnij się, że wybrałeś Newstype z rozwijanej, jako typ gniazda do kategorii.

Funkcja Lambda AWS.

Teraz udamy się Lambda wewnątrz AWS. . Wybierz funkcję Utwórz funkcję, a następnie wybierz pole radiowe Blueprints. Upewnij się, że wybrałeś Alexa-Skill-Kit-SDK-Facmill Z listy i kliknij Skonfiguruj. Podaj swoją funkcję nazwę, a następnie utworzyć nową rolę. Po zakończeniu kliknij przycisk Utwórz funkcję na dole strony. Musisz wybrać zestaw umiejętności Alexa jako wyzwalacz do swojej funkcji, możesz przejść do samej funkcji. Nie będziemy korzystać z wbudowanego edytora kodu dla tego projektu; Zamiast tego będziemy pisać lokalnie funkcje, a następnie przesyłanie pliku ZIP. Upewnij się, że skopiujesz zawartość pliku index.js w edytorze Lambda, ponieważ wkleimy to wewnątrz naszego lokalnego projektu.

Utwórz lokalny projekt

Zaczniemy, tworząc nowy projekt węzła lokalnie. Wewnątrz naszego pliku index.js wkleimy zawartość właśnie wzięliśmy z Lambda. Musimy importować Firebase i Alexa SDK za pomocą NPM.

 NPM Zainstaluj Alexa-SDK
NPM Install FireBase

Upewnij się, że dołączysz odniesienia na górze pliku index.js.

Const Alexa = wymagać ("Alexa-sdk");
var firebase = wymagać ("firebase");

Powinieneś mieć już jakiś domyślny kod, z którego jest nazywany " Laughrequest. ". Jest to używane do przyjęcia użytkownika do umiejętności. Wszystko, co musisz tutaj zrobić, zmień wiadomość powitalną do "Witamy w aktualizacji witryny".

 "Laughrequest": Funkcja () {
        to.emit (": Zapytaj", "Witamy w aktualizacji witryny");
    },

Jeśli używasz :powiedzieć polecenie Wtedy Alexa zakończy umiejętność po przesłaniu, podczas gdy używasz :zapytać Wtedy Alexa będzie słuchał przez osiem sekund na następny monit. Będziemy używać :zapytać , więc Alexa jest gotowa słuchać naszego monitowania aktualizacji.

Konfiguracja FireBase.

Następnie musimy dodać nasze dane konfiguracyjne FireBase na górze pliku index.js.

 var config = {
    APIPEY: "A API_KEY & GT;",
    Autorydain: "& LT; Project_id & GT; .firebaseApp.com",
    bazy danych: "https: // & lt; batate_name & gt; .firebaseio.com",
    ProjectID: "& LT; Project_id & GT",
    StorageBucket: "& LT; Bucket & GT; .apppot.com",
    MessagingenderID: "° C) Sender_id & GT;
  };
Firebase.initializeApp (config);

Funkcja ContentUpdate.

Alexa skill: Simulator — Symulator Alexa to świetny sposób na testowanie umiejętności na komputerze, nie potrzebując urządzenia Amazon Echo

Wcześniej w samouczku stworzyliśmy intencję "ContentUpdate". Oznacza to, że musimy stworzyć ContentUpdate. Funkcja, w której odpowiemy na wejście użytkownika na podstawie utworzonych wypowiedzi. Jeśli więc użytkownik powiedział "aktualizacja do sportu", ta funkcja zostanie wywołana. Zaczynamy od utworzenia o nazwie zmiennej KategoriaType. , który podejmuje wejście głosu użytkownika. Następnie przechowujemy typ kategorii wewnątrz bazy danych FireBase i uzyskać Alexę, aby powiedzieć nam nazwę kategorii, do której aktualizowaliśmy.

 "ContentUpdate": Funkcja () {
    var kategoriaTYpe = ta.Event.request.intent.slots.category.Value;
    if (firebase.apps.length === 0) {
      Firebase.initializeApp (config);
    }
         Firebase.database (). Ref ('/'). Ustaw ({
            Preferencje: kategoriaType.
            }). Następnie ((dane) = & gt; {
            Firebase.app (). Usuń (). Następnie ()
            }). Catch ((Err) = & GT; {
            konsola.log (Err);
            })
        to.emit (": Zapytaj", "Zaktualizowałeś do" + Kategoria);
},

Po zapisaniu pliku index.js musisz zamknąć projekt. Przejdź do folderu projektu z wiersza poleceń i wpisz następujące polecenie.

 ZIP -R INDEX.ZIP *

Wróć do swojej funkcji w Lambda i przewiń w dół do sekcji Kod funkcji. Z pola rozwijanego dla typu wpisu kodu wybierz "Prześlij plik .zip". Teraz będziesz mógł przesłać plik zip.

Przed przetestowaniem projektu wewnątrz symulatora Alexa należy przyjmować Arn w prawym górnym rogu strony Lambda i wejść w ten sposób w sekcji końcowej konsoli Alexa. Aby przetestować swoje umiejętności, wszystko, co musisz powiedzieć, to "Otwarta aktualizacja Web Aktualizacja" i Alexa odpowie na "Witamy w aktualizacji sieci". Jeśli teraz powiesz "Aktualizacja do Sportu", Alexa powinna powiedzieć "zaktualizowany do Sportu". Słowo "Sport" powinien również pojawić się w ramach preferencji wewnątrz bazy danych FireBase.

Strona internetowa

Alexa skill: Final page — Oto, jak będzie wyglądać ostateczna strona HTML. Wyświetla kategorię, której prosiłeś przez Alexę

Wreszcie, pobierz stronę wiadomości, którą stworzyłem (index.html) z projektu Alexa - folder HTML Github .

Otwórz plik główny.js i wprowadź własną szczegóły konfiguracji ogniowej na liniach 1-8, jak wcześniej w samouczku.

Musisz także wprowadzić klucz API News z Newsapi.org w linii 11 z pliku Main.js.

 var myapikey = "μl;

Jeśli teraz otworzysz plik index.html, powinien załadować w niektórych wiadomościach z wybranej kategorii. Za każdym razem, gdy powiesz Alexa, aby zaktualizować nową kategorię (sport, technologia, biznes lub polityka), kategoria historii wiadomości na stronie zmieni się.

Alexa, dalej!

Jest to tylko mały przykład tego, co można osiągnąć z Alexą i miejmy nadzieję, że daje Ci dobrą podstawę na przyszłe projekty głosowe. Zawsze można dodać więcej wartości automatów, aby uzyskać więcej kategorii z API, a nawet aktualizować projekt, aby włączył na własną stronę internetową wiadomości / posty. Nie mogę się doczekać, aby zobaczyć, jak widzieli programistów internetowych i aplikacji zawierają Alexę w swoich projektach.

Mam swoją stronę?Monitoruj go w pełni z najlepszymi hosting Usługi.

Ten artykuł został pierwotnie opublikowany w wydaniu 313 z netto , Najlepiej sprzedający się magazyn na świecie dla projektantów stron internetowych i programistów. Kup problem 313 tutaj lub Subskrybuj tutaj .

Powiązane artykuły:

Dlaczego głos Uis jest kolejną wielką rzeczą w projekcie internetowym
Prototypowanie głosowe dodane do Adobe XD
Najlepszy przewodnik po wszystkich urządzeniach Amazon

Jak utworzyć umiejętność Alexa na swojej stronie

Czego potrzebuję?

Intencje, wypowiedzi i automaty

Funkcja Lambda AWS.

Utwórz lokalny projekt

Konfiguracja FireBase.

Funkcja ContentUpdate.

Strona internetowa

Alexa, dalej!

Jak - Najpopularniejsze artykuły

Zacznij od Artrage

Jak tworzyć trawę 3D

Jak tworzyć tekst usterki i efekty obrazu w CSS

Konwertuj gry flash do HTML5

Jak podkreślić centralny punkt obrazu

Naucz się uprawiać liście z cząstkami X

12 wskazówek na realistyczne oświetlenie 3D

Prototypowy przycisk pływających akcji w pixate

Kategorie