How to add a Twitter feed to your App Studio app

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 app started life in App Studio but I wanted to add the ability to show tweets from a specific account in the app. I was surprised that this functionality wasn't built in. I was further surprised that there wasn't good documentation anywhere to help add it.
This post is an attempt to address this and show how to add a twitter feed to an app studio app,

If you've looked into trying to do this before you may have discovered that there is a video recorded as Build that shows a way of doing this. You'll find it at http://channel9.msdn.com/Events/Build/2014/2-565 The downside of this is that it is more complicated than I needed and only a small amount of the code is available (at
http://blogs.msdn.com/b/rido/archive/2014/04/25/app-studio-build-session.aspx).


The following uses no third party libraries and is done entirely in Visual Studio. It allows adding a list of tweets by a named user to be displayed in the app without requiring a user to log in. If you wanted it to display a search term, such as a hashtag, then minor modifications would be needed but they aren't documented here.

The twitter API requires that all requests are from an authenticated source. While you may typically have a user authenticate, in this case the app is the what is authenticated, using Application-only authentication. This provides access to limited API methods but is sufficient for our needs. If you wish to know more see https://dev.twitter.com/oauth/application-only

To integrate with Twitter you first need to create an app entry on the Twitter website.

• Go to https://apps.twitter.com/
• then click "Create New App"
• You can add any website value if you don't a suitable URL right now. Just remember to come back and replace it with the Store link later.
• You don't need to enter a callback URL.
• After accepting the terms and creating the app entry, go to the "Keys and Access Tokens" tab.

This is where you'll get the values for the "Consumer Key" and "Consumer Secret". You'll need to add these to TwitterDataSource.cs later.
Leave the permissions as "Read-only".

Please note that the values in this image are no longer valid for anything. Don't waste your time trying to check for security holes. They are for an app entry that no longer exists and won't work. ;)


We now need to modify and add some files to the solution. You'll find all the changes at https://gist.github.com/mrlacey/1cd1f7a0049c69eb774f but we'll also step through all the individual changes.


To add the details to both the Windows and Windows Phone project we need to add or modify 10 files:

1. Firstly we need a ViewModel to handle the retrieval of data and passing it to the view. Create AppStudio.Shared\Views\TwitterViewModel.cs (from here).

2. The ViewModel has to get the data from somewhere so next we need get the data, so we a data source.  Create AppStudio.Data\DataSources\TwitterDataSource.cs (from here)
It is in this file where we need to set the three constants that are used. The first is the username of the account you want to show the tweets from. The next two are the application API values highlighted above.

3. The data source needs something that will provide it with the data from the twitter API. Create AppStudio.Data\DataProviders\TwitterDataProvider.cs (from here)

4. The provider will return a collection of strongly typed objects. So we need to define the schema of that object. Create AppStudio.Data\DataSchemas\TwitterSchema.cs (from here)

5. Now we've got the data back from Twitter and into our ViewModel we need to tell our MainViewModel about it. Update AppStudio.Shared\ViewModels\MainViewModel.cs with the instructions here.

6. We now need to think about how the data will be displayed. We'll be using resources to define the templates we use in the views. We need to add a reference to the shared app resource (AppStudio.Shared\App.xaml) as defined here.

Let's update the Windows Phone project first.

7. We need to add a new hub section to the main page (AppStudio.WindowsPhone\Views\MainPage.xaml) that will look like this.

8. Then we need to add the resources we defined in the shared project and use in the new hub section. Create AppStudio.WindowsPhone\Views\DataTemplates\TwitterViews.xaml (from here)

Now let's update the Windows project.

9. Again, we need to add a new hub section to the main page (AppStudio.Windows\Views\MainPage.xaml) that will look like this.

10. Finally we need to add the data templates used by the view. Create AppStudio.Windows\Views\DataTemplates\TwitterViews.xaml (from here)


And with that we're done.

An important point to note is that when submitting your app to the store and using the above code, there is an extra consideration you need when submitting the Windows version.

In the cryptography section there are specific declarations you must make as credentials are encrypted and passed over SSL to authenticate with the Twitter API.

Assuming you're not doing anything else involving encryption then you just need to select "Yes" for both questions. Check the box if you can confirm the distributability of your app as asked. If you have other encryption in your app or questions about the legal consequences of using encryption in your app then seek appropriate legal advice.

An important note if you want to update this code and change what or how it's displayed.
As part of the terms and conditions of using twitter and integrating it within your app there are specific requirements about how you display a tweet. You'll find these at https://dev.twitter.com/overview/terms/display-requirements. Consider these carefully before you decide to modify how individual tweets are displayed.


Additionally, if you're interested in improving App Studio apps in other ways you should check out this related blog post.