Mostrando artículos por etiqueta: Desarrollo Somos una empresa de consultoría, desarrollo e implantación de software reconocida por la calidad de nuestros servicios, la solidez técnica de nuestros profesionales y la experiencia en tecnología y ejecución de proyectos. http://www.microgestion.com.ar/index.php/proyectos/tag/Desarrollo 2018-12-15T21:24:31+00:00 Joomla! - Open Source Content Management IBM Bluemix - Introducción y Hola mundo! con Node.js y Cloud Foundry CLI 2015-07-13T00:00:00+00:00 2015-07-13T00:00:00+00:00 http://www.microgestion.com.ar/index.php/mg-developers/articulos/94-bluemix-nodejs-hw Diego Mendoza diego_mendoza@microgestion.com <div class="K2FeedIntroText"><p>En esta publicación describiremos los pasos para realizar el despliegue de una aplicación <b>Node.js</b> en <b>IBM Bluemix</b> utilizado <b>Cloud Foundry CLI</b>, para quienes no estén familiarizados con <b>IBM Bluemix</b> haremos una breve introducción a los conceptos mas relevantes de su servicio Paas.</p> </div><div class="K2FeedFullText"> <h3>IBM Bluemix</h3> <p style="margin-bottom: 0px; margin-top: 10px;"><b>IBM Bluemix</b> es una plataforma en la nube basada en estándares abiertos para la construcción, ejecución y gestión de aplicaciones. Con <b>IBM Bluemix</b> los desarrolladores pueden despreocuparse de la infraestructura y enfocarse en la construcción de aplicaciones utilizando opciones flexibles de despliegue, herramientas centradas en DevOps, y un potente conjunto de APIs y servicios de IBM y de terceros.</p> <p style="margin-bottom: 0px; margin-top: 10px;"><b>IBM Bluemix</b> ofrece tres opciones de cómputo para el despliegue de aplicaciones:</p> <ol> <li>Cloud Foundry</li> <li>IBM Containers (Docker)</li> <li>Virtual Machines (Open Stack)</li> </ol> <center><img src="images/blog/94-bluemix-nodejs-hw/01_bluemix.png" alt="IBM Bluemix" width="600" height="277" /></center> <h4>Cloud Foundry</h4> <div class="autotoc" style="float:right;"><img src="images/blog/94-bluemix-nodejs-hw/02_logo_min_a_cf.png" alt="Cloud Foundry" width="80" height="80" /></div> <p style="margin-bottom: 0px; margin-top: 10px;">Estamos transitando la era de "la nube", en esta nueva era las plataformas para la ejecución de aplicaciones comienzan a ser entregadas <i>como servicio</i>, concepto que se conoce con el término <i>plataforma como servicio</i> o <b>PaaS</b> (del inglés <i>Platform as a Service</i>).</p> <p style="margin-bottom: 10px; margin-top: 10px;">PaaS hace que sea mucho más fácil implementar, ejecutar y escalar las aplicaciones. Mientras algunas ofertas de PaaS se limitan a determinados lenguajes, marcos de trabajo, o restringiendo el despliegue a una sola nube, <b>Cloud Foundry</b> es el estándar abierto para PaaS que permite elegir entre múltiples proveedores de nube, marcos de trabajo y servicios para la construcción de aplicaciones.</p> <p style="margin-bottom: 10px; margin-top: 10px;">Al ser un proyecto de código abierto, hay una gran comunidad contribuyendo y apoyando Cloud Foundry, entre ellas IBM. <b>IBM Bluemix</b> extiende Cloud Foundry con múltiples tiempos de ejecución (<i>runtimes</i>) y servicios administrados que junto a potentes herramientas empresariales de gestión y desarrollo (<i>DevOps</i>) permiten a los desarrolladores componer rápidamente sus aplicaciones sin preocuparse por la infraestructura subyacente.</p> <p style="margin-bottom: 10px; margin-top: 10px;">El valor que ofrece <b>IBM Bluemix</b> frente a otros proveedores de PaaS es el tipo de servicios que ofrece camo parte de su catálogo, en el mismo podremos encontrar desde un motor de reglas hasta servicios de comprensión del lenguaje basados en tecnología <b>IBM Watson</b>.</p> <p style="margin-bottom: 10px; margin-top: 10px;">En este artículo utilizaremos un <b>tiempo de ejecución Node.js</b> basado en Cloud Foundry para tener un primer contacto con el servicio PaaS de <b>IBM Bluemix</b>.</p> <h4>IBM Containers (Docker)</h4> <div class="autotoc" style="float:left;"><img src="images/blog/94-bluemix-nodejs-hw/02_logo_min_b_docker.png" alt="IBM Containers (Docker)" width="80" height="80" /></div> <p style="margin-bottom: 0px; margin-top: 10px;">Una máquina virtual (<i>VM</i>) es una implementación a nivel de software de un entorno físico de hardware. Las máquinas virtuales se utilizan para ejecutar aplicaciones y sistemas operativos completos "dentro" de un hardware virtualizado que es proporcionado por un hipervisor. El hipervisor es el software que separa la máquina virtual del equipo físico y es responsable de asignar los recursos según sea necesario.</p> <p style="margin-bottom: 10px; margin-top: 10px;">Cada contenedor es una plataforma de aplicaciones segura cuya ejecución se realiza de manera aislada como un proceso independiente en el sistema operativo del equipo que ejecuta el contenedor. Las aplicaciones incluidas en contenedores pueden ejecutarse en cualquier lugar: estaciones de trabajo de desarrollo corriendo Windows, servidores que ejecutan Ubuntu, o en las VMs de un centro de datos productivo corriendo Red Hat.</p> <p style="margin-bottom: 10px; margin-top: 10px;"><b>Docker</b> es una tecnología de código abierto para la virtualización de contenedores combinada con un flujo de trabajo que facilita la contenerización de aplicaciones. Los contenedores de IBM (<i>IBM Containers</i>) permiten ejecutar contenedores Docker alojados en la nube de <b>IBM Bluemix</b> facilitando de esta forma la tarea de escalar las aplicaciones en respuesta a un cambio en la demanda.</p> <h4>Virtual Machines (Open Stack)</h4> <div style="float:right;"><img src="images/blog/94-bluemix-nodejs-hw/02_logo_min_c_open.png" alt="Virtual Machines (Open Stack)" width="80" height="80" /></div> <p style="margin-bottom: 0px; margin-top: 10px;">Los contenedores (containers) son objetos virtuales de software que incluyen todos los elementos que una aplicación necesita para funcionar. Un contenedor se crea a partir de una imagen la cual alberga y soporta una determinada aplicación. Cada imagen incluye sólo la aplicación que soporta y sus dependencias.</p> <p style="margin-bottom: 10px; margin-top: 10px;"><b>OpenStack</b> es un sistema operativo para la nube que controla grandes agrupaciones de recursos de computación, almacenamiento y redes dentro de un centro de datos, todo ello gestionado a través de un tablero que permiten a los administradores tener el control de toda la infraestructura mientras que delega la provisión de los recursos a los usuarios a través de una interface web.</p> <p style="margin-bottom: 10px; margin-top: 10px;"><b>IBM Bluemix</b> proporciona la infraestructura de máquinas virtuales de IBM como una característica que aun se encuentra en su fase de pruebas (beta). Se puede utilizar esta infraestructura para crear máquinas virtuales que se ejecutan en nubes basadas en OpenStack, dentro o fuera de <b>IBM Bluemix</b>.</p> <h3>Obtener una cuenta de IBM Bluemix</h3> <p style="margin-bottom: 10px; margin-top: 10px;">Para comenzar a probar las capacidades PaaS de <b>IBM Bluemix</b> será necesario contar con una cuenta, la misma se puede crear accediendo a la <a href="#referencias">página de <b>IBM Bluemix</b></a> y presionar <b>REGISTRARSE</b>.</p> <center><img src="images/blog/94-bluemix-nodejs-hw/03_signup.png" alt="Crear una cuenta de IBM Bluemix" width="500" height="272" /><br /><strong>Pantalla 1 - Crear una cuenta de IBM Bluemix</strong></center> <p style="margin-bottom: 10px; margin-top: 10px;">Si contamos con un IBM ID podremos utilizarlo para simplificar el proceso de registración, luego de completar los datos requeridos y completar el proceso tendremos que esperar el correo de aprobación de la cuenta para comenzar a utilizar <b>IBM Bluemix</b>.</p> <p style="margin-bottom: 10px; margin-top: 10px;">Con la creación de la cuenta accedemos a un mes sin cargo para probar los servicios de <b>IBM Bluemix</b> dentro de ciertos límites de recursos y procesamiento, luego del mes podremos utilizar 500 MB de memoria mensuales sin cargo para aplicaciones y contenedores, ademas de poder utilizar varios servicios con planes gratuitos.</p> <h3>Panel de control y conceptos de Cloud Foundry</h3> <p style="margin-bottom: 5px; margin-top: 10px;">Una vez que la cuenta de usuario fue aprobada poderemos iniciar sesión en <b>IBM Bluemix</b> y acceder a la consola.</p> <center><img src="images/blog/94-bluemix-nodejs-hw/04_console.png" alt="Consola de IBM Bluemix" width="600" height="309" /><br /><strong>Pantalla 2 - Consola de IBM Bluemix</strong></center> <p style="margin-bottom: 10px; margin-top: 10px;">Para comprender algunos de los aspectos de <b>IBM Bluemix</b> conviene repasar algunos conceptos de Cloud Foundry:</p> <ol> <li><b>Organización (ORG)</b>. Una organización es una cuenta de desarrollo que un individuo o múltiples colaboradores pueden poseer y utilizar. Todos los colaboradores acceder a una organización con sus cuentas de usuario. Los colaboradores dentro de una organización compartes recursos y la cuota asociada al plan de los mismos.</li> <li><b>Cuentas de usuario</b>. Una cuenta de usuario representa una persona individual en el contexto de una instalación de Cloud Foundry. Un usuario puede tener diferentes roles en diferentes espacios dentro de una organización, gobernando el nivel y el tipo de acceso que tienen dentro de los espacio.</li> <li><b>Espacios</b>. Toda aplicación y servicio tiene como alcance un espacio. Cada organización contiene al menos un espacio. Un espacio proporciona un conjunto de accesos de usuario a una ubicación compartida para el desarrollo, implementación y mantenimiento de aplicaciones. Los roles dentro de un espacio sólo aplican a ese espacio particular.</li> <li><b>Roles y Permisos</b>. Un usuario puede tener uno o más roles. La combinación de estos roles define la totalidad de los permisos que un usuario tiene en la organización y dentro de los espacios específicos dentro de la misma.</li> </ol> <h4>Crear un nuevo espacio para realizar pruebas</h4> <p style="margin-bottom: 5px; margin-top: 10px;">Crearemos un espacio dentro de la organización que nos asignó <b>IBM Bluemix</b> destinado a pruebas de concepto de Node.js, para ello presionaremos la acción <b>+ Crear un espacio</b>, especificaremos <b>node.js poc</b> como nombre del espacio y luego presionaremos <b>CREAR</b>.</p> <center><img src="images/blog/94-bluemix-nodejs-hw/05_space_a_new.png" alt="Crear un nuevo espacio dentro de IBM Bluemix" width="400" height="206" /><br /><strong>Pantalla 3 - Crear un nuevo espacio dentro de IBM Bluemix</strong></center> <p style="margin-bottom: 5px; margin-top: 10px;">Finalizado el proceso de creación podremos visualizar el nuevo espacio en la consola de <b>IBM Bluemix</b>.</p> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/05_space_b_console.png" alt="Visualización del nuevo espacio dentro de la consola" width="600" height="383" /><br /><strong>Pantalla 4 - Visualización del nuevo espacio dentro de la consola</strong></center> <h3>Crear una aplicación Node.js</h3> <p style="margin-bottom: 10px; margin-top: 10px;">Es el momento de crear una aplicación para desplegarla en <b>IBM Bluemix</b>, no es el objetivo del artículo profundizar en el desarrollo de aplicaciones basadas en Node.js, por lo cual construiremos una aplicación muy simple que nos permita verificar el mecanismo de despliegue utilizando Cloud Foundry CLI.</p> <h4>Descargar e instalar IBM SDK for Node.js</h4> <p style="margin-bottom: 10px; margin-top: 10px;">Para el desarrollo y las pruebas de nuestra aplicación utilizaremos el <b>IBM SDK for Node.js</b>, podríamos utilizar el SDK estándar, sin embargo nos inclinamos por utilizar el SDK de IBM ya que permite monitorear las aplicaciones utilizando el software de monitoreo <i>IBM Monitoring and Diagnostic Tools - Health Center</i>.</p> <p style="margin-bottom: 5px; margin-top: 10px;">Dentro de la página del <b>IBM SDK for Node.js</b> es posible descargar el software para varias plataformas, incluido Mainframe!!, en nuestro caso seleccionamos Windows como plataforma.</p> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/06_sdk_a.png" alt="Acceso a página de descarga de IBM SDK for Node.js" width="600" height="504" /><br /><strong>Pantalla 5 - Acceso a página de descarga de IBM SDK for Node.js</strong></center> <p style="margin-bottom: 5px; margin-top: 10px;">Una vez que accedemos a la página de descarga tendremos que elegir la arquitectura de procesador, en nuestro caso descargamos la versión de 64 bits, una vez descargado, ejecutaremos el asistente que nos permitirá instalar el SDK en nuestro equipo local.</p> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/06_sdk_b.png" alt="Inicio del asistente de instalación de IBM SDK for Node.js" width="600" height="389" /><br /><strong>Pantalla 6 - Inicio del asistente de instalación de IBM SDK for Node.js</strong></center> <h4>Aplicación Hola mundo! en Node.js</h4> <p style="margin-bottom: 10px; margin-top: 10px;">El siguiente snipet contiene el código de nuestra aplicación Node.js, es muy simple, pero nos servirá para evaluar el mecanismo de despliegue de aplicaciones en <b>IBM Bluemix</b> utilizando Cloud Foundry CLI.</p> <pre class="brush:java">var http = require('http'); var port = 8080; var host = 'localhost'; var server = http.createServer(handleRequest).listen(port, host); console.log('Escuchando en el host: ' + host); console.log('Escuchando en el puerto: ' + port); function handleRequest(request, response) { //HTML - MAIN var pageMainTemplate = '&lt;html&gt' + '&lt;head&gt' + '&lt;meta http-equiv="Content-Type" ' + 'content="text/html; charset=UTF-8" /&gt' + '&lt;/head&gt' + '&lt;body&gt' + '&lt;h1&gtMG Developers - Node.js - Hola mundo!&lt;/h2&gt' + '&lt;/div&gt' + '&lt;/body&gt' + '&lt;/html&gt;'; response.writeHead(200, {'Content-Type': 'text/html'}); response.write(pageMainTemplate); response.end(); } </pre> <p style="margin-bottom: 5px; margin-top: 10px;">A continuación se muestra el comando ejecutado para probar la aplicación y el resultado obtenido al accederla desde un navegador de Internet.</p> <pre style="border: 1px dashed #cccccc; background-color: #ffff90; font-family: monospace; margin: 5px 0; padding: 8px 12px 8px 10px; font-size: 12px;">C:\_workspaces\node.js\poc.001>node server.js Escuchando en el host: localhost Escuchando en el puerto: 8080 </pre> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/07_hw.png" alt="Acceso a la aplicación Node.js de prueba" width="500" height="201" /><br /><strong>Pantalla 7 - Acceso a la aplicación Node.js de prueba</strong></center> <h4>Cambios a la aplicación para ser desplegada en IBM Bluemix</h4> <p style="margin-bottom: 10px; margin-top: 10px;">Cloud Foundry espera una archivo <b>package.json</b> comp parte de los archivos que componen una aplicación Node.js. En este archivo se pueden especificar varios valores de utilidad como la versión de Node.js que se desea utilizar, el nombre de la aplicación, la versión, el nombre del autor, las dependencias, etc. A continuación se muestra el contenido del archivo <b>package.json</b> que utilizaremos.</p> <pre class="brush:javascript">{ "name": "mgdevelopers-nodejs-poc-01", "version": "0.0.1", "description": "MG Developers - Poc 01 - Node.js", "dependencies": { }, "engines": { "node": "0.10.26" }, "repository": {} } </pre> <p style="margin-bottom: 10px; margin-top: 10px;">Es necesario utilizar la variable de entorno <b>VCAP_APP_PORT</b> y <b>VCAP_APP_HOST</b> para determinar en que dirección y en qué puerto la aplicación debe escuchar, es necesario tener en cuenta que estos valores dependen de la infraestructura subyacente. Será conveniente introducir los siguientes cambios en la aplicación para asignar a las variables <b>host</b> y <b>port</b> valores compatibles con nuestro entorno local y el de <b>IBM Bluemix</b>.</p> <pre class="brush:javascript">var http = require('http'); // Cambios en la inicialización de las variables var port = (process.env.VCAP_APP_PORT || 8080); var host = (process.env.VCAP_APP_HOST || 'localhost'); // Resto del código // .... </pre> <p style="margin-bottom: 10px; margin-top: 10px;">Por último, para facilitar el depsliegue, el nombre del archivo de nuestra aplicación debe ser <b>server.js</b>, de esta forma se puede utilizar el comando de inicialización pre definido y no será necesario especificarlo al momento de hacer el despliegue.</p> <h3>Desplegar la aplicación utilizando Cloud Foundry CLI</h3> <p style="margin-bottom: 10px; margin-top: 10px;">Para realizar el despliegue de nuestra aplicación en <b>IBM Bluemix</b> utilizaremos la interface de línea de comando (<i>CLI</i>) de Cloud Foundry.</p> <h4>Descargar e instalar Cloud Foundry CLI</h4> <p style="margin-bottom: 5px; margin-top: 10px;">De la página de descarga de Cloud Foundry CLI seleccionaremos el instalador estable para el sistema operativo con el cual estemos trabajando, en nuestro caso Windows de 64 bits.</p> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/08_cli_a.png" alt="Descarga de Cloud Foundry CLI" width="500" height="259" /><br /><strong>Pantalla 8 - Descarga de Cloud Foundry CLI</strong></center> <p style="margin-bottom: 5px; margin-top: 10px;">Luego será necesario ejecutar el asistente que nos permitirá instalar la interfaz de línea de comando en nuestro equipo local.</p> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/08_cli_b.png" alt="Inicio del asistente de instalación de Cloud Foundry CLI" width="500" height="388" /><br /><strong>Pantalla 9 - Inicio del asistente de instalación de Cloud Foundry CLI</strong></center> <h4>Iniciar sesión en IBM Bluemix en el espacio "node.js poc"</h4> <p style="margin-bottom: 10px; margin-top: 10px;">Antes de poder desplegar la aplicación será necesario ejecutar el siguiente comando para iniciar sesión, la url https://api.ng.bluemix.net es el <b>API End Point</b> de <b>IBM Bluemix</b>.</p> <pre style="border: 1px dashed #cccccc; background-color: #c6ff9b; font-family: monospace; margin: 5px 0; padding: 8px 12px 8px 10px; font-size: 12px;">cf login -a https://api.ng.bluemix.net</pre> <p style="margin-bottom: 10px; margin-top: 10px;">Luego de ejecutar el comando nos serán solicitadas las las credenciales utilizadas para acceder a <b>IBM Bluemix</b> y luego el espacio que utilizaremos, en nuestro caso <b>node.js poc</b>.</p> <pre style="border: 1px dashed #cccccc; background-color: #ffff90; font-family: monospace; margin: 5px 0; padding: 8px 12px 8px 10px; font-size: 12px;">C:\_jdevelopment\CloudFoundry>cf login -a https://api.ng.bluemix.net API endpoint: https://api.ng.bluemix.net Email> diego_mendoza Password> Authenticating... OK Targeted org diego_mendoza Select a space (or press enter to skip): 1. dev 2. node.js poc Space> 2 Targeted space node.js poc API endpoint: https://api.ng.bluemix.net (API version: 2.27.0) User: diego_mendoza@microgestion.com Org: diego_mendoza Space: node.js poc </pre> <h4>Desplegar la aplicación haciendo un push</h4> <p style="margin-bottom: 10px; margin-top: 10px;">Para desplegar el código será necesario estar ubicados en el directorio donde se encuentran los archivos <b>server.js</b> y <b>package.json</b>, y luego ejecutar el siguiente comando para desplegar el contenido del directorio en <b>IBM Bluemix</b>.</p> <pre style="border: 1px dashed #cccccc; background-color: #c6ff9b; font-family: monospace; margin: 5px 0; padding: 8px 12px 8px 10px; font-size: 12px;">cf push mgdevelopers-nodejs-poc-01 -m 64M -n mgdevelopers-nodejs-poc-01 -c null </pre> <p style="margin-bottom: 10px; margin-top: 10px;">Si todo funciona correctamente la ejecución debería arrojar un resultado similar al siguiente:</p> <pre style="border: 1px dashed #cccccc; background-color: #ffff90; font-family: monospace; margin: 5px 0; padding: 8px 12px 8px 10px; font-size: 12px;">C:\_workspaces\node.js\poc.001>cf push mgdevelopers-nodejs-poc-01 -m 64M -n mgdevelopers-nodejs-poc-01 -c null Creating app mgdevelopers-nodejs-poc-01 in org diego_mendoza / space node.js poc as diego_mendoza... OK Creating route mgdevelopers-nodejs-poc-01.mybluemix.net... OK Binding mgdevelopers-nodejs-poc-01.mybluemix.net to mgdevelopers-nodejs-poc-01... OK Uploading mgdevelopers-nodejs-poc-01... Uploading app files from: C:\_workspaces\node.js\poc.001 Uploading 1.2K, 2 files Done uploading OK Starting app mgdevelopers-nodejs-poc-01 in org diego_mendoza / space node.js poc as diego_mendoza... -----> Downloaded app package (4.0K) -----> IBM SDK for Node.js Buildpack v2.2-20150630-1721 Based on Cloud Foundry Node.js Buildpack v64 -----> Reading application state package.json... build directory... cache directory... environment variables... Node engine range: 0.10.26 Npm engine: unspecified Start mechanism: server.js node_modules source: package.json node_modules cached: false NPM_CONFIG_PRODUCTION=true NODE_MODULES_CACHE=true -----> Installing binaries Installing IBM SDK for Node.js (0.10.26) from cache Using default npm version: 1.4.3 -----> Checking and configuring service extensions before installing dependencies -----> Building dependencies Installing node modules npm WARN package.json mgdevelopers-nodejs-poc-01@0.0.1 No README data -----> Checking startup method No Procfile; Adding 'web: node server.js' to new Procfile -----> Checking and configuring service extensions after installing dependencies -----> Installing App Management -----> Building runtime environment -----> Finalizing build Creating runtime environment Cleaning previous cache Caching results for future builds -----> Build succeeded! mgdevelopers-nodejs-poc-01@0.0.1 /tmp/staged/app └── (empty) -----> Uploading droplet (8.3M) 0 of 1 instances running, 1 starting 1 of 1 instances running App started OK App mgdevelopers-nodejs-poc-01 was started using this command `./vendor/initial_startup.rb` Showing health and status for app mgdevelopers-nodejs-poc-01 in org diego_mendoza / space node.js poc as diego_mendoza.. . OK requested state: started instances: 1/1 usage: 64M x 1 instances urls: mgdevelopers-nodejs-poc-01.mybluemix.net last uploaded: Mon Jul 13 12:55:30 UTC 2015 stack: lucid64 buildpack: SDK for Node.js(TM) (ibm-node.js-0.10.26) state since cpu memory disk details #0 running 2015-07-13 09:56:14 AM 0.0% 16.6M of 64M 30.8M of 1G </pre> <h4>Visualización de la aplicación instalada en la consola de IBM Bluemix</h4> <p style="margin-bottom: 5px; margin-top: 10px;">Luego de instalar la aplicación podemos visualizar como han cambiado las cosas en la consola de <b>IBM Bluemix</b>.</p> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/09_consolea_a.png" alt="Visualización de la consola de IBM Bluemix con la aplicación desplegada" width="600" height="460" /><br /><strong>Pantalla 10 - Visualización de la consola de IBM Bluemix con la aplicación desplegada</strong></center> <p style="margin-bottom: 5px; margin-top: 10px;">Si accedemos al panel de control de la aplicación tendremos una visión mas detallada de sus características, estado y funcionamiento, en este panel se pueden modificar parámetros como la cantidad de instancias asignadas, la memoria asignada, etc.</p> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/09_consolea_b.png" alt="Panel de control de la aplicación Node.js" width="600" height="172" /><br /><strong>Pantalla 11 - Panel de control de la aplicación Node.js</strong></center> <h4>Prueba de la aplicación desplegada en IBM Bluemix</h4> <p style="margin-bottom: 5px; margin-top: 10px;">Estamos en condiciones de acceder a la aplicación a través de la url: <a href="http://mgdevelopers-nodejs-poc-01.mybluemix.net/">http://mgdevelopers-nodejs-poc-01.mybluemix.net/</a>.</p> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/10_hw.png" alt="Acceso a la aplicación Node.js desplegada en IBM Bluemix" width="500" height="201" /><br /><strong>Pantalla 12 - Acceso a la aplicación Node.js desplegada en IBM Bluemix</strong></center> <h3>Conclusiones</h3> <p style="margin-bottom: 5px; margin-top: 10px;">En este artículo introductorio se describieron los conceptos fundamentales necesarios para comenzar a utilizar el servicio PaaS de <b>IBM Bluemix</b>, conocer estos conceptos ayuda a comprender de que se trata esta "nube" y que servicios ofrece: Cloud Foundry, Docker y Openstack.</p> <p style="margin-bottom: 10px; margin-top: 10px;">Desde el punto de vista práctico se tuvo un primer contacto con la consola y se pudo verificar la facilidad con la que es posible desplegar una aplicación en <b>IBM Bluemix</b> utilizado la interfaz de línea de comando de Cloud Foundry.</p> <a name="referencias"></a> <h3>Referencias</h3> <ul style="margin-bottom: 5px; margin-top: 5px;"> <li><a title="IBM Bluemix" href="http://www.ibm.com/cloud-computing/bluemix/" target="_blank">IBM Bluemix</a></li> <li><a title="Cloud Foundry" href="https://www.cloudfoundry.org/about/index.html" target="_blank">Cloud Foundry</a></li> <li><a title="Docker" href="https://www.docker.com/" target="_blank">Docker</a></li> <li><a title="Openstack" href="http://www.openstack.org/" target="_blank">Openstack</a></li> <li><a title="IBM SDK for Node.js" href="http://www.ibm.com/developerworks/web/nodesdk/" target="_blank">IBM SDK for Node.js</a></li> <li><a title="IBM Monitoring and Diagnostic Tools - Health Center" href="http://www.ibm.com/developerworks/java/jdk/tools/healthcenter/" target="_blank">IBM Monitoring and Diagnostic Tools - Health Center</a></li> </ul></div> <div class="K2FeedIntroText"><p>En esta publicación describiremos los pasos para realizar el despliegue de una aplicación <b>Node.js</b> en <b>IBM Bluemix</b> utilizado <b>Cloud Foundry CLI</b>, para quienes no estén familiarizados con <b>IBM Bluemix</b> haremos una breve introducción a los conceptos mas relevantes de su servicio Paas.</p> </div><div class="K2FeedFullText"> <h3>IBM Bluemix</h3> <p style="margin-bottom: 0px; margin-top: 10px;"><b>IBM Bluemix</b> es una plataforma en la nube basada en estándares abiertos para la construcción, ejecución y gestión de aplicaciones. Con <b>IBM Bluemix</b> los desarrolladores pueden despreocuparse de la infraestructura y enfocarse en la construcción de aplicaciones utilizando opciones flexibles de despliegue, herramientas centradas en DevOps, y un potente conjunto de APIs y servicios de IBM y de terceros.</p> <p style="margin-bottom: 0px; margin-top: 10px;"><b>IBM Bluemix</b> ofrece tres opciones de cómputo para el despliegue de aplicaciones:</p> <ol> <li>Cloud Foundry</li> <li>IBM Containers (Docker)</li> <li>Virtual Machines (Open Stack)</li> </ol> <center><img src="images/blog/94-bluemix-nodejs-hw/01_bluemix.png" alt="IBM Bluemix" width="600" height="277" /></center> <h4>Cloud Foundry</h4> <div class="autotoc" style="float:right;"><img src="images/blog/94-bluemix-nodejs-hw/02_logo_min_a_cf.png" alt="Cloud Foundry" width="80" height="80" /></div> <p style="margin-bottom: 0px; margin-top: 10px;">Estamos transitando la era de "la nube", en esta nueva era las plataformas para la ejecución de aplicaciones comienzan a ser entregadas <i>como servicio</i>, concepto que se conoce con el término <i>plataforma como servicio</i> o <b>PaaS</b> (del inglés <i>Platform as a Service</i>).</p> <p style="margin-bottom: 10px; margin-top: 10px;">PaaS hace que sea mucho más fácil implementar, ejecutar y escalar las aplicaciones. Mientras algunas ofertas de PaaS se limitan a determinados lenguajes, marcos de trabajo, o restringiendo el despliegue a una sola nube, <b>Cloud Foundry</b> es el estándar abierto para PaaS que permite elegir entre múltiples proveedores de nube, marcos de trabajo y servicios para la construcción de aplicaciones.</p> <p style="margin-bottom: 10px; margin-top: 10px;">Al ser un proyecto de código abierto, hay una gran comunidad contribuyendo y apoyando Cloud Foundry, entre ellas IBM. <b>IBM Bluemix</b> extiende Cloud Foundry con múltiples tiempos de ejecución (<i>runtimes</i>) y servicios administrados que junto a potentes herramientas empresariales de gestión y desarrollo (<i>DevOps</i>) permiten a los desarrolladores componer rápidamente sus aplicaciones sin preocuparse por la infraestructura subyacente.</p> <p style="margin-bottom: 10px; margin-top: 10px;">El valor que ofrece <b>IBM Bluemix</b> frente a otros proveedores de PaaS es el tipo de servicios que ofrece camo parte de su catálogo, en el mismo podremos encontrar desde un motor de reglas hasta servicios de comprensión del lenguaje basados en tecnología <b>IBM Watson</b>.</p> <p style="margin-bottom: 10px; margin-top: 10px;">En este artículo utilizaremos un <b>tiempo de ejecución Node.js</b> basado en Cloud Foundry para tener un primer contacto con el servicio PaaS de <b>IBM Bluemix</b>.</p> <h4>IBM Containers (Docker)</h4> <div class="autotoc" style="float:left;"><img src="images/blog/94-bluemix-nodejs-hw/02_logo_min_b_docker.png" alt="IBM Containers (Docker)" width="80" height="80" /></div> <p style="margin-bottom: 0px; margin-top: 10px;">Una máquina virtual (<i>VM</i>) es una implementación a nivel de software de un entorno físico de hardware. Las máquinas virtuales se utilizan para ejecutar aplicaciones y sistemas operativos completos "dentro" de un hardware virtualizado que es proporcionado por un hipervisor. El hipervisor es el software que separa la máquina virtual del equipo físico y es responsable de asignar los recursos según sea necesario.</p> <p style="margin-bottom: 10px; margin-top: 10px;">Cada contenedor es una plataforma de aplicaciones segura cuya ejecución se realiza de manera aislada como un proceso independiente en el sistema operativo del equipo que ejecuta el contenedor. Las aplicaciones incluidas en contenedores pueden ejecutarse en cualquier lugar: estaciones de trabajo de desarrollo corriendo Windows, servidores que ejecutan Ubuntu, o en las VMs de un centro de datos productivo corriendo Red Hat.</p> <p style="margin-bottom: 10px; margin-top: 10px;"><b>Docker</b> es una tecnología de código abierto para la virtualización de contenedores combinada con un flujo de trabajo que facilita la contenerización de aplicaciones. Los contenedores de IBM (<i>IBM Containers</i>) permiten ejecutar contenedores Docker alojados en la nube de <b>IBM Bluemix</b> facilitando de esta forma la tarea de escalar las aplicaciones en respuesta a un cambio en la demanda.</p> <h4>Virtual Machines (Open Stack)</h4> <div style="float:right;"><img src="images/blog/94-bluemix-nodejs-hw/02_logo_min_c_open.png" alt="Virtual Machines (Open Stack)" width="80" height="80" /></div> <p style="margin-bottom: 0px; margin-top: 10px;">Los contenedores (containers) son objetos virtuales de software que incluyen todos los elementos que una aplicación necesita para funcionar. Un contenedor se crea a partir de una imagen la cual alberga y soporta una determinada aplicación. Cada imagen incluye sólo la aplicación que soporta y sus dependencias.</p> <p style="margin-bottom: 10px; margin-top: 10px;"><b>OpenStack</b> es un sistema operativo para la nube que controla grandes agrupaciones de recursos de computación, almacenamiento y redes dentro de un centro de datos, todo ello gestionado a través de un tablero que permiten a los administradores tener el control de toda la infraestructura mientras que delega la provisión de los recursos a los usuarios a través de una interface web.</p> <p style="margin-bottom: 10px; margin-top: 10px;"><b>IBM Bluemix</b> proporciona la infraestructura de máquinas virtuales de IBM como una característica que aun se encuentra en su fase de pruebas (beta). Se puede utilizar esta infraestructura para crear máquinas virtuales que se ejecutan en nubes basadas en OpenStack, dentro o fuera de <b>IBM Bluemix</b>.</p> <h3>Obtener una cuenta de IBM Bluemix</h3> <p style="margin-bottom: 10px; margin-top: 10px;">Para comenzar a probar las capacidades PaaS de <b>IBM Bluemix</b> será necesario contar con una cuenta, la misma se puede crear accediendo a la <a href="#referencias">página de <b>IBM Bluemix</b></a> y presionar <b>REGISTRARSE</b>.</p> <center><img src="images/blog/94-bluemix-nodejs-hw/03_signup.png" alt="Crear una cuenta de IBM Bluemix" width="500" height="272" /><br /><strong>Pantalla 1 - Crear una cuenta de IBM Bluemix</strong></center> <p style="margin-bottom: 10px; margin-top: 10px;">Si contamos con un IBM ID podremos utilizarlo para simplificar el proceso de registración, luego de completar los datos requeridos y completar el proceso tendremos que esperar el correo de aprobación de la cuenta para comenzar a utilizar <b>IBM Bluemix</b>.</p> <p style="margin-bottom: 10px; margin-top: 10px;">Con la creación de la cuenta accedemos a un mes sin cargo para probar los servicios de <b>IBM Bluemix</b> dentro de ciertos límites de recursos y procesamiento, luego del mes podremos utilizar 500 MB de memoria mensuales sin cargo para aplicaciones y contenedores, ademas de poder utilizar varios servicios con planes gratuitos.</p> <h3>Panel de control y conceptos de Cloud Foundry</h3> <p style="margin-bottom: 5px; margin-top: 10px;">Una vez que la cuenta de usuario fue aprobada poderemos iniciar sesión en <b>IBM Bluemix</b> y acceder a la consola.</p> <center><img src="images/blog/94-bluemix-nodejs-hw/04_console.png" alt="Consola de IBM Bluemix" width="600" height="309" /><br /><strong>Pantalla 2 - Consola de IBM Bluemix</strong></center> <p style="margin-bottom: 10px; margin-top: 10px;">Para comprender algunos de los aspectos de <b>IBM Bluemix</b> conviene repasar algunos conceptos de Cloud Foundry:</p> <ol> <li><b>Organización (ORG)</b>. Una organización es una cuenta de desarrollo que un individuo o múltiples colaboradores pueden poseer y utilizar. Todos los colaboradores acceder a una organización con sus cuentas de usuario. Los colaboradores dentro de una organización compartes recursos y la cuota asociada al plan de los mismos.</li> <li><b>Cuentas de usuario</b>. Una cuenta de usuario representa una persona individual en el contexto de una instalación de Cloud Foundry. Un usuario puede tener diferentes roles en diferentes espacios dentro de una organización, gobernando el nivel y el tipo de acceso que tienen dentro de los espacio.</li> <li><b>Espacios</b>. Toda aplicación y servicio tiene como alcance un espacio. Cada organización contiene al menos un espacio. Un espacio proporciona un conjunto de accesos de usuario a una ubicación compartida para el desarrollo, implementación y mantenimiento de aplicaciones. Los roles dentro de un espacio sólo aplican a ese espacio particular.</li> <li><b>Roles y Permisos</b>. Un usuario puede tener uno o más roles. La combinación de estos roles define la totalidad de los permisos que un usuario tiene en la organización y dentro de los espacios específicos dentro de la misma.</li> </ol> <h4>Crear un nuevo espacio para realizar pruebas</h4> <p style="margin-bottom: 5px; margin-top: 10px;">Crearemos un espacio dentro de la organización que nos asignó <b>IBM Bluemix</b> destinado a pruebas de concepto de Node.js, para ello presionaremos la acción <b>+ Crear un espacio</b>, especificaremos <b>node.js poc</b> como nombre del espacio y luego presionaremos <b>CREAR</b>.</p> <center><img src="images/blog/94-bluemix-nodejs-hw/05_space_a_new.png" alt="Crear un nuevo espacio dentro de IBM Bluemix" width="400" height="206" /><br /><strong>Pantalla 3 - Crear un nuevo espacio dentro de IBM Bluemix</strong></center> <p style="margin-bottom: 5px; margin-top: 10px;">Finalizado el proceso de creación podremos visualizar el nuevo espacio en la consola de <b>IBM Bluemix</b>.</p> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/05_space_b_console.png" alt="Visualización del nuevo espacio dentro de la consola" width="600" height="383" /><br /><strong>Pantalla 4 - Visualización del nuevo espacio dentro de la consola</strong></center> <h3>Crear una aplicación Node.js</h3> <p style="margin-bottom: 10px; margin-top: 10px;">Es el momento de crear una aplicación para desplegarla en <b>IBM Bluemix</b>, no es el objetivo del artículo profundizar en el desarrollo de aplicaciones basadas en Node.js, por lo cual construiremos una aplicación muy simple que nos permita verificar el mecanismo de despliegue utilizando Cloud Foundry CLI.</p> <h4>Descargar e instalar IBM SDK for Node.js</h4> <p style="margin-bottom: 10px; margin-top: 10px;">Para el desarrollo y las pruebas de nuestra aplicación utilizaremos el <b>IBM SDK for Node.js</b>, podríamos utilizar el SDK estándar, sin embargo nos inclinamos por utilizar el SDK de IBM ya que permite monitorear las aplicaciones utilizando el software de monitoreo <i>IBM Monitoring and Diagnostic Tools - Health Center</i>.</p> <p style="margin-bottom: 5px; margin-top: 10px;">Dentro de la página del <b>IBM SDK for Node.js</b> es posible descargar el software para varias plataformas, incluido Mainframe!!, en nuestro caso seleccionamos Windows como plataforma.</p> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/06_sdk_a.png" alt="Acceso a página de descarga de IBM SDK for Node.js" width="600" height="504" /><br /><strong>Pantalla 5 - Acceso a página de descarga de IBM SDK for Node.js</strong></center> <p style="margin-bottom: 5px; margin-top: 10px;">Una vez que accedemos a la página de descarga tendremos que elegir la arquitectura de procesador, en nuestro caso descargamos la versión de 64 bits, una vez descargado, ejecutaremos el asistente que nos permitirá instalar el SDK en nuestro equipo local.</p> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/06_sdk_b.png" alt="Inicio del asistente de instalación de IBM SDK for Node.js" width="600" height="389" /><br /><strong>Pantalla 6 - Inicio del asistente de instalación de IBM SDK for Node.js</strong></center> <h4>Aplicación Hola mundo! en Node.js</h4> <p style="margin-bottom: 10px; margin-top: 10px;">El siguiente snipet contiene el código de nuestra aplicación Node.js, es muy simple, pero nos servirá para evaluar el mecanismo de despliegue de aplicaciones en <b>IBM Bluemix</b> utilizando Cloud Foundry CLI.</p> <pre class="brush:java">var http = require('http'); var port = 8080; var host = 'localhost'; var server = http.createServer(handleRequest).listen(port, host); console.log('Escuchando en el host: ' + host); console.log('Escuchando en el puerto: ' + port); function handleRequest(request, response) { //HTML - MAIN var pageMainTemplate = '&lt;html&gt' + '&lt;head&gt' + '&lt;meta http-equiv="Content-Type" ' + 'content="text/html; charset=UTF-8" /&gt' + '&lt;/head&gt' + '&lt;body&gt' + '&lt;h1&gtMG Developers - Node.js - Hola mundo!&lt;/h2&gt' + '&lt;/div&gt' + '&lt;/body&gt' + '&lt;/html&gt;'; response.writeHead(200, {'Content-Type': 'text/html'}); response.write(pageMainTemplate); response.end(); } </pre> <p style="margin-bottom: 5px; margin-top: 10px;">A continuación se muestra el comando ejecutado para probar la aplicación y el resultado obtenido al accederla desde un navegador de Internet.</p> <pre style="border: 1px dashed #cccccc; background-color: #ffff90; font-family: monospace; margin: 5px 0; padding: 8px 12px 8px 10px; font-size: 12px;">C:\_workspaces\node.js\poc.001>node server.js Escuchando en el host: localhost Escuchando en el puerto: 8080 </pre> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/07_hw.png" alt="Acceso a la aplicación Node.js de prueba" width="500" height="201" /><br /><strong>Pantalla 7 - Acceso a la aplicación Node.js de prueba</strong></center> <h4>Cambios a la aplicación para ser desplegada en IBM Bluemix</h4> <p style="margin-bottom: 10px; margin-top: 10px;">Cloud Foundry espera una archivo <b>package.json</b> comp parte de los archivos que componen una aplicación Node.js. En este archivo se pueden especificar varios valores de utilidad como la versión de Node.js que se desea utilizar, el nombre de la aplicación, la versión, el nombre del autor, las dependencias, etc. A continuación se muestra el contenido del archivo <b>package.json</b> que utilizaremos.</p> <pre class="brush:javascript">{ "name": "mgdevelopers-nodejs-poc-01", "version": "0.0.1", "description": "MG Developers - Poc 01 - Node.js", "dependencies": { }, "engines": { "node": "0.10.26" }, "repository": {} } </pre> <p style="margin-bottom: 10px; margin-top: 10px;">Es necesario utilizar la variable de entorno <b>VCAP_APP_PORT</b> y <b>VCAP_APP_HOST</b> para determinar en que dirección y en qué puerto la aplicación debe escuchar, es necesario tener en cuenta que estos valores dependen de la infraestructura subyacente. Será conveniente introducir los siguientes cambios en la aplicación para asignar a las variables <b>host</b> y <b>port</b> valores compatibles con nuestro entorno local y el de <b>IBM Bluemix</b>.</p> <pre class="brush:javascript">var http = require('http'); // Cambios en la inicialización de las variables var port = (process.env.VCAP_APP_PORT || 8080); var host = (process.env.VCAP_APP_HOST || 'localhost'); // Resto del código // .... </pre> <p style="margin-bottom: 10px; margin-top: 10px;">Por último, para facilitar el depsliegue, el nombre del archivo de nuestra aplicación debe ser <b>server.js</b>, de esta forma se puede utilizar el comando de inicialización pre definido y no será necesario especificarlo al momento de hacer el despliegue.</p> <h3>Desplegar la aplicación utilizando Cloud Foundry CLI</h3> <p style="margin-bottom: 10px; margin-top: 10px;">Para realizar el despliegue de nuestra aplicación en <b>IBM Bluemix</b> utilizaremos la interface de línea de comando (<i>CLI</i>) de Cloud Foundry.</p> <h4>Descargar e instalar Cloud Foundry CLI</h4> <p style="margin-bottom: 5px; margin-top: 10px;">De la página de descarga de Cloud Foundry CLI seleccionaremos el instalador estable para el sistema operativo con el cual estemos trabajando, en nuestro caso Windows de 64 bits.</p> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/08_cli_a.png" alt="Descarga de Cloud Foundry CLI" width="500" height="259" /><br /><strong>Pantalla 8 - Descarga de Cloud Foundry CLI</strong></center> <p style="margin-bottom: 5px; margin-top: 10px;">Luego será necesario ejecutar el asistente que nos permitirá instalar la interfaz de línea de comando en nuestro equipo local.</p> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/08_cli_b.png" alt="Inicio del asistente de instalación de Cloud Foundry CLI" width="500" height="388" /><br /><strong>Pantalla 9 - Inicio del asistente de instalación de Cloud Foundry CLI</strong></center> <h4>Iniciar sesión en IBM Bluemix en el espacio "node.js poc"</h4> <p style="margin-bottom: 10px; margin-top: 10px;">Antes de poder desplegar la aplicación será necesario ejecutar el siguiente comando para iniciar sesión, la url https://api.ng.bluemix.net es el <b>API End Point</b> de <b>IBM Bluemix</b>.</p> <pre style="border: 1px dashed #cccccc; background-color: #c6ff9b; font-family: monospace; margin: 5px 0; padding: 8px 12px 8px 10px; font-size: 12px;">cf login -a https://api.ng.bluemix.net</pre> <p style="margin-bottom: 10px; margin-top: 10px;">Luego de ejecutar el comando nos serán solicitadas las las credenciales utilizadas para acceder a <b>IBM Bluemix</b> y luego el espacio que utilizaremos, en nuestro caso <b>node.js poc</b>.</p> <pre style="border: 1px dashed #cccccc; background-color: #ffff90; font-family: monospace; margin: 5px 0; padding: 8px 12px 8px 10px; font-size: 12px;">C:\_jdevelopment\CloudFoundry>cf login -a https://api.ng.bluemix.net API endpoint: https://api.ng.bluemix.net Email> diego_mendoza Password> Authenticating... OK Targeted org diego_mendoza Select a space (or press enter to skip): 1. dev 2. node.js poc Space> 2 Targeted space node.js poc API endpoint: https://api.ng.bluemix.net (API version: 2.27.0) User: diego_mendoza@microgestion.com Org: diego_mendoza Space: node.js poc </pre> <h4>Desplegar la aplicación haciendo un push</h4> <p style="margin-bottom: 10px; margin-top: 10px;">Para desplegar el código será necesario estar ubicados en el directorio donde se encuentran los archivos <b>server.js</b> y <b>package.json</b>, y luego ejecutar el siguiente comando para desplegar el contenido del directorio en <b>IBM Bluemix</b>.</p> <pre style="border: 1px dashed #cccccc; background-color: #c6ff9b; font-family: monospace; margin: 5px 0; padding: 8px 12px 8px 10px; font-size: 12px;">cf push mgdevelopers-nodejs-poc-01 -m 64M -n mgdevelopers-nodejs-poc-01 -c null </pre> <p style="margin-bottom: 10px; margin-top: 10px;">Si todo funciona correctamente la ejecución debería arrojar un resultado similar al siguiente:</p> <pre style="border: 1px dashed #cccccc; background-color: #ffff90; font-family: monospace; margin: 5px 0; padding: 8px 12px 8px 10px; font-size: 12px;">C:\_workspaces\node.js\poc.001>cf push mgdevelopers-nodejs-poc-01 -m 64M -n mgdevelopers-nodejs-poc-01 -c null Creating app mgdevelopers-nodejs-poc-01 in org diego_mendoza / space node.js poc as diego_mendoza... OK Creating route mgdevelopers-nodejs-poc-01.mybluemix.net... OK Binding mgdevelopers-nodejs-poc-01.mybluemix.net to mgdevelopers-nodejs-poc-01... OK Uploading mgdevelopers-nodejs-poc-01... Uploading app files from: C:\_workspaces\node.js\poc.001 Uploading 1.2K, 2 files Done uploading OK Starting app mgdevelopers-nodejs-poc-01 in org diego_mendoza / space node.js poc as diego_mendoza... -----> Downloaded app package (4.0K) -----> IBM SDK for Node.js Buildpack v2.2-20150630-1721 Based on Cloud Foundry Node.js Buildpack v64 -----> Reading application state package.json... build directory... cache directory... environment variables... Node engine range: 0.10.26 Npm engine: unspecified Start mechanism: server.js node_modules source: package.json node_modules cached: false NPM_CONFIG_PRODUCTION=true NODE_MODULES_CACHE=true -----> Installing binaries Installing IBM SDK for Node.js (0.10.26) from cache Using default npm version: 1.4.3 -----> Checking and configuring service extensions before installing dependencies -----> Building dependencies Installing node modules npm WARN package.json mgdevelopers-nodejs-poc-01@0.0.1 No README data -----> Checking startup method No Procfile; Adding 'web: node server.js' to new Procfile -----> Checking and configuring service extensions after installing dependencies -----> Installing App Management -----> Building runtime environment -----> Finalizing build Creating runtime environment Cleaning previous cache Caching results for future builds -----> Build succeeded! mgdevelopers-nodejs-poc-01@0.0.1 /tmp/staged/app └── (empty) -----> Uploading droplet (8.3M) 0 of 1 instances running, 1 starting 1 of 1 instances running App started OK App mgdevelopers-nodejs-poc-01 was started using this command `./vendor/initial_startup.rb` Showing health and status for app mgdevelopers-nodejs-poc-01 in org diego_mendoza / space node.js poc as diego_mendoza.. . OK requested state: started instances: 1/1 usage: 64M x 1 instances urls: mgdevelopers-nodejs-poc-01.mybluemix.net last uploaded: Mon Jul 13 12:55:30 UTC 2015 stack: lucid64 buildpack: SDK for Node.js(TM) (ibm-node.js-0.10.26) state since cpu memory disk details #0 running 2015-07-13 09:56:14 AM 0.0% 16.6M of 64M 30.8M of 1G </pre> <h4>Visualización de la aplicación instalada en la consola de IBM Bluemix</h4> <p style="margin-bottom: 5px; margin-top: 10px;">Luego de instalar la aplicación podemos visualizar como han cambiado las cosas en la consola de <b>IBM Bluemix</b>.</p> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/09_consolea_a.png" alt="Visualización de la consola de IBM Bluemix con la aplicación desplegada" width="600" height="460" /><br /><strong>Pantalla 10 - Visualización de la consola de IBM Bluemix con la aplicación desplegada</strong></center> <p style="margin-bottom: 5px; margin-top: 10px;">Si accedemos al panel de control de la aplicación tendremos una visión mas detallada de sus características, estado y funcionamiento, en este panel se pueden modificar parámetros como la cantidad de instancias asignadas, la memoria asignada, etc.</p> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/09_consolea_b.png" alt="Panel de control de la aplicación Node.js" width="600" height="172" /><br /><strong>Pantalla 11 - Panel de control de la aplicación Node.js</strong></center> <h4>Prueba de la aplicación desplegada en IBM Bluemix</h4> <p style="margin-bottom: 5px; margin-top: 10px;">Estamos en condiciones de acceder a la aplicación a través de la url: <a href="http://mgdevelopers-nodejs-poc-01.mybluemix.net/">http://mgdevelopers-nodejs-poc-01.mybluemix.net/</a>.</p> <center style="margin-bottom: 10px;"><img src="images/blog/94-bluemix-nodejs-hw/10_hw.png" alt="Acceso a la aplicación Node.js desplegada en IBM Bluemix" width="500" height="201" /><br /><strong>Pantalla 12 - Acceso a la aplicación Node.js desplegada en IBM Bluemix</strong></center> <h3>Conclusiones</h3> <p style="margin-bottom: 5px; margin-top: 10px;">En este artículo introductorio se describieron los conceptos fundamentales necesarios para comenzar a utilizar el servicio PaaS de <b>IBM Bluemix</b>, conocer estos conceptos ayuda a comprender de que se trata esta "nube" y que servicios ofrece: Cloud Foundry, Docker y Openstack.</p> <p style="margin-bottom: 10px; margin-top: 10px;">Desde el punto de vista práctico se tuvo un primer contacto con la consola y se pudo verificar la facilidad con la que es posible desplegar una aplicación en <b>IBM Bluemix</b> utilizado la interfaz de línea de comando de Cloud Foundry.</p> <a name="referencias"></a> <h3>Referencias</h3> <ul style="margin-bottom: 5px; margin-top: 5px;"> <li><a title="IBM Bluemix" href="http://www.ibm.com/cloud-computing/bluemix/" target="_blank">IBM Bluemix</a></li> <li><a title="Cloud Foundry" href="https://www.cloudfoundry.org/about/index.html" target="_blank">Cloud Foundry</a></li> <li><a title="Docker" href="https://www.docker.com/" target="_blank">Docker</a></li> <li><a title="Openstack" href="http://www.openstack.org/" target="_blank">Openstack</a></li> <li><a title="IBM SDK for Node.js" href="http://www.ibm.com/developerworks/web/nodesdk/" target="_blank">IBM SDK for Node.js</a></li> <li><a title="IBM Monitoring and Diagnostic Tools - Health Center" href="http://www.ibm.com/developerworks/java/jdk/tools/healthcenter/" target="_blank">IBM Monitoring and Diagnostic Tools - Health Center</a></li> </ul></div> Creación de Librería de Funciones para DataCap 2015-06-02T12:46:33+00:00 2015-06-02T12:46:33+00:00 http://www.microgestion.com.ar/index.php/mg-developers/blog/92-datacap-custom-library Federico Luppi federico_luppi@microgestion.com <div class="K2FeedIntroText"><p>En el siguiente artículo se detalla cómo implementar una librería de funciones personalizadas para IBM DataCap, comenzando con la preparación del ambiente, continuando con el desarrollo en Visual Studio y terminando con el despliegue en el sistema donde se ejecuta el Taskmaster.&nbsp;</p> </div><div class="K2FeedFullText"> <h2>Introducción</h2> <p align="LEFT" style="margin-bottom: 0cm;">Al momento de implementar soluciones de digitalización utilizando IBM DataCap, nos encontramos con una cierta cantidad de funciones disponibles, definidas por las librerías del producto, que se adecuan a lo que necesitamos en gran medida. Sin embargo, hay veces que se requiere agregar un comportamiento específico durante el procesamiento de una imagen. Un ejemplo puede ser la invocación a un WebService para validar los datos de la imagen que se lee ante un sistema externo, o quizás algo más simple, como la transformación de uno de los datos. Para estos casos es posible desarrollar una librería con funciones personalizadas para luego ser utilizadas en DataCap. Esto es realizable utilizando un template provisto por IBM y trabajando con Visual Studio.</p> <h2>Paso 1: Preparación del Ambiente&nbsp;</h2> <p>Para poder desarrollar una librería compatible con DataCap, se requiere lo siguiente:<br />.- Visual Studio como IDE de desarrollo. En mi caso, utilizo Microsoft Visual C# 2010 Express. Es de uso libre y alcanza para lo que es necesario desarrollar.<br />.- Template de creación de Custom Actions. Se puede descargar desde el siguiente <a href="http://www.ibm.com/developerworks/apps/download/index.jsp?contentid=832522&amp;filename=TM-DDK-8.1-NET-ActionTemplates.zip&amp;method=http&amp;locale=">link</a>. El archivo comprimido que se descarga posee un PDF que explica cómo instalar los templates para que puedan ser utilizados en el Visual C#.</p> <p>Una vez con el ambiente preparado, crear un nuevo proyecto. En la ventana de Nuevo Proyecto, elegir el tipo "Datacap RRS 8.1 .NET 4.0 Action Library". <br /><img src="images/blog/91-DataCap-CustomLib/Imagen1.PNG" width="683" height="472" alt="Imagen1" /></p> <p>&nbsp;</p> <p>Automáticamente se abrira el archivo Actions.cs. En este archivo es donde se desarrollarán las funciones, pero primero, desde el explorador de la solución, abrir la carpeta que dice "References". Se podrá notar que hay varias referencias con un signo de exclamación, indicando que no se encuentra la librería. Esto ocurre cuando se desarrolla en un ambiente diferente a donde está instalado el Task Master de DataCap.<br /><img src="images/blog/91-DataCap-CustomLib/imagen2.PNG" width="315" height="203" alt="imagen2" /></p> <p>Para resolver esto, recomiendo obtener de los directorios donde está instalado DataCap (Generalmente están en: &lt;instalacion_DataCap&gt;\dcshared\NET) las dll que hacen falta y copiarlas en el equipo donde se está desarrollando. Luego haciendo boton derecho sobre la carpeta "References" &gt; "Add Reference", se abrirá una ventana, clickear el tab de "Browse" y seleccionar todas las dll en donde se hayan copiado.<br />Si se cuenta con una instalación de DataCap en el ambiente local, se puede agregar el path: "&lt;instalacion_DataCap&gt;\dcshared\NET" a las referencias.</p> <p>El siguiente problema que puede aparecer al referenciar las librerías es:<br /><img src="images/blog/91-DataCap-CustomLib/Imagen3.PNG" width="1304" height="286" alt="Imagen3" /></p> <p>Este Warning se da cuando el entorno de desarrollo es x64 y las librerías referenciadas son x86. En ese caso se puede seguir las instrucciones indicadas en el problema: Hacer click derecho en la solución &gt; Configuration Manager. En la ventana que se abre hacer click en el combo de la columna "Platform" (El que dice Any CPU), Elegir la opción "New..." y por ultimo en New Platform elegir x86.<br /><img src="images/blog/91-DataCap-CustomLib/imagen4.PNG" width="746" height="457" alt="imagen4" /></p> <p>&nbsp;<strong>&nbsp;</strong></p> <h2 align="LEFT" style="margin-bottom: 0cm;">Paso 2: Desarrollo de la Librería</h2> <h3>Archivo .rrx&nbsp;</h3> <p>Con el proyecto creado y con las librerías importadas, solo resta trabajar en la solución. Lo primero a tener en cuenta es el archivo .rrx ubicado en la carpeta "Resources". Debería llamarse &lt;NombreDelProyecto&gt;.rrx. Este archivo es donde se definirán las funciones que tendrá la librería y será el que DataCap leerá para mostrar las funciones disponibles desde DataCap Studio.</p> <p>Para este ejemplo, vamos a definir un metodo que recibirá el nombre de un campo a leer, obtendrá el valor de lo leido en el campo, lo procesará y almacenará el valor en otro campo, indicado también como parámetro. Entonces, el rrx debería verse así:&nbsp;</p> <p>&nbsp;</p> <pre class="brush:xml">&lt;rrx&gt; &lt;!-- === .NET === --&gt; &lt;!-- format: &lt;net ref="dotNETnamespace"&gt; --&gt; &lt;net ref="MGCustomLib.Actions"&gt; &lt;method name="calculateTaxes" qi="calcula los impuestos del precio"&gt; &lt;!-- Parametros --&gt; &lt;p name="fieldPrice" type="string" qi="Nombre del campo precio"&gt; &lt;p name="fieldTax" type="string" qi="Nombre del campo impuesto"&gt; &lt;/method&gt; &lt;/net&gt; &lt;/rrx&gt; </pre> <p>La propiedad <strong>qi</strong> es opcional y sirve a modo informativo en DataCap Studio para entender qué hace y qué requiere el método.</p> <h3>Actions.cs</h3> <p>Ya con el método definido en el rrx, se puede trabajar con la implementación del método en Actions.cs. Lo principal que hay que saber es que las funciones definidas para DataCap <span style="text-decoration: underline;">siempre</span> deben tener como tipo de retorno bool. El siguiente fragmento de código muestra la implementación del método "calculateTaxes":&nbsp;</p> <pre class="brush:xml" style="font-size: 10.8000001907349px; line-height: 16.2000007629395px;">public bool calculateTaxes(string fieldPrice, string fieldTax){ try{ string price = CurrentDCO.Parent().FindChild(fieldPrice).Text; double tax = (Convert.ToDouble(price) * 21) / 100; CurrentDCO.Parent().FindChild(fieldTax).Text = tax.toString(); return true; }catch(Exception e){ WriteLog("Exception ocurred: " + e.Message); return false; } } </pre> <p>Con <strong>CurrentDCO.Parent().FindChild(&lt;nombreCampo&gt;).Text</strong> obtenemos el valor de algún campo del documento digitalizado por DataCap y, como se ve, también se utiliza para asignarle un valor un campo. Si todo funcionó correctamente, se devuelve true. Si hubo una excepción, se retorna false. Si se precisa que el error se visualice en pantalla, se puede asignar el texto del error a otro campo (Por ejemplo, un campo destinado a mostrar mensajes de la ejecución).</p> <h2><strong></strong>Paso 3: Despliegue de la Librería&nbsp;</h2> <p><span style="line-height: 1.5em;">Terminado el desarrollo de la librería, queda hacer un build de la misma y luego desplegarla en el equipo donde se ejecuta el Taskmaster. Para empezar, hacer click derecho en el proyecto y elegir la opción properties. En la ventana nueva que se abre, elegir la opción de la izquierda "Build", luego buscar la sección "Output" y modificar el output path al directorio donde se quiera exportar el build.</span></p> <p><img src="images/blog/91-DataCap-CustomLib/imagen5.png" width="802" height="342" alt="imagen5" /></p> <p>Segundo, Hacer click derecho en el archivo rrx y elegir la opción propiedades. Ubicar la opción "Copy to Output Directory" y asignarle el valor "Copy Always". <br /><img src="images/blog/91-DataCap-CustomLib/imagen6.PNG" width="328" height="220" alt="imagen6" /></p> <p>Hacer build de la solución, navegar al directorio elegido como Output y copiar el archivo &lt;proyecto&gt;.dll y el rrx generado en la carpeta Resources.<br />Cerrar el Data Cap Studio, luego ingresar a &lt;DirectorioInstalacionDataCap&gt;/dcshared/NET y pegar &lt;proyecto&gt;.dll en dicho directorio. Luego, pegar <span style="line-height: 18px;">&lt;proyecto&gt;</span>.rrx en &lt;DirectorioInstalacionDataCap&gt;/RRS. Abrir un cmd y completar los siguientes pasos para registrar la dll:<br />1.- Navegar con cmd hasta C:\Windows\Microsoft.NET\Framework\&lt;versión 4 más reciente&gt;<br />2.- Ejecutar el siguiente comando: RegAsm.exe <br />&lt;DirectorioInstalacionDataCap&gt;/dcshared/NET/MGCustomLib.dll /codebase</p> <p>Hecho esto, iniciar nuevamente el DataCap Studio.&nbsp;</p> <h2>Invocación de la Función en DataCap</h2> <p>Una vez iniciado el servidor de DataCap, volver a abrir el DataCap Studio y abrir la aplicación que se está trabajando. Lo primero que hay que verificar es si DataCap lee correctamente la librería. Esto se puede comprobar verificando la solapa de "Actions Library". Allí, debe aparecer un nuevo item llamado como se nombró al proyecto y, si se expande el item, se podrá ver la funcion "calculateTaxes". Basta con agregar la invocación a la función en el ruleset como cualquier otra función para que DataCap la ejecute cuando se procese la imagen.</p> <p><span style="text-decoration: underline;">Nota</span>:&nbsp;En caso que no se pueda ver la librería en DataCap Studio, probar pegando la librería en &lt;DirectorioInstalacionDataCap&gt;/RRS.</p></div> <div class="K2FeedIntroText"><p>En el siguiente artículo se detalla cómo implementar una librería de funciones personalizadas para IBM DataCap, comenzando con la preparación del ambiente, continuando con el desarrollo en Visual Studio y terminando con el despliegue en el sistema donde se ejecuta el Taskmaster.&nbsp;</p> </div><div class="K2FeedFullText"> <h2>Introducción</h2> <p align="LEFT" style="margin-bottom: 0cm;">Al momento de implementar soluciones de digitalización utilizando IBM DataCap, nos encontramos con una cierta cantidad de funciones disponibles, definidas por las librerías del producto, que se adecuan a lo que necesitamos en gran medida. Sin embargo, hay veces que se requiere agregar un comportamiento específico durante el procesamiento de una imagen. Un ejemplo puede ser la invocación a un WebService para validar los datos de la imagen que se lee ante un sistema externo, o quizás algo más simple, como la transformación de uno de los datos. Para estos casos es posible desarrollar una librería con funciones personalizadas para luego ser utilizadas en DataCap. Esto es realizable utilizando un template provisto por IBM y trabajando con Visual Studio.</p> <h2>Paso 1: Preparación del Ambiente&nbsp;</h2> <p>Para poder desarrollar una librería compatible con DataCap, se requiere lo siguiente:<br />.- Visual Studio como IDE de desarrollo. En mi caso, utilizo Microsoft Visual C# 2010 Express. Es de uso libre y alcanza para lo que es necesario desarrollar.<br />.- Template de creación de Custom Actions. Se puede descargar desde el siguiente <a href="http://www.ibm.com/developerworks/apps/download/index.jsp?contentid=832522&amp;filename=TM-DDK-8.1-NET-ActionTemplates.zip&amp;method=http&amp;locale=">link</a>. El archivo comprimido que se descarga posee un PDF que explica cómo instalar los templates para que puedan ser utilizados en el Visual C#.</p> <p>Una vez con el ambiente preparado, crear un nuevo proyecto. En la ventana de Nuevo Proyecto, elegir el tipo "Datacap RRS 8.1 .NET 4.0 Action Library". <br /><img src="images/blog/91-DataCap-CustomLib/Imagen1.PNG" width="683" height="472" alt="Imagen1" /></p> <p>&nbsp;</p> <p>Automáticamente se abrira el archivo Actions.cs. En este archivo es donde se desarrollarán las funciones, pero primero, desde el explorador de la solución, abrir la carpeta que dice "References". Se podrá notar que hay varias referencias con un signo de exclamación, indicando que no se encuentra la librería. Esto ocurre cuando se desarrolla en un ambiente diferente a donde está instalado el Task Master de DataCap.<br /><img src="images/blog/91-DataCap-CustomLib/imagen2.PNG" width="315" height="203" alt="imagen2" /></p> <p>Para resolver esto, recomiendo obtener de los directorios donde está instalado DataCap (Generalmente están en: &lt;instalacion_DataCap&gt;\dcshared\NET) las dll que hacen falta y copiarlas en el equipo donde se está desarrollando. Luego haciendo boton derecho sobre la carpeta "References" &gt; "Add Reference", se abrirá una ventana, clickear el tab de "Browse" y seleccionar todas las dll en donde se hayan copiado.<br />Si se cuenta con una instalación de DataCap en el ambiente local, se puede agregar el path: "&lt;instalacion_DataCap&gt;\dcshared\NET" a las referencias.</p> <p>El siguiente problema que puede aparecer al referenciar las librerías es:<br /><img src="images/blog/91-DataCap-CustomLib/Imagen3.PNG" width="1304" height="286" alt="Imagen3" /></p> <p>Este Warning se da cuando el entorno de desarrollo es x64 y las librerías referenciadas son x86. En ese caso se puede seguir las instrucciones indicadas en el problema: Hacer click derecho en la solución &gt; Configuration Manager. En la ventana que se abre hacer click en el combo de la columna "Platform" (El que dice Any CPU), Elegir la opción "New..." y por ultimo en New Platform elegir x86.<br /><img src="images/blog/91-DataCap-CustomLib/imagen4.PNG" width="746" height="457" alt="imagen4" /></p> <p>&nbsp;<strong>&nbsp;</strong></p> <h2 align="LEFT" style="margin-bottom: 0cm;">Paso 2: Desarrollo de la Librería</h2> <h3>Archivo .rrx&nbsp;</h3> <p>Con el proyecto creado y con las librerías importadas, solo resta trabajar en la solución. Lo primero a tener en cuenta es el archivo .rrx ubicado en la carpeta "Resources". Debería llamarse &lt;NombreDelProyecto&gt;.rrx. Este archivo es donde se definirán las funciones que tendrá la librería y será el que DataCap leerá para mostrar las funciones disponibles desde DataCap Studio.</p> <p>Para este ejemplo, vamos a definir un metodo que recibirá el nombre de un campo a leer, obtendrá el valor de lo leido en el campo, lo procesará y almacenará el valor en otro campo, indicado también como parámetro. Entonces, el rrx debería verse así:&nbsp;</p> <p>&nbsp;</p> <pre class="brush:xml">&lt;rrx&gt; &lt;!-- === .NET === --&gt; &lt;!-- format: &lt;net ref="dotNETnamespace"&gt; --&gt; &lt;net ref="MGCustomLib.Actions"&gt; &lt;method name="calculateTaxes" qi="calcula los impuestos del precio"&gt; &lt;!-- Parametros --&gt; &lt;p name="fieldPrice" type="string" qi="Nombre del campo precio"&gt; &lt;p name="fieldTax" type="string" qi="Nombre del campo impuesto"&gt; &lt;/method&gt; &lt;/net&gt; &lt;/rrx&gt; </pre> <p>La propiedad <strong>qi</strong> es opcional y sirve a modo informativo en DataCap Studio para entender qué hace y qué requiere el método.</p> <h3>Actions.cs</h3> <p>Ya con el método definido en el rrx, se puede trabajar con la implementación del método en Actions.cs. Lo principal que hay que saber es que las funciones definidas para DataCap <span style="text-decoration: underline;">siempre</span> deben tener como tipo de retorno bool. El siguiente fragmento de código muestra la implementación del método "calculateTaxes":&nbsp;</p> <pre class="brush:xml" style="font-size: 10.8000001907349px; line-height: 16.2000007629395px;">public bool calculateTaxes(string fieldPrice, string fieldTax){ try{ string price = CurrentDCO.Parent().FindChild(fieldPrice).Text; double tax = (Convert.ToDouble(price) * 21) / 100; CurrentDCO.Parent().FindChild(fieldTax).Text = tax.toString(); return true; }catch(Exception e){ WriteLog("Exception ocurred: " + e.Message); return false; } } </pre> <p>Con <strong>CurrentDCO.Parent().FindChild(&lt;nombreCampo&gt;).Text</strong> obtenemos el valor de algún campo del documento digitalizado por DataCap y, como se ve, también se utiliza para asignarle un valor un campo. Si todo funcionó correctamente, se devuelve true. Si hubo una excepción, se retorna false. Si se precisa que el error se visualice en pantalla, se puede asignar el texto del error a otro campo (Por ejemplo, un campo destinado a mostrar mensajes de la ejecución).</p> <h2><strong></strong>Paso 3: Despliegue de la Librería&nbsp;</h2> <p><span style="line-height: 1.5em;">Terminado el desarrollo de la librería, queda hacer un build de la misma y luego desplegarla en el equipo donde se ejecuta el Taskmaster. Para empezar, hacer click derecho en el proyecto y elegir la opción properties. En la ventana nueva que se abre, elegir la opción de la izquierda "Build", luego buscar la sección "Output" y modificar el output path al directorio donde se quiera exportar el build.</span></p> <p><img src="images/blog/91-DataCap-CustomLib/imagen5.png" width="802" height="342" alt="imagen5" /></p> <p>Segundo, Hacer click derecho en el archivo rrx y elegir la opción propiedades. Ubicar la opción "Copy to Output Directory" y asignarle el valor "Copy Always". <br /><img src="images/blog/91-DataCap-CustomLib/imagen6.PNG" width="328" height="220" alt="imagen6" /></p> <p>Hacer build de la solución, navegar al directorio elegido como Output y copiar el archivo &lt;proyecto&gt;.dll y el rrx generado en la carpeta Resources.<br />Cerrar el Data Cap Studio, luego ingresar a &lt;DirectorioInstalacionDataCap&gt;/dcshared/NET y pegar &lt;proyecto&gt;.dll en dicho directorio. Luego, pegar <span style="line-height: 18px;">&lt;proyecto&gt;</span>.rrx en &lt;DirectorioInstalacionDataCap&gt;/RRS. Abrir un cmd y completar los siguientes pasos para registrar la dll:<br />1.- Navegar con cmd hasta C:\Windows\Microsoft.NET\Framework\&lt;versión 4 más reciente&gt;<br />2.- Ejecutar el siguiente comando: RegAsm.exe <br />&lt;DirectorioInstalacionDataCap&gt;/dcshared/NET/MGCustomLib.dll /codebase</p> <p>Hecho esto, iniciar nuevamente el DataCap Studio.&nbsp;</p> <h2>Invocación de la Función en DataCap</h2> <p>Una vez iniciado el servidor de DataCap, volver a abrir el DataCap Studio y abrir la aplicación que se está trabajando. Lo primero que hay que verificar es si DataCap lee correctamente la librería. Esto se puede comprobar verificando la solapa de "Actions Library". Allí, debe aparecer un nuevo item llamado como se nombró al proyecto y, si se expande el item, se podrá ver la funcion "calculateTaxes". Basta con agregar la invocación a la función en el ruleset como cualquier otra función para que DataCap la ejecute cuando se procese la imagen.</p> <p><span style="text-decoration: underline;">Nota</span>:&nbsp;En caso que no se pueda ver la librería en DataCap Studio, probar pegando la librería en &lt;DirectorioInstalacionDataCap&gt;/RRS.</p></div> Procesamiento de eventos de negocio con IBM ODM 2014-10-24T00:00:00+00:00 2014-10-24T00:00:00+00:00 http://www.microgestion.com.ar/index.php/proyectos/89-ibm-odm-bcp ad000250 info@microgestion.com <div class="K2FeedImage"><img src="http://www.microgestion.com/media/k2/items/cache/780149ddfa09fbd86eb140fe6810d770_S.jpg" alt="Procesamiento de eventos de negocio con IBM ODM" /></div><div class="K2FeedIntroText"><p><span style="line-height: 1.5em;"><span style="line-height: 18px;">{autotoc enabled=off}</span></span></p> <p>Proyecto de diseño y construcción de reglas en IBM Operational Decision Management (ODM) para el procesamiento de eventos de negocio.</p> </div><div class="K2FeedFullText"> <table cellspacing="0" cellpadding="0"> <tbody> <tr style="border-width: 1px; background-color: #30ca96;"> <td style="width: 30%;"> <p><span style="color: #ffffff;"><strong>A</strong></span><span style="color: #ffffff;"><strong>ÑO</strong></span></p> </td> <td><span style="color: #ffffff;"><strong>Tipo de Aplicación</strong></span></td> <td><span style="color: #ffffff;"><strong>Alcance Geográfico</strong></span></td> </tr> <tr> <td><strong>2014</strong></td> <td><strong>&nbsp;ODM</strong></td> <td><strong>Global</strong></td> </tr> </tbody> </table> <h2>Situación antes del proyecto</h2> <p>El cliente cuenta con un Panel de Control del Negocio que procesa y consolida información proveniente de diversas fuentes de datos. La información consolidada permite a los interesados visualizar el estado de los diferentes negocios en curso de la empresa.</p> <p><span style="font-size: 2em; font-weight: 600; line-height: normal;">Objetivos del proyecto</span></p> <p>Definir reglas que identifiquen situaciones de negocio en la información procesada por el Panel de Control del Negocio para que sean tratadas como alarmas, estas alarmas luego serán consumidas bajo un modelo de suscripción por los responsables e interesados en los diferentes negocios de la empresa.</p> <p>Se busca un marco flexible para la definición de reglas de negocio utilizando lenguaje natural y para el procesamiento de diferentes tipos de eventos provenientes de diversas fuentes de información.</p> <p><span style="font-size: 2em; font-weight: 600; line-height: normal;">Descripción</span></p> <p>Se diseñó una solución de procesamiento de eventos complejos (CEP) basada en IBM Operational Decision Management (ODM).</p> <p>La solución recibe a través de múltiples colas IBM WebSphere MQ los eventos de negocio que consume utilizando un conector JMS.</p> <p>La verbalización de los objetos de negocio permite la definición de reglas en lenguaje natural a través de la interfaz Web del centro de decisiones.</p> <p>Se confeccionó una guía de gobernabilidad para la gestión del ciclo de vida los proyectos de eventos dentro de la plataforma.</p> <p><span style="font-size: 2em; font-weight: 600; line-height: normal;">Beneficios</span></p> <ul> <li>Capacidad para el procesamiento de altos volúmenes de eventos</li> <li>Marco flexible para definición de reglas de negocio en lenguaje natural</li> <li>Evaluación de situaciones que requieren conocer el estado anterior de diferentes variables de negocio</li> </ul> <h2>Servicios ofrecidos</h2> <ul style="list-style-type: circle;"> <li>Modelado y desarrollo del proyecto de eventos (IBM ODM)</li> <li>Consultoría</li> </ul> <p>&nbsp;</p> <p><strong style="line-height: 1.5em;">Plataforma:</strong><span style="line-height: 1.5em;">&nbsp;IBM ODM 8.0.0, WebSphere MQ, Oracle Database</span><strong style="line-height: 1.5em;"><br /></strong> <strong style="line-height: 1.5em;">Desarrollo:</strong><span style="line-height: 1.5em;">&nbsp;IBM ODM - Event Desginer</span><strong style="line-height: 1.5em;"><br /></strong></p></div> <div class="K2FeedImage"><img src="http://www.microgestion.com/media/k2/items/cache/780149ddfa09fbd86eb140fe6810d770_S.jpg" alt="Procesamiento de eventos de negocio con IBM ODM" /></div><div class="K2FeedIntroText"><p><span style="line-height: 1.5em;"><span style="line-height: 18px;">{autotoc enabled=off}</span></span></p> <p>Proyecto de diseño y construcción de reglas en IBM Operational Decision Management (ODM) para el procesamiento de eventos de negocio.</p> </div><div class="K2FeedFullText"> <table cellspacing="0" cellpadding="0"> <tbody> <tr style="border-width: 1px; background-color: #30ca96;"> <td style="width: 30%;"> <p><span style="color: #ffffff;"><strong>A</strong></span><span style="color: #ffffff;"><strong>ÑO</strong></span></p> </td> <td><span style="color: #ffffff;"><strong>Tipo de Aplicación</strong></span></td> <td><span style="color: #ffffff;"><strong>Alcance Geográfico</strong></span></td> </tr> <tr> <td><strong>2014</strong></td> <td><strong>&nbsp;ODM</strong></td> <td><strong>Global</strong></td> </tr> </tbody> </table> <h2>Situación antes del proyecto</h2> <p>El cliente cuenta con un Panel de Control del Negocio que procesa y consolida información proveniente de diversas fuentes de datos. La información consolidada permite a los interesados visualizar el estado de los diferentes negocios en curso de la empresa.</p> <p><span style="font-size: 2em; font-weight: 600; line-height: normal;">Objetivos del proyecto</span></p> <p>Definir reglas que identifiquen situaciones de negocio en la información procesada por el Panel de Control del Negocio para que sean tratadas como alarmas, estas alarmas luego serán consumidas bajo un modelo de suscripción por los responsables e interesados en los diferentes negocios de la empresa.</p> <p>Se busca un marco flexible para la definición de reglas de negocio utilizando lenguaje natural y para el procesamiento de diferentes tipos de eventos provenientes de diversas fuentes de información.</p> <p><span style="font-size: 2em; font-weight: 600; line-height: normal;">Descripción</span></p> <p>Se diseñó una solución de procesamiento de eventos complejos (CEP) basada en IBM Operational Decision Management (ODM).</p> <p>La solución recibe a través de múltiples colas IBM WebSphere MQ los eventos de negocio que consume utilizando un conector JMS.</p> <p>La verbalización de los objetos de negocio permite la definición de reglas en lenguaje natural a través de la interfaz Web del centro de decisiones.</p> <p>Se confeccionó una guía de gobernabilidad para la gestión del ciclo de vida los proyectos de eventos dentro de la plataforma.</p> <p><span style="font-size: 2em; font-weight: 600; line-height: normal;">Beneficios</span></p> <ul> <li>Capacidad para el procesamiento de altos volúmenes de eventos</li> <li>Marco flexible para definición de reglas de negocio en lenguaje natural</li> <li>Evaluación de situaciones que requieren conocer el estado anterior de diferentes variables de negocio</li> </ul> <h2>Servicios ofrecidos</h2> <ul style="list-style-type: circle;"> <li>Modelado y desarrollo del proyecto de eventos (IBM ODM)</li> <li>Consultoría</li> </ul> <p>&nbsp;</p> <p><strong style="line-height: 1.5em;">Plataforma:</strong><span style="line-height: 1.5em;">&nbsp;IBM ODM 8.0.0, WebSphere MQ, Oracle Database</span><strong style="line-height: 1.5em;"><br /></strong> <strong style="line-height: 1.5em;">Desarrollo:</strong><span style="line-height: 1.5em;">&nbsp;IBM ODM - Event Desginer</span><strong style="line-height: 1.5em;"><br /></strong></p></div> Configuración HSQLDB "In Proccess Mode" en aplicación web con Spring + Hibernate. 2014-06-04T17:49:11+00:00 2014-06-04T17:49:11+00:00 http://www.microgestion.com.ar/index.php/mg-developers/blog/87-java-web-hsqldb-configuracion Federico Luppi federico_luppi@microgestion.com <div class="K2FeedIntroText"><p>Este artículo explica en dos simples pasos cómo configurar HSQLDB en modo "In process" en una aplicación web con Spring + Hibernate, leyendo un archivo SQL ubicado en el directorio de la aplicación para crear el modelo de datos necesario para la aplicación.</p> </div><div class="K2FeedFullText"> <h2>Introducción</h2> <p align="LEFT" style="margin-bottom: 0cm;"><span style="line-height: 1.5em;">HSQLDB nos ofrece una base de datos ligera y rápida que se basa en tablas manejadas en memoria y en disco que, además, puede ser embebida en una aplicación web para lograr una solución independiente de un servidor de base de datos externo, teniendo como ventajas transacciones más rápidas y seguras, simplificación del procedimiento de despligue y la posibilidad de realizar pruebas en local offline.</span></p> <p align="LEFT" style="margin-bottom: 0cm;"><span style="line-height: 1.5em;"></span><span style="line-height: 1.5em;">En este artículo, utilizaremos una clase java que será la encargada de crear la base de datos HSQLDB y las tablas (Si no fueron creadas) y, haciendo uso de spring, definiremos nuestra clase como un Bean con prioridad alta, de esta manera, la clase será inicializada antes que cualquier otro Bean. Por ultimo, configuraremos Spring e Hibernate para que la aplicación se conecte a la base de datos creada.&nbsp;</span></p> <p align="LEFT" style="margin-bottom: 0cm;">Se puede descargar HSQLDB desde <a href="http://hsqldb.org/">http://hsqldb.org/</a></p> <p align="LEFT" style="margin-bottom: 0cm;">Versiones pertinentes para este artículo:&nbsp;</p> <ul> <li align="LEFT" style="margin-bottom: 0cm;">hsqldb-2.3.2.jar</li> <li>sqltool.jar (Incluido al descargarse hsqldb)</li> <li>Spring 3.1.1.RELEASE</li> <li>Hibernate 4.1.9.FINAL<span style="line-height: 1.5em;">&nbsp;</span></li> </ul> <h2>Paso 1: HSQLDBSetup.java</h2> <p>Esta es la clase encargada de la creación del servidor de base de datos y creación de las tablas:</p> <pre class="brush:java">package com.myapp.hsqldb; import java.io.File; import java.io.IOException; import java.io.InputStream; import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java.util.Properties; import javax.annotation.PreDestroy; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import org.hsqldb.Server; import org.hsqldb.cmdline.SqlFile; import org.hsqldb.cmdline.SqlToolError; import org.springframework.core.Ordered; import org.springframework.core.annotation.Order; import org.springframework.stereotype.Component; /** * Clase de Setup de HSQLDB * @author Federico Luppi - http://www.microgestion.com */ @Component("HSQLDBSetup") @Order(value=Ordered.HIGHEST_PRECEDENCE) public class HSQLDBSetup { private final Log log = LogFactory.getLog(HSQLDBSetup.class); private Connection connection; private Server server; public HSQLDBSetup(){ this.init(); } /** * Inicializacion de HSQLDB */ public void init(){ this.loadProperties(); log.info("Starting HSQLDB..."); this.initializeServer(); try { Class.forName("org.hsqldb.jdbcDriver"); } catch (ClassNotFoundException e) { e.printStackTrace(System.out); } try { connection = DriverManager.getConnection("jdbc:hsqldb:hsql://localhost:1234/myDB","SA",""); if(!this.existsDataModel()){ this.createDataModel(); } } catch (SQLException e) { e.printStackTrace(System.out); } catch (IOException e) { e.printStackTrace(System.out); } catch (SqlToolError e) { e.printStackTrace(System.out); } } /** * Antes de destruir el Bean. Se detiene la base de datos. */ @PreDestroy public void destroy() { log.info("Stoping HSQLDB"); server.stop(); } /** * Instancia e inicia el servidor HSQLDB */ private void initializeServer(){ server = new Server(); server.setAddress("localhost"); server.setDatabaseName(0, "myDB"); server.setDatabasePath(0, "file:C:/HSQLDBs/db"); server.setPort(1234); server.setTrace(true); server.start(); } /** * Ejecuta los scripts de creación de la DB * @throws IOException * @throws SQLException * @throws SqlToolError */ private void createDataModel() throws IOException, SQLException, SqlToolError{ log.info("Creating Data Model."); SqlFile sqlFile; File file; file = new File(getClass().getResource("/properties/HSQLDB-DataModel.SQL").getPath()); if(!file.isFile()){ throw new IOException("SQL File not found in " + file.getAbsolutePath()); } sqlFile = new SqlFile(file); sqlFile.setConnection(connection); sqlFile.setContinueOnError(true); sqlFile.execute(); log.info("Successfully created data model."); } /** * Verifica si el modelo de datos ya esta creado o es necesario crearlo * @return true si esta creado el modelo de datos, en caso contrario, devuelve false */ private boolean existsDataModel(){ try{ log.info("Checking if data base model is created."); connection.createStatement().executeQuery("Select USERNAME from APPUSER"); log.info("Data model created."); return true; }catch(SQLException e){ log.info("Data model not created."); return false; } } } </pre> <h4 style="margin-bottom: 0cm;"><strong>A tener en cuenta</strong></h4> <p style="margin-bottom: 0cm;"><strong>@Component</strong> es una anotación de spring que nos servirá para que el framework se encargue de su instanciación como java bean.</p> <p style="margin-bottom: 0cm;"><strong style="line-height: 1.5em;">@Order(value=”Ordered.HIGHEST_PRECEDENCE”)</strong><span style="line-height: 1.5em;"> indicará a Spring que este bean tiene la más alta prioridad para instanciarse, entonces, será instanciado antes que cualquier otro bean que no tenga esta prioridad. (Por default, todos los beans tienen LOWEST_PRECEDENCE).</span>&nbsp;</p> <p align="LEFT" style="margin-bottom: 0cm;"><strong>@PreDestroy</strong> Spring ejecturará el método indicado con esta anotación antes de destruir el bean. Es importante apagar el servidor de la base de datos, en caso contrario el servidor de aplicaciones podría dejar de responder. &nbsp;&nbsp;</p> <p align="LEFT" style="margin-bottom: 0cm;"><strong>createDataModel()</strong></p> <p align="LEFT" style="margin-bottom: 0cm;">En este método se llevará a cabo la creación de las tablas de la base de datos. El método lee un archivo SQL de un paquete “properties” que está ubicado en el src de la aplicación y lo ejecuta. De esta manera no hace falta especificar un path a algún disco, sino que la aplicación contará siempre con el archivo SQL.&nbsp;</p> <p align="LEFT" style="margin-bottom: 0cm;"><span style="text-decoration: underline;">Nota</span>: Si el modelo de datos se exportó de otro motor de base de datos, tener en cuenta que puede no funcionar debido a cuestiones de compatibilidad con el lenguaje. En mi caso en particular, exporté el modelo de datos desde MySQL, y pude resolver los problemas de compatibilidad ejecutando el siguiente comando al principio del archivo SQL:&nbsp;</p> <p align="LEFT" style="margin-bottom: 0cm;"><strong><span face="Courier New, monospace" style="font-family: 'Courier New', monospace; font-size: small;"><span size="2"><span color="#7f0055" style="color: #7f0055;"><strong>SET</strong> </span><span color="#000000" style="color: #000000;"> DATABASE SQL SYNTAX MYS </span><span color="#4000c8" style="color: #4000c8;"><strong>TRUE</strong></span><span color="#000000" style="color: #000000;">;</span></span> </span> </strong>&nbsp;</p> <p><span style="line-height: 1.5em;"><span style="line-height: 18px;">En el siguiente link se encuentran los comandos de compatibilidad y otras opciones que se pueden ejecutar en HSQLDB:&nbsp;</span><a href="http://hsqldb.org/doc/guid/dbproperties-chapt.html" style="font-size: 12px; line-height: 18px;">http://hsqldb.org/doc/guid/dbproperties-chapt.html</a> </span></p> <h2 align="LEFT" style="margin-bottom: 0cm;">Paso 2: ApplicationContext.xml</h2> <p>En este xml se configurará el DataSourcer correspondiente a la conexión con HSQLDB y la configuración del SessionFactory de Hibernate.</p> <pre class="brush:xml"> &lt;bean id="dataSourceHSQL" class="org.apache.commons.dbcp.BasicDataSource"&gt; &lt;property name="driverClassName" value="org.hsqldb.jdbcDriver" /&gt; &lt;property name="url" value="jdbc:hsqldb:hsql://localhost:1234/myDB" /&gt; &lt;property name="username" value="SA" /&gt; &lt;property name="password" value="" /&gt; &lt;property name="initialSize" value="1" /&gt; &lt;property name="maxActive" value="5" /&gt; &lt;property name="poolPreparedStatements" value="true" /&gt; &lt;property name="maxOpenPreparedStatements" value="10" /&gt; &lt;/bean&gt; &lt;bean id="sessionFactory" class="org.springframework.orm.hibernate4.LocalSessionFactoryBean"&gt; &lt;property name="dataSource" ref="dataSourceHSQL /&gt; &lt;property name="configLocation" value="/WEB-INF/hibernate.cfg.xml"/&gt; &lt;property name="hibernateProperties"&gt; &lt;value&gt; hibernate.connection.autocommit=true hibernate.dialect=org.hibernate.dialect.HSQLDialect hibernate.cache.use_second_level_cache=false &lt;/value&gt; &lt;/property&gt; &lt;/bean&gt; </pre> <p>Completados estos pasos, hemos finalizado la configuración de la base de datos HSQLDB y de la aplicación web. Sólo resta iniciar la aplicación y ver como se crea la base de datos y la aplicación se conecta a ella.</p> <p>Se encuentra disponible para descargar la clase HSQLDBSetup.java</p></div> <div class="K2FeedIntroText"><p>Este artículo explica en dos simples pasos cómo configurar HSQLDB en modo "In process" en una aplicación web con Spring + Hibernate, leyendo un archivo SQL ubicado en el directorio de la aplicación para crear el modelo de datos necesario para la aplicación.</p> </div><div class="K2FeedFullText"> <h2>Introducción</h2> <p align="LEFT" style="margin-bottom: 0cm;"><span style="line-height: 1.5em;">HSQLDB nos ofrece una base de datos ligera y rápida que se basa en tablas manejadas en memoria y en disco que, además, puede ser embebida en una aplicación web para lograr una solución independiente de un servidor de base de datos externo, teniendo como ventajas transacciones más rápidas y seguras, simplificación del procedimiento de despligue y la posibilidad de realizar pruebas en local offline.</span></p> <p align="LEFT" style="margin-bottom: 0cm;"><span style="line-height: 1.5em;"></span><span style="line-height: 1.5em;">En este artículo, utilizaremos una clase java que será la encargada de crear la base de datos HSQLDB y las tablas (Si no fueron creadas) y, haciendo uso de spring, definiremos nuestra clase como un Bean con prioridad alta, de esta manera, la clase será inicializada antes que cualquier otro Bean. Por ultimo, configuraremos Spring e Hibernate para que la aplicación se conecte a la base de datos creada.&nbsp;</span></p> <p align="LEFT" style="margin-bottom: 0cm;">Se puede descargar HSQLDB desde <a href="http://hsqldb.org/">http://hsqldb.org/</a></p> <p align="LEFT" style="margin-bottom: 0cm;">Versiones pertinentes para este artículo:&nbsp;</p> <ul> <li align="LEFT" style="margin-bottom: 0cm;">hsqldb-2.3.2.jar</li> <li>sqltool.jar (Incluido al descargarse hsqldb)</li> <li>Spring 3.1.1.RELEASE</li> <li>Hibernate 4.1.9.FINAL<span style="line-height: 1.5em;">&nbsp;</span></li> </ul> <h2>Paso 1: HSQLDBSetup.java</h2> <p>Esta es la clase encargada de la creación del servidor de base de datos y creación de las tablas:</p> <pre class="brush:java">package com.myapp.hsqldb; import java.io.File; import java.io.IOException; import java.io.InputStream; import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java.util.Properties; import javax.annotation.PreDestroy; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import org.hsqldb.Server; import org.hsqldb.cmdline.SqlFile; import org.hsqldb.cmdline.SqlToolError; import org.springframework.core.Ordered; import org.springframework.core.annotation.Order; import org.springframework.stereotype.Component; /** * Clase de Setup de HSQLDB * @author Federico Luppi - http://www.microgestion.com */ @Component("HSQLDBSetup") @Order(value=Ordered.HIGHEST_PRECEDENCE) public class HSQLDBSetup { private final Log log = LogFactory.getLog(HSQLDBSetup.class); private Connection connection; private Server server; public HSQLDBSetup(){ this.init(); } /** * Inicializacion de HSQLDB */ public void init(){ this.loadProperties(); log.info("Starting HSQLDB..."); this.initializeServer(); try { Class.forName("org.hsqldb.jdbcDriver"); } catch (ClassNotFoundException e) { e.printStackTrace(System.out); } try { connection = DriverManager.getConnection("jdbc:hsqldb:hsql://localhost:1234/myDB","SA",""); if(!this.existsDataModel()){ this.createDataModel(); } } catch (SQLException e) { e.printStackTrace(System.out); } catch (IOException e) { e.printStackTrace(System.out); } catch (SqlToolError e) { e.printStackTrace(System.out); } } /** * Antes de destruir el Bean. Se detiene la base de datos. */ @PreDestroy public void destroy() { log.info("Stoping HSQLDB"); server.stop(); } /** * Instancia e inicia el servidor HSQLDB */ private void initializeServer(){ server = new Server(); server.setAddress("localhost"); server.setDatabaseName(0, "myDB"); server.setDatabasePath(0, "file:C:/HSQLDBs/db"); server.setPort(1234); server.setTrace(true); server.start(); } /** * Ejecuta los scripts de creación de la DB * @throws IOException * @throws SQLException * @throws SqlToolError */ private void createDataModel() throws IOException, SQLException, SqlToolError{ log.info("Creating Data Model."); SqlFile sqlFile; File file; file = new File(getClass().getResource("/properties/HSQLDB-DataModel.SQL").getPath()); if(!file.isFile()){ throw new IOException("SQL File not found in " + file.getAbsolutePath()); } sqlFile = new SqlFile(file); sqlFile.setConnection(connection); sqlFile.setContinueOnError(true); sqlFile.execute(); log.info("Successfully created data model."); } /** * Verifica si el modelo de datos ya esta creado o es necesario crearlo * @return true si esta creado el modelo de datos, en caso contrario, devuelve false */ private boolean existsDataModel(){ try{ log.info("Checking if data base model is created."); connection.createStatement().executeQuery("Select USERNAME from APPUSER"); log.info("Data model created."); return true; }catch(SQLException e){ log.info("Data model not created."); return false; } } } </pre> <h4 style="margin-bottom: 0cm;"><strong>A tener en cuenta</strong></h4> <p style="margin-bottom: 0cm;"><strong>@Component</strong> es una anotación de spring que nos servirá para que el framework se encargue de su instanciación como java bean.</p> <p style="margin-bottom: 0cm;"><strong style="line-height: 1.5em;">@Order(value=”Ordered.HIGHEST_PRECEDENCE”)</strong><span style="line-height: 1.5em;"> indicará a Spring que este bean tiene la más alta prioridad para instanciarse, entonces, será instanciado antes que cualquier otro bean que no tenga esta prioridad. (Por default, todos los beans tienen LOWEST_PRECEDENCE).</span>&nbsp;</p> <p align="LEFT" style="margin-bottom: 0cm;"><strong>@PreDestroy</strong> Spring ejecturará el método indicado con esta anotación antes de destruir el bean. Es importante apagar el servidor de la base de datos, en caso contrario el servidor de aplicaciones podría dejar de responder. &nbsp;&nbsp;</p> <p align="LEFT" style="margin-bottom: 0cm;"><strong>createDataModel()</strong></p> <p align="LEFT" style="margin-bottom: 0cm;">En este método se llevará a cabo la creación de las tablas de la base de datos. El método lee un archivo SQL de un paquete “properties” que está ubicado en el src de la aplicación y lo ejecuta. De esta manera no hace falta especificar un path a algún disco, sino que la aplicación contará siempre con el archivo SQL.&nbsp;</p> <p align="LEFT" style="margin-bottom: 0cm;"><span style="text-decoration: underline;">Nota</span>: Si el modelo de datos se exportó de otro motor de base de datos, tener en cuenta que puede no funcionar debido a cuestiones de compatibilidad con el lenguaje. En mi caso en particular, exporté el modelo de datos desde MySQL, y pude resolver los problemas de compatibilidad ejecutando el siguiente comando al principio del archivo SQL:&nbsp;</p> <p align="LEFT" style="margin-bottom: 0cm;"><strong><span face="Courier New, monospace" style="font-family: 'Courier New', monospace; font-size: small;"><span size="2"><span color="#7f0055" style="color: #7f0055;"><strong>SET</strong> </span><span color="#000000" style="color: #000000;"> DATABASE SQL SYNTAX MYS </span><span color="#4000c8" style="color: #4000c8;"><strong>TRUE</strong></span><span color="#000000" style="color: #000000;">;</span></span> </span> </strong>&nbsp;</p> <p><span style="line-height: 1.5em;"><span style="line-height: 18px;">En el siguiente link se encuentran los comandos de compatibilidad y otras opciones que se pueden ejecutar en HSQLDB:&nbsp;</span><a href="http://hsqldb.org/doc/guid/dbproperties-chapt.html" style="font-size: 12px; line-height: 18px;">http://hsqldb.org/doc/guid/dbproperties-chapt.html</a> </span></p> <h2 align="LEFT" style="margin-bottom: 0cm;">Paso 2: ApplicationContext.xml</h2> <p>En este xml se configurará el DataSourcer correspondiente a la conexión con HSQLDB y la configuración del SessionFactory de Hibernate.</p> <pre class="brush:xml"> &lt;bean id="dataSourceHSQL" class="org.apache.commons.dbcp.BasicDataSource"&gt; &lt;property name="driverClassName" value="org.hsqldb.jdbcDriver" /&gt; &lt;property name="url" value="jdbc:hsqldb:hsql://localhost:1234/myDB" /&gt; &lt;property name="username" value="SA" /&gt; &lt;property name="password" value="" /&gt; &lt;property name="initialSize" value="1" /&gt; &lt;property name="maxActive" value="5" /&gt; &lt;property name="poolPreparedStatements" value="true" /&gt; &lt;property name="maxOpenPreparedStatements" value="10" /&gt; &lt;/bean&gt; &lt;bean id="sessionFactory" class="org.springframework.orm.hibernate4.LocalSessionFactoryBean"&gt; &lt;property name="dataSource" ref="dataSourceHSQL /&gt; &lt;property name="configLocation" value="/WEB-INF/hibernate.cfg.xml"/&gt; &lt;property name="hibernateProperties"&gt; &lt;value&gt; hibernate.connection.autocommit=true hibernate.dialect=org.hibernate.dialect.HSQLDialect hibernate.cache.use_second_level_cache=false &lt;/value&gt; &lt;/property&gt; &lt;/bean&gt; </pre> <p>Completados estos pasos, hemos finalizado la configuración de la base de datos HSQLDB y de la aplicación web. Sólo resta iniciar la aplicación y ver como se crea la base de datos y la aplicación se conecta a ella.</p> <p>Se encuentra disponible para descargar la clase HSQLDBSetup.java</p></div> Experiencia de usuario en supermercados: el diseño de kioscos de consulta 2014-04-28T20:37:37+00:00 2014-04-28T20:37:37+00:00 http://www.microgestion.com.ar/index.php/mg-developers/blog/86-ux-kioskos-sup María de los Ángeles Mendoza mendozaangeles@gmail.com <div class="K2FeedIntroText"><p><span style="line-height: 18px;">¿Qué podemos hacer para que nuestros clientes se pongan en contacto con lo que queremos que compren?</span></p> </div><div class="K2FeedFullText"> <h3>Introducción</h3> <p style="margin-bottom: 5px; margin-top: 5px;">Son numerosas las alternativas de acuerdo al canal de comunicación que elijamos, pero cuando se trata de punto de venta, los dispositivos digitales vienen ganando terreno en la carrera por alcanzar mayor interacción con clientes cada vez más familiarizados -y demandantes- de respuestas a medida satisfactorias. <img src="images/logo/mgd_ux_t_short.png" width="250" height="125" alt="mgd ux t short" style="float: right;" /> Si observamos a nuestro alrededor rápidamente identificaremos pantallas interactivas conocidas como kioscos de consulta que ofrecen diferentes tipos de información y vienen poblando las antesalas de centros de atención, pasillos de centros de compras y supermercados, incluso los andenes del subterráneo público.</p> <p style="margin-bottom: 5px; margin-top: 10px;">Ahora bien, si decidimos seguir esta moda que llegó para quedarse y nos aseguramos que la tecnología elegida para nuestros kioscos será rápida y adaptable… ¿podemos estar seguros de haber alcanzado el éxito? ¿Qué beneficio representa para nuestro negocio la inversión en los kioscos de consulta?</p> <p style="margin-bottom: 5px; margin-top: 10px;">Seguramente quienes ingresen al salón de venta y vean el nuevo dispositivo, percibirán con agrado nuestra disposición al cambio y a la modernización, pero si solo consideramos la inversión en tecnología correremos el riesgo de que al usar el kiosco nuestro posible comprador no encuentre lo que queremos ofrecerle y que por causa de esta frustración acabe percibiéndolo como inútil.</p> <p style="margin-bottom: 5px; margin-top: 10px;">Es oportuno preguntarnos entonces qué características debe tener un kiosco de consultas para considerarlo exitoso y estemos en condiciones de evitar que se conviertan en modernos “aparatos maceta”, lindos de ver y pasar de largo frente a ellos.</p> <p style="margin-bottom: 5px; margin-top: 10px;">Dedicaremos las siguientes líneas para mostrar que los proyectos que articulan Tecnología + Diseño Centrado en el Usuario son imprescindible si pretendemos que la inversión en Kioscos de consulta agregue valor a la experiencia de compra de nuestros clientes</p> <h3>Camino al éxito</h3> <p style="margin-bottom: 5px; margin-top: 5px;">Un kiosco de consulta es exitoso si los clientes los utilizan cada vez que vuelven a ingresar al supermercado. Es importante saber que esto sólo sucederá si pueden encontrar de forma rápida y fácil aquello que buscan y las novedades que queremos ofrecerles. <b>Para que un kiosco sea exitoso es imprescindible hacerlo amigable y útil para quienes lo consulten.</b></p> <p style="margin-bottom: 5px; margin-top: 10px;">Los requerimientos tecnológicos deben ir a la par de las consideraciones acerca de la información, su organización y los caminos para que el usuario llegue a su encuentro. Para lograr que las consultas a nuestro kiosco se conviertan en una sana costumbre, <b>es imprescindible que conozcamos las preferencias de nuestros clientes y las consideremos desde las primeras etapas del desarrollo del software.</b></p> <p style="margin-bottom: 5px; margin-top: 10px;">Para satisfacer a los clientes ya no es suficiente la exhibición de productos identificados correctamente en las góndolas y promocionados con publicidades. El siguiente caso nos permitirá comprender que los kioscos de consulta son una solución oportuna y adaptable a múltiples circunstancias en las que necesitamos que el usuario se entere, encuentre y -en consecuencia- pueda comprar aquello que necesitamos venderle.</p> <h4>El caso del acuerdo de Precios Cuidados en Arentina</h4> <p style="margin-bottom: 5px; margin-top: 10px;">El lanzamiento oficial del acuerdo de Precios Cuidados en Argentina como respuesta a la situación inflacionaria, es sin dudas uno de los últimos desafíos que las cadenas de supermercados de este país vienen experimentando en lo que respecta a la comunicación con los compradores en el espacio de venta.</p> <p style="margin-bottom: 5px; margin-top: 10px;">Las cadenas de supermercados que firmaron el acuerdo se disputan el público que busca los productos con Precios Cuidados, exhibirlos en las góndolas dispersas por todo el local no es suficiente para que quienes ingresan al supermercado terminen comprándolo.</p> <p style="margin-bottom: 5px; margin-top: 10px;">Las primeras etapas de implementación pusieron en evidencia los desajustes de comunicación entre la oferta y la demanda de aquellos productos comercializados con precio bajo garantizado. Los medios masivos y las redes sociales se hicieron eco de la frustración que los clientes experimentaban ya sea porque recorrían las góndolas sin encontrar los productos que buscaban o porque les llevaba mucho tiempo darse cuenta cuáles eran los productos y dónde estaban ubicados.</p> <p style="margin-bottom: 5px; margin-top: 10px;">Las primeras respuestas no se hicieron esperar y se incorporaron carteles indicadores con un logo distintivo para facilitar la visualización y distinción de productos. Esta iniciativa fue acompañada tanto por un sitio web oficial con la nómina de productos como por publicaciones en papel distribuidas en los puntos de venta. Una vez que el potencial comprador entraba al supermercado, faltaba que lo recorriera para encontrar -vaya a saber dónde-, los productos que buscaba.</p> <p style="margin-bottom: 5px; margin-top: 10px;">En este escenario que acabamos de describir, los kioscos de consulta son una excelente oportunidad para garantizar que el cliente tome contacto con el producto que busca y que lo haga en forma rápida y autónoma de acuerdo a sus necesidades sin tener que estudiar las hojas con publicidad que recibió al ingresar al local no verse obligado a preguntar “donde está este atún” mientras señala una hojita entre sus manos.</p> <p style="margin-bottom: 5px; margin-top: 10px;"><b>Si nuestros usuarios encuentran satisfactoria la primera experiencia de uso de los kioscos de consulta, los seguirán utilizando después de que haya pasado el boom de la novedad</b>. Dicha satisfacción es posible solo si los usuarios experimentan el mayor beneficio luego de realizar el menor esfuerzo posible. Nuestros clientes nos dicen “ok, yo puedo elegir comprar en este supermercado pero a cambio de que no me hagas pensar!!!”.</p> <h3>Tecnología útil para sus usuarios finales (reales)</h3> <p style="margin-bottom: 5px; margin-top: 5px;"><i>No me hagas pensar…</i> es la principal demanda de los clientes y una de las máximas del diseño de interfaces centrado en la experiencia de usuario (UX). <b>Los usuarios actuales prefieren encontrar lo que buscan y enterarse de lo que les ofrecemos a cambio del menor esfuerzo posible.</b></p> <p style="margin-bottom: 5px; margin-top: 10px;"> Para que la experiencia del usuario durante la consulta a los Kioscos resulte satisfactoria tenemos que diseñar los contenidos -y la interacción con los mismos-, teniendo en cuenta las necesidades y costumbres de quienes van a utilizarlo Por eso necesitamos conocer cómo piensan y qué expectativas tienen.. En este punto es imprescindible que <b>evitemos confundir las necesidades reales de los clientes con las ideas que formulemos acerca de dichas necesidades.</b></p> <p style="margin-bottom: 5px; margin-top: 10px;">Si queremos tener en cuenta a nuestros clientes, no es suficiente con que pensemos en ellos sino que tenemos que escuchar lo que tienen para decirnos, preguntarles, observarlos… Es decir, incluirlos en el proceso de desarrollo tanto del contenido como de la interacción que propone el software, de modo tal <b>que el diseño final resulte adecuado a sus costumbres y necesidades reales.</b></p> <p style="margin-bottom: 5px; margin-top: 10px;">La tecnología puede ponernos en la vanguardia de las formas de comunicación preferidas por nuestros clientes, sin embargo el medio no es el mensaje! sino su contenido tanto su organización como el camino a recorrer para llegar a él. Estas consideraciones habilitan múltiples interrogantes acerca de la información que tiene que comunicar nuestro Kiosco de consulta. Siguiendo el caso desarrollado sobre Precios Cuidados, algunas preguntas serían:</p> <ul> <li>¿Tiene que informar la existencia de productos? su ubicación? la manera de llegar a ellos?</li> <li>¿A qué información le damos prioridad?… a las ofertas, a los Precios Cuidados, o los productos de temporada?</li> <li>Una vez elegido el tipo de información…. ¿Qué jerarquía conviene que los contenidos guarden entre ellos?</li> </ul> <p style="margin-bottom: 5px; margin-top: 10px;">Una vez resueltas estas preguntas, seguramente surjan otros interrogantes:</p> <ul> <li>¿Cuánta información conviene que se ofrezca al usuario?</li> <li>¿Cuánto tiempo dedicará el usuario a consultar información? ¿Cuánto tiempo es conveniente?</li> </ul> <p style="margin-bottom: 5px; margin-top: 10px;">La respuesta general es: menos es más. La respuesta particular en cada proyecto en particular es: <b>NO SABEMOS qué contenidos ni en qué secuencia conviene presentarlos hasta que investiguemos a los usuarios reales.</b></p> <h3>Algunas consideraciones finales</h3> <p style="margin-bottom: 5px; margin-top: 5px;">Independientemente del proyecto que estemos considerando, los usuarios siempre preferirán acceder a información pertinente en el menor tiempo posible. Por lo tanto los kioscos de consulta exitosos serán aquellos que permitan <b>que nuestros clientes se pongan en contacto con los productos que queremos venderle de un modo rápidamente comprensible.</b></p> <p style="margin-bottom: 5px; margin-top: 10px;">Precios cuidados, ofertas, productos de temporada, etc. etc…. nuestras necesidades de venta van cambiando de prioridades y con ella la experiencia de compra que queremos que atraviesen nuestros clientes. Asistimos a un cambio paradigmático en la comunicación con nuestro público y <b>los kioscos de consulta representan una solución a medida de los requerimientos actuales de los clientes a la hora de informarse.</b></p> <p style="margin-bottom: 5px; margin-top: 10px;"><b>El éxito de un kiosco es resultado tanto de un software flexible que permita adaptarse a las necesidades del negocio como de un diseño de contenidos y de interacción que se ajuste a las exigencias de nuestro público específico y que como tal requiere ser investigado en cada proyecto.</b></p> <br> <p style="margin-bottom: 5px; margin-top: 10px;">Esperamos que el artículo haya sido de su interés y provecho, cualquier consulta será bienvenida!</b></p> <p style="margin-bottom: 5px; margin-top: 10px;">Mi próximo artículo estará referido al UX y Diseño Centrado en el Usuario, será acerca de la siguiente premisa “Las empresas deciden la experiencia de sus clientes”.</p></div> <div class="K2FeedIntroText"><p><span style="line-height: 18px;">¿Qué podemos hacer para que nuestros clientes se pongan en contacto con lo que queremos que compren?</span></p> </div><div class="K2FeedFullText"> <h3>Introducción</h3> <p style="margin-bottom: 5px; margin-top: 5px;">Son numerosas las alternativas de acuerdo al canal de comunicación que elijamos, pero cuando se trata de punto de venta, los dispositivos digitales vienen ganando terreno en la carrera por alcanzar mayor interacción con clientes cada vez más familiarizados -y demandantes- de respuestas a medida satisfactorias. <img src="images/logo/mgd_ux_t_short.png" width="250" height="125" alt="mgd ux t short" style="float: right;" /> Si observamos a nuestro alrededor rápidamente identificaremos pantallas interactivas conocidas como kioscos de consulta que ofrecen diferentes tipos de información y vienen poblando las antesalas de centros de atención, pasillos de centros de compras y supermercados, incluso los andenes del subterráneo público.</p> <p style="margin-bottom: 5px; margin-top: 10px;">Ahora bien, si decidimos seguir esta moda que llegó para quedarse y nos aseguramos que la tecnología elegida para nuestros kioscos será rápida y adaptable… ¿podemos estar seguros de haber alcanzado el éxito? ¿Qué beneficio representa para nuestro negocio la inversión en los kioscos de consulta?</p> <p style="margin-bottom: 5px; margin-top: 10px;">Seguramente quienes ingresen al salón de venta y vean el nuevo dispositivo, percibirán con agrado nuestra disposición al cambio y a la modernización, pero si solo consideramos la inversión en tecnología correremos el riesgo de que al usar el kiosco nuestro posible comprador no encuentre lo que queremos ofrecerle y que por causa de esta frustración acabe percibiéndolo como inútil.</p> <p style="margin-bottom: 5px; margin-top: 10px;">Es oportuno preguntarnos entonces qué características debe tener un kiosco de consultas para considerarlo exitoso y estemos en condiciones de evitar que se conviertan en modernos “aparatos maceta”, lindos de ver y pasar de largo frente a ellos.</p> <p style="margin-bottom: 5px; margin-top: 10px;">Dedicaremos las siguientes líneas para mostrar que los proyectos que articulan Tecnología + Diseño Centrado en el Usuario son imprescindible si pretendemos que la inversión en Kioscos de consulta agregue valor a la experiencia de compra de nuestros clientes</p> <h3>Camino al éxito</h3> <p style="margin-bottom: 5px; margin-top: 5px;">Un kiosco de consulta es exitoso si los clientes los utilizan cada vez que vuelven a ingresar al supermercado. Es importante saber que esto sólo sucederá si pueden encontrar de forma rápida y fácil aquello que buscan y las novedades que queremos ofrecerles. <b>Para que un kiosco sea exitoso es imprescindible hacerlo amigable y útil para quienes lo consulten.</b></p> <p style="margin-bottom: 5px; margin-top: 10px;">Los requerimientos tecnológicos deben ir a la par de las consideraciones acerca de la información, su organización y los caminos para que el usuario llegue a su encuentro. Para lograr que las consultas a nuestro kiosco se conviertan en una sana costumbre, <b>es imprescindible que conozcamos las preferencias de nuestros clientes y las consideremos desde las primeras etapas del desarrollo del software.</b></p> <p style="margin-bottom: 5px; margin-top: 10px;">Para satisfacer a los clientes ya no es suficiente la exhibición de productos identificados correctamente en las góndolas y promocionados con publicidades. El siguiente caso nos permitirá comprender que los kioscos de consulta son una solución oportuna y adaptable a múltiples circunstancias en las que necesitamos que el usuario se entere, encuentre y -en consecuencia- pueda comprar aquello que necesitamos venderle.</p> <h4>El caso del acuerdo de Precios Cuidados en Arentina</h4> <p style="margin-bottom: 5px; margin-top: 10px;">El lanzamiento oficial del acuerdo de Precios Cuidados en Argentina como respuesta a la situación inflacionaria, es sin dudas uno de los últimos desafíos que las cadenas de supermercados de este país vienen experimentando en lo que respecta a la comunicación con los compradores en el espacio de venta.</p> <p style="margin-bottom: 5px; margin-top: 10px;">Las cadenas de supermercados que firmaron el acuerdo se disputan el público que busca los productos con Precios Cuidados, exhibirlos en las góndolas dispersas por todo el local no es suficiente para que quienes ingresan al supermercado terminen comprándolo.</p> <p style="margin-bottom: 5px; margin-top: 10px;">Las primeras etapas de implementación pusieron en evidencia los desajustes de comunicación entre la oferta y la demanda de aquellos productos comercializados con precio bajo garantizado. Los medios masivos y las redes sociales se hicieron eco de la frustración que los clientes experimentaban ya sea porque recorrían las góndolas sin encontrar los productos que buscaban o porque les llevaba mucho tiempo darse cuenta cuáles eran los productos y dónde estaban ubicados.</p> <p style="margin-bottom: 5px; margin-top: 10px;">Las primeras respuestas no se hicieron esperar y se incorporaron carteles indicadores con un logo distintivo para facilitar la visualización y distinción de productos. Esta iniciativa fue acompañada tanto por un sitio web oficial con la nómina de productos como por publicaciones en papel distribuidas en los puntos de venta. Una vez que el potencial comprador entraba al supermercado, faltaba que lo recorriera para encontrar -vaya a saber dónde-, los productos que buscaba.</p> <p style="margin-bottom: 5px; margin-top: 10px;">En este escenario que acabamos de describir, los kioscos de consulta son una excelente oportunidad para garantizar que el cliente tome contacto con el producto que busca y que lo haga en forma rápida y autónoma de acuerdo a sus necesidades sin tener que estudiar las hojas con publicidad que recibió al ingresar al local no verse obligado a preguntar “donde está este atún” mientras señala una hojita entre sus manos.</p> <p style="margin-bottom: 5px; margin-top: 10px;"><b>Si nuestros usuarios encuentran satisfactoria la primera experiencia de uso de los kioscos de consulta, los seguirán utilizando después de que haya pasado el boom de la novedad</b>. Dicha satisfacción es posible solo si los usuarios experimentan el mayor beneficio luego de realizar el menor esfuerzo posible. Nuestros clientes nos dicen “ok, yo puedo elegir comprar en este supermercado pero a cambio de que no me hagas pensar!!!”.</p> <h3>Tecnología útil para sus usuarios finales (reales)</h3> <p style="margin-bottom: 5px; margin-top: 5px;"><i>No me hagas pensar…</i> es la principal demanda de los clientes y una de las máximas del diseño de interfaces centrado en la experiencia de usuario (UX). <b>Los usuarios actuales prefieren encontrar lo que buscan y enterarse de lo que les ofrecemos a cambio del menor esfuerzo posible.</b></p> <p style="margin-bottom: 5px; margin-top: 10px;"> Para que la experiencia del usuario durante la consulta a los Kioscos resulte satisfactoria tenemos que diseñar los contenidos -y la interacción con los mismos-, teniendo en cuenta las necesidades y costumbres de quienes van a utilizarlo Por eso necesitamos conocer cómo piensan y qué expectativas tienen.. En este punto es imprescindible que <b>evitemos confundir las necesidades reales de los clientes con las ideas que formulemos acerca de dichas necesidades.</b></p> <p style="margin-bottom: 5px; margin-top: 10px;">Si queremos tener en cuenta a nuestros clientes, no es suficiente con que pensemos en ellos sino que tenemos que escuchar lo que tienen para decirnos, preguntarles, observarlos… Es decir, incluirlos en el proceso de desarrollo tanto del contenido como de la interacción que propone el software, de modo tal <b>que el diseño final resulte adecuado a sus costumbres y necesidades reales.</b></p> <p style="margin-bottom: 5px; margin-top: 10px;">La tecnología puede ponernos en la vanguardia de las formas de comunicación preferidas por nuestros clientes, sin embargo el medio no es el mensaje! sino su contenido tanto su organización como el camino a recorrer para llegar a él. Estas consideraciones habilitan múltiples interrogantes acerca de la información que tiene que comunicar nuestro Kiosco de consulta. Siguiendo el caso desarrollado sobre Precios Cuidados, algunas preguntas serían:</p> <ul> <li>¿Tiene que informar la existencia de productos? su ubicación? la manera de llegar a ellos?</li> <li>¿A qué información le damos prioridad?… a las ofertas, a los Precios Cuidados, o los productos de temporada?</li> <li>Una vez elegido el tipo de información…. ¿Qué jerarquía conviene que los contenidos guarden entre ellos?</li> </ul> <p style="margin-bottom: 5px; margin-top: 10px;">Una vez resueltas estas preguntas, seguramente surjan otros interrogantes:</p> <ul> <li>¿Cuánta información conviene que se ofrezca al usuario?</li> <li>¿Cuánto tiempo dedicará el usuario a consultar información? ¿Cuánto tiempo es conveniente?</li> </ul> <p style="margin-bottom: 5px; margin-top: 10px;">La respuesta general es: menos es más. La respuesta particular en cada proyecto en particular es: <b>NO SABEMOS qué contenidos ni en qué secuencia conviene presentarlos hasta que investiguemos a los usuarios reales.</b></p> <h3>Algunas consideraciones finales</h3> <p style="margin-bottom: 5px; margin-top: 5px;">Independientemente del proyecto que estemos considerando, los usuarios siempre preferirán acceder a información pertinente en el menor tiempo posible. Por lo tanto los kioscos de consulta exitosos serán aquellos que permitan <b>que nuestros clientes se pongan en contacto con los productos que queremos venderle de un modo rápidamente comprensible.</b></p> <p style="margin-bottom: 5px; margin-top: 10px;">Precios cuidados, ofertas, productos de temporada, etc. etc…. nuestras necesidades de venta van cambiando de prioridades y con ella la experiencia de compra que queremos que atraviesen nuestros clientes. Asistimos a un cambio paradigmático en la comunicación con nuestro público y <b>los kioscos de consulta representan una solución a medida de los requerimientos actuales de los clientes a la hora de informarse.</b></p> <p style="margin-bottom: 5px; margin-top: 10px;"><b>El éxito de un kiosco es resultado tanto de un software flexible que permita adaptarse a las necesidades del negocio como de un diseño de contenidos y de interacción que se ajuste a las exigencias de nuestro público específico y que como tal requiere ser investigado en cada proyecto.</b></p> <br> <p style="margin-bottom: 5px; margin-top: 10px;">Esperamos que el artículo haya sido de su interés y provecho, cualquier consulta será bienvenida!</b></p> <p style="margin-bottom: 5px; margin-top: 10px;">Mi próximo artículo estará referido al UX y Diseño Centrado en el Usuario, será acerca de la siguiente premisa “Las empresas deciden la experiencia de sus clientes”.</p></div> Creación de archivos de texto en ECM desde IBM BPM 2014-04-25T13:14:55+00:00 2014-04-25T13:14:55+00:00 http://www.microgestion.com.ar/index.php/mg-developers/blog/85-ibm-bpm-ecm-create-docs Federico Luppi federico_luppi@microgestion.com <div class="K2FeedIntroText"><p>Este artículo detalla cómo crear archivos de texto en IBM BPM y almacernarlos directamente en el ECM integrado con el proceso.</p> </div><div class="K2FeedFullText"> <h2>Introducción&nbsp;</h2> <p style="margin-bottom: 0cm;">Durante el desarrollo de un proceso BPM con integraciones con ECM, es posible que uno de los requerimientos sea, por ejemplo, que los archivos de bitácora de los procesos sean almacenados en el ECM. Para estos casos, CMIS ofrece una operación que sirve para cumplir con esta tarea.</p> <p style="margin-bottom: 0cm;">Para este caso en particular se trabajó con las siguientes herramientas:</p> <ul> <li style="margin-bottom: 0cm;">IBM BPM Standard v8.0.1.2</li> <li style="margin-bottom: 0cm;">Microsoft SharePoint</li> </ul> <h2>Creación del Integration Service "CMIS - Create WF Log"</h2> <p>Se creará un nuevo Integration Service, con la siguiente configuración:</p> <h3 style="margin-bottom: 0cm;"><strong>Variables</strong></h3> <p style="margin-bottom: 0cm;">Las variables del servicio involucradas son:</p> <ul> <li style="margin-bottom: 0cm;" class="_mce_tagged_br"><strong>fileContents</strong> (String) – Variable con el texto del archivo a almacenar.</li> <li style="margin-bottom: 0cm;" class="_mce_tagged_br"><strong>contentStream</strong> (ECMContentStream) – Utilizada en la creación del documento en el ECM</li> <li style="margin-bottom: 0cm;" class="_mce_tagged_br"><strong>fileName</strong> (String) – Nombre del archivo</li> <li style="margin-bottom: 0cm;"><strong>ecmProperties</strong>(List de ECMProperty) – Colección que servirá para indicar la metadata adicional que quiera cargarse para el documento.</li> </ul> <p style="margin-bottom: 0cm;"><img src="images/blog/83-BPM-ECM-DOCS/IS%20Variables.png" width="640" height="516" alt="IS Variables" /></p> <h3><strong>Diagrama</strong></h3> <p><img src="images/blog/83-BPM-ECM-DOCS/IS%20%20Diagram.png" width="640" height="324" alt="IS Diagram" /></p> <p><span style="line-height: 1.5em;">A continuación, se detallará cada una de las actividades involucradas:</span></p> <h4><span style="text-decoration: underline;">Set File Content</span>&nbsp;</h4> <p style="margin-bottom: 0cm;">En este Server Scriptlet, asociado a la variable privada fileContents, se armará el texto del archivo a almacenar en Sharepoint. En este ejemplo en particular, se utilizan diversas variables del objeto wfInstance, propio de la solución utilizada como modelo.&nbsp;El resultado del scriptlet es alojado en la variable fileContents, del tipo String. Este será el texto que tendrá el archivo.</p> <p style="margin-bottom: 0cm;"><img src="images/blog/83-BPM-ECM-DOCS/Set%20File%20Content.png" width="800" height="205" alt="Set File Content" /></p> <h4><span style="text-decoration: underline;">Set Up Properties</span>&nbsp;</h4> <p style="margin-bottom: 0cm;">La implementación del siguiente Server Script contendrá el setteo de las variables requeridas para el alta del documento en el ECM.</p> <h5 style="margin-bottom: 0cm;"><strong>fileName</strong>&nbsp;</h5> <p style="margin-bottom: 0cm;">Asignarle el nombre que poseerá el documento. En este ejemplo, el nombre del archivo corresponde a “WFLog_&lt;instanceID&gt;.txt"&nbsp;</p> <pre class="brush:java">tw.local.fileName = “WFLog_” + tw.system.currentProcessInstanceID.substring(tw.system.currentProcessInstanceID.indexOf(“.”)+1) + “.txt”;</pre> <p style="margin-bottom: 0cm;"><strong>contentStream</strong></p> <p style="margin-bottom: 0cm;">Para settear está variable, se debe incluir el siguiente bloque de código:&nbsp;</p> <pre class="brush:java">var bytesValue = new Packages.java.lang.String(tw.local.fileContents).getBytes(“UTF-8”); var content64 = Packages.org.apache.commons.codec.binary.Base64.encodeBase64(bytesValue); tw.local.contentStream = new tw.object.ECMContentStream(); tw.local.contentStream.contentLength = tw.local.fileContents.length; tw.local.contentStream.mimeType = “text/plain”; tw.local.contentStream.content = new Packages.java.lang.String(content64,”UTF-8”); </pre> <p><span id="_mce_caret" data-mce-bogus="true"><span style="font-size: x-small;"><strong>Nota</strong></span><span id="_mce_caret" data-mce-bogus="true"><span style="font-size: x-small;">: "UTF-8" puede cambiarse de acuerdo al encoding necesitado.</span></span> </span></p> <h5><span id="_mce_caret" data-mce-bogus="true"><strong>ecmProperties</strong></span></h5> <p style="margin-bottom: 0cm;">El siguiente bloque de código indica cómo deben crearse las propiedades a asignarle al archivo. Dichas propiedades refieren a la metadata configurada para el tipo de documento en el ECM. El orden en el que se popula la colección de propiedades es indiferente.&nbsp;</p> <pre class="brush:java">tw.local.ecmProperties = new tw.object.listOf.ECMProperty(); tw.local.ecmProperties[0] = new tw.object.ECMProperty(); tw.local.ecmProperties[0].objectTypeId = “WFName”; //Nombre de la propiedad tw.local.ecmProperties[0].value = tw.local.wfInstance.wfDescription.name; </pre> <h4><span style="text-decoration: underline; font-size: 1.2em; font-weight: 600; line-height: normal;">Create Document</span></h4> <p style="margin-bottom: 0cm;">El ultimo paso es crear el archivo en el ECM utilizando una actividad de <strong>Content Integration</strong>.</p> <p style="margin-bottom: 0cm;">En <strong>implementation</strong> se selecciona el Server al que conectarse. (La información del servidor se configura en “Process App Settings”, solapa “Servers”). Además, debe seleccionarse la operación “Create document”.</p> <p style="margin-bottom: 0cm;"><img src="images/blog/83-BPM-ECM-DOCS/Create%20Document%20-%20implementation.png" width="800" height="89" alt="Create Document - implementation" /></p> <p style="margin-bottom: 0cm;">En<strong> Data Mapping</strong>, se completarán las siguientes variables de entrada:&nbsp;</p> <ul> <li style="margin-bottom: 0cm;"><strong>Object type ID</strong>: String indicando el tipo de documento, para este ejemplo se utiliza el default de Sharepoint: “cmis:document”</li> <li style="margin-bottom: 0cm;"><span style="line-height: 1.5em;"><strong>Folder ID</strong>: ID de la carpeta donde almacenar el archivo. En SharePoint, el ID de la carpeta raíz del repositorio es “-1”.</span></li> <li style="margin-bottom: 0cm;"><span style="line-height: 1.5em;"><strong>Name</strong>: indicar tw.local.fileName</span></li> <li style="margin-bottom: 0cm;"><span style="line-height: 1.5em;"><strong>Content stream</strong>: indicar tw.local.contentStream</span></li> <li style="margin-bottom: 0cm;"><span style="line-height: 1.5em;"><strong>Properties</strong>: indicar tw.local.ecmProperties</span><span style="line-height: 1.5em;">&nbsp;</span></li> </ul> <p style="margin-bottom: 0cm;">Si se quisiera, podría asignarse el ID del documento creado en el ECM a una variable utilizando <strong>Document ID</strong> de la sección Output Mapping.</p> <p><span id="_mce_caret" data-mce-bogus="true"><img src="images/blog/83-BPM-ECM-DOCS/Create%20Document%20-data%20mapping.png" width="800" height="183" alt="Create Document -data mapping" /></span></p> <p><span style="line-height: 1.5em;">Completados estos pasos, el servicio está listo para ser invocado y dar de alta documentos de texto en el ECM.</span>&nbsp;</p> <h2>Troubleshooting</h2> <p>&nbsp;</p> <ol> <li> <p style="margin-bottom: 0cm;">“Quiero guardar el archivo en una carpeta que no sea la carpeta raíz. ¿Cómo averiguo el ID?”</p> <ol> <li> <p style="margin-bottom: 0cm;"><b>La solución que no involucra desarrollo es averiguar en el ECM el ID de la carpeta, siempre que sea la misma y asignarla a una variable de entorno.</b></p> </li> <li> <p style="margin-bottom: 0cm;"><b>Si, en cambio, la carpeta varía, se puede implementar un Integration Service en el cual se obtenga la carpeta en el ECM por su path (Get folder by path) y se devuelva el ID de la carpeta buscada.</b></p> </li> </ol></li> <li> <p style="margin-bottom: 0cm;">“El Servicio falla indicando que la propiedad 'x' no existe”</p> <ol> <li> <p style="margin-bottom: 0cm;"><b>En esos casos, es posible que el display name de la propiedad que quiere settearse es distinto a su objectTypeId. La solución es averiguar en el ECM cuál es su objectTypeId.&nbsp;</b></p> </li> </ol></li> </ol> <p>&nbsp;</p></div> <div class="K2FeedIntroText"><p>Este artículo detalla cómo crear archivos de texto en IBM BPM y almacernarlos directamente en el ECM integrado con el proceso.</p> </div><div class="K2FeedFullText"> <h2>Introducción&nbsp;</h2> <p style="margin-bottom: 0cm;">Durante el desarrollo de un proceso BPM con integraciones con ECM, es posible que uno de los requerimientos sea, por ejemplo, que los archivos de bitácora de los procesos sean almacenados en el ECM. Para estos casos, CMIS ofrece una operación que sirve para cumplir con esta tarea.</p> <p style="margin-bottom: 0cm;">Para este caso en particular se trabajó con las siguientes herramientas:</p> <ul> <li style="margin-bottom: 0cm;">IBM BPM Standard v8.0.1.2</li> <li style="margin-bottom: 0cm;">Microsoft SharePoint</li> </ul> <h2>Creación del Integration Service "CMIS - Create WF Log"</h2> <p>Se creará un nuevo Integration Service, con la siguiente configuración:</p> <h3 style="margin-bottom: 0cm;"><strong>Variables</strong></h3> <p style="margin-bottom: 0cm;">Las variables del servicio involucradas son:</p> <ul> <li style="margin-bottom: 0cm;" class="_mce_tagged_br"><strong>fileContents</strong> (String) – Variable con el texto del archivo a almacenar.</li> <li style="margin-bottom: 0cm;" class="_mce_tagged_br"><strong>contentStream</strong> (ECMContentStream) – Utilizada en la creación del documento en el ECM</li> <li style="margin-bottom: 0cm;" class="_mce_tagged_br"><strong>fileName</strong> (String) – Nombre del archivo</li> <li style="margin-bottom: 0cm;"><strong>ecmProperties</strong>(List de ECMProperty) – Colección que servirá para indicar la metadata adicional que quiera cargarse para el documento.</li> </ul> <p style="margin-bottom: 0cm;"><img src="images/blog/83-BPM-ECM-DOCS/IS%20Variables.png" width="640" height="516" alt="IS Variables" /></p> <h3><strong>Diagrama</strong></h3> <p><img src="images/blog/83-BPM-ECM-DOCS/IS%20%20Diagram.png" width="640" height="324" alt="IS Diagram" /></p> <p><span style="line-height: 1.5em;">A continuación, se detallará cada una de las actividades involucradas:</span></p> <h4><span style="text-decoration: underline;">Set File Content</span>&nbsp;</h4> <p style="margin-bottom: 0cm;">En este Server Scriptlet, asociado a la variable privada fileContents, se armará el texto del archivo a almacenar en Sharepoint. En este ejemplo en particular, se utilizan diversas variables del objeto wfInstance, propio de la solución utilizada como modelo.&nbsp;El resultado del scriptlet es alojado en la variable fileContents, del tipo String. Este será el texto que tendrá el archivo.</p> <p style="margin-bottom: 0cm;"><img src="images/blog/83-BPM-ECM-DOCS/Set%20File%20Content.png" width="800" height="205" alt="Set File Content" /></p> <h4><span style="text-decoration: underline;">Set Up Properties</span>&nbsp;</h4> <p style="margin-bottom: 0cm;">La implementación del siguiente Server Script contendrá el setteo de las variables requeridas para el alta del documento en el ECM.</p> <h5 style="margin-bottom: 0cm;"><strong>fileName</strong>&nbsp;</h5> <p style="margin-bottom: 0cm;">Asignarle el nombre que poseerá el documento. En este ejemplo, el nombre del archivo corresponde a “WFLog_&lt;instanceID&gt;.txt"&nbsp;</p> <pre class="brush:java">tw.local.fileName = “WFLog_” + tw.system.currentProcessInstanceID.substring(tw.system.currentProcessInstanceID.indexOf(“.”)+1) + “.txt”;</pre> <p style="margin-bottom: 0cm;"><strong>contentStream</strong></p> <p style="margin-bottom: 0cm;">Para settear está variable, se debe incluir el siguiente bloque de código:&nbsp;</p> <pre class="brush:java">var bytesValue = new Packages.java.lang.String(tw.local.fileContents).getBytes(“UTF-8”); var content64 = Packages.org.apache.commons.codec.binary.Base64.encodeBase64(bytesValue); tw.local.contentStream = new tw.object.ECMContentStream(); tw.local.contentStream.contentLength = tw.local.fileContents.length; tw.local.contentStream.mimeType = “text/plain”; tw.local.contentStream.content = new Packages.java.lang.String(content64,”UTF-8”); </pre> <p><span id="_mce_caret" data-mce-bogus="true"><span style="font-size: x-small;"><strong>Nota</strong></span><span id="_mce_caret" data-mce-bogus="true"><span style="font-size: x-small;">: "UTF-8" puede cambiarse de acuerdo al encoding necesitado.</span></span> </span></p> <h5><span id="_mce_caret" data-mce-bogus="true"><strong>ecmProperties</strong></span></h5> <p style="margin-bottom: 0cm;">El siguiente bloque de código indica cómo deben crearse las propiedades a asignarle al archivo. Dichas propiedades refieren a la metadata configurada para el tipo de documento en el ECM. El orden en el que se popula la colección de propiedades es indiferente.&nbsp;</p> <pre class="brush:java">tw.local.ecmProperties = new tw.object.listOf.ECMProperty(); tw.local.ecmProperties[0] = new tw.object.ECMProperty(); tw.local.ecmProperties[0].objectTypeId = “WFName”; //Nombre de la propiedad tw.local.ecmProperties[0].value = tw.local.wfInstance.wfDescription.name; </pre> <h4><span style="text-decoration: underline; font-size: 1.2em; font-weight: 600; line-height: normal;">Create Document</span></h4> <p style="margin-bottom: 0cm;">El ultimo paso es crear el archivo en el ECM utilizando una actividad de <strong>Content Integration</strong>.</p> <p style="margin-bottom: 0cm;">En <strong>implementation</strong> se selecciona el Server al que conectarse. (La información del servidor se configura en “Process App Settings”, solapa “Servers”). Además, debe seleccionarse la operación “Create document”.</p> <p style="margin-bottom: 0cm;"><img src="images/blog/83-BPM-ECM-DOCS/Create%20Document%20-%20implementation.png" width="800" height="89" alt="Create Document - implementation" /></p> <p style="margin-bottom: 0cm;">En<strong> Data Mapping</strong>, se completarán las siguientes variables de entrada:&nbsp;</p> <ul> <li style="margin-bottom: 0cm;"><strong>Object type ID</strong>: String indicando el tipo de documento, para este ejemplo se utiliza el default de Sharepoint: “cmis:document”</li> <li style="margin-bottom: 0cm;"><span style="line-height: 1.5em;"><strong>Folder ID</strong>: ID de la carpeta donde almacenar el archivo. En SharePoint, el ID de la carpeta raíz del repositorio es “-1”.</span></li> <li style="margin-bottom: 0cm;"><span style="line-height: 1.5em;"><strong>Name</strong>: indicar tw.local.fileName</span></li> <li style="margin-bottom: 0cm;"><span style="line-height: 1.5em;"><strong>Content stream</strong>: indicar tw.local.contentStream</span></li> <li style="margin-bottom: 0cm;"><span style="line-height: 1.5em;"><strong>Properties</strong>: indicar tw.local.ecmProperties</span><span style="line-height: 1.5em;">&nbsp;</span></li> </ul> <p style="margin-bottom: 0cm;">Si se quisiera, podría asignarse el ID del documento creado en el ECM a una variable utilizando <strong>Document ID</strong> de la sección Output Mapping.</p> <p><span id="_mce_caret" data-mce-bogus="true"><img src="images/blog/83-BPM-ECM-DOCS/Create%20Document%20-data%20mapping.png" width="800" height="183" alt="Create Document -data mapping" /></span></p> <p><span style="line-height: 1.5em;">Completados estos pasos, el servicio está listo para ser invocado y dar de alta documentos de texto en el ECM.</span>&nbsp;</p> <h2>Troubleshooting</h2> <p>&nbsp;</p> <ol> <li> <p style="margin-bottom: 0cm;">“Quiero guardar el archivo en una carpeta que no sea la carpeta raíz. ¿Cómo averiguo el ID?”</p> <ol> <li> <p style="margin-bottom: 0cm;"><b>La solución que no involucra desarrollo es averiguar en el ECM el ID de la carpeta, siempre que sea la misma y asignarla a una variable de entorno.</b></p> </li> <li> <p style="margin-bottom: 0cm;"><b>Si, en cambio, la carpeta varía, se puede implementar un Integration Service en el cual se obtenga la carpeta en el ECM por su path (Get folder by path) y se devuelva el ID de la carpeta buscada.</b></p> </li> </ol></li> <li> <p style="margin-bottom: 0cm;">“El Servicio falla indicando que la propiedad 'x' no existe”</p> <ol> <li> <p style="margin-bottom: 0cm;"><b>En esos casos, es posible que el display name de la propiedad que quiere settearse es distinto a su objectTypeId. La solución es averiguar en el ECM cuál es su objectTypeId.&nbsp;</b></p> </li> </ol></li> </ol> <p>&nbsp;</p></div> Newsletter - Edición de Abril 2014 2014-04-15T14:54:03+00:00 2014-04-15T14:54:03+00:00 http://www.microgestion.com.ar/index.php/newsletter/84-newsletter-04-2014 ad000250 info@microgestion.com <div class="K2FeedIntroText"></div><div class="K2FeedFullText"> <table align="left" style="border: 1px solid #a0a0a0; background-color: #ffffff; width: 650px;" bgcolor="#fff" cellspacing="0" cellpadding="0"> <tbody> <tr> <td> <table align="center" style="line-height: 12px; font-family: arial, helvetica, sans-serif; font-size: 12px; background-color: #ffffff; width: 650px;" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0"> <tbody> <tr> <td width="282" valign="top" style="color: #414042; line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <table align="center" style="line-height: 12px; font-family: arial, helvetica, sans-serif; font-size: 12px; background-color: #ffffff; width: 650px;" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0"> <tbody> <tr> <td width="30">&nbsp; <img width="1" height="1" style="display: block;" alt="" src="images/newsletter/default_spacer.gif" border="0" /></td> <td width="282"><br /> <a href="http://www.microgestion.com"> <img width="210" height="56" style="display: block;" alt="MicroGestion Software" src="http://www.microgestion.com/images/newsletter/default_logo.png" border="0" /> </a> </td> <td width="26">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282" align="right" valign="bottom" style="color: rgb(65, 64, 66); line-height: 20px; font-family: Arial,Helvetica,sans-serif; font-size: 18px; vertical-align: bottom;"> <strong>MicroGestion Newsletter</strong> <br /> <span style="font-size: 14px;"> <strong>Abril 2014</strong> </span> </td> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /> <br /></td> </tr> <tr> <td width="30" valign="top">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="590" colspan="3"> <hr size="1" style="color: rgb(160, 160, 160);" noshade="noshade" /> </td> <td width="30" valign="top">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <!-- top feature --> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282"> <br /> <span id="webinars" style="color: rgb(65, 64, 66); line-height: 28px; font-family: arial, helvetica, sans-serif; font-size: 22px;"> <strong>Novedades</strong> </span> <br /> <br /> </td> <td width="26">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282"> <span id="webinars" style="line-height: 24px; font-family: arial, helvetica, sans-serif; font-size: 22px;"> <strong> </strong> </span> </td> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282" valign="top" style="color: rgb(65, 64, 66); line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <span style="font-size: 14px;"> <strong>MicroGestion inicia Proyecto ECM en importante compañía del segmento retail en Argentina</strong> </span> <br />MicroGestion cierra un acuerdo con una importante compañía del segmento de retail para implementar una solución para la gestión de documentos del área administrativa. <br />Con este proyecto, el cliente mejorará el proceso de ingreso de información proveniente del papel, reduciendo drásticamente el ingreso manual de la información proveniente de los documentos. <br /> <span style="font-size: 14px;"> <br /> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/empresa/noticias/83-mg-ibm-ecm-carr">Leer Más »</a> </span> <br /> <br /></td> <td width="26">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282" valign="top" style="line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/empresa/noticias/83-mg-ibm-ecm-carr"> <img width="282" height="252" style="display: block; border:none;" alt="MicroGestion inicia Proyecto ECM en importante compañía del segmento retail en Argentina" src="http://www.microgestion.com/images/newsletter/201401/201401-mg-ecm-thin.jpg" /> </a> </td> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <!-- /top feature --> <tr> <td width="30" valign="top">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="590" colspan="3"> <hr size="1" style="color: rgb(160, 160, 160);" noshade="noshade" /> </td> <td width="30" valign="top">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282"> <br /> <span id="webinars" style="color: rgb(65, 64, 66); line-height: 28px; font-family: arial, helvetica, sans-serif; font-size: 22px;"> <strong>Publicaciones Destacadas</strong> </span> <br /> <br /> </td> <td width="26">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282"> <span id="webinars" style="line-height: 24px; font-family: arial, helvetica, sans-serif; font-size: 22px;"> <strong> </strong> </span> </td> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282" valign="top" style="color: rgb(65, 64, 66); line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <span style="font-size: 14px;"><strong>UX - Recomendaciones para mejorar la experiencia de usuario</strong></span> <br />En esta serie de publicaciones se explican diferentes tips para mejorar la experiencia del usuario al utilizar una aplicación web: Comunicación análoga, AJAX, Navegación de la aplicación, Facilidades de uso, Tipos y tamaños de letras y Diseño de formularios. <br /> <span style="font-size: 14px;"> <br /> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/75-ux-reco-parte-1">Parte 1 »</a> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/76-ux-reco-parte-2">Parte 2 »</a> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/81-ux-reco-parte-3">Parte 3 »</a> </span> <br /> <br /></td> <td width="26">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282" valign="top" style="line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/75-ux-reco-parte-1"> <img width="282" height="200" style="display: block; border:none;" alt="UX" src="http://www.microgestion.com/images/newsletter/201404/201404-ux.jpg" /> </a> </td> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /> </td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="590" colspan="3"> <hr size="0.5" style="color: rgb(240, 240, 240);" noshade="noshade" /> </td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282" valign="top" style="color: rgb(65, 64, 66); line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <p> <br /> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/articulos/74-unit-test-part1-mock"> <img width="282" height="195" style="display: block; border:none;" alt="Pruebas Unitarias" src="http://www.microgestion.com/images/newsletter/201404/201404-mock.jpg" /> </a> </p> </td> <td width="26">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282" valign="top" style="color: rgb(65, 64, 66); line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <p> <br /> <span style="font-size: 14px;"> <strong>Pruebas Unitarias - Introducción y utilización de objetos simulados (Mock)</strong> </span> <br />La primera parte de esta serie de artículos realiza una introducción a las Pruebas Unitarias, repasa sus características y ventajas, para finalizar con la descripción de los diferentes tipos de objetos mock y la forma de utilizarlos en diferentes escenarios.</p> <span style="font-size: 14px;"> <br /> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/articulos/74-unit-test-part1-mock">Leer Más »</a> </span> <br /> <br /> </td> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="590" colspan="3"> <hr size="1" style="color: rgb(160, 160, 160);" noshade="noshade" /> </td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282"> <br /> <span id="webinars" style="color: rgb(65, 64, 66); line-height: 24px; font-family: arial, helvetica, sans-serif; font-size: 22px;"> <strong>Últimas Publicaciones</strong> </span> <br /> <br /> <br /> </td> <td width="26">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282"></td> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282" valign="top" style="color: rgb(65, 64, 66); line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <span style="line-height: 20px; font-size: 16px;"> <strong>Blog</strong> </span> <p> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/82-ibm-bpm-ecm-doc-list">IBM BPM Y ECM - Personalización del componente 'Document List' »</a> </p> <p> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/73-ibm-bpm-sp-cursor">Implementación de llamada a Stored Procedure con retorno de cursor en IBM BPM »</a> </p> <p> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/71-pres-patrones-diseno">Presentación: Introducción a patrones de diseño »</a> </p> <br /> <br /> </td> <td width="26"> <p> <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /> </p> </td> <td width="282" valign="top" style="color: rgb(65, 64, 66); line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <span style="line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 16px;"> <strong> </strong> </span> <p> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/80-iib-test-win">IBM Integration Bus 9.0 - Instalación paso A paso de un ambiente de laboratorio sobre windows »</a> </p> <p> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/78-instalacion-db2-rhel">Guía rápida de instalación en modo consola de IBM DB2 10.5 para linux en RHEL 6.4 »</a> </p> </td> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="590" colspan="3"> <hr size="1" style="color: rgb(160, 160, 160);" noshade="noshade" /> </td> <td width="30" valign="top">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td colspan="2" width="308"> <br /> <span id="webinars" style="color: rgb(65, 64, 66); line-height: 24px; font-family: arial, helvetica, sans-serif; font-size: 22px;"> <strong>Nuestros Servicios</strong> </span> <br /> <br /> </td> <td width="282"></td> <td width="30" valign="top">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="540" valign="top" style="color: rgb(65, 64, 66); line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;" colspan="3"> <p> <strong>Desarrollo de Software</strong> <br />Construimos aplicaciones confiables a través de la utilización de las mejores prácticas de cada tecnología para brindar una experiencia positiva al usuario final. <br /> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/servicios/desarrollo-software">Conozca Más »</a></p> <p> <strong>Infraestructura de Software</strong> <br />Ofrecemos un amplio rango de servicios de infraestructura de software para ayudarlo en la implantación, el mantenimiento y la mejora de su plataforma tecnológica. <br /> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/servicios/infraestructura">Conozca Más »</a></p> <p> <strong>Consultoría</strong> <br />Brindamos asesoramiento a nuestros clientes en área como estrategia tecnológica, arquitectura de software y especificación funcional de aplicaciones. <br /> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/servicios/consultoria">Conozca Más »</a></p> </td> <td width="30" valign="top">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="590" align="left" colspan="3"> <p align="center" style="text-align: center; color: rgb(153, 153, 153); line-height: 1px; font-family: Arial, Helvetica, sans-serif; font-size: 1px; margin-top: 0px;"> <br /> </p> <br /> </td> <td width="30" valign="top"> <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td style="border-top-width: 1px; border-top-style: solid; border-top-color: #a0a0a0; padding: 0px; background-image: url('images/newsletter/default_footer.jpg');" height="84px"> <p align="left" style="text-align: left; color: #646464; line-height: 12px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-top: 4px; margin-bottom: 3px; margin-left: 12px;"><b>MicroGestion S.R.L.</b> <br />Avenida Belgrano 1370, Piso 8 <br />Buenos Aires, Argentina <br />(54-11) 4382-0878 <br />info@MicroGestion.com <br />http://www.microgestion.com</p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table></div> <div class="K2FeedIntroText"></div><div class="K2FeedFullText"> <table align="left" style="border: 1px solid #a0a0a0; background-color: #ffffff; width: 650px;" bgcolor="#fff" cellspacing="0" cellpadding="0"> <tbody> <tr> <td> <table align="center" style="line-height: 12px; font-family: arial, helvetica, sans-serif; font-size: 12px; background-color: #ffffff; width: 650px;" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0"> <tbody> <tr> <td width="282" valign="top" style="color: #414042; line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <table align="center" style="line-height: 12px; font-family: arial, helvetica, sans-serif; font-size: 12px; background-color: #ffffff; width: 650px;" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0"> <tbody> <tr> <td width="30">&nbsp; <img width="1" height="1" style="display: block;" alt="" src="images/newsletter/default_spacer.gif" border="0" /></td> <td width="282"><br /> <a href="http://www.microgestion.com"> <img width="210" height="56" style="display: block;" alt="MicroGestion Software" src="http://www.microgestion.com/images/newsletter/default_logo.png" border="0" /> </a> </td> <td width="26">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282" align="right" valign="bottom" style="color: rgb(65, 64, 66); line-height: 20px; font-family: Arial,Helvetica,sans-serif; font-size: 18px; vertical-align: bottom;"> <strong>MicroGestion Newsletter</strong> <br /> <span style="font-size: 14px;"> <strong>Abril 2014</strong> </span> </td> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /> <br /></td> </tr> <tr> <td width="30" valign="top">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="590" colspan="3"> <hr size="1" style="color: rgb(160, 160, 160);" noshade="noshade" /> </td> <td width="30" valign="top">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <!-- top feature --> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282"> <br /> <span id="webinars" style="color: rgb(65, 64, 66); line-height: 28px; font-family: arial, helvetica, sans-serif; font-size: 22px;"> <strong>Novedades</strong> </span> <br /> <br /> </td> <td width="26">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282"> <span id="webinars" style="line-height: 24px; font-family: arial, helvetica, sans-serif; font-size: 22px;"> <strong> </strong> </span> </td> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282" valign="top" style="color: rgb(65, 64, 66); line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <span style="font-size: 14px;"> <strong>MicroGestion inicia Proyecto ECM en importante compañía del segmento retail en Argentina</strong> </span> <br />MicroGestion cierra un acuerdo con una importante compañía del segmento de retail para implementar una solución para la gestión de documentos del área administrativa. <br />Con este proyecto, el cliente mejorará el proceso de ingreso de información proveniente del papel, reduciendo drásticamente el ingreso manual de la información proveniente de los documentos. <br /> <span style="font-size: 14px;"> <br /> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/empresa/noticias/83-mg-ibm-ecm-carr">Leer Más »</a> </span> <br /> <br /></td> <td width="26">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282" valign="top" style="line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/empresa/noticias/83-mg-ibm-ecm-carr"> <img width="282" height="252" style="display: block; border:none;" alt="MicroGestion inicia Proyecto ECM en importante compañía del segmento retail en Argentina" src="http://www.microgestion.com/images/newsletter/201401/201401-mg-ecm-thin.jpg" /> </a> </td> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <!-- /top feature --> <tr> <td width="30" valign="top">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="590" colspan="3"> <hr size="1" style="color: rgb(160, 160, 160);" noshade="noshade" /> </td> <td width="30" valign="top">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282"> <br /> <span id="webinars" style="color: rgb(65, 64, 66); line-height: 28px; font-family: arial, helvetica, sans-serif; font-size: 22px;"> <strong>Publicaciones Destacadas</strong> </span> <br /> <br /> </td> <td width="26">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282"> <span id="webinars" style="line-height: 24px; font-family: arial, helvetica, sans-serif; font-size: 22px;"> <strong> </strong> </span> </td> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282" valign="top" style="color: rgb(65, 64, 66); line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <span style="font-size: 14px;"><strong>UX - Recomendaciones para mejorar la experiencia de usuario</strong></span> <br />En esta serie de publicaciones se explican diferentes tips para mejorar la experiencia del usuario al utilizar una aplicación web: Comunicación análoga, AJAX, Navegación de la aplicación, Facilidades de uso, Tipos y tamaños de letras y Diseño de formularios. <br /> <span style="font-size: 14px;"> <br /> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/75-ux-reco-parte-1">Parte 1 »</a> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/76-ux-reco-parte-2">Parte 2 »</a> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/81-ux-reco-parte-3">Parte 3 »</a> </span> <br /> <br /></td> <td width="26">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282" valign="top" style="line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/75-ux-reco-parte-1"> <img width="282" height="200" style="display: block; border:none;" alt="UX" src="http://www.microgestion.com/images/newsletter/201404/201404-ux.jpg" /> </a> </td> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /> </td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="590" colspan="3"> <hr size="0.5" style="color: rgb(240, 240, 240);" noshade="noshade" /> </td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282" valign="top" style="color: rgb(65, 64, 66); line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <p> <br /> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/articulos/74-unit-test-part1-mock"> <img width="282" height="195" style="display: block; border:none;" alt="Pruebas Unitarias" src="http://www.microgestion.com/images/newsletter/201404/201404-mock.jpg" /> </a> </p> </td> <td width="26">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282" valign="top" style="color: rgb(65, 64, 66); line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <p> <br /> <span style="font-size: 14px;"> <strong>Pruebas Unitarias - Introducción y utilización de objetos simulados (Mock)</strong> </span> <br />La primera parte de esta serie de artículos realiza una introducción a las Pruebas Unitarias, repasa sus características y ventajas, para finalizar con la descripción de los diferentes tipos de objetos mock y la forma de utilizarlos en diferentes escenarios.</p> <span style="font-size: 14px;"> <br /> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/articulos/74-unit-test-part1-mock">Leer Más »</a> </span> <br /> <br /> </td> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="590" colspan="3"> <hr size="1" style="color: rgb(160, 160, 160);" noshade="noshade" /> </td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282"> <br /> <span id="webinars" style="color: rgb(65, 64, 66); line-height: 24px; font-family: arial, helvetica, sans-serif; font-size: 22px;"> <strong>Últimas Publicaciones</strong> </span> <br /> <br /> <br /> </td> <td width="26">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282"></td> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="282" valign="top" style="color: rgb(65, 64, 66); line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <span style="line-height: 20px; font-size: 16px;"> <strong>Blog</strong> </span> <p> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/82-ibm-bpm-ecm-doc-list">IBM BPM Y ECM - Personalización del componente 'Document List' »</a> </p> <p> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/73-ibm-bpm-sp-cursor">Implementación de llamada a Stored Procedure con retorno de cursor en IBM BPM »</a> </p> <p> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/71-pres-patrones-diseno">Presentación: Introducción a patrones de diseño »</a> </p> <br /> <br /> </td> <td width="26"> <p> <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /> </p> </td> <td width="282" valign="top" style="color: rgb(65, 64, 66); line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;"> <span style="line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 16px;"> <strong> </strong> </span> <p> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/80-iib-test-win">IBM Integration Bus 9.0 - Instalación paso A paso de un ambiente de laboratorio sobre windows »</a> </p> <p> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/mg-developers/blog/78-instalacion-db2-rhel">Guía rápida de instalación en modo consola de IBM DB2 10.5 para linux en RHEL 6.4 »</a> </p> </td> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="590" colspan="3"> <hr size="1" style="color: rgb(160, 160, 160);" noshade="noshade" /> </td> <td width="30" valign="top">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td colspan="2" width="308"> <br /> <span id="webinars" style="color: rgb(65, 64, 66); line-height: 24px; font-family: arial, helvetica, sans-serif; font-size: 22px;"> <strong>Nuestros Servicios</strong> </span> <br /> <br /> </td> <td width="282"></td> <td width="30" valign="top">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="540" valign="top" style="color: rgb(65, 64, 66); line-height: 20px; font-family: arial, helvetica, sans-serif; font-size: 12px;" colspan="3"> <p> <strong>Desarrollo de Software</strong> <br />Construimos aplicaciones confiables a través de la utilización de las mejores prácticas de cada tecnología para brindar una experiencia positiva al usuario final. <br /> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/servicios/desarrollo-software">Conozca Más »</a></p> <p> <strong>Infraestructura de Software</strong> <br />Ofrecemos un amplio rango de servicios de infraestructura de software para ayudarlo en la implantación, el mantenimiento y la mejora de su plataforma tecnológica. <br /> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/servicios/infraestructura">Conozca Más »</a></p> <p> <strong>Consultoría</strong> <br />Brindamos asesoramiento a nuestros clientes en área como estrategia tecnológica, arquitectura de software y especificación funcional de aplicaciones. <br /> <a style="color: rgb(20, 110, 180); text-decoration: none;" href="http://www.microgestion.com/index.php/servicios/consultoria">Conozca Más »</a></p> </td> <td width="30" valign="top">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> </tr> <tr> <td width="30">  <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /></td> <td width="590" align="left" colspan="3"> <p align="center" style="text-align: center; color: rgb(153, 153, 153); line-height: 1px; font-family: Arial, Helvetica, sans-serif; font-size: 1px; margin-top: 0px;"> <br /> </p> <br /> </td> <td width="30" valign="top"> <img width="1" height="1" style="display: block;" alt="" src="http://www.microgestion.com/images/newsletter/default_spacer.gif" border="0" /> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td style="border-top-width: 1px; border-top-style: solid; border-top-color: #a0a0a0; padding: 0px; background-image: url('images/newsletter/default_footer.jpg');" height="84px"> <p align="left" style="text-align: left; color: #646464; line-height: 12px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-top: 4px; margin-bottom: 3px; margin-left: 12px;"><b>MicroGestion S.R.L.</b> <br />Avenida Belgrano 1370, Piso 8 <br />Buenos Aires, Argentina <br />(54-11) 4382-0878 <br />info@MicroGestion.com <br />http://www.microgestion.com</p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table></div> IBM BPM y ECM - Personalización del componente 'Document List' 2014-04-04T00:00:00+00:00 2014-04-04T00:00:00+00:00 http://www.microgestion.com.ar/index.php/mg-developers/blog/82-ibm-bpm-ecm-doc-list Andrés Sommariva andres_sommariva@microgestion.com <div class="K2FeedIntroText"><p>Este artículo detalla como personalizar el componente 'Document List' que está incluido en el toolkit 'Content Management' y se utiliza para consultar, crear y actualizar documentos en el sistema de gestión de contenidos (Enterprise Content Management o ECM). El objetivo es simplificar la carga de propiedades del documento a través de la asignación de valores por defecto.</p> </div><div class="K2FeedFullText"> <h2>Introducción</h2> <p>Los procesos de negocio generalmente requieren que se maneje información no estructurada como documentos escaneados o imágenes. Para esto IBM BPM 8 (y versiones posteriores) incorpora una serie de componentes capaces de conectarse con gestores de contenido utilizando un estándar abierto llamado "Servicios de Interoperabilidad de Gestión de Contenidos" o en inglés "Content Management Interoperability Services (CMIS)".</p> <p>El componente principal a través del cual se lleva a cabo la conexión con el gestor de contenido es el <em>Document List</em>. Este componente se utiliza en <em>coaches</em> y presenta al usuario: a) una lista de documentos obtenidos del gestor de contenido, b) una lista de revisiones de dichos documentos si existieran, c) un diálogo modal para la creación y actualización de documentos. El componente requiere que se especifique un servicio de búsqueda en donde se aplican los criterios de selección de los documentos y, a su vez, este último requiere que exista una configuración de conexión con el gestor de contenido a nivel de aplicación de proceso.</p> <p>Para ver más información sobre como se lleva a cabo la configuración inicial de estos componentes se puede consultar el siguiente artículo: <a href="http://www.ibm.com/developerworks/bpm/bpmjournal/1212_ramos/1212_ramos.html">http://www.ibm.com/developerworks/bpm/bpmjournal/1212_ramos/1212_ramos.html</a></p> <p>Nosotros nos centraremos en el diálogo de creación y actualización de documentos. Por defecto, este diálogo presenta una sección con campos para que se completen los valores de todas aquellas propiedades que se hayan definido a nivel de gestor de contenido para el tipo de documento seleccionado. Podemos observarlo en la siguiente imagen:</p> <p><img src="images/blog/82-BPM-ECM/imagen1-dialogo.png" alt="Diálogo de alta y edición de documentos" width="589" height="336" /></p> <p>Este diálogo permite que el usuario que realiza la carga del documento complete estas propiedades, siendo algunas de ellas requeridas para poder completar la acción.</p> <p>Es muy común que varias de estas propiedades deban completarse por defecto con información relacionada al proceso, y por ello es que se cree conveniente contar con un mecanismo que permita simplificar el ingreso de datos que debe hacer el usuario.</p> <p>A continuación vamos a mostrar como llevar a cabo las modificaciones para que, durante la creación de un documento se pueda completar algunas o todas estas propiedades con información del proceso.</p> <h2>Paso 1 - Copiar el componente 'Document List'</h2> <p><span><span><span><span>Realizar la copia del componente incluido en el toolkit 'Content Management' a otro toolkit o a una aplicación de procesos.</span></span> </span> </span></p> <p><span><span><span><span>En nuestro caso nombraremos a esta copia del component como <em>Custom Document List</em>.</span></span> </span> </span></p> <h2>Paso 2 - Configuración de variables</h2> <p>Editaremos este nuevo componente para agregar una nueva variable a las opciones de configuración.</p> <p>En la solapa "Variables", dentro del panel "Variable Declarations" se debe hacer click en el signo + que se encuentra al costado de "Configuration Options".</p> <p><img src="images/blog/82-BPM-ECM/imagen2-variable.png" width="800" height="311" alt="Nueva variable de configuración" /></p> <p>En nuestro caso, llamaremos a esta variable "external_defaultValues"&nbsp;y será del tipo lista de <em>NameValuePair</em>. Este tipo de dato del sistema nos permite definir un nombre (<em>name</em>) y un valor (<em>value</em>) para cada elemento de la lista.</p> <h2>Paso 3 - Modificaciones al diálogo de alta y edición de documentos</h2> <p>Este diálogo es construido dinámicamente a través de una serie de funciones JavaScript que utilizan Dojo.</p> <p>Para modificar el comportamiento del componente deberemos modificar una de las librerías JavaScript provistas con el componente original. Para esto, desde la solapa "Behavior" copiaremos el código de la librería "documentList.js" que se muestra al hacer click sobre el elemento de la lista.</p> <p><img src="images/blog/82-BPM-ECM/imagen3-behavior.png" width="1040" height="433" alt="Copiar el código del componente original" /></p> <p>Este código lo pegaremos en un nuevo archivo que llamaremos "documentList-extended.js" y luego llevaremos a cabo los siguientes cambios.&nbsp;Al finalizar el bloque "try...catch" de la función "populateDocumentPropertiesForm" incluiremos el siguiente bloque de código:</p> <pre class="brush:java">// Extension: Set values if (this.context.options.external_defaultValues != undefined &amp;&amp; this.context.options.external_defaultValues.get("value") != "") { var defaultValuesList = this.context.options.external_defaultValues.get("value"); for (var i=0; i&lt;defaultValuesList.items.length; i++) { var objectTypeId = defaultValuesList.items[i].name; var value = defaultValuesList.items[i].value; var field = dijit.byId(objectTypeId); if (field != null) { var currentValue = field.get("value"); if (currentValue == null || currentValue == "") { field.set("value", value); } field.attr("readonly", true); } } }</pre> <p>Este cambio nos permitirá obtener los valores de la variable "external_defaultValues" y asignarlos a los campos del diálogo dejándolos en modo de lectura para que el usuario no pueda editarlos luego. Para que la asignación funcione correctamente, la variable "name" deberá contener el nombre de la propiedad tal como fue nombrada en el gestor de contenido (tener en cuenta que el nombre que se muestra puede diferir del nombre que utiliza el sistema).</p> <p>El otro cambio que realizaremos en esta librería será para completar dos propiedades particulares de esta implementación llamadas "cmis:name" que representa el nombre del documento y "Process" que, en este caso, se utiliza para registrar el tipo de documento. Para la primera obtendremos el nombre del archivo seleccionado y para la segunda únicamente la extensión. El código para manejar el evento de selección de un archivo lo colocaremos antes del return de la función "createDocumentDialog".</p> <pre class="brush:java">// Extension: Handle fileContent onChange event var field_fileContent = dojo.query("input[type=file]", dojo.query("#fileContent")[0])[0]; field_fileContent.on change = function(evt) { if (this.value != undefined &amp;&amp; this.value != "") { //Set content property 'Name' var start = this.value.lastIndexOf("\\") + 1; var fileName = this.value.substring(start, this.value.length); var field = dijit.byId("cmis:name"); if (field != null) { field.set("value", fileName); field.attr("readonly", true); } //Set content property 'Document Type' var start = fileName.lastIndexOf(".") + 1; var fileExtension = fileName.substring(start, fileName.length); fileExtension = (fileExtension != "") ? fileExtension : "UNKNOWN"; var field = dijit.byId("Process"); if (field != null) { field.set("value", fileExtension.toUpperCase()); field.attr("readonly", true); } } }; </pre> <p>Este cambio nos permite asociar una función al evento de selección del archivo, y obtener el nombre del archivo y su extensión.</p> <h2>Paso 4 - Preparación de los valores por defecto</h2> <p>Para pasar los valores por defecto al nuevo componente, declararemos una variable privada del tipo lista de <em>NameValuePair</em> y agregaremos los items necesarios para cada una de las propiedades deseadas.</p> <pre class="brush:java">// Function to add item to list function insertObject(list, name, value) { var prop = new tw.object.NameValuePair(); prop.name = name; prop.value = value; list.insertIntoList(list.listLength, prop); } // Create new NameValuePair list tw.local.propertiesValues = new tw.object.listOf.NameValuePair(); // Set NameValuePair items insertObject(tw.local.propertiesValues, "Title", "0"); insertObject(tw.local.propertiesValues, "Code", "999"); insertObject(tw.local.propertiesValues, "User", tw.system.user_fullName); insertObject(tw.local.propertiesValues, "cmis:name", ""); insertObject(tw.local.propertiesValues, "Process", ""); insertObject(tw.local.propertiesValues, "Status", "In Progress"); insertObject(tw.local.propertiesValues, "Date", "2014-03-31");</pre> <p><em>Tip:</em>&nbsp;Para los campos de tipo DateTime el formato del valor por defecto a utilizar será 'yyyy-mm-dd'.</p> <p>Luego, finalizaremos la configuración de nuestro 'Custom Document List' asociando esta variable a la propiedad del componente, desde la solapa "Properties" en el panel "Configuration".</p> <p><img src="images/blog/82-BPM-ECM/imagen4-configuracion.png" width="646" height="505" alt="Configuración del componente 'Custom Document List'" /></p> <p>De este modo, el nuevo diálogo mostrará valores por defecto para aquellas propiedades del documento incluidas en la variable, quedando los campos en modo de lectura, y campos editables para el resto de las propiedades. El usuario deberá completar únicamente aquellos campos sin valores por defecto.</p> <p>Se adjunta el archivo "documentList-extended.js" con la versión del código con las modificaciones propuestas.</p> <h2>Conclusión</h2> <p>En este artículo hemos visto como simplificar las tareas de carga de datos en la integración entre IBM BPM y un sistema de gestión de contenidos a través de la personalización del componente 'Document List'.&nbsp;Del mismos modo en que llevamos a cabo estos cambios, otros pueden ser aplicados para cubrir distintas necesidades. Lo destacable es que no es necesario comenzar de cero, sino que se puede partir de la base existente para incorporar nuevas funcionalidades y de este modo disminuir el esfuerzo del desarrollo.</p></div> <div class="K2FeedIntroText"><p>Este artículo detalla como personalizar el componente 'Document List' que está incluido en el toolkit 'Content Management' y se utiliza para consultar, crear y actualizar documentos en el sistema de gestión de contenidos (Enterprise Content Management o ECM). El objetivo es simplificar la carga de propiedades del documento a través de la asignación de valores por defecto.</p> </div><div class="K2FeedFullText"> <h2>Introducción</h2> <p>Los procesos de negocio generalmente requieren que se maneje información no estructurada como documentos escaneados o imágenes. Para esto IBM BPM 8 (y versiones posteriores) incorpora una serie de componentes capaces de conectarse con gestores de contenido utilizando un estándar abierto llamado "Servicios de Interoperabilidad de Gestión de Contenidos" o en inglés "Content Management Interoperability Services (CMIS)".</p> <p>El componente principal a través del cual se lleva a cabo la conexión con el gestor de contenido es el <em>Document List</em>. Este componente se utiliza en <em>coaches</em> y presenta al usuario: a) una lista de documentos obtenidos del gestor de contenido, b) una lista de revisiones de dichos documentos si existieran, c) un diálogo modal para la creación y actualización de documentos. El componente requiere que se especifique un servicio de búsqueda en donde se aplican los criterios de selección de los documentos y, a su vez, este último requiere que exista una configuración de conexión con el gestor de contenido a nivel de aplicación de proceso.</p> <p>Para ver más información sobre como se lleva a cabo la configuración inicial de estos componentes se puede consultar el siguiente artículo: <a href="http://www.ibm.com/developerworks/bpm/bpmjournal/1212_ramos/1212_ramos.html">http://www.ibm.com/developerworks/bpm/bpmjournal/1212_ramos/1212_ramos.html</a></p> <p>Nosotros nos centraremos en el diálogo de creación y actualización de documentos. Por defecto, este diálogo presenta una sección con campos para que se completen los valores de todas aquellas propiedades que se hayan definido a nivel de gestor de contenido para el tipo de documento seleccionado. Podemos observarlo en la siguiente imagen:</p> <p><img src="images/blog/82-BPM-ECM/imagen1-dialogo.png" alt="Diálogo de alta y edición de documentos" width="589" height="336" /></p> <p>Este diálogo permite que el usuario que realiza la carga del documento complete estas propiedades, siendo algunas de ellas requeridas para poder completar la acción.</p> <p>Es muy común que varias de estas propiedades deban completarse por defecto con información relacionada al proceso, y por ello es que se cree conveniente contar con un mecanismo que permita simplificar el ingreso de datos que debe hacer el usuario.</p> <p>A continuación vamos a mostrar como llevar a cabo las modificaciones para que, durante la creación de un documento se pueda completar algunas o todas estas propiedades con información del proceso.</p> <h2>Paso 1 - Copiar el componente 'Document List'</h2> <p><span><span><span><span>Realizar la copia del componente incluido en el toolkit 'Content Management' a otro toolkit o a una aplicación de procesos.</span></span> </span> </span></p> <p><span><span><span><span>En nuestro caso nombraremos a esta copia del component como <em>Custom Document List</em>.</span></span> </span> </span></p> <h2>Paso 2 - Configuración de variables</h2> <p>Editaremos este nuevo componente para agregar una nueva variable a las opciones de configuración.</p> <p>En la solapa "Variables", dentro del panel "Variable Declarations" se debe hacer click en el signo + que se encuentra al costado de "Configuration Options".</p> <p><img src="images/blog/82-BPM-ECM/imagen2-variable.png" width="800" height="311" alt="Nueva variable de configuración" /></p> <p>En nuestro caso, llamaremos a esta variable "external_defaultValues"&nbsp;y será del tipo lista de <em>NameValuePair</em>. Este tipo de dato del sistema nos permite definir un nombre (<em>name</em>) y un valor (<em>value</em>) para cada elemento de la lista.</p> <h2>Paso 3 - Modificaciones al diálogo de alta y edición de documentos</h2> <p>Este diálogo es construido dinámicamente a través de una serie de funciones JavaScript que utilizan Dojo.</p> <p>Para modificar el comportamiento del componente deberemos modificar una de las librerías JavaScript provistas con el componente original. Para esto, desde la solapa "Behavior" copiaremos el código de la librería "documentList.js" que se muestra al hacer click sobre el elemento de la lista.</p> <p><img src="images/blog/82-BPM-ECM/imagen3-behavior.png" width="1040" height="433" alt="Copiar el código del componente original" /></p> <p>Este código lo pegaremos en un nuevo archivo que llamaremos "documentList-extended.js" y luego llevaremos a cabo los siguientes cambios.&nbsp;Al finalizar el bloque "try...catch" de la función "populateDocumentPropertiesForm" incluiremos el siguiente bloque de código:</p> <pre class="brush:java">// Extension: Set values if (this.context.options.external_defaultValues != undefined &amp;&amp; this.context.options.external_defaultValues.get("value") != "") { var defaultValuesList = this.context.options.external_defaultValues.get("value"); for (var i=0; i&lt;defaultValuesList.items.length; i++) { var objectTypeId = defaultValuesList.items[i].name; var value = defaultValuesList.items[i].value; var field = dijit.byId(objectTypeId); if (field != null) { var currentValue = field.get("value"); if (currentValue == null || currentValue == "") { field.set("value", value); } field.attr("readonly", true); } } }</pre> <p>Este cambio nos permitirá obtener los valores de la variable "external_defaultValues" y asignarlos a los campos del diálogo dejándolos en modo de lectura para que el usuario no pueda editarlos luego. Para que la asignación funcione correctamente, la variable "name" deberá contener el nombre de la propiedad tal como fue nombrada en el gestor de contenido (tener en cuenta que el nombre que se muestra puede diferir del nombre que utiliza el sistema).</p> <p>El otro cambio que realizaremos en esta librería será para completar dos propiedades particulares de esta implementación llamadas "cmis:name" que representa el nombre del documento y "Process" que, en este caso, se utiliza para registrar el tipo de documento. Para la primera obtendremos el nombre del archivo seleccionado y para la segunda únicamente la extensión. El código para manejar el evento de selección de un archivo lo colocaremos antes del return de la función "createDocumentDialog".</p> <pre class="brush:java">// Extension: Handle fileContent onChange event var field_fileContent = dojo.query("input[type=file]", dojo.query("#fileContent")[0])[0]; field_fileContent.on change = function(evt) { if (this.value != undefined &amp;&amp; this.value != "") { //Set content property 'Name' var start = this.value.lastIndexOf("\\") + 1; var fileName = this.value.substring(start, this.value.length); var field = dijit.byId("cmis:name"); if (field != null) { field.set("value", fileName); field.attr("readonly", true); } //Set content property 'Document Type' var start = fileName.lastIndexOf(".") + 1; var fileExtension = fileName.substring(start, fileName.length); fileExtension = (fileExtension != "") ? fileExtension : "UNKNOWN"; var field = dijit.byId("Process"); if (field != null) { field.set("value", fileExtension.toUpperCase()); field.attr("readonly", true); } } }; </pre> <p>Este cambio nos permite asociar una función al evento de selección del archivo, y obtener el nombre del archivo y su extensión.</p> <h2>Paso 4 - Preparación de los valores por defecto</h2> <p>Para pasar los valores por defecto al nuevo componente, declararemos una variable privada del tipo lista de <em>NameValuePair</em> y agregaremos los items necesarios para cada una de las propiedades deseadas.</p> <pre class="brush:java">// Function to add item to list function insertObject(list, name, value) { var prop = new tw.object.NameValuePair(); prop.name = name; prop.value = value; list.insertIntoList(list.listLength, prop); } // Create new NameValuePair list tw.local.propertiesValues = new tw.object.listOf.NameValuePair(); // Set NameValuePair items insertObject(tw.local.propertiesValues, "Title", "0"); insertObject(tw.local.propertiesValues, "Code", "999"); insertObject(tw.local.propertiesValues, "User", tw.system.user_fullName); insertObject(tw.local.propertiesValues, "cmis:name", ""); insertObject(tw.local.propertiesValues, "Process", ""); insertObject(tw.local.propertiesValues, "Status", "In Progress"); insertObject(tw.local.propertiesValues, "Date", "2014-03-31");</pre> <p><em>Tip:</em>&nbsp;Para los campos de tipo DateTime el formato del valor por defecto a utilizar será 'yyyy-mm-dd'.</p> <p>Luego, finalizaremos la configuración de nuestro 'Custom Document List' asociando esta variable a la propiedad del componente, desde la solapa "Properties" en el panel "Configuration".</p> <p><img src="images/blog/82-BPM-ECM/imagen4-configuracion.png" width="646" height="505" alt="Configuración del componente 'Custom Document List'" /></p> <p>De este modo, el nuevo diálogo mostrará valores por defecto para aquellas propiedades del documento incluidas en la variable, quedando los campos en modo de lectura, y campos editables para el resto de las propiedades. El usuario deberá completar únicamente aquellos campos sin valores por defecto.</p> <p>Se adjunta el archivo "documentList-extended.js" con la versión del código con las modificaciones propuestas.</p> <h2>Conclusión</h2> <p>En este artículo hemos visto como simplificar las tareas de carga de datos en la integración entre IBM BPM y un sistema de gestión de contenidos a través de la personalización del componente 'Document List'.&nbsp;Del mismos modo en que llevamos a cabo estos cambios, otros pueden ser aplicados para cubrir distintas necesidades. Lo destacable es que no es necesario comenzar de cero, sino que se puede partir de la base existente para incorporar nuevas funcionalidades y de este modo disminuir el esfuerzo del desarrollo.</p></div> UX, Parte 3: Recomendaciones para mejorar la experiencia de usuario 2014-04-03T14:55:08+00:00 2014-04-03T14:55:08+00:00 http://www.microgestion.com.ar/index.php/mg-developers/blog/81-ux-reco-parte-3 Fabián M. Rivarola fabian_rivarola@microgestion.com <div class="K2FeedIntroText"><p><span style="line-height: 18px;">En esta <a href="#referencias"><b>serie de publicaciones</b></a>, veremos diferentes tips para mejorar la experiencia del usuario al utilizar una aplicación web: Comunicación análoga, AJAX, Navegación de la aplicación, Facilidades de uso, Tipos y tamaños de letras y Diseño de formularios.</span></p> </div><div class="K2FeedFullText"> <p><span style="line-height: 16.200000762939453px;"><img src="images/logo/mgd_ux_t_short.png" width="250" height="125" alt="mgd ux t short" style="float: right;" />En esta tercera entrega estaremos viendo diferentes recomendaciones sobre que tipo y tamaño de fuentes utilizar, y algunas recomendaciones a tener en cuenta al momento de diseñar un formulario.</span></p> <h3>Tipo y tamaños de letra</h3> <p><span>Los tipos de letras que más cómodamente se leen en pantalla son los tipos Sans-Serif, Arial y Verdana.</span></p> <p><span style="line-height: 18px;">Estos tipos de letras se visualizan de una manera más nítida en comparación con las fuentes Serif que son más recomendables para documentos impresos. Los pequeños remates en los extremos de las letras (tal y como se puede observar en la siguiente imagen) facilitan su lectura al conseguir que las letras sean más fácilmente reconocibles sobre el papel, un soporte en el que se consigue una definición tres veces superior al de una pantalla de ordenador.</span></p> <p style="text-align: center;"><span style="line-height: 18px;"><img src="images/blog/81-UX-3/03_tf1.jpg" width="514" height="140" alt="03 tf1" /></span></p> <p dir="ltr">Otro punto a tener en cuenta es el tamaño del texto, que debe estar entre 10 y 12 puntos, pero en ningún caso menor a 10 ya que se podría dificultar la lectura del usuario.</p> <p dir="ltr">El mecanismo de la lectura consiste en el reconocimiento de la forma general de las palabras mediante las letras que la forman, no se reconoce cada letra para luego unirlas sino que el ojo escanea la forma global de cada palabra, con lo que las palabras escritas en mayúsculas tienen menor legibilidad.</p> <p dir="ltr">Este problema también ocurre con las palabras en cursiva, que son menos legibles y por lo tanto menos recomendables.&nbsp;</p> <h3>Diseño de formularios</h3> <p>Al momento de diseñar un nuevo formulario, se deben tener las siguientes consideraciones.</p> <ul> <li dir="ltr">Dar un título al formulario que exprese claramente su función.</li> <li dir="ltr">En caso de tener alguna descripción o instrucciones, han de ser breves y comprensibles.</li> <li dir="ltr">Hacer grupos lógicos de campos y separarlos con blancos. Por ejemplo: nombre, primer apellido y segundo apellido es un grupo lógico.</li> <li dir="ltr">Aspecto ordenado, alineando los campos y las etiquetas.</li> <li dir="ltr">Las etiquetas de los campos deben usar terminología familiar.</li> <li dir="ltr">Ser consistente en el uso de los términos, es decir, usar siempre las mismas palabras para los mismos conceptos.El tamaño visible del campo debe corresponderse con la longitud del contenido que ha de introducir el usuario.</li> <li><span style="line-height: 1.5em; background-color: transparent;">Permitir el movimiento del cursor por medio del teclado y no solo con el mouse.</span></li> <li>Permitir que el usuario pueda corregir con libertad los caracteres que ha introducido en los campos.</li> <li>En donde sea posible, impedir que el usuario introduzca valores incorrectos. Por ejemplo, impedir que introduzca caracteres alfabéticos en campos que solo admiten valores numéricos.</li> <li>Si introduce valores incorrectos, indicar en un mensaje cuales son los correctos.</li> <li>Marcar claramente los campos obligatorios.</li> <li dir="ltr">Dejar clara la acción que debe hacer el usuario al terminar de rellenar el formulario.</li> </ul> <p dir="ltr"><strong>Ejemplo de formulario:</strong></p> <p dir="ltr"><strong><img src="images/blog/81-UX-3/03_df1.jpg" width="640" height="547" alt="03 df1" /></strong></p> <p dir="ltr">En la imagen de arriba, vemos algunos de los puntos mencionados anteriormente:</p> <ol> <li dir="ltr">Título del formulario.</li> <li dir="ltr">Sección para mostrar datos del cliente.</li> <li dir="ltr">Sección de carga de datos del formulario, l<span style="line-height: 18px;">as etiquetas y campos se encuentran alineados y organizados, campos obligatorios marcados con un asterisco (*)</span>.</li> <li dir="ltr">Barra de acciones claras que puede realizar el usuario.</li> <li dir="ltr">Para las acciones mas complejas, Merge y Reassign, una breve descripción explicando la funcionalidad.</li> </ol> <p><a id="referencias"></a></p> <h3>Enlaces a las publicaciones de la serie</h3> <p><a href="index.php/mg-developers/blog/75-ux-reco-parte-1">UX, Parte 1: Recomendaciones Para Mejorar La Experiencia De Usuario</a></p> <p><a href="index.php/mg-developers/blog/76-ux-reco-parte-2">UX, Parte 2: Recomendaciones Para Mejorar La Experiencia De Usuario</a></p></div> <div class="K2FeedIntroText"><p><span style="line-height: 18px;">En esta <a href="#referencias"><b>serie de publicaciones</b></a>, veremos diferentes tips para mejorar la experiencia del usuario al utilizar una aplicación web: Comunicación análoga, AJAX, Navegación de la aplicación, Facilidades de uso, Tipos y tamaños de letras y Diseño de formularios.</span></p> </div><div class="K2FeedFullText"> <p><span style="line-height: 16.200000762939453px;"><img src="images/logo/mgd_ux_t_short.png" width="250" height="125" alt="mgd ux t short" style="float: right;" />En esta tercera entrega estaremos viendo diferentes recomendaciones sobre que tipo y tamaño de fuentes utilizar, y algunas recomendaciones a tener en cuenta al momento de diseñar un formulario.</span></p> <h3>Tipo y tamaños de letra</h3> <p><span>Los tipos de letras que más cómodamente se leen en pantalla son los tipos Sans-Serif, Arial y Verdana.</span></p> <p><span style="line-height: 18px;">Estos tipos de letras se visualizan de una manera más nítida en comparación con las fuentes Serif que son más recomendables para documentos impresos. Los pequeños remates en los extremos de las letras (tal y como se puede observar en la siguiente imagen) facilitan su lectura al conseguir que las letras sean más fácilmente reconocibles sobre el papel, un soporte en el que se consigue una definición tres veces superior al de una pantalla de ordenador.</span></p> <p style="text-align: center;"><span style="line-height: 18px;"><img src="images/blog/81-UX-3/03_tf1.jpg" width="514" height="140" alt="03 tf1" /></span></p> <p dir="ltr">Otro punto a tener en cuenta es el tamaño del texto, que debe estar entre 10 y 12 puntos, pero en ningún caso menor a 10 ya que se podría dificultar la lectura del usuario.</p> <p dir="ltr">El mecanismo de la lectura consiste en el reconocimiento de la forma general de las palabras mediante las letras que la forman, no se reconoce cada letra para luego unirlas sino que el ojo escanea la forma global de cada palabra, con lo que las palabras escritas en mayúsculas tienen menor legibilidad.</p> <p dir="ltr">Este problema también ocurre con las palabras en cursiva, que son menos legibles y por lo tanto menos recomendables.&nbsp;</p> <h3>Diseño de formularios</h3> <p>Al momento de diseñar un nuevo formulario, se deben tener las siguientes consideraciones.</p> <ul> <li dir="ltr">Dar un título al formulario que exprese claramente su función.</li> <li dir="ltr">En caso de tener alguna descripción o instrucciones, han de ser breves y comprensibles.</li> <li dir="ltr">Hacer grupos lógicos de campos y separarlos con blancos. Por ejemplo: nombre, primer apellido y segundo apellido es un grupo lógico.</li> <li dir="ltr">Aspecto ordenado, alineando los campos y las etiquetas.</li> <li dir="ltr">Las etiquetas de los campos deben usar terminología familiar.</li> <li dir="ltr">Ser consistente en el uso de los términos, es decir, usar siempre las mismas palabras para los mismos conceptos.El tamaño visible del campo debe corresponderse con la longitud del contenido que ha de introducir el usuario.</li> <li><span style="line-height: 1.5em; background-color: transparent;">Permitir el movimiento del cursor por medio del teclado y no solo con el mouse.</span></li> <li>Permitir que el usuario pueda corregir con libertad los caracteres que ha introducido en los campos.</li> <li>En donde sea posible, impedir que el usuario introduzca valores incorrectos. Por ejemplo, impedir que introduzca caracteres alfabéticos en campos que solo admiten valores numéricos.</li> <li>Si introduce valores incorrectos, indicar en un mensaje cuales son los correctos.</li> <li>Marcar claramente los campos obligatorios.</li> <li dir="ltr">Dejar clara la acción que debe hacer el usuario al terminar de rellenar el formulario.</li> </ul> <p dir="ltr"><strong>Ejemplo de formulario:</strong></p> <p dir="ltr"><strong><img src="images/blog/81-UX-3/03_df1.jpg" width="640" height="547" alt="03 df1" /></strong></p> <p dir="ltr">En la imagen de arriba, vemos algunos de los puntos mencionados anteriormente:</p> <ol> <li dir="ltr">Título del formulario.</li> <li dir="ltr">Sección para mostrar datos del cliente.</li> <li dir="ltr">Sección de carga de datos del formulario, l<span style="line-height: 18px;">as etiquetas y campos se encuentran alineados y organizados, campos obligatorios marcados con un asterisco (*)</span>.</li> <li dir="ltr">Barra de acciones claras que puede realizar el usuario.</li> <li dir="ltr">Para las acciones mas complejas, Merge y Reassign, una breve descripción explicando la funcionalidad.</li> </ol> <p><a id="referencias"></a></p> <h3>Enlaces a las publicaciones de la serie</h3> <p><a href="index.php/mg-developers/blog/75-ux-reco-parte-1">UX, Parte 1: Recomendaciones Para Mejorar La Experiencia De Usuario</a></p> <p><a href="index.php/mg-developers/blog/76-ux-reco-parte-2">UX, Parte 2: Recomendaciones Para Mejorar La Experiencia De Usuario</a></p></div> Proceso de Créditos Comerciales PyME 2014-03-15T15:53:02+00:00 2014-03-15T15:53:02+00:00 http://www.microgestion.com.ar/index.php/proyectos/79-credito-comercial-ibm-bpm ad000250 info@microgestion.com <div class="K2FeedImage"><img src="http://www.microgestion.com/media/k2/items/cache/deb45d333d0414ba3de42155789fdb4a_S.jpg" alt="Proceso de Créditos Comerciales PyME" /></div><div class="K2FeedIntroText"><p><span style="line-height: 1.5em;"><span style="line-height: 18px;">{autotoc enabled=off}</span></span></p> <p><span style="line-height: 1.5em;">Proyecto de implementación de aplicaciones de proceso para la solicitud, aprobación e instrumentación de Créditos Comerciales para PyMEs utilizando IBM BPM</span></p> </div><div class="K2FeedFullText"> <table cellspacing="0" cellpadding="0"> <tbody> <tr style="border-width: 1px; background-color: #30ca96;"> <td style="width: 30%;"> <p><span style="color: #ffffff;"><strong>A</strong></span><span style="color: #ffffff;"><strong>ÑO</strong></span></p> </td> <td><span style="color: #ffffff;"><strong>Tipo de Aplicación</strong></span></td> <td><span style="color: #ffffff;"><strong>Alcance Geográfico</strong></span></td> </tr> <tr> <td><strong>2013</strong></td> <td><strong>&nbsp;BPM</strong></td> <td><strong>Argentina</strong></td> </tr> </tbody> </table> <h2>Situación antes del proyecto</h2> <p>El cliente no contaba con un sistema para la gestión del ciclo de vida de los crédito comerciales orientados al segmento de las PyMEs. No existía una visión unificada del proceso y las actividades involucradas, tampoco era posible obtener información oportuna sobre el rendimiento del proceso y sus participantes.</p> <p>El proceso de créditos PyME es eligido por el cliente como primer proyecto en el programa de adopción de la diciplina de Gestion por Procesos (BPM) dentro de la organización, antes que MicroGestion se hiciera cargo del proyecto, el mismo sufría importantes retrasos y no se estaban cumpliendo las expectativas establecidas al comienzo del mismo.</p> <p><span style="font-size: 2em; font-weight: 600; line-height: normal;">Objetivos del proyecto</span></p> <p>Finalizar la primer etapa del proyecto que contemplaba la puesta en marcha de las fases de Solicitud y Análisis (de riesgo, legal, etc.) de los créditos comerciales.</p> <p>Estabilizar la plataforma IBM BPM y cumplir con el landscape planteado por el área de arquitectura.</p> <p>Implementar la segunda etapa del proyecto cubriendo el ciclo de vida completo del proceso de créditos PyME, incluyendo la instrumentación y el otorgamiento de los créditos.</p> <p><span style="font-size: 2em; font-weight: 600; line-height: normal;">Descripción</span></p> <p>Se diseñó e implementó una solución de procesos basada en la versión 7.5.1 de IBM BPM.</p> <p>Se desarrollaron controles utilizando windgets personalizados (Dojo) para habilitar mecanismos de reutilización y cubrir aspectos de usabilidad en la carga de información de variables complejas en forma de planillas.</p> <p>Se desarrollaron integraciones con procesos batch, Active Directoy, SQL Server, infraestructura de correo y servicios Web (Web services), adicionalmente se desarrollaron integraciones Java para cubrir aspectos no contemplados por la herramienta: envío de correos con anexos ubicados en carpetas compartidas con seguridad (smb), encriptación, formatos de archivo de texto propietarios, etc.</p> <p>Se construyó una herramienta para la consulta integrada de expedientes, y otra para la reasignación de actividades (escalamiento manual).</p> <p>Se instalaron los ambientes de desarrollo, calidad y producción de acuerdo a los lineamientos establecidos por el área de arquitectura, incluyendo la migración de los mismos a la versión 7.5.1 de IBM BPM.</p> <p>Se establecieron guías de gobernabilidad para la gestión de releases de nuevas versiones de las aplicaciones de proceso.</p> <p><span style="font-size: 2em; font-weight: 600; line-height: normal;">Beneficios</span></p> <ul> <li>Cobertura completa del proceso de créditos comerciales (PyME) dentro de la solución</li> <li>Gestión y registro de las actividades de cada participante</li> <li>Implementación de primeros KPI del proceso de créditos comerciales (PyME) </li> <li>Integración con Sharepoint (información digitalizada)</li> <li>Integración con Active Directory</li> <li>Integración con los sistemas internos</li> <li>Integración con correo electrónico</li> <li>Obtención de métricas de rendimiento “out-of-the-box”</li> </ul> <h2>Servicios ofrecidos</h2> <ul style="list-style-type: circle;"> <li><span style="background-color: transparent;">Capacitación sobre IBM BPM</span></li> <li>Coaching en la metodología de ejecución de proyectos BPM</li> <li>Desarrollo de aplicaciones de proceso</li> <li>Desarrollo de Software en plataformas Java</li> <li>Instalación, configuración y soporte de BPMS</li> <li>Soporte de incidentes (infraestructura IBM BPM)</li> </ul> <p>&nbsp;</p> <p><strong style="line-height: 1.5em;">Plataforma:</strong><span style="line-height: 1.5em;">&nbsp;Windows,&nbsp;IBM BPM 7.5.1,&nbsp;SharePoint,&nbsp;SQL Server Database,&nbsp;Active Directory</span><strong style="line-height: 1.5em;"><br /></strong> <strong style="line-height: 1.5em;">Desarrollo:</strong><span style="line-height: 1.5em;">&nbsp;Java,&nbsp;Dojo, IBM BPM Desginer</span><strong style="line-height: 1.5em;"><br /></strong></p></div> <div class="K2FeedImage"><img src="http://www.microgestion.com/media/k2/items/cache/deb45d333d0414ba3de42155789fdb4a_S.jpg" alt="Proceso de Créditos Comerciales PyME" /></div><div class="K2FeedIntroText"><p><span style="line-height: 1.5em;"><span style="line-height: 18px;">{autotoc enabled=off}</span></span></p> <p><span style="line-height: 1.5em;">Proyecto de implementación de aplicaciones de proceso para la solicitud, aprobación e instrumentación de Créditos Comerciales para PyMEs utilizando IBM BPM</span></p> </div><div class="K2FeedFullText"> <table cellspacing="0" cellpadding="0"> <tbody> <tr style="border-width: 1px; background-color: #30ca96;"> <td style="width: 30%;"> <p><span style="color: #ffffff;"><strong>A</strong></span><span style="color: #ffffff;"><strong>ÑO</strong></span></p> </td> <td><span style="color: #ffffff;"><strong>Tipo de Aplicación</strong></span></td> <td><span style="color: #ffffff;"><strong>Alcance Geográfico</strong></span></td> </tr> <tr> <td><strong>2013</strong></td> <td><strong>&nbsp;BPM</strong></td> <td><strong>Argentina</strong></td> </tr> </tbody> </table> <h2>Situación antes del proyecto</h2> <p>El cliente no contaba con un sistema para la gestión del ciclo de vida de los crédito comerciales orientados al segmento de las PyMEs. No existía una visión unificada del proceso y las actividades involucradas, tampoco era posible obtener información oportuna sobre el rendimiento del proceso y sus participantes.</p> <p>El proceso de créditos PyME es eligido por el cliente como primer proyecto en el programa de adopción de la diciplina de Gestion por Procesos (BPM) dentro de la organización, antes que MicroGestion se hiciera cargo del proyecto, el mismo sufría importantes retrasos y no se estaban cumpliendo las expectativas establecidas al comienzo del mismo.</p> <p><span style="font-size: 2em; font-weight: 600; line-height: normal;">Objetivos del proyecto</span></p> <p>Finalizar la primer etapa del proyecto que contemplaba la puesta en marcha de las fases de Solicitud y Análisis (de riesgo, legal, etc.) de los créditos comerciales.</p> <p>Estabilizar la plataforma IBM BPM y cumplir con el landscape planteado por el área de arquitectura.</p> <p>Implementar la segunda etapa del proyecto cubriendo el ciclo de vida completo del proceso de créditos PyME, incluyendo la instrumentación y el otorgamiento de los créditos.</p> <p><span style="font-size: 2em; font-weight: 600; line-height: normal;">Descripción</span></p> <p>Se diseñó e implementó una solución de procesos basada en la versión 7.5.1 de IBM BPM.</p> <p>Se desarrollaron controles utilizando windgets personalizados (Dojo) para habilitar mecanismos de reutilización y cubrir aspectos de usabilidad en la carga de información de variables complejas en forma de planillas.</p> <p>Se desarrollaron integraciones con procesos batch, Active Directoy, SQL Server, infraestructura de correo y servicios Web (Web services), adicionalmente se desarrollaron integraciones Java para cubrir aspectos no contemplados por la herramienta: envío de correos con anexos ubicados en carpetas compartidas con seguridad (smb), encriptación, formatos de archivo de texto propietarios, etc.</p> <p>Se construyó una herramienta para la consulta integrada de expedientes, y otra para la reasignación de actividades (escalamiento manual).</p> <p>Se instalaron los ambientes de desarrollo, calidad y producción de acuerdo a los lineamientos establecidos por el área de arquitectura, incluyendo la migración de los mismos a la versión 7.5.1 de IBM BPM.</p> <p>Se establecieron guías de gobernabilidad para la gestión de releases de nuevas versiones de las aplicaciones de proceso.</p> <p><span style="font-size: 2em; font-weight: 600; line-height: normal;">Beneficios</span></p> <ul> <li>Cobertura completa del proceso de créditos comerciales (PyME) dentro de la solución</li> <li>Gestión y registro de las actividades de cada participante</li> <li>Implementación de primeros KPI del proceso de créditos comerciales (PyME) </li> <li>Integración con Sharepoint (información digitalizada)</li> <li>Integración con Active Directory</li> <li>Integración con los sistemas internos</li> <li>Integración con correo electrónico</li> <li>Obtención de métricas de rendimiento “out-of-the-box”</li> </ul> <h2>Servicios ofrecidos</h2> <ul style="list-style-type: circle;"> <li><span style="background-color: transparent;">Capacitación sobre IBM BPM</span></li> <li>Coaching en la metodología de ejecución de proyectos BPM</li> <li>Desarrollo de aplicaciones de proceso</li> <li>Desarrollo de Software en plataformas Java</li> <li>Instalación, configuración y soporte de BPMS</li> <li>Soporte de incidentes (infraestructura IBM BPM)</li> </ul> <p>&nbsp;</p> <p><strong style="line-height: 1.5em;">Plataforma:</strong><span style="line-height: 1.5em;">&nbsp;Windows,&nbsp;IBM BPM 7.5.1,&nbsp;SharePoint,&nbsp;SQL Server Database,&nbsp;Active Directory</span><strong style="line-height: 1.5em;"><br /></strong> <strong style="line-height: 1.5em;">Desarrollo:</strong><span style="line-height: 1.5em;">&nbsp;Java,&nbsp;Dojo, IBM BPM Desginer</span><strong style="line-height: 1.5em;"><br /></strong></p></div>