Sunday, December 30, 2012

Getting Started with Python

I have embarked on a quest to learn Python. I actually want to learn the language for several reasons. Most of all, I just want to learn a new language that I don’t know anything about. Second, I have lots of colleagues promoting it, so it makes sense to learn something I know I can get help from people I work with and see often. Third, I believe that learning more languages will make me a better technologist and more objective towards programming in general.

If you are on the same train of thought, and you want to learn a new programming language to add it to your skills, Python could be a great choice. If you are up for it, I hope that you will find something useful here, or at least, a place to have a conversation on the subject.

According to the official documentation (lets get academic, shall we), Python is “an interpreted, interactive object-oriented programming language suitable (amongst other uses) for distributed application development, scripting, numeric computing and system testing”.

image

So, here we go. I’m using the Khan Academy’s Windows 8 application. It allows me to browse Computer Sciences courses (which are just a few at the moment and most of them using Python). Randomly choose a course video (lets starts with the basics first) and jump right in.

After watching a few videos, and once I felt ready to tackle some basic Python (for some reason I keep typing “Pythin” every time). Next step was to setup my Python coding environment on my Windows 8 PC.

image

image

image

The first thing (and I got this wrong the first time since I installed the IDE first, and of course, it didn’t work), you need to install Python itself. You can get the Windows installer here. I chose to install Python 3.3 since is the newest stable version available. There is also IronPython, which is Python running on .NET, but I’ll leave that for later.

image

Once Python is installed, you need your IDE. For now, I’m using PyScripter as my Python IDE.

image

Notice that you might get an error preventing you from running the IDE if you installed the x64 version. The error can occur also if you haven’t installed Python first. If that is the case, make sure you have installed Python. If the error still shows up, just try the x86 version of PyScripter and you should be good to go.

That’s it. You are really to start coding you first Python scripts and programs. I’ll keep posting about the subject and force myself to learn as quickly as possible. Here’s the official tutorial and a list of Python books to keep you busy.

image

Please feel free to leave your comments, suggestions, ideas or just to start a conversation. Always happy to exchange ideas with fellow technologists.

Saturday, December 29, 2012

Playing your Music in Windows 8 and Windows RT

Music playback in the Windows ecosystem is actually quite confusing. There were many changes on the overall offering and applications used to play your local music and stream music from online services. Zune is supposed to be gone in Windows 8 (it certainly is in Windows RT, but I’m still able to run it in desktop mode in Windows 8). Now we have Xbox music, which is an “evolution” of the Xbox Hub Application/Service converging with Windows 8, Windows RT and Windows Phone.

Now, we know it is a transitioning time for Windows, there are doing their best to get it right and think about how people might be using computers and devices in the next decade, but sometimes, you can’t just understand why the damn thing is so freaking confusing.

So, for starters, here’s how you add your beloved music collection to the Windows Store Music app (I mean, adding your local mp3 collection to the app, so you can play your songs in your local machine).

  1. Go to desktop mode by selecting the Desktop tile at the Windows 8/RT Start screen.
  2. Open Windows Explorer.
  3. Under Libraries on the left menu, select Music.
  4. Select Manage tab on the ribbon.
  5. Select Manage Library on the tab at the top.
  6. Select the Add button.
  7. Select the folder where your music is stored, and then select Include Folder.

In my case, I have the default Windows “My Music” folder inside the Music Library. I included my local music collection folder at the same level. Once this is done, you can go to your Start screen and run the Music app. All your local music should be listed there.

image

Make sure to check the settings on the Music app (swipe from the right border into the screen to bring the Charms Bar and then select Settings, or move your mouse to the top or bottom right corners of the screen). The idea is to keep all your devices in sync, making sure that if you buy a song from Xbox Music service, all devices download the song.

I’ll try to keep posting more about the Music Windows ecosystem, as soon as I can figure out all this crazy stuff! Here is a link to the Windows site if you feel brave enough to take a look.

Friday, December 28, 2012

Windows 8 Blue Screen of Death

