Sådan opretter du en Alexa Færdighed til dit websted

Jan 24, 2026

hvordan

Mange af os har nu en slags stemmeassistent i hjemmet, om det er et Amazon-ekko, Apple Homepod eller et Google-hjem. Det ser ud til, at Voice skal have en stor indflydelse på den måde, vi går om vores daglige liv, og som webudviklere skal vi spørge os selv, hvad er de måder, vi kan forbedre på brugererfaring Ved at implementere stemme til vores hjemmesider og webapplikationer?

I denne tutorial vil vi bygge en simpel Alexa Færdighed, der opdaterer nyhedsindholdet på en hjemmeside. Kategori-typen afhænger af brugerens stemmeindgang. Det ville hjælpe, hvis du allerede har erfaring med AWS allerede, men der er en masse dokumentation derude for at hjælpe dig ud, hvis du kommer i en pickle.

Opbygge en ny hjemmeside? Hold tingene enkle med en god Website Builder. . Fik designfiler til at gemme? Hold dem sikre i Sky lagring .

10 trin til en engagerende brugeroplevelse

Hvad skal jeg bruge?

Find først filerne til denne vejledning på Github. .

Du skal også registrere dig for en Amazon Developer Account. og AN. AWS-konto .

Firebase vil blive brugt til at gemme vores brugerindgang, så sørg for at du tilmelder dig en FireBase-konto . Vi vil også bruge nyhederne API for at få de seneste nyhedshistorier, så få dig en gratis API-nøgle på newsapi.org. .

Hensigter, udtalelser og slots

Alexa skill: Utterances — Her er de udtalelser, vi har installeret inde i Alexa Developer Console for vores færdighed. Du er velkommen til at tilføje mere

Når du er oprettet, skal du navigere til udvikler.amazon.com/alexa/console/ask. og klik på Opret færdigheder. Det første, vi skal gøre, er oprettet hensigter, udtalelser og slottyper inde i Alexa Developer Console. En hensigt er, hvad brugeren af færdigheden forsøger at opnå. Udtalelser er specifikke sætninger, som brugerne vil sige, når man taler til Alexa, for eksempel: 'Hvilken dag er det?'. En slot er en variabel, der vedrører en udtale, for eksempel: "Hvornår er det i {Place}? '. Dette ville gøre {place} den brugerdefinerede slot.

Vælg hensigter fra venstre side af instrumentbrættet, og klik på Tilføj hensigt. Sørg for, at oprette brugerdefineret hensigt er valgt og skriv Contentupdate. I tekstboksen: Dette bliver nu vores funktionsnavn senere.

Vi går nu videre til udtalelser, hvor vi skal tage kategori af de nyheder, som brugeren ønsker at opdatere til. Vi bruger kategori som vores slotnavn og derefter opretter følgende udtalelser:

 "opdatering {kategori}"
"{kategori} historier"
"Opdater til {Kategori}"
"Indstil historier til {kategori}"

Endelig skal vi oprette en slottype, hvor vi vil skrive et par inputs, som vi forventer at få fra brugeren. Fra venstre side af instrumentbrættet skal du klikke på Tilføj ved siden af Slottyper. Indtast 'Newstype' og klik på knappen 'Opret brugerdefineret slot type'. Under slot værdier skal du tilføje i nogle nyhedskategorier. Vi vil bruge sport, forretning, teknologi og politik. Når du er færdig, skal du sørge for at have valgt Newstype fra dropdown som slottype for kategori.

Aws lambda funktion

Vi vil nu gå over til Lambda inde i AWS. . Vælg Opret funktion, og vælg derefter Blueprints Radio Box. Sørg for, at du vælger Alexa-skill-kit-sdk-factskill fra listen og klik på Konfigurer. Giv din funktion et navn og lav derefter en ny rolle. Når du er færdig, skal du klikke på Opret funktion nederst på siden. Du skal vælge Alexa Færdigheds Kit som en trigger til din funktion, så vi kan flytte på selve funktionen. Vi vil ikke bruge den indbyggede kode editor til dette projekt; I stedet vil vi skrive funktionerne lokalt og derefter uploade en zip-fil. Sørg for at kopiere indholdet af Index.js-filen inde i Lambda Editor, da vi vil indsætte dette i vores lokale projekt.

Opret et lokalt projekt

Vi vil starte med at oprette et nyt node projekt lokalt. Inde i vores egen index.js-fil, vil vi indsætte indholdet, vi lige tog fra Lambda. Vi skal importere firebase og Alexa SDK ved hjælp af NPM.

 NPM Installer Alexa-SDK
NPM Installer Firebase

Sørg for at inkludere referencerne øverst på din indeks.js-fil.

const Alexa = Kræv ('Alexa-SDK');
Var FireBase = Kræv ("Firebase");

Du skal have nogle standardkode allerede der, hvoraf den ene hedder ' Launchrequest. '. Dette bruges til at byde brugeren velkommen til færdigheden. Alt du skal gøre her er at ændre velkomstmeddelelsen til 'Velkommen til Website Update'.

 'LaunchRequest': Funktion () {
        dette.emit (': spørg', 'Velkommen til Website Update');
    },

Hvis du bruger :fortælle kommando derefter Alexa vil afslutte færdigheden efter meddelelsen, mens hvis du bruger :Spørg Så lytter Alexa i otte sekunder til næste prompt. Vi vil bruge :Spørg , så Alexa er klar til at lytte til vores opdateringsspørgsmål.

