Developing mobile applications for i using open source tools Venna 2012

Pete Helgren
pete@valadd.com

Developing Mobile Applications for i using Open
Source Tools

Value Added Software, Inc
801.581.1154

1511 East Harvard Ave
Salt Lake City, UT 84105

1
© 2012 Value Added Software, Inc petesworkshop.com www.opensource4i.com

What will you get from this
session?
● You will know the differences between a web
application, a mobile web application and a
native mobile application.
● How to change your web applications to
mobile web applications.
● How to (easily) take a mobile web application
and create a “native” mobile application
● How to write a simple Android application (if
we have time).
2

Agenda

To rip off an well known book from the
60's:

Zen and the art of Developing Mobile
Applications using Open Source Tools

3

Agenda
● Mobile is all about the client (so where does i
fit in?)
● Rethinking Web Development
– Ajax
– HTML and HTML5
– Page, page construction and paging.
– JSON
– M is for minimalist
● Examples of “classic” web design
4

Agenda
● Deconstructing “classic” design
● Reassembly as HTML5 and “Web 2.0”
techniques
● Tweaking HTML5 for Mobile applications e.g.
Building a mobile web application

5

Agenda
● Mobile application development framework
review
● Developing an Android application
– Natively
– Using PhoneGap
● Review some examples including a Common
Schedule Organizer web application!

6

Mobile is about the client

Web Apps

Native Apps

i?
7

Mobile means rethinking web
development
Two basic principles:

Don't waste users bandwidth on
something they don't need

Be a good citizen – Conservation is good.

8

Wasting bandwidth
Images
RSS feeds
Tracking Plugins
Whole js libraries

9

Conserve
Hang on to data with explicit caching
(localstorage)

Refresh only when needed.

