Як створити майстерність Alexa для вашого сайту

Sep 16, 2025

Як

Багато хто з нас тепер мають якийсь голосовий помічник навколо будинку, незалежно від того, чи є це Amazon Echo, Apple HomePod або Google Home. Здається, що голос буде мати величезний вплив на те, як ми йдемо про наше повсякденне життя, і, як веб-розробники, ми повинні запитати себе, які способи поліпшити досвід користувача Впроваджуючи голос у наших веб-сайтах та веб-додатках?

У цьому підручнику ми збираємося будувати просту майстерність Alexa, яка оновлює вміст новин на веб-сайті. Тип категорії залежить від користувача голосу користувачем. Це допоможе, якщо у вас є якийсь досвід роботи з AWS, але є багато документації, щоб допомогти вам вийти, якщо ви потрапляєте в макіяж.

Створення нового веб-сайту? Тримайте речі просто з хорошим Веб-будівельник . Отримали дизайнерські файли для зберігання? Тримати їх у безпеці хмара зберігання .

10 кроків до залучення досвіду користувачів

Що мені потрібно?

По-перше, знайдіть файли для цього підручника на .

Вам також доведеться зареєструватися на Рахунок розробника Amazon і AWS обліковий запис .

Firebase буде використовуватися для зберігання нашого введення користувача, тому переконайтеся, що ви зареєструвалися Рахунок Firebase . Ми також будемо використовувати API новин, щоб отримати останні новини, тому отримайте безкоштовну клавішу API на newsapi.org .

Наміри, висловлювання та слоти

Alexa skill: Utterances — Ось висловлювань, які ми встановили всередині консолі "Alexa Developer" для нашої майстерності. Не соромтеся додати більше

Після того, як ви налаштовані, перейдіть до developer.amazon.com/alexa/console/ask і натисніть кнопку Створити навички. Перше, що нам потрібно зробити, це встановити наміри, висловлювання та типи слотів всередині консолі розробника Alexa. Наміри - це те, що користувач майстерності намагається досягти. Вимовлення - це конкретні фрази, які користувачі скажуть, коли розмовляєте з Alexa, наприклад: "Який день?". Слот - це змінна, яка відноситься до висловлювання, наприклад: "Який час у {місці}?". Це зробить власний слот.

Виберіть наміри з лівої сторони інформаційної панелі та натисніть Додати наміри. Переконайтеся, що створюйте власний намір вибрано та введіть Задоволений У текстовому полі: тепер це стане нашим ім'ям функції пізніше.

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

 "Оновлення {категорія}"
"{категорія} історій"
"Оновлення до {категорії}"
"Встановіть історії до {категорії}"

Нарешті, нам потрібно створити тип слота, де ми будемо писати пару входів, які ми очікуємо отримати від користувача. З лівої сторони інформаційної панелі натисніть кнопку Додати поруч із типами слотів. Введіть "NEWSTPE" та натисніть кнопку "Створити спеціальний слот". Під значеннями слотів потрібно додати до деяких категорій новин. Ми будемо використовувати спорт, бізнес, технологію та політику. Як тільки ви закінчите, переконайтеся, що ви вибрали NEWSTIPE з випадання, як тип слота для категорії.

AWS Lambda Function

Тепер ми перейдемо Лямбда всередині AWS . Виберіть "Створити функцію", а потім виберіть "Радіопоклонник" BluePrints ". Переконайтеся, що ви виберете alexa-skill-kit-sdk-factskill зі списку та натисніть кнопку Налаштувати. Дайте свою функцію ім'я, а потім створіть нову роль. Після завершення натисніть кнопку Створити функцію внизу сторінки. Вам потрібно буде вибрати комплект Alexa навичок як тригер для вашої функції, то ми можемо перейти до самого функції. Ми не будемо використовувати вбудований редактор для цього проекту; Замість цього ми будемо писати функції локально, а потім завантажувати файл ZIP. Переконайтеся, що ви копіюєте вміст файлу index.js всередині Lambda редактора, оскільки ми будемо вставити це всередині нашого місцевого проекту.

Створіть місцевий проект

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

 NPM Встановити Alexa-SDK
NPM встановлює Firebase

Переконайтеся, що ви включаєте посилання у верхній частині вашого файлу index.js.

const alexa = вимагає ('alexa-sdk');
var firebase = вимагає ("faightbase");

Ви повинні мати деякий код за замовчуванням, один з яких називається " Запуск ". Це використовується для вітання користувачеві до майстерності. Все, що вам потрібно зробити тут, це змінити повідомлення "Ласкаво просимо до оновлення веб-сайту".

 'LASTREQUEST': функція () {
        this.emit (": Запитайте", "Ласкаво просимо до оновлення веб-сайту");
    },

