Obviously at the time of this writing in the 2nd decade of the 21st century, you are no doubt well acquainted with the immense proliferation and impact that mobile apps have had in and on our world. It was not long ago that we were all sitting at our computers at our desks for the large majority of the time we spent in our various avenues of technological communications over the Internet — complete with our with our giant monitors, whirring computer fans, buzzing drives, and the garbled noise of dial-up modems. Now, mobile phones and tablets probably make up as much, if not more, of our time spent working, playing, and communicating online. Everyone has a ~$100 to $600 smartphone (i.e. computer) in their pocket. And with this rise of mobile, apps found on the popular stores — like Apple’s iOS App Store, Google Play (Android), Amazon and a host of others — have completely transformed the way that we do anything and everything because well, there is an app for anything and everything. Every single facet of life probably has an app to manage some aspect of it. Need to remember to breathe? There is an app for that! Yeah, that is a joke (probably)… but there are plenty of “real” apps out there (e.g. iBeer) that are just as pointless. Fun and goofy, yes, but pointless. And they all post their pointlessness to Facebook and/or Twitter.
Whether you want to develop an app to manage some minute aspect of life or just create a fun game, or whatever else, you can download the SDK for the platform(s) that you want to release your app on, do some tutorials, and start building. That’s all well and good, but if you want to port your application to another platform (e.g. release an iOS app also for Android), you will essentially have to try rebuild the same app using the languages in tools of a different platform. For example, iOS apps for iPhone and iPad have traditionally been developed on a Mac in the Xcode IDE using the Objective-C programming language (though Apple has recently released a new language called Swift that can also be used to build iOS apps). Android apps, by contrast are built using Java and Eclipse or the more recently released Android Studio. Native Windows Phone apps are built using C# and XAML in Visual Studio. Other platforms have their own setups. If you want to take this approach you definitely can, but it should be fairly apparent that developing and maintaining a number of different codebases for multiple platforms quickly adds up to a lot of time, effort, and often money as the sizes and complexity of your apps increase.
So let’s get to it…
To install Node.js all you have to do is head on over to their website and follow the directions for your operating system (Windows, Mac, or Linux).
Installing Apache Cordova
Once we have Node.js installed, next we will need to install Apache Cordova. We just do this over npm. npm comes with the Node.js installation, so you already have it on your machine from installing Node.
To install Cordova open up a command window or terminal and run the following…
$ npm install -g cordova
In case you are not familiar with it, the “-g” flag means “global.” You will want to do this so that you can run Cordova commands from any directory on your system.
Creating an Apache Cordova Project
Now you can go to a directory where you want to create your Cordova project and open a command window/terminal. We will be initializing a new Cordova application here with the Cordova “create” command. For more information on the configuration options you can choose when installing and setting up your project, please see the Apache Cordova documentation here. Run the following command from your command line…
$ cordova create ninebit com.ninebitstudios.ninebitapp NinebitApp
The command above will create a vanilla Cordova project called “NinebitApp” and ocnfiguring it with a unique ID that uses reverse domain name notation in a directory named “ninebit.” What you will want to do is change these values to what you want for your own application.
$ cordova create
$ cordova create yourdirectory com.yourdomain.yourapp YourAppName
but just plug your own values that you want in there.
Adding Support for Android Devices to the Project
Now that we have our project created we need to “add” the platforms that we want to release on to our project. Open a command window in the root directory of the project (the one with the config.xml file).
To add Android to our project run the following…
$ cordova platform add android
Because we now have a native Android project, we can run it on the Android emulator. In the root directory we can now run following…
$ cordova emulate android
This should launch the Android emulator and automatically run your application after it boots up. Note that you might need to set up a device for Android project to use before you try to run the command above. To do this, you will need to launch the Android Virtual Device Manager (AVD Manager.exe). This application resides in the root folder of where you installed your Android Studio SDK. You can also launch AVD Manager in Android Studio under the “Tools” menu under “Android.” However you open this application, once you are in there just click “Create New” and pick whatever device you want. Once you get the device set up you can try to run the command above again.
Adding Support for iOS Devices to the Project
Similarly, if you want to add support for iOS
$ cordova platform add ios
Remember that you *must* have the SDK of the platform you are trying to add installed on your system. If you do not the Cordova console should inform you of this error.
For iOS you will want to make sure that you have the proper folder permissions in all of the directories and folders you will be working in. I had some issues trying to emulate when running all the cordova commands with sudo. So make sure on your Cordova project directory you do something like the following…
$ sudo chmod -R 777 foldername
so that you can run all the commands without using sudo
The first thing that you’ll want to do is add the iOS platform to your project.
$ cordova platform add ios
You can then build for iOS by running the following command. If you are able to do so without errors, you’ll know that everything is all good.
$ cordova build ios
Note in /platforms/ios/cordova/lib there is a list-emulator-images tool that you can run to list out all of the emulator images that you have installed. These are the different devices that you can emulate your apps…
You will see a list like the following…
If you want to specify a target, you can run the simulator on a specific device by targeting a specific device. For example…
cordova emulate ios --target="iPhone-4s" cordova emulate ios --target="iPad-Air" cordova emulate ios --target="iPhone-6" cordova emulate ios --target="iPhone-6-Plus"
Otherwise, the iOS development tools will just use what is set as the default device (usually the latest version of the iPhone that is currently in production).
And of course, if you want to emulate on an iOS device in Xcode you can run the following command in your project root…
$ cordova emulate iOS
This should launch the iOS simulator and run your application.