Certificates and Keystores

Looking to transfer a mobile app to/from a client?

For Android, remember:
"You must use the same certificate throughout the lifespan of your app in order for users to be able to install new versions as updates to the app."

This means you will need to either get the certificate from the previous developer or share the current one with the new developer.
More info: https://developer.android.com/studio/publish/app-signing.html


For Apple: (TO DO)

Ionic - Testing iOS Layout and Styling in Browser

So...I use "ionic serve" to test my mobile app layout and styling a LOT. Then deploy to devices for more testing. It really helps in the development process.

During testing of one of my apps I noticed the iOS version had some different styling issues and for the life of me I couldn't figure it out. To be specific, there was a thin white bar just under the title of the various ionic screens, even the side menus. Weird!

Using Chrome developer tools and using "toggle device mode" to iPhone 6 or some other iOS device type did not give me the same results as an actual device.

Here's what I found after a bunch of Googling...

Add these classes to the BODY of your index.html

class="platform-ios platform-cordova platform-webview"

And Viola! The issues I was seeing on my device were now showing up in my browser.

Now, I have to remember to remove these when I do my build? Yes.

Ionic - My Build Process

I'm not going to say much about the Ionic Framework today, because it's been so awesome for me to use! I love it!

What I want to talk about is the build process I have for mobile apps and how I've tweaked it over the past couple of months. You want to skip all of this stuff here? Go straight over to my Github repo and view the README. It takes you step by step through the installation process and what I've done. Included is a (hopefully) working example.

Here we go with an overview...

My mobile app development environment:

1. Windows 7 laptop
2. Ionic CLI
3. NPM - NodeJS package management
4. Atom - Editor
5. Code Compare - to view diffs in a nice format
6. Android phone with Lollipop
7. iPhone 5 with iOS 9.x

Overview

So I'm on a windows machine. Testing with Ionic and Android is a breeze. I do a majority of my user interface development and tweaking by using the laptop browser. ionic serve is a great thing for this. And with my Android phone connected, I can run it on my phone in a snap. I've never been too keen on the Android emulators, but maybe someday I'll give them another try.

One of the things I recently started doing was making sure I could test my DEV app and also install my LIVE (Production) app as well.

On Android, to do this, you need different package names. 

com.mycompany.myapp might be your package name for the LIVE app. Now if you were to install the DEV app with the same name, you will get a conflict. So you would have to uninstall one version, then install the other. To get around this, and make sure I can have both versions on the phone at the same time, I used the Cordova hooks during the build process to modify the package name.

Now when I do an ionic run, to test the dev version on my phone, the hook automatically changes the package name to com.mycompany.myapp1234. It's always with the 1234, just because.

Also the App Name is changed to include DEV at the end. This is done so that the icon I see when it is installed has "DEV" at the end. I can have both the DEV and PROD version of my apps installed side by side and I know exactly which is which.

Then, when I do an ionic build, the hook uses the LIVE package name and app name. There's also some other magic in there happening, more on that later.

iPhone / Build

The big thing here is...how do I build and test for my iPhone? Those Mac users have it easy eh!? You can install both iOS and Android development tools. ;)

1) Ionic Package - get to know it, it's pretty sweet. It's been in ALPHA state for awhile, but I haven't had any issues with it. I also haven't tried it with custom plugins or know if it works with custom plugins.
2) AppBlade or HockeyApp. - Both services have their differences and positives, but if I want to test on my iPhone I need one of these. I'm currently using both to see which I like. Another blog post someday...

Option:
I've also used PhoneGap Build in the past. Once you get through the headache of figuring out their config.xml setup, everything is a little easier to test with because you don't need AppBlade or HockeyApp. Once the build is complete, you can just scan the QR code on the apps build screen and the app installs on your phone. I've used it for both Android and iOS testing. Also, it's one upload, so you can build for both Android and iOS at the same time. Ionic Package requires one command per build you want to do. Not a problem.

So....

1. I upload the mobile app code to Ionic Package
2. Download the IPA
3. Upload the IPA to AppBlade/HockeyApp
4. Open my iPhone and run either AB/HA
5. Install the app and test

The process for PhoneGap Build is shorter:

1. Zip the source (one command to package it in a format for PGB)
2. upload to PGB
3. Scan the QR code with my phone - this installs it

Now this works great for my own personal mobile apps. If you have a client, then AppBlade/HockeyApp is definitely necessary! Lots of features to track devices, users, app builds etc.

Version Numbering

That nifty Github repo I mentioned earlier...it has some commands that help increment the mobile app version number as well.

So every time I do an ionic build, the patch version number is incremented automatically and placed into the config.xml of the ionic app. There are extra commands to increment the major or minor version numbers too. This is a pretty sweet part of the process too. No longer needing to worry about the version number. Also there is a JavaScript file generated that you can include in your app so that you can display the version number somewhere in your app. Example in the git repo.

Gotcha's/ Watch Outs

Ionic Package - as awesome as it is, it is still in ALPHA. You can have an unlimited FREE apps building on it (so far) but I have no clue what their pricing schema will be. That's because they also don't know yet. :) Also, iOS or Android builds...if you have a Windows phone, I haven't seen support for that yet.

