Как создать навык Alexa для вашего сайта

Sep 14, 2025

Инструкции

У многих из нас сейчас есть какой-то голосовой помощник по дому, будь то Amazon Echo, Apple HomePod или Google Home. Похоже, что голос будет иметь огромное влияние на то, как мы идем о нашей повседневной жизни, а как веб-разработчики нам нужно спросить себя, каковы способы, которыми мы можем улучшить Пользовательский опыт Реализация голоса в наши сайты и веб-приложения?

В этом руководстве мы собираемся построить простой навык Alexa, который обновляет контент новостей на сайте. Тип категории будет зависеть от голоса ввода пользователя. Это поможет, если у вас уже есть опыт работы с AWS, но есть много документации, чтобы помочь вам, если вы попадете в сортировку.

Строительство нового сайта? Держите вещи простыми с хорошим Строитель сайта Отказ Получил файлы дизайна для хранения? Держите их в безопасности в облачное хранилище Отказ

10 шагов к включению пользовательского опыта

Что мне нужно?

Во-первых, найдите файлы для этого руководства на Github Отказ

Вам также нужно будет зарегистрироваться для Учетная запись Developer Amazon и ан AWS аккаунт Отказ

Firebase будет использоваться для хранения нашего пользовательского ввода, поэтому убедитесь, что вы зарегистрируетесь на Учетная запись Firebase Отказ Мы также будем использовать API новостей, чтобы получить последние новости, так что получите себе бесплатный ключ API в Newsapi.org. Отказ

Наимение, высказывания и слоты

Alexa skill: Utterances — Вот высказывания, которые мы установили внутри консоли разработчиков Alexa для наших навыков. Не стесняйтесь добавить больше

Как только вы настроены, перейдите к developer.amazon.com/alexa/console/ask. и нажмите на «Создать навык». Первое, что нам нужно сделать, это создать напряжение, высказывания и типы слотов внутри консоли разработчиков Alexa. Намерение - это то, что пользователь навыков пытается достичь. Высказывания являются специфическими фразами, которые пользователи скажут при разговоре с Alexa, например: «В какой день это?». Слот - это переменная, которая относится к высказыванию, например: «Сколько времени в {место}?». Это сделало бы {место} пользовательский слот.

Выберите Intectent с левой стороны панели мониторинга и нажмите «Добавить намерение». Убедитесь, что создайте пользовательские намерения выбраны и введите Contentupdate. В текстовом поле: теперь это станет нашей функцией позже.

Теперь мы переходим к высказываниям, где нам нужно принять категория Из новостей, чтобы пользователь хочет обновить. Мы будем использовать категорию в качестве нашего имя слота, а затем настроить следующие высказывания:

 «Обновление {категория}»
«{Cate City} истории»
«Обновление {Catey}»
«Установить истории в {Catery}»

Наконец, нам нужно создать тип слота, где мы выпишем пару входов, которые мы ожидаем получить от пользователя. С левой стороны приборной панели нажмите Добавить рядом с типами слотов. Введите «NewStype» и нажмите кнопку «Создать пользовательский тип слота». Под значениями слота вам нужно будет добавить в некоторые категории новостей. Мы будем использовать спортивные, бизнес, технологии и политику. Как только вы закончите, убедитесь, что вы выбрали NewStype из раскрывающегося списка в качестве типа слота для категории.

AWS LAMBDA Функция

Теперь мы отправимся на Лямбда внутри aws. Отказ Выберите «Создать функцию», а затем выберите «Radio Box BluePrints». Убедитесь, что вы выбираете Alexa-Skill-Kit-SDK-Factskill из списка и нажмите «Настроить». Дайте свою функцию имя, а затем создайте новую роль. Когда закончите, нажмите «Создать функцию» внизу страницы. Вам нужно будет выбрать комплект навыков Alexa в качестве триггера для вашей функции, то мы можем перейти к самой функции. Мы не будем использовать встроенный редактор кода для этого проекта; Вместо этого мы будем писать функции локально, а затем загрузка zip-файла. Убедитесь, что вы копируете содержимое файла index.js внутри редактора лямбда, поскольку мы вставем это внутри нашего локального проекта.

Создать локальный проект

Мы начнем с создания нового узла проекта локально. Внутри нашего собственного файла index.js мы вставим содержимое, которое мы просто взяли из лямбда. Нам нужно импортировать Firebase и Alexa SDK, используя NPM.

 NPM Установите Alexa-SDK
NPM установить Firebase

Убедитесь, что вы включаете ссылки в верхней части вашего файла index.js.

Const Alexa = требуется («Алекса-СДК»);
var firebase = требуют ("firebase");

У вас должен быть какой-то код по умолчанию уже там, один из которых называется Maintrequest '. Это используется для приветствия пользователя к навыку. Все, что вам нужно сделать, здесь измените приветственное сообщение для «Добро пожаловать на обновление веб-сайта».

 'launchrequest': Функция () {
        this.emit (': Спросите', «Добро пожаловать на обновление веб-сайта»);
    },

Если вы используете :рассказать команда тогда Alexa закончится навыка после сообщения, тогда как вы используете :просить Тогда Alexa будет слушать восемь секунд для следующей подсказки. Мы будем использовать :просить Так что Alexa готова слушать нашу подсказку обновления.

