※ [本文转录自 Soft_Job 看板 #1O13E3cW ]
作者: Linux (Windows) 看板: Soft_Job
标题: [心得] Firebase 实作 聊天地图 - LiveMaps
时间: Mon Oct 17 10:12:16 2016
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/
以上心得欢迎分享～～