前回までのサンプル実装を公開中です！

Silicon Valley Super Ware

2020年6月9日

前回までのサンプル実装を公開中です！

少し急ぎ足でREST APIを使ったWebサービスの実装方針を説明してきました。 JSON Placeholderを仮想Webサービスと見立ててWebサービスに取り込むというのが 今月のテーマです。
Webサービス立ち上げ時にデータを読み取って表示するところから始めて、 前回は「仮想ログイン機能」、「仮想投稿機能」までの実装方針を説明してきました。 読者の皆様はご自分で作っていらっしゃるでしょうか？
今日は、実際に実装したWebサービスを並行してデモ用に公開していますのでその紹介です。

実装方法の一例です！あなたの実装の参考にしてください！

サンプルのURLは以下のボタンをクリックすればご覧頂けます！
サンプルサイトはこちら！

サンプルサイトの簡単な説明！

上記のボタンからサイトに行くと、仮のホームページになります。 まずは、上部のメニューから「投稿」を選ぶと、投稿の一覧と投稿者が表示されます。

• 標準では全投稿が表示されます
• 特定の投稿者を選ぶと投稿者ごとに表示が可能です
• 投稿のタイトルをクリックすると個別の投稿と、その投稿に対するコメントが表示されます
• 個別の投稿表示から「Back」ボタンを押すと一覧表示に戻ります

というのが基本的な表示機能になります。
表示機能はブログでは取り上げていませんが、

アルバム一覧、ユーザー一覧、タスク管理も実装しています！

アルバム一覧は、アルバムのタイトルと、最初の写真（実際はカラーブロックだけ）を 表示します。アルバムをクリックすると、アルバム内の写真（カラーブロック）の一覧を表示します。
タスク管理は、担当者ごと、全てタスク、完了したタスク、作業中のタスクの表示ができるように なっています。
おまけで、先月作成したお問合せフォームも加えておきました！
ここまでが表示機能の簡単な実装です。

投稿機能を追加しました！

前回説明した通り投稿の機能を追加しました。 ここまでの機能は「REST API」データを取得するだけなので、 全て、HTTP GETメソッドを使って取得しています。
新規投稿には、「REST API」のHTTP POSTメソッドで投稿データーを送る事が必要になります。 そこで必要な事は

• 投稿には投稿者を特定するためログイン（認証）が必要
• 投稿が表示に反映されるようにする

そこで、簡易認証機能（仮想認証機能）をVUEXに実装しました。

ユーザーは現時点でJSON Placeholderに登録されている10人のE-Mailをユーザー名にして実装しています

ユーザー一覧の誰かのE-Mailを使えば皆様もご利用できます！
パスワードは一律「Passw0rd」です。
ログインは右上の「ログイン」をクリックするとログインフォームが表示されます。 中止したい場合はキャンセルを押せば元の画面に戻ります。

ログインすると画面が変わります！

ログインしたら、再びメニューから「投稿」のページに行ってください

先ほどとは少し変わって、「新規投稿」のボタンが右側に現れているはずです。

新規投稿ボタンを押すと、フォームが現れて、投稿ができます。 投稿はタイトルと本文を入れて「投稿」ボタンを押すだけです。 キャンセルを押すと元の画面に戻ります。
投稿が表示に反映されるまで少し時間がかかる事があります。 これは、JSON Placeholderが投稿のリクエストの返答で返してくる 投稿のＩＤを待っているためです。
このＩＤを利用して、VUEXのStateの投稿データーを更新して見かけ上 投稿されたように見せています。 ただし、JSON Placeholderは毎回「１０１」を返してくるので ID「101」のエントリーが増えて行くことになります。 （REST APIの実装の練習なので個別にＩＤを生成せずに、そのまま使うようにしています） 本意の実装ではありませんが、意図的にこのように実装しています。 将来的に更新の機能を実装する際は、同じIDが２つあると問題なので IDを内部で生成して割り当てるように変更する予定です。
実際のサーバーのデータは更新されていませんので、サービスを再読み込みした場合は 新規投稿データはなくなります。

本物に違い実装を目指そう！

JSON Placeholderは本当のサービスではありませんので、 データの更新や新規作成、削除は実際は実装できません。 しかし、VUEXのStateのデータを更新して、再読み込みしなければ 本物の様に見せる事は可能です！
ポートフォリオなどで実装する場合も、実際のデータベースをバックエンドに置かなくても 簡単なサンプルデータをサービス立ち上げ時に読み込ませれば、「本物のような」実装は 可能です。
ＵＩだけのポートフォリオでも、本物の様に作ると印象が違います。 デモやサンプルで提供する場合、できるだけ本物の様に実装できると 仕事のチャンスも増える物です。あなたも是非ご自分のサービスを実装して 共有してみてください！
シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。

興味のある方は今すぐお問合せください！

またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。

• お問合せ
• Webサイト
• ニュースレターのお申込み

Copyright(c) 2020 by Silicon Valley Super Ware, all rights reserved.