Well, it has happened in the past, for “digital eons”, and unfortunately, it will continue to happen. Today I got my first Blue Screen of Death on my recently Windows 8 migrated PC. Take a look at the new face of one of the most hated famous error messages.

WP_20121228_002

Truth to be said, the message looks way nicer, and more helpful than the previous attempts in older versions of Windows. I got it while writing a post for my casual hobbies blog where I was working with lots of images. I started to see a few hiccups while searching and importing images from different sources and then I got it.

The message will appear while Windows attempts to gather “useful error information”. You can see the process progress while reading some information. At this point, you wonder if the machine will send the information without further information. It doesn’t. Windows will restart the machine, and once you log back in, then you will see a popup Windows 8 style message asking you if you want to send the information to Microsoft about the error. After you chose what it should do, you can run the apps you had running before, and with a little luck, you should be able to recover all your work.

It is a shame that such errors can still happen. I’m aware of the massive effort from the Windows division to get Windows 8 out of the door. The OS is a really good attempt to provide a touch-first platform that allows developers, designers, but most of all, users, to have a compelling content-first, touch enabled multi-screen experience.

However, the OS is not there yet. Microsoft products will continue to walk their convergence road and align into a unique cross-device Windows ecosystem. There are lots of things to fix, improve and build, and Windows 8 has a lot to demonstrate in the upcoming months and years. Let’s see how it goes !

Never Stop Travelling

Travelling is one of my fondest and most appreciated hobbies. I started a bit old since it wasn’t until my 19th birthday that I was able to go on a trip to another country without my parents or family. Since then, I have always loved travelling, to visit new countries, experience new cultures, and at the end of the day, hear people telling their lives.

Now travelling is tricky. It is expensive and some times dangerous. It can be exhausting and can make you sick. However, it can give you so much, that it is absolutely worth it. The memories from travelling around the world is one of the things I hope I can remember until the day I die.

Travel is just another of my many hobbies, along with miniature painting, bass playing, writing, painting, cooking, playing with nunchakus and a few other that I haven’t discovered yet.

I wanted to share some nice pictures from my travels, and at the same time keep a light journal of the places I have travel every year. Hopefully it will inspire you to go travelling yourself or maybe share some stories, and at the same time, it will help me keep a handy and easy to access journal of my travels.

So, if you are curious, and want to share some travelling with me (and take a break from coding in the meantime), check out my hobbies corner and see where I have been on the last couple of years.

My 2011 Travel List
My 2012 Travel List

Thursday, December 27, 2012

My Favourite 2012 Games

Just before the year finishes, let’s make a list of my game’s picks for this 2012. Now, don’t get cross at me if your favourite game didn’t make it. This is my list, and it might be flawed and not perfect. However, because all those times that the games were with me this year, they are worth at least a mention, in this my geeky place.

My Top Xbox Games

skyrim_boxartlg 
Skyrim

forza_boxartlg
Forza Horizon

skate_boxartlg
Skate 3

My Top PC Games

diablo3
Diablo III

gtaiv
Grand Theft Auto IV

sc2
StartCarft 2

My Top Windows Phone / Windows Store Games

radiant_defense
Radiant Defense

ilomilo
ilomilo

contre_jour
Contre Jour

cut_the_rope
Cut the Rope

evac
Evac

Happy gaming!

Sunday, December 23, 2012

Setting up your Home Recording Studio on Windows 8

I have been playing bass for a few years now, and over the years I have used different ways to record and produce bass lines, including little pod boxes, software tools and external interfaces and sound card. However, since I moved to the UK I have been using the bare minimum, a Korg Pandora PX5D and my laptop.

I have done some research along the way, and I got some good recommendations from my friends and colleagues. Now, I have my own home recording studio running on Windows 8 to record and produce my music.

Want to Setup Your Own?

