Angular9와 Firebase로 블로그를 만들어 보는 7(Qiita의 투고 이력을 표시한다)

13923 단어 QiitaAPIAngular
지난번 , 블로그 세부사항이 마크다운 형식에 대응했습니다.

이번에는 반응형 대응을 하려고 했습니다만, angular/flex-layout이 아직 Angular9에 대응하지 않고 에러가 되기 때문에, TOP 페이지에 Qiita의 투고 이력을 표시해 보려고 생각합니다.

블로그: htps : // 테라 cy-bg. 흠뻑 빠지다 p. 코m/

Qiita API



Qiita에는 Qiita API가 있기 때문에 이것을 사용하여 게시 기록을 얻으려고합니다.

내 게시 기록을 얻는 방법


  • /users/{user name}/items 에서 지정한 사용자의 소식을 얻을 수 있습니다.
  • 가져올 게시물은 기본적으로 최신 20건입니다
  • 참고 

    • https://qiita.com/api/v2/users/teracy55/items

    Angular에서 QiitaAPI 사용



    QiitaModule 만들기



    Qiita 모듈 만들기
  • HttpClient를 사용하려면 HttpClientModule을 가져옵니다.
  • QiitaService를 Provide합니다.

    src/services/qiita/qiita.module.ts
    import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { QiitaService } from './qiita.service';

@NgModule({
    imports: [HttpClientModule],
    providers: [QiitaService],
})
export class QiitaModule { }
  • QiitaService 만들기
  • 고정 값을 속성으로 정의합니다.
  • API의 기본 ( /api/v2 ) 경로를 정의합니다
  • 자신의 사용자 이름도 정의합니다

  • 범용적인 get 메소드를 만들어 둡니다
  • getMyItems 에서 게시물 목록을 가져옵니다.
  • 우선 ?per_page=10 에서 10건만 취하도록 합니다.



    • src/service/qiita/qiita.service.ts
    import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { QiitaItem } from 'src/types/qiita.interface';

@Injectable()
export class QiitaService {
    private readonly apiHost = 'https://qiita.com/api/v2';
    private readonly myUserName = 'teracy55';

    constructor(private http: HttpClient) {}

    private get<T>(path: string) {
        return this.http.get<T>(this.apiHost + path).toPromise();    
    }

    /**
     * 参考：https://qiita.com/api/v2/docs#get-apiv2usersuser_iditems
     */
    getMyItems() {
        return this.get<QiitaItem[]>('/users/' + this.myUserName + '/items?per_page=10');
    }
}
  • 형태 정의해 둡니다
  • 게시물 : 반환값 정보
  • 사용자는 사용할 때 정의합니다


    • src/types/qiita.interface.ts
    export interface QiitaUser {
    // TODO
}

/**
 * 投稿
 * 参考：https://qiita.com/api/v2/docs#%E6%8A%95%E7%A8%BF
 */
export interface QiitaItem {
    rendered_body: string;
    body: string;
    coediting: boolean;
    comments_count: number;
    created_at: string;
    group: any;
    id: string;
    likes_count: number;
    private: boolean;
    reactions_count: number;
    tags: { name: string, version: string[] }[];
    title: string;
    updated_at: string;
    url: string;
    user: QiitaUser;
    page_views_count: number;
}

    Component에서 QiitaService 사용



    src/app/top/qiita/qiita.component.ts
    import { Component, OnInit } from '@angular/core';
import { QiitaService } from '../../../services/qiita/qiita.service';
import { QiitaItem } from 'src/types/qiita.interface';

@Component({
  selector: 'app-top-qiita',
  templateUrl: './qiita.component.html',
  styleUrls: ['./qiita.component.scss'],
})
export class TopQiitaComponent implements OnInit {
  news: QiitaItem[];

  constructor(private qiitaService: QiitaService) {}

  async ngOnInit() {
    this.news = await this.qiitaService.getMyItems();
  }
}
  • HTML도 작성합니다.
  • ngFor에서 목록을 표시합니다.
  • 제목은 링크가되어 누를 때 Qiita로 날아갑니다


    • src/app/top/qiita/qiita.component.html
    <div class="top-contents">
  <h4 class="title">Qiita</h4>
  <div *ngFor="let item of news" class="item">
    <span class="date">{{item.created_at | date: 'yyyy/MM/dd'}}</span>
    <a target="_blank" [href]="item.url" class="item-title" [title]="item.title">{{item.title}}</a>
  </div>
</div>

    이런 느낌이 들었습니다.





    덧붙여서 이용 제한의 관계로 1시간에 60회까지밖에 취득할 수 없는 것 같습니다.
    htps : // 코 m/아피/v2/도 cs#%에5%88%아9%에7%94%아8%에5%88%B6%에9%99%90

    요약



    쉽게 Qiita의 게시물을 잡았습니다.
    최종적으로는 이 사이트에서 블로그를 투고하면 Qiita에도 투고할 수 있는 기능도 구현하고 싶네요.

    (추기)
    Angular 9와 Firebase에서 블로그를 만들어 보는 8 (Twitter 타임 라인을 임베드 해 본다)
    Splunk Curl App에서 Qiita의 페이지보기 수를 확인했습니다.
    Qiita API를 사용하여 기사 데이터를 얻는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage