Setting Up Your Development Environment for Cordova Android projects

Updated 8/2/2015 to include Windows 7 setup. Adobe PhoneGap/Apache Cordova CLI quickly sets up your project files for the mobile environment. However, it requires a hefty setup of your development environment before you can begin making Android apps. If you are a working developer, all these tools are par for the course and you’ll have them already installed. If you are trying out Cordova/PhoneGap for the first time, and you are new to the programming world – welcome! – you need to install all the “dependencies” that Cordova/PhoneGap assumes are already resident on your system. Follow all these steps to make your Cordova/PhoneGap work go smoothly. Of course, these steps need to be done just once.

Signing an Android Apk via CLI

From time to time I got frustrated with Eclipse (update: I no longer use Eclipse). For those who have buggy software or other problems that hinder you from creating an apk file, you can follow these steps apart from opening Eclipse.

Purpose of this page for newcomers: In the past, I used Cordova/PhoneGap to create the debug version of my apps for testing, then turned to Eclipse to create the final apk that Google Play accepts for the store. Play does not accept debug versions of an app. This article gives the steps to use Cordova CLI to create the final apk version that would be uploaded to Google Play or any other app store that accepts apk files.

The information is divided into two sections. The first section is for new, version 1 apps in which a private key and keystore need to be generated. The second section is for version 2+ apps, in which the keystore is already present and needs to be applied to the apk to sign it. Just follow all these steps in the Terminal app – you need open no other software. 

Using Android Studio Beta with Cordova PhoneGap

Article updated here 11/2016: https://iphonedevlog.wordpress.com/2016/11/21/using-android-studio-with-cordova-projects/

I installed Android Studio Beta to see how it currently stacks up against Eclipse. It’s apparent that Android Development Tools for Eclipse is going the way of the dodo and will no longer be updated as vigorously. It’s my impression that Android Studio Beta (AS) is Google’s new SDK to replace Eclipse. We’ll need to learn it sooner or later, so why not now? Here are my notes as I set up the environment and discover the path to creating an apk. These steps track the install and setup of Android Studio down to outputting a signed apk for Google Play upload. 

News: Cordova, iPhone 6, and iOS 8

Shazron of Adobe System’s Inc. gives us the latest news about Cordova and Apple’s release of iOS 8. Here’s what we need to change to get our apps ready for iOS 8:

http://shazronatadobe.wordpress.com/2014/09/18/cordova-ios-and-ios-8/

More news:
http://sdtimes.com/guest-view-hybrid-app-developers-love-new-ios-8/
http://www.sitepoint.com/getting-app-ready-ios-8/

Nov. 25, 2014 Need to upgrade iOS apps with Cordova older than 3.4.1 before Feb. 2015: http://cordova.apache.org/announcements/2014/11/25/ios-64bit.html

Book Review: PhoneGap 3.x Mobile Application Development

PhoneGap 3.x Mobile Application Development
Kerri Shotts
“Create useful and exciting real-world apps for iOS and Android devices with 12 fantastic projects”
Packt Publishers
https://www.packtpub.com/application-development/phonegap-3x-mobile-application-development-hotshot

Book Cover: PhoneGap 3.x Mobile Application Development

Using the Ionic Framework UI Elements

Ionic has many useable UI elements, including lists, buttons, forms and form elements, and so on. Ionic is both a CSS framework and a Javascript UI library. You can use them as is in your HTML. In this article, I’ll show you how to incorporate these elements as straight HTML code. I won’t be going into the more high-end, dynamic aspects of the Ionic framework in this article.

