web programming for mobile devices workshop: mobile app development for web developers (level:...
Post on 31-Mar-2015
219 Views
Preview:
TRANSCRIPT
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.
top related