You are free to buy whatever gear you might need, also keeping in mind your instrument’s needs. You will certainly need a computer and an audio interface. The audio interface is the piece that you should push for a good investment. An interface in the $200 to $300 is worth it. You will need Windows 8 Pro and a laptop that can run it easily. Make sure the audio interface you get can be connected to your laptop, check the USB, FireWire and Power specifications. Also try to get a good pair of headphones and if you want, a good pair of professional speakers. Not counting the computer, you should be able to get all that from a decent brand with about  $500. Of course you can go up or down a little and get just what you need.

WP_20121223_004

The Gear

  1. Alienware M15x
  2. Windows 8 PRO
  3. Focusrite Saffire PRO 24 DSP (FireWire, 6pin to 4pin cable)
  4. Saffire MixControl 3.1
  5. Ableton Live 8 (Lite)
  6. Sony MDR-7506 Professional Headphones
  7. Guerrilla Home Recording, a book by Karl Coryat
  8. Kubicki Factor 5 Bass

WP_20121223_005

The Setup

  1. Install interface driver (do not connect the interface before).
  2. Install the interface software.
  3. Install the recording software.
  4. Install effects and plugin libraries if wanted.
  5. Turn off the computer (FireWire).
  6. Connect the interface (FireWire).
  7. Turn on the interface.
  8. Turn on your computer.
  9. Go to the computer settings, and make sure the interface is selected as the input and output audio device.
  10. Run the interface software to make the audio mix. You will select your input channel, so you can get the input signal, and also your output channel so you can hear the audio (input signal plus any audio coming from the computer).
  11. Connect your instrument to the correct audio input in your interface if you haven’t already.
  12. At this point, you should be able to hear the instrument or microphone audio coming from the interface. Adjust the volume and any other interface specific settings you need until you are satisfied.
  13. Now run the recording software. Make sure that the ASIO Driver is selected as the audio driver (Windows only). Check the input and output settings.
  14. Create a new set and add an audio record. Set it so it records the input from the desired interface channel. You should now be able to record and playback your instrument audio.
  15. Record a song, save it and play it back. Check out the export settings on your recording software and see what suits you best.

And there you have it. It seems like a lot, but is actually really simple steps, once you have the hardware and the software tools available. There’s a good amount of tutorials and communities associated with the most popular software tools, so make sure to check them out.

image

And what about Windows 8? Well, that is the beauty of it. There isn’t anything special you need to do to make it work in Windows 8. You will need to search and pin the new tools to your start screen, taskbar or desktop for easy access. Apart from that, everything works the same, and it actually works straight away and without having to fiddle with Windows settings. 

I’ll try to keep posting stuff related to the experience. Is nice to have both the music and gadget/techy part together, and having a good quality studio definitely helps me to polish my playing and my sound, and eventually produce stuff I can share with other musicians.

If you want to know specifics about my setup and configuration or share your own experience and tips, feel free to drop a line in the comments section. 

R/GA’s Make Day 2: Make it Work

Make Day idea is simple: spend a day or two making whatever you want. R/GA’s take is to allow everybody in the office to form teams and work on cool ideas without the pressure and politics of client work. Basically, make cool stuff with your mates, collaborate, create and deliver, and why not, show off your skills a bit!

This is the second Make Day R/GA executes. Lets take a quick look at what we did last year, and then move own to this year’s project.

Last Year’s Make Day

Last year R/GA, the company I’m working with at the moment, made their first Make Day event. It was full of creative, crazy and not so crazy ideas, many of them published on the web. You can also take a look at last year’s pictures. Below I have included the video of last year’s event, if you care to watch it.

2011 R/GA’s Make Day Official Video

The R/GA Colleague Locator

The first year it was about experimenting with the new technologies like Windows Phone and Windows 8, which at the time were in early development and without much short-term client potential. Although I was busy dealing with client projects, I managed to put together a multi-tier RESTful services backend on a dedicated server and a Windows Store application running on a tablet device.

rgamakeday2011_01

This Year

 

WP_20121213_011

This year however, R/GA wanted to take advantage of the event and push people to build cool stuff that could potentially help the business. There were five inspiration briefs aligned with some of the current or potential work to come, so people could give a bit more context to the ideas. Additionally, one of this year’s predominant criteria, was the “finish-ness” of the project.

