Making mobile apps with web technology

New trend of making mobile apps with web technology
Manyoung Cho | WebDevMobile.com
manyoung@gmail.com

About Me
Web Evangelist
WebDevMobile.com운영자
Opera Software 차장
manyoung@gmail.com
Blog : http://manyoung.net
Twitter : @manyoungc
Me2Day : http://me2day.net/manyoung

Agenda
History of WebApps
Web as Apps
Smartphone Wars
PhoneGap
Mobile Web or Mobile App?

History of WebApps

2006 : Long time ago galaxy far far away
Opera introduced browser based application called widget in 2006
Widget is W3C standardhttp://www.w3.org/TR/widgets/
Opera Widgethttp://widgets.opera.com
Widget = browser based standalone web application

2007 : Apple MacOS 10.5
MacOs Dashboard Widget
http://developer.apple.com/macosx/dashboard.html
http://en.wikipedia.org/wiki/Dashboard_(software)
HTML5 Canvas was also introducted by Apple

2008 : Widget Chaos!
Google Desktop widget
Yahoo Widget
Naver, Daum Widget
All gone…
Non standard based

Web as Apps

Web apps Demo
Web apps? = Piece of cake

2010 : Chrome Webstore
https://chrome.google.com/webstore

Smartphone wars

Browser Wars
Browser is a killer app of the smartphone
Opera mobile 10
iPhone Safari
Chrome lite
Mobile browser war is more severe than desktop
New technology is applied in mobile browser

Smartphone Wars
Success of iPhone
Success of AppStore
Application contents matter!

Mobile Apps Wars

Mobile Apps Wars
Apple is the only winner
iPod, iPhone2G, iPhone 3G users
Followers can’t defeat this.

Anti Apple alliances
Operators
Handset makers
Too many platforms 
Windows Mobile, Limo, Android, Brew, SHP, Symbian, Proprietrary OS….
What can be the crossplatform?

It’s WEB!
Cross Device
Cross Platform

Web as mobile apps

Widget runtime
Web application platform
Browser rendering engine based
HTML/CSS/Javascript is the main technology
Operator/OEM driven
Widget Manager UI
Widget Runtime Engine
= Browser Engine (Opera, Webkit)

Widget Store
Android(WRT)
Widget
Store
Mobile Widget
HTML/CSS/JS
WM7(WRT)
Web Developer
Bada(WRT)
Mobile Phones

Widget Runtime Demo
http://www.youtube.com/watch?v=3xpS21aR-BQ

EBay search and shopping
User observes his watching, buying and selling items.
Each item shows picture, description, price, number of bids and remaining auction time.
Clicking on the item will open item details in the browser, where user will be able to log in and bid for item.
In menu screen user can set his ebay username/password and configure autorefresh time (in minutes).
Main screen should contain refresh button.
Widget will contact eBay API directly using HTTP protocol and retrieve data in JSON or XML format.

Facebook
Facebook API described at http://wiki.developers.facebook.com/index.php/JavaScript_Client_Library and http://developers.facebook.com/docs/ will be used.
User will be able to store his username/password in the widget.
User will be able to set his status message, and will see his own status messages history.
User will be able to see his own personal details.
User will be able to browse list of his friends, see friends details ,see friends status message history, see and write messages to the friend's wall.
User will be able to poke selected friend, and write a message to him.
If phone and widget runtime supports it, user will be able to take a photo and post it directly to Facebook, or post photo from phone gallery.
Widget will periodically (time configurable in widget preferences, in minutes) check if there are new pokes, personal messages or wall messages for the user.
In case of new action, user will be informed by overlay icon on the widget in widget gallery.
Note: API key is needed. Check Terms and conditions for using it.

Twitter
User will be able to store his twitter username and password in the widget (in the options menu).
There will be field in the option menu will be auto refresh time(in minutes) [we have to keep in mind twitter API request limits].
On the widget main page user will see list of statuses from people he is following.
Each status will show user image, user profile name, message, date and 'from' field.
User will be able to delete his own message.
User will be able to start any message.
User will be able to reply or between any messages from another people.
Clicking on another user username will show this person details at the top of the screen, and messages just from this user below.
User will be able to set his status on twitter.
User will be able to see list of people he is following and his followers.
Clicking on follower/following name will open that user page.
Each relevant page will also contain a link that opens that page in the browser.

Extend Web : Device APIs
Contact
Calendar
File system
Messaging
System info : CPU, Battery, etc

Extending Web Spec
JIL (Joint Innovation Lab)
Vodafone, VZW, Softbank, China Mobilehttp://www.jil.org/
BONDI(OMTP driven)
W3C Device APIs and Policyhttp://www.w3.org/2009/dap/

Samsung Widget SDK
http://innovator.samsungmobile.com

Nokia Ovi Developer
http://www.forum.nokia.com/

Vodafone Betavine
http://www.betavine.net/bvportal/home.html

Widgets = Mobile apps

WAC
Cross-platform mobile apps
Cross-device apps
Wholesale Applications Community

WAC
Widgets – Widget Runtime, SDK, Documentation, WAC Device API spec.
Operator API

Size does matter

Altogether!
HTML5/CSS3/SVG
Devices API
Huge market
20 Global operators
5 Handset makers

PhoneGap

PhoneGap
PhoneGap is an open source development framework for building cross-platform mobile apps. Build apps in HTML and JavaScript and still take advantage of core features in iPhone/iTouch, iPad, Google Android, Palm, Symbian and Blackberry SDKs. Learn
http://phonegap.com

PhoneGap
Android
Market
Android
PhoneGap
Apple
Appstore
Mobile Widget
HTML/CSS/JS
iPhone
Blackberry
Market
Blackberry
Web Developer
Mobile Phones

PhoneGap.js
Device API to control phone resources

Phonegap
http://phonegap.com

Mobile Web or Mobile App?

Thank you for listening
http://webdevmobile.com
Blog : http://manyoung.net
Twitter : @manyoungc
Me2Day : http://me2day.net/manyoung

http://manyoung.net	325
http://webstorykim.tistory.com	140
http://manyoung.tistory.com	7
http://www.hanrss.com	4
http://www.manyoung.net	1
http://cafe.naver.com	1
http://webcache.googleusercontent.com	1

Making mobile apps with web technology

by Manyoung Cho on Aug 21, 2010

Accessibility

Tags

Upload Details

Usage Rights

7 Embeds 479

Statistics

Making mobile apps with web technology — Presentation Transcript