In this post I’m gonna talk about Cordova and its integration with Visual Studio. For this I created a simple bootstrap project using Cordova, Ionic and Typescript for people that are starting this adventure like me.

What is Apache Cordova?

Cordova it’s a open source platform to develop mobile applications with Web Technologies (Javascript, Html5, CSS). It’s possible to install plugins to access the device native api. For example, if we want to access the camera, we just need to install the camera plugin.

As usual I created a simple list that resumes what I think.

Advantages:

– Web Developers can easily develop mobile applications
– Developing for multiple targets with almost the same code (Android, IOS and Windows Phone)

Disadvantages:
– Worst performance than native applications
– It’s not possible to have the native behaviour

In my opinion and to summarize, if we want to create a complex application with a lot of native features, it’s better develop a native application. But if we want a simple application we can use Cordova, since the performance issues are not too bad and the normal user can use the application without any problems.

Why Ionic?

Ionic it’s a front-end framework that integrates with Cordova. This framework uses AngularJs and has a rich user interface that makes the developer’s life easier. Although this framework it’s in Beta, it already has an huge community, and I believe it will grow even more in the future.

Why TypeScript?

Because I love it – and let’s be honest, who doesn’t? Typescript integrates very well with Visual Studio, it’s easier while programming with OOP paradigm, helps to avoid type mistakes and generates beautiful javascript. I am not saying javascript is bad but usually big javascript projects turn into a jungle. Maybe I just had bad experiences 🙁

Everything together (Cordova + TypeScript + Ionic)

Microsoft integrates Cordova with Visual Studio but I want to use Cordova with Ionic.
After some research I found a good approach that what I want. This post is a good example but I wanted a simplest solution.

Here is my solution. (GitHub)

It’s necessary to meet some requirements to run my code.

Requirements

* Visual Studio 2013 Update 4
* Visual Studio Tools for Apache Cordova CTP3.0
* Bower (Integration with Visual studio)

Deploy

With Visual Studio it’s really simple to deploy our application in a device or simulator.

We have 3 different ways.

Device

This option will generate an apk file in bin folder and we can install it and test it in our devices.


Device

Ripple

It’s a web simulator used to develop Cordova applications. It’s really fast and complete, and it’s possible to simulate events like low battery or internet connection.


Ripple

Remote

Generates the binaries remotely. This option is more used if we want to deploy in IOS devices and we are working in other environment (eg:Windows, Linux).

Typescript Output File in Visual Studio (Cordova Template)

Typescript has an option to generate a single javascript file. That makes the work easier because we don’t need to create a script tag for each js file. In Typescript Html5 projects we have that option in Build Configuration, but in Cordova templates we don’t. So I created a simple hack for that:

Step 1: Unload your project


Unload Project

Step 2: Edit JsProj


Edit Project

Step 3: Add TypeScriptOutPutFile in MsBuild file.


MsBuild

Step 4: Reload Project


Reload Project

The next time you build your project, a single js file will be generated.

I hope my project can be useful. Let’s start creating Mobile Applications with Cordova 🙂

I'm a Software Engineer that believes software must be simple, intuitive and reliable. My main interests are api’s design, best software practices, distributed systems and continuous integration.

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