Introduction To Apache Cordova In Universal Windows Platform Using Visual Studio

Introduction

Apache Cordova (formerly PhoneGap) is a popular mobile application development framework. Apache Cordova is an open-source mobile development framework. Cordova is a platform which is used to build mobile apps, using HTML, CSS and JS. We can think of Cordova as a container to connect our Web app with the native mobile functionalities. Web Applications cannot use native mobile functionalities by default. This is where Cordova comes in. It offers a bridge for the connection between the Web app and the mobile device.

Prerequisites

• Visual Studio 2017 RC

Step 1

Click File--> select New--> select Project. The project needs to be clicked after opening all the types of projects in Visual Studio

or click (Ctrl+Shift+N).



Step 2

After opening the New Project, select Installed-->Templates-->JavaScript-->Mobile Apps-->choose the Blank app (Apache Cordova). Now, give your app; a name (Ex:sample) and give the path of your project. Afterwards, click OK.



Step 3

Now, go to Solution Explorer. In Solution Explorer, get all the files and sources in your project.

Subsequently, select Your Project-->www-->double click to open Index.html page. In this, the page is main view of your app. In this page, you can write HTML code.



Step 4

After opening index.html page, you can see the default HTML code. If you want, you can edit HTML code.



Step 5

Now, you can run your app. Choose, your platform on configuration manager, which shows the list of platform Android, iOS, Windows-ARM, Windows-x64 and Windows-x86.



Step 6

After choosing the platform, if you choose Windows, it shows the list Windows device, Local Machine and Emulators. If you want to run Windows Emulator, choose Windows 10 Emulator and run your app.



Output

After few seconds, the app will start running on your Emulator. You will see that Apache Cordova app works successfully.



Step 7

In this step, you want to edit your app. Delete the default HTML code and write the code, as per your desire.

Step 8

Now, you can write the code given below.



Index.HTML