Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs
Contact   •   Articles   •   Products   •   Support   •   Search
Ad-free experience sponsored by:
ASPOSE - the market leader of .NET and Java APIs for file formats – natively work with DOCX, XLSX, PPT, PDF, images and more

Using Cordova and Visual Studio to build iOS Mobile Apps


Last week I took a look at the Visual Studio Tools for Apache Cordova, which is currently available as a CTP preview. To be honest I didn’t have high hopes, given some disastrous presentations I’d recently seen on this toolset. However, I was pleasantly surprised when I actually took this toolset for a spin – it solves a real problem by providing a unified installer for the necessary SDKs and tools to support Android, Windows Phone and iOS, and provides a very well thought out development platform that builds on top of the already awesome Web tooling that Visual Studio provides. The highlight of these tools is the ability to easily debug Cordova applications using Web developer tools that are integrated directly in Visual Studio, allowing you to debug either the provided emulators and simulators, or debug actual attached live devices including iOS devices.

Cordova

For those of you that don’t know, Apache Cordova – also known as Adobe PhoneGap – provides hybrid mobile Web development technology that lets you use standard Web technologies to build mobile apps. Cordova works by providing a native device application that hosts a full screen Web browser control as well as tooling for building the app and getting it ready for deployment to a mobile device. As a developer you implement the Web interface using the same Web technologies you use for Web development: HTML5, CSS and JavaScript as well as any support libraries and frameworks you might be using. Cordova – or in this case the Visual Studio Cordova Tools – then can build the application for you into a mobile device specific package that can be deployed to an app store and run on a mobile device. Because HTML5 mobile APIs are severely lacking in consistency and browser support, Cordova also provides a JavaScript based plug-in API that allows it to interact with native hardware and device APIs so you get access to native features of most mobile devices using a common multi-platform compatible interface. There are over 600 plug-ins that interfaces that provide access to most mobile device features and you can build your own plug-ins against native APIs if necessary.

Why do you need Visual Studio Integration?

Cordova on its own does a pretty good job of letting you create projects and build them using command line tools. However, it’s your responsibility to collect all the SDKs and tools you need for each platform and set them up. On Windows you also can’t build an iOS app, which is supported only on Macs. Cordova on its own also doesn’t do anything for debugging your applications – it lets you build and run them on a device but there’s no debugging support.

The Visual Studio Tools for Apache Cordova provide a consolidated installation for all the necessary SDKs and emulators, as well as an integrated development experience from coding to running and debugging of a Cordova applications, all within the boundaries of Visual Studio. Additionally Cordova natively doesn’t allow for building iOS applications on Windows, but using the Visual Studio tools you can actually develop and debug iOS apps on Windows.

Here are some of the highlights of Visual Studio Tools for Apache Cordova:

  • Installation of all necessary SDKs for Windows Phone and Android on Windows
  • A remote iOS build and debugging agent that interfaces with XCode’s command line build tools
    (a Mac and Apple Developer Account is required to build and debug)
  • A startup template that sets up a multi-platform project (iOS/Android/Windows Phone)
  • Customized platform configuration integration
  • A host of Emulators you can run on Windows
  • Full DOM and CSS Viewer for live applications both in emulators and on devices
  • Full JavaScript Console and Debugger using the Visual Studio debugger UI

iOS support is Excellent

I’ve been particularly impressed by the iOS support, which allows you build, run and debug Cordova apps using Visual Studio and run on a live device attached to a Mac. While you still need to have a Mac somewhere on the network and an Apple Developer account to make this work, it’s still pretty impressive to click Attach in Visual Studio and have your app fire up on an actual live iPhone, and then provide you rich browser developer tools to let you interactively access a DOM and Style inspector, a JavaScript Console and use Visual Studio as a debugger.

Ironically the iOS support currently is better than either the Windows Phone or Android experience. Windows Phone/Windows Universal debugging is not yet supported and Android debugging requires devices running Android 4.4 or later.

I’ve toyed with Cordova in the past off and on, and I’ve always turned away from it because it was just too much of a pain trying to debug on device applications especially for iOS devices. Using these tools for Visual Studio however, it feels very natural to develop, test and debug your application either in a browser, an emulator or on an actual device.

Creating a Cordova Application for iOS

