IBM Cloudant に情報を保管するアプリケーションの作成

IBM Cloudant サービス・インスタンスおよびデータベースの作成

最初のステップは、 IBM Cloudant サービス・インスタンスを作成してから、データベースを作成することです。 コンソールから 、または CLI コマンドを使用して作成できます。 さらに、アプリケーションに渡すことができるサービス資格情報を作成します。

1. IBM Cloudant サービス・インスタンスを作成します。 IBM Cloudant の手順に従ってください。 インスタンスに CloudantFruitCounter という名前を付けます。 サービス資格情報を作成して、必ずタスクを完了してください。
2. インスタンスの IBM Cloudant ダッシュボードを開き、 「データベースの作成」 をクリックします。
3. 「データベースの作成」 ウィンドウで、データベース名 fruitcounter を入力します。
4. 「パーティション化」 オプションを選択せずに、 「作成」 をクリックします。

アプリケーションをローカルでテストする

Code Engineでコードをアプリケーションとして作成する前に、コードをローカルでテストして、正しく機能していることを確認します。

1. IBM Cloudant ダッシュボードから IBM Cloudant サービス資格情報を取得します。 資格情報の取得について詳しくは、 サービス資格情報の作成 を参照してください。

2. サービス資格情報からの値を使用して環境変数を設定します。

   export CLOUDANT_URL=<your_url>
   

   export CLOUDANT_APIKEY=<your_key>
   

   export DBNAME="fruitcounter"
   

3. fruit-counter リポジトリーを複製し、このディレクトリーに移動してから、依存関係をインストールして開始します。

   git clone https://github.com/IBM/CodeEngine
   cd CodeEngine/fruit-counter
   npm install
   npm run start
   

4. ブラウザーを開き、 http://localhost:8080にアクセスします。

5. お気に入りの果物を選択し、選択した果物を送信します。 アプリはユーザーの選択を受け入れ、ピックの現在までの合計を表示します。

IBM Cloudant データベース・ダッシュボードに移動して、選択した果物が Cloudant に登録されたことを確認できます。

このプログラムの仕組みを見てみましょう。

このアプリケーションは、2 つのメイン・パッケージを使用する単純な Node.js アプリケーションです。

• @ibm-cloud/cloudant。 IBM Cloudant に接続し、データの読み取りと書き込みを行います。
• Express: ユーザーが果物を選択して送信し、データの現在までの合計を確認できるようにする Web サーバーを作成します。

このアプリケーションは、2 つのメインファイルで構成されています。

server.js

server.js ファイルは、Web サーバーを実行するために使用され、 Cloudantと通信します。 ユーザーがフルーツの選択項目を選択すると、フロントエンド・ページで値が /fruit 経路に送信され (以下を参照)、 app.route 関数はフルーツの選択項目を使用して新しい文書を Cloudant に保管し、実行合計を戻してフロントエンド・ページに戻ります。

読み取り操作では、 Cloudant 設計文書と MapReduce ビューを使用して文書を集約します。 ビューと設計文書について詳しくは、 ビューの作成(MapReduce) を参照してください。

index.html

index.html ファイルは、 Vue.js フレームワークを使用するアプリケーションの Web ページです。 このページがロードされると、使用可能なフルーツ・オプションが表示されます。

選択したものをサブミットすると、フレームワークは、アプリケーションの /fruit 経路に対して、果物を選択した HTTP POST 要求を行います。 アプリケーションの戻りには、フルーツの選択肢の現在までの合計が含まれています。これが表示されます。

アプリケーションを Code Engine にデプロイする

このアプリケーションの動作を理解したので、 Code Engineにデプロイできます。 イメージ・リポジトリーとして CODEENGINEREPO を指定して、 パブリック・リポジトリーからのアプリケーション をデプロイする手順に従うことができます。 ステップ 2 でローカルに収集して設定した環境変数を必ず含めてください。

アプリケーションをローカルでテスト したときにリポジトリーを複製したため、 app create コマンドを使用して、ローカル・ソースからイメージをビルドし、このビルドされたイメージを参照するアプリケーションをデプロイすることができます。

1. app create コマンドを実行します。 アプリケーションの名前とソース・コードの場所を指定する必要があります。 以下の例では、 docker ストラテジーを使用し、現行ディレクトリー (.) 内のソース・コードの場所を指定する myfruitcounter というアプリケーションを作成します。 Cloudantに接続するための環境変数も設定する必要があります。

   ibmcloud ce app create --name myfruitcounter --build-source . --strategy dockerfile --env CLOUDANT_URL=<your_url> --env CLOUDANT_APIKEY=<your_key> --env DBNAME=fruitcounter  
   

   出力例

   Creating application 'myfruitcounter'...
   Packaging files to upload from source path '.'...
   Submitting build run 'myfruitcounter-run-220727-142949868'...
   Creating image 'private.us.icr.io/ce--6ef04-n2lgvg2l59v/app-myfruitcounter:220727-1929-y8ej0'...
   Waiting for build run to complete...
   Build run status: 'Running'
   Build run completed successfully.
   Run 'ibmcloud ce buildrun get -n myfruitcounter-run-220727-142949868' to check the build run status.
   Waiting for application 'myfruitcounter' to become ready.
   Configuration 'myfruitcounter' is waiting for a Revision to become ready.
   Ingress has not yet been reconciled.
   Waiting for load balancer to be ready.
   Run 'ibmcloud ce application get -n myfruitcounter' to check the application status.
   OK                                                
   
   https://myfruitcounter.n2lfrg2876v.us-south.codeengine.appdomain.cloud
   

2. 指定されたフルーツ・ピッカー・アプリの URL を開いて、アプリをテストします。 お気に入りの果物を選択して送信します。 フルーツの選択肢の現在までの合計が表示されます。 アプリケーションをリフレッシュして、別のフルーツを選択することができます。 加算が現在の合計に表示されます。