Workflow

This page pulls together key articles that are scattered throughout iphonedevlog. They are here to help me navigate to common resources quickly when I make or update my apps.

Please note that I use these links on a regular basis to make my apps; since I don’t code apps every day, I need to refer to these pages with every new app or update to keep on track. As a result, I am constantly updating these pages to keep up with software updates. 

New Setup

Setting Up Your Mac and Windows Development Environment for Cordova Android projects
https://iphonedevlog.wordpress.com/2014/10/30/setting-up-your-developmemt-environment-for-cordovaphonegap-android-projects/

New App

Making an Android App Bundle .aab file from a Cordova project

At this time, I have been unsuccessful generating a signed aab file for upload to Google Play from Android Studio. Still, others may have more success following these steps, since their environment will be different from mine. These steps are reasonably complete that you might try it out.

Google Play wants us to submit an .aab file instead of an .apk file so that Google Play could download just the files the user needs at the first download. (At this time, Google Play still accepts .apk files, however.) This could result in significant app install memory savings. You can learn more about this here: https://developer.android.com/guide/app-bundle

Until we have an automated command-line process from Apache Cordova, we can make this file with Android Studio. Here are the steps to do so. While making this article, I came across many errors in trying to make this process work. I ironed out the errors and pieced this workflow together so it is streamlined, otherwise it would have been twice as long to read about all my dead ends. (Along the way, I created an SDK. I’m not sure it is needed for these steps to work.)

When done, I deleted my project and started from scratch to make sure these steps worked.

Updated March 2018

I create apps sparingly, so I don’t update the site very often. I go to Workflow above and follow the steps there to make my apps, since I forget the steps in between making apps. So those are the links I update the most.

In the links above, I updated the Helpful Links, Apple App Store app assets, and Workflow > Using Cordova CLI on Mac OS X to build iOS apps. The latter two match up with the latest way Apple does things.

Add social sharing icons to your app

I wanted to be able to share selected content in my app to several social media places, and not merely by copy/paste to an email client. Now my app can share contents of a <textarea> field to Facebook, Google+, Google Drive, Dropbox, a memo app, email, and so on. It was easier to do than I thought. Here is how I did it for Android.

This assumes you already have a Cordova project built and Android platform added. (Steps will be slightly different for iOS. I’ll add those steps to this page when I’m ready.)

Resource:
https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin

My current environment:
Mac OS X El Capitan 10.11.6
cordova -v: 6.3.1
cordova platform ?: android 5.1.1

Using Android Studio with Cordova projects

This article assumes you already have a Cordova project ready to use. So you will use CLI to build the project first as you normally would, including adding an Android platform to the project and running cordova build android. You’ll still need to use the steps outlined in my article to build Cordova apps, including steps for installing plugins, icons, and screens: https://iphonedevlog.wordpress.com/2014/06/20/using-cordova-3-5-cli-on-mac-os-x-mavericks-to-build-android-apps/

You’ll need the dependencies set up if you’ve never made a Cordova project before. See: https://iphonedevlog.wordpress.com/2014/10/30/setting-up-your-developmemt-environment-for-cordovaphonegap-android-projects/

Resources:
https://cordova.apache.org/docs/en/latest/guide/platforms/android/
https://developer.android.com/studio/intro/index.html
https://developer.android.com/studio/install.html 

Another Grunt task: installing Imagemin

I am continuing to add to my grunt task runner process that I started in this post, https://iphonedevlog.wordpress.com/2016/10/31/how-to-use-grunt-to-automate-repetitive-tasks/ (At a minimum, you need to do steps 1-6 on that page.)

In this new article, I’ll add one more processors that I had already listed in the previous article:

d. npm install grunt-contrib-imagemin –save-dev (minimize images to make them faster loading)

I am adding it to the Gruntfile.js file already created in that article. So if you are doing grunt for the first time, you should read that page first — it is an introductory guide for the first-time user.

How to use Grunt to automate repetitive tasks

