Een Alexa-vaardigheid maken voor uw site

Sep 15, 2025

Procedures

Velen van ons hebben nu een soort voice-assistent rond het huis, of het nu een Amazon-echo, Apple homepod of een Google-huis is. Het lijkt erop dat er een enorme impact gaat hebben op de manier waarop we ons dagelijks leven gaan, en als webontwikkelaars moeten we onszelf vragen, wat zijn de manieren waarop we kunnen verbeteren gebruikerservaring Door een stem in onze websites en webapplicaties te implementeren?

In deze tutorial gaan we een eenvoudige Alexa-vaardigheid bouwen die het nieuwsinhoud op een website bijwerkt. Het categorietype is afhankelijk van de spraakinvoer door de gebruiker. Het zou helpen als je al een ervaring hebt met AWS al, maar er is veel documentatie om je te helpen als je in een augurk komt.

Een nieuwe website bouwen? Houd dingen eenvoudig met een goed website bouwer Got Design-bestanden om op te slaan? Houd ze veilig in cloud opslag

10 stappen naar een boeiende gebruikerservaring

Wat heb ik nodig?

Zoek eerst de bestanden voor deze tutorial op Github

U moet ook registreren voor een Amazon Developer-account en een AWS-account

Firebase wordt gebruikt om onze gebruikersinvoer op te slaan, dus zorg ervoor dat u zich aanmeldt voor een Firebase-account We zullen ook het nieuws API gebruiken om de laatste nieuwsverhalen te krijgen, dus zorg dat u een gratis API-sleutel bij bent newsapi.org

Intenties, uitingen en slots

Alexa skill: Utterances — Hier zijn de uitingen die we hebben ingesteld in de Alexa Developer Console voor onze vaardigheid. Voel je vrij om meer toe te voegen

Zodra u bent opgezet, navigeert u naar ontwikkelaar.amazon.com/alexa/console/ask en klik op Vaardigheid maken. Het eerste dat we moeten doen, is intens instellen, uitspraken en slottypen in de Alexa-ontwikkelaarconsole. Een intentie is wat de gebruiker van de vaardigheid probeert te bereiken. Uitgangen zijn specifieke uitdrukkingen die gebruikers zullen zeggen wanneer ze met Alexa praten, bijvoorbeeld: 'Welke dag is het?'. Een slot is een variabele die betrekking heeft op een uiting, bijvoorbeeld: 'Hoe laat is het in {Place}?'. Dit zou {Place} de aangepaste sleuf maken.

Selecteer intenties vanaf de linkerkant van het dashboard en klik op Intent toevoegen. Zorg ervoor dat de aangepaste intentie is geselecteerd en type ContentUpdate In het tekstvak: dit wordt nu later onze functienaam.

We gaan nu verder met uitingen, waar we het nodig hebben om de categorie van het nieuws dat de gebruiker wil bijwerken. We zullen categorie gebruiken als onze slotnaam en vervolgens de volgende uitingen instellen:

 "Update {categorie}"
"{categorie} verhalen"
"Update to {categorie}"
"Stel verhalen in op {categorie}"

Ten slotte moeten we een slottype maken, waar we een aantal inputs zullen ophalen die we verwachten van de gebruiker te krijgen. Klik van de linkerkant van het dashboard op Toevoegen naast Slot-typen. Typ 'Newstype' in en klik op de knop 'Aangepaste slot-type' maken. Onder gokwaarden moet u een aantal nieuwscategorieën toevoegen. We zullen Sport, Business, Technology en Politics gebruiken. Nadat u klaar bent, moet u ervoor zorgen dat u het newstype hebt geselecteerd van de vervolgkeuzelijst als het slottype voor categorie.

AWS Lambda-functie

We gaan nu naar boven naar Lambda binnen AWS Selecteer Functie maken en selecteer vervolgens het vak Blauwdrukken. Zorg ervoor dat u de Alexa-Skill-Kit-SDK-Factskill uit de lijst en klik op Configureren. Geef je functie een naam en maak vervolgens een nieuwe rol. Wanneer u klaar bent, klikt u op Functie maken onderaan de pagina. U moet Alexa Skills Kit selecteren als een trigger voor uw functie, dan kunnen we de functie zelf verplaatsen. We zullen de ingebouwde code-editor voor dit project niet gebruiken; In plaats daarvan zullen we de functies lokaal schrijven en vervolgens een ZIP-bestand uploaden. Zorg ervoor dat u de inhoud van het index.js-bestand kopieert in de Lambda-editor, omdat we dit in ons lokale project zullen plakken.

Maak een lokaal project

We beginnen door lokaal een nieuw knooppuntproject te maken. In het eigen index.js-bestand zullen we de inhoud plakken die we net hebben afgenomen van Lambda. We moeten Firebase en de Alexa SDK importeren met behulp van NPM.

 NPM Installeer Alexa-SDK
NPM Installeer Firebase

Zorg ervoor dat u de referenties bovenaan uw index.js-bestand opneemt.

Const Alexa = vereisen ('Alexa-SDK');
Var FireBase = vereisen ("Firebase");

U zou er al een aantal standaardcode moeten hebben, waarvan er één wordt genoemd ' Launchrequest Dit wordt gebruikt om de gebruiker op de vaardigheid te verwelkomen. Het enige dat u hier hoeft te doen, is het welkomstbericht wijzigen om 'Welkom op Website-update' te wijzigen.

 'LAFTREQUEST': FUNCTION () {
        Dit.emit (': vraag', 'Welkom bij website-update');
    },

