How To

The Windows App Studio ‘How-to‘ section will take you through the detailed steps from starting a new app to downloading a package that is ready to be published to the store.

To start creating an app, log in to Windows App Studio using your Microsoft account. Once you are logged in you will land in the home page of the site. If you have already created projects, click on My Projects’ on the top left of the screen and you will see the list of your projects.

Templates

If you are just beginning to create a new project, click on the ‘Start now!’ button, which is on the right side of the screen.

Templates

Getting Started

Select the store where you want to publish your app (Windows 10 or Windows 8.1 store)

With Windows 10 you can publish a single package which will run on all Windows 10 devices (Phone, Surface, PC, and more). For the purpose of this document we will focus on Windows 8.1.

Templates

Templates and Content

Choose between either App Templates or Content Templates.

  • App Templates: Allows you to create a web app from scratch by entering a base URL and various App Bar buttons

Content Templates: Helps the developer to create an actual mobile app. Here you are easily create picture albums, connect to different data sources like Photo Album, Bing, HTML, RSS, Facebook, YouTube etc.

You can choose between 2 types of templates:

  • Empty App Templates
  • Predefined Templates

Empty App Templates and Predefined Templates

  • An Empty App Template, allows you to build an app from scratch by first adding Sections and data sources and then configuring its content and style using your own creativity.
  • Creating an app from a template (Predefined Templates) allows you to start with a previously generated app as a starting point. You can use a pre-configured app and fill it with your own customized content and layout, and you can also add new Sections and data sources. Click on a template tile in order to display more information about that app’s layout and purpose as well as screenshots.

Building your App

Once you select the template you want, insert a name and click on ‘Start with this one!’ Rss Feed

Adding App Logo:

  • Click on the image where it says ‘App Logo’ to change the logo. Rss Feed
  • Once image is selected you can Zoom-in/Zoom-out to get the right scale, and then select the necessary switches under ‘Replace Images’ and then click on ‘Crop’ to set the image. Rss Feed
  • Now, click on ‘Save’ and the App logo will be updated. Rss Feed

What is a Data Source?

A Data Source is simply the content that you want to display in each section of your app – YouTube videos from your favorite channel, your store’s inventory, images from your Flickr account, etc. Data Sources are displayed in your app through Sections. Every Section you create is connected to a Data Source.

Data Sources

What are the different Data Sources?

  • RSS – A list of set of information based on an RSS feed that you enter when creating the data source.
  • Html – A single page of static text that you enter.
  • YouTube – A list of videos with titles and descriptions based on a YouTube channel or search that you enter when creating the data source.
  • Flickr – The Flickr data source allows you to display photos from the hashtag search function as well as from a specific user account, to the users of your app, without requiring them to have a Flickr account.
  • Bing – A list of news
  • Facebook – A Facebook feed from a public Facebook page.
  • Instagram – A list of images based on the Instagram Id
  • Twitter
  • Menu
  • Collection
  • – A list of items with columns of characteristics. This is your personal data that does not depend on a website.
  • Xbox Music

DataSource Types

What can I do with a Collection?

A Collection is a Data Source that allows you to upload data that does not depend on a website such as – store inventory, contact info,a daily menu, favorite musicians, etc. Before entering any data in a Collection, you can define the total possible columns of data. Add a column for every bit of information you want to display for each item and select what type of data it is. There are many types of information you can add: Address, Album Name, Artist Name, Image, Int, E-Mail, Phone Number, Song Name, and String. Changing the data type for each piece of information is important because it allows you to include a variety of additional actions in your app. Your data can be static or dynamic.

Collections

Static Resources vs. App Studio Data Services

For Collections, there are two data storage options: Static Resources and Windows App Studio Data Services

Static Resourcesmeans the data will remain constant and does not depend on an internet connection. If you change the data in Windows App Studio, your app will not automatically update.

App Studio Data Services means the data is stored in Windows App Studio and depends on an internet connection. If you update your data in Windows App Studio, your app will automatically update. This allows you to create live apps that don’t need to be updated when you want to change data. Rss Feed

What is an Application Section?

Application Sections are the pages of your app. You can add up to 6 distinct Application Sections to your app. There are two types: Sections and Menus.

A Section is a group of pages that are connected to one Data Source. All Sections have a main page that shows your data on a high level and can also have additional pages with more detailed data. Your detail pages act as a pivot and will thus display side-by-side once you click on an individual item on your main page. For example, the main page of your Starters Section shows an image with the name of the dish. Click on a dish, and you can see the image enlarged and with a description below. Swipe to the right to see the price or the recipe…whatever you want to show! This is very useful, especially when there is more information about an individual item than what can optimally fit on a single page.

