Ionic으로 모바일앱 만들기 #1

1. Ionic

2. 으로

3. 모바일앱

4. 만들기
#1. Ionic
ABCD,

5. 스노우키위

6. 한성일

7. 1. ABCD 소개
2. 모바일앱 종류
3. Node.js, Angula.js, Cordova, Ionic
4. Ionic 설정
5. 기본템플릿
6. Hello Ionic
코스

8. 1.

9. ABCD

10. 소개

12. 아이스

13. 브레이킹
I

14. AM

15. 2.

16. 준비

17. 에디터

18. 설치
1 2http://brackets.io/ 다운로드

19. 2.

20. 모바일앱

21. 종류

22. 모바일앱종류

23. Web

24. APP
모바일 형태로 구현된 웹페이지
일반적인 m.* 으로 시작됩
반응형 웹
화면을 줄이면 모바일형태로 변경
모바일 브라우져에서 구동

25. Native

26. APP
일반적인 스마트폰 앱

27. Hybrid

28. APP
웹기술을 이용하여 네이티브 기능 호출
http://showcase.ionicframework.com/

29. 특징

30. 비교

31. 3.

32. Nodejs,

33. Angulajs,

34. Cordova

35.
Ionic

36. Ionic은?
http://ionicframework.com/
Nodejs 와 Angularjs 를 이용하여 하이브리드 앱 제작에
필요한 다양한 기능들을 제공함
기기를 이용하는 부분은 CORDOVA 를 랩핑해서 사용함

37. ANGULARJS
자바스크립트를
MVC 로 활용
1. Scope
2. Model
3. View
4. Controller
5. Directives
간단한 데이터 바인딩
직관적인 소스
다양한 기능의 프레임웍

38. nodejs

39. CORDOVA

40. 3.

41. Ionic

42. 설정

43. 주의
!!
맥과

44. 윈도우의

45. 설정

46. 화면이

47. 다르므로

48.
상단의

49. 마크를

50. 확인해주세요

51.
OSX
WINDOW
CONSOLE

52.
OSX

53. :

54. 터미널

55.
Window

56. :

57. cmd

58. Nodejs

59. 설치

60. 1
1 https://nodejs.org/

61. Nodejs

62. 설치

63. 2
2 설치 완료
$

64. node

66. console.log('hello

67. node');

68.
hello

69. node

70.
undefined

72. process.exit(1);

73. 작업폴더

74. 설정
프로그램 및 파일 검색
cmd
cmd
c:mkdir c:ionic-space
c:cd c:ionic-space

75. 작업폴더

76. 설정

77. (맥)
$ mkdir ~/Documents/ionic-space
$ cd ~/Documents/ionic-space
1
2
3

78. Cordova

79. 설치
3 $ sudo npm install -g cordova
npm install -g cordova
npm : nodejs package manager
$ 두가지 명령어가 다있다면
$ 로 시작하는 명령어는 맥에서
로 시작하는 명령어는 윈도우에서 실행합니다.

80. Ionic

81. 설치
4
$ sudo npm install -g ionic
npm install -g ionic

82. 프로젝트

83. 생성
5 $ ionic start firstApp
여기까지 오셨으면 프로젝트 설정이 완료 입니다.

84. Ionic.io

85. 가입
6
아이디
이름
회원가입

86. Ionic

87. 설치
7 firstApp 프로젝트 생성 확인 (윈도우 c:ionic-space)

88. Platform
에뮬레이터 설정 (IOS, Android)
$ ionic platform add ios
$ sudo npm install -g ios-sim
$ ionic platform add android
$ cd firstApp
// 아이폰 설정
// 안드로이드
// 생성된 프로젝트 경로로 이동
8

89. 여기서

90. 잠깐
안드로이드 에뮬레이터를 실행 하시려면 안드로이드 SDK를
아이폰 에뮬레이터를 실행하시려면 XCODE가 필요합니다.
윈도우에서는 XCODE를 설치 할 수 없어 아이폰 개발이 불가능 하며
에뮬레이터도 실행 할 수 없습니다.
XCODE는 맥 앱스토어에서 설치하세요
https://developer.android.com/sdk/index.html
안드로이드는 다음에서 Android Studio 를 다운로드 해서 설치합니다.
!! 중간에 JDK 설치가 필요하다는
문구가 나오면 설치해줍니다.
!! 앞장에 ios-sim XCODE가 설치되어있어야 설치됩니다.

91. 에뮬레이터

92. 실행
$ ionic emulate ios$ ionic emulate android9

93. Platform

94. list
$ cordova platform list
설치가능한 플랫폼 리스트를 보여줍니다.

95. 브라켓

96. 작업

97. 폴더

98. 설정
1 2
3
폴더열기 프로젝트 폴더 선택
프로젝트 리스트

99. 4.

100. 기본템플릿

101. blank
$ cd ..
$ ionic start blankApp blank
$ cd blankApp
$ ionic serve

102. sidemenu
$ cd ..
$ ionic start sidemenuApp sidemenu
$ cd seidmenuApp
$ ionic serve

103. tabs
$ cd ..
$ ionic start tabsApp tabs
$ cd tabsApp
$ ionic serve

104. 5.

105. Hello

106. Ionic

107. Hello

108. Ionic
$ cd ..
$ cd firstApp
$ ionic serve

109. Hello

110. Ionic
firstApp/www/app.js 에 추가
.state('tab.hello', {
url: '/hello',
views: {
'tab-hello': {
templateUrl: 'templates/tab-hello.html',
controller: 'HelloCtrl'
}
}
})

111. Hello

112. Ionic
firstApp/www/controllers.js 에 다음라인 추가
.controller('HelloCtrl', function($scope) {})

113. Hello

114. Ionic
firstApp/templates/tab-hello.html
파일 생성 후 추가
ion-view view-title=Hello
ion-content
안녕 아이오닉
/ion-content
/ion-view
추가
templates 폴더에서
오른쪽 버튼

115. Hello

116. Ionic
firstApp/templates/tabs.html
Hello Tab 추가
!-- Hello Tab --
ion-tab title=Hello icon-off=ion-ios-gear-outline
icon-on=ion-ios-gear href=#/tab/hello
ion-nav-view name=tab-hello/ion-nav-view
/ion-tab

117. Hello

118. Ionic

119. 수고하셨습니다.

120. :)
ABCD

122. http://abcds.kr

125. https://www.facebook.com/groups/562787713823026/

126.
한성일

128. https://www.facebook.com/jamie.han.16

130. iheart79@gmail.com