I have been in Twitter for a long time, tweeting all, about what I eat, about where I go, about my girlfriend and so on. Can you still believe that such an intelligent personality (me) has only 37 followers (@Neelesh__) ? Shocked!! But yes, this is the reality.
Never mind. Though having just a few followers, I am still very much dedicated in making various Twitter applications for Windows 8. In this article, we will see how to set up a Windows Store application to get tweets of a specified person and much more.
For that, you need to have Twitter's authentication token. We will see how to get one in the next article. But for this article, we will be concentrating on simply having a project set up, in which we simply will just plug in the tokens.
![Twitter-Windows8.jpg]()
The first step as always is to create a new Windows Store application project. Without thinking much, let's add a Twitter authentication WinJS helper, that you can download from: http://www.4shared.com/document/Lpu3GhGb/winjs-oauth-for-twitter.html?. Also let's add a config.js file which in turn possesses the configuration key and access token.
Here is what my config.js file contains:
1: WinJS.Namespace.define("Twitter.OAuth.Config", {
2: consumerKey: '<Your consumer Key>',
3: consumerSecret: '<Your consumer secret>',
4: userOAuthToken: '<Your OAuth Token>',
5: userOAuthTokenSecret: '<Your OAuth Token Sceret>'
6: });
That is it. It completes our code for the config.js file. Next is creation of the user interface. You can create the user interface by editing HTML. Here is what I have in my design in the default.html page.
1: <body>
2: <div class="findbuddy fragment">
3: <header aria-label="Header content" role="banner">
4: <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
5: <h1 class="titlearea win-type-ellipsis">
6: <span class="pagetitle">Welcome to Tweet Search</span>
7: </h1>
8: </header>
9: <section aria-label="Main content" role="main">
10: <div id="hashTagContainer">
11: <span>Name your Tag:</span>
12: <input type="text" id="hashTagName">
13: <button type="reset" id="btnSearch">Search</button>
14: </div>
15:
16: <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
17: <div id="tweetsTemplate">
18: <div style="background-color:#00639c;">
19: <img data-win-bind="src: image" id="profilePic"/>
20: </div>
21: <div id="tweetContent">
22: <!-- Displays the "title" field. -->
23: <h4 data-win-bind="innerText: name" style="background-color:#00639c;"></h4>
24: <h5 data-win-bind="innerText: handle" style="background-color:#00639c;"></h5>
25: <!-- Displays the "text" field. -->
26: <h6 data-win-bind="innerText: tweet" style="background-color:#00639c;"></h6>
27:
28: <span data-win-bind="innerText: timeOfTweet"
29: style="background-color:#00639c;"></span>
30: </div>
31: </div>
32: </div>
33:
34: <div id="basicListView"
35: data-win-control="WinJS.UI.ListView"
36: data-win-options="{ itemTemplate: select('#mediumListIconTextTemplate') }">
37: </div>
38: </section>
39: </div>
40: </body>
The UI isn't good until we write some CSS for it. Here is what my CSS contains:
1: .TagResult p {
2: margin-left: 120px;
3: }
4:
5: body{
6: height:100%;
7: background-color:#00639c;
8: }
9: #sectionMain{
10: height:auto;
11: background-color:#00639c;
12: }
13: #hashTagContainer{
14: margin:20px 0px 0px 54px;
15: }
16:
17: #hashTagContainer input{
18: margin-left:10px;
19: }
20:
21: #basicListView{
22: margin-top:60px;
23: margin-left:53px;
24: min-height:100%;
25: height:520px;
26: background-color:#00639c;
27: }
28:
29: #tweetsTemplate{
30: width:300px;
31: height:150px;
32: background-color:#00639c;
33: }
34:
35: #mediumListIconTextTemplate{
36: background-color:#00639c;
37:
38: }
39: #tweetContent:hover{
40: background-color:lightGRAY;
41: }
42: #tweetsTemplate h6{
43: color:white;
44: overflow:auto;
45: max-height:100px;
46: min-height:70px;
47: }
48: #tweetsTemplate h5{
49: color:darkgray;
50: }
51: #tweetsTemplate span{
52: color:Yellow;
53: overflow:auto;
54: font-size:10px;
55: }
56:
57:
58: #tweetsTemplate #tweetContent{
59: margin-left:20%;
60: background-color:#00639c;
61: }
62:
63: #profilePic{
64: position:absolute;
65: }
66:
67: #progressRing{
68: position:absolute;
69: color:white;
70: margin:-300px 0px 0px 50%;
71: display:none;
72: }
After doing the UI, we need to add code, code that interacts with Twitter's API to get the results we desire. Here's what my code of default.js has:
1: // For an introduction to the Blank template, see the following documentation:
2: // http://go.microsoft.com/fwlink/?LinkId=232509
3: (function () {
4: "use strict";
5:
6: WinJS.Binding.optimizeBindingReferences = true;
7:
8: //Various twitter's api we can use
9: var queryParams, url = 'https://api.twitter.com/1.1/users/show.json';
10: var getHomeTimelineUrl = "https://api.twitter.com/1.1/statuses/home_timeline.json";
11: var userTimeline = "https://api.twitter.com/1/statuses/user_timeline.json";
12: var getMentionsUrl = "https://api.twitter.com/1.1/statuses/mentions_timeline.json";
13: var getRetweetsOfMeUrl = "http://api.twitter.com/1.1/statuses/retweets_of_me.json";
14: var ret = "http://api.twitter.com/1/statuses/retweet/329472492626395130.json";
15:
16: var app = WinJS.Application;
17: var activation = Windows.ApplicationModel.Activation;
18:
19: app.onactivated = function (args) {
20: if (args.detail.kind === activation.ActivationKind.launch) {
21: if (args.detail.previousExecutionState !==
22: activation.ApplicationExecutionState.terminated) {
23: //Event handler for button
24: btnSearch.addEventListener('click', SearchClicked, false);
25: } else {
26: // TODO: This application has been reactivated from suspension.
27: // Restore application state here.
28: }
29: args.setPromise(WinJS.UI.processAll());
30: }
31: };
32:
33: app.oncheckpoint = function (args) {
34:
35: };
36:
37: app.start();
38:
39:
40: function personAndTweet() {
41: var name;
42: var image;
43: var tweet;
44: var timeOfTweet;
45: var handle;
46: }
47:
48:
49: function getSampleTwitterProfile(twitterOAuthInstance, personName) {
50: var pt = new Array();
51: queryParams = {
52: 'screen_name': personName,
53: 'count': '1000'
54: };
55:
56: twitterOAuthInstance.sendAuthorizedRequestForUser(userTimeline, 'GET', queryParams)
57: .then(function (responseTweets) {
58: var resTweet = JSON.parse(responseTweets.results);
59: //pt[0].tweet = new Array();
60: for (var j = 0; j <= resTweet.length - 1; j++) {
61: pt[j] = new personAndTweet();
62: pt[j].handle = "@" + resTweet[j].user.screen_name;
63: pt[j].name = resTweet[j].user.name;
64: pt[j].image = resTweet[j].user.profile_image_url;
65: pt[j].tweet = resTweet[j].text;
66: pt[j].timeOfTweet = resTweet[j].created_at.split("+")[0];
67: }
68: var dataList = new WinJS.Binding.List(pt);
69: basicListView.winControl.itemDataSource = dataList.dataSource;
70: })
71: .done();
72: }
73:
74: function setTweetAuthentication(personName) {
75: var twitterOAuthInstance;
76:
77: //With all the neccesary credentials in place we can make signed requests to Twitter
78: //on the user's behalf
79: twitterOAuthInstance = new TwitterOAuth(Twitter.OAuth.Config.consumerKey,
80: Twitter.OAuth.Config.consumerSecret,
81: Twitter.OAuth.Config.userOAuthToken,
82: Twitter.OAuth.Config.userOAuthTokenSecret);
83:
84: getSampleTwitterProfile(twitterOAuthInstance, personName);
85:
86: }
87:
88: function SearchClicked() {
89: setTweetAuthentication(hashTagName.value);
90: }
91:
92: })();
The code above possess data binding and template creation that we will look at in more details when we study the MVVM pattern in JavaScript. Describing the code is the toughest job in the world right now. We will get over it in the subsequent posts on Windows Store applications.
This is what we need to do to create a simple Twitter application. Just some more steps to get the OAuth code and then our application will be fully functional. Do read the next article. Until then…
Happy Reading!!!
You can download the project from http://www.4shared.com/rar/_Guw8WNy/TwitterTweets.html?