Windows Phone App Studio – Part 1 – Getting Started
Welcome to the first part of the Windows App Studio Tutorial. In this article we will be looking at what the online tool of Windows Phone App Studio provides us. We will also see how anyone can get started (and I mean anyone, more on this later) to create a Windows Phone app in a few simple steps.
As long as you have an idea you can jump right in and start creating your app. Whether you are a seasoned developer or just want to get your feet wet in Windows Phone development. Even if you are an 8 year-old and want to have your favorite cartoon shows available to you, Windows Phone App Studio has is covered. Yes, I did say “8 year old”. An 8 year old from the Boston area attended one of our Microsoft Workshops and built his Kid Zone app in a few hours. He actually built the app faster than his father.
Are you hooked? Ready to get started? Let’s go!
Once in, click on “Start New Project” to begin your app building.
You will now be presented with a bunch of templates to begin your project.
You can use one of the predefined templates to begin or you can create you custom app by choosing “Empty App”.
For the purposes of this discussion we will be going through the elements of the tool so lets choose “Empty App”. Feel free to go back in and create as many projects that you want by exploring all of the starter kit templates. One item to note: with the most current update you are able to choose a Web App Template. That means if you have a mobile website you can use this template to apply a “wrapper” to create an application out of it.
Once we do that we are presented with a pop up and lets click on “Create” to start building.
We now are able to view our dashboard for our “Empty Project”. This will be the location where we create views and navigate through the tool to build our app. We are going to build a “real world” application. I have created content for a fake resturant and I will walk thourgh on how to make an app for it.
The upper left corner we can enter the name of our app and we can choose an icon. If we click on the Windows icon we are presented with the option to upload an image from our computer, select an image from our OneDrive or use a resource from Windows Phone App Studio gallery.
Looking around the dashboard you will see a few more areas of interest. The first being the Content tab which contains our Main sections. The tool allows us to have up to 6. Think of these as screens or “pages”. Underneath those sections are Basic and Advanced sections tools to add to one of six Main sections. We will explore a few in detail.
Let’s select RSS. Upon doing so, we are required to enter some information. “Section Name” and “Data Configuration”. This is where your idea is needed. In our example we are building an app for an imaginary bistro. In order to fill out all of these sections we need to source some data. With the RSS section we need to fill the “Data Configuration” text box with an RSS data source. If you do not know what RSS is, here is Wikipedia definition:
RSS feeds enable publishers to syndicate data automatically. A standard XML file format ensures compatibility with many different machines/programs. RSS feeds also benefit users who want to receive timely updates from favourite websites or to aggregate data from many sites.
That is exactly what we are doing. Aggregating from a few sites in a standard format. I am going to head on over to my site, Imagine Bistro and look for the RSS link to
the RSS Feed or an RSS icon to click on. Once I find either of them, I can click on the link to get the RSS Feed URL. By clicking on that icon I found in the header, I am presented with the RSS “feeds”. This feed gives me 2 main categories that I set up, Specials and Entertainment.
I could just take that feed and have one “combined” feed or I can look to see if a site has multiple feeds for multiple pages. That is what I am going to do. I will get an RSS feed for Specials and one for Entertainment.
I chose the Specials feed and copied the URL and placed it in the “Data Configuration” text box.
Once you confirm your selection you will see that the Windows Phone Simulator is populated with content from your RSS Feed.
Congratulations! Your app is complete! Well, not really. We need to add a few more things but that is how you work with the RSS section.
I will add another section that is RSS and use the Entertainment field. My first 2 sections will be the Specials – which will be updated by the staff on a daily basis, and Entertainment, which might be updated weekly.
Let’s customize the layout a bit for the Specials section. We do this by selecting “Edit” under the Specials section (Make sure you “Save” first).
In this section of the tool we can see there are two main call to actions. The first being the “Pages” and the second being the “Data”. If you wanted to change the RSS Feed that you are using, click on Data and enter a new RSS Feed URL.
Under “Pages”, click on a layout that is suitable for you and your RSS feed. I choose the layout with the larger image with text under it. Some RSS Feeds contain images and others do not. It is solely up the the discretion of the publisher. So you may either want to play with the different layouts or choose a different RSS feed.
I chose the picture frame one. It looks pretty good. However, you can see that the image is shown along with the title and description/summary. The summary is cut off and I would rather have the user click on the title or image to view the full article on another page.
To fix this, I will remove the “Subtitle” from the “Binding” section by clicking on the blue icon next to the text box and choosing “clear”. As you clicked on that icon you probably saw a few more fields that you can bind to the view. If you wanted Author or something else you can select that and it will be bound to the view in that location.
Click “Save” and select the box next to the blue box that is selected. This is the “detail” view of the screen. Now you will be presented with the full article. Here you are presented with the same type of screen where you can change the layouts and bindings that are available.
You are also presented some other options on the right hand side called Page Extras.
- With the “TextToSpeech” setting it’s possible to “hear” the text of the page spoken. In order to have that work, the Bindings will need to be set on what will be spoken.
- “ShareText” activates a sharing button (twitter, Facebook, email, sms …)
- “Pin To Start” allows you to pin the page to the Start -Screen.
Play around with those to see which one makes sense for your app. I chose “ShareText” since I would like users to share the articles.
Other Basic Sections
I am not going to step through each of the other basic sections. I will just highlight a few things about each one.
- RSS – A list of sets of information based on an RSS feed that you enter when creating the data source. (what we just went through)
- Youtube – A list of videos with titles and descriptions based on a YouTube channel or search that you enter when creating the data source. An item to note about search, it is a true search. So as an example with our app, if my search terms are “bistro food dishes” the search will return everything that was tagged “bistro food dishes”. Which is what you may want, but it might also return videos tagged “food” that might not be appropriate. Be sure to play with that a bit. If you know the user or a channel, that is a better way.
- Flickr – A list of images and their corresponding data based on a Flickr UserId or search that you enter when creating the data source. Same thing holds true with the search.
- Bing – A list of news search results based on a Bing search that you enter when creating the data source.
- Html – A single page of static text that you enter. There are limitations to the HTML source such as embedding many images and links. Play around with it and it might work for you.
- Facebook – This will pull in the public news feed from a Facebook page.
There are 2 advanced sections, Menu and Data Collection.
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 (link to What are the 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.
I am going to add a Menu section which will contain 5 sub pages for each of the Bistro’s menus.
Now each of the sub pages or sub sections can contain any of the elements we discussed above (Facebook, RSS, YouTube, etc.). What I will be adding is Data Collections.
Lets talk about “Data Collection”. This is data that is not dependent upon a website, like the RSS or YouTube searches. Think of it as your own database. It could be a list of employees or inventory of products. In our example I will use menu items.
Click on the section called “Data Collection” and you will be presented with another window to fill out.
The “Section name” will be Entres
For the “Data Configuration” in “Collections”, there are two data storage options: Static Resources and App Studio Data Services.
Static Resources means the data will remain constant and does not depend on an internet connection. If you change the data in App Studio, your app will not automatically update.
App Studio Data Services (or Dynamic) means the data is stored in App Studio and depends on an internet connection. If you update your data in 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.
I am going to choose Dynamic since Entres might change on a weekly basis, I can go into the App Studio and change it as I see fit and it will get reflected to everyone who installs my app. This could be good for game schedules and scores as an example or events, basically anything that changes on a frequent basis.
I will then click “Confirm”, then when back on the Dashboard I will click “Save” and then edit my new section.
If you see, there is nothing bound to the view. That is becuase we did not define our Collection and provide it any data.
Click on “Data” and then click on “Create New”. This is were we define our collection. Think of it as a database, datatable or even an Excel spreadsheet. What are the fields or colunms of data that we need. For our example of Entres we will need the following:
- Item – text
- Description – text and multiline
- Price – text
- Image – image
You have the option to define the data types for the fields such as address and phone number, so make sure you define accordingly. You can also choose if the data entered needs to be multiline or not.
Once defined, we can add data to our collection. Click on “Edit Data” and we can start putting data in the cells.
We can do a few things from the “Edit collection data screen”. We can “Create New”, which will allow you to enter text in form fields or we can import/export data. This is useful if we have a lot of data, such as an employee directory or schedules or in our case menu items. An item to note, there is a limit to the number of “rows” in your data collection which is currently at 40 per collection.
Here I will choose “Import”. I have a CSV file already created with the fields we defined above. They are located at my info page to download. For this example I am downloading and importing the Entres.csv.
Once imported you should see the data populated.
After you save your data you then can go back to the edit section page. Here you will notice that nothing is being presented in the view. That is because there are no bindings set. What I like to do first is choose a layout, then I will set the bindings. I am going to choose the 3rd selection which shows a little thumbnail, title, subtitle and description.
I then set the bindings to each of those fields. Now you can play around with the layouts and bindings as you see fit.
What I want to bring to your attention with my data collection and this layout, is the fact that the layout is not aligning the “Price” text under the description. The other layouts do not suit my needs either. I might have to adjust my data collection to make it work better with the layouts provided. In Part 3 of my tutorial I am going to show how we can fix this from source code.
For my example app, I will do this a few more times to add all of the other menus I have in CSV files. Add as you see fit.
Remember, if you add icons in each of your sections, they become your menu icons on the menu page.
If you want a bit more detail on some of the items we discussed please look at the How-To section of App Studio.
This section is pretty straightforward. It is where you style you app. You can change colors and upload or choose a background image. I added a custom background for my app to make it more “Bistro” friendly.
A Tile is an image that represents your app and acts as a shortcut on the Start screen of your device. All apps have a default Tile to be displayed (the smallest icon).
You can also add a few more tiles types:
- Cycle template: This Tile cycles through a slideshow of up to 9 images from the Collection that you indicate.
- Flip template: This Tile has a “front” and a “back” and constantly flips between the two.
- Iconic template: This Tile is static and constantly displays the data you input.
- Splash & Lock: Upload the background image that will appear on the splash screen and the lock screen for Windows Phone and Windows 8!
Here is an example of the Cycle Template. I bound the data source to one of my Data Collections, Entres, and the food image is now displayed.
If you made it this far, congrats! You are on your way to publishing you application. A few more steps and you are complete.
At this section you can provide your app a title, some description and choose a few items to include with your app.
An about page will use the information you put in title and description.
Enabling Ad Client will provide code but you will need to finish that portion with Visual Studio. For more information on that please see this documentation.
Associating an app with the store, allows you to pull in your Windows Store or Windows Phone developer account information to generate your app correctly. This is highly recommended if you are going to publish your app straight to the store without going into Visual Studio.
Finish and Generate
Once you think you are done you can click “Finish” and you will be presented with a final look at you app(s) and will be promped to “Generate”.
Lets look at both.
Windows Phone 8.0 App
With this option you will get the three downloads for Windows Phone 8.0, an immediately installable package, a XAP package ready to publish your app in Store, and the Source Code you can edit in Visual Studio
There are a few ways to go about handling these downloads.
1. QR Code. You can now install the app on your phone by using the QR Code. In order to do that you will need to perform the following steps.
First you must install the Windows Phone App Studio certificate on your device. Press the magnifying glass () at the bottom of your device to launch Bing search, and then press the eye icon () that appears at the bottom of the screen. Point the phone’s camera at the QR code that opens with the certificate link, and the phone will automatically scan it. Click “add” and the certificate is successfully installed once it returns to the original Install the certificate page.
Once your certificate is installed and your app is generated, follow the same instructions to scan the QR code. Accept the installation, and your app will now appear in your app list!
2. XAP file. If you are happy with the app, you can now submit it to the store but a few steps are required first. In order to publish your app, you must be registered at Dev Center! Follow the instructions here to register.
To give your apps the best chance of passing certification, remember the following:
- 1. You need to create your own unique 300×300 PNG tile to represent your app.
- 2. Create at least 1 (and up to 8) 768×1280 or 1280×768 PNG screenshot(s). Only use in-app content, do not stretch the image, and make sure your screenshot does not show the off screen edges of the phone. There are various ways you can take your screenshots:
- For more detailed instructions, go here.
- Make sure you use your own unique app title, app Logo, Pin to start tile, and long description.
- Do not use the template placeholder text ([insert name here]) or template app content.
Check out this website for the rest of the publishing steps!
3. Download the source code. By doing this you can open the project in Visual Studio 2013 and make any changes you need and you can publish from there. I will cover that portion in another part of the tutorial.
Windows Phone 8.1 and Windows 8.1 Store App
With this advanced option you get a download of the source code for Windows 8.1 and Windows Phone 8.1 Universal App. You also can get the installable packages if your store association was filled out. With the full source code you can open it up in Visual Studio and make any changes, generate your own binaries to upload to the store. See the source code portion of this tutorial.
I hope this was helpful and please look at the other sections of the tutorial for customizations and publishing. If you want to take a look at the final product, it is in the Windows Phone Store, download now to check it out.