Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Node.js
Code

Kết nối với API Twitter trong Ứng dụng Angular 6

by
Difficulty:IntermediateLength:MediumLanguages:

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

Trong bài hướng dẫn này, bạn sẽ tìm hiểu cách xác thực và kết nối với Twitter API bằng Node.js và Angular 6. Đến cuối hướng dẫn này, bạn sẽ có được như sau:

  • xác thực với Twitter API
  • đăng tweet với Twitter API
  • đọc timeline Twitter với Twitter API
  • và hơn thế nữa!

Tạo Node Server

Chúng ta sẽ bắt đầu bằng cách xây dựng một Node server sẽ xử lý việc tương tác với Twitter API. Bước đầu tiên sẽ là đăng ký một ứng dụng mới để có được thông tin đăng nhập để bắt đầu sử dụng Twitter API.

Chỉ cần truy cập https://apps.twitter.com/, tạo một ứng dụng mới và điền vào tất cả các chi tiết cần thiết. tên ứng dụng, mô tả và URL. Sau khi tạo ứng dụng của bạn, bạn sẽ được yêu cầu tạo các khóa duy nhất cho ứng dụng của mình. Để làm điều đó, chỉ cần đi tới tab Keys and Access Token và nhấp vào nút Create my access token nằm ở cuối trang.

Ứng dụng sẽ tạo ra bốn khóa như sau:

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

Vui lòng lưu ý các khoá trên vì chúng sẽ có ích sau này.

Tạo một thư mục cho code máy chủ, tạo tập tin .json bằng cách chạy npm init và tạo tập tin server.js.

Sau đó, chúng ta sẽ cài đặt gói twit và phần còn lại của các phụ thuộc cần thiết để khởi động ứng dụng Express.

Gói twit sẽ giúp chúng ta tương tác với Twitter API. Tiếp theo, trong server.js, khởi tạo các mô-đun, tạo ứng dụng Express và khởi chạy server.

Xác thực

Sau đó chúng ta sẽ cung cấp các khóa API cho gói twit như dưới đây.

Các khóa là duy nhất cho ứng dụng của bạn và được liên kết với tài khoản Twitter của bạn. Vì vậy, khi bạn thực hiện một yêu cầu với Twitter API, bạn sẽ là người dùng được xác thực.

Sau đó, chúng ta sẽ tạo các endpoint để post và truy xuất các tweet trên máy chủ Node của chúng ta.

Twitter cung cấp các endpoint sau đây sẽ cho phép chúng ta tương tác với timeline Twitter của chúng ta khi truy xuất và post các tweet.

  • GET statuses/home_timeline—trả về các tweet gần đây nhất được post bởi người dùng và người dùng họ theo dõi
  • GET statuses/home_timeline—trả về các mention gần đây nhất cho người dùng
  • POST statuses/update—dùng để đăng tweet

Truy vấn Tweet

Endpoint đầu tiên này sẽ được sử dụng để truy xuất các tweet mới nhất trên timeline của bạn. Chúng ta cũng sẽ chỉ định số tweet mà chúng ta muốn lấy.

Tiếp theo là API để truy xuất tất cả các tweet nơi mà người dùng xác thực đã được mention.

Để có thể ghi vào timeline Twitter, chúng ta cần thay đổi cấp độ quyền truy cập ứng dụng (Access permissions) thành Đọc và viết (Read and write) như hình dưới đây.

change the app Access permissions level to Read and write

Đăng Tweet

Tiếp theo, cập nhật tập tin server.js để gọi API để đăng tweet.

Chúng ta đã xong với node server và bây giờ bạn có thể kiểm tra REST API của mình với Postman để đảm bảo nó hoạt động tốt.

Test Back-End

Nếu bạn truy vấn endpoint home_timeline trong API của mình, bạn sẽ thấy như sau.

home_timeline endpoint in Postman

Và đây là một yêu cầu GET đến endpoint mentions_timeline:

metions_timeline endpoint in Postman

Code cho server mà chúng ta đã tạo ở trên cũng có thể được sử dụng để tạo bot Twitter. Dưới đây là một ví dụ về bot Twitter cơ bản cập nhật trạng thái của người dùng.