A Menu is an individual page that contains a list of items that can be either Sections or Actions. Section Items link you to a new Section in the app. Action Items let you link to an external website or complete a variety of different actions. You can also create a custom Action Item. Each Section listed in the Menu can be connected to a different Data Source. Menus let you show more information because they can have multiple Sections, so they are very useful when you want to show more information than what can fit in 6 Sections.

  • Sections
  • Pivots

Panorama and hub Controls

Navigation in Windows Phone apps starts with a Panorama. A Panorama is a list of sections the user will see when he or she opens the app. Everything an app can have can be displayed in a different section.

In Windows Phone 8.1 and Windows 8.1 the sections are displayed using the new hub control. For more information see: Guidelines for the hub control

  • Panorama
  • hub

What does "Bind to data" mean?

When you start editing a page in your app, you’ll see a bind to data icon (Bind icon) next to each Content item. Binding means you connect part of a Data Source to a certain area of a page. You can see the options that are available for each Content section by clicking on the binding icon and hovering over Data. Binding

What does "Add an Action" mean?

When you start editing a detail page that depends on a Collection with certain data types, you’ll see a small add an action lightning bolt icon (Add action icon) for each Content item. An action is something that will occur on your phone when you click on that piece of information in your app – call a number, send an email, etc. There are a variety of possible actions, but keep in mind that only the actions that correspond to the types of data in your Collection will appear.

Add action

What are the different Actions?

  • URL
  • Call Phone- Call the number (data type phone) that you entered for that item.
  • Email: Send an email to the email address (data type email) you entered for that item.
  • Custom
  • Nokia Music - Play Artist Mix: Play a music mix in Nokia Music for the artist (data type artist) you entered for that item.
  • Nokia Music - Artist: Display the Nokia Music singer information for the artist (data type artist) you entered for that item.
  • Nokia Music - Search: Search in Nokia Music for the artist (data type artist) or album (data type album) you entered for that item.
  • HERE Maps - Directions: Open a map to show directions from your current location to the address (data type address) you entered for that item.
  • HERE Maps - Address: Open a map that shows the location (data type address) that you entered for that item.

Action types

Changing and Editing Themes

Changing themes in Windows App Studio is easy. Windows App Studio offers a range of predefined themes or the developer can customize every part of the theme.

To change the App themes:

  1. Click on ‘Themes’ (figure 1) Rss Feed
  2. Select either ‘Pre-defined’ or choose your own theme.
  3. Click on “Save” to save the theme.
  4. Note: If you choose the predefined theme any changes done in the custom theme selection will be lost.
  5. Below is the description of each custom option:
    1. App title text
      1. This feature allows the developer to choose an image as the app title.
      2. Example: It helps you brand the app with the company name.
      3. To upload an image to the App Title click on the arrow sign on the right.
      4. You can choose to upload it from either:
        • Local Computer
        • OneDrive
        • Windows App Studio Resource (if you have previously uploaded an image)
          • The image can be resized using the ‘+’ and ‘-’ buttons
          • Once the image is chosen it will appear on the top left of the Windows device as shown in the image above.
          • To change the image simple click on the arrow icon and choose another image.
          • To remove the image simple click on the ‘X’ on the right and the image will be removed.
          • Click on ‘Save’ to save the theme.
    2. Background
      1. This feature allows the developer to choose an image for the background
      2. The developer also has to choose a color for the background.
      3. To upload an image to the Background, click on the arrow sign on the right
      4. You can choose to upload it from either:
        • Local Computer
        • OneDrive
        • Windows App Studio Resource (if you have previously uploaded an image)
          • The image can be resized using the ‘+’ and ‘-‘ buttons
          • Once the image is chosen it will appear on the background of the Windows device as shown in the image above.
          • To change the image simple click on the arrow icon and choose another image.
          • To remove the image simple click on the ‘X’ on the right and the image will be removed.
          • Click on ‘Save’ to save the theme
    3. Appbar background
      1. This changes the color in the App Bar
      2. Click on ‘Save’ to save the theme
    4. Appbar foreground
      1. This changes the color of the menu button in the App Bar.
      2. Click on ‘Save’ to save the theme.
    5. Box background.
      1. This changes color of the layout background.
      2. Click on ‘Save’ to save the theme.
    6. Box foreground
      1. This changes the test in the layout.
      2. Click on ‘Save’ to save the theme.
    7. Page title, Title, Subtitle, Description
      1. This setting helps you in making changes to Font Color, Size and Style.
  6. As you chose the theme you can get the preview of it in Phone.
  7. Click on the ‘Windows Preview’ button to check how it would look in Windows Tablet/Laptop/Desktop.
  8. Once you have chosen the theme click on ‘Save’ to save the theme. Rss Feed

