這次台灣在防疫的表現上是亮眼的，其中最早的科技防疫「口罩地圖」扮演了拋磚引玉的作用，透過 Google Map 的結合，讓許多民眾可以很容易的找尋口罩物資，之後行政院也拍板釋出口罩存量的 open data，讓整個開放社群有更多資訊力量的投入。 介紹第一版「超商口罩地圖」的起源和概念，與第二版「藥局口罩地圖」的團隊組組成與技術應用，第二版口罩地圖是兩位 GDE 與三位 GDG organizer 的協同作業，在短短一個晚上時間內，使用 Google 雲端服務，做好能夠扛載第一天 80 萬次數的使用量。

1. Mask map
KAI CHU CHUNG
GDE Cloud
GDG Cloud Taipei co-organizers
@CageChung
https://kaichu.io
Howard Wu
GDG Tainan Organizers
https://www.facebook.com/chanwei.wu
房志剛
GDG Kaohsiung Organizer
https://github.com/abc873693
Kevin Yang
GDE Angular / MVP
GDG Taichung Organizer
Angular Taiwan ex-oranizer
https://blog.kevinyang.net
Ahdaa Yeh
GDG Taipei Organizer
https://mosil.space
Kevin Chiu
GDG Taipei co-Organizer
https://github.com/kevin6449

2. Mask map PM
Howard Wu
GDG Tainan Organizers
https://www.facebook.com/chanwei.wu

3. ● Background
● How to manage Experts’ team
Agenda

4. ● 午餐的機緣
● 社群夥伴的(被)推坑
● Team members
○ PM - Howard
○ Web Frontend - Kevin Yang
○ Backend - Cage
○ APP - Ahdaa, 志剛
○ AoG - Wolke, Kevin Chiu
Background
臨時組建的 side project

5. ● 提出方針，說明做事情的意義，而非實作細節
● 勿妄自菲薄，勇於做決定
● 對內溝通不是問題，對外做好窗口角色
● 除了他們的專業外，其他都是我的事
● 扛載壓力，盡可能爭取時間、資源
● 既然擁有技術能力，就適當的擔任替補
How to manage Experts’ team
最好的管理就是不管理(誤)

6. Mask map Frontend
Kevin Yang
GDE Angular / MVP
GDG Taichung Organizer
Angular Taiwan ex-oranizer
https://blog.kevinyang.net

7. ● Tech Selection
● Trips and Tips
Agenda

8. Tech Selection

9. ● Angular v9
● Angular Material
● Angular Google Maps Component
● AngularFire
Tech Select

10. Tips

11. ● 透過 RxJS 的幫助可以將畫面互動與呼叫 API 撈取資料的動作，做有系統的整合
Tips #1
善用 RxJS

13. ● 雖然可以將所有的藥局標是在畫面上，但過多的訊息除了會讓使用者混淆外，也會讓網
頁的顯示效能降低
● 減少畫面重新繪製的工作，資料前後的差異比較，只處理有異動的部分 (map marker)
Tips #2
減少顯示在畫面上的物件

14. ● 過往很多很好用的應用程式到後期都壞掉都是因為加上過多的功能
● Keep it simple, 以解決問題為優先考量，而非製造問題
Tips #3
功能需求，要採減法而非加法

15. 房志剛
GDG Kaohsiung Organizer
https://github.com/abc873693
Mask map Mobile
Ahdaa Yeh
GDG Taipei Organizer
https://mosil.space

16. ● 技術選擇
● 開發時程
● 遇到的問題
Agenda

17. 技術選擇

18. ● 初版 2/5
● 改善UI 2/12
● 最新消息 2/21
● 回報機制 2/25
● 修BUG 2/29
開發時程

19. ● 功能
■ Google Maps plugin
■ mask api
■ Firebase
■ UI
● Android 上架
● iOS審查中
初版

20. ● 過濾器
● BottomSheet
● Firebase
● UI
改善UI

21. ● Firebase Remote Config
● 提供政府的最新消息
最新消息

22. ● mask feedback api
● UI
回報機制

23. ● iOS無法上架
● Google Maps plugin
遇到的問題

24. iOS無法上架

25. ● Flutter 官方維護的 plugin
● Develper preview
● 手勢偵測無效
● 特定情況下Marker會消失
Google Maps plugin

26. Mask AoG
Kevin Chiu
GDG Taipei co-Organizer
https://github.com/kevin6449

27. ● 技術選擇
● 開發時程
● 遇到的問題
Agenda

28. 技術選擇

29. ● 初版 2月7日 週五上午00:00開始開發
● 送審 2月7日 週五 上午2:06
● 上架 2月7日 週五 上午6:10
開發時程

30. ● Goolge Assistant 需要地理位置
(DiaglogFlow)
● iOS Goolge Assistant 需要地理位置
遇到的問題

31. KAI CHU CHUNG
GDE Cloud
GDG Cloud Taipei co-organizers
@CageChung
https://kaichu.io
Mask map backend

32. ● Backend Story
● Insights
● Infrastructure
● Trips and Tips
Agenda

33. Backend Story

34. Backend Story
Join mask backend
project
2/5 4PM
Mask backend project
kick off
2/5 10PM
First version backend
API and website launch
2/6 6AM
33 versions delivery
3/5

35. Insights

36. Summary

37. Instances

38. Cloud SQL
CPU utilization

39. Cloud SQL
Read/write operations

40. Cloud SQL
Ingress/Egress

