Jak vytvořit Alexa Skill pro vaše stránky

Sep 14, 2025

jak

Mnozí z nás nyní mají nějaký druh hlasového asistenta kolem domova, ať už je to Amazon Echo, Apple HomePod nebo Google Home. Zdá se, že hlas bude mít obrovský dopad na způsob, jakým jdeme o našem každodenním životě, a jako webové vývojáři potřebujeme se zeptat sami sebe, jaké jsou způsoby, jak se můžeme zlepšit uživatelská zkušenost implementací hlasu do našich webových stránek a webových aplikací?

V tomto tutoriálu budeme budovat jednoduchou Alexa dovednost, která aktualizuje obsah zprávy na webových stránkách. Typ kategorie bude záviset na hlasovém vstupu uživatelem. To by pomohlo, kdybyste už máte nějaké zkušenosti s AWS, ale existuje mnoho dokumentace, aby vám pomohl, pokud se dostanete do okurka.

Budování nové webové stránky? Udržujte věci jednoduché s dobrem Webové stránky Builder. . Máte návrhové soubory do skladu? Udržujte je v bezpečí cloudové úložiště .

10 kroků k zapojení uživatelů

Co budu potřebovat?

Nejprve najděte soubory pro tento tutoriál na Github. .

Budete se také muset zaregistrovat Amazon Developer účet a A. AWS účet .

Firebase bude použita pro ukládání našich uživatelských vstupů, takže se ujistěte, že se zaregistrujete Účet Firebase. . Budeme také používat zprávy API zpravodajství získat nejnovější zprávy zpravodajství, takže se dostanete zdarma API klíč Newsapi.org. .

Záměry, projevy a sloty

Alexa skill: Utterances — Zde jsou projevy, které máme nastavení uvnitř Alexa Developer Console pro naši dovednost. Neváhejte přidat další

Jakmile budete nastaveni, přejděte na vývojář.amazon.com/alexa/console/ask. a klikněte na možnost Vytvořit dovednosti. První věc, kterou musíme udělat, je nastavit záměry, promluvy a typy slotů uvnitř konzoly vývojáře Alexa. Záměrem je to, co se uživatel dovedností snaží dosáhnout. Properance jsou specifické fráze, které uživatelé řeknou, když mluví s Alexou, například: jaký je den? '. Slot je proměnná, která se týká promluvy, například: "Kolik je hodin v {Místo}?" To by učinilo {místo} vlastní slot.

Vyberte Intents z levé strany přístrojové desky a klepněte na tlačítko Přidat záměr. Ujistěte se, že je vybrán vytvořit vlastní záměr a typ ContentUpdate. V textovém poli: To se nyní stává naší funkce funkce později.

Nyní přecházíme na projevy, což je místo, kde budeme muset vzít kategorie zpráv, které chce uživatel aktualizovat. Budeme používat kategorii jako náš název slotu a pak nastavit následující prohlídky:

 "Aktualizace {Kategorie}"
"{kategorie} příběhy"
"Aktualizace na {Kategorie}"
"Nastavte příběhy na {Kategorie}"

Nakonec musíme vytvořit typ slotu, kde budeme psát několik vstupů, které očekáváme, že se dostaneme od uživatele. Ze levé strany přístrojové desky klepněte na tlačítko Přidat vedle typů slotu. Zadejte v 'Newstype' a klepněte na tlačítko "Vytvořit vlastní typ slotu". Pod hodnotami slotů budete muset přidat do některých kategorií zpravodajství. Budeme používat sport, podnikání, technologie a politiku. Jakmile skončíte, ujistěte se, že jste vybrali newstype z rozevíracího seznamu jako typ slotu pro kategorii.

Funkce AWS Lambda

Nyní se vydáme do Lambda uvnitř aws. . Vyberte možnost Vytvořit funkci a poté vyberte rádio modrotisk. Ujistěte se, že vyberete Alexa-Skill-Kit-SDK-FactSkill Ze seznamu a klepněte na tlačítko Konfigurovat. Dejte svou funkci jméno a pak vytvořit novou roli. Po dokončení klepněte na tlačítko Vytvořit funkci v dolní části stránky. Budete muset vybrat Sada dovedností Alexa jako spoušť pro vaši funkci, pak se můžeme přesunout na samotnou funkci. Nebudeme používat vestavěný editor kódu pro tento projekt; Místo toho budeme zapisovat funkce lokálně a pak nahrát soubor zip. Ujistěte se, že zkopírujete obsah souboru index.js uvnitř editoru lambda, jak budeme vložit uvnitř našeho místního projektu.

Vytvořit místní projekt

Začneme vytvořením nového projektu uzlu lokálně. Uvnitř našeho vlastního souboru index.js vložíme obsah, který jsme právě převzali z Lambda. Potřebujeme importovat firebase a Alexa SDK pomocí NPM.

 NPM Instalovat Alexa-SDK
NPM Install Firebase

Ujistěte se, že patříte odkazy v horní části souboru index.js.

CONST ALEXA = Vyžadovat ('Alexa-SDK');
var firebase = požadovat ("firebase");

Měli byste mít již tam nějaký výchozí kód, z nichž jeden se nazývá ' Launchrequest. ". To se používá k přivítání uživatele k dovednosti. Jediné, co zde musíte udělat, je změnit uvítací zprávu "Vítejte na stránkách aktualizace".

 'LaunchRequest': Funkce () {
        This.Emit (': Zeptejte se', 'Vítejte na aktualizaci webových stránek');
    },

