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

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

by
Difficulty:IntermediateLength:MediumLanguages:

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.

Затем, мы установим пакет twit и остальные зависимости, необходимые для начальной загрузки приложения Express.

Пакет twit поможет нам взаимодействовать с Twitter API. Далее в server.js инициализируем модули, создадим приложение Express и запустим сервер.

Аутентификация

Потом, мы предоставим API ключи пакету twit, как показано ниже.

Эти ключи уникальны для вашего приложения и связаны с вашим Twitter аккаунтом. Поэтому, когда вы делаете запрос через Twitter API, вы будете авторизированы.

Затем, на нашем сервере Node, создадим серверную часть для отправки и получения твитов.

Twitter предоставляет следующие методы подключения, которые позволят нам взаимодействовать с нашей стеной на Twitter, при получении и отправке твитов.

  • GET statuses/home_timeline — возвращает самые недавние твиты, отправленные пользователем и пользователями, на которые он подписан.
  • GET statuses/home_timeline — возвращает самые недавние упоминания для авторизированного пользователя
  • POST statuses/update — используется для отправки твитов

Получение твитов

Первый метод будет использоваться для получения недавних твитов из вашей ленты. Мы укажем количество твитов, которые мы хотим получить.

Далее API для получения всех твитов, в которых был упомянут авторизированный пользователь.

Чтобы иметь возможность писать в ленту Твитера, нам понадобится изменить уровень прав доступа приложения (Access permissions) на чтение и запись (Read and write), как показано ниже.

change the app Access permissions level to Read and write

Отправка твитов

Обновим файл server.js для вызова API для отправки твитов:

Мы закончили с node сервером и теперь вы можете протестировать REST API с помощью Postman, чтобы убедиться, что всё работает правильно.

Проверяем серверную часть

Если вы запросите метод home_timeline в вашем API, вы должны получить что-то вроде этого.

home_timeline endpoint in Postman

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

metions_timeline endpoint in Postman

Серверный код, созданный нами ранее, также можно использовать для создания Твитер-бота. Ниже пример простого Твитер-бота, который обновляет статус пользователя.

Построение Angular приложения для использования REST API

Сейчас мы начнём собирать наше Angular приложение, которое будет использовать API с нашего Node сервера.

Сперва, создайте приложение Angular.

Служба Twitter

Создадим службу Твитера, которая будет отправлять делать запросы к Node северу. Введите следующую команду в приложении Angular.

Это создаст два файла: twitter.service.ts и twitter.service.spec.ts. Откройте twitter.service.ts добавьте необходимые импорты, объявите методы API и вставьте модуль HttpClient в конструктор.

Затем, зададим функцию для применения REST API.

Доступ к службе Твитера через компонент

Чтобы получить доступ к службе Твитера из нашего компонента, нужно сгенерировать следующие компоненты.

Далее, в app.module.ts, задаём маршруты для сгенерированных компонентов.

Теперь откроем app.component.html и выведем компонент, как показано ниже.

Получение твитов

Создадим два компонента для отображения наших твитов. TwitterTimelineComponent будет отображать самые недавние твиты из ленты авторизированного пользователя, а TwitterMentionsComponent будет отображать все твиты, в которых этот пользователь упомянут.

Начнём с TwitterTimelineComponent. Обновите twitter-timeline.component.ts как показано ниже:

Метод getTwitterTimeline использует TwitterService для получения данных из ленты авторизированного пользователя. Обновим twitter-timeline.component.html как показано ниже.

Здесь мы проходимся по массиву, возвращённому методом getTwitterTimeline и отображаем следующие атрибуты для каждого твита:

  • location
  • description
  • username
  • created_at
  • screen_name

Затем, перейдём к TwitterMentionsComponent и обновим его вот так:

Напоследок, нам нужно отразить данные из API в нашем шаблоне. Обновляем twitter-mentions.component.html вот так:

Теперь, если запустите приложение, вы должны увидеть все эти атрибуты для показанных твитов.

Отправка твитов

Начнём с формы отправки данных на /post_tweet, где зададим поле ввода и кнопку отправки, для отправки твитов. Для создания формы будем использовать модуль FormBuilder. Добавьте следующий код в tweet.component.ts.

Теперь обновите шаблон, чтобы Angular знал, какую форму использовать.

Как видите выше, мы добавили проверку так, чтобы форму нельзя было отправить, если она пустая.

Затем переходим к службе Twitter и добавляем туда код для отправки данных в API.

Изменим TweetComponent добавив туда код для вызова метода для публикации через Twitter API. Добавьте следующее в tweet.component.ts:

Теперь у вас должно работать: получение недавних твитов на /home_timeline, получение упоминаний на /mentions_timeline, и отправка твитов через /post_tweet.

Вывод

В этом уроке вы узнали, как начать работать с Twitter API и как соорудить простого Twitter бота в несколько строк кода. Ещё вы узнали, как подключиться к REST API через Angular, включая создание API-службы и компонентов для взаимодействия с этой службой.

Чтобы узнать больше о Twitter API, посетите сайт Twitter Developers и откройте для себя бесконечные возможности.

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.