Come creare un'abilità Alexa per il tuo sito

Feb 2, 2026

Come si fa

Molti di noi ora hanno una sorta di assistente vocale in giro per la casa, che sia un eco amazzonico, Apple homePod o una casa di Google. Sembra che la voce avrà un enorme impatto sul modo in cui andiamo alla nostra vita quotidiana, e come sviluppatori web dobbiamo chiederci, quali sono i modi in cui possiamo migliorare esperienza utente Implementando la voce nei nostri siti Web e applicazioni Web?

In questo tutorial, costrueremo una semplice abilità Alexa che aggiorna i contenuti di notizie su un sito web. Il tipo di categoria dipenderà dall'input della voce da parte dell'utente. Aiuterà se hai già qualche esperienza con AWS, ma c'è molta documentazione là fuori per aiutarti se si arriva in un sottaceto.

Costruire un nuovo sito web? Tieni le cose semplici con un bene Builder del sito web . Hai dei file di progettazione in negozio? Tienili al sicuro deposito cloud. .

10 passaggi per un'esperienza utente coinvolgente

Cosa avrò bisogno?

Innanzitutto, trova i file per questo tutorial su GitHub. .

Dovrai anche registrarti per un Account Developer Amazon. e un Aws Account. .

Firebase verrà utilizzato per memorizzare il nostro input dell'utente, quindi assicurati di registrarti a Account Firebase . Usereremo anche l'API delle notizie per ottenere le ultime notizie, quindi prenditi una chiave API gratuita a newsapi.org. .

Intenti, enunciazioni e slot

Alexa skill: Utterances — Ecco gli enunciato che abbiamo impostato all'interno della console di Alexa Developer per la nostra abilità. Sentiti libero di aggiungere altro

Una volta configurato, vai a sviluppatore.amazon.com/alexa/console/sk. e fai clic su Crea abilità. La prima cosa che dobbiamo fare è configurazione ditenti, enunciazioni e tipi di slot all'interno della console di sviluppatore Alexa. Un intento è ciò che l'utente dell'abilità è cercare di raggiungere. Le espressioni sono frasi specifiche che gli utenti diranno quando si parla con Alexa, ad esempio: "Che giorno è? '. Uno slot è una variabile che si riferisce a un enunciato, ad esempio: "A che ora è in {place}? '. Questo farebbe {PLASE} lo slot personalizzato.

Seleziona gli intenti dal lato sinistro del dashboard e fare clic su Aggiungi intenti. Assicurati di creare l'intento personalizzato è selezionato e digita Contentupdate. Nella casella di testo: questo diventerà ora il nostro nome di funzione in seguito.

Ora passiamo alle espressioni, che è dove avremo bisogno di prendere il categoria delle notizie che l'utente vuole aggiornare. Usereremo la categoria come il nostro nome slot e quindi configureremo le seguenti espressioni:

 "Aggiorna {categoria}"
"{categoria} storie"
"Aggiorna a {categoria}"
"Imposta storie su {categoria}"

Infine, dobbiamo creare un tipo di slot, dove scriveremo un paio di input che ci aspettiamo di ottenere dall'utente. Dal lato sinistro del dashboard, fare clic su Aggiungi Accanto ai tipi di slot. Digita "Newstype" e fai clic sul pulsante "Crea tipo di slot personalizzato". Sotto valori slot, dovrai aggiungere alcune categorie di notizie. Useremo sport, affari, tecnologie e politiche. Una volta terminato, assicurati di aver selezionato Newstype dal menu a discesa come tipo di slot per la categoria.

AWS LAMBDA FUNCTION.

Ora dirigeremo a Lambda in AWS. . Selezionare Crea funzione e quindi selezionare la casella Radio BluePrints. Assicurati di selezionare il Alexa-skill-kit-sdk-factskill Dall'elenco e fare clic su Configura. Dai la tua funzione un nome e quindi creare un nuovo ruolo. Al termine, fare clic su Crea funzione nella parte inferiore della pagina. Avrai bisogno di selezionare Alexa Skills Kit come trigger per la tua funzione, allora possiamo passare alla funzione stessa. Non useremo l'editor di codice integrato per questo progetto; Invece scriveremo le funzioni localmente e quindi caricando un file zip. Assicurati di copiare il contenuto del file Index.js all'interno dell'Editor Lambda, poiché incolleremo questo all'interno del nostro progetto locale.

Crea un progetto locale

Inizieremo la creazione di un nuovo progetto del nodo localmente. All'interno del nostro file Index.js, incolleremo i contenuti che abbiamo appena preso da Lambda. Dobbiamo importare Firebase e Alexa SDK utilizzando NPM.

 NPM Installa Alexa-SDK
NPM Installare Firebase

Assicurati di includere i riferimenti nella parte superiore del file index.js.

 Const Alexa = richiedere ('Alexa-SDK');
VAR FireBase = Richiedi ("Firebase");

Dovresti avere qualche codice predefinito già lì, uno dei quali è chiamato ' Launchrequest. '. Questo è usato per accogliere l'utente per l'abilità. Tutto quello che devi fare qui è cambiare il messaggio di benvenuto per 'Benvenuto all'aggiornamento del sito web'.

 'Launchrequest': funzione () {
        This.emit (': chiedi', 'Benvenuto all'aggiornamento del sito web);
    },

Se usi il :raccontare Comando Allora Alexa finirà l'abilità dopo il messaggio, mentre se usi :Chiedi Quindi Alexa ascolterà otto secondi per il prossimo prompt. Usereremo :Chiedi , così che Alexa è pronto ad ascoltare il nostro prompt di aggiornamento.