41. Infrastructure

42. Infrastructure
Pharmacies Backend
App Engine
Autoscaling
Cloud SQL
psql
Cloud
Storage
Feedback Backend
App Engine
Autoscaling
Website Backend
App Engine
Autoscaling
Data broker
Compute Engine
Cloud Load
Balancing
gsutil cp
hook
Swagger docs
App Engine
Mobile Devices
Push Notifications
wget
Cloud
Build
Release trigger
deploy
Stackdriver
Kiang
Cloud
Build

43. Infrastructure
Pharmacies Backend
App Engine
Autoscaling
Cloud SQL
psql
Cloud
Storage
Feedback Backend
App Engine
Autoscaling
Website Backend
App Engine
Autoscaling
Data broker
Compute Engine
Cloud Load
Balancing
gsutil cp
Swagger docs
App Engine
Mobile Devices
Push Notifications
wget
Cloud
Build
Release trigger
deploy
Stackdriver
Kiang
Cloud
Build

44. dispatch:
- url: "*/favicon.ico"
module: default
- url: "*/api/pharmacies*"
module: pharmacy
- url: "*/docs*"
module: docs
- url: "*/api/feedback*"
module: feedback
- url: "*/googleae8f4bcce8bec00c.html"
module: ownership
- url: "mask-9999.appspot.com/"
module: default
Mask map backend Services

45. # sync by 30 seconds
* 0-15,22-23 * * * ( sleep 1; /root/project/data-broker/run.sh >> /tmp/run.log)
* 0-15,22-23 * * * ( sleep 31; /root/project/data-broker/run.sh >> /tmp/run.log)
#!/bin/bash
TARGET_BUCKET=gs://mask-9999-pharmacies
...
RAW_URL=https://raw.githubusercontent.com/kiang/pharmacies/master/json/points.json
...
echo Job start `date`
echo Pull from github
wget "$RAW_URL?ts=`date +%s`" -O $DATA_PATH
echo ===========================
echo Sync data to GCS...
gsutil cp -r $DATA_PATH $TARGET_BUCKET/points.json
# call hook
echo ===========================
echo Call GAE hook...
curl -X POST https://mask-9999.appspot.com/api/pharmacies/sync_handler
Data broker Cron Job

46. ├── cmd
│ ├── docs
│ ├── feedback
│ ├── ownership
│ └── pharmacy
├── internal
│ ├── app
│ │ ├── docs
│ │ ├── feedback
│ │ └── pharmacy
│ └── pkg
│ ├── errors
│ ├── level
│ ├── postgres
│ ├── responses
│ └── util
├── website
├── Makefile
├── cloudbuild.mask-web.yaml
├── dispatch.yaml
...
Mask backend project layout
go-kit
├── internal
│ ├── app
│ │ └── pharmacy
│ │ ├── endpoints
│ │ │ ├── endpoints.go
│ │ │ ├── middleware.go
│ │ │ ├── requests.go
│ │ │ └── responses.go
│ │ ├── model
│ │ │ └── pharmacy.go
│ │ ├── postgres
│ │ │ └── pharmacy.go
│ │ ├── service
│ │ │ ├── logging.go
│ │ │ ├── service.go
│ │ │ └── version.go
│ │ └── transports
│ │ └── http.go
...

47. steps:
- name: 'gcr.io/cloud-builders/gcloud'
entrypoint: 'bash'
args:
- '-c'
- |
curl -d '{"branchName":"mask-web-release"}' -X POST -H "Content-type: application/json" -H
"Authorization: Bearer $(gcloud config config-helper --format='value(credential.access_token)')"
https://cloudbuild.googleapis.com/v1/projects/mask-9999/triggers/a54e5cb6-e7f4-4e83-a125-1be3d032a
2fb:run
Mask-web cloudbuild.yaml

48. Trips & Tips

49. SELECT *, point($1, $2) <@> point(longitude, latitude)::point as
distance
FROM (select * from %s where longitude >= $3 and longitude <= $4 and
latitude >= $5 and latitude <= $6) as a
ORDER BY distance
limit $7;
CREATE EXTENSION if not exists cube;
CREATE EXTENSION if not exists earthdistance;

50. gcloud sql export csv $CLOUDSQL_INSTANCE $TARGET_BUCKET/feedbacks/`date
--date="-1 day" +%Y_%m%d`.csv --database=ma
sk --query='select o.name, f.description, f.user_id, f.pharmacy_id,
f.created_at from feedback_'`date --date="-1 da
y" +%Y_%m%d`' as f inner join options as o on f.option_id = o.id;'

51. Frontend https://github.com/gdg-twhk/mask-web
Backend https://github.com/gdg-twhk/mask-gae
Mobile App https://github.com/gdg-twhk/mask-app
MaskAoG https://github.com/gdg-twhk/mask-aog
Q & A

52. Thank You!
KAI CHU CHUNG
GDE Cloud
GDG Cloud Taipei co-organizers
@CageChung
https://kaichu.io
Howard Wu
GDG Tainan Organizers
https://www.facebook.com/chanwei.wu
房志剛
GDG Kaohsiung Organizer
https://github.com/abc873693
Kevin Yang
GDE Angular / MVP
GDG Taichung Organizer
Angular Taiwan ex-oranizer
https://blog.kevinyang.net
Ahdaa Yeh
GDG Taipei Organizer
https://mosil.space
Kevin Chiu
GDG Taipei co-Organizer
https://github.com/kevin6449