What is cordova plugin? & How to add plugin in cordova project.

What is cordova plugin?

1. Plugin is one of the most important thing in cordova mobile apps.
2.  Plugin is a package of injected code that allows the cordova webview within which the app renders to communicate with the native platform on which its runs.
3. Plugin provide access to device and platform functionality that is ordinarily not available to web apps.
4. Plugin comprise a  single JavaScript interface along with corresponding native code libraries for each supported platform. In essence this hides the various native code implementation behind a common JavaScript interface. 
5. Main cordova API features are implemented as plugins. through these plugins you can access all native functionality in your cordova mobile app or you can create your own plugin to fully your requirement in app. 
6. In cordova there are many cordova plugins are available for use or you can create your own plugin and published it to cordova open source community. So any one can use it.

How to add plugin in cordova project

1. Adding plugin to cordova project is very simple just required to run some following command in CLI.
2. First you have entered to your cordova project that you already crearted like i have already created sampleX project previously.
3. So now i am adding cordova splash screen plugin using CLI
4. So open your cmd and select your project path - C:\Users\sushant>cd sampleX
5. After entered your project folder run below cmd -

   

   cordova plugin add cordova-plugin-splashscreen

6.  Plugin will download from srouce. one download completed it will added to our cordova project Plugin directory . assets/www  folder is our working directory where you will add all your code into this directory. you can also see that i am added plugins which are come under plugin folder where you can see the splash screen folder.
   
7. So now build the project and run it. when the mobile app start first time you will see a splash screen with cordova default image on it.
   
8.  You can change your splash screen with your own app splash screen. So Goto res folder where you will see many folders in that drawable-XXXX-XXXX folders have splash screen images which have specific dimension as per device type. So just replace your splash screen with default splash screen.
   

Cordova Setup In Android Studio

1. In Cordova you can also build mobile app using with CLI(Command Line interface). but many people using android studio so i think its better practice to build your mobile app in android studio.
2. Using android studio you can build and test your mobile app in emulator or on your mobile device in faster way.
3. So before setting up in project in android studio you have to create project in cordova by using following commands.

                                                          First create a project. 

                                  cordova create hello com.example.hello HelloWorld

                                          Once project is created entered into project folder 

  cd hello

After entering into the project folder add platform android

C:\users\sushant\hello> cordova platform add ios  android --save

       4. Once you completed all above steps launch your android studio.

       5. Select option "Open an  existing Android Studio Project".

                   

       6. After that browser your cordova project directory. Goto your project directory for e.g project                directory is  sampleX then select platforms  -> android directory once selected android                       directory press Ok button.

  

      7. Gradle Sync dialoug box will open just click on Ok . wait for to build Gradle completely.

 8. Now Goto Project tab which on left of android studion and select Project option from it

              Once you setup cordova project in android studio. you will get all yours project files in                         assets/www folder and index.html is launching page of your app.

          

    9. Now build and test mobile app on your mobile device.so you are required to follow some steps.

         1. First Goto your mobile device setting option  enable Developer options for enabling this option you must goto About phone -> tap 3 times on build number option once done you will see the toast mesage saying you are developer now.

         2. Goto to Developer option and enable it and also enable USB debugging  

         3. Now connect your mobile device with your pc using USB cable.

         4. After that select Run/Debug configuration option in android studio. steps as follow:-

               1. Select Edit Configuration  option

      2. after clicking Edit configuration option following dialog box will open, in that select                            Deployment Target Options -> USB Device

                 

      3. Then Run the project on clicking Run button in android studio. In bottom android monitor                   option display your mobile device name means your device connected successfully. 

         

    4. In end test your mobile app on your device once your mobile app build successfully.

   

   

Basic Cordova Commands for creating app

Create App

1. Create directory where you maintain your code and create project. so open command prompt and perform the following commands.

• cordova create hello com.example.hello HelloWorld
• 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.

Add Platforms

     2. Once you created project the next step is to add platform to your project. for that you have enter          into project folder with the following command.

• cd hello 
• once your entered into your project directory write this command in command prompt
• C:\users\sushant\hello> cordova platform add ios  android --save
• C:\users\sushant\hello> cordova platform add android --save  
• choose platform as per your requirement if you want to create project for android then add android platform & ios for iphone and so on. plus ensure they get saved to config.xml.
• You can also check your current set of platforms
• C:\users\sushant\hello>cordova platform lsd 

Build The App

     3. By default cordova create command create web-based application structure  whose start page is          projects   www/index.html file. Any initialization should be specified as part of the device                  ready event handler defined in www/js/index.js 

• Run the following command to build the project for all platforms:
• C:\users\sushant\hello>cordova build 
• You can build your app using CLI(command line interface) or use Android Studio IDE for building android app.
• So next blog i will learn you have to setup cordova project in Android Studio and how to build it and test mobile app on your android mobile.