Susan IbachTechnical Evangelist
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.
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:
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.
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.
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.
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.
Once you select this option, you will see the following popup. Select Download and when prompted, select “Save and open” to view the files.
Then, extract the files to a place you can easily find them. I like to create a new folder in Visual Studio > Projects.
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.
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.
There are a few options. For the highest resolution screenshots, choose Emulator WXGA.
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.
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.
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!
Then go ahead and close the emulator, and close Visual Studio.
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.
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”.
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.
Input all the basic info for your app. In this case, here is the data for the Halifax app:
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.
When you’re ready, press Save and you’ll be taken back to the Steps screen.
Next select Step 2 to upload your package.
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
Now it’s time to fill in the details about your app. What language? What version?
What does your app do? What subjects or topics does it relate to?
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.
Here’s where our screenshots come in handy! Select the + to add up to eight screenshots of your app.
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!
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”.
Congratulations! You’ve now submitted your first app to the app store, without ever touching any code!
If you are entering Games, Innovation, or World Citizenship in the Canadian Imagine Cup this year you need to submit your entry by Saturday March 22, 2014 8:00 p.m. Eastern Time.
You can download the official copy of the Canadian Imagine Cup rules for 2014.
We are very excited to see this year’s entries, the judges are looking forward to seeing what Canadian students have created!
Which Canadian teams will win Windows 8 tablets provided by our sponsor Intel?
Which Canadian team will represent Canada at the World finals in Seattle in July and possibly meet Bill Gates?
Saturday March 22, 2014 8:00 p.m. Eastern Time.
All the submissions must be provided in the English language.
GOOD LUCK CANADA! WE CAN’T WAIT TO SEE YOUR IDEAS BROUGHT TO LIFE!
Windows Phone App Studio allows you to build elegant apps with nothing more than a web browser. In this post we take a detailed look at how to build an app using one of the provided templates
Many people want to try building an app but don’t have the coding skills or don’t have the time to sit down and code an application from scratch. Windows Phone App Studio lets you build an app for Windows Phone (the preview actually includes Windows 8 apps as well) and all you need is a browser.
In this post you will find step by step instructions to create an app using the My City template. This template is suitable for showcasing something like a city, attraction, region, university or college. You can find more how to posts and resources on our Windows Phone App Studio resources page.
Don’t forget apps published in Canada could earn you rewards through the Developer Movement!
In this post we will cover
1. Go to Windows Phone App Studio and Sign in
NOTE: You will need to sign in with a Microsoft account (you can easily create one at www.outlook.com if you don’t have one)
2. If you are signing into Windows Phone App Studio for the first time you will be asked if the application can access your email addresses in your profile (because when you finish your project it will send you the files for your project by email.) Select Yes to continue.
3. Indicate you accept the Windows Phone App Studio Agreement by clicking on the checkbox and selecting Register.
Once you have successfully logged in to Windows Phone App Studio you will arrive on the My Projects page and you can start creating your first application!
1. Select Start new project to start creating your first app.
In this post we will explore the My City template and see how we can use it to create an app to show off a town, university, tourist attraction, or region.
2. Select My City from the list of templates.
A screen will appear confirming providing more detail about the template you selected. This is a great way to learn more about each of the templates. However we have selected the template we want so
3. Select Create to create a new project based on the My City template.
Now the fun starts! We get to start adding content to our application.
You can see that there are a number of sections we can add: monuments, special places, history, photo album (you don’t have to use all these sections and you can rename sections as well). First things first, let’s give our application a new name, I am going to create an app for a quaint little town in the Ottawa area called Manotick. So I’ll change the App title to Manotick.
1. Change the title to the name of your town, university, or the attraction you want to highlight in your app.
Manotick is a pretty small village, so rather than having a section on monuments and one on special places, I am going to delete the section called monuments and then Edit the section called special places. Instead of deleting a section, you can Edit and rename the section.
2. If there are more sections than you will need, delete the unnecessary sections. Then select Save.
3. Choose the first section you want to modify and select Edit
After I delete the monuments section, when I try to Edit special places I get a warning saying I have unsaved changes. One of the things you want to get in the habit of doing in this tool, is saving your changes. You should save your changes before you go to the next screen. If you forget, no big deal, you will get this warning. All you do is choose Stay on this page, and then choose Save to save your changes. Then you can go ahead and navigate to another page, in this case I have to save before I can Edit the special places section.
Now I can customize the Special places for Manotick.
5. Rename the section if you wish by changing the Section title.
I am going to change the section name to Hidden secrets.
Now I have to choose the layout of how I want to display the list of Manotick’s hidden secrets. This will not be the layout page with all the details. This will be the page which lists Manotick’s hidden secrets so the user can choose an item of interest to get more information. If you click on different layouts you can see a preview of how the page would appear on the left. I plan to include images but I want a slightly different layout from the default.
6. Click on different layouts to see how they appear in the preview, then select your preferred layout.
Now of course I need to provide some data about the special places in my town to display in the application.
1. Select the Data tab to start specifying the data for your app.
You will be presented with two ways to store your data
Since I am targeting people in North America who generally have decent data plans (I don’t think anyone in rural Malawi will be looking up restaurants and things to do in Manotick), I am going to choose Dynamic resources so that I can easily fix typos and add new data.
2. Choose your preferred data storage option and then select Edit data to start adding your data (you will have to save before you edit the data).
Now you can add data to your application. This template assumes that you want to provide a Title Subtitle, Image and Description for each item in the section.
3. Type in the values you want for your application. Don’t forget to delete any rows you don’t want. You can import data from a spreadsheet as well, but for this example we will keep it simple and just type in our data.
NOTE: I recommend saving your data after you add each row, sometimes you will get an error uploading an image and then the Save button gives you an error, and you have to leave the page and come back again. A little annoying, but nothing serious, just a good idea to save frequently, just in case.
When you click on the Image text box you will see a pop up windows that allows you to select an image from one of three locations:
Any images you add must be between 100 and 1000 pixels in height and width. If you have an image that is too large, you can resize it using Microsoft Paint. Open the image in Paint. Choose Resize from the Toolbar. Select pixels and then specify a size between 100 and 1000 pixels for your resized image. Make sure the Maintain aspect ratio checkbox is selected so your image is not stretched or skewed when you resize it.
1. After you have entered the data for your rows, use the back arrow beside the title Edit collection data to return to the section editor
Now that we have added data to our app, take a glance down at the bottom of the section editor. Notice the Bindings. That is what determines the text displayed in the list of entries for this section. When a user runs the app and taps on a particular entry they will see more details about that entry.
If I ran my app right now, the screens would look like this:
I don’t have that much information so I would like to have the image and the text appear on the same page when someone clicks on an entry in the list. Let’s go back to the section editor and see how you can customize the way details are displayed.
Up until now we have only looked at the first page in the layouts which provides a list of the data in our app, the remaining pages determine how the rest of the data will be displayed when a user selects an entry
So if I want to show the image and the description on a single page, I need to select the second page, and then pick a layout that allows an image and a description. I’ve found a layout that will allow me to display all the details on a single page. For my application, I think that layout will work perfectly! Once again I can see a preview on the left and I can control the data that is displayed on the page using the Bindings at the bottom of the page.
You can have as one or more detail pages, do whatever makes sense for your application. For each detail page, you control the layout and use the bindings to control the data you want displayed. When you have multiple detail pages the user will scroll horizontally to move between detail pages.
1. Select a detail page layout
2. Set the bindings to control what values are displayed on each detail page
3. If necessary add additional detail pages so a user will be able to scroll through the details pages and see all the data for the selected entry
4. Delete any unused detail pages
After I finish my changes my pages look like this
You might have noticed a few extra sliders in the bottom right corner of the detail page editor.
These features are all enabled by default, all the user has to do to use the features is bring up the app bar on their phone
These features are all enabled by default, all the user has to do to use the features is bring up the app bar on their phone.
This feature gives the user the ability to have text on the screen read aloud by the phone. You choose which field is read aloud by selecting the binding field as you build the app. The default is the Description field.
To use this feature the user just selects the read icon on the app bar.
This feature will allow the user to Share the text on the screen with someone by email, by text message or by tap and send.
To use this feature, the user just selects share on the app bar and then they select the method they want to use to share the information on the page.
This feature allows the user to create a tile on their phone that will take them directly to this detail page.
To use this feature, the user just selects pin to start on the app bar and then a tile is added to their start screen.
1. For each of your detail pages, use the sliders to determine which features you want to enable for your users.
1. For each section in your app, Edit the section and repeat the process you just completed specifying a name, data, layouts an dfeatures for the main page and detail pages.
You can have up to 6 sections in your app, you can add new sections as well from the main content page. If you want another section like the ones we were working on already, add a Collection.
If you want the same basic columns (Title, Subtitle, Description and Image) choose Add Default columns when you add the collection.
When you edit your new section, you will have to specify the bindings yourself to tell the application what data to display on the summary page.
If there is an RSS Feed you wish to include in your app, you can easily add a section for that to your app (but remember you are only allowed a maximum of 6 sections)
Click on the RSS section type to add the new section to your app
Specify a name for your new section and the URL, the URL of the RSS feed and select Confirm
Don’t forget to edit your new section and pick a suitable layout for the listing page and the detail pages.
If you can’t see any data in the preview on the left you probably have a mistake in your URL.
If you need to change the RSS URL, go to the DATA tab of the section.
If there is an Youtube channel you wish to include in your app, you can easily add a section for that to your app (but remember you are only allowed a maximum of 6 sections)
Click on the Youtube section type to add the new section to your app
Give your new section a name.
Specify the videos to include by Youtube user name or by Youtube search criteria.
Select Confirm to create the new section.
Don’t forget to edit your new section and pick a suitable layout for the listing page and the detail pages. If you can’t see any data in the preview on the left you probably have a mistake in your username or search criteria
If you need to change the search criteria, go to the DATA tab of the section.
If there is a Flickr account with photos you wish to include in your app, you can easily add a section for that to your app (but remember you are only allowed a maximum of 6 sections)
Click on the Flickr section type to add the new section to your app
Specify a section name
A Flickr user name or search criteria to determine which Flickr photos are displayed.
If you can’t see any data in the preview on the left you probably have a mistake in your username or search criteria
You can include Bing search results right inside your app with a Bing section. Users will be able to tap a search result and be brought to the web page selected in the search results.
To add a Bing section to your app select the Bing section.
Specify the section name, country to use for the search context, and search phrase. You may want to try a few different phrases in Bing search to find the phrase that provides the most helpful results for your application.
Don’t forget to edit your new section and pick a suitable layout for the listing page. There won’t be detail pages for a Bing page, because if someone selects a search result the app will launch the browser and take them to the selected web site.
If you can’t see any data in the preview on the left you probably have a mistake in your search criteria
If none of the above section types will do you what you need, you can also add an HTML5 section which basically allows you to write your own HTML5 code to control the data and appearance of the section. Explaining how to write your own HTML data is more than we will get into in this document, but it’s nice to know you have that option when you need it!
1. Add the remaining sections to your application based on the type of data you want to include. Delete any sections you are not using.
I now have a beautiful functional phone application that lets my user explore hidden secrets of Manotick, local restaurants, photos, videos, and news about the village.
In addition to being able to modify the data, layout and functionality of your application. You can also change the look and feel.
1. Select the Themes Tab for your application.
There are three pre-built themes you can choose as a starting point. Simply select the theme whose look and feel you prefer and customize the color to suit your needs.
2. Choose the foreground color, background color, application bar color and even a background image to display.
I like the idea of a background image showing the beauty of Manotick in the background so I am going to go with the Custom style and change the colors and image to something better suited to the content.
You can customize the tile that appears on the Start screen for your user. There are three tile styles to choose from
1. Select the tile template you want for your application
For an app that is trying to show off a quaint village, I think the Cycle Template will work well because it will allow me to show the users different aspects of Manotick and should be fairly eye catching.
Each template will require slightly different content, but basically each will require some sort of title, some sort of icon (possibly different sizes of the icon for different size tiles) and either images which you upload to display on the tile, or for the cycle template a section which contains image the app can cycle through.
You will always have to provide some sort of image or icon for a basic tile because for the app listing page. This icon has to be 160x160 pixels. Remember you can use Microsoft Paint to crop and resize images.
I have selected the Cycle template so I have to specify
A section that contains image data to use as the image source. Flickr and RSS feeds won’t work, it will need to be a section where you have provided specific image content.
2. Specify a title, images and icon for your selected tile template
If you go the Tiles tab you can also edit the Splash screen and lock screen for your application.
1. Select the SPLASH & LOCK tab in the Tiles section
When you select Edit you are asked to select an image to use as the background. I am going to select images of the Mill since that is the best known landmark in Manotick. I will use that image for both the splash and lock screens.
2. Select Edit for the Splash Screen background and specify an image to display in the background
3. Select Edit for the Lock Screen background and specify an image to display in the background
You have now customized the data, layout and appearance of my app. The finished result of the app I was building looks like this:
Now I see that the text is a little hard to read with my selected colors and background image, so I might want to make the background image more faded (you can’t do that in Microsoft Paint, so I actually used Microsoft PowerPoint which has some features for editing images. I added my image to a slide in PowerPoint than used the image editing tool, then I moved the image back to Microsoft Paint and saved it for use in my application)
I have created a faded version of my image and decided to make the text and app bar the same color and now I get something more like this. I should warn you I am infamous for making really ugly screens, so for me this is actually a pretty nice looking app! Usually I ask someone else to fix up my color and layout, but I might just publish this as is!
Phew! Okay give yourself a pat on the back! You have now created an app. Next up we will learn how you can take that app from Windows Phone Studio and either run it in Visual Studio (that’s how I got all my screenshots, the preview is great, but I ran it in the emulator to check the look and feel) or publish it to the store!