Cordova를 이용한 Web App 빌드 및 패키징

 

Cordova


Cordova(코르도바)는 아파치 재단에서 지원중인 하이브리드 앱을 위한 프레임워크라고 소개하고 있다. 즉, 이말은 하이브리드 앱을 만들기위한 프레임워크라는 말이다.

위 내용 생각을 정리해보면 Cordova는 웹 프로그래밍 기술(React, Vue, Javascript 등)을 이용해 개발한 프로그램을 빌드하여 앱으로 패키징/배포할수 있는 도구(프레임워크?)라고 할수 있을거 같다.

여기에서는 이미 작업된 Vue 프로젝트를 웹앱으로 배포 및 패키징하기 위한 방법을 설명하는 것에 초점이 맞춰져 있다.

1. nodejs가 설치 되어있다는 가정하에 아래의 명령을 입력하여 cordova 패키지를 설치한다.
npm install -g cordova

2. 또한 프로젝트가 vue로 개발되었다는 것을 가정하여 아래 명령어를 입력한다.
vue add crodova

그러면 아래와 같이 몇가지 입력을 통해 개발 환경이 세팅된다.

WARN : There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed(y/n)
작업중인 내용이 있는지 경고하는 거로 그냥 y라고 하면 install을 진행한다.

Name of folder where cordova should be installed
크로도바 프로젝트를 위한 폴더를 하나 만드는데 현재 디렉토리 하단에 생성하는 디렉토리 명을 입력한다. 나는 그냥 cordova라고 입력했다.

ID of the app (com.vue.example.app)
ID를 만들라고 하는데 난 일단 com.프로젝트명.app으로 입력했다.

Name of the app (VueExampleAppName)
app 이름을 입력하라는데 난 그냥 프로젝트명을 입력했다.

Select Platforms: (Press <space> to select, <a> to toggle all, <i> to invert selection)
개발하고자 하는 플랫폼을 선택하면된다. 스페이스바를 통해 선택하고 엔터로 넘어가자
그러면 아래와 같이 인스톨을 실행한다. 


정상적으로 실행한 경우 아래와 비슷하게 보여질 것이다.


cordova라는 디렉토리가 생성되고 디렉토리 아래에 platforms를 살펴보면 내가 선택한 플랫폼이보인다. 


3. 현재의 프로젝트로 cordova 프로젝트로 빌드하기 위한 작업인것 같다. 아래의 명령어를 입력한다.
npm run cordova-prepare
그러면 뭔가 프로젝트를 빌드하기 시작하고 아래처럼 js, css등 빌드 결과물이 생성된다.

그리고 프로젝트의 package.json을 살펴보면 아래와 같은 build 스크립트 옵션이 추가된 것을 볼수 있다.


4. 여기에서 Windows PC 앱을 만들기 위해 아래의 명령어를 입력해보자.
npm run cordova-build-electron


빌드를 수행하고 성공적으로 끝나면 아래와 같은 메시지가 표시된다.


그리고 cordova > platforms > electron 디렉토리를 살펴보면 아래와 같이 build 폴더가 생성이 되고 그 아래에 XXXX.exe 실행파일이 만들어 진다. 그러면 성공이다. 이 파일을 파일관리자에서 실행해보면 install가 실행된다.


설치후 바탕화면에 아이콘이 생성되고 이 아이콘을 실행하면 우리의 웹 첫 화면이 표시될 것이다.


5. 지금 상태에서 안드로이드 앱을 만들기 위해 아래의 명령어를 입력해보자
npm run cordova-build-android
만약 빌드에 성공하고 platforms/android 아래에 build 디렉토리가 생겼고, xxxx.apk 파일이 생겼다면, "축하합니다." 당신의 컴퓨터에는 이미 android 개발 환경이 구축되어 있었고, 귀찮은 해당 과정을 스킵할수 있으니 말이다...^^

현재 과장에서는 아직 android 개발 환경이 설정되어 있지 않기때문에 아래와 같은 오류가 발생하는게 정상이다.


일단, 여기까지 잘 따라오셨다면 일단 거대한 산은 넘었다고 생각하시고, 나머지는 여유를 갖고 천천히 하시길 권장합니다..^^

Android 빌드 환경 설정은 

위와 같이 안드로이드 환경 설정을 완료했으면 아래와 같이 확인해보자, 만약 아래와 같이 확인했을때 undefined가 된다면 추가적인 환경 설정이 필요하다.

$ cordova run android
Checking Java JDK and Android SDK versions
ANDROID_SDK_ROOT=undefined (recommended setting)
ANDROID_HOME=C:\Users\sentr\AppData\Local\Android\Sdk (DEPRECATED)
Using Android SDK: C:\Users\sentr\AppData\Local\Android\Sdk
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio


오류 해결 과정(역시나 삽질의 시작 ㅠ.,ㅜ)

