clip_image001

Windows Phone App Studio gives you the ability to build an app in your browser without any coding.

 

NOTE: This tutorial is intended for developers who have completed an app with Windows Phone App Studio. If you are new to the tool you may want to visit our Windows Phone App Studio resources page for instructions to help you get started. It is recommended you complete that tutorial before continuing with this one!

Don’t forget apps published in Canada could earn you rewards through the Developer Movement

So you’re finished creating your app – congratulations! Now you can move on to publishing. This tutorial will show you how to capture the screenshots you’ll need to publish your app, and will show you how to publish your app in the Windows Phone Dev Center. In the previous tutorial we built an app for Manotick. This tutorial uses an app I created for Halifax, Nova Scotia, so the app will look different, but the steps will work for any app you’ve created.

NOTE: the images in this post are a bit small – a document with larger images is available for download here.

Let’s begin!

Generating the App Publishing Files

First, open up the app you want to publish in the Windows Phone App Studio browser. It doesn’t matter what page you’re on. Press the FINISH button, shown below:

clip_image003

This will take you to a page where you can GENERATE your app packages. You’ll notice that there is a section labelled “Previous versions” – currently this is blank, because this is the first version you have created.

clip_image005

When you click Generate, a pop up will appear that gives you two options. The left option will give you a publishable .XAP file that you can use to publish your app for Windows Phone 8.0. The right option is a preview of a feature currently being developed – it will give you three versions of a Windows 8 app and a demo on how to share code between Windows 8 and Windows Phone. This is still in preview, so if you don’t know how to code, do not select this option.

clip_image007

clip_image008

Once you’ve generated your app, you will see a version listed in the “Previous versions” section. Now, in the main body of the page, you will see three major options:

· Download package – choose this option if you want to download your app to your own phone only. This is useful if you want to use your app yourself without publishing to the store, or if you want to see how it works on your phone before publishing it.

· Download publish package – choose this option to go straight to publishing without changing your code or taking screenshots. If you do not have Visual Studio, this is the option you should take.

· Download source code – choose this option if you want to edit your code or take screenshots using an emulator.

Capturing Screenshots for Publishing

At this point, we are going to choose to download the source code, so we can use the emulator to take screenshots to publish with our app in the store. NOTE: if you do not have Visual Studio, download the free trial version HERE.

clip_image010

Once you select this option, you will see the following popup. Select Download and when prompted, select “Save and open” to view the files.

clip_image012

Then, extract the files to a place you can easily find them. I like to create a new folder in Visual Studio > Projects.

clip_image014

Once you’ve extracted it, double click on the solution (the only item that is not a folder, it should be labeled “App”) to open your app in Visual Studio. At this point you may get a popup asking if you trust the source – this is because you downloaded the file and didn’t create it on your own computer. No worries, just uncheck the box (because yes, we trust Windows phone App Studio) and press OK.

clip_image016

If you’re not familiar with Visual Studio, the solution will look like garbled text. Don’t worry, we’re just going to run the phone emulator to get screenshots! Click on the little drop down arrow to get a list of available emulators.

clip_image018

There are a few options. For the highest resolution screenshots, choose Emulator WXGA.

clip_image019

Once you’ve selected it, click on the green arrow. The emulator will take a little while to load, just be patient! You’ll notice that it displays way larger on your screen than the actual size of a phone. In my case, it’s larger than the height of my laptop screen – but that’s okay, we’ll use the screenshot tool within the emulator to get our screenshots. As shown below, click the double arrows on the emulator tool bar for more tools, where you’ll find the screenshot tool.

clip_image021

We’re going to take a few screenshots for our app, one for each page type. Simply navigate through your app so the emulator displays what you want to capture, then press the capture button as shown below.

clip_image023

Once you’ve captured a screenshot, check the preview to make sure you’re happy with it. Save and repeat until you have as many as you want!

clip_image025

Then go ahead and close the emulator, and close Visual Studio.

Publishing Your App

Before we head to the final steps, we need to download the .XAP file for your app. To do so, go back to the Generate page in Windows Phone App Studio and select “Download publish package”. Save this file to an easy-to-find place.

clip_image027

Now you have all the tools to publish your app! Next you need to create an Windows Phone Dev Center account. If you are a student, you can get one for free through DreamSpark. If not, you’ll have to pay a registration fee of $20. We won’t look at the exact steps in this tutorial, but you can create an account here!

Once you’ve registered and logged in to your account, go to the Dev Center home page and click on “Submit an App”.

clip_image029

This button takes you to the publishing steps page, where you can see a list of required and optional steps. In this tutorial we’ll only do the two required steps. First, let’s do step 1, inputting app info.

clip_image031

Input all the basic info for your app. In this case, here is the data for the Halifax app:

clip_image033

We’re just going to go with a free version for this app, but if you want to add a price you’ll have to input your personal banking information so you can get your profits.

Selecting More Options will give you a bit more customization, but these only apply if you want to change your distribution channels or when it publishes. For most apps, these options can be left as default.

clip_image035

When you’re ready, press Save and you’ll be taken back to the Steps screen.

clip_image037

Next select Step 2 to upload your package.

clip_image039

This will take you to a page where you can upload your package. Remember the .XAP file we saved earlier? That’s the one! Select “Add new” to upload it. And when that’s done, click Save

clip_image041

clip_image043

Now it’s time to fill in the details about your app. What language? What version?

clip_image045

What does your app do? What subjects or topics does it relate to?

clip_image047

Next you have to upload the related images. Upload your app icon first, and make sure it is exactly 300px by 300px, otherwise it won’t upload properly. Add a promo image if you want, too.

clip_image049

Here’s where our screenshots come in handy! Select the + to add up to eight screenshots of your app.

clip_image050

When you’re ready, click Save at the bottom of the page. You’ll be brought back to the Steps page, where you can go through the optional steps if you want to add ads to your app, set the pricing options for different markets worldwide, or get the map token you need if you developed an app using a map. Since none of those features apply to this app, we’ll just click “Review and Submit” to go on to the last step!

clip_image051

Now, review your app details and, if you’re happy with it, press Submit! If you want to make changes, select “Go back and edit”.

clip_image053

Congratulations! You’ve now submitted your first app to the app store, without ever touching any code!

clip_image055