dialogflow web v2

ไดอะล็อกโฟลว์สำหรับเว็บ เวอร์ชัน 2.0

Dialogflow ช่วยให้คุณสร้างอินเทอร์เฟซการสนทนานอกเหนือจากผลิตภัณฑ์และบริการของคุณโดยมอบกลไกการเข้าใจภาษาธรรมชาติ (NLU) ที่ทรงพลังเพื่อประมวลผลและทำความเข้าใจการป้อนข้อมูลด้วยภาษาธรรมชาติ

นี่คือการรวมเว็บอย่างไม่เป็นทางการสำหรับ Dialogflow V2

ประกาศ : สิงหาคม 2021 ฉันได้อัปเกรดเว็บแอปเป็น Vue 3 แก้ไขช่องโหว่ด้านความปลอดภัย และการอ้างอิงที่อัปเดต ซอฟต์แวร์มาฟรี แต่เวลาของฉันไม่ได้ โปรดพิจารณาสนับสนุนฉันทาง PayPal หรือผ่านข้อตกลงทางการค้า

คุณสมบัติ

• Progressive Web App (คะแนนประภาคาร 100/100)
• คุณสมบัติการเข้าถึง
• รองรับเบราว์เซอร์อย่างกว้างขวาง (IE8+) ความสามารถออฟไลน์ (ประวัติ) และ SEO ที่ยอดเยี่ยม
• UI และ UX ที่คุ้นเคย อิงตามข้อกำหนดการออกแบบอย่างเป็นทางการของ Google Assistant
• โหมดมืดและธีม
• การโต้ตอบแบบแฮนด์ฟรีกับการป้อนข้อมูลด้วยเสียงและการตอบสนองด้วยเสียง (พร้อม SSML)
• ภาษาที่เป็นอิสระ
• รองรับนักเทียบท่าและ Kubernetes
• องค์ประกอบที่หลากหลาย Webhook และ Actions on Google Support (สาธิต)
• วิดเจ็ตแบบลอยตัวสำหรับการฝังบนเว็บไซต์ (repo และการสาธิต)
• อิงจาก Vue 3 , Webpack, Babel และ PostCSS
• น้ำหนักเบา (สร้างเป็น ~ 50KB gzipped)
• ฟรีและจัดทำเอกสารครบถ้วน
• ผลิตในประเทศเยอรมนี
• แนะนำโดย Dialogflow และ MadeWithVueJS

สนับสนุนโดย Vokode ซึ่งเป็นสตูดิโอการตลาดด้านเสียงจากปารีส ซึ่งดำเนินการด้านการออกแบบเสียง พอดแคสต์ และแอปเสียง

การติดตั้ง

ความต้องการ

• โหนดJS
• npm หรือเส้นด้าย
• บัญชี Google และตัวแทน Dialogflow V2 (หากคุณมองหา V1 โปรดใช้ repo เก่าของฉัน)

แบ็กเอนด์

Dialogflow Gateway ช่วยให้สามารถผสานรวมบุคคลที่สามในลักษณะนี้เพื่อเข้าถึง Dialogflow V2 API ได้อย่างปลอดภัย

• เอกสารประกอบ
• การดำเนินการ

AD Dialogflow Gateway โดย Ushakov (โฮสต์) เป็นวิธีที่เร็วที่สุดในการเริ่มต้นใช้งาน Dialogflow สำหรับ Web v2

โคลนพื้นที่เก็บข้อมูล

คุณสามารถใช้ git หรือดาวน์โหลดจาก GitHub

ติดตั้งการพึ่งพา

เปิดโฟลเดอร์ที่โคลน จากนั้นใช้ตัวจัดการแพ็คเกจของคุณเพื่อติดตั้งการขึ้นต่อกัน

ใช้ npm

npm i

การใช้เส้นด้าย

yarn

เชื่อมต่อตัวแทน

เปิด src/config/index.js และเปลี่ยนตัวแปร endpoint เป็น URL เกตเวย์ Dialogflow ของคุณ

คำแนะนำ: URL สำหรับ Dialogflow Gateway ที่โฮสต์โดย Ushakov จะเป็นรหัสโครงการ Google Cloud ของคุณ + .core.ushaflow.io เสมอ หากคุณมีปัญหาใดๆ ตรวจสอบให้แน่ใจว่าคุณได้เชื่อมต่อตัวแทนของคุณกับเกตเวย์ จากนั้นไปที่คอนโซล คลิกที่ "จัดการ" และคัดลอก URL ของเกตเวย์

ตัวอย่าง

 export default {
    endpoint : 'https://dialogflow-web-v2.core.ushaflow.io'
    [ ... ]
}

[ ... ]

โลโก้ ชื่อตัวแทน คำอธิบาย และภาษาที่ใช้ได้ดึงข้อมูลจาก Dialogflow เปลี่ยนใน Dialogflow แล้วมันจะซิงค์กับ UI โปรดทราบว่าเมื่อเพิ่มภาษาใหม่ คุณอาจต้องแปล UI บางส่วนด้วย ( translations.json ใน src/translations )

พัฒนา

เปิดโฟลเดอร์โคลนของคุณ จากนั้นใช้ตัวจัดการแพ็คเกจที่คุณชื่นชอบเพื่อรันคำสั่ง serve

ใช้ npm

npm run serve

การใช้เส้นด้าย

yarn serve

เบราว์เซอร์เริ่มต้นของคุณควรเปิดและเปลี่ยนเส้นทางไปที่ localhost:8080 หากมีการใช้งานพอร์ต 8080 อยู่แล้ว คุณสามารถกำหนดอาร์กิวเมนต์ port เพื่อเชื่อมต่อที่พอร์ตที่ระบุได้

ใช้ npm

npm run serve --port 9090

การใช้เส้นด้าย

yarn serve --port 9090

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

ธีม

คุณสามารถสร้างธีมที่กำหนดเองสำหรับ Dialogflow สำหรับ Web v2 ตามข้อกำหนด:

หากต้องการใช้ตัวแปร ให้เปิด src/style/theme.sass และเปลี่ยนตัวแปรเหล่านั้นในตัวเลือก :root

คุณยังสามารถปรับธีมของคุณให้เหมาะสมสำหรับไคลเอนต์ที่เปิดใช้งานโหมดมืดภายในไฟล์และตัวเลือกเดียวกันภายใต้ @media (prefers-color-scheme: dark)

สร้าง

แอปของคุณจะถูกรวมเข้ากับไดเร็กทอรี dist

ในการสร้างมันคุณสามารถใช้ npm หรือเส้นด้าย

ใช้ npm

npm run build

การใช้เส้นด้าย

yarn build

อัปเดต

เรียกใช้ git pull origin master เพื่อรวมการเปลี่ยนแปลง

นอกจากนี้ คอยอัปเดตแพ็กเกจ vue ให้ทันสมัยอยู่เสมอ

 vue upgrade

คำถามที่พบบ่อย

• ถาม: ฉันไม่เห็นการเปลี่ยนแปลงใดๆ
• ตอบ: ตรวจสอบให้แน่ใจว่าคุณ ได้ล้างแคช และ สร้างแอปขึ้นมาใหม่ ใน Safari ไปที่ "พัฒนา" > "แคชว่าง" ใน Chrome: "เครื่องมือสำหรับนักพัฒนา"> "แอปพลิเคชัน"> "ล้างพื้นที่เก็บข้อมูล"> "ล้างข้อมูลไซต์"

สอบถามรายละเอียดเพิ่มเติม

ติดต่อผู้พัฒนาหรือเปิดปัญหา