目次


Node-RED: bot 操作の基礎

ラボ 2: Web ページおよび REST API の構築

Comments

コンテンツシリーズ

このコンテンツは全6シリーズのパート#です: Node-RED: bot 操作の基礎

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:Node-RED: bot 操作の基礎

このシリーズの続きに乞うご期待。

ラボ 2 の紹介

概要

このラボでは、最初に作成した Node-RED フローの上に、さらにフローを構築する方法を説明します。以下の機能を使用する Node-RED フローを作成します。

  • HTTP および HTML の Web ページ
  • JavaScript
  • REST API を取り込む AJAX
  • Watson Language Identification サービス

前提条件

ラボ 1 を完了していること。Watson Language Translator サービスが接続された Node-RED インスタンスが既に実行中である必要があります。

ステップ 1. シンプルな Web ページを作成する

このセクションでは、Node-RED を使用して基本的な「Hello World"」Web ページを作成します。

  1. Node-RED インスタンスでフロー・エディターを開きます。
  2. 「+」をクリックして新しいフロー・タブを作成します。
  3. 新規タブをダブルクリックし、この新規フロー・タブに付ける名前を入力します。次に「完了」をクリックします。
  4. 「入力」の http ノードをキャンバスにドラッグ・アンド・ドロップします。ノードを見つけるには、「ノードを検索」検索フィールドを使用します。
  5. 「出力」の http response ノードをキャンバスにドラッグ・アンド・ドロップします。
  6. template ノードを、http ノードと http response ノードの間に配置されるように、キャンバスにドラッグ・アンド・ドロップします。
  7. この 3 つのノードをワイヤリングします。
  8. template ノードをダブルクリックして、このノードを編集します。次のシンプルな HTML コードを入力します。
    <html>
    	<head>
    		<title>Hello World</title>
    	</head>
    	<body>
    		<div>Hello to Watson on Node-RED</div>
    	</body>
    </html>
  9. 「完了」をクリックして変更を保存します。
  10. 「入力」の http ノードをダブルクリックします。このノードを編集して、「URL」フィールドに「/<some string> 」と入力することで、Web ページへの HTTP 経路を作成します。「HTTP Hello World」などの名前を入力します。
  11. 「完了」をクリックして変更をデプロイします。
  12. 新しいブラウザー・タブを開き、新規 Web ページにナビゲートします。Web アドレスは、 Node-RED Web アドレスをベースとして、これに Web ページの URL が追加されたものになります。

    「Hello World」Web ページが表示されます。

ステップ 2. Web アプリケーションに JavaScript を追加する

このセクションでは、「Hello World」Web ページを変更して、テキスト入力フィールドと JavaScript を含めます。

  1. Node-RED インスタンスのフロー・エディターを開きます。
  2. template ノードをダブルクリックして、次のコードを HTML に追加します。
    <html>
        <head>
            <title>Hello World</title>
        </head>
        <body>
            <div>Hello to Watson on Node-RED</div>
            <div id="id_hello">
               <span>Hello</span>
               &nbsp;
               <span id="id_nameout"></span>
           </div>
    
    
            <form id="id_form">
                <div>
                    <span>
                        What is your name:   
                    </span>
                    <span>
                        <input type="text" name="name"        
                                         id="id_name"/>
                    </span>
                </div>
                <div>
                    <input type="submit" value="Enter" 
                                          id="id_enter"/>
                </div>
            </form>   
          
            <script 
               src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
         </script>
            <script type="text/javascript">
                $(document).ready(function(){
                    setupPage();
                });
                
                function setupPage(){
                    $('#id_hello').hide();
                    $('#id_form').submit(onSubmitClicked);
                    enterbutton();
                }
                
                function onSubmitClicked(event){
                    $('#id_nameout').text($('#id_name').val());
                    $('#id_hello').show();
                    $('#id_form').hide();
                    event.preventDefault();
                }
                
                function enterbutton(){
                    $(function() {
                        $("form input").keypress(function (e) {
                        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
                            $('#id_enter').click();
                            return false;
                        } else {
                            return true;
                        }
                    });
                });
            }
    
            </script>        
        </body>
    </html>
  3. 「完了」をクリックして変更をデプロイします。
  4. JavaScript が有効になった Web ページを試します。自分の名前を入力して「Enter」 をクリックします。

ステップ3. REST API を作成する

