วิธีการสร้างทักษะ Alexa สำหรับเว็บไซต์ของคุณ

Sep 11, 2025

วิธีการ

พวกเราหลายคนตอนนี้มีผู้ช่วยเสียงบางชนิดรอบ ๆ บ้านไม่ว่าจะเป็น Amazon Echo, Apple Homepod หรือ Google Home ดูเหมือนว่าเสียงจะมีผลกระทบอย่างมากต่อวิธีที่เราไปเกี่ยวกับชีวิตประจำวันของเราและในฐานะนักพัฒนาเว็บเราต้องถามตัวเองว่าเราสามารถปรับปรุงอะไรได้บ้าง ประสบการณ์การใช้งาน โดยการใช้งานเสียงลงในเว็บไซต์และเว็บแอปพลิเคชันของเรา?

ในบทช่วยสอนนี้เรากำลังจะสร้างทักษะ Alexa อย่างง่ายที่อัพเดตเนื้อหาข่าวบนเว็บไซต์ ประเภทหมวดหมู่จะขึ้นอยู่กับการป้อนข้อมูลด้วยเสียงโดยผู้ใช้ มันจะช่วยถ้าคุณมีประสบการณ์กับ AWS แล้ว แต่มีเอกสารจำนวนมากที่นั่นเพื่อช่วยคุณถ้าคุณอยู่ในดอง

สร้างเว็บไซต์ใหม่หรือไม่ รักษาสิ่งที่ง่ายด้วยดี สร้างเว็บไซต์ . มีไฟล์การออกแบบที่จะเก็บ? ทำให้พวกเขาปลอดภัย การจัดเก็บเมฆ .

10 ขั้นตอนสู่ประสบการณ์การใช้งานที่น่าสนใจ

ฉันจะต้องการอะไร

ก่อนอื่นให้ค้นหาไฟล์สำหรับการกวดวิชานี้ บน github .

คุณจะต้องลงทะเบียนสำหรับ บัญชีนักพัฒนาอเมซอน และ บัญชี AWS .

Firebase จะใช้ในการจัดเก็บข้อมูลผู้ใช้ของเราดังนั้นให้แน่ใจว่าคุณสมัครใช้งาน บัญชี Firebase . นอกจากนี้เรายังจะใช้ข่าว API เพื่อรับข่าวล่าสุดดังนั้นรับกุญแจ API ฟรีที่ newsapi.org .

เจตนาอภิปรายและสล็อต

Alexa skill: Utterances — นี่คือคำพูดที่เราได้ตั้งค่าภายในคอนโซลนักพัฒนา Alexa สำหรับทักษะของเรา อย่าลังเลที่จะเพิ่มมากขึ้น

เมื่อคุณตั้งค่าให้ไปที่ Developer.amazon.com/alexa/console/ask และคลิกที่สร้างทักษะ สิ่งแรกที่เราต้องทำคือตั้งค่าเจตนาคำพูดและประเภทสล็อตภายในคอนโซลนักพัฒนา Alexa เจตนาคือสิ่งที่ผู้ใช้ทักษะกำลังพยายามบรรลุ คำพูดเป็นวลีเฉพาะที่ผู้ใช้จะพูดเมื่อพูดคุยกับ Alexa ตัวอย่างเช่น: 'วันไหน?' สล็อตเป็นตัวแปรที่เกี่ยวข้องกับคำพูดเช่น: 'เวลาเท่าไหร่ใน {place}?' สิ่งนี้จะทำให้ {วาง} สล็อตที่กำหนดเอง

เลือกเจตนาจากด้านซ้ายมือของแดชบอร์ดแล้วคลิกเพิ่มเจตนา ตรวจสอบให้แน่ใจว่าเลือกความตั้งใจที่กำหนดเองและพิมพ์ contentupdate ในกล่องข้อความ: ตอนนี้จะกลายเป็นชื่อฟังก์ชั่นของเราในภายหลัง

