Finishing the Web App template
This is a cross post from my personal blog, which you can find here: davevoyles.azurewebsites.net.
In my last post,I mentioned that I began using Microsoft's new Web App Template, to quickly and easily create an app out of my website, while using very little code. Now that my app is finished, I wanted to walk you through the steps, so that you can do the same. In total, it only took me about 2 hours to have my app created from scratch, and in the store!
Making the App Yours
I wanted to keep my app simple, since my website already had a ton of information and functionality to begin with. My goal here was to neatly organize content for students, in one easy-to-find solution. I started by adding links to the top of my app. When the user right clicks, the header pops down from the top of the screen, and offers nested links for the user to click through. I wanted to share the work of my fellow evangelists, so the first set of nested links was all for them.
Content That Is Right for Your Audience
Since this app is geared towards the students I work with, I wanted to share resources that they would commonly ask about or use. Therefore, under the “Students” tab, I have links to DreamSpark, BizSpark, the Imagine Fund, and any posts of mine which I had categorized under “students”. The code for that is as follows:
{
"label": "Students",
"icon": "library",
"action": "nested",
"children": [
{
"label": "Dreamspark",
"icon": "library",
"action": "https://build.windowsstore.com/DreamSpark/#fbid=_rym5eCW63n"
},
{
"label": "BizSpark",
"icon": "library",
"action": "https://wootstudio.ca/startups/bizspark.aspx"
},
{
"label": "Imagine Fund",
"icon": "library",
"action": "https://www.microsoftimaginefund.com/"
},
{
"label": "Posts for students",
"icon": "library",
"action": "https://davevoyles.azurewebsites.net/category/students/"
}
]
},
I continued to add more content, which I felt would be relevant, including a pull down for Unity, HTML5, Win Phone, and drag-and-drop tools. You my notice that there is an “icon” label in the text above. You can add any icon to your link, by searching through this page, which lays out all of the icons available to you.
Privacy
Every Windows 8 app needs to have a privacy statement, notifying the users about permissions you will be using (internet connection, location, etc.) and a way to get in touch with you. Usually, you can store the privacy statement within an application, but the WAT does not allow this. Therefore, I had to make a simple privacy statementpage on another site, and just link to it.
Passing Certification
To pass the app certification tests, you’ll need to use images from your app for your splash screen, logo, and start menu. To simplify and speed up the process, I use the Windows Store Image Generator, and simply give it one image, and it quickly makes all of the images that I need to pass certification. For my logo and tile image, I just grabbed a screen shot of my website. I added all of the images except for the badge, because that seemed to have an error with the WAT. Here is what it looks like in the config.js file:
"settings": {
"enabled": true,
"privacyUrl": "https://phlcollective.azurewebsites.net/privacy.html",
"items": [
{
"title": "About Dave",
"page": "https://davevoyles.azurewebsites.net/bio/",
"loadInApp": true
}
]
},
I’ve also added a page where users can find out more about me (it links directly to my “about me” page on my site). When I finished creating my app, I ran it through the Windows App Certification Kit, which ran a series of tests to determine if my app would work in the store. This saves you the time of having to upload your app to the store for submission, and later discovering that it was denied for something trivial like forgetting a logo image. Best of all, you don’t even need to change the package.appxmanifest for this change either! Just drag-and-drop your new images into your “images” folder in Visual Studio, and you’re good to go! Other than that, out of the box your app should work perfectly fine. The team at Microsoft has done a fantastic job of making this tool as easy as possible to work with. Resources As always, you can find the latest code updates to this project on my GitHub. I'll add the entire project as a .zip file in here soon, too.