Apache Cordova 설치 방법 및 App 생성하기 for Windows

Apache Cordova는(이전 명칭: PhoneGap)은 니토비(Nitobi)가 만들고 어도비가 인수한 모바일 개발 프레임워크입니다.

소프트웨어 개발자들이 오브젝티브-C처럼 기기에 특화된 언어들 대신 javascript, HTML5, CSS3를 이용하여 모바일 애플리케이션을 만들 수 있게 합니다.

 

 

Java SE Development Kit 설치

1) 공식 웹 사이트에서 SDK를 다운로드합니다.

2) JDK 설치가 완료되면 환경변수 > 시스템 변수에JAVA_HOME을 추가해야 합니다.

3) 그 후에 환경변수 > PATH에% JAVA_HOME%\bin을 추가합니다.

 

 

 

Andriod Studio에서 Andriod SDK 설치(Andriod App를 만들 경우)

1) 공식 웹 사이트에서 Andriod Studio를 다운로드합니다.

2) Andriod Studio를 설치합니다.

3) 설치가 완료되면 환경변수 > 시스템 변수에 ANDROID_HOME을 추가합니다.

    - 기본 경로: C:\Users\[사용자명]\AppData\Local\Andriod\Sdk

4) 환경변수 > PATH에 아래 경로들을 추가합니다.

    - %ANDROID_HOME%

    - %ANDROID_HOME%\tools

    - %ANDROID_HOME%\platform-tools

5) Android SDK 라이선스 동의

    - 명령 프롬프트 창을 띄운 후 아래 명령어를 입력합니다.

%ANDROID_HOME%/tools/bin/sdkmanager --licenses

* 라이선스 동의를 하지 않을 경우 아래와 같은 오류 메시지가 발생합니다.

Failed to install the following Android SDK packages as some licences have not been accepted

 

 

5) 명령 프롬프트 창이 켜져 있다면 닫고 다시 열어야 합니다.

 

 

 

Gradle 설치

* Gradle이 없는 상태에서 Android를 build 할 경우 아래와 같은 오류가 발생합니다.

Error Could not find an installed version of Gradle either in Android Studio

 

 

1) 공식 웹 사이트에서 Gradle을 다운로드합니다.

1-1) release page 링크 클릭

1-2) 설치할 버전의 다운로드 링크 클릭

 

 

Cordova CLI 설치 방법

Cordova Command-line tool은 npm package로 배포됩니다.

 

1) Node.js를 다운로드 후 설치합니다.

2) Node.js의 npm을 이용하여 cordova를 설치합니다.

• Windows key + R 입력 후 cmd를 입력하여 command 창을 띄운 후 아래 명령어를 입력합니다.

C:\>npm install -g cordova

-g 옵션은 전역적으로 cordova를 설치하도록 하는 옵션입니다. 이 옵션을 사용하지 않으면 현재 작업 폴더의 하위 폴더에 설치됩니다.

 

 

App 생성 방법

 

1) App를 생성할 폴더로 이동합니다.

2) 프로젝트 생성 명령어를 입력합니다.

C:\>cordova create hello com.example.hello HelloWorld

- synax

cordova create path [id [name [config]]] [options]

Value	Description
path	cordova가 생성할 폴더입니다.
id	기본값: io.cordova.hellocordova config.xml에서 위젯 요소의 ID 속성에 mapping되는 역방향 도메인 유형 식별자입니다.
name	기본값: HelloCordova config.xml 파일 기록되는 응용 프로그램의 표시 이름입니다.
config	config.json에 기록될 JSON 형식의 string입니다.

 

 

이렇게 하면 Cordova App에 필요한 폴더 구조가 생성됩니다. 기본적으로 cordova create 스크립트는 홈 페이지가 www/index.html 인 기본 웹 기반 애플리케이션을 생성합니다.

 

3) 생성된 App 폴더로 이동합니다.

C:\>cd hello

 

4) 플랫폼 추가

App를 설치할 플랫폼을 추가합니다.

# IOS용 app를 만들 경우
C:\>cordova platform add ios

# 안드로이드용 app를 만들 경우
C:\>cordova platform add android

 

5) 개발된 웹 소스를 hello\www에 복사합니다.

    - 주의! index.html은 반드시 존재해야 합니다.

 

6) App build

아래 명령을 실행하여 프로젝트를 build 합니다.

C:\>cordova build

 

 

App Test

생성된 App을 휴대폰에 설치하지 않고 아래 명령어를 입력하여 테스트가 가능합니다.

C:\>cordova emulate andriod

 

 

 

 

 

 

 

 

 

[참고 사이트]

cordova.apache.org/docs/en/latest/guide/cli/index.html

Creating your first Cordova app - Apache Cordova

riptutorial.com/ko/cordova

Cordova - 코르도바 시작하기 | cordova Tutorial

dreamlog.tistory.com/582

[Cordova] 하이브리드 앱 만들기 - 1

stackoverflow.com/questions/43480076/ionic-2-error-could-not-find-an-installed-version-of-gradle-either-in-android

ionic 2 - Error Could not find an installed version of Gradle either in Android Studio

stackoverflow.com/questions/54273412/failed-to-install-the-following-android-sdk-packages-as-some-licences-have-not

"Failed to install the following Android SDK packages as some licences have not been accepted" error

cordova.apache.org/docs/en/latest/reference/cordova-cli/index.html#cordova-create-command

CLI Reference - Apache Cordova