SlideShare a Scribd company logo
1 of 38
Download to read offline
Beyond Web Interfaces
Fabrizio Ciacchi / Spryker Systems GmbH.
2018 Spryker Systems GmbH 2
I’m Fabrizio
Software Engineer at Spryker
http://ciacchi.it - https://spryker.com
What is this talk about?
● Give you insights so you can
start to look into the best
articles, tools and books;
● Tell you real examples of
(chat/voice) bots. How to
implement them, so to solve
real problems;
● Discuss solutions and ideas
on how bots should solve
existing problems.
2018 Spryker Systems GmbH
It’s the next Far West
3
“Alexa, add soap to my shopping cart”
“I would like to see who sells shoes nearby”
2018 Spryker Systems GmbH
It’s the next Far West
4
Alexa
Hey Siri
Hey
Cortana
Ok Google
Cloud (AWS)
AI (Lex, Polly)
Machine Learning
Alexa (Voice-bot)
https://aws.amazon.com/mac
hine-learning/
Cloud (Azure)
AI & ML
Any Windows device?
https://azure.microsoft.com/en-us/o
verview/ai-platform/
Apple Watch
Siri/Assistant
Shortcuts
(not to mention Apple Car)
Google Cloud
Google Home
Tensorflow
Dialogflow
https://dialogflow.com/
Facebook
Messenger / WhatsApp
PyTorch / Wit.ai
Marketplace
https://pytorch.org/
IBM
Watson & Cloud
https://www.ibm.com/cloud/ai
2018 Spryker Systems GmbH
User Journey
5
Search - 50 results
Response - 2 sec
Checkout - 4/5 steps
10 results
300-500 msec
1-2 steps
3 results
100 msec*
1 click
Chat VS Voice
2018 Spryker Systems GmbH
Similarities
7
− Convey small information
− Users want to ask for info
− Time interaction is short
− Narrow down to intent/response
shipment
tomorrow
30
seconds
getShipmentInfo
2018 Spryker Systems GmbH
Differences
8
− Voice better for informative skills
− Voice has longer message/interactions
− Use cases are different
− Different technologies
Where is my
shipment?
It will be delivered tomorrow
shipment
tomorrow
getShipmentInfo Check (shipment) of (order)
Tell me more
DILBERT
2018 Spryker Systems GmbH
Start simple
10
− My example uses a Simple PHP Application:
Can be Symfony, Spryker or any other framework
− Botman with Regular Expressions
https://botman.io/
Lavaravel module - Open source - Works also in Symfony
https://gist.github.com/fciacchi/30bcff6d77ff40ae811740efa338adf0
− Use Docker & Ngrok
https://gist.github.com/fciacchi/0a85530efb0f05396c21778af22ff1cc
https://ngrok.com/
$ ./ngrok http -subdomain=yousubdomain -region eu 192.168.99.100:80
http://localhost:4040
2018 Spryker Systems GmbH
Conversations in PHP
11
− Then you can start grouping the
intents and the conversations
https://botman.io/2.0/conversations
2018 Spryker Systems GmbH
Backend Design
12
Build a Facebook Bot: https://blog.spryker.com/how-to-build-bot-5-steps
2018 Spryker Systems GmbH
Wit.ai
13
CONFIDENCE
2018 Spryker Systems GmbH
And a Conversation manager
14
We start with a
State machine
context-1context-2context-3
Intent xyv (sub: step 1)
Intent def (sub: step 2)
….
sessionnavigation
Next
Previous
Last
….
SESSION
Last Intent: getRestaurants
Context: context-2
Item selected: 3
Location: Berlin
Filter:
- type: sushi
- price: $$
….
2018 Spryker Systems GmbH
Example Location
15
City: Berlin
Airport: TXL, SXF
SESSION
Zip Code: 10117
Address: Friedrichstraße 43
Lat: 52.520450
Lon: 13.407320 3h
1d
Speaking of Alexa
Alexa Skill creator
172018 Spryker Systems GmbH - Fabrizio Ciacchi
https://developer.amazon.com/designing-for-voice/
Get the Skill’s JSON
182018 Spryker Systems GmbH - Fabrizio Ciacchi
https://skillinator.io/
NodeJS function 1/2
19
https://console..amazon.com/console/home
https://eu-west-1.console.aws.amazon.com/lambda/home?region=eu-west-1#
"getCalendarByDay": function () {
var speechOutput = "I didn't understand. Can you repeat?";
var self = this;
var daySlotRaw = this.event.request.intent.slots.day.value;
console.log(daySlotRaw);
var daySlot = resolveCanonical(this.event.request.intent.slots.day);
console.log(daySlot);
var url = 'https://flybybot.eu.ngrok.io/ikarus/alexa/calendar?day='+daySlot;
2018 Spryker Systems GmbH - Fabrizio Ciacchi
Lambda function 2/2
20
...
https.get( url, function( response ) {
var str = '';
response.on('data', function (chunk) {
str += chunk;
});
response.on('end', function () {
jsonResponse = JSON.parse(str);
console.log("RESPONSE ---> " + jsonResponse.response);
self.emit(':ask', 'On ' + daySlot + ' ' + jsonResponse.response);
} );
} );
},
2018 Spryker Systems GmbH - Fabrizio Ciacchi
Model: https://gist.github.com/fciacchi/61d42439f413d8faffd4a284b2aaee99
Lambda: https://gist.github.com/fciacchi/4415a55b3dbc5eeede3bdccf76fc663e
2018 Spryker Systems GmbH
A simple Alexa skill dialog
21
2018 Spryker Systems GmbH
A simple Alexa skill dialog
22
2018 Spryker Systems GmbH
Design to a new level
23
Build Lambda function for Google and Amazon:
https://www.raizlabs.com/dev/2017/01/build-ai-assi
stant-api-ai-amazon-lambda/
API Design
2018 Spryker Systems GmbH
Use HTTP verbs
25
− There are many HTTP verbs and you can apply them on both collections or elements.
Make it simple and stick to it.
− HTTP verbs should be mapped 1-to-1 to CRUD operations.
(but use encoded IDs/structure)
2018 Spryker Systems GmbH
Use HTTP response codes
26
− There are many HTTP response codes, use it!
− 200 (GET)
− 201 + Location (POST)
− 204 (PUT/DELETE)
− 301 Moved Permanently
− 404 Resource not found (/customers/5 -> does not exists)
− 405 Method not allowed (should tell which verbs are allowed)
− 409 Conflict (try to insert twice the same resource)
− 415 Unsupported media type
− 422 Unprocessable entity (wrong payload POST)
− 500 Managed Exceptions
2018 Spryker Systems GmbH
DDD Approach
27
− Use the ‘Domain’ definition as in the Domain Driven Design to define your API:
− Customer is one domain
− Wishlist is one domain
− Cart is one domain
Interesting Reading:
https://herbertograca.com/2017/11/16/explicit-architecture-01-ddd-hexagonal-onion-clean-cqrs-how-i-put-it-all-together/
30%
Saved in Wrong API Calls
− JSON API:
http://jsonapi.org/
− JWT token:
https://jwt.io/
− REST API Refactor:
https://www.slideshare.net/ciacchi/rest-api-
a-real-case-scenario
− Build REST API with
Symfony:
https://williamdurand.fr/2012/08/02/rest-api
s-with-symfony2-the-right-way/
Why design good API?
Design Tips
2018 Spryker Systems GmbH
Design tips
30
Ulrike Eisengräber @ Rasa.com
http://blog.rasa.com/13-rules-for-cui-design/
● Rule n.3: Offer Informative Feedback.
● Rule 12: Make Use Of Familiar Concepts.
● Rule 8: Reduce Short-term Memory Load.
● Rule 5: Prevent Errors & Rule 11: Have A Fallback Option
● Rule 4: Design Dialogs To Provide Closure
● But you can also try new things...
When is the next train?
What time is my appointment?
2018 Spryker Systems GmbH
VisualBots
31
DROP
Welcome
Question 1 -37%
Question 2 -4%
Question 3 0%
… 0%
Question 9 0%
https://www.visualbots.io/
Livio Marcheschi
2018 Spryker Systems GmbH
Latest News
32
https://developers.facebook.com/docs/mes
senger-platform/send-messages/personas/
FB Mess. Personas
https://techcrunch.com/2018/09/20/the-lo
ng-list-of-new-alexa-devices-amazon-ann
ounced-at-its-hardware-event/
New Alexa Devices Portal FB/Alexa
http://bit.ly/fb-portal-alexa
Machine Learning
2018 Spryker Systems GmbH
Machine Learning
34
Machine Learning For Dummies, IBM Limited Edition
2018 Spryker Systems GmbH
Links to Learn
− Facebook Developer Circle
https://www.facebook.com/groups/DevCBerlin/
− Session 1: Intro to Machine Learning
Wen-Ru Sheu / Backend Engineer @Visual Meta GmbH
http://bit.ly/ml-session-1
https://tinyurl.com/machinelearning-intro-1
− Session 2: Neural Networks
Christopher Lennan / Senior Data Scientist @Idealo.de
http://bit.ly/ml-session-2
https://tinyurl.com/machinelearning-intro-2
− Session 3: Natural Language Processing (Lennan + Sheu)
http://bit.ly/ml-session-3
https://tinyurl.com/machinelearning-intro-3
− ML 101:
http://bit.ly/machine-learning-101
− Build Intelligent Bots in Python:
https://speakerdeck.com/kprzystalski/building-intelligent-bots-in-python
− Start With NLP:
https://towardsdatascience.com/an-easy-introduction-to-natural-language-processing-b1e2801291c1
35
2018 Spryker Systems GmbH
Books
36
− https://oreil.ly/2pDdHYH https://oreil.ly/2G9ZR7d http://bit.ly/2G7Ggo4
2018 Spryker Systems GmbH
Some Examples
37
https://youtu.be/WLu6K8w8P1Q https://youtu.be/O5Jz_67iN30
https://youtu.be/elqsMF2Bd4k
spryker.com / ciacchi.it
fabrizio.ciacchi@gmail.com
twitter @sprysys @ciacchi
Thanks
http://ciacchi.it/CodeteCon-v4-2018-Ciacchi-Bot.pdf
Beyond Web
Interfaces
Fabrizio Ciacchi
Icons designed by Freepik from Flaticon