Pokud použijete :sdělit příkaz pak Alexa ukončí dovednost po zprávě, zatímco pokud používáte :zeptat se Pak Alexa bude poslouchat osm vteřin pro další výzvu. Budeme používat :zeptat se , takže Alexa je připravena poslouchat na naši aktualizaci výzvu.

Konfigurace Firebase.

Dále potřebujeme přidat podrobnosti o konfiguraci Firebase v horní části souboru index.js.

 var config = {
    apikey: "& lt, api_key & gt;",
    authdomain: "& lt; project_id & gt; .firebaseapp.com",
    DatabázkaURL: "https: // & lt; databáze_namie & gt; .firebaseio.com",
    Projevid: "& lt; projektor_id & gt;",
    StorageBucket: "& lt; kbelík & gt; .appspot.com",
    Messagingsenderid: "& lt; sender_id & gt;
  };
Firebase.initializeApp (config);

Funkce ContentUpdate

Alexa skill: Simulator — Alexa simulátor je skvělý způsob, jak testovat svou dovednost na vašem stroji, aniž by bylo nutné potřebovat zařízení Amazon Echo

Dříve v tutoriálu jsme vytvořili záměr nazvaný 'contentUpdate'. To znamená, že musíme vytvořit ContentUpdate. Funkce, kde budeme reagovat na uživatelský vstup na základě vytvořených projevy. Takže, pokud uživatel řekl: "Aktualizace na sport", pak by tato funkce byla volána. Začneme vytvořením proměnné zvané CategorytyPe. , který vezme hlasový vstup uživatele. Pak ukládáme typ kategorie uvnitř databáze Firebase a získáte Alexa, abyste nám sdělili jméno kategorie, na které jsme aktualizovali.

 'ContentUpdate': Funkce () {
    var CategateyType = this.Event.request.intent.slots.category.Value;
    if (firebase.apps.length === 0) {
      Firebase.initializeApp (config);
    }
         Firebase.DataBase (). Ref ('/'). SET ({
            Přednost: CategatteryPe.
            }). Pak ((data) = & gt; {
            Firebase.app (). Smazat (). Pak ()
            }). Catch ((err) = & gt; {
            console.log (err);
            })
        This.Emit (': Zeptejte se ", aktualizujete se na' + CatheryType);
},

Po uložení souboru index.js budete muset zip na projektu. Přejděte do složky projektu z příkazového řádku a zadejte následující příkaz.

 Zip -r index.zip *

Hlava zpět do funkce uvnitř Lambda a přejděte dolů do sekce Function Code. Z rozevíracího seznamu pro typ ENTRY typu, zvolte 'Nahrát soubor .zip'. Nyní budete moci nahrát soubor zip.

Než otestujete svůj projekt uvnitř Alexa simulátoru, vezměte si arn vpravo od stránky Lambda a zadejte to uvnitř koncového bodu konzoly Alexa. Chcete-li otestovat své dovednosti, vše, co musíte říct, je "Open Web Update" a Alexa bude reagovat s "Vítejte na webovou aktualizaci". Pokud nyní řeknete: Aktualizace na sport ', Alexa by měla říci' aktualizací na sport '. Slovo "sport" by se měl také objevit v preferenci uvnitř vaší databáze firebase.

Novinová stránka

Alexa skill: Final page — Zde je to, co bude finální stránka HTML vypadat. Zobrazí kategorii, kterou jste požadovali prostřednictvím Alexa

Nakonec si stáhněte stránku zpravodajství (index.html) z projektu Alexa - složka HTML Github. .

Otevřete soubor Main.JS a zadejte vlastní údaje o konfiguraci Firebase na řádcích 1-8, stejně jako jsme dříve v tutoriálu.

Budete také muset zadat své zprávy API klíč z Newsapi.org on line 11 souboru Main.JS.

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

Pokud nyní otevřete soubor index.html, mělo by to naložit v některých novinách z vybrané kategorie. Pokaždé, když řeknete Alexa aktualizovat s novou kategorií (sport, technologie, podnikání nebo politika), se změní kategorie novinek na stránce.

Alexa, dále!

To je jen malý příklad toho, co byste mohli dosáhnout s Alexou a doufejme, že vám dává dobrou nadaci pro všechny budoucí hlasové projekty. Můžete vždy přidat do více hodnot slotu, abyste získali více kategorií z API nebo dokonce aktualizovat projekt tak, aby vytáhl vlastní webové stránky / příspěvky. Nemůžu se dočkat, až uvidím, jak web a vývojáři aplikací budou obsahovat Alexa ve svých projektech.

Máte vaše stránky nahoru a běží?Sledujte jej plně s nejlepším web hosting Služby.

Tento článek byl původně publikován v čísle 313 síť Časopis nejprodávanějšího světa pro webové designéry a vývojáře. Koupit problém 313 zde nebo Přihlásit se zde .

Související články:

Proč hlas Uis jsou další velká věc ve webovém designu
Hlasové prototypování přidáno do Adobe XD
Konečný průvodce všem zařízením Amazon

Jak vytvořit Alexa Skill pro vaše stránky

Co budu potřebovat?

Záměry, projevy a sloty

Funkce AWS Lambda

Vytvořit místní projekt

Konfigurace Firebase.

Funkce ContentUpdate

Novinová stránka

Alexa, dále!

jak - Nejoblíbenější články

Jak zapsat HTML kód rychleji

Jak vytvořit komiksovou stránku

Vybudujte SEO-Friendly Head Component pro NextJs / Reagujte

10 způsobů, jak zlepšit 3D anatomii

Vytvořit animovaný textový textový efekt

Upgrade textury v návrhu látky

Vytvořit efekt portálu v Maya

Prototype Tlačítko plovoucí akce v pixate

Kategorie