Home

Desarrollo de una aplicación web usando Node-RED

Introducción

El objetivo de este ejercicio es mostrar cómo crear una aplicación en IBM Cloud y cómo usar la plataforma. Para ello crearemos una aplicación web que comunique de forma síncrona con el servidor, intercambiando mensajes en tiempo real. Nuestro desarrollo incluirá una página web en la que tendremos un área de texto en la que podremos escribir un mensaje y un botón, que al pulsarlo invocará un servicio en el servidor, el cual traducirá el mensaje al idioma inglés y desplegará el texto en la página, sin necesidad de volver a cargar toda la página.

Prerrequisitos

Este tutorial es de nivel técnico sencillo. Para poder ejecutarlo y entenderlo perfectamente, el lector solo requiere tener nociones básicas de HTML y de JavaScript.

Duración

Este tutorial se puede ejecutar en unos 45 minutos si ya dispone de una cuenta gratuita en IBM Cloud. De lo contrario, se tardará unos diez minutos más.

Pasos para ejecutar nuestro proyecto

Este proyecto usará principalmente las dos siguientes tecnologías:

• Node-RED corriendo sobre Node.js
• IBM Cloud

¿Qué es Node-RED?

Node-RED es un proyecto de código abierto y libre, desarrollado por el laboratorio de tecnologías emergentes de IBM y licenciado bajo Apache 2.0. Se trata de una herramienta de desarrollo diseñada para conectar sensores, APIs y servicios de forma sencilla, que permite crear nuevas soluciones innovadoras de forma rápida y con un mínimo de programación. Node- RED fue creado específicamente para simplificar el desarrollo de aplicaciones que tienen que gestionar altos volúmenes de eventos, una de las características que mejor define la era del Internet de las Cosas (Internet of Things o IoT), en la que además tendremos que lidiar con grandes volúmenes de información generados por todo tipo de sensores integrados en un sin número de dispositivos de todo tipo (medidores, dispositivos móviles y wearables como relojes y pulseras inteligentes).

Node.js

Node.js es una plataforma de desarrollo multi-plataforma moderna construida sobre el motor de JavaScript que utiliza el navegador Chrome (conocido como V8). Lo que distingue a Node.js de otras soluciones de middleware usadas para crear aplicaciones web como los servidores de aplicaciones Java, es que el modelo usado para crear aplicaciones se basa en el manejo de eventos y que tiene unos APIs que intentan evitar a toda costa realizar operaciones que bloqueen el procesador, en particular las operaciones de I/O (Entrada/Salida). Esto significa que muchas de esas operaciones se realizan de forma asíncrona, lo que permite a la solución escalar de forma particularmente eficiente. Otro atractivo de Node.js es que se programa en JavaScript, lo que permite usar el mismo lenguaje de programación tanto para la capa de presentación (la página web) como para la lógica de negocios. Por eso, Node.js es una de las plataformas de creación de aplicaciones web y móviles que más ha crecido en los últimos años.

Node-RED corre sobre Node.js, por lo que es muy fácil integrar ambas tecnologías en una misma aplicación.

IBM Cloud

IBM Cloud es la plataforma PaaS (Platform as a Service) de IBM. Con IBM Cloud es posible crear todo tipo de aplicaciones (web, móviles o de big data) sin necesidad de tener que invertir de antemano en infraestructura, ya sea de hardware o de software. Con los múltiples servicios que esta plataforma ofrece a los desarrolladores (bases de datos, colas de mensajes, notificaciones, etc.), se pueden crear todo tipo de aplicaciones, desde las más sencillas hasta las más complejas.

Creación de una cuenta en IBM Cloud

Para empezar a desarrollar su primer proyecto sobre IBM Cloud conéctese a http:// cloud.ibm.com/login