Als u de :vertellen opdracht Dan zal Alexa de vaardigheid na het bericht beëindigen, terwijl als u gebruikt :vragen Dan luistert Alexa acht seconden voor de volgende prompt. We zullen gebruiken :vragen , zodat Alexa klaar is om te luisteren naar onze updatepromp.

Firebase-configuratie

Vervolgens moeten we onze Firebase-configuratiedetails bovenaan het index.js-bestand toevoegen.

 Var config = {
    apikey: "& lt; api_key & gt;",
    authomein: "& lt; project_id & gt; .firebaseapp.com",
    databasesurl: "HTTPS: // & LT; Database_name & GT; .fireBaseio.com",
    ProjectID: "& LT; PROJECT_ID & GT;",
    Storebucket: "& LT; BUCKET & GT; AAPPPOT.COM",
    MESSAGINGENDERID: "& LT; SENDER_ID & GT;"
  
Firebase.initialibeAApp (config);

ContentUpdate-functie

Alexa skill: Simulator — De Alexa Simulator is een geweldige manier om je vaardigheden op je machine te testen zonder een Amazon Echo-apparaat te hebben

Eerder in de tutorial hebben we een intentie gemaakt genaamd 'Contentupdate'. Dit betekent dat we moeten maken ContentUpdate Functie, waar we zullen reageren op de gebruikersinvoer op basis van de uitingen die we hebben gemaakt. Dus, als de gebruiker 'Update to Sport' zei, dan zou deze functie worden genoemd. We beginnen met het maken van een variabele genaamd categorie , dat de spraakinvoer van de gebruiker aanneemt. We bewaren vervolgens het categorie Type in de Firebase-database en krijgen Alexa om ons de naam van de categorie die we hebben bijgewerkt.

 'ContentUpdate': functie () {
    Var CategorieType = This.Event.Request.InTent.Slots.category.Value;
    if (firebase.apps.length === 0) {
      Firebase.initialibeAApp (config);
    
         Firebase.database (). Ref ('/'). Set ({
            Voorkeur: categorieType
            }). Dan ((gegevens) = & gt; {
            Firebase.app (). Verwijderen (). Dan ()
            }). Catch ((Err) = & GT; {
            console.log (err);
            
        Dit.emit (': Vraag', 'U hebt bijgewerkt naar' + categorieType);
},

Nadat u uw index.js-bestand hebt opgeslagen, moet u het project opslaan. Navigeer naar de map Project in de opdrachtregel en typ de volgende opdracht.

 Zip -R-index.zip *

Ga terug naar uw functie in Lambda en scrol naar beneden naar het gedeelte Functiecode. Selecteer 'Upload a .zip-bestand' in de vervolgkeuzelijst U kunt nu uw ZIP-bestand uploaden.

Voordat u uw project in de Alexa-simulator test, neemt u de ARN in de rechterbovenhoek van de Lambda-pagina en voert u dit in binnen het eindpuntsectie van de Alexa-console. Om je vaardigheden te testen, is alles wat je moet zeggen 'open web-update' en Alexa reageert met 'Welcome to Web Update'. Als u nu 'Update to Sport' zegt, zou Alexa moeten zeggen 'u hebt bijgewerkt naar Sport'. Het woord 'sport' moet ook onder de voorkeur verschijnen in uw Firebase-database.

Nieuwspagina

Alexa skill: Final page — Dit is waar de laatste HTML-pagina eruit zal zien. Het toont de categorie die u hebt gevraagd via Alexa

Download ten slotte de nieuwpagina die ik heb gemaakt (index.html) van het Alexa-project - HTML-map op Github

Open het Main.js-bestand en voer uw eigen FireBase-configuratiedetails op Lijnen 1-8 in, zoals we eerder in de tutorial deden.

U moet ook uw News API-sleutel van NewsPi.org op regel 11 van het Main.js-bestand invoeren.

 Var Myapikey = "& LT; YOUPIKEYY" & GT ;;

Als u nu het index.html-bestand opent, moet deze in sommige nieuwsverhalen bij uw gekozen categorie worden geladen. Telkens wanneer u Alexa vertelt om bij te werken met een nieuwe categorie (sport, technologie, business of politiek), zal de categorie Nieuws op de pagina op de pagina veranderen.

Alexa, daarna!

Dit is slechts een klein voorbeeld van wat je kunt bereiken met Alexa en hopelijk geeft je een goede basis voor eventuele toekomstige stemprojecten. Je kunt altijd in meer slotwaarden toevoegen om meer categorieën van de API te krijgen of het project zelfs bij te werken, zodat het je eigen website nieuws / berichten trekt. Ik kan niet wachten om te zien hoe web- en app-ontwikkelaars Alexa in hun projecten bevatten.

Heb je je site opgeworpen?Monitor het volledig met de beste web hosting Diensten.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 313 van netto- , 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Koop hier nummer 313 of Abonneer hier

Gerelateerde artikelen:

Waarom stemt u de volgende grote ding in Web Design
Voice-prototyping toegevoegd aan Adobe XD
De ultieme gids voor alle Amazon-apparaten

Een Alexa-vaardigheid maken voor uw site

Wat heb ik nodig?

Intenties, uitingen en slots

AWS Lambda-functie

Maak een lokaal project

Firebase-configuratie

ContentUpdate-functie

Nieuwspagina

Alexa, daarna!

Procedures - Meest populaire artikelen

Hoe een Meme in Photoshop te maken

Aan de slag met Adobe Dimension CC

Fechers tekenen

Verf een ondeugende haas in aquarel

Aan de slag met roest

Maak een geanimeerd 3D-teksteffect

Hoe de schaduwkleur in verf te mengen

Hoe u uw WordPress-website meertalig wilt maken

Categorieën