Cordova 기반 하이브리드 앱 개발 - 환경설정

Cordova

안드로이드에서 Cordova는 전체 앱의 7.21%, 설치된 앱의 0.84%의 점유율을 가지고 있다.

상위 500개 앱으로 갈 경우 설치된 앱의 1.33%의 점유율로 늘어난다.(공을 들인, 인기 있는 앱일수록 점유율이 높아짐)

Cordova는 비즈니스/푸드/메디컬 등의 분야에서 15%가 넘는 점유율을 가지고 있다. (모바일 페이지가 이미 있는 결제 기능 있는 앱에서 주로 사용하는 듯)

이는 EvReOne의 분야에 적합한 프레임워크임을 보여준다.

Cordova는 하이브리드 앱 개발을 위한 오픈 소스 플랫폼으로, HTML, CSS, JavaScript를 사용하여 앱을 만들 수 있게 해줍니다. Cordova를 사용하여 전기차 충전 앱을 개발하는 방법과 해당 기술을 활용한 앱을 어떻게 만들 수 있는지 설명해드리겠습니다.

전기차 충전 앱을 개발하기 위해 다음 단계를 따를 수 있습니다:

Cordova 설치: Cordova를 사용하려면 Node.js와 Cordova 명령 줄 도구를 설치해야 합니다. Node.js를 설치한 후에는 다음 명령을 사용하여 Cordova를 설치할 수 있습니다:

 

Visual Studio Code에서 Cordova를 사용하여 앱 개발을 하려면 다음과 같은 환경 설정을 수행해야 합니다:

npm install -g cordova

 

프로젝트 생성: Cordova를 사용하여 앱을 개발하기 위해 먼저 프로젝트를 생성해야 합니다. 다음 명령을 사용하여 Cordova 프로젝트를 생성할 수 있습니다:

cordova create <프로젝트 경로> <앱 패키지 이름> <앱 이름>

프로젝트 경로는 앱이 생성될 디렉토리 경로를 의미하고, 앱 패키지 이름은 앱을 식별하는 데 사용되는 고유한 패키지 식별자이며, 앱 이름은 앱의 제목입니다.

플랫폼 추가: Cordova는 다양한 플랫폼을 지원합니다. 앱을 실행할 플랫폼을 추가해야 합니다. 예를 들어, 안드로이드 플랫폼을 추가하려면 다음 명령을 사용합니다:

cd <프로젝트 경로>
cordova platform add android

플러그인 추가: 전기차 충전 앱을 개발하기 위해 필요한 추가 기능을 Cordova 플러그인으로 추가해야 합니다. Cordova 플러그인은 웹 기술을 사용하여 하드웨어 및 기기 기능에 액세스할 수 있도록 도와줍니다. Cordova 플러그인 저장소에서 원하는 플러그인을 검색하고 설치할 수 있습니다. 예를 들어, 위치 정보를 사용하기 위해 위치 플러그인을 추가하려면 다음 명령을 사용합니다:

cd <프로젝트 경로>
cordova plugin add cordova-plugin-geolocation

 

Cordova 확장 설치: Visual Studio Code에서 Cordova 앱 개발을 보다 편리하게 하기 위해 Cordova 확장을 설치해야 합니다. Visual Studio Code를 열고 왼쪽 사이드바의 확장 아이콘을 클릭한 다음 "Cordova Tools"와 같은 키워드로 검색하여 확장을 찾고 설치합니다.

플러그인 추가: 전기차 충전 앱을 개발하기 위해 필요한 추가 기능을 Cordova 플러그인으로 추가해야 합니다. Cordova 플러그인은 웹 기술을 사용하여 하드웨어 및 기기 기능에 액세스할 수 있도록 도와줍니다. Cordova 플러그인 저장소에서 원하는 플러그인을 검색하고 설치할 수 있습니다. 예를 들어, 위치 정보를 사용하기 위해 위치 플러그인을 추가하려면 다음 명령을 사용합니다:

cd <프로젝트 경로>
cordova plugin add cordova-plugin-geolocation

https://cordova.apache.org/

Apache Cordova

JDK 8 버전을 사용 ! 

https://developer.android.com/studio/releases

