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.
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.
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
Step 2: Edit JsProj
Step 3: Add TypeScriptOutPutFile in MsBuild file.
Step 4: 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 🙂
Shared Node 