More Related Content

Similar to Beyond Web Interfaces

ICSE 2022 SEIP: Toward Among-Device AI from On-Device AI with Stream Pipelines
ICSE 2022 SEIP: Toward Among-Device AI from On-Device AI with Stream PipelinesICSE 2022 SEIP: Toward Among-Device AI from On-Device AI with Stream Pipelines
ICSE 2022 SEIP: Toward Among-Device AI from On-Device AI with Stream PipelinesMyungJoo Ham
 
ITCamp 2019 - Andrea Saltarello - Implementing bots and Alexa skills using Az...
ITCamp 2019 - Andrea Saltarello - Implementing bots and Alexa skills using Az...ITCamp 2019 - Andrea Saltarello - Implementing bots and Alexa skills using Az...
ITCamp 2019 - Andrea Saltarello - Implementing bots and Alexa skills using Az...ITCamp
 
How to leverage APIs & Scrapers in App Store Optimization
How to leverage APIs & Scrapers in App Store OptimizationHow to leverage APIs & Scrapers in App Store Optimization
How to leverage APIs & Scrapers in App Store OptimizationRomain Golfier
 
Von JavaEE auf Microservice in 6 Monaten - The Good, the Bad, and the wtfs...
Von JavaEE auf Microservice in 6 Monaten - The Good, the Bad, and the wtfs...Von JavaEE auf Microservice in 6 Monaten - The Good, the Bad, and the wtfs...
Von JavaEE auf Microservice in 6 Monaten - The Good, the Bad, and the wtfs...André Goliath
 
