How to turn virtually ANY website you like into a real Windows Phone app in only minutes

Despite the rest of the content on this blog, this article is written in english for the simple reason of reaching more people, because this topic is widely unknown and just needs to be shared. So read carefully because I am going to show you a way of turning virtually any website you like into a real Windows Phone app in no time.

Any website?

Technically speaken: Yes. Any website. However, a lot of websites have static content. Those sites aren’t really interesting enough to invest time turning them in to a real Windows Phone app. Even if it’s only minutes we are talking about. So what types of websites are we interested in then? Websites that regularily add content of course. Websites that run blogs, news sites or company sites that continuously post new articles about interesting topics or products.

So what’s the trick?

No trick. You only have to know about two things:

  1. There is App Studio. A web application made available by Microsoft that allows you to create Windows Phone AND Windows 8 apps in (almost) no time (more on that later).
  2. App Studio is able to work with static as well as dynamic content. The latter is realized by configuring syndication feeds as data source.

While most people already know about syndication feeds (aka RSS feeds) and realized that most blogs offer those feed URLs to extend their reach, think about this: Even websites that do NOT offer RSS feeds most often add content in a constantly recurring way. So why not simply generate a feed on our own… and have that feed set as data source for our Windows Phone app?

So there’s a trick after all.

If this can be called a trick, then yes, there actually is. Let’s have a look at an example. The town, I am living in has a small yet popular cinema. It is called Beluga (yes, just like the whale). Of course the Beluga has a website that also shows their current program. The program of the current week is published here. I always wanted to have a simple (real) Windows Phone app that only shows this program. What follows is a Step by Step explanation about what I did to realize this app in less than 30 minutes.

Preview

 

Step 1 – The Syndication Feed

At first, I thought about creating a WCF service that parses the website, generates a syndication feed and host it on Windows Azure. This is generally a great idea. However, Windows Azure is not a free service and while an early prototype of the WCF service actually worked pretty well, I thought again. I couldn’t be the only one who needed a feed for a website that doesn’t offer one itself. And wouldn’t it be neat creating some sort of wizard that allows to define dynamic rules so that a feed can be created in no time for any website? Well… actually others did think about this as well and one of the best services I could find that does exactly this, is feed43.com (pronounced feed for free).

So I registered on feed43.com, entered http://www.beluga-kino.de/index.php?show=week as source page address and had a look at its html code. It took me a little while to find out how the rule engine at feed43.com works. This is what I came up with:

Extraction rules > Global Search Pattern:

<h3>{%}<div id='icons'>

 

This pattern reduces the area of the site to look for recurring items to all content between the <h3> tag and the <div> tag that follows right after the weeks’ program.

Extraction rules > Item (repeatable) Search Pattern:

<div class='plakat'>{*}<img src='{%}'{*}<h2>{*}href='{%}'{*}'>{%}</a></h2>{%}<table

 

While this might look complicate at first sight, it is actually pretty easy to understand (although I am confident there are more elegant ways of describing the items on specifically this site, but whatever… it works, so why complain?). Every % character defines a snippet to extract, so there will be four snippets made available as %1 to %4. The * mark areas to skip and make it easy to navigate through the content of the html code.

On this specific website, this rule extracts the following contents:

%1: Source of the image tag to the movies’ film poster

%2: Link to the movies’ details

%3: The movies’ title

%4: The movies’ short description

These templates can be used now to create the syndication feed. Feel free to have a look at the result here.

Step 2 – The Windows Phone app

Of course, I am already registered as a Windows Phone developer (are you?). In case you are not registered yet, this would be a good time to do so. For this article it is perfectly alright to only register on http://appstudio.windowsphone.com as I am using this service to create this little app anyway.

Logging into App Studio gives us a lot of options. I didn’t choose one of the production ready templates but rather started from scratch using an empty app. I created an application logo, provided an app title and created exactly one section called “Wochenprogramm” (weekly program). This section only has two pages: One for the overview about all movies for this week and another showing details. What’s great about AppStudio is the integrated preview of what people will see on their phone. This works in realtime. no kidding. Go ahead and click around the preview and actually try out the settings you make.

Here is the configuration I added for the two pages:

AppStudio_Content_Page_1

 

AppStudio_Content_Page_2

As Datasource, I entered the address for the syndication feed provided by feed43.com: http://www.feed43.com/beluga-kino.xml.

On the Themes tab, I choose to use a custom background image. Fortunately, App Studio offers to either upload an own image from your computer or even OneDrive, or to select an image from the App Studio resources (which I did).

On the Tiles tab, I uploaded some template images I created using Gimp.

On the Publish Info tab, I added some description text and then went straight to the Finish section pressing the respective button on the top right of the site.

Step 3 - Finishing

What makes App Studio really great is that you can get your app right on your phone in virtually no time. All you have to do is touch the Generate button, scan the generated QR code with your phone and simply agree to install the app on your phone.

If this is the first time you do this, you might have to install the Microsoft Corporate Certificate first so that side loading of apps generated with App Studio is possible. However, App Studio explains how to do this (Spoiler: By clicking a link on your phone provided with an email sent automatically. Yes, it is really that simple).

What makes App Studio even better, is that you can even download a publishing package for your app that you can use to publish it into the Windows Phone store. Keep in mind however, that there are some criterias that your app must meet to comply with the Windows Phone Store publishing rules. Also, if you want to publish your app into the store, you will have to register for a real Windows Phone developer account (which costs about 15 USD per year at the time of this writing).

What makes App Studio even more better, is that you can also download a source code package of your generated app. You can use Visual Studio 2013 (or even the express edition) to open the solution and start improving the app by writing real code (if you carefully followed this article and also had a look at the video linked at the top, you might have noticed a little modification I achieved by altering the generated source code of this sample app).

Conclusion

Although this article didn’t provide you with a lab tutorial that you can follow, you should get the idea: It is amazingly simple to create Windows Phone apps. And even if you like to create apps for your favourite websites, the tools are there.

One word of warning though: If you plan to create a Windows Phone or even a Windows 8 app that uses content from an external source, always keep in mind that you need the owners’ permission for any usage whatsoever.

Comments are closed

Über die Autoren

Christian Jacob ist Leiter des Geschäftsbereiches Softwarearchitektur und -entwicklung und zieht als Trainer im Kontext der .NET Entwicklung sowie ALM-Themen Projekte auf links.

Marcus Jacob fokussiert sich auf die Entwicklung von Office-Addins sowie Windows Phone Apps und gilt bei uns als der Bezwinger von Windows Installer Xml.

Martin Kratsch engagiert sich für das Thema Projektmanagement mit dem Team Foundation Server und bringt mit seinen Java- und iOS-Kenntnissen Farbe in unser ansonsten von .NET geprägtes Team.

Aktuelle Kommentare

Comment RSS