Using Web App Template in App Studio to Publish Top-Music-Videos.com WP8 in 25 Steps

Microsoft’s App Studio portal allows developers to build rapid prototypes as well as full blown applications quickly and easily on any machine with a capable web browser.  This has resulted in thousands of published apps from developers around the world!  In today’s post, I am going to focus on one of the many provided templates, the Web App Template.

 

The Web App Template started as a project on Codeplex that allows for the creation of an app experience on Windows Phone and Windows 8 by leveraging your existing website.  This approach comes with various pros and cons, namely that the more responsive design implemented in the original website the better the layout is when wrapped into an application, in addition the app requires accessibility to the internet for full functionality.  However, this can be seen as a great opportunity for developers looking to create applications which require little maintenance to render across multiple platforms i.e. Android, IOS, Windows etc.

 

Recently, the Web App Template was brought over as an available template in App Studio offering developers the ability to easily generate wrapped applications over existing mobile ready websites.  This can aid companies in rapidly creating a presence on the Windows ecosystem.  Using this approach, I was able to bring my mobile ready website @ http://top-music-videos.com over to the Windows Store as an app in only 25 steps!

 

Prerequisites:

1. A mobile ready / responsive website (It is encouraged to use only IP’s or sites that you own)

2. A free App Studio account available @ http://appstudio.windows.com

3. A Windows Store Developer Account – If you are reading this blog, I may be able to help you out with getting access, e-mail “p decarlo @ Micro soft dot com”

 

Step 1:

Login to App Studio, and start a new project.

When prompted to Choose your template, select the Web App Template

Step 2:

Click the Create Button

 

Step 3:

Note the default template which wraps http://m.microsoft.com

The fields should be fairly intuitive

Step 4:

Modify the values below:

1. App Title

2. Base Url – Note the site may render differently on a device, do not always assume it will look like the simulator on the left

3.  Message (I did not prefer the default grammar)

Then click Save

Step 5:

Select Themes from the top menu

Here you can optionally change the color of the Application Bar

Note: Other template modifications won’t render changes in the Web App Template

Step 6:

Let’s gather logos using Bing Image Search

Note: I am searching for Free to modify, share, and use commercially tagged images

Step 7:

Create a nice square logo larger

Note: It is recommended to use a large layout 400 x 400 or greater

App Studio will resize the large square image in the next step

Step 8:

Select Tiles from the Top menu

Upload your image as the Small and Large Tile

Provide appropriate text for your tile

You may also click over to the Splash and Lock menu to modify the Splash Screen

Step 9:

Select Publish Info from the top menu

Click to modify the logo, again I used the same image from the previous step

 

Step 10:

Click Finish, then Generate and select the options below

Step 11:

Verify your app was successfully generated

Step 12:

Head to the Windows Store Dev Center

Select Dashboard

Step 13:

Select Windows Phone Store

Step 14:

Select Submit App

Step 15:

Select App Info

Step 16:

Reserve your App Name

Make sure this app matches the name given to your app in App Studio

If the name is unavailable, find one that is and regenerate your app in App Studio using the new name

Scroll down and select the appropriate categories and distribution options for your app

Step 17:

Head back over to your generated App Studio App and Download the publish package

Here you can also test your app by side-loading using the Installable Packages QR code

More information on these features can be found by clicking “How to”

Step 18:

Note the location of the downloaded publish package

Step 19:

Locate your downloaded publish package

 

Step 20:

Extract the .XAP file within

Step 21:

Head to Upload and Describe your packages in the Windows Phone Store

Step 22:

Click Add new and select your extracted .XAP file from the previous steps

Step 23:

Add the necessary description and keyword info

In addition you will want to provide the necessary images

I resized my logo used for the live tiles in order to create the 300×300 App Tile Icon

I used the Snipping Tool to grab screenshots from the App Studio previewer and resized to 1280×800

You could also obtain screenshots by sideloading your package into the emulator if you have the WP8 SDK installed

Step 24:

Click Review and Submit

Step 25:

Note the summary of your app submission

If everything looks good, click Submit

Success!

Download the published app!