Kết nối với API Twitter trong Ứng dụng Angular 6

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong bài hướng dẫn này, bạn sẽ tìm hiểu cách xác thực và kết nối với Twitter API bằng Node.js và Angular 6. Đến cuối hướng dẫn này, bạn sẽ có được như sau:

xác thực với Twitter API
đăng tweet với Twitter API
đọc timeline Twitter với Twitter API
và hơn thế nữa!

Tạo Node Server

Chúng ta sẽ bắt đầu bằng cách xây dựng một Node server sẽ xử lý việc tương tác với Twitter API. Bước đầu tiên sẽ là đăng ký một ứng dụng mới để có được thông tin đăng nhập để bắt đầu sử dụng Twitter API.

Chỉ cần truy cập https://apps.twitter.com/, tạo một ứng dụng mới và điền vào tất cả các chi tiết cần thiết. tên ứng dụng, mô tả và URL. Sau khi tạo ứng dụng của bạn, bạn sẽ được yêu cầu tạo các khóa duy nhất cho ứng dụng của mình. Để làm điều đó, chỉ cần đi tới tab Keys and Access Token và nhấp vào nút Create my access token nằm ở cuối trang.

Ứng dụng sẽ tạo ra bốn khóa như sau:

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

Vui lòng lưu ý các khoá trên vì chúng sẽ có ích sau này.

Tạo một thư mục cho code máy chủ, tạo tập tin .json bằng cách chạy npm init và tạo tập tin server.js.

1	mkdir server
2	cd server
3	npm init
4	touch server.js

Sau đó, chúng ta sẽ cài đặt gói twit và phần còn lại của các phụ thuộc cần thiết để khởi động ứng dụng Express.

1	npm install twit body-parser cors express

Gói twit sẽ giúp chúng ta tương tác với Twitter API. Tiếp theo, trong server.js, khởi tạo các mô-đun, tạo ứng dụng Express và khởi chạy server.

const express = require('express');
const Twitter = require('twit');
const app = express();

app.listen(3000, () => console.log('Server running'))

Xác thực

Sau đó chúng ta sẽ cung cấp các khóa API cho gói twit như dưới đây.

const api-client = new Twitter({
  consumer_key: 'CONSUMER_KEY',
  consumer_secret: 'CONSUMER_SECRET',
  access_token: 'ACCESS_TOKEN',
  access_token_secret: 'ACCESS_TOKEN_SECRET'
});

Các khóa là duy nhất cho ứng dụng của bạn và được liên kết với tài khoản Twitter của bạn. Vì vậy, khi bạn thực hiện một yêu cầu với Twitter API, bạn sẽ là người dùng được xác thực.

Sau đó, chúng ta sẽ tạo các endpoint để post và truy xuất các tweet trên máy chủ Node của chúng ta.

Twitter cung cấp các endpoint sau đây sẽ cho phép chúng ta tương tác với timeline Twitter của chúng ta khi truy xuất và post các tweet.

GET statuses/home_timeline—trả về các tweet gần đây nhất được post bởi người dùng và người dùng họ theo dõi
GET statuses/home_timeline—trả về các mention gần đây nhất cho người dùng
POST statuses/update—dùng để đăng tweet

Truy vấn Tweet

Endpoint đầu tiên này sẽ được sử dụng để truy xuất các tweet mới nhất trên timeline của bạn. Chúng ta cũng sẽ chỉ định số tweet mà chúng ta muốn lấy.

app.get('/home_timeline', (req, res) => {
    const params = { tweet_mode: 'extended', count: 10 };
  
    client
      .get(`statuses/home_timeline`, params)
      .then(timeline => {
        
        res.send(timeline);
      })
      .catch(error => {
      res.send(error);
    });
     
});

Tiếp theo là API để truy xuất tất cả các tweet nơi mà người dùng xác thực đã được mention.

app.get('/mentions_timeline', (req, res) => {
    const params = { tweet_mode: 'extended', count: 10 };
  
    client
      .get(`statuses/mentions_timeline`, params)
      .then(timeline => {
      
        res.send(timeline);
      })
      .catch(error => {
      res.send(error);
    });
     
});

Để có thể ghi vào timeline Twitter, chúng ta cần thay đổi cấp độ quyền truy cập ứng dụng (Access permissions) thành Đọc và viết (Read and write) như hình dưới đây.

change the app Access permissions level to Read and write

Đăng Tweet

Tiếp theo, cập nhật tập tin server.js để gọi API để đăng tweet.

app.post('/post_tweet', (req, res) => {

  tweet = req.body;
  
    client
      .post(`statuses/update`, tweet)
      .then(tweeting => {
        console.log(tweeting);
        
        res.send(tweeting);
      })

     .catch(error => {
      res.send(error);
    });
      
   
});

Chúng ta đã xong với node server và bây giờ bạn có thể kiểm tra REST API của mình với Postman để đảm bảo nó hoạt động tốt.

Test Back-End

Nếu bạn truy vấn endpoint home_timeline trong API của mình, bạn sẽ thấy như sau.

Và đây là một yêu cầu GET đến endpoint mentions_timeline:

Code cho server mà chúng ta đã tạo ở trên cũng có thể được sử dụng để tạo bot Twitter. Dưới đây là một ví dụ về bot Twitter cơ bản cập nhật trạng thái của người dùng.

const express = require('express');
const Twitter = require('twit');

const app = express();
const client = new Twitter({
  consumer_key: 'Consumer Key Here',
  consumer_secret: 'Consumer  Secret  Here',
  access_token: 'Access Token Here',
  access_token_secret: 'Token  Secret Here'
});


app.use(require('cors')());
app.use(require('body-parser').json());

app.post('/post_tweet', (req, res) => {

  tweet = {status:"Hello world"};
    
    client
      .post(`statuses/update`, tweet)
      .then(timeline => {
        console.log(timeline);
        
        res.send(timeline);
      })

     .catch(error => {
      res.send(error);
    });
      
   
});

app.listen(3000, () => console.log('Server running'));


Xây dựng một ứng dụng Angular để sử dụng REST API

Bây giờ chúng ta sẽ bắt đầu xây dựng ứng dụng Angular mà sẽ sử dụng API từ máy chủ Node của chúng ta.

Đầu tiên, tạo một ứng dụng Angular.

1	ng new client

Twitter Service

Chúng ta sẽ bắt đầu bằng cách tạo một Twitter Service sẽ thực hiện các yêu cầu đến máy chủ Node. Thực thi lệnh sau trong ứng dụng Angular.

1	ng generate service twitterservice

Việc này sẽ tạo ra hai tập tin, twitter.service.ts và twitter.service.spec.ts. Mở twitter.service.ts, thêm các import theo yêu cầu, khai báo API endpoint và tiêm inject mô đun HttpClient vào constructor.

1	api_url = 'https://localhost:3000';
2
3	constructor(private http: HttpClient) { }

Sau đó, chúng ta sẽ định nghĩa các hàm để sử dụng REST API.

export class TwitterService {

 api_url = 'http://localhost:3000';
 
  constructor(private http: HttpClient) { }

  getTimeline() {
    return this.http
      .get<any[]>(this.api_url+'/home_timeline')
      .pipe(map(data => data));

  }

  getMentions() {
    return this.http
      .get<any[]>(this.api_url+'/mentions_timeline')
      .pipe(map(data => data));

  }

}

Truy cập Twitter Service từ Component.

Để truy cập Twitter Service từ component của chúng ta, chúng ta sẽ cần tạo các component sau.

1	ng generate component twitter_timeline
2	ng generate component twitter_mentions
3	ng generate component tweet

