Embed Size (px)
DESCRIPTION
Citation preview
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
• 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[headlineCount].title);
• This is another jQuery statement, which says to change the text associated with the tag that has the specified id.
• Compare this to:– var tag = document.getElementById(“headline");– tag.innerHTML = “some headline text”;
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.item[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/javascript/
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!
