On The Dot...
Talking about all things .NET related

Create the Ultimate Fan Universal App using Windows AppStudio–Part 2

Friday, December 5, 2014 8:06 PM

In my last post, we went over the basics of Windows AppStudio and Bandstown API, and briefly touched on how they can be used collectively to create a Universal app that allows you to track your favourite musician or band. To prepare for this, I left you with some homework to verify you have the necessary development tools installed on your machine, compile a list of URLs that point to data feeds you will include in your app, design an app logo, and gather any other images you wish to use in your app.

With all that in place, we can pick up where we left off!

Step 3: Design the app using AppStudio

It’s time to log into Windows AppStudio to create the shell of your app, selecting a template whose style suits your fancy. If you’re not sure how to navigate the tool, step through my blog post series on AppStudio:

Creating an App with Windows Phone App Studio – Part 1

Creating an App with Windows Phone App Studio – Part 2

Creating an App with Windows Phone App Studio – Part 3

 

clip_image001

For the purpose of this blog series, I have chosen to create a fan app about Maroon 5 (oh, Adam Levine, how I love thee…let me count the ways). I decided to use the template, “My favourite band”, for its layout. Let’s take a look at what that gave me out of the box.

clip_image003

From the app’s dashboard, we can see that AppStudio generated everything we need to see what the app will look like. Out of the box, it created 6 default sections which correspond to the type of app you want to develop. Test data is already wired up for you with stock images for the app logo, background, splash screen, and live tiles. Now that you have a sense of how the app will flow, you can decide which sections you wish to keep, remove, and add, if you don’t like the suggested sections that were created by default.

App Logo and Title

First things first, ideally you should change the app logo to one that will represent your app. You will notice as we proceed through this post, that the app logo is used within the app, but you will need to also upload images for the application’s live tiles and application icon which will represent your app in the Windows Store. For a consistent experience, it would be nice if the app logo, tile image, and application icon all aligned by using the same image throughout, just as the template has demonstrated.

To swap out the app logo, click on the current one at the top of the page, and when prompted select your custom logo. The image can be on your local machine, in your OneDrive account, or you can select an alternate AppStudio resource. Next, in the App Title field, provide a name that describes your app. In my case, I’ve set the title to “Maroon 5 Fan Book”.

Next, we can start modifying the content.

Content Tab

By default, the template preloaded 6 sections: HTML, singles, albums, concerts, blog, and videos. This is just a suggestion and not a requirement in your app. The beauty here is you have the flexibility to add, remove, and reorder sections as you see fit.

In my app, I decided to remove the first 3 sections: HTML, singles, and albums. I easily can delete the HTML and singles sections without issue, but the albums section won’t allow me to delete it because it is used a data source for the Cycle tile, which is the default tile for the “My favorite band” template.

clip_image005

We’ll fix this once we have our other sections sorted out.

The concerts section will be used to display the concert listings that I will retrieve from the Bandsintown API. To do this, I will edit the section which will allow me to choose a different layout, and specify a data source. In this case, I like the default layout the template provided. I just need to change the data source. Within the Edit section page, I click on Data, and enter the Bandsintown request URL to retrieve the concert listings for Maroon 5: http://api.bandsintown.com/artists/Maroon5/events.json?api_version=2.0&app_id=YOUR_APP_ID

clip_image007

Remember that the API call must also include your own unique App Id as a query string parameter, so you will need to replace “YOUR_APP_ID” with one that you’ve come up with. With that in place, I save my changes. Notice that no data is displayed in the preview to the left. Don’t worry about that for now. We’ll revisit that later.

I perform the same steps for the blog and videos section to ensure that sections are retrieving data from Maroon 5’s blog and YouTube channel respectively. In these cases, you will notice the data is displayed as expected in the preview to the left.

clip_image009

So far so good?

Yes and no. I want to add one more section because 3 just doesn’t feel like enough. So I decide to add a Twitter feed to round out my app. This requires a few extra steps to ensure I register my app with Twitter, obtain the required consumer key/secret and access token/secret values, and copy them into my Twitter feed section in AppStudio.

clip_image011

For a detailed walkthrough on how to add a Twitter feed to your AppStudio project, check out the section, “Using The Twitter Data Source” within AppStudio’s online documentation.

Themes Tab

The next step is to select the theme you wish to use. The Theme that the template uses by default is a custom theme with a standard stock image as the background. If you wish to use the Custom Theme with a background image, this is the time to swap out the stock image provided by the template with a custom image that represents your app. Ensure the image is your own, or one obtained under the Creative Commons License and be sure to include proper attribution.

Alternatively, you can go with the standard light or dark theme, which doesn’t require a background image. The choice is yours!

Tiles Tab

Similar to Themes, the template has selected a default tile format. In the case of the “My favorite band” template, it is the Cycle tile template that is selected by default. And as we noticed earlier, the Cycle tile template uses the albums data source to display pictures on the app’s live tile. I change this to simply use a Flip tile for simplicity.

I also needed to modify the tile title to correspond to my app title. Changing the app title didn’t automatically propagate that change to my tile. Last but not least, the tile images need to be uploaded. By default, the template provides a small tile image which is the same stock image it provided for the app logo. I will swap this out with my custom logo image, in each of the sizes it requires: Small (160X160), Normal (340X340), and Back (715X340). I can optionally choose to add a back title and some text that will be displayed on the back side of the tile.

The Tile tab also includes a section to swap out the stock images that were added for the app’s splash screen (both for Windows Phone and Windows Store) and the Windows Phone lock screen. Once I swap these images out for my own images, I save my changes, then revisit the Content tab to delete the albums section.

Publish Tab

The final step is to include the information that will be packaged with the app and displayed in the store when it is eventually published, including app name, description, and privacy URL. You will also need to upload the image that will serve as the application icon when the app is published to the Windows Store.

At this point, you can also associate your app with the Store. This will require you to have a registered Dev Center account, and will allow you to reserve your app name in advance of publishing the app.

For details on how to publish your app to the Windows Store, refer to the Publish section within AppStudio’s online documentation.

At this point, the app is not yet ready to be published. Remember earlier on in this post, that the Bandsintown concert listings weren’t appearing as we had hoped? That’s because it will require some extra work to get it working. And it will give me the opportunity to provide some custom styling for that list, if I so choose.

Step 4: Download the source code

With the app completed as far as we can go in AppStudio, I select “Finish”, then “Generate”. In the dialog box that appears, I simply select the “Generate” button to generate the source code. Once the code is generated, I can click the link within the Download Source Code Section, “Visual Studio 2013 Universal Project …” to do exactly that.

clip_image013

A zip file will be downloaded containing the Visual Studio solution for my app.

To Be Continued…

Awesome! At this point, we have a functioning app that requires some minor modifications to polish it off so that it can be published to the Store with pride.

In my next post, we will explore the modifications that need to be made to the source code to get the concert listings to display properly, as well as to allow users to purchase tickets without leaving the app!




Feedback

No comments posted yet.


Post a comment