Anthony Baker

“The Internet of Things” – Published on Event Magazine

2015-01-31T19:01:00.001+00:00

This is a short post to celebrate that one of my recent articles got published on Event Magazine!

The magazine has a digital and a print portfolio, including several different subscriptions. One of their top printed magazines is called “The Agenda”, which highlights the winners of its influence index and analyses the trends for the years ahead. I got my article published on page 61 of “The Agenda 2015” volume.

I would like to share a bit of background on the article subject, please bear with me!

Recently, I have been researching, discussing and promoting the concept of “Connected Spaces”, focusing on a different angle of the “Internet of Things”. As opposed to concentrate on the fact and goal of getting devices connected to the Internet, I like to think that device connectivity is just the medium of achieving something way more interesting: getting spaces and environments connected. The premise is simple, if spaces are truly connected, they can work harder for us, react and adapt appropriately according to the level of information that we willingly share with it, and give us a much more relevant, personal and useful experience, what we call a “contextual experience”.

See, I would like brands and companies to make environments work harder and better, and stop pushing us to look at the tiny mobile screen all the time. If the environment can reach through the connectivity and data flow of our devices, then we avoid having to use our device’s as the sole window of information, the only way to interact with brands. It is an inverse data flow point of view.

To put it simply, I’d like the space to deliver what I need when I need it, without having to look at my mobile to get it.

I’ll be exploring, writing and hopefully publishing a lot more on the subject this year. The article that Event Magazine kindly published for me, is the start of the topic, ahead of the big trend of connected devices and “The Internet of Things”. This is why the article itself is titled exactly like that.

Although the magazine is printed, I’m sharing a digital version of the article if you would like to read it. Of course, if you are really interested on the subject, I’d recommend that you get a subscription to Event Magazine.

If you want to read the digital version of the article, you can do so here.

Published Articles

2014-11-25T22:04:00.001+00:00

It has been quite a while since the last post on my blog. The truth is that I have been focusing my energies on lots of different things.

However, during this year I got a few articles published on The Guardian, Contagious and R/GA Blogs, so I wanted to share them here.

Check them out!

Google Outside: A Storytelling Platform (R/GA Tech Blog)

Is Context the Saviour of Marketing (The Guardian)

The Design Challenge of Wearables (The Guardian)

Beyond the Digital Screen (Contagious)

10 Steps to Effective Creative Prototyping for Agencies (The Guardian)

I hope I’ll get back to writing more here with the new year.

Operating system wasn't found ,try disconnecting drives and press cltr+alt+del to restart

2013-12-27T13:05:00.001+00:00

Annoying, isn’t it? I ran into this problem with an old Windows 7 tablet while performing a full restore of Windows 8. Although the Tablet was made for Windows 7, I was able to install the Windows 8 Consumer Preview when it came out.

The restore seemed to run just fine, but after restart the tablet run into this issue and I was unable to get it to start Windows again.

I knew I had to boot from a bootable USB image, but the tablet wound not use the USB to boot. Normally, you need would restart and get into the BIOS to change the boot device sequence. However, getting into and navigating the BIOS on a tablet without a keyboard is daunting at best.

I tried several button sequences to no avail. For the sake of reference, here’s how you would navigate the BIOS on a touch device without keyboard:

Windows Key held during boot: BIOS
Volume Up (up key): Navigate current page options
Volume Down (down key): Navigate current page options
Rotation Lock (enter / select key): Select option
Windows Key [In BIOS] (escape / return / go to exit page)
Hold Rotation Lock + Volume Up / Volume Down: Navigate tabs/pages

Frustrating enough, I was able to navigate the BIOS, see the boot sequence, but from the Tablet I wasn’t able to change the boot sequence order.

Additionally, there are also a couple of suggestions on how to booth into the recovery partition or connected UBS devices:

Hold Volume Up to start the System Recovery Partition
Hold Volume Up + Volume Down to change the booting device sequence

However, in my case, the System Recovery didn’t work (missing Windows files) and neither the combination to change the boot sequence.

Finally, I found out that at the bottom of the BIOS exit page, the available boot devices are listed. The connected USB key devices should be there (make sure the USB device is connected before powering on the tablet).

On that page, you can actually step on the USB device and select it with the Rotation Lock button. Doing this, I was able to force the tablet to boot into the USB device and get the Windows installation going.

I hope this saves you some time and helps you bringing your tablet to life again.

Happy Holidays!

2013-12-24T15:27:00.001+00:00

Quite a few months since the last written words here on the blog huh? It has been a hectic but amazing year. There are really exiting things coming our way, technology is moving fast!

Anyway, have a peaceful and fun holiday break, and an even better year. See you in 2014!

BUILD 2013–3D Printers Everywhere

2013-07-06T22:22:00.001+01:00

One of the most eye catching things I saw last week, at Microsoft’s BUILD 2013 conference in San Francisco, was how 3D Printing was everywhere.

As may know, Windows 8.1 brings native, seamless support for 3D printing. You will be able to send your 3D print files directly to a 3D printer just as you currently do with any 2D printer. This is actually amazing, considering that 3D printing is still in its early stages.

BUILD had one big room dedicated to device showcase and partner’s displays, and let me tell you, I have never seen so many different types of 3D printers and so many people into it under one room. Every one was super friendly and willing to share their print-outs, models, advise and services.

I thought that the best way to share this with you, was with as many pictures as possible, so check them out!

Up Mini 3D Printer – Up 3D USA

Cubify + Kinect Live Printed from a Kinect-scanned person!

Xbox Music Pass Available on the Web

2013-07-06T19:54:00.001+01:00

Just received an exciting notification from my Xbox Music service communicating that the Xbox Music Pass is now on the web, allowing you to stream millions of songs through your browser, from any device. Best of all? No annoying ads!

The web streaming service completes the overall cross-device offering. Now you can stream and sync up your music on your Xbox, Tablets, PCs, mobiles and the web, making it one of the most compelling music services in the market. Don’t believe me? Try it for your self. You can get a 30 days trial. I use several other services including Spotify, and although the social features are quite good, I often struggle to find some of my favourite music, specially if it comes from non-English markets.

You can explore albums, artists, and songs. You can easily browse and jump to specific names and the search works as expected. You have access to all your playlists, and you can create and modify them on the fly. Which means that you can setup your playlists before getting home, in preparation for your dinner party.

Interesting enough, at home, we are heavily using our Xbox as an entertainment and music system. It allows us to stream all the music we like, with big screen visualizations and a decent sound system. Sure, it is a subscription service, but so far, it is one of the best-value subscriptions I have.

Let me know your thoughts about it. And please share your experience with other services to have as a reference.

Unboxing the Acer Iconia W3

2013-07-06T18:51:00.001+01:00

Last week I had the opportunity to attend BUILD 2013 in San Francisco, where Microsoft was bold enough to offer not one, but two tablets to every BUILD attendee! This is a picture-post on the Acer Iconia W3 unboxing for your delight, one of the first small tablets running the full Windows Pro in an 8” tablet.

Acer Tablet and Keyboard

The Tablet

The Set

First Impressions

So far I have been enjoying the tablet. Most of all, the small factor makes it really comfortable in portrait mode, which is great for reading and browsing through content. The performance is relatively good, although not close to the Surface Pro.

The only downside I can clearly see at the moment is the poor screen resolution. The keyboard form factor is a bit weird, although might be convenient if you plan to write a lot on it. So far, I used as a more-portable tablet.

As I develop and deploy application, I hope to be able to tell you more about it. Cheers!

Unboxing the Surface Pro

2013-07-06T18:35:00.001+01:00

Surface Pro Tablet

Surface Type Cover

Comparing Surface Pro to Surface RT