Android 스튜디오 Flamingo | 2022년 2월 1일  |  Android Developers

virtual studio 

cordova 지원 안해 줌 ! 

Android SDK Location : 

C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk

 

Setup Type: Standard
SDK Folder: C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk
JDK Location: C:\Program Files\Android\Android Studio\jbr (Note: Gradle may be using JAVA_HOME when invoked from command line. More info...)
Total Download Size: 1.87 GB
SDK Components to Download: 

Android Emulator
  
318 MB

Android Emulator hypervisor driver (installer)
  
165 KB

Android SDK Build-Tools 34
  
55.6 MB

Android SDK Platform 34
  
60.3 MB

Android SDK Platform-Tools
  
5.8 MB

Google APIs Intel x86_64 Atom System Image
  
1.44 GB

Intel x86 Emulator Accelerator (HAXM installer)
  
500 KB

SDK Patch Applier v4
  
1.74

Preparing "Install SDK Patch Applier v4 (revision: 1)".
Downloading https://dl.google.com/android/repository/3534162-studio.sdk-patcher.zip
"Install SDK Patch Applier v4 (revision: 1)" ready.
Installing SDK Patch Applier v4 in C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk\patcher\v4
"Install SDK Patch Applier v4 (revision: 1)" complete.
"Install SDK Patch Applier v4 (revision: 1)" finished.
Preparing "Install Android Emulator (revision: 32.1.14)".
Downloading https://dl.google.com/android/repository/emulator-windows_x64-10330179.zip
"Install Android Emulator (revision: 32.1.14)" ready.
Installing Android Emulator in C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk\emulator
"Install Android Emulator (revision: 32.1.14)" complete.
"Install Android Emulator (revision: 32.1.14)" finished.
Preparing "Install Google APIs Intel x86_64 Atom System Image (revision: 6)".
Downloading https://dl.google.com/android/repository/sys-img/google_apis/x86_64-34_r06.zip
"Install Google APIs Intel x86_64 Atom System Image (revision: 6)" ready.
Installing Google APIs Intel x86_64 Atom System Image in C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk\system-images\android-34\google_apis\x86_64
"Install Google APIs Intel x86_64 Atom System Image (revision: 6)" complete.
"Install Google APIs Intel x86_64 Atom System Image (revision: 6)" finished.
Preparing "Install Android Emulator hypervisor driver (installer) (revision: 2.0.0)".
Downloading https://dl.google.com/android/repository/gvm-windows_v2_0_0.zip
"Install Android Emulator hypervisor driver (installer) (revision: 2.0.0)" ready.
Installing Android Emulator hypervisor driver (installer) in C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk\extras\google\Android_Emulator_Hypervisor_Driver
"Install Android Emulator hypervisor driver (installer) (revision: 2.0.0)" complete.
"Install Android Emulator hypervisor driver (installer) (revision: 2.0.0)" finished.
Preparing "Install Intel x86 Emulator Accelerator (HAXM installer) (revision: 7.6.5)".
Downloading https://dl.google.com/android/repository/extras/intel/haxm-windows_v7_6_5.zip
"Install Intel x86 Emulator Accelerator (HAXM installer) (revision: 7.6.5)" ready.
Installing Intel x86 Emulator Accelerator (HAXM installer) in C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk\extras\intel\Hardware_Accelerated_Execution_Manager
"Install Intel x86 Emulator Accelerator (HAXM installer) (revision: 7.6.5)" complete.
"Install Intel x86 Emulator Accelerator (HAXM installer) (revision: 7.6.5)" finished.
Preparing "Install Android SDK Platform 34 (revision: 1)".
Downloading https://dl.google.com/android/repository/platform-34-ext7_r01.zip
"Install Android SDK Platform 34 (revision: 1)" ready.
Installing Android SDK Platform 34 in C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk\platforms\android-34
"Install Android SDK Platform 34 (revision: 1)" complete.
"Install Android SDK Platform 34 (revision: 1)" finished.
Preparing "Install Android SDK Build-Tools 34 (revision: 34.0.0)".
Downloading https://dl.google.com/android/repository/build-tools_r34-windows.zip
"Install Android SDK Build-Tools 34 (revision: 34.0.0)" ready.
Installing Android SDK Build-Tools 34 in C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk\build-tools\34.0.0
"Install Android SDK Build-Tools 34 (revision: 34.0.0)" complete.
"Install Android SDK Build-Tools 34 (revision: 34.0.0)" finished.
Preparing "Install Android SDK Platform-Tools (revision: 34.0.3)".
Downloading https://dl.google.com/android/repository/platform-tools_r34.0.3-windows.zip
"Install Android SDK Platform-Tools (revision: 34.0.3)" ready.
Installing Android SDK Platform-Tools in C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk\platform-tools
"Install Android SDK Platform-Tools (revision: 34.0.3)" complete.
"Install Android SDK Platform-Tools (revision: 34.0.3)" finished.
Parsing C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk\build-tools\34.0.0\package.xml
Parsing C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk\emulator\package.xml
Parsing C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk\extras\google\Android_Emulator_Hypervisor_Driver\package.xml
Parsing C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk\extras\intel\Hardware_Accelerated_Execution_Manager\package.xml
Parsing C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk\patcher\v4\package.xml
Parsing C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk\platform-tools\package.xml
Parsing C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk\platforms\android-34\package.xml
Parsing C:\Users\jy.soft_marshall\AppData\Local\Android\Sdk\system-images\android-34\google_apis\x86_64\package.xml
Android SDK is up to date.
Running Intel® HAXM installer
Intel® HAXM installation failed. To install Intel® HAXM follow the instructions found at: https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows
Running Android Emulator Hypervisor Driver installer
Android Emulator Hypervisor Driver installation failed. To install Android Emulator Hypervisor Driver follow the instructions found at: https://github.com/google/android-emulator-hypervisor-driver
Creating Android virtual device
Android virtual device Pixel_3a_API_34_extension_level_7_x86_64 was successfully created

