Getting started with Cordova Hybrid Apps
If you are a web developer but fancy getting started with apps then Cordova could be the way forward for you.
So what is Cordova?
This may sound familiar to you if you have heard of PhoneGap before. PhoneGap was built on Cordova but PhoneGap seems to have fallen out of favour now with more community support for Cordova.
So where do I start
Install, install, install, install (this may take some time…)
So there is a lot of things you need to install before you can get started and make your first app. The list of things to install depends on what platform you are going to develop for. Cordova supports Android, iOS, Windows Phone and Blackberry. I don’t currently have a Mac so I have concentrated my development on Android.
For Android, before you install Cordova you need to install the following:
This took me a few hours to get it all downloaded, installed and configured. Each site has some fairly easy instructions to follow, just remember (or even better, write down) the location that each package is installed to. To install Android Studio you need to know the location you have installed Java and you may need to add the location of the Android SDK to your environment variables if it isn’t added automatically.
For iOS you need to install the following (and you WILL need a Mac for this):
Once you have these installed and set up you can then install the Cordova Comand Line. Phew!
Oh wait a minute, you need to install Node.js as well which you use to install Cordova.
Right, ready to go now??? No more to install??? At least for the next five minutes anyway.
Things get a bit easier now. For linux and Mac OSX type the following and press enter:
$ sudo npm install -g cordova
For Windows type the following and press enter:
C:\>npm install -g cordova
In theory this should install everything you need and all work fine.
The issue I had with this was that I was trying to do this from within a company network that had a proxy server. If this is the case for you then make sure that you configure your proxy settings for both node.js and git.
Your first project
So everything is now installed and you are all ready to go. To create your first project, navigate to where you want the project to be on your computer and then type the following:
cordova create hello com.example.hello HelloWorld
This basically says use cordova to create a new app with the name com.example.hello in the hello directory with the display name HelloWorld. This will create a load of files and folders ready for you to start your development.
Now you need to add platforms, as in what you are developing the app to run on, such as Android and iOS.
cordova platform add android cordova platform add ios
This will create the relevant folders within the platforms folder where your compiled app will live. Don’t edit anything in here though. YOu need to do your work in the www folder.
One thing you may notice is that the files are all relative. Rather than the image being in the ‘/img/’ folder, it is in the ‘img/’ folder. This took me a while to get used to.
Building and installing the app
Once you are ready to test your app out you can build it by running the build command:
cordova build android
This produces an app file that you can then use to test with, but there is a better way than manually installing this on your device each time you change it. Use the run command instead:
cordova run android
This command compiles your app and then either installs it on whatever device you have plugged in to your computer or it will install and run on the emulator. The emulator takes quite a long time to get started and you can’t test all of the features such as camera, gyro, etc.
Installing on Android devices
There are a couple of things to be aware of before you can install your app on Android.
- You need to get your device into developer mode and then enable USB debugging
- You need to install the relevant USB driver for the device before it will install correctly
Installing on iOS devices
Some things to be aware of for iOS devices.
- You need to be a member of the iOS developer program
- You need to create a provisioning profile in the iOS provisioning portal
- Blah, blah, blah stuff about certificates and whatever, can’t I get my app on my iPhone yet without jumping through more hoops.
That’s a very brief guide to getting started with Cordova. I look forward to seeing your apps in the app store any day now! Good luck!
Tagged with apps, cordova, development
Published: Sep 8, 2017
It has been a long time since I last updated the design of my site and as a Frontend Developer it didn’t seem right to wait any longer. I have used a variety of different frontend frameworks in the past, from Foundation, to Bootstrap, but this time I wanted something different, so with a cup of coffee in hand I started looking for something new.
Published: May 20, 2017
Published: Apr 1, 2017
My job title is frontend web developer, and I am confused. I am in a situation where there are now so many different options for me to start learning that I don’t know where to start. I always find a good place to start is the beginning, so here goes a little history lesson.
Published: Aug 10, 2016
Its easy to start writing code without thinking about the organisation, but take some time to plan and it will reward you later. Sometimes a new project is so exciting you just want to start coding and making things work, thinking that you will sort out the structure at a later date. After all, who cares as long as it works, right?
Published: Jul 11, 2016