The Surface Pro tablet is heavier and thicker than the Surface RT. However, the performance bust and the full Windows 8 capabilities are more than welcomed. The balance is great and the type cover makes it a great experience as a full, portable computer.

I’m already running Windows 8.1 on it, so I’ll keep you posted as I keep developing and experiencing the new OS and dev tools features.

BUILD 2013 – Windows Keynote Summary

2013-07-06T18:24:00.001+01:00

Last week was an exciting time in San Francisco, the way it can only be for the techies around the world. Microsoft hosted its annual developer conference for the third time since BUILD came to life, and this time it took place in San Francisco, home of Apple and Google.

There is a lot of information in the web already, and you can go straight to Channel 9 to watch the keynote and the developer sessions videos yourself. However, I wanted to share a short summary from the notes I took during the first day’s keynote, most of it related to Windows and Devices.

Windows 8.1

Windows 8.1 Preview is announced and made available for download.
Windows 8.1 allows users to boot straight to the desktop.
Windows 8.1 brings back the Start Button, which can take you to the Start Screen of to the Full List of Apps.
Windows 8.1 improves the multi-screen experience, allowing different screen. resolutions, and making the transitions between screens automatically.
Windows 8.1 comes with the Bing platform deeply integrated.
Small tablets introduced and encouraged.
Window 8.1 improves the portrait experience.
Windows 8.1 improves the keyboard gestures, making it easier to type in landscape and portrait.
Windows 8.1 comes with lots of app improvements.
Mail App improvements.
Bing enhancements.
Xbox Music redesigned.
Music playlists can be now generated from existing websites automatically.
Windows 8.1 enables home screen slide shows.
Windows 8.1 allows to open apps from lock screen without having to log in. Perfect for answer calls or seeing calendar appointments.
Swipe up from Start Screen to reveal full list of apps installed on the system.
Animated backgrounds in the start Screen.
SkyDrive deeply integrated within the OS to provide a seamless experience.
Hands-free camera gestures introduced. Specially handy for presentations.
Snap functionality now allows apps to take any size of the screen.
Multi-screen apps, effectively allowing multiple windows to run at the same time.
Power Point heavy enhancements, specially regarding transitions.
Windows 8.1 supports native 3D printing. Works like sending documents to any normal printer.

Visual Studio 2013

Visual Studio 2013 preview announced and available for download.
Lots of new tools for performance and energy consumption analysis.
Async debugging improved. Amazing feature set for developers.
Push Notifications embedded within the IDE. Incredibly easy to set up and test.

Windows Store

Windows Store redesigned to provide a more compelling and personalized experience.
Windows Store picks for each user. Personalized experience.
New generation of Windows apps will be available, including Flipboard, Facebook and NFL Fantasy Football.
App updates are automatic in Windows 8.1, removing the need for the user to be constantly updating apps, and ensuring developers that apps will always run the latest version.
More than 100K Windows Phone apps in the store.

Graphics and Gaming

WebGL now supported.
MPEG Dash supported.

DirectX Tiled Resources and high resolution games in Windows 8.1 and Xbox One.
Project Spark presented. Crowd goes wild!

Bing as a Platform

Bing now available as a platform for developers to create tailored search experiences based on the platform.
Bing as a platform offers semantic search for developers.
Maps with 3D support.
Scan, extract and translate functionality.
Voice commands.

That is a short, bullet-point style summary of the keynote. You can watch the full video online at Channel 9. Hopefully, I’ll be blogging as much as possible about the Windows 8.1 updates as I play more and more with them on my tablets.

See you soon!

MakerBot 3D Printing

2013-06-22T19:46:00.001+01:00

It turns out that one of the joys of my job is to be able to play and explore a lot of technologies and gadgets in a dedicated space, where I can research and create digital experiments.

Our most recent toy, is a brand new MakerBot Replication 2X 3D printer! An awesome piece of tech that allows you to recreate 3D models. There’s a lot to talk about 3D printing, but this being the first chance I have to actually have one, has been a really cool experience.

I already had to disassemble and clean the nozzles to change plastic colours from the extruders, a fun thing to do. I’ll hopefully be blogging a lot more and share what we can achieve with it in the short future. For now, enjoy some of the shots.

Getting Started with .NET Gadgeteer

2013-06-22T19:25:00.001+01:00

A few weeks ago I had the change to attend a very cool and different kind of workshop in East London. I joined the event on an early start with other fellow developers, but this time, to play around with software AND hardware. Welcome to the realm of hardware prototyping and smart gadgets creation with .NET Gadgeteer!

The even took place at Modern Jago, and was hosted by Dr Steven Johnston, from Microsoft Research. The workshop was a delight and everybody who attended was having a great deal of fun.

We first started by creating our very own multi-led Gadgeteer module. Each of us “cooked” a multi-led circuit having a multi-led light, which we then tested with a .NET Gadgeteer main board and a simple piece of software. If you though Open Source was relevant, Open Hardware is the real deal. Justin Wilson from IngenuityMicro was our mentor here, teaching us how to build and cook our module.

Next, Dr Johnston took the lead, and formally introduced us to .NET Gadgeteer. We were given starter kits and jump straight away to build our very own gadget, a touch-screen digital camera! Let me tell you, this is really cool stuff, in its easiest and most developer friendly way. Anyone who has done some fiddling with raw components, transistors and breadboard knows that making a gadget can be quite a challenge. Even working with Raspberry PI and Arduino, especially if you are trying to extend them and use them to create your own devices, can also be quite tricky.

.NET Gadgeteer is intended to make it really easy to create components. All modules already come with the required connectors, and you can even use extender modules to connect to other non-Gadgeteer modules. To give you an example, I was able to build my version of a fully functional touch-enabled digital camera in less that an hour, and with less than 10 lines of code! That is unbeatable!

I then extended it to use light sensors to trigger the pictures and even connected it to a mechanical motor just for the fun of it.

What is most compelling about .NET Gadgeteer is that because its solderless assembly and computer-aided design you can build things really fast. This makes it a truly rapid prototyping platform for small electronic devices. I have been enforcing rapid prototyping techniques for efficient software development at my work and with different multi-disciplinary teams for the past couple of years, and being able to apply this techniques to hardware prototyping open a huge potential for digital solutions in the short-term future.

.NET Gadgeteer is an open source/open hardware project that uses the Microsoft .NET Micro Framework. You can learn more at Gadgeteering.net.

Make sure to check out more about .NET Gadgeteer, and start building your own gadgets and becoming part of an exciting community!

iOS Application Distribution with TestFlight

2013-06-16T17:31:00.001+01:00

Mobile development is becoming more and more relevant in the current digital landscape. Mobile devices are now covering a wide range of demographics, price tags and features, allowing more and more people to have access to them.

For me, being able to understand mobile platforms is important, both from business and development perspectives. I have been working on several mobile projects from different perspectives, coding, leading and facilitating mobile solutions not only on the Windows Phone platform but also on iOS.

Distribution of mobile applications is a key topic when developing a mobile application. Being able to quickly compile, deploy and share builds is highly important, particularly when working on fast phased and collaborative prototyping projects.

On one of these recent projects we set up to use TestFlight as our distribution platform.

For those of us who develop applications, especially mobile applications, easy distribution is always a challenge. TestFlight is a brilliant tool to ease the pain and help us distribute iOS applications in a simple and straight forward way.

TestFlight is well known to iOS developers, and you should give it a try if you are developing iOS apps (promised for Android development soon).

It is a free platform intended for mobile developers, project managers and application testers. It is used to distribute beta and internal iOS applications to team members over-the-air. With it, you are able to upload and manage application builds, invite people, create and manage distribution lists and distribute applications in a simple and straight forward way. They also offer an SDK (currently for iOS only) which enables you to extend the metrics you can get from your apps.

Here is how to get started

Go to TestFlight’s website.
Sign up for an account (you should use an email address you use, or can access from your iOS device)
Create a team
Invite team members
You can create distribution lists and add team members to them
Add the team members' devices to their application build (this still has to be done via Apple's provisioning on the Developer Portal)
Upload your application to TestFlight (.ipa)
Distribute your app (with just a click) to everyone, or your selected lists or team members.
Track downloads, installs and more through your TestFlight dashboard.

When you distribute an application, TestFlight will send an email to the registered email addresses included. People will get an email with the app’s information and a link to download and install the application’s build to the device.

TestFlight also exposes an API that can be used to automate the build’s upload. This is quite handy to setup continuous deployment mechanisms, but that will be a topic for another post.

Upload a Build

From the dashboard you can select the 'Add a Build' button.
This will take you to the upload screen. Drag and drop your .ipa file or click on the page to browse for it.
Add the corresponding build notes.
Click Upload to upload your app build to TestFlight.
Afterwards you can select the people you want to have access to it.
Send them the build.

Make sure to also take a look at the Permissions and Distributions features, the dashboard and the help links.

Connecting device with account

When you connect your device a small configuration profile is installed on your device which does two things. First, it sends your device's unique identifier (UDID) to TestFlight allowing a developer to include your device in future builds. Second, it adds a bookmark (web clip) to your home screen giving you quick access to the TestFlight website and your application list. No device settings are changed. The bookmark is a technical requirement in order to make the UDID sending possible.

You can view and/or remove the profile and verify what it installs by going to Settings > General > Profiles and look under the Configuration Profiles Section. Check out this page if you want to dig deeper on the subject.

How to Upload a File from a Windows Phone App

2013-06-16T16:59:00.001+01:00

In this post I’ll share with you how to upload a files from a Windows Phone application to a web service via HTTP POST. I’ll be using ASP.NET MVC to create a simple service that allows you to post multi-part form data over HTTP, and a Windows Phone 8 project.

Surprisingly enough, seems to me that there are very few examples available on the web, about how to achieve such a basic feature. It might be because most apps will commonly use popular services like Facebook or Twitter, or established cloud services where APIs and examples exist. However, the moment you want to create your own service to upload photos or files from your mobile app, working coding samples start to mingle.

For the file upload web service, you can use WCF, Web API or ASP.NET MVC (or any other web services technology for that matter), as long as you can provide an endpoint that accepts an http POST request using multipart form data. I previously published a post on how to implement the upload service. Check it out for details and step-by-step instructions. You can also download the sample project here.

Let’s now create the Windows Phone 8 client application that will upload the file. In this case, we will create a simple application that will allow the user to pick a picture from the phone pictures library and upload it to the service.

Open Visual Studio and create a new empty Windows Phone 8 application. Modify the layout of the UI to provide a simple interface to choose a picture, display it and then upload it.

Next, let’s create the functionality to select an existing photo from the phone’s picture library. The code below uses the WP8 PhotoChooserTask to achieve exactly that. Notice that we are attaching an event handler to the completed event, so we know when the user chose the picture.

public partial class MainPage : PhoneApplicationPage
{
    // Image stream variables
    private MemoryStream photoStream;
    private string fileName;
    // PhotoChooserTask definition
    PhotoChooserTask photoChooserTask;
    // Constructor
    public MainPage()
    {
        InitializeComponent();
        // initializes the PhotoChooserTask
        photoChooserTask = new PhotoChooserTask();
        photoChooserTask.Completed += 
            new EventHandler<PhotoResult>(OnPhotoChooserTaskCompleted);
    }
    // Launches the photo chooser. 
    private void OnChoosePicture(object sender, 
                     System.Windows.Input.GestureEventArgs e)
    {
        photoChooserTask.Show();
    }
    // Called when an existing photo is chosen with the photo chooser.
    private void OnPhotoChooserTaskCompleted(object sender, PhotoResult e)
    {
        // Hide text messages
        txtError.Visibility = Visibility.Collapsed;
        txtMessage.Visibility = Visibility.Collapsed;
        // Make sure the PhotoChooserTask is resurning OK
        if (e.TaskResult == TaskResult.OK)
        {
            // initialize the result photo stream
            photoStream = new MemoryStream();
            // Save the stream result (copying the resulting stream)
            e.ChosenPhoto.CopyTo(photoStream);
            // save the original file name
            fileName = e.OriginalFileName;
            // display the chosen picture
            var bitmapImage = new BitmapImage();
            bitmapImage.SetSource(photoStream);
            imgSelectedImage.Source = bitmapImage;
            // enable the upload button
            btnUpload.IsEnabled = true;
        }
        else
        {
            // if result is not ok, make sure user can't upload
            btnUpload.IsEnabled = false;
        }
    }
    // calls the UploadFile method
    private void OnUpload(object sender, System.Windows.Input.GestureEventArgs e)
    {
        UploadFile();
    }
    // uploads the file
    private async void UploadFile()
    {
        try
        {
            // Make sure there is a picture selected
            if (photoStream != null)
            {
                // initialize the client
                // need to make sure the server accepts network IP-based
                // requests. 
                // ensure correct IP and correct port address
                var fileUploadUrl = @"http://<IPaddress>:<port>/fileupload";
                var client = new HttpClient();
                // Reset the photoStream position
                // If you don't reset the position, the content lenght
                // sent will be 0
                photoStream.Position = 0;
                // This is the postdata
                MultipartFormDataContent content = new MultipartFormDataContent();
                content.Add(new StreamContent(photoStream), "file", fileName);
                // upload the file sending the form info and ensure a result.
                // it will throw an exception if the service doesn't return 
                // a valid successful status code
                await client.PostAsync(fileUploadUrl, content)
                    .ContinueWith((postTask) =>
                    {
                        postTask.Result.EnsureSuccessStatusCode();
                    });
            }
            // Disable the Upload button
            btnUpload.IsEnabled = false;
            // reset the image control
            imgSelectedImage.Source = null;
            // Display the Uploaded message
            txtMessage.Visibility = Visibility.Visible;
        }
        catch
        {
            // Display the Uploaded message
            txtError.Visibility = Visibility.Visible;
        }
    }
}

When the picture is chosen, we want to display it on screen, and then enable the Upload button. We will want to notify the user when the image was successfully upload it, and if there was any error uploading it. Finally, we will clear the image on screen when it is successfully uploaded.

For the upload functionality, I’ll be using a package that allows to use the HttpClient on Windows Phone. To add the required DLLs, open the NuGet Package Manager and search for Microsoft.Net.HttpClient. Install the library on your project.

If you compile the project, you will get an error because of one of the package dependencies, which can only compile for x86 or ARM.

To fix this, just change the target platform to x86 in the configuration manager if you are deploying in the emulator, or ARM if you are deploying on your device.

Although the code is straight forward in terms of functionality, there are a few things to notice that could get you wasting a lot of time trying to solve. You have to pay attention to the way you work with streams. Once you read a stream, the position will change. You have to reset it to “0” when you want to read it again. Then, you need to initialize it if you want to replace it with a new photo stream.

You also need to configure your file upload web service if you want it to work locally. Either the Windows Phone 8 emulator or the device itself will appear as separate devices, so you will need to use your local machine IP address and configure your web server (in my case IIS Express) to accept HTTP requests, and also make sure the Windows Firewall is allowing the private or domain incoming requests on the web service assigned port.

Finally, you have to control the exception thrown by the HttpClient post task if the request is not successful. Remember that if you want to modify the UI from the request task, you will need to use a dispatcher, since the request is running on a non-UI thread.

Here are some screenshots of the running app. I tested the code running both in the Windows Phone 8 emulator and on the actual device.

