Creating Our First Windows 8 App

The Windows 8 App Store has quite a few gaps in terms of number of apps and the quality of apps. This is a look at building and deploying an HTML/CSS/Javascript with an emphasis on designing a simple, minimal, and beautiful Pomodoro Productivity Timer app.

My experience creating and deploying an HTML/CSS/Javascript application to the Windows 8 store.

The Application

The current Pomodoro Productivity Timer apps in the Windows 8 store are lacking. They have good functionality but are lacking in the looks department. A Pomodoro Timer is a nice and simple app concept to try out building a Windows 8 app so I decided to dive in with that.

MSDN Resources

MSDN is the Microsoft site for development resources and information. Developing on a Microsoft platform can be confusing at first. There are different web portals on their MSDN site to get to many types of development and resources. Different sites for different types of development (Windows 8, Windows Phone, Azure, XBOX, Office) and then past that into the Windows realm, that’s broken down even further into Windows Store, Internet Explorer, desktop, and hardware development. For creating a Windows 8 app, we are concerned with Windows -> Windows Store. This section of the site is broken down into:

Dashboard The panel where you can see your developer account. Submit apps, see payouts, and more.
Get Started Has a great section (Your first app) to get familiar with creating apps. Highly recommended.
Design Gives in depth guidelines and best practices for app design.
Develop You’ll spend most of your time here, especially in How to and Reference.
Market Dictates the steps to submit and how to improve your apps.

Tools

This part can also get confusing. There are multiple versions of Visual Studio and a multitude of addons for each. For our purposes, we will be using Visual Studio Express 2012 for Windows 8. The different versions can be seen on the Visual Studio site. Visual Studio Express 2012 for Windows 8 is free to try for up to 30 days. After that, you must register to obtain a free product key.

Getting Started

Now on to the actual development.

I’ll get straight to what I’ve learned. Creating Windows 8 apps with HTML/CSS/Javascript is just plain fun. The overall structure for your app is very similar to a website.

  • References
  • css
    • default.css
  • images
  • js
    • default.js
  • default.html
  • package.appxmanifest

The package.appxmanifest file will be where you detail all your basic information about your app. This includes Display name, the description, device features your app needs access to (internet, location, proximity sensors, etc). The html, css, and js files are just that. The basic files for your app. It’s great to see how easy it is to use web development skills to create Windows 8 apps. I won’t dive into these parts much since I’ll be focusing on each part in future Windows 8 Development posts. Stay tuned for those.

Submission and Deployment

Submitting the app is a fairly easy process. Just package up your app, upload it, and follow the steps. To be completely honest, when submitting this app, it got rejected twice! And if I’m being even more honest, I was pretty butthurt about it. Submitting your first app and getting rejected right off the bat isn’t the best way to get started. After some research and chatting with the reviewers, the guidelines are pretty set and they have their requirements enumerated pretty well. I made some stupid mistakes when submitting, mainly I needed a more in depth description and there is a section where you can explain to the reviewer what your app is about and give them a little guidance on how to review it. Don’t leave that blank.

Converting for Web Use

Since the base of this app is mostly (all) web technologies, porting to the web took an easy 20 minutes. Just remove the references to the Microsoft javascript libraries and you’re good to go!

Future

Having the ability to build apps in HTML/CSS/Javascript has definitely drawn me in as a website developer. That is what I’m sure the good folks at Microsoft were aiming for. What I think caught me off guard though, is that after creating apps like this, I definitely want to dive even further into C++, Java, or Objective-C app development. I’ll be writing up some focused articles on developing for Windows 8 since other than the official MSDN site, there aren’t many tutorials. Comment and let us know what you guys want us to focus on in the future.

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.