Make Day 2012 was a challenge for me. I had been extremely busy working on a couple of big retail projects. I had been travelling around the world quite a lot, and I had a couple of days of in Paris before the event to celebrate my anniversary with my wife. This left me with no time at all to prepare ideas or train on any of the technologies and concepts I was interested in. Furthermore, I was sure I was just going to have a day to work on the project, since this time we only had a full day and then a few hours next day to prepare the presentation.

team

Luckily, my friend and colleague Danny Lee (.net developer, fifth from left; who, by the way, just started his own technical blog after months of pushing him to do so!) had a great idea of using Windows 8 as a platform to create a non-linear simple presentation tool. The idea was on brief (kind of a “kill PowerPoint” inspiration), and along with our colleague, Julia Werth (experience designer, fourth from left), they put the concept together and starting developing the prototype. They also recruited Rob (designer, far left), Johanna (researcher, second from left), Charlotte (copywriter, third from left).

The Make Day Project

Danny and Julia put together the base concept, which was founded on the following goals:

  1. Create a useful and compelling way to use secondary screens on presentations.
  2. Create a non-linear presentation tool that enriches presentations and conversations with clients.

image

The proposed solution was to separate the deck’s thinking from the supporting content over two screens. The supporting content would be triggered from the first screen (controller), and played full screen on the second screen. The controller view would be implemented using the modern Windows grid structure. The deck’s thinking would then take most of the space in the form of larger tiles, leaving space to smaller, supporting content tiles on the side.

WinRT’s native horizontal scrolling pattern works great with the grid layout, allowing the presenter to naturally flow through the presentation and even go back and forward at any time, and any point, with just the slide of a finger. At the same time, people using second screens would be able to then see specific images, diagrams, documents or websites within the second screen application.

By Make Day, the team had already advanced on the concept. The experience design was in place and designs were on their way. We were going to create a few cool presentations using the tool that we were building at the same time. 

Controller App

Danny was responsible for the WinRT controller app, and during the rest of the day, he completed the listing view, the basic deck builder, and the player. The app was fluid, simple and intuitive to use. It provides a clean deck template, allows online links of pages, videos and images to be added to the deck and is simple to play and navigate in a flexible way.

presentation-chooser

The list view presents a tile-like library with the decks that have been created. Users can add new decks from the app bar.

presentation-editor

The deck builder view allows to manage the deck. Here you enter the deck’s information and add slides (or histories as I see them).

slide-editor

Each slide can be then edited. Users can enter the main message and add the supporting content. The additional content can be images, video links or web links.

player

Once a deck is saved, it can be played. Now, playing a deck would need to send the supporting content to all the other additional screens, so here’s where integration with the second screen comes into play.

Second Screen App

I had one day to put together the second screen app. Now, the second app required a way to connect, even remotely and over the Internet, to the main presenter, so all connected screens could receive the supporting content in real time. Not an easy task with just one day, but I was confident, after all. Doing this kind of stuff is actually quite fun!

architecture

For the services infrastructure, I wanted to use the Windows Azure Mobile Services. I have been prototyping a few apps using them, and I knew it was an effective and easy-to-setup way to provide connectivity between the apps. The WinRT app had to work on all Windows 8 and Windows RT tablets, but it was going to be a simple full screen app. Additionally, to be able to build and test the app, I needed to have a mock of the controller to save and play the decks.

Using the Cloud

I designed the data structures to be stored in the cloud, which both apps would use to store and retrieve the deck’s data and status. Mobile Services gives you simple, connected, SQL database capabilities. You can create tables, manage the database and perform queries easily over the Internet. Once the services are up and running you can start connecting and using them. On the portal you will be able to get the usage stats and the general info.

cloud_service_01

