Twitter Service Into UWP App Using UWP Community Toolkit

Introduction

This article is divided into three sections - The first two sections explain about the installation of the Twitter application and installation of UWP Service Tool kit , while the final part explains the integration of them into the application.

Create Twitter application
Install the UWP Service
Integrate Twitter into main application

Create Twitter application

What is that Twitter application? Why is it required? By a simple example, we will understand the concept; for example, some websites you can login with your Twitter account

Ex - http://www.c-sharpcorner.com/ you can login with your twitter account, for this concept implementation Csharpcorner requires communication with the twitter account, for this communication the Twitter application is required. Twitter application is a collection of APIs to interact with Twitter server.

Note: Twitter application is called access token.

The same concept if required in our application, first we have to create twitter application. Now we will see how to create the twitter application

Steps to Create Twitter application

URL: https://apps.twitter.com/app/new

Fill the Name & other information.
Set the access permission.
Consumer key and Consumer secret will be automatically created.

Twitter application is ready.

Install the UWP Toolkit

UWP Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps.

More info available here.

For our application to implement Twitter access, we don't have the need to write the code from scratch. UWP toolkit helper class is available. We just add the helper reference into our application & use helper function to interact with Twitter application.

Adding helper reference into our project.

Steps

Create a new project (ex: Toolkit)
Right click -> Manage NuGet Packages
Search “Microsoft.Toolkit.Uwp”
Select the “Microsoft.Toolkit.Uwp.Services” & Install.

UWP Tool kit has been installed in our application.

Integrated twitter into main application

Add the namespace and initialize the service (same project which we have created in the previous section).

using Microsoft.Toolkit.Uwp.Services.Twitter;
TwitterService.Instance.Initialize(consumerKey, consumerSecurity, callbackUri);

TwitterService.Instance.Initialize function is used to the request to the user for giving the permission to access the Twitter account (username and password must be entered) like the below image.

Once the permission has been given by the user, you can see this third party information into the user's Twitter account settings.

Go to -> https://twitter.com/settings/applications , permission has given to the Csharpcorner.

3. To access twitter data, login to the twitter account for this call the
await TwitterService.Instance.LoginAsync() function

Let's see the example to load the Twitter Information Display in our application.

XAML code

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="30*"/>
<RowDefinition Height="70*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="PanelUser" Margin="10" Orientation="Horizontal">
<StackPanel>
<TextBlock Text="My Tweet Info"/>
<Image x:Name="ImgUser" Stretch="Fill" Source="{Binding ProfileImageUrl}"/>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="TxtName" Text="{Binding Name}"/>
<TextBlock x:Name="TxtScreenName" Text="{Binding ScreenName}" />
</StackPanel>
</StackPanel>
<StackPanel Margin="10">
<TextBlock x:Name="TxtName1" Text="New Tweet"/>
<TextBox x:Name="NewTwitte" Text=" " Width="150"/>
<Button x:Name="BtnNewTwt" Content="Tweet" Margin="0,10,0,0" Click="BtnNewTwt_OnClick"/>
</StackPanel>
</StackPanel>
<ListView x:Name="LstView" Grid.Row="1" Margin="10">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" Margin="20">
<TextBlock x:Name="TxtName" Text="{Binding TextInfo}"/>
<TextBlock x:Name="TxtScreenName" Text="{Binding CreateDate}"
Foreground="Blue"
FontWeight="Bold"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>

Code

public class TwitterInfo : INotifyPropertyChanged
{
public string TextInfo
{
get { return _textInfo; }
set
{
_textInfo = value;
OnPropertyChanged();
}
}
private string _textInfo;
public string ImgSource
{
get { return _imgSource; }
set
{
_imgSource = value;
OnPropertyChanged();
}
}
private string _imgSource;
private string _createDate;
public string CreateDate
{
get { return _createDate; }
set
{
_createDate = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
public ObservableCollection<TwitterInfo> TwitterInfoCollection = new ObservableCollection<TwitterInfo>();
private async void LoginTwitter()
{
TwitterService.Instance.Initialize(consumerKey, consumerSecurity, callbackUri);
if (!await TwitterService.Instance.LoginAsync()) return;
var user = await TwitterService.Instance.GetUserAsync();
await LoadTwitter(user);
PanelUser.DataContext = user;
}
private async Task LoadTwitter(TwitterUser user)
{
var lstTwitter = await TwitterService.Instance.GetUserTimeLineAsync(user.ScreenName);
TwitterInfoCollection = new ObservableCollection<TwitterInfo>();
foreach (var tweet in lstTwitter)
{
var twitterInfo = new TwitterInfo
{
ImgSource = tweet.User.ProfileImageUrl,
TextInfo = tweet.Text,
CreateDate = tweet.CreatedAt
};
TwitterInfoCollection.Add(twitterInfo);
}
LstView.ItemsSource = TwitterInfoCollection;
}
private async void BtnNewTwt_OnClick(object sender, RoutedEventArgs e)
{
await TwitterService.Instance.TweetStatusAsync(NewTwitte.Text);
var user = await TwitterService.Instance.GetUserAsync();
await LoadTwitter(user);
}

Final output