SlideShare a Scribd company logo
Make Cross-Platform Mobile Apps Quickly
Gil Irizarry
Conoa
Your logo on
white centered in
this space.
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
• gil@conoa.com
• http://www.slideshare.net/conoagil/
About Me
• All examples and sample code in this presentation can be
found at:
• http://conoa.com/hidden/sig2014examples.zip
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).
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.
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…
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)
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.
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.
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/
Configure the ADT plug-in
• Open Eclipse and select the Window menu.
• Open the Android SDK and AVD manager.
• Install all available components.
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.
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.
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:
Example 1 – Hello World in
PhoneGap
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.
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.
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>
HTML5
• HTML5 adds:
• formatting tags: header, footer, nav, etc.
• local storage
• geolocation
• canvas element
• video and audio tags
CSS3
• Cascading Style Sheets.
• Codifies what had been loosely defined.
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.
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
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:
Example 2 - Let’s Get Data
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.
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.
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.
Example 2 - Under the hood
• $(paragraphID).text(yqlObject.query.results.item[headlineCou
nt].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”;
Example 3 - More News
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.
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);
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.
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.
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>
Example 4 - Access phone
Data
Example 4 - Access Phone
Data
• 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);
Example 5 - Simple Map app
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
/
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.
HTML5 Canvas
• Canvas supports:
• Basic shapes
• Images
• Transparency
• Compositing
• Transforms
• Basic animation
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
Example 6 - Simple Drawing
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
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
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)
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:
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.
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.
Example 7 - Touch
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.
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).
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.
Example 8 - Paint & Menus
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" />
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.
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.
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.
Animation
• Although we’ve added some interactivity, the examples so far
have been a little static.
• Let’s add some animation.
Example 9 - Clock
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?
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.
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
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>
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()
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!
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/requestanimatio
nframe-for-smart-er-animating
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.
Doing Things the Right Way
• http://caniuse.com/requestanimationframe
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" >
Example 10 - Bouncing Balls
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.
Example 11 - Space
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.
Thank You!

More Related Content

What's hot

Developing accessible android applications
Developing accessible android applicationsDeveloping accessible android applications
Developing accessible android applications
Renato Iwashima
 
Android accessibility for developers and QA
Android accessibility for developers and QAAndroid accessibility for developers and QA
Android accessibility for developers and QA
Ted Drake
 
Training Session 2 - Day 2
Training Session 2 - Day 2Training Session 2 - Day 2
Training Session 2 - Day 2
Vivek Bhusal
 
Android xml-based layouts-chapter5
Android xml-based layouts-chapter5Android xml-based layouts-chapter5
Android xml-based layouts-chapter5
Dr. Ramkumar Lakshminarayanan
 
Android Screen Containers & Layouts
Android Screen Containers & LayoutsAndroid Screen Containers & Layouts
Android Screen Containers & Layouts
Vijay Rastogi
 
iOS app dev Training - Session1
iOS app dev Training - Session1iOS app dev Training - Session1
iOS app dev Training - Session1
Hussain Behestee
 
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app developmentMOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app development
anistar sung
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
EPAM Systems
 
Multiple Activity and Navigation Primer
Multiple Activity and Navigation PrimerMultiple Activity and Navigation Primer
Multiple Activity and Navigation Primer
Ahsanul Karim
 
Simple Android Project (SAP)... A Test Application
Simple Android Project (SAP)... A Test ApplicationSimple Android Project (SAP)... A Test Application
Simple Android Project (SAP)... A Test Application
Aritra Mukherjee
 
One Weekend With AngularJS
One Weekend With AngularJSOne Weekend With AngularJS
One Weekend With AngularJS
Yashobanta Bai
 
Angular js
Angular jsAngular js
Modern android development
Modern android developmentModern android development
Modern android development
Khiem-Kim Ho Xuan
 
Unit2
Unit2Unit2
Angular material
Angular materialAngular material
Angular material
Kalpesh Satasiya
 
Create an Animated Navigation Bar - Edge Animate Tutorial
Create an Animated Navigation Bar - Edge Animate TutorialCreate an Animated Navigation Bar - Edge Animate Tutorial
Create an Animated Navigation Bar - Edge Animate Tutorial
Jason Hill
 
Android tutorial
Android tutorialAndroid tutorial
Android tutorial
Ed Zel
 
