Native Mobile App Development using Appcelerator

There are a few native mobile app frameworks out there that will compile to both Android and iOS platforms.  I settled onto Appcelerator because it is free, it uses JavaScript, it provide a good IDE with build management, and it has great documentation.   It has been a learning curve for me because I’m not super familiar with mobile app development.   The other challenge was the advanced object oriented use of JavaScript.  Normally I just use simple JavaScript classes to manage the UI features of specific web pages.  Never before have I used JavaScript as the sole language to an application.

Quick Success:

Within a couple hours I was able to get the Appcelerator IDE setup, attach the Android API, and deploy a ‘Hello World’ application to a Kindle Fire.  I suggest using a native device to test applications since the Android emulator is uber slow.  The most recent release of Appcelerator also offers remote application debugging.

I’m in the process of using REST APIs provided by ShelfReliancePro to create a mobile app for that web application.  So far it has gone pretty well and was able to load data from the API into the Android App.

Advertisements

Geolocating and Mapping Points with Nominatim and Leaflet

I wanted to add a map feature to http://www.shelfreliancepro.com but had no budget to pay for map apis or libraries. The solution I found was http://nominatim.openstreetmap.org and http://leafletjs.com/.  Nominatim allows you to do all kind of geo-locating, address queries, and location queries.  Leaflet is a simple map interface for plotting points.  Leaflet works very well on mobile devices.

When users would update or add an address to the system, I would mark the address so I knew it needed to have it’s latitude and longitude updated via nominatim.  I run a scheduled task every 10 minutes to find addresses that need an update and update them.

Here’s how it turned out:

map

Java JavaScript and CSS combining and compressing

I tried a few JavaScript combining and compression servlets and settled on Granule: https://github.com/JonathanWalsh/Granule Though the documentation is sparse, I was easily able to set it up and get it working. I encountered one problem it had with not dealing with root paths in css so I changed all mine to relative paths and it worked fine. I have yet to find out how to enable and disable debug modes with it, but sorting through the source code will hopefully reveal how to do that. My page load times have improved dramatically and allows me to keep my scripts separate for development.

How to compare two JavaScript objects for equality

The Javascript === operator compares references to JavaScript objects and not the ‘deep’ data inside of them. With some searching, I found a useful utility function that will recursively evaluate 2 JSON objects for equality.  jQuery should have a utility function that does this.  I couldn’t find one.

var Utility = {
   areEqual: function(x, y) {
        for (var p in y) {
            if(typeof(y[p]) !== typeof(x[p])) return false;
            if((y[p]===null) !== (x[p]===null)) return false;
            switch (typeof(y[p])) {
                case 'undefined':
                    if (typeof(x[p]) != 'undefined') return false;
                    break;
                case 'object':
                    if(y[p]!==null && x[p]!==null && (y[p].constructor.toString() !== x[p].constructor.toString() || !y[p].equals(x[p]))) return false;
                    break;
                case 'function':
                    if (p != 'equals' && y[p].toString() != x[p].toString()) return false;
                    break;
                default:
                    if (y[p] !== x[p]) return false;
            }
        }
        return true;
 }

Usage:

var a = {'a':2, 'b':{}};
var b = {'a':2, 'b':{}};

if(Utility.areEqual(a,b)) {
    alert('It worked!');
}

JavaScript nested function scope issue

I came across a bizarre issue with JavaScript. I had some code generate an infinite loop in Firefox, but not in Chrome. I had some code that looked like this:

function someFunction() {
     for(i=0;i<chatIds.length;i++) {
          if(!isIn(chatIds[i], currentChatIds)) {
               startChat(chatIds[i], "join");
          }
     }
}

function isIn(value, array) {
     for(i=0;i<array.length;i++) {
         if(value == array[i])
              return true;
     }
     return false;
}

The first function invokes the second function in a for loop controlled by the ‘i’ variable. In Firefox, the second function would use the value of ‘i’ from the first function and throw me into a browser crashing loop. Changing the second function’s for loop to use ‘j’ or a different variable to control the loop solved the problem.