How to use Cordova

Kyuho Lee
3 min readMar 30, 2019

--

To install web page of Framer-X on android phone

https://www.pexels.com/photo/android-apple-devices-computer-connection-265614/

Install Android Studio

If you making android APK, you need Android Studio in order to build APK and use Android Virtual Devices. Sometime you might modified some coding to change android specific features and permissions. Gook luck! This flow is not easy for designers. Click below URL and enjoy installing.

Install Java

In the Terminal, if you type “java”, you can see the below popup. It is really good help to users who should search again regarding installing JDK. To install JDK, click the menu of “More Info…” you will jump into Oracle web page to download JDK file. After download, install it.

Install Cordova

Now this is the core of our preparation. Go to the below URL and you can find the procedure for installing and running your first project.

npm install -g cordova

Set up environments

open ~/.bash_profile file and write as below

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_201.jdk/Contents/Home
export PATH=${PATH}:$JAVA_HOME/bin
export ANDROID_HOME=/Users/KyuhoLee/Library/Android/sdkexport PATH=${PATH}:/Users/KyuhoLee/Library/Android/sdk/platform-tools:/Users/KyuhoLee/Library/Android/sdk/tools

Solve problem with gradle

If you have a problem with gradle permission…

chmod 755 /Users/KyuhoLee/Documents/Framer/cordova/ZeroCam/platforms/android/gradlew

Create new app

cordova create TestApp com.multimediaux.testapp "Test App"cd TestAppcordova platform add androidcordova run android

Enable Fullscreen

in config.xml

<platform name="android">   ...   <preference name="Fullscreen" value="true" /></platform>

Camera permission

In Config.xml

<widget id="com.multimediaux.zerocam" version="1.0.0"
...
xmlns:android
="http://schemas.android.com/apk/res/android">
...<platform name="android">
...
<config-file target="AndroidManifest.xml" parent="/manifest">
<uses-permission android:name="android.permission.CAMEARA"/>
</config-file>
...

or

  1. Add permission in platforms/android/app/src/main/AndroidManifest.xml
   ...
<uses-permission android:name="android.permission.CAMERA" /></manifest>

2. Turn on CAMERA and STORAGE permission Settings of phone

Change icons

make res/android folder and place icons

add below in config.xml

<platform name="android">
<!--
ldpi : 36x36 px
mdpi : 48x48 px
hdpi : 72x72 px
xhdpi : 96x96 px
xxhdpi : 144x144 px
xxxhdpi : 192x192 px
-->

<icon src="res/android/ldpi.png" density="ldpi" />
<icon src="res/android/mdpi.png" density="mdpi" />
<icon src="res/android/hdpi.png" density="hdpi" />
<icon src="res/android/xhdpi.png" density="xhdpi" />
<icon src="res/android/xxhdpi.png" density="xxhdpi" />
<icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
</platform>

Create keystore

keytool -genkey -v -keystore cordova.keystore -alias cordovakeystore -keyalg RSA -keysize 2048 -validity 10000

Build.json

{"android": {"debug": {"keystore": "../cordova.keystore","storePassword": "android","alias": "cordovakeystore","password" : "123qwe","keystoreType": ""},"release": {"keystore": "../cordova.keystore","storePassword": "","alias": "cordovakeystore","password" : "123qwe","keystoreType": ""}}}

Build

cordova run androidcordova build android
cordova build android --release

Add asking Camera Permission

--

--

No responses yet