Aplicațiile vocale schimbă complet modul în care interacționăm cu lumea digitală. Vocea adaugă o altă dimensiune interacțiunii om-computer pe care dezvoltatorii încep să o exploreze.
În acest articol, vă voi arăta cum puteți utiliza arhitectura backend și API-urile existente, conectându-le cu aplicațiile vocale pentru a oferi clienților dvs. o nouă experiență. Aplicațiile vocale împrumută mult din procesul nostru general de dezvoltare, fără a necesita resurse de dezvoltare separate.
Ce construim
Vom construi o aplicație de căutare super-eroi folosind API Open Source Superhero.
Am adăugat un wrapper în jurul acestui API pentru a-l face accesibil din aplicația noastră Voice. Puteți găsi codul în acest esențial – https://gist.github.com/akash-joshi/476ead410a244a48e037c138ba2387b0.
Aruncați o privire la aplicația completată de mai jos:
Vom construi acest lucru pentru aplicațiile Voice (Alexa și Google). Vom folosi platforma VoiceFlow, care ne permite să construim aplicații vocale vizual.
Tutorial Voiceflow
VoiceFlow este un mod vizual de a crea aplicații vocale și este foarte ușor de utilizat și de înțeles.
În primul rând, creați un cont acolo pentru a începe.
După crearea unui cont, creați un proiect nou, dându-i un nume adecvat. În scopul acestui tutorial, am ales toate regiunile englezești ca regiuni de implementare.
După aceasta, veți ajunge pe o pânză goală. Nu vă lăsați copleșiți de toate opțiunile prezente pe ecran, acest tutorial vă va ghida prin toate blocurile relevante necesare.
În submeniul blocuri din stânga, veți vedea mai multe blocuri care pot fi utilizate pentru a construi o abilitate Alexa sau Google. Fiecare bloc îndeplinește o anumită funcție, iar Voiceflow se bazează pe crearea de aplicații Voice prin combinarea acestor blocuri.
1. Vorbește bloc
Primul bloc pe care îl vom folosi este blocul Speak. Îl vom folosi pentru a face Alexa să spună ceva utilizatorului. Trageți un blog de vorbire pe pânză, redenumiți-l în Introducere și scrieți o introducere adecvată aplicației dvs. în zona de text. Voi folosi „Bun venit la super-erou! Spune numele unui erou de căutat!”.
În orice moment, testați-vă aplicația făcând clic pe butonul Redare.
2. Blocare captură
Următorul bloc pe care îl vom folosi este blocul Capture. Este folosit pentru a captura date din vocea utilizatorului și a le stoca într-o variabilă.
În primul rând, creați o nouă variabilă în submeniul „Variabile” din stânga, tastând un nume și apăsând Enter. Folosiți numele „erou” pentru moment.
Adăugând un bloc de captură, denumiți „Tip de intrare” ca „Actor” și „Captură intrare către” ca „erou”.
Adăugați un bloc de vorbire după acesta, spunând: „Se caută {erou}.
3. Bloc API
Faceți clic pe pictograma Plus de sub blocul Speak pentru a adăuga un alt pas la bloc. Adăugați un bloc de integrare din listă. După aceea, faceți clic pe blocul de integrare și configurați opțiunile în această ordine:
- Alegeți o integrare – „API personalizat”, deoarece vom folosi un API personalizat pentru a obține unele date.
2. Vreau să „Faceți o solicitare GET”, deoarece folosim o solicitare GET pentru a obține date JSON dintr-un API.
Vom folosi un API personalizat (https://super-search-akashjoshi.flexiple.now.sh/?hero=) pentru a obține datele supereroilor.
Încercați să navigați la https://super-search-akashjoshi.flexiple.now.sh/?hero=superman în browserul dvs. pentru a vedea ce tip de date sunt returnate de API. A inlocui supraom cu orice erou pe care doriți să-l căutați.
Înlocuim numele eroului cu variabila {erou}, astfel încât API să preia corect eroul dorit.
Pastă
https://super-search-akashjoshi.flexiple.now.sh/?hero={hero}
în bara URL. Asigurați-vă că introduceți {hero} de unul singur, astfel încât Voiceflow să-l detecteze ca o variabilă.
Cu toate acestea, încă nu am terminat. Faceți clic pe Test Integration pentru a testa apelul API.
Răspunsul de la API trebuie să fie mapat în variabile de ieșire, astfel încât să fie comunicate utilizatorului.
Adăugați variabile pentru nume, nume complet, naștere, aliniere, lucru și bază din bara laterală a variabilelor.
Copiați calea de ieșire a fișierului JSON făcând clic pe fila de răspuns din fila Test Integration și lipiți-o în meniul de ieșire. Faceți acest lucru pentru toate următoarele – nume, nume complet, născut, aliniere, lucru și bază.
Verificați scurtul videoclip de mai jos pentru a înțelege cum să mapați ieșirea JSON cu variabilele voastre de flux:
În imaginea de mai sus, putem vedea că Integrarea are 2 ieșiri, una fără text prefix și una cu eșec ca prefix. Cel fără textul prefix este o ieșire de stare de succes, iar cel cu ieșire de eșec este atunci când apelul nostru API eșuează.
Adăugați un bloc de vorbire care spune „Eroul nu a fost găsit” conectat la starea de eșec. Dacă API-ul reușește și a fost găsit un erou care se potrivește cu variabila {erou}, toate variabilele de ieșire vor fi setate cu valorile corecte. În caz contrar, vor fi la valoarea implicită 0.
4. Dacă Blocare
Adăugați un bloc if pe pânză și verificați dacă fullName = 0. Dacă este 0, conectați-l la blocul „Not Found”.
Urmăriți scurtul videoclip de mai jos pentru a înțelege cum să adăugați condiții la blocurile If:
Altfel, eroul a fost găsit. Deci, rostiți numele eroului scriind într-un bloc de vorbire: „Numele eroului lor este {name}. Numele lor complet este {fullName}. S-au născut în {born}. Sunt {alignment}. Funcționează ca o {work } din {base}.
Din nou, asigurați-vă că introduceți numele variabilelor, astfel încât Voiceflow să le detecteze ca variabile.
Pentru a șterge variabilele după finalizarea abilității, adăugați un bloc „Set” pe pânză și setați fullName la 0. Acest pas este necesar, deoarece dacă variabilele nu sunt șterse, răspunsul anterior va fi repetat de către abilitate!
5. Blocul de alegere
Nu ar trebui să punem capăt priceperii aici. Ar trebui să îi oferim utilizatorului posibilitatea de a alege dacă vrea să caute un alt supererou. Schimbați textul din blocul „Nu s-a găsit” pentru a întreba dacă utilizatorul dorește să caute mai multe la final.
Adăugați un bloc Choice pe pânză. Blocul de alegere ne permite să efectuăm anumite acțiuni pe baza vocii utilizatorului. Acest bloc verifică dacă utilizatorul dorește să caute un alt erou. Introduceți sinonime pentru Da pentru a căuta mai departe.
Pentru altceva, adăugați un bloc Flow, selectând Stop Flow ca flux.
Conectați ieșirea „1” a blocului Choice la un bloc de vorbire cerând utilizatorului să spună un alt nume de erou și conectați-l la blocul Capture. Uită-te la imaginea de mai jos pentru a înțelege cum se face.
Și am terminat! Testați-vă aplicația făcând clic pe butonul de redare.
6. Implementare
A. Alexa
Pentru a vă deplasa aplicația pe platforma Alexa, faceți clic pe fila Publicați, conectați contul de dezvoltator Amazon și completați opțiunile formularului în funcție de relevanța pentru abilitățile dvs. (cum ar fi Descriere, Numele abilităților etc.)
Asigurați-vă că nu modificați niciuna dintre invocațiile implicite care vă pot rupe abilitățile în timpul implementării și vă pot determina să o retrimiteți.
În cazul în care greșiți o parte în timp ce trimiteți, procesul de examinare este foarte util și vă vor anunța ce nu a funcționat corect în trimitere.
b. Google
Faceți clic pe linkul de instrucțiuni pentru a vedea instrucțiuni pentru a adăuga fișierul Asistent Google la Voiceflow. După adăugarea fișierului, urmați ghidul de publicare la producție din aici . Puține avertismente în procesul de implementare Google:
- Numele invocării dvs. nu poate avea cuvinte cheie care pot fi utilizate în timpul invocării. De exemplu, nu puteți denumi acțiunea „Căutare supereroi”, deoarece „Căutare” poate fi folosită ca nume de invocație.
- Trebuie să adăugați o politică de confidențialitate personalizată de la Google. Nu îl puteți utiliza pe cel de la Voiceflow deoarece conține mențiuni despre Alexa sau abilități, ceea ce va face ca acțiunea dvs. să fie refuzată. Puteți utiliza un șablon pe care l-am construit aici. Are instrucțiuni despre cum să scrieți politica de confidențialitate și unde să o păstrați.
- Ultimul punct ar fi să nu folosiți termenul „Alexa” sau „abilitate” în niciun moment din descrierea acțiunii dvs. sau în cadrul aplicației. Dacă există apariții în aplicație, înlocuiți-le cu ceva mai generic, astfel încât să puteți utiliza aceeași bază de cod pentru Alexa și Google. Înlocuiți „Alexa” și „abilitate” cu „Google” și „acțiuni” în descriere și în locuri similare.
Ce urmează?
Idei de aplicații:
Punctul interesant despre aplicațiile vocale este că le puteți folosi ca extensie pentru aplicațiile dvs. existente. De exemplu, dacă ați creat deja o aplicație de mesagerie de genul Aceasta, platforma vocală poate fi o modalitate ușoară de a trimite și citi mesaje pe aplicația dvs. Pentru o platformă de scriere de bloguri, o aplicație vocală poate fi o modalitate ușoară de a lua notițe înainte de a vă așeza efectiv pentru a scrie un articol. Chiar și pentru o platformă de postare a produselor ProductHunt sau Instrumente de la distanță, puteți integra cu ușurință vocea pentru a citi descrierea și alte detalii despre produse.
În astfel de moduri, aplicațiile vocale pot fi utilizate pentru a îmbunătăți experiența utilizatorului.
Link-uri utile:
https://learn.voiceflow.com/articles/2705386-uploading-your-project-to-google-assistant
https://developer.amazon.com/docs/custom-skills/speech-synthesis-markup-language-ssml-reference.html
Sper că ți-a plăcut acest articol. Am scris și un articol mai extins care adaugă un frontend bazat pe web acestei aplicații, făcându-l un ecosistem complet.
Codificare fericită!
