abril 22, 2010

Adonde queremos llegar...


Recuerde que..
Este blog esta desarrollado en idioma español pero utilizando Google Traductor puede adecuarlo al lenguaje de su preferencia.. Favor utilice la opcion del recuadro superior derecho... y Bienvenido a Integracion Google.


Hi my friend.. Thanks so much for your interesting in our Integracion Google project.. para las personas como tú que han revisado nuestro Blog y les interese los temas propuestos, debe saber tambien cuales son nuestras inquietudes y expectativas respecto a nuestro proyecto.

Queremos llegar a ser un Developer Codelab Group, por cuanto, aunque pertenezco a GTUG-Peru (Grupo de Usuarios de la Tecnología Google), y  allí nos dedicamos a la investigación y aprendizaje de las herramientas y API de Google, muchas veces no contamos con una biblioteca de casos prácticos que "funcionen", que sean lo suficientemente explicados y que no sean excesivamente extensos, para que nos sirvan como modelos o tips de desarrollos propios.. aparte que el mundo Google y del desarrollo Web es realmente bastante grande, y las agendas de los GTUG pues a veces tienen agendas específicas, que por cierto son importantes, pero que tal vez no coincida con nuestras urgencias e intereses, ..o incluso algunas veces se pierde algo del entusiasmo del grupo y no se avanza como se quisiera, o se nos presentan tantas cosas que avanzamos varias cosas pero no profundizamos mucho.. en fin.. hasta el propio Google Developer Cpdelabs es aun a nuestro criterio, bastante corto para todo lo que comprende el mundo Google y el Desarrollo Web en general.





..si hacen click en la imagen de Google de inicio de esta entrada, ó en la pestaña Codelab del menu de nuestro blog, también serán dirigidos a la pagina Google Developer Codelab, que como verán, tiene unos ejemplos prácticos de introducción (y esos casos son los que a veces se llevan en los GTUG), pero considero que tomando en cuenta el enorme aporte de Google al desarrollo Web, esto aún esta iniciándose... (hay otros Tutoriales diseminados en las diversas paginas de Google Code que son muy importantes: como es el caso de Google AppEngine y Google GWT, entre otros)




Así nació este Blog y el proyecto Integración Google, para que aparte del grupo que pertenezcamos, o de nuestro interés personal ó profesional, pues tal vez lleguemos a formar una biblioteca de casos prácticos y códigos "completos" (ó que requieran realizar configuraciones menores), y que podamos instalar y probar en nuestros servidores locales de prueba, y que se nos explique los fundamental de su construcción y funcionamiento..y sobre todo, que funcionen !.. y así considero que se logrará agilizar nuestra curva de aprendizaje y  realmente aprenderemos... y hasta incluso usar los códigos como modelos,  los podremos utilizar en nuestros propios desarrollos Web..


IMPORTANTE:
La idea es que revisen de vez en cuando los temas planteados pues ingresaremos comentarios o información en cada tema cuando sea necesario, mejoras del código, en fin... formar nuestra biblioteca de códigos.


Mucho me gustaría que se difunda el interés por participar en este tipo de proyectos.. por lo que si tienen algún código que deseen compartirlo será bienvenido, indiquemos un link de donde bajarlo (a través de Google Docs, de sus blogs o paginas personales por ejemplo), o envíelos a nuestros mails (imagen Contact Us de nuestro blog), ..y nosotros nos comprometemos a revisarlos, probarlos, mejorarlos si es posible, ..y por supuesto... publicarlos en este Blog, ahora si la comunicación y afinidad con nosotros se hace mas fluída, no duden que podrán participar en la administración y publicación de temas y entradas.. y tambien por supuesto que el dominio de este Blog será cambiado a otro más alusivo a este anhelo: Integracón Google Codelab Group.

Mucho nos gustaría hacer crecer rapidamente este proyecto pero las cosas siempre tienen su tiempo y su costo para organizarse, y formar una organización "sin fines de lucro" no debe significar que se trabaje a pérdida.. ..y bueno, como era de esperar, ya formamos parte del mundo de la publicidad que propicia Google a través de Adsense e Infolinks para ver si logramos financiarnos algo, vamos a ver como va así (y esperamos que tomen en especial consideración los anuncios y links que les presentamos en nuestro blog, para contribuir de alguna manera en su mantenimiento...)

un "Developer Codelab Group" requiere un espacio, una infraestructura, uso de tiempo y servicios para la preparación de los eventos, contactar y ayudar en la preparacion de los expositores, etc., ya se nos ocurrirá algo pero comparto la idea de hacer un Developer Codelab presencial (para los que sean de la localidad) y otro on line con su respectiva biblioteca de Codigos (para los interesados), ..y  esos códigos tambien  deben ser publicados en el Blog... ya veremos.. descontando nuestro interés y entusiasmo ... no depende solo de nosotros ...también depende de todos ustedes...


LA COMUNIDAD INTEGRACION GOOGLE



A partir de diciembre del 2011 para poder acceder a nuestros códigos de laboratorio de nuestros diferentes temas (codelabs) va a ser requisito haberse previamente registrado como miembro de la Comunidad Integración Google para así poder mantener un mejor contacto entre todos nosotros, y vale la oportunidad de indicarles que se va mantener una mejor estadística y control de nuestros usuarios... realmente hemos tenido varios pedidos demasiado específicos (que amerita una sección "pedidos"); y asimismo varios de nuestros codelabs requieren ser migrados a nuevas técnicasó versiones de los lenguajes que utilizamos (como es el caso de ExtJs4 en particular), y como todo requiere tiempo y esfuerzo, pues una solución posible es poner cuotas de donaciones a los codelabs que lo ameriten.. por supuesto, van a haber exoneraciones para los colaboradores de la comunidad.. pero parece que por alli va ser el camino a seguir...

Mientras tanto, los temas que propongamos van a continuar con seguir nuestro camino inicialmente propuesto:
  • Ingresar al mundo Google y Web por el tema de manejo de sus API y visualizaciones (mostrar datos en la mayor cantidad de opciones web que sean posible).
  • Interactuar con bases de datos (que comprende las clásicas opciones de mantenimiento de ingreso, modificación, consulta (visualizaciones), e impresión en la mayor cantidad de opciones web posibles)
  • Ingresar al mundo de los dispositivos móviles y su integración al mundo Web y Google en particular...
  • Desarrollo en el MundoWeb en general.

Nota Agregada: Considerando el interes del uso de las redes sociales en el mundo de los negocios, también tocaremos respecto a ese punto, como programar para esos entornos, ...y como integrarlos a nuestros proyectos, aparte que Google nos proporciona varias herramientas Opensocial que incluso ya estamos empleando en el desarrollo de nuestro Blog..

...Bienvenidos a la Comunidad Integracion Google..!

Saludos
@Mlaynes







abril 19, 2010

Localización e Internacionalización de nuestro Blog y Paginas Web


Recuerde que..
Este blog esta desarrollado en idioma español pero utilizando Google Traductor puede adecuarlo al lenguaje de su preferencia.. Favor utilice la opcion del recuadro superior derecho... y Bienvenido a Integracion Google.

Preparándonos para poder atender consultas de amigos extranjeros, especialmente de algunos de habla inglesa que conocemos, y con quienes compartimos la idea de preparar estas practicas tipo "Developer Codelabs", hemos recurrido nuevamente a la Tecnología Google para tratar de internacionalizar nuestro Blog...

Google Traductor

Google Traductor es una herramienta interesante para evitarnos una traducción pagina por pagina de nuestros desarrollos, aún no lo hemos probado integrado a ExtJs, pero consideramos que no debe haber ningún inconveniente, por cuanto, si han revisado el Code Playground de Google, ya deben haber identificado, y tal vez probado, algunas opciones de Traducción utilizando el API language que nos ofrece Google.

NOTA IMPORTANTE: desde el 01 de Diciembre del 2011, Google ha cerrado definitivamente el uso de la API language v.1 (incluso ya no se encuentra disponible en el Google Playground como tal vez han podido comprobar). Ahora Google propicia el uso de la API language v.2 que es un servicio de paga (y ahora no hay cuotas libres, algo extraño con Google pero esa es la situacion actual).. asimismo, propicia el uso del gadget de Google Traductor, desarrollado en Javascript asi que se puede implementar en cualquier pagina web y que Google indica que siempre será una versión de uso libre, y cuyas opciones pueden revisar en el siguiente link

