Машина для создания случайных цитат - второй проект, который я решил завершить в скоростном забеге Chingu FCC Speedrun Challenge. Я подумывал о том, чтобы пойти в приказе Федеральной комиссии по связи, но имеет смысл (по крайней мере, для меня) не заниматься портфелем, пока у меня действительно не будет чего в него вложить.
Этот проект был интереснее, чем страница дани, мне пришлось поиграть с тем, как обойти проблемы CORS, чтобы использовать внешний API через службу Angular 2.
Короче говоря, уловка заключается в том, чтобы возиться с множеством API-интерфейсов, пока вы не найдете тот, который позволит вам использовать jsonp. Наш победитель: форизматик.
После того, как вы выбрали подходящий API, настроить службу для получения цитаты очень просто:
import { Injectable } from '@angular/core'; import { Http, Response, Jsonp, URLSearchParams } from '@angular/http'; @Injectable() export class QuotesApiService { constructor(private jsonp: Jsonp) { } getQuote = () => { let apiUrl: string = 'http://api.forismatic.com/api/1.0/'; let params = new URLSearchParams(); params.set('method', 'getQuote'); params.set('format', 'jsonp'); params.set('key', '457653'); params.set('lang', 'en'); params.set('jsonp', 'JSONP_CALLBACK'); return this.jsonp .get(apiUrl, { search: params }) .map(response => response.json()); } }
Затем вы можете просто внедрить свой сервис в те компоненты, которые в нем нуждаются, а затем подписаться на данные в функции, которую вы вызываете из своих обработчиков кликов:
constructor (private quotesApiService: QuotesApiService) { } ngOnInit() {} getQuote(term: string) { this.quotesApiService.getQuote() .subscribe(quotes => this.quote = quotes ); }
Я проработал пару проблем, которые возникли на странице дани, и интегрировал решения в свою машину случайных цитат. А именно:
- чтобы значок работал как в dev, так и в продукте, поместите его в активы и измените ссылку в index.html, чтобы получить его оттуда
- есть дополнительный импорт и объявления, которые вы должны сделать, чтобы с помощью компонентов Material Design не нарушить стандартные тесты - я написал краткий пост об этом.
Конечный результат:
Примечания:
- Вы можете просмотреть исходный код здесь
- Вы можете посмотреть живую демонстрацию здесь
- Вы можете найти удивительное хранилище значков Франческо Аньолетто (Корнил) здесь.
Примечания для меня:
- Начните внедрять более надежные тесты в некоторые проекты.
- Продолжайте думать о соглашениях об именах CSS
Для всех, кому интересно - вот макет, который я собрал в Pencil в начале и над которым работал:
Мой прогресс в Speedrun до сих пор:
- Страница Дани
- Машина случайных цитат - этот пост
До следующего раза - счастливого кодирования