Tiếp theo, khai báo các route cho các component được tạo trong app.module.ts.

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  {
    path: 'twitter_timeline',
    component: TwitterTimelineComponent
  },
  {
    path: 'twitter_mentions',
    component: TwitterMentionsComponent
  },

  {
    path: 'tweets',
    component: TweetComponent
  },

  { path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

Bây giờ hãy mở app.component.html và kết xuất các component như hình bên dưới.

<mat-toolbar color="primary">
   <mat-toolbar-row>
     <!--  <span>HOME</span> -->
      <span><a href="/">HOME</a></span>
      <span class="spacer"></span>
      <span mat-button  routerLink="/twitter_timeline">Timeline</span>
      <br>
      <a  mat-button  routerLink="/twitter_mentions">Mentions</a>
      <br>
      <a  mat-button  routerLink="/tweets">Tweets</a>
   </mat-toolbar-row>
</mat-toolbar>
<router-outlet></router-outlet>


Truy vấn Tweet

Chúng tôi sẽ tạo hai component để hiển thị tweet của chúng ta. TwitterTimelineComponent sẽ hiển thị các tweet gần đây nhất từ timeline của người dùng được xác thực, trong khi TwitterMentionsComponent sẽ hiển thị tất cả các tweet mà người dùng được xác thực đã được mention.

Chúng ta sẽ bắt đầu với TwitterTimelineComponent. Cập nhật twitter-timeline.component.ts như sau:

export class TwitterTimelineComponent implements OnInit {
  
  myTimeline: any;

  constructor(private api: TwitterService) { }

  ngOnInit() {
   this.getTwitterTimeline();
  }
  
  getTwitterTimeline(): void {
    this.api.getTimeline()
      .subscribe(
        myTimeline => {
          this.myTimeline = myTimeline;
          console.log(this.myTimeline);
        }
      )
   }
  
}

Phương thức getTwitterTimeline bằng TwitterService để lấy dữ liệu từ timeline của người dùng được xác thực. Sau đó, chúng ta cập nhật twitter-timeline.component.html như minh hoạ bên dưới.

<h1>Tweeter Timeline</h1>
<div *ngIf="undefined === myData">Loading...</div>
<div *ngIf="undefined !== myData">
  <div class ="card">
    <ng-container *ngFor="let tweets of myData.data">
      <h3>{{tweets.full_text
        }}
      </h3>
      <p>{{tweets.created_at}}</p>
      <p>{{tweets.user.name}}</p>
      <p>{{tweets.user.screen_name}}</p>
      <p>{{tweets.user.location}}</p>
      <p>{{tweets.user.description}}</p>
    </ng-container>
  </div>
</div>


Ở đây, chúng ta lặp qua mảng được trả về bởi phương thức getTwitterTimeline và hiển thị các thuộc tính sau cho mỗi tweet:

location
description
username
created_at
screen_name

Sau đó chúng ta chuyển sang TwitterMentionsComponent và cập nhật nó như sau.

export class TwitterMentionsComponent implements OnInit {
  
  myMentions: any;

  constructor(private api: TwitterService) { }

  ngOnInit() {
   this.getTwitterMentions();
  }
  
  getTwitterMentions(): void {
    this.api.getTimeline()
      .subscribe(
        myMentions => {
          this.myMentions = myMentions;
          console.log(this.myMentions);
        }
      )
   }
  
}

Sau cùng, chúng ta cần hiển thị dữ liệu từ API trong template. Cập nhật twitter-mentions.component.html như sau:

<h1>Tweeter Mentions</h1>
<div *ngIf="undefined === myData">Loading...</div>
<div *ngIf="undefined !== myData">
  <div class ="card">
    <ng-container *ngFor="let tweets of myData.data">
      <h3>{{tweets.full_text
        }}
      </h3>
      <p>{{tweets.created_at}}</p>
      <p>{{tweets.user.name}}</p>
      <p>{{tweets.user.screen_name}}</p>
      <p>{{tweets.user.location}}</p>
      <p>{{tweets.user.description}}</p>
    </ng-container>
  </div>
</div>


Bây giờ, khi bạn chạy ứng dụng, bạn sẽ thấy tất cả các thuộc tính về tweet của bạn được hiển thị.

Đăng Tweet

Chúng ta sẽ bắt đầu bằng form để post dữ liệu lên endpoint /post_tweet, nơi chúng ta xác định một input và nút submit để đăng tweet. Chúng ta sẽ sử dụng mô-đun FormBuilder để xây dựng form cập nhật trạng thái. Thêm code sau vào tweet.component.ts.

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class TweetComponent implements OnInit {
tweetForm: FormGroup;
   
  constructor(private api: TwitterService private formBuilder: FormBuilder) { }

  ngOnInit() {

   this.tweetForm = this.formBuilder.group({
            tweetdata: ['', Validators.required]
        });
  }

}

Bây giờ hãy cập nhật form để Angular biết nên sử dụng form nào.

<mat-card class="contact-card">
  <mat-card-content>
    <form [formGroup]="tweetForm" (ngSubmit)="onSubmit()">
    <mat-form-field>
      <input matInput placeholder="Status"  formControlName="tweetdata" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.tweetdata.errors }" >
    </mat-form-field>
    <br>
    <div class="form-group">
      <button [disabled]="loading" class="btn btn-primary">TWEET</button>
      <img *ngIf="loading" src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif" />
    </div>
    </form>
  </mat-card-content>
</mat-card>


Như bạn có thể thấy ở trên, chúng ta đã thêm validator để form không thể được gửi nếu nó trống.

Sau đó chúng ta tiếp tục sử dụng Twitter service và cập nhật nó để bao gồm code để post dữ liệu lên API.

  tweet(tweetdata: string) {
        return this.http.post<any>(`${this.api_url}/post_tweet/`, { status: tweetdata})
            .pipe(map(tweet => {
            
                alert("tweet posted")

                return tweet;
            }));
    }

}

Sau đó, chúng ta sẽ cập nhật TweetComponent để làm nổi bật code gọi phương thức để post lên Twitter API. Thêm phần sau vào tweet.component.ts.

export class TweetComponent implements OnInit {
tweetForm: FormGroup;
    loading = false;
    submitted = false;
    returnUrl: string;
    error = '';

  constructor(private api: TwitterService private formBuilder: FormBuilder) { }

  ngOnInit() {

   this.tweetForm = this.formBuilder.group({
            tweetdata: ['', Validators.required]
        });
  }

  get f() { return this.tweetForm.controls; }

    onSubmit() {
        this.submitted = true;

        // stop here if form is invalid
        if (this.tweetForm.invalid) {
            return;
        }

        this.loading = true;
        this.api.tweet(this.f.tweetdata.value)
            .pipe(first())
            .subscribe(
                data => {
                    console.log("yes")
                },
                error => {
                    this.error = error;
                    this.loading = false;
                });
    }

}

Bây giờ bạn có thể truy xuất các tweet mới nhất bằng cách nhấn vào endpoint /home_timeline, truy xuất các mention của bạn thông qua endpoint /mentions_timeline và đăng tweet qua endpoint /post_tweet.

Phần kết luận

Trong bài hướng dẫn này, bạn đã học được cách làm việc với Twitter API và cách xây dựng một bot Twitter đơn giản chỉ với một vài dòng code. Bạn cũng đã học cách kết nối với REST API từ Angular, bao gồm tạo API Service và các component để tương tác với service đó.

Để tìm hiểu thêm về Twitter API, hãy truy cập trang web của Nhà phát triển Twitter và khám phá những khả năng vô tận.