I created the corresponding instances, and in no time, I had my cloud storage and service endpoints ready to go. The beauty is that both the storage and the services can be scaled up or down elastically at any time. Services can easily be consumed by Windows, Android and iOS devices and the web through your own RESTful data endpoints. Windows Azure also gives you advanced SQL management capabilities, very much like a local SQL database.

cloud_service_02

I was tempted to use ASP.NET Web API for the cloud services, since is a more robust MVC-based framework to build modern RESTful platform, however Mobile Services was easier to setup up and up to the task.

Building the WinRT App

viewer-login

Once the services were created, I quickly implemented the .NET solution to contain both the mock controller app, and the second screen app. The mock app was quick since I didn’t care about UI. I coded the functionality to create and store a deck in the cloud, display the list of decks and update an existing deck. I took care to implement the mock up in an efficient way, so I could then ported to the real controller app and integrate the code quickly and easily.

For the Viewer Application, I created the connect view, which allows the user to enter a friendly deck code to connect to the presentation through the cloud. If no deck with the given code is found, the app tells the user to enter another code. If the deck record is found, the app retrieves its information and transitions to the viewer state. All this is done through the cloud services by querying the corresponding table. 

viewer-waiting

Once the app is connected, it waits for content from the controller app.When the presenter taps into a supporting content tile, the app then notifies the cloud of the content to play and persists the information for all clients to get.

WP_20121213_010

For this scenario, I had the viewer app querying the corresponding deck record to retrieve the playback status and the supporting content data if available. It worth mentioning that there are several ways to do this. At the beginning I wanted to use the Push Notification Services, but it turns out that you need to have your app submitted in the marketplace in order to use them. Using the ASP.NET Web API could also have given me other options. However, just to keep it simple and functional, I had the timers. Each client connected to the deck record will then be querying the cloud to see if there is content to be displayed. This approach carries small delays, although they were generally less than half a second.

viewer-content

The presenter can clear the second screens at any time by pressing a button from the app bar. At the same time, any supporting content from any slide on the deck can be broadcasted to all clients, allowing viewers to get a better view and have rich supporting content along the main presentation.

The Awards

WP_20121214_001

We presented our project along with more than a dozen teams. There was a lot to see, from touch-enabled fruit controller games and crazy surrealistic videos to a  Japanese-talking ping pong table. Most of the projects were quite off brief, although some of us tried to build something with more client-work potential. There was another team inspired by the same brief as ours, but they focused on a web app for doing remote presentations through the cloud.

WP_20121214_004

All in all, we didn’t win the first prize (which of course went to the talking ping pong table as we all knew), but we got a special recognition prize during our Christmas Party at the London Zoo. Our project also got some comments from the judges including “amazing technology execution” and “brilliant tech”, along with “the longest presentation”!

It was a good Make Day in fact. Even with so little time, we were able to create a fully functional and polished system to create, manage and present multi-screen enabled, non-linear presentations. The system works using the power and scalability of the cloud, while being able to run on any Windows 8 or Windows RT machine. For the presentation we used Intel Lenovo laptops, a Samsung Slate 7 Windows 8 tablet, an Asus Intel tablet, an Asus Vivo Tab RT and a Microsoft Surface RT tablet. All of them in sync, displaying the supporting content of the main presentation, while we were in fact, presenting our project. Not bad, I would say.

I’m also quite happy to have some many people on board with Windows 8 within the company. When I joined R/GA, .NET was seen as something to be used only for custom CMS or backend, data driven platforms when customers had already a .NET infrastructure. I quickly introduced the advantages of developing .NET frontend applications with WPF, Silverlight, PixelSense (formerly Surface 2.0) and Windows Phone. The new approach quickly overtook flash development (thanks mostly to Apple banning flash on iOS devices and the anti-plugin campaign on the web). As soon as Windows 8 was announced, I started to introduce colleagues and team members to the new platform.

