Open-source project practice based on Ionic + Cordova + Bmob

Open-source project practice based on Ionic + Cordova + Bmob
I. Requirement Analysis

As described in its name, the location sharing App is an application that shares its own geographical location. The functional requirements of the "location sharing" App are as follows:

1. You can obtain your current location and display it on the map;

2. You can send your location information to apsaradb for redis for storage;

3. You can navigate to the target user's location. Note: The target user must be a registered user, and the target user has sent his/her location information to the cloud. These two points are very important. First, it is impossible to directly navigate to any user, unless you are an FBI ). Second, if you want to navigate to any registered user, unless the app regularly sends location information to the cloud, this implementation is complicated and irrelevant to our topic Ionic + Cordova + Bmob, so it is not that complicated.

4. You can view the historical footprint of a user and mark it on the map. Note: The other user must have sent his or her location information to the cloud database.

5. Basic registration, logon, logout, and personal information viewing functions.

Therefore, the overall functional structure of the system is as follows:

The system is relatively simple, and the use case diagram is not layered. The detailed system use case diagram is displayed, as shown in:

Ii. System Design 1. backend data service provision

As described above, the system backend uses the Bmob cloud service platform to provide data. There are three tables, namely _ Uer, positon, and positionHistory. The table structure is as follows:

_ User table:

The _ User table is a built-in table and the unique key is the phone number. We use the phone number as the Logon account. To use the phone number as an account, you only need to enter the phone number of the recipient to navigate to the target user. The _ User table needs to add fields such as expired and expiredtime based on the business ).

Position table:

The current user location table stores the current location information of each user. ObjectId is created by the system, similar to the serial number. The unique key is the phone number. That is to say, this table only stores the user's current location information. The historical location information is stored in the positionHistory table.

PositionHistory table:

The historical user location table stores the location information that the user sends to the cloud each time. The primary key is objectId, which is created by the system.

From the table structure design, we can see that business data is very simple, mainly user tables and location tables. The location table can be divided into the current location table and the Historical Location table. This division is for the convenience of graphs. When you navigate to the position table, you can query the historical footprint of the positionHistory table.

2. Location Data Acquisition, display, and navigation

Location Information is easy to obtain. Cordova has a geolocation plug-in for us to use. It uses GPS or mobile networks to locate users and then returns the longitude and latitude coordinates.

You can use the uri api of the Baidu LBS cloud platform to display longitude and latitude coordinates by map. The request address is as follows:

Http://api.map.baidu.com/geocoder? Parameter settings

The historical footprint must be displayed with multiple points on the map. Because Baidu uri api can only mark one point, it turns to the amap uri api. The request address is as follows:

 

Http://api.map.baidu.com/geocoder? Parameter settings

The navigation function is also implemented through the Baidu uri api. It can call the Baidu web page map, then display the path planning and enable navigation. The request address is as follows:

Http://m.amap.com /? Mk = parameter settings.

3. User Authentication and Management

Here, user authentication is very simple. After the user enters the account password, the system queries the user on the cloud. If the user cannot be queried, the system prompts that the user does not exist. Otherwise, the password is matched again. If the password does not match successfully, the user name or password is incorrect. Otherwise, set isLogin = true on the client. Indicates that the user has logged on. The user authentication module does not set cookies, timed out logout, or modify passwords, and is very simple. Because security is a big topic, it is necessary to do a good job. You can complete it on your own.

4. frontend mobile development

Bmob provides data services on the cloud, and Baidu LBS provides technical support for location display and navigation. Next we can focus on mobile development.

4.1 project structure

First, create an empty project LocationShare through Ionic or cordova and install the geolocation plug-in. Then, you can use Ionic Creator to create a resource package project. You do not need to perform interface development. You can export the project directly and use it to replace the www directory under the root directory of the LocationShare project. Then download the js sdk on the Bmob official website and put it into the lib directory. Finally, open the www directory through WebStorm to develop the project. Shows the project structure:

CSS: the CSS files used by the project are stored in this directory.

Img: The images used by the project are stored in this directory.

Js: stores js files, including app. js, controllers, services, and filters.

Lib: library file, mainly bmob library and ionic library. Bmob needs to be manually added. ionic is automatically added when a resource package project is created through creator.

Template: all views are stored in this folder.

Index.html: Home Page. All js files and library references are referenced here.

4.2 js file reference and library Initialization

The JS file reference is stored in the head on the index.html page. In addition to the automatically added reference, we also need to manually add the reference to the bmob library, as shown below: <script src = "lib/bmob/bmob-min.js"> </script>

Then initialize it in app. js:

// Initialize the Bmob SDK. developers need to apply for their ID and Key Bmob. initialize ("Your Application ID", "your rest api Key ");

The above code can be placed in the run method. 4.3 page navigation

All pages are placed in the template folder. The relationship between pages is shown in:

The navigation between pages is based on the AngularJS ui-router module, and the specific code is not pasted.

4.4 Other important code description 1. Location Information Retrieval

The location information is obtained through the geolocation plug-in. The specific code is as follows:

Navigator. geolocation. getCurrentPosition (geolocationSuccess, // obtain the Location Coordinate geolocationError, _ geolocationOptions );

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

Interaction with cloud databases requires bmob's js SDK. For details about addition, deletion, modification, and query, refer to the official documentation. The code is long and will not be pasted here. More detailed information is annotated in the source code and should be understandable.

Iii. System