Cómo crear una habilidad Alexa para su sitio

Sep 14, 2025

Cómo

[dieciséis]

Muchos de nosotros ahora tenemos algún tipo de asistente de voz alrededor de la casa, ya sea un eco de Amazon, Apple HomePod o un hogar de Google. Parece que la voz va a tener un gran impacto en la forma en que hacemos nuestras vidas diarias, y como desarrolladores web debemos preguntarnos, cuáles son las formas en que podemos mejorar. experiencia de usuario Al implementar la voz en nuestros sitios web y aplicaciones web.

En este tutorial, vamos a construir una habilidad simple Alexa que actualiza el contenido de las noticias en un sitio web. El tipo de categoría dependerá de la entrada de voz por parte del usuario. Ayudaría si ya tiene alguna experiencia con AWS, pero hay mucha documentación para ayudarlo si se pone en un pepinillo.

¿Construyendo un nuevo sitio web? Mantener las cosas simples con un buen Creador de sitios web . ¿Tienes archivos de diseño para almacenar? Manténgalos a salvo en almacenamiento en la nube .

10 pasos para una experiencia de usuario atractiva

¿Qué necesitaré?

Primero, encuentra los archivos para este tutorial. en GitHub .

También deberá inscribirse para un Cuenta del desarrollador de Amazon y un Cuenta AWS .

Firebase se utilizará para almacenar nuestra entrada de usuario, así que asegúrese de registrarse para un Cuenta Firebase . También utilizaremos la API de noticias para obtener las últimas noticias, así que consiga una llave de API gratuita en newsapi.org .

Intentos, expresiones y tragamonedas.

Una vez que estés configurado, navegue hasta Desarrollador.amazon.com/alexa/console/ask y haz clic en crear habilidad. Lo primero que debemos hacer es establecer intentos, declaraciones y tipos de ranuras dentro de la consola de Desarrollador Alexa. Una intención es lo que el usuario de la habilidad está tratando de lograr. Las declaraciones son frases específicas que los usuarios dirán al hablar con Alexa, por ejemplo: '¿Qué día es?'. Una ranura es una variable que se relaciona con una expresión, por ejemplo: '¿A qué hora es {lugar}?'. Esto haría {lugar} la ranura personalizada.

Seleccione Intentaciones desde el lado izquierdo del tablero y haga clic en Agregar intención. Asegúrese de crear intención personalizada seleccionada y escriba Contentupdato En el cuadro de texto: esto ahora se convertirá en nuestro nombre de función más adelante.

Ahora pasamos a las declaraciones, que es donde vamos a necesitar tomar el categoría de las noticias que el usuario quiere actualizar. Utilizaremos la categoría como nuestro nombre de tragamonedas y luego configuraremos las siguientes expresiones:

 "Actualizar {categoría}"
"{Categoría} Historias"
"Actualizar a {categoría}"
"Establecer historias a {Categoría}"

Finalmente, necesitamos crear un tipo de ranura, donde escribiremos un par de entradas que esperamos obtener del usuario. Desde el lado izquierdo del tablero, haga clic en Agregar al lado a los tipos de ranuras. Escriba 'newstype' y haga clic en el botón 'Crear tipo de ranura personalizada'. Bajo los valores de la ranura, deberá agregar algunas categorías de noticias. Usaremos deporte, negocios, tecnología y política. Una vez que haya terminado, asegúrese de haber seleccionado NEWSTYPE desde el menú desplegable como el tipo de ranura para la categoría.

Función AWS Lambda

Ahora nos dirigiremos a Lambda dentro de AWS . Seleccione Crear función y luego seleccione la caja de radio Blueprints. Asegúrate de seleccionar el Alexa-Skill-Kit-SDK-FACTSKILL de la lista y haga clic en Configurar. Dale un nombre a tu función y luego crea un nuevo rol. Cuando haya terminado, haga clic en Crear función en la parte inferior de la página. Deberá seleccionar el kit de habilidades Alexa como un disparador para su función, entonces podemos pasar a la función en sí. No vamos a utilizar el editor de código incorporado para este proyecto; En su lugar, escribiremos las funciones localmente y luego cargaremos un archivo zip. Asegúrese de copiar los contenidos del archivo index.js dentro del editor Lambda, ya que veremos esto dentro de nuestro proyecto local.

Crear un proyecto local

Comenzaremos creando un nuevo proyecto de nodo localmente. Dentro de nuestro propio archivo index.js, pegaremos los contenidos que acabamos de tomar de Lambda. Necesitamos importar Firsebase y el SDK Alexa usando NPM.

 NPM instalar Alexa-SDK
NPM Instale Firebase

Asegúrese de incluir las referencias en la parte superior de su archivo index.js.

 Const Alexa = requieren ('Alexa-SDK');
varirbase = requieren ("FIRBASE");

Debe tener algún código predeterminado ya, uno de los cuales se llama ' SunchRequest '. Esto se utiliza para dar la bienvenida al usuario a la habilidad. Todo lo que necesita hacer aquí es cambiar el mensaje de bienvenida a 'Bienvenido a la actualización del sitio web'.

 'SunchRequest': Función () {
        Esto.Emit (': Preguntar', 'Bienvenido a la actualización del sitio web');
    },

