Implementing Crosswalk’s Chromium webview plugin in an Android app

Why consider using Crosswalk? Android devices have different implementations of the webview, in which our PhoneGap and Cordova apps appear. Vendors have made their own tweaks of the webview, causing our code to render inconsistently. So our CSS and scripts will play differently across devices or not at all.

For instance, the HTML5 <video> tag won’t work across all Android browsers:

<video id="video_1" 
 controls preload="auto" width="320" height="240">
 <source src="video/myvideo-h264.mp4" type="video/mp4">
I'm sorry; your device browser doesn't support HTML5 video in MP4 with H.264.
</video>

But it will work in the Chromium webview provided by Crosswalk. By adding the Chromium webview to our app, we will have a unified Android playing field for our app.

Displaying a prepopulated database with AngularJS

I am trying out different ways to have a prepopulated database in an app. This time I’m experimenting with AngularJS. The following article show how to display an array of data AngularJS style, filtering the output with two buttons. (This article is not using “ng-cordova.”) If you follow the other articles on this site, you can compare the different approaches for a “simple,” in-app, prepopulated DB.

Prepopulated Database with TaffyDB for iOS and Android with Cordova

I thought I would look for an alternate to SQLite to display a prepopulated database. Research (and successfully creating a working version) led me to TaffyDB. Here is a working project to create your own prepopulated DB. TaffyDB can do so much more if you are familiar with JavaScript (I’m not, so it was difficult trying to figure this much out!).

Resources:
http://www.taffydb.com/
http://www.slideshare.net/typicaljoe/better-data-management-using-taffydb-1357773 

Adding an Android APK Expansion File to a Cordova Project

Google Play apps are limited to 50MB, but may go larger with “expansion files” of up to 2GB in size. The “main” expansion file is the primary expansion file that contains additional resources required by your application. The “patch” expansion file is optional and intended for small updates to the main expansion file. This article covers how to create and add an expansion file to our Android app using a plugin. Then gives the “secret” way to upload the APK and expansion file to Google Play.

Adding ProGuard to Your Android Cordova Project

“The ProGuard tool shrinks, optimizes, and obfuscates your code by removing unused code and renaming classes, fields, and methods with semantically obscure names. The result is a smaller sized .apk file that is more difficult to reverse engineer” (from http://developer.android.com/tools/help/proguard.html). You’ll want to use this tool if your app has sensitive security features you want to protect. To my knowledge, it does not obfuscate your HTML.

These steps assume you’ve already built your Android Cordova project and just about finished it, and are ready to build a release version of the app.

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.

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. 

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 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/ 

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.

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.)

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.

Adding Cordova APIs to Android via CLI: Accelerometer and Camera

In this beginner’s article, we’ll see what’s involved in adding the Cordova APIs to an PhoneGap Android project. It was written to help get your feet wet in case you’ve never tried it. An API (application programming interface) will allow us to use the features of the smartphone, such as accelerometer, camera, com
pass, and other features. In the case of Cordova’s PhoneGap, this APIs come in the form of plugins. They need to be added to the project on an as-needed basis.

Using PhoneGap 3.3 CLI on Mac OS X Mavericks to Build iOS Projects

This article gets you up to speed on how to integrate  your HTML/CSS/JS app with PhoneGap/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
Install Cordova CLI
Install Homebrew

In this article, I am referencing Mac OS X Mavericks 10.8.5 and Xcode 5.0.2 on a Mac Mini. PhoneGap CLI 3.3.0 was downloaded. I am referencing “cordova” in the command-line interface, not “phonegap.” This project will not use the PhoneGap Build service.

Using Git Versioning Control Locally

You can add a versioning control system to track and manage your project’s assets with Git locally — you don’t need to upload it to git.com. Here’s how.

Downloading Git

Download Git from http://git-scm.com. It will detect your OS and provide the correct download for it. For my Mac, it was version 1.8.3.2.

The Mac version downloaded a dmg file to my Downloads folder. Double-click to open it, then double-click on the pkg file. (If your preferences prevent you from opening a file from an unidentified developer, then hold down Control, right-click on the pkg icon, and select open.) The Installer should appear; click to continue through the few steps, including providing your admin password. You’ll find a drive icon for the Git dmg package; right-click and select to Eject. (I believe “dmg” is short for “disc image.”) 

Using PhoneGap 3.0 CLI on Mac OS X to Build iOS and Android Projects

At the time this was written PhoneGap Build does not support PG 3.0. These instructions assume Cordova PhoneGap is being used, not Build.

I highly recommend following the latest version of PhoneGap or Cordova. For instance, try these pages:

iOS: https://iphonedevlog.wordpress.com/2014/06/24/using-cordova-3-5-cli-on-mac-os-x-mavericks-to-build-ios-apps/

Android: https://iphonedevlog.wordpress.com/2014/06/20/using-cordova-3-5-cli-on-mac-os-x-mavericks-to-build-android-apps/

In this article, you will use CLI to build iOS and Android projects:

• Install Cordova
• Create a project with all necessary www folders and files
• Add iOS and Android platform version folders and files
• Build an Android debug apk for installation on a device for previewing
• Build an Android project and view on a browser for previewing
• Add the InAppBrowser and Splashscreen plugins
• Update icons and splash screens for each platform
• Update the config.xml, AndroidManifest.xml, and index.html files
• Customize content for a particular platform
• Finalize a product apk for Google Play upload, including keys and certificates