ScriptRunner introduction
ScriptRunner introductionScriptRunner introduction
ScriptRunner introductionHeiko Brenn
 
Kono.IntelCraft.Weekly.AI.LLM.Landscape.2024.02.28.pdf
Kono.IntelCraft.Weekly.AI.LLM.Landscape.2024.02.28.pdfKono.IntelCraft.Weekly.AI.LLM.Landscape.2024.02.28.pdf
Kono.IntelCraft.Weekly.AI.LLM.Landscape.2024.02.28.pdfAnant Corporation
 
Building Better IoT Applications without Servers
Building Better IoT Applications without ServersBuilding Better IoT Applications without Servers
Building Better IoT Applications without ServersIan Massingham
 
Best of barcelona symposium experience
Best of barcelona symposium experienceBest of barcelona symposium experience
Best of barcelona symposium experienceThe Reference
 
Salesforce IoT Cloud Explorer Edition with Raspberry Pi
Salesforce IoT Cloud Explorer Edition with Raspberry PiSalesforce IoT Cloud Explorer Edition with Raspberry Pi
Salesforce IoT Cloud Explorer Edition with Raspberry PiDinesh Kumar Wickramasinghe
 
Create a-strong-two-factors-authentication-device-for-less-than-chf-100
Create a-strong-two-factors-authentication-device-for-less-than-chf-100Create a-strong-two-factors-authentication-device-for-less-than-chf-100
Create a-strong-two-factors-authentication-device-for-less-than-chf-100Cyber Security Alliance
 
