Have you been telling yourself you’re going to do mobile, but never got around to it? Wouldn’t it be awesome if you could leverage your existing web skills to quickly build native mobile apps? Cordova is a platform for building native mobile applications that lets you do exactly that.
Other posts in this series:
- Getting Started with Cordova
- Intro to Ionic
- Build a Calculator with Ionic – Part 1 of 2
- Build a Calculator with Ionic – Part 2 of 2 (Coming soon)
The first thing you’ll need to do is install Node. I will be using v4.1.1 in the example.
You can download Node here.
Node ships with a tool called the Node Package Manager, or npm for short. The package manager is a command line utility that is used to download and install node packages for your projects. As of the time of writing, there are over 190,000 node modules with an average of 360 new modules being added every day.
See modulecounts.com for updated stats.
Some node packages can also include command line utilities that are added to your PATH. When you install these packages, you’ll want to install them globally by using the -g switch. Lets use npm to install a couple CLI utilities that we’ll be using.
npm install -g cordova
If you’re on a mac and want to deploy to the iOS emulator you’ll also want to install the ios simulator module.
npm install -g ios-sim
Create a Cordova App
To create a new Cordova app, you’ll want to cd into whatever directory you keep your projects and run this cordova create command, passing in the directory name you would like to create the project in.
cd ~/code/ cordova create hello_world
The config.xml holds metadata about your project, the plugins that it uses, and preferences that are applicable to one or more of the platforms that you support.
Hooks are an extensibility point that can be used to define custom functionality. You can write custom scripts and wire them into cordova to be run at different points in time. If you find yourself needing to do something that it feels like cordova won’t let you do, take a look at the documentation for hooks.
Your cordova project can be deployed to one or more different device platforms (iOs, Android, Windows Phones, etc). Currently our project doesn’t support any platforms, so this directory is empty. After we add a platform, this directory will be where you can find the files that support each platform. If you add support for the iOs platform, for example, the platforms directory would contain a iOs directory that contains the XCode project an all it’s supporting files that will ultimately be compiled to the binaries that are deployed to your device.
It’s a good idea to get a commit in at this point, just in case things get squirrelly.
git init git commit -am "First commit, vanilla cordova app"
Before we can see our app running anywhere, we need to add one or more platforms. For this tutorial we’ll be adding the iOS and Android platforms. Let’s tell Cordova what platforms we’d like to target:
cordova platform add ios cordova platform add android
Deploying to the iOS simulator
Lets go ahead and run our app on an iOS simulator (assuming you’re on a mac). Open up a terminal in the root of your project and run the following command:
cordova emulate ios
Deploying to an Android Simulator
Unfortunately, getting an android emulator going is a little more involved. If you’re on a windows machine, or you don’t have a physical android device that you can use, I recommend you take a look at the Android platform documentation to get it installed.
Deploying to a device
The easiest way to deploy to a device is to connect a single device to your computer and then run:
cordova run ios --device
cordova run android --device
That’s it! At this point, you probably want to throw down another git commit.
git commit -am "Added iOS and Android platforms"
With that out of your way, you’re ready to start actually working on your app. Before you start down that road, though, let’s take a look at what ionic has to offer over a vanilla cordova installation.