Si aún no tiene un ID de IBM, como parte del proceso de registro deberá obtener uno, el cual le servirá para poder acceder a su cuenta de IBM Cloud. Además de ser un requisito para poder usar la plataforma PaaS, tener un ID de IBM le permitirá realizar otras operaciones en el sitio web de IBM como por ejemplo obtener white papers, descargar software de evaluación de IBM o participar en los foros de discusión de IBM developerWorks (http://www.ibm.com/ developerworks), un sitio web que es una mina de oro para desarrolladores.

Si ya tiene un ID de IBM, puede usarlo para solicitar su cuenta de evaluación y una vez completado el proceso podrá usar el servicio con el ID de IBM que ya tenía.

Para obtener su ID de IBM, haga click en la liga "Create an account"

A continuación le aparecerá la siguiente forma, la cual deberá rellenar para poder obtener su ID de IBM y poder empezar a trabajar.

Primero rellene los datos de su correo electrónico y elija una contraseña. Posteriormente pulse el siguiente botón:

A continuación, IBM le mandará un correo electrónico a la dirección que proporcionó. En el correo vendrá un código de cinco dígitos que tendrá que poner en la forma y luego pulsar de nuevo el botón Next:

Finalmente, rellene sus datos personales.

Pulse de nuevo el botón Next:

Para crear su cuenta en IBM Cloud solo le falta pulsar el botón "Create Account"

Confirme que entiende el uso que hará IBM de sus datos personales y pulse el botón "Proceed".

El sistema tardará unos segundos en crear su cuenta.

Ya está listo para empezar a usar la plataforma PaaS de IBM. Esta es la página principal de IBM Cloud, el Dashboard donde se encuentra información relevante para su cuenta.

Siempre puede regresar a esta pantalla pulsando el ícono o seleccionando la opción "Dashboard" en el menú de navegación, al que se accede al pulsar el ícono en la esquina superior izquierda de la pantalla.

Activación de los servicios que usará nuestra aplicación

Nuestra aplicación será muy sencilla y solo usará dos servicios. Por un lado necesitaremos el servicio de traducción y por otro lado usaremos Node-RED para crear el web-socket que invocará el servicio de traducción cuando lo solicite el usuario.

Activación del servicio de traducción de Watson

El servicio de traducción de Watson, al igual que todos los demás que ofrece IBM Cloud, está disponible en el catálogo de servicios. Para acceder a dicho catálogo, pulsemos el siguiente botón en el Dashboard:

Esto nos lleva a la siguiente pantalla en la que podemos activar algunod e los más de 190 servicios que actualmente ofrece IBM Cloud.

Seleccione la sección de Serviciosen la barra de la izquierda y marque la opción de AI / Machine Learning (Inteligencia artificial para encontrar el servicio de traducción de Watson.

Ahora busque y pulse el botón de Language Translator.

En la siguiente pantalla se muestra información adicional del servicio que usaremos.

Por defecto está seleccionado el plan gratuito que nos permite traducir hasta un máximo de un millón de caracteres al mes. Es el que usaremos. Simplemente pulse el siguiente botón:

Una vez creado el servicio, la página le muestra información acerca de cómo usar el servicio.

Activación del servicio de Node-RED

Tal y como ya mencionamos anteriormente, usaremos Node-RED para crear el flujo aflictivo en el servidor. Para poder crear el servicio de Node-RED, debemos regresar al catálogo de servicios de IBM Cloud (puede hacerlo pulsando la liga "Catalog"). Busque Node-RED en la barra de búsquedas y haga click sobre el botón Node-RED App, tal y como se muestra a continuación.

Pulse el botón Node-RED Starter y esto nos llevará a la página que describe el servicio..

Pulse el botón "Get started" para crear una instancia del servicio (también se logra lo mismo haciendo click sobre la pestaña "Create").

En esta pantalla, si lo desea puede cambiar el nombre asignado por defecto a la aplicación por uno que prefiera (por ejemplo MiTraductor).

Verifique que el pricing plan es Lite porque ese es el plan gratuito que vamos a usar.

Pulse el siguiente botón para crear la instancia :

IBM Cloud creará entonces un nuevo entorno para ejecutar sus aplicaciones. Este es un proceso que puede durar unos minutos porque incluye instalar Node-RED así como una base de datos No-SQL llamada Cloudant.

Una vez terminado el proceso de instalación, lo primero que tenemos que hacer es agregar el servicio de traducción que creamos previamente a nuestra aplicación. Pulse el siguiente botón:

Podemos observar que el servicio de Cloudant ya está conectado a nuestra aplicación pero que el de traducción aún no está.

Seleccione el servicio de traducción, tal y como se muestra en la anterior imagen y pulse el botón "Next". Espere unos segundos a que se actualice la pantalla y muestre los dos servicios conectados a su aplicación.


Hasta ahora lo que hemos hecho es crear la aplicación Node-RED así como los servicios que requiere pero aún no la hemos desplegado en IBM Cloud, por lo que aún no la podemos ejecutar.

Para desplegar la aplicación pulse el botón "Deploy your app". Esto tendrá como efecto la activación del proceso de Continuous Integration (CI).

En la siguiente pantalla deberá crear un IBM CLoud API Key para permitir que el proceso de CI pueda accesar los recursos creados de forma segura.

Pulse el botón "New"

En la siguiente pantalla simplemente pulse "OK sin modificar los valores por defecto porque para este ejercicio no necesitamos conservar esta llave en un repositorio seguro.

FInalmente, asegúrese de que su entorno dispone de al menos 128MB de memoria (256MB es el valor por defecto) ya que con menos el entorno de Node-RED podría no arrancar. También puede elegir el centro de datos en el que se ejecutará su aplicación, aunque para este ejercicio no es necesario cambiarlo. Pulse el botón "Next" para continuar.

En la siguiente pantalla, solo debe asegurarse de que el centro de datos corresponda con el que seleccionó en la pantalla anterior.

Para continuar, pulse el siguiente botón:

Espere unos segundos a ser notificado que el proceso ha sido completado de forma satisfactoria. Después de un tiempo, la sección de "Deployment Automation" se refrescará automáticamente y mostrará los detalles del Delivery Pipeline que acaba de crear. El estatus pasará primero a "In progress" y posteriormente a "Success" cuando el pipeline termine de ejecutarse y haya arrancado la aplicación. Este proceso puede tardar varios minutos.

Refresque la página para actualizar los detalles de su aplicación.

Antes de empezar a usar nuestro entorno de Node-RED, debemos configurarlo. Haga click sobre la liga que aparece junto a "App URL".

Pulse el botón “Next” para continuar.

Como se trata de un ejercicio que pretendemos ejecutar en menos de 45 minutos, vamos a realizar la configuración más básica posible del entorno Node-RED, sin ponerle seguridad alguna. Es evidente, que en condiciones normales, esto no es algo recomendable.

Haga click en la casilla para confirmar que no desea seguridad y luego pulse el botón “Next” para continuar.

Ignore la siguiente pantalla y simplemente pulse el botón “Next” para continuar.

Ya casi terminamos. En la siguiente pantalla simplemente pulse el botón “Finish” para terminar de configurar el ambiente y arrancar la instancia.

Cuando aparezca la siguiente pantalla, habremos completado el proceso de configuración y estaremos listos para empezar.

Pulse el siguiente botón para accesar al entorno de desarrollo gráfico:

Desarrollo de la aplicación con Node-RED

Desarrollo del flujo en Node-RED

Node-RED es un entorno de programación visual que corre sobre Node.js. Con Node-RED vamos a construir flujos que reciben una entrada y depositan el resultado en una salida. En nuestro caso, lo que vamos a hacer es un flujo que reciba el texto en un idioma cualquiera , que reconozca en qué idioma fue escrito y si Watson sabe traducirlo al inglés, devuelva el texto en ese idioma como salida.

La comunicación entre el navegador y el servidor se hará mediante el uso de web-sockets y usaremos JSON para codificar los datos que intercambiemos.

Construcción del flujo

Si siguió las instrucciones previas, en este momento su pantalla debe mostrar algo muy similar a lo que se aprecia en la siguiente imagen:

Node-RED ha creado para nosotros un flujo muy sencillo con dos nodos, el cual no necesitamos. Por lo tanto, nuestro primer paso será borrarlo. Seleccione ambos nodos ("Hello Node-RED!" y "msg.payload") y bórrelos usando la tecla para borrar.

Vamos a construir un nuevo flujo deslizando nodos de la paleta situada del lado izquierdo de la pantalla al espacio vacío en el centro cuyo tab tiene el nombre “Flow 1”.

Sabemos que nuestro flujo va a recibir el texto a traducir a través de un websocket. Por lo tanto vamos a empezar a diseñar nuestro flujo arrastrando un nodo de tipo "websocket in" de la sección “Network”.

Tenga cuidado porque hay otro websocket llamado "websocket out" en la misma sección", que es diferente y que usaremos más adelante.

Es necesario configurar el websocket, por lo que simplemente hacemos doble-click sobre el ícono para editar la configuración.

El tipo de websocket definido por defecto (“Listen on”) es correcto, por lo que no es necesario cambiarlo. Lo que sí debemos definir es la ruta (path en inglés) en la que estará escuchando nuestro websocket. Para ello es necesario pulsar el botón con el ícono en forma de lápiz:

Esto nos abre una nueva ventana en la que podemos definir la ruta en la que estará escuchando nuestro WebSocket. Por defecto vemos que la ruta usada es /ws/example. Sin embargo es muy fácil cambiarlo por la ruta que más le guste.

Para este ejercicio decidí usar la ruta /ws/misocket, por lo que le sugiero que haga lo mismo para poder seguir las instrucciones. Esto significa que, en mi caso, para conectarme a este websocket deberé usar el siguiente URL, wss://mitraductor.mybluemix.net/ws/misocket.

Para continuar, pulse el botón “Add”.

Ahora ya solo falta ponerle un nombre a este nodo para facilitar la lectura del flujo. En mi caso decidí llamarlo “inputsocket”.

Pulse el botón “Done” para continuar”.

Como nuestro flujo tan solo tiene un nodo, aún no hace, así que continuemos agregando más nodos. Sabemos que la respuesta de nuestro flujo se entregará a través de un websocket. Por lo tanto, podemos arrastrar un websocket de tipo “output” a nuestro espacio de trabajo.

Este websocket también se necesita configurar. Utilizando el mismo procedimiento que el que usamos para el websocket de entrada, modifique los campos tal y como se indica en la siguiente pantalla.

En este caso la configuración será más sencilla, porque vamos a reutilizar la misma ruta que la que usamos para el websocket de entrada. Esto es normal, dado que en realidad estamos hablando de un solo WebSocket, el cual se va a usar tanto para recibir mensajes como para mandar la contestación al browser. Elija un nombre para este nodo (yo decidí llamarlo “outputsocket”). Pulse el botón “Done” para continuar”.

En este momento, en su espacio de trabajo deben aparecer dos nodos, tal y como se muestra a continuación.

En nuestro flujo, lo primero que debemos hacer tras recibir el mensaje es identificar el idioma en el que fue escrito. Para ello vamos a usar el nodo “language identifify" que se encuentra dentro del grupo “IBM Watson” en la paleta de nodos. Arrastre el nodo desde la paleta y colóquelo entre los dos websockets que ya ha configurado.

Conecte el nodo “inputsocket” con el nodo “language identity”. Haga doble click sobre el segundo nodo para configurarlo. Vamos a cambiar el nombre del nodo a “idioma”.

Pulse el botón “Done” para terminar de configurar el nodo “idioma” y poder continuar.

Ahora ya tenemos los dos primeros nodos de nuestro flujo configurados y conectados.

Cuando un websocket recibe un mensaje, automáticamente crea una variable JavaScript llamada msg y guarda el cuerpo del mensaje (en nuestro caso una cadena de caracteres) en el atributo payload de esa misma variable.

El nodo de detección de idioma funciona de forma muy sencilla, analiza el texto que le llega en msg.payload y regresa el resultado (bajo la forma de un código de idioma, como por ejemplo “en-US”) en msg.lang.language. Como la detección de idiomas no es una ciencia exacta, especialmente con mensajes cortos, también nos provee el porcentaje de probabilidad de que el resultado sea correcto en msg.lang.confidence.

El nodo de detección de idiomas no altera de forma alguna el contenido de msg.payload, por lo que este valor puede ser utilizado por el siguiente nodo. Sin embargo, no podemos confiar en que todos los nodos siempre preservarán los atributos de la variable msg. Por ejemplo, el nodo de traducción automática recibe el texto a traducir en msg.payload y lo reemplaza por la versión traducida. Eso significa que si quisiéramos conservar el texto original, deberíamos conservarlo en otro atributo de la variable msg que sepamos que no será alterado posteriormente por el flujo. Como en este caso no tenemos interés en preservar el mensaje original, el problema es más sencillo y no tenemos de qué preocuparnos.

El nodo de traducción, que usaremos más adelante, necesita saber de qué idioma a qué otro idioma debe traducir el texto. El nodo de traducción espera que msg.srclang contenga el identificador del idioma original (por ejemplo es-MX para un texto escrito en español mexicano) y que msg.destlang. contenga el identificador del idioma destino (en nuestro caso siempre será en, o sea inglés).

Ya tenemos el identificador del idioma original del texto, el cual está almacenado en msg.lang.language. El único problema es que el nodo de traducción espera que ese valor esté en msg.srclang por lo que es necesario copiar el valor de un atributo a otro. Eso es algo que vamos a hacer usando una función JavaScript.

Agregue un nodo de tipo “function” a su flujo y conéctelo al nodo de idioma. Haga doble click sobre el mismo para editarlo.

A este nodo le vamos a poner el nombre de “Prepara” porque solo se va a encargar de preparar los valores que espera recibir el siguiente nodo, que será el de traducción de texto. También vamos a completar la función JavaScript para que haga lo que necesitamos. En este caso solo necesitamos agregar la siguiente línea:

msg.srclang = msg.lang.language

Cuando se ejecute la función JavaScript, msg.srclang tomará como valor el identificador del idioma que detectó el nodo “idioma”.

Pulse el botón “Done” para terminar de configurar el nodo “Prepara” y poder continuar.

Su flujo debería ahora estar tal y como se muestra a continuación.

Ahora ya estamos en condiciones de utilizar el nodo de traducción, conocido en inglés como “language translator” y que se encuentra bajo el grupo de “IBM Watson”. Arrastre el nodo sobre su espacio de trabajo y colóquelo junto al nodo de “Prepara”. Ahora conecte ambos nodos.

Haga doble click sobre el nodo de traducción para configurarlo. Llame “Traducción” a este nodo. Use las mismas credenciales que usó anteriormente para invocar el servicio de detección de idioma para configurar este nodo.

Como este servicio va a traducir siempre el texto al inglés es importante que el idioma de destino (“Target”) esté marcado como “English” ya que nuestra función no fija ese valor.

Finalmente, asegúrese de que está marcada la opción “Not using translation utility” tal y como se muestra a continuación.

Pulse el botón “Done” cuando haya terminado de configurar el nodo.

Ya nos falta muy poco para terminar nuestro flujo. Solo falta conectar el nodo de “Traducción” con el de “outputsocket” que creamos al inicio. Una vez que lo haya hecho, su flujo debe quedar de la siguiente manera:

Nuestro flujo está casi completo. Solo nos falta proveer la información que necesitan los dos nodos de websockets para funcionar, a saber el servidor en el que correrá el flujo y el puerto que usaremos para conectarnos. Como se trata de información que deben compartir los dos nodos, vamos a usar un nodo de configuración que provea esa información a todos los nodos del flujo que la requieran. Eso es más eficiente que agregar la misma información en cada uno de los nodos. Para ello vamos a añadir a nuestro flujo, un nodo de configuración, pero ese nodo no se encuentra actualmente en nuestra paleta, por lo que primero debemos agregarlo.

Haga click en el menú y seleccione la opción "Manage palette"

Busque el nodo "node-red-contrib-config".

Pulse el botón "install" y luego "Close"

Ahora ya podemos instalar el nuevo nodo. Busque el nodo "Config" en su paleta, dentro del grupo "function".

Este nodo no se necesita conectar a ningún otro nodo, porque afecta a todos los nodos del flujo. Por lo tanto, su flujo debe verse de la siguiente manera:

Nuestro último paso va a consistir en configurar nuestro nodo Config. Haga doble click sobre el nodo para abrir la pantalla de configuración.

Agregue las propiedades "host" y "port", tal y como se muestra en la imagen anterior, con sus valores correspondientes. Cuando termine, pulse el siguiente botón:

Por fin vamos a poder probar nuestro flujo, pero para poder hacerlo, primero es necesario ponerlo en producción en su servidor. Para ello simplemente pulse el botón “Deploy”.

En principio, tras unos pocos segundos, en su browser debería aparecer el mensaje “Successfully Deployed” (Publicado exitosamente).

Ya podemos conectarnos al WebSocket desde cualquier página web. Sin embargo, para ello necesitamos crear primero una página HTML, lo cual es exactamente lo que haremos en la siguiente sección.


Desarrollo de la aplicación web

La aplicación web se dividirá en tres archivos:

• WebSockets.html
• WebSockets.js
• style.css

Pueden descargar estos tres archivos desde mi página de GitGub (huibert7/Node-Red-tutorial)

El archivo WebSockets.html

Este es el contenido del archivo HTML. Se trata de un documento muy sencillo, dado que no contiene nada de JavaScript (el código está en el archivo WebSockets.js) y toda la información referente al diseño está en el archivo style.css.

<!DOCTYPE html>
<html lang="es">
<head>
      <meta charset="utf-8">
      <title>Traducci&oacute;n de texto con IBM Cloud</title>
      <link rel="stylesheet" href="style.css">
</head>
<body>
      <div id="page-wrapper">
            <h1>Traducci&oacute;n de texto</h1>
            <div id="status">Conectando...</div>
            <ul id="messages"></ul>
            <form id="message-form" action="#" method="post">
                  <textarea id="message" placeholder="Escribe tu texto
aqu&iacute;..." required></textarea>
                  <button type=“submit">Traducir texto</button>
            </form>
</div>
      <script src="appTest.js"></script>
</body>
</html>

Como podrá observar, esta página web realmente solo contiene una lista en la que mostraremos el mensaje enviado al servidor así como la respuesta que recibamos y una forma que usaremos para capturar el mensaje junto con el botón que presionará el usuario para mandarlo.

El archivo WebSockets.js

Este archivo contiene el código JavaScript que le da la inteligencia a nuestra página HTML. Si observa el código, verá que solo definimos una función, la cual se ejecutará cuando se termine de cargar la página HTML. En ella se crea el WebSocket y se definen todas las funciones callback que invocará el navegador cuando se produzcan eventos relacionados con ese objeto, como el establecimiento de la conexión, la recepción de un mensaje, etc.

Antes de probar la aplicación, debe modificar este archivo y cambiar la siguiente línea para que refleje el nombre de su aplicación (en mi caso node-red-xdewx):

var socket = new WebSocket('ws://node-red-xdewx.mybluemix.net/ws/misocket');

window.onload = function() {

   // El DOM permite obtener referencias hacia los elementos de la página HTML
con los que vamos a interactuar.
  var form = document.getElementById('message-form');
  var messageField = document.getElementById('message');
  var messagesList = document.getElementById('messages');
  var socketStatus = document.getElementById('status');
  // Crea una conexión a nuestro WebSocket en BlueMix.
  var socket = new WebSocket('ws://mitraductor.mybluemix.net/ws/misocket');
  // Manejo básico de cualquier error que pueda ocurrir con respecto al
WebSocket.
  socket.onerror = function() {
    console.log('Error de WebSocket');
};
  // Muestra un mensaje de estatus de conectado cuando el WebSocket es
abierto de forma exitosa.
  socket.onopen = function(event) {
    socketStatus.innerHTML = 'Conectado a: ' + event.currentTarget.URL;
};
  // Gestión de la recepción de mensajes mandados por el servidor.
  socket.onmessage = function(event) {
    var message = event.data;
    messagesList.innerHTML += '<li class="received"><span>Recibido:</span>' +
message + '</li>';
};
  // Muestra un mensaje de estatus de desconectado si por algún motivo se
cerrara el WebSocket.
  socket.onclose = function(event) {
    socketStatus.innerHTML = 'Desconectado del WebSocket.';
};
  // Manda el mensaje cuando se pulsa el botón de submit (Enviar mensaje).
  form.onsubmit = function(e) {
    // Lee el mensaje escrito por el usuario en la textarea.
    var message = messageField.value;
    // Manda el mensaje al servidor usando el WebSocket.
    socket.send(message);
    // Agrega el mensaje a la lista de mensajes.
    messagesList.innerHTML = '<li class="sent"><span>Env&iacute;ado:</span>'
+ message + '</li>';
    // Borra el contenido de la caja de texto en el que el usuario escribe el
mensaje.
    messageField.value = '';
    return false;
  };

 };

El archivo style.css

Este archivo realmente no es muy importante. Solo contiene la hoja de estilos que le da forma y color a la página HTML. Si no le gusta la apariencia de la página, puede usar un editor de CSS3 para modificar este archivo y así cambiar el diseño de la misma.

Probemos la aplicación

Normalmente este es el punto en el que subiríamos la aplicación web a la nube para probarla. Sin embargo, en este caso, para fines puramente pedagógicos, primero vamos a hacer una prueba local. La idea es tener la aplicación web en nuestra PC y dejar que se conecte al WebSocket que estará corriendo sobre BlueMix. Eso demostrará que nuestro flujo es realmente un componente que puede ser utilizado de forma remota desde cualquier página web, aunque no esté en Bluemix.

Abra cualquier navegador reciente y abra el archivo WebSockets.html, ya sea usando la opción “Open File...” o equivalente o arrastrando el archivo sobre la ventana de su browser. Esto es lo que debería ver:

Aquí les dejo unas frases en distinto idiomas para que puedan probar la aplicación.

Holandés Ik ben in Utrecht geboren. Op een dag zal Nederland het WK winnen.

Francés J’ai fait mes études en France, à Bordeaux. Je regrette énormément l’incendie qui a brulé la cathédrale de Nôtre Dame de Paris.

Alemán Ich habe Deutsch in Genf gelernt. Fussball ist ein spiel und am ende gewinnt Deutschland

Conclusión

Node-RED es un entorno de desarrollo en la nube que es muy fácil de utilizar para crear aplicaciones de todo tipo. En este caso hemos creado en cuestión de minutos una aplicación web que explota dos servicos de Inteligencia Artificial (IA), pero muchos desarrolladores usan también esta misma tecnología para desarrollar aplicaciones que procesan grandes cantidades de datos provenientes de sensores (Internet de las cosas o IoT). Siga explorando cómo la tecnología abierta de Node-RED le puede ayudar a resolver problemas complejos de forma sencilla.