目次


Bluemix SQLDB サービスを利用して、学生の数学演習用の簡単な Web アプリケーションを作成する

Comments

わずかなステップで、学生が数学の基本スキル (主に乗算の演算) を磨くための単純な Web アプリケーションを作成することができます。

学生が掛け算表を学べるように、Bluemix に統合されたツールを利用して、単純な Node.js アプリケーションを作成しました。

以下に示すアプリケーションを作成するには、Node.jsBluemix、そして Bluemix の SQL Database (SQLDB) サービスを使用します。SQLDB は、IBM DB2 が採用されたオンデマンドのリレーショナル・データベースです。SQLDB サービスは、管理されたデータベース・サービスを提供することで、アプリケーションの苛酷な Web ワークロードおよびトランザクション・ワークロードに対処します。

サンプル・アプリケーションの画面のスクリーンショット
サンプル・アプリケーションの画面のスクリーンショット

このサンプル・アプリケーションを使用する学生は、学習の進み具合を追跡し、結果を記録することができます。

進行状況の追跡と、結果の記録を行う画面のスクリーンショット

アプリケーションを作成するために必要となるもの

  • Node.js の知識
  • Bluemix SQLDB サービスの知識

ステップ 1. Bluemix で Node.js ランタイムを作成して SQLDB サービスにバインドする

このアプリケーションを作成する最初のステップは、Bluemix 上で Node.js ランタイムを選択することです。Bluemix では、Java プログラミング言語、JavaScript、Ruby on Rails など、複数のプログラミング言語に対するサポートを提供しています。このサンプルでは、Node.js ランタイムを作成します。

ログインすると、ダッシュボードが表示されます。このダッシュボードに、ユーザー・アカウントに関するすべての情報が示されます。

  1. 新規アプリケーションを作成するには、「Create an Application (アプリケーションの作成)」をクリックして、「Node.js」を選択します。 新規アプリケーションを作成する画面のスクリーンショット
    新規アプリケーションを作成する画面のスクリーンショット
  2. 「SQLDB」をクリックして、SQLDB データ管理サービスを Node.js アプリケーションにバインドします。 SQLDB データ管理サービスを Node.js アプリケーションにバインドする画面のスクリーンショット
    SQLDB データ管理サービスを Node.js アプリケーションにバインドする画面のスクリーンショット

ステップ 2. ソース・コードをダウンロードして Bluemix アプリケーションにプッシュする

  1. IBM DevOps Services からソース・コードをエクスポートします。 ソース・コードをエクスポートする画面のスクリーンショット
    ソース・コードをエクスポートする画面のスクリーンショット
  2. コードをダウンロードしたら、manifest.yml ファイル内の名前設定で、プロジェクトの名前を指定します。この例では、Bluemix 上に作成したプロジェクトに「mathapp.app」という名前を付けます。
    applications:
    - name: mathapp
      memory: 512M
      instances: 1
      domain: mybluemix.net
      path: .
      buildpack: https://github.com/ibmdb/db2nodejsbuildpack

    : これらの変更は、DevOps Services からダウンロードしたファイルに対して行ってください。ファイルのダウンロード先としたフォルダーが、現在、アプリケーションのフォルダーになっています。

  3. 変更を行ったら、カレント・ディレクトリーをこのフォルダーのディレクトリーに変更して、コードをプッシュします。 カレント・ディレクトリーを変更して、コードをプッシュする操作のスクリーンショット
    カレント・ディレクトリーを変更して、コードをプッシュする操作のスクリーンショット

ステップ 3. POST メソッドと GET メソッドを使用してクライアントとサーバーとの間の通信を構成する

この時点で、Bluemix 上のドメインは、SQLDB データベースにリンクされた状態になっています。次のステップでは、アプリケーションを SQLDB データベースに接続します。アプリケーションとデータベースとの間の通信は、app.js ファイルに含まれる GET メソッドと POST メソッドによって行われます。

  1. routes フォルダー内にある index.js ファイルを見つけてください。このファイルに、必要な結果を取得するためのクエリーを設定します。
  2. POST 関数を呼び出して名前と点数 (ポイント数) をデータベースに挿入するには、以下のコードを使用します。
    var calcPoints = function(){
          points = totalSeconds * correctAnswers;
          $.post('/', {username: userName, points: points},function(data){
                console.log(data);
      
          });
          alert("You've got 3 wrong answers. Your score is: "  + points);
          history.back();
    }
  3. 以下のサンプル・コードに、routes/index.js ファイルに設定した POST 関数によって呼び出される関数を記載します。このコードが、必要な情報をデータベースに保管するクエリーです。
      exports.insert = function(ibmdb,connString) {
      return function(req, res) {
      var name = req.body.username;
      var points = req.body.points;
      ibmdb.open(connString, function(err, conn) {
                if (err ) {
                res.send("error occurred " + err.message);
                }
                else {
        
                           conn.query("insert into students (name, points) values('" + name
                           +"', " +points+");", function(err, tables, moreResultSets) {
           
                                      if ( !err ) { 
                                                res.send("successful"); 
                                      } else {
                                                res.send("error occurred " + err.message);
                                      }
                                      conn.close(function(){
                                                console.log("Connection Closed");
                                                });
                                      });
                            }
                 } );
      }
    
    }

