Gil Irizarry presents techniques for building lightweight mobile apps quickly using open source tools like PhoneGap, jQuery Mobile, and Android SDK. The presentation includes 5 code examples that demonstrate getting data from online RSS feeds and the device, building interactive UIs, and using local storage. PhoneGap allows developing cross-platform mobile apps using HTML, CSS, and JavaScript that can access device capabilities like contacts.

1. Make Mobile Apps Quickly
Gil Irizarry
Conoa

2. About Me
• Launched VC News Daily app on iOS and Android. Over
1200 downloads so far.
• Owner and lead engineer at Conoa, a graphics and
mobile software firm
• gil@conoa.com
• http://www.slideshare.net/conoagil/

3. About Me
• All examples and sample code in this presentation can
be found at:
– http://conoa.com/hidden/example.zip

4. Why?
• There are nearly 2 million mobile apps available today.
(http://www.pureoxygenmobile.com/how-many-apps-in-each-app-store/ )
• 1.5 years ago, there were 15K new mobile apps released
each week. (http://www.nytimes.com/2011/12/12/technology/one-million-apps-and-counting.html )
• For many, interacting with software means interacting
with mobile devices (or at least devices that run mobile
software).

5. What we will do
• We will learn how to build lightweight mobile apps quickly,
using open source tools.
• The apps will be cross-platform.
• However, we must actually pick a platform on which to
build and test the apps.
• For this presentation, we will work in Android since the
tools are free and easily available. We will do this on
Windows.

6. What we will do
• (Mostly) everything presented today in the Android
environment will apply to iOS, or has an equivalent in that
environment.
• So, let‟s get started…

7. First, we must download Eclipse
• Suggest using Eclipse Classic. Why? Because the larger
Eclipse is geared towards J2EE development, which we
won‟t need.
• Eclipse Classic 4.2.2 (http://www.eclipse.org/downloads/packages/eclipse-classic-422/junosr2)

8. Complete environment
• Android has a complete development environment
available in a single download. However, where‟s the fun
in that? 
• It‟s good to understand how the components are
connected together.

9. Download the Android SDK
• Download and install the Android SDK. The Android SDK
requires that the Java Development Kit (JDK) be installed.
Do that before installing the Android SDK.
• It is a good idea to install the Android SDK into the folder
where Eclipse is located.

10. Install the ADT plug-in for Eclipse
• This plug-in tells Eclipse where the Android SDK is
located.
• From the Android developer site:
Start Eclipse, then select Help > Install New Software.
Click Add, in the top-right corner.
In the Add Repository dialog that appears, enter "ADT Plugin" for
the Name and the following URL for the Location:
https://dl-ssl.google.com/android/eclipse/

11. Configure the ADT plug-in
• Open Eclipse and select the Window menu.
• Open the Android SDK and AVD manager.
• Install all available components.

12. We’re nearly there!
• We still need to define a virtual device so we can run our
apps on the desktop. To do this, we must create an
AVD, Android Virtual Device.

13. Create an Android Virtual Device
• Again open the Android SDK and AVD Manager.
• Select Virtual Devices then select New.
• Create an AVD for Android 2.2 – API Level 8. Call it
AVD2.2. Selecting an early version of Android ensures the
your app will run on as many devices as possible. You
have to decide whether to use new Android features or
support the widest set of devices.

14. OK, let’s create our first project!
• In Eclipse, select New then select Project (not Java
Project).
• In the Select A Wizard dialog, select Android Application
Project.
• You should see a window like this:

15. First Project

16. Example 0 – Hello World!
• Name your project Example0
• Have the package name be com.siggraph2013.example0
• Select Android 2.2 as the minimum and target SDKs.
• Accept all the defaults in the subsequent screens.
• After the project is created, select Run

17. Example 0 – Hello World!
• You have created a native Android app.
• Your project should run in the Android 2.2 emulator
• Take a moment to explore the emulator. It features some
basic apps and a full web browser
• Press Ctrl-F12. This simulates a person rotating the
device and allows you to see your app in both landscape
and portrait modes.

18. PhoneGap
• PhoneGap is a free product, now owned by Adobe, that
allows cross-platform mobile development. It supports
iOS, Android, Blackberry OS, Windows Phone, and more.
• It allows development in HTML, allowing the use of
HTML5, CSS3, Javascript and more.

19. HTML5
• <!DOCTYPE html> signifies an HTML5 file. Note the
difference from HTML4 and XHTML.
• If you don‟t already, follow the XHTML standard when
coding in HTML5. Close your tags! <br />, not <br>

20. HTML5
• HTML5 adds:
– formatting tags: header, footer, nav, etc.
– local storage
– geolocation
– canvas element
– video and audio tags

21. CSS3
• Cascading Style Sheets.
• Codifies what had been loosely defined.

22. Example 1 – Hello World in PhoneGap
• Select the Example1 project in the Package Explorer in
Eclipse.
• Select Run from the top menu bar
• Once the emulator starts and is finished installing the
app, you should see something like this:

23. Example 1 – Hello World in PhoneGap

24. Example 1 – Hello World in PhoneGap
• Find Example1/assets/www/index.html
• Note that it is a standard html file. Make some changes to
it and select Run in the top menu bar to see the effect of
your changes
• The styles are in Example1/assets/www/styles.css. Try
changing those also.

25. JavaScript
• Scripting language that originally was used in web
browser but, with node.js, is now used on servers as well.
• Allows a website to have increased interactivity and
dynamic content.

26. jQuery
• The combination of HTML5, CSS3 and Javascript is quite
powerful, but the introduction of frameworks allows some
great results with less effort.
• jQuery is a JavaScript library that simplifies a lot of
JavaScript coding. It features:
– easier traversal of the DOM
– built-in Ajax functions
– effects and animations
– plug-in architecture

27. Example 2 – Let’s get some data
• Select the Example2 project in the Package Explorer in
Eclipse.
• Select Run from the top menu bar
• Once the emulator starts and is finished installing the
app, you should see something like this:

28. Example 2 – Let’s get some data

29. Wait, what happened?
• Does your emulator match the previous slide? Probably
not. What happened?
• When you create a new Android project with default
setting, internet access for the app is not automatically set.
• AndroidManifest.xml is an inventory of what access an
app requires.
• Remove the comment tag from <uses-permission
android:name="android.permission.INTERNET" /> and rebuild.

30. Example 2 – Under the hood
• This example brings together quite a few components.
• We want to read the Google News RSS feed.
• One way to do that is to use YQL (Yahoo Query
Language). YQL will convert RSS to JSON (JavaScript
Object Notation) via a SQL-like interface. Simply need to
use the RSS URL with the YQL query and pass this to
Yahoo.

31. Example 2 – Under the hood
• $.getJSON(newsqueryUrl, function (yqlObject) {} );
• $ refers to the jQuery object. getJSON is a function in the
object. It will call the URL in the first argument and pass
the result back to the anonymous function in second.
• This is an example of Ajax (not AJAX!). The anonymous
function will be called asynchronously.

32. Example 2 – Under the hood
• $(paragraphID).text(yqlObject.query.results.item[headline
Count].title);
• This is another jQuery statement, which says to change
the text associated with the tag that has the specified id.
• Compare this to:
– var tag = document.getElementById(“headline");
– tag.innerHTML = “some headline text”;

33. Example 3 – Let’s interact
• Select the Example3 project in the Package Explorer in
Eclipse.
• Select Run from the top menu bar
• Once the emulator starts and is finished installing the
app, you should see something like this:

34. Example 3 – Let’s interact

35. Example 3 – Let’s interact
• var newsterm = $("#newsterm").val();
• Here we use jQuery to get the value of the input field, then
use it to construct the URL of the RSS feed.
• Try entering different terms for news searches.

36. Example 4 – Who wants a job?
• Of course, we can use the previous example to connect to
any RSS feed. Example 4 connects to the LA film jobs
feed from Craigslist.
• Select Example 4 from the Package Explorer and run it.

37. Example 4 – jQuery Mobile

38. Example 4 – local storage
• This example uses a new feature of HTML5: local storage.
• With local storage, data is stored on the client.
Persistence rules vary between clients but storage should
persist no less than the current session.
• Local storage is insecure.
• HTML5 also supports SQL Lite databases on the client.

39. Example 4 – local storage
• Local storage is a key-value pair.
• Set:
localStorage.setItem(thisTitle, yqlObject.query.results.ite
m[jobCount].title[0]);
• Get: titleText = localStorage.getItem(thisTitle);

40. Example 4 – jQuery Mobile
• jQuery Mobile is a JavaScript library that emulates the
iPhone look and feel, among others, in a cross-platform
manner.
• Helps to make an HTML page or app feel „mobile‟.
• Offers different styles and customizations.

41. Example 4 – jQuery Mobile
• With jQuery Mobile, “pages” are <div> tags with a single
page.
• Navigate between pages by “calling” the id of the
appropriate <div>.
• A single html file can contain multiple pages.

42. Example 4 – jQuery Mobile
<div data-role="page" id="menu">
<div data-role="header" data-theme="b">
</div>
<div data-role="content">
</div>
</div>
<div data-role="page" id="jobinfo">
<div data-role="header" data-theme="b">
</div>
<div data-role="content">
</div>
</div>

43. Example 5 – Get some phone data
• Let‟s use PhoneGap to access some data from the device.
In this example, we‟ll access the device‟s contact list.
Normally, accessing this information would involve writing
platform-specific code on Android or iOS.
• With PhoneGap, this looks like the HTML DOM:
•
navigator.contacts.find(fields, onSuccess, onError, options
);

44. Example 5 – Get some phone data

45. Example 5 – Get some phone data
• For this project, notice that we have to include cordova.js
in addition to cordova.jar.
• If you don‟t see contact information show up in your
app, it‟s because you don‟t have contacts stored in the
emulator. Go to the main menu, add some contacts, then
run the example again.

46. PhoneGap APIs
• PhoneGap abstracts the details of accessing device
information. It offers a cross-platform API that is
compatible with HTML and JavaScript.
• Through the PhoneGap APIs, you can access:
– Geolocation
– Contacts
– Camera
– Accelerometer
– Compass
– And more…

47. Example 6 – Simple Map App
• We can take advantage of JavaScript APIs now that we
have a framework for using them.
• For example, Google Maps offers a JavaScript API. We
can use it to create a basic map application.
• https://developers.google.com/maps/documentation/javas
cript/

48. Example 6 – Simple Map App

49. Example 7 – Device Access
• We saw how to access contacts. We can access
information from the hardware too.
• For example, battery events can be abstracted as
JavaScript events.
– window.addEventListener("batterycritical", onBatteryCritical, false
);
– window.addEventListener("batterystatus", onBatteryChange, false
);
– window.addEventListener("batterylow", onBatteryLow, false);

50. Example 7 – Device Access
• How do we test this?
• We log into the emulator (!)
• Set hardware properties via remote shell and see the
events get fired.
– telnet localhost 5554 for the Android emulator

51. Example 7 – Device Access

52. I want to run this on my phone!
• A project gets built into an .apk file.
• To run the file on an actual device, export the .apk file by
selecting File, then Export…
• Select Export Android Application.
• To complete the export, you must digitally sign the
application.

53. I want to do all of this on iOS!
• The phonegap-based applications will run on iOS in much
the same way they do on Android. No re-coding needed.
• Join the iOS developer program.
• Download XCode.
• Create phonegap project for XCode.
• Copy your html and image files to your XCode project.

54. Graphics!
• Come to the Graphics on the Go workshop to see how to
draw on a canvas.

55. Thank You!