Cordova – All about

Announcements

https://cordova.apache.org/blog/

How to build an existing Cordova app?

Install Cordova Tool

Install Homebrew and Node

https://brew.sh/

brew install node
brew install watchman

npm install -g cordova

Install third party libraries

npm install
cordova prepare

Add platforms

cordova platform add browser
cordova run browser

cordova platform add android
cordova run android

cordova platform add ios
cordova run ios

Errors

If there is error which you don’t know what it is, rebuild the project

• Remove 3 folders: node_modules, platforms and plugins
• $ cordova prepare

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
This is because Gradle is not installed

• Install Java, version 8 or higher
• Download Gradle from https://gradle.org/releases/
  $ curl -O -L https://downloads.gradle-dn.com/distributions/gradle-6.0.1-bin.zip
  $ mkdir -p ~/bin/gradle
  $ unzip -d ~/bin/gradle gradle-6.0.1-bin.zip
• ~/.bash_profile
  export GRADLE_HOME=$HOME/bin/gradle/gradle-6.0.1
  export PATH=$GRADLE_HOME/bin:$PATH
• ~/.zshrc to refresh bash_profile everytime Mac is started
  $ source ~/.bash_profile

Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.

cp -r /Applications/Android\ Studio.app/Contents/plugins/android/lib/templates ~/Library/Android/sdk/tools

chmod a+x ~/Library/Android/sdk/tools/templates/gradle/wrapper/gradlew

Unzipping /Users/hung-nb/.gradle/wrapper/dists/gradle-2.13-all/ebj3j8vp1bokwifuewc84xk56/gradle-2.13-all.zip to /Users/hung-nb/.gradle/wrapper/dists/gradle-2.13-all/ebj3j8vp1bokwifuewc84xk56
Exception in thread “main” java.util.zip.ZipException: zip file is empty

Copy zip file from “https://services.gradle.org/distributions/gradle-2.13-all.zip” into “/Users/hung-nb/.gradle/wrapper/dists/gradle-2.13-all/ebj3j8vp1bokwifuewc84xk56” folder

How to check Cordova version?

npm info cordova
cordova platform version android
cordova platform version ios

How to update Cordova iOS new version?

cordova platform remove ios
cordova platform add ios@6.0.0

How to export release files?

Update version

Update version “version=””” in “config.xml“

<widget defaultlocale="en-US" id="this.is.app.name" android-versionCode="" version="1.0.1" windows-packageVersion="1.8.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps" xmlns:android="http://schemas.android.com/apk/res/android">

Build dependencies

yarn
cordova prepare

Export apk, ipa

Android

cordova build android --prod --release

iOS

Open project by XCode and build

How to debug Cordova project?

Android

• Run app on Android emulator
• Open Chrome browser
• Type “chrome://inspect”
• Select emulator Inspect

iOS

• Download Safari Technology Preview
  https://developer.apple.com/safari/technology-preview/
• Run app on iOS simulator or your iPhone
• Open Safari Technology Preview
• Select “Develop” > “hung-nb’s Mac Book Pro”
• Select Simulator or your iPhone
  If you can’t see your iPhone, open “Settings” > “Safari” > “Advanced” > Turn on “Web Inspector”

How to change “AndroidManifest.xml” and “*-Info.plist”

Change “AndroidManifest.xml” by editing “config.xml”

Add more child tags

<config-file target="AndroidManifest.xml" parent="/manifest/application/activity/intent-filter">
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.BROWSABLE"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <data android:host="mainactivity" android:scheme="my.app.scheme" />
</config-file>

Add more properties into <Application> tag

<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
    <application android:largeHeap="true" />
</edit-config>

Change plist file by editing “config.xml”

Add url scheme for the app

<config-file target="*-Info.plist" parent="CFBundleURLTypes">
    <array>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLName</key>
            <string>this.is.identifier</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>this.is.app.scheme</string>
            </array>
        </dict>
    </array>
</config-file>

Local storage

How to save/ get value in-app local storage?

window.localStorage.setItem("keyABC", "valueXYZ")
window.localStorage.getItem('keyABC')

window.localStorage.setItem("keyABC", JSON.stringify(jsonObject))
const jsonObject = JSON.parse(localStorage.getItem(key))

How to hide keyboard after pressing “Enter”?

// Close the on-screen keyboards when the "go" button is used
document.getElementById('filterBasic-input').addEventListener('keyup', function (e) {
    const keyCode = (e.keyCode ? e.keyCode : e.which);
    if (keyCode === 13 || keyCode === 10) {
        e.target.blur();
    }
}, false);

How to catch button click in Cordova inAppBrowser?