Changing and Editing the Tiles and Splash Screen on Windows 8.1

Tiles

  • To change the tiles layout click on “Tiles”. Rss Feed
  • You will find 3 options for the tiles layout:
    • Flip template: The flip tile template flips from front to back, offering application additional data. Click on ‘Save’ and you can see the images in the simulator. Rss Feed
    • Cycle template: The tile cycles through up to nine images. Select the Image source. You can either use Groove Music, Photo Album or create a New Collection as the Image source. Once selected these images will appear on the device and cycle through 9 images. Click on “Save” and you can see the images in the simulator. Rss Feed
    • Iconic template: The iconic template displays a small image in the center of the tile, and incorporates additional data if needed. Rss Feed
  • Splash Screen

    • Click on the “Splash” tab. Rss Feed
    • To change the image click on “EDIT” and choose the image. You can choose different images for Phone and Client devices. Rss Feed
    • Click on “Save” to see the preview. Rss Feed

Windows 10 Tiles

  • To change the tiles layout click on “Tiles”. Rss Feed

In the current release there is a new feature called the Live Tiles editor. In any Windows 10 App Studio app you can choose from:

Default Tiles

Created on the logo page, are images of different sizes generated based on app logo.

Live Tiles

You have 2 different options:

Static:The content is configured at design time and is included on the app package.

Dynamic:The content can be bound from one of the sections you have configured in your app (except menu and html). The tile will be refreshed every 30 minutes once the app is installed getting data directly from the data source of the sections you’d selected in the Tiles editor. Rss Feed

  • Select the tile view Rss Feed
  • You will be able to find the preview of the tiles on the right hand side of the screen. Furthermore, you can customize your tiles layout in the ‘Edit your tiles’ section.
  • There are 2 properties you can configure here:

Branding: While a notification is being displayed, you can control the branding on the bottom of the live tile (display name and corner logo) via the branding attribute on the notification payload. You can choose to have “none” displayed, just the “name”, just the “logo”, or both “nameAndLogo”.

Display Name: This property overrides the display name while the notification is being shown. If not present Windows will show the app name. Rss Feed

Groups

Groups allow you to semantically declare that the content inside the group is related and must be displayed in its entirety for the content to make sense. You only can add 2 groups maximum.

Subgroups

Subgroups also allow you to divide data into semantic sections within a group. For live tiles, this visually translates to columns. You only can add 5 subgroups maximum.
The Weight property allows you to control the widths of columns. Is represented as percentage. For example, one subgroup with weight 80 takes the 80% of the total width.
Inside a subgroup you can include 1 of more elements of 2 types:

Text

Used to display text. Contains the following configurable properties:

  • Content: The text to display. In case the tile is dynamic you can select from 1 of the text fields of the section you selected.
  • Wrap: Sets text wrapping on a text element.
  • MaxLines: Maximun number of lines to dyplay
  • Content: Makes the text 60% opaque, typically resulting in text that is more gray than white.
  • Style: Control the font size, color, and weight of text elements: Rss Feed

Image

Used to display images. Contains the following configurable properties:

  • Source: With the image uploader & cropper you can upload your own image. In case the tile is dynamic you can select from 1 of the image fields of the section you selected.
  • Remove Margin: When selected removes an 8px margin between any content above or below the image.
  • Crop: You can select circle if you want your image appears inside a circle.
  • Overlay: Accepts integers from 0-100, with 0 being no overlay and 100 being full black overlay.
  • Placement:
    • Inline: The image appears mixed with the text elements.
    • Background: Make the image appears as background of the current subgroup
    • Peek: The peek image uses an animation to slide down/up from the top of the tile, “peeking” into view, and then later sliding back out to reveal the main content on the tile.

Tiles Template

Additionally, you can select one of the predefined templates. And if you want customize it. Rss Feed

Getting the app done

App Done

Adding Sections and Content

Now it is time to add/edit Application Sections and data sources.

Click on ‘Content’ to add/edit the data sources in your app. Rss Feed

Here you can add and edit numerous data sources.

