聊天地圖 LiveMaps LiveMaps 是一個即時地圖聊天室,讓你在世界上任何位置都可以發出自己的感想動態。每個人都可以在地圖分享著她在世界各地、城市角落的心情寫照,網站藉由 Google 所提供的 Firebase 的 Realtime Database 以及 Google Maps JavaScript API 免費服務實作。 聊天地圖也是一個純前端技術的網站,仰賴 Fireb…

聊天地圖 LiveMaps

LiveMaps 是一個即時地圖聊天室,讓你在世界上任何位置都可以發出自己的感想動態。每個人都可以在地圖分享著她在世界各地、城市角落的心情寫照,網站藉由 Google 所提供的 FirebaseRealtime Database 以及 Google Maps JavaScript API 免費服務實作。

聊天地圖也是一個純前端技術的網站,仰賴 Firebase 的 Realtime 的特性,並且用於 Google Maps 上,讓使用者的定位可以即時分享,同時間也可以發佈動態;現階段只是初樣的 Prototype,之後會加入 個人聊天室上傳照片Mobile App 等功能!

基本的 Google Maps JavaScript API 的應用這邊就不多介紹了,這次的練習主要著重在 Firebase 的應用,藉由 Hosting 來取得 Https 的協定,然後在建立起專案,並且利用 Realtime Database 來實作即時性的功能。

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

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-webGEO.. 等,服務都是由官方維護的,所以在家接功能上會更加方便。

以網頁版來說,登入系統可以由 firebaseui-web 來串接,在地圖上更可以用 geofire-js 來實作,geofire 就有豐富的經緯度範圍運算,可以快速的撈出範圍內的點,不過對於 Database 的 JSON 格式架構就要符合其規範,第一版的 LiveMaps 就是使用 geofire 實作,但是因為功能需求,所以暫時先捨棄;而 firebaseui 提供了各種不同的 OAuth 登入,可以配合 Authentication 製作登入系統,不過在第二版製作時也暫時拿掉,主要是因為想加快登入時間問題,所以暫時只使用 Facebook 的 SDK 實作 OAuth 登入。

網頁的定位方式,是採用 navigator.geolocationwatchPosition 取得使用者瀏覽器裝置位置,因為 Firebase 提供了 Https 的服務,故在 Chrome 瀏覽器上就可以取得使用者位置,而且使用了 watchPosition 並且搭配使用 enableHighAccuracy,所以取的的位置會較為精準,但也可能會有誤差值,故使用上可能會有使用者發生位置不正確的狀況,待下一版本解決。

相關參考

2019 白沙屯媽祖南下進香 GPS 系統 - OA Wu's Blog
2019 白沙屯媽祖南下進香 GPS 系統
2019 白沙屯媽祖南下進香 GPS 系統2019 白沙屯媽祖南下進香 GPS 系統 因為每年我都會協助幫忙準備這個「白沙屯媽祖南下進香」的活動,所以今年我也在準備著,一年一次,這個專案每年這時候都會啟動,常常有人會問我,不就是把去年的資料庫清空就好了嗎? 不!因為每一年,在我的技術上都是在進步,於是回頭看去年,總會有哪麼一點點不完美的地方,執著的工…
用 jQuery 做一套遊戲 - OA Wu's Blog
用 jQuery 做一套遊戲
用 jQuery 做一套遊戲用 jQuery 做一套遊戲 大學期間學習網頁開發過程中,總是會有一些有趣的靈感,而我總是喜歡使用我所會的語言工具,去將想法實現出來,而使用 jQuery 製作遊戲也是我的一項小小里程碑。 這作品相信大家會有似曾相似感,靈感來自於 Nintendo 的一款遊戲,叫做 Pokémon,當初構想曾有過大至商城化、地圖化劇情,但由於多項因…
實作 jQuery imgLiquid 套件 - OA Wu's Blog
實作 jQuery imgLiquid 套件
實作 jQuery imgLiquid 套件實作 jQuery imgLiquid 套件 imgLiquid 是一個處理前端圖片置中的 jQuery Extend Function,其中參考了 imgLiquid,但其架構與做法不大相同。 此作品雖然與 imgLiquid 功能一樣,但是做法不同,前者將 設定成隱藏,在取出其圖片網址後設定在該 父元素的 Style,而我的這次要實作的雖然目的相同,但做法則不一樣。 首先需要…
實作 jQuery scrollSliderView 套件 - OA Wu's Blog
實作 jQuery scrollSliderView 套件
實作 jQuery scrollSliderView 套件實作 jQuery scrollSliderView 套件 OA-scrollSliderView 這是一個前端 jQuery Extend Function,主要架構於 jQuery,此版本是支援 Responsive Web Design(RWD) 的頁面。 相關參考 Live Demo GitHub 原始碼
吳政賢 個人簡歷 OA Wu LiveCoding.tw