Якщо ви використовуєте : Скажіть Команда, то Alexa закінчить майстерність після повідомлення, тоді як якщо ви використовуєте : Запитайте Тоді Alexa буде слухати вісім секунд для наступного підказки. Ми будемо використовувати : Запитайте Таким чином, що Alexa готовий слухати наше оновлення.

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

Далі нам потрібно додати деталі конфігурації Firebase у верхній частині файлу index.js.

 Var Config = {
    apikey: "& lt; api_key & gt;",
    AUTHDOMAIN: "& lt; project_id & gt; .firebaseApp.com",
    DatabaseURL: "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);

Функція вмісту

Alexa skill: Simulator — Симулятор Alexa - це чудовий спосіб тестування своєї майстерності на машині, не потребуючи пристрою Echo Amazon

Раніше в підручнику ми створили намір під назвою "ContentoPdate". Це означає, що нам потрібно створити Задоволений Функція, де ми будемо відповідати на введення користувача на основі вимог, які ми створили. Отже, якщо користувач сказав "Оновлення до Sport", то ця функція буде називатися. Ми починаємо шляхом створення змінної під назвою категорія , який приймає голосовий вхід користувача. Потім ми зберігаємо категорію типу всередині бази даних Firebase і отримуємо Alexa, щоб розповісти нам назву категорії, яку ми оновили.

 'ContentoPdate': Функція () {
    var chingestype = це.Vent.request.intent.Slots.Category.Value;
    if (firebase.apps.leength === 0) {
      Firebase.initializeApp (config);
    }
         Firebase.database (). Ref ('/'). Встановити ({
            Перевага: CHEGYMYPE
            }). Потім (((дані) = & gt; {
            FireBase.App (). Видалити (). Потім ()
            }). Ловити ((err) = & gt; {
            console.log (err);
            })
        this.emit (': Запитайте "," ви оновили до "+ категоріями);
},

Після збереження файлу index.js, вам доведеться зафіксувати проект. Перейдіть до папки проекту з командного рядка та введіть таку команду.

 zip -r index.zip *

Назад до вашої функції всередині лямбда і прокрутіть до розділу функції коду. У спадному полі для типу введення коду виберіть "Завантажити файл .zip". Тепер ви зможете завантажити свій поштовий файл.

Перш ніж перевірити свій проект всередині симулятора Alexa, візьміть ARN у верхньому правому куті сторінки Lambda та введіть це всередині кінцевої частини консолі Alexa. Щоб перевірити свою майстерність, все, що вам потрібно сказати, - "Відкрити веб-оновлення", а Alexa буде відповідати "Ласкаво просимо до веб-оновлення". Якщо ви зараз скажете "Оновлення до Sport", Alexa повинен сказати "ви оновлюєтесь до Sport". Слово "спорт" також має з'явитися під час переваги всередині бази даних Firebase.

Сторінка новин

Alexa skill: Final page — Ось що буде виглядати остаточна сторінка HTML. Він покаже категорію, яку ви просили через Alexa

Нарешті, завантажте сторінку новин я створив (index.html) з проекту Alexa - HTML-папку Гуляк .

Відкрийте файл Main.js і введіть у власній конфігурації пожежної конфігурації на лінії 1-8, як і ми раніше робили в підручнику.

Вам також потрібно буде ввести ключ новин API з newsapi.org on line 11 file.js файлу.

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

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

Олексія, далі!

Це лише невеликий приклад того, що ви могли досягти з Alexa, і, сподіваюсь, дає вам хороший фундамент для будь-яких майбутніх голосових проектів. Ви завжди можете додати в більшій кількості слотів, щоб отримати більше категорій від API або навіть оновити проект, щоб він витягнув у власних веб-сайтах Новини / Повідомлення. Я не можу чекати, щоб побачити, як розробники веб-та додаток включатимуть Alexa у своїх проектах.

Отримав свій сайт і працює?Моніторинг його повністю з кращим веб хостинг Послуги.

Ця стаття була опублікована у випуску 313 сітка , журнал найкращого у світі для веб-дизайнерів та розробників. Купити проблему 313 тут або Підписатися тут .

Пов'язані статті:

Чому голос UIS - наступна велика річ у веб-дизайні
Голосовий прототип додав до Adobe XD
Остаточне керівництво для всіх пристроїв Amazon

Як створити майстерність Alexa для вашого сайту

Що мені потрібно?

Наміри, висловлювання та слоти

AWS Lambda Function

Створіть місцевий проект

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

Функція вмісту

Сторінка новин

Олексія, далі!

Як - Найпопулярніші статті

Як анімувати з бібліотекою Mo.JS

Як вибрати з інструментами Lasso Photoshop

Створіть анімований текстовий ефект "

Фарба на 3D-сітку з Polypaint Tool Zbrushcore

Як змішувати палітру гуаш

Як фарбувати переконливі відбитки

Намалюйте портрет у маслах

5 способів ефективно керувати готівкою

Категорії