Category Archives: Android

PhoneGap Presentations from HTML5DevConf

I was  searching the web earlier this week for an older presentation from a few months back, and just happened to stumble across my recent presentations from HTML5DevConf from this past October. Looks like the videos were posted in November, but I’m just seeing them now. I had two sessions: Designing and Architecting PhoneGap and Mobile Web Apps and Getting Started with PhoneGap and Cross-Platform Mobile Development, and if you weren’t able to attend them, you’re still in luck! Here are the videos from those sessions:

Designing and Architecting PhoneGap and Mobile Web Apps

Tired of Hello World? In this session, we explore best practices to build real-world PhoneGap applications. We investigate the Single Page Architecture, HTML templates, effective Touch events, performance techniques, modularization and more. We also compare and contrast the leading JavaScript and Mobile Frameworks. This session is a must If you plan to build a PhoneGap application that has more than a couple of screens.

Getting Started with PhoneGap and Cross-Platform Mobile Development

Unfortunately, I ran into network issues which prevented some of my samples from working in this one, but you’ll still be able to get the point.

HTML has emerged as a powerful alternative to “native” to enable cross-platform mobile application development. In this session, you learn how to leverage your existing HTML and JavaScript skills to build cross-platform mobile applications, how to access the device features (camera, accelerometer, contacts, file system, etc) using JavaScript APIs, and how to package your HTML application as a native app for distribution through the different app stores.

You can also check out highlights from HTML5DevConf and find my presentation assets and materials online here.

PhoneGap & Hardware Session Video now Available

The recording for my session “PhoneGap and Hardware” from PhoneGap Day back in July is now available! Be sure to check it out. There were apparently some issues with the audio, but you can still hear everything.

I’d like to express a huge Thank You to everyone who attended, and to everyone who watches this video!

Below are the sample projects I showed in the presentation, including source code. However, keep in mind that all of these examples were written before PhoneGap 3.0. The native plugin syntax, and inclusion methods have changed.

Pressure Sensitive Sketching in PhoneGap

In this example, the pressure-sensitive Pogo Connect Stylus uses a low energy Bluetooth 4 connection to relay touch/pressure information back to the PhoneGap application. This makes for a unique drawing and sketching experience powered with the HTML5 Canvas element. I’ve written about this example previously… Check out the video below to see it in action, and read the blog post for technical details and source code.

Moga Gamepad

The second example that I explored is a PhoneGap native plugin that is used to handle input from a Moga game controller inside of a PhoneGap application on Android.

This implementation is intended to be a proof of concept demonstrating how you could integrate the gamepad within your application. It currently only supports input from the joysticks (axisX and axisY) and the A and B buttons, and it does not handle all possible input from the controller.

This implementation is adapted directly from the com.bda.controller.example.demo.listen example from the Moga developers SDK samples available for download at: http://www.mogaanywhere.com/developers/

Check out the video below to see it in action:

The game is based on the Universe prototype that was used as a sub-game inside of the MaxMe app for the recent Adobe MAX conference. I make no guarantees about the code for this game, it was in a huge rush!

Quick Links

New Version of My Halloween PhoneGap App

With Halloween less than a month away, I figured it’s about time to update my “Instant Halloween” PhoneGap sound effects app. I’m happy to say that the latest version is now out for both iOS and Android. It has a few new sounds, a new UI style, and has been updated for iOS 7. I also updated the low latency audio plugin so it now supports PhoneGap 3.0 method signatures and supports the command line tooling for installation.

halloweenThis app is fantastic for scaring people… Just hook it up to really loud speakers, and start playing the sounds to your heart’s content. It’s got everything from background/ambient loops to maniacal laughter, screams, ghosts, zombies, and other spooky sound effects.

It is available now, for FREE, for both iOS (5.0+) and Android (4.0+).

 

So what has changed in this version?

First, I updated the app to support iOS 7. For the most part, this is a non-issue. PhoneGap apps are based on web standards, and HTML/JS/CSS work pretty much everywhere. However, you do have to account for a few minor changes. One is that the OS status bar now sits over top of the application. You’ll need to update your UI on iOS 7, so there are no UI issues. Check out this post from Christophe Coenraets for details regarding creating PhoneGap apps for iOS 7.

iOS 7 also introduces some new UI design paradigms and guidelines. I simplified the user interface, got rid of all textures, and tried to make things as simple and minimalistic and native-feeling as possible. I also got rid of iScroll for touch-based scrolling – both the iOS and Android versions now use native inertial based scrolling from the operating system. This is the reason that the new Android version is only Android 4.0 and later, but it is also the reason that the app feels much closer to a fully native experience.