ตอนนี้เราไปที่คำพูดซึ่งเป็นที่ที่เราจะต้องใช้ ประเภท ของข่าวที่ผู้ใช้ต้องการอัปเดต เราจะใช้หมวดหมู่เป็นชื่อสล็อตของเราแล้วตั้งค่าคำพูดดังต่อไปนี้:

 "อัปเดต {หมวดหมู่}"
"{หมวดหมู่} เรื่องราว"
"อัปเดตเป็น {หมวดหมู่}"
"ตั้งค่าเรื่องราวให้กับ {หมวดหมู่}"

ในที่สุดเราต้องสร้างประเภทสล็อตที่เราจะเขียนอินพุตสองสามข้อที่เราคาดว่าจะได้รับจากผู้ใช้ จากด้านซ้ายมือของแดชบอร์ดคลิกเพิ่มถัดจากประเภทสล็อต พิมพ์ 'NEWSTYPE' และคลิกปุ่ม 'สร้างแบบกำหนดเองสล็อตชนิด' ภายใต้ค่าสล็อตคุณจะต้องเพิ่มหมวดหมู่ข่าวบางประเภท เราจะใช้กีฬาธุรกิจเทคโนโลยีและการเมือง เมื่อเสร็จแล้วให้แน่ใจว่าคุณได้เลือก Newstype จากแบบเลื่อนลงเป็นประเภทสล็อตสำหรับหมวดหมู่

ฟังก์ชั่น AWS Lambda

ตอนนี้เราจะมุ่งหน้าไปที่ แลมบ์ดาภายใน AWS . เลือกสร้างฟังก์ชั่นแล้วเลือกกล่องวิทยุพิมพ์เขียว ตรวจสอบให้แน่ใจว่าคุณเลือก Alexa-Skill-Kit-SDK-Factskill จากรายการและคลิกกำหนดค่า ให้ชื่อฟังก์ชั่นของคุณแล้วสร้างบทบาทใหม่ เมื่อเสร็จแล้วให้คลิกสร้างฟังก์ชั่นที่ด้านล่างของหน้า คุณจะต้องเลือกชุดทักษะ Alexa เป็นทริกเกอร์สำหรับฟังก์ชั่นของคุณจากนั้นเราสามารถย้ายไปยังฟังก์ชั่นได้เอง เราจะไม่ใช้โปรแกรมแก้ไขโค้ดในตัวสำหรับโครงการนี้ แต่เราจะเขียนฟังก์ชั่นในพื้นที่แล้วอัปโหลดไฟล์ zip ตรวจสอบให้แน่ใจว่าคุณคัดลอกเนื้อหาของไฟล์ index.js ภายใน Lambda Editor เนื่องจากเราจะวางสิ่งนี้ภายในโครงการท้องถิ่นของเรา

สร้างโครงการท้องถิ่น

เราจะเริ่มต้นด้วยการสร้างโครงการโหนดใหม่ในพื้นที่ ภายในไฟล์ index.js ของเราเองเราจะวางเนื้อหาที่เราเพิ่งเอามาจากแลมบ์ดา เราจำเป็นต้องนำเข้า Firebase และ Alexa SDK โดยใช้ NPM

 NPM ติดตั้ง Alexa-SDK
npm ติดตั้ง firebase

ตรวจสอบให้แน่ใจว่าคุณมีการอ้างอิงที่ด้านบนของไฟล์ index.js ของคุณ

Const Alexa = ต้องการ ('Alexa-SDK');
var firebase = ต้องการ ("firebase");

คุณควรมีรหัสเริ่มต้นบางอย่างแล้วที่นั่นซึ่งหนึ่งในนั้นเรียกว่า ' การเปิดตัว . สิ่งนี้ใช้เพื่อต้อนรับผู้ใช้ในทักษะ สิ่งที่คุณต้องทำที่นี่คือเปลี่ยนข้อความต้อนรับเพื่อ 'ยินดีต้อนรับสู่การอัปเดตเว็บไซต์'

 'LaunchRequest': ฟังก์ชั่น () {
        นี่.emit (': ถาม', 'ยินดีต้อนรับสู่การปรับปรุงเว็บไซต์');
    },

