Dark

Light

Dark

Light

Scroll to top

Cordova 2020 Quick Checklist

Here is a complete checklist for cordova based application to start. It is easier to go through in simple steps.

Step1: Open Command Prompt and go to root directory C:\

Run CMD
cd..

Step2: Create an application with appname/project

cordova create appname

Step3: Go Inside the project or app folder in cmd

cd appname

Step4: Edit the Project domain info, project name, project description, author name and author email in config.xml file

Step5: Add platform like android or ios in your project/app

cordova platform add [email protected]

Step6: Add android minimum and target SDK version into config.xml file present in your project root folder. Replace platform for android code with this code below:

<platform name="android">
<allow-intent href="market:*" />
<preference name="android-minSdkVersion" value="22"/>
<preference name="android-targetSdkVersion" value="29"/>
<preference name="ShowSplashScreenSpinner" value="false"/>
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="SplashShowOnlyFirstTime" value="true"/>
</platform>

Step7: Add plugin to your android application project with the following commands. So many plugins available at npm/cordova library

cordova plugin add cordova-plugin-splashscreen
cordova plugin add cordova-plugin-vibration

Step8: Remove or comment the Content-Security-Policy code from projectname/www/index.html file, if you want to link this app operational with your website or domain.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

Step9: Add jQuery library file in root folder and include in your index.html or needed html file in project (optional)

Step10: Create icon and splashscreen online from https://pgicons.abiro.com/

Step11: Copy the downloaded res folder and paste in your root directory.

Step12: copy the sample code from https://pgicons.abiro.com/config.xml and add in your config.xml file inside the platform code mentioned on Step6

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

<splash density="hdpi" src="res/drawable-port-hdpi/screen.png" />
<splash density="ldpi" src="res/drawable-port-ldpi/screen.png" />
<splash density="xhdpi" src="res/drawable-port-xhdpi/screen.png" />
<splash density="xxhdpi" src="res/drawable-port-xxhdpi/screen.png" />
<splash density="xxxhdpi" src="res/drawable-port-xxxhdpi/screen.png" />

Step13: Make sure you have these folders and have screen.png file in each.
drawable-port-hdpi
drawable-port-ldpi
drawable-port-xdpi
drawable-port-xxdpi
drawable-port-xxxdpi

Step14: If your project have plugins like vibration etc, then add the plugin related tutorial info code into your project. See the documentations for all the plugins and their usage.

Step15: Build your application in cmd

cordova build android

Install the app-debug.apk into your phone and enjoy.

Author avatar
Amitpal Singh
https://amitpalsingh.com

Post a comment

Your email address will not be published. Required fields are marked *