LoginSignup
6
0

More than 5 years have passed since last update.

【演習】IBM CloudでNode.jsアプリを構築する - Part2: 非同期コールバック

Posted at

はじめに

これはIBM RedbooksのDeveloping Node.js Applications on IBM Cloudをなぞってみたものです。
この記事では第2章の「Understanding asynchronous callback」に取り組んでいきます。

この章ではEclipse Orion Web IDEとIBM Cloudを使って、Node.jsベースのサーバアプリを構築します。

コールバック関数とはパラメータとして他の関数に引き渡される関数です。コールバック関数は呼び出された関数が実行された後にのみ実行されます。

この記事ではWatson Language Translatorを使ってコールバック関数の働きを見ていきます。

必要物

  • IBM Cloudアカウント
  • インターネットに接続できる環境
  • Google Chrome または Firefox
  • OS: Linux, Mac OS または Windows

IBM Cloud上にNode.js環境を立ち上げる

まずはIBM Cloudにログインします。
すると、ダッシュボードが表示されるので、右上の「Create resource」をクリックします。
(あるいは右上の「カタログ」をクリックします。)

カタログに移動したら、左のメニューから「Cloud Foundryアプリ」を選ぶか検索バーに「Node.js」を入力し、「SDK for Node.js」サービスを選択します。
image.png

任意のアプリ名を入力し、右下の「作成」をクリックします。
このアプリ名はIBM Cloud上の他のアプリと被らないものでなくてはいけません。
image.png

サービスの利用準備ができたら、アプリ名の横の表示が緑に変わりますので、それまで数分待ちます。
image.png

image.png

Continuous Deliveryを有効化する

「概要」タブに移動します。
下部にある「継続的デリバリー」を「有効化」ボタンを押して有効化します。
image.png

Continuous Deliveryツールチェーンの作成画面が現れますので、「地域」と「組織」を選択します。
image.png

下にスクロールして、「ツール統合」欄を設定します。
「リポジトリタイプ」はデフォルトでは「クローン」が選択されていますが、この演習では「新規作成」に変更します。そのほかの設定はそのままにして「作成」をクリックします。
image.png

作成完了後、以下のような画面が表示されます。
フェーズは「THINK」「CODE」「DELIVER」の3つに分かれています。
image.png

Language Translatorサービスを作成する

右上の「カタログ」を新規タブで開きます。
(現在開いているページから開いてしまってもメニューのコンソールからツールチェーンに戻ってくることができます。)
カタログの左側のメニューから「Watson」を選ぶ、あるいは検索バーに入力して「Language Translator」を選択します。
項目を全てデフォルトのまま保持して右下の「作成」をクリックします。

image.png

image.png

Node.jsアプリとTranslatorサービスを連携する

作成されたTranslatorサービスの左側の「接続」タブをクリックします。
右側の「接続の作成」をクリックします。
リストから先ほど作成したNode.jsアプリを選択します。
(Watson側からNode.jsにうまく接続できなければ、Node.js側からWatsonに接続してみましょう)
image.png

接続する前にあぷりの再ステージをすることを確認されるので「再ステージ」をクリックします。
image.png

Language Translatorの資格情報を獲得する

Language Translatorの「サービス資格情報」タブを選択して、右側の「新規資格情報」をクリックして、出てきたウィンドウの「追加」をクリックします。
「資格情報の表示」をクリックして出てきた情報はどこかにメモしておきましょう。
image.png

Node.jsアプリからLanguage Translatorサービスにアクセスする。

ツールチェーンのEclipse Orion Web IDEをクリックします。
image.png

左側のメニューにあるアプリ名を右クリックして、「新規作成」→「ファイル」を選択します。
ファイル名を「manifest.yml」としてEnterを押します。
このファイルにはIBM Cloudにアプリをデプロイするための情報が表記されます。
image.png

ファイルに以下のように記述します。
各項目は各々の環境に合わせて変更してください。
ホスト名は変更していなければアプリ名と同じものになっているはずです。

manifest.yml
applications:
- path: .
memory: 256M
instances: 1
domain: mybluemix.net
name: vy102-munemasa-nodejs
host: vy102-munemasa-nodejs
disk_quota: 1024M

ドメイン(domain)はサービス作成時のリージョンによって変更する必要があります。

米国南部 US SOUTH -> mybluemix.net
英国 UNITED KINGDOM -> eu-gb.mybluemix.net
シドニー SYDNEY -> syd.mybluemix.net
ドイツ GERMANY -> eu-de.mybluemix.net

「ファイル」->「保存」でファイルを保存します。
image.png

先ほどと同様にして、今度は「package.json」というファイルを新規作成します。
dependenciesの項目で既存のパッケージが使われていることに注目してください。
ここで用いられているwatson-developer-cloudというパッケージはWatson Developer CloudサービスにアクセスするためのNodeライブラリです。つまりLanguage Translatorサービスにアクセスするためにここでは用いられます。

package.json
{
    "name": "NodejsStarterApp",
    "version": "0.0.1",
    "description": "App for understanding Callback",
    "scripts": {
        "start": "node app.js"
    },
    "dependencies": {
        "watson-developer-cloud": "^1.0.0"
    }
}

さらにもう一つ「app.js」というファイルを作成し、以下のように記述して保存します。
1行目のhttpモジュールはhttp関数の呼び出しに用いられます。
2行目はwatsonパッケージにアクセスするためのものです。どのWatsonサービスにもアクセスできますが、ここではLanguage Translatorサービスにアクセスするのに用います。
3行目からのコードはhttpリクエストを得るためのサーバを作成するためのものです。handleRequestという関数はリクエストが出されるたびに呼び出されます。

