We had a great hackathon last month at Etsy with over 20 awesome hacks and we couldn’t have done it without the support of our sponsors. One of our biggest sponsors, Microsoft, sent two dev evangelists, Jesse Freeman and Maria Naggaga. They answered questions about Windows, gaming, and walked around helping with tech issues. They also brought backpacks, notebooks, pens, and a bevy of USB sticks pre-loaded with Windows 8.
Amit Jotwani, the awesome dev evangelist from Mashery, took some time off from helping people use the Mashery API and answering tech questions to check out Windows 8. He made an app called WinFlip that uses three apis in the Mashery network (USA Today, Rotten Tomatoes & Pearson) to show top movies, trending news, and images.
WinFlip shows recent news headlines with full articles from USA Today.
“Microsoft and Windows 8 are not always an obvious choice for use at hackathons. But I went for it and my app displays awesomely using the slick Metro UI introduced in Windows 8…I feel it’ll take people some time to get used to the new look and feel. Definitely a worthy competing OS from Microsoft”, said Amit.
WinFlip uses data from Rotten Tomatoes to show top movies.
We’ve noticed that many of our hackathon attendees come with Macbooks, a popular choice for devs who want to easily use their favorite open source stack. But we’ve been impressed with the direction of Windows 8, Metro, and the Windows App Store.
And it’s always good to have another player in the game so we’ve written up a quick guide for web developers on Macs to get started with Win 8 development.
Getting the tools
1. Download Windows 8
If you don’t have dev evangelists roaming your house with usb sticks, you can download a Windows 8 Enterprise 90-day evaluation for free from the Microsoft website. You’ll have to give them some personal info and get a Microsoft account if you don’t already have one. Also keep in mind, it’s about 3.3 GB so depending on your internet speed, you might want to take a nap.
2. Install Windows 8
There are two options: use Bootcamp to dual boot or use virtualization software like Parallels, VMWare, or VirtualBox. We like to use VirtualBox because it’s free and we already downloaded it back when we were testing different versions of IE with this handy project. Follow these instructions for installing Windows 8 on VirtualBox.
3. Download and install Visual Studio 2012
From your new Windows 8 virtual machine, open up a web browser and go to this page. Click the “Download Now” button in the “Download the tools and SDK” section to download Visual Studio Express 2012, Blend, the Windows 8 SDK, and project templates.
4. Get a developer license
The first time you open Visual Studio 2012, it will prompt you to create a developer license. Just follow the instructions and sign in with your Microsoft account.
Using the templates
We’ll walk through the project structure and outline the plan to get real data from APIs in Mashery’s network; the WinFlip source code is available on GitHub for reference.
Grid App Template
Start a new project and pick Templates → Javascript → Grid App. It will generate a solution and a project (solutions can have multiple projects).
Hit the green arrow to run the app locally. You’ll see that the grid and detail pages are already set up. Use Alt+Tab to return to your Visual Studio window. Hit the orange stop button to stop.
The Grid App template starts us with three pages:
- an index of items by group
- a group page with details for that group and items in that group
- an item detail page
WinFlip pulls data from USA Today, Rotten Tomatoes & Pearson and makes each source a group. For example, Rotten Tomatoes is a group and an opening movie is an item in that group.
Mashery setup
Get a Mashery account. This will make it easy to get dev access to over 50 APIs. For example, to get a key for the Rotten Tomatoes API, first register by logging in with your Mashery account and filling out some info about your app.
Modify the templates
The project is like a typical web project with images , HTML, CSS, and Javascript. There are folders at the root level for site-wide js, css, and images. The pages folder contains 3 subfolders, one for each page. Each page has its own html, js, and css files. By convention, the names of these files are the same as the name of the folder.
/WinFlipApplication_TemporaryKey.pfx (Personal Information Exchange) is a certificate file for building and signing the app and /Package.appxmanifest identifies the app and what it does. The /References includes the Windows Library for Javascript. While it’s not strictly required, it provide things like ui controls, promises, dom utilities, and ajax helpers. If you do use it, you must add base.js first, then ui.js to your html page.
/default.html is loaded first and sets the home page to /pages/groupedItems/groupedItems.html:
<div id=”contenthost” data-win-control=”Application.PageControlNavigator”
data-win-options=”{home: ‘/pages/groupedItems/groupedItems.html’}”></div> |
/js/data.js contains sample data and helper methods for working with the data. Take a look at the generateSampleData function around line 59. To change the data in the app, we are going to replace sampleGroups and sampleItems with our own items. To minimize the changes we have to make, we will map properties from our dynamic sources to the properties in the templates, aka the properties in sampleGroups and sampleItems.
Check out this guide to adding data for more information about how data is stored, accessed, and bound to HTML elements. The sample data is synchronous by default but we will fetch the data asynchronously. We can add a lib like jQuery and call $.ajax in data.js. We can also use the WinJS library.
$.ajax({
url: 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/opening.json?apikey='+rottenTomtoesKey,
dataType: "json",
success: searchCallbackRotten
}); |
Deployment??
Windows 8 apps are distributed through the Windows Store. You can read through the process of publishing an app or sign up for Generation App to get free app consultation, design & technical guidance, and more.
Microsoft was a sponsor of Hacksgiving and we are grateful for their support and generosity. They are committed to supporting diversity in tech with programs like Women at Microsoft and grants and scholarships for women and girls.
Aurelia Moser is a librarian and laboratory technician based in Brooklyn. As a VP of 
Lucas is an Associate at
Matt leads the 
