IBM Cloud Docs
Web ベースの To Do リストの作成

Web ベースの To Do リストの作成

基本的なIBM Cloud機能を使いこなすために、簡単なウェブベースのToDoリストを作成する。

目標

  1. このチュートリアルでは、IBM Cloud データベースと連携してデータを読み書きする、基本的な Web サイトの作成方法を学びます。

    プロジェクトはシンプルなToDoリストで、メモのリストを見ることができる。 メモは、追加することも削除することもできます。 各メモにはタグがあり、タグでメモをフィルタリングすることができます。

  2. このToDoリストを作成するには、アプリケーションはデータベースへの読み書きができる必要がある。 ToDoを "新しいものから順に "読んだり、タグでフィルターしたりするには、データベースにセカンダリーインデックスが必要です。 これで、すべてを作成できます。

このチュートリアルは、1 時間未満で完了できます。 現在の IBM Cloudant の請求額を超える費用はかかりません (したがって、IBM Cloudant ライト・プランを使用している場合は無料です)。

作成する Web サイトはローカル・マシンから提供されるため、IBM Cloud 以外のサービスは必要ありません。

After you complete it, you have a basic understanding of how applications can interface with IBM Cloudant through an IBM Cloudant SDK (in this case, NodeJS).

開始前に

このチュートリアルを完了するには、以下の道具が必要です：

  1. IBM Cloudant サービス・インスタンスといくつかのサービス資格情報。 インスタンスと資格情報は、IBM Cloudant 入門のチュートリアルに従って、IBM Cloudant ダッシュボードで作成できます。 サービス資格情報を作成するときは、必ず API キーと URL をメモしてください。
  2. Mac または Linux™ 端末にアクセスできることを確認します。
  3. Git をダウンロードします。
  4. Node.js および npm をダウンロードします。

コードを取得する

  1. 端末を開きます。

  2. 以下のコマンドを入力します。

    git clone https://github.com/IBM-Cloud/todo-list.git
cd todo-list

環境の準備して Web サイトを実行する

このステップでは、Web サイトを実行するために必要なすべてのコード依存関係と環境変数をインストールします。

  1. todo-list ディレクトリーにいることを確認します。

  2. ご使用の端末から、以下のコマンドを実行します。

    npm install
export CLOUDANT_APIKEY="<the_apikey_from_prerequisites>"
export CLOUDANT_URL="https://<the_url_from_prerequisites>"
npm run start

このコマンドを初めて実行すると、データベースが存在しないことがコードによって検出されます。 このコードでは、いくつかのインデックス（日付別とタグ別）といくつかのサンプルデータを使ってデータベースを作成します。

Web サイトを確認してください。

これで、Web サイトを確認できます。

  1. ブラウザーから、 https://localhost:8080 にアクセスします。

    ToDoリストにはいくつかの項目がある：

    あなたのToDo
    *ウェブベースのToDoリスト

  2. メモを追加または削除したりしたり、タグの 1 つをクリックしてタグでメモをフィルタリングしたりすることができます。

コードの理解

データベースと索引の作成

バックエンド・スクリプト (server.js) は、起動時に、getDatabaseInformation メソッドを使用して todo データベースに接続しようとします。 データベースが見つからない場合は、 putDatabase メソッドを使用して作成を試みます。

todo データベースが作成されると、postIndex メソッドを使用して 2 つの索引が作成されます。 1 つ目の索引は、すべてのメモを新しい順に取得できるよう、タイム・スタンプ・フィールド (メモの作成日) に対して作成されます。 2 つ目の索引は、タグでフィルタリングして、既知のタグの日付順リストを返すように、タグとタイム・スタンプに対して作成されます。

データベースの使用

フロントエンドは、一般的な Express フレームワークを使用して、ユーザーが作成、削除、フィルタリングなどのさまざまなアクションをクリックしたときに、バックエンドに Web ページを表示してサービス・エンドポイントを呼び出します。

例えば、Web ページが初めてロードされると、 GET /todolist エンドポイントが呼び出されます。 GET /todolist エンドポイントは、 postFind メソッドを使用して、( todo データベースの後に作成された索引を使用して) すべての文書をデータベースに照会し、タイム・スタンプによってメモを配列し、それらを表示のためにフロントエンドに戻します。

タグによるフィルタリングも同じ postFind メソッドを使用するが、2番目のインデックスを使用することで、postDocument と deleteDocument メソッドを使用してノートを作成および削除する。

要約

IBM Cloudant は、その HTTP API が Node.js SDK によってモデル化されており、ユーザー独自のコードと簡単に統合できるため、Web アプリケーションの迅速な開発を可能にします。 ユーザーは、IBM Cloudant データベースを作成し、独自のデータをモデル化する JSON 文書を追加できます。 データ量が増えても照会の迅速なパフォーマンスを維持できるように、照会のアクセス・パターンの処理に役立つ副次索引を作成することを忘れないでください。

JavaScript,を書くのが苦手な方には、Java™ Python、Go 用のSDKと HTTP API をご用意しています。 忘れないでください。 IBM Cloudant ダッシュボードは、データベースを探索し、文書を作成および変更し、索引と照会のスキルを向上させるのに最適な方法です。

ベスト・プラクティスのガイダンスについては、 ブログ および 資料 を参照してください。 IBM Cloudant とその機能に関するビデオ・ガイドについては、ラーニング・センターのコースを参照してください。