R/GA 2011 was our first attempt to showcase a frontend .NET system to the company. We built a .NET Colleague Locator system using Silverlight, Windows Phone and Windows 8, using RESTful .NET services. This year, we deliver a fully functional WinRT system for Windows 8 and Windows RT that allows users to create, edit and present non-linear decks on a multi-screen environment. Both were done in an amazing short time, and both worked right off the bat. The important bit here is how quickly you can build services and applications when using the .NET platform. Hopefully, the managers and executives in the company are starting to realize the renovated power of the Windows ecosystem and the underlying technologies.

What’s Next

Hopefully the company will see the potential of our project and will give us sometime to enhanced and extend it. Among the stuff that I would like to implement to make it better will be to add local network capabilities, so content can be transmitted faster and in a private secure manner within the private local network. Protocols such as DNLA for streaming content to DNLA enabled devices will be cool. Sockets could also be used to broadcast content to connected local clients. I would also like to explore the use of SignalR and Web API to build more robust multi-purpose real-time services. I would also like to implement viewer input capabilities, so users can add comments, ask questions and include annotations to the presentation from the second screen app. Finally, I would like to build the Windows Phone clients (7.5, 7.8 and 8) so users can connect with their phones, and just for the fun of it, create an ASP.NET MVC 4.0 web client. I might even consider bringing on-board an Android and an iOS devs to create native clients for those platforms. All in all, it couldn’t be more than a couple of days more, right?

Maker is the new Role

Make Day has been successful event. Is clear that we work with talented people, and that we are capable of putting together teams and come up with our own ideas and projects to challenge and push the boundaries of what we can do.

It is worth mentioning that technical skills clearly make the difference. Projects with just managers, producers or designers are not capable of making, and is generally the tech makers who bring ideas to “life”. The technical folks are, or at least should, step up from a creative and idea execution standpoint.

I believe that tech-savvy people will become much more creative in the next following years, and creative and technical makers will eventually overtake more administrative roles. This is the natural evolution in our industry. We, as the true makers of digital experiences, need to take a more predominant role in their execution, from the sells pitch, to the idea creation, through the creative process, to the execution and delivery. Make Day is a great practical example of this reality.

Share your Thoughts!

Hope you like the project and the execution. I’ll post the final video as soon as is published by the company.

Please let me know your thoughts and comments. I’m also happy to get in touch and help you implement a Make Day event in your own company.

Saturday, December 22, 2012

Running GTA IV on Windows 8

I recently upgraded my main machine to Windows 8. My laptop is a powerful gamer and development machine, an Alienware M15x. Although its main usage is for development and research, I definitely enjoy using its power to play PC games like Diablo III, StartCraft II and Grand Theft Auto IV.
image
I started playing Grand Theft Auto IV through Steam on Windows 7. Previously, the game was running just fine, but after the Windows 8 upgrade I started to have problems. I was able to run the Steam client, see GTA IV in my games library and even run the game itself. However, after starting the game by clicking the “Play” option in the main menu, a message was being displayed saying that I was not logged in. The options presented where to sign in (Enter) or to skip it (ESC). However, no matter the option I chose, the game got stuck in that screen, not allowing me to go back, play or quit the game.
I was sure that the Games for Windows Marketplace client was running and that I was logged in with the correct account, but the game kept telling me that I was not signed in. After some research online, including Steam and RockStar forums, posting questions and waiting for answers, I found the right answer.
GTAIV_02
The symptoms
  1. Run Steam
  2. Login into steam
  3. Choose GTA IV from Steam’s Game Library
  4. Run GTA IV
  5. Login into Social Club with your Microsoft Account
  6. GTA IV intro is displayed
  7. GTA IV start screen is displayed (Start, Options, Live, Live Marketplace, etc)
  8. Select Start to run GTA IV Home Screen.
  9. GTA IV home screen is displayed (Play GTA IV, Play GTA: EFLC, Quit)
  10. Click on Play GTA IV
  11. Screen is displayed saying that I'm not logged in into my account
  12. Screen is displayed asking if I want to sign in. Options are "Enter" or "Esc"
  13. Game is stuck on that screen. Only way to quit is to kill it with Task Manager or Restart Computer
