Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)
Из этого урока вы узнаете, как выполнить вход и подключиться к Twitter API через Node.js и Angular 6. В этом уроке мы сделаем следующее:
- авторизация через Twitter API
- отправлять записи через Twitter API
- читать ленту Twitter через Twitter API
- и многое другое!
Создание сервера Node
Начнём со сборки сервера Node, который будет обрабатывать взаимодействия с Twitter API. Сперва зарегистрируем новое приложение, чтобы получить данные для использования Twitter API.
Просто идём на https://apps.twitter.com/, создаём новое приложение и заполняем все необходимые данные, вроде название приложения, описание и URL. После создания вашего приложения, потребуется создать уникальный ключ для вашего приложения. Для этого, идём на вкладку Keys and Access Token и нажимаем кнопку Create my access token внизу страницы.
Приложение сгенерирует четыре ключа, вроде этих:
- Consumer Key (ключ API)
- Consumer Secret (секрет API)
- Access Token
- Access Token Secret
Пожалуйста запишите данные ключи, так как они пригодятся позже.
Создайте каталог для серверного кода, создайте файл .json командой npm init
и создайте файл server.js.
mkdir server cd server npm init touch server.js
Затем, мы установим пакет twit
и остальные зависимости, необходимые для начальной загрузки приложения Express.
npm install twit body-parser cors express
Пакет twit
поможет нам взаимодействовать с Twitter API. Далее в server.js инициализируем модули, создадим приложение Express и запустим сервер.
const express = require('express'); const Twitter = require('twit'); const app = express(); app.listen(3000, () => console.log('Server running'))
Аутентификация
Потом, мы предоставим API ключи пакету twit
, как показано ниже.
const api-client = new Twitter({ consumer_key: 'CONSUMER_KEY', consumer_secret: 'CONSUMER_SECRET', access_token: 'ACCESS_TOKEN', access_token_secret: 'ACCESS_TOKEN_SECRET' });
Эти ключи уникальны для вашего приложения и связаны с вашим Twitter аккаунтом. Поэтому, когда вы делаете запрос через Twitter API, вы будете авторизированы.
Затем, на нашем сервере Node, создадим серверную часть для отправки и получения твитов.
Twitter предоставляет следующие методы подключения, которые позволят нам взаимодействовать с нашей стеной на Twitter, при получении и отправке твитов.
- GET
statuses/home_timeline
— возвращает самые недавние твиты, отправленные пользователем и пользователями, на которые он подписан. - GET
statuses/home_timeline
— возвращает самые недавние упоминания для авторизированного пользователя - POST
statuses/update
— используется для отправки твитов
Получение твитов
Первый метод будет использоваться для получения недавних твитов из вашей ленты. Мы укажем количество твитов, которые мы хотим получить.
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); }); });
Далее API для получения всех твитов, в которых был упомянут авторизированный пользователь.
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); }); });
Чтобы иметь возможность писать в ленту Твитера, нам понадобится изменить уровень прав доступа приложения (Access permissions) на чтение и запись (Read and write), как показано ниже.

Отправка твитов
Обновим файл server.js для вызова API для отправки твитов:
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); }); });
Мы закончили с node сервером и теперь вы можете протестировать REST API с помощью Postman, чтобы убедиться, что всё работает правильно.
Проверяем серверную часть
Если вы запросите метод home_timeline
в вашем API, вы должны получить что-то вроде этого.

А вот и GET запрос для mentions_timeline
:

Серверный код, созданный нами ранее, также можно использовать для создания Твитер-бота. Ниже пример простого Твитер-бота, который обновляет статус пользователя.
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'));
Построение Angular приложения для использования REST API
Сейчас мы начнём собирать наше Angular приложение, которое будет использовать API с нашего Node сервера.
Сперва, создайте приложение Angular.
ng new client
Служба Twitter
Создадим службу Твитера, которая будет отправлять делать запросы к Node северу. Введите следующую команду в приложении Angular.
ng generate service twitterservice
Это создаст два файла: twitter.service.ts и twitter.service.spec.ts. Откройте twitter.service.ts добавьте необходимые импорты, объявите методы API и вставьте модуль HttpClient
в конструктор.
api_url = 'https://localhost:3000'; constructor(private http: HttpClient) { }
Затем, зададим функцию для применения 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)); } }
Доступ к службе Твитера через компонент
Чтобы получить доступ к службе Твитера из нашего компонента, нужно сгенерировать следующие компоненты.
ng generate component twitter_timeline ng generate component twitter_mentions ng generate component tweet
Далее, в 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' } ];
Теперь откроем app.component.html и выведем компонент, как показано ниже.
<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>
Получение твитов
Создадим два компонента для отображения наших твитов. TwitterTimelineComponent
будет отображать самые недавние твиты из ленты авторизированного пользователя, а TwitterMentionsComponent
будет отображать все твиты, в которых этот пользователь упомянут.
Начнём с TwitterTimelineComponent
. Обновите twitter-timeline.component.ts как показано ниже:
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); } ) } }
Метод getTwitterTimeline
использует TwitterService
для получения данных из ленты авторизированного пользователя. Обновим twitter-timeline.component.html как показано ниже.
<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>
Здесь мы проходимся по массиву, возвращённому методом getTwitterTimeline
и отображаем следующие атрибуты для каждого твита:
location
description
username
created_at
screen_name
Затем, перейдём к TwitterMentionsComponent и обновим его вот так:
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); } ) } }
Напоследок, нам нужно отразить данные из API в нашем шаблоне. Обновляем twitter-mentions.component.html вот так:
<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>
Теперь, если запустите приложение, вы должны увидеть все эти атрибуты для показанных твитов.
Отправка твитов
Начнём с формы отправки данных на /post_tweet
, где зададим поле ввода и кнопку отправки, для отправки твитов. Для создания формы будем использовать модуль FormBuilder
. Добавьте следующий код в 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] }); } }
Теперь обновите шаблон, чтобы Angular знал, какую форму использовать.
<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>
Как видите выше, мы добавили проверку так, чтобы форму нельзя было отправить, если она пустая.
Затем переходим к службе Twitter и добавляем туда код для отправки данных в API.
tweet(tweetdata: string) { return this.http.post<any>(`${this.api_url}/post_tweet/`, { status: tweetdata}) .pipe(map(tweet => { alert("tweet posted") return tweet; })); } }
Изменим TweetComponent
добавив туда код для вызова метода для публикации через Twitter API. Добавьте следующее в 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; }); } }
Теперь у вас должно работать: получение недавних твитов на /home_timeline
, получение упоминаний на /mentions_timeline
, и отправка твитов через /post_tweet
.
Вывод
В этом уроке вы узнали, как начать работать с Twitter API и как соорудить простого Twitter бота в несколько строк кода. Ещё вы узнали, как подключиться к REST API через Angular, включая создание API-службы и компонентов для взаимодействия с этой службой.
Чтобы узнать больше о Twitter API, посетите сайт Twitter Developers и откройте для себя бесконечные возможности.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post