Building Cross Platform Apps with Visual Studio

If you don’t know it already, mobile apps are all the rage. From social networking to pictures and videos to gaming, the app ecosystem is where you want to be. But what if you are a “one-stack” developer? What if you only know HTML/JavaScript? What if your expertise lies in Web Development? Well, they all have their challenges but over the next few articles I will try to demystify the mobile development process especially when it comes to cross platform development. The “one-stack” developer has is a bit easier. They know what the hardware will be. They know the screen size and capabilities of the device. They can reuse code over and over again and create some high quality apps. The “multiple-stack” developer has an advantage as well. They know how to code for multiple platforms. They know what may or may not be possible for each of the platforms. Lets look at the “stacks” and define them a bit.

One-Stack

This is your traditional developer. They know A LOT about their platform. They are comfortable with building and designing for it and most likely have many apps in one of the stores. They are also probably using a tool geared for their stack. Android Studio or Eclipse for Android Development. Xcode for iOS development. Visual Studio for Windows development. However, these developers might have a hard time porting their code over to another stack. C# does not translate well to Objective C or Swift and vice versa. In terms of enterprise, these one -tack developers are only working on one project and will have to get another team for a different stack.

One-Stack with Help

The one stack with help is more of your game developer. They know how to build games with their tool. Take Unity as an example. This developer uses Unity to build an awesome game. They test it on one of the platforms the developer is comfortable with and maybe even adds a bit more features to the game for that platform. However, the tool gives the developer a bit of help to not only re-use their code but helps the publishing process to a few different platforms. The “one-stack” developer might only know iOS but this cross platform tool, in our example Unity, gives the developer help to publish the game to Windows, Android and more.

Multiple-Stack

This is what most developer’s claim they are. And most are. However, they most likely know surface level for each of the stacks. They can probably go deep in the stack they use the most but they have a good grasp of what you can or can not do with each of the platforms. This is the modern developer. They no longer have the luxury to focus on one stack. They need to support all of them. However, this comes at a price. They need to know each of the IDE’s for the platforms. Keep up on the SDK changes. Possibly support multiple code bases.

Web Stack

Then there is the web stack developer. They don’t work on mobile apps. They might support a responsive or mobile website but as far as publishing to the store, that is the mobile team. These guys are the web team. PHP, Flask, .NET, HTML, Rails..these guys know front end and back end. They know how to setup a server and create a graph database. They have been working with connection strings and relational models. They test on Chrome and Firefox and curse the IE8 support for some of their clients. But when it comes to mobile app development, they have little involvement with it. You probably can relate to one or more of these stacks. Maybe there are some I have not even covered but the point is each of the stacks has their own set of challenges for building and maintaining mobile apps. These set of articles will walk you through on how Visual Studio can help with these challenges. From cross platform development to publishing app, from source control to remote deployments. My goal is to cover most of these in detail and expose how powerful of a platform Visual Studio is for any developer. Lets dive in!

Step 1: Get the Tools

Visual Studio 2013 Community Edition

In order to start any development you have to get the right tools. First off, head over to VisualStudio.com and download the Visual Studio 2013 Community Edition for free! Follow the installation steps and you are half way from getting going. Just as an FYI – when you perform the installation, please check the boxes for Windows Phone SDK. You might as well install everything. If you would like to do development on Visual Studio 2015 Preview, that is fine. Most of what I will be covering will work in 2015. As you probably just saw, the download is an EXE and that is not going to work on a Mac or Linux. So what do you do if you do not have access to a Windows machine? A few things.

  • For a Mac you can install Parallels or Bootcamp and then install Windows on there. This way you do not have to invest in extra hardware but you will have to make some room on your computer for that.
  • Another option is cloud development. Head over to Azure.Microsoft.com and sign up for a free 30-day trial. Once you sign up, you can create a Virtual Machine running Windows Server and already configured with Visual Studio 2013 or 2015! Remote into the VM and BAMM! You are developing in the cloud.
  • If you do not want to sign up for a 30-day free trial and you know you will be building apps, you can apply for the BizSpark progam to get free Azure and free tools for 3 years!

Visual Studio Tools for Apache Cordova

Now that we have Visual Studio installed, we can install some tools that will help us with cross platform development. The first set is Tools for Apache Cordova. This is an installation that will provide the ability to build apps for Windows 8 & 8.1, Windows Phone 8 & 8.1, Android 2.23+ and iOS 6, 7 & 8. Here is a great article listing some of the benefits to the tools. If you plan on building apps for iOS then you will need a Mac on your network and you will need to install the build tools on it. Here is an article to get started with that.