To take these tools for a spin I took a small AlbumViewer sample application and moved it to Cordova. I’m going to use iOS as the example here because iOS has traditionally been the most difficult platform for Windows developers to build mobile apps for and to me this is one of the highlights of the Visual Studio Tools for Apache Cordova. Other platforms are actually easier to set up, but currently there are limitations: Android 4.4 has to be used for live device debugging, and Windows Phone/Universal currently don’t support debugging at all, but the range of support is supposed to be better by the time these tools release.

Let’s get started. I’m using Visual Studio 2013 and the add-in package for the Cordova tools (CTP 3). You can also use the Visual Studio 2015 Preview which includes these tools as part of its installation although the template is available only with TypeScript there.

First step is to create a new project:

NewCordovaProject

This creates a new project that includes the various platform specific subfolders for various resources, plug-ins and merged components that Cordova internally uses to build a native application.

 VsProject

This project contains a bunch of stuff that’s mostly related to the 3 platforms that Visual Studio defaults to: Android, iOS and Windows Phone/Universal.

The key component in this project is the index.html page which is the application’s start page that Cordova launches when the mobile app starts. From there you can essentially launch your Web based application and go to town. The main difference is that the index.html references cordova.js and platformoverrides.js, which are platform specific, generated files that Cordova produces when it packages your app.

cordova.js is the gateway to Cordova’s platform specific integration features. Most importantly it’s the interface that provides the plug-in system which is used to extend raw browser behavior and allows third parties to expose native APIs as JavaScript APIs in your application. Plug-ins are meant to get around the shitty HTML5 mobile API support and provide a consistent platform for accessing hardware like the camera, microphone, haptic feedback, battery status, or access software APIs for things like access to the Camera Roll, the contacts, call list and SMS systems on devices. There are over 600 Cordova plug-ins available to date to allow you to integrate more closely with a device and the API is open so you can build your own extenders into any of the mobile device platforms supported.

The index.html file is the application’s entry point and essentially you are building a Web application. So anything you’d normally do with a Web application – display a start page and have logic in JavaScript files or hooking up a framework like Angular works as you’d expect.

The default index.html looks like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>AlbumViewerCordova</title>

    <!-- AlbumViewerCordova references -->
    <link href="css/index.css" rel="stylesheet" />
</head>
<body>
    <p>Hello, your application is ready!</p>

    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <script src="scripts/index.js"></script>
</body>
</html>

Notice the three script links which load the Cordova dependencies.

index.js serves as an entry point that exposes a few key lifetime events for a mobile app:

(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );
        
        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
    };

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };
} )();

These are useful *if* you want to take special action when these events occur, but this matters only if you are depending on Cordova specific features in your app.

In the end what you are working with is just an HTML5 application, which means you should be able to use any application and just make it work.

Posted in Cordova  Visual Studio  Mobile  

The Voices of Reason


 

Chris
January 12, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

