septiembre 15, 2012

Como crear tu propio sitio web utilizando el UI Toolkit for Information Access de SAP HANA

By Lucas Sparvieri


Hace unos meses empecé a desarrollar el contenido de un nuevo workshop llamado Get your Hands-on IT for SAP HANA™. Este es un workshop guiado de dos días de duración que te provee con todo lo necesario para mejorar tus skills de desarrollo, como acceso a un entorno SAP HANA™ en Amazon Web Services preparado con datos de muestra y ejercicios que te expondrán a desafíos mas complejos que los cursos tradicionales.
Cuando empezamos a pensar en el contenido del workshop decidimos que queríamos cubrir temas que en general no son abarcados por los cursos tradicionales, por lo tanto el UI Toolkit for Information Access es un candidato perfecto.
El UI Toolkit for INA es básicamente un set de widgets que pueden ser utilizados en aplicaciones web para proveer acceso en tiempo real a información almacenada en una base de datos SAP HANA™. También se pueden utilizar los widgets para proveer “faceted search” sobre información estructurada y no estructurada. Para los que no conocen el termino “faceted search” (como yo hasta hace poco), significa devolver resultados agrupados por atributos en vez de una lista plana. Estos grupos (facets) permiten la navegación, filtrado, refinado y la visualización de las dimensiones del conjunto de resultados.

El toolkit esta basado en HTML5 y librerías de JavaScript como JQuery/JQueryUI, d3 (Data Driven Documents), Tempo and FancyBox (en caso de que eso les diga algo). Los widgets consumen “search enabled” Attribute Views. Cada vez que se crea un “search enabled” Attribute View, el servicio SAP HANA™ REST crea un “Entity Set” automáticamente, por lo tanto para ser mas especifico, los widgets consumen “Entity Sets” a través del servicio SAP HANA™ REST cuyas respuestas son provistas en formato JSON.
Suficiente de teoría, vamos a ensuciarnos las manos. Para implementar el UI Toolkit for INA en tu propio sitio tenemos que completar los siguientes pasos:
1.     Instalar el UI Toolkit
2.     Prepara los Datos de Origen
3.     Configurar un entorno de desarrollo
4.     Crear tu propio sitio web

Instalar el UI Toolkit

  1. Descarga el Delivery Unit de SAP Service Marketplace
  2. Importa el Delivery Unit
    1. Abrí SAP HANA™ Studio Modeler
    2. En la solapa Quick Launch, selecciona Content -> Import
    3. Selecciona HANA Content -> Delivery Unit y después Next
    4. Selecciona Client y buscar el directorio donde descargaste el delivery unit REPO_INA_UITOOLKIT.tgz
    5. Selecciona las dos acciones y después Finish
    6. Repetí el mismo procedimiento para el Delivery Unit REPO_INA_SERVICE.tgz
    7. Verifica que los paquetes fueron importados correctamente
  3. Registrar y activar el servicio
    1. Cambia a SAP HANA™ Studio Administration Console y selecciona la instancia de tu base de datos
    2. Selecciona la solapa Configuration y expandí xsengine.ini -> application_container
    3. Hace doble click sobre la línea application_list y en la columna System agrega la entrada SearchServer
    4. Para reiniciar XSEngine, selecciona la solapa Landscape 
    5. Botón derecho sobre el servicio xsengine service y selecciona Kill. El servicio se frena completamente y se reinicia.
  4. Descarga los datos de muestra de SAP Code Exchange e importalos a tu base de datos. Este paso es opcional, no es necesario para correr el UI Toolkit, solo si quieres ver el sitio de demostración funcionando con datos. En nuestro caso, no vamos a utilizar el sitio de muestra por lo tanto si quieres te podes saltear este paso por ahora.
Para verificar que el servicio se instalo correctamente podes abrir el sitio de muestra, en caso que no hayas instalado los datos de muestra no te preocupes, el sitio se debería abrir de todas formas, aunque obviamente no vas a ver datos.
http://<HANAhost>:80<instance>/sap.bc.ina.demos.epm/search.html

Prepara los Datos de Origen

Lo primero que tienes que hacer es crear un índice “full-text” en todas las columnas de texto que tienen información que puede ser leída por humanos. Para crear un índice “full-text” en SAP HANA™ Studio, ejecuta el siguiente comando SQL:
CREATE FULLTEXT INDEX <index_name> ON <table_name>(<column_name>)
Para crear un “search enabled” Attribute View lo primero que debes hacer es cambiar la configuración de tu SAP HANA™ Studio:
1.     Loguéate a SAP HANA™ Studio con el usuario SYSTEM
2.     En el menú, selecciona Window -> Preferences -> Modeler -> Search Options
3.     Selecciona la opción “Enable Search Attributes” y después OK
Una vez que completamos estos pasos podemos crear el Attribute View que será consumido por los widgets. Para cada atributo del Attribute View seguí estos pasos:
  1. En la solapa Output, selecciona el atributo.
    Nota: Los atributos no deben ser atributos calculados ni tener minúsculas en sus nombres.
  2. En la parte inferior de la solapa Properties, selecciona la categoría Information Access.
  3. Seteá la propiedad Freestyle Search como True.
