Actualmente nos encontramos inmersos es un mundo donde la interacción social a cubierto la vida de gran parte de población mundial, día a día estamos representando más actividades en un mundo virtual. Este nuevo enfoque y la innovación sobre el mismo nos permitirá cruzar de nivel, pero sin lugar a dudas el éxito dependerá de la potencia de las plataformas sociales.

Introducción

En este articulo vamos analizar una estructura básica de desarrollo, exponiendo la  potencialidad que propone la plataforma social Google+ y particularmente la API de Hangouts.

Desde que llegaron los HO (hangouts) la forma de interacción social es mucho más dinámica, y actualmente es posible compartir de forma muy dinámica información con mi red de contactos de una manera muy intuitiva. Ahora la pregunta a responder es ¿Que potencia tiene esta API?

Estructura de una solución para Hangouts API

¿Que necesito saber para desarrollar una solución innovadora utilizando Hangouts API?
- Archivo XML
- Archivo JS

Elementalmente con estos dos componentes puedo generar una solución para HO. Luego puedo ampliar su potencia alojando en la solución cloud de plataforma App Engine.


Figura 1 - Activando Hangouts API desde la consola de Google APIs

El primero de los pasos básico que vamos a realizar es utilizar la consola de Google APIs para activar un proyecto y la API de Hangouts como muestra la Figura 1.


Figura 2 - Configurando la solución de Hangouts

Luego como muestra la Figura 2, podemos configurar los elementos fundamentales de la aplicación. Finalmente debemos alojar los archivos en la solución y en este caso los vamos a realizar en App Engine.

Generalidades de código

El eje central de la aplicación que debe hacer referencia desde la consola de Google APIs es el gadget XML. Veamos como realizar esta operación

Veamos la estructura inicial de una solución para Hangouts:

<ModulePrefs title="Starter App">
    <Require feature="rpc"/>
  </ModulePrefs>
  <Content type="html"><![CDATA[
<!DOCTYPE html>
<!-- The hangout API JavaScript. Always include this first -->
<script src="//hangoutsapi.talkgadget.google.com/hangouts/api/hangout.js?v=1.2"></script>

<!-- The JavaScript for this app. This must always be a full URL not a
     relative path.
     Tip: You can load it from a local web server such as
     http://localhost/app.js for faster single user development -->
<script src="//YOUR_APP_ID.appspot.com/static/app.js"></script>

<h1><img src="//YOUR_APP_ID.appspot.com/static/hangouts-logo.png" 
    alt="Google+ Hangouts Logo" height="50" width="50">Starter App</h1>
<div style="float: left; padding: 0px 20px">
  <p>Fetch some JSON from main.py</p>
  <dl>
    <dt>Message:</dt>
    <dd id="message"></dd>
  </dl>
  <input type=button value="Get Message" id="getMessageButton"
      onClick="getMessageClick()"/>
</div>
<div style="clear: both;"></div>

]]></Content>
</Module>


Código 1 - Gadget XML estándar

Como pueden observar en el Código 1 la estructura que propone el XML permite representar mediante un HTML una solución y aplicación que se visualizará en un Hangout.

var serverPath = '//YOUR_APP_ID.appspot.com/';

// The functions triggered by the buttons on the Hangout App
function countButtonClick() {
  // Note that if you click the button several times in succession,
  // if the state update hasn't gone through, it will submit the same
  // delta again.  The hangout data state only remembers the most-recent
  // update.
  console.log('Button clicked.');
  var value = 0;
  var count = gapi.hangout.data.getState()['count'];
  if (count) {
    value = parseInt(count);
  }

  console.log('New count is ' + value);
  // Send update to shared state.
  // NOTE:  Only ever send strings as values in the key-value pairs
  gapi.hangout.data.submitDelta({'count': '' + (value + 1)});
}


Código 2 - Javascript básico adjunto al Gadget XML estándar

El Código 2 es un extracto donde se muestra como puedo agregar funcionalidad a el HTML incrustado en el archivo XML inicial que planteamos como elemento de una solución para Hangouts.

La opciones de innovar con estas soluciones sociales son ilimitadas, les comparto un articulo en donde se exponen opciones para la detección y reconocimiento de rostro basado en estas soluciones que analizamos en el articulo. Hangout API ¿Potencia Social?



Nicolás Bortolotti   Perfil | Twitter | Blog | G+ 

Nicolás es director de relaciones para desarrolladores en latinoamérica región sur para Google. El ha desarrollado comunidades académicas y de investigación en varios países de Latinoamérica sobre la plataforma de desarrollo web y mobile de Google. Además Nicolas es profesor universitario, donde trabaja fuertemente en arquitecturas de software, ambientes emergentes e innovación en modelos de ingeniería de software

Hemos abordado el tema en detalle en nuestra sesión semanal de Developers Live para desarrolladores en español. Plataforma social Google+, innovación para desarrolladores

Nivel: Inicial
Les dejo el video de implementación con la demostración paso a paso:



Referencias

- https://developers.google.com/+/hangouts/

Código Fuente
https://github.com/nbortolotti/dvLatamSouthRegion
(Segmento "Programa con Google")