本当の投稿の様にサービスを作ってみる！
Silicon Valley Super Ware
2020年6月8日
本当の投稿の様にサービスを作ってみる！
前回は、JSON Placeholderから取得したデータの表示部分の実装の話でした。次は、REST APIを使ってデータを操作する部分になります。
データの操作とは、データの新規作成（追加）、既存データの更新、既存データの削除です。
データの操作にはサーバーにデータを送る必要があります。
新規作成の場合は、新規に作成するデーター、既存データの更新の場合は、更新するデータに 加えて、どのデータかを特定する情報、削除の場合は削除のデータを特定する情報が必要です。どうやって情報を送るかは、REST APIで決められています。
JSON Placeholderの場合
JSON Placeholderの投稿の場合、新規作成の場合は- title
- body
- userId
これを、HTTP POSTメソッドで送れば良い事になります。 これも、先日の「axios」を使うと、データ取得の際の送り方に似た書き方で 簡単に送る事ができます。
現実のサービスを考えると、userIdをどうやって取得するか？
ただ作るだけならば、フィールドを作ってuserIdを入力してもらって送ればＯＫです。 ただ、現実のサービスではそのような作り方はしません！殆どの場合、ユーザーＩＤは数字か、ハッシュ化された文字列で、タイプして入力すると 間違えやすい情報の一つになります。そうした情報を利用者にしてもらうと間違える事が 多くなります。実際のサービスではどうしているかというと、投稿する場合は「ログイン」 してもらい、そのユーザー情報から自動的にその情報を加える事で間違いを防ぐように 作るのが普通です。
つまり、利用者（投稿者）が入力するのは、投稿のタイトル(title)と中身(body)だけです。
今回は、実際のサービスに近い作り方で作ってみる事にします。
簡単なやり方は２つ！
幾つかやり方はありますが、簡単に出来る方法は２つです。- 本当にログインの機能を作る（Firebaseを利用すれば簡単）
- VUEXを仮のデータベースとして使う
既に読み込んでいるユーザー情報を利用する！
今回の目的はログイン機能を作る事が目的ではないので、きちんとした認証の 実装は必要ではありません。全員同じパスワードでも十分です。そこで、「actions」にログインの処理をする処理を追加します。 stateに「login」と「user」という状態を追加します。
「login」は、ログインが成功した場合は「true」、失敗した場合か、ログインしていない場合は 「false」にします。「user」は、ログインしているユーザーエントリーを入れます。 ログインしていない場合は、「null」をセットします。パスワードも今回は固定のパスワードを、 stateに記憶させて比較するだけで十分です。
まずはUIにログインの機能を追加します！
必要な変更は- App.vueにログインのボタンをつける
- ログインボタンが押されたら、ログインフォームを表示
- ログインしている場合、投稿メニューを表示
- 投稿メニューが選ばれたら投稿フォームを表示
- 投稿ボタンがおされたら投稿をポスト(REST APIを使う)
これで投稿機能は実現できます。
所で、今回のJSON Placeholderの場合投稿のリクエストをREST APIで送るとどうなるでしょうか？先日の、Postmanで試した方は既にご存じかもしれませんが、実際に投稿は追加されません！
ただし、応答として、投稿のIDが送られてきます。
そこで、今回のサービスでは、そのIDを使ってVEUXの投稿のデータを更新する事にします。 そうすると、投稿するデータはあるので、投稿IDと合わせて、新しいデータを 既存のPOSTのデータに追加して見かけ上はデータが追加されたような動きにします。 処理は、「mutations」に投稿を追加する処理を書けばOKです。 「actions」でREST APIのリクエスト（非同期）をして、その結果を待って、mutation の処理を呼び出すようにするとこの機能が作れます。
VUEXの練習には良い課題！
VUEXをデータベースに見立ててデータを更新したりするのは VUEXの練習にはとても良いケースです。 本来のテーマは、REST APIですが、これでVUEXの理解を深める事ができます。元のサーバーのデータは更新されないのでサービスを再読み込みすると 消えてしまいますが、そのまま利用する限り見かけ上は本当に機能している様に 使えます。
もし余裕があれば、Firebaseを連携して情報を本当に保存しておけば よりリアルなWebサービスの様に作る事もできます。余裕がある方はこちらも やってみてください。
シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