A la brevedad adecuaremos nuestro codigo a opciones de traducción como hemos realizado, de "emergencia" en nuestro blog... antes daremos revisión a algunos proyectos opensources respecto al tema para una mejor presentación.

En esta oportunidad utilizamos el  Website Translator Gadget, mediante el cual insertado un código Javascript, Google nos permite que nuestros usuarios y lectores seleccionen el idioma que les sea más familiar para leer nuestras paginas web.. más aún, dependiendo del idioma predeterminado de nuestro navegador y del idioma en que esté hecha las páginas web, Google podría hacer una traducción automática (solo se cambia un parámetro "style"; pero como no me convenció su desempeño, he preferido mantener la web en su fuente original (el español), y que Uds. amigos, seleccionen el idioma que más les convenga... además creemos que es importante que se reconozca que nuestra lengua materna es el español.

Nos conviene utilizar esta herramienta por cuanto, en primer lugar, mejoraremos nuestra redacción, por cuanto mientras mejor escribamos mejor será la traducción; en segundo lugar, porque si no nos convence la traducción podremos remitir nuestras propias trducciones las que son utilizadas por Google para que vaya mejorando su herramienta de traducción automatica, y en tercer lugar, porque en nuestro proceso de aprendizaje de diversos idiomas, Google nos ofrece la opción de escuchar su pronunciación (disponible para inglés, español, portugues, frances, coreano, chino, entre otras y Google va adicionando poco a poco más idiomas, y aunque los parrafos aún deben ser cortos, son lo suficiente para que esta herramienta nos sea sumamente útil... interesante no?

Como lo hicimos?

Este Blog es Blogger (que es de Google también), y al seleccionar la opción acceder/personalizar/diseño añadimos un Gadget HTML/Javascript (que nos permite digitar directamente nuestros propios códigos para lo que queramos).

Y alli ingresamos el siguiente código:


<!-- Google Translate Element -->
<id="google_translate_element" style="display:block">
</div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: "es"}, "google_translate_element");
};
</script>
<p>Source: Español (Spanish)</p>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

El código es tan corto que realmente hay poco por explicar...
tal vez indicar que es indispensable indicar el idioma original de nuestra pagina ("pageLanguage"); y que si indicamos style="display:none", el manual indica que la traducción sería automática respecto al idioma predeterminado de nuestro navegador.. pero he encontrado foros con dudas y mejoras del código porque esa opción no parece funcionar muy bien... bueno, pero tambien podemos hacer que aparezcan solo algunos idiomas.. por que conviene que revisen el link de la pagina que indicamos en la nota agregada referido al tema, aunque como siempre, hay para investigar y probar para mayor detalle...


Que es esto ?



Go to OpenstreetMaps


Go to OpenstreetMaps

Es una aplicacion opensource para poder usar mapas y trabajar geolocalizacion sin interferencias ni restricciones de ningun tipo (incluidas las de Google Adsense).
Para utilizar esta herramienta solo basta ir a la pagina web del proyecto, seleccionar el area a mostrar y elegir la opcion "exportar" (a HTML), el cual nos genera un codigo HTML de un iframe que podemos pegar en nuestra web, y lo que es bastante importante, hasta en nuestras "fan pages" de Facebook (y por eso le hacemos referencia)

Puedes revisar el siguiente link;

http://www.facebook.com/pages/Integration-ourselves-to-Google/120321264650448?sk=app_249347133607


direccionando nuestros "links"..

y para concluir el proceso, hemos abierto varias fans page en facebook, como el caso de nuestra pagina en ingles, así que los seguidores con idioma de navegador diferente del español, sus accesos a facebook serán dirigidos a dicha página (incluido su foro); los seguidores en español son dirigidos a la pagina facebook en español por supuesto..

Como hicimos esto?

Pues similar al caso anterior, agregamos otro gadget HTML/Javascript a nuestro Blog e insertamos el siguiente código:


<script>
wlang=navigator.language;
//document.write(\'Navegador: \'+wlang);
</script>
<script type="text/javascript">

// Choosing facebook wall..
function rut_facebook() {
var wurl_facebook = \'\';
var wlanguage = wlang;
wlanguage = wlang.substr(0,2);
if(wlanguage==\'es\'){
wurl_facebook = "http://www.facebook.com/group.php? gid=118999028117456&amp;v=wall";
} else {
wurl_facebook = "http://www.facebook.com/group.php?gid=106728576035212&v=wall";
};
/*
alert(\'wlang: \'+wlang+\'\n\'+\'wlanguage: \'+ wlanguage+\'\n\'+wurl_facebook);
*/
window.open(wurl_facebook,"_blank");
return wurl_facebook;
};

// Choosing facebook forum
function rut_facebook_00() {
var wurl_facebook = \'\';
var wlanguage = wlang;
wlanguage = wlang.substr(0,2);
if(wlanguage==\'es\'){
wurl_facebook = "http://www.facebook.com/group.php?gid=118999028117456&v=app_2373072738";
} else {
wurl_facebook = "http://www.facebook.com/group.php?gid=106728576035212&v=app_2373072738";
};
window.open(wurl_facebook,"_blank");
return wurl_facebook;
};
</script>

//our image code..
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="javascript:rut_facebook();" target="_blank"><img style="display:block; margin:0px auto 0px; text-align:center;cursor:pointer; cursor:hand;width: 145px; height: 25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl3MkFzl9Ju5nMeLnvyMamsaYLCmdfraIDX2mSaOCM19nYiXEfLkqCa7hv1gqp3h02PJpWVjQofdY69RxcBdfPQVTtyMq2Zlv17s2LkBx3BLFzLniEbnjDx2aJx7wmR_j4tv5VWIENHd1t/s200/inFacebook.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5461327404001030210" /></a>

Las direcciones indicadas apuntan por supuesto a las paginas de facebook en español e ingles según el caso.. y asimismo modifico el parametro "href" del codigo que carga la imagen de facebook insertada en el gadget, pasando como vinculo a la función javascript que nos dirigirá a las rutas que les hemos indicado...

En realidad, en ese mismo gadget hemos cargado hasta 15 funciones, que son las que me dirigen a cada foro al hacer click en los logos de facebook que aparecen en algunos temas (solo basta modificar el vinculo "href" de la imagen que carguemos para que llame a nuestra función), eso nos facilita el mantenimiento de la pagina sin recurrir al head de nuestra pagina html.. y el asunto funciona bien... (lo que podremos aplicar al llegar desarrollo de Gadgets y Widgets), así que así lo dejamos por el momento, hasta ver posibilidades de nuevas mejoras..


..el Boton "Translatethis"

  • Considerando una mejora utilizar una traducción empleando medios visuales, también hemos probado la herramienta TranslateThis Button, desarrollada empleando Ajax y el API language de Google, es free, permite varias opciones de configuración (lea la documentación al respecto), y funciona bien para muchos casos; con el siguiente código:


<!-- Begin TranslateThis Button -->
<span class="notranslate">
<div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div></span>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis({
  fromLang : 'es', // Native language of your site
  busyText: 'Preparing the translation...',
  GA : true, // Google Analytics tracking
//cookie: 'tt-lang', // Name of the cookie, 0 = disable
  ddLangs : [ // Languages in the dropdown
        'es',
        'en',
        'pt-PT',
        'fr',
        'it',
        'ru',
        'ar',
        'zh-CN',
        'ja',
        'ko'
   ],
  noBtn: false, //whether to disable the button styling
  btnImg : 'http://x.translateth.is/tt-btn1.png',
  btnWidth : 148,
  btnHeight : 18,
});
</script>


..el idioma de nuestro navegador

  • En nuestros enlaces a Facebook, ahora en 3 idiomas: español, inglés y portugues; hemos hecho variaciones para absolver unas incompatibilidades del Internet Explorer que no reconoce el idioma del navegador empleando la propiedad language del objeto navigator.(sino navigator.browserLanguage), y asimismo que no reconoce directamente a las funciones javascript en las referencias (para lo que hemos utilizado el método "void"), y el código indicado tiene las siguientes variaciones:

--> Para indicar el idioma del navegador hemos utilizado los condiciones de IE y las propiedades navigator.language y navigator.browserLanguage indicadas:


<script>
wlang=navigator.language;
//document.write('Navegador: '+wlang);
</script>
<!--[if IE]>
<script>
wlang=navigator.browserLanguage;
//document.write('Navegador: '+wlang);
</script>
<![endif]-->


