My First App in Apache Cordova
Now its time to do some coding. In this exercise I'm going to create a simple application to manage tasks like reminders and alarms. Its going to be part of The Chamber Project and probably will be a temporary system while I can find a fast and powerful language that can run in most mobile platforms.
We make sure we got Cordova installed and running by typing:
$ cordova
We make sure we got Cordova installed and running by typing:
$ cordova
We proceed to create our project typing $ cordova <FOLDER_NAME> <PACKAGE_NAME> <PROJECT_NAME>. In this case I used:
$ cordova create ASIMOV_Mobile arthur.robotics.asimov ASIMOV_mb
which whill cause my application to be called ASIMOV_mb and be found inside the ASIMOV_Mobile folder as shown (along with my cool wallpaper).
$ cordova create ASIMOV_Mobile arthur.robotics.asimov ASIMOV_mb
which whill cause my application to be called ASIMOV_mb and be found inside the ASIMOV_Mobile folder as shown (along with my cool wallpaper).
Going inside the folder with cd, we find several folders. config.xml and the folder hooks contain application data used by cordova to configure stuff and we rarely modify them.
We care about platforms which will include the data of the mobile platforms we want our application to run in (android, iOS, Firefox mobile, etc.). We must add one for each platform we want which will be shown in the following.
The plugins folder will store all the features we want our app to be able to use (twitter access, alarms, maps, etc.) and will be heavily modified to add the necessary features.
Finally the folder www is where the coding will take place.
We care about platforms which will include the data of the mobile platforms we want our application to run in (android, iOS, Firefox mobile, etc.). We must add one for each platform we want which will be shown in the following.
The plugins folder will store all the features we want our app to be able to use (twitter access, alarms, maps, etc.) and will be heavily modified to add the necessary features.
Finally the folder www is where the coding will take place.
Inside www we find the files:
- index.html. Represents the "main page" of our application and displays the first window the user will see when opening it.
- ccs. This folder stores the Cascade Style Sheets that will define our application's appearance.
- img. This folder stores the images our application will display.
- js. This folder provides the event code that will dictate our application's behavior when executing it.
Apache Cordova provides a sample application we can load to test. In our case we got an Android mobile device to test but you can make use of an Android Virtual Machine
Adding a mobile platform
Adding, deleting or seeing the installed platforms is a relatively simple operation and necessary to determine in which mobile devices our application will run. In this case I want them to run in Android so we add the Android Platform with
$ cordova platform add android
$ cordova platform add android
Seeing the installed mobile platforms
We can easily see which platforms are available to deploy to using
$ cordova platform ls
$ cordova platform ls
Removing mobile platform
Removing an installed platform only requires the command
$ cordova platform remove <PLATFORM_NAME>
which in this case would be
$ cordova platform remove android
$ cordova platform remove <PLATFORM_NAME>
which in this case would be
$ cordova platform remove android
Building the App
After the platform has been deployed we build the app using the command
$ cordova build
If any errors are detected, the console will show them to us.
$ cordova build
If any errors are detected, the console will show them to us.
Deploying to Device
Finally comes the trial by fire. We connect our Android device to our PC using the micro USB port and make sure our android device is set on file loading mode so that cordova can access the permissions to transfer and install towards the device.
We must also have:
We must also have:
- Debugging permissions on the Android device.
- Have our device added to the android.lists file in our computer so that it can be recognized as a debugging device.
If those conditions are set, the only thing needed is to type the command: cordova run <PLATFORM>
$ cordova run android
$ cordova run android
If everything goes well you'll get a nice starting app on your device. It will do absolutely nothing except look pretty but that's a good start!
Now its time to do some coding!
Now its time to do some coding!
[1] http://docs.phonegap.com/en/3.5.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide