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

모바일 앱 개발의 방법 중 하이브리드 앱 개발 방식을 소개한다.

개발 도구는 Node.js, 안드로이드 스튜디오, Cordova로 구성된다.

Node.js 가 설치된 상태에서 Cordova를 설치하는 것부터 시작한다.

1. 설치된 node.js의 command prompt를 실행한다.

2. Cordova 를 설치한다.

명령)

npm install cordova -g

결과)

3. Cordova 프로젝트를 생성한다.

명령)

C:\cordova>cordova create example com.ex.example1 example1 -d
Using detached cordova-create
Creating a new cordova project.
Copying assets."

결과)

파일 구조

4. 생성한 프로젝트 경로에서 개발할 플랫폼(안드로이드, iOS)을 추가한다.

C:\cordova>cd example

C:\cordova\example>cordova platform add android
Using cordova-fetch for cordova-android@~7.1.1
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: com.ex.example1
        Name: example1
        Activity: MainActivity
        Android target: android-27
Android project created with cordova-android@7.1.1
Android Studio project detected
Android Studio project detected
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the pro
ject
Installing "cordova-plugin-whitelist" for android

               This plugin is only applicable for versions of cordova-android gr
eater than 4.0. If you have a previous platform version, you do *not* need this
plugin since the whitelist will be built in.

Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
--save flag or autosave detected
Saving android@~7.1.1 into config.xml file ...

C:\cordova\example>

생성한 example 경로로 이동한 후 android 플랫폼을 추가한다.

결과:

.

5. 웹 개발을 한다.

C:\cordova\example\www에 작업한 웹 결과물을 복사해 넣는다.

6. 웹 개발 결과를 빌드하여 플랫폼에 반영한다.

cordova build

결과

C:\cordova\example>cordova build
Android Studio project detected
ANDROID_HOME=C:\Users\KCPARK\AppData\Local\Android\Sdk
JAVA_HOME=C:\Java\jdk1.8.0_181
studio
Starting a Gradle Daemon (subsequent builds will be faster)

BUILD SUCCESSFUL in 3s
1 actionable task: 1 executed
Subproject Path: CordovaLib
Subproject Path: app
Starting a Gradle Daemon (subsequent builds will be faster)
publishNonDefault is deprecated and has no effect anymore. All variants are now
published.
The Task.leftShift(Closure) method has been deprecated and is scheduled to be re
moved in Gradle 5.0. Please use Task.doLast(Action) instead.
        at build_bnegh9d9b1wid3zp99n4naud8.run(C:\cordova\example\platforms\andr
oid\app\build.gradle:143)
:CordovaLib:preBuild UP-TO-DATE
:CordovaLib:preDebugBuild UP-TO-DATE
:CordovaLib:compileDebugAidl
:CordovaLib:compileDebugRenderscript
:CordovaLib:checkDebugManifest
:CordovaLib:generateDebugBuildConfig
:CordovaLib:prepareLintJar
:CordovaLib:generateDebugResValues
:CordovaLib:generateDebugResources
:CordovaLib:packageDebugResources
:CordovaLib:platformAttrExtractor
:CordovaLib:processDebugManifest
:CordovaLib:javaPreCompileDebug
:CordovaLib:processDebugJavaRes NO-SOURCE
:app:preBuild UP-TO-DATE
:app:preDebugBuild
:app:compileDebugAidl
:CordovaLib:packageDebugRenderscript NO-SOURCE
:app:compileDebugRenderscript
:app:checkDebugManifest
:app:generateDebugBuildConfig
:app:prepareLintJar
:app:generateDebugResValues
:app:generateDebugResources
:app:mergeDebugResources
:app:createDebugCompatibleScreenManifests
:app:processDebugManifest
:app:splitsDiscoveryTaskDebug
:app:compileDebugNdk NO-SOURCE
:CordovaLib:mergeDebugShaders
:CordovaLib:compileDebugShaders
:CordovaLib:generateDebugAssets
:CordovaLib:mergeDebugAssets
:app:mergeDebugShaders
:app:compileDebugShaders
:app:generateDebugAssets
:app:mergeDebugAssets
:CordovaLib:compileDebugNdk NO-SOURCE
:CordovaLib:mergeDebugJniLibFolders
:CordovaLib:transformNativeLibsWithMergeJniLibsForDebug
:CordovaLib:transformNativeLibsWithIntermediateJniLibsForDebug
:app:mergeDebugJniLibFolders
:app:processDebugJavaRes NO-SOURCE
:app:validateSigningDebug
:CordovaLib:processDebugResources
:CordovaLib:generateDebugSources
:CordovaLib:compileDebugJavaWithJavacNote: Some input files use or override a de
precated API.
Note: Recompile with -Xlint:deprecation for details.

:CordovaLib:transformClassesAndResourcesWithPrepareIntermediateJarsForDebug
:app:processDebugResources
:app:generateDebugSources
:app:javaPreCompileDebug
:app:compileDebugJavaWithJavac
:app:compileDebugSources
:app:transformClassesWithStackFramesFixerForDebug
:app:transformClassesWithDesugarForDebug
:app:transformClassesWithDexBuilderForDebug
:app:transformDexArchiveWithExternalLibsDexMergerForDebug
:app:transformDexArchiveWithDexMergerForDebug
:app:transformNativeLibsWithMergeJniLibsForDebug
:app:transformResourcesWithMergeJavaResForDebug
:app:packageDebug
:app:assembleDebug
:app:cdvBuildDebug

