SlideShare a Scribd company logo
Make Mobile Apps Quickly
Gil Irizarry
Conoa
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/
About Me
• All examples and sample code in this presentation can
be found at:
– http://conoa.com/hidden/example.zip
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).
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, 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)
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.
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:
First Project
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
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.
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.
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:
Example 1 – Hello World in PhoneGap
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.
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 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:
Example 2 – Let’s get some 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[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”;
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:
Example 3 – Let’s interact
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.
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.
Example 4 – jQuery Mobile
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.
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);
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.
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.
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>
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
);
Example 5 – Get some phone data
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.
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…
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/
Example 6 – Simple Map App
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);
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
Example 7 – Device Access
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.
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.
Graphics!
• Come to the Graphics on the Go workshop to see how to
draw on a canvas.
Thank You!

More Related Content

What's hot

Wicket Introduction
Wicket IntroductionWicket Introduction
Wicket Introduction
Eyal Golan
 
React js basics
React js basicsReact js basics
React js basics
Maulik Shah
 
Polaris presentation ioc - code conference
Polaris presentation   ioc - code conferencePolaris presentation   ioc - code conference
Polaris presentation ioc - code conference
Steven Contos
 
React native
React nativeReact native
Selenium Training in Chennai Demo Part-2
Selenium Training in Chennai Demo Part-2 Selenium Training in Chennai Demo Part-2
Selenium Training in Chennai Demo Part-2
Thecreating Experts
 
Web Components Everywhere
Web Components EverywhereWeb Components Everywhere
Web Components Everywhere
Ilia Idakiev
 
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile apps
Ivano Malavolta
 
From zero to hero with React Native!
From zero to hero with React Native!From zero to hero with React Native!
From zero to hero with React Native!
Commit University
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core Concepts
Divyang Bhambhani
 
Fast mobile web apps
Fast mobile web appsFast mobile web apps
Fast mobile web apps
Ivano Malavolta
 
Lecture 12: React-Native Firebase Authentication
Lecture 12: React-Native Firebase AuthenticationLecture 12: React-Native Firebase Authentication
Lecture 12: React-Native Firebase Authentication
Kobkrit Viriyayudhakorn
 
Javascript Best Practices and Intro to Titanium
Javascript Best Practices and Intro to TitaniumJavascript Best Practices and Intro to Titanium
Javascript Best Practices and Intro to Titanium
Techday7
 
Backbone JS for mobile apps
Backbone JS for mobile appsBackbone JS for mobile apps
Backbone JS for mobile apps
Ivano Malavolta
 
How to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScriptHow to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScript
Katy Slemon
 
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
Kobkrit Viriyayudhakorn
 
Client-side JavaScript
Client-side JavaScriptClient-side JavaScript
Client-side JavaScript
Lilia Sfaxi
 
Apache Wicket Web Framework
Apache Wicket Web FrameworkApache Wicket Web Framework
Apache Wicket Web Framework
Luther Baker
 
Web Performance Tips
Web Performance TipsWeb Performance Tips
Web Performance Tips
Ravi Raj
 
Decoupling with Domain Events
Decoupling with Domain EventsDecoupling with Domain Events
Decoupling with Domain Events
Steven Smith
 
DJango
DJangoDJango
DJango
Sunil OS
 

What's hot (20)

Wicket Introduction
Wicket IntroductionWicket Introduction
Wicket Introduction
 
React js basics
React js basicsReact js basics
React js basics
 
Polaris presentation ioc - code conference
Polaris presentation   ioc - code conferencePolaris presentation   ioc - code conference
Polaris presentation ioc - code conference
 
React native
React nativeReact native
React native
 
Selenium Training in Chennai Demo Part-2
Selenium Training in Chennai Demo Part-2 Selenium Training in Chennai Demo Part-2
Selenium Training in Chennai Demo Part-2
 
Web Components Everywhere
Web Components EverywhereWeb Components Everywhere
Web Components Everywhere
 
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile apps
 
From zero to hero with React Native!
From zero to hero with React Native!From zero to hero with React Native!
From zero to hero with React Native!
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core Concepts
 
Fast mobile web apps
Fast mobile web appsFast mobile web apps
Fast mobile web apps
 
Lecture 12: React-Native Firebase Authentication
Lecture 12: React-Native Firebase AuthenticationLecture 12: React-Native Firebase Authentication
Lecture 12: React-Native Firebase Authentication
 
Javascript Best Practices and Intro to Titanium
Javascript Best Practices and Intro to TitaniumJavascript Best Practices and Intro to Titanium
Javascript Best Practices and Intro to Titanium
 
Backbone JS for mobile apps
Backbone JS for mobile appsBackbone JS for mobile apps
Backbone JS for mobile apps
 
