In Part 1, I 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.
In Part 2, I demonstrated how you can get the majority of the app completed simply using Windows AppStudio. To complete the app, I mentioned that it would be necessary to download and modify the source code.
Before digging into the code, my last post was focused on looking at the solution and source code that was generated by AppStudio to gain a better understanding of the structure of the projects. This helps us to identify where modifications will need to be made.
The Necessary Changes
In order to ensure the Bandsintown concert listings are rendered in the application, and to allow users to link to the band’s concert page to purchase tickets, we need to make some changes. My goal for these changes are to show a concerts list with the name of the venue, the city and/or country the concert is in, and the concert’s date and time. I would also like to make it easy to see which concerts still have tickets available for sale.
Last but not least, when a concert item that has tickets available is tapped, I want to the app to load the concert’s ticket sales page.
To accomplish this, changes are required to the application logic within the Portable Class Library and Shared Project. Further changes are needed to each platform-specific project to ensure the user interface displays the data in a desirable format.
In the Portable Class Library:
1) Add a class, named ConcertSchema, to represent the data retrieved from the Bandsintown API.
You can easily add the members to this class from a JSON sample of the data in Visual Studio 2013. First, go to the Event JSON Response page on the Bandsintown API site: http://www.bandsintown.com/api/responses#event-json
Next, highlight and copy the sample Event data. Now go back to your ConcertSchema class in the Portable Class Library and delete the default class that is created. Click Edit > Paste Special… > Paste JSON As Classes
You will notice the main Events result set is created as a class called Rootobject. Any subsequent classes that are needed are automatically created as well (in this case, Artist and Venue).
2) Add a class, named ConcertDataProvider, to perform the web request which will retrieve the data from the Bandsintown API for your favourite artist. It also will translate the retrieved data into an object which we can use within the code. This is referred to as deserialization.
3) Rename the Rootobject class to ConcertSchema. For conformity, I also renamed the Venue and Artist classes that were generated to VenueSchema and ArtistSchema respectively. I also changed the data type of on_sale_datetime from DateTime to object, since this field may not always have a value, causing null exceptions to be thrown.
Try building the solution now to see if we are on the right track.
What happened? Did you notice an error similar to this:
The solution to this is to ensure the class derives from the BindableSchemaBase abstract class, similar to the way that the RssSchema class does:
public class ConcertSchema : BindableSchemaBase
Right-click on BindableSchemaBase within the ConcertSchema class, and select to implement abstract class:
Modify the override methods that were added as part of the abstract class implementation as shown below:
Since the concert listings pulls a DefaultTitle, DefaultSummary and DefaultContent for each list item, it’s easy to feed the concert data that we want to the concert item by just returning that information through these classes. AppStudio has already provided the bindings (or virtual glue) that wires everything together to get the data flowing from back to front.
4) Modify the ConcertsDataSource class to make use of the new Concert data provider.
In the Shared Project:
1) Modify the ConcertsViewModel in the Shared Project to utilize the new ConcertSchema class. This can be simply accomplished by replacing RssSchema with ConcertSchema.
2) Add an image to the Assets folder which will be used to represent a ticket. In this case, I used Syncfusion’s Metro Studio to obtain an image which suits the purpose.
3) Add a converter class, named TicketAvailableToVisibilityConverter which will display the ticket image when tickets are available, and hides it when tickets are not available for a concert.
In each platform-specific project:
1) Modify the ConcertsViews data template in each platform-specific project to include the ticket image that displays when tickets are available for a concert, as well as text indicating “available”.
2) Delete ConcertDetailsPage.xaml from each platform-specific project
Next, it’s important to revisit the ConcertsViewModel class to modify the ItemClickCommand so that when a concert item is tapped, the application launches a browser and navigates to the artist’s Bandsintown page. We will accomplish this by using the LaunchUriAsync method off the Launcher object:
Last but not least, it is just as important to add a Credits section in your app to give attribution to any images obtained under the Creative Commons License. In this case, the background image used in the app must be attributed to Léa Reviron. As well, attribution should be included for any external data providers, and/or 3rd party libraries used within the app, such as the Json.NET library. In the Windows 8.1 project, this could be included as an additional App Flyout.
Credits Flyout on Windows 8.1
In the Windows Phone 8.1 project, this could be added to the About page, as part of a Pivot item or a separate Credits page. It’s up to you.
Build and Run
With all of the modifications in place, it’s time see what it looks like. Build and run the app on each platform to see if everything is displayed and working as expected.
Maroon 5 Fan Book on Windows 8.1
As you can see, concert data is flowing into the app from the Bandsintown API. The other feeds which AppStudio wired up for us – Twitter, YouTube and Maroon 5 Blog feeds – are working as expected. Tapping a concert listing that shows tickets are available launches a new browser page and loads the concert’s ticket sales page right within the app.
Drill-down into the concerts listings page by tapping the concerts header. Now navigate back to the main page. What do you notice?
It appears that the other feeds still have their data displayed, but the concerts list is rebuilding each time you navigate back to the main page. Let’s see what the other feeds are doing that we aren’t.
RssSchema, TwitterSchema, and VideosSchema implement IEquatable and IComparable. If you take a look at ObservableCollectionExtensions class in the Common folder within the Portable Class Library, you will notice that it contains two methods: AddRangeUnique and AddSorted. All data sources call this method when loading data to first determine if the data has already been loaded. If so, then it just retrieves the collection from the AppCache. If not, it loads the data and stores the collection to the AppCache so that on the next page load it doesn’t go through the expensive operation of reloading the data unnecessarily. The goal when designing mobile apps is to keep the application running efficiently and with minimal resources. Caching data so that it does not load data needlessly from either a web service, database, or other mechanism multiple times is one of those improvements that will really make a difference in your application’s performance. This also takes care of the flash issues we were experiencing when navigating back and forth between pages.
Let’s make the necessary changes to ConcertSchema to ensure it implements IEquatable and IComparable.
In the Equals and GetHashCode methods, we will use the concert’s id as an equality check. In the CompareTo method, we will use the concert’s event datetime field as a comparison to ensure items that get added to the list are sorted by date so we can see upcoming concerts in order by concert date.
Build and run the app again and perform the same test see if concert data is being displayed from the AppCache. Do you notice that the concert listing flash is gone now when navigating between pages after the initial data load?
One Last Gotcha
In testing the app on Windows Phone 8.1, I discovered that attempting to load the concert’s event page at the Bandsintown website fails. Instead it prompts the user to install an app from the Store, but no related app is found. In attempting to simply use the built-in browser to navigate to the URL outside of the app, I am prompted with this:
So there is clearly something wrong with the way the native browser interprets the URL or the attempted redirect that is occurring on the Bandsintown end. I’ve sent off an email to Bandsintown about this issue. In the meantime, I have revamped my Windows Phone app so that users can only view concert listings in the app. They cannot navigate to the Bandsintown event page to purchase tickets. The browser just won’t load the page.
I simply removed the wiring to the ItemClickCommand from the ConcertsList Data Template in the ConcertsViews.xaml file in the Window Phone 8.1 project. When a user taps the item, no action is taken. I will revisit this once I hear back on a solution to the issue from Bandsintown.
Other than that, everything else looks good in the Windows Phone app.
Whew! That was quite the project, but then again, imagine having to develop the entire app from scratch!
With Windows AppStudio, we were able to create a pretty slick Fan App that is supported on Windows 8.1 and Windows Phone 8.1 devices. The majority of the application was automatically generated based on information we entered in the AppStudio design tool. We had to make some modifications to bring it to the homestretch, and add that coolness factor by integrating the Bandsintown API to tie in concert listings. Sure it required a little bit of effort, but the payoff is priceless!
You can download the source code for this demo from my Github account. Remember that you will need to add your own consumer key and access token for the Twitter feed to work.
Source: GeekswithBlogs – Lori Lalonde