Nicolas Bortolotti

Ecosistema e innovación en videojuegos..GGJ 2012

2012-01-29T19:03:00.000-03:00

En esta oportunidad quiero comaprtir con toda la comunidad la presentación y sesión realizada en el marco del evento "Global Game Jam 2012" Córdoba, Argentina. En esta sesión tratamos los siguientes tópicos:

DevRel South Region Desarrolladores en Latam
¿Cual es el proposito de los videojuegos?
Our Techology
¿Porque nuestro ecosistema?
More Options

Pueden visualizar mas detalles del evento en el siguiente vínculo: Ver GGJ 2012

Preentación de la sesión:

Resumen de la Sesión:

Contamos con sesiones generadas por los GTUGs de Cordoba, Santa Fe y Buenos Aires. Además se generaron hangouts con diversos puntos de Latam como México y Peru.

Seguiremos en esta apasionante comunidad de desarrollo, promoviendo innovación sobre la ingenieria moderna de software.

Global Game Jam 2012, Cordoba Argentina

2012-01-29T12:02:00.001-03:00

Quiero compartir con ustedes la sensación única, que se siente al presenciar y tomar contacto con la comunidad de desarrolladores de una de las regiones particpantes de evento global GGJ 2012.
Puede observar una gran motivación inicial, un gran talento en potencia y una entrega única, que representa una visión de desarrollo, combinando actividades de apredizaje, interacción de grupos, investigación, conocimiento de herramientas y responsabilidad con el formato intensivo de 48 hrs continuas de desarrollo.

Les dejo lo ocurrido las primeras 24 hrs...

Luego les compartiré sesiones técnicas, keynotes y demás actividades en el marco del evento.

2011-12-22T09:24:00.002-03:00

Nuevo articulo en LookThisCode...

function CargarMapa() {
    //Determinamos donde vamos a insertar el mapa
       var mapa = document.getElementById('mapaVisual');
       //Utilizamos como parametro el elemento donde vamos a insertar el mapa y luego           generamos la instancia del objeto.
       //Podremos colocar coordenadas, un escenario de zoom y el tipo.
       var map = new google.maps.Map(mapa, {
         center: new google.maps.LatLng(-34.608333, -58.371944),
         zoom: 13,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       });
     }
     //Cargamos la función del mapa
     google.maps.event.addDomListener(window, 'load', CargarMapa);

[1] Google Maps JavaScript API

Puedes ver el articulo completo en : Ver

LookThisCode ¿Que opinas de este código fuente Google?

2011-12-19T14:19:00.002-03:00

Desde el ambiente del desarrollo de software, en una gran cantidad de oportunidades, compartimos de diversas maneras código fuente entre nuestro círculos de desarrollo, con el objetivo de encontrar implementaciones de más calidad. Además, una de las actividades más comunes se enfoca en como resolver problemas mediante la creación de código fuente de diversas formas, fomentando la reutilización. Ocurre tambien que muchas de las soluciones, que en ocasiones tardamos largas horas en representar y resolver, están contenidas por algunas de las APIs disponibles. Y finalmente, leer e interpretar el código, es algo que sin lugar a dudas devemos entrenar..

LookThisCode tiene por objetivo formar a la comunidad de desarrollo Google, sobre todas las ventajas del desarrollo enfocando el código fuente.

Puedes participar y enriquecer esta gran comunidad de desarrollo con tu aporte y llenar de talentos tu bolsa con cada aporte.

Te interesa conocer más del programa:
Ver

Puedes ver ejemplos en el blog LookThisCode:
Ver

Puedes interactuar por medio de G+ con el modelo:

Crear gráficos desde un spreadsheet de Google Docs

2011-12-05T16:04:00.001-03:00

Introducción

Manipular información en tiempos modernos requiere de herramientas modernas. En esta oportunidad nuestro desafío será integrar en nuestro sitio web, un grafico que pueda visualizar datos, extrayendo la información desde un documento spreadsheet de nuestro repositorio en Google Docs.

Forma gráfica

El HTML y Js que creamos interactua con la jsapi y extrae los datos de nuestro documento en Google Docs, para realizar la renderización del contenido donde el desarrollador tenga como requerimiento.

Que utilizamos para el desarrollo

Utilizamos Google Visualization API, particularmente la clase ChartWrapper para crear con HTML y Javascript el objetivo expuesto.

//Generamos la instancia del grafico que obtendrá los datos desde el spreadsheet
var grafico = new google.visualization.ChartWrapper({
//Colocamos el elemento importante, que es nuestra spreadsheet de Google Doc
//Luego tenemos las opciones del tipo de grafico y finalmente el contenedor donde graficaremos.
dataSourceUrl: 'Documento Google Doc',
chartType: 'PieChart',
containerId: 'visualization'
});
//Finalmente ejecutamos el método de dibujo
grafico.draw();
}

Codigo Central

Como lo desarrollo en la cloud

En esta oportunidad, he utilizado un entorno de desarrollo completamente en la nube llamado eXo Cloud IDE y en algunos segundos tener la posibilidad de confeccionar esta simple aplicación de manipulación de información utilizando como fuente de datos un spreadsheet de Google Doc.

Código disponible en:

GitHub - LookThisCodeGoogle API

Tecnología

- Google Visualization API
- eXo Cloud IDE, Chrome browser
- GitHub para el código fuente

Conferencias completas 3 Day Startup Chile 2011

2011-10-27T15:47:00.001-03:00

En esta oportunidad les comparto las dos conferencias ejecutadas en el marco del evento 3 Day Startup Santiago en el predio del Campus San Joaquin UC, Santiago de Chile.

