Подключение к Twitter API в приложении на Angular 6

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), как показано ниже.

change the app Access permissions level to 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 = 'http://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 и откройте для себя бесконечные возможности.