Post
Ask Question

Universal Windows Platform App Development Using Cordova In Visual Studio 2017

Cordova is an open source framework for quickly building cross-platform mobile apps using HTML5, JavaScript, CSS etc.

Cordova is an application container technology that allows you to create natively-installed applications for mobile devices using HTML, CSS and JavaScript. The core engine for Cordova is also 100% open source, under the Apache Cordova project.

The UI layer of a Cordova application is a web browser view that takes up 100% of the device width and 100% of the device height.

Cordova provides an application programming interface (API) that enables you to access native operating system functionality using JavaScript. You build your application logic using JavaScript and the PhoneGap API handles communication with the native operating system.

Cordova currently supports all major mobile platforms:

  • iOS
  • Android
  • Windows Phone 8

In this article we will see the step by step setup process for developing Apache/Cordova cross platform mobile application development in Universal Windows Platform.

 You can download Visual Studio 2017 from here.

At the time of installation, select Apache Cordova cross platform mobile app development tool to install.

Visual studio
Figure 1: VS 2017 installation for Apache Cordova

After completing the installation process, please open visual studio 2017.

Visual studio
Figure: 2

Now click on the New Project section from the file menu.

Visual studio
Figure: 3

Now click on the File menu and then click on the New menu and select Project from there. Then you will see the project template menu like the below figure. Then select JavaScript and click on the Apache Cordova Apps section. Then select Blank App (Apache Cordova from the app template section.) Now write a name of the project and then click OK button.

Visual studio
Figure: 4

Now you will see that a new Cordova universal windows app is ready on your visual studio 2017

Visual studio
Figure: 5

Now a new Cordova project will be created and then you will see newly created Cordova files in the solution explorer. Here in the merges folder, you will see different platform related JavaScript libraries. In the dependencies section you will see Cordova client side package manager related files like npm and bower files. If you install any Phonegap plugin, then a new plugin folder will appear and plugin codes will be on that folder. On the res folder you will see resource files like icons for different platforms, android ant property files and platform based screen images. On the www folder we will see our HTML5, CSS and JavaScript files. We will mostly write our codes here. On the config.xml file you can change configuration of your project, add or remove plugins and set names and versions for different platforms.

Visual studio
Figure: 6

Now click on the index.html page. Then you will see below codes for index.html.  

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.     <!--  
  5.         Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.  
  6.         For details, see http://go.microsoft.com/fwlink/?LinkID=617521  
  7.     -->  
  8.         <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 *">  
  9.           
  10.         <meta http-equiv="content-type" content="text/html; charset=UTF-8" />  
  11.         <meta name="format-detection" content="telephone=no">  
  12.         <meta name="msapplication-tap-highlight" content="no">  
  13.         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">  
  14.         <link rel="stylesheet" type="text/css" href="css/index.css">  
  15.         <title>BlankCordovaApp3</title>  
  16.     </head>  
  17.     <body>  
  18.         <div class="app">  
  19.             <h1>Apache Cordova</h1>  
  20.             <div id="deviceready" class="blink">  
  21.                 <p class="event listening">Connecting to Device</p>  
  22.                 <p class="event received">Device is Ready</p>  
  23.             </div>  
  24.         </div>  
  25.         <script type="text/javascript" src="cordova.js"></script>  
  26.         <script type="text/javascript" src="scripts/platformOverrides.js"></script>  
  27.         <script type="text/javascript" src="scripts/index.js"></script>  
  28.     </body>  
  29. </html>   

Listing: 1

In the above code,src=”cordova.js” is referencing updated installed Cordova library and src=”scripts/platformOverrides.js” file is referencing the library platform independence of this application.

Visual studio
Figure:6

From figure 6 you can see supported platforms for Cordova, you can run your app in those platforms which are, Android, iOS< Windows-ARM, Windows-x64, Windows-x86.

Visual studio
Figure: 7

If you want to run your app in iOS platform, then you can see above available options for you to test your app.

Visual studio
Figure: 8

If you want to run your app in Android platform, then you can see above available options for you to test your app.

Visual studio
Figure: 9

Here, to run the app in universal windows platform, I have selected Windows-x64 and Local Machine as the mode.

Your app will build now, it may take some time. After that it will deploy in your local machine and you will see your app like the below screenshot.

Visual studio
Figure: 10


Similar Articles