Conferencia grabada completa "Conferencia El despertar de la cloud, enfoque Google App Engine"
Parte 1

Parte 2

Conferencia grabada completa "Conferencia Mobile Future enfoque Android"
Parte 1

Parte 2

Pueden opinar en las series de Moderator:
- Conferencia 1
- Conferencia 2

Pueden opinar en el canal donde se exponen estos activos:

- Canal nbortolotti

Conferencia Mobile Future enfoque Android

2011-10-26T18:23:00.003-03:00

Les quiero compartir el material que analizaremos en la conferencia "Mobile Future enfoque Android". Esta conferencia se realiza el día martes 26 de Octubre a las 13 hrs, en el marco del evento 3 Day Startup Santiago en el predio del Campus San Joaquin UC, Santiago de Chile.

Presentación de la conferencia:

Android, Mobile Future 3 Day Startup on Prezi

Práctica:

Conferencia El despertar de la cloud, enfoque Google App Engine

2011-10-25T13:09:00.002-03:00

Les quiero compartir el material que analizaremos en la conferencia "El despertar de la cloud, mitos verdades y propuestas, enfoque Google App Engine". Esta conferencia se realiza el día martes 25 de Octubre a las 16 hrs, en el marco del evento 3 Day Startup Santiago en el predio del Campus San Joaquin UC, Santiago de Chile.

Presentación de la conferencia:

El despertar de la cloud, mitos,verdades y propuestas - 3 Day Startup on Prezi

Práctica 1 de la conferencia:

Práctica 2 de la conferencia:

Finalmente concluir con mis agradecimientos a los integrantes de la organización IncubaUC y particularmente a Luis Duarte Romero y Marcelo Díaz Bowen para la buena onda y proactividad en la organización de la conferencia.

Conferencia sobre desarrollo en la Cloud , EduTicInnova 2011

2011-10-14T19:04:00.000-03:00

En esta oportunidad, les voy a compartir el material que analizaremos en la conferencia, "El despertar de la cloud, mitos, verdades y propuestas" en la USMP Perú, en el marco del 1er Congreso de Educación Virtual EduTicInnova 2011. También utilizaremos material del programa LookThisCode y el entorno de desarrollo será completamente tratado en la nube, mediante Cloud9 and GitHub en comparativa con desarrollos hibridos.

Les dejo la presentación:

El despertar de la cloud, mitos,verdades y propuestas - EduTicInnova 2011 - USMP Peru on Prezi

Demostración práctica ejecutada en la conferencia:

Conferencia sobreMovilidad y aplicaciones Web Mobile

2011-10-13T14:38:00.003-03:00

En esta oportunidad les comparto el material que utilizaremos en la conferencia sobre Movilidad y aplicaciones Web Mobile desarrollada en la universidad Galileo en Guatemala, en el marco del Foro Innovación Tecnológico FIT 2011. En esta charla abordaremos un enfoque de desarrollo no nativo en escenarios mobile. También utilizaremos material del programa LookThisCode y el entorno de desarrollo será completamente tratado en la nube, mediante Cloud9 and GitHub.

Les dejo la presentación:

Movilidad y aplicaciones Web Mobile, Enfoque no nativo - FIT 2011 on Prezi

Les dejo un video demostrativo de la práctica aplicada:

¿Que clase de arquitecto conoces?

2011-10-04T16:41:00.001-03:00

Las discusiones en los diversos enfoques sobre las tareas esenciales de los arquitectos de software son habituales en publicaciones de opinión. En esta oportunidad les presento una mirada centrada en la opinión, referenciando un trabajo de renombre mediante el modelo "SummaryNextLevel".
Con este modelo se puede evolucionar un texto para hacerlo más representantivo en la comunidad.

¿Asumes este desafío?

Ver Articulo

2011-09-30T13:15:00.003-03:00

El articulo que les dejo en esta oportunidad, es sobre GWT para el programa "LookThisCode", en el se visualiza un enfoque de comunicación sobre GWT RPC.

¿Te animas a descubrir su implementación visualizando solo el código?

¿Que tenemos como activo entonces?

- Segmento de código para un requerimiento particular.
- Vínculos oficiales a las clases implementadas. Google Code
- Remarcado de código fundamental.
- Descarga de código de implementación
- Podemos ejecutar comentarios y evolucionar el código.

Ver Articulo

La innovación en sus manos desarrolladores!

Android Media Support to Your Application

2011-09-29T18:31:00.000-03:00

Analizar el código fuente es una de las tareas habituales de los desarrolladores. Entrenar la arqueología de código, requiere de un entrenamiento particular. En esta oportunidad les presento el programa "lookthiscode". La esencia de este programa, se fundamenta en presentar segmentos de código y analizarlos de una manera agil, para entrenar la implementación del mismo.

El articulo que les dejo en esta oportunidad es sobre Android Media para un nivel inicial.

¿Que tenemos como activo entonces?

- Segmento de código para un requerimiento particular
- Vínculos oficiales a las clases implementadas. Android Developers
- Remarcado de código fundamental.
- Descarga de código de implementación
- Podemos ejecutar comentarios y evolucionar el código.

Ver Articulo

La innovación en sus manos desarrolladores!

Sinapsis Universidad, La comunidad latianoamericana

2011-09-08T20:49:00.002-03:00

El proyecto Sinapsis tiene por objetivo, trabajar en un ecosistema académico, empresaríal y de investigación con enfoque en las conexiones de estos grandes grupos.

