How to Turn Visual Studio into the Ultimate Mobile App Development Environment

Mobile device usage is exploding and all of us are increasingly being tasked with the job of putting apps on mobile devices.  However, many of the mobile development solutions being offered today come with their own proprietary ecosystem of IDE's, tools and services.  These “all in” solutions might be fine if you're doing green field development, but many development teams have substantial investments with existing tools or infrastructure.  “Ripping and replacing” an existing mature toolset is neither desirable nor realistic.  Nor is it desirable to create a new development silo that is only used for mobile development. 

This realization is deeply embedded in the Telerik Platform.  Although the Telerik Platform is designed to be an end-to-end mobile application development solution, it's also designed to be integratable with a wide variety of external tools, services and frameworks.  We recognize that Telerik isn't the center of the development universe and to successfully make developers productive we have to play nicely with others and embrace ecosystems outside our own. 

And if you're familiar with Telerik then you also know our roots run deep in the Microsoft and .NET ecosystem.  Consequently, it will probably be no surprise that one of the first integrations we targeted was Microsoft's development tools.  This blog post (along with this webinar) will demonstrate how to use the Telerik Platform to build cross-platform mobile apps using Visual Studio.

Step 1:  Create your Mobile App in Visual Studio

To get started, create a Telerik Platform account and download & install the Telerik AppBuilder for Visual Studio extension.  Telerik AppBuilder is a hybrid mobile app development solution that comes included in the Telerik Platform.  The Telerik AppBuilder Visual Studio Extension will add several AppBuilder capabilities to Visual Studio (2010, 2012 and 2013).

Once the AppBuilder Visual Studio extension is installed, create a new mobile app project using one of several AppBuilder Project templates.  (We recommend using the Kendo UI Mobile template.)

By default, Telerik AppBuilder utilizes a cloud-based Telerik Git repository.  However, by using the Visual Studio extension you're free to put your code anywhere.  This can include your own Git, Subversion or Team Foundation Server (TFS).  This enables you to leverage your own source-control infrastructure in the context of the Telerik Platform.

The Telerik AppBuilder Project Templates, beyond serving as a quick starting point for your new mobile app, also include a variety of Telerik UI libraries.  This includes Kendo UI Web, Kendo UI Mobile and Kendo UI DataViz.  These UI libraries help you create touch-friendly UI that automatically adapts to a variety of devices (iOS, Android, Windows Phone 8) and screen sizes.

The instructions above assume you're creating an HTML5-based hybrid app, however we recognize there are other strategies for building mobile apps, including web apps, native apps and cross-platform compilation.  For these other development approaches, Telerik provides a variety of Visual Studio-integrated tools.  For Web Apps, we provide Telerik UI for ASP.NET MVC, as well as our flagship UI library Telerik UI for ASP.NET AJAX.  For Native Apps, we provide Telerik UI for Windows Phone and Telerik UI for Windows 8.  For Cross-platform Compilation, the Telerik Platform services proudly works alongside Xamarin.  Furthermore, at the risk of being a tease, we have some unannounced enhancements coming in the weeks and months ahead that will make .NET and Xamarin developers very happy.  Stay tuned.  :)

Step 2 – Run/Debug your Mobile Apps inside Visual Studio

Once your new mobile app project is created, it is instantly runnable from inside Visual Studio by pressing F5 or clicking the ‘Start Debugging' button.

This will open Telerik AppBuilder's mobile device simulator which you can use to test your new mobile app in a variety of devices, including iPhone, iPad, Android and [recently added!] Windows Phone 8.  Additionally, you can utilize debugging tools, by pressing F12, to inspect and troubleshoot your mobile app.

It's worth noting, however, that despite our best attempts AppBuilder's on-screen simulator will never be the same as the actual device.  So although the simulator is great during active development, there is really no substitute for running the app on a physical device.  Thankfully Telerik AppBuilder can help with this as well through the “Build in Cloud” option (found in the Visual Studio AppBuilder menu).

Using the “Build in Cloud” option, you can package and deploy your mobile app to your physical mobile device.  This can be done by installing the app on your phone, or you can use the integrated AppBuilder Companion App (available in iOS and Android app stores).  The AppBuilder Companion App is fully integrated with your AppBuilder build environment and you can refresh your app to the latest version with a 3 finger touch.

Behind the scenes Telerik AppBuilder's hybrid build solution is built on top of the Apache Cordova project.  This is one more example of how Telerik embraces and enhances ecosystems outside our own.  It also enables you to benefit from Cordova's vast plug-in ecosystem.  Our cloud-based Cordova server is always instantly available to you each time you build your app.

Step 3 – Publish your Mobile Apps from inside Visual Studio

When you're ready to deploy your mobile app to public app stores, click the ‘Publish' option from the Visual Studio AppBuilder menu.

Using AppBuilder's cloud-based build server, you can package, provision and publish your mobile app to iOS, Android or Windows Phone app stores.  Furthermore, in the coming months, we'll also introduce private app store deployment for distributing mobile apps outside public app stores.

Step 4 – Connect, Test, Measure and More!

This blog post shows how you can build cross-platform mobile apps inside Visual Studio using the Telerik Platform.  We've primarily focused on building Hybrid Apps using Telerik AppBuilder.  However, the Telerik Platform, accessible at http://platform.telerik.com, includes a variety of other cloud services that you can leverage in your mobile app.

Telerik Backend Services provides fast and scalable web services that can be used to provide data services, authentication services, push notifications and more. 

Telerik Mobile Testing provides a Javascript-based framework that can be used to create, run and review automated test for your mobile apps. 

Telerik Analytics provides visibility into what is happening inside your mobile apps.  This includes # of installations, version of the installs, feature usage and much more.  (As an aside, these analytics can also be used in desktop apps, including WPF apps).

Any of these cloud services can be consumed from inside the Visual Studio environment and used alongside other Microsoft technologies.

How to Get Started and Where to Learn More

If you're doing green field mobile app development, then the Telerik Platform has everything you need to be instantly productive.  However, we also recognize that many development teams aren't starting from scratch.  Even if the mobile app being created is brand new, often it's being constructed in the context of an existing build process and needs to integrate with existing infrastructure.  The Telerik Platform does not require you to go “all in” just to benefit from some aspect of the solution.  We want the Telerik Platform to embrace the tools, processes and infrastructure teams already have in place, while simultaneously adding deep mobile capabilities.

And if you're already using Visual Studio and Microsoft technologies, then you'll see plenty of evidence of Telerik's deep experience with the Microsoft developer ecosystem.  Please give the Telerik mobile application platform a look for yourself (for free) and watch the "Building Build Cross-Platform Mobile Apps Using Visual Studio and .NET" webinar to get a deeper look at how to build mobile apps using Visual Studio.