Special thanks to my colleague Herber Madrigal who was kind enough to put together the initial proof of concept and point me into the right direction.

Make sure to read my initial post on how to implement the File Upload Web Service, and then afterwards, make sure to check my post on how to enable the Windows Phone 8 Emulator and your network devices to connect to your local web services. Without this, you won’t be able to test and debug your apps and services locally!

Finally, you can grab the complete sample code for the WP8 File Upload from my Github repo here.

How to Connect to Local Web Services from the Windows Phone 8 Emulator

2013-06-16T16:26:00.001+01:00

In this post I want to share some tips on how to enable locally hosted web services connectivity, so you can connect to them from the Windows Phone 8 emulator or any devices in your network.

The best way to demonstrate this is with a sample web service and a WP8 applications. For this post I’ll be using a File Upload MVC Service and a File Upload WP8 app. Check the articles on my blog post for implementation details and source code.

The code required for the service and the mobile app is actually quite straight forward. On the other hand, being able to connect to your local service from your emulator or device, and test locally, is actually tricky. This gave me quite a few hours of wall banging since although I had some code in place, I could not figure out how to test it. My good colleague Herber Madrigal gave me a hand, and put together a prove of concept for me.

It turned out, that there are a couple vital steps your need to take to be able to run your service so the emulator and devices can connect and use the service based on the local machine IP.

In WP8, the emulator configures itself as a separate device on the network, and so, it can’t connect to the development computer as localhost. Effectively, it acts as a separate device in your network.

Before you can connect successfully from the emulator or a device in the network, you will have to do two changes:

Configure the local web service and web server to accept connections from other devices on the network.
You have to configure the service in the WP8 app to connect to the service by using the IP address of the development computer on which the service is running.

Let’s start with the web service. You can use WCF, Web API or ASP.NET MVC (or any other web services technology for that matter), as long as you can provide an endpoint that accepts a HTTP request using multipart form data. I have previously published a post on how to implement the upload service. Check it out for details and step-by-step instructions. You can also download the sample project here.

Run the project and go to the /fileupload page. You should see the page displaying correctly, indicating that the request was received, but no file was sent.

If you want to test the upload, you can use a tool like Fiddler to emulate the file upload request, as I showed in my previous post.

Ok. Now that we have the service running, you need to do a couple of configuration tricks to allow the service to be reached from the Windows Phone emulator or device. You need to bind your application to your public IP address, so it can be reached by another machine, or in this case another virtual machine. Once you do that, you need to configure the Windows firewall to allow incoming connections, which are most commonly locked by default.

Remember that the Windows Phone emulator configures itself to run as a separate device on the network, so it can’t, by default, reach localhost!

Binding your IP in IIS Express

Find IIS Express configuration file, applicationhost.config, in the folder
%USERPROFILE%\Documents\IISExpress\config\
Duplicate the <binding> line, and replace “localhost” with your IP address (make sure to verify the port number).
Save the file.

At this point, you should be able to run the web service and on the browser, go to the /fileupload using your IP address and port instead of localhost. However, that works only from the browser.

Note: you might not be able to reach out the endpoint with your IP address. If that is the case, completing the following steps, and re-running the web service should fix it.

Allow Incoming Connections

If you try to reach the endpoint on your browser using the IP address, you will most likely get a Bad Request or Service Unavailable response, since up to this point the firewall is not allowing incoming connections.

Start a command prompt with administrative privileges.
Run the following command making sure to include your IP address and the correct app port:
netsh http add urlacl url=http://youripaddress:yourappport/ user=everyone
This just tells http.sys that it’s ok to talk to this url.
Add a rule in the Windows Firewall, allowing incoming connections to your app port for computers on your local subnet. To do so, run the following command including the correct port
netsh advfirewall firewall add rule name="IISExpressWeb" dir=in protocol=tcp localport=yourappport profile=private remoteip=localsubnet action=allow

If you open the Windows Firewall manager, you should be able to see the new rule added. You can change or delete the rule from here easily.

Now, you can go back to the service project in Visual Studio and run the project again. Now you should be able to reach the /test or /fileupload endpoint using your IP address.

The easiest way to test that the web service is now allowing network devices to connect is to go to the /fileupload page from the Windows Phone emulator or the device browser. If you are able to reach the page (and also debug the incoming request from Visual Studio) you are good to go.

You can easily test the Windows Firewall rule by going into the Firewall’s manager and disabling the rule. If after doing it, you refresh the page on the emulator’s browser, it won’t work.

To summarize, remember that you can actually enable your locally hosted web services to be reached by local apps running on the Windows Phone 8 emulator or any other devices in your network. To do this, you will need to create an IP binding on your web server configuration to allow the apps to use the local machine’s IP address instead of localhost. Then you need to create a rule to allow inbound HTTP requests to go through the Windows Firewall. Make sure to check the IP address of your local machine when testing to make sure is the right one (it can change if your provider uses dynamic IP assignment).

Here is a helpful MSDN article on how to configure local connectivity under different scenarios. Here is a summary for IIS Express.

Finally, if you want to put together or test the WP8 File Upload application, check my post on the subject for step-by-step details and source code.

Ray-Ban Ambermatic Wins 2013 One Show Interactive Merit Award

2013-06-15T14:42:00.001+01:00

A few weeks ago, the 2013 One Show Interactive Award winners were announced and I was pleased to know that among the 15 awards that R/GA got, the Ray-Ban Ambermatic project got the 2013 One Show Interactive Merit Award in the category of Mobile Applications/Sites/Consumer Goods.

I wrote a brief post about the project some time ago, which you can read here. The project was designed by my colleagues in the R/GA Stockholm office, and it was developed in London and New York. I was responsible for co-architecting the technical solution and building the camera installation and image processing, along with running and maintaining it.

R/GA has done quite well so far this year on several award ceremonies, and the 2013 One Show Interactive Awards are a nice addition. In fact, the agency was honoured as Interactive Agency of the Year at One Show Interactive.

I have high expectations for the upcoming Cannes Lions Awards!

How to Implement a File Upload RESTful Web Service with ASP.NET MVC

2013-06-02T20:51:00.001+01:00

In this post we will create a basic web service that allows clients to upload or post binary files. This is a common feature to allow your apps to upload and share photos from mobile apps or the like. We will use ASP.NET MVC to create the service, and demonstrate how simple it is.

Fire up Visual Studio and create a basic ASP.NET MVC application. For this sample Ill be using Visual Studio 2012 and ASP.NET MVC 4.0 on a Windows 8 development machine. Additionally, I’ll be using Fiddler 4 beta for testing the service.

Now, let’s create a simple controller with its view, so we can run and test the service. Create a new empty controller named TestController. We won’t be doing anything especial on it, we just need to have the endpoint and its view available.

Then, create a new view for the TestController. Within the Views folder, create a new folder named “Test” and then right click, select Add, and then View. Name the view index. Then modify the view’s code so we can differentiate it from the default views.

Compile and run the application to make sure everything is running so far. Since we don’t have a default home controller, when the page loads on the root URL, you will see an error page.

Once you add the “/test” route in the address bar, the app will resolve to our TestController and will display its view.

Ok, lets quickly code the file upload service so we have it ready. Create a new controller as we did before and name it FileUploadController.

