Azure Cosmos DB の MongoDB 用 API で Angular アプリを作成する - アプリに CRUD 関数を追加する

適用対象: MongoDB

複数のパートから成るこのチュートリアルでは、Express と Angular を使用して Node.js に記入された新しいアプリを作成した後、Azure Cosmos DB の MongoDB 用 API を使用して構成された Azure Cosmos DB アカウントにそれを接続する方法を紹介します。 このチュートリアルのパート 6 では、パート 5 の内容をベースとして、次のタスクについて取り上げます。

• ヒーロー サービスに Post、Put、Delete の各関数を作成する
• アプリを実行する

前提条件

本チュートリアルのこのパートに取り組む前に、パート 5 の手順を済ませておいてください。

ヒント

このチュートリアルでは、アプリケーションを作成する手順を段階的に説明しています。 完成したプロジェクトをダウンロードしたい場合は、GitHub の angular-cosmosdb リポジトリから完全なアプリケーションを取得できます。

Post 関数をヒーロー サービスに追加する

1. Visual Studio Code で、[エディターの分割] ボタン を押して、routes.js と hero.service.js を左右に並べて表示します。

   hero.service.js の 5 行目にある getHeroes 関数が、routes.js の 7 行目で呼び出されていることがわかります。 これと同じペアリングを Post、Put、Delete の各関数についても作成する必要があります。

   

   それでは、ヒーロー サービスのコーディングを始めましょう。

2. hero.service.js の getHeroes 関数の後 (module.exports の前) に次のコードをコピーします。 このコードによって以下が行われます。

   • ヒーロー モデルを使って新しいヒーローをポストする。
   • 応答をチェックしてエラーが発生しているかどうかを調べ、状態値 500 を返す。

   function postHero(req, res) {
     const originalHero = { uid: req.body.uid, name: req.body.name, saying: req.body.saying };
     const hero = new Hero(originalHero);
     hero.save(error => {
       if (checkServerError(res, error)) return;
       res.status(201).json(hero);
       console.log('Hero created successfully!');
     });
   }
   
   function checkServerError(res, error) {
     if (error) {
       res.status(500).send(error);
       return error;
     }
   }
   

3. hero.service.js の module.exports に新しい postHero 関数を追加します。

   module.exports = {
     getHeroes,
     postHero
   };
   

4. routes.js の get ルーターの後に、post 関数のルーターを追加します。 このルーターは一度に 1 つのヒーローをポストします。 このような構造をルーター ファイルに持たせることで、利用可能なすべての API エンドポイントを明確化しつつ、実際の処理を hero.service.js ファイルに委ねることができます。

   router.post('/hero', (req, res) => {
     heroService.postHero(req, res);
   });
   

5. アプリを実行して正常に動作するかどうかを確かめます。 Visual Studio Code で、すべての変更を保存し、左側の [デバッグ] ボタン を選択してから、[デバッグの開始] ボタン を選択します。

6. インターネット ブラウザーに戻り、デベロッパー ツールの [Network] タブを開きます。ほとんどのマシンでは、F12 キーを押すと、デベロッパー ツールが表示されます。 http://localhost:3000 にアクセスして、ネットワーク上で実行される呼び出しを観察します。

   

7. [Add New Hero] ボタンを選択して新しいヒーローを追加します。 ID に「999」を、名前に「Fred」を、台詞に「Hello」と入力して、 [Save] を選択します。 [Network] タブを見ると、新しいヒーローの POST 要求が送信されたことを確認できます。

   

   今度は、Put 関数と Delete 関数をアプリに追加しましょう。

Put 関数と Delete 関数を追加する

1. routes.js で、post ルーターの後に put ルーターと delete ルーターを追加します。

   router.put('/hero/:uid', (req, res) => {
     heroService.putHero(req, res);
   });
   
   router.delete('/hero/:uid', (req, res) => {
     heroService.deleteHero(req, res);
   });
   

2. hero.service.js の checkServerError 関数の後に次のコードをコピーします。 このコードによって以下が行われます。

   • put 関数と delete 関数を作成する
   • ヒーローが見つかったかどうかのチェックを実行する
   • エラー処理を実行する

   function putHero(req, res) {
     const originalHero = {
       uid: parseInt(req.params.uid, 10),
       name: req.body.name,
       saying: req.body.saying
     };
     Hero.findOne({ uid: originalHero.uid }, (error, hero) => {
       if (checkServerError(res, error)) return;
       if (!checkFound(res, hero)) return;
   
      hero.name = originalHero.name;
       hero.saying = originalHero.saying;
       hero.save(error => {
         if (checkServerError(res, error)) return;
         res.status(200).json(hero);
         console.log('Hero updated successfully!');
       });
     });
   }
   
   function deleteHero(req, res) {
     const uid = parseInt(req.params.uid, 10);
     Hero.findOneAndRemove({ uid: uid })
       .then(hero => {
         if (!checkFound(res, hero)) return;
         res.status(200).json(hero);
         console.log('Hero deleted successfully!');
       })
       .catch(error => {
         if (checkServerError(res, error)) return;
       });
   }
   
   function checkFound(res, hero) {
     if (!hero) {
       res.status(404).send('Hero not found.');
       return;
     }
     return hero;
   }
   

3. hero.service.js で、新しいモジュールをエクスポートします。

   module.exports = {
     getHeroes,
     postHero,
     putHero,
     deleteHero
   };
   

4. コードを更新したので、Visual Studio Code の [再起動] ボタン () を選択します。

5. インターネット ブラウザーでページを最新の情報に更新し、 [Add New Hero] ボタンを選択します。 新しいヒーローを追加します。ID に「9」を、名前に「Starlord」を、台詞に「Hi」を入力してください。 [Save] ボタンを選択して新しいヒーローを保存します。

6. 次に [Starlord] ヒーローを選択し、その台詞を "Hi" から "Bye" に変更して、 [Save] ボタンを選択します。

   [Network] タブで ID を選択すると、ペイロードが表示されます。 ペイロードを見ると、台詞が "Bye" に設定されていることが確認できます。

   

   いずれかのヒーローを UI で削除して、削除操作にかかった時間を確認することもできます。 "Fred" というヒーローの [Delete] ボタンを選択して試してみましょう。

   

   ページを最新の情報に更新すると、ヒーローを取得するのに要した時間が [Network] タブに表示されます。 これらはごく短時間ではありますが、どの国にデータが置かれているかや、ユーザーの近隣エリアで geo レプリケーションを実行できるかどうかによって、大きく変動します。 geo レプリケーションの詳細については、近日中に次のチュートリアルで取り上げる予定です。

次のステップ

本チュートリアルのこのパートでは、次の手順を行いました。

• Post、Put、Delete の各関数をアプリに追加しました。

このチュートリアル シリーズには、今後も新しい動画が追加される予定ですので、定期的にチェックしてください。

Azure Cosmos DB への移行のための容量計画を実行しようとしていますか? 容量計画のために、既存のデータベース クラスターに関する情報を使用できます。

• 既存のデータベース クラスター内の仮想コアとサーバーの数のみがわかっている場合は、仮想コア数または仮想 CPU 数を使用した要求ユニットの見積もりに関するページを参照してください
• 現在のデータベース ワークロードに対する通常の要求レートがわかっている場合は、Azure Cosmos DB Capacity Planner を使用した要求ユニットの見積もりに関するページを参照してください