Grunt is a task runner. What that means is that it will open a specified program, perform specified tasks on your files, close the program, move to the next task on the list, then repeat until the end of the list. For each project you might lint (proofread) your css and js files, concatenate all your js files so they’ll load once, minimize your css and js files to make them smaller and load faster, compress your image files so they’ll load faster, and create several sizes of a mobile icon. Grunt can automate this process — you no longer need to do each task manually one by one. In this article, we’ll completely set up grunt on our system and make it run one task for us. I’ll explain how I got each piece of the puzzle so we’ll know how to set up the other tasks.

Implementing the Moust Videoplayer Cordova plugin for Android

The Moust videoplayer plugin allows the app to play videos within the app in fullscreen mode.

Unfortunately, the video does not play according to its own proportional size, nor is it confined to the proportion of the div it’s in. It breaks out to fit in the device window. We are given two different options for scaling the video. The following were the results when viewing a 320x200px video in my Nexus 7:

SCALE_TO_FIT_WITH_CROPPING As noted, this doesn’t show the whole video. In landscape, the top/bottom are cropped. In portrait, the left/right sides are cropped. No pinch-to-reduce functionality included.

SCALE_TO_FIT (default) This will stretch/squeeze the video to fit the device’s screen, whether horizontal or vertical orientation.

It makes the most sense to use this player when you want to play back the videos in the same mobile device you shot them with; then they would play back in perfect proportion. If you want your videos to play back reliably across Android devices in their own proportion, I recommend trying Crosswalk. 

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.

Using ADB Logcat to debug your Android app installation

A more descriptive title would be, “Using ADB logcat outside of ADT, Eclipse, or Android Studio to debug your Android app installation errors.” Did you try to install the app in your Android device, but got the annoying “Unfortunately, [app name] has stopped”? If so, then you need to run ADB logcat to find out why. Logcat allows us to read the logs that are automatically running in the background when we run the program. So when the app quits suddenly, we can read the messages along the way and pinpoint when it went south. Here are the steps to implement logcat.

Cordova Android project from start to finish — quick version of workflow

Here’s a cheat sheet for creating a Cordova app from start to finish. No details on this page; they’re all covered elsewhere on my site. My environment for this is a PC machine with Windows 7 Pro, and this is building an Android project. I’m not using Eclipse or Android Studio — they are not needed.

Using NetBeans IDE instead of Eclipse

I’ve decided to ditch Eclipse in favor of the NetBeans IDE. Since we can create signed apks with the Cordova CLI, Eclipse is no longer needed. There are several good replacements if you want a code editor. NetBeans, like several other code-creation editors, offers much more than a text editor can provide. Here is why I am enjoying NetBeans (NB) with Cordova. These are just a few of the features I’ve found handy when using NB. (If you have a coding IDE you favor other than NB, please talk about it in the comments section.) NB works on the PC and Mac.

Using npm in your Cordova Workflow

I decided to try npm (nodejs) and see how it could streamline my workflow. If you’ve been using Cordova or PhoneGap, you probably already have npm installed – you used npm to install either one in the first place. But it can do so much more.

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 

PhoneGap Desktop App Beta

The coolest thing about the PhoneGap Desktop app is that it uses the PhoneGap Developer app to update the app across all of your devices at once as you make changes on the desktop. Just download the PhoneGap Developer app to each of your test devices and with a few simple steps it will mirror your changes on the desktop.

This app is still in its infancy. You still need to use the CLI (Terminal commands) to do the heavy lifting. However, the developer feedback section on GitHub is in full swing as new features are being added every week.

Note that this app uses Adobe PhoneGap commands, not Cordova.

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.

Using PhoneGap CLI 3.6.3 Commands

Here is a rundown on the phonegap commands you can execute with version 3.6.3 PhoneGap CLI (command-line interface) using the Terminal or console.

Submitting an Android App to Amazon

Are you curious about the process of submitting an app to Amazon? These are the steps I took.

According to Amazon’s developer page at https://developer.amazon.com/public/solutions/devices/fire-tablets, you develop Amazon apps with Android Studio Beta, and your project should build by Gradle. My project was neither of these and it still was accepted. I chose an app already made with Cordova CLI, proofed by Eclipse, signed and zipaligned via CLI, and successfully uploaded to Google Play, and uploaded it to Amazon with just a few graphic asset size changes. Here are the steps I took.