You are here

Playtime with Cordova: pt.2 Cordova setup

Friday, July 18, 2014

DISCLAIMER: This is me sharing my learning, I have not yet created a final application, and also, some of the process’ below may not be best practice.  BUT as a place to start playing, which is really what we all want to do, I think it works.

So, we have a project, and now it is sitting there on our desktop, taunting us with it’s seductive ways. ‘I can be built into an android app’ it says, without an incling of how we do that.  Fear not ladies and gentleman, there is actually some good documentation worth keeping to hand in the form of the Cordova CLI (https://cordova.apache.org/docs/en/3.0.0/guide_cli_index.md.html).  The core commands we will run through now so you can get started though.

 

The quickest route to glory is by first going into your terminal to the project directory, then simply typing in:

cordova serve

This will give you a domain similar to http://localhost:8000 simply open this up in your browser and marvel at your creation.  It doesn’t do anything mind you, in fact, you have probably just had an error message slapped in your face, but you are getting close.

 

So let’s get rid of that error, it pops up due to the cordova.js file not playing ball with a regular internet browser (no that was not, and never will be, a sports metaphor), so for the quick tests, just open up the file in www/index.html in your editor (I use the well awesome sublime text) and comment out that line.  Now in your terminal window, cancel (ctrl-c) and re-run cordova serve doesn’t it look better now (I do hope it does)?

 

Now what?  I'll tell you what, let’s try and emulate in an android app.  First, we need to tell cordova we are actually going to build an android app.  You will start seeing a pattern soon with how easy these commands are

cordova platform add android

You will see a new folder for android in /platforms , good stuff

 

Go into your android SDK folder and open up the AVD files by running

tools/android avd

Then choose your AVD or create a new one.  Once that is done, click the ‘run’ button and watch while it loads up… actually, don’t watch, as it is freaking slow, go make a cup of tea, or water the garden instead (okay, maybe it isn’t quite that long).  

 

Now it’s up and running, we want to get our nice little app running in it, so go into terminal and head to your application directory.  In there, run the cordova CLI functionality

cordova emulate android

This will now re-load the emulator, with your app showing in pride of place.  Well done, now you have earnt that cup of tea (or in my case, we were making Limoncello, so a small glass of that was in order).

 

Finally, you may want to actually build an apk file out of your new app (once you modify the thing), and this could not be simpler, just go into your project directory and run

cordova build --release

Once this is done, take a look in your android/bin directory to see the nice new file to use when playing the old approval game in the play store.

 

I said finally, but then I remembered one other thing, you likely have a device in your pocket in a bax of previous years models you would just love to test your new site on.  Well, you can do this, although it takes a little bit of fiddling to get working, and as with anything, is likely to change over time.  On Ubuntu you need to ensure you allow the manufacturer ID to a special file, and enabled developer mode on your phone.  Don’t panic over my vagueness, I am saying all these things before I give you this lovely link on setting it up in eclipse for you to use (http://developer.android.com/tools/device.html).

 

Useful resources

Related: 

Blog & News

Monday, March 7, 2016

Okay, I know it is awful practice to put 2 things into one article, but I didn't want to write two tbh, so I will keep this tidy, and you can grab out what you need.

 

Subscribe to Blog & News

About

Cultivating a better future, with the seeds of better websites

For several years I have evolved through one of the largest media charities in the UK to the role of Senior developer.  I loved it there, but have to stepped out on my own as a freelance developer.

My main skills are with the Drupal CMS, developing code for it, ensuring standards through projects (whether that design, development, or planning), and leading teams to build applications they can be proud of.

Digital Consultancy, Web Development and Project Architecture are where I try to focus my skills, supporting my passion and desire to create stunning websites on time, in budget, and meeting your objectives.

To build a powerful web presence, I combine my creative, technical, and managerial experience (alongside a good splash of passion) which I have cultivated over 10 years in the industry, creating websites people want to shout about.

More on how I can help