Web Programming for Mobile Devices

Workshop: Mobile App Development for Web Developers (Level: Beginner)

Dr. Barbara Hecker, International Technological University

2

The Web as a platform for Mobile Apps

Feature Web app Mobile app

Graphics Strong Unlimited

User interaction Strong Unlimited

Network usage High Varies

Accessible from Any computer Where installed

Upgrade cost Update servers System Update

Data backup cost Backup servers Device Service

Popularity Increasing Dominant

3

Most programs are event-oriented

o Structure of programo Read inputo Perform computationo Produce output

o The program may use libraries written by others

o Structure of programo Wait for eventso Find appropriate

method for handling the event

o Handle the evento Repeat

o Often you just add new events and handlers to an existing program

A naive view A realistic view

4

What’s the difference with Web Apps?

o Optimize for Fingers (Touch), not keyboards, mouse…

o Customized to look like native controls on different devices.

o Use features on the phone!o Isn’t this just a website with mobile app event-

driven behavior?o Download cool app icons, find a build tool you

like and you are now an app developer!

5

Outline of Common Components used in Mobile Device Web Applications

o Web documentso Server-side programmingo Client-side programmingo Web serviceso JQuery

6

HyperText Markup Language

o Disagreement about HTML’s roleo Only give the content and structure of the document, leave

visualization to the browser

o Browsers vary (graphical, text based, mobile devices)

o User preferences vary (some people like larger fonts)

o Environment varies (screen sizes, fonts available, etc.)o But authors want to control what the document looks like

o Trend towards separating content from presentationo Cascading Style Sheets – presentation information only

o HTML documents contain little formatting

7

Many Choices…

o Build a Native app (for specific platform) that runs like a website (WebView).

o Build a Native “bare bone” app that connects to a website. The app is actually located on the website (Sancha, jQTouch, etc.)

o Build your app in the Cloud and don’t mess with Xcode or Eclipse (PhoneGap).

o Build your app using a third party dev tool.o Have someone else build and host your app.

8

Tools of the Trade

o Xcode for iPhone/iOSo Dashcode – Website Creation

o You can download Dashcode using the More Application Tools by choosing the Xcode Menu -> Open Developer Tools -> More Developer Tools.

o Eclipse and Android SDK – For Android Development.

o PhoneGap Cloud Service – No Build Tools

9

PhoneGap (phonegap.com)

o Easily create apps with the “only free open source framework that supports 7 mobile platforms” (according to PhoneGap)

o Build apps in the cloud and don’t bother learning development tools like Xcode and Eclipse.

o Or, compile your code in Native appso Entire app is in a “www” directory.o No Java, Objective-C or other programming

language skills needed.

10

Build in the Adobe Cloud

o https://build.phonegap.com/o ZIP your www directoryo Upload it to the servero After a few minutes, download your .apk or

other app files for installation on your deviceso Supply your paid ($99 /year) Apple Developer

Account info for iOS use.o NO compiling or using of ANY app

development build tools on your local system.

11

Use WebKit Based Browser

o Every browser is backed by a rendering engine to draw the HTML/CSS web page.

IE → TridentFirefox/Sea Monkey → GeckoOpera → PrestoSafari/Chrome → WebKit

o Most App interfaces will only function on WebKit based browsers.

12

iPhone Native App – Lets see it work!

o We will first create an iPhone app that goes out to a URL and loads a webpage from an external location. See WebPage tutorial we will do during this workshop.

o Next, we will examine WebView.zip. This app loads all files from within the app itself. NO internet connection is needed. It’s all built within the app. This example uses a local background image as well

13

o Example - WebsiteApp.zipo This app uses a “Tab Bar Controller” and

loads 4 different website. ALL example websites look and act the same as if you were to use a regular web browser although spacing is different.

o The idea is to create an app that is basically a web browser and set the webview component to load HTML, PHP, etc. page either stored locally or somewhere on the internet.

iPhone Native App – More advanced

14

Sencha - http://www.sencha.com/

o Build mobile apps for iPhone, Android and Blackberry with HTML5

o Commercial and open source Sencha Touch Library versions (Free).

o Sencha Touch is available free of charge for commercial and open source application development.

o Full service IDE app building tools – Not Freeo Plug-ins for Eclipse, iPhone libraries - Free

15

Let’s build a Sencha Touch App