--> ...y para las referencias de las imagenes que nos dirigen a cada pagina Facebook, utilizamos el metodo void, como se indica:


<a href="javascript:void(rut_facebook());">myPicture</a>


..nuestra opcion "Contact us"

  • Para contartarse con nosotros vía correo GMail, utilizamos el siguiente codigo:


<script type="text/javascript">
function emailForm(){
var daReferrer = document.referrer;
var email = "";
var wlanguage = wlang;
var body_message = "";
wlanguage = wlang.substr(0,2);
switch(wlanguage) {
case 'es':
email= "gicodelab.es@gmail.com";
body_message = "Gracias por contactarse con Integracion Google..%0DFavor considere las normas normales de moderacion, trato cordial y buena redacción";
break;
case 'pt':
email= "igcodelab.pt@gmail.com";
bodu_message = "Obrigado por contactar a Integração Google ..%0DPor favor, considere as regras normais de moderacao, simpatia e boa redacao";
break;
default:
email= "igcodelab.en@gmail.com";
body_message = "Thank you for contacting Google Integration ..%0DPlease consider the normal rules of moderation, friendliness and good drafting";
break;
};
var errorMsg = "error message";
var subject = "Exception Error";
var body_message = "%0D%0D%0D%0D:%0D-----------------------------------------------------------------------%0D"+body_message+"%0D@IG-Codelab Group";
var mailto_link = 'mailto:'+email+'? subject='+subject+'&body='+body_message;
win = window.open(mailto_link,'emailWin');
//window.open('mailto:gicodelab.es@gmail.com')
/* Abre ventana flotante */
if (win && win.open &&!win.closed) win.close();
return mailto_link;
}
</script>

<!-- Form directo OnClick
<div style="border:1px solid black;padding:2px;">
<a href="#" onclick="emailForm();">Contact us</a>
</div>
-->

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="javascript:void(emailForm());"><img style="float:left; display:block; margin:0px auto 0px; text-align:left;cursor:pointer; cursor:hand;width: 148px; height: 37px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitM3auTML0_Qbm9wNJcwkpjoe3FeDFUSNqhZobtX3hMVNM6YudLAgKG4DEDLFFosl-RP49RSuXAR-DP9PjxuZYy_Y4P7PELbMnEMLldUAa9CcPfg6Lmx7i6Nje4tVkdDz5WLzz5fWWcn1V/s1600/IgContactUs.JPG" border="0" alt="" id="BLOGGER_PHOTO_ID_5469673187419347922" /></a>


Nota: En el cuerpo del mail evite en lo posible el uso de caracteres acentuados: áéíóú u otros especiales como dierises, acentos inversos, simbolos u otros, por cuanto "cuelgan" la aplicacion (aún no he encontrado como evitar este efecto y poder utilizar cualquier codigo ascii, habiendo probado incluso utilizando directamente codigos hexadecimales).


..el API language de Google

En lo que respecta a las traducciones de la "alerta" de uso del recuadro de Google Traductor (para seguidores de distintos idiomas), hemos utilizado la API de Google Language y la libreria JQuery (con lo podriamos dar diversos efectos a dicha alerta), utilizando el siguiendo codigo:


<div id="talerta">
</div>
<div id="talerta1">
</div>
<div id="alerta">

<span class="Apple-style-span" style="color: green; font-size: large;"><b>Recuerde que..</b></span></div>
<div id="alerta1">
Este blog esta desarrollado en idioma español pero utilizando <b><span class="notranslate"> Google Traductor </span></b>puede adecuarlo al lenguaje de su preferencia.. Favor utilice la opcion del recuadro superior derecho... y Bienvenido a <span class="notranslate">Integracion Google.</span></div>

y en cualquier otra parte de nuestra pagina html:


<script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q">
</script>
<script>
wlang=navigator.language;
//document.write('Navegador: '+wlang);
</script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("language", "1");
var wlanguage = wlang;
wlanguage = wlang.substr(0,2);
document.write('Navegador: '+wlanguage );
var cadlanguage = ',en,pt,it,fr,de,nl,sv,ja,ru,ko,th,es';
var ltarget = 'en';
var npos = cadlanguage. lastIndexOf(wlanguage);
if (npos>0) {
wlanguage = cadlanguage.substr(npos,2);
} else {
wlanguage = ltarget;
};
function enespanol() {
jQuery("#alerta").hide();
$("#alerta1").hide();
};
function initialize() {
var texto = document.getElementById("alerta").innerHTML;
google.language.translate(texto, 'es', wlanguage, function(result) {
var translated = document.getElementById("talerta");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
var texto1 = document.getElementById("alerta1").innerHTML;
google.language.translate(texto1, 'es', wlanguage, function(result) {
var translated = document.getElementById("talerta1");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
enespanol();
};
if (wlanguage != 'es') {
google.setOnLoadCallback(initialize);
} else {
google.setOnLoadCallback(enespanol);
}
</script>ranslate">Integracion Google.</span></div>

Nota: Este codigo utiliza una API Key de Google, la cual debemos personalizar para nuestras propias paginas web, al igual como hicimos con la API de Google de Maps en nuestros post de Integracion Google 1ra y 2da parte (en este caso nos referimos a la API Key de Google, la cual nos permite emplear las diversas API de Google, entre ellas Google Language y otras Librerias y frameworks), esta ultima que nos permite tener acceso a JQuery, Dojo, Prototype, entre otros)


Geolocalizacion

Es indudable que las diferentes tecnicas de localización son herramientas muy utiles para el desarrollo Web, permitiendonos entre otras cosas, identificar el país de nuestros usuarios, el idioma a utilizar con ellos, elegir la moneda para realizar transacciones, otros. Pero resulta que las tecnicas de geolocalizacion son cada vez mas precisas (especialmente en medios moviles donde incluso de apoyan en servicios de localización GPS), resulta entonces conveniente considerar ambas posibilidades:

Tecnicas de geolocalización "casi exactas"

En este punto resalta las técnicas de geolocalización HTML5, las que realmente tienen una notable precisión, aparte de tenerla disponible en todos los navegadores modernos, y aquí tenemos un enlace que nos mostrará su nivel de precisión, y por supuesto, el código utilizado:

http://html5demos.com/geo

Tal vez vale resaltar que esta técnica tiene como principal requisito que el usuario permita la geolocalización aunque sea una vez (no es de uso "transparente" al usuario), y esto puede de alguna forma ser una limitación..


Otras tecnicas de geolocalizacion..

Vale resaltar como primer punto que estas técnicas si son de uso "transparente" al usuario (no requieren de su autorización), y se basan principalmente en la identificación de la IP del usuario y la ubicación del mismo en tablas prediseñadas; por supuesto, estas técnicas no son precisas como la descrita anteriormente pero tienen un buen rango de eficacia, generalmente a nivel ciudad, lo cual puede resultar bastante conveniente para identificar el país, el idioma y moneda para interactuar con nuestros usuarios y clientes..

Hay varios servicios de geolocalización de este tipo, pero de las que podemos destacar por su vigencia y precisión son:

Saludos
@Mlaynes

Opina sobre las herramientas y API de Google..!





abril 15, 2010

Integracion a Google AppEngine


Recuerde que..
Este blog esta desarrollado en idioma español pero utilizando Google Traductor puede adecuarlo al lenguaje de su preferencia.. Favor utilice la opcion del recuadro superior derecho... y Bienvenido a Integracion Google.

Y bueno amigos, a lo que finalmente queríamos llegar.. y que fue motivo de una consulta en el foro de Quizzpot que ha tenido muchas visitas pero pocas ayudas técnicas: la integración de nuestras aplicaciones a Google App Engine, utilizando ExtJs o cualquier otro framework,..

Los que han revisado este Blog desde el principio han de recordar que les propuse la vista de un vídeo de Google sobre App Engine en la que se nos presenta las atractivas ventajas de utilizar Google App Engine para nuestros desarrollos web:


En su parte inicial, este vídeo nos explica claramente la importancia y ventajas de utilizar Google App Engine en nuestros proyectos.. pero siguiendo el desarrollo del video, vemos después que el ejemplo que nos presentan no nos resultó suficiente para entusiasmarnos (no se plantea claramente los resultados buscados con el ejercicio que desarrollan y se pierde algo de la visión de las ventajas innegables de AppEngine); por lo que aprovechando en efectuar nuestras propias pruebas, les presentamos en esta entrada algunos tips para poder iniciarnos en Google App Engine, y que por supuesto, que incluya todo lo que hemos avanzado en nuestro proceso de Integración a Google utilizando el framework ExtJs mostrados en las entradas anteriores.

Nota agregada:
Conviene también que después revisen con mayor detenimiento nuestro enlace a "Google Codelabs" (último botón derecho del menú superior de esta página), allí se detalla con mayor detalle el ejemplo que presentan en el vídeo y lo profundizan más mostrándonos la utilización de algunas de las principales librerías de Phyton (incluida su almacenamiento de datos); asimismo, también pueden probar AppEngine sobre Java, para los que desarrollen en dicha plataforma)

A este respecto resulta conveniente revisar la siguiente documentación:


Instalando Google App Engine

Instalar Google App Engine nos permite instalar una infraestructura de pruebas similar a instalar nuestro servidor HTPP local, pero sin utilizar la combinación Apache+PHP+ MySQL que hemos venido utilizando con Appserv, y que por supuesto representa una nueva alternativa a considerar así como tambien tenemos la combinación Apache Tomcat (servidor de aplicaciones)+Java+MySQL -puede ser con cualquier otra base de datos como MS-SQL Server, PostGreSQL, Oracle, Access, etc.- Todas estas combinaciones entre otras, nos permiten crear, probar, publicar y mantener nuestros proyectos Web.


En este caso, vamos a utilizar el Kit de Desarrollo de software (SDK) de Google App Engine para Python: GoogleAppEngine_1.5.2.msi para plataforma Windows (de 16.5Mb, vigente al 20/Julio/2011; pero también puede utilizar la versiones correspondiente para equipos con Mac o Linux instalado), la que podemos descargar de la siguiente dirección:


Antes de iniciar la instalacion del SDK de Google AppEngine, debemos asegurarnos que tengamos Phyton 2.5.x instalado en nuestro ordenador, para lo cual el mismo instalador nos indicara de donde bajar primero e instalar dicha version de Phyton (version 2.5.5.7 de 24Mb, vigente al 01/03/2011). Finalmente toda version completa de AppEngine ocupara unos 150Mb, incluido los instaladores del SDK y Phyton...

La ventaja del Kit SDK para Python es que simultáneamente instala un "launcher" (lanzador de aplicaciones de GoogleAppEngine), el cual nos facilita las pruebas de nuestros desarrollos:



Audiencia

Se recomienda que, para entender este codelab, tengamos suficientes conocimientos de ExtJs y herramientas básicas desarrollo Web (HTML, CSS, Javascript; o en su defecto, haber seguido el curso de ExtJs que nos ofrece Crysfel Villa de México en su pagina del Quizzpot.

Asimismo se recomienda haber leído y probado nuestras entradas: Integracion a Google (1ra parte) e Integración a Google (2da parte), especialmente para comprender las herramientas utilizadas para integrar de las API de Google a ExtJs (y viceversa), que se emplean en este tutorial.


Appengine.rar, Descargar el material de apoyo desde Google Docs, que es donde tenemos cargado el archivo appengine.rar (elegir pestaña "File"), y en la raíz de nuestro disco de trabajo o donde estimemos conveniente se creara la carpeta "appengine", dentro de la cual tendremos las siguientes carpetas:



carpeta prueba, contiene un ejemplo sencillo que nos muestra una visualizacion de una Hoja de Calculo de Google Docs (un grafico líneal en este caso), y que su codigo lo hemos tomado del Code Playground de Google, pero bajo App Engine.



carpeta prueba01, que nos muestra un ejemplo de visualizacion de nuestra "tabla de productos" de Google Docs utilizada en nuestra entrada Integración a Google (2da.parte), y a los que he agregado un manejo básico de eventos que nos proporciona el API de Visualizaciones Google entre la Tabla y el PieChart mostrados, que son interesantes para poderlas revisar con mas detalle.




Nota agregada: Después de algunas pruebas realizadas por miembros de nuestro grupo, parece que para que funcionen estos ejercicios debe previamente haber accedido a cualquier servicio con nuestra cuenta personal de Google:. La tabla Spreadsheet Productos que utilizamos en este ejercicio está compartida en Google Docs para que "todos la vean sin acceder", pero parece que para Google, "sin acceder" significa que la tabla no aparezca en nuestra lista personal de documentos de Google Docs, pero que necesariamente se tiene que haber ingresado primero con nuestra cuenta a algún servicio de Google como GMail por ejemplo, o con la opción "acceder" de la barra del menú de www.google.com), sino el ejercicio propuesto posiblemente no trabaja bien y arroje un mensaje de error de acceso al Query. 


Estos ejercicios deben funcionar aún cuando con nuestra cuenta Google nunca hayamos utilizado Google Docs, por cuanto, las cuentas de Google, no son solo nuestra puerta de ingreso a GMail sino a una larga lista de servicios de Google que nos debe resultar interesante considerar para nuestro uso cotidiano: Google Calendar, Blogger, Picassa, Google Sites, CheckOut (tipo pay-pal), Google Maps, Google Talk, y por supuesto Google App Engine, entre otros)


carpeta intGoogle1, que nos muestra lo mismo que nuestro post Integración a Google (1ra.parte), pero corriendo sobre AppEngine (nuestro archivo 01.GVisualizaton-sample.html se encuentra "insertado" dentro de IntGoogle1.py (de Phyton), y el resto de archivos js y de Extjs se encuentran grabados en la carpeta "static"  de IntGoogle1.



carpeta intGoogle2, que nos muestra lo mismo que nuestro post Integración a Google (2da.parte), pero corriendo sobre AppEngine (nuestro archivo 02.GVisualizaton-sample.html se encuentra "insertado" dentro de IntGoogle2.py (de Phyton), y el resto de archivos js y de Extjs se encuentran grabados en la carpeta "static" de IntGoogle2.




NOTA IMPORTANTE :

Resulta que el sistema de autorización "AuthSub for JavaScript" de Google ya no se encuentra disponible (pueden revisar el siguiente enlace), por lo que nuestro botón "Login" de nuestro codelab no permite el acceso a nuestro ejercicio; asimismo, la documentación de Google nos recomienda que utilicemos ahora "OAuth 2.0 for client-side applications", vale decir, tendremos que utilizar Google API Javascript Client para poder acceder a nuestras aplicaciones (u otra API cliente según la plataforma back-end que utilicemos, tal como PHP, Java, .NET, entre otros), pero en nuestro caso, como solo estamos trabajando aplicaciones por el lado del cliente, tendremos que recurrir a la librería cliente para Javascript indicada.

Por lo que, mientras adecuamos nuestro código, resulta conveniente que NO CONSIDEREN el proceso de acceso a la aplicación de la siguiente manera:

function activando(auth) {
  var c = Ext.getCmp('center');
  //google.accounts.user.login('http://www.google.com/m8/feeds/');
  auth = true;
  c.enable();
  c.update('');
  if (auth) {
    vistree.enable();
  };
};

within of: MenuGVisualization_01.js / MenuGVisualization_02.js where appropriate!


TRABAJANDO CON OAUTH 2.0 :

por supuesto, a la brevedad actualizaremos todos nuestros códigos para que trabajen con el protocolo OAuth20, pero presentamos lo demos de nuestro codelab que hemos cargado a la plataforma GAE (Google App Engine), pero que usted puede probar en su servidor local de pruebas utilizando el SDK de Python (una vez adecuado el código a OAuth2.0 como indicamos en nuestros codelab Int-Google 1ra y 2da parte.. ó realizando el cambio indicado para "puentear" el proceso de autenticación)

 ..now you can test our IntGoogle01-Oauth demo  (New!) .
the demo may prompt popup window (you must enable it)

 ..now you can test our IntGoogle02-Oauth demo  (New!) .
the demo may prompt popup window (you must enable it)


Pasos para ejecutar el codelab

Para ejecutar los ejemplos mostrados solo basta ejecutar el launcher de Google App Engine (hay un icono en el desktop luego de instalación), y seleccionar la opción "File/Add Existing Aplication.." del menú, dicha opción nos muestra una ventana en la cual el boton "Browse" nos permite seleccionar la carpeta appengine que contiene nuestro proyecto (prueba, prueba01, IntGoogle1 y IntGoogle2 en este caso), elijamos cada una de nuestras carpetas y seleccionar el botón "Add", se cargaran nuestras aplicaciones al "launcher"; luego seleccionemos nuestro proyecto y elijamos el botón "Run", que direccionará nuestra aplicación a un puerto específico, y activará al botón "Browse", el cual al ser seleccionado ejecutará nuestro navegador web predeterminado, y ejecutará nuestra aplicación (este proceso es sencillísimo y no creo que tengan inconvenientes para hacerlos).



APUNTES TECNICOS:

Al revisar con más detalle los archivos de cada carpeta notarán lo siguiente:
  • nuestras imágenes, iconos y otros archivos "externos" utilizados en cada ejercicio, están grabadas en la carpeta static (hay que revisar un poco de la documentación al respecto, pero vale indicar que la razon principal de este procedimiento es que a diferencia de nuestras aplicaciones probadas en un servidor Apache, con Google AppEngine no todos los archivos de nuestra carpeta del proyecto se cargan en la web, y de nuestra estructura de directorios, solo algunas carpetas se ejecutan exclusivamente por el lado del servidor.
  • por el motivo indicado, grabamos también los archivos de ExtJs en la carpeta "static", y que en este caso corresponden a la version ext-3.1.0; realmente tuvimos algunos problemas al utilizar versiones a partir de etx-3.2.x, e inclusive con la versión vigente de ExtJs-3.3.1 a la fecha (no cargaba la "datatable" requeridas para las visualizaciones Google desde los "stores") ..pero este "bug" producto a una revisión de una de las clases de ExtJs ya ha sido corregido, por lo que pueden revisar el post respectivo a Integracion Google 1ra y 2da que corresponden a estos mismos ejercicios que estamos probando sobre AppEngine, pero funcionando sobre un servidor Apache estándar, en dicho caso, ambos ejercicios IntGoogle1 e IntGoogle2, ya han sido modificados a la versión extjs-3.1.1. vigente al 01/03/2011, así que esperamos que como haciendo sus pruebas personales deberían poder actualizar estos ejercicios para utilizar una versión actualizada de Extjs (la disponible en estos momentos), y verificar su funcionamiento.
  • al cargar nuestras aplicaciones con el boton "Run", a la vez que se activa el botón "Browse" (que lanzará automáticamente nuestro browser preferido y nos permitirá observar los resultados de nuestra aplicación). Vale también revisar los botones "Logs" y "SDK Console", el primero nos indica si todo esta correcto (y nos indica incluso los errores de compilación phyton de haberlos);  el SDK Console nos servirá luego, especialmente cuando utilizemos la biblioteca de almacenamiento de datos de Google AppEngine y otras librerías incorporadas de la biblioteca estandard de Phyton.
  • Para lanzar a la web nuestra aplicación, solo basta utilizar el botón "Deploy", y si no tenemos un dominio propio, Google nos proporcionará un dominio provisional, pero nuestra aplicación bien podría ahí mismo subirse a la web (solo se necesita haber registrado nuestra cuenta Google en App Engine, para lo que se necesita registrar nuestro código de confirmación recepcionado via sms utilizando un telefono celular de la empresa Claro, para el caso de Perú (para otros países debemos consultar la lista de compañías de comunicaciones correspondiente); pero actuemos con mesura, pues Google nos permite hasta 10 subidas "gratuitas", y tal vez no nos convenga desaprovecharlas por el momento.
  • Al igual como hemos cargado la versión 3.1.1 "liviana" de ExtJs, podríamos hacer lo mismo si se desea utilizar cualquier cualquier otro framework JavaScript, pero téngase presente que Google tiene ya disponibles versiones de frameworks como JQuery, Prototype, Dojo, entre otros. Aunque también debemos resaltar que ahora tambien resulta importante practicar y utilizar Javascript puro.. opción que debemos tener en cuenta, ahora que poco a poco se va a imponer el manejo de este lenguaje por el lado del servidor, debido a la versatibilidad y perfomance mostradas de Node.js y el motor de desarrollo V8, los que inclusive han sido utilizados en el desarrollo del navegador Google Chrome.
  • Cabe resaltar asimismo que para efectuar el "Deploy" con el launcher AppEngine, de ser el caso, nuestro Logs nos indicará que debemos tener instalado y operativo "openssl",  correspondiente a las herramientas que permiten a nuestros proyectos AppEngine  implementar SSL (Secure Socket Layer), TLS (Transport  Layer Security) así como otros protocolos relacionados con la seguridad. Para ello puede seguir los pasos indicados aqui, o a mejor parecer, nos conviene instalar completamente GnuWin32, que además de darnos acceso a comandos Linux, y entre otros paquetes, nos implementa openssl 0.9.8r vigente a la fecha (esto sobre windows; en otras plataformas como Linux o Mac debe verificarse si openssl ya se encuentra instalado, caso contrario debe implementarse el paquete openssl correspondiente).
  • Para nuestras pruebas personales debemos indicar también que, el nombre de nuestras aplicaciones que pongamos en el archivo app.yaml debe seguir el estandar "camel casing", por lo que dicho nombre debe empezar en minusculas...
  • y bueno, estas son opciones de Google AppEngine que corresponden únicamente al manejo del framework webapp proporcionado por la biblioteca estandard de Phyton, pero debemos tener en cuenta que uno de los recursos mas interesantes de Google AppEngine es su almacenamiento de datos (y que corresponden al concepto Big Table descrito en el video indicado al comienzo del post), punto muy importante que nos encontramos desarrollando con bastante interés..

Porque GAE-Python ?

la plataforma GAE permite en estos momentos el uso de hasta 03 lenguajes por el lado del servidor: Python, Java y Go; y tal vez pueda ser bastante difícil invocar a los desarrolladores a optar por un lenguaje en particular, pero lo cierto es que Python es el lenguaje con que se inició la plataforma GAE y tal vez la que mantiene aún "en exclusividad" algunos desarrollos importantes como son la carga y descarga de datos (vía remote_api) , y en particular de la herramienta MapReduce (aún experimental), para trabajar procesos de datos en forma optimizada en nuestros GAE datastores. Vale entonces destacar que si nuestro interés en hacer desarrollos en la plataforma GAE conviene que mantengamos un conocimiento básico de desarrollo GAE utilizando su SDK para Python.. y a la par, dedicarnos a nuestras investigaciones y desarrollos en la platagorma GAE-Java ó GAE-Go (según nuestra especialización).

Otro punto a tomar en cuenta es que para desarrollos para móviles (y para Android en particular), es necesario tomar conocimientos de desarrollo en la plataforma Java y esto induce a muchos desarrolladores a considerar como punto de partida de sus investigaciones y desarrollos a la plataforma GAE-Java, vale entonces reiterar nuestro apunte anterior, en que aún cuando la plataforma Java de desarrollo es bastante importante y de muy buen soporte, pues no debemos considerar que hay algunas herramientas Appengine que solo trabajan, por el momento, exclusivamente en la plataforma GAE-Python, por lo que vale considerar y dar una periódica revisión a este entorno de desarrollo.

Saludos...
@Mlaynes

Opina sobre Google AppEngine en nuestro foro..!


abril 04, 2010

Integracion a Google (2da parte)



Recuerde que..
Este blog esta desarrollado en idioma español pero utilizando Google Traductor puede adecuarlo al lenguaje de su preferencia.. Favor utilice la opcion del recuadro superior derecho... y Bienvenido a Integracion Google.

(Actualizado al 21/04/2012)
Esta es la segunda parte de nuestro proyecto de Integración de Google al entorno de desarrollo del framework ExtJs, tal como habíamos prometido realizar, y cuyo objeto es unir las ventajas que nos ofrece ExtJs, y el innegable aporte de Google al desarrollo del mundo Web, y en esta oportunidad vamos a centrar nuestra atención en el uso de Spreadsheets de Google como fuente de datos, y esto porque es una forma bastante rápida para familiarizarnos con el uso de las herramientas de desarrollo que nos brindan tanto ExtJs como Google para el desarrollo de aplicaciones "sencillas", que fácilmente bien podríamos desarrollar para pequeños negocios y otros..

En este caso, he considerado para este codelab el uso de una Hoja de Calculo con una única tabla, y que se diseñó para que personas ligadas a un negocio "retail" de Productos de Belleza y Cosmética pueda controlar su negocio: Ventas y Cobranza, con la "ventaja" que todo el "ingreso y actualización de datos" se puede realizar digitando directamente sobre una Hoja de Calculo usando Google Docs (ahora llamado Google Drive), pero que le permite consultar sus stocks de productos para venta, y los recordar los saldos por cobrar de sus clientes desde cualquier lugar con acceso a Internet (incluido s por supuesto teléfonos celulares, tablets, otros), y creemos que ya pueden imaginar que, esta simple herramienta resultó bastante importante, especialmente cuando ya se tiene varias decenas de clientes y cientos de productos colocados en plaza..

Este simple ejercicio puede aún complementarse con el empleo de "Google Apps Script", los que trabajan perfectamente dentro del entorno de las hojas de Calculo de Google Docs, y con el que podemos organizar el registro y captura de nuestros datos (compras, cobranzas, gastos, ventas, cobranzas, encuestas, citaciones, registro para eventos, etc.), validarlos, procesarlos, calcular nuestros stocks de productos y saldos por cobrar, y finalmente consolidar y sumarizar la información disponible para monitorear los resultados de nuestro negocio (utilidad, saldo en caja, etc), e incluso interactuar de una manera bastante sencilla con nuestros clientes remitiéndo en forma periódica ofertas, saldos, adeudos, promociones, etc.

 ..realmente me ha impresionado el potencial de las "Apps Script" (en pleno proceso de evolución), pero vale también resaltar que estas opciones tienen un limite, ahora de 10,000 lineas u operaciones por tabla, hasta 256 columnas, y un máximo de 400,000 celdas; que siendo una cuota importante (programándose cortes anuales ó mensuales según la carga de trabajo), y aún pudiendo esta cuota incrementarse, la realidad, es que esta es una herramienta apropiada para micro y pequeños negocios (hay varios cientos de miles de ellas aquí en Perú y Latinoamérica en general), pero para las empresas medianas, y las que tengan aspiraciones de crecer, por supuesto pueden utilizar estas herramientas para temas específicos y complementarios, pero tal ez ya no para la gestión completa del negocio, y por supuesto, estas empresas deben necesariamente, empezar a programar dentro de sus costos de operación y funcionamiento, a personal de Desarrollo y Soporte TI permanente, para enfocar sus respectivos casos y sus soluciones informáticas, bajo parámetros mas convencionales (empleo de Base de Datos, Departamentalización de procesos y Automatización de las área críticas (producción, ventas, cobranzas, contabilidad, etc.), todo por supuesto bajo un enfoque de sistemas, y tomando en consideración todas las herramientas y entornos cliente-servidor, "cloud & grid computing" vigentes y disponibles en el ahora interesante e importante mercado del desarrollo de software.

Pero lo que si debo destacar es que, las "Apps script" tiene como ventaja que su API permite entre otras, dos opciones importantes: la creación de Interfaz de Usuario personalizados (utilizando UI Service y GUI Builder), los que permiten que diseñemos nuestros pantallas de captura de datos y proceso de la información al grabarlas en nuestras tablas, así como también permiten la conexión a cualquier bases de datos mediante JDBC (lectura y escritura), con lo que podemos utilizar fácilmente esta herramienta para facilitar el acceso de nuestros usuarios y procesar correctamente y validar nuestra data antes de cargarlas a bases de datos corporativas o de nuestras aplicaciones. (para un mejor alcance de estos conceptos pueden revisar nuestra entrada: Web2.0: los Negocios y las redes sociales).

Audiencia

Se recomienda que, para entender este tutorial, tengamos los suficientes conocimientos de ExtJs y desarrollo Web (HTML, Javascript, y manejo básico del back-end PHP-MySQL, instalado sobre un servidor HTTP Apache, o haber seguido los capitulos iniciales del curso de ExtJs que nos ofrece Crysfel Villa de México en su pagina del Quizzpot.

Asimismo se recomienda haber leido y probado: Integracion a Google (1ra parte), especialmente para comprender todo el proceso de integracion de las herramientas Google a ExtJs (y viceversa), que se emplean en este tutorial.

Material de Apoyo
( do click on blue icons to download )

IntGoogle-02.rar, Descomprimir este material de apoyo sobra la carpeta "www" de nuestro Servidor Web Local (seguir los pasos de la 1ra. parte de este tutorial de Integración a Google), si ya ha instalado éste módulo anteriormente sobre-escriba todos los archivos que así lo indiquen ( se ha efectuado  algunas adiciones, modificaciones y mejoras que se han tenido que realizar sobre algunas funciones y extensiones para adaptarlos a la versión 3.4.0 (la ultima v3.x ofrecida por Sencha.com antes del lanzamiento de ExtJS4), o si usted lo desea, descomprimalos en una nueva carpeta con un nombre apropiado.

(si no entiende este paso favor consulte "empezando desde cero').


IntGoogle-02.rar ( 2.4Mb ), Este código corresponde al material de apoyo utilizado para instalar el presente codelab pero en la plataforma de Desarrollo WebMatrix. El resultado de éste código es idéntico al material presentado primero, pero en este caso, comprende al proyecto completo, es decir, se ha adicionado y configurado para su uso, a la versión "liviana" del framework  ExtJs versión 3.4.0, y si se desempaqueta éste código en una carpeta de "www" en nuestro servidor local AppServ (dentro de otra carpeta que podemos llamar "WebMatrix" ), podremos ver directamente los resultados al llamarlo desde la barra de direcciones de nuestro navegador usando "http://localhost/WebMatrix/Int-Google02", y esto porque el archivo inicio del codelab en este caso es "index.html", el cual es de ejecución automática al llamar a la carpeta que los contienen...


Ahora, si trabajamos con el primer código, y si con nuestro navegador ingresamos a "http://localhost", y luego a la carpeta "Int-Google02" ( o donde hayamos descargado el material de apoyo), y ejecutamos el archivo "02.GVisualization-sample.html", debe aparecer una pantalla como la que se muestra a continuación:




Esto nos indica que nuestra descarga y copia ha sido correcta así tambien es correcta el ruteo para la importación de las librerías de ExtJs, y ya estamos listos para revisar el material de apoyo instalado.. y descubrir como hemos Integrado ExtJs con las SpreadSheets de Google (hojas de calculo).

Nota.- si no aparece la pagina es probable que no hayamos descargado a ExtJs en la carpeta "www", como mostramos en "el potencial de ExtJs"; o tal vez, estemos usando una versión de ExtJs diferente de la indicada en nuestro archivo HTML (..ahora estamos usando la versión ext-3.3.1, pero si estamos trabajando con otra versión debemos cambiar los nombres y la ruta de la carpeta que lo contiene si fuera necesario). Asimismo, observe que ahora tambien utilizamos la libreria "Groupsummary.js" de ExtJs (en la ruta ../extjs/extjs-3.x.x/examples/ux, que asi corresponde en los archivos de la versión completa ExtJs que hayamos bajado.. si esta utilizando una version "liviana" como se indica en el Curso ExtJs de Quizzpot, cerciorese de copiar este archivo en la ruta indicada.. u otra cualquiera conveniente que nos rutee adonde este se encuentre dicho archivo).

Observe asimismo que, como se indica en el Curso ExtJs, resulta conveniente copiar solo los archivos de ExtJs que necesitemos y evitar, cuando carguemos nuestros ejercicios, pruebas o desarrollos en un servidor web real (como x10hosting.com u otros de los muchos que se ofertan en internet, como indicamos en el post anterior), pues así lograremos que nuestros proyectos solo "pesen" lo justo.. quitando los "examples" propios del framework así como los "themes" o lenguajes "locale" que no emplearemos.

NOTA IMPORTANTE :

Resulta que el sistema de autorización "AuthSub for JavaScript" de Google ya no se encuentra disponible (pueden revisar el siguiente enlace), por lo que nuestro botón "Login" de nuestro codelab no permite el acceso a nuestro ejercicio; asimismo, la documentación de Google nos recomienda que utilicemos ahora "OAuth 2.0 for client-side applications", vale decir, tendremos que utilizar Google API Javascript Client para poder acceder a nuestras aplicaciones (u otra API cliente según la plataforma back-end que utilicemos, tal como PHP, Java, .NET, entre otros), pero en nuestro caso, como solo estamos trabajando aplicaciones por el lado del cliente, tendremos que recurrir a la librería cliente para Javascript indicada.

Por lo que, mientras adecuamos nuestro código, resulta conveniente que NO CONSIDEREN el proceso de acceso a la aplicación de la siguiente manera:

function activando(auth) {
  var c = Ext.getCmp('center');
  //google.accounts.user.login('http://www.google.com/m8/feeds/');
  auth = true;
  c.enable();
  c.update('');
  if (auth) {
    vistree.enable();
  };
};

within from : MenuGVisualization_02.js


TRABAJANDO CON OAUTH 2.0 :

por supuesto, a la brevedad actualizaremos todos nuestros códigos para que trabajen con el protocolo OAuth20, y les presentamos en esta oportunidad el código y su demo de nuestro codelab que hemos cargado a la plataforma GAE (Google App Engine), pero que usted puede probar en su servidor local de pruebas..

 ..now you can test our IntGoogle02-Oauth demo  (New!) .
the demo may prompt popup window (you must enable it)

IntGoogle02-OAuth20.rar ( 3.14Mb ), Este código corresponde a nuestro codelab pero adecuado al protocolo OAuth version 2.0, utilizando la "Google API Javascript Client", la cual en esta versión, incluso nos permite acceder directamente al email de nuestros usuarios.

Es importante indicar que la documentación de Google nos indica que ahora debemos trabajar con OAuth 2.0 que se esta convirtiendo en el estándar de autenticación y autorización para acceder a nuestras cuentas y poder utilizar todas las API de Google, por ello hemos adecuado nuestro codelab a dicho estándar debiéndose tener en cuenta lo siguiente:

  • Crear un nuevo proyecto en el Google API Console, con el nombre mas adecuado que queramos
  • Crear una "OAuth 2.0 Client ID" en la opción API Access de la consola.. allí podremos indicar el nombre de nuestra aplicación y la URL de un logo que la represente ..a continuación debemos indicar el tipo de nuestra aplicación ("web application" en nuestro caso), y la URL de nuestra aplicación (acepta http://localhost ó http://localhost:8080 para trabajar con nuestro servidor local de pruebas, debiendo verificar que se elija correctamente el protocolo "http ó https" y la ruta completa de acceso a nuestra aplicación para que todo funcione correctamente); por lo que al crear nuestra API Access se nos indicará la carpeta "Redirect URI" donde se realizará el proceso de autenticación y autorización OAuth 2.0 solicitado (si no ha sido creada debemos editar la configuración y registrar manualmente la carpeta donde se realizará el proceso, puede ser cualquiera dentro de "www" o crear la carpeta "oauth2callback" indicada)..
  • ..y finalmente, en la misma "Google API Console" debemos seleccionar a la opción "Services" y activar la "Google+ API" (debe estar "ON" y de color verde), lográndose con ello finalmente crear nuestra "API key" en forma automática.
  • y todo ya está listo! ..ahora al volver a la opción "API Access" de nuestra aplicación, ya tendremos disponible nuestro "Client ID" y la "API Key" (dentro de "Simple Access API"), estos datos son las que debemos utilizar y reemplazar en el archivo "index.html" de nuestra aplicación para que todo pueda funcionar correctamente.

    Conviene también revisar las diferentes opciones que nos presenta la "Google API Console" pues nos puede ser necesarias como crear, modificar, renombrar, eliminar proyectos principalmente.

  • ..y ahora a probar nuestra aplicación IntGoogle01-Oauth20 !
  • y una ultima indicación.. Como estamos trabajando con la Google Maps API v2, tenemos que activar el servicio "Google Maps API v2" en la API consola, y registrar nuestra API Key al importar la API en nuestro proyecto antes de subirlo a un servicio de hosting con un dominio personalizado y así puedan funcionar los mapas de nuestro proyecto sin mayores inconvenientes (aunque la Google Maps API v2 solo estará activa hasta Marzo 2013, por lo que debemos programar nuestras actualización a la API v.3)..por supuesto, al trabajar con nuestro servidor local "localhost" no se presentan problemas.. el tema se presenta al cargar nuestros proyectos a un servicio de hosting externo cualquiera.. como la plataforma GAE (Google App Engine), que es donde esta corriendo nuestra demo.


Detalle del Modulo.

1. Para poder utilizar el modulo,como ya se indicó en la primera parte, debe tenerse una cuenta activa en Google,.

2. Al revisar los archivos desempaquetados de nuestro material de ayuda encontraremos los siguientes archivos:
  • 02.GVisualization-sample.html, que contiene las instrucciones HTML para llamar a la biblioteca ExtJs y las API de Google, entre otras llamadas y configuraciones.
  • MenuGVisualization_02.js, que contiene las instrucciones Javascript en ExtJs que visualizan el Menú y Árbol de opciones de nuestro ejemplo, así como el código que nos permite el acceso a las opciones del Modulo, por medio de la API Contacts de Google.
  • SpreadSheet-ExtJs.js , que contiene las instrucciones Javascript en ExtJs, que nos permiten visualizar , en esta oportunidad, una tabla u hoja de Calculo de Google (creada a través de Google Docs), pero utilizando Visualizaciones Google y de ExtJs, que representan para nosotros, nuestro segundo nivel de Integración al mundo Google.
  • GVisualizationPanel.js, que contiene las instrucciones Javascript en ExtJs que construyen las "extensiones" que nos permiten utilizar Visualizaciones Google sobre ExtJs, y en este caso, funciones ExtJs que nos permiten "migrar" la data de la tabla Google a objetos "store" que puedan ser manipulados desde ExtJs.
  • GroupSummary.js, que como hemos indicado debe estar contenida en las carpetas de "extjs-3.31" y la necesitamos para importar la libreria ExtJs GroupSummary en el archivo "02.GVisualization-sample.htm", (podemos revisar su contenido en cualquier editor de textos como Notepad++)
3. En el archivo "02.GVisualization-sample.html", se encuentra comentadas casi todas las líneas explicando paso por paso que realizan.

4. ( New! ) Hemos añadido en esta oportunidad el archivo Spreadsheet productos.xls en formato Excel estandard, para los que deseen efectuar sus pruebas sobre una hoja de calculo propia, pues simplemente ingresen a Google Docs y carguen este archivo, por supuesto que adaptado al formato de Google Docs; luego solo basta copiar en la variable "dataSourceUrl" que corresponda la dirección web de nuestra hoja de claculo de Google Docs (la que se indica en la barra de direcciones de nuestro navegador cuando ingresemos a nuestro documento cargado a Google Docs)

Este archivo no forma parte del "proyecto" así que solo debe ser considerado como referencia.. asimismo debemos tener en cuenta que a Google Docs se puede cargar diversos formatos de hojas de calculo los que automáticamente traducirá al formato de Google Docs, como CSV, Openoffice, etc.

5. En el archivo "SpreadSheet-ExtJs.js", se encuentran detalladas cada una de las funciones llamadas desde "MenuGVisualization_02.js", que muestran el código de cada Visualización mostrada, y entre las que tenemos:
Integracion.Google.SpreadSheetExtJs, que muestra un "grid" completo de nuestra Tabla Google, y para lo cual utilizamos la extensión "Ext.ux.EVisualizationPanel", detallada en nuestro archivo GVisualizationPanel.js, y que a diferencia de la extensión "Ext.ux.GVisualizationPanel" que empleamos para adaptar nuestro "store" creado a partir de un "data array", y crear nuestra visualización Google; pues, como en este caso vamos a mostrar data Google sobre una visualización Google, no es necesario adaptar la data, y nuestra extensión nos permite mostrar la visualizacion sobre el panel ExtJs, y si indicamos un dataQuery, realizar la operación SQL que querramos...



En este caso, hemos utilizado como Query: 'select * where A is not null', esto porque, muchas veces, al final de nuestras hojas de calculo podemos poner resúmenes, cálculos especiales, anotaciones, etc... y para que estos no aparezcan en nuestra visualización, pues sencillamente ignoramos dichas lineas (por supuesto que en este caso, implica que no pongamos nada en la columna A de nuestra tabla si se trata de comentarios o resúmenes)

Integracion.Google.SpreadSheet_01, que muestra un Query un poco mas complejo tal como: 'select G ,sum(J), sum(L)+sum(N)+sum(P), count(A) where A is not null and K <> 0 group by G ', al que le hemos agregado otras propiedades como "order by", "label" y "format", siendo interesante notar que posteriormente nosotros vamos a utilizar esos "labels" o etiquetas de nuestro Query, como nombre o "id" de nuestras "Grids ExtJs".


Integracion.Google.SpreadSheet_02, que muestra el mismo Query anterior pero en un formato PieChart de los campos "comprador" y "monto" (que corresponde al monto que nuestro cliente ha comprado a la fecha).



Integracion.Google.SpreadSheet_03, que muestra el mismo Query anterior pero en un formato panel que contiene un Table y un PieChart de los campos "comprador", "monto", "cobrado" y "cantidad" (que corresponde a lo que nuestros clientes han comprado a la fecha).
Nótese asimismo que he implementado eventos sobre el PieChart y el Table, y al hacer click sobre algún componente del Pie o de la Table se ve reflejada la operación en ambas gráficas.




Hasta aqui, estamos utilizando la extensión "Ext.ux.EVisualizationPanel" de forma similar a como utilizamos "Ext.ux.GVisualizationPanel" en la 1ra parte de este tutorial para mostrar Visualizaciones Google sobre ExtJs (pero con data de un "store array"), y por supuesto, que podemos utilizar esta extensión para utilizar cualquiera de las visualizaciones Google que mostramos en la Galeria de Visualizaciones Google, pero utilizando como datasource a las hojas de Calculo de Google.

Resulta también conveniente a este respecto, revisar los siguientes enlaces:





Integracion.Google.SpreadSheet_04, que utiliza el mismo Query anterior pero en este caso nuestro formato panel contiene graficas ExtJs de los campos "comprador", "monto" y "cobrado", y para ello empleamos una nueva extension que hemos llamado "Integracion.Google.GoogleStorePanel", y cuya principal función va a ser adaptar los datos de la tabla Google al formato "store" de ExtJs, y colocarlas en los paneles correspondientes.



Como mostramos, ExtJs tambien tiene opciones interesantes en sus gráficas o visualizaciones que podriamos utilizar, y una de ellas es la capacidad de poder agrupar filas y columnas en sus "grids", por ello vamos a mostrar "paso a paso" como poder utilizar una agrupacion de filas en las visualizaciones que siguen a continuación.

Integracion.Google.SpreadSheet_05, en esta visualizacion vamos a mostrar como deberíamos "crear" nuestros querys para poder agruparlos, por ello, si en este caso, quisieramos agrupar los productos comprados por cada uno de nuestros clientes, y mostrar el detalle de lo vendido, lo pagado, y el saldo correspondiente (por cada producto y del total del cliente), pues nuestro campo de agrupamiento seria el "comprador", y nuestro Query seria el siguiente:

select B, G, I, J, L+N+P where A is not null and K <> 0
order by G
label B "Producto", G "Comprador", I "FVenta", J "Monto", L+N+P "Cobrado"

En este caso detallo las etiquetas, por cuanto esos nombres los vamos a utilizar como campos (fields), de nuestro "store" a crear.


Estoy mostrando nuestro dataquery en una visualización Google tipo Table utilizando la extensión "Ext.ux.EVisualizationPanel".

Integracion.Google.SpreadSheet_06, ahora mostramos el mismo dataquery pero sobre un Grid ExtJs, utilizando la extensión "Integracion.Google.GoogleStoreGrid", que va a realizar la adaptación de la data Google al formato "store" mediante la función "Ext.ux.GoogleStoreAdapter", que utiliza la función "EditorGridPanel" de ExtJs (utilizo esa función aunque en este caso no editamos los valores, pero he dejado algunas lineas comentadas para que puedan probar que es posible editar los grids ExtJs)


Nótese que nuestro adaptador "Ext.ux.GoogleStoreAdapter", crea un campo "id", al estilo del formato Json, y que utilizamos como numero o identificador de registro; y asimismo que, nuestro adaptador devuelve el "store" completo de nuestra data requerida (campos y datos incluidos); esto no es lo único requerido para realizar "data grouping", pero si en la gran mayoría de sus visualizaciones y gráficas.

Integracion.Google.SpreadSheet_07, ahora si preparamos nuestro Query para poder realizar nuestro agrupamiento, y modificamos nuestro adaptador, al que hemos llamado "Ext.ux.GoogleStoreAdapterComplete", por cuanto, no solo crea el "store", sino el "reader" y la "data" (que son componentes que crean al store), y los muestra disponibles para poder utilizarlos en la función "Ext.data.GroupingStore" de nuestra extensión"Integracion.Google.GoogleStoreGrouping" que crea nuestra StoreGrouping Visualization



Cabe anotar como un adicional que nuestro adaptador aparte del campo "id" que representa nuestro numero de registro, tambien ha adicionado un campo "resumen" (igual para todos los registros), esto es para poder tener la capacidad de "agrupar" toda la data en un solo bloque y poder mostrar un campo de sumarizacion resumen total tal como indicamos a continuación:

Integracion.Google.SpreadSheet_08



Bueno amigos, hasta aquí nuestra 2da parte de Integración a Google, y hay bastante para probar hasta lo avanzado, pero creo imprescindible que realicen sus pruebas empleando sus propias tablas, por lo que resulta importante que empiecen a revisar Google Docs y inicien sus propias aplicaciones, ejemplos hay demasiados...

Por mencionar solo una, todos los negocios pequeños o personales  (micro-empresas), la mayoría están afiliados a sistemas simplificados de declaración y recaudación fiscal, (régimen RUS de la SUNAT aquí en Lima-Peru), y solo requieren para sus declaraciones contables contar con un registro de ventas, que fácilmente se podría desarrollar en hojas de calculo de Google Docs, y que complementado con un registro de Compras y Gastos fácilmente podrían llevar el manejo administrativo contable de un pequeño negocio, "on line" colgado sobre Internet y literalmente "indestructible", y con posibilidades de consulta remota desde cualquier lugar de la ciudad, del país y del mundo... con lo que se tendría una poderosa herramienta de control para los miles de "emprendedores" que han hecho negocios pero que actualmente tienen bastantes problemas de administración y control..

Personalmente, en mi experiencia con PYMES realmente he observado muchos negocios que emplean hojas de calculo para sus procesos de administración y control, y asimismo tambien en varios casos les he planteado solución a varios negocios de este tipo (boutiques, salones spa, tiendas o bodegas, etc.), utilizando exclusivamente spreadsheets de Google Docs en donde solo se requiere una computadora con acceso a Internet (y que también se pueden complementar a soluciones Web2.0 para mercadeo y publicidad de nuestros productos/servicios, y para la fidelización de clientes), ..respecto a este tema, ahora resulta importante destacar que la principal red social de estos momentos: Facebook, había decretado en octubre del 2011 la obsolescencia de su lenguaje FBML nativo, pero para el 01 de Junio de este año 2012 ha programado su cese, lo que afectará a varios cientos de miles y tal vez millones de negocios y profesionales en todo el mundo, cuyas paginas "fanpage" estan actualmente hechas en lenguaje FBML, utilizando la plataforma de desarrollo de Facebook.. lo que orientará el mercado de desarrollo de las pequeñas empresas hacia otras herramientas como son el empleo del SDK Javascript y "canvas" de Facebook, y por supuesto, hacia Google Docs (ahora Google Drive), y con uso de "Apps Script".. claro que para varios desarrolladores tal vez estas sean soluciones simples, pero realmente pueden llegar a ser más económicas y efectivas.. e incluso bastante complejas y especializadas.

En lo que respecta a nuestro proyecto Integracion Google, en próximos codelabs vamos a plantear el mismo ejercicio pero sobre otras plataformas...y entre las que me parecen muy interesantes para utilizar tenemos el Back-End PHP+MySQL (muy popular en servicios de Hosting externos y utilizados para instalar y desplegar "servicios sociales" muy difundidos como Wordpress, Elgg, phpBB, Drupal  y otros, y que por supuesto, bien podriamos integrar a nuestros desarrollos); tambien tenemos a la combinación JSP(Java)+MySQL, que es bastante empleado para desarrollos "complejos" y profesionales; y asimismo ya dentro del mundo Google Cloud tenemos el "datastore" de Google App Engine, que involucra el manejo del concepto "Big Table". Para todos los casos planteados, tenemos como principal requisito que, primero debe desarrollarse un modelo básico de mantenimiento o gestión de base de datos (altas, bajas, modificación, consulta, impresión, etc), por cuanto, a diferencia de partir de una tabla de Google Docs, en dichas plataformas debe "programarse" el registro y manejo de nuestra data, el cual debe realizarse a través de base de datos, y nuestra información no debe ser ingresada directamente a las tablas, sino a través de formularios y/o grids editables o la combinación de ambos, los que bien pueden ser diseñados con ExtJs.

Saludos

Opina en nuestro foro §FB..!