Android tutorial
Android tutorialAndroid tutorial
Android tutorial
Techacademy Software
 
Android tutorial
Android tutorialAndroid tutorial
Android tutorial
katayoon_bz
 
Android Workshop
Android WorkshopAndroid Workshop
Android Workshop
Junda Ong
 

What's hot (20)

Developing accessible android applications
Developing accessible android applicationsDeveloping accessible android applications
Developing accessible android applications
 
Android accessibility for developers and QA
Android accessibility for developers and QAAndroid accessibility for developers and QA
Android accessibility for developers and QA
 
Training Session 2 - Day 2
Training Session 2 - Day 2Training Session 2 - Day 2
Training Session 2 - Day 2
 
Android xml-based layouts-chapter5
Android xml-based layouts-chapter5Android xml-based layouts-chapter5
Android xml-based layouts-chapter5
 
Android Screen Containers & Layouts
Android Screen Containers & LayoutsAndroid Screen Containers & Layouts
Android Screen Containers & Layouts
 
iOS app dev Training - Session1
iOS app dev Training - Session1iOS app dev Training - Session1
iOS app dev Training - Session1
 
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app developmentMOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app development
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
 
Multiple Activity and Navigation Primer
Multiple Activity and Navigation PrimerMultiple Activity and Navigation Primer
Multiple Activity and Navigation Primer
 
Simple Android Project (SAP)... A Test Application
Simple Android Project (SAP)... A Test ApplicationSimple Android Project (SAP)... A Test Application
Simple Android Project (SAP)... A Test Application
 
One Weekend With AngularJS
One Weekend With AngularJSOne Weekend With AngularJS
One Weekend With AngularJS
 
Angular js
Angular jsAngular js
Angular js
 
Modern android development
Modern android developmentModern android development
Modern android development
 
Unit2
Unit2Unit2
Unit2
 
Angular material
Angular materialAngular material
Angular material
 
Create an Animated Navigation Bar - Edge Animate Tutorial
Create an Animated Navigation Bar - Edge Animate TutorialCreate an Animated Navigation Bar - Edge Animate Tutorial
Create an Animated Navigation Bar - Edge Animate Tutorial
 
Android tutorial
Android tutorialAndroid tutorial
Android tutorial
 
Android tutorial
Android tutorialAndroid tutorial
Android tutorial
 
Android tutorial
Android tutorialAndroid tutorial
Android tutorial
 
Android Workshop
Android WorkshopAndroid Workshop
Android Workshop
 

Similar to Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

Make Mobile Apps Quickly
Make Mobile Apps QuicklyMake Mobile Apps Quickly
Make Mobile Apps Quickly
Gil Irizarry
 
Android programming-basics
Android programming-basicsAndroid programming-basics
Android programming-basics
Aravindharamanan S
 
Desktop apps with node webkit
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkit
Paul Jensen
 
Cross Platform Mobile App Development
Cross Platform Mobile App Development Cross Platform Mobile App Development
Cross Platform Mobile App Development
Jakir Hossain
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
DevelopmentArc LLC
 
iOS Application Security
iOS Application SecurityiOS Application Security
iOS Application Security
Egor Tolstoy
 
GeneralMobile Hybrid Development with WordPress
GeneralMobile Hybrid Development with WordPressGeneralMobile Hybrid Development with WordPress
GeneralMobile Hybrid Development with WordPress
GGDBologna
 
Mobile Hybrid Development with WordPress
Mobile Hybrid Development with WordPressMobile Hybrid Development with WordPress
Mobile Hybrid Development with WordPress
Danilo Ercoli
 
I pad uicatalog_lesson02
I pad uicatalog_lesson02I pad uicatalog_lesson02
I pad uicatalog_lesson02
Rich Helton
 
Android Application Development Using Java
Android Application Development Using JavaAndroid Application Development Using Java
Android Application Development Using Java
amaankhan
 
Seattle bestpractices2010
Seattle bestpractices2010Seattle bestpractices2010
Seattle bestpractices2010
Olaseni Odebiyi
 
O365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - MaterialO365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - Material
Thomas Daly
 
Lesson learned from 3 years with hybrid apps
Lesson learned from 3 years with hybrid appsLesson learned from 3 years with hybrid apps
Lesson learned from 3 years with hybrid apps
Patrik Malmquist
 
Phonegap - An Introduction
Phonegap - An IntroductionPhonegap - An Introduction
Phonegap - An Introduction
Tyler Johnston
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dee Sadler
 