o Download from: http://www.sencha.com/products/touch/download/2.0.1.1/ (GPL version is smaller)

o Unzip the archive to your local web server and navigate to http://localhost/your-touch-install/ to view the documentation and complete working examples.

o You can also unzip to your local system. Sencha Touch only functions on WebKit based browsers. Use Google Chrome or Safari on your computer to view the examples.

16

iPhone Native App – Sencha

o Example – SenchaTouch.zipo This example is the same as the other

WebView examples except that it loads the sample Sencha Demo project website and runs like an app.

o These are the same examples you get in the download (see slide 13).

o You can also see these on your computer at http://dev.sencha.com/deploy/touch/examples/production/index.html

17

jQTouch (jqtouch.com)

o Zepto/jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other devices.

o Native WebKit Animations - Image Preloadingo Callback Events - Flexible Themes - MIT

Licensedo Swipe Detection - Extensions

18

jQTouch Examples

o Examples – Clock Demo, Todo Demo, More Demos

o The demos were uploaded to my website from the sample projects that come with the jQTouch download.

o Access from a computer:o www.bhecker.com/jQTouch/demos/clock/

o http://www.bhecker.com/jQTouch/demos/todo/

o http://www.bhecker.com/jQTouch/demos/main/

19

Android – Can do it too!

o Example – Android – SenchaToucho Example – Android – Native WebView Exampleo Example – Android – PhoneGap Project

20

Dashcode, easier then Xcode

o Only works on the Mac. Not part of Xcode 4.x but can be downloaded from: https://developer.apple.com

o Can be used for Safari and Mobile Safari Web Application and Website Development

o Dashcode is only HTML, CSS and JavaScript, no Objective-C.

21

Launch Dashcode – Select Browser

22

Click Safari & Mobile Safari.

23

Click Run or (Command + R)The mobile version has two views

2424

Click on the Library icon Drag something over

25

Right-Mouse click to create event-driven function template to add code

25

26

Run the program see the results.

26

27

Example: ip-TicTacToe.zip

27

28

Place your Dashcode files into the WWW folder (Android)

28

29

Place your Dashcode files into the WWW folder (Xcode)

30

iWebKit

o http://snippetspace.com/portfolio/iwebkit/o Demo: http://snippetspace.com/iwebkit/demo/o Simple HTML programmingo See User Guide that comes in the download.

31

Others - SproutCore - sproutcore.com

o SproutCore is an HTML5 framework that aims to help developers build desktop-caliber web applications that run in any modern web browser, without plug-ins. The lead developer recently quit his job at Apple to focus on the project full-time.

o Check out http://touch.sproutcore.com/npr/ on an iPhone or Android device.

32

YUI (yuilibrary.com)

o YUI is a free, open source JavaScript and CSS library.

o Good level of source code examples and help documentation. http://yuilibrary.com/yui/docs/examples/

o Example: Todo http://yuilibrary.com/yui/docs/app/app-todo.html

33

jQuery Mobile (jquerymobile.com)

o jQuery Mobile isn’t a full application framework like SproutCore or Sencha Touch, but the new initiative does aim to bring more native controls to mobile web apps.

o Not supported on all browsers. You can see what browsers and versions jQuery Mobile will support at http://jquerymobile.com/gbs/

o The jQuery Core team is working to support all A and B browsers (see chart at link provided).

34

