This article is all about a basic introduction of Cordova. We will see the architecture of Cordova, that how Cordova works, how to create apps in Cordova, how to set a platform for the app, directory structure, and deployment of apps on phone.
Advantages to use Cordova:
- Extend your existing mobile application to any other platform without re-writing code again.
- It helps you to access device API without writing any native component
- It provides special web-view that can access device-level API’s
- It is mixing native components and web view to build cross-platform apps
Below diagram image shows how Cordova works:
Cordova provides WebView, which is used in the entire application, whatever you make using HTML and CSS will combine inside WebView to display user interface. So, it builds a hybrid application, which mixes web view and native application components.
It is a part where you write your application interface code. It implemented as a web page only. Generally, we used index.html while building any web application and used CSS, JS in combination to make it interactive and functional. Your code as the app runs inside WebView with a native wrapper of any platform like Android or iOS.
Native wrapper of your application contains config.xml, which is responsible for containing each information about the app. It tells us exactly how it affects our application functioning. It is the area which you describe plugins used (to access device-level API’s) in the app and other configuration like portrait mode, app icon, and app start-up screen.
Cordova has some inbuilt core plugin to access different functioning of device like accessing camera, contact, location, gallery and battery information. These are called as core plugins.
Create your first app using Cordova
- First, download and install Node.js on your machine and check npm running on your command prompt (terminal)
- Now need to install Cordova in your machine, which should be added in your npm utility.
- Hit this command from your terminal npm install -g cordova
After doing the above steps, you can able to run Cordova commands from your terminal.
Let’s start creating an app using Cordova.
- Create any folder in your directory.
- Go to that folder from the terminal.
- Now hit the command, given below, from terminal
cordova create com.hello.myfirstapp MyFirstApp
This command will create one directory by the name of MyFirstApp, which has all the required folder for Cordova. So now you create successfully the first app using Cordova.
Set platform for app
Till now you just create a skeleton of your Cordova app. Now you need to provide a native wrapper for your app, which is mobile OS specific like Android or iOS. You can run these two commands or either one only as per your requirement. Below command add platform for your application.
cordova platform add android
cordova platform add iOS
Directory structure of your Cordova app and where to put your code in Cordova App
Till now we created an app and set a platform for our app. Now you can place your code in Cordova structure so that you can able to build the app and get the desired output.
Here is the screenshot of your Cordova app directory structure.
There is a default index.html file, which is created by Cordova itself. Do not replace it with your code. Cordova will search for index.html file while building your application. You can modify this file according to your need but don’t remove cordova.js script from it.
How to build an app and deploy on your phone?
Now we are ready to build our app for testing over the phone.
Cordova build (it is used to build all platform specified in the app)
Cordova build an android (it is used to build platform-specific)
It will create a build inside your Cordova project from where you can copy
APK file and install it in your phone. Here is the path of the build app.
Finally, you can install your first app on your phone.
Take help from the proficient mobile app development company like us. Contact us for any query and we will help you out with our quick response.
Ved Prakash Dhar Dwivedi and Kuldeep Sharma are a full-stack engineer currently working with QSS Technosoft. They have worked in Node.JS, GraphQL, Express.JS, React.JS, React Native, Sequelize.JS. They are always ready to explore new and upcoming technologies.