Windows 8–Updated flickR Search Demo in HTML/JS

Posted on by

In a lot of the Windows 8 sessions that I’ve given around the UK I’ve been building out a simple demo app that searches on flickR for some photos. Over time I’ve come to build that app usually with some combination of the following;

  • Build out the basics of the app in .NET
  • Rebuild the same thing in C++ and, usually, I re-use the .NET component that I use to do flickR searching in order to show that we can make custom WinRT components and build them into hybrid apps
  • Rebuild the same thing in JavaScript and, usually, I re-use the .NET component again to show that works in JavaScript and I then remove the .NET component and replace it with a pure JavaScript implementation of flickR searching

and, based on audience and time, I sometimes take either the .NET example or the JavaScript example ‘forward’ and sketch out areas like;

  1. Tiles and Toasts
  2. Search
  3. Share
  4. Settings
  5. Screens/Views
  6. Process Lifecycle Management
  7. Storage – Local Storage
  8. Storage – SkyDrive Storage
  9. Windows Azure Mobile Services
  10. Background Tasks

A number of people who came along to the sessions said that they’d like to see this demo recorded along with all the various assets and code-snippets and so on such that they could walk through it in their own time and across both XAML/.NET and HTML/JS.

In this post, I’ll provide the HTML/JavaScript implementation. The .NET version is already written up in this post.

This is just a demo and was cooked up to show people things rather than to provide a great user experience or provide guidance around how to structure your code or something like that – I generally bang code into one big file rather than try to be elegant or leap off into fancy patterns or similar.

I’d recommend downloading the original video files from Vimeo and running them at about 1.5x the play speed as you’ll get through them a little quicker than if you’re streaming them and playing them at their original play speed.

Assets/Snippets

At each step I dropped whatever assets I’ve used into this SkyDrive folder – snippets, pictures, code files, etc;

http://sdrv.ms/UkaSV8

so that everything that I’ve used is available to you subject to you taking it entirely as it is and understanding that it’s from a demo and I can’t offer you a support service on its use.

Here are the individual videos if you want to consume that way;

Step 0 – Creating the Projects

Step 1 – Searching & Displaying Results

Step 2 – Adding Tile/Toast Notifications

Step 3 – Adding Search

Step 4 – Adding Share (Source)

Step 5 – Adding Settings

Step 6 – Screens/Views

Step 7 – App State

Step 8 – Saving a Photo

Step 9 – Saving to SkyDrive

Step 10 – Azure Mobile Services

Step 11 – Background Tasks

Conclusion

Enjoy – this demo is very definitely getting due for retirement but I’ve had good mileage out of using different pieces of it and it taught me a lot along the way  Smile