Javascript iOS and Android app under 3 minutes
“Write code once in one language for an app, and run it on both iOS and Android.” If I could have one mediocre super power, I would want that. Imagine how wonderful it would be if you could build a phone app that can run on iOS or Android without learning any of the gimmicks of either app enviorment. The engineers working on Apache’s Cordova must have had the same thought.
Cordova is an open source framework from Apache that enables you to use Javascript, HTML and simple CSS to build your app, and compile it into any of these mobile platforms, and immediately start running the app. It is not perfect, it does not have all the bells and whistles of both platforms. However, it does a wonderful job for most of the part.
Cordova is a fantastic tool to quickly prototype apps. We can build a simple app for both platforms in less than 3 minutes.
Installation
First we will need to install Cordova using npm
If you are going to use iOS, you will need to make sure that you have installed XCode.
If you are going to use Android, you should install Android SDK. You need to make sure android
is accessible on your command line.
Creating your first app
Now that you have cordova, let’s create an app.
For example, let’s create an app called ‘ButtonMe’ under the directory named myapp:
This will create the directory called ‘myapp’ with a sample app in it. Let’s now add support for Android.
Let’s also add support for iOS.
Creating and Starting Your Android Emulator
Type android
on your terminal. This should start ‘Android SDK Manager’ (If this does not work, you either don’t have ‘Android SDK Manager’ installed or you don’t have it on your PATH enviorment variable). Once, ‘Android SDK Manager’ starts, click ‘Tools’ and ‘Manage AVDs’. Click on ‘Create’ to create a new Android Virtual Device and then ‘Start’ to start it so that Cordova can use it.
‘Android SDK Manager’ is a rapidly developed product. Its menu options change frequently. I won’t be giving instructions on how to create your AVD using ‘Android SDK Manager’ as it will most likely be obsolute very quickly. Instead please follow the most up-to-date documentation on Android’s website to create and start your AVD.
Your first app
The gist of Cordova is to design and build everything as a Single Page Application. You should update the html of your single page dynamically if you want to have multiple pages.
index.html (under myapp/www/index.html
) and index.js (under myapp/www/js/index.js
) are going to be the basic building blocks of our app. We will use index.html to create the layout of our app and index.js.
Let’s add a button to our index.html file.
And let’s modify index.js to add these lines:
Your first app on emulators
Let’s send this app to Android and iOS emulators: