LoginSignup
1
0

More than 5 years have passed since last update.

@SOhtsu(Shuichi Ohtsu)

"ng6-udm-mock" JsonPlaceholderとjson-serverを使用するためのAngular6用サービスライブラリ

Last updated at Posted at 2018-09-05

ng6-udm-mockは、JsonPlaceholderとjson-serverをAngular6で使用するためのサービスライブラリです。

概要

    - ng6-udm-mock はAngular6によってJsonPlaceholderサービスを利用したい人のためのツールです
    - ng6-udm-mock には、JsonPlaceholderのすべてのテーブル（Post、Comment、Album、Photo、Todo、Userテーブル）のデータを取得、追加、更新、削除するメソッドがあります。
    - json-server を使用して独自のデータをテストできます
    - アクセス先を環境変数で変更することができます

ビデオ解説 (日本語),
https://youtu.be/AsVctVk0Hxk

ビデオ解説 (英語),
https://youtu.be/qt6TsDoQR7g

登録メソッド

このライブラリに登録されているメソッドは以下のとおりです。


  // =============== Post ================
  public getAllPosts(): Observable<UdmPost[]>
  public getPost(id: number): Observable<UdmPost>
  public getPostsByUserId(userId: number): Observable<UdmPost[]>
  public addPost(userId: number, title: string, body: string): Observable<HttpResponse<UdmPost>>
  public updatePost(post: UdmPost): Observable<number>
  public deletePost(post: UdmPost | number): Observable<number>

  // =============== Comment ================
  public getAllComments(): Observable<UdmComment[]>
  public getComment(id: number): Observable<UdmComment>
  public getCommentsByPostId(postId: number): Observable<UdmComment[]>
  public addComment(postId: number, name: string, email: string, body: string): Observable<HttpResponse<UdmComment>>
  public updateComment(comment: UdmComment): Observable<number>
  public deleteComment(comment: UdmComment | number): Observable<number>

  // ============== Album ==========================
  public getAllAlbums(): Observable<UdmAlbum[]>
  public getAlbum(id: number): Observable<UdmAlbum>
  public getAlbumsByUserId(userId: number): Observable<UdmAlbum[]>
  public addAlbum(userId: number, title: string): Observable<HttpResponse<UdmAlbum>>
  public updateAlbum(album: UdmAlbum): Observable<number>
  public deleteAlbum(album: UdmAlbum | number): Observable<number>

  // ============== Photo ==========================
  public getAllPhotos(): Observable<UdmPhoto[]>
  public getPhoto(id: number): Observable<UdmPhoto>
  public getPhotosByAlbumId(albumId: number): Observable<UdmPhoto[]>
  public addPhoto(albumId: number, title: string, url: string, thumbnailUrl: string): Observable<HttpResponse<UdmPhoto>>
  public updatePhoto(photo: UdmPhoto): Observable<number>
  public deletePhoto(photo: UdmPhoto | number): Observable<number>

  // ============== Todo ==========================
  public getAllTodos(): Observable<UdmTodo[]>
  public getTodo(id: number): Observable<UdmTodo>
  public getTodosByUserId(userId: number): Observable<UdmTodo[]>
  public addTodo(userId: number, title: string, completed: boolean ): Observable<HttpResponse<UdmTodo>>
  public updateTodo(todo: UdmTodo): Observable<number>
  public deleteTodo(todo: UdmTodo | number): Observable<number>

  // ============== User ==========================

  public getAllUsers(): Observable<UdmUser[]>
  public getUser(id: number): Observable<UdmUser>
  public getUsersByUserName(username: string): Observable<UdmUser[]>
  public addUser(name: string,
                username: string,
                email: string,
                address: UdmAddress,
                phone: string,
                website: string,
                company: UdmCompany ):
                Observable<HttpResponse<UdmUser>>
  public updateUser(user: UdmUser): Observable<number>
  public deleteUser(user: UdmUser | number): Observable<number>

登録インターフェイス

このライブラリに登録されているインターフェイスは以下のとおりです。


export interface UdmPost {
    id: number;
    userId: number;
    title: string;
    body: string;
}

export interface UdmComment {
    id: number;
    postId: number;
    name: string;
    email: string;
    body: string;
}

export interface UdmAlbum {
    id: number;
    userId: number;
    title: string;
}

export interface UdmPhoto {
    id: number;
    albumId: number;
    title: string;
    url: string;
    thumbnailUrl: string;
}

export interface UdmTodo {
    id: number;
    userId: number;
    title: string;
    completed: boolean;
}

export interface UdmGeo {
    lat: string;
    lng: string;
}

export interface UdmAddress {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
    geo: UdmGeo;
}


export interface UdmCompany {
    name: string;
    catchPhrase: string;
    bs: string;
}

export interface UdmUser {
    id: number;
    name: string;
    username: string;
    email: string;
    address: UdmAddress;
    phone: string;
    website: string;
    company: UdmCompany;
}

稼働環境

  • Node.js
  • TypeScript2
  • Angular6
  • json-server (データの追加、変更、削除機能を利用したい場合)

インストール方法

このライブラリをインストールするには、以下のように実行します。


$ npm install ng6-udm-mock --save

json-serverをインストールするには、以下のように実行します。


