Getting Started with Cordova

September 23, 2019
  • Apache Cordova is an open-source mobile development framework. We use web technologies – HTML5, CSS3, and JavaScript for cross-platform development.
  • Using Apache Cordova, we can extend an application across more than one platform, without having to re-implement it with each platform’s language and tool set.
  • Cordova provides two basic workflows to create a mobile app.
    • Cross-platform (CLI) workflow: Use this workflow if you want your app to run on as many different mobile operating systems as possible, with little need for platform-specific development.
    • Platform-centered workflow: Use this workflow if you want to focus on building an app for a single platform and need to be able to modify it at a lower level.

Step 1: Download and Install Node.js & NPM (https://nodejs.org/en/download/)

Step 2: Download and Install JDK (https://www.oracle.com/technetwork/java/javase/downloads/index.html) if not already available

Step 3: Download and Install Android Studio (https://developer.android.com/studio) or Android SDK (http://www.androiddocs.com/sdk/index.html#Other)

Step 4: Set Environment Variables

  • Set the JAVA_HOME environment variable to the location of your JDK installation
  • Set the ANDROID_SDK_ROOT environment variable to the location of your Android SDK installation
  • Add the Android SDK’s tools, tools/bin, and platform-tools directories to your PATH

Step 5: Configure Gradle (for Android Projects)

Configure the Gradle build by setting the values of certain Gradle properties that Cordova exposes.

  • By placing a file called gradle.properties in your Android platform folder (/platforms/android) and setting the properties in it like as below
# In <your-project>/platforms/android/app/gradle.properties
  cdvMinSdkVersion=20

Step 6: Create Cordova project cordova create <path>. This creates the required directory structure for your cordova app. By default, the cordova create script generates a skeletal web-based application whose home page is the project’s www/index.html file. 

C:\Users\Girish\cordovaprojects>cordova create hello com.ebasiq.hello HelloWorld
Creating a new cordova project.

C:\Users\Girish\cordovaprojects\hello>dir
 Volume in drive C is OS
 Volume Serial Number is E634-86D2

 Directory of C:\Users\Girish\cordovaprojects\hello

23-09-2019  10:05 AM    <DIR>          .
23-09-2019  10:05 AM    <DIR>          ..
23-09-2019  10:05 AM               983 config.xml
23-09-2019  10:05 AM    <DIR>          hooks
23-09-2019  10:05 AM               418 package.json
23-09-2019  10:05 AM    <DIR>          platforms
23-09-2019  10:05 AM    <DIR>          plugins
23-09-2019  10:05 AM    <DIR>          www
               2 File(s)          1,401 bytes
               6 Dir(s)  122,124,140,544 bytes free

Step 7: Add a platform

After creating a Cordova project, navigate to the project directory. From the project directory, you need to add a platform for which you want to build your app. cordova platform add <platform name>

For a complete list of platforms

C:\Users\Girish\cordovaprojects\hello>cordova platform
Installed platforms:

Available platforms:
  android ^8.0.0
  browser ^6.0.0
  electron ^1.0.0
  ios ^5.0.0
  osx ^5.0.0
  windows ^7.0.0

Now add the Android platform as shown below

C:\Users\Girish\cordovaprojects\hello>cordova platform add android
Using cordova-fetch for cordova-android@^8.0.0
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: com.ebasiq.hello
        Name: HelloWorld
        Activity: MainActivity
        Android target: android-28
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@8.1.0
Plugin 'cordova-plugin-whitelist' found in config.xml... Migrating it to package.json
Discovered saved plugin "cordova-plugin-whitelist". Adding it to the project
Installing "cordova-plugin-whitelist" for android
Adding cordova-plugin-whitelist to package.json

To check if you satisfy requirements for building the platform cordova requirements

C:\Users\Girish\cordovaprojects\hello>cordova requirements
Requirements check results for android:
Java JDK: installed 12.0.2
Android SDK: installed true
Android target: not installed
avdmanager: Command failed with exit code 1 Error output:
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
        at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
        at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
        at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
        at com.android.sdklib.tool.AvdManagerCli.run(AvdManagerCli.java:213)
        at com.android.sdklib.tool.AvdManagerCli.main(AvdManagerCli.java:200)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
        at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:583)
        at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
        at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:521)
        ... 5 more
Gradle: installed C:\Program Files\Android\Android Studio\gradle\gradle-5.1.1\bin\gradleSome of requirements check failed
C:\Users\Girish\cordovaprojects\hello>cordova requirements

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: not installed
Please install Android target / API level: "android-20".

Hint: Open the SDK manager by running: "C:\Program Files (x86)\Android\android-sdk\tools\android.bat"
You will require:
1. "SDK Platform" for API level android-20
2. "Android SDK Platform-tools (latest)
3. "Android SDK Build-tools" (latest)
Gradle: installed C:\Program Files\Android\Android Studio\gradle\gradle-5.1.1\bin\gradle
Some of requirements check failed

If everything wents well

C:\Users\Girish\cordovaprojects\hello>cordova requirements

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-28
Gradle: installed C:\Program Files\Android\Android Studio\gradle\gradle-5.1.1\bin\gradle

Step 8: Run the app in Android Device. Connect the Device via USB cable and click on allow install when popped up on the screen.

If you have not properly configured the environment, you may get errors like below

C:\Users\Girish\cordovaprojects\hello>cordova run android
Checking Java JDK and Android SDK versions
ANDROID_SDK_ROOT=undefined (recommended setting)
ANDROID_HOME=C:\Program Files (x86)\Android\android-sdk (DEPRECATED)
Requirements check failed for JDK 8 ('1.8.*')! Detected version: 12.0.2
Check your ANDROID_SDK_ROOT / JAVA_HOME / PATH environment variables.

If everything wents well

C:\Users\Girish\cordovaprojects\hello>cordova run android
Checking Java JDK and Android SDK versions
ANDROID_SDK_ROOT=C:\Program Files (x86)\Android\android-sdk (recommended setting)
ANDROID_HOME=C:\Program Files (x86)\Android\android-sdk (DEPRECATED)

Welcome to Gradle 5.1.1!

Here are the highlights of this release:
 - Control which dependencies can be retrieved from which repositories
 - Production-ready configuration avoidance APIs

For more details see https://docs.gradle.org/5.1.1/release-notes.html

Starting a Gradle Daemon (subsequent builds will be faster)

BUILD SUCCESSFUL in 1m 4s
1 actionable task: 1 executed
Subproject Path: CordovaLib
Subproject Path: app
Downloading https://services.gradle.org/distributions/gradle-4.10.3-all.zip
................................................................................................................

Welcome to Gradle 4.10.3!

Here are the highlights of this release:
 - Incremental Java compilation by default
 - Periodic Gradle caches cleanup
 - Gradle Kotlin DSL 1.0-RC6
 - Nested included builds
 - SNAPSHOT plugin versions in the `plugins {}` block

For more details see https://docs.gradle.org/4.10.3/release-notes.html

Starting a Gradle Daemon (subsequent builds will be faster)

BUILD SUCCESSFUL in 1m 4s
1 actionable task: 1 executed
Subproject Path: CordovaLib
Subproject Path: app
Downloading https://services.gradle.org/distributions/gradle-4.10.3-all.zip
................................................................................................................

Welcome to Gradle 4.10.3!

Here are the highlights of this release:
 - Incremental Java compilation by default
 - Periodic Gradle caches cleanup
 - Gradle Kotlin DSL 1.0-RC6
 - Nested included builds
 - SNAPSHOT plugin versions in the `plugins {}` block

For more details see https://docs.gradle.org/4.10.3/release-notes.html

Starting a Gradle Daemon (subsequent builds will be faster)
> Task :app:preBuild UP-TO-DATE
> Task :CordovaLib:preBuild UP-TO-DATE
> Task :CordovaLib:preDebugBuild UP-TO-DATE
> Task :CordovaLib:checkDebugManifest
> Task :CordovaLib:processDebugManifest
> Task :app:preDebugBuild
> Task :CordovaLib:compileDebugAidl NO-SOURCE
> Task :app:compileDebugAidl NO-SOURCE
> Task :CordovaLib:packageDebugRenderscript NO-SOURCE
> Task :app:compileDebugRenderscript
> Task :app:checkDebugManifest
> Task :app:generateDebugBuildConfig
> Task :app:prepareLintJar
> Task :app:generateDebugSources
> Task :CordovaLib:compileDebugRenderscript
> Task :CordovaLib:generateDebugBuildConfig
> Task :CordovaLib:generateDebugResValues
> Task :CordovaLib:generateDebugResources
> Task :CordovaLib:packageDebugResources
> Task :CordovaLib:generateDebugRFile
> Task :CordovaLib:prepareLintJar
> Task :CordovaLib:generateDebugSources
> Task :CordovaLib:javaPreCompileDebug
> Task :CordovaLib:compileDebugJavaWithJavac
> Task :CordovaLib:processDebugJavaRes NO-SOURCE
> Task :CordovaLib:transformClassesAndResourcesWithPrepareIntermediateJarsForDebug
> Task :app:javaPreCompileDebug
> Task :app:mainApkListPersistenceDebug
> Task :app:generateDebugResValues
> Task :app:generateDebugResources
> Task :app:mergeDebugResources
> Task :app:createDebugCompatibleScreenManifests
> Task :app:processDebugManifest
> Task :app:processDebugResources
> Task :app:compileDebugJavaWithJavac
> Task :app:compileDebugNdk NO-SOURCE
> Task :app:compileDebugSources
> Task :app:mergeDebugShaders
> Task :app:compileDebugShaders
> Task :app:generateDebugAssets
> Task :CordovaLib:mergeDebugShaders
> Task :CordovaLib:compileDebugShaders
> Task :CordovaLib:generateDebugAssets
> Task :CordovaLib:packageDebugAssets
> Task :app:mergeDebugAssets
> Task :app:validateSigningDebug
> Task :app:signingConfigWriterDebug
> Task :app:transformClassesWithDexBuilderForDebug
> Task :app:transformDexArchiveWithExternalLibsDexMergerForDebug
> Task :app:transformDexArchiveWithDexMergerForDebug
> Task :app:mergeDebugJniLibFolders
> Task :CordovaLib:compileDebugNdk NO-SOURCE
> Task :CordovaLib:mergeDebugJniLibFolders
> Task :CordovaLib:transformNativeLibsWithMergeJniLibsForDebug
> Task :CordovaLib:transformNativeLibsWithIntermediateJniLibsForDebug
> Task :app:transformNativeLibsWithMergeJniLibsForDebug
> Task :app:processDebugJavaRes NO-SOURCE
> Task :app:transformResourcesWithMergeJavaResForDebug
> Task :app:packageDebug
> Task :app:assembleDebug
> Task :app:cdvBuildDebug

BUILD SUCCESSFUL in 4m 58s
42 actionable tasks: 42 executed
Built the following apk(s):
        C:\Users\Girish\cordovaprojects\hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk
Checking Java JDK and Android SDK versions
ANDROID_SDK_ROOT=C:\Program Files (x86)\Android\android-sdk (recommended setting)
ANDROID_HOME=C:\Program Files (x86)\Android\android-sdk (DEPRECATED)
No target specified, deploying to device '5150b1bc'.
Using apk: C:\Users\Girish\cordovaprojects\hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk
Package name: com.ebasiq.hello
LAUNCH SUCCESS

Step 9: Run the app in browser

First we need to add the browser platform

C:\Users\Girish\cordovaprojects\hello>cordova platform add browser
Using cordova-fetch for cordova-browser@^6.0.0
Adding browser project...
Creating Cordova project for cordova-browser:
        Path: C:\Users\Girish\cordovaprojects\hello\platforms\browser
        Name: HelloWorld
Installing "cordova-plugin-whitelist" for browser

Then run the app in the browser

C:\Users\Girish\cordovaprojects\hello>cordova run browser
startPage = index.html
Static file server running @ http://localhost:8000/index.html
CTRL + C to shut down
200 /index.html (gzip)
200 /js/index.js (gzip)
200 /css/index.css (gzip)
200 /cordova.js (gzip)
200 /img/logo.png
200 /cordova_plugins.js

Note: Please make sure you install proper JDK, Android SDK, Android SDK targets, path settings for the same before running the app, else you may get errors.

References

  • https://cordova.apache.org/#getstarted
  • https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
  • https://cordova.apache.org/docs/en/latest/guide/cli/index.html

Learn more about Cordova application features in our upcoming Cordova blog articles.

Happy Learning!

Post Views: 2,000