mock api service 実装

[gurezo]

ダミー JSON データ Typescript ファイル => ダミー JSON データファイルへの移行 2a27139

Note

API 用モックとは？
API 用モックとは、実際のAPIと同様に振る舞う、テスト用の仮想的なAPIのことです

• 疑似 API 処理を実装する為にダミーデータを下記の様に移行します。
• API service のAPI 用モックを機能毎に作成します。

/work/dev-ops-sample/frontend
├── .......
├── src
│   ├── app
│   │   ├── .......
│   │   ├── dummy-data.ts // ダミー JSON データ Typescript ファイル（変更前
│   │   ├── .......
│   │   └── todo-list
│   ├── assets
│   │   └── json // ダミー JSON データファイル郡（変更後
│   │       ├── create.json // 新規作成用
│   │       ├── delete.json // 削除用
│   │       ├── memo-list.json // 一覧取得用
│   │       ├── memo.json  // 個別取得用
│   │       └── update.json // 更新用
│   ├── .......
│   └── styles.scss
└── .......

ダミー JSON データファイル用ディレクトリの作成

➜  dev-ops-sample git:(main) ✗ cd frontend/src/assets
➜  assets git:(main) ✗ mkdir json
➜  assets git:(main) ✗ cd json
➜  json git:(main) ✗

ダミー JSON データファイル用の作成

新規作成用（create） json

➜  json git:(main) ✗ vi create.json 

// insert mode

{}

// escape
// wq 書き込み保存

削除用（delete） json

➜  json git:(main) ✗ vi delete.json // 削除用

// insert mode

{}

// escape
// wq 書き込み保存

一覧取得用（get all） json

➜  json git:(main) ✗ vi memo-list.json // 一覧取得用

// insert mode

[
  {
    "checked": false,
    "id": 1,
    "title": "百均で買うもの",
    "memo": "コーヒーフィルター、楊枝、クリアファイル"
  },
  .....
]

// escape
// wq 書き込み保存

個別取得用（get id） json

➜  json git:(main) ✗ vi memo.json  // 個別取得用

// insert mode

{
  "checked": false,
  "id": 2,
  "title": "スーパーで買うもの",
  "memo": "牛乳、パン、コーヒー"
}

// escape
// wq 書き込み保存

更新用（update） json

➜  json git:(main) ✗ vi update.json // 更新用

// insert mode

{}

// escape
// wq 書き込み保存

mock API 用 モデル追加・変更 7fd5c18

• API service 用 モデル定義
• 新規作成するモデル（frontend/src/app/shared/models/memo.ts）は、MySQL のテーブル構造に合わせて作成します。

diff --git a/frontend/src/app/shared/models/memo.ts b/frontend/src/app/shared/models/memo.ts
new file mode 100644
index 0000000..f8f86f8
--- /dev/null
+++ b/frontend/src/app/shared/models/memo.ts
@@ -0,0 +1,5 @@
+export interface Memo {
+  id: number;
+  title: string;
+  memo: string;
+}

• 既存の画面用モデル（frontend/src/app/shared/models/memo-ui.ts）は、上記API service 用 モデル定義
  と項目が同じ為、モデルを継承します。

diff --git a/frontend/src/app/shared/models/memo-ui.ts b/frontend/src/app/shared/models/memo-ui.ts
index ba005ea..21b192a 100644
--- a/frontend/src/app/shared/models/memo-ui.ts
+++ b/frontend/src/app/shared/models/memo-ui.ts
@@ -1,6 +1,5 @@
-export interface MemoUi {
+import { Memo } from './memo';
+
+export interface MemoUi extends Memo { // memo.ts を継承
   checked: boolean;
-  id: number;
-  title: string;
-  memo: string;
 }

mock API 用 service 追加 0c1c957

Note

• サービスと依存性の注入のイントロダクション
• Angular の Service は、アプリケーション内で共有されるデータや機能を提供する為の
  再利用可能なコードの集まり（ファイル）です。

API service 用ディレクトリの作成

$ cd frontend/src/app/shared/
$ shared mkdir service
$ shared cd service
$ service ✗

mock API service の作成

Note

ng generate
書式：ng generate 生成種類 生成名前 オプション
書式：ng g 生成種類 生成名前 オプション
npx は、Angular CLI がグローバルインストールされていない時に使います。
生成種類（schematic）については、ng generate を参照
実行例：npx ng g s api --path=./src/app/shared/service

$ service npx ng g s api  --path=./src/app/shared/service
CREATE src/app/shared/service/api.service.spec.ts (342 bytes)
CREATE src/app/shared/service/api.service.ts (132 bytes)
$ service ✗

REST API の CRUD(Create, Read, Update, Delete)の定義

Note

• REST API については、さくらのVPSを使ってシステム開発に必要な知識を学ぶ 〜第12回〜のREST API解説を御覧ください
• Angular で API 通信を実装する時は 、HttpClient を使います。
• 参考：HttpClientを使ってヒーローを取得する

getAll：メモ一覧取得

• 疑似 API 処理の為、URL に src/assets/json 配下の memo-list.json を指定します。
• Memo 型 => MemoUi 型に変換します。

  getAll(): Observable<Array<MemoUi>> {
    // ダミーで、./assets/json 配下の json をレスポンスとして取得
    this.apiUrl = './assets/json/memo-list.json';
    return this.http.get<Array<Memo>>(this.apiUrl).pipe(
      map((memos: Memo[]) => {
        return memos.map((item: Memo) => ({ ...item, checked: false }));
      })
    );
  }

get：メモ取得

• 疑似 API 処理の為、URL に src/assets/json 配下の memo.json を指定します。
• Memo 型 => MemoUi 型に変換します。

  get(id: string): Observable<MemoUi> {
    // ダミーで、./assets/json 配下の json をレスポンスとして取得
    this.apiUrl = './assets/json/memo.json';
    return this.http
      .get<MemoUi>(this.apiUrl + `/${id}`)
      .pipe(map((item: Memo) => ({ ...item, checked: true })));
  }

cretae：メモ作成

• 疑似 API 処理の為、URL に src/assets/json 配下の create.json を指定します。
• 正：create.json
• 誤：poste.json

  create(body: Memo) {
    // ダミーで、./assets/json 配下の json をレスポンスとして取得
    this.apiUrl = './assets/json/post.json';
    return this.http.post(this.apiUrl, body);
  }

update：メモ更新

• 疑似 API 処理の為、URL に src/assets/json 配下の update.json を指定します。

  update(body: Memo) {
    // ダミーで、./assets/json 配下の json をレスポンスとして取得
    this.apiUrl = './assets/json/update.json';
    return this.http.patch(this.apiUrl, body);
  }

delete：メモ削除

• 疑似 API 処理の為、URL に src/assets/json 配下の delete.json を指定します。

  delete(id: string) {
    // ダミーで、./assets/json 配下の json をレスポンスとして取得
    this.apiUrl = './assets/json/delete.json';
    return this.http.delete(this.apiUrl + `/${id}`);
  }

HttpClient を DI 692a83e

Note

• DI （依存性の注入）：Dependency injection
• Angularにおける依存性の注入

• HttpClient をアプリケーションに DI します。
• 上記実装で、本 Angular アプリケーションで、HttpClient （≒ API service）が使えるようになります。