make cross-platform mobile apps quickly - siggraph 2014

75

Upload: conoagil

Post on 06-Dec-2014

258 views

Category:

Mobile


0 download

DESCRIPTION

Learn how to make mobile applications with the PhoneGap framework

TRANSCRIPT

Page 1: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Page 2: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Make Cross-Platform Mobile Apps Quickly

Gil IrizarryConoa

Your logo on white centered in

this space.

Page 3: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

About Me

• Launched VC News Daily app on iOS and Android. Over 3000 downloads so far. Also, check out @wazareapp.

• Owner and lead engineer at Conoa, a graphics and mobile software firm

[email protected]

• http://www.slideshare.net/conoagil/

Page 4: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

About Me

• All examples and sample code in this presentation can be found at:

• http://conoa.com/hidden/sig2014examples.zip

Page 5: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Why?

• There are nearly 2 million mobile apps available today. http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/e#lotsofapps

• In 2013, there were approximately 60 billion app downloads. http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/e#appdownloads

• For many, interacting with software means interacting with mobile devices (or at least devices that run mobile software).

Page 6: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

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.

Page 7: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

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…

Page 8: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

First, 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)

Page 9: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

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.

Page 10: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

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.

Page 11: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Install the ADT plug-in forEclipse

• This plug-in tells Eclipse where the Android SDK is located.

• From the Android developer site:

Start Eclipse, then select Help > Install New SoftwareClick Add, in the top-right cornerIn 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/

Page 12: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Configure the ADT plug-in

• Open Eclipse and select the Window menu.

• Open the Android SDK and AVD manager.

• Install all available components.

Page 13: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

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.

Page 14: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Create an Android VirtualDevice

• 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.

Page 15: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Let’s create a project

• 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:

Page 16: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 1 – Hello World inPhoneGap

Page 17: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 1 - Hello World

• 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.

Page 18: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

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.

Page 19: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

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>

Page 20: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

HTML5

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

Page 21: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

CSS3

• Cascading Style Sheets.

• Codifies what had been loosely defined.

Page 22: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

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.

Page 23: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

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

Page 24: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 2 - Let’s Get 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:

Page 25: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 2 - Let’s Get Data

Page 26: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

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.

Page 27: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

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.

Page 28: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

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.

Page 29: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 2 - Under the hood

• $(paragraphID).text(yqlObject.query.results.item[headlineCount].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”;

Page 30: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 3 - More News

Page 31: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 3 - 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.

Page 32: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 3 - local storage

• Local storage is a key-value pair.

• Set: localStorage.setItem(thisTitle, yqlObject.query.results.item[jobCount].title[0]);

• Get: titleText = localStorage.getItem(thisTitle);

Page 33: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 3 - 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.

Page 34: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 3 - 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.

Page 35: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 3 - 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>

Page 36: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 4 - Access phoneData

Page 37: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 4 - Access PhoneData

• 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);

Page 38: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 5 - Simple Map app

Page 39: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 5 - 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/javascript/

Page 40: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

HTML5 Canvas

• HTML5 includes a new <canvas> element.

• Canvas allows the rendering of 2D graphics via some low-level primitives.

• It does not include a scene graph API, so you must store rendering information yourself for redrawing a scene.

Page 41: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

HTML5 Canvas

• Canvas supports:• Basic shapes• Images• Transparency• Compositing• Transforms• Basic animation

Page 42: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 6 - Simple Drawing

• This example gives a sense of what can be drawn.

• Canvas uses a drawing system similar to Adobe PostScript or Mac OS QuickDraw. This is not surprising considering that Apple developed the initial implementation of canvas before it became a (somewhat) standard.

• Obtain the graphics context of the canvas for issuing drawing commands

Page 43: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 6 - Simple Drawing

Page 44: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Canvas Drawing

• beginPath() … fill() or stroke () paradigm

• moveTo() / lineTo() for paths

• arc() for full or partial circles

• bezierTo() for complex curves

• fillText() / strokeText() for text

Page 45: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Canvas Drawing

• drawImage()

• colors, either by name or hex values

• gradients, linear or radial, and patterns

• stroke styles, including stipple patterns and line end caps

• push and pop transformations and state

Page 46: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Canvas Coordinate System

• (0, 0) is in the upper left corner of the canvas.

• Increasing y is “down” from the screen’s perspective. Increasing x is to the right.

(0, 0)

(0, height)

(width, 0)

Page 47: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Let’s make a pattern

• Find an image from the internet and save it to• Example6/assets/www folder

• Change this code:• context.fillStyle=gradient;• context.beginPath();• context.arc(55,155,40,0,2*Math.PI);• context.fill();

• To this code:

Page 48: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Let’s make a pattern

• var img = new Image();• img.src = 'clouds.jpg'; // use your image name here• img.onload = function (e) {

• var pattern = context.createPattern(img, 'repeat'); • context.fillStyle=pattern;• context.beginPath();• context.arc(55,155,40,0,2*Math.PI);• context.fill();

• };

• Shapes that you fill will become masks for the underlying pattern.

Page 49: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 7 - Touch

• Everything so far has been static.

• JavaScript has an event system. We saw one in the previous example: onload

• Let’s use other events to add some interactivity.

Page 50: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 7 - Touch

Page 51: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Touch Events