En la categoría Information Access podes hacer seteos específicos para las búsquedas. El seteo Weights for Ranking (entre 0.0 y 1.0, por default 0.0) influencia el ranking de los ítems en la lista de resultados. Cuanto mas grande es el valor para un atributo, mas arriba va a aparecer en la lista de resultados cuando ese atributo tenga un hit. El seteo Fuzzines Threshold no esta operacional todavía.
Para asegurarte que los widgets van a poder consumir tu vista, abrí la siguiente URL en un navegador:
http://<HANAhost>:80<instance>/sap.bc.ina.service.v1
Deberías ver una lista de “Entity Sets” que están expuestos a través del servicio SAP HANA™ REST, el nombre del Entity Set contiene el nombre del paquete, el nombre de la vista y la palabra Collection:
<package_name>/<view_name>Collection
Para testear el entity set podes abrir la siguiente dirección URL:
http://<HANAhost>:80<instance>/sap.bc.ina.service.v1/<entityset>

 

Configurar un Entorno de Desarrollo

Para poder crear tu propio sitio web tenes que configurar un entorno de desarrollo siguiendo estos pasos:
1.     Asegúrate que el cliente SAP HANA™ esta instalado en tu maquina, de lo contrario, instálalo.
2.     Agrega la ruta al directorio hdbclient a las siguientes variables de entorno: PATH en Windows y LD_LIBRARY_PATH en Linux. Este paso es necesario para poder ejecutar comandos del cliente SAP HANA™ desde cualquier directorio.
3.     Crea un nuevo directorio en tu maquina local y convertilo en un área de trabajo de desarrollo de SAP HANA™ ejecutando el siguiente comando adentro de ese directorio:
regi create workspace --user=<HANAuser> --host=<HANAhost>:<SQLport>
1.     Marca los paquetes del UI Toolkit como relevantes para desarrollo ejecutando el siguiente comando:
regi track sap.bc.ina
4.     Copia los paquetes y archivos a tu área de trabajo local ejecutando el siguiente comando:
regi checkout
5.     En tu área de trabajo local la estructura de paquetes esta representada por carpetas que contienen archivos HTML, CSS, JS e imágenes.

Crea tu Propio Sitio Web

Para crear tu propio sitio web hace una copia del directorio epm que esta adentro del directorio demos. Luego renómbralo, por ejemplo como myapp, y trabaja únicamente dentro de ese directorio. Ahora podes empezar a crear tu propio sitio utilizando tu editor web favorito. Nos vamos a concentrar en el archivo search.html dentro del directorio myapp y los archivos HTML dentro del directorio templates.

Search.html

Este es el inicio de tu sitio web. Adentro encontrarás el código que implementa los widgets, por lo tanto empecemos a revisar el código para cada widget y como los podemos personalizar.

Work Area Widget

Este widget te permitirá conectar tu sitio a tus datos de origen especificando el entity set en el parámetro data-entityset





Search Box Widget


Chart Widget

Lo más importante en este widget es especificar una columna de tus datos de origen en el parámetro data-dimension

Result List Widget

En este widget tenes que cambiar el parámetro data-responseattributes para especificar la lista de columnas que quieres mostrar en la lista de resultados.

Ahora que terminamos de modificar el archivo search.html, empecemos a trabajar con los archivos HTML que están dentro del directorio templates.

Templates.html

Los archivos HTML que están dentro de este directorio son utilizados por el Result List Widget para mostrar la información en tu sitio. Vas a tener que modificar todos los archivos HTML que están listados en la sección templates del archivo search.html

En este caso modificando los archivos products.html, products_small.html y prodcuts_detail.html será suficiente. En estos archivos tienes que especificar los atributos que quieres que se muestren en la lista de resultados y de que manera te gustaría que se muestren. Tienes que asegurarte que todos los atributos que uses en estos archivos hayan sido especificados en el parámetro data-responseattributes del widget Result List

Una vez que hayas terminado de hacer todas las modificaciones, ejecuta el comando regi commit para enviar los cambios al servidor SAP HANA™ y después el comando regi activate para activarlos. La URL para abrir tu nuevo sitio es:
Ojala que te haya servido y que te diviertas jugando con los widgets tanto como yo!

Lucas

No hay comentarios:

Publicar un comentario