The code for the file upload is as follows (base code courtesy of my good colleague Herber Madrigal):

  1: public class FileUploadController : Controller
  2: {
  3:     //
  4:     // GET: /FileUpload/
  5:     //[HttpPost]
  6:     public ActionResult Index()
  7:     {
  8:         var fileUploaded = false; 
  9: 
 10:         foreach (string upload in Request.Files)
 11:         {
 12:             if (!HasFile(Request.Files[upload]))
 13:                 continue;
 14: 
 15:             string path = Path.Combine(
 16:                           AppDomain.CurrentDomain.BaseDirectory, 
 17:                           "uploads");
 18:             string filename = Path.GetFileName(
 19:                               Request.Files[upload].FileName);
 20: 
 21:             if (!Directory.Exists(path))
 22:                 Directory.CreateDirectory(path);
 23: 
 24:             Request.Files[upload].SaveAs(Path.Combine(
 25:                                          path, 
 26:                                          filename));
 27: 
 28:             fileUploaded = true;
 29:         }
 30: 
 31:         this.ViewData.Add("uploaded", fileUploaded);
 32: 
 33:         return View();
 34:     }
 35: 
 36:     private static bool HasFile(HttpPostedFileBase file)
 37:     {
 38:         return (file != null && file.ContentLength > 0) ? true : false;
 39:     }
 40: 
 41: }

The service will try to retrieve the files being posted. It will verify that the file is present, and if so, it will save it within the “uploads” folder in the local machine, using the original file name. The request is of type HttpRequestBase, which contains a handy property called Files. The property gives you a collection of files that were uploaded by the client, in multipart MIME format. The collection is of type HttpFileCollection, and each item is of type HttpPostedFile. The code uses a helper function to determine if the request effectively has or not a file. Additionally we use a simple flag to communicate if a file was received and saved, so we can display a message in the view.

Let’s create a default view for the FileUploadController. Create a new FileUpload folder inside the Views folder, and then add a new view and name it index.

Let’s modify the view so we can display a meaningful message and and also indicate if a file was actually received and stored or not.

Let’s give it a quick test by running the app and executing the file upload action by entering “/fileupload” in the address bar. Remember that you can debug the actions by placing breakpoints into your controller’s code. The view should display the message “File received: False” since we are not submitting any file.

Now, let’s test the file upload. For this purpose, I’ll be using Fiddler. Run the app and go to the compose tab. Select Post as the HTTP method, enter the URL for the FileUpload action, and use the “Upload File” functionality to include a local file in the request (tip: you can go to the filters tab and check the option to track only traffic coming from localhost).

Once you execute the post, you should be able to debug the FileUpload action on the MVC project. Check to make sure you are receiving the correct file you posted with Fiddler and that that file content is not null.

After executing the HTTP request, you should see a 200 response in fiddler and the file being saved in the newly created “uploads” folder inside your MVC solution folder.

That all for now. You have a web service accepting file upload requests now. We were able to test that the service is running and responding, and also test an actual file upload using Fiddler. The next step is to create actual client apps that connect and upload to the service, which hopefully I’ll share soon.

You can download the sample application from my Github repo here.

Xbox One Revealed

2013-05-21T23:09:00.001+01:00

Today, Microsoft revealed the successor of the Xbox 360, the Xbox One. On a well coordinated and nicely phased presentation, the company revealed their vision for the future of consoles. It turns out, that Xbox One is an all-in-one entertainment system, aiming to unity TV and Movies, Gaming, Music, Internet, Exercise, you name it. It integrates the latest sensor technologies for a completely new version of the Kinect, a powerful computing power which also integrates cloud computing, promising to get only more powerful with time, an architecture focused on ecosystem integration, from home devices and second and third screen experiences, to Internet and social, cloud and beyond.

Here are some of the highlights:

Instant Power On
Fast Switching between Games, Movies, TV, Music, Web, Apps
Personalized TV with Smart TV Features
Skype is integrated
Multi-tasking with Snap View
New Kinect (Real Vision, Real Motion, Real Voice)
Brand New Controller improving the 360 version
SmartGlass Enhanced (Phone and Tablet Second Screen)
Redefined Xbox Live (Gold Membership Compatible)
Living Games Technology (leverages Cloud computing power)
Game Progress Sync
Smart Match to find the perfect gaming match around the world
Forza Motorsports 5 Sneak Peak and Exclusive
Quantum Break Exclusive
Impressive Performance and Graphics
NFL on Xbox (Interactive Experience and Exclusive Partnership)
Call of Duty Ghosts Exclusive Downloads
Web / Browser Integrated
Halo Action TV Series with Exclusives for Xbox

Cutting-edge Powerful Specs:

8 Corer (x86 processors)
HDMI Pass-Thru
8 GB of RAM
500 GB Hard Drive
Blue-ray Player
ESRAM/CPU/GPU Access for Top Performance
Power Consumption Efficiency

The Tenants:

Simple
Instant
Complete

Truly, the Xbox One is by far the most compelling entertainment and gaming console the industry has seen so far. No matter how loud Microsoft haters bark, this is a lot more powerful, integrated and engaging than any existing Smart TV technology, gaming console or entertainment system. Google TV and Apple TV have now a really strong, all-in-one competitor, which is in fact quite good, since it will push the home entertainment technologies far higher.

However, beating what the Xbox One is going to be hard. The machine specs are really powerful, and the cloud computing leverage just increases the potential. The Kinect sensor has already proven its capabilities, and by completely integrating it within the system and pushing the boundaries, Microsoft has achieved an impressive accuracy in terms of voice, gestures and facial recognition.

The console also integrates the WinRT kernel, and the application world, enhancing and empowering the Xbox Live community. I can only see benefits for Indi developers, and more opportunities for game and application developers along the road.

Smart Glass, higher connectivity specs and capabilities, Internet enabled at its core, deliver a true cross-device, cross-platform integrated home entertainment ecosystem, which no other company has been able to deliver, even if they have been in stronger positions.

Some people will complain about not being able to run their existing Xbox 360 games on the new platform, which I’m actually happy it is the case. Backward compatibility with existing games would have crippled the console. All in all, I believe this system to be a true integrated entertainment solution that people will really enjoy. It is aligned to the latest Windows technologies, and it will help to bring the ecosystem closer together.

You can find more on the Xbox One site.

WP8 Tip: Creating Live Tiles with Dynamic Images

2013-05-16T22:18:00.001+01:00

On a recent project we came to an issue with the Windows Phone application’s Live Tile. The application is used as a product’s specific interactive mobile experience. One of the requirements, is to be able to update the content to match a product, so when the app is installed, it displays only the desired product’s information.

In terms of app content, this is a common scenario and it can be approached by consuming local or external content, whether using the application’s isolated storage or web services.

However, Live Tiles are a different matter, in particular if you need to create the app’s Live Tile with images loaded dynamically. Today I spent some time looking for a way to solve the issue, and I want to share it with you.

In this sample, I’ll create a simple example which will use images stored in isolated storage. The first time the application runs, it will create the Live Tile using one of the tile templates using the loaded images. This approach allows you to change the tile images according to the desired content.

To start, create a new Windows Phone 8 application in Visual Studio. Remove the UI code that you won’t use, to keep the sample clean.

By default, the application will be created with a few default images for the tile. Notice the default images for the FlipCycle and the Iconic tile templates. If you check the windows phone application’s manifest (WMAppManifest.xml), you will notice the application’s default tile template and default images defined here.

