Top Banner
하하하하하 하하 하하하 by cordova (windows environment)
13

make hybrid app.

Jan 16, 2017

Download

Software

JiSeob Kim
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: make hybrid app.

하이브리드 앱을 만들자 by cordova

(windows environment)

Page 2: make hybrid app.

노드 설치하기CMD 창에서 버전확인 명령어로 정상적으로 설치되었는지 확인http://nodejs.org 에서 다운로드 후 설치 next.next.finishNode 4.x 버전 다운로드 . 5.0 버전에 코도바 프로젝트 생성 시 에러 있음

node -vnpm –v

Page 3: make hybrid app.

코도바 설치하기npm 명령어로 cordova 설치하기 Npm install cordova -g

-g 옵션은 개발환경을 글로벌 영역에 설치 의미

Cordova -v 설치된 코도바 버전 확인

Page 4: make hybrid app.

안드로이드 SDK 설치하기 1https://developer.android.com/sdk/installing/index.html

스튜디오를 설치해도 상관없음* 자바 환경설정이 되어 있어야 함

Page 5: make hybrid app.

안드로이드 SDK 설치하기 2시스템 변수에 아래 경로 추가안드로이드 설치 path/sdk/tools안드로이드 설치 path/sdk/platform-tools

Page 6: make hybrid app.

안드로이드 SDK 설치하기 3

Android –hAdb version

아래 커맨드를 실행하여 환경변수 설정이 제대로 되었는지 확인

Page 7: make hybrid app.

안드로이드 에뮬레이터 설정android 명령어로 Android SDK Manager 를 실행Tools -> Manage AVDs 에서 가상디바이스를 생성

Page 8: make hybrid app.

코도바 예제 생성 1cordova create hello com.example.hello HelloWorld -d

hello 라는 코도바 프로젝트 생성 명령어 – d 옵션은 경과 표시cd hellocordova platform add ioscordova platform add android생성한 프로젝트경로에서 ios 와 android 를 플랫폼으로 추가

Page 9: make hybrid app.

코도바 예제 생성 2Cordova platform ls

프로젝트에 설치된 플랫폼 확인

Cordova platform remove ios설치된 플랫폼 삭제 ( 예 : ios)

Page 10: make hybrid app.

코도바 예제 폴더 설명설치한 플랫폼

웹뷰에서 실행될 웹 관련 파일

코도바 플러그인

Page 11: make hybrid app.

예제 프로젝트 실행에뮬레이터로 실행

웹브라우저로 실행

실제 디바이스로 실행디바이스의 디버그 옵션을 켜놔야함

Cordova emulate android –dCordova emulate ios -d

Cordova run android -dCordova run ios -d

Cordova serve

Page 12: make hybrid app.

코도바 플러그인 설치https://cordova.apache.org

공식 사이트에서 플러그인 검색 후 설치

cordova plugin add cordova-plugin-camera검색한 플러그인 이름으로 설치 ( 예 : cordova-plugin-camera)

Page 13: make hybrid app.

코도바 실행 life cycle(?) 설명순서1.DomContentLoaded (dom 모두 읽음 )2.Load ( 렌더링 리소스 모두 읽음 )3.Deviceready ( 네이티브 접근가능 )

Cordova prepare -d수정된 프로젝트 적용

프로젝트 재실행Cordova run android