Using Automatic Refactoring to Improve Energy Efficiency of Android Apps
Using Automatic Refactoring to Improve Energy Efficiency of Android AppsUsing Automatic Refactoring to Improve Energy Efficiency of Android Apps
Using Automatic Refactoring to Improve Energy Efficiency of Android Apps
Luis Cruz
 
Appcelerator Titanium Intro
Appcelerator Titanium IntroAppcelerator Titanium Intro
Appcelerator Titanium Intro
Nicholas Jansma
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Andres Baravalle
 
tut0000021-hevery
tut0000021-heverytut0000021-hevery
tut0000021-hevery
tutorialsruby
 
tut0000021-hevery
tut0000021-heverytut0000021-hevery
tut0000021-hevery
tutorialsruby
 

Similar to Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014 (20)

Make Mobile Apps Quickly
Make Mobile Apps QuicklyMake Mobile Apps Quickly
Make Mobile Apps Quickly
 
Android programming-basics
Android programming-basicsAndroid programming-basics
Android programming-basics
 
Desktop apps with node webkit
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkit
 
Cross Platform Mobile App Development
Cross Platform Mobile App Development Cross Platform Mobile App Development
Cross Platform Mobile App Development
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
 
iOS Application Security
iOS Application SecurityiOS Application Security
iOS Application Security
 
GeneralMobile Hybrid Development with WordPress
GeneralMobile Hybrid Development with WordPressGeneralMobile Hybrid Development with WordPress
GeneralMobile Hybrid Development with WordPress
 
Mobile Hybrid Development with WordPress
Mobile Hybrid Development with WordPressMobile Hybrid Development with WordPress
Mobile Hybrid Development with WordPress
 
I pad uicatalog_lesson02
I pad uicatalog_lesson02I pad uicatalog_lesson02
I pad uicatalog_lesson02
 
Android Application Development Using Java
Android Application Development Using JavaAndroid Application Development Using Java
Android Application Development Using Java
 
Seattle bestpractices2010
Seattle bestpractices2010Seattle bestpractices2010
Seattle bestpractices2010
 
O365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - MaterialO365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - Material
 
Lesson learned from 3 years with hybrid apps
Lesson learned from 3 years with hybrid appsLesson learned from 3 years with hybrid apps
Lesson learned from 3 years with hybrid apps
 
Phonegap - An Introduction
Phonegap - An IntroductionPhonegap - An Introduction
Phonegap - An Introduction
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
Using Automatic Refactoring to Improve Energy Efficiency of Android Apps
Using Automatic Refactoring to Improve Energy Efficiency of Android AppsUsing Automatic Refactoring to Improve Energy Efficiency of Android Apps
Using Automatic Refactoring to Improve Energy Efficiency of Android Apps
 
Appcelerator Titanium Intro
Appcelerator Titanium IntroAppcelerator Titanium Intro
Appcelerator Titanium Intro
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
tut0000021-hevery
tut0000021-heverytut0000021-hevery
tut0000021-hevery
 
tut0000021-hevery
tut0000021-heverytut0000021-hevery
tut0000021-hevery
 

More from Gil Irizarry

A Rose By Any Other Name.pdf
A Rose By Any Other Name.pdfA Rose By Any Other Name.pdf
A Rose By Any Other Name.pdf
Gil Irizarry
 
[Apple-organization] and [oranges-fruit] - How to evaluate NLP tools - Basis ...
[Apple-organization] and [oranges-fruit] - How to evaluate NLP tools - Basis ...[Apple-organization] and [oranges-fruit] - How to evaluate NLP tools - Basis ...
[Apple-organization] and [oranges-fruit] - How to evaluate NLP tools - Basis ...
Gil Irizarry
 
[Apple|organization] and [oranges|fruit]: How to evaluate NLP tools for entit...
[Apple|organization] and [oranges|fruit]: How to evaluate NLP tools for entit...[Apple|organization] and [oranges|fruit]: How to evaluate NLP tools for entit...
[Apple|organization] and [oranges|fruit]: How to evaluate NLP tools for entit...
Gil Irizarry
 
Ai for Good: Bad Guys, Messy Data, & NLP
Ai for Good: Bad Guys, Messy Data, & NLPAi for Good: Bad Guys, Messy Data, & NLP
Ai for Good: Bad Guys, Messy Data, & NLP
Gil Irizarry
 