Then, open the App.xaml.cs class and add the following method, which will be responsible for creating the actual Live Tile.

  1: /// <summary>
  2: /// create live tile if it was not created
  3: /// </summary>
  4: private void CreateLiveTile()
  5: {
  6:     // Assumes we are getting the image file names from either 
  7:     // a web service or local isolated storage
  8:     string smallImage = "FlipCycleTileSmall.png";
  9:     string mediumImageFront = "FlipCycleTileMedium.png";
 10:     string mediumImageBack = "FlipCycleTileMediumBack.png";
 11:     string title = "PRODUCT XYZ";
 12: 
 13:     // The way to load the tile images from isolated storage is to use the
 14:     // isostorage URI format. Images need to exist in the /Shared/ShellContent/ location.
 15:     // Assumes there is a data/asseet download and store mechanism making sure of this.
 16:     string baseIsoUri = "/Shared/ShellContent/";
 17: 
 18:     FlipTileData appTile = new FlipTileData();
 19:     appTile.Title = title;
 20:     appTile.Count = 9;
 21:     appTile.SmallBackgroundImage = new Uri("isostore:" + baseIsoUri + smallImage, UriKind.Absolute);
 22:     appTile.BackgroundImage = new Uri("isostore:" + baseIsoUri + mediumImageFront, UriKind.Absolute);
 23:     appTile.BackBackgroundImage = new Uri("isostore:" + baseIsoUri + mediumImageBack, UriKind.Absolute);
 24:     appTile.BackContent = "Dynamic Images";
 25: 
 26:     // find the tile object for the application tile that use the string used in the title contains string in it.
 27:     ShellTile TileToFind = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains(title.ToString()));
 28: 
 29:     if (TileToFind == null)
 30:     {
 31:         ShellTile.Create(new Uri(string.Format("/MainPage.xaml?id={0}", title), UriKind.Relative), appTile, true);
 32:     }
 33: }

Then, you need to call the method from your application initialization. You can add the call at the end of the InitializePhoneApplication() method in the App.xaml.cs file.

Before we give it a try, lets create a copy of the default tile images and change them using a tool like Photoshop to differentiate them.

Go back to Visual Studio and put a breakpoint on the CreateLiveTile method we created.

Select the emulator as the target device, and run the application.

Visual Studio will launch the WP8 emulator (the first time it will take a while, so keep the emulator open so following runs load faster)

You can debug step by step and make sure your Tile template is created correctly with all the data and images we want.

The first time the app runs, it will create the application’s Live Tile. Stop the debugger and check the emulator’s start screen. You should be see the tile, working and flipping between the front and back views.

you will notice that the tile is created, but no images are shown. This is because the app didn’t find the images in the location we specified. We are assuming that another mechanism will make sure to store the images in the right location before hand. For now, we just need to copy the assets to the app’s isolated storage location.

You can do this by using the Windows Phone Power Tools utility. The tool allows you to connect to a connected device or emulator and copy or delete files from the installed application’s isolated storage.

Click on the Isolated Storage section, and expand the Shared folder of your newly installed application.

Let’s add the files we created for the Tile.

Now, go to the emulator, and remove the tile from the home screen. Then run it again from Visual Studio.

Now, you should see the app’s tile created again, but this time using the modified images, which were loaded dynamically.

There you go. You are now able to create the Tile with images that were loaded dynamically. I’ll be soon publishing more tips about how to update existing main Live Tiles and how to work with Isolated Storage. You can download the sample project from my Github repo.

There’s already lots of people sharing information about it, so hopefully you will be able to find answers and different approaches. Check some of the following articles for more information:

WP Dev Center Tiles Overview
Live Tiles Templates Tutorial
Nokia Dev Live Tiles Guide

WP8 Tip: Using Manipulation Events to Animate a Clipping Mask

2013-05-13T21:38:00.001+01:00

This is another post of the clipping mask series that I published last month (here and here). In this post, I’ll show you one way you can control a clipping mask by using manipulation events triggered by another control. It will give the illusion that the clipping mask is being controlled by touch input.

Working with animations on Windows Phone is a lot of fun, but you need to keep in mind that performance might suffer if you abuse it. That is why it is always good to put together basic samples to find the best way to achieve animations.

My advice is to break down complex animations and user interactions into smaller and simpler prototypes. Then you can work the very basics of each one of them. This is the way I encourage my team to work, and we have had amazing results on highly effective and productive rapid prototyping approaches.

So, for this sample, I want to use the previous clipping mask we created, consisting of two rectangles. One of them (green), with a RectangleGeometry as clipping mask, with a TranslateTransform component. Again, by translating the mask’s transform on the Y axis, it reveals the underlying rectangle (blue) while moving up or down. Check out my post for a full explanation on this technique.

This time, instead of using triggers to run a storyboard animating the mask’s transform, I want to use touch events to control the mask’s movement. One way of doing it is to overlay a ScrollViewer control, which will give you scrolling (vertical and/or horizontal) behaviour out of the box. We will then use the ManipulationDelta event of the scroller to get notified of the corresponding manipulation events (triggered by touches).

Here’s the first simple rectangle, in XAML code.

  1: <Rectangle HorizontalAlignment="Center"
  2:            VerticalAlignment="Center"
  3:            Fill="Blue"
  4:            Height="300"
  5:            Width="100"/>

Here’s the second rectangle, with the clipping mask and the corresponding TranslateTransform, in XAML code.

  1:  <Rectangle HorizontalAlignment="Center"
  2:             VerticalAlignment="Center"
  3:             Fill="Green"
  4:             Height="300"
  5:             Width="100">
  6:     <Rectangle.Clip>
  7:         <RectangleGeometry Rect="0, 0, 100, 300">
  8:             <RectangleGeometry.Transform>
  9:                 <TranslateTransform x:Name="MaskTransform" 
 10:                                     Y="0" />
 11:             </RectangleGeometry.Transform>
 12:         </RectangleGeometry>
 13:     </Rectangle.Clip>
 14: </Rectangle>

Finally, here’s our new ScrollViewer element. Notice the event handler for the ManipulationDelta event, again defined in XAML code.

  1: <ScrollViewer x:Name="ScrollViewer"
  2:               ManipulationDelta="OnManipulationDelta" />

In this case, we will need to get the ManipulationDeltaEventArgs data and retrieve the Y axis translation from it. We will do this in code behind. Once we retrieve the translation, we can add it to our mask’s Y axis Translation.

  1: private void OnManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
  2: {
  3:     var manipulation = e.DeltaManipulation;
  4:     MaskTransform.Y += manipulation.Translation.Y;
  5: }

In the sample, I also included a text field at the bottom of the screen to see the different manipulation variables and keep track of the mask’s translation. I’m displaying them in code behind just after modifying the mask translation.

There you go, with just a few lines of code we were able to modify the non-interactive animated clipping mask into an interactive version, where you can control the animation with touch. This might seem too basic, but this is the foundation to achieve more complex animations.

I hope you like the sample and make use of it. You can download the sample code from my Github repo here.

How to Automate App Deployment in TeamCity

2013-05-06T15:02:00.001+01:00

This is a multi-part, step-by-step guide, on how to automate application deployment with TeamCity CI Server. This series is part of several other articles I have published about continuous integration.

In the related previous posts, I showed how to configure a build to compile a .NET solution and the run the project’s test suite. The part that we are missing is to have our CI server to automatically deploy our project so we can establish a continuous deployment mechanism too.

Deployment mechanisms will often depend on the platform your are developing and the type of application you need to distribute. For example, in iOS development you will most often use a third party distribution service to distribute your mobile app. On Windows Phone, you will need to go through the Windows Phone Marketplace. For desktop applications, you will probably want to generate installers and expose a way to securely download and install them. For web applications, you are most likely required to deploy the web app files on your web server.

Let’s continue with the initial web application we created in the previous articles. We will configure TeamCity to package and deploy our ASP.NET MVC application to our IIS web server.

Here is the breakdown of this series:

Make sure to check out my posts on troubleshooting MSBuild and MSTest. The easiest thing to do to avoid issues, is to have Visual Studio installed on your server. However, must of us prefer to have vanilla server setups and certainly having a full Visual Studio installation on your server is overkill (although you might be required to do so because of licensing agreements).

I hope this series of articles help you and save you time. As usual, feel free to leave your comments and share your experience. Nothing better than a good tech conversation!