Intelligence Artificielle sur AWS - Retours d'expériences
Intelligence Artificielle sur AWS - Retours d'expériencesIntelligence Artificielle sur AWS - Retours d'expériences
Intelligence Artificielle sur AWS - Retours d'expériencesAdeline Garrigues
 
Sps Boston The Share Point Beast
Sps Boston   The Share Point BeastSps Boston   The Share Point Beast
Sps Boston The Share Point Beastgueste918732
 
SPSToronto 2015 - Managing Office365 with PowerShell and CSOM
SPSToronto 2015 - Managing Office365 with PowerShell and CSOMSPSToronto 2015 - Managing Office365 with PowerShell and CSOM
SPSToronto 2015 - Managing Office365 with PowerShell and CSOMamitvasu
 
Accelerating AdTech on AWS in Japan
Accelerating AdTech on AWS in JapanAccelerating AdTech on AWS in Japan
Accelerating AdTech on AWS in JapanEiji Shinohara
 
APIdays Barcelona 2019 - How to build a social network on Serverless with Yan...
APIdays Barcelona 2019 - How to build a social network on Serverless with Yan...APIdays Barcelona 2019 - How to build a social network on Serverless with Yan...
APIdays Barcelona 2019 - How to build a social network on Serverless with Yan...apidays
 
How to build a social network on serverless
How to build a social network on serverlessHow to build a social network on serverless
How to build a social network on serverlessYan Cui
 

Similar to Beyond Web Interfaces (20)

Build 2019 Recap
Build 2019 RecapBuild 2019 Recap
Build 2019 Recap
 
Introduction to python scrapping
Introduction to python scrappingIntroduction to python scrapping
Introduction to python scrapping
 
ICSE 2022 SEIP: Toward Among-Device AI from On-Device AI with Stream Pipelines
ICSE 2022 SEIP: Toward Among-Device AI from On-Device AI with Stream PipelinesICSE 2022 SEIP: Toward Among-Device AI from On-Device AI with Stream Pipelines
ICSE 2022 SEIP: Toward Among-Device AI from On-Device AI with Stream Pipelines
 
ITCamp 2019 - Andrea Saltarello - Implementing bots and Alexa skills using Az...
ITCamp 2019 - Andrea Saltarello - Implementing bots and Alexa skills using Az...ITCamp 2019 - Andrea Saltarello - Implementing bots and Alexa skills using Az...
ITCamp 2019 - Andrea Saltarello - Implementing bots and Alexa skills using Az...
 
How to leverage APIs & Scrapers in App Store Optimization
How to leverage APIs & Scrapers in App Store OptimizationHow to leverage APIs & Scrapers in App Store Optimization
How to leverage APIs & Scrapers in App Store Optimization
 
Von JavaEE auf Microservice in 6 Monaten - The Good, the Bad, and the wtfs...
Von JavaEE auf Microservice in 6 Monaten - The Good, the Bad, and the wtfs...Von JavaEE auf Microservice in 6 Monaten - The Good, the Bad, and the wtfs...
Von JavaEE auf Microservice in 6 Monaten - The Good, the Bad, and the wtfs...
 
ScriptRunner introduction
ScriptRunner introductionScriptRunner introduction
ScriptRunner introduction
 
Kono.IntelCraft.Weekly.AI.LLM.Landscape.2024.02.28.pdf
Kono.IntelCraft.Weekly.AI.LLM.Landscape.2024.02.28.pdfKono.IntelCraft.Weekly.AI.LLM.Landscape.2024.02.28.pdf
Kono.IntelCraft.Weekly.AI.LLM.Landscape.2024.02.28.pdf
 
Corona geek
Corona geekCorona geek
Corona geek
 
