COSCUP 2020 Google 技術 x 公共參與 x 開源 口罩地圖技術開源
0 likes•176 views
The document outlines the organization and development of the Mask Map project involving various GDG (Google Developer Groups) members across Taiwan. It includes details on project management, technical selection, development timelines, and issues encountered, particularly with backend and mobile app components. Key principles emphasized are effective team management, technical simplification, and the importance of responsive communication.
COSCUP 2020 Google 技術 x 公共參與 x 開源 口罩地圖技術開源
- 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
- 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
- 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