Configuring RSS Feeds

  • Click on the ‘RSS’ button in ‘Add Sections’. Rss Feed
  • This will pop-up a screen to add the RSS section. Change the section name as desired, enter the RSS URL, and then click ‘Confirm’.Rss Feed
  • Once you click on ‘Save’, slide through the simulator and you will see the RSS feed appearing as it would in the app.Rss Feed

Configuring HTML sections

  • Click on the ‘HTML’ button in ‘Add Sections’.Rss Feed
  • This will pop-up a screen to add the HTML section. Change the section name as desired, enter the HTML, and then click on ‘Confirm’.‘Confirm’.Rss Feed
  • Once you click on ‘Save’, slide through the simulator and you will see the HTML appearing as it would in the app.Rss Feed

Using the YouTube Data Source

Once you add the YouTube data source, you would see add YouTube section page. Rss Feed

  • 1. Set the section name to whatever you’d like
  • 2. Next, you will need to select and existing or create a new YouTube key.
    • To create a new key, click on “Create new API key”
    Rss Feed
  • 3. This will take you to a new screen where you add a new API key: Rss Feed
  • 4. Click on ‘Create and maintain YouTube API Key’. This will connect your free YouTube developer account with your Windows App Studio app
  • 5. This will take you to the Google Developers page. Login with your standard Google user name and password.Rss Feed
  • 6. Click on ‘Create Project’.Rss Feed
  • 7. Enter a ‘PROJECT NAME’  and click on ‘Create’.Rss Feed
  • 8. Now, the YouTube API needs to be switched ON. To do this
    • a. Click on ( Rss Feed ) Rss Feed
    • b. Click on  ‘API Manager’. Rss Feed
    • c. Click on ‘YouTube Data API’ and click on ‘Enable API’. Rss Feed Rss Feed
  • 9. Now we need to pass the credentials to the App. To do this click on ‘Credentials’ and then click on ‘Add Credentials'. Rss Feed
  • 10. Click on ‘API key’ and then on ‘Browser key’ Rss Feed Rss Feed
  • 11. Click on ‘Create’Rss Feed
  • 12. Copy the API KEYRss Feed
  • 13. Paste the API key in the Windows App Studio Section and click on ‘Validate’.  Ensure that there are no additional spaces before or after the API Key. This is a common issue that can cause errors. Rss Feed
  • 14. If everything was successful, the API will be registered.
  • 15. You will be able see the key name in Data Configuration (if you are not able to see the key name click on ‘Refresh’) Rss Feed
  • 16. Select the ‘API Keys’ and type in the YouTube channel name.
  • 17. You will be able to see the channel videos in the preview screen Rss Feed

Using the Flickr Data-Source

The Flickr data source allows you to display photos from the hashtag search function as well as from a specific user account, to the users of your app, without requiring them to have a Flickr account.

Add the Flickr data source to your application sections. This will open a dialog box to add the Flickr section. Rss Feed

From here we have two different configuration options. The User configuration, or the Tags configuration. Selecting tags will show all photos for a given tag. Selecting a user will show all photos in that user’s photo stream. We will start with the Tags configuration as it’s the quicker of the two options:

  • Select Tags from the dropdown and enter your Tag, or tags separated by commas and then press confirm.

Now we will work with the User configuration option:

  • Add the Flickr data source to your application sections. This will open the following dialog boxRss Feed
  • Open a new browser tab and navigate to a site that helps find your user name (Flickr Account ID), such as http://idgettr.com/ and paste in the full http link of the user account you would like to find the user name for and press the find button.Rss Feed
  • Copy the Flickr ID and paste it into your Windows App Studio Flickr Datasource in the proper box shown in the image above, then press confirm to display the selected user’s picture feed.
  • Click on Save Rss Feed

Using the Bing Datasource

  • Click on the ‘Bing’ button in ‘Add Sections’ Rss Feed
  • This will open a new screen to add a Bing section. Change the section name as desired, select the country from the drop down menu, enter the Search items and click on ‘Confirm’.Rss Feed
  • Click on ‘Save’ and slide through the simulator to see the RSS data. .Rss Feed

Configuring Facebook Datasource