Building Better IoT Applications without Servers
Building Better IoT Applications without ServersBuilding Better IoT Applications without Servers
Building Better IoT Applications without Servers
 
Best of barcelona symposium experience
Best of barcelona symposium experienceBest of barcelona symposium experience
Best of barcelona symposium experience
 
Encode Club Hackathon
Encode Club Hackathon  Encode Club Hackathon
Encode Club Hackathon
 
Salesforce IoT Cloud Explorer Edition with Raspberry Pi
Salesforce IoT Cloud Explorer Edition with Raspberry PiSalesforce IoT Cloud Explorer Edition with Raspberry Pi
Salesforce IoT Cloud Explorer Edition with Raspberry Pi
 
Create a-strong-two-factors-authentication-device-for-less-than-chf-100
Create a-strong-two-factors-authentication-device-for-less-than-chf-100Create a-strong-two-factors-authentication-device-for-less-than-chf-100
Create a-strong-two-factors-authentication-device-for-less-than-chf-100
 
Intelligence Artificielle sur AWS - Retours d'expériences
Intelligence Artificielle sur AWS - Retours d'expériencesIntelligence Artificielle sur AWS - Retours d'expériences
Intelligence Artificielle sur AWS - Retours d'expériences
 
Sps Boston The Share Point Beast
Sps Boston   The Share Point BeastSps Boston   The Share Point Beast
Sps Boston The Share Point Beast
 
SPSToronto 2015 - Managing Office365 with PowerShell and CSOM
SPSToronto 2015 - Managing Office365 with PowerShell and CSOMSPSToronto 2015 - Managing Office365 with PowerShell and CSOM
SPSToronto 2015 - Managing Office365 with PowerShell and CSOM
 
Accelerating AdTech on AWS in Japan
Accelerating AdTech on AWS in JapanAccelerating AdTech on AWS in Japan
Accelerating AdTech on AWS in Japan
 
APIdays Barcelona 2019 - How to build a social network on Serverless with Yan...
APIdays Barcelona 2019 - How to build a social network on Serverless with Yan...APIdays Barcelona 2019 - How to build a social network on Serverless with Yan...
APIdays Barcelona 2019 - How to build a social network on Serverless with Yan...
 
How to build a social network on serverless
How to build a social network on serverlessHow to build a social network on serverless
How to build a social network on serverless
 

Recently uploaded

『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一z xss
 
Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxeditsforyah
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作ys8omjxb
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Paul Calvano
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationLinaWolf1
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Sonam Pathan
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationMarko4394
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhimiss dipika
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Sonam Pathan
 

Recently uploaded (17)

『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
 
Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptx
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 Documentation
 
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
 
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentation
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhi
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170
 

