Realidad aumentada para web con GWT – Nyartoolkit

La realidad aumentada para web es un gran reto. Reemplazar a flash puede ser una tarea que demorará años. Si bien es cierto, muchas tecnologías como el html5 está reemplazando funciones de Flash, éste es un rudo combatiente y aún está vivo por dos factores: 1) no es tan masivo el uso del html5 entre los usuarios (ni siquiera saben que es) y 2) la inestabilidad de los otros sistemas hacen que el Flash aún sea una buena elección. Lo mismo pasa con el tema de realidad aumentada para entornos web. Flash domina y los experimentos con html5 aún no tienen la gran estabilidad ni la masificación deseada.

En esta ocasión les explicaré como hacer realidad aumentada con GWT (Google Web Toolkit) . Recuerda que esto aún está en fase beta, por lo que pueda dar fallas en algunas ocasiones.

Agradezco infinitamente a Francesca Tosi y Alberto Mancini por ayudarme a realizar este tutorial. Ellos son los creador del GWT – Nyartoolkit, la librería que vamos a usar a continuación. Gracias a ellos por su paciencia y dedicación para tener este proyecto.

GWT – Google Plugin para Eclipse

El GWT (Google Web toolkit) es una sdk para realizar aplicaciones para web utilizando Eclipse de la manera. En teoría, trabajan con eclipse porque es el IDE más usado. Su manera de operar es utilizando java y lo fusiona con html, xml, app engine (en algunos casos) para lograr un resultado muy bueno. Permite compilar, correr la aplicación y realizar pruebas independientes.

Para instalar GWT les explicaré mi proceso.

• Tengo un win 7 de 6gb de 64bits
• Uso Kepler, la última versión de eclipse
• Instalé el GWT plugin para Kepler

Tuve problemas con la versión Indigo y no me dejaba instalar el GWT, por eso comencé a usar Kepler. Uso el navegador firefox, que fue el que mejores resultado me dio. Chrome me daba mucho error y no permitía cargar. Eso es un poco relativo.

Si no sabes como instalar nuevos software en Eclipse, mira este tutorial que hace google o sino sigue estas instrucciones:

•  Abre eclipse, visita el menu, encuentra la sección «Help» y nos vamos a «install new software»
• Agregamos la dirección https://dl.google.com/eclipse/plugin/4.3

Elige las opciones que deseas instalar, si eres nuevo en eclipse descágartelo todos, pero si ya usas Android, decide que paquete instalar, lo mejor es bajar los recomendados.

Apenas instalamos, damos reiniciar eclipse y si fuera posbile el equipo también.

Iniciando con GWT Plugin

• Abrimos FILE, new file u other example y le damos Web Aplication Project

• A nuestro proyecto que le llamaremos prueba, simplemente le damos run o debug para ver si funciona correctamente.

No olvidemos que debemos configurar el run y el debug para que nos de un puerto libre aleatorio y no tengamos el problema de seguir estancados.

Luego de eso le damos run y debe aparecer en nuestro Firefox un anuncio. Por lo general saldrá el anuncio de instalar el plugin de GWT. Uno debe aceptar los procesos y finalizar. Esto sucede lo mismo con Chrome. Si deseas utilizar chrome te saldrá un aviso para instalar la extensión de GWT.

Si te sale error o te pide detener script. No lo hagas!. Dale clic en continuar varias veces hasta que corra corectamente, puede ser que el GWT aveces es lento y no reconoce las funciones adecuadamente en el momento preciso.

GWT Nyartoolkit

• Debemos entrar a la web del proyecto y descargar los archivos con un programa de subversion como TortoiseSVN
• También debemos descargar Nyartoolkit 1.4.4 

En los archivos de nyartoolkit 1.4.4 buscaremos la carpeta LIB y utilizaremos dos folder.
El folder SRC lo tenemos que cambiar de nombre y llamarlo src.nyartoolkit. También debemos buscar la carpeta src.markersystem. Teniendo estas dos carpetas, la incluiremos en nuestro proyecto más adelante.

Importamos el GWT-nyartoolkit en Eclipse y luego copiamos los dos folders mencionados (src.nyartoolkit y src.markersystem)

Luego tenemos que ver el Build Path y ver si todo está bien configurado.
Revisemos lo errores (missing) y si las librerías están instaladas correctamente.