Git

We will be using Git as our source control. You can download Git for Windows or you can download one of the clients (GitHub is fine for pubbing your code) There are a couple of other add-ons/ins that we will install but this is good for now.

Step 2: Fire it up!

Now that everything is installed, lets open up Visual Studio and start our Cordova project. We will be using a “real world” example of consuming an api from a 3rd party and displaying it within our app. new-project After Visual Studio is up, click on File > New Project and find JavaScript and you see Apache Cordova Apps. Give it a name and a location to save. Before we start coding lets quickly look at the project structure, it will help us out going forward.

The new Cordova project includes five folders:

  • css contains basic CSS style sheets that are included with the blank template.

  • images is the suggested location for images for your app.

  • merges is used to add platform-specific code. For more information, see Configure Your App Built with Visual Studio Tools for Apache Cordova.

    • By default, the Blank App template includes commonly used platform-specific code for Windows and Android devices in the merges folder. (platformOverrides.js is used to specify the platform file.)

    • For Android devices, a .js file is included to provide support for the JavaScript Function.prototype.bind() function on Android 2.3 devices.

    • For Windows, a winstore-jscompat.js file is included to enable support for a variety of JavaScript libraries. For more information, see the JavaScript Dynamic Content shim for Windows Store apps project site.

  • res is used for platform-specific visual assets (icons and splash screens), signing certificates, and (if needed) platform-specific configuration files. For more information, see Configure Your App Built with Visual Studio Tools for Apache Cordova.

  • script is the default location for all JavaScript or TypeScript files.

In addition to CSS and JavaScript files, the new project also includes these two files:

  • config.xml contains configuration settings for your app. You can open this file from Solution Explorer in the configuration designer, an interface for config.xml, or you can edit it directly by selecting View Codefrom the shortcut menu for the file.

  • index.html is the default home screen for your app.

If you want, you can run your app right now to get your typical “Hello world”. It might be beneficial to do so. This way you can see the debugger and emulators. In order to run it, you can press F5 or Debug > Start Debugging or you can choose the green play icon in the toolbar. debug You will see in the image above, the RED circle shows the little play button. Clicking the dropdown you can run the app on different ripple emulators. You can also use the Android Emulator to run the app. (The ripple emulator runs in Chrome). The BLUE circle shows the platform you are targeting. Play around as you see fit.

Step 3: Our Project

I built this app a few weeks ago. It is called Mix Master 2000. It is a app that gets data and sends it to an Intel Edison via socket.io and Nodejs. We are not going to do that; however, we will be building the app portion. Here is a video of the app so you can get an idea of what we will be building.

We will be using Angluar.js as our Javascript framework and Bootstrap as our UI. Visual Studio has a great package manager called NuGet. To bring up the package manager, right click on your solution and choose Manage NuGet Packages. This is how we are going to install our frameworks. In the NuGet package manager, type in Angular in the search box. You will see a list of results that match Angular. Some are add-ons to Angular, some are extensions. We are looking for AngularJS Core, AngularJS Resource and AngualrJS Route. We do not want AngualrJS, that will give us more than we need. nuget

Angular Core is just that, core functionality needed to use AngularJS as a framework. This will provide the essential functionality for our project. AngularJS Route will provide the magic of url routing. This makes it easier to wire up the controllers, templates and the current URL to make the pages work. AngularJS Resource is all of our RESTful operations.

 

You may have noticed the AngularJS files got dumped into your Scripts folder, just create an angluar folder and drag and drop the scripts in there. We will try and keep things organized. Next lets get the AngularJS UI Bootstrap. This will allow us to utilize any Bootstrap methods without relying on jQuery. Great! Let’s lets code some HTML. Open up index.html. We need to add references to Angular and Bootstrap. Add the following lines right below the platform-overrides.js

You probably noticed that the AngularJS UI Bootstrap did not pull down any Bootstrap CSS. If you installed Bootstrap UI or any other Bootstrap package you would get the CSS but you would also get jQuery along with it. We don’t need jQuery and we might not even use all of the Bootstrap CSS. So we need to get the CSS but lets first decide on a design for our app.

Step 4: Design

