基於Ionic+Cordova+Bmob的開源項目實戰

標籤：

概述

        之前在Ionic+Cordova開發環境搭建一文中講述了Ionic+Cordova的跨平台移動開發架構。其中Cordova可以將開發的Web App打包發布到不同手機平台下，並且提供了豐富的外掛程式來使用手機硬體功能，如Camera、GPS等。但是Cordova只是一個殼，並沒有提供前端的開發架構和UI庫，Ionic很好的彌補了這一點。Ionic提供了豐富的UI控制項和基於AngularJS的MVC開發架構。之後又在使用Bmob為你的行動裝置 App提供資料服務一文中講述了如何使用Bmob雲端服務平台來為開發的行動裝置 App提供資料服務，免去服務端開發的痛苦，使你專註於行動裝置 App的開發。

         現在打算將這三者結合起來，實現一個位置分享的App，供自己練手也方便大家互相學習。

一、需求分析

“位置分享”App正如其名稱所述那樣，是一款可以分享自己地理位置的應用。“位置分享”App的功能需求大致如下：

         1、可以擷取自己的當前位置，並在地圖中展示出來；

         2、可以將自己的位置資訊發送到雲端資料庫儲存；

         3、可以導航到目標使用者的所在位置；註：目標使用者必須是註冊過的使用者，而且對方發送過自己的位置資訊到雲端。這兩點很重要，一是直接導航到任何一個使用者是不可能的，除非你是FBI(呵呵)。二是如果想導航到註冊的任何一個使用者，除非app定時自動發送位置資訊到雲端，這點實現起來比較複雜，而且與我們的主題Ionic+Cordova+Bmob無關，因此就不搞這麼複雜。

         4、可以查看某使用者的曆史足跡，並在地圖中標出；註：前提是對方發送過自己的位置資訊到雲端資料庫。

         5、基本的註冊、登入、登出和個人資訊查看功能。

          因此，系統總體功能結構圖如下所示：

系統比較簡單，使用案例圖就不分層了，直接上詳細的系統使用案例圖，如所示：

二、系統設計1、後端資料服務提供

            正如前面所述，系統後端採用了Bmob雲端服務平台來提供資料。主要有_Uer、positon、positionHistory三張表，表結構如下：

_User表：

_User表是系統內建的表，唯一鍵是電話號碼，我們使用電話號碼作為登入帳號。使用電話號碼作為帳號，是考慮到要導航到目標使用者，只需要輸入對方電話號碼即可。_User表需要自己再根據業務添加一些欄位如：expired(是否到期)、expiredtime(到期時間)。

position表：

使用者當前位置表，存放著每個使用者當前的位置資訊。objectId是系統自行建立的，類似於序號。唯一鍵是電話號碼，也就是說這張表只儲存使用者的當前位置資訊。曆史位置資訊放在positionHistory表中。

positionHistory表：

使用者曆史位置表，存放著使用者每次發送到雲端的位置資訊。主鍵是objectId，為系統自行建立。

從表結構的設計可以看到，業務資料十分簡單，主要是使用者表和位置表。其中位置表分為當前位置表和曆史位置表，這麼劃分是為了圖方便，導航時就查詢position表，查詢曆史足跡是就查詢positionHistory表。

 2、位置資料擷取、展示以及導航

        位置資訊擷取很方便，Cordova有geolocation外掛程式可供我們使用，它使用GPS或者移動網路對使用者進行定位，然後返回經緯度座標。

        對於將經緯度座標通過地圖展示則通過百度LBS雲平台的URI API來實現。請求的地址如下：

http://api.map.baidu.com/geocoder?參數設定

具體的參數設定請查看百度URI API介面說明中的逆向位址解析一項。

         曆史足跡的展示需要在地圖上標註多個點，由於百度URI API只能標註一個點，因此轉向了高德地圖 URI API。請求的地址如下：

http://api.map.baidu.com/geocoder?參數設定

具體參數設定請查看高德地圖URI API 介面說明中的多位置點介面一項。

        導航功能也是通過百度 URI API來實現的，它可以調用百度網頁地圖，然後展示路徑規劃和啟用導航。請求的地址如下：

http://m.amap.com/?mk=參數設定

具體的參數設定請查看百度URI API介面說明中的 公交、駕車、步行導航一項。

3、使用者認證和管理

       這裡的使用者認證十分簡單。使用者輸入帳號密碼後，系統在雲端查詢使用者，如果查詢不到，則提示使用者不存在。否則再次匹配密碼，密碼匹配不成功，則提示使用者名稱或密碼錯誤。否則在用戶端設定變數isLogin=true。表示使用者已經登入。使用者認證既沒有設定cookie、逾時登出、也沒有修改密碼等模組，做的十分簡陋。因為安全是一個比較大的話題，要做好必須下功夫。大家可以自行完善。

4、前端移動開發

      通過Bmob在雲端為我們提供資料服務，通過百度LBS為我們的位置展示、導航提供支援人員。接下來我們就可以專註於移動端的開發了。

4.1  項目結構

       首先通過Ionic或者cordova建立一個空的工程LocationShare，把geolocation外掛程式安裝好。然後通過Ionic Creator建立資源套件工程，不需要做介面開發，直接匯出後用它替換掉LocationShare工程根目錄下的www目錄。之後在Bmob官網上下載JS SDK，把它放入lib目錄中。最後通過WebStorm開啟www目錄就可以進行項目的開發了。項目結構如所示：

CSS：   項目用到的CSS檔案都放在這個目錄中。

  img：  項目用到的圖片都放在這個目錄。

     js：  存放js檔案，包括app.js、控制器、服務、過濾器等等。

    lib：   庫檔案，主要是bmob庫，ionic兩個庫。其中bmob需要手動添加，ionic是通過creator建立資源套件工程時，自動添加進來的。

template：所有的視圖都放在該檔案夾下。

index.html：首頁，所有的js檔案，庫引用都在這裡進行引用。

4.2 js檔案引用及庫的初始化

      js檔案引用都放在了index.html頁面中的head，除了自動添加的引用之外，我們還需要手動加入bmob庫的引用，如下所示：

<!-- bmob script (javacript SDK) --><script src="lib/bmob/bmob-min.js"></script>

然後在app.js中對其進行初始化：

//初始化Bmob SDK，開發人員需要申請自己ID和KeyBmob.initialize("你的Application ID", "你的REST API Key");

上述代碼可以放在run方法裡面。

4.3  頁面導航

所有的頁面都放在template檔案夾下，頁面之間的關係如所示：

頁面之間的導航基於AngularJS的ui-router模組，具體代碼就不貼了。

4.4  其它重要代碼說明1、位置資訊擷取

      位置資訊通過geolocation外掛程式擷取，具體代碼如下：

navigator.geolocation.getCurrentPosition(geolocationSuccess,//擷取位置座標    geolocationError,    _geolocationOptions);

方法的參數詳細資料請參考cordova-plugin-geolocation外掛程式說明。

2、發送位置資訊到雲端和擷取雲端資料

      和雲端資料庫的互動都需要bmob的js SDK，具體的增刪改查可以去官方文檔上查看。代碼比較長，這裡就不貼了。更詳細的資訊在原始碼裡都有注釋，應該能看懂。

三、系統

                                          

四、項目地址

       項目目前放在CSDN上面，地址如下：位置分享APP項目源碼。

基於Ionic+Cordova+Bmob的開源項目實戰