Click on the data source to open the Add Facebook dialog

  • 1. Change the Facebook section name if required.
  • 2. Click on ‘Create new API Key’ to create a new Facebook API key.Rss Feed
  • 3. This will take you to a new screen to add the API key and information.Rss Feed
  • 4. Click on ‘Create and maintain Facebook API Key’ and login to your Facebook account.
  • 5. Click on ‘Add a New App’.Rss Feed
  • 6. Select the platform as ‘Website’.Rss Feed
  • 7. Type in the Facebook app name and click on ‘Create New Facebook App ID’.Rss Feed
  • 8. Choose a ‘Category’ and click on ‘Create App ID’.Rss Feed
  • 9. Type in the Windows App Studio URL on the following screen and click on ‘Next’.Rss Feed
  • 10. Scroll down and click on “Skip to Developer Dashboard”.Rss Feed
  • 11. Click on ‘Show’ so that the App Secret key is visibleRss Feed
  • 12. Copy the App ID and App Secret on the Facebook DataSource page and click on ‘Validate’.   Make sure there aren’t additional spaces before or after your App ID and App Secret. This is a very common issue that will cause errors.
  • 13. This will take you to the below screen and the Facebook app key will be visible.
  • 14. Click on ‘Refresh’ and you will be able to see the Data Configuration drop down menu updated with the newly created Facebook DataSource name. Type the page name and click on the Search icon.
  • 15. Select the correct page and click on ‘Select’.Rss FeedRss Feed
  • 16. The page field will get updated. Now click on ‘Confirm’.
  • 17. You will be able to see the Facebook page updated in the Preview screen.

Using the Instagram Data Source

The Instagram data source allows you to display photos from the hashtag search function to the users of our app, without requiring them to have an Instagram account for up to the minute picture sharing with minimal hassle.

Utilizing the Instagram data source in your Windows App Studio project takes a few different steps. We will use this guide to walk you through the process:

For Projects with a New Instagram Datasource

  • Click on the Instagram data source and click on ‘Create new API Key’. Rss Feed
  • This will take you a screen where you manage the API key:Rss Feed
  • Now click on “Create and maintain Instagram API key". Clicking that button will take you to the following where you will click on the “Register a New Client” button.Rss Feed
  • You will need to fill in all of the necessary fields that Instagram requires for client creation. Once you fill in all of the previous fields, fill in the captcha and press the “Register” Button to complete the Instagram Client creation, which should then automatically redirect you to the previous screen. Rss Feed

*Note – If you do not have a website URL of your own, you can fill in both the Website URL field and the OAuth Redirect_URL Field with http://appstudio.windows.com

  • Now you will want to copy the CLIENT ID set of digits and bring them back to the Windows App Studio Auth Key section and paste them in the Client ID Field as show below and the click Validate. Once you do that, it will bring you back to the Windows App Studio Auth key management section.
  • From here open the Windows App Studio project that you would like to add Instagram to, and click on the + sign to add Instagram to one of your Windows App Studio sections, the Box shown in figure 9 will pop up.
  • Select the data configuration you just created, enter a hashtag search without the hashtag and press confirm. This will complete the configuration of the Instagram section and display the images with the hashtag you chose

For Projects with an Existing Instagram data source

For those of you who have used the previous iteration of the Instagram data source and now need to fix it, the following steps are for you.

  • Open Windows App Studio and pick the project with an Instagram data source, click “Edit” to the right of the project and that will open you to the page where you can edit all of your sections.
  • Find your Instagram section and click Edit.
  • From there click on the Data tab, which will bring up all the information related to creating your Client for Instagram. Then click on the blue words “Click here to create a new Instagram key”
  • From this point you will be able to follow steps 1 through 7 in the previous section of this post titled “For Projects with a New Instagram data source”.

*Note – Account sensitive information hidden for security.

Using the Twitter Data-Source

The Twitter data source allows you to display Tweets from a timeline or hashtag search to the users of your app, without requiring them to have a Twitter account.

Using the Twitter data source in Windows App Studio project takes a few different steps. We will use this guide to walk you through the process step-by-step.

  • 1. Add the Twitter data source to your app by clicking the Twitter Datasource. Once added to your app it will open a dialog to add Twitter Rss Feed
  • 2. Click on “Create new API Key” which will take you a screen to manage the API keys. Rss Feed
  • 3. Click on ‘Create and maintain Twitter API Key’. This will take you to https://apps.twitter.com and once there, log in to your Twitter account.
  • 4. Now you will click on the gray button in the top right with the text “Create New App”. From here you will need to fill in all of the necessary fields that Twitter requires for app.Rss Feed
  • 5. Once you fill in all of the previous fields, check the box and click the box with the text “Create your Twitter application”. It will bring you to the Application Settings page, which will display all of your relevant Twitter information.
  • 6. The final step on the twitter site will be to generate an access token. To do this, at the top of the page click on the blue text “Keys and Access Tokens” and then click “Create my access token” Keep this information ready for the next steps.Rss FeedRss Feed Rss Feed
  • 7. Now that you have this information, go back to Windows App Studio and input all of the relevant data requested for your Twitter Data-Source in the spaces. Make sure you have not copied any extra spaces before or after the characters.
  • 8. From here you can now return to the Twitter data source section and use the “Data configuration” dropdown menu to select the new Twitter Key you just provided
  • 9. Finally, press the confirm button and go see your newly populated twitter data in your Windows App Studio app.