ステップ 4. コンソールからデータベースを管理する

アプリケーションを SQLDB データベースにリンクしたところで、SQLDB コンソールを探索してテーブルを作成する作業に移ります。

  1. Bluemix 上にダッシュボードを表示して、アプリケーションにバインドした SQLDB サービスを選択してから、コンソールを起動します。 コンソールを起動する画面のスクリーンショット
    コンソールを起動する画面のスクリーンショット
  2. コンソールの「Database Viewer (データベース・ビューアー)」を表示して、「Run DDL (DDL の実行)」をクリックします。 「Run DDL (DDL の実行)」ボタンが表示される画面のスクリーンショット
    「Run DDL (DDL の実行)」ボタンが表示される画面のスクリーンショット
  3. これで SQL スクリプトを入力してコンソールにロードできる状態になりました。この例では、学生の名前と点数 (ポイント数) を保管する、student というテーブルを作成します。SQL スクリプトをロードした後、ページの右下にある「Run DDL (DDL の実行)」をクリックします。DB2 の構文についての詳細は、このリンク先の情報ページを参照してください。 SQL スクリプトを入力してロードする画面のスクリーンショット
    SQL スクリプトを入力してロードする画面のスクリーンショット
  4. DDL の実行が完了したら、「SCHEMA」 > 「DB2INST1」の順にクリックし、student テーブルを見つけます。 student テーブルを見つける画面のスクリーンショット
    student テーブルを見つける画面のスクリーンショット

ステップ 5. アプリケーション内でクエリーを実行し、クライアントに渡す結果を取得する

テーブルの作成が完了すると、アプリケーション内でクエリーを実行して、結果を取得できるようになります。

  1. アプリケーションにデータを挿入します。例えば、exports.insert() 関数を使用して名前とポイント数をサーバーに送信する POST の場合、現在は SELECT クエリーでデータを取得することができます。
       exports.getRanking = function(ibmdb,connString) {
       return function(req, res) {
                  ibmdb.open(connString, function(err, conn) {
                            if (err ) {
                            res.send("error occurred " + err.message);
                            }
                            else {
        
                                    conn.query("SELECT NAME,POINTS FROM STUDENTS ORDER BY
                                    POINTS DESC", function(err, tables, moreResultSets) {
           
                                     if ( !err ) { 
                                     res.render('ranking', {
                                     "tablelist" : tables      
                                      });
         
                                      } else {
                                                res.send("error occurred " + err.message);
                                      }
                                      conn.close(function(){
                                               console.log("Connection Closed");
                                               });
                                      });
                            }
                    } );
      }
    }

上記のコード・リストに示されているように、exports.getRanking() 関数は、student テーブル内のすべての結果に対してクエリーを行って、そのデータ (名前とポイント数) を JSON オブジェクトのフォーマットに取り込みます。

ページとランキングにリンクされた GET は、ユーザーがこのページにアクセスすると、getRanking() 関数をトリガーします。

app.post('/', routes.insert(ibmdb, connString));
app.get('/', routes.select(ibmdb,connString));
app.get('/ranking', routes.get(ibmdb,connString));

res.render() 関数によって指定されてレンダリングされる .ejs ページ内の結果を管理します。この例でそのページに該当するのは、getRanking() 関数に示されるように ranking.ejs です。

結果を管理する対象となるページのソース・コードのスクリーンショット
結果を管理する対象となるページのソース・コードのスクリーンショット

レンダリングされるページにある単純な JavaScript が、データ (tablelist) にアクセスし、そのデータを繰り返し処理して、結果を示す動的な表を生成します。この手法では、ページとランキングにアクセスするたびに、結果が (GET メソッドによって) データベースから取得され、表内でポイント順に編成されて公開されます。

結果を表示するために生成される動的な表のスクリーンショット
結果を表示するために生成される動的な表のスクリーンショット

テーブルがある場所から「Sample Data (サンプル・データ)」オプションにアクセスすると、同じデータを SQLDB コンソールに表示することもできます。

SQLDB コンソールに表示された同じデータのスクリーンショット
SQLDB コンソールに表示された同じデータのスクリーンショット

まとめ

Node.js とともに Bluemix SQLDB サービスを利用すると、いかに簡単にアプリケーションを作成できるか理解していただけましたか?この記事では、Bluemix に統合されたツールを使用することで、SQLDB に接続してデータを保管する単純な Node.js アプリケーションを簡単に作成できることを明らかにしました。このサンプル・アプリケーションはかなり単純なものですが、皆さんが独自のアプリケーションを作成する際に役立てていただけることを願います。その場合には、ぜひ、この記事にコメントを残してください。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Information Management, Cloud computing
ArticleID=981489
ArticleTitle=Bluemix SQLDB サービスを利用して、学生の数学演習用の簡単な Web アプリケーションを作成する
publish-date=08282014