XUI (http://xuijs.com/)

o While developing Phonegap, the XUI team became frustrated with the existing JavaScript libraries and their performances on mobile devices.

o XUI was created to work across mobile browsers, including WebKit, Fennec, and Opera. The goal is to provide lots of cross-compatibility without much of the overhead that can make traditional JavaScript libraries unsuitable for mobile devices.

35

iUI (http://www.iui-js.org/)

o iUI is an iPhone user interface framework designed to bring an iPhone-like experience to mobile web apps. It works with WebKit based devices and includes a JavaScript library, CSS, and images.

o It was originally started back in 2007 but has been steadily updated over the years to add support to more types of devices and even the iPad.

o Good Demos and Sample themes: http://www.iui-js.org/demo

36

o mobiSiteGalore - http://www.mobisitegalore.com/ Claims itself to be the easiest mobile web builder,

for “as average as 54 minutes their customers can already build a fully functional mobile version of their website.”

o Duda Mobile - http://www.dudamobile.com/

Free option puts advertisements on your apps

Services to Convert WebsitesFor Mobile Devices

37

o Mofuse - http://mofuse.com/There are two ways to convert your site to

mobile: building it yourself through mofuse or hiring them to build it for you. By building it yourself using their application, you have more control over the design and development process, only you’ll have to pay a monthly subscription to keep the service going.

(Self Service: $7.95/month – $199/month)

Services to Convert WebsitesFor Mobile Devices

38

o bMobilized - http://bmobilized.com/en/ bMobilized claims they support more than

13000 mobile devices, including all major brands. Also the more website you host using their service the higher the discount you get. So if you have a network of websites that needs conversion, bMobilized is a good option. ($19.99/month)

Services to Convert WebsitesFor Mobile Devices

39

o ConvertWebsite -http://www.convertwebsite.com/

Requires customers to send the PSD file of the website they wish to convert. Why? To determine what approach is best in the redesigning process from desktop to mobile. Its method is quite similar to Code My Concept, which means handcrafting your provided PSD into mobile website.

o Takes days for the conversion!

Services to Convert WebsitesFor Mobile Devices

40

o Mobify – http://www.mobify.com

Mobify is good for eCommerce sites. They offer HTML5. They will design for you from concept to launch within 3 weeks. You can also do the self-serve solution.

o Publisher Pricing: $0 – $1000

Services to Convert WebsitesFor Mobile Devices

41

o Onbile - http://www.onbile.com/o Mobile App America -

http://www.mobileappamerica.com/o MobStac - http://mobstac.com/

o And plenty more….

Services to Convert WebsitesFor Mobile Devices

42

The Redirect

o It’s not a bad idea to also redirect your main company website to a mobile interpretation of it.

o Use your App version hosted on the internet!

43

Next

o Web documentso Server-side programmingo Client-side programmingo Web serviceso JQuery

44

Server side programming

o Short historyo CGI – separate programs launched by web server

o They produce an HTML document as outputo They receive arguments as inputo Strong isolation, bad performance

o Programs embedded inside web page (php, ASP, JSP)o Program executed inside web server process

o Separate “code-behind” file for the code (ASP.NET)o What are dynamic pages used for?

o Personalizing based on user identityo Interacting with databases (e.g. online banking)o Web applications (e.g. web based email)

o Separate database keeps persistent data

45

“Lifecycle” of static web page

Web server machine

Server codeServer data Filesystem

Webclient

HTTP request

URLRequest

HTTP response

HTML file

46

Lifecycle of ASP.NET webpage

Web server machine

Server codeServer data Filesystem

Webclient

HTTP request

URLRequest

HTTP response

Objects representing this web page

.aspx file

codebehind

HTML snippets

47

Page with database interaction

Web server machine

Server codeServer data Filesystem

Webclient

HTTP request

URLRequest

HTTP response

Objects representing this web page

.aspx file

codebehind

HTML snippetsDatabase SQL interaction

48

A Mobile Chat App Design

o View: http://www.itucafe.com/chat/testme.php in a WebKit based browser.

o Run example: ip-MobileChat.zipo The App is running the same “testme.php”

file. The php file connects to a database to retrieve the chat/forum information.

o Web users and mobile device users share the same mySQL database. All is controlled by the .php script on the server.

49

Next

o Web documentso Server-side programmingo Client-side programmingo Web serviceso JQuery

50

Why is JavaScript important?o Web pages can contain JavaScript programs executed

inside the browsero Supported by all major browsers

o Microsoft’s version called Jscript (the language is the same)

o User may disable JavaScript due to security fearso This is default for some newer versions of Internet

Explorero Client-side programming important for web because

o Can promptly validate user inputo Can update the web page without postback to servero Allows page to react to user actions other than pushing a

“submit” button – more interactivityo Can be used to create interaction and navigation for mobile

applications

51

What is JavaScript?

o Interpreted, object-oriented programming language with dynamic typingo Introduced by Netscape with Netscape 2.0 in 1995

o Standardized as ECMAScript by ECMA (European Computer Manufacturers Association)

o Not related to Java other than the name

o Tightly integrated with browsero Can handle many types of events generated by the

normal interaction between user and browser

o Can modify the internal objects based on which the browser renders the web page

52

Adding JavaScript to a page

o Using the <script> </script> tago Text between tags is JavaScript programo Can specify external file using src attributeo Executed as the document is loading

o Value of an attribute such as onclicko This type of code is called event handlero Executed when event happenso Can define event handlers for almost any

HTML element in page

53

Document Object Model

o Describes how the document object from JavaScript can be traversed and modified o Represented as tree structureo Can add new elements to the pageo Can change attributes of existing elements

o DOM has levels 0-3 and many sub-standardso The DOM interface used in other contexts with

other languages (C++, Java, python, etc.)

54

The document as a tree

<html>

<head>

<title>A Document</title>

</head>

<body>

<h1>A web page</h1>

<p>A <i>simple</i> paragraph</p>

</body>

</html>

document

<html>

<head> <body>

<title>

“A document”

<h1>

<p>

“A web page”

“A ”

“simple”

“ paragraph”<i>

57

Next

o Web documentso Server-side programmingo Client-side programmingo Web serviceso JQuery

58

What are web services?o A form of remote procedure call (RPC): your app (the client) asks

another computer (the server) to run a procedure for youo Parameters sent over the network from client to servero Results sent over network from server to client

o Why would you ever want to do a remote procedure call?o Data needed for answer not (easily) accessible in appo You want to re-use existing procedures that run in a different

environment than your appo Your device lacks the resources (i.e. processor capacity,

memory, network connection speed) to compute the resulto There are many other forms of RPC older than web services

o CORBA, DCOM, SunRPC, RMI

59

Internals of an RPC framework

o Code for marshalling/un-marshalling – encoding and decoding parameters/resultso A.k.a. serializing objects

o Description of the available procedures (methods)o Using an interface description language (IDL)

o Framework that turns these descriptions into “stubs”o On the client the stub makes it look to your program like

the stub is executing the procedure locally

o On the server the stub invokes the procedure

o The client and server stub interact over the network

60

Specific to web services

o They run over httpo Procedure call is in an http request

o Result is in an http response

o They use XML too Encode responses

o Encode requests (sometimes)

o Describe the procedures (incl. arguments and results)

o Client and server often use different languageso Client may be JavaScript code in browser – AJAX

o Client and server are often in different organizations

61

Last but probably the most used…

o Web documentso Server-side programmingo Client-side programmingo Web serviceso JQuery

62

JQueryo Powerful JavaScript library

o Access parts of a page using CSS or XPath-like expressions

o Modify the appearance of a pageo Alter the content of a pageo Change the user’s interaction with a pageo Rich library of methods for AJAX development

(AJAX = Asynchronous JavaScript and XML)o With jQuery and AJAX, you can request text, HTML,

XML, or JSON from a remote server using both HTTP Get and HTTP Post.

63

Basic JQuery

o Selecting part of a document is a fundamental operation

o A JQuery object is a wrapper for a selected group of DOM nodes

o $() function is a factory method that creates JQuery objects

o $(“dt”) is a JQuery object containing all the “dt” elements in the document

64

Basic JQuery

.addClass() method changes the DOM nodes by adding a ‘class’ attribute

o The ‘class’ attribute is a special CSS construct that provides a visual architecture independent of the element structures

$(“dt”).addClass(“emphasize”) will change all occurrences of <dt> to <dt class=“emphasize”>

65

Basic JQueryo To make this change, put it in a function and call it when the document has been loaded and the DOM is created. Example Function:

function doEmph() {

$(“dt”).addClass(“emphasize”)

}

<body onLoad=“doEmph()”>

o Structure and appearance should be separated!

66

Basic JQueryo JQuery provides an independent scheduling point

after DOM is created and before images are loaded: $(document).ready(doEmph);

o No HTML changes required. All done in the script.o Better solution:

$(document).ready(function(){

$(“dt”).addClass(“emphasize”)

}); <html><head><script src="jquery.js" type="text/javascript"></script><script src="test.js" type="text/javascript"></script>…

67

JQuery Changes DOM

.attr({‘name’, ‘value’})sets a new attribute (or many)

$(‘<i>hello</i>’)Creates a new element

$(‘<i>hello</i>’).insertAfter(‘div.chapter p’);Creates element and inserts it into the document

.html() or .text() or .empty() will replace matched elements with newly created elements

68

Have you met JSON?

o JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.

o Based on a subset of JavaScripto JSON is a text format that is completely language

independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others.

o These properties make JSON an ideal data-interchange language.

69

The End

o Thank you all for attending!o I hope you were able to learn something new.o Go out and try this stuffo Build a “killer app” get rich and retire.