Here's how to use Cordova to create your first app. It may seem hard to you at first but as you use it more often, things will get easier.
The instructions are for Windows (and tested in Windows 7) and written for Android in mind. But you can use the same principles to adopt to other platform SDKs.
A. ONE TIME SETUP:
Create a folder D:\android
Install these 3:
1. Java JDK latest version. (Download here)
2. Android Studio/SDK. (Download here) Install the file and keep the SDK in D:\android\sdk
 |
| Installing the Android SDK in the proper place |
3. Apache Ant. (Download here) Extract & Keep it in D:\android\ant
Set Path
Right click on Computer icon and click Properties. Then go to Advanced System Settings -> Advanced -> System Variables.
Under System Variables, click New and add the following variable:
ANT_HOME = D:\android\ant
Add another:
JAVA_HOME = C:\Program Files\Java\jdk1.8.0_92
(I have installed JDK 8 u92. Modify the path according to your installation.)
Add another for SDK:
ANDROID_HOME = D:\android\sdk
Then Select the item named "Path" and click Edit. We would add some path to the value of the Path Variable. We would put semicolon (;) between each path and also at the beginning. So add these path AFTER the existing value. (DON'T EVEN TOUCH THE OTHER VALUES. IT CAN DAMAGE YOUR SYSTEM.)
;C:\Program Files\Java\jdk1.8.0_92\bin;D:\android\ant\bin;D:\android\sdk\tools;D:\android\sdk\platform-tools
(Change any value if needed. Especially the JDK one.)
This step is very important!! Check if all the paths that you have added/edited does exist and are correct. If you cannot ensure that then you can be quite sure that the build process won't succeed.
Prepping the Android SDK
- Run D:\android\sdk\SDK Manager.exe.
- Make sure you check "Android SDK Platform-tools" and the latest version of "Android SDK Build-tools".
- We need to install an Android version's SDK platform in order to build and test for it. (Cordova usually requires the latest version. If not, you will get an error message while adding Android platform to the project -- which we discuss later on.) At this time of writing the latest is Android 6.0 (API 23). To avoid downloading unnecessary things, unselect all the "Android X.X" entries, unselect everything under the Android x.x, select "SDK platform" and "ARM EABI v7a System Image".
- From the Extras select "Android Support Library/Repository" and "Google USB Driver"
Installing Cordova
To install cordova follow these steps:
- Download Node.js installation file (.msi). Install it. Restart the computer.
- Now go to Start, type cmd press enter.
- Now run the command:
npm install -g cordova
It will take some time. Give it some time and Cordova will be installed.
AVD Setup for Android Emulator
This is needed to test the app directly on your computer, without having any mobile device.
Start D:\android\sdk\AVD Manager.exe
Click "Create..."
Give it a name - for example, Test
Choose a Device (for example, Nexus S)
Choose the target you installed
Choose Skin as No skin
Click OK
It will show the details of the newly created AVD. Click OK.
 |
| AVD Manager |
Now, to launch the emulator, select the Test AVD and click "Start...". A window will appear. Make sure that "Scale display to real size" is checked. This will appropriately resize the emulator for your monitor. You may change the values as you wish. Then click Launch.
Starting the AVD is a slow process. So we can keep this loading until our next steps get working.
Emulator is super slow. To speed up the Emulator, you can use instructions here to run the x86 Atom Image that should be 10x faster.
If the emulator is not working for you, there is an option to emulate directly to a connected device using cordova run android (which is later mentioned).
B. Creating Project:
Now that the one time setup is complete you can continue with the project creation for your app:- Create a folder to hold the project files (for example, d:\mobile)
- cd to the folder where you want your project will be created. (You won't need to create the project folder yet. Cordova will automatically create it.)
cd /D d:\mobile
(Usually the Command Prompt starts with C:\ drive as active. If we haven't typed the /D switch then we would have to type D: and press enter. We simply avoid writing another command.)
- Now we will create the project with Cordova (change command if you want):
cordova create hello com.example.hello HelloWorld
The above command will create a folder named hello and place all the project files inside it. The app will have a namespace of com.example.hello. You can change it to something like com.johndoe.hello, it is up to you. The app will be titled "HelloWorld" (you can change it if you want). If you have a space in the app name then use double quotes (" ").
- cd to the project directory (assuming you have a project folder "hello"):
cd hello
- Add the platform you want. For example, if you want android, run:
cordova platform add android
(If you get error messages while installing Android platform, maybe the Android version you downloaded in the SDK Manager wasn't appropriate, or there might be another reason. Just analyze the error message. But normally, you shouldn't have an error message anyways.)
 |
| Creating a Cordova Project for Android platform using cmd |
This is optional. Add other platforms, like following:
cordova platform add wp7
cordova platform add wp8
cordova platform add windows8
cordova platform add amazon-fireos
cordova platform add blackberry10
cordova platform add firefoxos
(You will have to have the SDK for the corresponding OS. In this article we have only installed the SDK for Android platform.)
You can run the following to see which platforms you have installed for the project:
cordova platforms ls
To remove a platform, you may use:
cordova platform remove blackberry10
(To remove blackberry10 platform.)
Now get your creative juices flowing and start coding your app. The app source code resides in www directory under your project directory.
- To build the project, run:
cordova build android
 |
| Output of a successful build of a Cordova Project |
If the build fails, there is a possibility that you haven't set the system paths correctly. Otherwise, check the error message to see what is wrong and correct it.
- To run the project and test the App, run:
cordova emulate android
If you want to test the app in a handset/device connected to your computer, you can run:
cordova run android
(For Amazon Fire OS and Android devices, USB Debugging must be enabled from the device.)
Ref:
http://docs.phonegap.com/en/3.5.0/guide_cli_index.md.html
No comments:
Post a Comment