Once I detected the problem, I did a few things suggested by the community. O updated my Steam client, I updated my Games for Windows client and I made sure my Windows 8 PRO installation was up to date. None of this fixed the issue.
Then by a lucky chance while trying to run the game, go to my desktop and trying to kill the app, I noticed a short Windows error message that the connection to the Live Services from the Games for Windows Client timed out and provoked a fatal error. I realised that the problem was indeed the Games for Windows client.
GTA_IV_05
The Solution
If you are experiencing the same issue, here is what you need to do:
  1. Run Control Panel and go to Programs and Features
  2. Find and uninstall “Microsoft Games for Windows Marketplace” and “Microsoft Games for Windows – LIVE Redistributable”.
  3. Restart your machine when the uninstall process is completed to make sure the programs are completely removed.
  4. Install the updated Games for Windows Marketplace client. You can get the latest version here.
  5. Once the install is done, run the client and login with your Microsoft Account. 
  6. Launch Steam and run GTA IV. This time you will notice the Games for Windows Marketplace client popping a couple of messages at the top of the screen saying that you are indeed logged in. Solved !
Hope this helps you avoid some frustration trying to get your GTA IV game running on your Windows 8 machine. It certainly got me frustrated, but the good news is that there is a solution that it doesn’t involve going back to Windows 7. Happy Gaming!

Wednesday, December 5, 2012

Windows Azure: Challenge Number One

While I was at BUILD 2012 a few weeks ago, the Windows Azure team put together a series of challenges for enthusiasts to solve during the conference. They were giving a prize for each completed challenge, and I’m happy to say, I tackle them all!

As a follow up, I wanted to share the different challenges and the app I created and leveraged across Windows 8, Windows Phone 8 and Windows Azure. I’m a bit delayed on the publishing due to the monthly usage limits on the services, but hopefully they are still quite relevant. I’ll be publishing a series of posts going through the evolution of the app.

TwitBook

Through the series, I’ll be working on an app I just called TwitBook. The concept is pretty simple, and hopefully handy. I wanted to create a simple app to store the twitter usernames of the BUILD presenters and colleagues, to follow up later.

Challenge Number One

The first Windows Azure challenge was to create and activate your Azure account, download the SDK and complete the getting started tutorial. The tutorial teaches you how to create a Windows Phone 8 app that uses a Windows Azure Mobile Service.

Windows Azure Mobile Services is a quick, simple and powerful way to create backend services for mobile applications.

twitbook_08    twitbook_09

You will need Visual Studio 2012 (you can get the Express version here) and the Mobile Services SDK.

Creating the Mobile Service

twitbook_04

The first step is to login into the Windows Azure Portal. Then select “New” at the bottom left corner, and choose to create a new Mobile Service. You can create a new SQL database instance for your service or use an existing one (I’d recommend reusing your SQL instances as much as possible to reduce the computing and storage consumption).

twitbook_01

twitbook_02

You can just follow up the tutorial which is presented in the dashboard of the new Mobile Service you just created. It will take you through the setup of the mobile service and the initial SQL setup and then it gives you a base Windows Phone 8 app that you will modify to connect to your cloud service.

twitbook_03

In my case, I wanted to create my own Windows Phone 8 app based on the TwitBook concept.

The first thing that I needed to do is to create the SQL tables required. If you click on the Data tab of the service, you will see an empty table. Click on the “Add a Table” to create a new one. Give it a name and assign the permissions you require. Defaults are OK for now. Once that is done, you will see your new empty table.

twitbook_05

twitbook_06

twitbook_07

Notice that you were able to create the table without defining any data structure. No columns, types or defaults so far. This is part of making the setup easier and a better fit for simple mobile services. The data structure of the table will be created when you submit the first set of data records.

Creating the Windows Phone Application

Now we are ready to switch to our local dev environment. Run Visual Studio 2012 and create a new Windows Phone blank application. Select Windows Phone OS 8 as the targeted platform.

image

