※ [本文转录自 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/ 以上心得欢迎分享～～ -- --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 123.51.221.44 ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Soft_Job/M.1476670339.A.9A0.html

※ 发信站: 批踢踢实业坊(ptt.cc) ※ 转录者: Linux (123.51.221.44), 10/17/2016 10:12:31