Tuesday, May 21, 2013

Xbox One Revealed

xbox_one_01

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

xbox_one_03

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

xbox_one_02

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.

xbox_one_05

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.

xbox_one_04

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.

Thursday, May 16, 2013

WP8 Tip: Creating Live Tiles with Dynamic Images

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.

image

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.

image

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.

image

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.

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

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

image

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)

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

image

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.


image      image


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.

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

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

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


image      image


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


image      image


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

Monday, May 13, 2013

WP8 Tip: Using Manipulation Events to Animate a Clipping Mask

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.

image    image    image

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.

image

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.

image

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.


image    image    image


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.

Monday, May 6, 2013

How to Automate App Deployment in TeamCity

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)

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.


TC_webdeploy_34


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.

TC_webdeploy_42

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

TC_webdeploy_43
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.

TC_webdeploy_44

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

TC_webdeploy_53
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:

TC_webdeploy_45

TC_webdeploy_46


Compiled and Packaged Files:

TC_webdeploy_47

TC_webdeploy_48
TC_webdeploy_49
Deployed Files:

TC_webdeploy_50
Verifying site in IIS:

TC_webdeploy_51
Running Web App:

TC_webdeploy_52
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)

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

TC_webdeploy_22

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.

TC_webdeploy_23

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.

TC_webdeploy_25

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

TC_webdeploy_24

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.

TC_webdeploy_26

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.

TC_webdeploy_27

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.

TC_webdeploy_32

TC_webdeploy_28

TC_webdeploy_29

TC_webdeploy_30

TC_webdeploy_31

TC_webdeploy_39

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

TC_webdeploy_33

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