This session teaches how to develop your first PhoneGap application that
communicates .... . .
the intro for RPG programmers
Making mobile app development easier... by Aaron
Bartell of KrengelTech
Copyright Aaron Bartell 2012
[email protected]
Abstract Writing native applications for the various mobile operating systems can be quite the task because you have to learn the the various languages (i.e. Java, Objective-C) and deal with the idiosyncrasies of each platform. But what if that wasn't the case? What if you could develop in a single language (i.e. Javascript) and do your layout with HTML5 + CSS3 and then deploy to Android/iOS/ WebOS/Blackberry without changing a line of application code? With PhoneGap that becomes a reality!! This session teaches how to develop your first PhoneGap application that communicates in real-time with an RPG program on the IBM i. The session will focus on the Android development environment because it is much easier to deploy with Android than with Apple. The SenchaTouch framework will be used for the graphical layout and communication portions of the client-side app. Everything discussed in this session is free and open source!!
About PhoneGap • What?
Open source solution for building cross-platform mobile apps
with standards-based web technologies (i.e. HTML5, Javascript, CSS). • Where?
www.PhoneGap.com, though it is also in incubation at
Apache: incubator.apache.org/cordova (this is the future of PhoneGap a good thing!!) • Cost? • License?
FREE! Apache 2.0 License (good it’s not GPLv3 because then it
would be much harder to use commercially). • How?
PhoneGap creates a “bridge” between the browser and the
native device API’s. • Documentation?
docs.phonegap.com
Why use PhoneGap? InfoWorld “Best Software Award”
Read about it: http://bit.ly/yBrAqM
Thousands of Apps
Full(er) list: http://phonegap.com/apps
Information curtesy of Dave Johnson (twitter.com/davejohnson)
More PhoneGap Info Platform/version support... iOS >= 3.2 Android >= 1.5 BlackBerry >= 4.6 webOS >= 1.4.5 Symbian >= 1 Windows Phone >= 7.5 Samsung Bada = 1
Contributors...
Adobe, IBM, Microsoft, RIM, HP/Palm, Salesforce.com
Stats... 800,000
30,000
40+
50+
downloads
messages
tools
contributors
Information curtesy of Dave Johnson (twitter.com/davejohnson)
800,000 visits/month
Environment Setup Download Eclipse from eclipse.org
Download PhoneGap SDK from phonegap.com Great “Getting Started” tutorial phonegap.com/start#android
Environment Setup After creating an Eclipse Android project by following the Getting started tutorial you then copy/paste the downloaded PhoneGap (aka “callback”) files to the folders in Eclipse. The environment is now setup and next you need to create an index.html file.
index.html document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { alert('Hug harder!') Javascript is invoked once native } portion of PhoneGap is completely loaded (native would be iOS or Android).
Hug a member of congress today. You might be the only friend they have.
Java This is the extent of the Java. You only make two small changes from the original class that was generated during the Eclipse Android project creation. 1 - Change Activity to DroidGap 2 - Add super.loadUrl(...) line.
public class PhoneGap1Activity extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); } }
Call on hardware buttons document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { document.addEventListener("menubutton", onMenuButton, false); } function onMenuButton(){ alert('It is not working! }
Hug harder!')
Add listeners for hardware related user actions.
Code to be invoked when user selects the device’s menu button.
Hug a member of congress today.
You might be the only friend they have.
Geolocation Sample document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { var options = { frequency: 3000 }; navigator.geolocation.getCurrentPosition(onSuccess, onError, options); } function onSuccess(position) { geolocation is a var element = document.getElementById('geolocation');
defined in the element.innerHTML = HTML body (not 'Latitude: ' + position.coords.latitude + '
' + shown). 'Longitude: ' + position.coords.longitude + '
' + 'Altitude: ' + position.coords.altitude + '
' + 'Accuracy: ' + position.coords.accuracy + '
' + 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '
' + 'Heading: ' + position.coords.heading + '
' + 'Speed: ' + position.coords.speed + '
' + 'Timestamp: ' + new Date(position.timestamp) + '
'; } function onError(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); }
Communicating with RPG Technologies Used... OpenRPGUI.com jQuery.com PhoneGap.com
Screenshot from Android device...
Communicating with RPG $("#btn1").click(function() { $.ajax({ url: "http://code.openrpgui.com/pgm/mirror", type: "POST", data: "tf1=" + $("#tf1").val(), success: function(rsp){ $("#results").html(rsp); } }); });
Call IBMi
Communicating with RPG Code for MIRROR.RPGLE - http://code.openrpgui.com/pgm/mirror All it does is receive in the request contents and immediately send it back to the requester. Good for testing. H dftactgrp(*no) actgrp(*caller) bnddir('ORUBND') /copy qrpglecpy,HTTP /free http_outStr('Content-Type: text/plain' + x'1515'); http_outStr( http_inStr() ); *inlr = *on; /end-free
Same app, different phone You can use the SAME EXACT HTML5 app and deploy it to another platform. Android is the easiest to start with because it has less “chains” from Google. iOS (Apple) is simple to get the app running in xCode Apple’s IDE) but is more complicated to get published that and the fact you need a Mac. Not every phone is created equal! Check out this page to learn what each phone OS/Platform supports... phonegap.com/about/features
Currently supported mobile platforms...
Where’s My App? Eclipse creates a .apk file that contains everything your application needs to run. This of this as being similar to a zip file. You can copy this to your Android phone using Windows Explorer while your device is connected via USB.
To the Next Level... Once you understand the various features of accessing device functionality you can move onto building your application. Your application can be built entirely by hand with raw HTML, Javascript and CSS OR you can use a framework like Sencha Touch - I prefer a framework. This is a PhoneGap app I developed named “Krengel Contact” that I published to the Android Market. Instead of using the contacts on the device I am occupying the list with contacts from an IBM i DB2 table using OpenRPGUI. Android Market Link http://bit.ly/u0BYUE Modeled after this Sencha tutorial http://bit.ly/xPeIQJ
We have reached the end! Aaron Bartell
[email protected] lead developer of
RPG-XML Suite (www.rpg-xml.com)
and owner of
www.MowYourLawn.com
and check out his latest effort at
www.SoftwareSavesLives.com
.com/aaronbartell