We are back at the good old days
(mid 1990's):
Paying per kb and slow connections

10

Rethinking Web Development

AJAX
(Asynchronous Javascript and XML)
Nothing new here(1999)...move along

Introduced my MS in IE 5 (XMLHTTP)
The much maligned IE 6 further extended capabilities
Thanks to the browser wars....

11


HTML5 – New?

Been around since 2004

Big hitter improvements:

New markup: <nav> <footer><video> <audio> and others.
New features: validation, client side storage.

12


Pages and paging

13

Conservation Strategies

Pages and paging
(mobile web app)

<div>

<div>

<div>

<div>

<div>

14


JSON
(Javascript Object Notation)

Lightweight – simple to transport (AJAX)
Javascript already knows what to do with it
(it's an Object!)

15

Pagination the AJAX way

My Web Page

javascript

<div id=page1></div>

My Web Page

Page 1

16

M is for minimal

17

Deconstructing “classic” web
design

Take a look at this web site (ugly)

Http://opensourceoni.com/baseDemo/Demo

Simple app, two pages, gets messages from IBM i

18

Deconstructing “classic” web
design

Another simple example that checks on whether
a port is open or not.

Hosted on i. Java App. Calls IBM i API's

http://opensourceoni.com/baseChkPort/Demo

19

Reassembly as HTML5 and
“Web 2.0” techniques

http://opensourceoni.com/mobile/cgi_adhstm.pgm

20

Demo – Walk through
● RPG – 5250
● CGIDEV2 – Ugly web based
● CGIDEV2 – Pretty web based
● CGIDEV2 – Pretty, web based, using local
storage (more mobile-ish...)
● PHP – Ugly
● PHP – Pretty
● PHP – Pretty using local storage
21

Web Server Info

● Apache is the front end to all of these web
applications (HTTP Server)
● You need to add Apache directives to map
URL's to the CGIDEV2 programs.
●

●

● Lets take a look

22

So you still want to build a
native mobile app?

Choose a framework.

Many are based on Eclipse which is a
comfortable transition for the RDp, EGL and
Zend Studio folks.

23

Standard Apache Directives

# Configuration originally created by Create HTTP Server wizard on Mon Jul
25 12:31:00 MDT 2011
LoadModule proxy_module
/QSYS.LIB/QHTTPSVR.LIB/QZSRCORE.SRVPGM
LoadModule proxy_http_module
LoadModule proxy_connect_module
LoadModule proxy_ftp_module
LoadModule zend_enabler_module
/QSYS.LIB/QHTTPSVR.LIB/QZFAST.SRVPGM

24

ScriptAliasMatch

Map URL's to CGIDEV2 Programs
ScriptAliasMatch /mobile/(.*) /qsys.lib/mobile.lib/$1
Alias /mobilejs /www/mobileapps/htdocs/mobile/js

# MobileREM directives
ScriptAliasMatch /mobilerem/(.*) /qsys.lib/mobilerem.lib/$1
Alias /mobileremjs /www/mobileapps/htdocs/mobilerem/js
Alias /mobileremcss /www/mobileapps/htdocs/mobilerem/css

25

Set Access permissions
<Directory /www/mobileapps/htdocs>
Order Allow,Deny
Allow From all
</Directory>

<Directory /www/mobileapps/htdocs/mobile/js>
Options None
order allow,deny
allow from all
</Directory>

<Directory /www/mobileapps/htdocs/mobilerem/js>
Options None
order allow,deny
allow from all
</Directory>

<Directory /www/mobileapps/htdocs/mobilerem/css>
Options None
order allow,deny
allow from all
</Directory>
<Directory /www/mobileapps/htdocs/mobilerem>
Options None
order allow,deny
allow from all
</Directory>

26

More permissions
<Directory /qsys.lib/mobilerem.lib>
order allow,deny
allow from all
Options -ExecCGI
CGIConvMode %%EBCDIC/EBCDIC%%
</Directory>

<Directory /www/mobileapps/htdocs/phpdemo>
Options None
order allow,deny
allow from all
</Directory>

<Directory /qsys.lib/mobile.lib>
order allow,deny
allow from all
Options -ExecCGI
CGIConvMode %%EBCDIC/EBCDIC%%
</Directory>

27

Now lets jump into Code

● RPG
● PHP

● Java (if you want)

28

Possible Frameworks
● Xcode – iPhone development
● Visual Studio – Windows Mobile
● Eclipse based
– PhoneGap
– Titanium
– Rhomobile
– Blackberry Eclipse plugin
– Android SDK – Eclipse Plugin
– WebOS (Palm) Eclipse Plugin
29

Possible Frameworks
Most popular target devices:

iPhone
Android
Blackberry

I am using PhoneGap for mobile apps that
require multi-platform deployment.
Write javascript, deploy to:
Android
Blackberry
iPhone
(requires Mac to compile Objective C code)
30

Build a “native” Android App

Aaron Bartell also has some resources:

http://www.mowyourlawn.com

http://www.SureYouCanHaveTheKeys.com

http://www.systeminetwork.com
(Aaron focuses on Android Native only, so you'll need a little Java
background)

31

Build a “native” Android App

GREAT tutorial on native Android Development:

http://www.smashingmagazine.com/2010/10/25/get-started-
developing-for-android-with-eclipse/

Two part series and absolutely excellent

(can also Google search for Android and BrewClock to find the articles)

32

Building “native” android application

Plenty of resources on the web to get you started
with Android.

Good resources at
http://developer.android.com

33

Let's build one!

34

Building a PhoneGap application for
Android

PhoneGap is primarily a framework for running
javascript enabled web pages as “native”
applications.

35

The anatomy of the PhoneGap application

Create the page using any HTML5 compliant
editor and run it in a fully HTML5 compliant
browser, like Chrome.

Bring it in as a resource to PhoneGap.

Wire it up to Android or iPhone API's using
JavaScript.

36

The Anatomy of a PhoneGap
application.

Let's take a look.

37

Review
● Mobile development is about the client
● Mobile development uses:
– HTML5 (could use HTML4- not recommended)
– AJAX
– Lightweight data transport
● JSON
● XML
● YAML
● Native app development uses the same
components but resides on the device
(client-server)
38

The Common Schedule
Organizer

Web version found here:
http://opensourceoni.com/schedule/GetWeb?
action=HTML5

Can be accessed from any HTML5 capable
browser. The localstorage option requires webkit
based browser

39

Thanks!

Blog update soon with a step by step:

http://www.petesworkshop.com/blog_wp/

Contact me at: pete@valadd.com

(put “Common” somewhere in the subject line)

www.petesworkshop.com/downloads/MobileAppDemo.zip

40

Developing mobile applications for i using open source tools Venna 2012

More Related Content

What's hot (19)

Viewers also liked (9)

Similar to Developing mobile applications for i using open source tools Venna 2012 (20)

More from COMMON Europe (20)

Recently uploaded (20)

Developing mobile applications for i using open source tools Venna 2012