How to Create a Hybrid Mobile Project for Icenium in Visual Studio

At Telerik, we are very excited about the recent additions to Icenium - and at the top of that list is the Icenium Extension for Visual Studio. This extension allows you to create hybrid mobile apps from within Visual Studio 2012, and it enables Visual Studio to work with Icenium's cloud-based services (for example, running builds for Android and iOS, managing certificates and provisions and more). If you don't already have the extension, you can download it here.

Getting a Hybrid Mobile Project Started

When you install the Icenium Extension for Visual Studio, you will see 4 new project templates listed when you start a new project:

Each of these sample projects come with some level of "hello world" boilerplate - which you can tweak, adjust and/or delete according to your preferences. Here are few notable things about each of these sample projects:

Blank Cordova Project

If you prefer to start with a "blank canvas", with only the essentials provided, this is the project template to use. Very lightweight index.html and index.js files are provided for you - and they are "runnable" out of the box, in both the simulator and on a device:

When you're ready to build your app using this project template, simply remove the div element containing the image/text you see on the screen shot above, and then edit your index.js to your heart's content. The index.js file provided gives you a lightweight start towards an app object, so feel free to use what we've provided, or replace it with your own implementation.

jQuery Mobile Project

With the jQuery Mobile project template, the required dependencies are added to the project and you're given a small sample app showing some basic functionality written using jQuery Mobile:

The sample boilerplate is provided to give you initial suggestions on structure and usage, but you can change it to whatever you like, of course!

Kendo UI Dataviz Project

Kendo UI has some of the most impressive data visualization capabilties of any client side framework - and they're available to you as you develop hybrid mobile apps using the Icenium Extension for Visual Studio. Choosing the Kendo UI DataViz project will provide all the assets necessary to start using these visualizations, as well as a sample app showing you how some of them are used:

It can be a lot of fun tweaking the samples in this project to see how you can control the charts! Be sure to take some time to play - and when you're ready, rip out the boilerplate you don't need.

Kendo UI Mobile Project

When you need serious client-side structure, speed, and utlity, then check out Kendo UI Mobile. Creating a project from this template gives you (as you'd expect) the dependencies necessary to build with Kendo UI Mobile as well as a sample application, showing a peek into framework usage and structure:

This sample app only scratches the surface of what's possible using Kendo UI Mobile, so I highly recommend reading more about it here.

Alternatives to the Above Templates

Sometimes you don't want the sample app boilerplate - you'd rather have a project template that only adds the necessary assets to the project. No problem! I've started an experimental repository on github, which contains a Visual Studio extension project - ultimately providing an extension that installs a "No Boilerplate" version of each of the normal Icenium project templates. Once installed, you'll see this list under the Icenium project templates:

Feel free to clone this project, or you can download the vsix file directly. We'd love to hear your feedback if you use these alternative templates.