Cordova makes the move to mobile application development an easy one.
In this article, we're going to walk through the process of building what's called a "one-page" iPhone app. One-page because, though it appears to have multiple pages, the entire app is contained in a single-page HTML file. One thing that can seem daunting about mobile development is that doing it well requires some knowledge of a lot of different tools: HTML, CSS, jQuery, Cordova, AJAX, perhaps even Xcode and Objective-C. Before my fellow RPG developers start breaking out in hives, let me just say that it's not that difficult. We'll go through each step in detail here. Then, once you have one app that's working, you can clone it (just like every subfile program you've ever written) to build others.
Before I go any further, let me just get this out. I work exclusively on a MacBook Pro. The directions here will work 100 percent on a Mac. They will also work on a Windows machine with some slight variations. On that note, if you're serious about building web apps…get a Mac. Just sayin'.
Also, this first part is a bit tedious; installation is never exciting. But stay with it! The fun stuff is going to happen. I swear it is.
Step 2: Install Cordova.
npm install -g cordova
sudo npm install -g cordova
If you already have Cordova installed on your system, you may want to make sure you're running the latest version.
npm update -g cordova
Step 3: Install the SDK for the platform (either Android or iPhone).
Here's where we go on separate paths for Windows and Mac folks. Since the instructions for Android are the same for both platforms, we will just add Android support. If you want to build and support iPhone apps, there are (difficult and painful) ways to do it on a Windows machine. If you're building iPhone apps, why not just make life easy for yourself and get a Mac?
: There are several options for the android SKD install; you can decide whether you want the complete development package or just the SDK. For our purposes, you will only need the SDK. Follow the instructions on the Android website for installing the SDK and getting the latest SDK tools. Once you have loaded the SDK, you'll need to add the following folders to your path ('):
: You'll need Xcode, and you'll also need some command line tools that are optional. Once Xcode is installed, from the Xcode menu, select Preferences, then the Downloads tab. From the Components panel, press the Install button next to the Command Line Tools listing.
Step 4: Create your project.
You may want to create yourself a folder called "mobile_apps" or something similar to keep all your apps in. In any case, navigate to the folder where you will keep your apps. Then use the cordova command to create our project.
cordova create first_app com.your_domain.first_app First_app
This will create the basic Cordova project and associated folders and files. Cordova will create a folder for your project. The name of the project folder will depend on the name you gave your project in the command above; in this case, the name of the folder will be "first_app".
Step 5: Add platform support.
Navigate to the project folder and add the support for whichever platform you installed SDKs for in the previous step. Or both if you installed both.
cordova platforms add android
And if you loaded Xcode, you can add iOS.
cordova platforms add ios
Step 6: Configure an emulator.
At this point, we already have a working app (it doesn't do much yet). So we're going to test our install by running it. But we need to configure an emulator first. If you're using a Mac with Xcode, skip this step and go on to Step 7.
Step 7: Build your app.
Once the emulator is configured, we can build our app and see it run in the emulator.
cordova build android
This command will build the basic application. Then we can run the command to build it and run the emulator.
Cordova emulate android
If you're building an iOS app, then just replace “android” with “ios” in the previous two commands to build and emulate the iOS app. Assuming that all is correct with your installation, then you should end up with an emulator display that looks like this. The emulator will take a long time to load. This is a known issue with the Android emulators, so be patient.
Figure 1: And here's your emulator display!
If for some reason your emulator doesn't work or doesn't display the screen as you see here, then there's most likely a problem with the install. Cordova has some very good documentation that will help you unsnarl any install issues. Here are the links to and the .
In part 2, we'll load jQuery Mobile and start making our app a bit more functional. This is where the fun begins!