DevSecOps Orchestration of Text Analytics with Containers
DevSecOps Orchestration of Text Analytics with ContainersDevSecOps Orchestration of Text Analytics with Containers
DevSecOps Orchestration of Text Analytics with Containers
Gil Irizarry
 
Towards Identity Resolution: The Challenge of Name Matching
Towards Identity Resolution: The Challenge of Name MatchingTowards Identity Resolution: The Challenge of Name Matching
Towards Identity Resolution: The Challenge of Name Matching
Gil Irizarry
 
RapidMiner - Don’t Forget to Pack Text Analytics on Your Data Exploration Jou...
RapidMiner - Don’t Forget to Pack Text Analytics on Your Data Exploration Jou...RapidMiner - Don’t Forget to Pack Text Analytics on Your Data Exploration Jou...
RapidMiner - Don’t Forget to Pack Text Analytics on Your Data Exploration Jou...
Gil Irizarry
 
From Silos to DevOps: Our Story
From Silos to DevOps:  Our StoryFrom Silos to DevOps:  Our Story
From Silos to DevOps: Our Story
Gil Irizarry
 
Graphics on the Go
Graphics on the GoGraphics on the Go
Graphics on the Go
Gil Irizarry
 
Building The Agile Enterprise - LSSC '12
Building The Agile Enterprise - LSSC '12Building The Agile Enterprise - LSSC '12
Building The Agile Enterprise - LSSC '12
Gil Irizarry
 
Agile The Kanban Way - Central MA PMI 2011
Agile The Kanban Way - Central MA PMI 2011Agile The Kanban Way - Central MA PMI 2011
Agile The Kanban Way - Central MA PMI 2011
Gil Irizarry
 
Transitioning to Kanban: Theory and Practice - Project Summit Boston 2011
Transitioning to Kanban: Theory and Practice - Project Summit Boston 2011Transitioning to Kanban: Theory and Practice - Project Summit Boston 2011
Transitioning to Kanban: Theory and Practice - Project Summit Boston 2011
Gil Irizarry
 
Transitioning to Kanban - Aug 11
Transitioning to Kanban - Aug 11Transitioning to Kanban - Aug 11
Transitioning to Kanban - Aug 11
Gil Irizarry
 
Transitioning to Kanban
Transitioning to KanbanTransitioning to Kanban
Transitioning to Kanban
Gil Irizarry
 
Beyond Scrum of Scrums
Beyond Scrum of ScrumsBeyond Scrum of Scrums
Beyond Scrum of Scrums
Gil Irizarry
 

More from Gil Irizarry (15)

A Rose By Any Other Name.pdf
A Rose By Any Other Name.pdfA Rose By Any Other Name.pdf
A Rose By Any Other Name.pdf
 
[Apple-organization] and [oranges-fruit] - How to evaluate NLP tools - Basis ...
[Apple-organization] and [oranges-fruit] - How to evaluate NLP tools - Basis ...[Apple-organization] and [oranges-fruit] - How to evaluate NLP tools - Basis ...
[Apple-organization] and [oranges-fruit] - How to evaluate NLP tools - Basis ...
 
[Apple|organization] and [oranges|fruit]: How to evaluate NLP tools for entit...
[Apple|organization] and [oranges|fruit]: How to evaluate NLP tools for entit...[Apple|organization] and [oranges|fruit]: How to evaluate NLP tools for entit...
[Apple|organization] and [oranges|fruit]: How to evaluate NLP tools for entit...
 
Ai for Good: Bad Guys, Messy Data, & NLP
Ai for Good: Bad Guys, Messy Data, & NLPAi for Good: Bad Guys, Messy Data, & NLP
Ai for Good: Bad Guys, Messy Data, & NLP
 
DevSecOps Orchestration of Text Analytics with Containers
DevSecOps Orchestration of Text Analytics with ContainersDevSecOps Orchestration of Text Analytics with Containers
DevSecOps Orchestration of Text Analytics with Containers
 
Towards Identity Resolution: The Challenge of Name Matching
Towards Identity Resolution: The Challenge of Name MatchingTowards Identity Resolution: The Challenge of Name Matching
Towards Identity Resolution: The Challenge of Name Matching
 
