Making mobile apps with web technology


Published on

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Making mobile apps with web technology

  1. 1. New trend of making mobile apps with web technology<br />Manyoung Cho |<br /><br />
  2. 2. About Me<br />Web Evangelist<br />WebDevMobile.com운영자<br />Opera Software 차장 <br /><br />Blog :<br />Twitter : @manyoungc<br />Me2Day :<br />
  3. 3. Agenda<br />History of WebApps<br />Web as Apps<br />Smartphone Wars<br />PhoneGap<br />Mobile Web or Mobile App?<br />
  4. 4. History of WebApps<br />
  5. 5. 2006 : Long time ago galaxy far far away<br />Opera introduced browser based application called widget in 2006<br />Widget is W3C standard<br />Opera Widget<br />Widget = browser based standalone web application<br />
  6. 6. 2007 : Apple MacOS 10.5 <br />MacOs Dashboard Widget<br /><br /><br />HTML5 Canvas was also introducted by Apple<br />
  7. 7. 2008 : Widget Chaos! <br />Google Desktop widget<br />Yahoo Widget<br />Naver, Daum Widget<br />All gone… <br />Non standard based<br />
  8. 8. Web as Apps<br />
  9. 9. Web apps Demo<br />Web apps? = Piece of cake<br />
  10. 10. 2010 : Chrome Webstore<br /><br />
  11. 11. Smartphone wars<br />
  12. 12. Browser Wars<br />Browser is a killer app of the smartphone<br />Opera mobile 10<br />iPhone Safari<br />Chrome lite<br />Mobile browser war is more severe than desktop<br />New technology is applied in mobile browser<br />
  13. 13. Smartphone Wars<br />Success of iPhone<br />Success of AppStore<br />Application contents matter!<br />
  14. 14. Mobile Apps Wars<br />
  15. 15. Mobile Apps Wars<br />Apple is the only winner<br />iPod, iPhone2G, iPhone 3G users<br />Followers can’t defeat this.<br />
  16. 16. Anti Apple alliances<br />Operators <br />Handset makers<br />Too many platforms <br />Windows Mobile, Limo, Android, Brew, SHP, Symbian, Proprietrary OS….<br />What can be the crossplatform?<br />
  17. 17. It’s WEB!<br />Cross Device<br />Cross Platform<br />
  18. 18. Web as mobile apps<br />
  19. 19. Widget runtime<br />Web application platform<br />Browser rendering engine based<br />HTML/CSS/Javascript is the main technology<br />Operator/OEM driven<br />Widget Manager UI<br />Widget Runtime Engine<br />= Browser Engine (Opera, Webkit)<br />
  20. 20. Widget Store<br />Android(WRT)<br />Widget<br />Store<br />Mobile Widget<br />HTML/CSS/JS<br />WM7(WRT)<br />Web Developer<br />Bada(WRT)<br />Mobile Phones<br />
  21. 21. Widget Runtime Demo<br /><br />
  22. 22. EBay search and shopping<br />User observes his watching, buying and selling items.<br />Each item shows picture, description, price, number of bids and remaining auction time.<br />Clicking on the item will open item details in the browser, where user will be able to log in and bid for item.<br />In menu screen user can set his ebay username/password and configure autorefresh time (in minutes). <br />Main screen should contain refresh button.<br />Widget will contact eBay API directly using HTTP protocol and retrieve data in JSON or XML format.<br />
  23. 23. Facebook<br />Facebook API described at and will be used. <br />User will be able to store his username/password in the widget. <br />User will be able to set his status message, and will see his own status messages history.<br />User will be able to see his own personal details.<br />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.<br />User will be able to poke selected friend, and write a message to him.<br />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.<br />Widget will periodically (time configurable in widget preferences, in minutes) check if there are new pokes, personal messages or wall messages for the user.<br />In case of new action, user will be informed by overlay icon on the widget in widget gallery.<br />Note: API key is needed. Check Terms and conditions for using it.<br />
  24. 24. Twitter<br />User will be able to store his twitter username and password in the widget (in the options menu). <br />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]. <br />On the widget main page user will see list of statuses from people he is following. <br />Each status will show user image, user profile name, message, date and 'from' field.<br />User will be able to delete his own message. <br />User will be able to start any message. <br />User will be able to reply or between any messages from another people. <br />Clicking on another user username will show this person details at the top of the screen, and messages just from this user below.<br />User will be able to set his status on twitter. <br />User will be able to see list of people he is following and his followers. <br />Clicking on follower/following name will open that user page.<br />Each relevant page will also contain a link that opens that page in the browser.<br />
  25. 25. Extend Web : Device APIs<br />Contact<br />Calendar<br />File system<br />Messaging<br />System info : CPU, Battery, etc<br />
  26. 26. Extending Web Spec<br />JIL (Joint Innovation Lab)<br />Vodafone, VZW, Softbank, China Mobile<br />BONDI(OMTP driven)<br />W3C Device APIs and Policy<br />
  27. 27. Samsung Widget SDK<br /><br />
  28. 28. Nokia Ovi Developer<br /><br />
  29. 29. Vodafone Betavine<br /><br />
  30. 30. Widgets = Mobile apps<br />
  31. 31. WAC<br />Cross-platform mobile apps<br />Cross-device apps<br />Wholesale Applications Community<br />
  32. 32. WAC<br />Widgets – Widget Runtime, SDK, Documentation, WAC Device API spec.<br />Operator API<br />
  33. 33. Size does matter<br />
  34. 34. Altogether!<br />HTML5/CSS3/SVG<br />Devices API<br />Huge market<br />20 Global operators<br />5 Handset makers<br />
  35. 35. PhoneGap<br />
  36. 36. PhoneGap<br />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<br /><br />
  37. 37. PhoneGap<br />Android<br />Market<br />Android<br />PhoneGap<br />Apple<br />Appstore<br />Mobile Widget<br />HTML/CSS/JS<br />iPhone<br />Blackberry<br />Market<br />Blackberry<br />Web Developer<br />Mobile Phones<br />
  38. 38. PhoneGap.js<br />Device API to control phone resources<br />
  39. 39. Phonegap<br /><br />
  40. 40. Mobile Web or Mobile App?<br />
  41. 41. Thank you for listening<br /><br />Blog :<br />Twitter : @manyoungc<br />Me2Day :<br />