• HTML5 canvas adds new events for devices:• ontouchstart• ontouchmove• ontouchend

• Note that events come back as arrays. Why?

• Because HTML5 supports multi-touch. We can have multiple simultaneous move events.

Page 52: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Touch Events

• Important to remember that event coordinates triggered by the canvas are relative to the full window.

• Events need to be converted to the canvas coordinate system in order to be relevant to the canvas.

• Look at function windowToCanvas (canvas, x, y) in Example 7 source code (found in assets/www folder).

Page 53: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Previewing

• Many of the previous examples work equally well as a PhoneGap-powered mobile app and as a web page. If you haven’t already done so, trying running assets/www/index.html in a browser.

• However, by incorporating touch events, we must run Example 7 and other examples incorporating touch in the mobile emulator.

Page 54: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 8 - Paint & Menus

Page 55: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Images over the network

• To access images over the network (or any data at all), remember that network access must be enabled. On Android, network access is not the default. It must be enabled in the AndroidManifest.xml file:

• <uses-permission android:name="android.permission.INTERNET" />

Page 56: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Saving and restoring state

• save() pushes the current context onto a stack.

• In addition to the current transformation, attributes are also pushed.

• In the current example, because the text was given a shadow, the shadow applies to the paint object. If we want only the text to have a shadow, we could put the text rendering code inside a save() / restore() block.

Page 57: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 8 - Paint & Menus

• Since we can render images into the canvas, we can use a set of images and canvases to create menus.

• We could also draw into the canvases to render the menu options dynamically.

Page 58: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 8 - Paint & Menus

• The example allows the color and size of the paint brush to be modified

• Separate canvases are used for the icon images, and touch event handlers are attached to the canvases. How else could we accomplish this?

• The image selector and scale checkbox are standard HTML controls that trigger JavaScript events. We could make <div> elements with <img> elements containing the icons, and put event handlers on the images.

Page 59: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Animation

• Although we’ve added some interactivity, the examples so far have been a little static.

• Let’s add some animation.

Page 60: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 9 - Clock

Page 61: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Animation

• This example queries the time from the JavaScript Date() object and draws the hands accordingly.

• The canvas is cleared each frame and redrawn.

• If you haven’t already, try running the Graphics Example 8 in a browser (by running assets/www/index.html)

• There is something consistently missing in both the emulator and the browser. What is it?

Page 62: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Animation

• The answer is flicker. The same canvas is cleared and redrawn each frame, yet there is no flicker.

• This is because the canvas is inherently double-buffered.

• You could implement your own double buffering scheme because HTML5 allows drawing to off-screen drawables. You could draw off-screen, then swap the off-screen memory to the on-screen canvas. However, HTML5 canvas does this more efficiently.

Page 63: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Doing Things the Right Way

• We have been cutting some corners, so let’s do things the right way.

• PhoneGap should load the JavaScript when it is ready, otherwise you potentially have the problem similar to when you reference an image before it is loaded.

• Set a device ready event:• document.addEventListener("deviceready", fnName, false);• fnName is the name of the event handler

Page 64: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Doing Things the Right Way

• Setting the device ready event requires that the device get set in the config.xml file. This file is not in a default Eclipse project, so it needs to be added manually. It goes in the /res/xml folder.

• <feature name="Device">• <param name="android-package”

value="org.apache.cordova.Device" />• </feature>

Page 65: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Doing Things the Right Way

• Look at the clock app. Also, try running it in a browser and look at it there.

• If you look closely enough, you’ll see a stutter on the second hand. This is because setInterval() is a general suggestion to the canvas on when to redraw and not a hard commitment.

• There is a better way: requestAnimationFrame()

Page 66: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Doing Things the Right Way

• requestAnimationFrame() is designed to deliver 60 FPS and is made for games or animation.

• However, there is a problem. Many browsers don’t implement it!

• Remember that HTML5 is still not a standard!

Page 67: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Doing Things the Right Way

• webkitRequestAnimationFrame() for Chrome, mozRequestAnimationFrame() for Firefox.

• Search for ‘robust polyfill code’ to find ways to deal with this.

• http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

Page 68: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Doing Things the Right Way

• Unfortunately, Android and iOS do not support requestAnimationFrame(), at least at the versions we’ve been supporting in these examples.

• In this case, the polyfill code reverts back to setInterval() or setTimeout().

• Another solution is to support only later versions of the OS.

Page 69: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Doing Things the Right Way

• http://caniuse.com/requestanimationframe

Page 70: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Doing Things the Right Way

• Let’s stop the main Android activity from showing up before the HTML loads.

• <application android:theme="@android:style/Theme.NoTitleBar" >

Page 71: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 10 - Bouncing Balls

Page 72: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Playing Sound

• In the latest example, a sound is played when a ball bounces.

• To enable this, remember to set the correct permissions in both AndroidManifest.xml and config.xml.

• Create a PhoneGap media object. This requires the use of cordova.js in addition to cordova.jar.

Page 73: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Example 11 - Space

Page 74: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Sprites

• HTML5 does not support sprites natively but, now that we know how to do animation and draw images, we can simulate them.

• drawImage() allows a subset of an image to be drawn.

• Every so many frames, we can draw a different part of a larger image. The larger image can be made up of different sprite images.

Page 75: Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Thank You!