ถ้าคุณใช้ :บอก คำสั่งจากนั้น Alexa จะจบทักษะหลังจากข้อความในขณะที่ถ้าคุณใช้ :ถาม จากนั้น Alexa จะฟังแปดวินาทีสำหรับพรอมต์ถัดไป เราจะใช้ :ถาม เพื่อให้ Alexa พร้อมที่จะรับฟังการอัปเดตของเรา

การกำหนดค่า firebase

ต่อไปเราต้องเพิ่มรายละเอียดการกำหนดค่า FireBase ของเราที่ด้านบนของไฟล์ index.js

 var config = {
    apikey: "& lt; api_key & gt;",
    authdomain: "& lt; project_id & gt; .firebaseapp.com",
    ฐานข้อมูล: "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);

ฟังก์ชั่น ContentUpdate

Alexa skill: Simulator — Alexa Simulator เป็นวิธีที่ยอดเยี่ยมในการทดสอบทักษะของคุณบนเครื่องของคุณโดยไม่ต้องใช้อุปกรณ์ amazon echo

ก่อนหน้านี้ในการกวดวิชาเราสร้างเจตนาที่เรียกว่า 'contentupdate' ซึ่งหมายความว่าเราต้องสร้าง contentupdate ฟังก์ชั่นที่เราจะตอบสนองต่อการป้อนข้อมูลผู้ใช้ตามคำพูดที่เราสร้างขึ้น ดังนั้นหากผู้ใช้กล่าวว่า 'อัปเดตเป็นกีฬา' ฟังก์ชั่นนี้จะถูกเรียกว่า เราเริ่มต้นด้วยการสร้างตัวแปรที่เรียกว่า ประเภท Type ซึ่งจะใช้อินพุตเสียงของผู้ใช้ จากนั้นเราเก็บประเภทหมวดหมู่ภายในฐานข้อมูล Firebase และรับ Alexa เพื่อบอกชื่อหมวดหมู่ที่เราอัปเดตให้เราทราบ

 'contentUpdate': ฟังก์ชั่น () {
    var categoryType = this.event.request.intent.slots.category.value;
    ถ้า (firebase.apps.length === 0) {
      firebase.initializeapp (config);
    }
         Firebase.database () อ้างอิง ('/ /') ตั้งค่า ({
            การตั้งค่า: ประเภท Type
            }) จากนั้น ((ข้อมูล) = & gt; {
            Firebase.app () ลบ () จากนั้น ()
            }). จับ (((ทำผิดพลาด) = & gt; {
            console.log (err);
            })
        สิ่งนี้ ..Emit (': ถาม', 'คุณอัปเดตเป็น' + ประเภทประเภท Type);
},

หลังจากที่คุณบันทึกไฟล์ index.js ของคุณคุณจะต้องซิปโครงการ นำทางไปยังโฟลเดอร์โครงการจากบรรทัดคำสั่งและพิมพ์คำสั่งต่อไปนี้

 zip -r index.zip *

มุ่งหน้ากลับไปที่ฟังก์ชั่นของคุณภายใน Lambda และเลื่อนลงไปที่ส่วนรหัสฟังก์ชัน จากกล่องดรอปดาวน์สำหรับประเภทรายการรหัสให้เลือก 'อัปโหลดไฟล์. zip' ตอนนี้คุณจะสามารถอัพโหลดไฟล์ zip ของคุณ

ก่อนที่คุณจะทดสอบโครงการของคุณภายใน Alexa Simulator ใช้ ARN ที่ด้านบนขวาของหน้า Lambda และป้อนข้อมูลนี้ภายในส่วนปลายทางของคอนโซล Alexa ในการทดสอบทักษะของคุณสิ่งที่คุณต้องพูดคือ 'เปิดเว็บอัปเดต' และ Alexa จะตอบกลับด้วย 'ยินดีต้อนรับสู่เว็บปรับปรุง' หากตอนนี้คุณพูดว่า 'อัปเดตกีฬา', Alexa ควรพูดว่า 'คุณอัปเดตกีฬา' คำว่า 'กีฬา' ควรปรากฏภายใต้การตั้งค่าภายในฐานข้อมูล Firebase ของคุณ

หน้าข่าว

Alexa skill: Final page — นี่คือสิ่งที่หน้า HTML สุดท้ายจะมีลักษณะอย่างไร มันจะแสดงหมวดหมู่ที่คุณร้องขอผ่าน Alexa

ในที่สุดดาวน์โหลดหน้าข่าวที่ฉันสร้าง (index.html) จากโครงการ Alexa - โฟลเดอร์ HTML บน github .

เปิดไฟล์ main.js และป้อนรายละเอียดการกำหนดค่า Firebase ของคุณเองในบรรทัดที่ 1-8 เช่นเดียวกับที่เราทำก่อนหน้านี้ในการกวดวิชา

คุณจะต้องป้อนรหัส API ข่าวของคุณจาก Newsapi.org ในบรรทัดที่ 11 ของไฟล์ main.js

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

หากคุณเปิดไฟล์ index.html มันควรโหลดในบางข่าวจากหมวดหมู่ที่คุณเลือก ทุกครั้งที่คุณบอก Alexa เพื่ออัปเดตด้วยหมวดหมู่ใหม่ (กีฬาเทคโนโลยีธุรกิจหรือการเมือง) หมวดหมู่ข่าวในหน้าจะเปลี่ยนไป

Alexa เป็นต้นไป!

นี่เป็นเพียงตัวอย่างเล็ก ๆ ของสิ่งที่คุณสามารถทำได้ด้วย Alexa และหวังว่าจะให้รากฐานที่ดีสำหรับโครงการเสียงในอนาคต คุณสามารถเพิ่มค่าสล็อตได้มากขึ้นเพื่อรับหมวดหมู่เพิ่มเติมจาก API หรือแม้กระทั่งอัพเดตโครงการเพื่อดึงข่าว / โพสต์เว็บไซต์ของคุณเอง ฉันแทบรอไม่ไหวที่จะดูว่าเว็บและผู้พัฒนาแอปจะรวม Alexa ในโครงการของพวกเขาอย่างไร

เพิ่มเว็บไซต์ของคุณแล้วหรือยัง?ตรวจสอบอย่างเต็มที่ด้วยสิ่งที่ดีที่สุด เว็บโฮสติ้ง บริการ

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 313 ของ สุทธิ นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา ซื้อปัญหา 313 ที่นี่ หรือ สมัครสมาชิกที่นี่ .

บทความที่เกี่ยวข้อง:

ทำไมเสียง UIs จึงเป็นเรื่องใหญ่ต่อไปในการออกแบบเว็บ
เพิ่มการสร้างต้นแบบด้วยเสียงใน Adobe XD
คู่มือที่ดีที่สุดสำหรับอุปกรณ์ Amazon ทั้งหมด

วิธีการสร้างทักษะ Alexa สำหรับเว็บไซต์ของคุณ

ฉันจะต้องการอะไร

เจตนาอภิปรายและสล็อต

ฟังก์ชั่น AWS Lambda

สร้างโครงการท้องถิ่น

การกำหนดค่า firebase

ฟังก์ชั่น ContentUpdate

หน้าข่าว

Alexa เป็นต้นไป!

วิธีการ - บทความยอดนิยม

ที่เก็บข้อมูลบนคลาวด์สำหรับภาพถ่ายและภาพ: วิธีการเลือกคลาวด์ที่ดีที่สุดสำหรับงานของคุณ

วิธีการโพสต์ใหม่บน Instagram

4 ขั้นตอนในการใช้ฟอนต์ตัวแปร

สร้างการเคลื่อนไหวแบบไดนามิกในองค์ประกอบ

ทำหญ้าในเครื่องยนต์ไม่จริง

การใช้เครื่องมือเวกเตอร์: วิธีการของนักออกแบบเว็บไซต์

วิธีการสร้างรถสปอร์ตที่สมจริง

วิธีการออกแบบฮีโร่เคลื่อนไหว

หมวดหมู่