RapidMiner - Don’t Forget to Pack Text Analytics on Your Data Exploration Jou...
RapidMiner - Don’t Forget to Pack Text Analytics on Your Data Exploration Jou...RapidMiner - Don’t Forget to Pack Text Analytics on Your Data Exploration Jou...
RapidMiner - Don’t Forget to Pack Text Analytics on Your Data Exploration Jou...
 
From Silos to DevOps: Our Story
From Silos to DevOps:  Our StoryFrom Silos to DevOps:  Our Story
From Silos to DevOps: Our Story
 
Graphics on the Go
Graphics on the GoGraphics on the Go
Graphics on the Go
 
Building The Agile Enterprise - LSSC '12
Building The Agile Enterprise - LSSC '12Building The Agile Enterprise - LSSC '12
Building The Agile Enterprise - LSSC '12
 
Agile The Kanban Way - Central MA PMI 2011
Agile The Kanban Way - Central MA PMI 2011Agile The Kanban Way - Central MA PMI 2011
Agile The Kanban Way - Central MA PMI 2011
 
Transitioning to Kanban: Theory and Practice - Project Summit Boston 2011
Transitioning to Kanban: Theory and Practice - Project Summit Boston 2011Transitioning to Kanban: Theory and Practice - Project Summit Boston 2011
Transitioning to Kanban: Theory and Practice - Project Summit Boston 2011
 
Transitioning to Kanban - Aug 11
Transitioning to Kanban - Aug 11Transitioning to Kanban - Aug 11
Transitioning to Kanban - Aug 11
 
Transitioning to Kanban
Transitioning to KanbanTransitioning to Kanban
Transitioning to Kanban
 
Beyond Scrum of Scrums
Beyond Scrum of ScrumsBeyond Scrum of Scrums
Beyond Scrum of Scrums
 

Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

  • 1.
  • 2. Make Cross-Platform Mobile Apps Quickly Gil Irizarry Conoa Your logo on white centered in this space.
  • 3. 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 • gil@conoa.com • http://www.slideshare.net/conoagil/
  • 4. About Me • All examples and sample code in this presentation can be found at: • http://conoa.com/hidden/sig2014examples.zip
  • 5. 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).
  • 6. 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.
  • 7. 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…
  • 8. 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)
  • 9. 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.
  • 10. 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.
  • 11. 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/
  • 12. Configure the ADT plug-in • Open Eclipse and select the Window menu. • Open the Android SDK and AVD manager. • Install all available components.
  • 13. 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.
  • 14. 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.
  • 15. 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:
  • 16. Example 1 – Hello World in PhoneGap
  • 17. 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.
  • 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. 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.
  • 23. 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
  • 24. 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:
  • 25. Example 2 - Let’s Get Data
  • 26. 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.
  • 27. 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.
  • 28. 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.
  • 29. Example 2 - Under the hood • $(paragraphID).text(yqlObject.query.results.item[headlineCou nt].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”;
  • 30. Example 3 - More News
  • 31. 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.
  • 32. 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);
  • 33. 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.
  • 34. 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.
  • 35. 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>
  • 36. Example 4 - Access phone Data
  • 37. Example 4 - Access Phone Data • 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);
  • 38. Example 5 - Simple Map app
  • 39. 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 /
  • 40. 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.
  • 41. HTML5 Canvas • Canvas supports: • Basic shapes • Images • Transparency • Compositing • Transforms • Basic animation
  • 42. 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
  • 43. Example 6 - Simple Drawing
  • 44. 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
  • 45. 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
  • 46. 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)
  • 47. 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:
  • 48. 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.
  • 49. 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.
  • 50. Example 7 - Touch
  • 51. 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.
  • 52. 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).
  • 53. 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.
  • 54. Example 8 - Paint & Menus
  • 55. 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" />
  • 56. 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.
  • 57. 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.
  • 58. 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.
  • 59. Animation • Although we’ve added some interactivity, the examples so far have been a little static. • Let’s add some animation.
  • 60. Example 9 - Clock
  • 61. 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?
  • 62. 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.
  • 63. 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
  • 64. 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>
  • 65. 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()
  • 66. 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!
  • 67. 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/requestanimatio nframe-for-smart-er-animating
  • 68. 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.
  • 69. Doing Things the Right Way • http://caniuse.com/requestanimationframe
  • 70. 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" >
  • 71. Example 10 - Bouncing Balls
  • 72. 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.
  • 73. Example 11 - Space
  • 74. 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.