make hybrid app
TRANSCRIPT
하이브리드 앱을 만들자 by cordova
(windows environment)
노드 설치하기CMD 창에서 버전확인 명령어로 정상적으로 설치되었는지 확인http://nodejs.org 에서 다운로드 후 설치 next.next.finishNode 4.x 버전 다운로드 . 5.0 버전에 코도바 프로젝트 생성 시 에러 있음
node -vnpm –v
코도바 설치하기npm 명령어로 cordova 설치하기 Npm install cordova -g
-g 옵션은 개발환경을 글로벌 영역에 설치 의미
Cordova -v 설치된 코도바 버전 확인
안드로이드 SDK 설치하기 1https://developer.android.com/sdk/installing/index.html
스튜디오를 설치해도 상관없음* 자바 환경설정이 되어 있어야 함
안드로이드 SDK 설치하기 2시스템 변수에 아래 경로 추가안드로이드 설치 path/sdk/tools안드로이드 설치 path/sdk/platform-tools
안드로이드 SDK 설치하기 3
Android –hAdb version
아래 커맨드를 실행하여 환경변수 설정이 제대로 되었는지 확인
안드로이드 에뮬레이터 설정android 명령어로 Android SDK Manager 를 실행Tools -> Manage AVDs 에서 가상디바이스를 생성
코도바 예제 생성 1cordova create hello com.example.hello HelloWorld -d
hello 라는 코도바 프로젝트 생성 명령어 – d 옵션은 경과 표시cd hellocordova platform add ioscordova platform add android생성한 프로젝트경로에서 ios 와 android 를 플랫폼으로 추가
코도바 예제 생성 2Cordova platform ls
프로젝트에 설치된 플랫폼 확인
Cordova platform remove ios설치된 플랫폼 삭제 ( 예 : ios)
코도바 예제 폴더 설명설치한 플랫폼
웹뷰에서 실행될 웹 관련 파일
코도바 플러그인
예제 프로젝트 실행에뮬레이터로 실행
웹브라우저로 실행
실제 디바이스로 실행디바이스의 디버그 옵션을 켜놔야함
Cordova emulate android –dCordova emulate ios -d
Cordova run android -dCordova run ios -d
Cordova serve
코도바 플러그인 설치https://cordova.apache.org
공식 사이트에서 플러그인 검색 후 설치
cordova plugin add cordova-plugin-camera검색한 플러그인 이름으로 설치 ( 예 : cordova-plugin-camera)
코도바 실행 life cycle(?) 설명순서1.DomContentLoaded (dom 모두 읽음 )2.Load ( 렌더링 리소스 모두 읽음 )3.Deviceready ( 네이티브 접근가능 )
Cordova prepare -d수정된 프로젝트 적용
프로젝트 재실행Cordova run android