FunWater => 整合自動化建構 + 無伺服器應用在 Action on Google

#devfest19 #taipei
分享緣起，怎麼設計 AoG 應用，並透過『無伺服器』、『自動化建構』快速建構與整合服務，完成 project

Transcript

2. FunWater => 整合自動化建構 + 無伺服器應用在 Action on Google 黃威豪 (WeiHao, Huang) <demotascha@gmail.com>
3. About Me • Senior software engineer at IFCHIC • Interested in backend development, CI/CD • Able to build an environment / application with docker • Enjoy working on Google Cloud Platform @demotascha
4. ➢ September 26-28, 2019 ➢ 85 cities ➢ 1,300 attendees 2019 Global Voice Hackathon https://www.voicehackathon.org/
5. ❖ Inspired by true story ❖ Demo ❖ How to implement & Architecture ▪ Open Data Taipei ▪ Cloud Functions ▪ Algolia ▪ Google Assistant ▪ Dialogflow ▪ Google Maps API ▪ Cloud Schedule ▪ Cloud Source Repository ▪ Cloud Build ▪ Hosting options ▪ CI / CD ❖ Summary Outline
6. Inspired by true story
7. 海湧工作室 圖／@ hiinstudio
8. Problem
9. A million / minute https://www.bbc.co.uk/newsround/49422105 圖／@ www.bbc.co.uk
10. 10 圖／@ SydneyWater
11. 11 = 圖／@ www.pca.state.mn.us
12. 12 8 million tons of plastic ends up in the ocean annually. 圖／@ rencontres.logrami.fr
13. Problem 3. It takes three times the water to make the bottle as it does to fill it. 4. 8 million tons of plastic ends up in the ocean annually. 1. A million plastic bottles are bought around the world every minute. 2. Plastic bottles can take 450 years or more to break down and decompose. Some estimates push that number closer to 1,000 years.
14. How to reduce/stop using “Single Use Plastic”
15. Existing Solutions
16. 台灣環境資訊協會 (2015-2019/07) OpenStreetMap 圖／@ watergo.teia.tw
17. 台北自來水事業處 (2018~) 圖／@ gismobile.water.gov.taipei
18. Find-a-Fountain (2011~) 圖／@ www.findafountain.org
19. Move to mobile
20. Goal ➢ Reduce plastic bottles （for human） ➢ Easy to get drinking water （for User） ➢ Easy to deploy to other cities（for developer）
21. ➢ Based on “Google Assistant” and “Line” ➢ Use “Official Open Data” to get drinking fountain info (Outdoor) ➢ Use “Google Map” Solution
22. * A million plastic bottles are bought around the world every minute. * It takes three times the water to make the bottle as it does to fill it. Usage rate 0.00001 0.00005 0.0001 Saved bottles/minute 10 50 100 Saved bottles/hour 600 3,000 6,000 Saved bottles/day 14,400 72,000 144,000 Saved bottles/year 525,600 26,280,000 525,600,000 Saved money/NT $20 10 M 525 M 10.5 B Saved water/gallon(US) 245980 12 M 245 M Expectation
23. Demo
24. Demo https://youtu.be/I0KXE19zstQ
25. Demo
26. 26 How to implement? Business logic layer Data layer Presentation layer 26
27. How to implement? Data layer 27
28. Open Data Taipei 公共場所飲水機資訊 Keyword: keyword, Open Data, dataset
29. Cloud Function 以事件為核心的無伺服器運算平台 Keyword: event, serverless
30. Cloud Function 1. No server management 2. Scales automatically 3. Runs code in response to events 4. Pay only while your code runs 5. Connects and extends cloud services
31. Cloud Function (Use case)
32. Cloud Function (scenario: 無伺服器應用程式後端)
33. Cloud Function (scenario: 即時資料處理)
34. Cloud Function (scenario:智慧型應用程式)
35. Cloud Function
36. Algolia 量身定制的快速搜索體驗 Keyword: NoSQL, Elasticsearch
37. “Our mission is to give development teams the building blocks to create a fast, relevant search experience.” Features: ❖ Fast, Sort, Filter, Group, GeoLocation, Synonyms Algolia
38. Algolia (customers) https://www.algolia.com/enterprise/customers/
39. Algolia (integrations) https://www.algolia.com/integrations/ API Client library: Frontend: Framework: E-Commerce official extensions:
40. Data layer
41. How to implement? Presentation layer 41
42. Google Assistant 隨時隨地都可以為您提供幫助 Keyword: OK, Google, action on google
44. Design your Conversation
45. How to implement? Business logic layer 45
46. Dialogflow 建立自然而豐富的對話體驗 Keyword: Intents, Entities, Fulfillment(webhook)
47. set entities
48. Get user intents (1/2) main.js
49. Get user intents (2/2) main.js
50. main.js flow Rich Message Algolia Google Maps API
51. Google Map API 提供靈活的自訂地圖體驗 Keyword: DistanceMatrix
52. Business logic layer
53. How to implement? Business logic layer Data ayer Presentation layer 53 Infrastructure
54. Cloud Source Repository 不單是私人的 Git 存放區，讓團隊於單 一位置儲存、管理以及追蹤程式碼 Keyword: Automatic syncing, trigger
55. Cloud Schedule 全代管的 Cron 工作服務 Keyword: CronJob
56. Hosting Options
57. serverless
58. CI (Continuous Integration)
59. Continuous Delivery, Continuous Deployment
60. CI/ CD Tools Cloud Build
61. Cloud Build cloudbuild.yaml
62. Stackdriver 監控及管理服務、容器、應用程式和基礎架構 Keyword: Monitoring, Logging, Trace, Debugger, Error Reporting, Profiler
63. Architecture
64. Summary
65. Tips ❖ Resources: Google, Official Documents, Google Codelabs, Qwiklabs, Coursera ❖ Keywords: options, maps, flow (en / zh-TW) ❖ Scenario ❖ Free quota & limits ❖ Best practices
66. Pros and Cons ❖ Does not support Comments and Ratings ❖ Does not support Feedback/Report. ❖ Cost ➢ Algolia - Free for non-commercial use ➢ Google Map API - daily free quota ➢ Cloud Function - Free quota ❖ Focus on getting drinking fountain resource. ❖ Focus on building great applications. ❖ Improve development efficiency and productivity
67. The Future of Work ➢ Get More “Official Drinking fountain Data” (Outdoor/Indoor) ➢ Use “Cloud AutoML Vision” to add new drinking machine (Indoor) ➢ Implement Rating / Comment (Outdoor and Indoor) ➢ Join us
68. Cloud AutoML Vision 生飲機、飲水機、水龍頭、噴水池、馬桶、動物飲水機、蓮蓬頭
69. “Rome was not build in a day.”
70. 圖／@ Wikimedia Commons
71. 圖／@ okinawa
72. Application: Line版 AoG版
73. Github: Line版 AoG版
74. Question: 請問『找水喝喝』Google Assistant 應用中，使用了哪幾種 GCP 的服務？（請舉出三樣） 1. Cloud function 2. Cloud build 3. Cloud Source Repository 4. Cloud Schedule 5. Google Map APIs 6. Dialogflow
75. thanks! ANY QUESTIONS? You can find me at: @demotascha demotascha@gmail.com 75
76. References 1. https://developers.google.com/assistant 2. https://larrylu.blog/cloud-automl-vision-practice-b0d2c4377a87 3. https://medium.com/datainpoint/%E5%A6%82%E4%BD%95%E6%87%89%E7%94%A8-cloud-automl-vision-% E8%BE%A8%E8%AD%98%E8%94%A5%E8%96%91%E8%92%9C-8cb065830547 4. https://blog.gcp.expert/cloud-automl-vision-application-1/ 5. https://codelabs.developers.google.com/ 6. https://hiinstudio.com/ 7. https://www.bbc.co.uk/newsround/49422105 8. https://www.voicehackathon.org/ 9. https://www.facebook.com/SydneyWater/photos/a.172523166160391/1629899860422707/?type=1&theater 10. http://rencontres.logrami.fr/ocean-poster/ 11. https://watergo.teia.tw/ 12. https://gismobile.water.gov.taipei/WaterMap_drink/map/map.aspx 13. http://www.findafountain.org/ 14. https://data.taipei/api/getDatasetInfo/downloadResource?id=155999f2-3c5d-486b-af58-d7f4c0b0a4c9&rid=596 29791-5f4f-4c91-903b-e9ab9aa0653b 15. https://cloud.google.com/functions/ 16. https://www.algolia.com/ 17. https://dialogflow.com/ 18. https://cloud.google.com/stackdriver/?hl=zh-tw 19. https://www.michielrook.nl/2016/07/continuous-delivery-continuous-deployment/ 20. https://ithelp.ithome.com.tw/articles/10222318 21. https://cloud.google.com/solutions/continuous-integration/ 22. https://cloud.google.com/hosting-options/ 1. https://www.theguardian.com/environment/2017/jun/28/a-million-a-mi nute-worlds-plastic-bottle-binge-as-dangerous-as-climate-change 2. https://www.theguardian.com/environment/2017/jun/28/how-san-franc isco-is-leading-the-way-out-of-bottled-water-culture 3. https://www.theguardian.com/environment/2017/dec/04/sadiq-khan-pl ans-network-of-london-water-fountains-to-reduce-plastic-waste 4. https://www.theguardian.com/environment/2019/sep/30/girls-young-w omen-call-uk-reduce-single-use-plastic-girlguiding 5. https://www.drinklavit.com/blog/plastic-isnt-green 6. https://www.waterdocs.ca/water-talk/2018/4/7/facts-about-bottled-wate r 7. http://onelessbottle.org