위와 같은 오류 해결 방법에 대한 자세한 내용은 여기를(https://nurioweb.blogspot.com/2021/10/cordova-android-sdkgradle.html) 참고하시기 바랍니다.

오류가 해결되었다면 다시 crodova run android 명령을 을 실행해보자.


와우! 뭔가 되는 좋은 느낌이다. 
일단 성공이란 단어도 나온다. 
이제 기다리기만 하면된다. ㅎㅎㅎ

헐~~~대박! 역시나 쉽게 가는법이 없다. 
저 붉은색 단어의 실패라는 문구가 눈에 확 들어온다. 

또 삽질의 시작이다... ㅠ,ㅜ

대충 에러 내용을 보아 하니 SDK 31버전이 뭔가 이상한거 같다. 일단 31의 최신 버전을 지원해야 할 이유가 없으니 위의 삭제를 해보기로 한다. 

젠장 이게 아니었다. ㅠ,.ㅜ? 
역시나 쉽게 되는법이 없다..ㅋㅋㅋ
역시 우리에겐 구글링이 답이다..ㅎㅎ

무작정 아래 내용으로 일단 찾아본다.

Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'. > Installed Build Tools revision 31.0.0 is corrupted. Remove and install again using the SDK Manager.

아래와 같은 내용을 빠르게 찾아본다. 요약하자면 SDK가 설치된 폴더를 뒤져서 해당 디렉토리에 있는 d8.bat와 lib\d8.jar을 아래와 같이 dx.bat, dx.jar로 변경하라고 한다.

For Windows

  1. go to the location

     "C:\Users\user\AppData\Local\Android\Sdk\build-tools\31.0.0"

  2. find a file named d8.bat. This is a Windows batch file.

  3. rename d8.bat to dx.bat.

  4. in the folder lib ("C:\Users\user\AppData\Local\Android\Sdk\build-tools\31.0.0\lib")

  5. rename d8.jar to dx.jar


와우! 삽질하지 않고 쉽게 해결되었다. 다행이다. 역시나 요즘엔 구글링이 답이다...ㅎㅎㅎ


드디어 성공이다. 내가 그토록 보고 싶어하고, 여러분들이 그토록 보고싶어하는 대망의 엔딩이다. ㅎㅎㅎ


\cordova\platforms\android\app\build\outputs\apk\debug\app-debug.apk

보기 좋은 초록색 글씨의 SUCCESSFUL 글자와 VSCODE에서 android/build 디렉토리를 살펴보면 빌드 결과 파일인 xxx.apk가 생성되었음을 알수 있다.


참고 사이트

댓글

댓글 쓰기

이 블로그의 인기 게시물

[JAVA] 변수란? 변수타입?

이미지
프로그램 언어를 배울때 항상 먼저 배우거나 집고 넘어가는 것이 있죠? 네 맞습니다.  변수 라는 것입니다. C언어나 Java에서는 int, char, float 등 자료형에 따라 다르고, Javascript에서는 모든 변수를 그냥 var로 사용하죠. 물론 또 개발 언어마다 조금씩 차이가 있습니다. 하지만, 기본적으로 "변수"라는 기본 개념은 모든 언어에서 모두 동일합니다. 이번 포스팅은 이 변수에 대하여 낱낱이 파헤쳐 봅시다.  아! 참고로 변수에 대하여 정말로 낱낱이 땅끝까지 파헤치자면 이 한번의 포스팅으로는 부족합니다. 따라서 오늘은 일차적으로 가장 기본이 되는 변수의 정의와 원시타입에 대해서만 낱낱이 살펴보도록 하겠습니다. 변수란 무엇일까? 자! 일단 변수란 무엇일까요? 변수란? 물어보면 가장 먼저 사람들은 당당히 말을 하죠.  "변하는 수" 물론 이 말도 틀린 말은 아닙니다. 우리 프로그래밍에서는 변수라는 공간에 값이 항상 변하는 그리고 그런 용도로 사용하려는 것이 변수니까요. 변수는 영어로 "Variable"라고 읽습니다. 이것을 사전에서 찾아보면 "변화하기 쉬운, 변덕스러운, 다양한" 이라는 의미를 갖습니다. 뭐 이 말도 틀린 말은 아니네요. 하지만! 우리는 개발자로도 더 프로그래밍 적인 의미를 원합니다. 그래서 이렇게 정의를 했죠. 변수란? 데이터(값)을 저장할 수 있는 프로그램의 저장 공간! 서론이 길었네요. ^^. 항상 무언가 정의를 내리기란 쉽지 않습니다..ㅎㅎㅎ 변수를 좀 더 이해하기 위해 아래의 그림을 예를 들어 보겠습니다. 위와 같이 우리가 물을 마셔야 한다면, 물을 마시기 위해 당연히 물 컵이 있어야겠죠.  아! 물통에 입을 대고 드시는 분들도 계시지만... 그러면 엄마한테 혼납니다. ㅎㅎ 아무튼 이렇게 물을 마시기 위해 물을 담을 컵을 준비하는 것을 프로그래밍에서는 "데이터를 사용하기 위해 변수를 선언한다" 라고 이야기 할 수 있습니다.  그럼 ...
자세한 내용 보기

[JAVA] 문자셋(Charset)

이미지
문자셋의 역사 2022년 현재를 기준으로 가장 많이 사용되고 많이들 알고 있는 문자셋(Charset)은 UTF-8일 것이라 생각합니다. 물론 여러분들이 프로그래밍을 공부했거나 컴퓨터 공학을 전공했다면 ASCII 뿐만 아리나 UNICODE 등 다양한 문자셋을 알고 있겠죠. 그래서 이렇게 많은 문자셋들이 왜 생겨서 우리를 괴롭히는지 그리고 다 공부해야하는지 궁굼해 하는 분들이 많으실거라 생각하여 짧게 문자셋의 역사와 자주 사용되는 문자셋 몇개를 정리해 보려 합니다. 일단 문자셋의 대략적인 역사 또는 발전기를 아래와 같은 그림으로 살펴보도록 하죠. 위에서 보는 바와 같이 최초의 컴퓨터는 알파벳권에서 처음 개발 및 사용되었다고 합니다. 그래서 초기에 컴퓨터를 만들 당시 알파벳만 사용하면 되었던 것이죠. 그 시대 배경을 보더라도 글로벌 시대도 아닌 냉전 시대였으니 뭐 당연한거라고 생각할 수 있었을거 같습니다. 그렇게 시작되었던 초기 컴퓨터에서 0과 1밖에 모르던 컴퓨터에서 사람이 사용하기 위해 글자를 표시할 방법을 컴퓨터 과학자들이 의논하게 되죠. 고민끝에 컴퓨터에서는 데이터를 부호화하는 방법으로 숫자를 문자로 치환하는 방법을 생각하게 됩니다. 예를 들어 0은 NULL 이라는 아무것도 없다라는 기호로 그리고 숫자 65면 문자 알파벳 대문자 ‘A’로 66면 대문자 ‘B’ 이렇게 쭈욱 이어지다가 소문자 ‘a’는 97로 정하게 되죠.  이렇게 사람이 볼수 있는 문자를 컴퓨터 언어인 코드번호로 변경 또는 ‘부호화’하는 방법을 ‘인코딩(Encoding)’ 이라고 하고. 코드번호를 사람이 알아들을 수 있는 문자로 다사 되돌리는 것을 복호화 또는 ‘디코딩(Decoding)’이라고 합니다. 인코딩 : 문자, 숫자, 기호 등을 컴퓨터의 내부처리를 위해 숫자코드번호로 변경하는 것. 디코딩 : 컴퓨터의 내부처리 숫자코드번호를 문자, 숫자, 기호 등을로 다시 복원하는 것. 그래서 처음으로 이러한 기준을 만들었던 것이 ASCII(American Standard Code for Info...
자세한 내용 보기

[JAVA] 문자열 비교[== vs equals()]의 차이

이미지
자바에서 기본 자료형(원시타입)의 비교 연산은 일반적으로 == 연산자를 사용합니다. 하지만 String의 경우는 == 연산자를 사용하여 비교하면 안전하지 않죠? 안전하지 않다는 말은 무슨 뜻일까요? String의 경우 여러분들이 편하게 아무생각(?) 없이 사용하는 리터럴 즉, 대입 연산자를 이용해 바로 상수를 대입하는 방식으로 사용할 경우에는 일반적으로 == 를 이용해 값을 확인해도 문제가 없습니다. 하지만 사용자로 부터 입력을 받아 사용할 경우 동일한 값을 입력 받더라도 비교 연산자(==)는 동일한 값인데도 false를 반환하죠. 즉 아래와 같이 코드를 작성했다고 가정합시다.  Scanner sc = new Scanner(System.in); String id = sc.next();      // 사용자한테 ‘abc’를 입력 받았다고 가정. System.out.println(id == “abc”); // 비교연산자(==)를 이용해 비교하면 false. // 그래서 우리는 String의 메소드인 equals()를 이용해 비교하면 true를 반환합니다. System.out.println(id.equals("abc")); 이처럼 비교연산자(==)와 equals()는 왜 차이가 나는 것인지 한번 살펴보기로 하겠습니다. 먼저 그림을 보도록 하겠습니다. 위 그림에 대한 결론부터 이야기 하자면 String과 같은 클래스에서의 비교연산자(==)는 객체의 주소을 비교하는 것이고, equals()는 주소가 가리키는 실제의 값, 즉 문자열을 비교하는 메소드입니다. 따라서 우리는 String를 사용할 때 항상 안전하게 그리고 생각하지 말고 equals()를 사용하라고 배우죠. 위의 그림에서 선언한 각각의 변수들 주소를 이클립스에서 출력해보면 다음과 같습니다. String str1 = "Hello"; String str2 = "Hello"; String str3 = new String("World...
자세한 내용 보기