PhoneGap Build - Having said that about Ionic Package......I have had far more problems with the $10 / month PhoneGap Build than I ever have had with Ionic Package. Not just with the config.xml issues, but also some of my builds just being hung in neverland, spinning away, and never completing with no signs of errors or anything. Oh, you can contact support, but it takes a day or two for them to get back to you. Also, occasionally the whole build system is down for whatever reason and no one can do a build. GOOD: PGB supports Windows phones and others as well.

My Github Repo - lionsdenmobile-ionic-package
Haven't tested the hooks and scripts on iOS.
Also, there are instructions in the README that tell which files you will need to merge. The properties in the package.json you will need to change are:

"name": "My App Name",
"version": "0.0.1",
"appId": "com.mycompanyname.myapp"

This isn't so much a problem as it is just a "be aware" type of thing.

Summary

I've started using this build process on all my apps, at both home and at work. I'm still tweaking it and trying to make it better.

My First AngularJS Filter

I'm working on a web project which utilizes AngularJS and today I setup my first search filter on a list of items.

Dang it was simple!!!

The basics:

1. A <select> list of items populated using a JSON data structure
2. An <input> field used to filter the list

Here is the main article I used for setting this up: http://sarahbranon.com/post/69604997957/fun-with-angularjs-filters-part-1-the-filter. It has a lot of great information so read up!

Now that I've learned that, I can apply it to my mobile apps to filter the many "list-based mobile apps" I have built with Ionic and AngularJS. :)

Issues I ran into?

• Initially the search filter was displaying more items than it should because it was filtering on any string that I was entering. It looked throughout the entire JSON structure to match that string.
• FIX: pass a model which is an object instead of a string (About half way down Sarahs article)

<input ng-model="search">
<li ng-repeat="friend in friends | filter:{ name: search }">
  {{friend.name}}
</li>

My First Game

This was fun. And a nice little experiment.

I made my first cross-platform game using Phaser.io. It's a Flappy Bird clone called Jumpy Kangaroo. Here is a link:  http://onelink.to/pajd5s. Now available for Android, but it could be on the App Store soon too. I just need to do more testing with the screen variations first.

I did the basics and released it...hoping to add more to it as I go.

I could use an iPhone 5 or 5S sometime. My old iPhone 4 just doesn't cut it for testing out my new apps. I can't upgrade to the latest iOS either, which bites.

Ionic - Testing AngularJS http PUT in browser

I'm posting this because I don't recall having this issue before, but when running ionic serve to test my app in the local browser, I was unable to successfully execute a PUT to update a piece of content in my browser.

PUT was working fine in POSTMAN, so my CMS was configured properly.
GET's were working just fine, I was able to display content from a web service.

POST and PUT would not work. I would get an Error returned, but with no error message and status code of 0. Weird.

Then I eventually ran the app on my device and it worked just fine!!! Huh?!?!?  Yep, I executed the PUT and it worked ok.

At the time of this error/writing, I'm running Ionic 1.3.11

[UPDATE 01/13/2016] - I fixed this a long time ago, but though I should post the info. The problem was due to my server side configuration.

Adding the following for NGINX worked for me:

Access-Control-Allow-Origin: *

PhoneGap navigator.notification 'prompt' is undefined

I was using 3 plugins (Media, Device, Notification) and Notification was the only one NOT working. Notification also happened after device was ready (I could play media and get device info, then try notification and nothing).

The issue I had was with the way the Phonegap CLI was adding plugins.

There was no entry in www/corodova_plugins.js for Notifications, but there was for Media and Device
There was no SRC in android/src/org/apache/cordova for Notification, but there was for Media and Device.
There was no JS src in www/plugins for dialogs, but there was for media and device.

Check those locations to see if you have the Notifications info.

I tried adding the plugin several times with various commands.  config.xml DID include:
    <feature name="Notification">
        <param name="android-package" value="org.apache.cordova.dialogs.Notification" />
    </feature>

{PROJECT.DIR}/plugins DID have dialogs as well as media and device SRC.

WARNING: running "phonegap build android" would place the correct source in the folders mentioned about, but it WIPES OUT all of your project src in assets/www taking it back to the default.

My remedy: Create a brand new skeleton project, add the plugins you need, do a build for the platform you need, then compare the source between your skeleton Phonegap app and your Real app to see the differences.

Only way I can see now to fix this as it appears that the PhoneGap CLI is "broken" because I don't believe it is adding plugins correctly to an already existing app.

Android Studio

Well I messed up my Eclipse install.  I upgraded too many things (using Eclipse's internal updater) and now my Android projects will not build.

About the same time, it was announced that Android Studio was being released (for free), so I thought I'd give that a try.  I've heard good things about IntelliJ before, so I assumed it would be a good piece of software.  YEP!  Super easy to setup.  Easy to use.  Git integration.   No issues so far, but I'll be sure to note anything that comes up.

UPDATE 08/06/2013:  I like Android Studio a lot for development.  I must say some of the features could be cleaned up.  For example, I like using the NetBeans code formatting better, which is a minor thing.

About This Blog

My trials, tribulations, and successes over developing with PhoneGap.

Using:

• Windows
• PhoneGap
• PhoneGap Build
• Android Studio
• Git - service by Repository Hosting

Apps I have released:

App Name	Android	Apple
2 For Deals	Yes	In progress
My Childs Words	Yes	In progress
Don't Eat Out	Yes	In progress