Halloween Fun with PhoneGap

About two weeks ago I had a random thought… “Wouldn’t it be fun to build a free Halloween sound effects app using PhoneGap?” (I tend to get excited for any holiday). I had already done a lot of work using sounds in PhoneGap apps with my LowLatencyAudio native plugin, so the groundwork had already been laid.  Next thing you know, I’m searching for sound files (freesound.org is a fantastic resource for creative commons sound effects). Write some JS code here, add some CSS styles code there, and next thing you know I had a complete app. The best part – this app went from idea to App Store submission in under 48 hours (yes, I did sleep during this 48 hour period). Add one more day, and it’s ready for Android.  That is the power of PhoneGap.

Now, I’d like to introduce you to “Instant Halloween”. Instant Halloween is a Halloween-themed sound effects app built with PhoneGap. My app store description is:

Instant Halloween is a fun holiday application to help you scare the pants off of your friends! Use it to create a creepy ambiance, or play scary Halloween sound effects to liven up any situation. This app is best experienced turned up really loud!

Check it out in the video below, and make sure you have your sound turned on!  

It is definitely best when turned up really loud. There’s nothing like an ear-splitting shriek combined with the thumping bass of the heartbeat and thunder in the background. I connected it to a home theater with a decent subwoofer, and it was awesome. Setup some speakers in the bushes next to your front door, and you could use this to really scare some children on Halloween. (I take no responsibility for your actions.)

You can download it for free today for both iOS and Android devices:

 

It supports both phone and tablet form factors, which you can see in action here:

I started out using CSS media queries and Twitter Bootstrap for a responsive layout.  However, I ran into a few issues with column layout and content wrapping, so I ended up going with a totally custom solution.

Of course, just releasing a new PhoneGap app in the ecosytems isn’t enough.  As usual, I’m releasing the full source of this application for anyone to explore and learn from.  All HTML/JS/CSS source code between the iOS and Android versions is exactly the same (note: I’ve submitted an updated build pending approval for iOS to bring it in parity with the Android build).

You can download the full application source code at https://github.com/triceam/Instant-Halloween.  Be sure to also read the README file for complete set up instructions and references to the sound files.   This project uses my LowLatencyAudio PhoneGap native plugin for layered sounds in PhoneGap applications.

Sounds

The audio assets are not redistributed in GitHub due to copyright law. However, all of these assets are available under Creative Commons licenses from freesound.org. Be sure to review the individual licenses for each file before any attempt to use them in any commercial or non-commercial work. You can access specific download links in the readme.

All sound files were converted to 16bit 22050 Hz MP3 files. You can use a higher quality/bitrate if you want. I chose the lower quality due to skipping and memory issues on older/low-end Android devices.

Attribution

The font used within this application is “Creepsville”, available for free. An embedded font was chosen over a hosted web font so that the font will still work in offline scenarios. The TTF font was converted for in-browser use with Font Squirrel Generator.

The “Skull” icon used by this application is by Tim Piper, from The Noun Project

Code Libraries

The following libraries were used within this application:

  • Zepto – for quick and easy DOM manipulation
  • iScroll – for cross-platform touch-based scrolling of visual elements
  • MustacheJS – for HTML templating

Quick Links

Enjoy!

Automated UI Testing in PhoneGap Apps

I normally don’t write posts to talk about a specific product from another company, but this is the first product that I have seen which lets you do automated UI testing in PhoneGap applications, so I figured I’d share…

Automated testing is often a critical step in enterprise application development. I’m sure most everyone out there is familiar with automated unit testing, where you write specific code to test and validate business logic or processes within your application. This can be done on the client side or on the server side, and there are lots of existing tools and languages that can be leveraged for automated unit testing.  For PhoneGap applications, you can write unit tests that evaluate your JavaScript logic to verify proper behavior in your apps using a number of tools, but these only test JS execution and logic.