Configurazione di Firebase

Successivamente, dobbiamo aggiungere i nostri dettagli di configurazione del FireBase nella parte superiore del file index.js.

 VAR CONFIG = {
    APIKEY: "& lt; API_KEY & GT;",
    Authomain: "& lt; progetto_id & gt; .firebaseapp.com",
    databaseturl: "https: // & lt; database_name & gt; .firebaseio.com",
    ProjectID: "& lt; progetto_id & gt;",
    StorageBucket: "& lt; bucket & gt; .Appspot.com",
    MessagingingSenderID: "& lt; wender_id & gt;"
  };;
Firebase.initializeapp (config);

Funzione ContentUpdate.

Alexa skill: Simulator — Alexa Simulator è un ottimo modo di testare la tua abilità sulla tua macchina senza aver bisogno di un dispositivo Amazon Echo

In precedenza nel tutorial, abbiamo creato un intento chiamato "ContentUpdate". Ciò significa che dobbiamo creare a Contentupdate. Funzione, dove risponderemo all'ingresso dell'utente in base alle espressioni che abbiamo creato. Quindi, se l'utente ha detto "Aggiorna allo sport", allora questa funzione sarà chiamata. Iniziamo creando una variabile chiamata categorytype. , che prende l'immissione vocale dell'utente. Conserviamo quindi il tipo di categoria all'interno del database di FireBase e ottieni Alexa per dirci il nome della categoria che abbiamo aggiornato.

 'ContentUpdate': Function () {
    var categoryType = this.event.request.intent.slots.category.Value;
    IF (FireBase.Apps.Length === 0) {
      Firebase.initializeapp (config);
    }
         Firebase.dabase (). Ref ('/'). Imposta ({
            Preferenza: categorytype.
            }). Quindi ((dati) = & GT; {
            Firebase.app (). Elimina (). Quindi ()
            }). Catch ((ERR) = & GT; {
            console.log (err);
            })
        questo.emit (': chiedi', 'hai aggiornato a' + categoryType);
},

Dopo aver salvato il tuo file index.js, è necessario zittere il progetto. Passare alla cartella del progetto dalla riga di comando e digitare il comando seguente.

 zip -r index.zip *

Torna alla tua funzione all'interno di Lambda e scorri verso il basso fino alla sezione del codice funzione. Dalla casella a discesa per il tipo di ingresso del codice, selezionare 'Carica un file .zip'. Ora sarai in grado di caricare il tuo file zip.

Prima di testare il progetto all'interno del simulatore Alexa, prendi l'ARN in alto a destra della pagina Lambda e inseriscilo all'interno della sezione Endpoint della console Alexa. Per testare la tua abilità, tutto ciò che devi dire è 'Open Web Update' e Alexa risponderà con "Benvenuto all'Aggiornamento Web". Se ora si dice 'Aggiorna allo sport', Alexa dovrebbe dire "Hai aggiornato allo sport". La parola "sport" dovrebbe apparire anche in base alle preferenze all'interno del database dei firebase.

Pagina di notizie

Alexa skill: Final page — Ecco come sarà la pagina HTML finale. Visualizzerà la categoria che hai richiesto tramite Alexa

Infine, scarica la pagina di notizie ho creato (index.html) dal progetto Alexa - cartella HTML su Github. .

Apri il file Main.JS e inserisci i tuoi dettagli di configurazione di FireBase sulle linee 1-8, come abbiamo fatto in precedenza nel tutorial.

Avrai anche bisogno di inserire la chiave dell'API di notizie da Netwaypi.org on line 11 del file main.js.

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

Se ora apri il file index.html, dovrebbe caricare alcune storie di notizie dalla categoria scelta. Ogni volta che dici ad Alexa di aggiornare con una nuova categoria (sport, tecnologia, business o politica), la categoria News Story sulla pagina cambierà.

Alexa, in poi!

Questo è solo un piccolo esempio di ciò che potresti ottenere con Alexa e spero che ti dia una buona base per qualsiasi progetto vocale futuro. Potresti sempre aggiungere più valori di slot per ottenere più categorie dall'API o addirittura aggiornare il progetto in modo che tirasse nelle notizie / post del tuo sito web. Non vedo l'ora di vedere come gli sviluppatori Web e App includano Alexa nei loro progetti.

Hai il tuo sito in alto e correre? Monitoralo completamente con il meglio web hosting Servizi.

Questo articolo è stato originariamente pubblicato in emissione 313 di netto , la rivista best-seller del mondo per web designer e sviluppatori. Comprare il problema 313 qui o Iscriviti qui .

Articoli Correlati:

Perché la voce UIS è la prossima grande cosa nel web design
Prototipazione vocale aggiunta a Adobe XD
La guida definitiva a tutti i dispositivi Amazon

Come creare un'abilità Alexa per il tuo sito

Cosa avrò bisogno?

Intenti, enunciazioni e slot

AWS LAMBDA FUNCTION.

Crea un progetto locale

Configurazione di Firebase

Funzione ContentUpdate.

Pagina di notizie

Alexa, in poi!

Come si fa - Articoli più popolari

44 delle migliori scorciatoie e gesti per iPad per iPados 2020

Gestisci lo stato del modulo reagire con FORMIK

Master la spazzola del miscelatore in Photoshop

Aggiungi colori digitali ai disegni a matita

Aggiungi animazioni UI al tuo sito

Master ambienti su larga scala in 3DS Max

Dipingi una vita fissa espressiva in acrilico

Costruisci layout complessi con PostCSS-FlexBox

Categorie