Cordova First App

We have understood how to install Cordova and set up the environment for it. Once everything is ready, we can create our first hybrid Cordova application.

Step 1 – Creating App

Open the directory where you want the app to be installed in command prompt. We will create it on desktop.

C:\Users\username\Desktop>cordova 
   create CordovaProject io.cordova.hellocordova CordovaApp
  • CordovaProject is the directory name where the app is created.
  • io.cordova.hellocordova is the default reverse domain value. You should use your own domain value if possible.
  • CordovaApp is the title of your app.

Step 2 – Adding Platforms

You need to open your project directory in the command prompt. In our example, it is the CordovaProject. You should only choose platforms that you need. To be able to use the specified platform, you need to have installed the specific platform SDK. Since we are developing on windows, we can use the following platforms. We have already installed Android SDK, so we will only install android platform for this tutorial.

C:\Users\username\Desktop\CordovaProject>cordova platform add android

There are other platforms that can be used on Windows OS.

C:\Users\username\Desktop\CordovaProject>cordova platform add wp8 
C:\Users\username\Desktop\CordovaProject>cordova platform add amazon-fireos 
C:\Users\username\Desktop\CordovaProject>cordova platform add windows 
C:\Users\username\Desktop\CordovaProject>cordova platform add blackberry10
C:\Users\username\Desktop\CordovaProject>cordova platform add firefoxos 

If you are developing on Mac, you can use −

$ cordova platform add IOS 
$ cordova platform add amazon-fireos 
$ cordova platform add android 
$ cordova platform add blackberry10 
$ cordova platform add firefoxos 

You can also remove platform from your project by using −

C:\Users\username\Desktop\CordovaProject>cordova platform rm android

Step 3 – Building and Running

In this step we will build the app for a specified platform so we can run it on mobile device or emulator.

C:\Users\username\Desktop\CordovaProject>cordova build android

Now we can run our app. If you are using the default emulator you should use −

C:\Users\username\Desktop\CordovaProject>cordova emulate android

If you want to use the external emulator or real device you should use −

C:\Users\username\Desktop\CordovaProject>cordova run android

NOTE − We will use the Genymotion android emulator since it is faster and more responsive than the default one. You can find the emulator here. You can also use real device for testing by enabling USB debugging from the options and connecting it to your computer via USB cable. For some devices, you will also need to install the USB driver.

Once we run the app, it will install it on the platform we specified. If everything is finished without errors, the output should show the default start screen of the app.

config.xml

The config.xml file is the place where we can change the configuration of the app. When we created our app in the last tutorial, we set reverse domain and name. The values can be changed in the config.xml file. When we create the app, the default config file will also be created.

The following list explains configuration elements in config.xml

  • widget – The app reverse domain value that we specified when creating the app.
  • name – The name of the app that we specified when creating the app.
  • description – Description for the app.
  • author – Author of the app.
  • content – The app’s starting page. It is placed inside the www directory.
  • plugin – The plugins that are currently installed.
  • access – Used to control access to external domains. The default origin value is set to * which means that access is allowed to any domain. This value will not allow some specific URLs to be opened to protect information.
  • allow-intent – Allows specific URLs to ask the app to open. For example, <allow-intent href = “tel:*” /> will allow tel: links to open the dialer.
  • platform – The platforms for building the app.

Conclusion

We hope you enjoyed this tutorial. See you next time!

Leave a Reply

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