Recreating the MobileMe Gallery in Silverlight 3
Even though I am an avid fan of many Microsoft products (especially their developer tools), Apple has just done certain things “right” for the home user where it seems Microsoft has struggled or been late to the table. As you may have read on my About Me page, I use Macs at home. They have their own set of issues, but for most of the “home stuff” I need a computer for (photos, movies, music) they do the job and they do it well.
One of my favorite tools is iPhoto (Aperture too) and the one-click publishing to MobileMe Gallery – Apple’s web-based photo/movie gallery tool that creates good looking, easy-to-use, web-based galleries that I use to share photos and movies with friends and family. Take a look for yourself and visit the MobileMe sample gallery for the ficticious user “Emily Parker.”
So for the most part, the features here meet my needs with one exception – movies require the Apple QuickTime plug-in to view them. Well, you may say, ‘no big deal’ and you’re right…unless you’re one of my many family members who is still on Windows 2000 (or earlier) and can’t install the latest version of QuickTime because it requires Windows XP. So, needless to say, a fair amount of people are unable to view any of the movies that I publish to MobileMe Gallery. So, I end up having to also publish them to YouTube as well (which is a kind of a hassle). Not to mention that they don’t get the same focused user experience of my photos and movies in one nice and neat presentation and not a bunch of other junk detracting from the experience. I know, I know, my family members should upgrade, but the simple fact of the matter is that many of them are happy with their computers and they’re not going to upgrade just so they can view my measly ol’ MobileMe Gallery.
So, now for the solution. I attended a Guerilla.NET event back in March (put on by DevelopMentor) and while at the class I got up to speed on Silverlight 2 as well what features were coming in Silverlight 3. Voila! Silverlight 3 was going to support additional media formats including MPEG-4, which is the format used by iTunes and MobileMe Gallery. So, you see where I’m going. My solution would be to use the features of Silverlight 3 to create a solution that would allow my family to view the MPEG-4 format movies stored on MobileMe Gallery using the Silverlight 3 plug-in (once it became available). I knew it would be sometime before it came out of beta and I knew it would take me awhile to develop, so I knew I had some time.
But remember, I didn’t want to sacrifice the clean, simple, focused UX of MobileMe Gallery by simply giving my family a silverlight media player as an alternate location to view movies. Plus, there are already Silverlight media players that would handle the job once Silverlight 3 was available. I wanted my family to have the full, beautiful MobileMe Gallery experience in all its glory. So, I decided I would recreate the MobileMe Gallery using Silverlight. I figured it would be a good learning experiment since I hadn’t played with Silverlight much before the class.
So, this is the introductory post of a multi-part series where I will detail out step-by-step the process of Recreating the MobileMe Gallery in Silverlight 3. I hope you’ll follow along as I go down to meticulous detail to ensure my Silverlight Gallery looks exactly like Apple’s MobileMe Gallery.
Key Features and Success Criteria:
1. Play MPEG-4 (.m4v) files using Silverlight without the need for QuickTime
2. Photo Album and Movie “Scrubbing” (if you view the sample above, you’ll see what I mean when you mouse over an album or movie)
3. Full featured photo album with all the features (and views) of the one built-in to MobileMe Gallery
4. Utilize the photos/movies already stored on MobileMe Gallery (no separate upload or storage required…we’ll do this by tapping into the existing APIs and RSS/JSON feeds that MobileMe uses itself by using a little Fiddler detective work)
5. 100% Silverlight implementation
The goal in one sentence is by the time we finish we should have an exact replica, feature-for-feature match of the MobileMe Gallery using Silverlight 3 (see below for a preview).
As for legal disclaimer, I should note that Apple, the Apple logo, MobileMe, the MobileMe logo, and MobileMe Gallery are registered trademarks of Apple.
Also, I am a multi-Mac owner, multi-iPhone owner, paying member of the iPhone developer program and MobileMe subscriber, so Apple don’t sweat this too much. I’m still a big fan, but needed a good project to develop my Silverlight skills and figured recreating the beautiful MobileMe Gallery would be an excellent challenge.
Here’s the breakdown:
- Part 1: Getting Started – WCF and the initial plumbing required to retrieve the data from the MobileMe Gallery
- Part 2: The Silverlight Project (Coming Soon) – creating the Silverlight project to call our WCF service and start building the home page
Please check back for updates as I’ll continue to update this post with the links to new segments as I complete them.