How to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScriptHow to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScript
 
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
 
Client-side JavaScript
Client-side JavaScriptClient-side JavaScript
Client-side JavaScript
 
Apache Wicket Web Framework
Apache Wicket Web FrameworkApache Wicket Web Framework
Apache Wicket Web Framework
 
Web Performance Tips
Web Performance TipsWeb Performance Tips
Web Performance Tips
 
Decoupling with Domain Events
Decoupling with Domain EventsDecoupling with Domain Events
Decoupling with Domain Events
 
DJango
DJangoDJango
DJango
 

Similar to Make Mobile Apps Quickly

Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Gil Irizarry
 
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
 
tut0000021-hevery
tut0000021-heverytut0000021-hevery
tut0000021-hevery
tutorialsruby
 
tut0000021-hevery
tut0000021-heverytut0000021-hevery
tut0000021-hevery
tutorialsruby
 
Cross Platform Mobile App Development
Cross Platform Mobile App Development Cross Platform Mobile App Development
Cross Platform Mobile App Development
Jakir Hossain
 
Android programming-basics
Android programming-basicsAndroid programming-basics
Android programming-basics
Aravindharamanan S
 
Android Application Development Using Java
Android Application Development Using JavaAndroid Application Development Using Java
Android Application Development Using Java
amaankhan
 
Upstate CSCI 450 jQuery
Upstate CSCI 450 jQueryUpstate CSCI 450 jQuery
Upstate CSCI 450 jQuery
DanWooster1
 
iOS Application Security
iOS Application SecurityiOS Application Security
iOS Application Security
Egor Tolstoy
 
Projects In JavaScript And JQuery | Eduonix
Projects In JavaScript And JQuery | EduonixProjects In JavaScript And JQuery | Eduonix
Projects In JavaScript And JQuery | Eduonix
Rakhi Lambha
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Andres Baravalle
 
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...
Azilen Technologies Pvt. Ltd.
 
Desktop apps with node webkit
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkit
Paul Jensen
 
LEARNING  iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
LEARNING	 iPAD STORYBOARDS IN OBJ-­‐C LESSON 1LEARNING	 iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
LEARNING  iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
Rich Helton
 
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
 
jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction
WebStackAcademy
 
Introduction to android sessions new
Introduction to android   sessions newIntroduction to android   sessions new
Introduction to android sessions new
Joe Jacob
 
Introduction to Android Development and Security
Introduction to Android Development and SecurityIntroduction to Android Development and Security
Introduction to Android Development and Security
Kelwin Yang
 
Android dev o_auth
Android dev o_authAndroid dev o_auth
Android dev o_auth
lzongren
 

Similar to Make Mobile Apps Quickly (20)

Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
 
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
 
tut0000021-hevery
tut0000021-heverytut0000021-hevery
tut0000021-hevery
 
tut0000021-hevery
tut0000021-heverytut0000021-hevery
tut0000021-hevery
 
Cross Platform Mobile App Development
Cross Platform Mobile App Development Cross Platform Mobile App Development
Cross Platform Mobile App Development
 
Android programming-basics
Android programming-basicsAndroid programming-basics
Android programming-basics
 
Android Application Development Using Java
Android Application Development Using JavaAndroid Application Development Using Java
Android Application Development Using Java
 
Upstate CSCI 450 jQuery
Upstate CSCI 450 jQueryUpstate CSCI 450 jQuery
Upstate CSCI 450 jQuery
 
iOS Application Security
iOS Application SecurityiOS Application Security
iOS Application Security
 
Projects In JavaScript And JQuery | Eduonix
Projects In JavaScript And JQuery | EduonixProjects In JavaScript And JQuery | Eduonix
Projects In JavaScript And JQuery | Eduonix
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...
 
Desktop apps with node webkit
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkit
 
LEARNING  iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
LEARNING	 iPAD STORYBOARDS IN OBJ-­‐C LESSON 1LEARNING	 iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
LEARNING  iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
 
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
 
jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction
 
Introduction to android sessions new
Introduction to android   sessions newIntroduction to android   sessions new
Introduction to android sessions new
 
Introduction to Android Development and Security
Introduction to Android Development and SecurityIntroduction to Android Development and Security
Introduction to Android Development and Security
 
Android dev o_auth
Android dev o_authAndroid dev o_auth
Android dev o_auth
 

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
 
Beginning Native Android Apps
Beginning Native Android AppsBeginning Native Android Apps
Beginning Native Android Apps
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 (16)

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...
 
Beginning Native Android Apps
Beginning Native Android AppsBeginning Native Android Apps
Beginning Native Android Apps
 
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
 

Recently uploaded

Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Data Hops
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 

Recently uploaded (20)

Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 

Make Mobile Apps Quickly

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