[心得] Firebase 實作 聊天地圖 - LiveMaps

[Linux (Windows)]

Hi 各位大大們早安！

今天來分享一個使用 WebSocket 的應用作品，這主要是架構在 Firebase 的應用！



DEMO：https://livemaps.ioa.tw/



LiveMaps 是一個即時地圖聊天室，讓你在世界上任何位置都可以發出自己的感想動態

這也是一個純前端技術的網站

仰賴 Firebase 的 Realtime 的特性，並且用於 Google Maps 上

讓使用者的定位可以即時分享，同時間也可以發佈動態！

現階段只是初樣的 Prototype

之後會加入 個人聊天室、上傳照片、Mobile App 等功能！

GitHub：https://github.com/comdan66/livemaps/



基本的 Google Maps JavaScript API 的應用這邊就不多介紹了，

這次的練習主要著重在 Firebase 的應用，藉由 Hosting 來取得 Https 的協定

然後在建立起專案，並且利用 Realtime Database 來實作即時性的功能。



Firebase 的 Hosting 可以將自己的 Domain 用 CNAME、A 記錄指向過來

使得專案擁有自己客製化的 Domain/Sub Domain 並且是 Https 的協定

而 Hosting 功能在 Firebase 的操作上並不會太困難

只要依照其所顯示的步驟驗證完網域所有權後即可完成。



Realtime Database 是項 Firebase 儲存資料的服務，他是以 JSON 的方式

用 key-value 方式儲存，用過 NoSQL 的朋友或許會比較適應這樣的 Database

因為儲存格式是 JSON 的關係

所以在一開始的設計就不能以關聯式資料庫的思維角度下去設計囉。



CRUD 的基本功能撰寫這邊也不做介紹，基本上官網都有範例以及說明囉

其中包含了 iOS、Android、JavaScript 的支援，所以更可以製作成 Mobile App

而下一階段我也將考量使用 iOS 來實作一次 LiveMaps。



官方資源也不僅於 Sample，在官方 GitHub 也可以看到多樣的 Library

其中常見的 firebaseui-web、GEO.. 等

服務都是由官方維護的，所以在家接功能上會更加方便。



以網頁版來說，登入系統可以由 firebaseui-web 來串接

在地圖上更可以用 geofire-js 來實作，geofire 就有豐富的經緯度範圍運算

可以快速的撈出範圍內的點，不過對於 Database 的 JSON 格式架構就要符合其規範

第一版的 LiveMaps 就是使用 geofire 實作，但是因為功能需求，所以暫時先捨棄


而 firebaseui 提供了各種不同的 OAuth 登入，

可以配合 Authentication 製作登入系統

不過在第二版製作時也暫時拿掉，主要是因為想加快登入時間問題

所以暫時只使用 Facebook 的 SDK 實作 OAuth 登入。



網頁的定位方式，是採用 navigator.geolocation 的 watchPosition

取得使用者瀏覽器裝置位置，因為 Firebase 提供了 Https 的服務

故在 Chrome 瀏覽器上就可以取得使用者位置

而且使用了 watchPosition 並且搭配使用 enableHighAccuracy

所以取的的位置會較為精準

但也可能會有誤差值，故使用上可能會有使用者發生位置不正確的狀況

待下一版本解決。


更多實作心得：https://livemaps.ioa.tw/about.html

更多作品：http://www.ioa.tw/


以上心得歡迎分享～～

--


--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 123.51.221.44
※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1476670339.A.9A0.html
→ ckvir: 手機一直出現初始化不能用
推 davy123498: 有趣
→ shinrenpan: 我記得當初不用 firebase 因為收費太貴了, google
→ shinrenpan: 收購後不知道有沒較便宜
推 SmallDruid: 推一個
推 qq1217: 推
→ b12031106: Firebase has reached its Peak Connections limit
→ carbeso: 好多人線上幫忙壓測了 XD
→ pooznn: 免費的只有100個連線數 想靠這服務做APP賺錢的勢必要付費
→ shinrenpan: 用 Free MQTT server 就好
推 kanx: so cool.
推 h5904098: 好有趣喔!
推 sameil: 這id有點猛
→ alog: Fire base 付費還好吧 東西如果上線了爆量 光scale跟調校、l
→ alog: atency的成本跟時間 你有把握壓的比他低嗎
推 yuanyu90221: 推
推 rexhuang: 讚~~
推 now99: 可以在上面把妹了
→ angusyu: 徵到要去當兵的老婆
推 rollr: 這 ID ！
推 matthewka: 推
推 penolove: 推ID
推 sunsamy: 這個idea很棒!
推 ousapas: cool
推 bakedgrass: 你現在有在工作嗎？覺得你是前端的人才耶
推 followmeyo: 這會紅
推 k7741118: Cool
推 femlro: 剛剛連線超過一分鐘以上還沒連上@@
推 ken0110xx: 推XD
推 chter: 幫測bug
推 Jasonzheng: 推
推 VisualStudio: 推
推 zerofinal: 推
推 makemyday: 推 感覺可以用在附近地區互相支援
推 heuristics: 推
推 sasoman: 推 好有趣
推 dali17dali17: 推ID推firebase
推 ID3238: 推