This document provides tutorials and hands-on labs for developing mobile apps using Appspresso. It begins with tutorials for creating new Appspresso projects and explaining the project structure. It then covers topics like the HTML structure for Appspresso apps, using jQuery Mobile widgets like headers, lists and events, and accessing device capabilities like the accelerometer and gallery. The document concludes with instructions for exporting and uploading an app to app stores.

1. Appspresso
Hands-on Labs
/웹어플리케이션팀/팀장김민태
@ibarehttp://www.ibare.kribare77@gmail.com

2. Download
http://www.appspresso.com

5. HelloWorld
File New Appspresso Application Project
File New Appspresso Plugin Project

6. HelloWorld
Step 1 - project info

7. HelloWorld
Step 2 - choose template

8. HelloWorld
Project Directory Structure

9. HelloWorld
Project.xml - Overview

10. HelloWorld
Project.xml - Plugin

11. HelloWorld
Project.xml - Plugin / Add Built-in Plugin

12. HelloWorld
Project.xml - Plugin / Add Built-in Plugin ax.ext.media ax.ext.net

13. HelloWorld
Project.xml - Feature

14. HelloWorld
Project.xml - iOS

15. HelloWorld
Project.xml - Android

16. HelloWorld
Project.xml - Preference

17. HelloWorld
Project.xml - Source

18. HelloWorld
Index.html

19. HelloWorld
Run demo

20. Web Development
Reload
Code Deploy Run Edit

21. Native Development
Code Compile Run Edit

22. On the fly development
1
Code Compile
Reload
Run
Edit

23. Setup on the fly
Preference

24. Use on the fly
St
p
ar
o
St
t
2 1
5
4
Start file
3
Project
6
Evaluate

25. On the fly
demo

26. SPI (Single Page Interface)
file 1
BODY
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

27. jQueryMobile

28. HTML Structure

29. !doctype html
html
head
meta name=apple-mobile-web-app-capable content=yes
meta name=apple-mobile-web-app-status-bar-style content=black
link rel=stylesheet href=css/jquery.mobile-1.0a4.1.css /
script src=js/jquery-1.5.js/script
script src=js/jquery.mobile-1.0a4.1.js/script
script src=/appspresso/appspresso.js/script
/head
body
div data-role=”page” id=”home”
div data-role=”header”
/div
div data-role=”content”
/div
div data-role=”footer”
/div
/div
/body

30. !doctype html
html
head
meta name=apple-mobile-web-app-capable content=yes
meta name=apple-mobile-web-app-status-bar-style content=black
link rel=stylesheet href=css/jquery.mobile-1.0a4.1.css /
script src=js/jquery-1.5.js/script
script src=js/jquery.mobile-1.0a4.1.js/script
script src=/appspresso/appspresso.js/script
/head
body
div data-role=”page” id=”home”
div data-role=”header”
/div
div data-role=”content”
/div
div data-role=”footer”
/div
/div
/body

31. !doctype html
html
head
meta name=apple-mobile-web-app-capable content=yes
meta name=apple-mobile-web-app-status-bar-style content=black
link rel=stylesheet href=css/jquery.mobile-1.0a4.1.css /
script src=js/jquery-1.5.js/script
script src=js/jquery.mobile-1.0a4.1.js/script
script src=/appspresso/appspresso.js/script
/head
body
div data-role=”page” id=”home”
div data-role=”header”
/div
div data-role=”content”
/div
div data-role=”footer”
/div
/div
/body

32. !doctype html
html
head
meta name=apple-mobile-web-app-capable content=yes
meta name=apple-mobile-web-app-status-bar-style content=black
link rel=stylesheet href=css/jquery.mobile-1.0a4.1.css /
script src=js/jquery-1.5.js/script
script src=js/jquery.mobile-1.0a4.1.js/script
script src=/appspresso/appspresso.js/script
/head
body
div data-role=”page” id=”home”
div data-role=”header”
/div
div data-role=”content”
/div
div data-role=”footer”
/div
/div
/body

33. !doctype html
html
head
meta name=apple-mobile-web-app-capable content=yes
meta name=apple-mobile-web-app-status-bar-style content=black
link rel=stylesheet href=css/jquery.mobile-1.0a4.1.css /
script src=js/jquery-1.5.js/script
script src=js/jquery.mobile-1.0a4.1.js/script
script src=/appspresso/appspresso.js/script
/head
body
div data-role=”page” id=”home”
div data-role=”header”
/div
div data-role=”content”
/div
div data-role=”footer”
/div
/div
/body

34. Header

35. div data-role=”header”
h1KichenSink/h1
/div

36. div data-role=”header”
h1KichenSink/h1
a href=”#about” data-role=”button”About/a
/div

37. 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

38. Content

39. div data-role=”content”
/div

40. div data-role=”content”
div id=logo
img src=kichensink.png
/div
/div

41. 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

42. ListView

43. ul data-role=”listview”
liDevice/li
liPIM/li
/ul

44. ul data-role=”listview”
lia href=”#”Device/a/li
lia href=”#”PIM/a/li
/ul

45. 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

46. 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

47. 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

48. Event

49. page A page B
pagebeforeshow
pageshow
pagebeforehide
pagehide

50. Tutorials

51. Devicestatus
deviceapis.devicestatus.getPropertyValue (
function_success_callback,
function_error_callback,
options
);
function success_cb(value) {
}
function error_cb() {
}

52. Devicestatus
Aspect Properties
Battery batteryLevel,batteryBeginCharged
CellularHardware status
CellularNetwork isInRoaming,signalStrength,operatorName
Device imei,model,version,vendor
resolutionHeight,pixelAspectRatio,dpiY,resolutionWidth,dpiX,
Display colorDepth
MemoryUnit size,removable,availableSize
OperatingSystem language,version,name,vendor
WebRuntime wacVersion,supportedImageFormats,version,name,vendor
WiFiHardware status
WiFiNetwork ssid,signalStrength,networkStatus

53. Devicestatus
Demo

54. Accelerometer
+Y
-X -Z
+Z +X
-Y

55. Accelerometer
deviceapis.accelerometer.watchAcceleration (
function_success_callback,
function_error_callback,
{ minNotificationInterval: 50 }
);
function success_cb(acceleration) {
ax.log(acceleration.xAxis);
}
function error_cb() {
}

57. Gallery
ax.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() {
}

58. Gallery
Demo

59. Export to App Store

60. Upload App App Store
iOS Developer Program $99 / year

61. Upload App App Store
iOS Dev Center

62. Upload App App Store
Provisioning Portal

63. Upload App App Store
Development Provisioning Assistant

64. Upload App App Store
Distribution

65. Upload App App Store
iTunes Connect

66. Upload App App Store
Manage Your Apps

67. Upload App App Store
Manage Your Apps

68. Upload App App Store
Upload

69. Appspresso
Hands-on Labs
/웹어플리케이션팀/팀장김민태
@ibarehttp://www.ibare.kribare77@gmail.com
감사합니다