본문으로 바로가기

Cordova(코르도바 앱 개발) - (1).기초강의 - 개발 환경 설정

category 모바일/Hybrid 2017. 11. 3. 16:17

Cordova - 기본 플랫폼(Platform) 지원 설명

 

① 프로젝트 진행 중 Cordova를 활용하여 수월하게 앱 개발이 가능했다.

아래 그림과 개발 계획 수립 시 플랫폼(Platform) 별 기능 지원 여부를 꼭 확인해야 한다.

③ Cordova 개발 환경 설정에 요구되는 도구(프로그램)는 아래에서 설명한다.

 

 

Cordova - 기본 프로그램 설치 확인


Cordova 개발 환경 설정을 위해서는 아래 프로그램이 필요하다.
 - jdk(sdk)

 - npm(Node.js)

 - cordova

 - git (cordova Plug-in 설치)

 - 안드로이드 스튜디오 - 안드로이드 개발 시

 - Xcode - iOS 개발 시

 - 단말기(안드로이드폰, 아이폰 등)

 

(1). 개발환경에 맞는 Mac 또는 윈도우 환경에서 개발해야 한다.

(2). 위 프로그램들은 인터넷에 많은 설치 방법 자료가 있으므로, 타 블로그를 참조해서 설치 하자.

(3). 설치 완료 후 아래 콘솔 명령어를 통해서 제대로 설치되었는지 확인(윈도우, Mac 공통)


 

Cordova - 빌드(Build) 및 폴더 확인

 

- 윈도우 또는 맥(Mac) 콘솔에서 아래와 같이 실행 한다.

- 개발 예정인 플랫폼을 추가 (안드로이드, iOS 등)

- 안드로이드의 경우에는 안드로이드 스튜디오 설치하면 OK

- iOS의 경우에는 xcode 설치 후 실행 가능

- 본 포스팅에서는 안드로이드 기준으로 설명한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#npm 업데이트
npm update -g
 
#Cordova 설치
npm install -g cordova 
 
#Cordova 프로젝트 생성
#cordova create helloworld com.test.helloworld Helloworld
cordova create 경로 패키지 프로젝트명
 
#Cordova Platform 추가(선택)
cordova platform add ios
cordova platform add amazon-fireos
cordova platform add android
cordova platform add blackberry10
cordova platform add firefoxos
 
#Cordova Platform 제거(선택)
cordova platform remove ios
cordova platform remove amazon-fireos
cordova platform remove android
cordova platform remove blackberry10
cordova platform remove firefoxos
cs

 

실행화면

 

 

 

 

 

Cordova - 빌드(Build) 및 폴더 확인

 

아래 명령어를 환경에 맞게 실행한다.

 

1
2
3
4
5
6
7
8
#Cordova Platform 빌드(선택)
cordova build                   #디버그 
cordova build android           #디버그
cordova build --release android #릴리즈
 
#Cordova 실행
cordova emulate android #에뮬레이터 실행
cordova run android     #실제 단말기 실행
cs


 

실행화면

 

 

 

빌드 후 결과 폴더 확인

 

 

  다음 포스팅에서는 빌드(Build) 완료 후 안드로이드 스튜디오 및 실 단말기 에서 실행 하는 법을 알아본다.

 

 


 



댓글을 달아 주세요

  1. BlogIcon newna 2017.11.07 18:27

    다음거 언제올라와요...g