*Note – Account sensitive information hidden for security.

*Note - To maintain the Twitter auth keys you possess, simply click on your username (email address) in the top right corner of the Windows App Studio website and it will show you all of the different keys you have registered and from there you can add more or delete ones you no longer need.

Configuring the WordPress data source

  • 1. Click on the add WordPress button Rss Feed
  • 2. This will take you to a new screen
  • 3. Enter the ‘Section Name’
  • 4. Enter the URL in the ‘Enter Domain’ section and choose the posts from the dropdown list.
  • 5. Click on ‘Confirm’ and click on ‘Save’ Rss Feed
  • 6. The WordPress will be available in the preview Rss Feed Rss Feed

Configuring Menu and Collection

Add a Menu by clicking on ‘Menu’ data source under the Add Section

Then you can edit an Application section by clicking on the pencil. For a Menu, you will see its Menu Page and Menu Items that can each be expanded. To add Menu Items, you must first click on the lines ( Rss Feed ). To edit the Menu layout click on the pencil ( Rss Feed ).

For a Collection, you will see its Collection Page that can each be expanded. To add items, you must first click on the lines icon ( Rss Feed ). To edit the Collection layout click on the pencil ( Rss Feed ). Rss Feed

When you edit a section from ‘Section Title’ in the top right of the screen and change the layout by clicking below List page/Detail Page and by selecting the desired layout. Rss Feed

Based on this layout you will have to ‘Add’ data and then ‘Bind’ data. This is explained in detail below.

Add data to the collection:

To add data click on ‘Data’ tab and then click on ‘Create new’ Rss Feed

Here is an example of data configuration Rss Feed

Using the Groove Music data source

  • Click on the add GrooveMusic button
  • Change the Groove Music section name if needed.Rss Feed
  • Click on Search as highlighted aboveRss Feed
  • This will take you to a new screen.
  • Type in the artist name in the text box and click on search. This will display the artist main page. Click on Select and then click on ConfirmRss Feed

Using the Web Application Template in Windows App Studio

The WAT Template in Windows App Studio allows you to turn your mobile friendly, responsive websites into a top quality Windows & Windows Phone App with only a few clicks.

  • Open Windows App Studio and Press the “Start New Project” button.
  • Choose “Web App Template”. If your project is targeting Windows 8.1 choose Web App template and if your project is targeting Windows 10 choose Hosted Web App template. Rss Feed
  • Enter your App Name. Choose a preview device and click on “Start with this one!”Rss Feed
  • Enter the URL Of the website that you would like to turn into an app into the Base URL box.Rss Feed

*Note – For best results, you will want to use a mobile-friendly and responsive web site.

  • From here, press the “Save” Button in the top right corner. That’s it! Your website is now wrapped and ready to be turned into a Windows and Windows Phone app.

Connecting to Services using API Keys

Most of the services we are using to connect to external services are changing their support policy, and are deprecating the anonymous access to their APIs.

This implies that all the apps you created in the past, and use any of the affected data sources will stop working, to fix it you need:

  • Create a developer account in the affected provider (ex: YouTube, Facebook, Twitter, and Instagram).
  • Register your application
  • Create a developer or API key. In some cases, the Client Secret might also be needed. Look in the API manuals for detailed instructions for each provider.
  • In Windows App Studio, associate a given key or keys with the project you are creating.
  • Note that you can use the same keys in different sections and apps.

Sideload your app directly on to your device from Windows App Studio site

Sideloading the app is an easy way to check how your app will look on the device. It is also an easy way to share your private app (ex: Birthday Invitations, Wedding invitations etc.) with your friends and relatives.

There are two steps to installing a sideloaded app: Install the certificate and install the app.

Install the certificate on Windows Devices

Before sideloading a Windows App Studio app on your Windows device, you will need to deploy the certificate. This process needs to be completed for each device.

