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

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. How to reduce/stop using “Single Use Plastic”

14. Existing Solutions

15. 台灣環境資訊協會
(2015-2019/07)OpenStreetMap
圖／@ watergo.teia.tw

16. 台北自來水事業處
(2018~)
圖／@ gismobile.water.gov.taipei

17. Find-a-Fountain
(2011~)
圖／@ www.findafountain.org

18. Move to
mobile

19. Goal
➢Reduce plastic bottles （for human）
➢Easy to get drinking water （for User）
➢Easy to deploy to other cities（for developer）

20. ➢Based on “Google Assistant” and “Line”
➢Use “Official Open Data” to get drinking fountain info (Outdoor)
➢Use “Google Map”
Solution

21. * 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

22. Demo

23. Demo

24. Demo

25. How to implement?
Business
logic layer
Data layer
Presentation
layer

26. How to implement?
Data layer

27. Open Data Taipei
公共場所飲水機資訊
Keyword: keyword, Open Data, dataset

28. Cloud Function
以事件為核心的無伺服器運算平台
Keyword: event, serverless

29. 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

30. Cloud Function(Use case)

31. Cloud Function (scenario: 無伺服器應用程式後端)

32. Cloud Function (scenario: 即時資料處理)

33. Cloud Function (scenario:智慧型應用程式)

34. Cloud Function

35. Algolia
量身定制的快速搜索體驗
Keyword: NoSQL, Elasticsearch

36. “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

37. Algolia (customers)
https://www.algolia.com/enterprise/customers/

38. Algolia (integrations)
https://www.algolia.com/integrations/
API Client library:
Frontend:
Framework:
E-Commerce official extensions:

39. Data layer

40. How to implement?
Presentation
layer

41. Google Assistant
隨時隨地都可以為您提供幫助
Keyword: OK, Google, action on google

43. Design your Conversation

44. How to implement?
Business
logic layer

45. Dialogflow
建立自然而豐富的對話體驗
Keyword: Intents, Entities, Fulfillment(webhook)

46. set entities

47. Get user intents (1/2)
main.js

48. Get user intents (2/2)
main.js

49. main.js flow
Rich MessageAlgolia Google Maps API

50. Google Map API
提供靈活的自訂地圖體驗
Keyword: DistanceMatrix

51. Business logic layer

52. How to implement?
Business
logic layer
Data ayer
Presentation
layer
Infrastructure

53. Cloud Source Repository
不單是私人的 Git 存放區，讓團隊於單
一位置儲存、管理以及追蹤程式碼
Keyword: Automatic syncing, trigger

54. Cloud Schedule
全代管的 Cron 工作服務
Keyword: CronJob

55. Hosting Options

56. serverless

57. CI (Continuous Integration)

58. Continuous Delivery, Continuous Deployment

59. CI/ CD Tools
Cloud Build

60. Cloud Build
cloudbuild.yaml

61. Stackdriver
監控及管理服務、容器、應用程式和基礎架構
Keyword: Monitoring, Logging, Trace, Debugger, Error Reporting, Profiler

62. Architecture

63. Summary

64. Tips
❖ Resources: Google, Official Documents, Google Codelabs, Qwiklabs, Coursera
❖ Keywords: options, maps, flow (en / zh-TW)
❖ Scenario
❖ Free quota & limits
❖ Best practices

65. 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

66. 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

67. Cloud AutoML Vision
生飲機、飲水機、水龍頭、噴水池、馬桶、動物飲水機、蓮蓬頭

68. “Rome was not build in a day.”

69. 圖／@ Wikimedia Commons

70. 圖／@ okinawa

71. Application:
Line版 AoG版

72. Github:
Line版 AoG版

73. Question:
請問『找水喝喝』Google Assistant 應用中，使用了哪幾
種 GCP 的服務？（請舉出三樣）
1. Cloud function
2. Cloud build
3. Cloud Source Repository
4. Cloud Schedule
5. Google Map APIs
6. Dialogflow

74. thanks!
ANY QUESTIONS?
You can find me at:
@demotascha
demotascha@gmail.com
75

75. 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=59629791-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-
minute-worlds-plastic-bottle-binge-as-dangerous-as-climate-change
2.https://www.theguardian.com/environment/2017/jun/28/how-san-
francisco-is-leading-the-way-out-of-bottled-water-culture
3.https://www.theguardian.com/environment/2017/dec/04/sadiq-khan-
plans-network-of-london-water-fountains-to-reduce-plastic-waste
4.https://www.theguardian.com/environment/2019/sep/30/girls-young-
women-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-
water
7.http://onelessbottle.org