Evento #Aperitech 05/11/2019 organizzato da Codemotion. Ospite: la community di Milano Chatbots con 5 talk per illustrare lo stato dell'arte dei chatbot e dei voicebot. 1° Talk tecnico: "Google Home", "Alexa", "Skills", "Smart speaker"… ne sentiremo parlare (tanto) anche nel 2020 e noi sviluppatori .NET possiamo cavalcare l'onda perchè abbiamo tutti gli strumenti e le competenze necessarie. VIDEO: https://youtu.be/tboHO_mj2uM

1. Actions on Google e Alexa skills
per .NET lovers
5 Novembre 2019
v. 1.0
@MilanoChatbots

2. Lorenzo Giudici
Software Engineer
lorenzo.giudici@freeloop.it
github.com/lorenzogiudici5
twitter.com/lorenzogiudici5
linkedin.com/in/lorenzogiudici5

4. Workflow
B
a
c
k
e
n
d
Alexa Skills kit
Dialogflow
Alexa Voice Service
Google Assistant

5. Natural Language Understanding (NLU)
SCOPO
Trasformare le richieste dell'utente (query) fatte in linguaggio naturale in dati
fruibili e comprensibili da un «computer».
1. classificazione degli intenti di una frase
2. estrazione delle entità
{Ok Google/Alexa}, {parla con/apri} {Assistente Outlook} e dimmi se
{Ho qualche appuntamento domani}?
Intento
Conoscere eventi in calendario
Entità
Di quale giorno?
Invocation NameWake Word

6. Dialogflow
• Agents
• Intents
• Entities
• Training phrases
• Contexts

7. Alexa skills kit developer console
• Interaction model
• Intents
• Slotss
• Utterances
• Sessions

8. Json Request
Dialogflow Alexa
Intento
Conoscere eventi in calendario
Entità
Di quale giorno?

9. Backend
1. Azure Web app
• App service plan
2. Azure Function apps
• App service plan
• Consumption

10. Per iniziare
• Visual Studio 2019, Code, for Mac
• .NET Core (.NET Framework)
• Azure
• ngrok
• crea un indirizzo web che punta al tuo localhost
Google Assistant Alexa
Piattaforma web Actions on Google developer platform
+ Dialogflow
Alexa Skills Kit developer console
Pacchetti Nuget • Google.Apis.Dialogflow.v2
• Google.Protobuf
• Alexa.NET

12. Interactive
Canvas

13. Cosa sono?
• Presentate al Google I/O 2019
• Un nuovo modo di creare esperienze coinvolgenti a schermo intero
• Contenuti multimediali ricchi: AUDIO + GRAFICA + TOCCO
• Smart display e telefoni Android
• Il ciclo di vita di una è molto simile a quello di una Conversational Action.
• Viene restituita una HTMLResponse con url della web app da caricare (SPA)
• Interazione vocale e touch
• API Interactive Canvas (libreria Javascript)
<script
src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script>

14. Come funziona?
1. L’utente dice «Mostra immagine del leone»
2. La richiesta viene inoltrata a Dialogflow che la
elabora ed estrae l’Intent associato.
3. Viene contattato il backend che esegue il
codice corrispondente ed invia una
HtmlResponse con l’url della web app da
caricare e un oggetto con due informazioni:
command (mostra immagine) e animal (quale
immagine).
4. Al caricamento, la web app registra le
callbacks dell’interactiveCanvas API.
In particolare, la callback onUpdate riceverà
l’oggetto inviato come risposta dal backend.
La logica che risiede all’interno della nostra
web app aggiornerà l’html della pagina
mostrando l’immagine dell’animale richiesto.
Al termine della callback, il controllo può
tornare all’Action app del dispositivo che
rimane in attesa di un nuovo input dell’utente.
“Mostra
immagine del
Leone”
Backend
Dialogflow

15. Blazor
• Framework per realizzare web app interattive con C#
• Eliminare ridurre al minimo l’utilizzo di JavaScript
• (in alcuni contesti) alternativa a VueJS, Angular, React

16. Per approfondire Blazor..
Web UI interattive con Blazor Server – Moreno Gentili
• https://www.aspitalia.com/articoli/asp.net-core3/web-ui-interattive-blazor-server.aspx
Building modern web apps with Blazor – Emanuele Bartolesi
• https://media.aspitalia.com/events/netconf19-blazor.media
Blazor, realizzare Web UI interattive senza JavaScript – Andrea Dottor
• https://www.spreaker.com/user/dottor/blazor-realizzare-web-ui-interattive-sen

18. Grazie
Domande?
lorenzo.giudici@freeloop.it
github.com/lorenzogiudici5
twitter.com/lorenzogiudici5
linkedin.com/in/lorenzogiudici5