Ionic으로 모바일앱 만들기 #1
- 1. Ionic
- 2. 으로
- 3. 모바일앱
- 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. 에디터
- 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. 확인해주세요
- 52. OSX
- 53. :
- 54. 터미널
- 55. Window
- 56. :
- 57. cmd
- 58. Nodejs
- 59. 설치
- 61. Nodejs
- 62. 설치
- 63. 2 2 설치 완료 $
- 64. node
- 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
- 126. 한성일
- 130. iheart79@gmail.com