En el enfoque universitario propuesto, están invitados docentes de todo latinoamerica en cátedras relacionadas a estímulos(Tecnología Google) relacioneados con el desarrollo de software general. En esta comunidad nos introduciremos a una metodología colaborativa que favorezca las actividades académicas, con el objetivo de conectar satelitalmente la tecnología Google.

Si eres docente, te interesa.

¿Como conectar el plan de estudio de la cátedra en forma satelital con las tecnologías de Google?
¿Como genero un tratamiento desde enfoque académico, investigación e industria para la tecnología Google de los contenidos de la cátedra?
¿Podré obtener un enfoque colaborativo de docentes en una nueva comunidad adaptada a las necesidades del desarrollo moderno?
¿Podré reutilizar esta base de conocimiento de escenarios académicos?

Si eres estudiante, ¿No es genial participar de un entorno académico así?

Actualmente contamos con un pre-registro en donde podremos analizar el proyectos de conexión de las propuestas académicas.

La innovación está en tus manos, un enfoque académico para todos!

Para más información, visualizar el siguiente Site.

Nuestro portal colaborativo de proyectos, foros direccionados wikis y más.. Sinapsis

Si quieres visualizar en inglés: ver

Presentación de EXADAT en JAIIO 2011 Simposio ASSE

2011-09-03T18:09:00.001-03:00

En el marco de las Jornadas Argentinas de Informática JAIIO 2011, para el simposio ASSE de
Software Engineering, el viernes 2 de Septiembre he presentado el proyecto EXADAT, focalizado en el análisis de variabilidad para productos de software.

Les dejo la presentación utilizada.

Exadat: Análisis de Variabilidad en Persistencia de Productos de Software on Prezi

Participación, Encuentro TIC: Tecnologías Abiertas

2011-08-28T16:09:00.000-03:00

En primer lugar agradecer la invitación y la buena onda puesta en todo el evento al GTUG Santa Fe. También la organización y logística de FICH UNL y todo su equipo.
Realmente fue muy cordial el momento de la conferencia, con un ambientes predipuesto al intercambio de opiniones, al crecimiento tecnológico y a la posibilidad de seguir un camino de innovación utilizando herramientas Google.

Información del evento:

http://fich.unl.edu.ar/encuentrotic/pagina/programa/
http://santafegtug.appspot.com/blog/encuentro-tic--tecnologias-abiertas

Les dejo las presentaciones utilizadas en el marco de la conferencia "Movilidad y aplicaciones Web Mobile", y "Mobila Future"

El escenario de "Mobile Future" tiene referencias en información de base que aporta a la presentación oficial de "Movilidad y aplicaciones Web Mobile".

Conferencia GWT, Esto es Google Mexico

2011-08-25T16:04:00.000-03:00

En este artículo les comparto el vídeo oficial de la conferencia "GWT, conceptos esenciales para desarrolladores modernos", pero antes es fundamental dar una mirada al tremendo evento en forma general y las actividades vividas en este formato propuesto de 3 días. Para ello, les comparto el vídeo con las actividades en "Esto es Google" compaginadas.

Ahora si ya para terminar, les comparto el vídeo de la conferencia en su totalidad.

Antes de terminar los agradecimiento a toda la organización de Google Mexico, a todos los asistentes del evento, la conferencia y al equipo de ingenieros de Google que tan buena onda le ponen a cada actividad.

Hasta la próxima.

El despertar de la Cloud, XVI Congreso Internacional de Ingeniería VISIÓN 2011

2011-08-17T10:21:00.000-03:00

En esta oportunidad les comento una gran experiencia vivida en la conferencia "El despertar de la cloud, mitos, verdades y propuestas" en el marco del XVI Congreso Internacional de Ingeniería VISIÓN 2011.

Les dejo el material utilizado para presentación y además un especial agradecimiento a la organización de la USMP que tan cordialmente siempre realizan todas las actividades, a todo el equipo responsable del evento y a Juan José Rodriguez un excelente facilitador de la conferencia.

En estas condiciones si es posible la "innovación para todos"..

Conferencia "Sinapsis Enfoque Universitario" Esto Es Google 2011

2011-08-13T13:42:00.000-03:00

En esta oportunidad les dejo la presentación de la conferencia "Sinapsis Enfoque Universitario" realizada en el marco del evento "Esto es Google" donde se analizaron tópicos relacionados con un modelo educativo, esperiencia y resultados enfocados a la educación y capacitación en tecnologías Google.

http://www.estoesgoogle.com/

Realmente quiero agradecer la cordialidad de todo público que conformó el evento y la sesión para lograr un gran ambiente de presentación y un excelente intercambio de opniones.

Conferencia "GWT, conceptos esenciales para desarrolladores modernos", Esto Es Google

2011-08-10T12:39:00.000-03:00

En esta oportunidad les dejo la presentación de la conferencia realizada en el marco del evento "Esto es Google" donde se analizaron tópicos relacionados con la tecnología GWT, principalmente enfocados en UI, GWT RPC and GWT y el Datastore..

http://www.estoesgoogle.com/

Realmente quiero agradecer la cordialidad de todo público que conformó el evento y la sesión para lograr un gran ambiente de presentación.

GWT Conference Challenge, Esto es Google

2011-08-09T14:38:00.000-03:00

En esta oportunidad quiero compartir con ustedes el diseño de un conference challenge que se lanzará en la sesión GWT conceptos esenciales para desarrolladores modernos.

Las actividades se lanzan con un quiz simple del primero de los segmentos conceptuales tratados en la conferencia y recorrerá tres globos de requerimientos, actividades y vídeos de implementación.

