[Codelab 2017] Ionic Framework을 통한 하이브리드앱 개발하기
Download as PPTX, PDF2 likes3,679 views
2017년 12월에 진행된 Codelab 자료입니다. 강의 및 수업 진행은 잡플래닛의 김응주님입니다.
![Ionic 프로젝트 생
성
• Ionic App 생성 (from template)
$ cd {PROJECT_PATH}
$ ionic start myApp [template option]
blan
k
tab
s
sidemen
u](https://image.slidesharecdn.com/codelab20171111-171227074003/85/Codelab-2017-Ionic-Framework-12-320.jpg)
![앱 배포하
기
• config.xml 변경하기
., {PROJECT_PATH}/config.xml
., 앱 명칭: <name>[APP NAME]</name>
., 앱 ID: <widget id=“[APP ID]” …
., 앱 버전: <widget … version=“[APP VERSION]”…
• 프로젝트 생성 시 설정하기
$ ionic start -a “[APP_NAME]” -i [APP_ID] …
• http://cordova.apache.org/docs/](https://image.slidesharecdn.com/codelab20171111-171227074003/85/Codelab-2017-Ionic-Framework-20-320.jpg)
![앱 배포하
기
• iOS
$ xcode-select —install
$ (sudo) npm install -g ios-deploy
—unsafe-perm=true
$ ionic cordova platform add ios
$ ionic cordova build ios
—> Xcode로 import
$ ionic cordova emulate ios
[--target="iPhone-6"]](https://image.slidesharecdn.com/codelab20171111-171227074003/85/Codelab-2017-Ionic-Framework-21-320.jpg)
![앱 배포하
기
• 아이콘, 스플래시 이미지 변경하기
$ cp [아이콘 이미지] resources/icon.png
$ ionic cordova resources --icon
$ cp [스플래시 이미지] resources/splash.png
$ ionic cordova resources --splash](https://image.slidesharecdn.com/codelab20171111-171227074003/85/Codelab-2017-Ionic-Framework-25-320.jpg)
[Codelab 2017] Ionic Framework을 통한 하이브리드앱 개발하기
- 1. Ionic Framework을 이 용한 하이브리드 앱 개발하기 김응주 (zard21@gmail.com)
- 2. 진행 순 서 • Ionic Framework 이해하기 • Ionic Framework 개발환경 구성 • To-Do List 앱 만들기 • 앱 배포하기 • Ionic 하이브리드 앱 개발 시 참고 사항
- 3. 모바일 앱 종 류 10001001001001010100 1000100000000101101 00010011100101101011 1 01001101010101010101 0 10101010101010101010 0 100101010010101010010 10101010101010101010 1 0101001000 Native Application Device APIs Mobile Browser HTML/Script <html> <head> … <script> … </script </head> <body> … </body> </html> Native Container Device APIs HTML/Script <html> <head> … <script> … </script </head> Native App Web App Hybrid App
- 4. 모바일 앱 종류 별 비교 Nativ e App We b App Hybri d App 디바이스 접근 가능 부분적 가능 가능 앱 속도 (성능) 매우 빠름 보통 빠름 (Native에 근 접) 개발비용 높음 낮음 보통 앱 스토어 이용 가능 불가능 가능
- 5. Ionic Framework • Drifty에서 개발한 HTML5 기반 하이브리드 앱 개발 프레임워크 • http://ionicframework.com • 무료 & 오픈소스 (MIT License) • 크로스 플랫폼 지원 (Android, iOS, Windows 등) • 다양한 네이티브 플러그인(Cordova/PhoneGap)과 클라우드 개발환경, UI도구 지원 Angula r JavaScript TypeScript HTML 5 +
- 6. Apache Cordova • 크로스 플랫폼 개발을 위한 오픈소스 모바일 프레임 워크 • JavaScript를 이용하여 Native 코드와 통신할 수 있도 록 기능 제공 • Android, iOS, Windows, Blackberry 등 다양한 플랫폼 지원
- 7. Cordova Plugins ., Battery Status ., Media ., Camera ., Media Capture ., Console ., Network ., Contacts ., Splashscreen ., Device ., Vibration ., Device Motion ., Statusbar ., ., Device Orientation Dialogs ., Whitelist ., File ., File Transfer ., Geolocation ., Globalization ., Inappbrowser
- 8. Ionic Framework • 어떤 경우에 유용할까? ., iOS와 안드로이드 앱을 동시에 개 발 ., 네이티브 앱 개발보다 Web 개발에 익숙 ., 단순하고 표준적인 UI ., 플랫폼 간 모듈의 공유
- 9. Ionic History • 2013년 11월 알파버전 발표 • 2014년 3월 1.0 베타버전 발표 • 2015년 5월 1.0 정식버전 발표 • 2016년 11월 2.0 정식버전 발표 • 2017년 5월 3.0 정식버전 발표 • 3백만 개 이상의 앱이 Ionic으 로 개발 • 5백만명 이상의 Ionic 개발자 활동
- 10. Ionic Framework 개발환경 설치 • Node.js 설치 (v6 이상) ., http://nodejs.org ., 플랫폼 별 LTS 다운로드 ., 설치 후 버전 확인 (node -v, npm -v)
- 11. Ionic Framework 개발환경 설치 • Ionic 설치 $ (sudo) npm install -g cordova ionic C:> npm install -g cordova ionic • 설치 확인 $ cordova -v $ ionic -v $ ionic info
- 12. Ionic 프로젝트 생 성 • Ionic App 생성 (from template) $ cd {PROJECT_PATH} $ ionic start myApp [template option] blan k tab s sidemen u
- 13. Ionic App 실 행 • Web Browser에서 실 행 $ cd myApp $ ionic serve
- 14. Ionic App 실 행 • 플랫폼 별Look and feel 확인 $ ionic serve --lab (ionic serve -l)
- 15. To-Do List 앱 • 데이터의 입력, 수정, 삭제 구현 • 라우팅을 이용한 페이지 전 환
- 16. 프로젝트 생 성 • To-Do List App 생성 $ cd {PROJECT_PATH} $ ionic start todoApp blank
- 17. To-Do List 페이지 추 가 $ ionic generate page todo
- 18. Ionic의 내비게이션 구현 • Angular 2의 라우터를 사용하지 않음 • 스택 구조의 내비게이션 Push Po p
- 19. To-Do List 페이지 추 가 $ ionic generate page new-todo
- 20. 앱 배포하 기 • config.xml 변경하기 ., {PROJECT_PATH}/config.xml ., 앱 명칭: <name>[APP NAME]</name> ., 앱 ID: <widget id=“[APP ID]” … ., 앱 버전: <widget … version=“[APP VERSION]”… • 프로젝트 생성 시 설정하기 $ ionic start -a “[APP_NAME]” -i [APP_ID] … • http://cordova.apache.org/docs/
- 21. 앱 배포하 기 • iOS $ xcode-select —install $ (sudo) npm install -g ios-deploy —unsafe-perm=true $ ionic cordova platform add ios $ ionic cordova build ios —> Xcode로 import $ ionic cordova emulate ios [--target="iPhone-6"]
- 22. 앱 배포하 기 • Android ., Android SDK 설치 (API Level 24) ., http://developer.android.com/sdk/ $ ionic cordova platform add android $ ionic cordova build android $ ionic emulate android
- 23. 앱 배포하 기 • Android (Fixed) $ ionic cordova platform add https:// github.com/infil00p/cordova- android.git#StudioThreeFix $ chmod -R 777 platforms/android
- 24. 앱 배포하 기 • Android (Fixed) Error: spawn EACCES $ sudo chmod 755 "/Applications/Android Studio.app/Contents/gradle/gradle-4.1/bin/ gradle”
- 25. 앱 배포하 기 • 아이콘, 스플래시 이미지 변경하기 $ cp [아이콘 이미지] resources/icon.png $ ionic cordova resources --icon $ cp [스플래시 이미지] resources/splash.png $ ionic cordova resources --splash
- 26. 앱 배포하 기 • 앱 최종 배포하기 ., Ionic Framework 홈페이지에서 Deploying 섹션 참조
- 27. Ionic 3 • Angular 5 지원 (ionic-angular 3.9.0) • Lazy Loading • Deep Linking
- 28. Ionic Market • Ionic market (http://market.ionic.io) • starter app, plugin, theme를 구입하여 사용 가능
- 29. Ionic Native • Cordova/PhoneGap 플러그인을 쉽게 추가하여 사 용할 수 있 도록 하는 ES5/ES6/TypeScript Wrapper • 필요한 추가 Cordova/PhoneGap 플러그인 설치 • ngCordova를 대체
- 30. Ionic Creator • • • 프로토타이핑, UI 개발, 커스텀 코드 추가 Project 다운로드 Ionic Creator App 공유
- 31. Ionic View • • Ionic App 프로젝트를 ionic.io(Ionic 클라우드 서비스)에 업로드 $ ionic upload Ionic View 앱을 통하여 공유
- 32. 참고 사 항 • App Layout ., 다양한 기기에서 테스트 필요 ., 안드로이의 버전 별 webview에 따른 차이 • App Performance ., VirtualScroll ., Android 구형 기기(4.0-4.3)에서 성능 이슈 존재 ., 애니메이션 효과 제거