Cordova는 Java없이 웹을 만들수만 있다면 웹앱을 쉽게 만들어주는 프로그램이다.
즉, 웹 개발자가 좀더 쉽게 웹을 앱으로 만들 수 있다. (Java를 모르더라도)
Cordova 설치 관련 문서
우선 cordova 사이트에서 다운 받는 방법을 보자.
GET STARTED를 누르면 다운 받는 방법이 나온다. 그전에 필요한 것이 있다. 사이트를 읽어보자.
자바스크립트 없이 js 를 쓰기 위해 Node.js가 필요하다.
NPM - 자바 프로그램을 관리하는 library를 모아둔 것 ( 깃허브처럼 )
CORDOVA 설치를 위해선 Node.js 와 NPM이 필요하다.
CORDOVA는 Java가 필요하다. JSK 필요. 안드로이드 스튜디오의 openJDK 가 안먹는다. 그래서 openJDK를 따로 설치해주는 chocolatey를 이용할 것이다. ( 만약 oracle JDK가 있으면 chocolatey 필요 없음)
위 사진에서 Node.js 를 새탭으로 열어서 Node.js를 다운 받자.
사용하는 컴퓨터에 JDK가 없으면 체크하고 Next를 누르자.
이제 Node.js와 chocolatey가 다운됐을 것이다. cmd창을 이용해서 확인해보자.
이제 아까 Cordova 사이트를 보면 Sep.1에 명령어가 써져 있을 것이다. 순서를 보고 차근차근 따라하면 된다.,
명령어 : npm install -g cordova
cordova에 대한 예제는 아래 경로에 만들겠다.
이제 cordava를 이용해서 폴더, 패키지,앱이름을 만들자.
만든 경로까지 접속을 하고 cordova -help를 입력하면 명령어를 알 수 있다.
create 명령어를 사용할때는 세가지를 써줘야 한다.
Cordova 홈페이지에서는 MyApp이라고만 써져있는데 뒤에 두가지를 쓰지 않으면 자동으로 생성되고 똑같은 이름으로 되기 때문에, 나중에도 중복이 될 수 있다.
그래서 만들때 폴더명,패키지명,앱명을 써주자. [패키지는 소문자로만 보통쓴다. 클래스명과 구분]
그럼 platforms 폴더 안에 android폴더가 생길 것이다.
이제 개발 환경을 확인해보자.
명령어 : cordova requirements
Java JDK, Android target, Android SDK, Gradel 총 4가지가 설치되어 있어야 한다.
현재 Java JDK, Android target, Gradel 3개는 not installed 이고, Android SDK만 installed이다.
(현재 컴퓨터는 Android Studio만 깔려있다.)
Node.js다운받을 때, openJDK를 사용하기 위해 chocolatey를 체크하고 다운받았다.
우선 cmd를 관리자 권한으로 실행하자. ( python2 jdk8 설치)
명령어 : choco install -y nodechoco install -y nodejs.install python2 jdk8
JDK가 다 깔리면 c:\Program Files\java라는 폴더가 생성됐을 것이다.
그리고 환경 변수에 자동으로 생성되었을 것이다.
[ 환경변수 Path에 추가하는이유는 프롬프트창 어디든 알아들을 수 있게.. ]
없다면 해당 경로 C:\Program Files\Java\jdk1.8.0_231\bin 추가하자.
환경변수 들어가는 방법 : 내pc 마우슨 우클릭-속성-고급시스템설정-고급탭에 있다.
이제 user에 대한 사용자 변수를 새로 만들자.
ANDROID_HOME
C:\Users\user\AppData\Local\Android\Sdk
C:\Users\user\AppData\Local\Android\Sdk\platform-tools
도 Path에 추가하자.
cordova의 Android target이 API 28버전으로 되어 있어서 SDK Manager를 선택하여 다운 받자.
그리고 Android target을 위해 미리 AVD를 실행해 놓자. ( Android target때 사용 )
현재 상태를 확인해보자. Gradle만 안되었다.
아래 링크를 통해 gradle을 설치하자.
Gradle | Releases
Find binaries and reference documentation for current and past versions of Gradle.
gradle.org
6.0.1 버전을 설치하겠다.
C드라이브안에 폴더 생성 C:\Gradle 거기에 다운 받은 압축 파일을 압축 풀기하자.
그리고 환경 변수에서 path를 추가하자.
cmd에서 path가 잘 되었는지 확인해보자.
이제 다시 cordova를 접속해서 확인해보자.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<title>Hello World</title>
</head>
<body>
<div data-role="page">
<div data-role="header" id="h">
<h2>Hello Hybrid App</h2>
</div>
<div data-role="content">
<p>This is Hybrid App</p>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<h4>FOOTER</h4>
</div>
</div>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
기존에 있던 js와 css를 지우고 다시 작성하자.
실행을 emulate로 한다면 run 시킬때 아래 명령어를 사용한다.
명령어 : cordova emulate android
만약 실 디바이스를 연결하여 run을 할 경우는 아래 명령어를 써주자.
이렇게 java를 사용하지 않고도 웹 html,js,css로 간편하게 앱을 개발할 수 있다.
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HybridApp' 카테고리의 다른 글
| HybridApp-React Native 2세대 (설치 및 간단한 예제) (0) | 2020.01.17 |
|---|---|
| HybridApp - 1세대 cordova (카메라, 갤러리앱) (0) | 2020.01.16 |
| HybridApp - 0세대 WebApp( listview ) (0) | 2020.01.16 |
| HybridApp - 0세대 WebApp(다양한 버튼) (0) | 2020.01.15 |
| HybridApp - 0세대 Webapp (웹페이지를 모바일 크기로 만들기) (0) | 2020.01.15 |
댓글