Автор оригинала: Harikrishna Kundariya.
API – это один из наиболее полезных инструментов для оптимизации и оптимизации функций в приложении. Используя Twitter API , вы можете практически получить доступ к всем функциям платформы в социальных сетях и сделать ваше приложение более доступным для пользователей Twitter.
При использовании любого приложения вы когда-нибудь столкнулись с вариантом, с которым вы можете войти или зарегистрироваться или получать информацию о вашей временной шкале Twitter на веб-сайте 3-го вечеринка? Ну, все эти вещи случаются из-за API Twitter.
Он не только делает приложение более надежным, но удобным для пользователя для конечного пользователя. В дополнение к этому, вам также нужно подумать об стоимости, чтобы сделать приложение также.
Если вы также хотите включить такие функции в вашем приложении, у нас есть для вас руководство. Мы собираемся подключить API Twitter с использованием углового JavaScript с помощью пошагового руководства.
Наряду с угловой, мы также собираемся использовать Node.js для создания сервера. Вы можете попросить это из всех других языков программирования, почему мы используем угловые?
Мы получили свои причины вместе с разнообразным опытом индустрии разработки программного обеспечения, которая заставила нас поверить, что Angularjs является идеальным выбором для этой цели.
Давайте понять, почему использовать Angularjs.
Причины использовать Angularjs
Отличная поддержка MVC
Большинство языков программирования не требуют разработчиков, чтобы разложить их программы в определенную модель-контроллер.
Как только они написали код, они должны объединяться все, чтобы гарантировать, что программа написана правильно.
Но всякий раз, когда вы используете угловую, программа автоматически совместима с архитектурой контроллера современного просмотра. Таким образом, разработчики не должны тратить столько времени для подключения точек.
Очень масштабируется
Традиционные языки программирования все еще борется в масштабировании веб-приложений.
Если вы работаете с CSS, HTML и на родном JavaScript, затем масштабирование существующих веб-приложений может быть чрезвычайно жестко для вас.
Потому что он не только приведет к расширенному количеству кода, но также требует дополнительных ресурсов и времени.
Однако, когда речь идет о угловании, то, как была построена эта структура JavaScript, делает его лучшей подходящей для всех потребностей программирования.
Это очень масштабируемо, но компактно используется для построения уровня предприятия или необходимых приложений.
Воспроизводимость в лучшем виде
Удобство использования является одним из существенных преимуществ использования Angularjs для программирования.
Весь код, написанный в Angularjs Framework, полностью многократно используются и могут быть использованы для других приложений.
В отличие от других дополнительных языков программирования, которые заставляют вас писать весь код, даже для аналогичных функций или кода каждый раз, когда Angularjs снимает, что нагрузка, сделав код 100% многоразовым.
Вы можете практически скопировать и вставить свой код, чтобы эффективно использовать его в других местах.
Вам не нужно писать похожий код для вашего приложения. Вы можете динамически использовать код и сэкономить много времени и ресурсов для разработки приложений.
Сохранение времени
Это, возможно, моя любимая причина при том, почему использует угловые для программирования потребностей.
Разработчики и предприниматели согласится на то время, когда является наиболее важном элементом для обеспечения эффективного развития продукта.
Когда дело доходит до программирования, вам придется инвестировать много времени, чтобы получить необходимое приложение для себя.
Всякий раз, когда вы работаете с HTML, CSS или родным JavaScript, время, необходимое для создания всего приложения, значительно выше по сравнению со временем, необходимым для создания того же приложения с использованием Angularjs.
Таким образом, угловая структура JavaScript помогает разработчикам сэкономить много времени из-за его оптимизированной сборки.
Элементы программирования, которые принимают столько времени на родном языке, могут быть легко сделаны с использованием этой JavaScript Framework.
Экономически эффективным
Это еще одно жизненное преимущество использования Angularjs для разработки переднего конца.
Наряду с его более быстрыми возможностями развития стиль и язык программирования и язык, используемый для записи кода в угловых, сильно практикуются в программированной промышленности.
HTML, CSS и JavaScript разработчики могут быстро написать код в Angularjs.
Следовательно, компании и агентства не должны искать высококвалифицированные и уникальные человеческие ресурсы, потому что существующие веб-разработчики могут удобно писать код в Angularjs.
Вот почему им не нужно увеличивать заработную плату разработчиков или пойти на конкретные разработчики, чтобы сделать работу. Более того, им не нужно устанавливать определенное оборудование или программное обеспечение, необходимое для записи кода в угловых js.
Я надеюсь, что эти причины достаточно, чтобы вы поверили, почему угловой – идеальный выбор для программирования.
Сегодня мы собираемся построить приложение с API Twitter с помощью узла и угловых 6.
К концу руководства у вас будет инструмент:
- Это будет подтвердить подлинность пользователя Twitter
- Которые могут делиться твитами с помощью Twitter API
- Которые могут прочитать график Twitter с тем же API
- Это также может дать вам список последних твитов аутентифицированного пользователя
- Которые также могут получить список твитов, где упоминается пользователь
- И я могу сделать другие несколько вещей!
Так что без дальнейшего ADO давайте погрузимся прямо.
Шаги для подключения API Twitter с угловым
Шаг 1: Установите необходимые файлы
Прежде чем начать строить приложение, которое соединяется с API Twitter, используя угловые, убедитесь, что у вас достаточно, установленных в вашей системе.
Для этого конкретного примера мы собираемся использовать узлы и угловые JavaScript Frameworks.
Поэтому вам необходимо установить узлы и угловые рамки JavaScript в ваших компьютерных системах. Есть огромные ресурсы доступны онлайн-ресурсы, которые могут дать вам практическое руководство о том, как установить эти рамки в любой системе.
Шаг 2: Создайте сервер узла
Во-первых, мы построим сервер узла, который может помочь нам взаимодействовать с API Twitter с максимальным потенциалом.
Поскольку мы подключаем Twitter API, нам потребуются учетные данные для доступа к API одной из крупнейших платформ социальных сетей, зарегистрировав заявку на их официальном сайте.
Вам нужно пойти на app.twitter.com, чтобы сначала зарегистрировать приложение.
На этой посадочной странице вам будет предложено ввести необходимые детали, такие как URL, имя приложения и описание.
Как только вы создадите свое приложение, вам потребуется создать уникальные ключевые ключи для вашего приложения.
Перейдите к ключам и токену доступа, чтобы создать токен доступа. Когда вы идете на эту вкладку, вы найдете создание моего токена доступа, расположенного в нижней части страницы.
Вы получите четыре ключа, как приведенные ниже приложение:
- Ключ потребителя (ключ API)
- Потребительский секрет (секрет API)
- Токен доступа
- Доступ к секрете токена
Убедитесь, что вы сохранили значения вышеуказанных клавиш, поскольку эти значения потребуются в последующих шагах.
Первое, что вам нужно сделать, это создать каталог для сервера.
Так что создайте файл .json и напишите следующий код для инициирования NPM. Вам также необходимо создать файл JavaScript, который является Server.js.
Ниже приведен этот фрагмент кода:
MKDIR Server Сервер CD NPM init сенсорный сервер.js.
Теперь мы установим пакет Twit для обеспечения безопасной связи с API Twitter. Теперь мы инициализируем все необходимые модули внутри Server.js Файл Отказ
Тогда Создать экспресс-приложение Написав следующий код.
const express = require('express');
const Twitter = require('twit');
const app = express();
app.listen(3000, () => console.log('Server running'))
Помните эти четыре значения, которые мы получили на вышеуказанном шаге, и мы собираемся применять те же значения в пакет Twitter, как написано в фрагменте кода ниже, что поможет нам в процессе аутентификации.
const api-client = new Twitter({
consumer_key: 'CONSUMER_KEY',
consumer_secret: 'CONSUMER_SECRET',
access_token: 'ACCESS_TOKEN',
access_token_secret: 'ACCESS_TOKEN_SECRET'
});
Обратите внимание, что и значения, которые мы используем в качестве клавиш в приведенном выше фрагменте кода, будут уникальными для всех приложений.
Когда вы создали учетную запись приложений Twitter, учетная запись присваивает уникальные ключевые ключи.
Теперь мы создадим конечные точки для публикации и извлечения значений с узла сервера.
Получить статусы/home_timeline – Действует новый твит, загруженный пользователями Получить статусы/home_timeline – Включает твиты, где упоминается пользователь Состояние сообщения/обновление – используется для совместного использования твитов
Теперь мы напишем код, чтобы получить твиты.
Первая конечная точка будет использоваться для извлечения твитов на вашей временной шкале. Обратите внимание, что мы можем написать количество твитов, которые мы хотим получить.
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);
});
});
Теперь, с приведенным ниже фрагментом, только эти твиты будут показаны, где упоминается пользователь.
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);
});
});
Обратите внимание, что нам не разрешено ничего писать на временной шкале Twitter. Для этого нам просто нужно изменить значение разрешения доступа к чтению и записи.
В приведенном выше фрагменте кода мы включаем возможность поделиться твитами.
Этот код будет написан на Server.js Файл позвонить в Twitter 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);
});
});
Теперь вы можете идти вперед и проверить Отдых API вместе с Почтальон Чтобы убедиться, что все вещи работают идеально в порядке.
До сих пор мы создали сервер узла и письменный основополагающий код для обеспечения базовых возможностей. Давайте перейдем к следующему шагу.
Шаг 3: Тестирование бэкэнда
Это важно, чтобы борьба вела себя согласно нашему ожиданию.
Если что-то пойдет не так по сравнению с тем, что мы упомянули ниже, вам может придеться изменить свой код, чтобы сделать его правильным. Любой Angularjs Web Application Company Company посоветул бы вам уделять большое значение этому аспекту.
Введите Query Home_timeline Отказ Как только вы это сделаете, убедитесь, что вы получаете что-то вроде ниже. Вот результат Получить Запрос на Metoutions_timeline конечные точки Отказ Убедитесь, что вы также работаете над ботом Twitter для максимальной портативности. Вы можете использовать код ниже, чтобы создать бот Twitter для себя.
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'));
Шаг 4: Разработайте независимое угловое приложение, чтобы использовать API для отдыха
Это один из важнейших шагов всего процесса.
Здесь мы собираемся работать на Angularjs, чтобы построить уникальное и базовое приложение, чтобы сохранить API для отдыха с сервера узлов, который мы создали в начале.
Итак, создайте угловое приложение, написав следующий код.
NG New Client.
Теперь вам нужно будет работать с сервером узла, откуда мы можем запросить данные.
Для этого нам нужно будет рассказать услуги, которые будут в постоянном соединении с сервером узла.
Внутри угловой приложения напишите ниже код.
NG Generate Service Twitterservice
Теперь нам нужно объявить конечные точки и вводить Httpclient внутри конструктора. Весь весь процесс будет выполнен в одном файле.
Итак, мы будем создавать два файла, а именно Twitter.service.spec.ts и Twitter.Service.ts Отказ
Мы бы редактировали файл Twitter.Service.ts Добавляя необходимый импорт и все остальные изменения, упомянутые в приведенном выше абзаце.
api_url = 'https://localhost:3000';
constructor(private http: HttpClient) { }
Чтобы потреблять Отдых API Мы напишем ниже функцию.
export class TwitterService {
api_url = 'http://localhost:3000';
constructor(private http: HttpClient) { }
getTimeline() {
return this.http
.get(this.api_url+'/home_timeline')
.pipe(map(data => data));
}
getMentions() {
return this.http
.get(this.api_url+'/mentions_timeline')
.pipe(map(data => data));
}
}
После доступа к услугам Twitter мы создадим два компонента ниже, чтобы выполнить работу.
NG генерирует компонент Twitter_timeline NG генерирует компонент Twitter_mentions NG генерирует компонент Tweet
Имейте в виду, что мы создали эти компоненты внутри приложения.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 Отказ
Шаг 5: Восстановление твитов
На этом этапе мы будем стремиться получить твиты для дальнейшего использования. Итак, мы будем создавать компоненты для отображения этих твитов.
В этом примере мы создаем компоненты TwittertimelineComponent и TwittermentionsComponent Для конкретных целей.
TwittertimelineComponent извлекает все последние твиты пользователей, которые аутентифицировали приложение.
Другой компонент, TwittermentionComponent, будет использоваться для извлечения только этих твитов, которые упоминают аутентифицированный пользователь.
Прежде всего, перейдите к Twitter-timeline.component.ts и начать работать на TwittertimelineComponent Отказ
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);
}
)
}
}
Обратите внимание, что Twitterservice внутри GetTwitterTimeline Способ потянуть данные профиля аутентифицированного пользователя.
Теперь мы бы обновили Twitter-timeline.component.html, как показано ниже.
Tweeter Timeline
Loading...{{tweets.full_text }}
{{tweets.created_at}}
{{tweets.user.name}}
{{tweets.user.screen_name}}
{{tweets.user.location}}
{{tweets.user.description}}
После этих шагов убедитесь, что вы запускаете свое приложение. Я уверен, что вы получите все детали ваших твитов, как только вы запустите приложение.
Шаг 6: Размещение твитов
Мы собираемся опубликовать твиты из конечной точки/post_tweet. Мы создадим форму, которую пользователи должны будут заполнить и нажать кнопку «Отправить кнопку» в конце.
Мы собираемся определить типы ввода, чтобы ограничить любую неточность для нашей задачи.
Перейти к 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]
});
}
}
Мы собираемся использовать FormBuilder Модуль для создания формы обновления состояния.
Теперь просто обновите шаблон, чтобы угловые знали, какую форму использовать.
Вы могли бы наблюдать из приведенного выше фрагмента кода, мы добавили валидаторы, потому что мы не хотим, чтобы пользователи отправляли пустую форму.
Все, что нам нужно сделать, это перейти к услуге Twitter и обновить файл, написав следующий код.
tweet(tweetdata: string) {
return this.http.post(`${this.api_url}/post_tweet/`, { status: tweetdata})
.pipe(map(tweet => {
alert("tweet posted")
return tweet;
}));
}
}
Это позвонит на API для публикации в Twitter.
Теперь мы обновим TweetComponent так иди к 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 конечная точка Отказ Чтобы получить все упоминания, вам нужно пойти на /motesion_timeline конечная точка и пойти в /post_tweet для необходимой цели.
Заключение
И вот как вы можете подключить API Twitter с помощью Angularjs.
Не стесняйтесь сообщать нам, как вы планируете использовать Twitter API в ваших предстоящих проектах.