Open source project based on Ionic+cordova+bmob

Overview

The cross-platform mobile development framework of Ionic+cordova was described in the Ionic+cordova development environment Building article. Cordova Web App can be packaged and distributed to different mobile platforms, and provides a rich set of plug-in to use mobile phone hardware features, such as camera, GPS and so on. But Cordova is just a shell, and does not provide a front-end development framework and UI Library, Ionic is a good remedy for this. Ionic provides rich UI controls and an ANGULARJS-based MVC development Framework. Then, using Bmob to provide data services for your mobile app, the article describes how to use the Bmob cloud service platform to provide data services for mobile applications that you develop, eliminating the pain of server-side development and allowing you to focus on the development of mobile applications.

Now intends to combine these three, to achieve a location to share the app for their own practiced hand is also convenient for everyone to learn from each other.

First, demand analysis

The location sharing app, as its name describes, is an app that can share its geographic location. The functional requirements for the "location sharing" app are as follows:

1, can get their current position, and displayed in the map;

2, can send their location information to the cloud database to save;

3, can navigate to the target user's location; Note: The target user must be a registered user, and the other person sends their location information to the cloud. These two points are important, one is the direct navigation to any one user is impossible, unless you are the FBI (hehe). Second, if you want to navigate to any registered user, unless the app automatically sends location information to the cloud in a timed way, it's more complex and irrelevant to our theme Ionic+cordova+bmob, so it's not so complicated.

4, can see a user's historical footprints, and in the map, note: If the other side sent their location information to the cloud database.

5, basic registration, login, logout and personal information viewing function.

Therefore, the overall system function structure diagram is as follows:

The system is relatively simple, the use case diagram is not layered, directly on the detailed system use case diagram, as shown in:

Second, system design 1, back-end data services provided

As mentioned earlier, the system backend uses the Bmob cloud service platform to provide data. The main _uer, Positon, positionhistory three tables, the table structure is as follows:

_user table:

_user table is the system comes with the table, the unique key is the telephone number, we use the telephone number as the login account. Using the phone number as the account, is to be able to navigate to the target user, only need to enter the other phone number. The _user table needs to add some fields to the business by itself, such as expired (whether it expires), ExpiredTime (Expiration Time).

Position table:

The user's current location table, which holds the current location information for each user. Objectid is created by the system itself, similar to the serial number. The unique key is the phone number, which means that the table only holds the user's current location information. Historical location information is placed in the Positionhistory table.

Positionhistory table:

A User History location table that holds the location information each time a user sends to the cloud. The primary key is Objectid, which is created for the system itself.

From the table structure design can be seen, business data is very simple, mainly the user table and location table. Where the position table is divided into the current position table and the historical location table, so the partition is convenient for the diagram, the query position table when navigating, query the historical footprint is to query the Positionhistory table.

2. Location data acquisition, display and navigation

Location information is very convenient, Cordova has geolocation plug-in for us to use, it uses GPS or mobile network to locate the user, and then return latitude and longitude coordinates.

For the latitude and longitude coordinates through the map display through the Baidu lbs cloud Platform URI API to achieve. The requested address is as follows:

HTTP://api.map.baidu.com/geocoder? parameter settings

Specific parameter settings Please see the Baidu URI API interface description of the reverse address resolution .

The historical footprints need to be labeled with multiple points on the map, and since the Baidu URI API can only mark one point, it turns to the gold map URI API. The requested address is as follows:

HTTP://api.map.baidu.com/geocoder? parameter settings

For specific parameter settings, see the Multi-point interface in the description of the German map Uri API.

Navigation function is also through the Baidu URI API to achieve, it can call Baidu Web map, and then show path planning and enable navigation. The requested address is as follows:

HTTP://m.amap.com/?mk= parameter Settings

For specific parameter settings, please see the Baidu URI API interface description bus, drive, walk navigationAn item.

3. User authentication and management

The user authentication here is very simple. After the user enters the account password, the system queries the user in the cloud, if the query is not available, prompts the user not to exist. If you do not match the password again and the password match is unsuccessful, the user name or password is incorrect. Otherwise, the variable islogin=true is set on the client. Indicates that the user is logged on. User authentication Neither set a cookie, timed out, or modified the password module, do very simple. Because security is a relatively big topic, we must work hard to do well. We can improve ourselves.

4. Front-end mobile development

Through the bmob in the cloud to provide us with data services, through the Baidu lbs for our location display, navigation to provide technical support. Then we can focus on the development of the mobile side.

4.1 Project Structure

First create an empty project Locationshare by Ionic or Cordova, and install the geolocation plug-in. Then through the Ionic creator to create a resource package project, do not need to do interface development, direct export and replace the Locationshare project root directory under the WWW directory. Then download the JS SDK on the Bmob website and put it into the Lib directory. Finally, the project can be developed by opening the WWW directory with webstorm. The project structure looks like this:

CSS: The CSS files used in the project are placed in this directory.

IMG: All images used in the project are placed in this directory.

JS: Store js file, including App.js, controller, service, filter and so on.

LIB: library file, mainly Bmob library, ionic two libraries. Where Bmob needs to be added manually, ionic is automatically added when a resource bundle project is created through creator.

Template: All views are placed under this folder.

Index.html: Home, all JS files, library references are referenced here.

4.2 JS file Reference and initialization of the library

JS file references are placed in the head of the index.html page, in addition to the automatically added references, we also need to manually add a reference to the Bmob library, as follows:

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

It is then initialized in App.js:

// Initialize b Mob SDK , developers need to apply for their ID and the Key Bmob. Initialize (" your application ID"" your REST API Key") ;

The above code can be placed inside the Run method.

4.3 page navigation

All the pages are placed under the template folder, and the relationship between the pages is as follows:

The navigation between pages is based on the Angularjs Ui-router module, which is not affixed to the specific code.

4.4 Other important Code Description 1, Location information access

The location information is obtained through the geolocation plugin, with the following code:

Navigator. geolocation. GetCurrentPosition (geolocationsuccess,// get position coordinates      geolocationerror, _geolocationoptions) ;     

For more information on the parameters of the method, refer to the Cordova-plugin-geolocation plugin description.

2. Send location information to the cloud and get cloud data

and cloud database interaction need Bmob JS SDK, specific additions and deletions can go to the official documents to view. The code is long and it's not posted here. More detailed information in the source code has comments, should be able to read.

Third, the system

Iv. Address of the project

The project is currently on the CSDN, the address is as follows: Location sharing app project source code.

Open source project based on Ionic+cordova+bmob