Trataremos lógicamente la tecnología GWT en tres escenarios:

Globo de UI: en este segmento analizaremos el manejo de la interfaz de usuario.
Globo de RPC: en este segmento analizaremos uno de los mecanismos de comunicación.
Globo de DS: en este escenario final analizaremos la persistencia básica.

Quien esté interesado en conocer más sobre el desafío, les dejo una presentación sobre el mismo muy simple..

Ver presentación

El objetivo es divertirse, aprender e innovar con herramientas para desarrolladores modernos..

¿Empezamos?

Inicio

Diplomado en tecnología Google, USMP

2011-07-25T13:02:00.001-03:00

En esta oportunidad tengo el agrado de comentarles, que en pocos días iniciará un proyecto muy interesante en el cual me encuentro implicado como docente.
Se trata de un escenario de capacitación virtual, en donde la USMP propone un plan de trabajo sobre tecnología Google orientado netamente a la cloud de gran contenido.

El diplomado consta de varios cursos como por ejemplo:

Introducción a las API's de Google
Google App Scripts
Google App Engine Básico
Google App Engine Avanzado

Pueden consultar más sobre los tópicos y tecnología incluida en la presentación siguiente.

También pueden visitar el site oficial: Ver Site

Utilizando Intents implícitos para crear actividades

2011-05-11T09:49:00.001-03:00

Antes de comenzar la actividad de desarrollo vamos a definir de que se trata, cuando establecemos que utilizaremos intents implícitos en la solución mobile de Android.

Los intents implícitos se utilizan cuando no se especifica un componente exacto a utilizar, en su lugar, se especifica la funcionalidad requerida a través de una acción (por ejemplo, 'ver', 'hacer búsqueda', 'marcar') y un dato (por exemplo, la URL de la página que se desea ver, el número que se desea marcar), y Android debe determinar el mejor componente para su utilización. Esa es una de las características más interesantes de Android, porque permite que una aplicación desencadene un “Intent” sin conocer exactamente cuál será la aplicación o componente que lo recibirá, y por eso puede interactuar con otras aplicaciones de manera muy flexible
El filtro más comunmente utilizado es una acción, y la acción más común tiene que ver con el modo ACTION_VIEW.

Los pasos básicos para lanzar una actividad utilizando un “intent implícito” serían:

Declarar el “intent” con la acción apropiada apropiada por ejemplo, ACTION_VIEW, ACTION_WEB_SEARCH, etc.

Adjuntar información adicional necesaria según la acción del intent.

Lanzar el intent (y dejar que el sistema encuentre la Actividad más adecuada).

Vamos a generar un ejemplo programático que nos permita comprender el mecanismo de utilización de los “intents” en Android.
Los intents son muy utilizados en todos los desarrollos mobile que se generen en Android, como les comenté podemos optar por utilizarlos de forma explicita o implícita, la segunda de las opciones es la seleccionada para este articulo.

Tecnología

- Android 2.3.3
- Entorno de desarrollo Eclipse (Helios)

Actividad simple utilizando intents implícitos

En primer lugar, vamos a generar una actividad simple que nos permita reaccionar a un evento. La idea, es una interfaz grafica simple con un botón que permita realizar el lanzamiento de diversas opciones de intents útiles, que podemos requerir para un desarrollo mobile.

Tendremos que resolver estás situaciones:

- Navegar en un sitio Web
- Abrir los contactos de mi directorio y navegar en ellos.
- Iniciar una llamada telefonica en un número especifico.
- Realizar un busqueda en Google pasando una cadena de búsqueda.
- Comando de voz

En cada una de las actividades declaradas, utilizaremos un manejador del click de un botón para lanzar el “intent”.

Button btnLanzar = (Button)findViewById(R.id.button1);
btnLanzar.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {

}
});

Code 1 - Manejador del botón lanzar.

Utilizaremos “startActivity(intent)” para iniciar la actividad, esta operación pertenece al paquete “android.app” particularmente a la clase “Activity”, esta operación inicia una actividad, pero como característica fundamental es necesario comentar, de la misma no recibiremos información al cerrarse.
Puede ampliar esta información en el siguiente vínculo oficial Ver. (Inglés)

Como parámetro la operación “startActivity” genéricamente llevará un “intent” y algun otro dato. Veamos la estructura de un “intent”.
El “intent” pertenece al paquete “android.content”. Se puede decir que un “intent” es una descripción abstracta de una operación que se realizará. Su uso más importante es el inicio de las actividades, en el que se puede considerar como el pegamento entre las actividades en la soluciones mobile Android

Sus principales componentes son:
- Una Acción
- Datos (expresado como URI)

Puede ampliar esta información en el siguiente vínculo oficial Ver. (Inglés)

Navegar por un sitio Web

En este ejemplo utilizaremos la creación de un nuevo “intent” con la acción “ACTION_VIEW” y como datos pasaremos la dirección web “http://www.google.com/”.

startActivity(new Intent(Intent.ACTION_VIEW,Uri.parse("http://www.google.com/")));

Code 2 - Lanzamiento de un “intent” para navegar por un sitio web.

Un aspecto importante a remarcar en este escenario es, no estamos necesariamente lanzando el Browser del sistema, lo que estamos haciendo es decirle al sistema que queremos ver la pagina “http://www.google.com”. El sistema tomará la decisión de cual es la aplicación más adecuada, que puede ser, el Browser del dispositivo o quizás otra aplicación que el usuario tenga instalado, podría ser otro Browser (Firefox, por ejemplo). Por esa razón este intent se llama implícito. No estamos especificando una aplicación o componente especifico.