This tutorial assumes you already have installed:
node.js (http://nodejs.org/)
Cordova PhoneGap (http://www.phonegap.com)

This tutorial assumes you:
1. Know how to set up Android and iOS SDKs for development, and setting PATH statements. See my other articles on how to do this.
2. Have created several basic Cordova PhoneGap projects, including adding InAppBrowser plugin and making config.xml changes for it.

Updating and Reverting to Different Apache Cordova Versions

If you want to update your version of Cordova to the latest version, or you want to revert to an earlier version (to test or debug), here are the steps to follow. I also have instructions on updating the plugins and platform versions here.

Resource:
https://github.com/apache/cordova-docs/blob/master/docs/en/5.0.0/guide/cli/index.md

Cordova blog for latest updates:
http://cordova.apache.org/blog/

Using Cordova CLI on Mac OS X to build iOS apps – updated 3/2018

This article gets you up to speed on how to integrate your HTML/CSS/JS app with Cordova into an iOS app using a Mac and prepare it for App Store submission. This article assumes you’ve already followed the steps on https://iphonedevlog.wordpress.com/2013/08/16/using-phonegap-3-0-cli-on-mac-osx-10-to-build-ios-and-android-projects/ to:

Download Node.js
Add PATH statements to .profile

In this article, I am referencing Mac OS X Yosemite 10.10.5 and Xcode 6.3.1 on a Mac Mini. Cordova CLI 5.4.1 was installed. I am referencing “cordova” in the command-line interface, not “phonegap.” This project will not use the PhoneGap Build service. Any updates to these programs may affect the following instructions.

Download Apple’s latest OS  and Xcode if you haven’t already:
http://www.apple.com/osx/apps/app-store.html 

Using Cordova CLI on Mac OS X to build Android apps

This article gets you up to speed on how to integrate your HTML/CSS/JS app with Apache Cordova into an Android app using a Mac and prepare it for App Store submission. This article assumes you’ve already followed the steps here to set up your environment: https://iphonedevlog.wordpress.com/2014/10/30/setting-up-your-developmemt-environment-for-cordovaphonegap-android-projects/

I am referencing “cordova” in the command-line interface, not “phonegap.” This project will not use the PhoneGap Build service.

If you are making an app larger than 100MB for Google Play, you’ll need to make an expansion file. This 2014 article tells how to make one, though I don’t know if it works today. Back in 2014, the Amazon App Store allows apps up to 150MB before needing an expansion file.

Notes About Using PhoneGap Build

This is not a tutorial, but a list of things a Cordova PhoneGap developer needs to know if he or she wants to start using PhoneGap Build (PGB). PGB will take your www/ assets and create the files needed for iOS, Android, and Windows devices. It doesn’t use native files, such as those ending in .h, .m, .java, etc.; the build may fail if these are included. What follows are the notes I took as I considered whether to use the service. Read this as a FAQ page for preparing an app for PGB. Curious as to whether PhoneGap Build is for you? Read on…

Main site: https://build.phonegap.com/ 

App testing with the PhoneGap Developer App — see your changes instantly without re-building!

With this software, you can develop your app on the desktop, then see the changes instantly on your mobile device. There’s no need to re-sign, re-compile, or reinstall your app to test your code. You’ll have access to the device APIs that aren’t available in web browsers. Let’s give it a spin!

For more info:
http://phonegap.com/blog/2014/04/23/phonegap-developer-app/ 

Using the Desktop Safari Web Inspector to Debug Your Installed iOS App

 

You can install your app on your iOS device and monitor its usage on your desktop monitor, including console feedback. Here’s how.

Installing Chris Brody’s SQLite Database with Cordova CLI (Android)

The HTML5 SQLite spec results in a database with a limit of 5MB. Chris Brody’s SQLitePlugin, however, breaks this barrier. Here is how to implement it. These steps assume you’ve already created the Cordova project and are adding this database project to it. I recommend you build for v19.

 If you just want a simple prepopulated DB, try this article instead.

Populate your PhoneGap App with Data from an External Server DB

With this article, we’ll pull data from a server and show it in the app. We’ll create a database table on a server, load it with data, then set up the scripts to make it all work. You’ll need a MySQL server and the ability to upload and change files on it.

My development environment:

Mac OS X 10.9.1 on latest Mac Mini
Cordova CLI 3.4.0
For Android 4.3, 4.4 v19
Testing in device: Android-19, Nexus 7 with 4.3
No Jquery or other JS or CSS packages used

This post assumes you already have your Cordova PhoneGap environment already set up. Look elsewhere on this site for setting up for iOS or Android.

Adding Cordova APIs to Android via CLI: Camera and File APIs – shoot picture and upload to server folder with PHP

In this article, we are continuing our exploration of the Cordova APIs. On this page, we’ll explore the Camera and File APIs to get a photo onto the server. Here, we’ll learn how to upload the image to a server directory after shooting it.

This article requires that you have a server with PHP installed, are able to upload a file to it, and the server accepts uploads. My simple server has a CPanel interface that allowed me to do all of the above. (Don’t worry; I’m going to give you the steps for all of this.)

Cordova-supported WebSQL Database, with user-added data

In this article, we are examining another facet of the database storage, which is built into Cordova. In this article, we’ll create an empty database and allow the user to add records to the database and store them in the device. A button will delete the database. Two outputs are given, one in a text field and one in a table layout. With the text-only layout in the textfield, you can press and hold in the textfield and copy the contents to export it.

Adding Cordova APIs to Android via CLI: Prepopulated Database Storage

In this article, we are in part 5 of exploring the Cordova APIs, which started in https://iphonedevlog.wordpress.com/2014/01/31/adding-cordova-apis-to-android-via-cli-accelerometer-and-camera/ Refer to that article to set up your Cordova PhoneGap project files. You’ll want to follow the “Set Up the Android Project” section through step 9 inclusive.

Adding Cordova APIs to Android via CLI: File API

In this article, we are in part 4 of exploring the Cordova APIs, which started in https://iphonedevlog.wordpress.com/2014/01/31/adding-cordova-apis-to-android-via-cli-accelerometer-and-camera/ Refer to that article to set up your Cordova PhoneGap project files. You’ll want to follow the “Set Up the Android Project” section through step 9 inclusive. On this page, we’ll explore the File API from the perspective of getting our feet wet.

Adding Cordova APIs to Android via CLI: Geolocation, Globalization, Notification

In this article, we are in part 3 of exploring the Cordova APIs, which started in https://iphonedevlog.wordpress.com/2014/01/31/adding-cordova-apis-to-android-via-cli-accelerometer-and-camera/ Refer to that article to set up your Cordova PhoneGap project files. You’ll need to follow the “Set Up the Android Project” section through step 9 inclusive. On this page, we’ll explore the Geolocation, Globalization, Notification APIs from the perspective of getting our feet wet.

Adding Cordova APIs to Android via CLI: Compass, Connection, Device

In this article, we are in part 2 of exploring the Cordova APIs, which started in https://iphonedevlog.wordpress.com/2014/01/31/adding-cordova-apis-to-android-via-cli-accelerometer-and-camera/ Refer to that article to set up your Cordova PhoneGap project files. You’ll need to follow the “Set Up the Android Project” section through step 9 inclusive. On this page, we’ll explore the Compass, Connection, and Device APIs.