$ npm install json-server

設定方法

ライブラリ自体には、サーバのアクセス先が設定されていません。このアクセス先は、このライブラリを使用するアプリケーションプロジェクトの環境変数によって設定します。 具体的には、 src/environments/environment.tsファイルに設定します。

JsonPlaceholderサイトにのみアクセスしてデータを取得する場合は、udmMockBaseUrlに https：//jsonplaceholder.typicode.comを設定します。

データの追加、更新、削除機能を使用する場合は、JsonPlaceholderサイトのデータと同じ構造の独自のデータを作成し、json-serverを起動し、そのサーバのアクセス先をudmMockBaseUrlに設定します。

ポート番号を指定せずにサーバをローカルに起動すると、デフォルトでlocalhost：3000がアクセス先になりますので、その場合はこれを設定します。

environment.tsファイルにおけるアクセス先の設定例


export const environment = {
  production: false,
  udmMockBaseUrl: 'https://jsonplaceholder.typicode.com'
  // udmMockBaseUrl: 'http://localhost:3000'
};

サンプルプログラム app.component.ts

以下は、このライブラリを使用するサンプルプログラムです。

　重要な点は次のとおりです。

  • Ng6UdmMockServiceをインポートする
  • インターフェイスをインポートする
  • 各インタフェースに対応する変数（配列を含む）を定義する
  • コンストラクタでサービス変数を作成する
  • ngOnInitメソッドでBaseUrlを初期化する（setBaseUrlメソッドを呼び出す）

　なお、コンポーネント・ライブラリの場合は、app.module.tsファイルへの登録が必要になりますが、本ライブラリは、サービス・ライブラリですので、その登録は不要です。
　これらの点に留意して、以下のソースを参照してください。


import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { tap, map } from 'rxjs/operators';
import { HttpErrorResponse } from '@angular/common/http';

import { Ng6UdmMockService } from 'ng6-udm-mock';
import { UdmPost, UdmComment, UdmAlbum, UdmPhoto, UdmTodo,
  UdmGeo, UdmAddress, UdmCompany, UdmUser } from 'ng6-udm-mock';

import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';

  private posts: UdmPost[];
  private post: UdmPost;
  private comments: UdmComment[];
  private comment: UdmComment;
  private albums: UdmAlbum[];
  private album: UdmAlbum;
  private photos: UdmPhoto[];
  private photo: UdmPhoto;
  private todos: UdmTodo[];
  private todo: UdmTodo;
  private users: UdmUser[];
  private user: UdmUser;

  constructor(private sv: Ng6UdmMockService) {

  }

  ngOnInit() {
    this.sv.setBaseUrl(environment.udmMockBaseUrl);
  }
// ============== Post ==================

  public GetAllPosts() {
    this.sv.getAllPosts()
      .subscribe(
        dt => {
          this.posts = dt;
        },
        (err: HttpErrorResponse) => {
          if (err.error instanceof Error) {
            console.log('An error occurred:', err.error.message);
          } else {
            console.log('Status code:', err.status);
            console.log('Response body:', err.error);
          }
        },
        () => {
          console.log('Done successfully');
        }
      );
  }

  public GetPost(id: number) {
    this.sv.getPost(id)
    .subscribe(
      dt => {
        this.post = dt;
      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log('An error occurred:', err.error.message);
        } else {
          console.log('Status code:', err.status);
          console.log('Response body:', err.error);
        }
      },
      () => {
        console.log('Done successfully');
      }
    );
  }

  public GetPostsByUserId(userId: number) {
    this.sv.getPostsByUserId(userId)
    .subscribe(
      dt => {
        this.posts = dt;
      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log('An error occurred:', err.error.message);
        } else {
          console.log('Status code:', err.status);
          console.log('Response body:', err.error);
        }
      },
      () => {
        console.log('Done successfully');
      }
    );
  }

  public AddPost(userId: number, title: string, body: string) {
    this.sv.addPost(userId, title, body)
    .subscribe(
      dt => {
        this.post = dt.body;
      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log('An error occurred:', err.error.message);
        } else {
          console.log('Status code:', err.status);
          console.log('Response body:', err.error);
        }
      },
      () => {
        console.log('Done successfully');
      }
    );
  }

  public UpdatePost() {
    const post: UdmPost = {
      id: 4,
      userId: 1,
      title: 'test01 - updated 01',
      body: 'This is updated text'
    };
    this.sv.updatePost(post)
    .subscribe(
      dt => {
        console.log(dt);
      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log('An error occurred:', err.error.message);
        } else {
          console.log('Status code:', err.status);
          console.log('Response body:', err.error);
        }
      },
      () => {
        console.log('Done successfully');
      }
    );
  }

  public DeletePost() {
    this.sv.deletePost(4)
    .subscribe(
      dt => {
        console.log(dt);
      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log('An error occurred:', err.error.message);
        } else {
          console.log('Status code:', err.status);
          console.log('Response body:', err.error);
        }
      },
      () => {
        console.log('Done successfully');
      }
    );
  }

バージョン

  • ng6-udm-mock : 3.0
  • node.js : 8.11
  • @angular/cli : 6.0
  • TypeScript : 2.7

参考文献

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0