Rapid List

Rapid List is approved and live in the app store!

My goal was to create an easy to use practical list app for iPhone/iPad. A focus being on enabling the user to modify and use their lists with a minimal number of taps (leaving more time to actually complete things on their to-do list).

Features include:

• Tap checkbox or swipe right to quickly mark complete
• Dynamic favorites list that stays synced to the main list
• Touch item to edit name or quantity
• Alphabetically sorted favorites list

Cross Platform Possibilities

For my first app on the store I chose to draw on my existing experience with Javascript, HTML and CSS, and learn the Apache-Cordova framework. A nice advantage of such a framework is that it allows the app to be cross platform (iOS / Android).

When the app’s ready to be tested on native devices and submitted to the store Visual Studio uses the Apache-Cordova framework to generate an Xcode project file. Xcode can then compile the project for testing and release into the wild. Before testing on iPhone/iPad it is possible to debug and simulate from Visual Studio using the Ripple extension in Google’s Chrome browser. It’s not quite as sophisticated as the simulator on Mac but it’s still impressive and can simulate a number of iPhone/iPad models.

Because there isn’t direct access to the Apple class libraries one of the challenges is making the user experience look and feel native.  It certainly makes sense in a list app for the user to see familiar iOS interfaces such as alert messages and action sheets. There are a few solutions to this:

• Work with Cordova plugins that specifically access the native device capabilities e.g. the alerts
• Create your own user interfaces with Javascript, HTML and CSS in a “native” style
• Go ape, create a revolutionary UI and take your chances that it’ll pass the iTunes submission review. (Apple are keen on developers following their delicious human interface guidelines).

Below is an example of how Rapid List uses the Cordova notifications plugin to access the native iOS alert controller. In this case the user is ready to rock out to the store to pick up 1200 cans of Heinz beans for a flatulent-breakfast-bonanza when they space out and try to add the item twice:

The Javascript looks like this:

if (navigator.notification) { // Override default HTML alert with native dialog
            window.alert = function (message) {
                navigator.notification.alert(
                    message,      // message
                    null,         // callback
                    "Rapid List", // title
                    'mmm I see'   // buttonName
                );
            };          
}

Then the function to submit the form would include the validation check shown below. Here “textTrim” represents a variable storing the name of the item, minus any spaces and all in lower case.

// if item already on list
else if ($('.list #' + textTrim).length) {
    alert(text + " already on list!");
}

Below is the result of the manual approach. Here an “action sheet” style menu has been programmed using JQuery for the animation with the layout in HTML and CSS. It also helps to bring in Apple’s “San Francisco” font (the native iOS system font since iOS9) into Visual Studio .

Although this was an interesting exercise which achieved quite good results there is an action sheet plugin for Cordova out there. The plugin is available on GitHub here created by a smart fellow (no doubt) by the killer name of Eddy Verbruggen.

Data That Persists

When a user modifies their list there needs to be a way for that information to be stored when the app is closed and reopened. Unlike in Swift or Objective-C where you might store persistent app data in NSUserDefaults or CoreData with the Cordova framework I chose to store this data using HTML5’s local storage system.

Each list is treated as an array of dictionaries which are parsed as JSON into and out of local storage like so:

// Arrays for local storage

var itemListArray = new Array();   // main item list
var favListArray = new Array();    // favorite items list

// Function to save item list array 
var saveItemListArray = function () {
    if (window.localStorage) {
        window.localStorage.setItem('itemListArray', JSON.stringify(itemListArray));
    }
}
 

// Function to save fav list array
var saveFavListArray = function () {
    if (window.localStorage) {
        window.localStorage.setItem('favListArray', JSON.stringify(favListArray));
    }
}

Then at the top of the main function the app checks whether there’s data in local storage, if there is it uses that to populate the arrays, if not it creates empty arrays.

// Check if browser has local storage
if (window.localStorage) {
    favListArray = JSON.parse(window.localStorage.getItem('favListArray'));
    itemListArray = JSON.parse(window.localStorage.getItem('itemListArray'));
}
 
// If there is fav list data in local storage (must update favorites first before updating list on load)
if (null !== favListArray) {
    for (i = 0; i < favListArray.length; i++) {
        var html = favorited(favListArray[i].text, favListArray[i].textTrim, favListArray[i].key, favListArray[i].onMain);
        $('.favorites').append(html);
    }
}

// If no fav list data in local storage
else {
    favListArray = new Array();
}
 
// If there is item list data in local storage
if (null !== itemListArray) {
    for (i = 0; i<itemListArray.length; i++) {
       var html = template(itemListArray[i].text, itemListArray[i].textTrim, itemListArray[i].key, itemListArray[i].checked, itemListArray[i].quantity);
       $('.list').append(html);
    }
}

// If no item list data in local storage
else {
    itemListArray = new Array();
}

Conclusion

Moving forward I’ll be focusing more exclusively on Swift and Objective-C development. However hybrid frameworks, such as Apache-Cordova offer a great cross platform solution for iOS and the 10 people who download Android apps… ;^) It’s also useful to develop some app building chops with Javascript/HTML/CSS. These tools can be used even within a native iOS app through WKWebKit. For example, you might choose to parse in JSON from the web then format it in HTML and display it in a WKWebView.

An inescapable downside of using Javascript on mobile (and a huge topic in it’s own right) is dealing with “clicks vs touches” and the issues around the dreaded click lag.  It’s currently a bit difficult to perfect in a Cordova app. In my experience Apple’s native APIs that deal with touches and gesture recognition are much easier to use and more reliable! Rapid List uses a combination of ‘touch start’, ‘touch end’, ‘click’ and JQuery Mobile’s ‘v.click’ depending on the situation to get as responsive a UX as possible.

If you download Rapid List I hope you enjoy using it, making lists, buying some beans etc!

The official support hotline can be reached 24/7!!! (it’s an e-mail) support@swiftcodecomposer.com