WinCoder Blog

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

1_ChooseTemplate

Step 2:

Click the Create Button

2_CreateApp

 

Step 3:

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

The fields should be fairly intuitive

3_DefaultApp

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

4_TMV

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

5_TMV_Theme

Step 6:

Let’s gather logos using Bing Image Search

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

6_TMV_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

7_TMV Logo

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

8_TMV_Logos

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 109_TMV_Logo:

Click Finish, then Generate and select the options below

10_TMV_GeneratePackages

Step 11:

Verify your app was successfully generated

11_TMV_PublishPackages

Step 12:

Head to the Windows Store Dev Center

Select Dashboard

12_Dashboard

Step 13:

Select Windows Phone Store

13_WPStore

Step 14:

Select Submit App

14_Submit

Step 15:

Select App Info

15_AppInfo

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

16_TMV_ReserveName

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”

17_TMV_GetPublishPackages

Step 18:

Note the location of the downloaded publish package

18_DownloadPrompt

Step 19:

Locate your downloaded publish package

20_Zip

 

Step 20:

Extract the .XAP file within

21_XAP

Step 21:

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

19_TMV_Upload

Step 22:

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

22_TMV_AddXap

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

23_TMV_AddImages

Step 24:

Click Review and Submit

24_TMV_Review

Step 25:

Note the summary of your app submission

If everything looks good, click Submit

25_TMV_Submit

Success!

26_TMV_Success

Download the published app!

 

 


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

  1. hari
    March 21, 2015 at 11:40 am

    i can’t access mobile camera or browse from media library using app created WAT in app studio

Leave a Reply

Your email address will not be published. Required fields are marked *