How to Automate App Deployment in TeamCity (Part 3)

2013-05-06T14:54:00.001+01:00

Please notice that this is a multi-part, step-by-step guide, on how to automate application deployment in TeamCity CI Server. Links to Part 1 here and Part 2 here.

Part 3: Completing the Web Deploy Configuration

We now have our TeamCity deployment step configured in our CI Build project, and our website configuration created and working on IIS. However, the current files being deployed are not the right ones. We need to modify our existing project’s build script to add the required steps, which include web packaging, clean up, and deployment.

Here’s the steps you need to add to the script:

  1: <!-- Packages and copies the web application files required by a web publishing step -->
  2: <Target Name="DeployWeb" DependsOnTargets="DeleteBinFiles;Package;CopyWeb;CopyConfigs" />
  3:   
  4: <!-- Deletes all previous files from directory -->
  5: <Target Name="DeleteBinFiles">
  6:     <Message Text="Deleting bin files from $(DestinationPath)" />
  7:     <ItemGroup>
  8:   <FilesToDelete Include="$(DestinationPath)\**\*.*"/>
  9:     </ItemGroup>
 10:     <Delete Files="@(FilesToDelete)" />
 11: </Target>
 12:   
 13: <Target Name="Package">
 14:     <Message Text="Packaging project..." />
 15:     <MSBuild Projects="$(ProjectFile)" ContinueOnError="false" Targets="Package" Properties="Configuration=$(Configuration)" />
 16: </Target>
 17:  
 18: <Target Name="CopyWeb">
 19:     <Message Text="Copying project files from" />
 20:     <ItemGroup>
 21:   <PackagedFiles Include="$(PackagedProjectDir)\**\*.*"/>
 22:     </ItemGroup>
 23:     <Copy SourceFiles="@(PackagedFiles)" DestinationFolder="$(DestinationPath)\%(RecursiveDir)"/>
 24: </Target>
 25:   
 26: <Target Name="CopyConfigs">
 27:     <Message Text="Copying configuration files from $(PackagedProjectWebConfigDir) to $(DestinationPath)..." />
 28:     <ItemGroup>
 29:   <ConfigFiles Include="$(PackagedProjectWebConfigDir)\**\*.*"/>
 30:     </ItemGroup>
 31:     <Copy SourceFiles="@(ConfigFiles)" DestinationFolder="$(DestinationPath)\%(RecursiveDir)"/>
 32: </Target>

Before committing the changes, just make sure to go to TeamCity and modify the Target setting of the deploy step so it matches our “DeployWeb” target, instead of the “DeployApp” we entered before. Commit the build script changes and let’s see how it goes.

Now when I committed this the first time, I got errors on the Build process referring to the target “Package” not being found. Banged my head against the wall several times while trying to figure out the issue. I even started to play around with parameters for the MSBuild command line options, without success.

First, in VS2012 the package/deploy settings have changed. Now you need to create a publish package and enter the packaging details you want. Then you need to update the build script to introduce the new parameters. That done, I went ahead to create the package using MSBuild from the command line, which is what TeamCity will do behind the scenes.

Then, I got the same error from the command line. Many suggest is a .NET framework issue, or the lack of having MSDeploy installed correctly, however, I’m sure that my development machine has the required tools and correct configuration.

It turns out, that the problem is trying to compile the entire solution, instead of just the web site project. Check this helpful article about this kind of issue.

Working Local command (from the app project directory):
C:\Windows\Microsoft.NET\Framework\v4.0.30319\MSBuild.exe MvcApplication2.csproj /t:Package /p:PublishProfile=Package /p:Configuration=Release

Now, this worked locally, but unfortunately, I was getting the same error on the server. So now is time to make sure that the web deploy agent for VS2012 projects is actually installed on the server.

Finally, I figure out that the problem was that the required WebApp deploy targets were not available.

In one of the first related articles of the TeamCity series, we copied the webApplications folder from Visual Studio 11 but not the Web folder.

The solution is to copy the following folders to your server:
C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v11.0\Web
C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v11.0\WebApplications

Working Server side command:
C:\Windows\Microsoft.NET\Framework\v4.0.30319\MSBuild.exe MvcApplication2.csproj /t:Package /p:PublishProfile=Package /p:Configuration=Release

With the web deployment process now working, you can go ahead and run the entire Build process from TeamCity.

The Build Workflow should be successful and do the following:

1. Retrieve latest changes from source control repo.
2. Compile the entire solution, including unit test project.
3. Run the entire unit test suite.
4. Package and deploy the web application files into the IIS corresponding directory.

TeamCity Build Reports:

Compiled and Packaged Files:

Deployed Files:

Verifying site in IIS:

Running Web App:

There you go. We have completed a full continuous integration and continuous deployment setup on a Windows Server machine with TeamCity and IIS for an ASP.NET MVC 4.0 application.

I really hope this complete, detailed, step-by-step guide helps you as much as possible. Feel free to share your comments, issues, contributions or corrections.

You can download the complete MVC sample application, including the build script from my Github repo here.

Here you can find some helpful articles with related topics:

Web.config Transformation Using TeamCity
MSBuild and Deployable Packages

How to Automate App Deployment in TeamCity (Part 2)

2013-05-06T14:37:00.001+01:00

Please notice that this is a multi-part, step-by-step guide, on how to automate application deployment in TeamCity CI Server. You can find the Part 1 here.

Part 2: Configuring the Web Application in IIS7

To make the point and test what is the current outcome, we need to setup a web site in our IIS server. I’m using IIS7 for this scenario.

Let’s run through a basic setup so we can actually test.

1. Login into your server machine.
2. Run the IIS Manager.
3. Right click on Sites, and select Add New Website

4. Fill in the new website details as you need. In my case I’m naming the site “web.contoso.com”, letting IIS to create the corresponding application pool with the same name. Then enter the correct physical path, which is where the our deploy step is copying the files. I’m going to enter the same web site name as my domain name and leave it with the default IP Address and port.

5. Click ok. The new website should be added.
6. Click on the Content View on the center view to make sure the website directory is pointing to the right location and app files are there.

7. Now, since I don’t actually own that domain name, what I would do is configure a local domain setup. The site won’t be available publicly, but it will be available locally, so we can test.
8. To make the local domain work, you need to add a hosts record on the server machine. Open the hosts file, which is located at C:\Windows\System32\drivers\etc. Add the “web.contoso.com” record pointing to the localhost IP address:
127.0.0.1 web.contoso.com

9. Save the file. If Windows doesn’t allow you to save the file, you need to create a copy somewhere else, do the changes and then replace the original file with the modified one.
10. Now, on the IIS Manager, right click on the website you created, and select Manage Web Site/Browse to open the browser and browse to our web app.

11. You will get a 403 HTTP Forbidden error. Basically, there’s no app to serve the web request, and the server won’t allow contents to be listed.

If you want to actually test your web app files on your server real quick to make sure the IIS web site setup is correct, you can actually do a simple file system publish from Visual Studio to package and publish your app files.

Then just delete the files on the server’s web site folder and copy the ones you published in your local machine.

Ok, so now we know that our basic deploy step is just a basic file copying step. This setup might be useful for other kind of apps, where just copying the compiled files might be enough. However, for our web app, we need to actually do a proper web deploy.

Next Article: Part 3 – Completing the Web Deploy Configuration

How to Automate App Deployment in TeamCity (Part 1)

2013-05-06T14:27:00.001+01:00

Please notice that this is a multi-part, step-by-step guide, on how to automate application deployment in TeamCity CI Server.

Part 1: Setting Up the Deploy Step in TeamCity

The first step is to modify our build script on our project to include the new steps, which will enable TeamCity to perform the deployment process.