https://www.bluestacks.com/ko/index.html

블루스택 – PC 및 Mac을 위한 최고의 모바일 게임 플랫폼 | 100% 안전한 게임을 무료로 즐기세요.

블루스택 5설치하면 됨 ! 

 

vscode

앱 코드를 내려 받는다 

그리고 Cordova 세팅을 해준다 

구성 추가를 눌러주면 - > Cordova 선택 ->  launch.json 파일이 생성된다. 

이거를 블루스택과 연동해준다고 생각하면 된다. 

블루스택 체크 포인트  : 이거는 가상의 device 머신이다 

launch.json

{
  // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
  // 기존 특성에 대한 설명을 보려면 가리킵니다.
  // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run Android on device",
      "type": "cordova",
      "request": "launch",
      "platform": "android",
      "target": "device",
      "port": 49453,
      "sourceMaps": true,
      "cwd": "${workspaceFolder}"
    }
  ]
}

port를 맞춰주면 된다. 

 

그리고 나서 

경로를 좀 맞춰 줘야하는데 

아 참고로 

gradle 환경 변수 설정도 해줘야한다. 

gradle-4.4

 

gradle-4.4 해당 그래들을 사용하면 해당 위치를 찾아서 시스템 변수로 생성해주면 된다. 

 

아 그리고 자바 환경 변수 

생성해도 왜 안되는가 했는데 

C:\Program Files\Java\jdk1.8.0_181\bin

bin 경로를  사용자 변수 쪽  Path 변수에 등록을 해주어야 하던데 왜그런지 모르겠네 

일단 

gradle 경로를 보면 내 경로로 환경 변수를 세팅했는데 

 

앱개발 프레임워크 파일을 받으면 

아무래도 경로 설정을 맞춰줘야한다. 

그리고 

 

C:\jysoft\ev2\config.xml

해당 경로 config.xml 파일에서 

본인 ip 주소를 입력해주어야 한다.

 <content src="http://192.168.0.48:8080/istApp/login.do" />

Constants.java 파일에 있는 

 public static final String BOLT_TABS_DEV_URL = "http://192.168.0.48:8080";

해당 부분도 ip  url 을 바꿔주어야한다. 

디버깅해주면 실행 된다. ! 

블루스택 ip 주소는 킬때 마다 바뀐다 참고 !