BUILD SUCCESSFUL in 15s
46 actionable tasks: 46 executed
Built the following apk(s):
        C:\cordova\example\platforms\android\app\build\outputs\apk\debug\app-deb
ug.apk

C:\cordova\example>

7. App를 실행한다.

cordova run android

결과:

>cordova run android
Android Studio project detected
ANDROID_HOME=C:\Users\KCPARK\AppData\Local\Android\Sdk
JAVA_HOME=C:\Java\jdk1.8.0_181
studio
Subproject Path: CordovaLib
Subproject Path: app
publishNonDefault is deprecated and has no effect anymore. All variants are now
published.
The Task.leftShift(Closure) method has been deprecated and is scheduled to be re
moved in Gradle 5.0. Please use Task.doLast(Action) instead.
        at build_bnegh9d9b1wid3zp99n4naud8.run(C:\cordova\example\platforms\andr
oid\app\build.gradle:143)
:CordovaLib:preBuild UP-TO-DATE
:CordovaLib:preDebugBuild UP-TO-DATE
:CordovaLib:compileDebugAidl UP-TO-DATE
:CordovaLib:compileDebugRenderscript UP-TO-DATE
:CordovaLib:checkDebugManifest UP-TO-DATE
:CordovaLib:generateDebugBuildConfig UP-TO-DATE
:CordovaLib:prepareLintJar UP-TO-DATE
:CordovaLib:generateDebugResValues UP-TO-DATE
:CordovaLib:generateDebugResources UP-TO-DATE
:CordovaLib:packageDebugResources UP-TO-DATE
:CordovaLib:platformAttrExtractor UP-TO-DATE
:CordovaLib:processDebugManifest UP-TO-DATE
:CordovaLib:processDebugResources UP-TO-DATE
:CordovaLib:generateDebugSources UP-TO-DATE
:CordovaLib:javaPreCompileDebug UP-TO-DATE
:CordovaLib:compileDebugJavaWithJavac UP-TO-DATE
:CordovaLib:processDebugJavaRes NO-SOURCE
:CordovaLib:transformClassesAndResourcesWithPrepareIntermediateJarsForDebug UP-T
O-DATE
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:compileDebugAidl UP-TO-DATE
:CordovaLib:packageDebugRenderscript NO-SOURCE
:app:compileDebugRenderscript UP-TO-DATE
:app:checkDebugManifest UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:prepareLintJar UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:createDebugCompatibleScreenManifests UP-TO-DATE
:app:processDebugManifest UP-TO-DATE
:app:splitsDiscoveryTaskDebug UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:javaPreCompileDebug UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk NO-SOURCE
:app:compileDebugSources UP-TO-DATE
:CordovaLib:mergeDebugShaders UP-TO-DATE
:CordovaLib:compileDebugShaders UP-TO-DATE
:CordovaLib:generateDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugAssets UP-TO-DATE
:app:mergeDebugShaders UP-TO-DATE
:app:compileDebugShaders UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:transformClassesWithStackFramesFixerForDebug UP-TO-DATE
:app:transformClassesWithDesugarForDebug UP-TO-DATE
:app:transformClassesWithDexBuilderForDebug UP-TO-DATE
:app:transformDexArchiveWithExternalLibsDexMergerForDebug UP-TO-DATE
:app:transformDexArchiveWithDexMergerForDebug UP-TO-DATE
:CordovaLib:compileDebugNdk NO-SOURCE
:CordovaLib:mergeDebugJniLibFolders UP-TO-DATE
:CordovaLib:transformNativeLibsWithMergeJniLibsForDebug UP-TO-DATE
:CordovaLib:transformNativeLibsWithIntermediateJniLibsForDebug UP-TO-DATE
:app:mergeDebugJniLibFolders UP-TO-DATE
:app:transformNativeLibsWithMergeJniLibsForDebug UP-TO-DATE
:app:processDebugJavaRes NO-SOURCE
:app:transformResourcesWithMergeJavaResForDebug UP-TO-DATE
:app:validateSigningDebug
:app:packageDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:cdvBuildDebug UP-TO-DATE

BUILD SUCCESSFUL in 1s
46 actionable tasks: 1 executed, 45 up-to-date
Built the following apk(s):
        C:\cordova\example\platforms\android\app\build\outputs\apk\debug\app-deb
ug.apk
ANDROID_HOME=C:\Users\KCPARK\AppData\Local\Android\Sdk
JAVA_HOME=C:\Java\jdk1.8.0_181
No target specified, deploying to device '5200e8a5f4f0a485'.
none
Skipping build...
Built the following apk(s):
        C:\cordova\example\platforms\android\app\build\outputs\apk\debug\app-deb
ug.apk
Using apk: C:\cordova\example\platforms\android\app\build\outputs\apk\debug\app-
debug.apk
Package name: com.ex.example1
LAUNCH SUCCESS