Angular 2 – Accessing twitter from your app.

Hi Friends,

Hope you are all well. In our previous posts we have been seeing how to deal with Oauth mechanism in our apps. We also saw how to build a Oauth system from the ground up using NodeJS.

This post is primarily focused on accessing Twitter’s resources in your angular 2 app. We all know that twitter has publicly made available a large list of REST Apis for developers. You can find them all here. These are protected using Oauth Authorization method.

Though it’s not necessary, I would highly recommend you to go through my previous posts on Oauth here.

Let’s begin.

A screencast of this post

The complete code of this tutorial:

Angular 2 app – here.

NodeJS backend – here.

First of all you need to create an app in http://apps.twitter.com and get a consumer key and consumer secret.

Then scaffold out a new app using the below command.

ng new <appname>

1	ng new <appname>

We are going to do an application-only authentication. This is the most basic method of accessing twitter resources and making use of them in our apps.

From the twitter docs:

When using Application-only authentication

Your app will be able to, for example:

Pull user timelines;
Access friends and followers of any account;
Access lists resources;
Search in tweets;
Retrieve any user information;

And it won’t be able to:

Post tweets or other resources;
Connect in Streaming endpoints;
Search for users;
Use any geo endpoint;
Access DMs or account credentials;

Going forth we will divide our workflow into two parts.

Part 1 – Getting the Access Token for making our requests.

Let’s have a button which upon clicking will send a request and attempt to get the access token for us.

Add the below code to app.component.html

<button class="waves-effect waves-light btn" (click)="makecall()">Authorize</button>

1	<button class="waves-effect waves-light btn" (click)="makecall()">Authorize</button>

Yes, I have used the materializecss framework. Feel free to use any framework of your choice. If you are following along with this tutorial then open up index.html and add the four lines.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

   <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

Okay. Now that we have a button. Let’s link it up.

Open app.component.ts and add the below code.

import { Component } from '@angular/core';
import { Http, Headers} from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  searchquery = '';
  tweetsdata;
  
  constructor(private http: Http){}
  
  makecall() {
    var headers = new Headers();
    
    headers.append('Content-Type', 'application/X-www-form-urlencoded');
    
    this.http.post('http://localhost:3000/authorize', {headers: headers}).subscribe((res) => {
      console.log(res);
    })
  }
}

import { Component } from '@angular/core';

import { Http, Headers} from '@angular/http';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'app works!';

searchquery = '';

tweetsdata;

constructor(private http: Http){}

makecall() {

var headers = new Headers();

headers.append('Content-Type', 'application/X-www-form-urlencoded');

this.http.post('http://localhost:3000/authorize', {headers: headers}).subscribe((res) => {

console.log(res);

})

}

Okay. You would have noticed that we are making a call to a local server rather than calling the twitter REST Api directly from here. This is because when you try to access the URL from a localhost then the browser detects it as a security threat and classifies it as a CORS issue. So we need to either disable the browser security or make the call from a server.

Now let’s write the server-side code.

Start a new nodejs project (preferably in a new folder).

Add the dependencies using the below command.

npm install express request body-parser cors --save-dev

1	npm install express request body-parser cors --save-dev

Create a file called server.js in the same folder and add the below code in it.

var express = require('express');
var bodyParser = require('body-parser');
var cors = require('cors');
var functions = require('./functions');

var app = express();

app.use(bodyParser.urlencoded({extended: true}));
app.use(cors());
app.post('/authorize', functions.authorize);


app.listen(3000);

var express = require('express');

var bodyParser = require('body-parser');

var cors = require('cors');

var functions = require('./functions');

var app = express();

app.use(bodyParser.urlencoded({extended: true}));

app.use(cors());

app.post('/authorize', functions.authorize);

app.listen(3000);

Now create another file called config.js and add the below code in it.

var appsettings = {
    consumerkey: '<yourconsumerkey>',
    consumersecret: '<yourconsumersecret>',
    bearertoken: ''
};

module.exports = appsettings;

var appsettings = {

consumerkey: '<yourconsumerkey>',

consumersecret: '<yourconsumersecret>',

bearertoken: ''

};

module.exports = appsettings;

Now create another file called functions.js and add the below code in it.

var request = require('request');
var config = require('./config');

functions = {
    authorize: function(req, res) {
        var header = config.consumerkey + ':' +config.consumersecret;
        var encheader = new Buffer(header).toString('base64');
        var finalheader = 'Basic ' + encheader;
        
        request.post('https://api.twitter.com/oauth2/token', {form: {'grant_type': 'client_credentials'}, 
        headers: {Authorization: finalheader}}, function(error, response, body) {
            if(error)
            console.log(error);
            else {
                config.bearertoken = JSON.parse(body).access_token;
                
                res.json({success: true, data:config.bearertoken});
            }
            
        })
    }
}
module.exports = functions;

var request = require('request');

var config = require('./config');