Let’s open our MVC application in Visual Studio.
Let’s modify the MSBuild script of our project to include the deploy steps. To start we are just going to add a basic deploy application step, which will just copy the application files to an specified location.
Save the script.

  1: <!-- Copies the application files to the corresponding directory -->
  2: <Target Name="DeployApp">
  3:     <Message Text="Copying application files..." />
  4:     <ItemGroup>
  5:         <ApplicationFiles Include="$(ApplicationOutputDirectory)\**\*.*" />
  6:     </ItemGroup>
  7:     <Copy SourceFiles="@(ApplicationFiles)" DestinationFolder="$(DestinationPath)\%(RecursiveDir)"/>
  8: </Target>
  9:

Before committing the changes, let’s add the deploy step to our project build configuration.

1. Login into your TeamCity administration portal.

2. Click on the Build Configuration you are going to modify by adding the new deploy step.

3. Click on the “Edit Configuration Settings” link at the top right corner, below the search box.

4. Once in the configuration settings page, click on the “Build Steps” section of the panel on the right.

5. Once in the build step sections, click on the “Add build step” below the listed steps, so we can add our new deploy step.

6. Since we will be using our MSBuild script, choose MSBuild as the runner type.
7. Enter the name of the step.
8. Enter the build script relative path.
9. Select the MSBuild version you are targeting.
10. Enter the Target variable (MSBuild script step name we just added – notice that you can actually target a parameter here, that you can then add in the parameters section, we will do that next time).

11. Click save.
12. You should be redirected to the steps overview and the new deploy step should have been added.

13. Click on the Build parameters section so we can enter the deploy parameters we need.

14. Click on the “Add new parameter” link at the top to add a new parameter.
15. The new parameter we need is the DestinationPath we specified in the MSBuild script. This is the path where the application files will be copied.

16. Enter the value, which should be the folder path were you want the application files to be copied. In my case I’m entering D:\inetpub\web.contoso.com.

17. Click save and make sure the new parameter was added correctly.

We are done configuring the new step. Let’s commit the changes to our project’s MSBuild script file and see if the TeamCity steps are executed correctly, and our app files deployed to the location we specified.

If you have problems where no files are being copied, review your build script top parameters, where paths are being defined. Make sure the “ApplicationOutputDirectory” parameter defined in the script and outputted in the build log actually exists on the server.

If everything was correct, you should see the build log messages for all the files copied and if you open the deploy path, you should see the application files there. Job done.

If you haven’t realized it to this point, let me point out something quite important. What we have done in this step is actually deploy the application files, which is not the same as deploying our web application. This means that although we are able to build, test and copy the application files, we are not publishing our web app so it can be viewable on our web server.

In the next part, we will set up the IIS website configuration we need to deploy our web application package.

Next Article: Part 2 – Configuring the Web Application in IIS7

How to Automate Unit Testing with TeamCity

2013-05-06T12:40:00.001+01:00

This is a multi-part, step-by-step guide, on how to automate software unit testing with TeamCity CI Server. This series is part of several other articles I have published about continuous integration.

TeamCity is one of the favourite CI platforms for professional developers. It is accessible to everyone, supports most of the latest technology stacks, it is user-friendly and relatively easy to configure.

In the last post about the subject, I shared a very detailed, step-by-step guide on how to automate your software builds with TeamCity on a remote server machine. Building your solutions on the server is just the first step. You need to setup a proper automated testing mechanism, and finally a robust automated deployment and distribution.

This post is a step-by-step guide on how to set up your automated testing step. We will be using TeamCity CI process as in the previous posts and ASP.NET MVC 4. For the unit testing framework, we will be using MSTest, Microsoft’s unit testing suit.

This is the breakdown of the guide:

The steps are more condensed, since I already covered a lot about TeamCity setups in previous articles. Hopefully, you are now familiar with the TeamCity interface, and are able to setup the configurations quicker.

I hope this series of articles help you and save you time. As usual, feel free to leave your comments and share your experience. Nothing better than a good tech conversation!

How to Automate Unit Testing with TeamCity (Part 3)

2013-05-06T12:34:00.001+01:00

Please notice that this is a multi-part, step-by-step guide, on how to automate builds in TeamCity CI Server. Follow the links for Part 1 and Part 2 of this series.

Part 3: Configuring Automated Testing

Now that we have our MVC application and our corresponding test project building successfully, we can proceed to create our TEST step, where TeamCity will run our tests. Let's add now the Test step (here is the link to TeamCity MSTest short documentation).

First, access the build configuration for the correct project (either the new MVC 2 app or the updated MVC app we created at the beginning).

Login into your TeamCity server administration portal.
Click on the Projects link, located in the top navigation menu. This will display the list of projects and the build status.
Click on the build configuration you are adding the new build step. This will take you to the build's overview page.
Once in the overview page, look for the "Edit Configuration Settings" on the top right corner, below the search box. Click on it to go to the build configuration page.
We are going to add a new build step, so click on the Build Step section on the right menu.
You will see the existing build steps for this configuration, which should display the "BUILD" step we created before to compile the solution. Now click on the "Add build step" to display the build step configuration wizard, were we will add the Test step.
Select MSTest from the Runner Type drop box.
Enter the step name, in this case "Test".
Then you need to specify the path to MSTest.exe. You can choose from the default system paths or specify the path yourself. Try with the defaults depending on the Visual Studio version you are using. If that doesn't work, then try specifying the path yourself. Again, if the MSTest.exe file is not available on your TeamCity server, you might need to copy it from a machine who has it.
Enter the list of assemblies that contain your tests. You can either add the relative path here, or you can actually enter a parameter, that we can then add in the build parameters, as we did for the build. The DLL file should be "MvcApplication2.Tests.dll" and should be located in the Big/Release folder of the compiled project. For now let's enter the name of the variable we will use. I used "%env.TestAssemblies%".
Leave the other spaces empty for now, and click the save button.

You will be taken to the list of build steps, and now the new "Test" step should be there. Now, we need to enter the values of the new parameters we need for the Test step.

Click on the Build Parameters section on the right panel.
Notice that TeamCity already added the parameters we specified in the new build step, and now we are required to enter the values.
Let's add first the path to the test binary file. Click on the edit link for the "env.TestAssemblies" parameter, and add the assembly relative path. In my case it is " web\MvcApplication2\MvcApplication2.Tests\bin\%env.Configuration%\MvcApplication2.Tests.dll " because of my solution folder structure. Notice that I'm using the %env.Configuration% which is actually another parameter that we can configure. For this build we already set that parameter to "Release".
Click save to add the new value.
Now do the same for the MSTest.exe path variable. Locate the app on the correct server path that matches the Visual Studio version. In my case, I'm using Visual Studio 2012. On my dev machine, the app is located in the following path: C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE
On my current TeamCity version, the app is not available, so I need to copy it. Copy the files if needed.
Now enter the correct server path to the MSBuild.test file and save the parameter value.
Now we are ready to test our test step.

You can actually run the build configuration manually from TeamCity, which is handy when creating and testing the configurations. Notice the "Run" button at the top right corner, below the search box. Let's run the configuration now.

Once you have you MSTest step setup and running, you can take advantage of TeamCity test views to get the most out of it.

The summary page will tell you if tests are executed or ignored:

The overview summary will also quickly tell you if tests passed or not, and the status of the build.

The output log of the build has detailed information for each step, including the run of the unit tests. If there are issues with the tests or the MSTest installation, you will see them here.

You can also check how long is each test taking.

On top of that, you can see detailed information for each particular test, which might help in more advanced scenarios.

If you have any issues running the unit tests, chances are that some dependency or binary associated with MSTest is not configured correctly.

Make sure to check my post on the subject. It will save you tons of time and wall-banging!