Operar los contactos de mi directorio

En este ejemplo utilizaremos la creación de un nuevo “intent” con la acción “ACTION_VIEW” y como datos pasaremos “content://contacts..” para realizar la operación de visualización de contactos de mi directorio.

startActivity(new Intent(Intent.ACTION_VIEW,Uri.parse("content://contacts/people/")));

Code 3 - Lanzamiento de un “intent” para abrir los contactos de mi directorio y navegarlos.

A remarcar “content://contacts/people/" es una URI que representa la colleción de contactos del directorio.

Iniciar una llamada telefonica

En este ejemplo utilizaremos la creación de un nuevo “intent” con la acción “ACTION_VIEW” y como datos pasaremos “tel:73647832” esto colocará la aplicación en el escenario de llamada telefonica para confirmar la llamada al número representado.

startActivity(new Intent(Intent.ACTION_VIEW,Uri.parse("tel:34247")));

Code 4 - Lanzamiento de un “intent” para utilizar la interfaz telefónica.

Realizar un busqueda en Google

En este ejemplo utilizaremos la creación de un “intent” pero lo realizaremos de forma separada inicialmente para luego poder insertar una Query al mismo. Hay algunos intents que necesitarán más que una acción y una URI. Esas datos adicionales se llaman "extras" y se los puede añadir con “Intent.putExtra” como muestra el ejemplo del Code 5.

Intent intent= new Intent(Intent.ACTION_WEB_SEARCH );
intent.putExtra(SearchManager.QUERY, "Bortolotti");

startActivity(intent);

Code 5 - Lanzamiento de un “intent” con una búsqueda web.

Lanzamiento de un comando de voz

En este ejemplo utilizaremos la creación de un nuevo “intent” con la acción “ACTION_VOICE_COMMAND”

startActivity(new Intent(Intent.ACTION_VOICE_COMMAND));

Code 6 - Lanzamiento de un “intent” para relizar una llamada a comando de voz.

Vídeo de implementación

Código fuente de implementación

Descargar

Espero les sea de utilidad..

Referencias

- Sitio Oficial Android, http://developer.android.com/reference/, 2011.
- Manning Android in Action 2nd.Edition - W. Frank Ableson, Robi Sen, Chris King, 2011.
- The Android Developers Cookbook - Steele and To, 2010.

Operando datos contra el servidor utilizando GWT RPC

2011-03-03T12:24:00.001-03:00

Tecnología

- Entorno de desarrollo Eclipse Helios:

http ://www .eclipse .org /

- GAE y GWT:

http ://code .google .com /webtoolkit /

http ://code .google .com /appengine/

Para realizar esta actividad es necesario introducir algunos conceptos propios de la tecnología que estamos utilizando. Para este caso seguramente les viene en mente que al realizar una solicitud de datos al servidor, lo tenemos que realizar de forma síncrona, sin bien esto es muy variable y dependiendo del lector y su experiencia pueden interpretar que está demás el comentario. Les comento que al hacer uso de GWT, el desarrollador está obligado a utilizar un mecanismo de comunicación asincrónico, por este motivo vamos a utilizar una serie de pasos que les serán de gran utilidad al incorporar desarrollo sobre GWT y GAE.

Introducción

Para esta actividad tenemos que tener en cuenta 4 pasos fundamentales:

1. Crear el servicio de solicitud de préstamo

2. Implementar el mecanismo RPC sobre GWT del servicio de préstamo

3. Crear la interfaz asincrónica

4. Invocar el servicio de solicitud de préstamo.

La idea del requerimiento a resolver para nuestra actividad es generar un servicio que pueda responder a la solicitud de aprobar o denegar un préstamo. Esta implementación está claramente simulada ya que el objetivo es, comprender como utilizar el mecanismo RPC que propone GWT.

En primer lugar vamos a analizar la anatomía de GWT RPC.

Fig. 1 Anatomía de GWT RPC

En la Fig. 1 se muestra la anatomía de GWT RPC, podemos visualizar en anaranjado los elementos importados desde el framework, en celeste los elementos que generaremos para la implementación y en verde la llamada al proxy desde el entrypoint para poner en funcionamiento el mecanismo.

Crear el servicio de solicitud de préstamo (cliente)

Para este primer segmento de actividad vamos a situarnos en el paquete “cliente” del modelo que propone GWT. Generamos en este momento la interfaz del servicio de préstamo.

Fig.2 - Implementación en Eclipse de “solicitudService.java”.

package ar.com.comunidadxcloud.nbortolotti.client;

import com.google.gwt.user.client.rpc.RemoteService;

import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;

@RemoteServiceRelativePath("sol")

public interface solicitudService extends RemoteService

{

public Boolean solicitud(String email, String nombre);

}

Code 1 - Interfaz del servicio de préstamo

La Fig.2 muestra la implementación de la interface del servicio de préstamos en el cliente. El Code 1 expone el código fuente detallado utilizado en “solicitudService.java”, como podemos observar opté por segmentarlo en 3 filas que muestra:

● Fila 1: Paquete en que se encuentra el código fuente referenciado.

● Fila 2: Importaciones de librerías necesarias para la implementación del código fuente.

● Fila 3: interface que permitirá implementar el servicio de solicitud sobre el mecanismo RPC de GWT, para remarcar tengo que exponerles la herencia de “RemoteService” clase que proviene de las librerías rpc de Google GWT.

Es de vital importancia analizar el atributo @RemoteServiceRelativePath("sol") , este se vincula directamente con el “url-pattern” del “servlet-mapping”, establecidos en el archivo “web.xml”.