I won’t go into much detail since the code and layout are straight forward and it is based on the sample project you can download from the Windows Azure portal. The app has one page only. It exposes a couple of text boxes to enter the contact’s full name and twitter handle. It has a button to save the contact’s information and a refresh button to load and update the contact’s list. Finally, it uses a LongListSelector items control to display the list of existing contacts (here’s a nice walkthrough for this powerful control and some design guidelines in case you want to go deeper on the subject).

image

The next step is to create the data model that will be used to store the contacts information. For this I have created a new class called “Contact” in my Model folder.

  1: public class Contact
  2: {
  3:   public int Id { get; set; }
  4: 
  5:   [DataMember (Name="fullname")]
  6:   public string FullName { get; set; }
  7: 
  8:   [DataMember(Name="twitterhandle")]
  9:   public string twitterhandle { get; set; }
 10: }

Now that we have the model, we can go ahead and build the logic to connect to the Windows Azure Mobile Service.


For a start, I always add my regions structure: fields, properties, constructors and methods. You will need to add a reference to the Windows Azure Mobile Services Managed Client assembly.


twitbook_10


twitbook_11


Once you have the assembly reference in place, we need to create our MobileServiceClient instance to connect to our service. We can do this in the App.xaml.cs file. Make sure to enter your service Url and Application key correctly.

  1: public static MobileServiceClient MobileService = 
  2:     new MobileServiceClient(
  3:     "https://yourservicename.azure-mobile.net/",
  4:     "YourAppKey"
  5:     );

We have our service client in place and we can now switch to MainPage.xaml.cs. First, we will create two private fields. One will hold our collection of contacts, and the other will have a reference to our service’s Contact Table.

  1: private MobileServiceCollectionView<Contact> contacts;
  2: private IMobileServiceTable<Contact> contactTable = App.MobileService.GetTable<Contact>();

Next, we will implement the set of methods needed to interact with the service and manage the data flow between our mobile app and the cloud. We need two important methods. One to insert a new contact into our cloud table. This one needs to be an asynchronous operation since connecting to the cloud and writing a new entry on our cloud storage. Once the operation finishes, it adds the new record to our local collection. The second operation is for refreshing our contact list, which uses our local collection to display the contacts list.

  1: private async void InsertContact(Contact contact)
  2: {
  3:   // This code inserts a new contact into the database. When the operation completes
  4:   // and Mobile Services has assigned an Id, the item is added to the CollectionView
  5:   await contactTable.InsertAsync(contact);
  6:   contacts.Add(contact);
  7: }
  8: 
  9: private void RefreshContactList()
 10: {
 11:   // This code refreshes the entries in the list view be querying the Contacts table.
 12:   contacts = contactTable.ToCollectionView();
 13:   ListItems.ItemsSource = contacts;
 14: }

To finish, we just need to implement our button’s event handlers to tie our UI actions to our logic. We need one handler for our Save button, and another for our Refresh button.

  1: private void ButtonRefresh_Click(object sender, RoutedEventArgs e)
  2: {
  3:   RefreshContactList();
  4: }
  5: 
  6: private void ButtonSave_Click(object sender, RoutedEventArgs e)
  7: {
  8:   var contact = new Contact { FullName = FullNameInput.Text, TwitterHandle = TwitterHandleInput.Text };
  9:   InsertContact(contact);
 10: }

Now compile and run your application. Add a few contacts to test the app. You can use tools like Fiddler or Charles to monitor the http traffic, and make sure the service is up and running.


twitbook_13


After you have added a few contacts, you can check the cloud storage records to see the data being received and stored by the Azure Mobile Service.


image


That’s it. You have the simple twitter contact manager up and running, integrated with a cloud storage service.


I hope you realize how easy is to create, host and maintain simple cloud services for your applications. The more you explore and use the Windows Azure cloud offerings, the more you will be able to take advantage of the different services to power and sync your application’s data.


I encourage you to go ahead and get your trial account. Follow the simple tutorials and try to replicate what I did for the first challenge. Please let me know your comments and experience. I’d appreciate your feedback and contributions.