Automated UI testing enables you to test the GUI of your application. It allows you to make sure proper buttons or controls are displayed wherever they are supposed to be displayed, that they have the proper user interaction, and generally that your application’s user interface is functioning properly. There are numerous tools to enable automated UI testing on the desktop by recording user input and turning that user input into reproducible scripts. However on mobile devices, there aren’t as many options. You can write code to create test scripts for both iOS and Android, but writing these tests for PhoneGap applications could get challenging.

Recently, while attending the 360iDev conference, I was introduced to Telerik’s Test Studio for iOS applications. At first glance, I thought “oh, that’s cool, automated ui tests for native iOS apps”, but doubted it would work with PhoneGap apps. It turns out I was wrong. You can use it to record and automate UI tests for native, web, or hybrid iOS applications. Below is a video of it in action with the “Walkable” PhoneGap app that I recently released.  You can record test scripts, and play them back at any time, and it will evaluate whether the test was a success of failure if the UI responds as it did in the original script.

Test Studio allows you to capture user input in your iOS application and play it back as a script without touching or interacting with the application yourself.  There are just a few steps to get it up and running:

  • Download and install Test Studio application and mobile testing SDK.
  • Configure a testable build of your application – Note: Do not follow the “quick instructions” in the confirmation email you get when you download the SDK – it left out a step, follow these instructions instead.
  • Deploy your app to your device.
  • Launch Test Studio, and follow the UI prompts to “Record A Test”.
  • At any time, access and execute any existing script.

However, be forewarned, it is not seamless and error-free. I’ve noticed in testing my own applications that when executing recorded scripts, Test Studio often attempts to execute steps before my HTML DOM elements actually exist.  This is a common issue in automated UI testing, especially when testing single-page dynamic HTML applications – regardless of whether they are PhoneGap or in a desktop browser. You have to be very deliberate and precise when you record your steps, and at certain points, I had to manually introduce a wait period in the script to enable enough time for my HTML DOM elements to be created.   In Test Studio, there are a few ways you can do this:

  • Introduce a finite “wait” duration
  • Test to see if the HTML elements exist before continuing with script execution

You can also go back and edit/add steps to existing tests.  It can be a painstaking process to record accurate UI test scripts, but can be useful for QA processes for many applications.

Presentations From Dreamforce 2012

I recently returned from a great trip to San Francisco, CA, where I was able to attend Dreamforce – Salesforce.com‘s annual conference.  Dreamforce is probably the biggest conference I’ve ever attended, with 90,000 registered attendees consuming the entire Moscone Center and all of downtown San Francisco. While only a small portion of those attendees were technical/developers, it was still a massive turnout. The best part… Dreamforce attendees are really excited about PhoneGap!  I had a fantastic turnout for my sessions, just take a look below!

So, why all the excitement?

SalesForce.com’s mobile hybrid SDK is built on top of PhoneGap.  This makes consumption of business-critical Salesforce.com data in your mobile applications very easy.   You can also use components from the Salesforce Touch platform inside of PhoneGap applications, and even some of Salesforce’s own mobile applications are even built with PhoneGap (Logger, Dreamforce).

I had several presentations focused on PhoneGap, and had great audiences at all of them.  You can access my presentations from the links below.  Just press the “space” key when viewing a presentation to advance to the next slide.


Introduction To PhoneGap

Description: Interested in developing applications for mobile devices, on multiple platforms? Interested in leveraging your existing web development skills to build natively installed applications? Just looking to expand your skill set? Come join Adobe’s Technical Evangelist, Andrew Trice, to learn about cross platform mobile development and PhoneGap. In this session, you will get an introduction to PhoneGap (Apache Cordova), be able to see example PhoneGap applications, and walk through the process of building your first PhoneGap application.

View Presentation


Data Visualization With Web Standards

Description: Do you have a need to create rich visual data-centric applications, but also have the requirement to use standard web technologies, and don’t know what to do next? Well, you’re in luck! Come to this session to learn about data visualization strategies and frameworks powered entirely by HTML, CSS, and JavaScript.

View Presentation


Native-Like Applications With PhoneGap

