Машина для создания случайных цитат - второй проект, который я решил завершить в скоростном забеге 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 до сих пор:

До следующего раза - счастливого кодирования