permission

Connect to the Twitter API in an Angular 6 App

In this tutorial, you’ll learn how to authenticate and connect to the Twitter API using Node.js and Angular 6. By the end of this tutorial, you’ll have done the following:

  • authenticate with the Twitter API
  • post tweets with the Twitter API
  • read the twitter timeline with the Twitter API
  • and more!

Create a Node Server

We will start by building a Node server which handle interaction with the Twitter API. The first step will be to register a new app so as to obtain the credentials to start using the Twitter API.

Simply go to https://apps.twitter.com/, create a new app and fill out all the necessary details—ie. the app name, description and URL. After creating your application, you will be required to create unique keys for your application. To do that, simply go to Keys and Access Token tab and click on Create my access token button located at the bottom of the page.

The application will generate 4 keys as follows:

  • Consumer Key (the API key)
  • Consumer Secret (the API secret)
  • Access Token
  • Access Token Secret

Please make note of the above keys as they will come in handy later on.

Create a directory for the server code, create a .json file by running npm init and create a server.js file.

We will then install the twit package and the rest of the dependencies necessary to bootstrap an Express application. 

The twit package will help us in interacting with the Twitter API. Next, in server.js, initialize the modules, create an express app and launch the server.

Authentication

We will then supply the API keys to the twit package as shown below.

The keys are unique to your application and are linked to your Twitter account. So when you make a request with the Twitter API, you will be the authorized user.

We will then create the endpoints for posting and retrieving tweets in our Node server.

Twitter provides the following endpoints that will enable us to interact with our Twitter timeline when retrieving and posting tweets.

  • GET statuses/home_timeline—returns the most recent tweets posted by the user and the users they follow
  • GET statuses/home_timeline—returns the most recent mentions for the authenticating user
  • POST statuses/update—used for posting tweets

Retrieving Tweets

This first endpoint will be used to retrieve the latest tweets on your timeline. We’ll also specify the number of tweets we want to retrieve.

Next is the API for retrieving all the tweets where the authenticating user has been mentioned.

In order to be able to write to the Twitter timeline, we need to change the app Access permissions level to Read and write as shown below.

Posting Tweets

Next, update the server.js file to call the API for posting tweets.

We are now done with the node server and you can now test your REST API with Postman to ensure it is working right.

Testing the Back-End

If you query the home_timeline endpoint in your API, you should see something like the following.

home_timeline endpoint in Postman

And here is a GET request to the mentions_timeline endpoint:

metions_timeline endpoint in Postman

The server code we have created above can also be used to create a Twitter bot. Below is an example of a basic Twitter bot that updates a user’s status.

Build an Angular App to Consume the REST APIs

We will now start building our angular application which will consume the API’s from our Node server.

First, create an Angular application.

Twitter Service

We will start by creating a Twitter service that will make requests to the Node server. Issue the following command in the Angular application.

This will create two files, twitter.service.ts and twitter.service.spec.ts. Open twitter.service.ts ,add the required imports, declare the API endpoint and inject the HttpClient module in the constructor.

We will then define the functions for consuming the REST API.

Access the Twitter Service from Component.

In order to access the Twitter service from our component, we will need to generate the following components.

Next, declare the routes for the generated components in app.module.ts.

Now open app.component.html and render the components as shown below.

Retrieving Tweets

We’ll create two components for displaying our tweets. The TwitterTimelineComponent will display the most recent tweets from the timeline of the authenticated user while theTwitterMentionsComponent will display all the tweets in which the authenticated user has been mentioned.

We will start with the TwitterTimelineComponent. Update twitter-timeline.component.ts as follows:

The  getTwitterTimeline method uses the TwitterService to pull data from authenticated users timeline.  We then update twitter-timeline.component.html  as shown below.

Here we iterate through the array returned by the getTwitterTimeline method and display the following attributes for each tweet:

  • location
  • description
  • username
  • created_at
  • screen_name

We then move on to the TwitterMentionsComponent and update it as follows. 

Lastly, we need to display the data from the API in the template. Update twitter-mentions.component.html file as follows:

Now when you run the app you should see all the attributes of your tweets displayed. 

Posting Tweets

We will start with the form for posting data to the /post_tweet endpoint where we define an input field and a submit button for posting tweets. We will use the FormBuilder module to build our status update form. Add the following code to tweet.component.ts.

Now update the template so that Angular knows which form to use.

As you can see above, we have added validators so that the form cannot be submitted if it is blank.

We then go on to the Twitter service and update it to include the code for posting data to the API.

We will then update the TweetComponent to feature the code for calling the method for posting to the Twitter API. Add the following to tweet.component.ts.

You should now be able to retrieve the latest tweets by hitting the /home_timeline endpoint, your mentions via the /mentions_timeline endpoint and post tweets via the /post_tweet endpoint. 

Conclusion

In this tutorial, you learned how to get started with the Twitter API and how to build a simple Twitter Bot with just a few lines of code. You also learned how to connect with a REST API from Angular, including creating an API Service and components to interact with that service. 

To learn more about the Twitter API, head over to https://developer.twitter.com/en/apps and explore some of the endless possibilities.

Powered by WPeMatico

Leave a Comment

Scroll to Top