Firebase konfiguration

Dernæst skal vi tilføje vores FireBase-konfigurationsdetaljer øverst på INDEX.JS-filen.

 VAR CONFIG = {
    Apikey: "& lt; api_key & gt;",
    Authdomain: "& lt; project_id & gt; .firebaseapp.com",
    databaseurl: "https: // & lt; database_name & gt; .firebaseio.com",
    Projektid: "& lt; projekt_id & gt;",
    StorageBucket: "& lt; bucket & gt; .appspot.com",
    MessagingsDoder: "& lt; afsender_id & gt;"
  };
Firebase.initializeapp (config);

Contentupdate funktion

Alexa skill: Simulator — Alexa simulatoren er en fantastisk måde at teste din færdighed på din maskine uden at have brug for en Amazon Echo-enhed

Tidligere i vejledningen skabte vi en hensigt kaldet 'ContentUpdate'. Det betyder, at vi skal oprette en Contentupdate. Funktion, hvor vi vil reagere på brugerindgangen baseret på de udtalelser, vi oprettede. Så hvis brugeren sagde 'opdatering til sport', så ville denne funktion blive kaldt. Vi begynder med at oprette en variabel kaldet categoryType. , som tager brugerens stemmeindgang. Vi gemmer derefter kategori type inde i Firebase Database og får Alexa for at fortælle os navnet på den kategori, vi opdaterede til.

 'ContentUpdate': Funktion () {
    Var CategoryType = This.Event.Request.Intent.Slots.Category.Value;
    hvis (firebase.apps.length === 0) {
      Firebase.initializeapp (config);
    }
         Firebase.database (). Ref ('/'). Sæt ({
            Præference: CategoryType
            }). Derefter ((data) = & gt; {
            Firebase.app (). Slet (). Derefter ()
            }). Fang ((err) = & gt; {
            Console.log (Err);
            })
        dette.emit (': spørg', 'du opdaterede til' + categoryType ';
},

Når du gemmer din indeks.js-fil, skal du zip op projektet. Naviger til projektmappen fra kommandolinjen og indtast følgende kommando.

 Zip -R-index.zip *

Gå tilbage til din funktion inde i Lambda og rul ned til funktionskode sektionen. Fra rullemenuen til kodeindtastningstype skal du vælge 'Upload en .zip-fil'. Du vil nu kunne uploade din ZIP-fil.

Før du tester dit projekt inde i Alexa Simulator, skal du tage ARN øverst til højre på Lambda-siden og indtaste dette inde i endepunktsafsnittet på Alexa-konsollen. For at teste din færdighed, er alt hvad du behøver at sige, 'Open Web Update' og Alexa svarer med 'Velkommen til Web Update'. Hvis du nu siger 'opdatering til sport', skal Alexa sige 'du opdateres til sport'. Ordet 'sport' skal også vises under præference inde i din FireBase database.

Nyheder side

Alexa skill: Final page — Her er hvad den endelige HTML-side vil se ud. Det vil vise den kategori, du anmodede om via Alexa

Endelig download den nyhedsside, jeg oprettede (index.html) fra Alexa-projektet - HTML-mappen på Github. .

Åbn Main.js-filen og indtast i dine egne FireBase-konfigurationsoplysninger på linjer 1-8, ligesom vi tidligere i vejledningen.

Du skal også indtaste din nyheds API-nøgle fra NewsApi.org på linje 11 i Main.js-filen.

 VAR MYAPIKEY = "& LT; DITAPIKEY" & GT ;;

Hvis du nu åbner index.html-filen, skal den indlæse i nogle nyhedshistorier fra din valgte kategori. Hver gang du fortæller Alexa at opdatere med en ny kategori (sport, teknologi, forretning eller politik), ændres nyhedshistoriekategorien på siden.

Alexa, fremefter!

Dette er kun et lille eksempel på, hvad du kunne opnå med Alexa og forhåbentlig giver dig et godt fundament for fremtidige talprojekter. Du kan altid tilføje i flere slot værdier for at få flere kategorier fra API eller endda opdatere projektet, så det trækker i din egen hjemmeside nyheder / indlæg. Jeg kan ikke vente med at se, hvordan web- og appudviklere vil omfatte Alexa i deres projekter.

Fik dit websted op og kører?Overvåge det fuldt ud med det bedste Web Hosting. Tjenester.

Denne artikel blev oprindeligt offentliggjort i udstedelse 313 af net , verdens bedst sælgende magasin til webdesignere og udviklere. Køb problem 313 her eller Abonner her .

Relaterede artikler:

Hvorfor Voice Uis er den næste store ting i webdesign
VOICE PROTOTYPING tilføjet til Adobe XD
Den ultimative vejledning til alle Amazon-enheder

Sådan opretter du en Alexa Færdighed til dit websted

Hvad skal jeg bruge?

Hensigter, udtalelser og slots

Aws lambda funktion

Opret et lokalt projekt

Firebase konfiguration

Contentupdate funktion

Nyheder side

Alexa, fremefter!

hvordan - Mest populære artikler

Lino printmaking: En introduktion

Sådan fjerner du rynker i Photoshop

Kom i gang med diffus

Sådan tegner du en stor kat med pasteller

Sådan prototype En mobilapp med Adobe XD

Sådan tilføjes video til interaktive PDF-filer

Opret en hældningsvandseffekt i realflow

Opret kvalitet Digitale kopier af din kunst

Kategorier