このセクションでは、「Hello World」Web ページを変更して、作成する四艇の REST API を呼び出します。ここで示すのは、次の 2 つの重要なタスクの実行方法です。

  • REST API の取り込み方法。どのソースのどの REST API でも使用できます。これにより、アプリケーションにさらに機能を追加できます。
  • Node-RED での REST API の作成方法。これにより、再使用可能な機能チャンクを作成できます。作成した機能チャンクは、Node-RED で作成した他のフローによって取り込むことができます。また、他のアプリケーション (Node-RED アプリケーションでなくても、IBM Cloud 上で実行されていないアプリケーションであっても) によって、作成した機能チャンクを取り込むこともできます。
  1. Node-RED インスタンスのフロー・エディターを開きます。
  2. template ノードをダブルクリックして以下の HTML を追加します。
    <html>
        <head>
            <title>Hello World</title>
        </head>
        <body>
            <div>Hello to Watson on Node-RED</div>
            <div id="id_hello"><span>I think you are typing text in:</span>
            &nbsp;
            <span id="id_textlang"></span></div>
    
    
            <form id="id_form">
                <div>
                    <span>
                        Enter your text to be processed:   
                    </span>
                    <span>
                        <input type="text" name="name" id="id_text"/>
                    </span>
                </div>
                <div>
                    <input type="submit" value="Enter" id="id_enter"/>
                </div>
            </form>         
    
    
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
    
            </script>
    
            <script type="text/javascript">
                $(document).ready(function(){
                    setupPage();
                });
                
                var LANGUAGES = { 'ar' : 'Arabic',
                        'en': 'English' ,
                        'es': 'Spanish',
                        'fr': 'French',
                        'it': 'Italian',
                        'de': 'German',
                        'pt': 'Portuguese',
                        'ko': 'Korean',
                        'zh': 'Chinese'
                      };
                
                function setupPage(){
                    $('#id_hello').hide();
                    $('#id_form').submit(onSubmitClicked);
                    enterbutton();
                }
                
                function langLookup(isocode) {
                    return (LANGUAGES[isocode] ? LANGUAGES[isocode] : isocode);
                }
    
                function processOK(response) {
                    console.log(response);
                    if (response.identifyresponse){
                        $('#id_textlang').text(langLookup(response.identifyresponse)); 
                    } else {
                        $('#id_textlang').text('No response received from service');
                    }
                }
          
    
    
    
                function processNotOK() {
                    console.log('Error Processing');
                    $('#id_textlang').text('Oops something went wrong');
                }            
                
                
                function invokeAjax(message) {
                    console.log('AJAX about to be invoked.');
                    console.log(message);
      
                    var ajaxData = {};
                    ajaxData.msgdata = message;
    
                    $.ajax({
                        type: 'POST',
                        url: 'langidentify',
                        data: ajaxData,
                        success: processOK,
                        error: processNotOK
                    });
                }
    
                
                function onSubmitClicked(event){
                    $('#id_hello').show();
                    event.preventDefault();
                    
                    var txt = $('#id_text').val();
                    invokeAjax(txt);
                }
                
                function enterbutton(){
                    $(function() {
                        $("form input").keypress(function (e) {
                        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
                            $('#id_enter').click();
                            return false;
                        } else {
                            return true;
                        }
                    });
                });
            }
    
            </script>        
        </body>
    </html>
  3. 「入力」の http ノードをもう 1 つ、キャンバスにドラッグ・アンド・ドロップします。
  4. 「出力」の http response ノードをもう 1 つ、キャンバスにドラッグ・アンド・ドロップします。
  5. function ノードを、http ノードと http response ノードの間に配置されるように、キャンバスにドラッグ・アンド・ドロップします。
  6. ノードをワイヤリングします。
  7. 「入力」の http ノードをダブルクリックして、各フィールドに次の情報を指定します。
    • メソッド: POST
    • URL: /langidentify
    • 名前: HTTP REST Identify Language
  8. 「完了」をクリックします。
  9. function ノードをダブルクリックします。Function の下に、次のコードを追加します。
    msg.payload = {};
    msg.payload.identifyresponse = "I don't know";
    return msg;

    サービスが要求を処理できないときのデフォルトの応答は「I don't know」という句になります。このサービスはまだ追加されていないため、アプリケーションは要求の処理方法を知りません。したがって、この応答が適しています。

  10. 「完了」をクリックして変更をデプロイします。
  11. アプリケーションをテストします。

ステップ 4. Watson Translator サービスを取り込む

このセクションでは、REST API を変更して、Watson Language Translator サービスの Language Identification メソッドを呼び出します。

  1. Node-RED インスタンスでフロー・エディターを開きます。
  2. 最後の 3 つのノード間の接続を削除します。これを行うには、接続をクリックして、キーボードの Delete を押します。
  3. function ノードをキャンバスにドラッグ・アンド・ドロップします。
  4. language identify ノードをキャンバスにドラッグ・アンド・ドロップします。
  5. ノードをワイヤリングします。
  6. 新規 function ノードをダブルクリックして、REST 呼び出しからの入力を受け取って Language Identify サービスが使用できるようにするためのコードを入力します。この情報を入力してから「完了」をクリックします。
    • 名前: Extract Input
    • コード:
      msg.payload = msg.req.body.msgdata;
      return msg;
  7. 2 番目の function ノードをダブルクリックして、Language Identify サービスからの出力を呼び出しているクライアントに送り戻すコードを追加します。この情報を入力してから「完了」をクリックします。
    • 名前: Process Output
    • コード:
      msg.payload = {};
      msg.payload.identifyresponse = "I don’t know";
      if (msg.lang && msg.lang.language){
      msg.payload.identifyresponse = msg.lang.language;
      }

      return msg;
  8. 変更をデプロイします。
  9. 英語以外の文字列 (スペイン語の文字列など) を入力することで、アプリケーションをテストします。別の言語も試してみてください。

これで、Watson Translator Language Identification メソッドを呼び出す REST API と、この API を呼び出す HTTP Web アプリケーションを作成できました。

ラボ 2 ソリューション


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


コメント

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Cloud computing, Web development
ArticleID=1056032
ArticleTitle=Node-RED: bot 操作の基礎: ラボ 2: Web ページおよび REST API の構築
publish-date=12262017