PHONEGAP Cross-platform applications: healthworking (1)

PHONEGAP Cross-platform applications: healthworking (1)

Healthworking is a cross-platform application based on the HTML5 standard, the advantage of cross-platform can be developed once, deployed on many different platforms, such as iOS, Android, WP and so on. Healthworking's main function is a fitness app that records motion tracks and shares it with social networks.

First, prepare the development environment. Ax

1. Installing Nodejs

: https://nodejs.org/, after installation, open cmd, verify: NPM command

2. Installing PhoneGap

Address: http://phonegap.com/install/

Validation: PhoneGap command

3. Install the Android SDK, Google's resources everyone knows:) Update to the latest

In the environment variable path, increase:

Android_home = C:\SDK\Android\android-sdk

In path, add the following variables:

%android_home%\tools;%android_home%\platform-tools;

Environment variables after the preparation, you can start the work, is not a little excited about it ~ ~ ~

Create a project with PhoneGap:

1. Open CMD,CD to E:\Project\cordova

Cordova Create healthworking com.example.healthyworking healthworking

Cordova Create is the command that creates the project

Healthworking is the directory name of the project

Com.example.healthyworking is the identification of the project

Healthworking is the name of the app

Open the file, you can already see one more item healthworking

2. To add a running platform for the project, this example takes Android as an example, so we run the following command:

CD healthworking

Cordova Platform Add Android

After the run is complete, it looks like this:

3. Make the first page, first look at the look of the page:

In this example, we use jquery Mobile to do the page, and the resources for this example project are given in a later link. For mobile programming, where should we be?

Open the folder where Healthworking is located, like the following file structure:

In most cases, we only need to complete the programming under the WWW folder, the structure of the WWW folder is as follows: (look at the front-end programming is not like it:)

As for the functions of these folders, there is no need to say more. Of course, according to their own needs, add new folders/files

Index.html content is as follows:

<! DOCTYPE html><!--Licensed to the Apache software Foundation (ASF) under one or more contributor license agree  ments.  See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License");  You are not a use of this file except in compliance with the License.  Obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 unless required by applicable or agreed to writing, software distributed under the License are distributed on a "as is" BASIS, without WARRANT  IES or CONDITIONS of any KIND, either express OR implied. See the License for the specific language governing permissions and limitations under the license.-->
Well, it's time to examine the results and see your first PHONEGAP application.
1. Compile, the first compilation time will be longer, need to load the corresponding components

After the compilation is successful

2. Running
Cordova Run Android

Note: This process launches the Android emulator and deploys the app on top. This is why you need to configure the Android SDK in path


OK, you are done! is not very excited, if you configure the environment of WP, you can also deploy the application in the WP emulator, of course, you want to deploy iOS apps, if you have a Mac computer, plus a developer certificate.
You can download the source code here: Https://github.com/byronzoz/healthworking.git

Next, you'll be introduced: PhoneGap through the rest webservice to interact with the external server for login.













PHONEGAP Cross-platform applications: healthworking (1)