We provide a PowerShell script to help you with the certificate installation. Note: this script does not work on Windows RT, so you will need to install it manually on an RT device.

  • Once the app is ready to get installed click on “Finish” and click on “Generate”.
  • This will pop-up a window to generate the app Rss Feed
  • Uncheck ‘Publish Packages’ and select only ‘Installable package’ as shown in the figure below. Rss Feed
  • Now click on “Generate”.
  • The build will be queued and then will start generating the app.
  • Choose the target device
    • Windows 8.1.

      Steps to install the certificate automatically.

      1. Click on “Install Windows 8.1 Certificate”. Rss Feed
      2. This will download the certificate files. Now, uncompress the files and right click the file Add-RootCertificate.ps1 and select “Run with PowerShell”. Rss Feed
      3. Click on ‘Open’
      4. Hit ‘Enter’ Rss Feed
      5. Click on 'Yes’ (if asked)
      6. Hit R and Hit ‘Enter’. Hit Y and Hit ‘Enter’ Rss Feed
      7. This should successfully install the certificate

      Steps to install the certificate manually.

      1. Once you have downloaded and uncompressed the Add-RootCertificate.zip, you must double click the file SymantecEnterpriseMobilityRoot.cer and select the option to install the certificate. You must install in Local Machine and select the certificate store to be ‘Trusted Root Certification Authorities’. Rss Feed Rss Feed Rss Feed

Install the App on in Windows Devices

On Windows devices sideloading requires that you have had deployed the certificate and have a free developer account in Windows Store. We provide a PowerShell script that checks this requirements for you. Once you complete requirements the first time, the next time you install another app, it will only ask for you to complete the sections unique to that app.

Download the installable package and click unlock to ensure the package can be properly installed.

  • Install the App in Windows Devices

Now uncompress the zip file, right-click the Add-AppDevPackage1.ps1 and select “Run with PowerShell”. Then follow the screen instructions as shown in these screenshots.

  • Install the App in Windows Devices
  • Install the App in Windows Devices
  • Install the App in Windows Devices

Installing certificate on Windows Phone

  • Once the app is ready to get installed click on “Finish” and click on “Generate”.
  • This will open a screen to generate the Windows 8.1 app. Rss Feed
  • Uncheck ‘Publish Packages’ and select only ‘Installable package’ as shown in the figure below. Rss Feed
  • Now click on “Generate”.
  • The build will be queued and will start generating the app
  • Once it is complete, choose your target device and click “Download package”. Rss Feed
  • Launch the camera in your Windows Phone. Click on settings icon on the top right hand corner. Click on ‘Lenses’ and select ‘Bing Vision’.
  • Now click on ‘Install Windows Phone 8.1 Certificate’. Rss Feed
  • Scan the QR code that will appear on the screen
  • Click on the Website URL on the Phone (it might ask you to login with your Microsoft Account).
  • Click on ‘Open’.
  • Click on ‘Add’.
  • Click on the Windows icon on the Phone.
  • Now the certificate has bene installed on the phone.

Installing App on Windows Phone

  • Once the Certificate is installed in your Windows phone, it is ready install the app.
  • Launch the camera in your Windows Phone. Click on settings icon on the top right hand corner. Click on ‘Lenses’ and select ‘Bing Vision’.
  • Point the camera to the QR code of your app Rss Feed
  • Click on the Website URL on the Phone (it might ask you to login with your Microsoft Account)
  • Click on ‘Open’. This will download the package.
  • Click on ‘Install’.
  • Hit the ‘Windows’ key on your phone and then search for your app to open it.

Deploying the app to a Windows device

There are two ways to get the app into your Windows Device:

  • Publish the app to the Windows store and through your device download it from the store
  • Sideload your app directly on to your device from Windows App Studio site

Publishing the App in the Windows Store

Here are the prerequisites to publish your app in the Windows/Windows Phone store:

  • Dev Center Account
  • Reserving App Name and getting app info
  • Certification
  • App Screenshots

Dev Center Account

To publish the app in the Windows store, you will need a Dev Center account. If you do not have a Dev Center account already, register at either Windows Dev Center website. There is a fee for registration.

Certification

Follow the certification guidance to give your app the best chance of passing certification requirements for Windows Phone and Windows.

App Screenshots

In order to submit your apps to be published to the Windows store, you will need at least one and as many as eight screenshots from your app. The publish package contains a sample of screenshots for your app. However, you can always use your device or the emulator in Visual Studio to select the exact screenshots you want.