Beyond Web Interfaces

  • 1. Beyond Web Interfaces Fabrizio Ciacchi / Spryker Systems GmbH.
  • 2. 2018 Spryker Systems GmbH 2 I’m Fabrizio Software Engineer at Spryker http://ciacchi.it - https://spryker.com What is this talk about? ● Give you insights so you can start to look into the best articles, tools and books; ● Tell you real examples of (chat/voice) bots. How to implement them, so to solve real problems; ● Discuss solutions and ideas on how bots should solve existing problems.
  • 3. 2018 Spryker Systems GmbH It’s the next Far West 3 “Alexa, add soap to my shopping cart” “I would like to see who sells shoes nearby”
  • 4. 2018 Spryker Systems GmbH It’s the next Far West 4 Alexa Hey Siri Hey Cortana Ok Google Cloud (AWS) AI (Lex, Polly) Machine Learning Alexa (Voice-bot) https://aws.amazon.com/mac hine-learning/ Cloud (Azure) AI & ML Any Windows device? https://azure.microsoft.com/en-us/o verview/ai-platform/ Apple Watch Siri/Assistant Shortcuts (not to mention Apple Car) Google Cloud Google Home Tensorflow Dialogflow https://dialogflow.com/ Facebook Messenger / WhatsApp PyTorch / Wit.ai Marketplace https://pytorch.org/ IBM Watson & Cloud https://www.ibm.com/cloud/ai
  • 5. 2018 Spryker Systems GmbH User Journey 5 Search - 50 results Response - 2 sec Checkout - 4/5 steps 10 results 300-500 msec 1-2 steps 3 results 100 msec* 1 click
  • 7. 2018 Spryker Systems GmbH Similarities 7 − Convey small information − Users want to ask for info − Time interaction is short − Narrow down to intent/response shipment tomorrow 30 seconds getShipmentInfo
  • 8. 2018 Spryker Systems GmbH Differences 8 − Voice better for informative skills − Voice has longer message/interactions − Use cases are different − Different technologies Where is my shipment? It will be delivered tomorrow shipment tomorrow getShipmentInfo Check (shipment) of (order)
  • 10. 2018 Spryker Systems GmbH Start simple 10 − My example uses a Simple PHP Application: Can be Symfony, Spryker or any other framework − Botman with Regular Expressions https://botman.io/ Lavaravel module - Open source - Works also in Symfony https://gist.github.com/fciacchi/30bcff6d77ff40ae811740efa338adf0 − Use Docker & Ngrok https://gist.github.com/fciacchi/0a85530efb0f05396c21778af22ff1cc https://ngrok.com/ $ ./ngrok http -subdomain=yousubdomain -region eu 192.168.99.100:80 http://localhost:4040
  • 11. 2018 Spryker Systems GmbH Conversations in PHP 11 − Then you can start grouping the intents and the conversations https://botman.io/2.0/conversations
  • 12. 2018 Spryker Systems GmbH Backend Design 12 Build a Facebook Bot: https://blog.spryker.com/how-to-build-bot-5-steps
  • 13. 2018 Spryker Systems GmbH Wit.ai 13 CONFIDENCE
  • 14. 2018 Spryker Systems GmbH And a Conversation manager 14 We start with a State machine context-1context-2context-3 Intent xyv (sub: step 1) Intent def (sub: step 2) …. sessionnavigation Next Previous Last …. SESSION Last Intent: getRestaurants Context: context-2 Item selected: 3 Location: Berlin Filter: - type: sushi - price: $$ ….
  • 15. 2018 Spryker Systems GmbH Example Location 15 City: Berlin Airport: TXL, SXF SESSION Zip Code: 10117 Address: Friedrichstraße 43 Lat: 52.520450 Lon: 13.407320 3h 1d
  • 17. Alexa Skill creator 172018 Spryker Systems GmbH - Fabrizio Ciacchi https://developer.amazon.com/designing-for-voice/
  • 18. Get the Skill’s JSON 182018 Spryker Systems GmbH - Fabrizio Ciacchi https://skillinator.io/
  • 19. NodeJS function 1/2 19 https://console..amazon.com/console/home https://eu-west-1.console.aws.amazon.com/lambda/home?region=eu-west-1# "getCalendarByDay": function () { var speechOutput = "I didn't understand. Can you repeat?"; var self = this; var daySlotRaw = this.event.request.intent.slots.day.value; console.log(daySlotRaw); var daySlot = resolveCanonical(this.event.request.intent.slots.day); console.log(daySlot); var url = 'https://flybybot.eu.ngrok.io/ikarus/alexa/calendar?day='+daySlot; 2018 Spryker Systems GmbH - Fabrizio Ciacchi
  • 20. Lambda function 2/2 20 ... https.get( url, function( response ) { var str = ''; response.on('data', function (chunk) { str += chunk; }); response.on('end', function () { jsonResponse = JSON.parse(str); console.log("RESPONSE ---> " + jsonResponse.response); self.emit(':ask', 'On ' + daySlot + ' ' + jsonResponse.response); } ); } ); }, 2018 Spryker Systems GmbH - Fabrizio Ciacchi Model: https://gist.github.com/fciacchi/61d42439f413d8faffd4a284b2aaee99 Lambda: https://gist.github.com/fciacchi/4415a55b3dbc5eeede3bdccf76fc663e
  • 21. 2018 Spryker Systems GmbH A simple Alexa skill dialog 21
  • 22. 2018 Spryker Systems GmbH A simple Alexa skill dialog 22
  • 23. 2018 Spryker Systems GmbH Design to a new level 23 Build Lambda function for Google and Amazon: https://www.raizlabs.com/dev/2017/01/build-ai-assi stant-api-ai-amazon-lambda/
  • 25. 2018 Spryker Systems GmbH Use HTTP verbs 25 − There are many HTTP verbs and you can apply them on both collections or elements. Make it simple and stick to it. − HTTP verbs should be mapped 1-to-1 to CRUD operations. (but use encoded IDs/structure)
  • 26. 2018 Spryker Systems GmbH Use HTTP response codes 26 − There are many HTTP response codes, use it! − 200 (GET) − 201 + Location (POST) − 204 (PUT/DELETE) − 301 Moved Permanently − 404 Resource not found (/customers/5 -> does not exists) − 405 Method not allowed (should tell which verbs are allowed) − 409 Conflict (try to insert twice the same resource) − 415 Unsupported media type − 422 Unprocessable entity (wrong payload POST) − 500 Managed Exceptions
  • 27. 2018 Spryker Systems GmbH DDD Approach 27 − Use the ‘Domain’ definition as in the Domain Driven Design to define your API: − Customer is one domain − Wishlist is one domain − Cart is one domain Interesting Reading: https://herbertograca.com/2017/11/16/explicit-architecture-01-ddd-hexagonal-onion-clean-cqrs-how-i-put-it-all-together/
  • 28. 30% Saved in Wrong API Calls − JSON API: http://jsonapi.org/ − JWT token: https://jwt.io/ − REST API Refactor: https://www.slideshare.net/ciacchi/rest-api- a-real-case-scenario − Build REST API with Symfony: https://williamdurand.fr/2012/08/02/rest-api s-with-symfony2-the-right-way/ Why design good API?
  • 30. 2018 Spryker Systems GmbH Design tips 30 Ulrike Eisengräber @ Rasa.com http://blog.rasa.com/13-rules-for-cui-design/ ● Rule n.3: Offer Informative Feedback. ● Rule 12: Make Use Of Familiar Concepts. ● Rule 8: Reduce Short-term Memory Load. ● Rule 5: Prevent Errors & Rule 11: Have A Fallback Option ● Rule 4: Design Dialogs To Provide Closure ● But you can also try new things... When is the next train? What time is my appointment?
  • 31. 2018 Spryker Systems GmbH VisualBots 31 DROP Welcome Question 1 -37% Question 2 -4% Question 3 0% … 0% Question 9 0% https://www.visualbots.io/ Livio Marcheschi
  • 32. 2018 Spryker Systems GmbH Latest News 32 https://developers.facebook.com/docs/mes senger-platform/send-messages/personas/ FB Mess. Personas https://techcrunch.com/2018/09/20/the-lo ng-list-of-new-alexa-devices-amazon-ann ounced-at-its-hardware-event/ New Alexa Devices Portal FB/Alexa http://bit.ly/fb-portal-alexa
  • 34. 2018 Spryker Systems GmbH Machine Learning 34 Machine Learning For Dummies, IBM Limited Edition
  • 35. 2018 Spryker Systems GmbH Links to Learn − Facebook Developer Circle https://www.facebook.com/groups/DevCBerlin/ − Session 1: Intro to Machine Learning Wen-Ru Sheu / Backend Engineer @Visual Meta GmbH http://bit.ly/ml-session-1 https://tinyurl.com/machinelearning-intro-1 − Session 2: Neural Networks Christopher Lennan / Senior Data Scientist @Idealo.de http://bit.ly/ml-session-2 https://tinyurl.com/machinelearning-intro-2 − Session 3: Natural Language Processing (Lennan + Sheu) http://bit.ly/ml-session-3 https://tinyurl.com/machinelearning-intro-3 − ML 101: http://bit.ly/machine-learning-101 − Build Intelligent Bots in Python: https://speakerdeck.com/kprzystalski/building-intelligent-bots-in-python − Start With NLP: https://towardsdatascience.com/an-easy-introduction-to-natural-language-processing-b1e2801291c1 35
  • 36. 2018 Spryker Systems GmbH Books 36 − https://oreil.ly/2pDdHYH https://oreil.ly/2G9ZR7d http://bit.ly/2G7Ggo4
  • 37. 2018 Spryker Systems GmbH Some Examples 37 https://youtu.be/WLu6K8w8P1Q https://youtu.be/O5Jz_67iN30 https://youtu.be/elqsMF2Bd4k
  • 38. spryker.com / ciacchi.it fabrizio.ciacchi@gmail.com twitter @sprysys @ciacchi Thanks http://ciacchi.it/CodeteCon-v4-2018-Ciacchi-Bot.pdf Beyond Web Interfaces Fabrizio Ciacchi Icons designed by Freepik from Flaticon