在 Google 地圖上大喊：「我上新聞了！」
===

###### tags: `2017`, `R3`

##### 位置: R3

##### 講者: [吳政賢(OA)](https://goo.gl/24gF4v)

{%slideshare 貼這裡xxxx/yyyy %}

---
[TOC]
* 投影片
* [Apple keynote 版本](https://cdn.ioa.tw/mopcon2017/mopcon.key)
* [Microsoft PowerPoint 版本](https://cdn.ioa.tw/mopcon2017/mopcon.pptx)
* [Microsoft PowerPoint 2003 之前版本](https://cdn.ioa.tw/mopcon2017/mopcon.ppt)
* [PDF 版本](https://cdn.ioa.tw/mopcon2017/mopcon.pdt)
* [線上網頁版](https://cdn.ioa.tw/mopcon2017/html/index.html)

## 講者自介
* [OA Wu](https://goo.gl/24gF4v) 的 [GitHub](https://github.com/comdan66)
* 終於看到 [LiveCoding.tw](https://www.livecoding.tw/) 本人了!!
* [LiveCoding.tw](https://goo.gl/jpfsPo) Youtube 頻道

## 開發Google map的經驗與問題

**媽祖繞境 GPS 定位**
最主要是大量request的衝擊。

## 媽祖遶境
原因：喜歡家鄉，避免神轎不見，信徒打開網頁即可看見白沙屯媽祖遶境的現在位置

[2017 白沙屯媽祖 GPS 即時定位](http://www.godroad.tw/baishatun/2017/index.html)

使用AWS服務
* EC2 雲端虛擬主機
* S3 很大的空間，放靜態頁面
* RDS 關連式資料庫
* lambda （run js作者沒用）

- 最初架構(常見模式)
- Amazon Ec2
- smart phone 當作 gps traGcker
- GPS 定時回報給 server
- 固定一段時間回傳位置訊息
- 問題:
- 活動很多人開這個網頁，ec2 就衝破了
- 網頁 Loading 好久
- 到900人，requset 開太大時就這樣 流量太大，撐不住。
- 第一次修改
- 做 cache
- 路徑做成 .json 檔
- request 近來直接讀 json
-
- 第二次修改
- 使用 Amazon S3
- Ajax 改去 S3 取得路徑資料
- 去年可以撐到1904左右的人
- 今年可以撐到4500左右的人(還是很快3s開頁面)

## 天氣地圖

[天氣地圖](https://works.ioa.tw/weather/index.html)

就是前端作品
`+` 就是用 local storage 做的
最重要的就是有 open source
可以用 app 串, 也有串 api 的文件

- 最初架構
- EC2
- 幾個狀況
- seo 不優
- ec2 在大量使用者開啟時，還是會高併發
- 調整架構
- 資料整理成各鄉鎮的 html
- 可以改善 seo
- 放在s3(不怕高併發)
- 網址中文，提高 seo
- 心得
- 前端開啟網頁不用進 Ec2
- 直接去s3取得 build 好的 html
- 針對不同縣市做 SEO
- 加上 Amazon Cloudfront CDN
- Certifivare Manaer

## 聊天地圖

[聊天地圖](https://livemaps.ioa.tw/index.html)

如果用 ajax 就爆了。

- 動機與架構
- Google Maps
- geolocal api
- web socket
- google firebase
- 串 oath
- database (key:value) (類似 MongoDB)
- json format
- rules
- storage (linke s3，放圖檔)
- hosting (佈署)提供一個 https 的服務
- Notifications(for app 推播)
- Firebase DATABASE
- 格式 - Json
- 權限 - Rules
- 登入 - Authentication
- 即時更新 - Realtime

- 架構
- 不用自幹後端(用 firebase)
- 設定好Database Json format
- 設定 db rules
- 專心寫前端(JavaScript)吧~~~
- 程式架構
- HTML
- JavaScript、JQuery
- CSS、SCSS
- Gulp
- Geolocation API