It’s been long I was in twitter, tweeting all, about what I eat, about where I go, about my girlfriend etc. 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 post, we will see how to set up a windows 8 applications to get tweets of a specified person and lot more.
For that, you need to have twitter’s authentication token. We will see how to get one in the next post. But for this post, we will be concentrating on simply having a project setup, in which we simply will just plug in the tokens.
The first step as always, is to create a new windows 8 application project. With out thinking much, let’s add a twitter authentication WinJS helper, which you can download from here http://www.4shared.com/document/Lpu3GhGb/winjs-oauth-for-twitter.html?. Also let’s add a config.js file which in turn possess 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: });This is it. It completes our code for the config.js file. Next comes is creating User Interface. You can create user interface by editing HTML. Here is what I have in my design in 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 ain’t be 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 done with UI, we need to add code, code that interact with twitter’s api to get the result 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: })();Above code possess data binding and template creation which we will look in more details when we will study about 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 8.
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 post. Till then…
Happy Reading!!!
You can download the project from http://www.4shared.com/rar/_Guw8WNy/TwitterTweets.html?
Posts
0 comments