Making an App Studio app better

I've recently released an app for the UK based charity Toilet Twinning. I wholeheartedly encourage you to support the work they do and twin your toilet now. This post is based on lessons from building that app.

The Toilet Twinning apps were built using App Studio. In the past I've been very critical of apps built this way as most of the ones I've seen have been of what I'll politely call a "less than perfect" quality. Evaluated against some of the older store requirements (that were originally intended to improve app quality but have since been removed to simplify the submission process) many of these apps would not get into the store.

Here's a list of things I did to improve the apps. Hopefully, if you're building an app with App Studio, you'll be able to apply some of these changes to your apps and improve them too.

• I originally included an Instagram section in the app to show related images. Unfortunately the search functionality stopped working shortly so I removed the related pages and hub sections.
• The Windows Phone app did not include scaled versions of the images in the assets folder. So I added them to get a better visual experience on phones with larger screens.

• In the Windows app it didn't include a placeholder for the 310x310 logo image. But it did include them for all other logo images. So I added it and was therefore able to support all tile sizes.
• I had to remove the, pointless, default tile updating behaviour which just replaces the tile image with the one from Shared/Assets/DataImages/FlipSquareTile.jpg. All this did was replace one image with another. Always the same one and with no extra information. Updating a live tile with new information as it becomes available can be a great thing to do. But this didn't do that. I've made a note below that adding a background agent to have some useful, new, information added to the live tile would be a great future enhancement to the app.
• Added a placeholder for images in the list while they are loading or to be displayed if there is an item without an image.
• Replaced the trivial default caching behaviour. What good is a caching data provider that when it tries to refresh and there's no network connection it deletes the data it does have and so shows nothing? Or a cache that only keeps data for 2 hours even if it is updated much less frequently. I replaced the caching behaviour with something smarter. It now keeps older data for much longer by default. It will always show data if it has some, even if it's not able to load any new data. 
• I've also simplified the logic around attempting to load data. Always loading data every time that the user navigates back to the main page seems like overkill. Open app > Load data > tap on item > tap back > reload all data > tap on item > tap back > reload all data (again) > tap on item > tap back > reload all data (yet again). It seems a bit unnecessary. Loading only when it's likely to have changed seems much more sensible. I opted to do this only when the user returns to the app. OnNavigatedTo in MainPage now contains this:
  await MainViewModel.LoadDataAsync(e.NavigationMode != NavigationMode.Back);
• Thinking about offline support. I added an indicator when there is no network connection available. After all, if there's a good reason why the app can't load any new data it makes sense to let the user know.
• On each of the hub sections I moved the progress bar used to indicate network activity/loading so that they appear above the items, not behind them.

• The default formatting for the blog template that I chose was poorly designed such that the right edge of text was clipped. See in the green rectangle below.

In that I want the text being displayed to actually be readable by the person using this app. I fixed this issue with widths and margins. I also adjusted the spacing and margins so that an extra line of text is visible. It now looks like this:

• When looking at an individual item from the blog / RSS feed there were other improvements to be made. The original output from the tool looked like this:

But with a few changes was made to look like this:

There are 5 changes here: made the system tray transparent; removed the unnecessary and not fully visible app logo and title; reduced page margins; reduced paragraph spacing; and increased the size of the image. There's more that can still be done with RSS content formatting but this is a definite improvement

• There was also a subtle issue I fixed that is experienced when swiping between stories/items. If there are multiple items that are long enough to be scrolled and one is scrolled down. Then if you swipe to the side 4 times you will find that you get to an item that is not at the top but already partially scrolled. Almost certainly not what you want but easy to fix. Every time the selected item in the FlipView is changed, walk the visual tree to find the ScrollViewer and have it scroll back to the top (VerticalOffset = 0).
• On the Facebook hub section there was again more work to be done to tidy up the margins, spacing and text formatting and clipping of text on the right and bottom edges. This is not ideal:

It also doesn't make sense to trim the title at the expense of body detail content. This looks much better:

• For the Facebook details page, similar changes were made as for the blog details page.
• On the YouTube hub section there was again a need for a bit of finessing of the basic layout but there were two bigger issues. Firstly, even though a large image is used in the item template the image displayed is actually very small and scaled up leading to a blurry image being shown.

Fortunately the details that the YouTube API returns include a variety of images at different sizes. With this knowledge I changed the code so that it uses the largest thumbnail image available, not just the first in the list. This lead to no blurring in the image (click to view full size)

• The second big issue I had was that the search for my desired search term "Toilet Twinning" was returning some completely unrelated item. After a little exploration I realised that this was because the search term wasn't being used in quotes. This meant that the server was also returning videos that match on the individual words also. As I don't want to show general videos about twinning (or toilets), it's necessary to make sure the term is encoded in quotes. Unfortunately the web site doesn't allow this.

As it seems that encoding values entered in a URL is too much for I manually edited YoutubeDataSource so it now includes
private const string _url = @"https://gdata.youtube.com/feeds/api/videos?q=%22toilet%20twinning%22&orderby=published&start-index=1&max-results=20&safeSearch=strict&format=5&v=2";

• Again the YouTube details page needed some refining. The strangest being the removal of the hard coded string "Detail" at the top of the page. I can only assume that this was there as the result of an error in App Studio.

• I added another hub section to show the tweets from the @toilettwinning account. For details of this see the link at the bottom of this post.
• The final hub section originally contained HTML content. I replaced this with the direct XAML equivalent as the HTML version prevented horizontal swipes from navigating the hub control. This could be frustrating for users as they swipe through the hub but find the the gesture they're doing suddenly stops working.
• Many of the above changes shown in the Phone app were also made in the Windows one.
• Additionally, in the Windows app I removed space reserved for back button on the main page - as the back button will never be shown there
• On the Facebook detail page in the Phone version, it originally used a purple colour for hyperlinks. This was sometimes very hard to read on the background so I changed it to be white like in the Phone version.

That's not the end though. There are still other things that can be done to improve the app further.
Here are some ideas:

• Default data for when first run and a better first run experience
• Add a FAQs page directly within the app to explain more about the charity without needing to redirect to the website
• Add a background agent to update the tile so new content can be seen without having to open the app
• Add image caching so that images can be viewed with the other offline content.
• Improve the HTML parsing to improve the display of content
• Improve the display of images to better scale and stretch images with consistency but still coping with the variety of images sizes to display.
• And probably many more things. Got any suggestions?

Hopefully I'll be able to add at least some of these to the app soon.


If you're building an app with App Studio and wish to add a Twitter feed to it, I have another blog post that explains how to do this.