Description: Native applications built using web technologies can suffer from the “uncanny valley” effect – where they don’t feel quite right as a native application. In this session we’ll focus on strategies to make your apps feel like native apps, including considerations for a native-feeling UI, platform consistency, and user experience.

View Presentation


Here are details and source code for several of the PhoneGap applications that I showed:

US Census Browser

US Census Browser

Walkable Restaurants

Walkable Restaurants

Fresh Food Finder

Fresh Food Finder

Lil’ Doodle

Lil' Doodle

Enjoy!

PhoneGap, Apple Rejections & UI/UX Guidelines

I’ve recently encountered some grumblings from the development community that Apple has rejected their PhoneGap apps for not being “native enough”.  By itself, that doesn’t surprise me too much – Apple has very strict rules/guidelines on what they will and will not accept into the App Store.  What did surprise me is that people were blaming PhoneGap as the reason.  This accusation is not accurate, and in this post I’ll attempt to clear things up.

Apple & HTML

First, let’s talk about Apple & HTML.   Apple does not reject applications because their user interface is built using HTML.  In fact, many of Apple’s own apps or advertising platforms for iOS are entirely built with HTML/CSS/JS.  For instance, the Apple Store and iAd advertising platform, among others, use HTML as the primary content for the user interface.  Outside of Apple there are many successful apps that have user interfaces built with HTML, including LinkedIn, Wikipedia, the BBC Olympics, and many, many others.  Note: Not all these apps mentioned use PhoneGap, but they do use HTML for the UI.

Apple will reject applications that do not have a user experience that feels like an “app”, does not feel “at home” in the iOS ecosystem, or offers no advantage over a mobile web experience. This applies to all apps, not just apps developed using HTML for the UI. I don’t work for Apple, so I don’t know what their exact approval rules are (beyond these and these) but I can guarantee you that it largely comes down to how the user interacts with the app and how it “feels” on the device.

The iOS User Interface Guidelines from Apple have a very large amount of information about what is and what is not acceptable for Apple’s ecosystem.  In these UI Guidelines, Apple specifically addresses “web-based designs”:

Reconsider Web-Based Designs

If you’re coming from the web, you need to make sure that you give people an iOS app experience, not a web experience. Remember, people can visit your website on their iOS-based devices using Safari on iOS.

Here are some strategies that can help web developers create an iOS app:

Focus your app. Websites often greet visitors with a large number of tasks and options from which they can choose, but this type of experience does not translate well to iOS apps. iOS users expect an app to do what it advertises, and they want to see useful content immediately.

Make sure your app lets people do something. People might enjoy viewing marketing content in the websites they visit, but they expect to accomplish something in an app.

Design for touch. Don’t try to replicate web UI design paradigms in your iOS app. Instead, get familiar with the UI elements and patterns of iOS and use them to showcase your content. Web elements you’ll need to re-examine include menus, interactions initiated by hovering, and links.

Let people scroll. Most websites take care to display the most important information in the top half of the page where it is seen first (“above the fold”), because people sometimes leave a page when they don’t find what they’re looking for near the top. But on iOS-based devices, scrolling is an easy, expected part of the experience. If you reduce font size or squeeze controls to fit your content into the space of a single device screen, you’re likely to end up with unreadable content and an unusable layout.

Relocate the homepage icon. Websites often display an icon that links to the homepage at the top of every webpage. iOS apps don’t include homepages, so this behavior is unnecessary. In addition, iOS apps allow people to tap the status bar to quickly scroll back to the top of a long list. If you center a tappable home icon at the top of the screen, it’s very difficult for users to tap the status bar instead.

In addition to the iOS User Interface Guidelines, Apple’s App Store Review Guidelines have additional tips for getting your apps approved.  Many relate to HTML-based experiences, including:

  • 2.7: Apps that download code in any way or form will be rejected
  • 2.12: Apps that are not very useful, unique, are simply web sites bundled as Apps, or do not provide any lasting entertainment value may be rejected
  • 10.3: Apps that do not use system provided items, such as buttons and icons, correctly and as described in the Apple iOS Human Interface Guidelines may be rejected
  • 10.6: Apple and our customers place a high value on simple, refined, creative, well thought through interfaces. They take more work but are worth it. Apple sets a high bar. If your user interface is complex or less than very good, it may be rejected
  • 12.3: Apps that are simply web clippings, content aggregators, or a collection of links, may be rejected