I updated the low latency audio native plugin to support PhoneGap PhoneGap 3. There were two parts to this: First, there is the updated method signature on the native interfaces. I just took the old plugin, and updated it for the new method signature. The new method signature was actually introduced a while back, but I never updated the plugin for it. Second, I added the appropriate XML metadata to enable CLI-based installation of the plugin for both iOS and Android. Take a look at the PhoneGap documentation for details on creating PhoneGap native plugins and plugin.xml.  Also check out this tutorial from Holly Schinsky for help creating native plugins for Android.

You can check out the full source code for the low latency audio native plugin for both iOS and Android, plus the plugin.xml specification on github at: https://github.com/triceam/LowLatencyAudio

To include it in your own PhoneGap 3.0 (or later) projects, you can just add it from the PhoneGap command line interface:

phonegap local plugin add https://github.com/triceam/LowLatencyAudio

Of course, as with all of my PhoneGap apps, this one is open source too. You can check out the full app source (minus the audio assets) at: https://github.com/triceam/Instant-Halloween

In the process, I also ran into an unexpected issue with Android deployment… Back in the spring I had a corrupted hard drive. I was able to recover *most* of my data, and I thought I had all of my app signing keys. It turns out that for Android, your apps must not only have the same signing keys, but also the same key store when you sign the APK files, or else Google won’t let you distribute the Android APK file as an update; it must be a new app. It turns out that I had recovered the key, but not the keystore. So, I had no choice but to distribute it as a new app.

Go download the free apps, get the source code, and start building your own PhoneGap apps today!

PhoneGap Day: PhoneGap & Hardware

I’d like to express a huge Thank You to everyone who attended PhoneGap Day in Portland last week, and to Colene and the team that put everything together! The day was loaded with fantastic presentations, and great community interaction… tons of information, tons of great questions, and tons of great people (oh, and beer – it wouldn’t be PhoneGap Day without beer).

My session was about the integration of PhoneGap with hardware. Basically, it was an overview and exploration how you can use native plugins to extend the capabilities of PhoneGap applications and interact with device peripherals. This enables new interaction paradigms, and helps evaluate and evolve what is attainable with web-related technologies.

In this session, I covered two use cases… The first use case is the use of a pressure-sensitive stylus for interacting with a PhoneGap application on iOS. The second use case is integration of a Moga gamepad with a PhoneGap application on Android. In both cases, the application experience is augmented by the peripheral device, which changes how it is possible for the user to interact and engage with the application content and context.

Pressure Sensitive Sketching in PhoneGap

In this example, the pressure-sensitive Pogo Connect Stylus uses a low energy Bluetooth 4 connection to relay touch/pressure information back to the PhoneGap application. This makes for a unique drawing and sketching experience powered with the HTML5 Canvas element. I’ve written about this example previously… Check out the video below to see it in action, and read the blog post for technical details and source code.

Moga Gamepad

The second example that I explored is a PhoneGap native plugin that is used to handle input from a Moga game controller inside of a PhoneGap application on Android.

This implementation is intended to be a proof of concept demonstrating how you could integrate the gamepad within your application. It currently only supports input from the joysticks (axisX and axisY) and the A and B buttons, and it does not handle all possible input from the controller.

This implementation is adapted directly from the com.bda.controller.example.demo.listen example from the Moga developers SDK samples available for download at:: http://www.mogaanywhere.com/developers/

Check out the video below to see it in action:

The game is based on the Universe prototype that was used as a sub-game inside of the MaxMe app for the recent Adobe MAX conference. I make no guarantees about the code for this game, it was in a huge rush!

Quick Links

If you want to see more images from PhoneGap Day, check out my Flickr photo set from the event.

Fresh Food Finder Featured in SELF Magazine

I am very excited to share that the Fresh Food Finder PhoneGap application which I built last summer was recently featured in the June 2013 issue of SELF Magazine. This app was built as a demonstration/sample application for PhoneGap, but has gained popularity for being an easy way to find farmers markets by leveraging the USDA farmers markets directory and has appeal to the general public.

In fact, I’ve seen so many downloads that I am working on an updated version of it based on user feedback, with more recent data (live services instead of embedded), and will be leveraging the awesome topcoat.io CSS framework for styling.

Fresh Food Finder in SELF Magazine
Fresh Food Finder in SELF Magazine

SELF Magazine has huge readership numbers (almost 1.5 million monthly subscribers according to Wikipedia). While it was just a very small callout in the magazine’s calendar, this has driven both app downloads and visitors to my blog (peaked at 348 downloads per day)!

App downloads May 1- July 8
App downloads May 1- July 8

This also brought the app higher up in the iOS market ranks (peak #57 in the “Food & Drink” category):

App store ranking May 1- July 8
App store ranking May 1- July 8

You can download the Fresh Food Finder app today in the following markets:

Grab the source code, read about how it was all put together, and see it in action in the video below:

Enjoy!