functions = {

authorize: function(req, res) {

var header = config.consumerkey + ':' +config.consumersecret;

var encheader = new Buffer(header).toString('base64');

var finalheader = 'Basic ' + encheader;

request.post('https://api.twitter.com/oauth2/token', {form: {'grant_type': 'client_credentials'},

headers: {Authorization: finalheader}}, function(error, response, body) {

if(error)

console.log(error);

else {

config.bearertoken = JSON.parse(body).access_token;

res.json({success: true, data:config.bearertoken});

}

})

}

module.exports = functions;

We are just making a request to the rest endpoint along with our consumerkey and consumersecret and if the call is successful we get an access token in our response.

We’ll store this token in our config file.

Part 2 – Making a request to search for tweets pertaining to a certain search query

Let’s try making an authorized search request.

Open up your angular 2 app. In the app.component.html page add the below code.

<button class="waves-effect waves-light btn" (click)="makecall()">Authorize</button>
<div class="row">
    <form class="col s4">
      <div class="row">
        <div class="input-field col s12">
          <input id="hashtags" type="text" [(ngModel)]="searchquery" [ngModelOptions]="{standalone: true}">
          <label for="hashtags">Search by hashtags</label>
        </div>
      </div>
      <button class="waves-effect waves-light btn" (click)="searchcall()">Search</button>
      <div *ngFor="let item of tweetsdata" class="col s12 m7">
    <div class="card">
      <div class="card-image">
            <img style={width:10px,height:10px;} src={{item.user.profile_image_url}}>
  </div>
        <div class="right-content">
    <span class="card-title">{{item.user.name}}</span>
    <div class="card-content">
          <p>{{item.text}}</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
    </div>
  </div>
      </div>
    </form>
</div>

<button class="waves-effect waves-light btn" (click)="makecall()">Authorize</button>

<label for="hashtags">Search by hashtags</label>

</div>

<button class="waves-effect waves-light btn" (click)="searchcall()">Search</button>

</div>

</div>

</div>

</form>

</div>

This will add another button and a card based interface that will make the tweets appear in cards.

Open up app.component.ts and add the below code.

searchcall(){
    var headers = new Headers();
    var searchterm = 'query=' + this.searchquery;
    
    headers.append('Content-Type', 'application/X-www-form-urlencoded');
    
    this.http.post('http://localhost:3000/search', searchterm, {headers: headers}).subscribe((res) => {
      this.tweetsdata = res.json().data.statuses;
    });
  }

searchcall(){

var headers = new Headers();

var searchterm = 'query=' + this.searchquery;

headers.append('Content-Type', 'application/X-www-form-urlencoded');

this.http.post('http://localhost:3000/search', searchterm, {headers: headers}).subscribe((res) => {

this.tweetsdata = res.json().data.statuses;

});

}

This sends the search query to the server and also stores the returned response in tweetsdata.

Now let’s write some server side code. Open up your nodejs app and add the below code.

Open up functions.js and add the below code.

search: function(req, res) {
        var searchquery = req.body.query;
        var encsearchquery = encodeURIComponent(searchquery);
        var bearerheader = 'Bearer ' + config.bearertoken;
        request.get('https://api.twitter.com/1.1/search/tweets.json?q=' + encsearchquery +
         '&result_type=recent', {headers: {Authorization: bearerheader}}, function(error, body, response) {
             if(error)
             console.log(error);
             else {
                 res.json({success: true, data:JSON.parse(body.body)});
             }
         })
    }

search: function(req, res) {

var searchquery = req.body.query;

var encsearchquery = encodeURIComponent(searchquery);

var bearerheader = 'Bearer ' + config.bearertoken;

request.get('https://api.twitter.com/1.1/search/tweets.json?q=' + encsearchquery +

'&result_type=recent', {headers: {Authorization: bearerheader}}, function(error, body, response) {

if(error)

console.log(error);

else {

res.json({success: true, data:JSON.parse(body.body)});

}

})

}

Notice that we are sending the url encoded search query and also the bearer token in the header.

Now don’t forget to add a route to server.js as shown below.

app.post('/search', functions.search);

1	app.post('/search', functions.search);

That’s it. Now when the query is typed and the search button is clicked. It will make an authorized request to the twitter search API with our bearer token in the header and the returned results will be displayed in the form of cards.

This is how we could access the twitter data through their REST Apis using Oauth Authorization.

Hope this helped you guys. Thanks for reading. Peace..

Follow me

Liked it? Take a second to support admin on Patreon!

choy1379

How to get image url from tweets using search.twitter?

i used function.js -> search query : &result_type=recent&count=20&include_entities=true

i trying {{item.entities.media[0].media_url}}

If you have media_url normal output, but if you do not have media_url data binding fails

how can i get media_url ??
Tom Schreck

Thank you for the tutorial. I understand we have to use a server in order to interact with Twitter due to CORS issues. In your code, you are putting your server in a separate folder and calling it via http://localhost:3000/. How does the server get started? How will this approach work in a production environment? Will http://localhost:3000/ still work in production? Can you think of your approach as having a web server embedded inside your app?
- raja yogan
  
  There are different ways to do this in a prod environment sir. You can either use a tool like gulp to streamline (i.e run an npm script to start the server first and check if it’s running). You can also have your app & server in the same project as you suggested. The reason why I always split the server and the app is becoz, in my previous company I used to work on a large-scale Angular 2 app and the architect who was handling that used to tell us to keep the codes separate so that there will be less of a headache when we scale up.. Also you can choose different hosting services for your app, db & server(if needed). Thanks for reading. Have a nice day.
  - Tom Schreck
    
    so you have http://localhost:3000/ embedded in your code. if you pushed this to a production server, would http://localhost:3000/ still work?
    - raja yogan
      
      Nope, we need to change it to the URL and port number on which the server is running and available.
Tzvi Gregory Kaidanov

How you can make it continius upload of data in your feed.. For instance you want to get the query refreshed each 5 sec to get delta data.

http://stackoverflow.com/questions/41099983/angular-2-how-to-send-a-parameter-in-observable-interval-continius-upload-of-d

Would love your input on my pickle here..
Iklas Dafadar Mca

how to post a tweet using angular 2 and node js
Iqubal Khan

how to run this project.. we have two folders I am new to angular

T-Pub :)

The Techies' pub

Angular 2 – Accessing twitter from your app.

Read previous post:

Angular 2 – Building an app to demonstrate Oauth 2.