As I mentioned earlier, I don’t know all of Apple’s rules, but I do know this:

  • If your app is just a web site wrapped in PhoneGap, it will probably get rejected. There are exceptions to this case, but don’t expect that wrapping a web site in a web view will get you into the App Store.
  • If your app requires the user to pinch/zoom/pan to view content (like a web site), it will probably get rejected.  Your apps need to feel like apps.
  • If your app just looks like text on a page with hyperlinks, and has no native-like styles, it will probably get rejected.

App store approval often seems like a blurry line, and is very much subjective to the apps that are being evaluated.

PhoneGap

Now, let’s examine what PhoneGap is exactly, and how it fits into this context… From the PhoneGap FAQ: “PhoneGap is an open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS.”  For a much more detailed description of PhoneGap, see my previous post “PhoneGap Explained Visually”.  PhoneGap acts as a container for user interface elements built with HTML, CSS, and JavaScript.  It wraps your HTML experience and provides the ability to interact with native operating system functionality from JavaScript.  PhoneGap also provides the ability to package your application archive for App Store distribution.

PhoneGap does not make any attempt to build your UI for you. PhoneGap applications are not going to be immediately accepted because the user interface is built with web technologies. PhoneGap does not absolve you from following Apple’s rules/guidelines.

When you build PhoneGap applications, it is up to the designer or developer to build apps that correspond to the UI/UX guidelines for a particular platform/ecosystem.  There are many tools and frameworks that you can use to make your HTML experiences feel more native.   Here are just a few:

This is not an exhaustive or complete list in any way.  If you are aware of other tools or frameworks that I’ve missed, or have more questions on this subject, please leave a comment below.

Introducing “Walkable” – A New Sample App for PhoneGap

I’d like to take a moment and introduce “Walkable Restaurants” (or just “Walkable” as I like to call it), a new application that I built to demonstrate how to create PhoneGap applications using Backbone.js.

Walkable Restaurants provides you with an easy way to find a bite to eat or refreshing drink anywhere in the US. Either select a type of cuisine, or enter a search phrase, and the Walkable Restaurants app will find destinations that are nearby.  Only destinations near your current location will be returned in your search result. If we are able to calculate travel times based upon walking and train schedules, then we will only return destinations within a 20-minute walk. If we are not able to calculate walk time, only destinations within 2.5 miles of your current location will be displayed.

Walkable Restaurants is available today for FREE in both Apple’s App Store and on Google Play, so go download it now!

        Get it on Google Play

Code Organization

The code for this application uses Backbone.js for client-side JavaScript Model-View-Controller patterns. Backbone.js provides separation of concerns (discrete, reusable classes, with separation of view logic from application logic). However, in this example I am not using Backbone’s data binding features – these enable your views to auto-update when your data changes.

Backbone is built on top of Underscore.js, and leverages Underscore’s templating engine to separate HTML string concatenation from application logic.

Open Source

The Walkable Restaurants application source code is freely available and open source on GitHub at: https://github.com/triceam/Walkable-App

Application source code is intended to be used as a learning tool for building PhoneGap applications using backbone.js, but there are no limitations on its use following the MIT license.

Open source libraries used in this app include:

Data Services

All walking/travel time distance calculations are obtained through Travel Time, by Igeolise. This service calculates travel time between geographic locations based upon walking, driving, and mass transit systems.

All point-of-interest (POI) information is obtained through services provided by factual.com. This application uses the U.S. Restaurants data set, which provides information for over 800,000 restaurants across the United States, including location, price ratings, cuisine, and more.

The server-side portion of this application simply aggregates data from Factual and Travel Time, and is developed with node.js, using the expressjs framework.

Also, I almost forgot – Many thanks to Tony Weeg of Revolution Web Design, who I used as a sounding board for UI design & layout ideas for this app!