More information on Dev Center Accounts

Windows Phone Store instructions

Reserving App Name and getting app info

  • Login into http://dev.windows.com/publish
  • Click on ‘Dashboard’ on the top right hand corner
  • Click on ‘Create a new app’ you will find this on the left hand side Rss Feed
  • Type in your app name to check availability and to reserve app name Rss Feed
  • Click on “App Identity”. It will be under “App Management” Rss Feed
  • Make a note of Package/Identity/Name, Package/Identity/Publisher and Package/Properties/PublisherDisplayName. These details are important to associate your Windows App Studio app with the store Rss Feed

Getting the App ready to publish in the store

  • Click on “Settings” Rss Feed
  • This will open the Settings screen. Rss Feed
  • Update the App Title and App Description, and then select the Language.
  • Now click on ‘Associate App with the Store’. This will open a the Associate App with Store screen. Rss Feed
  • Update the App Identity, App Display Name, Publisher ID and Publisher name from Windows Dev Center (Check the Reserving App Name article to understand how to get this information).
  • Click on “Confirm”.
  • Now your app is ready to be published.

Publishing the App to the Store

  • Once the above details are updated in the app, the app is ready to be published.
  • Click on “Finish” and click on “Generate”.
  • This will pop-up a new window as below: Rss Feed
  • Select Publish package.
  • Now click on “Generate”.
  • The build be queued and will start generating the app. Rss Feed
  • Once the package is generated you will see 3 options:
    • Download Source Code: This will download the source code of the pacjage.
    • Instalable Package: This is to install the app in your device
    • Publish Package: This package is for publishing to the store
    Rss Feed
  • Click on 'Download package'. Rss Feed
  • The downloaded package (.zip file) will contain the screenshots and the package file.
  • Now, login to http://dev.windows.com/publish
  • Click on the App name that you have reserved previously.
  • Click on “Submission 1” Rss Feed
  • Update the details in each link. Rss Feed
  • Once updated it will show the status as "Updated" Rss Feed
  • Click on "Submit to the Store".
  • Once your app goes through certification it will be submitted to the store.
  • After the information propagates through the Windows Store servers, you will be able to search for your app and download your app from the store

Multilingual Support

When you create an app, you can easily change the default language that will be displayed in the Windows Store in the first "App Information" step. In order to add additional languages to your Windows Phone application, you need to download the source code for the application and edit it using Visual Studio.

The initial resource file you use to capture UI strings that are being localized is called AppResources.resx and is located in the app’s Resources folder of your project.

On the project’s Properties page in the Supported Culture box, select the language(s) you would like your app to support. Visual Studio will create a new resource file for each supported language that is an exact copy of the default language resource file (AppResources.resx). It will automatically rename it using the culture’s locale code, such as AppResources.en-US.resx.

Replace the default language values in each supported language resource file with translated values, and you are done!

For additional information, please visit: How to build a localized app for Windows Phone.

How do I enable ads on my app?

  • In order to enable advertisements in your Windows Phone application, you need to do the following:
  • Obtain an AdUnitId and ApplicationId keys for you App from the Dev Center: Rss Feed
  • For more information about App monetization, please visit: Get started with Microsoft Advertising and Ads in Apps Rss Feed Rss Feed Rss Feed

How do I run "Windows App Certification Kit"?

If you plan to publish your application, you must follow the Windows Store requirements or Windows Phone Store requirements in order to pass certification.

You should use the Windows App Certification Kit (WACK) before submitting to the store. To run this tools for App Studio Packages you must follow these instructions:

Prerequisites

Windows Phone 8.1

  • Rename the file from .appxupload to .zip
  • Uncompress the zip file to extract the .appx file
  • Run the WACK tool and select “Windows Phone Validation”
  • Indicate the absolute path to the .appx file you extracted previously
  • Once the tool finishes, it will ask where to store the output report as .xml

Windows 8.1

  • Install the Windows Software Development Kit (SDK) for Windows 8.1
  • Uncompress the zip file to extract the .appx file
  • You will need to run the command line version of the tool appcert.exe, located at: %ProgramFiles(x86)%\Windows Kits\8.1\App Certification Kit\ with the next parameters: appcert.exe test -apptype windowsstoreapp -appxpackagepath <PATH_TO_APPX> -reportoutputpath <PATH_TO_OUT_REPORT>.xml -resettesting
  • Wack WP8.1Download the Publish Package
  • Wack W8.1Download the Installable Package