Como criar uma habilidade Alexa para o seu site

Jan 28, 2026

Como

Muitos de nós agora temos algum tipo de assistente de voz em casa, seja um eco da Amazon, a Apple HomePod ou um Google Home. Parece que a voz vai ter um impacto enorme na maneira como vamos sobre nossas vidas diárias, e como desenvolvedores da Web, precisamos nos perguntar, quais são as maneiras pelas quais podemos melhorar experiência de usuário implementando voz em nossos sites e aplicativos da web?

Neste tutorial, vamos construir uma simples habilidade Alexa que atualiza o conteúdo da notícia em um site. O tipo de categoria dependerá da entrada de voz pelo usuário. Isso ajudaria se você já tem alguma experiência com a AWS, mas há muita documentação para ajudá-lo se você entrar em uma picleira.

Construindo um novo site? Mantenha as coisas simples com um bom Construtor de sites . Tem arquivos de design para armazenar? Mantenha-os seguros em armazenamento na núvem .

10 passos para uma experiência de usuário envolvente

O que eu precisarei?

Primeiro, encontre os arquivos para este tutorial no github. .

Você também precisará se inscrever para um Conta do Amazon Developer. e um Conta da AWS. .

A Firebase será usada para armazenar nossa entrada de usuário, portanto, certifique-se de se inscrever para um Conta do Firebase. . Também estaremos usando a API de notícias para obter as últimas notícias, então pegue uma chave de API gratuita newsapi.org. .

Intenções, enunciados e slots

Alexa skill: Utterances — Aqui estão os enunciados que configuramos dentro do console do desenvolvedor Alexa para nossa habilidade. Sinta-se livre para adicionar mais

Depois de configurar, navegue até desenvolvedor.amazon.com/alexa/console/ask. e clique em criar habilidade. A primeira coisa que precisamos fazer é configurar intenções, enunciados e tipos de slot dentro do console do desenvolvedor Alexa. Uma intenção é o que o usuário da habilidade está tentando alcançar. Os enunciados são frases específicas que os usuários dirão ao falar com Alexa, por exemplo: "Que dia é isso?". Um slot é uma variável que se relaciona com um enunciado, por exemplo: 'Que horas são em {place}?'. Isso faria {place} o slot personalizado.

Selecione intenção do lado esquerdo do painel e clique em Adicionar intenção. Certifique-se de criar intenção personalizada é selecionada e digite Contentupdate. Na caixa de texto: isso agora se tornará nosso nome de função mais tarde.

Agora passamos para enunciados, que é onde vamos precisar tomar o categoria da notícia de que o usuário deseja atualizar. Nós estaremos usando a categoria como nosso nome de slot e, em seguida, configurar os seguintes enunciados:

 "Atualizar {Category}"
"{category} histórias"
"Atualizar para {Category}"
"Definir histórias para {Category}"

Finalmente, precisamos criar um tipo de slot, onde vamos escrever um par de insumos que esperamos obter do usuário. Do lado esquerdo do painel, clique em Adicionar ao lado de tipos de slot. Digite "NewStype" e clique no botão 'Criar tipo de slots personalizado'. Em valores de slot, você precisará adicionar algumas categorias de notícias. Vamos usar esporte, negócios, tecnologia e política. Depois de terminar, certifique-se de ter selecionado o NewStype na lista suspensa como o tipo de slot para categoria.

Função da AWS Lambda.

Vamos agora ir para Lambda dentro da AWS. . Selecione Criar função e selecione a caixa de rádio Blueprints. Certifique-se de selecionar o alexa-skill-kit-sdk-factskill da lista e clique em Configurar. Dê sua função um nome e crie uma nova função. Quando terminar, clique em Criar função na parte inferior da página. Você precisará selecionar o Alexa Skills Kit como um gatilho para sua função, poderemos passar na própria função. Não estaremos usando o editor de código integrado para este projeto; Em vez disso, estaremos escrevendo as funções localmente e depois upload de um arquivo zip. Certifique-se de copiar o conteúdo do arquivo index.js dentro do editor lambda, como vamos colar isso dentro do nosso projeto local.

Crie um projeto local

Vamos começar criando um novo projeto de nó localmente. Dentro do nosso próprio arquivo index.js, vamos colar o conteúdo que acabamos de levar de lambda. Precisamos importar o Firebase e o Alexa SDK usando NPM.

 NPM instalar Alexa-SDK
NPM instalar firebase

Certifique-se de incluir as referências na parte superior do arquivo index.js.

const alexa = requer ('Alexa-SDK');
Var Firebase = requer ("Firebase");

Você deve ter algum código padrão já, um dos quais é chamado ' LauncherRequest. . Isso é usado para receber o usuário para a habilidade. Tudo que você precisa fazer aqui é alterar a mensagem de boas-vindas para "Bem-vindo à atualização do site".

 'Launcrequest': Função () {
        este.emit (': perguntar', 'Bem-vindo à atualização do site');
    },

Se você usar o :contar O comando então Alexa terminará a habilidade após a mensagem, enquanto se você usar :perguntar Então Alexa ouvirá oito segundos para o próximo prompt. Nós estaremos usando :perguntar , para que Alexa esteja pronto para ouvir nosso prompt de atualização.

