Cordova mobile app development

This page will describe, how to setup your environment to be able to create and deploy Mobile apps using Cordova.

It will be done from a Windows7 laptop, but the Cordova documentation helps to show how to do on other platforms - I also have the same thing setup and running on a Linux Mint laptop.  Very little difference.


Now...as you may or may not be aware, I've been using the above technologies in my day-job since around, 1997 onwards.  I spent about 7 years using JavaScipt "server-side" within various products.  To this very day, I use a BPM Product that also uses JavaScript "server-side".  It has evolved a lot over that duration of time, so much so that I do really see much advantage of doing things any other way.  I'll just point you towards NodeJS if you want to see that evolution errr.... evolving.
I did learn native Android Java programming (even attended the 2014 Coursera.org online course to get up to speed with the latest version), but again, there was a lot of "faffing" about to do something simple.
I built a native app that did most things and it took a week of learning, debugging and getting it right.  I did the same thing using HTML, CSS and JavaScript and it took me about a day.  I'm not sure if that says more about my skillsets than the tooling, but it gives you an idea of why I decided to "give Cordova a go".

Hop over to the Cordova documentation and follow the instructions for Command Line Interface:
Simple steps =
download and install the Android SDK
download and install the FirefoxOS SDK
download and install nodeJS
download and install a git client
use >npm to install cordova
c:\>npm install -g cordova

create a folder c:\cordova and navigate to it and type:

>cordova create hello com.example.tony HelloWorld

you'll notice that hello is now a sub-folder, navigate to it and now we need to add platforms to the project:
>cd hello
>cordova platform add android
>cordova platform add firefoxos

if you wish to add device plugin features you can add the plugins now, such as:
>cordova plugin add org.apache.cordova.network-information

now we need to build our app:
>cordova build
that command will build and output for all platforms, if you wish to output for firefoxOS use:
>cordova prepare firefoxos

you can use the Android SDK emulator (but it is real slow and takes ages to boot up) or you can use:

>cordova serve android

this will create a localhost:8000 website that will open in Chrome locally on the PC and will allow you to test out the app (open Developer Tools and Console to see any errors).  Once you are happy with this, plug in your Nexus 7 Tablet and type:

>cordova run android

this will download and install the app to the device and run it.


The next step will be to take your AngularJS web application and drop it into the \www folder, then rebuild and create the output.  I'll walk through doing this with a simple app just to demonstrate how to do this as a skeleton starter.

>cordova create event com.tony.app Event
>cd event
>cordova platform add android
>cordova platform add firefoxos
then I copied my \www folder from an AngularJS web app that I had written.
You can then execute to build for android with:
>cordova build android

This will then create the .apk file in \event\platforms\android\ant-build\nameOfApp-debug.apk

You can manually share this as-is or if you can plug in the device, you can:

>cordova run android

The FirefoxOS version requires you to:

>cordova prepare

this creates the output offline web app for firefox:


I found that to be able to deploy this to my FirefoxOS phone, I needed to download the tooling into the Firefox web browser and that I needed to upgrade to v1.2 of the firmware.  That detail is for another posting!




10 comments:

  1. Very fantastic and well-written post.Its extremely good and very helpful for me.
    Mobile App Development

    ReplyDelete

  2. Really it was an awesome article...very interesting to read..
    Thanks for sharing..please sharing like this information......
    Android training in chennai
    Ios training in chennai

    ReplyDelete
  3. I wondered upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon.
    Mobile App Development Company
    Mobile App Development Companies

    ReplyDelete
  4. Nice it seems to be good post... It will get readers engagement on the article since readers engagement plays an vital role in every blog.. i am expecting more updated posts from your hands.
    Android App Development Company

    ReplyDelete
  5. great and nice blog thanks sharing..I just want to say that all the information you have given here is awesome...Thank you very much for this one.
    web design Company
    web development Company
    web design Company in chennai
    web development Company in chennai
    web design Company in India
    web development Company in India

    ReplyDelete
  6. it is really amazing...thanks for sharing....provide more useful information...
    Mobile app development company

    ReplyDelete
  7. I am expecting more interesting topics from you. And this was nice content and definitely it will be useful for many people.
    Fitness SMS
    Salon SMS
    Investor Relation SMS

    ReplyDelete
  8. I wondered upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon.
    iOS App Development Company

    ReplyDelete
  9. great and nice blog thanks sharing..I just want to say that all the information you have given here is awesome...Thank you very much for this one.
    web design Company
    web development Company
    web design Company in chennai
    web development Company in chennai
    web design Company in India
    web development Company in India

    ReplyDelete