Конфигурация Firebase

Далее нам нужно добавить нашу детали конфигурации FireBase в верхней части файла index.js.

 var config = {
    apikey: "& lt; api_key & gt;",
    Authdomain: «& lt; project_id & gt; .firebaseapp.com»,
    База данныхURL: "https: // & lt; database_name & gt; .firebaseio.com",
    проект: «& lt; project_id & gt;»,
    StorageBucket: «& lt; Bucket & GT; .appspot.com»,
    messagingsenderid: "& lt; sender_id & gt;"
  };
Firebase.initializeapp (config);

Функция contentupdate

Alexa skill: Simulator — Simulator Alexa - отличный способ проверить ваш навык на вашей машине, не требуя устройства Amazon Echo

Ранее в руководстве мы создали намерение под названием «ContentuPdate». Это означает, что нам нужно создать Contentupdate. Функция, где мы ответим на пользовательский ввод на основе созданных мы созданных. Итак, если пользователь сказал «Обновление спорта», то эта функция будет вызвана. Мы начинаем с создания переменной вызываемой CateyType. , который принимает голос ввода пользователя. Затем мы храним тип категории внутри базы данных Firebase и получите Alexa, чтобы сказать нам имя категории, которую мы обновили.

 «ContentUsDate»: функция () {
    var cationaltype = this.event.request.intent.slots.ceatheory.value;
    Если (firebase.apps.length === 0) {
      Firebase.initializeapp (config);
    }
         Firebase.database (). Ref ('/'). Set ({
            Предпочтение: CateyType.
            }). Затем ((данные) = & gt; {
            Firebase.app (). Удалить (). Затем ()
            }). CALL ((ERR) = & GT; {
            console.log (Err);
            })
        this.emit (': sups': «Вы обновили до + CatehyType);
},

После того, как вы сохраните файл index.js, вам нужно будет заставить zip вверх по проекту. Перейдите к папке проекта из командной строки и введите следующую команду.

 Zip -r index.zip *

Вернитесь к вашей функции внутри лямбда и прокрутите вниз до раздела функционального кода. С раскрывающейся коробки для типа записи кода выберите «Загрузить файл .zip». Теперь вы сможете загрузить свой ZIP-файл.

Прежде чем протестировать свой проект внутри симулятора Alexa, возьмите ARN в правом верхнем углу страницы Lambda и введите его в секции конечной точки консоли Alexa. Чтобы проверить свой навык, все, что вам нужно сказать, - это «Открытое веб-обновление», и Alexa ответит «Добро пожаловать в веб-обновление». Если вы сейчас говорите «Обновить спорт», Alexa должен сказать «Вы обновили до спорта». Слово «Спорт» также должно появиться в предпочтении внутри вашей базы данных FireBase.

Новости страницы

Alexa skill: Final page — Вот что будет выглядеть финальная HTML-страница. Это отобразит категорию, которую вы просили через Alexa

Наконец, загрузите страницу новостей, которые я создал (index.html) из проекта Alexa - HTML-папка на Гадость Отказ

Откройте файл Main.js и введите свои собственные детали конфигурации Firebase по линиям 1-8, как и ранее в руководстве.

Вам также нужно будет ввести ключ API News из Newsapi.org в строке 11 файла main.js.

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

Если вы теперь открываете файл index.html, он должен загрузить в некоторых новостных историях из выбранной вами категории. Каждый раз, когда вы рассказываете Alexa обновить с новой категорией (спортивными, технологиями, бизнесом или политикой), категория новостей истории на странице изменится.

Алекса, далее!

Это только небольшой пример того, что вы можете достичь с Alexa, и, надеюсь, даст вам хорошее основание для любых будущих голосовых проектов. Вы всегда можете добавить больше значений слотов, чтобы получить больше категорий из API или даже обновлять проект, чтобы он тянул на свой собственный сайт News / Posts. Я не могу дождаться, чтобы посмотреть, как разработчики Web и App будут включать в себя Alexa в своих проектах.

Получил свой сайт и работает?Отслеживать его полностью с лучшими веб хостинг Сервисы.

Эта статья была первоначально опубликована в выпуске 313 из сеть Самый продаваемый журнал мира для веб-дизайнеров и разработчиков. Купить выпуск 313 здесь или же Подписаться здесь Отказ

Статьи по Теме:

Почему голос UIS - следующая большая вещь в веб-дизайне
Голосовой прототипирование добавлено в Adobe XD
Ultimate Guide для всех устройств Amazon

Как создать навык Alexa для вашего сайта

Что мне нужно?

Наимение, высказывания и слоты

AWS LAMBDA Функция

Создать локальный проект

Конфигурация Firebase

Функция contentupdate

Новости страницы

Алекса, далее!

Инструкции - Самые популярные статьи

Как использовать облачное хранилище как креативное

Как повернуть фотографию на иллюстрацию

Управление состоянием rection Form с Formik

Начните с WebVR

Как создать сверкающие глаза в масляной краске

Мода гибкие макеты с CSS Grid

Создайте сайт электронной коммерции с нуля

Как улучшить производительность сайтов электронной коммерции

Категории