Configuração do Firebase.

Em seguida, precisamos adicionar nossos detalhes de configuração do Firebase na parte superior do arquivo index.js.

 var config = {
    APIKEY: "& lt; api_key & gt;",
    AuthDomain: "& lt; Project_id & gt; .firebasapp.com",
    Banco de dados: "https: // & lt; database_name & gt; .firebaseio.com",
    ProjectId: "& lt; project_id & gt;",
    StorageBucket: "& lt; Bucket & Gt; .appspot.com",
    MessagingsenderID: "& lt; sender_id & gt;"
  };
Firebase.initializeapp (config);

Função contentupdate.

Alexa skill: Simulator — O Alexa Simulator é uma ótima maneira de testar sua habilidade em sua máquina sem precisar de um dispositivo Amazon Echo

Mais cedo no tutorial, criamos uma intenção chamada 'contentupdate'. Isso significa que precisamos criar um Contentupdate. função, onde responderemos à entrada do usuário com base nos enunciados que criamos. Então, se o usuário disser "atualizar para o esporte", esta função seria chamada. Começamos criando uma variável chamada CategoryType. , que leva a entrada de voz do usuário. Em seguida, armazenamos o tipo de categoria dentro do banco de dados do Firebase e recebo Alexa para nos dizer o nome da categoria que atualizamos.

 'contentupdate': função () {
    var categoriaType = this.event.request.intent.slots.category.Value;
    if (firebase.apps.length === 0) {
      Firebase.initializeapp (config);
    }
         Firebase.Database (). Ref ('/'). Conjunto ({
            Preferência: CategoryType.
            }). Então ((dados) = & gt; {
            Firebase.app (). Excluir (). Então ()
            }). Catch ((err) = & gt; {
            console.log (err);
            })
        este.emit (': pergunte', 'você atualizou para' + categoryype);
},

Depois de salvar seu arquivo index.js, você precisará compactar o projeto. Navegue até a pasta do projeto a partir da linha de comando e digite o seguinte comando.

 Zip -r index.zip *

Volte para a sua função dentro do Lambda e vá até a seção de código de função. Na caixa suspensa para o tipo de entrada de código, selecione 'Carregar um arquivo .zip'. Agora você poderá enviar seu arquivo zip.

Antes de testar seu projeto dentro do Alexa Simulator, pegue o ARN no canto superior direito da página lambda e insira isso dentro da seção Endpoint do console Alexa. Para testar sua habilidade, tudo o que você precisa dizer é 'Abrir Web Update' e Alexa responderão com 'Bem-vindo à atualização da web'. Se você agora diz "atualização para o esporte", Alexa deve dizer "você atualizou para o esporte". A palavra 'esporte' também deve aparecer sob preferência dentro do banco de dados do Firebase.

Página de notícias

Alexa skill: Final page — Aqui está o que a página HTML final será. Ele exibirá a categoria que você solicitou através do Alexa

Finalmente, baixe a página de notícias que criei (index.html) no projeto Alexa - Pasta HTML em Github .

Abra o arquivo main.js e insira em seus próprios detalhes de configuração do Firebase nas linhas 1-8, como fizemos anteriormente no tutorial.

Você também precisará inserir sua chave de API de notícias do NewsApi.org na linha 11 do arquivo main.js.

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

Se você agora abrir o arquivo index.html, ele deve carregar algumas notícias da categoria escolhida. Toda vez que você contar Alexa para atualizar com uma nova categoria (esporte, tecnologia, negócios ou política), a categoria de notícias na página será alterada.

Alexa, em diante!

Este é apenas um pequeno exemplo do que você poderia conseguir com Alexa e espero que lhe dê uma boa base para quaisquer projetos de voz futuros. Você sempre pode adicionar mais valores de slot para obter mais categorias da API ou até mesmo atualizar o projeto para que ele puxa em suas próprias notícias / posts do site. Eu não posso esperar para ver como os desenvolvedores da Web e App incluirão Alexa em seus projetos.

Tem seu site para cima e correndo?Monitore-o totalmente com o melhor hospedagem na web. Serviços.

Este artigo foi originalmente publicado em questão 313 de internet , a revista mais vendida do mundo para web designers e desenvolvedores. Comprar edição 313 aqui ou Inscreva-se aqui .

Artigos relacionados:

Por que a voz é a próxima grande coisa no web design
Prototipagem de voz adicionada ao Adobe XD
O guia final para todos os dispositivos da Amazon

Como criar uma habilidade Alexa para o seu site

O que eu precisarei?

Intenções, enunciados e slots

Função da AWS Lambda.

Crie um projeto local

Configuração do Firebase.

Função contentupdate.

Página de notícias

Alexa, em diante!

Como - Artigos mais populares

Como criar um aplicativo com vue.js

Desenhe uma gueixa ruim

Domine a ciência da otimização da taxa de conversão

Como criar controles de equipamento personalizado em Maya

Como misturar uma paleta de guache

Como desenhar uma figura molhada

Faça plantas realistas no cinema 4D

10 Regras de Ouro para SVGs responsivos

Categorias