E2 appspresso hands on lab

1,589 views

Published on

Published in: Technology, News & Politics
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total views
1,589
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
61
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

E2 appspresso hands on lab

  1. 1. AppspressoHands-on Labs/웹어플리케이션팀/팀장김민태 @ibarehttp://www.ibare.kribare77@gmail.com
  2. 2. Downloadhttp://www.appspresso.com
  3. 3. HelloWorldFile New Appspresso Application ProjectFile New Appspresso Plugin Project
  4. 4. HelloWorldStep 1 - project info
  5. 5. HelloWorldStep 2 - choose template
  6. 6. HelloWorldProject Directory Structure
  7. 7. HelloWorldProject.xml - Overview
  8. 8. HelloWorldProject.xml - Plugin
  9. 9. HelloWorldProject.xml - Plugin / Add Built-in Plugin
  10. 10. HelloWorldProject.xml - Plugin / Add Built-in Plugin ax.ext.media ax.ext.net
  11. 11. HelloWorldProject.xml - Feature
  12. 12. HelloWorldProject.xml - iOS
  13. 13. HelloWorldProject.xml - Android
  14. 14. HelloWorldProject.xml - Preference
  15. 15. HelloWorldProject.xml - Source
  16. 16. HelloWorldIndex.html
  17. 17. HelloWorldRun demo
  18. 18. Web Development Reload Code Deploy Run Edit
  19. 19. Native Development Code Compile Run Edit
  20. 20. On the fly development 1 Code Compile Reload Run Edit
  21. 21. Setup on the flyPreference
  22. 22. Use on the fly St p ar o St t 2 1 5 4 Start file 3Project 6 Evaluate
  23. 23. On the flydemo
  24. 24. SPI (Single Page Interface)file 1BODY Stack History Management data-role=”page” id=”page1” data-role=”header” H1 data-role=”content” file 2 file 3 . . !doctype html div . html data-role=”page” ... ... href=”link” data-role=”page” id=”page2” . . . Ajax 26
  25. 25. jQueryMobile
  26. 26. HTML Structure
  27. 27. !doctype htmlhtmlheadmeta name=apple-mobile-web-app-capable content=yesmeta name=apple-mobile-web-app-status-bar-style content=blacklink rel=stylesheet href=css/jquery.mobile-1.0a4.1.css /script src=js/jquery-1.5.js/scriptscript src=js/jquery.mobile-1.0a4.1.js/scriptscript src=/appspresso/appspresso.js/script/headbodydiv data-role=”page” id=”home” div data-role=”header” /div div data-role=”content” /div div data-role=”footer” /div/div/body
  28. 28. !doctype htmlhtmlheadmeta name=apple-mobile-web-app-capable content=yesmeta name=apple-mobile-web-app-status-bar-style content=blacklink rel=stylesheet href=css/jquery.mobile-1.0a4.1.css /script src=js/jquery-1.5.js/scriptscript src=js/jquery.mobile-1.0a4.1.js/scriptscript src=/appspresso/appspresso.js/script/headbodydiv data-role=”page” id=”home” div data-role=”header” /div div data-role=”content” /div div data-role=”footer” /div/div/body
  29. 29. !doctype htmlhtmlheadmeta name=apple-mobile-web-app-capable content=yesmeta name=apple-mobile-web-app-status-bar-style content=blacklink rel=stylesheet href=css/jquery.mobile-1.0a4.1.css /script src=js/jquery-1.5.js/scriptscript src=js/jquery.mobile-1.0a4.1.js/scriptscript src=/appspresso/appspresso.js/script/headbodydiv data-role=”page” id=”home” div data-role=”header” /div div data-role=”content” /div div data-role=”footer” /div/div/body
  30. 30. !doctype htmlhtmlheadmeta name=apple-mobile-web-app-capable content=yesmeta name=apple-mobile-web-app-status-bar-style content=blacklink rel=stylesheet href=css/jquery.mobile-1.0a4.1.css /script src=js/jquery-1.5.js/scriptscript src=js/jquery.mobile-1.0a4.1.js/scriptscript src=/appspresso/appspresso.js/script/headbodydiv data-role=”page” id=”home” div data-role=”header” /div div data-role=”content” /div div data-role=”footer” /div/div/body
  31. 31. !doctype htmlhtmlheadmeta name=apple-mobile-web-app-capable content=yesmeta name=apple-mobile-web-app-status-bar-style content=blacklink rel=stylesheet href=css/jquery.mobile-1.0a4.1.css /script src=js/jquery-1.5.js/scriptscript src=js/jquery.mobile-1.0a4.1.js/scriptscript src=/appspresso/appspresso.js/script/headbodydiv data-role=”page” id=”home” div data-role=”header” /div div data-role=”content” /div div data-role=”footer” /div/div/body
  32. 32. Header
  33. 33. div data-role=”header” h1KichenSink/h1/div
  34. 34. div data-role=”header” h1KichenSink/h1 a href=”#about” data-role=”button”About/a/div
  35. 35. div data-role=”header” h1KichenSink/h1 a href=”#about” data-role=”button”About/a div data-role=navbar ul lia href=#Flickr/a/li lia href=#Yahoo/a/li lia href=#Twitter/a/li /ul /div/div
  36. 36. Content
  37. 37. div data-role=”content”/div
  38. 38. div data-role=”content” div id=logo img src=kichensink.png /div/div
  39. 39. div data-role=”content” div id=logo img src=kichensink.png /div ul data-role=”listview” lia href=”#”Device/a/li lia href=”#”PIM/a/li /ul/div
  40. 40. ListView
  41. 41. ul data-role=”listview” liDevice/li liPIM/li/ul
  42. 42. ul data-role=”listview” lia href=”#”Device/a/li lia href=”#”PIM/a/li/ul
  43. 43. ul data-role=”listview” li a href=”#” h1Device/h1 pDevice status, .../p /a /li li a href=”#” h1PIM/h1 pContacts, Calendar, Task/p /a /li/ul
  44. 44. ul data-role=”listview” li a href=”#” h1Device/h1 pDevice status, .../p /a /li li a href=”#” h1PIM/h1 pContacts, Calendar, Task/p span class=ui-li-count3/span /a /li/ul
  45. 45. ul data-role=”listview” li a href=”#” img src=”my_image.jpg” h1Device/h1 pDevice status, .../p /a /li li a href=”#” h1PIM/h1 pContacts, Calendar, Task/p span class=ui-li-count3/span /a /li/ul
  46. 46. Event
  47. 47. page A page B pagebeforeshow pageshow pagebeforehide pagehide
  48. 48. Tutorials
  49. 49. Devicestatusdeviceapis.devicestatus.getPropertyValue ( function_success_callback, function_error_callback, options);function success_cb(value) {}function error_cb() {}
  50. 50. Devicestatus Aspect PropertiesBattery batteryLevel,batteryBeginChargedCellularHardware statusCellularNetwork isInRoaming,signalStrength,operatorNameDevice imei,model,version,vendor resolutionHeight,pixelAspectRatio,dpiY,resolutionWidth,dpiX,Display colorDepthMemoryUnit size,removable,availableSizeOperatingSystem language,version,name,vendorWebRuntime wacVersion,supportedImageFormats,version,name,vendorWiFiHardware statusWiFiNetwork ssid,signalStrength,networkStatus
  51. 51. DevicestatusDemo
  52. 52. Accelerometer +Y -X -Z +Z +X -Y
  53. 53. Accelerometerdeviceapis.accelerometer.watchAcceleration ( function_success_callback, function_error_callback, { minNotificationInterval: 50 });function success_cb(acceleration) { ax.log(acceleration.xAxis);}function error_cb() {}
  54. 54. Galleryax.ext.media.pickImage( function_success_callback, function_error_callback, options);function success_cb(file) { deviceapis.filesystem.resolve( success_cb, error_cb, file, r );}function error_cb() {}
  55. 55. GalleryDemo
  56. 56. Export to App Store
  57. 57. Upload App App StoreiOS Developer Program $99 / year
  58. 58. Upload App App StoreiOS Dev Center
  59. 59. Upload App App StoreProvisioning Portal
  60. 60. Upload App App StoreDevelopment Provisioning Assistant
  61. 61. Upload App App StoreDistribution
  62. 62. Upload App App StoreiTunes Connect
  63. 63. Upload App App StoreManage Your Apps
  64. 64. Upload App App StoreManage Your Apps
  65. 65. Upload App App StoreUpload
  66. 66. AppspressoHands-on Labs/웹어플리케이션팀/팀장김민태 @ibarehttp://www.ibare.kribare77@gmail.com 감사합니다

×