Por lo general borramos los archivos missing para evitar malas lecturas por parte de Eclipse. Finalmente le damos refrescar o F5 para tener todo actualizado.

Ahora un ultimo punto antes de hacerlo correr es configurar el MAIN CLASS 

Tenemos que agregar este main class y no el que estaba predeterminado:
com.google.gwt.dev.DevMode

La razón del por qué usar este DevMode la encontrarás aca ]
Luego tenenos que buscar el TrivialSample.java. Este archivo está en com.jooink.gwt.nyartoolkit.sample.client. Lo abrimos y decidimos correrlo.

Un tipo que me dio Alberto es que por lo general es mejor hacer un compilado de GWT para ya correr de frente sin tener que trabajar con el pluging de GWT en los navegadores. Este plugin falla muchas veces.

Al igual que el primer proyecto de GWT. Nunca pares el script si es que el navegador te lo pide. No lo hagas porque es lento la lectura del GWT.

GWT – ELEMENTAL AR DEMO

Este ejemplo es el más atractivo. Si bien ya hicimos correr un ejemplo típico del setup, ahora lanzaremos una visualización de realidad aumentada en tiempo real.

Pasos a seguir

• Descargar el archivo Elemental AR. En su interior se encontrará dos archivos. Nosotros tenemos que implementar el resto de elementos necesarios.
• Se acuerdan de los archivos de nyartoolkit 1.4.4. Sí, el src.nyartoolkit y el src.markersytem también lo agregaremos al proyecto.
• Una vez en el proyectos tenemos que considerar a estos dos archivos como «use as source folder»
• También debemos agregar la librería GWT. No podemos pegarlo como los otros archivos porque no lo leerá bien. Así que debemos ir a build path — > add libraries y luego Google Web Toolkit
  
• Si deseas utilizar ya este proyecto, vas a tener errores porque falta otro archivo importante. Necesitamos utilizar un jar externo. Este es el elemental.jar. Si es dificil de buscarlo dentro de tus archivos GWT puedes descargarlo aquí 
• Para agregar elemental.jar adecuadamente debemos ir de nuevo a build path y add external archive —> agregamos el archivo.
• Teniendo todo esto vamos hacer de nuevo el java build path y ver los errores que podamos tener (archivos missing, librerías que nos puedan faltar, etc)

En com.jooink.experiments.elementalar asegúrate de tener el elementalARDemo.gwt.xml
En este archivo debemos colocar una línea de comando, si es que aún no lo tenemos. 

<inherits name=’elemental.Elemental’/>

Ahora podemos abrir el archivo ElementalARDemo.java  y compilarlo con GWT.

Al compilarlo encontrará algunos errores pero no críticos para que no arranque. Al terminar de compilar saldrá varios archivos en la carpeta WAR.

La carpeta WAR es la carpeta que exportará elementos en HTML. Estos servirán para trabajar para web. Se creará una carpeta elementalardemo y obviamente el ElementalARDemo.html ya está por default en los archivos descargados.

Abriremos el ElementalARDemo en Chrome (Este ejemplo solo funciona en Chrome)

[highlight]Estos son algunos ejemplo que podemos visualizar. Si crees que no funciona. Pruébalo directamente desde mi servidor o a través esta aplicación web. [/highlight]

Francesca y Alberto tienen toda la documentación del proyecto de GWT – Nyartoolkit. Como comenté en el inicio, agradezco el esfuerzo que han puesto ellos en su trabajo y en la ayuda que me brindaron para hacer este tutorial.

Referencias

• http://www.joonk.com/
• http://www2.mokabyte.it/cms/article.run?articleId=43S-1FG-6TX-XR7_7f000001_26089272_eb26acb8
• http://www2.mokabyte.it/cms/article.run?articleId=RTD-7CG-XKR-1EL_7f000001_26089272_8553f419
• http://www2.mokabyte.it/cms/article.run?articleId=AB6-NGQ-PKG-ORG_7f000001_26089272_29c5cb84
• http://www2.mokabyte.it/cms/article.run?articleId=5MB-KG2-VV4-VEO_7f000001_11885319_cfbef366
• http://www2.mokabyte.it/cms/article.run?articleId=JPM-JXO-G5X-77K_7f000001_11231952_092b6411

 Si te gustó este tutorial suscríbete  🙂
[subscribe2]