function handleRequests内の3つの変数はそれぞれ「Language Translatorを使って訳す言葉」「原語の言語」「訳出後の言語」を示しています。Watsonモジュール内のLanguage Translator用のAPIを使うには本来は資格情報などの情報をJSON形式で与える必要がありますが、今回はこのNode.jsアプリにWatsonサービスがバウンドされているため、そういったものを書き出す必要はありません。

コールバック関数はLanguage Translatorサービスが処理を終えてから呼び出されるものです。
errオブジェクトは関数でエラーが起こった際に呼び出されます。
dataオブジェクトはLanguage Translatorサービスで返されるデータを含んでいます。
翻訳データはuserResponseオブジェクトで送られます。

app.js
const http = require('http');
const watson = require('watson-developer-cloud');

var portNumber = process.env.VCAP_APP_PORT || 8080;
const server = http.createServer(handleRequests);
server.listen(portNumber, function() {
    console.log('Server is up!');
});

function handleRequests(userRequest, userResponse) {

    userResponse.writeHead(200, {
        'Content-Type': 'text/plain'
    });

    var helloText = 'Hello';
    var fromLanguage = 'en';
    var toLanguage = 'es';
    var language_translator = watson.language_translator({
        version: 'v2'
    });

    var callback = function(err, data) {
        if (err) {
            console.log(err);
            userResponse.end('Error: ' + err);
        } else {
            console.log(data);
            userResponse.end('Translation of ' + helloText + " is " + data.translations[0].translation);
        }

    };

    language_translator.translate({
        text: helloText,
        source: fromLanguage,
        target: toLanguage
    }, callback);

}

function handleRequests(userRequest, userResponse) の行でエラーが出た場合は、アイコンにカーソルをかざして、「no-unused-paramsを使用不可にする」を選択してください。
image.png

ツールバーの中に、「新規起動構成の作成」というドロップダウンがありますので、その中の「+」をクリックします。出てきた設定画面の設定を確認して、正しければ確定します。
image.png

三角形のデプロイボタンをクリックします。
再デプロイの確認画面が出たらOKをクリックします。
image.png
image.png

デプロイをしている間は起動構成の部分が「デプロイ中」になります。
デプロイが終わったら同部分は緑の丸がつき、「実行中」と表示されます。
image.png

デプロイが終わったら、デプロイされたアプリケーションを開きます。
image.png

HelloがHolaに翻訳されたでしょうか?
image.png

Node.jsモジュールからTranslatorサービスにアクセスする

ここではtranslatorという名前のモジュールを作成し、それを使ってLanguage Translatorサービスにアクセスします。

エディタの左のメニューのアプリ名を右クリックし、「新規作成」->「フォルダ」でtranslatorという名称のフォルダを作成します。
translatorフォルダ内に「package.json」という名称のファイルを作成します。
package.jsonファイル内に以下を記述します。

package.json
{
    "name": "translator",
    "main": "./lib/translator",
    "dependencies": {
        "watson-developer-cloud": "^1.0.0"
    }
}

translatorフォルダの中に「lib」フォルダを作成します。
libフォルダの中に「translator.js」ファイルを作成します。
translator.jsファイルはこの時点では空のままにしておきます。

先ほど作成したapp.jsファイルに記述されたコードを全て消して以下のように書き直します。

1行目はhttpモジュールを読み込むためのもので、2行目はtranslatorモジュールを読み込むためのものです。

app.js
const http = require('http');
const translatorModule = require('./translator');

var helloText = 'Hello';
var fromLanguage = 'en';
var toLanguage = 'es';

var portNumber = process.env.VCAP_APP_PORT || 8080;
const server = http.createServer(handleRequests);
server.listen(portNumber, function() {
    console.log('Server is up!');
});

function handleRequests(userRequest, userResponse) {
    userResponse.writeHead(200, {
        'Content-Type': 'text/plain'
    });

    var callback = function(error, translatorOutput) {
        if (error) {
            userResponse.end(error);
        } else {
            userResponse.end('Translation of ' + helloText + " is " + translatorOutput);
        }

    };

    translatorModule.getTranslation(helloText, fromLanguage, toLanguage, callback);
}

translator.jsファイルを開き以下のコードを記述します。
getTranslator関数はhelloText、fromLanguage、toLanguageフィールドとコールバック関数を受け取ります。

translator.js
var watson = require('watson-developer-cloud');

exports.getTranslation = function getTranslation(helloText, fromLanguage, toLanguage, callback) {
    var language_translator = watson.language_translator({
            version: 'v2'
        });

        var translatorCallback = function(err, data) {
            if (err) {
                console.log(err);
                callback(err, null);
            } else {
                console.log(data);
                callback(null, data.translations[0].translation);
            }

        };
        language_translator.translate({
            text: helloText,
            source: fromLanguage,
            target: toLanguage
        }, translatorCallback);
};

デプロイしてアプリを開きます。
うまくできてたら以下のメッセージが表示されます。
image.png

アプリを停止する

もし、IBM Cloudライトアカウントをご利用中の場合、メモリは他のアプリも合わせて256MBに制限されています。
そのため、このアプリを停止することで、このアプリで利用中のリソースを他に明け渡したいということがあるかもしれません。
そんな際は、四角い停止ボタンをクリックしブラウザを閉じます。
image.png

おわり

今回の内容は以上です。
原本であるDeveloping Node.js Applications on IBM Cloudには続章がありますので、引き続きまとめられたらいいなと思っています。

6
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
0