Si usas el :contar Comando, entonces Alexa terminará la habilidad después del mensaje, mientras que si usa :pedir Entonces Alexa escuchará los ocho segundos para el siguiente mensaje. Estaremos usando :pedir , para que Alexa esté listo para escuchar nuestro indicador de actualización.

Configuración de la bomba de fuego

A continuación, debemos agregar nuestros detalles de configuración de Firebase en la parte superior del archivo index.js.

 var config = {
    Apiky: "& lt; api_key & gt;",
    AuthDomain: "& lt; Project_ID & GT; .FireBaseapp.com",
    DatabaseUrl: "https: // & lt; database_name & gt; .fufebaseio.com",
    Proyector: "& lt; Project_ID & GT;",
    StorageBucket: "& lt; Bucket & GT; .appspot.com",
    MessagingSenderID: "& lt; sender_id & gt;"
  };
Firebase.initializevp (config);

Función de contentupdate

Anteriormente en el tutorial, creamos una intención llamada 'contentupdate'. Esto significa que necesitamos crear un Contentupdato Función, donde responderemos a la entrada del usuario según las expresiones que creamos. Entonces, si el usuario dijo 'Actualizar al deporte', entonces se llamaría esta función. Comenzamos creando una variable llamada CategoryType , que toma la entrada de voz del usuario. Luego, almacenamos el tipo de categoría dentro de la base de datos de Firebase y obtenga Alexa para decirnos el nombre de la categoría que actualizamos.

 'ContentupDate': Función () {
    var categoríaType = esto.Event.Request.Intent.Slots.Category.Value;
    if (Firebase.apps.length === 0) {
      Firebase.initializevp (config);
    }
         Firebase.database (). Ref ('/'). Set ({
            Preferencia: CategoryType
            }). Entonces ((datos) = & gt; {
            Firebase.app (). Eliminar (). Entonces ()
            }). Captura ((ERR) = & gt; {
            console.log (error);
            })
        Esto.Emit (': Preguntar', 'Usted actualizó a' + CategoryType);
},

Después de guardar su archivo index.js, deberá cerrar el proyecto. Navegue a la carpeta del proyecto desde la línea de comandos y escriba el siguiente comando.

 zip -r index.zip *

Vuelva a su función dentro de Lambda y desplácese hacia abajo a la sección Código de función. En el cuadro desplegable para el tipo de entrada de código, seleccione 'Subir un archivo .zip'. Ahora podrá cargar su archivo zip.

Antes de probar su proyecto dentro del simulador Alexa, tome el ARN en la parte superior derecha de la página Lambda e ingrese esto dentro de la sección de punto final de la consola Alexa. Para probar su habilidad, todo lo que necesita decir es 'Abrir la actualización web' y Alexa responderá con 'Bienvenido a la actualización web'. Si ahora dice 'Actualizar al deporte', Alexa debería decir 'Usted actualizó al deporte'. La palabra 'deporte' también debe aparecer en preferencia dentro de su base de datos de Firebase.

Página de noticias

Finalmente, descargue la página de noticias que creé (index.html) del proyecto Alexa - Carpeta HTML en Github .

Abra el archivo main.js e ingrese en sus propios detalles de configuración de Firebase en las líneas 1-8, como lo hicimos anteriormente en el tutorial.

También deberá ingresar su clave API de noticias de newsapi.org en la línea 11 del archivo main.js.

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

Si ahora abre el archivo index.html, debe cargarse en algunas noticias de su categoría elegida. Cada vez que le dices a Alexa que se actualizara con una nueva categoría (deporte, tecnología, negocios o política), cambiará la categoría de noticias en la página.

Alexa, en adelante!

Este es solo un pequeño ejemplo de lo que podría lograr con Alexa y, con suerte, le brinde una buena base para cualquier futuro de voz. Siempre puede agregar más valores de tragamonedas para obtener más categorías de la API o incluso actualizar el proyecto para que se extraiga en su propio sitio web Noticias / publicaciones. No puedo esperar a ver cómo los desarrolladores de Web y App incluirán Alexa en sus proyectos.

¿Tienes tu sitio en funcionamiento? Monitorelo completamente con lo mejor Alojamiento web servicios.

Este artículo fue publicado originalmente en el número 313 de neto , la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar emito 313 aquí o Suscríbete aquí .

Artículos relacionados:

¿Por qué las UIS de voz son la próxima gran cosa en diseño web?
Prototipos de voz agregados a Adobe XD
La guía definitiva de todos los dispositivos de Amazon.

Cómo crear una habilidad Alexa para su sitio

¿Qué necesitaré?

Intentos, expresiones y tragamonedas.

Función AWS Lambda

Crear un proyecto local

Configuración de la bomba de fuego

Función de contentupdate

Página de noticias

Alexa, en adelante!

Cómo - Artículos más populares

Cómo hacer una aplicación de Apple Watch

Cómo dibujar un lobo

Master el pincel del mezclador en Photoshop

Crea un diseño sensible con la cuadrícula CSS

Scatter Trees con rayos V

caché en el refuerzo del rendimiento de la BBC

Cómo agregar fondos CSS divertidos a sus sitios

Cómo obtener más de GIFS

Categorías