Xây dựng một ứng dụng Angular để sử dụng REST API

Bây giờ chúng ta sẽ bắt đầu xây dựng ứng dụng Angular mà sẽ sử dụng API từ máy chủ Node của chúng ta.

Đầu tiên, tạo một ứng dụng Angular.

Twitter Service

Chúng ta sẽ bắt đầu bằng cách tạo một Twitter Service sẽ thực hiện các yêu cầu đến máy chủ Node. Thực thi lệnh sau trong ứng dụng Angular.

Việc này sẽ tạo ra hai tập tin, twitter.service.ts và twitter.service.spec.ts. Mở twitter.service.ts, thêm các import theo yêu cầu, khai báo API endpoint và tiêm inject mô đun HttpClient vào constructor.

Sau đó, chúng ta sẽ định nghĩa các hàm để sử dụng REST API.

Truy cập Twitter Service từ Component.

Để truy cập Twitter Service từ component của chúng ta, chúng ta sẽ cần tạo các component sau.

Tiếp theo, khai báo các route cho các component được tạo trong app.module.ts.

Bây giờ hãy mở app.component.html và kết xuất các component như hình bên dưới.

Truy vấn Tweet

Chúng tôi sẽ tạo hai component để hiển thị tweet của chúng ta. TwitterTimelineComponent sẽ hiển thị các tweet gần đây nhất từ ​​timeline của người dùng được xác thực, trong khi TwitterMentionsComponent sẽ hiển thị tất cả các tweet mà người dùng được xác thực đã được mention.

Chúng ta sẽ bắt đầu với TwitterTimelineComponent. Cập nhật twitter-timeline.component.ts như sau:

Phương thức getTwitterTimeline bằng TwitterService để lấy dữ liệu từ timeline của người dùng được xác thực. Sau đó, chúng ta cập nhật twitter-timeline.component.html như minh hoạ bên dưới.

Ở đây, chúng ta lặp qua mảng được trả về bởi phương thức getTwitterTimeline và hiển thị các thuộc tính sau cho mỗi tweet:

  • location
  • description
  • username
  • created_at
  • screen_name

Sau đó chúng ta chuyển sang TwitterMentionsComponent và cập nhật nó như sau.

Sau cùng, chúng ta cần hiển thị dữ liệu từ API trong template. Cập nhật twitter-mentions.component.html như sau:

Bây giờ, khi bạn chạy ứng dụng, bạn sẽ thấy tất cả các thuộc tính về tweet của bạn được hiển thị.

Đăng Tweet

Chúng ta sẽ bắt đầu bằng form để post dữ liệu lên endpoint /post_tweet, nơi chúng ta xác định một input và nút submit để đăng tweet. Chúng ta sẽ sử dụng mô-đun FormBuilder để xây dựng form cập nhật trạng thái. Thêm code sau vào tweet.component.ts.

Bây giờ hãy cập nhật form để Angular biết nên sử dụng form nào.

Như bạn có thể thấy ở trên, chúng ta đã thêm validator để form không thể được gửi nếu nó trống.

Sau đó chúng ta tiếp tục sử dụng Twitter service và cập nhật nó để bao gồm code để post dữ liệu lên API.

Sau đó, chúng ta sẽ cập nhật TweetComponent để làm nổi bật code gọi phương thức để post lên Twitter API. Thêm phần sau vào tweet.component.ts.

Bây giờ bạn có thể truy xuất các tweet mới nhất bằng cách nhấn vào endpoint /home_timeline, truy xuất các mention của bạn thông qua endpoint /mentions_timeline và đăng tweet qua endpoint /post_tweet.

Phần kết luận

Trong bài hướng dẫn này, bạn đã học được cách làm việc với Twitter API và cách xây dựng một bot Twitter đơn giản chỉ với một vài dòng code. Bạn cũng đã học cách kết nối với REST API từ Angular, bao gồm tạo API Service và các component để tương tác với service đó.

Để tìm hiểu thêm về Twitter API, hãy truy cập trang web của Nhà phát triển Twitter và khám phá những khả năng vô tận.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.