You can find 100’s if not 1000’s of themes based on Bootstrap. Just enter “bootstrap themes” and see what comes back. For this app, I am looking for a left nav and center well. I found this theme that I will base my project after. I am really going to use a little of the structure and the CSS but it is a great starting point. Download that theme and copy over the CSS files into the css directory. We only need boostratp.css, style.css and style-responsive.css. Then add a reference to them in your HTML. I am not going to spend too much time on the design or HTML portion. I am going to pick and choose elements to use for my app. I just wanted to use the theme as a starting point for colors and layout options.

Step 5: MVC

We are still in the process of setting everything up for our app. We downloaded libraries that we needed and we got a theme. Now we need to start stubbing out our templates and views. If you are not familiar with the MVC methodology please read up on it to understand the concepts. AngularJS provides us a framework to build our MVC pattern on. The idea behind MVC or Model-View-Controller is to separate the logic from the view. The view will be our HTML, the controller will be our logic and the model represents our object or data. Before I jump into the MVC portion or talk about the next area of HTML code we need, lets add some files first. Trust me on this, lets just add these files and then everything will start to make sense. Create a directory called views and add 3 HTML files (blank) called occasions.html, drink-results.html, drink-detail.html. Then create another folder called templates and add 2 more blank HTML files called header.html, leftnav.html. Great. Now we can start configuring our app. Open up index.html and replace the following tag with this one.

That is an AngularJS directive that we added. This directive is used to flag the html element that Angular should consider to be the root element of our application. This gives application developers the freedom to tell Angular if the entire html page or only a portion of it should be treated as the Angular application. We have already added our AngularJS libraries, so we are good there. Next up is the templating aspect of AngularJS. Add the following lines where the existing <p> tag is, within the body.

After we told Angluar that this page will be our application, we can add all sorts of directives to take advantage of Angulars features. One is the ability to include files. That is what we are doing with the ng-include. The last portion of the HTML that we need to include are our views. We have the “main” template which is our index page. We are including a header and a nav. We need a location to include the view when it is rendered. Under the last include, add the following tag.

This will be our element that will get replaced with the views.

Step 6: View

We have our structure down, now lets start adding some HTML to our pages. This is just pure copy and paste right now. Header.html

Leftnav.html

Occasions.html

That will provide us our basics for now. We will come back and add our data binding elements later.

Step 7: The Controllers

We are almost ready to run our project to see what it looks like. We need to add our Angluar controllers and app initializations first. We will create 3 javascript files in the scripts directory. app.js

We are defining our app. We are calling it MixMaster and we are going to use 2 modules, routes and resources. We are also define our controllers class and services class.

This is our configuration for our routes. You can see when the app goes to the root, we need to load in the view occasions and use the controller called OccasionController. controller.js

In this file we aer defining our controllers. Right now we are just debugging, however we will change that to call a REST API and do some data cleansing.

Step 8: Run for a quick test

We are ready to run our project to see if everything is hooked up and working correctly. In the platform menu on the toolbar, select Windows x86 and hit run. Most likely your app blew up! error We need to configure the app to run with a valid certificate. To ensure that you can continue building your existing Cordova projects for Windows, please replace the expired certificate located at yourCordovaProject\res\native\windows\CordovaApp_TemporaryKey.pfx with a new one from here. Ensure that the downloaded file is renamed to CordovaApp_TemporaryKey.pfx Now run it and you should see the app structure!

Android Nexus 7

ripple-1

Apple iPad

ripple-2

Windows Simulator

ripple-3

Stay tuned for next article where we start with the controllers and our services. In the meantime, you can sign up for a developer key for the Absolut Drink Recipe Database at AbsolutDrinks.com. You will need the key for the next part.

Part Two

3 thoughts on “Building Cross Platform Apps with Visual Studio

  1. Hi,

    I was wondering if you have ever seen a new Cordova Project in Visual Studio 2015, not have the CSS and Scripts folder? Ever blog post or instructional page I’ve read has these two folders, and mine doesn’t.

    Thanks

    1. Carl

      I have not seen that. However I have installed and uninstalled a bunch of different versions of VS so I am not the best person to ask. There is a new update to VS 2015 community as well as ultimate. Try to download one of them.

  2. I am starting creating my first mobile app, but I am an .NET developer, I am familiar to Visual Studio very well. So, Apache Cordova developing with Visual Studio is my best choice at this time. I am trying to intently read your tutorial. Thank you so much.

Leave a Reply

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