Regarding the Visual Studio Emulator for Android (http://www.visualstudio.com/en-us/explore/msft-android-emulator-vs.aspx) I believe it's an additional install for both VS2013 and the 2015 preview. There are links on that page to install it. The emulator is an early release but currently supports 4.4 and runs on HyperV so it should run fast and work well on your developer machine. Email me if you run into further issues getting it to work.

Rick Strahl
January 13, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

@Chris - I don't see a separate download link anywhere. The page says to install Visual Studio 2015 Preview which I have installed, but this emulator is not there. If you find a separate download link please post.

Mohammad
January 23, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

Nice article
Hopefully you will make more articles on how to make applications in Cordova and VS15

Rick Strahl
January 23, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

@Mohammad - yup, planning at least a couple more in the next months.

Mike
January 30, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

I already had the standalone android sdk installed (available here... http://developer.android.com/sdk/installing/index.html). After I installed the Cordova tools (CTP 3) and created a new project, "Android Emulator" was in my list of debug options in Visual Studio. You have to fire up the Android emulator first, then start debugging your project in visual studio.

Joe
February 02, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

Very helpful article. Thanks from the south side (Kihei). I am starting to use MVC5 project on the back end and Ionic/Angular/Cordova on the front. I'll try to keep ya posted.

Zakaria
February 06, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

Hi Rick,

I'm wondering whether this porting to phone applications could als be applied to webconnection foxpro web applications?

Rick Strahl
February 06, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

@Zakaria - You can most certainly build an HTML front end application with a FoxPro backend that acts as a service. In fact, this very same example is one that ships with Web Connection here:

http://west-wind.com/wconnect/musicstore/#/albums

Which could be ported to run on a phone easily because it's pure HTML on the front with a FoxPro Web Connection Service backend. (http://west-wind.com/webconnection)

Cristian
February 08, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

Hey,

Do you know if it's possible to have the desktop web browser as a platform in a Cordova project?

Ian
February 12, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

Rick - how are you managing builds for multiple environments? I find myself having to change the Display Name in config.xml to get multiple application version. Such as MyApp Dev, MyApp QA, and just MyApp (production).

CordovaIosRemoteDebugger
April 30, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

During remote debugging an iOS cordova app, did you also notice that Visual Studio hangs when you set a breakpoint to inspect a result of a cordova plugin?

A breakpoint on a line which is executed before calling a cordova plugin works without problems... Also storing the result of a cordova plugin in a variable and then inspecting it using another click event handler works.

Rick Strahl
April 30, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

I suppose that depends on the plug-in. I use a few plug-ins for managing the UI display (statusbar for example) and haven't seen any debugging issues.

But debugging or even running with plug-ins through an emulator or across a remote connection is definitely tricky. I expect that to get addressed before RTM though.

CordovaIosRemoteDebugger
May 04, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

Hi Rick. Thank you for your answer. I opened a question at stackoverflow. The problem seems to be in the plugin implementation:

http://stackoverflow.com/questions/29971259/visual-studio-hangs-when-remote-debugging-a-cordova-ios-app

By the way: What did you mean with 'RTM'?

Nick Hoffman
July 10, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

Besides being a great tech article, being a MetalHead I love the sample app...

quintonn
July 16, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

How do you set the app icon and splash screen for apple using cordova?
I have updated the res/icons and res/screens folders for ios but when I upload the ipa file in itunesconnect it still shows the default cordova icon (some weird face).
Any advice/info on this?

Rick Strahl
July 16, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

@quinton - there are resource folders that hold template icons. You need to replace the icons for each platform with your own artwork. It's in the res folder off the root where you can icons, screens and native folders each of which has subfolders for each of the platforms with placeholder images that you need to replace.

Patrick
August 16, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

Hi Rick,

Great article! Is the source code for the webapi available somewhere? I am interested in understanding how the json data is generated when calling the webapi in the scenario where "useLocalData" is set to false.

Thanks,
Patrick

Rick Strahl
August 16, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

@Patrick - No not directly for this sample. I've been using an ASP.NET 5 project for this which lives here:

https://github.com/RickStrahl/AlbumViewerVNext

Nayos
August 20, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

Hello !

Well, this tutorial seems nice, but unfortunatly, I have a 404 every time I try to connect the remote agent on the mac.

Maybe I did something wrong, but it's appear right now to be a pain in the ass to use an IOS....

Rick Strahl
August 20, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

You probably have to modify your firewall rules to allow Visual Studio to communicate with the Mac.

joyce
November 03, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

hello Rick Strahl MR.

It is a good Article. thank your share

I had success connected the visual studio corodova to mac , then run emulate iphone.

But I have one question. if i had http request in my corodova project, the mac's emulate iphone always return http status is 0.

I found the answer that iphone only receives https request.

But i want the app can run http request. Is it possible ?

steveen
November 20, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

hi joyce
if your ios plateform is ios8 it will be ok but if it is ios9 it is not currently officially support by cordova . I guess you are using xcode7 instead of xcode6

Rick Strahl
November 20, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

@Steveen - that's not correct. You can definitely build for iOS 9 - I have several apps building with xCode 7.

Rick Strahl
November 20, 2015

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

@joyce - The problem is iOS 9 adds restrictions for loading content from non-encrypted HTTP sources. You can work around this by using the cordova-plugin-whitelist plugin and specifying valid domains to retrieve non-https content from.

chris
February 10, 2016

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

Hi Rick

I have my xcode and mac running in vmware on my windows machine. Is it possible to build straight to the mac on vm. Tried using the IP address (IPv4 using DCHP) but wont connect. Any ideas.

Rick Strahl
February 11, 2016

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

@Chris - yes it's possible but you probably have to muck with the firewall settings in Windows to allow the port to open. Maybe on the Mac too - I can't recall but it definitely works with the VM. Just make sure you use the right IP Address since they are different.

John Burrows
October 25, 2016

# re: Using Cordova and Visual Studio to build iOS Mobile Apps

Hey Rick, long time no speak :)
I was wondering if you have tackled Visual Studio TACO and Typescript yet?
I love typescript but I am struggling with it's implementation into cordova apps
 

West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2017