Implementar el mecanismo RPC sobre GWT del servicio de préstamo (servidor)

Ahora vamos a generar el mecanismo de implementación del servicio. Esto está basado en un Java Servlet. Vamos a heredar de “RemoteServiceServlet” e implementar el servicio de solicitud.

Fig.3 - Implementación en Eclipse del servicio “solicitudServiceImpl.java”.

package ar.com.comunidadxcloud.nbortolotti.server;

import com.google.gwt.user.server.rpc.RemoteServiceServlet;

import ar.com.comunidadxcloud.nbortolotti.client.solicitudService;

import ar.com.comunidadxcloud.nbortolotti.shared.userDTO;

@SuppressWarnings("serial")

public class solicitudServiceImpl extends RemoteServiceServlet implements solicitudService

{

public Boolean solicitud(String email, String nombre)

{

//Genero un objeto simulando una búsqueda

userDTO usuario = new userDTO(email, nombre, 2);

if(usuario.getCodigoImportancia()== 1)

{

return Boolean.TRUE;

}

else

{

return Boolean.FALSE;

}

Code 2 - Implementación del servicio “solicitudService”

La Fig.3 muestra la implementación en Eclipse de servicio de solicitudes. El Code 2 expone el detalle de implementación, nuevamente está segmentado en 3 filas, analicemos cada una de las mismas.

● Fila 1: Paquete en que se encuentra el código fuente referenciado, como pueden observar su ubicación es el servidor.

● Fila 2: Dentro de las librerías referenciadas se encuentra la más importante en cuanto a la tecnología utilizada “RemoteServiceServlet” desde la cual vamos a heredar el comportamiento y utilizaremos el paquete cliente para implementar la interfaz que creamos en el paso anterior “solicitudService”.

● Fila 3: en esta fila se encuentra la implementación simulada de un método de aprobación o recazo de solicitudes de préstamo. Podemos remarcar la herencia desde “RemoteServiceServlet” y la implementación de la interface “solicitudService”. Luego se crea un objeto a manera de similar datos desde un entorno de datos y finalmente se muestra una estructura que determinar el verdadero o falso de la implementación.

Antes de pasar el siguiente paso es necesario que configuremos el archivo “web.xml”, donde se declaran los servlet en GWT.

La Fig. 4 expone esta configuración en Eclipse donde se debe prestar especial atención a sus partes constitutivas.

Fig.4 - Configuración del servlet en “web.xml”

….

solicitudServlet

ar.com.comunidadxcloud.nbortolotti.server.solicitudServiceImpl

….

solicitudServlet

/siscti_cloud_demotracion/sol

....

Code 3 - Detalle de la configuración del servlet en GWT.

El code 3, muestra la declaración del servlet y luego el mapeo del servlet, dos actividades importantes para la configuración del servicio en GWT.

Crear la interfaz asincrónica (cliente)

Finalmente antes de generar la llamada al servicio creado vamos a generar la interface asincrónica ubicada en el paquete cliente.

Fig.5 - Implementación de la Interface asincrónica en Eclipse.

La Fig. 5 muestra la implementación en Eclipse de la interface asincrónica, que como podemos observar se encuentra como complemento del servicio en el paquete cliente.

package ar.com.comunidadxcloud.nbortolotti.client;

import com.google.gwt.user.client.rpc.AsyncCallback;

public interface solicitudServiceAsync

{

void solicitud(String email, String nombre, AsyncCallback callback);

}

Code 4 - Detalle de la implementación de la interface “solicitudServiceAsync”

El code 4, muestra el detalle de implementación segmentando nuevamente en filas el código fuente.

● Fila 1: Paquete en que se encuentra el código fuente referenciado, como pueden observar su ubicación es el cliente.

● Fila 2: Referencias a librerías en este caso hacemos uso de “AsyncCallback” para el mecanismo asincrónico.

● Fila 3: La declaración de la interface asincrónica con su firma correspondiente.

Invocar el servicio de solicitud de préstamo (cliente).

Con este paso, completamos la implementación de nuestro servicio, vamos a invocar desde el “EntryPoint” del aplicativo concretamente en el evento “onModuleLoad” la llamada al servicio.

La idea es que permita ingresar un e-mail y un nombre de usuario, con esto ir a buscar si este usuario está en condiciones de solicitar un préstamo y devolver esta información.

public class Siscti_Cloud_Demotracion implements EntryPoint {

private final solicitudServiceAsync solService = GWT.create(solicitudService.class);

public void onModuleLoad()

{

final Button sendButton = new Button("Enviar"); //Botón de Envío

final TextBox nameField = new TextBox(); //Texto del nombre del usuario

nameField.setText("Usuario");

final TextBox emailField = new TextBox(); //Texto del nombre del email

emailField.setText("Email");

final Label errorLabel = new Label();

sendButton.addStyleName("sendButton"); //Estilo del botón

RootPanel.get("nameFieldContainer").add(nameField);

RootPanel.get("emailFieldContainer").add(emailField);

RootPanel.get("sendButtonContainer").add(sendButton);

RootPanel.get("errorLabelContainer").add(errorLabel);

nameField.setFocus(true); nameField.selectAll();

//Manejador

class MyHandler implements ClickHandler

{

public void onClick(ClickEvent event) {

enviarsolicitud();

}

private void enviarsolicitud()

{

String usuario = nameField.getText();

String email = emailField.getText();

solService.solicitud(email, usuario,new AsyncCallback()

{

public void onFailure(Throwable c)

{

Window.alert("Error");

}

public void onSuccess(Boolean result)

{

if(result == Boolean.TRUE)

{

Window.alert("solicitud Aprobada");

}

else

{

Window.alert("solicitud Rechazada");

}

});

}

//Manejador al Server

MyHandler handler = new MyHandler();

sendButton.addClickHandler(handler);

}

Code 5- Invocación del servicio.

El code 5 muestra la implementación del servicio, donde en primer lugar se arma la UI para colocar controles en donde el usuario pueda ingresar los datos del e-mail, nombre de usuario y el botón de acción. Luego se implementa el “ClickHandler” del botón, para finalmente implementar el método ”enviarSolicitud” que realizar la invocación al servicio y propone dos caminos, “Failure” o “Success” por el camino exitoso se evalúa la respuesta y se muestra el resultado al usuario. Para remarcar es necesario aclarar que esta interacción representada se realiza de forma asincrónica y la estructura plantea como pueden observar en el Code 5 la posibilidad de manejar una excepción que puede desencadenarse por varios motivos pero en los escenarios de comunicación son notoriamente más críticos. En el ejemplo representado en el Code 5, podemos observar que en el evento “onFailure” se recibe como parámetro un objeto de tipo “Throwable” que trae consigo mucha información de la excepción en el caso de desencadenarse, igualmente la implementación mostrada solo muestra un mensaje materializando un error, no brinda información extra.

Para completar este articulo, les dejo el diseño vinculado a la página de visualización html, “Siscti_Cloud_Demotracion.html”

Code 6 - Html de implementación del servicio.

El code 6 muestra resaltado el enlace con los controles programados en el entrypoint para la operación de invocación del servicio de solicitudes.

La Fig 6 muestra el resultado final de la página.

Fig. 6 - Muestra de la página final mostrada al usuario.

Les dejo la implementación en el siguiente vídeo.

Espero les sea de utilidad…

Interfaz de usuario sobre GWT - Programando la UI

2011-02-26T18:12:00.002-03:00

En esta actividad vamos a trabajar en el desarrollo de la UI[1] en GWT[2] de una manera programática, esto quiere decir que optaremos por una de las opciones que nos propone la tecnología GWT para diseñar nuestra presentación de la solución.

Introducción

Siempre que diseñemos la UI en GWT tendremos que pensar en dos conceptos fundamentales para la organización de la presentación:

● Widgets

● Paneles

Los widgets definen las entradas y salidas de una aplicación GWT, como ejemplo de este concepto se encuentran:

● Buttons (botones)

● Textbox (cajas de texto)

● Tree (arboles)

● RichTextArea (editores de texto)

Los paneles contienen los widgets y otros paneles y se encargan de la organización en la presentación, como ejemplo de este concepto se encuentran:

● DockPanels

● HorizontalPanel

● TabPanel

● RootPanel

Si quiere ampliar los conceptos puede consultar la siguiente documentación oficial:

http ://code .google .com /intl /es /webtoolkit /doc /1.6/DevGuideUserInterface .html

Para el desarrollo de nuestra actividad diseñaremos una UI que respecte el diseño de la Fig. 1.

Segmento A

Segmento B

Fig. 1 - Diseño de Interface

En la Fig. 1, en el segmento “A”, se puede observar un rootPanel que es quien contiene toda la aplicación GWT y un verticalPanel para una organización vertical de los widgets, luego en el segmento “B” se visualiza un Textbox, un Button y un RichTextArea representados en el verticalPanel.

En este caso particular ya conocemos el diseño porque es lo que propongo en la actividad pero les dejo los simples 4 pasos para trabajar el UI en GWT de forma programática.

● Seleccionar los widgets a incluir en la UI.

● Seleccionar los paneles y su organización.

● Añadir la aplicación diseñada a la página principal.

● Implementar los widgets y paneles.

Seleccionando los widgets a incluir en la UI

En esta actividad estaríamos seleccionando los widgets a utilizar, según nuestra actividad:

● Textbox

● Button

● RichTextArea

Seleccionando los paneles y la organización de widgets en los mismos.

En esta actividad estaríamos analizando los paneles a utilizar y la organización de los mismos junto con los widgets, según nuestra actividad:

● RootPanel

● VerticalPanel

Añadir la aplicación de UI en la página principal

En esta actividad vamos a trabajar dentro de la anatomía de una aplicación GWT en el segmento de “war” para editar la página principal de la aplicación.

Code 1 - Página principal html de la aplicación de ejemplo

Implementar los widgets y paneles

Esta actividad tiene varias tareas para realizarla de una forma controlada.

Realizar la instancia de cada widget y panel

En esta tarea debemos instanciar cada widget y panel, esta programación la realizaremos en el entrypoint de la aplicación como muestra el Code 2.

package ar.com.comunidadxcloud.nbortolotti.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.user.client.ui.Button;

import com.google.gwt.user.client.ui.RichTextArea;

import com.google.gwt.user.client.ui.TextBox;

import com.google.gwt.user.client.ui.VerticalPanel;

public class Siscti_Cloud_Demotracion implements EntryPoint {

private VerticalPanel mainPanel = new VerticalPanel();

private TextBox nombreRegistro = new TextBox();

private Button aceptarRegistro = new Button();

private RichTextArea descripcionRegistro = new RichTextArea();

public void onModuleLoad()

{

}

Code 2 - Instanciando cada uno de los widgets y panels.

El Code 2 muestra el código fuente de implementación de la instancianción de los widgets y panels segmentando el mismo en partes:

● Parte 1: declaración del paquete donde se está realizando la actividad. (cliente)

● Parte 2: importaciones necesarias para la tarea, esto principalmente utiliza EntryPoint ya que la clase es de ese tipo y lo correspondiente a los widgets y panel.

● Parte 3: el segmento de código sobre el EntryPoint, aún no hemos programado nada en el evento “onModuleLoad”.

Organizar los widgets en los paneles correspodientes

En esta tarea nos centramos en el evento “onModuleLoad”, para organizar los widgets en los paneles. Para el ejemplo de esta actividad solo tenemos un panel vertical.

public void onModuleLoad()

{

//Ensamblando los widgets al panel vertical

mainPanel.add(nombreRegistro);

mainPanel.add(aceptarRegistro);

mainPanel.add(descripcionRegistro);

}

Code 3 - Ensamblando los widgets al panel vertical.

Asociar el RootPanel al panel contenedor principal

En esta actividad se asocia el panel raíz con el panel contenedor principal, para este caso el VerticalPanel que declaramos y ensamblamos en la tarea anterior.

public void onModuleLoad()

{

//Ensamblando los widgets al panel vertical

mainPanel.add(nombreRegistro);

mainPanel.add(aceptarRegistro);

mainPanel.add(descripcionRegistro);

RootPanel.get("interfaceDemo").add(mainPanel);

}

Code 4 - Asociación del RootPanel al panel contenedor principal.

Como muestra el Code 4, se asocia el “VerticalPanel” de nombre “mainPanel” al “RootPanel” solo debemos tener en cuenta que el nombre “interfaceDemo” llega de la declaración utilizada en el html de la página principal.

Trabajar con el foco de los widgets

Esta tarea es opcional pero interesante de realizarla, en este caso le daremos el foco al textbox.

public void onModuleLoad()

{

//Ensamblando los widgets al panel vertical

mainPanel.add(nombreRegistro);

mainPanel.add(aceptarRegistro);

mainPanel.add(descripcionRegistro);

RootPanel.get("interfaceDemo").add(mainPanel);

nombreRegistro.setFocus(true);

}

Code 5 - Trabajo con el foco de los widgets

Como muestra el Code 5, se utiliza el método “setFocus” del widget que seleccionemos para focalizar.

Prueba de la Aplicación

Finalmente hemos terminado de configurar la UI, procederemos a visualizar los resultados.

Fig 2 - Visualización final de la actividad

Les dejo la implementación en el siguiente vídeo.

Espero les sea de utilidad…

[1]User Interface

[2]Google Web Toolkit

Nicolas Bortolotti

Ecosistema e innovación en videojuegos..GGJ 2012

Global Game Jam 2012, Cordoba Argentina

LookThisCode ¿Que opinas de este código fuente Google?

Crear gráficos desde un spreadsheet de Google Docs

El HTML y Js que creamos interactua con la jsapi y extrae los datos de nuestro documento en Google Docs, para realizar la renderización del contenido donde el desarrollador tenga como requerimiento. Que utilizamos para el desarrollo

El HTML y Js que creamos interactua con la jsapi y extrae los datos de nuestro documento en Google Docs, para realizar la renderización del contenido donde el desarrollador tenga como requerimiento.

Que utilizamos para el desarrollo

Como lo desarrollo en la cloud

Tecnología

Conferencias completas 3 Day Startup Chile 2011

Conferencia Mobile Future enfoque Android

Conferencia El despertar de la cloud, enfoque Google App Engine

Conferencia sobre desarrollo en la Cloud , EduTicInnova 2011

Conferencia sobreMovilidad y aplicaciones Web Mobile

¿Que clase de arquitecto conoces?

Android Media Support to Your Application

Sinapsis Universidad, La comunidad latianoamericana

Presentación de EXADAT en JAIIO 2011 Simposio ASSE

Participación, Encuentro TIC: Tecnologías Abiertas

Conferencia GWT, Esto es Google Mexico

El despertar de la Cloud, XVI Congreso Internacional de Ingeniería VISIÓN 2011

Conferencia "Sinapsis Enfoque Universitario" Esto Es Google 2011

Conferencia "GWT, conceptos esenciales para desarrolladores modernos", Esto Es Google

GWT Conference Challenge, Esto es Google

Diplomado en tecnología Google, USMP

Utilizando Intents implícitos para crear actividades

Actividad simple utilizando intents implícitos

Operar los contactos de mi directorio

Iniciar una llamada telefonica

Realizar un busqueda en Google

Lanzamiento de un comando de voz

Vídeo de implementación

Código fuente de implementación

Referencias

Operando datos contra el servidor utilizando GWT RPC

Introducción

Crear el servicio de solicitud de préstamo (cliente)

Implementar el mecanismo RPC sobre GWT del servicio de préstamo (servidor)

Crear la interfaz asincrónica (cliente)

Invocar el servicio de solicitud de préstamo (cliente).

Interfaz de usuario sobre GWT - Programando la UI

Introducción

Seleccionando los widgets a incluir en la UI

Seleccionando los paneles y la organización de widgets en los mismos.

Añadir la aplicación de UI en la página principal

Implementar los widgets y paneles

Realizar la instancia de cada widget y panel

Organizar los widgets en los paneles correspodientes

Asociar el RootPanel al panel contenedor principal

Trabajar con el foco de los widgets

Prueba de la Aplicación

El HTML y Js que creamos interactua con la jsapi y extrae los datos de nuestro documento en Google Docs, para realizar la renderización del contenido donde el desarrollador tenga como requerimiento.

Que utilizamos para el desarrollo