Integracion Google

Integración Google

2013-03-01T02:55:00.000-05:00

Bienvenido a Integración Google

latest Advancement: Working with OAuth 2.0 protocol, GAE-Java, Google Apps Script and providing "responsive design" capabilities to our project !

Integracion Google
nuestra propuesta de ingreso al mundo del desarrollo web y de la tecnología Google...

Nuestro Objetivo:

Una visita a las principales plataformas de desarrollo Web vigentes utilizando por el Front-side HTML y CSS Convencional, HTML5 y CSS3, Javascript: JQuery, Backbone.js y el framework ExtJS de sencha.com (en sus versiones Ext-3.x y ExtJS4), pasando por el uso del Back-End PHP+MySQL, Java(JSP)+MySQL, GAE-Python y GAE-Java ..y como una grata novedad, utilizando Apps Script y hojas de calculo de Google Docs (ahora Google Drive) como fuente de datos y Back-End para PYMES : pequeños e incluso medianos negocios, entre otros desarrollos; explorando el uso de servidores como Apache, Apache Tomcat, Glassfish, la plataforma GAE y Google Cloud Storage; y herramientas de desarrollo especializadas como Netbeans IDE y Eclipse IDE y en la que buscamos aprender las diversas técnicas de desarrollo Web y utilizarlos en nuestros proyectos personales y profesionales.. y aunque tenemos una especial predisposición respecto a Google y al mundo opensource en general...no hacemos exclusiones.. nuestro enfoque es de Integración de APIs y herramientas, donde todo aporte es bienvenido.. el mundo del desarrollo Web es realmente bastante amplio.

knows who we are !

Avances a la fecha:

Importante: Por favor Seleccione en el recuadro superior derecho, correspondiente al Traductor de Google, el Idioma más adecuado para Usted..!

Software Development and Web Development.
(updated to 30/03/2013

Get started from scratch. Aprendiendo a instalar y utilizar un servidor local de pruebas Apache+MySQL+PHP.
(updated to 30/03/2013

Web Development tools. Apuntes acerca del uso de herramientas para desarrollo Web.
(updated to 30/03/2013)

ExtJs, a very powerful framework. Apuntes acerca del framework ExtJS-3.x y ExtJS4.
(updated to 30/03/2013)

A preview of Integration to Google, empezando a revisar de la amplia documentación de Google.
(updated to 30/03/2013)

Integration with Google (1st. part), Adaptando "stores" a Visualizaciones Google y de Google Maps, sobre un modelo de Menu TreePanel que utiliza la API de Autenticacion de Google Contacts para acceder a nuestras aplicaciones (ahora utilizando el protocolo Oauth 2.0 ), desarrollo en que utilizamos el framework ExtJs y que incluye nuestro codelab en código ExtJs4 (migración), empleando Arquitectura MVC de aplicaciones, y mostrando el uso del SDK de sencha.com para optimizar nuestros desarrollos al ponerlos en producción....
now you can test our IntGoogle01 demo (New!) .
the demo may prompt popup window (must enable it!)

(updated to 30/03/2013)

Integration with Google (2nd. part), Utilizando Google SpreadSheets (hojas de calculo de Google Docs) como fuente de datos sobre el modelo anterior descrito, que utiliza la API de Autenticacion de Google Contacts para acceder a nuestras aplicaciones,desarrollado utilizando ExtJs.
now you can test our IntGoogle02 demo (New!) .
the demo may prompt popup window (must enable it!)

(updated to 30/03/2013)

Localization e Internationalization of our Blogs & websites, una manera sencilla y rápida de Internacionalizar nuestros blogs, paginas web u otros desarrollos recurriendo a la Tecnología Google.
(updated to 30/03/2013)

Let's talk about Facebook, comentarios respecto a Facebook, y desarrollo de algunas técnicas aplicados por nosotros para mejorar la participación de nuestros seguidores y empezar a programar algo en ese formato, que podríamos utilizar en nuestros desarrollos y proyectos (incluye referencia técnica).
(updated to 01/03/2011)

Let's talk about Twitter, comentarios respecto a twitter, el mas importante servicio de microblogging de la actualidad. Incluimos referencia técnica, y un código ejemplo referido a Twitter Anywhere, una técnica implementada por Twitter que sigue los estandares HTML y javascript que permite utilizar a Twitter en nuestras aplicaciones y desarrollos para mantener un mejor contacto con nuestros seguidores.
(updated to 01/03/2011)

Let's talk about Google Apps Script (GAS) (New!) , una introducción a los conceptos, opciones y posibilidades del entorno de desarrollo de las Apps Scripts y el porque la elegimos para el desarrollo de nuestro proyecto "Community OAuth 2.0 & Business" que compitió en el GADC 2012.
(updated to 15/09/2012)

Web 2.0: Social networks and Business, nuestros apuntes respecto al concepto Web 2.0 y las redes sociales que nos sirvieron de inspiración para nuestro proyecto "Community OAuth 2.0 & Business".
(updated to 25/10/2012)

Google Gadgets, que son y como ir aprendiendo a desarrollar nuestros propios gadgets utilizando el GGE (Google Gadget Editor) y sus herramientas... (Se adjunta ejemplo de 02 gadgets que muestran visualizaciones de una hoja de calculo de Google Docs, que podríamos pegar en nuestro escritorio usando Google Desktop, en nuestra pagina iGoogle, o en cualquier pagina web).
(updated to 23/07/2010)

Using PHP-MySQL Back-End: Getting started, codelab desarrollado tomando como referencia un tutorial de la pagina Oficial ExtJs, desarrollado con ExtJs-3.x y cuyo código hemos mejorado, y que nos presenta un CRUD -opciones básicas de Crear, Modificar, Borrar, Buscar e Imprimir-, sobre una tabla de una base de datos MySQL y considerando componentes dinámicos (la que migraremos a ExtJs-4.x)..
(updated to 22/11/2011)

Using PHP-MySQL Back-End: Issues of Acces & Security, empezando a diseñar nuestros sistemas tomando en consideración pantallas de acceso (Wizards) y opciones de seguridad, sobre tablas de una base de datos MySQL.(tomando como referencia el modelo CRUD del codelab anterior)
(updated to 22/11/2011)

Integration with Google (3nd Part)), nuestro modelo de pantalla de acceso y Menu TreePanel desarrollado con el framework ExtJS, que nos permite seleccionar visualizaciones Google y ExtJs, y de Google Maps, que hemos venido desarrollando en nuestros codelabs anteriores: Integracion Google 1ra y 2da parte; pero ahora, trabajados sobre el Back-End PHP+MySQL, y comparando cada caso con las visualizaciones que desarrollamos utilizando hojas de cálculo de Google Docs como datasource. Codelab que muestra un modelo "real" de trabajo bajo dicho entorno ..imprescindible para completar nuestros conocimientos..

now you can test our IntGoogle03 demo
usuario: passer, password : passer
the demo may prompt popup window (must enable it!)

(updated to 22//11/2011)

Using Java+MySQL Back-End: Getting started, nuestros apuntes para empezar a iniciarnos con el Back-End Java+MySQL. Incluye la instalación de un servidor local Tomcat y de Netbeans IDE como entorno de trabajo, y como codelab probamos como lanzar nuestros proyectos Integracion Google 1ra y 2da parte usando ahora al servidor Tomcat como proyectos Netbeans...
(updated to 12/11/2012)

Using Java+MySQL Back-End: Installing sdsimple, consideraciones previas a tomar en cuenta en un proyecto "Java Web": importación de una base de datos MySQL y manejo del concepto "pool de conexiones" que son utilizados en el proyecto sdsimple, en otros conceptos de éste interesante proyecto desarrollado por Pedro Peña García (España), otorgado bajo licencia GPL.. y por supuesto, nuestros apuntes para lograr una instalación exitosa del proyecto en nuestro propio servidor local Tomcat utilizando Netbeans..

test sdsimple project (by troubles on service, we´re evaluating this one..)
usuario: passer, password : passer

now, our sdsimple project running on AppFpg Cloud platform. (New!) .
usuario: passer, password : passer (details in our codelab).

(updated to 01/06/2013)

Quercus: JavaWeb projects working with PHP on Tomcat server, nuestros apuntes respecto al uso y posibilidades de la librería Quercus de caucho.com, el cual nos permite la implementación de proyectos PHP como proyectos JavaWeb (cargarlos a nuestro Netbeans y hacerlos funcionar en un servidor Tomcat, como detallamos en este codelab), todo ello sin realizar variación o adecuación alguna del código PHP empleado. El potencial de Quercus radica en que incluso permite la implementación de PHP en proyectos dentro de la infraestructura de Google Appengine, efectuando algunas adecuaciones sencillas para acceder al datastore "big table" de GAE; y ahora, con la novedad del lanzamiento de Google Cloud SQL, que es una implementación de la base de datos MySQL en la plataforma cloud de Google, podremos conectarnos a ella, utilizando código PHP, lo que nos permitiría utilizar los múltiple desarrollos opensource para plataforma LAMP y WAMP disponibles; como son los servicios sociales y gestores de contenidos: Drupal, Wordpress, Elgg, phpBB, etc. entre otros proyectos importantes.
(updated to 22/12/2011)

WebMatrix: Opensource plataform from Microsoft for Web Development, nuestros apuntes respecto a esta nobel e interesante plataforma "opensource" de Desarrollo Web de Microsoft, a objeto de evaluar su potencial y funcionamiento, y lograr integrarla a nuestros proyectos que hemos venido desarrollando : Integración Google 1ra y 2da parte en este caso, los que corren satisfactoriamente en esta plataforma... agregando también como una novedad, el "empaquetado" del programa demo del proyecto ActiveVFP, un proyecto free and opensource que permite utilizar VFP (Visual FoxPro) por el lado del servidor, una nueva opción de back-end para satisfacción de la comunidad del zorro y que abre las posibilidades de opción de manejo de lenguajes por el lado del servidor para nuestros trabajos... especialmente, en lo que concierne al uso de las herramientas desarrollo del mundo Microsoft (como VisualStudio, WebDeveloper Studio, C#, etc)
(updated to 30/03/2013)

WebMatrix: Working with PHP on IIS server, nuestros apuntes respecto a la instalación de PHP como un lenguaje integrado al servidor IIS dentro la plataforma de WebMatrix, a objeto de evaluar su potencial y funcionamiento, y lograr integrarla a nuestros proyectos sobre el Back-End PHP+ MySQL, los que hemos venido desarrollando con nuestros codelabs : Using the Back-End PHP+ MySQL ( inclinándonos, y revisando los temas de seguridad y "Wizards" ó acceso ); y con nuestro modelo de Integración Google 3ra parte, los que también corren satisfactoriamente en esta plataforma... y por supuesto, presentando algunas mejoras y novedades en los códigos presentados respecto a sus pares iniciales.
(updated to 28/10/2012)

WebMatrix: Working with activeVFP complement and VFP Back-End, un "codelab" corto, rápido y sencillo para empezar a trabajar con activeVFP en la plataforma de desarrollo de WebMatrix mostrando el típico "libro de visitas" de los ejercicios que muestra Google en sus proyectos GAE-Java y GAE-Python pero utilizando como Back-End código y tablas de VFP.. un aporte para la comunidad del zorro de quienes tenemos especial referencia.
(updated to 30/03/2013)

Integration with Google App Engine (GAE-Python), Una primera integraciCn a Google App Engine utilizando la libreria estandard Webapp GAE-Python y el SDK para Phyton de Google App Engine versión 1.5.2 vigente a la fecha (que ahora requiere la identificación de la codificación utf-8, o la que utilicemos), que es una herramienta que nos permite "lanzar" las aplicaciones integradas a Google que hemos venido desarrollando con el framework ExtJS en nuestros codelabs Integracion Google 1ra y 2da parte.
(updated to 26/12/2012)

GAE-JavaWeb projects working on Netbeans IDE, volviendo al tema de Google App Engine ,pero ahora usando el SDK para Java, y utilizando Netbeans IDE como herramienta de desarrollo, el cual se integra de manera bastante eficiente con la plataforma GAE-Java de Google, permitiendo el desarrollo, prueba y despliegue de nuestros proyectos en la plataforma cloud de Google, y manteniendo sus notables ventajas para la programación, depuración, optimización y mantenimiento que resaltamos al presentar nuestros proyectos JavaWeb.
(updated to 01/06/2013)
now you can test this CRUD model developed with GAE-Java using Ajax (New!) .
and to access a important Codelabs about GAE-JavaWeb projects (developed on Eclipse IDE!)

now you can test our GAE in action project built with GAE-Java Backend using ExtJS & Ajax (New!) ..looking for a work model most appropriate for use Google App Engine in our developments..
credentials : passer, passer (alternative : prueba, prueba)

Quercus: GAE-JavaWeb projects working even with PHP, continuando con al tema GAE-Java y utilizando Netbeans IDE como herramienta de desarrollo, mostramos como la librería Quercus también nos permite utilizar PHP en nuestros desarrollos GAE-Java; y presentamos también un proyecto presentado en el Google I/O del 2009, que no tenido aún mucho apoyo de la comunidad pero que muestra el potencial de Quercus dentro de este entorno de trabajo: correr Wordpress dentro de la plataforma GAE-JavaWeb de Google, utilizando el código PHP de Wordpress y adecuándolo para utilizar las "tablas" del datastore "big table" de de Google App Engine.
(updated to 22/12/2011)

Working with Google Cloud SQL: Getting Started, donde aprenderemos a trabajar con el novedoso servicio Google Cloud SQL, que es una implementación de la base de datos MySQL dentro de la plataforma Google App Engine, el cual puede ser utilizado en nuestros proyectos GAE-Java ó GAE-Python. (en construcción)
( pueden también remitirnos sus avances y pruebas! )

Working with Google Cloud SQL with PHP: Advanced topics, donde buscamos aprovechar todo el potencial de desarrollo del SDK para Java de Google App Engine (proyectos GAE-Java ó GAE-JavaWeb), y con el apoyo de la librería Quercus de Caucho Resin, e incluso ahora, luego del anuncio en el Google I/O 2013, utilizando el GAE SDK para PHP, para llegar a implementar proyectos opensource muy difundidos como Wordpress, Drupal, Elgg, Magento, ó levantar cualquier proyecto LAMP ó WAMP, ahora dentro de la plataforma Cloud de Google App Engine

test this gaeforphp project: Wordpress running on Google App Engine platform : Tips and tricks from the GAE-PHP team (New!)

details about How to install wordpress on GAE platform using GAE SDK for PHP and Google Cloud SQL

Registro de apps para utilizar PHP en la plataforma Cloud de Google

(updated to 01/06/2013)

Working with Google Apps Script: our project "Community OAuth 2.0 and Business", donde discutiremos respecto al potencial de las Google Apps Script trabajando sobre Hojas de Calculo de Google Docs (ahora Google Drive), y de la ahora llamada Google Apps Plataform en general, y presentaremos con mayor detalle, mayor información técnica y con sus correspondiente enlaces de descarga, a nuestro proyecto "Community OAuth 2.0 & Business" (disponible por el momento solo en inglés, con opción de traducción).

now you can test our Community OAuth 2.0 & Business project (New!) .
the demo may prompt popup window (must enable it!)

(en desarrollo)

Importante..!

Estimado lector.. si lee esta nota es porque ha revisado esta pagina... y lo primero, es indicarles que este Blog estado desarrollado en idioma español... por lo que para poder entendernos es necesario que seleccione su lengua nativa, o el idioma de su preferencia, en nuestro Google Traductor.
Entendemos que puede haber limitaciones en la traducción automatica, pero para nosotros, programadores y desarrolladores web, lo más importante son los códigos: ..un buen ejemplo es mejor que mil palabras...

Bienvenidos y buen dia..!

regards to all!
@Mlaynes

Contact with me ! ..for business, contracts or any interesting issues.

Let's talk about Google Apps Script

2012-09-17T20:04:00.002-05:00

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.

Esta es una pequeña y rápida introducción a como utilizar las Google Apps Script (GAS), herramienta con la que construimos nuestro proyecto "Community OAuth 2.0 & Business" que compitió en el Google Apps Developer Challenge 2012, en realidad no llegamos a las finales de la competencia ..pero uno de sus jueces dijo este comentario respecto a nuestro proyecto, y pensamos que resume muy bien y en muy pocas palabras nuestro concepto, y creemos que también el potencial de las Google Apps Scripts y el porque nos interesa el tema :

The app brings an opportunity for small business to create and control online selling. With little UX improvement the app can be use in scale by any micro business.

Nuestra experiencia en el desarrollo de aplicaciones cliente-servidor comerciales nos ha permitido observar la enorme dificultad que tienen las organizaciones y empresas para iniciar de una manera adecuada y ordenada el registro de sus movimientos ordinarios, más aún de una correcta administración y control de sus operaciones; o que los costos y tiempos de desarrollo para informatizarse escapen de sus presupuestos y no sean de fácil implementación (ERP, soluciones cloud computing, otros), a la par de la existencia de malas experiencias de implementación y desarrollos no satisfactorios .. lo mismo puede decirse de muchas empresas que recién empiezan.. y realmente las estadísticas respecto a las PYMES y fracaso empresarial es realmente impresionante y citamos algunos datos proporcionados por el portal Gestiopolis:

Las cifras disponibles de fracaso de las Pymes son abrumadoras en cualquier país que se analicen.. 4 de cada 5 no sobreviven 3 años; en España, para García Ordóñez de la Universidad de Cadiz, “el 80% de las empresas quiebran en los primeros cinco años"; para Francisco Yañez (México) "al cumplir 10 años, solamente el 10% de las empresas maduran, tienen éxito y crecen”; de acuerdo con Cetro-Crece, también de México, “el 75% de las nuevas empresas mexicanas debe cerrar sus operaciones apenas después de dos años en el mercado"; para degerencia.com: “la experiencia demuestra que el 50% de las empresas quiebran durante el primer año de actividad, y no menos del 90% antes de cinco años”..

En los Estados Unidos de América, según Samuelson y Nordhaus, “el promedio de vida de las empresas es de seis años y más de un 30% no llega al tercer año”.. La Asociación Argentina para el desarrollo de la Pequeña y Mediana Empresa afirma taxativamente que: “Sólo el 7% de los emprendimientos llega al 2º año de vida y sólo el 3% de los emprendimientos llega al 5º año de vida”.. y finalmente, para no abrumar con más cifras, en Chile, según informa Rodrigo Castro F., un estudio en el que se le dio seguimiento a 67.310 empresas creadas en 1996, indicó que el 25% de ellas desapareció en el primer año, un 17% en el segundo año, el 13% en el tercer año y un 11% en el cuarto año.. y el caso peruano pues aparte del fracaso empresarial habría que añadir el tema de formalización, pues miles y miles de "pequeños negocios" prácticamente no tributan, no registran las planillas de su personal contratado y se manejan sin mayor información y control de sus operaciones..

Por supuesto, el objetivo de nuestra entrada no es analizar las causas de esta situación, sino como técnicos informáticos tratar de contribuir en revertir estas cifras, y así como existen muchas personas que actualmente estan revisando y discuten respecto a como evitar el fracaso empresarial, pues nosotros creemos que proporcionar una manera sencilla, practica y de alcance global para poder promocionar y administrar nuestros negocios y servicios, pues de hecho, también contribuye al mismo objetivo.. y parece que lo hemos logrado utilizando las Apps Script y la plataforma Blogger de Google en nuestro proyecto.

Para interesados en el tema hay aquí unos enlaces que pueden revisar (in English):

El potencial GAS

Como indicamos, con Google Apps Script podemos construir de una manera rápida y facilmente comprensible todas las operaciones que requiere el manejo de un negocio :

Registrar a nuestros clientes
Registrar los pedidos de nuestros clientes.
Registrar las compras (al contado, al credito), u otros gastos que requiera nuestro negocio y atender los pedidos de nuestros clientes.
Registrar las ventas (al contado, crédito), u otros ingresos de nuestro negocio.
sumarizar y analizar toda la información registrada para ver como marcha nuestro negocio..

y por supuesto, que el objeto de las Apps Script no solo es para negocios.. sino automatizar cualquier procedimiento que queramos realizar utilizando las hojas de calculo de Google, y ahora también, utilizando una base de datos llamada ScriptDB; en ambos casos existe una limitación en la capacidad de almacenamiento brindada: las hojas de calculo de Google soportan tablas de hasta 400,000 celdas y nos permiten trabajar hasta con 200 hojas por cuenta google; las ScriptDB permiten hasta 50Mb por cuenta Google, 100Mb por cuenta de Google Apps, y hasta 200Mb por cuenta de Google Apps for Business/Education/Government.. estas limitaciones de almacenamiento de datos en las Apps Script nos indican claramente que el enfoque de esta herramienta es automatizar operaciones específicas de una organización o empresa, pero se muestran suficientes para el caso de las PYMES (small and micro business), ó para cuando nos iniciamos en algún negocio o emprendimiento..

Que mas nos brinda GAS..

Debemos tener claro que Apps Script nos permite el empleo de un lenguaje de programación: Javascript, y el acceso a varias fuente de datos: Google spreadsheets y ScriptDB principalmente, teniendo en consideración por supuesto la limitación de capacidad de almacenamiento de cada caso, pero vale resaltar que Apps Script tiene habilitado la capacidad de conectarnos a base de datos como MySQL, SQL Server u Oracle utilizando su servicio JDBC; y esto permite limpiar nuestra fuente de datos utilizando bases de datos mas escalables (programando cortes en nuestras operaciones cuando sea necesario: por falta de capacidad almacenamiento, por los ciclos normales de gestión de nuestra organización o negocio, vale decir cortes anuales principalmente).

las Apps Script nos permiten también aprovechar los servicios de Google App Engine y conectarnos a la GAE datastore, para lo que nos resulta conveniente revisar y seguir con detalle este tutorial.

Pero las Apps Script nos proporciona también habilidades realmente importantes :

Construir interfaces de usuario para desplegar nuestros desarrollos, y para lo que disponemos de los siguientes servicios :

servicio UI, que nos proporciona elementos ó "widgets" tal como botones, radiobuttons, listbox, grids, paneles, entre otros para que a través de código javascript podamos construir nuestra pagina.
Utilizando GUI Builder, que es una herramienta para la construcción de nuestra interface sin utilizar código y facilitar nuestro trabajo.
y ahora también, utilizando el servicio HTML, que nos permite crear y servir una página HTML convencional a partir de nuestro código Apps script ..al mismo modo que cuando trabajamos con nodeJS por poner una referencia, y decimos esto porque de esta manera podremos trabajar con Javascript como Back-End y por el front-side dentro del entorno Apps Script.

Publicar nuestros desarrollos como aplicaciones web, y esta puede ser una página stand-alone (desplegada directamente a través de la URL proporcionada) ó embebida en una página de Google Sites; siendo tambien posible utilizar la misma hoja de calculo que aloja nuestro desarrollo.
Activar nuestro código GAS de acuerdo a los eventos de uso de la hoja de calculo que aloje nuestro desarrollo ó a eventos de tiempo (un día/hora específica, secuencias diarias, semanales, etc.)
y por supuesto, acceder a los diferentes servicios y API proporcionados por Google como los calendarios, gráficos, correos, mapas, manejo de las cuentas de Google, de las cuentas de Google Apps, entre otros..

Vale también destacar que Google como parte de su política de limpieza de verano (anunciado el 03 de junio pasado), esta cerrando algunos servicios importantes como la Google Finance API, entre otras que puede consultar en este enlace; lo que significa, en el caso de la información financiera, que ya no podremos acceder a dicha información a través de servicios de Google (debiéndose tal vez ahora utilizar el servicio YQL de Yahoo Developer Network u otros); pero resulta que, para este caso mencionado, la mayoría de la información de la Finance API ha sido cargada como una funcion Google Finance en las hojas de calculo de Google, vale decir, podremos acceder a datos de bolsa y otros más específicos para nuestros desarrollos, como es el caso de la cotización del tipo de cambio de cualquier moneda del mundo a través de dicha función (lo que puede ser muy útil e imprescindible considerar en proyectos y aplicaciones multi-moneda).

Algunas conclusiones.

Todo lo anterior nos muestra un fuerte apoyo de Google a las Apps Script y éste puede llegar a convertirse en un entorno de desarrollo de aplicaciones realmente bastante importante, vale pues tenerlo en cuenta y revisar con detenimiento los enlaces que nos detallan su funcionamiento, especialmente en lo que concierne al almacenamiento de datos en hojas de calculo (las librerías principalmente), y utilizando ScriptDB.

Es cierto también que, en estos momentos los desarrollos Apps Script como aplicaciones Web no tienen un perfomance lo bastante rápido que quisieramos, pero es algo que Google parece estar mejorando, por cuanto, al plantear algun problema al respecto en la pagina de cuestiones de Google Apps Script, usualmente se nos solicita la ID de nuestra hoja de calculo que aloja nuestra aplicación y ésta mejora notablemente su rendimiento.. no nos sorprendería un mejor perfomance de Apps script en el tiempo, ni tampoco el incremento de las limitaciones de capacidad de almacenamiento actualmente vigentes.

En lo que se refiere a la perfomance de nuestros desarrollos Apps Scripts conviene revisar con detalle los siguientes enlaces:

UI service, poniendo especial atención a los temas referidos al uso de los ServerHandler y ClientHandler, por cuanto los primeros son de ejecución notoriamente más lenta que los manejadores del cliente; por supuesto, los ServerHandlers son obligatorios cada vez que se accede a nuestra fuente de datos u otras operaciones de lado del servidor.
clase createServerHandler, que corresponde al detalle de los métodos soportados de los ServerHandlers, y nos muestra un ejemplo sencillo de como se utiliza.
clase createClientHandler, que corresponde al detalle de los métodos soportados cuando utilizamos ClientHandlers, y también nos muestra un ejemplo sencillo de como trabaja.

Esta introducción a las Apps Script no puede terminar sin animarlos a revisar la documentación y probar los tutoriales referidos al tema y disponibles en la pagina web de esta herramienta.. quedando para una próxima oportunidad el detalle de nuestro proyecto y código utilizado, para lo cual les solicitamos su participación registrandose y probando nuestro proyecto.. por supuesto, sus comentarios e impresiones son bienvenidos y muy importantes para la mejora y replanteo de nuestro modelo..

Aparte de seguir y probar los tutoriales de la pagina de Apps Script, conviene que revisemos estos codelabs :

Llenando un filecabinet con Google Apps Script, en español (Eforcers-Colombia)
creating surveys with ScriptDB and Apps Script, en ingles (Eforcers-Colombia)
JellyBend Tutorials, en ingles

Nota : continuaremos agregando enlaces y ejercicios a esta entrada.

saludos
@Mlaynes

working with ActiveVFP 5.6 on WebMatrix

2011-12-11T22:32:00.001-05:00

Recuerde que..

Esta es pequeña y rápida introducción a como utilizar ActiveVFP en su versión 5.6 vigente al 15/12/2011 (la ultima lanzada es la versión 6.03 del 29 de Enero del 2013, pero dicha versión solo corre sobre Windows Vista o superior, y por ello solo disponible en algunos servicios hosting.. las versiones 5.x si funcionan sobre cualquier versión de Windows y sobre cualquier servicio hosting Microsoft, y es en la practica lo mismo que la versión 6.x); y con lo que pretendemos saldar una deuda con los miembros de la comunidad del zorro, por cuanto, durante nuestro desarrollado profesional, y para el desarrollo de aplicaciones cliente-servidor de escritorio, muchas veces hemos recurrido a usar VisualFoxpro (VFP) en nuestros proyectos, y por supuesto, reconocemos las ventajas que nos proporciona utilizar el entorno de desarrollo VFP para lograr rápidamente productos de alcance profesional.. y al haberse indicado que una de las limitaciones de este entorno es su falta de integración al mundo del desarrollo Web, presentamos este codelab, que pretende mostrar en esta primera etapa, en un sencillo modelo, que también es posible trabajar rápidamente con ActiveVFP usando WebMatrix, utilizando comandos, funciones y clases VFP en nuestros proyectos Web, por el lado del servidor.

Para seguir este codelab solo se requiere tener conocimientos básicos de HTML, VFP y Javascript (no ExtJs que es el framework javascript que más utilizamos en nuestros codelabs), pues lo que buscamos es que se llegue a tener una visión completa de como trabaja ActiveVFP, y por supuesto vale reiterar, que ActiveVfp es un complemento que se encuentra correctamente integrado al desarrollo Web, y nos permite trabajar con tecnologías vigente como Ajax, Json, etc.. y a través de javascript y CSS, trabajar con frameworks como Jquery, ExtJs y toda la tecnología ligada a esas tecnologías.

Instalando nuestro codelab "avfp-guestbook" en WebMatrix

Como se indica, tenemos por supuesto que haber instalado en nuestro ordenador WebMatrix tal como se indica en nuestra entrada WebMatrix: la plataforma opensource de desarrollo Web de Microsoft, por lo que si no lo han realizado, deben seguir los pasos detallados en dicho codelab; y luego, proceder a cargar nuestro material de apoyo en una carpeta que podriamos llamar "AVFP" ó "ActiveVFP", como estimemos conveniente (..y por supuesto, si no deseamos instalar WebMatrix podríamos trabajar sobre un servidor IIS instalado en nuestro equipo Windows, pero su correcta configuración y uso tiene sus cosas.. por supuesto existe documentación y discusiones al respecto, por lo que también podríamos considerar como una opción).

Continuando pero sobre la plataforma WebMatrix, lo primero es proceder a crear un nuevo "site" en WebMatrix a partir de la carpeta creada al extraer los archivos de nuestra descarga (denominada "avfp-guestbook"). El proceso de carga y configuración de nuestro servidor IIS es realizado en forma automática por WebMatrix, por lo que luego solo debemos seleccionar nuestro navegador de preferencia para ejecutar el ejercicio y éste será lanzado al navegador seleccionado a través de un puerto que se encuentre disponible ( http://localhost:xxxxx ).

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

avfp-guestbook.rar, que corresponde a una adaptación de un "libro de visitas" bajo un formato que ya hemos utilizado utilizado en nuestros codelabs referidos al uso del datastore de Google App Engine, pero ahora utilizando como Back-End a Visual Foxpro, mediante ActiveVFP, y desplegando nuestro proyecto sobre un servidor IIS incluído en la plataforma de WebMatrix; debiendo reiterarse que nuestro Back-End es VFP, por cuanto utilizamos las tablas *.dbf de dicha plataforma, y los comandos, funciones y clases de VFP requeridos para interactuar con ella.

ActiveVFP es una implementación en lenguaje ASP y ASP.Net de Visual Foxpro (como por ejemplo, tambien lo es la librería Quercus que nos permite trabajar con PHP en el mundo Java), vale decir que nuestros comandos, funciones y clases VFP son interpretados como comandos ASP que son los que si reconoce y ejecuta un servidor IIS, y el nivel de adecuación de esta herramienta es bastante completa y eficiente, abarcando incluso la versión 9 de VisualFoxpro.. otro punto importante, es que el proyecto ActiveVFP es bastante activo y vigente, siendo su ultima actualización realizada a fecha 29/01/2013 (versión 6.03 como hemos indicado, y la que se puede descargar directamente del homepage del proyecto activeVFP en codeplex).

Las instrucciones y clases para la interpretación de VFP se encuentran contenidas en los archivos activevfp.dll, VFP9RENU.dll y otros archivos *.dll contenidos en el complemento, y los que deben incluirse en la carpeta principal de cada uoo de nuestros proyectos, siendo también necesaria la existencia de una carpeta "prg", que es la que va a contener como mínimo, a nuestro archivo "main.prg", la que pone en funcionamiento la librería (mediante la función "AVFPinit()"), y en la cual podremos configurar las principales variables de entorno disponibles por la librería, entre las que podemos destacar:

oProp.DataPath, para indicar en que carpeta de nuestro "servidor" ó equipo se encuentra alojada la data de nuestro proyecto.
oProp.HtmlPath, para indicar en que carpeta se alojaran nuestros archivos HTM, que este caso han sido ruteados hacia "oProp.AppStartPath", que contiene la carpeta de donde se llama a nuestro proyecto.
oProp.Action, en donde podemos indicar el nombre del script llamado en cada proceso, etc.

En ese mismo archivo podremos definir nuestras propias funciones VFP que utilizaremos en el proyecto.. en este caso no necesitamos ninguno (excepto el que estamos utilizando para mostrar el código de nuestra página), pero conviene que en la documentación de ActiveVFP revisemos la clase AVFPproperties (casi al final de lista de clases).

En este codelab tambien estamos trabajando con la clase AVFPrequest, para capturar los datos de los FORM de nuestras páginas HTML (*.avfp en este caso), y asimismo a la clase AVFPresponse para redirigirnos a una dirección ó URL, pero para mayores detalles también conviene que revisemos la documentación al respecto.

Considérese que nuestras tablas *.dbf en la ruta indicada en la ruta de oProp.DataPath se encuentran disponibles para su uso, y "abiertas" en modo shared, porque aún estando en ejecución nuestro proyecto, podremos acceder a ellas, abriéndolas desde la pantalla de comandos VFP, pero verificando que también usemos modo "shared"; asimismo, si hicieramos alguna modificación en las mismas no olvidemos de ejecutar el comando "flush" desde nuestra ventana de comandos (ó código de nuestros programas y sistemas) para que se carguen nuestras modificaciones a las tablas y los podamos observar al refrescar nuestro navegador.

Este último punto muestra uno de los retos de programación referidos a desarrollo Web en cuanto a que las modificaciones que puedan estar efectuando nuestros usuarios no son reflejados automáticamente en nuestras "tablas" ó "grids", excepto que nuestro código contemple un periodo de refresco (pudiendo utilizar Ajax con esa finalidad), ó adecuando nuestra lógica para que considere probables modificaciones de la data que puedan efectuar nuestros usuarios.. ests técnicas también son consideradas cuando trabajamos a nivel cliente-servidor con bases de datos externas a VFP como MySQL, postgressSQL, SQLServer, etc. por lo que ahora debemos mantener las mismas formas pero en desarrollo Web.

Instalando la demo de ActiveVFP 5.6 en nuestro WebMatrix

Para los que han tenido alguna dificultad en la correcta configuración del ruteo de los enlaces del demo de ActiveVFP 5.6, les pasamos nuestra versión corregida para que puedan trabajar con ella sin mayores contratiempos; debiendo resaltarse que, para el correcto funcionamiento de algunas de sus opciones (como el despliegue de gráficos e impresión de reportes VFP en formato PDF, eben efectuarse las instalaciones y configuraciones indicadas en el mismo demo, las que también son detalladas en la documentación disponible en el mismo demo.

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

activeVFP_5.6.rar, correspondiente a la demo de la versión 5.6 de ActiveVFP, lista para instalar sobre WebMatrix.. y a la que le hemos agragado la "impresión de algunas variables de entorno para su revisión..

Instalando una plantilla para nuevos proyectos ActiveVFP 5.6 en WebMatrix.

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

myproject.rar, que corresponde a un proyecto "vacío" que solo contiene un Hola Mundo para que lo podamos utilizar para iniciar nuestros propios proyectos, debiendo destacar que, para el caso de la creación de las "tablas" debemos crearlas desde la ventana de comandos de nuestro VFP directamente sobre la carpeta "mydata" de la descarga de éste material de apoyo ó configurar en el archivo "main.prg" la ruta de ubicación de nuestra data, y de los otros componentes de nuestro proyecto si lo estimásemos necesario.

Descarguemos este material de apoyo en la misma carpeta donde estemos trabajando este codelab, y luego al crear un sitio en nuestro WebMatrix a partir de la carpeta "myproject" creada con la descarga, pongamoslo en funcionamiento en nuestro navegador y tendremos una pagina como la mostrada.. y dispondremos de una plantilla ActiveVFP 5.6 que podremos utilizar para hacer nuestras propias pruebas ó proyectos.

Trabajando con el Back-End VFP en un modelo CRUD usando Ext-JS v.3.4.0

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

avfp-CRUD.rar, que corresponde a nuestro modelo CRUD (Create, Read, Update y Delete), de una Tabla VFP que contiene a los presidentes de U.S.A. llamada presidents.dbf, la cual utiliza a otra Tabla llamada parties.dbf que contiene a los partidos políticos que respaldaron a cada presidente. Este es un modelo sencillo que nos muestra como utilizando un framework, como ExtJS version 3.4.0 en este caso, se puede "ordenar" nuestros proyectos, separando nuestros códigos del lado del cliente (HTML, Javascript, CSS), de nuestro código el lado del servidor ó Back-End.

En este caso, los códigos del manejo de nuestra base de datos NO se "incrustan" en el código HTML de nuestro proyecto; y nuestro código VFP del lado del servidor se muestra más ordenado y comprensible, los que se encuentran alojados en la carpeta "prg", y comprende a los siguientes archivos:

main.prg, archivo principal de nuestro proyecto, de ejecución automática al iniciarse el proyecto, y que aparte de contener la lógica principal de manejo y gestión de nuestras tablas VFP, permite la configuración de las principales variables y objetos del entorno de desarrollo activeVFP.
updatepr.prg, archivo PRG que contiene el código VFP que permite la modificación y actualización de nuestra tabla de presidentes.
createpr.prg, archivo PRG que contiene el código VFP que permite la creación de nuestra tabla de presidentes.
deletepr.prg, archivo PRG que contiene el código VFP que permite el borrado "lógico" de uno ó varios de los registros de nuestra tabla de presidentes. En este caso vale destacar que las tabla VFP son abiertas por defecto en modo SHARED por activeVFP, por lo que restringe el borrado físico de registros, por lo que debemos adecuar la lógica de nuestros proyectos a esta condición.
Las opciones de búsqueda son aplicadas directamente sobre el código de nuestro archivo main.prg, los que deberá revisar para mayor detalle.

Los archivos javascript que componen el proyecto se encuentran alojados en la carpeta "javascript" y comprende a los siguientes archivos:

mainscript.js, archivo JS que contiene el código ExtJS que permiten la creación,visualización y manejo de nuestra ventana, grilla, y otros componentes de nuestro proyecto (ventanas de creación de registros, búsqueda, etc), y que además contienen la lógica del proyecto por el lado del "cliente", referidos a los procesos necesarios para que un usuario pueda realizar las operaciones CRUD de nuestro listado de presidentes desde el navegador de su preferencia.
searchfield.js, archivo JS que contiene el código ExtJS que permiten la búsqueda rápida de un nombre o apellido ingresado.
GridPrint.js, archivo JS que contiene el código ExtJs y Javascript que permiten la impresión de un listado simple de nuestra lista de presidentes.

Otros componentes del proyecto:

carpeta "CSS", contiene a los archivos style.css, que controla las imagenes de nuestra grilla;, y GridPrint.css, que controla los estilos de nuestra impresión.
carpeta "ext-3.4.0", contiene los archivos javascript y css que comprenden al framework ExtJS de la verión que se indica (los que son llamados desde el archivo index.html de nuestro proyecto.
y por supuesto, la carpeta "data", que contiene a las tablas presidents.dbf y parties.dbf que son las utilizadas en este ejercicio.

Inicio del proyecto:

El archivo de inicio de este ejercicio es el archivo "index.html" que se encuentra alojado en la ruta oProp.AppStartPath, es decir la carpeta desde donde "arranca" nuestro proyecto. Los otros archivos que se encuentran en dicha carpeta son componentes de activeVFP y no pueden ser borrados.

las carpetas "bin" y "temp" son también del proyecto activeVFP y no conviene eliminarlas.. y hay otra carpetas que parecen en la demostración del proyecto activeVFP pero que hemos eliminado porque no las utilizamos en este ejercicio.

Saludos

@Mlaynes

NOTAS DE TRABAJO :

1.- Para abrir un documento *.avfp ó *.prg desde WebMatrix, haga click derecho sobre el archivo requerido y seleccionemos la opción "abrir con WebMatrix"

2.- Resulta interesante observar que para hacer nuestra prueba y seguir este "codelab" no es necesario incluso que tengamos VFP instalado en nuestro ordenador... activeVFP compila automáticamente el archivo "main.prg" y las modificaciones que podamos realizar sobre ella, aunque por supuesto, resulta necesario tener instalado VFP para inspeccionar y/o modificar nuestras tablas *.dbf. Pero vale indicar que, si trabajamos con varios PRG, llamados a traves de SET PROCEDURE TO, activeVFP no compila automáticamente esos archivos, y resultó necesario compilar esos archivos desde la ventana de comandos de VFP (updatepr.prg, deletepr.prg, etc).

3.- Por lo expuesto en el punto anterior, conviene que durante nuestros desarrollos, realicemos y probemos nuestros códigos incrustados en nuestro "main.prg" (que se compila automáticamente), y luego, si resultase necesario, y no sobrecargar nuestro main.prg, crear los *.prg que necesitemos.

4.- No olvidemos que podemos modificar en la opción configuración de nuestro "Site" el puerto que utilizaremos para lanzar nuestro proyecto a nuestro navegador (opción Configurar)

5.- Conviene también que ejecutemos la opción "Informe" de nuestro "Site", que nos indicará en forma bastante detallada la manera de optimizar nuestros proyectos.

6.- La opción database de nuestro "Site" la utilizaremos para trabajar con una base de datos SQL Server compact, que es una versión ligera y liberada de SQLServer de Microsoft que viene integrada a WebMatrix (como MySQL en las plataformas LAMP ó WAMP).

Using PHP on Appengine-JavaWeb projects

2011-12-11T10:10:00.001-05:00

Recuerde que..

Continuando con nuestros codelabs referidos al entorno GAE-Java, pasamos ahora a detallar como trabajar con PHP en proyectos Appengine-JavaWeb, utilizando Netbeans IDE como herramienta de desarrollo tal como lo hicimos en nuestra entrada anterior Working GAE-Java projects with Netbeans, pues esta herramienta nos permite un mejor control de los procesos de construcción, compilación, depuración, optimización y despliegue de nuestros proyectos tanto en nuestro servidor local de pruebas, como para su lanzamiento en la plataforma cloud de Google. Si Ud. no esta familiarizado a trabajar con Netbeans en desarrollos Appengine para Java, conviene que de primero una revisión a los codelabs de la mencionada entrada.

PREPARANDO NUESTRO ENTORNO DE DESARROLLO.

Para trabajar con PHP en GAE, como hicimos en nuestros proyectos JavaWeb, debemos descargar la última versión del WAR de Quercus desde la pagina oficial de caucho.com (versión 4.0.18 vigente al 15/12/2011), y grabarla en nuestra carpeta "appengine" que utilizamos en nuestro codelab anterior (para mantener un orden y porque allí también descargamos el SDK de Java).. y listo! ...el resto de operaciones es configurar.

Empecemos con nuestro "build.xml" de cada uno de los proyectos que instalemos ó desarrollemos, y allí debemos indicar la ruta de nuestras descargas tal como tambien hicimos en nuestro codelab anterior; pero en esta oportunidad, también debemos agregar las instrucciones ANT requeridas para que nuestro proyecto Java Web reconozca a PHP-Quercus, ...y para que Google App Engine reconozcan nuestros archivos *.php, por cuanto, en la infraetructura GAE, todos los archivos que no sean *.jsp, contenidos dentro de la estructura de nuestra carpeta WAR, estos son considerados "estáticos", y solo los reconocerá como archivos TXT, y por supuesto, no ejecutará los comandos PHP que contengan.. vale pues resaltar que debemos revisar las instrucciones de nuestros archivos "web.xml" y "appengine-web.xml" alojados en "web/WEB-INF" de la carpeta de nuestro material de apoyo descargado.

Instalando nuestro codelab "gae-phpwithjava" en Netbeans IDE

Como se indica, tenemos por supuesto que haber instalado en nuestro ordenador Netbeans y haberlo habilitado para trabajar con un servidor local Appengine, mediante la instalación de los plug-ins necesarios, y de nuestro servidor local Appengine de pruebas, como ya hemos descrito en nuestro codelab anterior.

Resumiendo el proceso, tenemos que crear un proyecto JavaWeb vacío sobre la carpeta "appengine", donde descargamos nuestro SDK de Java y el WAR de Quercus, indicando que vamos a utilizar el servidor Appengine en él. Este proyecto recomendamos llamar "gae-phpwithjava", y luego de creado y probado corriendo el mismo, procedemos a "borrarlo" (deteniendo primero el servidor), y sobre la carpeta "gae-phpwithjava", correspondiente a nuestro proyecto "vacío" creado, descargar nuestro material de apoyo proporcionado, verificar nuestro archivo "build.xml" (la ruta de nuestras descargas del SDK y del WAR de quercus), ...y listo, carguemos nuestro codelab como un proyecto JavaWeb con "fuentes existentes" (indicando que utilizaremos nuestro build.ml), y podremos correr nuestro proyecto "gae-phpwithjava" sobre nuestro servidor local Appengine de pruebas utilizando Netbeans IDE....

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

gae-phpwithjava.rar, que corresponde a nuestra adaptación del proyecto "php-withjava" que describimos en nuestro codelab: Using PHP on JavaWeb projects", pero ahora corriendo sobre la plataforma de Google App Engine.

Al correr este proyecto podrán observar que podemos ejecutar dentro de la infraestructura GAE archivos *.php (de la versión 5.3.2 para la versión de Quercus 4.0.18 vigente a la fecha), inclusive conviviendo con archivos *.jsp y "servlets java".. y en el siguiente codelab observarán como integrar java con PHP en una misma aplicación...

Instalando nuestro codelab "gae-PHPguestbook" como proyecto Appengine JavaWeb en Netbeans IDE

procederemos ahora a correr nuestro codelab que presenta como cambiar el proyecto "guestbook" de los ejemplos de Google App Engine para que trabaje usando PHP (y aprovechando las clases java empleadas en él)... y por supuesto, debemos cargar nuestro material de apoyo a nuestro Netbeans como ya hemos indicado.

Resumiendo el proceso, tenemos que crear un proyecto JavaWeb vacío sobre la carpeta "appengine", donde descargamos nuestro SDK de Java y el WAR de Quercus, indicando que vamos a utilizar el servidor Appengine en él. Este proyecto recomendamos llamar "gae-phpguestbook", y luego de creado y probado corriendo el mismo, procedemos a "borrarlo" (deteniendo primero el servidor), y sobre la carpeta "gae-phpguestbook", correspondiente a nuestro proyecto "vacío" creado, descargar el material de apoyo proporcionado, verificar nuestro archivo "build.xml" (la ruta de nuestras descargas del SDK y del WAR de quercus), ...y listo, carguemos nuestro codelab como un proyecto JavaWeb con "fuentes existentes" (indicando que utilizaremos nuestro build.ml), y podremos correr nuestro proyecto "gae-phpguestbook" sobre nuestro servidor local Appengine de pruebas utilizando Netbeans IDE....

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

gae-phpguestbook.rar, que nos muestra el clásico ejemplo "guestbook" de Google App Engine (que utilizan tanto en su plataforma para Java como Phyton, y ahora también en lenguaje "Go" desarrollado por el propio Google), pero ahora utilizando PHP para el manejo de las clases Java que componen el proyecto. Conviene a este respecto que revisemos esta entrada del blog de Caucho.com que nos presenta con mayor detalle la construcción del proyecto:

http://blog.caucho.com/2009/04/28/quercus-on-the-google-app-engine/

...resulta interesante observar como con Quercus pueden interactuar sin mayores conflictos códigos y datos PHP con Java, y ese potencial es el que utilizaremos en el desarrollo de nuetro próximo codelab referido a Google Cloud SQL, que es una implementación de la base de datos MySQL sobre la infraestructura cloud de Google, y por supuesto, para cualquier desarrollador Web resulta fácilmente comprensible trabajar con PHP+MySQL.(los que son utilizados por proyectos sociales muy difundidos como Drupal, Wordpress, Elgg, phpBB, etc. ..una larga lista de proyectos, pues veremos que si es posible trabajar manteniendo algunas de esas modalidad pero dentro de la infraestructura de Google App Engine...

pero aún hay más, porque en el mismo blog de caucho.com presentan un ejercicio de como implementar Wordpress para ser instalado y ejecutado completamente sobre la infraestructura de Google App Engine (utilizando Quercus para utilizar las instrucciones PHP propias del proyecto, pero adecuando la conexión a la base de datos para trabajar con el datastore de Google Appengine... éste proyecto creemos que vale propiciar su desarrollo, así que en brevedad, y sobre esta misma página, liberaremos nuestro código respectivo (el cual ya estamos terminando de depurar), ..y realmente esperamos se propicie el interés para adecuar el proyecto a versiones vigentes de Wordpress...

Pueden revisar los detalles del proyecto en el blog de caucho.com, en la siguiente dirección:

http://blog.caucho.com/2009/05/31/quercus-on-google-app-engine/

Ahora es importante resaltar que, este proyecto ha sido actualizado por lo que conviene revisar con detalle el siguiente enlace :

http://blog.caucho.com/2012/12/06/quercus-on-google-app-engine-20/

las fuentes del proyecto se pueden descargar de GitHub :

https://github.com/diablonhn/quercus_on_gae_2

..y su demo :

http://wordpress-on-quercus-2.appspot.com/

NOTAS DE TRABAJO :

1.- No debemos olvidar que para "abrir" un proyecto debemos previamente cerrar el que tengamos abierto, e indicar que el proyecto que vamos a desplegar sea seleccionado como nuestro "Main project". Si no lo hacemos, al correr un proyecto se compilará nuestro proyecto, pero se lanzará a nuestro navegador el proyecto que este marcado como "Main project", lo que podría confundirnos.

2.- En caso que no hayamos cerrado nuestro servidor Appengine en algún proyecto, y ya no lo podamos cerrar con Netbeans, entonces podemos utilizar la herramienta Java VisualVM, y el plug-in "killApplication" que debemos haber instalado en ella, y cerrar los procesos Java que correspondan (solo basta cerrar uno de los procesos pues se eliminan en bloque para una aplicación desplegada)

3.- Podemos configurar nuestros proyectos para utilizar diferentes puertos de salida y "debug", y tener abiertos en forma simultanea al hacer nuestras pruebas. La configuración se realiza en el archivo "build.xml"

4.- Para correr nuestro proyecto utilizando ANT, en su pantalla de comando debe dirigirse a la carpeta que contiene nuestro proyecto (que debe contener a la carpeta build.xml por supuesto), y alli ejecutar el comando : ant runserver (enter)

5.- Para correr nuestro proyecto utilizando los comandos del SDK de Java, conviene que agreguemos a la ruta de descarga de nuestro SDK (y a la carpeta "bin" en particular" como una variable de entorno PATH (opciones avanzadas de propiedades de myPC en Windows), y en la misma posición donde ejecutamos el comando anterior debemos ejecutar el comando : dev_appserver.cmd web (enter). Caso contrario, debemos indicar en nuestro comando toda la ruta de nuestro SDK: (%pathSDK%)/bin/dev_appserver.cmd web(enter).

Saludos @Mlaynes

Working GAE-Java projects on Netbeans IDE

2011-12-07T22:42:00.001-05:00

Recuerde que..

Continuando con nuestras investigaciones y pruebas de tecnologías Web vigentes, volvemos ahora con Google App Engine (GAE), pero en esta oportunidad utilizando el entorno de desarrollo Java (correspondiente a utilizar el SDK de Google App Engine para Java versión 1.6.0 vigente al 15/12/2011); y este es el primero de una saga de 03 codelabs en que trabajaremos proyectos GAE-Java utilizando la herramienta de desarrollo Netbeans IDE, en virtud a sus bondades y facilidades proporcionadas para el manejo de este entorno, que ya hemos utilizado en nuestros codelabs referentes al manejo del Back-End Java(JSP)+MySQL y para la instalación del proyecto sdSimple, ...y si han seguido y desarrollado dichos codelabs, pues creemos que deben haber observado las ventajas de trabajar con Netbeans IDE en nuestros proyectos JavaWeb, y de manejo de servidores de aplicaciones y contenedores de servlets como Tomcat ó Glassfish (que utilizamos incluso para trabajar con PHP en dicha plataforma mediante Quercus), y en esta oportunidad, vamos a integrar a la plataforma de desarrollo de Appengine, y del servidor Jetty que es un servidor HTTP contenedor de servlets 100% basado en Java, y que son utilizados por Google App Engine para integrar el lenguaje Java en su infraestructura de desarrollo.

PREPARANDO NUESTRO ENTORNO DE DESARROLLO.

Existen hasta 04 formas para trabajar con proyectos GAE-Java, y que podemos resumir en:

Utilizando ANT, que es una herramienta opensource que nos permite facilitar el proceso de creación, compilación, configuración del despliegue y lanzamiento de nuestros proyectos Java y JavaWeb en un servidor de aplicaciones ó contenedor de servlets que trabaje con Google App Engine, como el servidor Jetty que viene incluído en el SDK para Java.

ANT se puede descargar de http://ant.apache.org, y es quizá una de las formas mas difundidas de trabajo en proyectos Java ..y es que con un formato de directorios ya estandarizado, (las conocidas carpetas WAR y SRC), y mediante el archivo "build.xml" (donde indicamos las etiquetas que conforman las diversas tareas de nuestro proceso de formación e nuestros proyectos y sus dependencias entre ellos), disponiendo así de todas las instrucciones necesarias para construir y desplegar nuestros proyectos, y sobre cualquier sistema operativo (lo que no se puede hacer utilizando scripts o archivos *.bat), y dependiendo de nuestra modalidad de trabajo, pues casi siempre con un mismo archivo "build.xml", y con pocas modificaciones referidos a los datos específicos de cada proyecto, lo podemos adecuar para trabajar en todos nuestros proyectos Java, y en el caso de los proyectos GAE-Java, dicha manera se mantiene, adecuando por supuesto, nuestro código a los requerimientos, necesarios para poner en funcionamiento un proyecto GAE-Java en nuestro servidor local de pruebas; y luego, para poderlos desplegar sobre la infraestructura de Google, como si se tratase de un servicio de hosting externo. Todo ello por supuesto, trabajando desde nuestra ventana de comandos, sobre Windows, Linux ó MAC-Apple, pues como ya debiéramos tener presente, Java es un lenguaje multiplataforma y corre sin problemas en cualquier sistema operativo.

Para correr con ANT nuestros proyectos Java, JavaWeb y GAE-Java, después de haber descargado ANT desde la ruta indicada, debemos ubicarnos en la carpeta de nuestro proyecto donde se encuentra el archivo "build.xml" y correr la instrucción:
%path-ANT%/bin/ANT runserver (enter), donde "runserver" es el nombre la etiqueta de nuestro archivo build.xml que ejecuta nuestro proyecto con el comando "dev_appserver" del SDK para Java de Google App Engine, y que usualmente depende de otras etiquetas necesarias para la construcción y ejecución de nuestro proyecto las que podemos revisar con detalla al abrir el archivo build.xml con nuestro editor de preferencia.

Utilizando los comandos proporcionados por el mismo SDK para Java, para cual solo es necesario que nuestro proyecto se encuentre correctamente configurado y construido (pudiendo utilizar ANT para ello), y luego utilizando el comando :
(%path_sdk%)/bin/dev_appserver.cmd (%path_war%), se procederá con el lanzamiento de nuestros proyectos a nuestro servidor local de pruebas, y por supuesto, de manera similar podemos lanzar nuestro proyecto a la infraestructura de Google una vez probados y aprobados nuestros proyectos. El SDK de Java los podemos descargar de la pagina oficial de Google de la siguiente dirección: http://code.google.com/intl/en/appengine/downloads.html, y es uno de los componentes básicos del entorno GAE-Java porque ademas de contener las clases que permiten nos permiten trabajar con el datastore "big table" de Google, entre otras herramientas para trabajar en dicho entorno, pues contiene al servidor local Appengine que nos permite realizar nuestras pruebas (el servidor Jetty como hemos indicado)

Utilizado el IDE Eclipse, para lo cual Google ha lanzado un plug-in oficial para trabajar nuestros proyectos GAE-Java sobre dicha plataforma de desarrollo, y que tiene como principal ventaja y desventaja, que "automatiza" algunos procesos de configuración de nuestros proyectos, y muchas veces creemos que es mejor que observemos y tengamos un mejor control de todos los procesos y componente de nuestros proyectos para mantener un desarrollo más limpio y eficiente (los codelabs de Google App Engine presentados en la pagina oficial de Google como el Developer Codelabs y el propio tutorial contenido en la documentación referidos a GAE-Java, se muestran utilizando esta herramienta, por lo que pueden revisarlos si les resulta conveniente).

y por supuesto, utilizando Netbeans IDE, el cual a nuestro criterio presenta algunas ventajas no solo tal vez porque ya los estemos utilizando en nuestros proyectos Java, sino que para los procesos de detección y solución de errores, y depuración, optimización y refactoring, Netbeans es bastante amigable, intuitivo y eficiente como tal vez ya lo hayan podido comprobar.. y por supuesto con Netbeans también se podemos automatizar todo el proceso construcción y lanzamiento de nuestros proyectos GAE-Java a nuestro servidor local de pruebas (sin tener que recurrir a digitar comandos), y también realiza el despliegue de nuestros proyectos en la infraestructura "cloud" de Google App Engine (que por supuesto requiere que previamente hayamos registrado nuestra cuenta Google y obtengamos una cuenta Appengine, y que registremos el nombre de nuestra aplicación y dominio propio, siendo éste último solo si lo estimasemos necesario.. Google nos provee un subdominio "appspot.com" que incluso lo podríamos utilizar en forma permanente).

No es nuestro objetivo en estos momentos comparar ni calificar las ventajas o desventajas de cada método de trabajo, menos comparar plataformas de desarrollo como GAE-Phyton y GAE-Go con GAE-Java; si no por el contrario, mostrar que todos estos procesos pueden de alguna manera complementarse y que es necesario conocer su funcionamiento para tener un completo concepto del funcionamiento de la plataforma de desarrollo Appengine y GAE-Java en particular, y así poder manejar todos sus detalles y componentes, más aún cuando como hemos indicado al principio, éste codelab es la antesala de otros dos en que presentaremos (además de trabajar con Java y el datastore "big table" de Google App Engine (que corresponde a éste codelab), a como trabajar con Java y PHP sobre esta misma plataforma usando Quercus (que ya hemos utilizado para trabajar con PHP en nuestros proyectos Java Web); e incluso para trabajar con Java y PHP sobre Google Cloud SQL, que es una implementación de la base de datos relacional MySQL sobre la infraestructura cloud de Google, que junto a la implementación del lenguaje Go para Google App Engine, corresponden a lo últimos desarrollos lanzados por Google para Appengine.
En todos estos casos vamos a trabajar con Netbeans IDE como herramienta de desarrollo para mantener un estándar de trabajo..así que sin mayores preámbulos empecemos con nuestro codelab...

PREPARANDO NETBEANS PARA TRABAJAR PROYECTOS GAE-JAVA

Recomendamos trabajar con Netbeans versión 7 en lugar de las versiones anteriores por el hecho que sus scanning son más rápidos y amigables que sus predecesoras de la versión 6.9 y anteriores, y en lo respecta para trabajar GAE-Java, pues también cabe resaltar que, en este tipo de proyectos debe indicarse, antes de lanzarlos a nuestro servidor local de pruebas, cual es nuestro "Main project" ...ello porque en GAE-Java, nuestros proyectos excepto los configuremos adecuadamente, serán lanzados por un mismo puerto, el 8080 por defecto, y para poder "cerrar" uno y "abrir" otro, además de cerrar nuestro servidor local de pruebas, deberá establecerse que proyecto desplegaremos al servidor, y en Netbeans 7, el IDE nos indica también de manera más amigable si nuestro proyecto ya ha sido seleccionado..

NOTAS IMPORTANTES :

Al instalarse Netbeans 7, se nos indicará durante el proceso si queremos cargar los proyectos JavaWeb desplegados en versiones anteriores (que no son necesario desinstalar), y estos serán agregados a los proyectos de nuestro IDE instalado.. ahora también se nos solicitará que indiquemos si requerimos instalar las ultimas versiones de los servidores Apache Tomcat y Glassfish, los que podremos instalar a nuestro requerimiento, en una carpeta adecuada para nuestro caso, y que durante su instalación, Netbeans IDE efectuará las configuraciones necesarias para evitar conflictos de puertos entre ellos, no siendo tampoco necesario desinstalar los servidores de Aplicaciones u otros contenedores de servlets que tengamos instalados.
Para el caso que nuestro proyecto haya sido lanzado a nuestro servidor local de pruebas, y no hayamos cerrado nuestro servidor antes de pasar a otro proyecto, nos conviene tener una herramienta como Java VisualVM, para observar los procesos Java que han sido desplegados, e incluso poder cerrarlos o eliminarlos "manualmente" de presentarse algún contratiempo en nuestra lógica de programación sin necesidad de reiniciar nuestro ordenador. Esta herramienta la podemos descargar de http://visualvm.java.net/download.html. y asimismo, una vez instalada, conviene que le agreguemos el plug-in KillApplication, que viene listo para ser instalado en la opción del menú: Tools, plug-ins lengüeta avaible plug-ins; y con ello en la pantalla de visualización de nuestros procesos Java, y solo haciendo click derecho con el mouse, se mostrará la opción "Kill Application", con lo podremos cerrar nuestros procesos Java facilmente, y sin necesidad de digitar en nuestra pantalla de comandos: Taskkill /pid=nn (donde "nn" es el numero de identificación que nos muestra Java VisualVM).

Si trabajamos con la version 1.7.2 ó superior del SDK para Java de Appengine debemos asegurarnos que en el archivo appengine-web.xml se encuentre el siguiente script:


<threadsafe>true</threadsafe>

Incluso para la muestra "guestbook" que viene con el SDK para Java debemos verificar que se encuentre este script para que funcione correctamente..
Si trabajamos con la version 1.7.3 del SDK para Java de Appemgine debemos asegurarnos que en carpeta WEB-INF-lib se encuentre grabado el archivo appengine-endpoint.jar, y que se encuentre cargado en nuestro proyecto para que el SDK se encuentre completo.

INSTALANDO EL SDK PARA JAVA EN NUESTRO NETBEANS

Debemos ahora cargar el servicio Appengine a nuestro Netbeans, y para ello debemos ir también al menú de Netbeans: Tools, plug-ins, y a la lengüeta Settings; allí no debe aparecer la opción de "Google AppEngine". Esta pantalla corresponde a la pantalla de configuración automática de actualización de los plug-ins de Netbeans, y nuestro plugi-in no aparece por cuanto aún no la hemos instalado ...para ello, elijamos la opción "Add" de esta pantalla para poder agregarlo, pongamosle como nombre "Google Appengine", y en la ruta URL indiquemos :

http://kenai.com/downloads/nbappengine/NetBeans69/updates.xml, que corresponde a la dirección del plug-in del fabricante para la version 6.9 y superior (válida también para Netbeans 7, aunque puede revisar la pagina de kenai.com para mayor verificación.

Aunque realmente vale destacar que Kenai ya no esta brindado un adecuado soporte a su plugin y a las contantes actualizaciones del SDK para Java de Google App Engine, por ello en varias oportunidades estuvimos buscando y revisando varias alternativas, y la mas adecuada que encontramos es la siguiente:

Importante !

from stackOverflow :

it's possible obtain a good plug-in for Netbeans 7.3 and GAE Java SDK v.1.8 from this repository:
https://github.com/Valery-Sh/NbAppEngine

with this plugin, GAE projects like guestbook sample or new personal projects are running very fine..

Method of use:

1. delete completely App Engine server of your Netbeans (I had to reinstall Netbeans to remove the service completely, but there must be a way to do)
2. download plug-in from : https://code.google.com/p/nb-gaelyk-plugin/downloads/detail?name=nbappengine-7.3-gae1.8.x.zip or last plugin versions to any folder..
3. install plug-in : Tools / Plugins / Downloaded
4. verify update of plugins..

latest News:

test on Netbeans 7.3.1 Ok.! (July 2013)

A. Con lo anterior, debemos haber cargado el plug-in Google Appengine de Kenai.com a nuestro Netbeans, y ahora debemos activarlos (en caso hayamos utilizado el plugin Valery-nbappengine, éste no requiere ser activado sino que directamente debemos crear nuestro servidor local como se indica en el parrafo "B" siguiente ), de ser el caso, debemos ir a la lengueta "avaible plug-ins" de la misma pantalla, y seleccionemos todos los plug-ins disponibles para Google App Engine ("server", "configuration", "deployment" y "samples"); si su Netbeans ya hubiese estado preparado para trabajar con "Java Hints", podrá tambien instalar el plug-in "Google App Engine Eitor Hints", pero si no es el caso, no marque esta opción... los plug-ins requeridos mencionados funcionarán sin mayores contratiempos.

B. Con el paso anterior descrito, tenemos los plugins instalados listos para trabajar con Netbeans, pero aún nos falta como debemos crear nuestro servidor local Appengine para nuestras pruebas, y para ello debemos descargar el SDK de Java en una carpeta que podríamos llamar "appengine", en donde también descargaremos los códigos que corresponden a nuestro codelab ...entonces, descargado el SDK de Java, debemos implementar el servidor, y para ello debemos recurrir a la lengüeta "services" de nuestra pantalla principal de Netbeans (al lado de donde se despliegan nuestros proyectos y "Files" de los mismos). Allí debemos hacer click derecho sobre la opción "servers" para poder adicionar uno nuevo, la pantalla a continuación nos indicará que servidores tenemos disponibles para instalar, y debe aparecer "Google App Engine" por cuanto nuestro plug-in ya ha sido instalado..Al seleccionarla, en la parte inferior de la pantalla, se nos permitirá modificar el nombre de nuestro servidor, y conviene que indiquemos la version de nuestro SDK descargado, por ejemplo Appengine SDK 1.6.0 (podremos agregar nuevos servidores Appengine segun las nuevas versiones del SDK disponibles, y no descartar las existentes hasta que hayamos probado completamente nuestros proyectos) ...sigamos entonces las instrucciones de Netbeans y listo.. ya tendremos a nuestro servidor local GAE listo para trabajar...

C. Adicionalmente si queremos probar que todo esta correctamente instalado, en el Menu de Netbeans indiquemos que queremos crear un nuevo proyecto... pero en lugar de seleccionar un proyecto "JavaWeb", vayamos a la opción "ejemplos", allí busquemos el ejemplo de Google App Engine, y la instalación de nuestro plug-in debe ahora permitirnos mostrar la opción Guest Book (que corresponde a un libro de Visitas que Google muestra como ejercicio en su página oficial), siga los pasos e indique que va instalar el proyecto en la carpeta "appengine", donde también descargamos el SDK de Java para mantener nuestros proyectos en un mismo lugar.. y listo, debe crearse el proyecto "guestbook" así que ahora corramos el proyecto y debería desplegarse en nuestro navegador de preferencia...

podemos consultar con nuestro Java VisualVM que nuestro proyecto ha sido desplegado (tiene 03 componentes, el proceso ANT, el proceso de despliegue, y el "debug", cada uno con un numero de proceso diferente), ..y para detener al servidor puede recurrir al botón rojo al lado de la pantalla de salida "output" de Netbeans o cerrar el proceso con "KillApplication" de Java VisualVM, en cualquier caso, si selecciona uno de los procesos desplegados se cerrarán los otros (no cierre el proceso Netbeans pues cerrará al IDE)

Si revisamos las propiedades de nuestro proyecto "guestbook" cargado automáticamente como ejemplo de una aplicación GAE-Java en Netbeans (botón derecho el mouse sobre el nombre de nuestro proyecto), podrán observar que se mantienen las opciones básicas de un proyecto JavaWeb, pero que se nos permite seleccionar/deseleccionar nuestro proyecto como "Main project", y asimismo, que al final de la lista, antes de las propiedades, se encuentra activada la opción "Deploy to Google App Engine" (para lanzar nuestros proyecto directamente a la plataforma cloud de Google); conviene tambien que le demos una revisión a las propiedades de nuestro proyecto, en especial a la pestañas "source" y "run", donde podremos indicar la versión de JDK y codificación que utilizaremos (JDK5 y UTF-8 por defecto) ..y el servidor que utilizaremos para desplegar nuestro proyecto... si tuviesemos varios SDK Java instalados podremos cambiar entre ellos y ver los resultados antes de eliminar alguno de ellos...

Hasta aquí.. ya tenemos nuestro entorno de desarrollo GAE-Java listo para trabajar nuestros propios proyectos con Netbeans en esta plataforma.. pero como hay algunas "inconsistencias" respecto a trabajar con GAE-Java en Netbeans, vamos a detallar paso a paso como cargar nuestro codelab "gae-guestbook" a nuestra plataforma GAE-Java de Netbeans que hemos instalado...

Instalando nuestro codelab "gae-guestbook" en Netbeans IDE

Como se indica, tenemos por supuesto que haber instalado en nuestro ordenador Netbeans y haberlo habilitado para trabajar con un servidor local Appengine, mediante la instalación de los plug-ins necesarios y de nuestro servidor local Appengine de pruebas, como hemos descrito en los pasos anteriores.

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

gae-guestbook.rar, que corresponde a nuestra adaptación del proyecto "guestbook" básico presentado en nuestra instalación del ejemplo de Netbeans, y donde les presentamos como trabajar con tipos de datos string, numéricos, date y user con el datastore de Google App Engine, y presentándolos sobre un "table" HTML, pero a diferencia de todos nuestros codelabs anteriores, nuestro códigos no están contenidos en una carpeta que descargar e importar como un proyecto "JavaWeb con fuentes existentes" directamente sobre Netbeans IDE... es allí donde se comienza lo que podríamos llamar algunas "inconsistencia" en el manejo de proyectos GAE-Java que espero logren adecuar en versiones futuras del IDE, pero que podemos y debemos superar para poder trabajar con Netbeans sin mayores contratiempos.

Nota importante:

en caso estemos trabajando con el plugin Valery-nbappengine y lo utilicemos para crear nuestro servidor GAE-Java utilizando el SDK para Java version 1.8, pues tenemos una grata e importante noticia:

En este caso ya no es necesario crear un proyecto vacio para "sobreescribir sobre ella" las fuentes de nuestra descarga dado que este plugin nos permite crear proyectos GAE-Java sin mayores problemas utilizando su opción: New Project/Java Web/Web Application with existing sources
Asimismo, para desplegar nuestra aplicación en la plataforma GAE solo basta con hacer click derecho sobre nuestro proyecto y utilizar la opción "Deploy To Google App Engine" (debe por supuesto crearse primero nuestra cuenta GAE y registrar nuestro proyecto, como corresponde), con las versiones del plugin disponibles en kenai.com esta opción tampoco trabajaba correctamemte para las nuevas versiones de Netbeans y del SDK para Java
y es tambien una buena noticia que en la version 7.3 de Netbeans ya no resulta necesario y no existe la opción "set/unset as main project", con lo que el manejo de proyectos GAE-Java en Netbeans resulta ahora mucho mas sencillo, rápido y eficiente; y por lo que varios de los pasos detallados a continuación deben obviarse segun corresponda..

El caso es que para proyectos GAE-Java, resulta necesario que creemos primero en nuestro Netbeans un proyecto JavaWeb y que le indiquemos que utilizaremos un servidor Appengine que ya debemos haber instalado (y en este caso ponerle el nombre "gae-guestbook" ( por supuesto, este es un nombre sugerido.. puede ser cualquier otro)

1. Creando nuestro proyecto Java-Web

2. Indicando el nombre y la ruta de nuestro proyecto...

3. Seleccionando el servidor...

4. Termiando nuestro proyecto gae-guestbook "vacío"...

Hasta este punto, lo que hemos hecho es crear un proyecto "vacío", por defecto Netbeans nos presenta un simple "Hello World" para verificar que todo ha sido correctamente configurado y lo podamos desplegar en nuestro servidor local Appengine de pruebas... En la imagen a continuación pueden observar que a este código le hemos agregado una simple descripcion a este proyecto antes de lanzarlo a nuestro navegador...

5. Agregando una descripción a nuestro código generado...

6. Ejecutandi nuestro proyecto...

7. Nuestro proyecto en nuestro navegador de preferencia..

Hasta este punto lo que hemos conseguido es mostrar nuestro proyecto JavaWeb en nuestro servidor local Appengine de pruebas y todo parece funcionar correctamente.. vale entonces "cargar" ahora nuestro proyecto, pero continuando con las "inconsistencias" mencionadas, vale indicar que Netbeans mantiene algun problema para cargar directamente nuestro proyecto, y todo porque aún no le encuentro una opción para cargar a Netbeans un "Main Project" GAE-Java a su lista "interna" de proyectos.. pero eso lo hemos conseguido creando este proyecto "vacío"... ahora tenemos que "borrarlo".. pero indicando que no se eliminen las "fuentes" del mismo (debe quedar desmarcada la opción al respecto).. asimismo, es importante que tambien "detengamos nuestro servidor", por cuanto, al ejecutar nuestro proyecto "gae-guestbook" este se encuentra en funcionamiento (puede comprobarlo observando los procesos Java desplegados mediante "Java VisualVM"), y esto lo podemos hacer mediante el mismo Netbeans o mediante "Java VisualVM".. si no efectuamos este paso, al querer eliminar nuestro proyecto no se permitirá "borrar" las carpetas en uso de nuestro proyecto y tendremos que eliminarlas manualmente.. luego de detener al servidor, pues en eso caso, al estar los archivos en uso tampoco podrá ser efectuado.

8. observando nuestros procesos activos con Java VisualVM

9. cerrando nuestros servidor eliminando los procesos Java con Java VisualVM

10. cerrando nuestro servidor con el mismo Netbeans...

11. Borrando nuestro proyecto "vacio"

Si todo lo hubiésemos efectuado correctamente, en la carpeta "gae-guestbook" donde se ha creado nuestro proyecto solo se debería observar a las carpetas WEB y SRC (que son los requiere nuestro proyecto para ser desplegado en Netbeans).. e incluso podemos probar ahora cargar esta carpeta como un proyecto JavaWeb con "fuentes existentes" en nuestro servidor Appengine, y podrán observar que éste ahora si podrá ser creado sin mayores contratiempos..y que se creará con el nombre de nuestra carpeta como cuando creamos nuestros proyectos JavaWeb...

12. Carpetas basicas de un proyecto GAE-Java en Netbeans..

El caso es que para nuestros propósitos conviene que nuestros proyectos muchas veces reconozcan el formato ANT (y con el archivo build.xml incluído), y para observar como hacer éste proceso podemos entonces "descargar" nuestras fuentes a la carpeta de este proyecto vacío, sobreescribiendo las carpetas y archivos que existan (por supuesto, previamente nuestro proyecto ha sido borrado de nuestro Netbeans)

Efectuada esta operación conviene que revisemos nuestro archivo build.xml descargado y indiquemos correctamente la ruta de descarga de nuestro SDK de Java.. y listo! ya estamos listo para cargar nuestro proyecto en Netbeans:

14. Verificando la ruta de nuestro SDK de Java en build.xml

15. Cargando nuestro proyecto gae-guestbook...

Nuestro Netbeans detectará que existe un archivo build.xml al cargar nuestro proyecto así que seleccionemos Ok cuando se nos pregunte al respecto...

Como podemos observar, Netbeans carga todo nuestro proyecto sin mayores cambios puesto que la carpeta WAR propios de los proyectos JavaWeb la hemos nombrado WEB (que reconoce automáticamente Netbeans), y asimismo, en nuestro build.xml se han efectuado las modificaciones necesarias para que trabajemos con esta carpeta... así que corremos nuestro proyecto y listo! ya podemos cargar proyectos GAE-Java como proyectos JavaWeb de Netbeans, y revisarlos, modificarlos, ejecutarlos y cargarlos a la plataforma Cloud de GAE directamente desde Netbeans.

Al probar nuestro proyecto "gae-guestbook" podrán observar que al "firmar el libro de Visitas", y para las 10 primeras entradas, se nos lanzará a una página similar a la del ejemplo "guestbook" instalado inicialmente al preparar nuestro Netbeans... Asimismo, que con la opción "LIKE Search" hemos implementado una busqueda "%like%" sobre el datastore de GAE. Cabe destacar que "big table datastore" de AppEngine es una potente base de datos "escalable" y de alta disponibilidad (sin límites y siempre disponible aún cuando se "caigan" alguno de los servidores que la soportan.. y que por diseño soporta "persistencia" de datos, lo que nos permite incluso miles de conexiones simultaneas sin desmejorar el rendimiento del sistema; pero el costo de estas bondades, es que algunas operaciones de la base de datos están limitadas o restringidas (como es el caso de las consultas "%Like%" indicada, entre otras), por lo que nos conviene revisar con detalle lo siguiente :

Unsupported Features of JDO

The following features of the JDO interface are not supported by the App Engine implementation:

Unowned relationships. You can implement unowned relationships using explicit Key values. JDO's syntax for unowned relationships may be supported in a future release.
Owned many-to-many relationships.
"Join" queries. You cannot use a field of a child entity in a filter when performing a query on the parent kind. Note that you can test the parent's relationship field directly in query using a key.
JDOQL grouping and other aggregate queries.
Polymorphic queries. You cannot perform a query of a class to get instances of a subclass. Each class is represented by a separate entity kind in the datastore.
IdentityType.DATASTORE for the @PersistenceCapable annotation. Only IdentityType.APPLICATION is supported.
There is currently a bug preventing owned one-to-many relationships where the parent and the child are the same class, making it difficult to model tree structures. This will be fixed in a future release. You can work around this by storing explicit Key values for either the parent or children.

Por supuesto, para la conexión al GAE Datastore hemos utilizado "JDO", y conviene también tener presente la documentación al respecto:

http://code.google.com/intl/en/appengine/docs/java/datastore/jdo/overview.html

Instalando nuestros codelabs:
"Int-Google01" e "Int-Google02" como proyectos GAE-JavaWeb en Netbeans IDE

Nuestros proyectos Integración Google 1ra y 2da. parte son desarrollados exclusivamente con HTML y Javascript (considérese que el framework ExtJs utilizado en esos proyectos es Javascript), pueden entonces cargarse estos ejercicios como proyectos JavaWeb de Netbeans, como hicimos en nuestro codelab referido al Back-End Java(JSP)+MySQL, ó como lo hicimos sobre WebMatrix, correspondiente al uso de servidores IIS de Microsoft; y por supuesto, tambien pueden cargarse como proyectos "Appengine JavaWeb" en nuestro Netbeans (y poder luego colgarlos en la infraestructura cloud de Google), pero para ello, debemos configurar su presentación para que trabajen como proyectos GAE-Java, y los cambios realmente son mínimos, como ya hemos indicado, debemos adecuar la ruta de descarga de nuestro SDK en "build.xml", y además, verificar el contenido de los archivos "web.xml" y "appengine-web.xml" de la carpeta web/WEB-INF, que es donde se alojan los archivos de configuración de nuestros proyectos GAE-Java. En el caso de "web.xml", tal como en cualquier proyecto JavaWeb, se ha indicado que el archivo de partida de nuestro proyecto es "index.html"; y en "appengine-web.xml", indicamos el nombre de nuestra aplicación... y eso es todo, el código utilizado respecto a nuestros proyectos iniciales que corrimos sobre una plataforma LAMP ó WAMP no varían en nada...

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

gae-IntGoogle01.rar (1.7Mb), que nos muestra Visualizaciones Google sobre ExtJs (la versión Ext-3.4.0 en este caso), correspondiente a dicho codelab, ahora adecuados a un formato "Java Web" para poder cargarlos como un proyecto de Netbeans. Puede revisar nuestra entrada Integracion Google 1ra parte para mayores detalles de sus componentes y forma de desarrollo. Asimismo recuerde qu, por el momento, primero debemos crear un proyecto Appengine JavaWeb"vacio" con nuestro Netbeans, sobre la carpeta appengine que descargamos el SDK de Java, y luego de verificar su funcionamiento, para el servidor Appengine, borrarlo con Netbeans, escargar en la carpeta creada nuestro material de apoyo, y finalmente, crear nuestro proyecto JavaWeb con "fuentes existentes" indicando por supuesto que vamos a utilizar como servidor a Google App Engine... y eso es todo.

gae-IntGoogle02.rar (2.3Mb), que nos muestra Visualizaciones Google y ExtJs de nuestro documento "Spreadsheet" de Google Docs, Puede revisar nuestro codelab Integracion Google 2da. partepara mayores detalles de sus componentes y forma de desarrollo. Se adjunta la copia de hoa de calculo en formato "xls" para que podamos nuestras propias sobre un documento propio que podríamos cargar en nuestro Google Docs, para ello, pueden revisar nuestro mencioando codelab Integracion Google 2da parte para mayores detalles de los componentes y la forma de desarrollo del proyecto.

Para cargar estos proyectos a Netbeans como proyectos "Appengine JavaWeb", como ya hemos indicado, debemos crear primero sendos proyectos "vacios" que podemos llamar "gae-intGoogle02" y "gae-intGoogle02" respectivamente; y luego, de manera similar a como "cargamos" nuestro proyecto "gae-guestbook", eliminar estos proyectos y descargar en las carpetas correspondientes nuestro material de apoyo. Luego procedemos a crearlos nuevamente pero como proyectos JavaWeb con "fuentes existentes", que utilizarán el servidor Google App Engine, y listo.. podremos ejecutar niestros proyectos Integración Google 1ra y 2da parte en la infraestructura local de pruebas de Google App Engine para Java, y posteriormente cargarlos a la plataforma Cloud de Google..aunque respecto a este último proceso, vale reiterar que Google solo nos otorga un servicio libre limitado a 10 proyectos, y de hasta 500Mb de espacio de uso del datastore, entre otras limitaciones que tambien debemos tener en cuenta, y que podemos consultar en la documentación respectiva.

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_01.js / MenuGVisualization_02.js where appropiate!

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 también puede probar en su servidor local de pruebas utilizando el SDK para Java de Google App Engine..

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

IntGoogle01-OAuth20.rar ( 3.05Mb ), 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.

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

IntGoogle02-OAuth20.rar ( 3.20Mb ), 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 IntGoogle01-Oauth20 como proyectos GAE-JavaWeb !

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 actualizacion a la API v.3)..por supuesto, al trabajar con nuestro servidor local "localhost" no se presentan problemas.. el asunto es, como indicamos, al cargar nuestros proyectos a un servicio de hosting externo cualquiera.. como es el caso de la plataforma GAE (Google App Engine), que es donde esta corriendo nuestra demo)

NOTAS DE TRABAJO :

1.- No debemos olvidar que para "abrir" un proyecto debemos previamente cerrar el que tengamos abierto, e indicar que el proyecto que vamos a desplegar sea seleccionado como nuestro "Main project". Si no lo hacemos, al correr un proyecto se compilará nuestro proyecto, pero se lanzará a nuestro navegador el proyecto que este marcado como "Main project", lo que podría confundirnos.

3.- Podemos configurar nuestros proyectos para utilizar diferentes puertos de "salida" y "debug", y tener abiertos en forma simultanea al hacer nuestras pruebas. La configuración se realiza en el archivo "build.xml"

6.- Podemos observar asimismo, la diferencia de "pesos" de nuestros codelabs gae-intGoogle01 (1.7Mb) y gae-intGoogle02 (2.3Mb); a pesar que en realidad son parecidos y el código Javascript que utilizan son casi del mismo peso ...ocurre que en el primero caso utilizamos ExtJs4-MVC "comprimido" con el SDK de Sencha, y en el otro empleamos ExtJs-3.4 Al correr estos ejercicios podrá comprobar que nuestros desarrollos bajo ExtJs4 son mucho mas rápidos para cargar y ejecutarse, en comparación que los desarrollados con ExtJs-3.x., y esto a nuestro criterio es una de las principales mejoras de ExtJs4, que incluso es aún más eficientes en su versión ExtJs-4.1, de próxima liberación en su formato GPL. Puede ver con más detalle nuestro codelab Integracion Google 1ra parte donde explicamos con más detalle la construcción del código ExtJs4 de este ejercicio.

Saludos
@Mlaynes

Using PHP like a JavaWeb Project on Tomcat server

2011-11-23T03:00:00.000-05:00

Recuerde que..

Continuando con nuestras investigaciones y pruebas de tecnologías Web vigentes, nos encontramos con la librería Quercus, que es una implementación Java de PHP (de PHP versión 5.3.2 para Quercus 4.0.18 vigente a fecha 30.09.2011), aunque aunque debemos tener presente que la Tecnología Caucho promotora de la librería, y del servidor Resina, se muestra bastante vigente y activa, principalmente a causa que éste servidor puede ser utilizado para soportar PHP en desarrollos Java y de Google Appengine, como una librería en el primer caso y como una aplicación en el caso del SDK de Google Appengine para Java (resaltando que Quercus es uno de los componentes principales del servidor Resina, que es un servidor de aplicaciones JSP y servlets similar a Tomcat ó Glassfish, y que puede colaborar de manera transparente con el servidor Jetty empleado por GAE).

Lla infraestructura cloud de Google Appengine soporta actualmente Python y Java; lenguajes que nos permiten entre otras cosas, conectarnos y trabajar con el datastore de Appengine, que es una base de datos escalable y de alta confiabilidad desarrollada Google (definido con el concepto "big table" ); asimismo, a partir de Octubre del 2011, Appengine también soporta lo que se ha denominado Google Cloud SQL, que corresponde a la base de datos relacional MySQL, adecuada para obtener de ella una alta disponibilidad y confiabilidad dentro de la infraestructura de Google ( libre de mantenimiento y administración de parte de los usuarios de nuestros aplicativos ), y ya nos debe resultar familiar que dentro el entorno de desarrollo Java usualmente resulta fácil conectamos a estas bases de datos utilizando JDBC, método que ahora también es soportado por Google Appengine (en el caso de usuarios Phyton se puede utilizar DB-API con el mismo propósito).

Resulta también cierto afirmar que, para los desarrolladores Web en general, hablar de conexiones a bases de datos MySQL es hacer referencia a un proceso ahora muy difundidos, y que esta base de datos da soporte a muchos proyectos opensource muy difundidos como son los gestores de contenidos Drupal, Wordpress, Elgg, Joomla; phpBB y muchas otras aplicaciones desarrollados para el Back-End.PHP+MySQL, y es importante destacar asimismo que, si nuestra plataforma de desarrollo mantiene soporte a PHP, pues nos permitiría tener acceso a todos esos proyectos y "servicios sociales". Sería entonces posible la opción de poder utilizar todos estos desarrollos dentro de la infraestructura de Java, y de los servidores de servlets y JSP como Tomcat ó Glassfish (los que son también muy difundidos en empresas y organizaciones corporativas), e incluso también dentro de la infraestructura de Google Appengine mediante el SDK de Java, y conectarnos con la novedosa infraestructura Google Cloud SQL, e incluso con el mismo datastore de Google Appengine, y para ello, en primer lugar, debemos conseguir utilizar PHP como parte de un proyecto JavaWeb, y dentro de la plataforma de desarrollo de un servidor de aplicaciones ( al igual como en el entorno de los servidores IIS utilizamos PHP con ASP.Net y C# mediante WebMatrix )..... y todo esto es posible mediante Quercus..

Tenemos que tener en cuenta que al ser Quercus una codificación Java del lenguaje PHP, nuestros proyectos que utilicen código PHP ya no se comportaría como un lenguaje interpretado, sino como "lenguaje compilado" durante su ejecución en un servidor de aplicaciones, con ello se lográ mejorar el rendimiento y tiempo de respuesta de nuestros aplicativos desarrollados con PHP dentro de un proyecto JavaWeb, mejorando todo el rendimiento de nuestro aplicativo, y con ese objetivo (y para que podamos efectuar nuestras comparaciones), es que vamos a "migrar" nuestros codelabs que presentamos como parte de nuestras pruebas del Back-End PHP+MySQL para que trabajen ahora en un servidor Tomcat, cargándolos como proyectos JavaWeb usando el IDE Netbeans, que como ya hemos indicado, nos facilita la configuración y despliegue de nuestros desarrollos en dicha plataforma.

Quercus es una tecnología que vió la luz desde el año 2006, y el 2009 tuvo relevancia junto con el lanzamiento del SDK de Java para Google Appengine, y después de una difusión bastante promisoria, inclusive con una presentación en el "Google I/O" de ese año (donde mostraron una "migración" de Wordpress que corre completamente dentro de infraestructura de Google con cambios mínimos de código PHP, y aunque la aplicación colgada en Appengine a veces sobrepasa la cuota libre proporcionada por Google para su desarrollador, nos consta su funcionamiento), pues parece que la aplicación no ha tenido suficiente soporte de parte de sus desarrolladores y de la comunidad en general, para lograr las correspondientes facilidades y poder continuar con las pruebas y el desarrollo de aplicaciones, pero creo que todo puede variar con el reciente lanzamiento de Google Cloud SQL, con lo que poder utilizar PHP dentro de proyectos JavaWeb tanto en aplicaciones para nuestros propios servidores y dentro de la infraestructura de Google, y ahora en ambos casos, prácticamente sin cambiar nada de código PHP, pues ahora desde esta perspectiva, pensamos que ésta tecnología si puede llegar a convertirse en una opción bastante importante para considerar y creemos importante aportar al respecto... y por ello hicimos nuestras propias pruebas que ahora presentamos.

Para nuestros codelabs de esta oportunidad, vamos a mantener la opción de poner en cada proyecto lo necesario para que funcionen directamente ( solo siendo necesario configurar nuestras conexiones a MySQL en los codelabs que lo requieran, pero por ello el peso de nuestros proyectos se han incrementado a casi 10Mb, y que corresponden casi todo al archivo resin.jar de Quercus que pesa mas dei 9Mb); entonces, para disfrutar de este codelab solo será necesario cargar los proyectos a nuestro Netbeans, como proyectos JavaWeb con fuentes existentes. Vale decir, en el caso de los dos primeros codelabs que nos muestran la forma de uso de Quercus y de código PHP sobre una plataforma de desarrollo Java, pues deberá cargar y ejecutar directamente los proyectos... pero en los casos de nuestros codelabs Grid-MySQL, Wizard-sample e Integración Google 3ra. parte (Int-Google03), pues si ya hubiésemos instalado y puesto en funcionamiento nuestros codelabs anterioires correspondientes al uso del Back-End PHP+MySQL (ó del uso de PHP sobre servidores IIS mediante WebMatrix), en ese caso, los ejercicios podrán ser ejecutados y probados directamente, pero si Ud. estimado lector, ha llegado directamente a este codelab, deberá crear las bases de datos MySQL requeridas y verificar sus respectivos parámetros de conexión (host, usuario, password y las bases de datos utilizadas en estos), para lo cual también entregamos los achivos *.sql correspondientes.

Ya desde nuestra primera entrada empezando desde cero que dió inicio a las investigaciones de nuestro proyecto Integración Google, les habíamos indicado que el lenguaje PHP, integrado completamente al servidor Apache en nuestra instalación de Appserv, como un componente del servidor, y que incluso podía ser instalado de manera independiente; el caso es que al instalar Appserv, u otro servidor similar LAMP, WAMP, etc, el lenguaje PHP ya viene configurado y listos para usar en nuestros desarrollos; pero ahora, para nuestras pruebas de Quercus, y ver nuestros códigos PHP trabajando en un proyecto JavaWeb, no requerimos instalar ni configurar nada nada sobre el servidor... Quercus como ya hemos indicado, es una librería que viene incluida en el servidor Resina, y a la que podemos acceder copiando el archivo resin.jar desde la carpeta bin de nuestra descarga del servidor (ó tambien del war de nuestra descarga de Quercus; que como podrán observar, son el mismo archivo). Asi que en esta oportunidad, nuestro primer codelab es nuestro proyecto myQuercus, creado a partir del war de Quercus versión 4.0.18 (30.09.2010), el cual para adecuarlo a las nuevas versiones de la biblioteca, solo bastará con reemplazar el archivo resin.jar por el correspondiente de nuestras descargas de la pagina oficial de caucho.com

Instalando nuestros codelabs "myQuercus y PHP-with-Java" en Netbeans para ejecutar sobre el servidor Tomcat.

Como se indica, tenemos por supuesto que haber instalado en nuestro ordenador Netbeans y el servidor Tomcat, y si no lo han efectuado, conviene que den una lectura detallada e incluso ejecuten nuestro codelab Usando el Back-End Java+MySQL: Iniciandonos, donde se detalla el proceso y se ejecuta nuestros codelabs Integración Google 1ra. y 2da. parte, los que al no contener codificación Java ni PHP, son directamente ejecutados sobre esta plataforma y nos muestran el funcionamiento de los elementos del framework ExtJs que venimos empleando en nuestros desarrollos ( como maquetación utilizando viewport, Menu TreePanel, windows, paneles, stores y grillas, etc), y el empleo de algunas de las API de Google como autenticación, manejo de spreadsheets de Google Docs, visualizaciones y Mapas de Google...

Estos codelabs para ser instalados en nuestro IDE Netbeans y ser ejecutados sobre el servidor Tomcat, deben ser primero descargados sobre una carpeta que podríamos denominar "Quercus" ( el material de apoyo indicado a continuación ), y con lo que podremos crear nuestros proyectos a partir de las fuentes proporcionadas, y asimismo debenos indicar, durante el proceso y en la pantalla de configuración correspondiente, que utilizaremos el servidor Tomcat para ejecutar nuestros proyectos..

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

myQuercus.rar, que corresponde a nuestra adaptación del war descargado de la pagina oficial de Quercus para ser utilizado con Netbeans, y que al ejecutar como proyecto JavaWeb podrán observar la información disponible proporcionada que hemos adecuado, especialmente la correspondiente a la forma de actualización a las nuevas versiones de la librería, pues al ser un proyecto bastante vigente y activo, como hemos indicado por su empleo en el entorno de desarrollo del SDK Java de Google Appengine, es continuamente actualizado... e incluso, en este año 2011 han logrado el reconocimiento Java EE6 Web Profile Certified with Healht System & Cloud Support (pueden revisar la cronologia), lo que nos puede dar una idea del real potencial y las posibilidades de esta librería.

PHP-with-Java.rar, que corresponde a nuestra muestra de como utilizar código PHP conjuntamente con Java, y para ello ejecutamos la función phpinfo() que nos muestra la versión PHP que utiliza nuestra librería Quercus instalada (que puede ser diferente dependiendo de nuestra version de Quercus que utilicemos); además de datos y variables del entorno PHP disponibles para nuestros desarrollos. Este codelab también solo necesita ser cargado y ejecutado a nuestro Netbeans para funcionar.

Instalando nuestros codelabs "Grid-MySQL, Wizard-sample e Integracion Google 3ra parte" del Back-End PHP + MySQL, en Netbeans para ejecutar sobre Tomcat:

Nuestros codelabs referidos al uso del Back-End PHP+ MySQL esta dividido en tres partes, los que son:

1.- Iniciándonos (Grid-MySQL.rar ), que nos muestra un modelo CRUD -opciones básicas de Crear, Modificar, Borrar, Buscar e Imprimir-, sobre una tabla de una base de datos MySQL, considerando componentes dinámicos, y es el que corresponde a nuestro codelab Grid-MySQL indicado.

2.- Temas de Seguridad y Wizards (Wizard.sample.rar), que muestra el mismo desarrollo anterior pero considerando una pantalla de acceso para poder utilizar dicha aplicación...y a la que le hemos acondicionado componentes dinámicos respecto al manejo de idioma de nuestro navegador ( la API language de Google, cuyo efecto podemos observar al cambiar el idioma de nuestro navegador...para ello, siga la ruta : Herramientas, Opciones, Avanzado, Contenido Web y Configuración de Idiomas en Google Chrome si están utilizando dicho navegador por supuesto);

y por último, tenemos:

3.- Nuestro codelab Integración Google 3ra parte (Int-Google.rar), que nos muestra un Modelo TreePanel de visualizaciones Google y del framework ExtJs, además de Google Maps, y a nuestro modelo CRUD de Mantenimiento de la tabla de presidentes utilizada en los dos primeros codelabs referidos, la que hemos unido al ejercicio en este caso, como muestra de como integrar nuestros componente desarrollado en nuestros proyectos.

Cabe reiterar que estos codelabs corresponden a los considerados en nuestros ejercicios sobre el Back-End PHP+ MySQL pero ahora instalados sobre el IDE Netbeans para ser ejecutados sobre el servidor Tomcat, para lo que debemos crear los proyectos a partir de las fuentes proporcionadas (y que como ya hemos indicado, debemos descargar sobre una carpeta que podemos denominar "Quercus"), y asimismo no debernos olvidarnos de indicar durante el proceso y en la pantalla de configuración correspondiente, que utilizaremos el servidor Tomcat para ejecutar nuestros proyectos..

Vale recordar que, como estos codelabs corresponden al uso de la base de datos MySQL, éste es un componente nativo de un servidor AppServ; entonces para el caso de las bases de datos requeridas para los ejercicios, recomendamos crearlas sobre el mismo servidor MySQL ya instalado con Appserv, pues sobre un mismo ordenador no tiene ningún sentido tener instalado varios servidores MySQL ) aunque es posible, si se configuran para puertos diferentes ); y asimismo, que para crear las bases de datos debemos utilizar la herramienta phpMyAdmin también disponible en nuestro servidor Appserv con los archivos *.sql entregados en cada ejercicio.

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

Grid-PHP-MySQL.rar, que corresponde a nuestro codelab "iniciándonos" sobre el Back-End PHP+ MySQL, proyecto desarrollado tomando como referencia un tutorial de la pagina Oficial ExtJs, cuyo código por supuesto hemos mejorado y que utiliza la versión ExtJs-3.4.0; y que nos presenta un modelo CRUD -opciones básicas de Crear, Modificar, Borrar, Buscar e Imprimir-, sobre una tabla de una base de datos MySQL, considerando componentes dinámicos.

Using the Back-End PHP+MySQL (Getting Started) corriendo como proyecto JavaWeb sobre nuestro servidor local Tomcat :

Este codelab trabaja con la base de datos "tutorial", que si no la hemos creado para nuestros otros codelabs, deberá crearla primero con la herramienta phpMyAdmin de Appserv, y luego importar sobre ella las tablas y datos requeridos desde el archivo pdtes_usa.sql incluído en la descarga.

Recuérdese asimismo que en el archivo database.php, y en la instrucción msql_connect debemos indicar los datos para conectarnos a la base de datos (host, usuario y password), y en la instrucción msql_select_db, indicar el nombre de la base de datos donde hemos importado las tablas y datos contenidos en pdtes_usa.sql ("tutorial" es el nombre de la base de datos que hemos utilizado).

Pueden también revisar nuestra entrada : Using the Back-End PHP+MySQL ( Getting Started ) donde mostramos con mayor detalle el contenido de cada componente de este codelab, aunque en esa oportunidad, las mostramos para instalar y hacer funcionar este proyecto sobre el entorno de desarrollo de Appserv ( servidor Apache+ PHP+ MySQL), pero cuyos conceptos son completamente compatibles para utilizarlos sobre este entorno de desarrollo de WebMatrix, por cuanto, en dicha plataforma, en ese caso, solo utilizamos al servidor IIS y el lenguaje PHP instalado sobre ella... y el funcionamiento del servidor IIS es similar al del servidor Apache al desplegar código PHP, y esto porque en nuestro codelab no estamos utilizando ningún código ASP.Net ó C#.

Wizard-sample.rar, que corresponde a nuestro codelab "Temas de Seguridad y Wizards (acceso)" referidos al Back-End PHP+ MySQL, donde mostramos los fundamentos para empezar a diseñar nuestros sistemas y proyectos tomando en consideración pantallas de acceso (Wizards) y revisando que opciones de seguridad debemos empezar a considerar en ellos. Este codelab hace referencia a como poder acceder (ó restringir el acceso a usuarios no autorizados) a nuestro modelo CRUD del codelab anterior, y para ello hace uso de los datos registrados en la tabla usuarios creada al importar pdtes_usa.sql sobre la base de datos "tutorial" ya creadas. Todo el código empleado en el codelab es PHP sobre HTML y Javascript, los que mediante Quercus on ahora soportados como proyecto JavaWeb, que cargaremos sobre Netbeans y ejecutaremos sobre nuestro servidor local Tomcat.

Para este codelab en la base de datos Tutorial debemos agregar manualmente la tabla usuarios que debe tener como mínimo los campos: ID (int, primary key e auto-incremental(, usuario, varchar(15); y password también varchar(15)... y allí indicar los valores de nuestro usuario y password de acceso (passer, passer por ejemplo). Las generalidades de configuración y conexión a la base de datos Tutorial los podemos observar al inicio del archivo index.php (donde nos conectamos a la base de datos mediante mysql_connect y mysql_select_db), y a partir de la línea 242 del código, donde se verifica que nuestro nombre de usuario y password se encuentren registrados en la tabla usuarios.

Using the Back-End PHP+MySQL (Wizard and safety themes) corriendo como proyecto JavaWeb sobre nuestro servidor local Tomcat :

Pueden también revisar nuestra entrada : Using the Back-End PHP+MySQL ( Wizard & Safety themes) donde mostramos con mayor detalle el contenido de cada componente de este interesante codelab, y en que se detallan una de la principales formas de uso del lenguaje PHP en lo que respecta al manejo de base de datos, cookies y enlace entre diferentes páginas PHP.. y por supuesto, como ya hemos indicado, este proyecto lo podemos correr desde WebMatrix como ya hemos indicado...

Int-Google03.rar, que corresponde a nuestro codelab "Integracion Google 3ra parte" referidos al Back-End PHP+ MySQL, donde mostramos los fundamentos para empezar a diseñar nuestros sistemas y proyectos tomando el consideración el enfoque de uso que nos ofrece el framework ExtJs (maquetación utilizando viewport, uso de un menu TreePanel, al que se accede mediante una pantalla de acceso ó Wizard, permite la declaración y manejo de stores, y mostramos la forma de conectarnos a una base de datos MySQL utilizando PHP en este caso, lo que finalmente nos permiten acceder a las diferentes visualizaciones Google y ExtJs que hemos venido presentando en nuestros codelabs anteriores, incluyendo también al Modelo CRUD de Mantenimiento del listado de presidentes de los dos ejercicios anterioires que forman parte de esta entrega.

Este ejercicio trabaja con las bases de datos IGCodelab contenidos en igcodelab.sql (datos de productos de belleza), y la base de datos Tutorial (donde tenemos registrados a los presidentes USA contenidos en pdtes_usa.sql). Pero en esta oportunidad, el nombre y password del usuario para acceder al Modulo son los contenidos en la tabla usuarios de la base de datos IGCodelab. Los datos que conexión a la base de datos IGCodelab, y la grabación de cookies empleadas a lo largo del modulo, son detalladas en drivers.php, y el chequeo del usuarios se detalla en database.php en la función getuser(), a partir de la linea 63 del código.

Integracion Google 3ra. Parte corriendo como proyecto JavaWeb sobre nuestro servidor local Tomcat :

Pueden también revisar nuestra entrada : Integracion Google (3ra parte) donde mostramos con mayor detalle el contenido de cada componente de este ejercicio...

NOTAS DE TRABAJO :

1.- Los ejercicios de este codelab funcionan sin mayor problema tal como los presentamos, pero para los codelabs Grid-MySQL e Int-Google03, como podrá observarse, los archivos *.php involucrados utilizan codificación UTF-8 (en el Back-End PHP+MySQL sobre servidores Apache utilizábamos codificación ANSI). ... Ocurre que cuando se trabaja con cookies (como es el caso de estos codelabs), puede haber restricciones para el uso de la función setcookie(), por cuanto PHP por defecto, en un servidor Apache, restringe las salidas del buffer del servidor luego que se haya cargado o ejecutado algun script HTML... y en el caso de estos proyectos JavaWeb, que implementan PHP mediante el uso de Quercus, no existen estan restricciones, ello aún cuanto, como podrán observar, en el archivo de configuración web.xml se ha configurado a nuestros archivos y scripts *.php para que trabajen con codificación UTF-8.

Cuando trabajamos con WebMatrix no ocurren estos problemas y es indiferente que nuestros archivos *.php sean codificados UTF-8 ó ANSI, pero como siempre, debe verificarse al ejecutarlos su correcto funcionamiento incluso antes de su puesta en producción para evitar contratiempos.

2.- Si revisan ahora con detalle los códigos de nuestros ejercicios, podrán observar, tal vez con sorpresa, que no hay ninguna variación respecto a los códigos presentados para ser ejecutados en las otras que hemos venido utilizando ( servidor Apache - PHP con Appserv, y servidor IIS + PHP con WebMatrix), y realmente sólo cambia la presentación de cada proyecto, vale decir, la adaptación que hemos efectuado para adecuarlos como proyectos JavaWeb, con la inclusión de la carpetas WEB-INF (donde se encuentra la carpeta lib que contiene nuestra librería resin.jar, y donde configuramos a través de web.xml el despliegue de nuestros servlets y librerías de nuestra aplicación en el servidor Tomcat); y de la carpeta META-INF, que contiene a context.xml, mediante el cual identificamos a nuestra aplicación en el servidor.

3.- Cabe resaltar que utilizando esta librería, y en la forma como lo utilizamos en nuestros codelabs (sobre un servidor como Tomcat ó sobre Glassfish), podríamos instalar en nuestros servidores de aplicaciones locales a proyectos sociales bastante conocidos como Drupal, Wordpress, Joomla, phpBB, etc. sin cambiar en nada el código de esos aplicativos y consiguiendo incluso un mejor rendimiento al trabajar PHP como un "lenguaje compilado" (apúntese que en las plataformas de desarrollo LAMP ó WAMP, PHP es un "lenguaje interpretado"). Lo mismo podríamos hacer si se considera utilizar el servidor Resina, y correr nuestros desarrollos Java y PHP, ó proyectos combinados de ambos, sobre dicha plataforma.

4.- Como indicamos, el archivo resin.jar puede ser copiado de la descarga del servidor Resina (carpeta bin), ó del war de la descarga de la página de Quercus. Recomendamos bajarla desde esta última opción por cuanto, en un proyecto JavaWeb instalado en nuestro IDE Netbeans, no resultan necesarios los componentes de java que se incluyen en el war, pero al trabajar con Google Appengine, con el SDK de Java y también con el IDE Netbeans, en ese caso, la carga de nuestros proyectos principalmente al hacer nuestras pruebas, en ese caso puede ser necesario trabajar con ANT y considerar todos los componentes de Java incluídos en el war de nuestra descarga, y los que utilizaremos en nuestra próxima entrada que nos mostrará como trabajar con PHP en Google Appengie, utilizando por supuesto, el SDK de Java de GAE y Quercus...

Saludos

@Mlaynes

WebMatrix : Using PHP on IIS Server

2011-10-09T14:25:00.000-05:00

Recuerde que..

...y continuando con nuestra investigación respecto a WebMatrix: la plataforma opensource de Desarrollo Web de Microsoft, empezamos ahora a revisar las ventajas y posibilidades que nos presenta instalar y trabajar con el lenguaje PHP dentro del entorno de Desarrollo del servidor IIS y el lenguaje ASP.Net (aparte que nos permite integrarnos y trabajar fácilmente con la base de datos SQLServer compact instalado en la plataforma... y que cuyas formas de conexión y funcionamiento se encuentran detallados en el Tutorial WebMatrix cuyas direcciones adjuntamos en nuestra entrega anterior.

Ya desde nuestra primera entrada empezando desde cero que dió inicio a las investigaciones de nuestro proyecto Integración Google, les habíamos indicado que el lenguaje PHP, integrado completamente al servidor Apache en nuestra instalación de Appserv, es sólo un componente del servidor, y que incluso podía ser instalado de manera independiente; el caso es que al instalar Appserv, u otro servidor similar como XAMP, WAMP, etc, el lenguaje PHP ya viene integrado a nuestro entorno de desarrollo, pero ahora con WebMatrix, es propicia la oportunidad para ver a PHP trabajando en otro entorno de desarrollo distinto al servidor Apache.

En el caso de WebMatrix, el proceso de instalación de PHP al servidor IIS Express es totalmente automático... Solo basta ingresar a la opción "configuración" de alguno de nuestros proyectos o "sites", y allí marcar la opción correspondiente. El hecho es que, al hacer esa indicación, WebMatrix, nos solicitará que le indiquemos que versión del lenguaje deseamos instalar, la versión 5.2 ó 5.3, en nuestro caso elegimos la versión 5.2 pues nuestros desarrollos no tienen ninguna figura especial del lenguaje PHP que hayamos utilizado... pero bien pueden seleccionar la versión 5.3 que ya es estable....y listo, el proceso se empieza a realizar en forma automática (toma sus minutos.. pero no hay nada más que hacer), al final va a aparecer marcada nuestra casilla PHP, habilitada en la versión que elegimos... tal vez si vale resaltar, que una vez instalado PHP, el lenguaje estará disponible para todos nuestros proyectos y no solo para uno en particular, vale decir, se habilita el servicio para todo nuestro entorno de desarrollo, como es que caso en Appserv,. por mencionar un servidor que ya nos debe resultar cada vez más familiar...

Cabe también resaltar que, PHP no solo es instalable en el entorno de desarrollo de un servidor Apache e IIS ...no forma parte de los alcances de este codelab revisar al detalle de todas las posibilidades de PHP, pero vale resaltar que, al descargar PHP, para ser instalado de forma independiente desde su pagina oficial, y al efectuar el proceso, PHP, durante su instalación, nos pedirá que seleccionemos el servidor Web sobre el cual trabajará, y aparte de los ya mencionados, tenemos al servidor Xiami, Microsoft PWS.. y hay una opción otros, y en la cual, la configuración por la parte del servidor tendría que efectuarse de forma manual.. como es el caso si deseamos instalar PHP sobre un servidor Tomcat, que tiene sus pasos, pero también es posible... el caso es que tener al lenguaje PHP, sobre el servidor que utilicemos, representa enormes ventajas, por cuanto PHP es un lenguaje bastante consolidado, y que nos presenta múltiples herramientas ya desarrolladas y listas para poderlas usar (como el manejo del formato JSON entre otros, ó la instalación de "servicios sociales" o de gestión de contenidos muy populares como Wordpress, Drupal, etc. los que han sido desarrollados utilizando PHP, y que varios de ellos, han sido completamente integrados a la plataforma de Desarrollo de WebMatrix, facilitando su instalación, adecuación y uso), y todo ello nos debe permitir que, unido a los conocimientos que podamos ó requerir tener de alguna otra plataforma de desarrollo en particular, pues puede facilitarnos bastante nuestro trabajo, tiempos de programación e integración de proyectos...( como un ejemplo, pueden revisar este enlace que nos muestra el proceso de instalación de PHP sobre un servidor IIS "convencional", es decir, el que viene instalado en WindowsNT Server ó Windows XP ó Window 7, etc. )

Instalando nuestros codelabs "Using the Back-End PHP+MySQL e Integracion Google 3ra parte" sobre WebMatrix:

(Una vez instalado WebMatrix en nuestro ordenador, por supuesto)

Nuestros codelabs referidos al uso del Back-End PHP+ MySQL esta dividido en tres partes, los que son: 1.- Iniciándonos, que nos muestra un modelo CRUD -opciones básicas de Crear, Modificar, Borrar, Buscar e Imprimir-, sobre una tabla de una base de datos MySQL, considerando componentes dinámicos; 2.- Temas de Seguridad y Wizards (acceso), que muestra el mismo desarrollo anterior pero considerando una pantalla de acceso para poder utilizar dicha aplicación...y a la que le hemos acondicionado componentes dinámicos respecto al manejo de idioma de nuestro navegador ( la API language de Google, cuyo efecto podemos observar al cambiar el idioma de nuestro navegador...para ello, siga la ruta : Herramientas, Opciones, Avanzado, Contenido Web y Configuración de Idiomas en Google Chrome si están utilizando dicho navegador por supuesto); y por último, tenemos a nuestro codelab Integración Google 3ra parte, que muestra un Modelo TreePanel de visualizaciones Google y ExtJs, además de visualización de Google Maps, y nuestro modelo CRUD de Mantenimiento de la tabla de presidentes utilizada en los dos primeros codelabs referidos, la que hemos unido al ejercicio en este caso, como muestra de como unir componentes ExtJs sobre en nuestros propios proyectos.

Cabe resaltar asimismo que, estos codelabs son referidos al Back-End PHP+ MySQL corriendo sobre WebMatrix, pero como solo involucran a los componentes nativos de un servidor AppServ; entonces para el caso de las bases de datos requeridas para los ejercicios recomendamos efectuarlas sobre el mismo servidor MySQL ya instalado con Appserv, pues cabe indicar que, sobre un mismo ordenador, no tiene ningún sentido tener instalado varios servidores MySQL - aunque es posible, si se configuran para puertos diferentes - y para ello, debemos utilizar la herramienta phpMyAdmin también disponible en nuestro servidor Appserv.

Y por supuesto, como tal vez han podido intuir, también es posible correr en el entorno de desarrollo de Appserv éste material de apoyo que les entregamos para probar sobre WebMatrix, y con la ventaja de que, como en WebMatrix, cada proyecto o "site" es independiente, pues en esta oportunidad, los descargables de cada "codelab" contienen todo lo necesario para su funcionameinto ( incluido la versión "liviana" de ExtJs-3.4.0 utilizada en esta oportunidad para cada codelab). Por ello, conviene descargar o copiar nuestro material de apoyo dentro de la carpeta "www" de nuestro servidor Appserv (u otro servidor equivalente utilizado), y con ello, los podríamos poner en funcionamiento inclusive en ambas plataformas en forma simultánea... llamando desde el localhost, más nuestra ruta de descarga, en la barra de direcciones de nuestro navegador... ó desde WebMatrix, al cargar estos proyectos o "sites", llamarlos desde esta posición de descarga directamente a WebMatrix, y ejecutarlos de allí, como se indicó en el codelab anterior, referido a nuestros primeros conceptos respecto a WebMatrix, y de donde ya debemos haber ejecutado nuestros proyectos Integración Google 1ra. y 2da. parte... vale decir, si en esta oportunidad va ejecutar por primera vez los codelabs, y si por supuesto utilizamos las bases y tablas MySQL requeridas ( adjuntamos para ello los archivos sql necesarios ), pues nuestros ejercicios deberían funcionar directamente sin necesidad de hacer alguna configuración adicional; pero en el caso de haber ya realizado la instalación de los codelabs anteriores mencionados, podrá "sobreescribir" las bases de datos requeridas con la misma información de los archivos sql contenidos en el material de la descarga.

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

Grid-PHP-MySQL.rar, que corresponde a nuestro codelab "iniciándonos" sobre el Back-End PHP+ MySQL, proyecto desarrollado tomando como referencia un tutorial de la pagina Oficial ExtJs, cuyo código por supuesto hemos mejorado y que corre ahora sobre la versión ExtJs-3.4.0; y que nos presenta un modelo CRUD -opciones básicas de Crear, Modificar, Borrar, Buscar e Imprimir-, sobre una tabla de una base de datos MySQL, considerando componentes dinámicos.

Using the Back-End PHP+MySQL (Getting Started) corriendo sobre WebMatrix :

Este codelab trabaja con la base de datos "tutorial", para ello deberá crear primero con la herramienta phpMyAdmin dicha base de datos, y luego importar sobre ella las tablas y datos requeridos desde el archivo pdtes_usa.sql incluído en la descarga ( si ya tiene instalada la base de datos tutorial, la importación borrará las tablas "presidents", "parties" y "usuarios" requeridas, e insertará la data necesaria para realizar ejecutar nuestro ejercicio.

Recuérdese asimismo que en el archivo database.php, y con el comando msql_connect debemos verificar nuestros datos para conectarnos a la base de datos (host, usuario y password), y con el comando msql_select_db se indica el nombre de la base de datos donde hemos importado las tablas y datos contenidos en pdtes_usa.sql (tutorial es el que hemos utilizado).

Pueden también revisar nuestra entrada : Using the Back-End PHP+MySQL ( Getting Started ) donde mostramos con mayor detalle el contenido de cada componente del codelab, aunque en esa oportunidad, las mostramos para instalar y hacer funcionar este proyecto sobre el entorno de desarrollo de Appserv ( servidor Apache+ PHP+ MySQL), pero cuyos conceptos, como ya hemos indicado, son completamente compatibles para utilizarlos sobre este entorno de desarrollo de WebMatrix, por cuanto, de dicha plataforma, en esta oportunidad solo estamos utilizando al servidor IIS y el lenguaje PHP instalado sobre ella... y el funcionamiento del servidor IIS es similar al del servidor Apache para este caso, por cuanto no estamos utilizando ningún código ASP.Net ó C# asociado a dicho entorno.

Wizard-sample.rar, que corresponde a nuestro codelab "Temas de Seguridad y Wizards (acceso)" referidos al Back-End PHP+ MySQL, donde mostramos los fundamentos para empezar a diseñar nuestros sistemas y proyectos tomando en consideración pantallas de acceso (Wizards) y revisando que opciones de seguridad debemos empezar a considerar en ellos. Este codelab hace referencia a como poder acceder (ó restringir el acceso a usuarios no autorizados) a nuestro modelo CRUD del codelab anterior, y para ello hace uso de los datos registrados en la tabla usuarios creada al importar pdtes_usa.sql sobre la base de datos "tutorial" ya creadas.

Para este codelab en la base de datos Tutorial debemos agregar manualmente la tabla usuarios que debe tener como mínimo los campos: ID (int, primary key e auto-incremental(, usuario, varchar(15); y password también varchar(15)... y allí indicar los valores de nuestro usuario y password de acceso (passer, passer por ejemplo). Las generalidades de configuración y conexion a la base de datos Tutorial los podemos observar al inicio del archivo index.php (donde nos conectamos a la base de datos mediante mysql_connect y mysql_select_db), y a partir de la línea 242, donde se verifica que nuestro nombre de usuario y password se encuentren registrados en la tabla usuarios.

Using the Back-End PHP+MySQL (Wizard and safety themes) corriendo sobre WebMatrix :

Int-Google03.rar, que corresponde a nuestro codelab "Integracion Google 3ra parte" referidos al Back-End PHP+ MySQL, donde mostramos los fundamentos para empezar a diseñar nuestros sistemas y proyectos tomando el consideración el enfoque de uso que nos ofrece ExtJs (uso de un menu TreePanel, al que se accede por una pantalla de acceso Wizard, y de manejo de stores y la forma de conexión utilizando PHPa la base de datos MySQL, lo que finalmente nos permiten acceder a las diferentes visualizaciones Google y ExtJs que hemos venido presentando en nuestros codelabs, incluyendo en esta oportunidad, al Modelo CRUD de Mantenimiento de listado de presidentes que hemos utilizado en los dos codelabs anteriores que forman parte de esta entrega.

Este ejercicio trabaja con las bases de datos IGCodelab contenidos en igcodelab.sql (datos de productos de belleza), y la base de datos Tutorial (donde tenemos registrados a los presidentes USA contenidos en pdtes_usa.sql). Pero en esta oportunidad, el nombre y password del usuario para acceder al Modulo son los contenidos en la tabla usuarios de la base de datos IGCodelab. Los datos que conexión a la base de datos IGCodelab, y la grabación de cookies empleadas a lo largo del modulo, son detalladas en drivers.php, y el chequeo del usuarios se detalla en database.php en la función getuser(), a partir de la linea 63 del código.

Integracion Google 3ra. Parte corriendo sobre WebMatrix :

Pueden también revisar nuestra entrada : Integracion Google (3ra parte) donde mostramos con mayor detalle el contenido de cada componente del codelab...

NOTA: los ejercicios funcionan sin mayor problema tal como los presentamos, pero para los codelabs Grid-MySQL e Int-Google03, como podrá verificar, los archivos *.php involucrados utilizan codificación ANSI, aún cuando lo recomendado cuando trabajemos en nuestros proyectos web es que como norma todos nuestros archivos sean construidos con la codificación UTF-8.... Ocurre que cuando se trabaja con cookies (como es el caso de estos codelabs), puede haber restricciones para el uso de la función setcookie(), por cuanto PHP por defecto, restringe las salidas del buffer del servidor luego que se haya cargado o ejecutado algun script HTML... (puede revisar la documentación al respecto): y en el caso de los dos codelabs mencionados, como puede fácilmente observar, por la forma en que se encuentran construidos los ejercicios, primero se cargan a los archivos index.html, y luego durante el proceso se invoca a los respectivos archivos *.php para interactuar con la base de datos MySQL. Esta restricción puede superarse convirtiendo a codificación ANSI los archivos *.php que invocan a las funciones setcookie(), o configurando nuestro archivo PHP.ini, indicando a la directiva: output_buffering=on (su valor por defecto es off).

La documentación no indica al detalle la causa de esta salvedad pero pueden verificar - utilizando Firebug de Firefox para hacer sus pruebas - que al convertir los archivos *.php del proyecto Int-Google03 a codificación UTF-8 (utilizando notepad++ u otro editor), y en especial al archivo drivers.php que se utiliza primero para la grabación de los cookies, este arroja por la consola de inspección el warning : "Cannot modify header information - header alreaqdy sent by..",.y nos indica las líneas de nuestras instrucciones setcookies(); y por supuesto, no funciona la carga de datos, o mas propiamente dicho, se bloquea la salida de datos desde el buffer del servidor, aún cuando la información haya sido "capturada"...

Este impase, como hemos indicado, se soluciona al convertir nuevamente a ANSI nuestro archivo drivers.php... o también podemos reconfigurar nuestro PHP.ini en la directiva: output_buffering=on, y en este ultimo caso, aún cuando nuestros archivos PHP sean codificados UTF-8 si se permitirá la "salida" de la información y el ejercicio funcionará sin inconvenientes.

Lo indicado anteriormente ocurre al trabajar con un servidor Apache en una plataforma LAMP o WAMP, pero cuando trabajamos con WebMatrix NO ocurren estos problemas, y es indiferente que nuestros archivos *.php sean codificados UTF-8 ó ANSI, pero como siempre, para nuestros proyectos, debemos verificar su funcionamiento antes de su puesta en producción para evitar contratiempos.

Saludos

@Mlaynes

WebMatrix: la plataforma opensource de Microsoft para Desarrollo Web

2011-10-02T18:20:00.000-05:00

Recuerde que..

...y continuando con nuestra investigación de los diferentes entornos de Desarrollo Web y uso de la Tecnología Google, junto a mis labores habituales de consultor, analista y desarrollador de sistemas y soluciones informáticas ( y de cloud computing en general ); en la practica, ya había dejado de lado al mundo "Microsoft" para lo que es Desarrollo Web, aún cuando en muchas de las soluciones cliente-servidor que he desarrollado e implementado he utilizado bastante Foxpro y VFP, habiendo incursionado tambien en C++, Clipper, FiveWin, PowerBuilder; y en los proyectos Harbour, X-Harbour para desligarnos algo del mundo Microsoft, trabajando con base de datos externas como MySQL principalmente e instaladas incluso sobre servidores Linux para que el deslinde fuese más notorio aún... :-/) ; y es que en realidad realmente siempre había considerado al entorno de desarrollo Web de Microsoft, y a su servidor IIS en particular, como algo demasiado amarrado a Windows (una versión de IIS según cada versión Windows que lanzaban..), y por supuesto, a sus propias herramientas de Desarrollo Web como Visual Studio, Web Developer, etc. ...demasiado amarre al mundo Microsoft para mi gusto.. y por supuesto, bastante desligado de los principales proyectos opensource y GPL propios del mundo de Desarrollo Web...

pero debo reconocer que Microsoft me ha sorprendido con el lanzamiento de WebMatrix 2.0 beta; y ahora ultimo, a finales de junio 2012 liberó WebMatrix versión 2.0 Release Candidate que tiene como importante novedad que, aparte de ASP.Net y PHP, integra como lenguajes de desarrollo a NodeJS :

http://www.microsoft.com/web/webmatrix

con Microsoft WebMatrix todas las principales herramientas opensource del mundo de Desarrollo Web, y también las "opensource" que ha "liberado" Microsoft, son integradas en un entorno de trabajo bastante apropiado para hacer Desarrollo Web.. y ahora, al igual que cuando se trabaja con un servidor Apache con PHP y MySQL (Appserv, Xamp, Wamp, etc)... Microsoft ha integrado IISExpress, SQLServer Compact, ASP.Net, C#, e incluso a PHP en una "plataforma" de desarrollo bastante interesante (y ahora tambien noeJS como ya hemos indicado); debiendo tener en cuenta que, al considerar a PHP en su entorno de trabajo, WebMatrix nos permite integrarnos tambien a servicios sociales y de gestión de contenidos, muy difundidos como Wordpress, Joomla, Drupal, etc. ..y debo reconocer que el resultado impresiona bastante ..y hasta ofrecen servicio de Hosting desde US$1.67 mensual para alojar en la nube nuestros desarrollos directamente desde esta plataforma... como para tomar en cuenta...

En el propio tutorial de la pagina oficial de WebMatrix - que es bastante detallado - nos muestra como hacer paginas web dinámicas muy fácilmente utilizando la base de datos SQLServer Compact incorporada al proyecto ( y por supuesto que es posible conectarse a otras bases de datos como mySQL, Postgress, SQLServer, etc. recurriendo al código PHP que es el más utilizado para dicho efecto); y presenta como novedad: la sintaxis Razor, que nos muestra como utilizar código ASP totalmente integrado a HTML y CSS para lograr páginas dinámicas incluso sin recurrir al manejo de una base de datos ...realmente interesante y para tomar en serio...
...como un miembro más de la comunidad del zorro (Visual Foxpro ó VFP), que aún utiliza esa plataforma para desarrollos de escritorio, pues vale mencionar que manejar un servidor Web IIS es nuestra puerta de entrada para poder instalar ActiveVFP fácilmente y sin muchas complicaciones ( y poder utilizar VFP como Back-End ), lo que era un obstáculo algo difícil de superar. ActiveVFP que es una herramienta free y opensource ya con varios años de desarrollo y soporte, permite el uso de código VFP, incluso de la versión 9.0, por el lado del servidor, vale decir, como hemos mostrado a lo largo de este proyecto, que nos permite utilizar comandos VFP y variables de dicho entorno, dentro de una etiqueta adecuada, la que podemos incrustar en nuestros códigos HTML, y así poderlas utilizar en nuestras páginas y desarrollos Web .. es realmente un camino abierto para poder integrar nuestros desarrollos VFP al mundo Web utilizando la lógica, los códigos y las bases de datos y tablas con que hemos desarrollado nuestros sistemas y proyectos con VFP.
...retomando el tema, WebMatrix es un entorno de Desarrollo Web que puede instalarse independientemente de la versión de Windows que tengamos instalado en nuestro ordenador, como a nuestro criterio siempre debió haber sido, aunque aún creo que es demasiado pedirle a Microsoft que pueda ser instalado incluso en otras plataforas como Linux, Unix, Mac, etc; (pero eso lo convertiría en un verdadero proyecto opensource). WebMatrix, puede ser instalado en equipos con Windows XP service pack 3 en adelante;, aparte de las herramientas mencionadas (servidor IIS, base de datos SQLServer compact, y lenguajes ASP.Net y PHP, y que por supuesto también reconoce HTML, CSS,y Javascript), viene integrado a un editor bastante practico (que pueden mejorar), pero lo que resulta interesante es el manejo interno que hace lograndose una configuración correcta de nuestros proyectos; y así, como cuando hemos utilizado Netbeans en el entorno de desarrollo Java-Tomcat se nos facilita la construcción, prueba y lanzamiento de nuestros proyectos; con WebMatrix sucede algo similar, y no tendremos que preocuparnos en la configuración de nuestros "context path" ni del manejo de servidores virtuales para construir y lanzar nuestros proyectos, incluyendo la "bajada" y "subida" a nuestro servicio de hosting externo (como se realiza con Dreamweaver por ejemplo); y al hacer nuestras pruebas, podemos incluso seleccionar el navegador por el cual lanzar nuestro proyecto y observar su resultado...

Cabe reiterar asimismo que el tutorial que acompaña a WebMatrix está bastante detallado y muestra en pocos pasos y con casos prácticos el manejo de la plataforma y de sus componentes (HTML, CSS, ASP.Net, conexión a base de datos, etc. lo que podría constituirse en una nueva puerta de ingreso al mundo de Desarrollo Web que vale considerar ...diferente al convencional que hemos planteado en este nuestro proyecto Integración Google, (puede revisar el Home de nuestro proyecto), debiendo resaltar que resulta necesario tener también una visión completa de lo que significa y abarca el mundo de Desarrollo Web ( si no queremos quedarnos exclusivamente con las herramientas Microsoft ), lo que podemos lograr dando una re-lectura a nuestra entrada empezando desde cero que planteamos al iniciar nuestro proyecto...y asimismo también, a los conceptos que hemos venido tocando a lo largo de su desarrollo..

Contenido del tutorial WebMatrix (pagina oficial)

Part 1 introduces you to WebMatrix and how you can install and use it.

Part 2 teaches you how to create your first Web Page using WebMatrix.

Part 3 gets you started with CSS and style sheets so you can make your page more beautiful.

Part 4 teaches you layout and how you can use layout in WebMatrix for common code across your pages.

Part 5 is all about data, where you’ll learn how to use a database in your web page, and make it more dynamic.

Part 6 shows you how to build a page that allows your users to add data to your database, so your site can render it.

Part 7 builds on this to show you how you can have a page to edit your database, and see the changes updated automatically.

Part 8 finishes off the application by showing you how to create a delete page for your data

Part 9 shows you how to publish your site to the internet using WebMatrix.

Nota : solo se requiere que tengamos una buena maquina para que no se pierda rendimiento (el entorno Java y de Netbeans también lo requiere, y es un apunte que olvidé detallar en su debido momento), y también se requiere un poco de paciencia pues el proceso de instalación e WebMatrix me parece algo largo comparado con instalar un servidor AppServ u otro similar (especialmente si no tenemos instalado ninguna herramienta de desarrollo web de Microsoft) ...pero no se necesita tener pre-instalado nada previo y todo el proceso esta automatizado, como cuando instalamos programas con la herramienta "Google Pack", que indicamos en nuestra entrada herramientas para Desarrollo Web ); y luego, una vez instalada la plataforma, podemos continuar con cada uno de los pasos del tutorial indicado, ...hacer nuestras pruebas ...y refrescar e incrementar nuestros conocimientos básicos y del entorno del Back-End ASP.Net y SQLServer compact. ...planteado así, creo vale la pena darle una mirada a este entorno de Microsoft...

Instalando nuestros proyectos Integracion Google 1ra y 2da Parte sobre WebMatrix:
(Una vez instalado WebMatrix en nuestro ordenador)

Nuestros proyectos Integración Google 1ra. y 2da. han sido desarrollados exclusivamente con HTML y Javascript ( recuerde que ExtJs es un "framework" de Javascript, vale decir una extensión o mejora pero hecha en código javascript), por lo que para que corran sobre WebMatrix no requieren mayor preparación sino estar completos (tal como se cargarían a la Web a través de un servicio de Hosting)

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

IntGoogle-01.rar, que nos muestra Visualizaciones Google sobre ExtJs (versión Ext-3.4.0 en este caso) correspondiente a dicho codelab, para cargarlo como un Sitio Web de WebMatrix. Pueden revisar nuestra entrada Integracion Google 1ra parte para mayores detalles.del ejercicio..en ese caso, corriendo sobre un servidor "convencional" Apache (instalado con Appserv)

IntGoogle-02.rar, que nos muestra Visualizaciones Google y ExtJs de nuestro documento "Spreadsheet Productos" correspondiente a dicho codelab (adjuntamos también nuestro modelo de hoja de calculo en formato "xls" para que puedan realizar sus pruebas con un documento propio que puedan modificar o acondicionar a sus necesidades, cargando por supuesto este archivo a Google Docs)... Pueden revisar nuestro codelab Integracion Google 2da. parte para mayores detalles de este ejercicio como en el caso anterior descrito.

NOTA IMPORTANTE :

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_01.js / MenuGVisualization_02.js where appropiate!

TRABAJANDO CON OAUTH 2.0 :

..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)

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, indicando en lugar del puerto 8080 el que nos indique que va utilizar WebMatrix para desplegar nuestro proyecto, debiendo resaltar que la plataforma WebMatrix permite que modifiquemos el puerto en su opción configuración de cada proyecto.. y que conviene que para hacer nuestras pruebas, utilicemos el mismo puerto por lo menos para nuestros proyectos WebMatrix que requieran el uso de APIs de Google (y así no estar creando diferentes proyectos en la consola por cada uno de ellos), asimismo para trabajar con la plataforma WebMatrix debemos verificar que se elija correctamente el protocolo "http ó https" que utilizaremos (generalmente "http"), y la ruta completa de acceso a nuestra aplicación, que en este caso será http://localhost:xxxx (el puerto utilizado), 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 e IntGoogle02-Oauth20 sobre WebMatrix !

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 actualizacion a la API v.3)..por supuesto, al trabajar con nuestro servidor local "localhost" no se presentan problemas.. el asunto es, como indicamos, al cargar nuestros proyectos a un servicio de hosting externo cualquiera.. como la plataforma GAE (Google App Engine), que es el caso de nuestra demo)

Integracion Google Parte No.1 corriendo sobre WebMatrix :

Integracion Google Parte No.2 corriendo sobre WebMatrix :

ActiveVFP 5.5 instalado sobre WebMatrix

ActiveVFP es un proyecto que requiere del lenguaje ASP.Net por el lado del servidor: y su "demo" utilza HTML y CSS por el front, y el lenguaje ASP.Net integrado a la plataforma WebMatrix nos permite a su vez utilizar VFP y tablas VFP como Back-End en nuestros proyectos. WebMatrix es un servidor IIS que soporta ASP.Net y C# por lo que si en nuestros proyectos requerimos ó utilizamos codigo VFP y tablas VFP, podemos entonces integrarlos y darles rápida salida a la Web como "sites" o proyectos WebMatrix.. El único requisito es que nuestro proyecto se presente completo tal como se cargará a la Web (incluyendo todas las librerías y complementos que lo compongan); ale decir, contener en nuestro proyecto al componente activeVFP completo.

now you can test the activeVFP 5.5.1 demo (New!) .
(like a codeplex project..)

activeVFP 5.5.rar ( 2.99Mb ), Este código corresponde a nuestro codelab para instalar el demo del proyecto activeVFP en nuestro servidor local WebMatrix.

Pasos para instalar los Codelabs..

Tenemos que descargar estos proyectos en la carpeta de proyectos de WebMatrix( "My Web Sites" de Mis Documentos), ó en otra carpeta que creamos conveniente como C:/WebMatrix por ejemplo; se crearán 3 carpetas de nombres Int-Google01, Int-Googlw02 y ActiveVFP_5.5 (también IntGoogle01-OAuth20, intGoogle02-OAuth20 respectivamente); luego hay que cargar estos proyectos a WebMatrix; y el proceso es bastante simple, para ello, al abrir WebMatrix debemos seleccionar la opción "Sitio a partir de carpeta", ó en el caso que ya estemos sobre un proyecto abierto, seleccionar el botón azulino de la parte superioir izquierda (al lado de "Página principal"), luego Nuevo Sitio, y allí aparece y elegimos la opción "Sitio a partir de carpeta"; se nos indicará que ubiquemos la carpeta que contiene nuestro proyecto (Int-Google01 por ejemplo), y al seleccionarla, WebMatrix creará nuestro proyecto o "website". WebMatrix pondrá como nombre de nuestro proyecto la carpeta que estemos cargando, e internamente hará las configuraciones necesarias para que el "directorio virtual" y un puerto disponible sean direccionados a nuestro proyecto ( también podemos adecuar esos datos en la opción "configuración" del proyecto ya cargado); luego debemos proceder a "ejecutar" nuestro proyecto, y al seleccionar la pestaña con ese nombre, nos aparecerá una lista con los navegadores que tenemos instalado en nuestro ordenador, seleccionemos la de nuestra preferencia ...y listo... nuestro proyecto será lanzado a nuestro navegador elegido...

Debemos hacer lo mismo con nuestro proyecto Int-Google02, y con esto veremos corriendo nuestros ejercicios (si han seguido todos los pasos de nuestro proyecto), hasta en 04 plataformas distintas: sobre un servidor HTTP Apache, sobre AppEngine, sobre un servidor Apache Tomcat, y ahora sobre WebMatrix; y con lo que podemos sacar como una clara conclusión - como ya habiamos indicado - que dentro del mundo Web no hay problemas de compatibilidad si trabajamos con sus elementos básicos: refiriéndonos a HTML, CSS y Javascript (reiteramos que ExtJs es un framework de javascript.. escrito en javascript nativo).. y con WebMatrix al ser bastante sencillo el proceso, conviene también "ejecutemos" nuestros proyectos en diferentes navegadores, pues como hemos indicado desde los inicios de nuestro proyecto Integración Google, a veces nuestros desarrollos no se ejecutan igual en un navegador u otro - dependiendo de la codificación javascript que utilicemos, ó la versión del framework que usemos ...cosas del mundo Web que debemos tomar en cuenta...

Deben realizar lo mismo con ActiveVFP_5.5 (que también debemos haber descargado en la carpeta de nuestra preferencia indicada, y verán en este caso, como se esperaba, que el proyecto ActiveVFP corre sin problemas en el servidor IIS Express version 7.5 en este caso que tiene anexado por el Back-End al lenguaje ASP.Net 2.0. Como una curiosidad pueden consultar la opción "Acerca de" de WebMatrix y verán que aún muestra los datos de la versión 1 de dicha plataforma... bueno, se supone que esta es la versión 2.0 beta, así que esperemos y estemos atentos a sus actualizaciones..

NOTA : el readme de ActiveVFP indica que para versión 1.0 de ASP.Net debemos registrar la librería de ActiveVFP, pero suponemos que el proceso también debe realizarse para la versión ASP.Net 2.0 - porque esa librería es externa y no pertenece a Windows - para ello; llamemos a la línea de comandos DOS ó "simbolo del sistema" (como prefieran llamarlo), vayamos hasta la carpeta donde hemos descargado nuestro proyecto ActiveVFP_5.5 y verifiquemos que allí se encuentre la librería activevfp.dll, luego ejecutemos el comando:

regsvr32 activevfp.dll. ..y listo, ya no deberíamos tener ningún problema...

Otro punto que debemos tomar en consideración (y que debemos observar al revisar la opción "configuración" de nuestros proyectos), es que además del numero de puerto que WebMatrix asigna a cada una de nuestras aplicaciones - que podemos cambiar si lo deseamos - ;prestemos atención a la lista de archivos bajo el título "Administrar páginas predeterminadas", haciendo referencia al nombre de los archivos "inicio" del proyecto y que se ejecutarán automáticamente al invocarse el proyecto.. en el caso de nuestros proyectos Integración Google 1ra y 2da parte, nuestros archivos de "arranque" son index.html (porque son proyectos web que solo involucran HTML, CSS y Javascript); y en el caso de ActiveVFP, el archivo de arranque es "default.aspx", que corresponde a un proyecto que contiene código y datos ASP.Net 2.0.. conviene que revisemos que estos archivos se encuentren en la lista de nuestros respectivos proyectos, caso contrario debemos agregarlos manualmente o nó arrancará el proyecto desde la pantalla del "Sitio" (y sería necesario ubicarnos en el archivo de inicio que queremos ejecutar y de allí ejecutar el proyecto, como cuando hemos hecho al seguir el tutorial de WebMatrix...por supuesto, si lo han seguido, caso contrario, siempre es recomendable que sigan esos tutoriales y los prueben, pues consideramos que están bastante buenos e interesantes..)

NOTA: No realizamos en este codelab lo mismo con nuestro proyecto: Integración Google 3ra. parte, que describe un modelo CRUD de Mantenimiento de una tabla utilizando como Back-End el lenguaje PHP y la base de datos MySQL (con su respectiva pantalla de acceso ó "wizard"). y en este caso, con esta plataforma de desarrollo, no existe ningún problema respecto a trabajar con la base de datos MySQL y utilizar PHP para comunicarnos con ella (WebMatrix soporta PHP como indica su documentación y como hemos podido observar en la pantalla de configuración de nuestros proyectos), pero como la base de datos es externa a WebMatrix, y estamos recomendando esta plataforma de desarrollo de Microsoft como una alternativa para poder iniciarnos en Desarrollo Web, pues lo haremos en nuestra siguiente entrada, para detallar con más cuidado el proceso y los conceptos involucrados...

Saludos
@Mlaynes

Using the Back-End Java+MySQL: Instalando sdsimple..

2011-10-02T12:51:00.000-05:00

Recuerde que..

...y bueno amigos, continuando con el Back-End Java(JSP)+MySQL, pero continuando con nuestra modalidad de presentación de "codelabs", vamos ahora a poner la valla bien alta presentando en esta oportunidad al proyecto sdsimple.

Que es el proyecto sdsimple? es una aplicación administrativa desarrollado bajo la modalidad "Todo a la Web" bastante compacta y completa para facilitar la administración y gestión de PYMES que se distribuye bajo los términos de la Licencia Pública General GNU (tal como está publicada por la Free Software Foundation; ya sea la versión 3 de la licencia, o (según su elección) cualquier otra versión posterior). Este programa se distribuye con la esperanza de que sea útil, pero SIN NINGUNA GARANTÍA; incluso sin las garantías de COMERCIALIZACIÓN o USABILIDAD O UTILIDAD PARA USOS PARTICULARES... las anotaciones son las textuales indicadas por Pedro Peña García (desarrollador del proyecto), a quien de esta humilde comunidad presentamos nuestros respetos... sdSimple se presenta como un sistema de facturación on-line y como la "gestión eficaz de tu negocio", y en este caso vamos a precisar los alcances del proyecto sdsimple para que sepamos que tenemos entre manos:

No solo es facturación, abarca compras, ventas, cobranzas, pagos y gestión de caja y bancos; que considero un modelo muy interesante y apropiado para empresas de servicios, o empresas que "legalmente" conforme a la legislación de cada país, por el monto de sus ventas y/o activos, no son obligadas a mantener control de Stocks ni activos (basicamente lo que conocemos como PYMES). Sdsimple no hace control de stocks -el costo de los stocks y de ventas se tendría que calcular por diferencia de inventario, como es usual y legalmente establecido para este tipo de negocios- pero si registra los impuestos basicos involucrados en el proceso (IVA y retenciones), por supuesto todo esto depende de cada país y puede ser suficiente, pero por poner un ejemplo, en Argentina parece existen mas impuestos y/o retenciones que considerar respecto al caso peruano, de acuerdo a solicitudes de amigos de esta comunidad que han llegado a instalar el proyecto y ponerlo en funcionamiento de acuerdo a sus necesidades.
El proyecto en sí tiene soporte multiempresa, pero nos da opción a un único código de acceso a cada una de ellas, asimismo solo considera un único correlativo para la facturación y otro para las compras, vale decir, tal como esta diseñado solo soporta un único punto de venta y de registro; es decir, esta realmente diseñado para ser usado directamente por los administradores del negocio.
No presenta un modulo de contabilidad pero por supuesto que conociendo al detalle el modo de funcionamiento del sistema, y las bases de datos que la componen (las que son intuitivamente identificables), pues podría fácilmente enlazar a una aplicación contable..
Esta desarrollado utilizando como Back-End Java(JSP) + MySQL, y por el front utiliza ExtJs-2.2, una versión bastante estable y totalmente compatible con la ultima version ExtJs-3.4 de su tipo distribuido por sencha.com

Prueba SdSimple on line:

URL : http://free.hostingjava.it/-igcode/ ( en evaluación por fallas en el servicio)
Alternativa :

URL : http://mysdsimple.aws.af.cm/ ( New! )
( nuestro proyecto sdsimple corriendo sobre la plataforma Cloud de AppFog )
credenciales: usuario passer, password passer, para ambos casos
al ingresar, lea detalles de funcionamiento en la sección "readme" del menú..

sdsimple on AppFog Cloud

Algunas limitaciones de servicio teníamos con la instalación de nuestro proyecto sdsimple sobre freehostingjava.it, así que decidimos aprovechar la plataforma Cloud de AppFog, una PaaS publica muy difundida que acepta incluso servicios clouds privados, y que por supuesto, nos proporciona una cuota free mas generosa: hasta 2Gb de source code, 100Mb de almacenamiento MySQL (soporta también otras bases de datos SQL y No-SQL), 5Gb de data transfer mensual, y otros detalles que pueden revisar en el siguiente enlace)

Vale destacar en este punto que a diferencia de un servicio de hosting java convencional, en este caso, al tratarse de una PaaS, resulta imprescindible averiguar el nombre de la base de datos, del usuario y la contraseña que el servicio Cloud de AppFog nos proporciona al activar nuestra cuenta y crear nuestro servicio de base de datos (MySQL en este caso), y para ello nos resultó conveniente crear una aplicación "phpmyAdmin" y enlazarla (Bind it) al servicio MySQL creado y que utilizamos para nuestro "proyecto mysdsimple", y ya con phpmyAdmin instalado podemos crear, consultar y trabajar con nuestras tablas y datos de manera mucho mas fácil y eficiente, teniendo presente que para este caso, no consideramos ninguna opción de seguridad para la creación de las vistas al utilizar CREATE VIEW, con el objeto de simplificar su creación (los nombre de las bases de datos y usuarios autogeneradas son generalmente bastante largos).

Este ultimo punto indicado es importante para considerar porque el nombre de nuestra base de datos NO es el nombre del servicio MySQL que creamos, sino que éste se encuentra definido dentro de la variable VCAP_SERVICES que se crea al utilizar los servicios cloud de AppFog, y una forma muy practica de obtener este dato es creando en nuestra aplicación "phpmyAdmin" un archivo PHP que podemos llamar info.php (puede ser cualquier nombre), y que contenga como única instrucción phpinfo(); al ejecutarlo directamente desde nuestro navegador, desde la dirección de nuestra aplicacion "phpmyAdmin" por supuesto, obtendremos la pantalla de información PHP, y en ella, los valores de la variable VCAP_SERVICES (pueden también utilizar los métodos de código indicados en la documentación de AppFog)

Detalles de mysdsimple app desplegada en AppFog Cloud:

Servidor Apache Tomcat 6.0.35
JDK 7, version 1.7.0
mySQL version 5.5.31

y finalmente, hay que considerar que al trabajar con JDK7, al ejecutar nuestros comandos sql, debemos preparar nuestra declaraciones considerando el parámetro: Statement.RETURN_GENERATED_KEYS ó utilizar el método preparedStatement considerando ese mismo parámetro; y que con el objeto de recuperar las conexiones que se van agotando en el tiempo (time out), y durante la carga de nuestros proyectos JavaWeb, no olvidemos de considerar en la configuración de nuestro "pool de conexiones" los parámetros: validationQuery="SELECT 1" testOnBorrow="true", que resuelven estos problemas y evitan excepciones que podrían afectar el funcionamiento de nuestro proyecto..

Consideradas y planteadas las "limitaciones" del modelo de nuestro proyecto sdsimple, pasaremos a hablar de sus "virtudes" por cuando sdsimple es un verdadero proyecto cloud-computing que fácilmente podríamos adaptar para una gestión completa de un negocio o empresa PYME, por supuesto que haciendo las correcciones y/o adiciones que se requieran, pero principalmente considera que sdsimple nos facilita considerablemente todas las cosas que hay que tener presentes en un proyecto "completo" usando el Back-End Java + MySQL, y nos puede resultar un buen modelo para nuestros propios proyectos.

Debe resaltarse asimismo que, trabajar con Java no es lo mismo que trabajar con PHP que es un lenguaje de programación interpretado, diseñado originalmente y principalmente para la creación de páginas web dinámicas. PHP se usa principalmente para la interpretación del lado del servidor (server-side scripting) y por supuesto, para las conexiones con una diversidad bases de datos.. pero PHP se adapta muy bien con el servidor HTTP Apache -de uso casi generalizado- y viene ahora completamente integrado con él, como podrá fácilmente comprobar al revisar los miles de servicios hosting website y webservers que se promocionan por la red (y actualmente a costos bastante acequibles que incluso pueden ser menores US$5.00 mensuales, y en muchos casos Unlimited storage, unmetered transfer, and of course.. Unlimited domains.) ..pero el mundo Java no solo va asociado al mundo Web, con él pueden hacerse desde simples hasta complejos sistemas de escritorio, y con una perfomance comparable a la del lenguaje C, y por supuesto que con ella podemos desarrollar de todo: aplicaciones de escritorio, proyectos WEB, para moviles, y realmente para todo lo que se pueda conectar y/o asociar a una computadora... es un lenguaje muy potente, y su curva de aprendizaje no es tan sencilla, pero si usted estimado amigo lector ya ha llegado hasta etapa de nuestros codelabs (y se ha tomado la molestia de instalarlos, ejecutarlos y llegado a comprender), pues ya habra notado y convencido que mucho de lo que es desarrollo Web es como manejar una serie de multiples "paquetes" en diversos lenguajes y bajo determinados formatos y convenciones, que ya varios de ellos ya están desarrollados y listos para su uso... un ejemplo básico para nuestro caso es el manejo del formato JSON, que como han podido comprobar, las librerías que utilizamos para PHP ya están hechas y solo las utilizamos -como cuando utilizamos widgets, iframes, etc.- ..pues lo mismo sucede en el mundo Java... y lo mismo tambien con el mundo Python y otros ..y conociendo y manejando todos esos "paquetes" o modelos transversales a los entornos de desarrollo web, pues nos resultará mas sencillo, por poner un ejemplo, conectarnos a cualquier base de datos.. "leer", trabajar y mostrar su contenido como planteamos en nuestro proyecto, utilizando cualquier entorno de desarrollo, y utilizando frameworks como con ExtJs que hemos venido trabajando en nuestros codelabs.. y por supuesto que con otros frameworks también se puede llegar a lo mismo, pero la facilidad que pueda uilizar un mismo framework para diferentes entornos: PHP+MySQL, Java+MySQL, GAE-Python (Google AppEngine), e incluso con el "modernísimo" node-js/V8, que es Javascript pero por el lado del servidor, pues eso aún solo lo he comprobado con ExtJs.. aunando a lo anterior la posibilidad de integrarnos también a desarrollos para móviles utilizando Sencha Touch..

...volviendo al tema, finalmente ahora veremos como instalar el proyecto sdSimple en nuestro servidor local Tomcat, utilizando el IDE Netbeans para facilitarnos el trabajo, y poder tener al proyecto en un entorno "profesional" de desarrollo listo para que lo empecemos a revisar ..y empezar a planificar y realizar nuestras propias modificaciones y mejoras.... .por supuesto, que si han revisado nuestra entrada anterior ya deben tener una idea de como realizar todo el proceso, pero en esa oportunidad "cargamos" un proyecto que no estaba ligado al mundo Java (nuestros codelabs Integración Google 1ra y 2da parte), pero en esta oportunidad si vamos a utilizar códigos java y la base de datos MySQL que debemos haber instalado en los inicios de este proyecto Integración Google junto con Appserv (ó el entorno HTTP Apache, PHP y MySQL que hayamos elegido (WAMP ó LAMP), así que ahora solo quedan algunas cosas propias de dicho entorno que debemos considerar antes de proceder con la instalación.

el caso es que el entorno de desarrollo Tomcat-Java-Netbeans no viene anexado a una base de datos en particular, así que podemos conectar a cualquier base de datos ya sea "local" o "remota" , es decir, disponible en nuestro equipo, en nuestra intranet o en la "nube" (además que desde el comienzo se menciono que el entorno de desarrollo AppServ no era sino la unión de tres grandes "sistemas" que nos facilitaba el proceso de configuración y enlace entre ellos, el servidor HTTP Apache, la base de datos mySQL y el lenguaje de programación PHP; pues ahora vamos a comunicarnos y mostrar a la base de datos MySQL sin utilizar HTTP Apache ni PHP ...usando ahora Apache Tomcat y Java a través del entorno de desarrollo de Netbeans.

Si no tenemos instalado "Appserv" podemos proceder a instalar unicamente MySQL (si es posible), pero si no queremos trabajar directamente en el editor de comandos de MySQL, y trabajar con un entorno "gráfico" para el manejo de la base de datos como phpmyAdmin, pues necesitaremos también instalarlo por separado (también es posible), pero si queremos facilitarnos las cosas ..y probar todos nuestros "codelabs" anteriores, mejor procéda a la instalación de Appserv (u otro "servidor" similar), cuyos conceptos describimos en nuestro post empezando desde cero....

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

myProject.rar (24,1Mb), que son las fuentes del proyecto SdSimple modificadas para corregirle unos defectos no críticos - la selección de tipo de "tema" por ejemplo - y para darle algunas prestaciones adicionales que a nuestro entender pueden ser importantes para el uso de SdSimple, como permitir que el IVA acepte decimales ( muchas gracias a 'Nash Bridges' de Argentina, amigo de esta comunidad ), y por supuesto, también hemos actualizado el framework ExtJs empleado a su versión Ext-3.4.0, la última compatible de sencha.com al código empleado en el proyecto SdSimple. Pueden revisar nuestra entrada el Potencial de ExtJs para mayores detalles al respecto.

leeme.txt, archivo readme elaborado por el desarrollador, que detalla el proceso de instalación original sugerido para el proyecto sdSimple ( para referencia ).

Cabe asimismo reiterar que estas "mejoras" efectuadas al proyecto sdSimple son mínimas y no definitivas ( a modo de demostración de las modificaciones que se quieran implementar ), y desde esta comunidad valoramos el esfuerzo y mérito de Pedro Peña García, desarrollador del proyecto, por haber realizado su diseño y programación, y para declararlo bajo licenciamiento GPL, hecho que apreciamos y reconocemos, y que nos permite ahora ponerlos a su alcance, que lo podamos instalar en nuestros propios servidores, y que así realmente podamos observar con el debido detalle y en funcionamiento, un modelo "cloud computing" para la gestión administrativa de negocios PYME, y por supuesto, para que lo puedan considerar y/o emplear en sus proyectos y desarrollos personales bajo la plataforma Apache Tomcat + Java(JSP) + MySQL

NOTA : el empaquetado del proyecto es de 24.6Mb, y ha resultado algo pesado por la actualización a ExtJs-3.4.0 y por que hemos dejado en el proyecto todas las librerías necesarias para que el proyecto SdSimple pueda instalarse y funcionar sin mayores problemas ...es lo que esperamos, y lo que ha sido uno de los principales "problemas" de proyecto, por cuanto, instalar un proyecto Java tiene sus cosas... y ahora, solo queda empezar a detallar los pasos necesarios para su instalación en nuestro servidor local, lo que como hemos indicado y podrán intuir, es un proceso bastante similar a lo planteado para correr nuestros proyectos Integración Google 1ra y 2da sobre Apache Tomcat utilizando Netbeans, descrito en nuestro Codelab anterior de introducción al manejo básico del entorno de desarrollo Java(JSP)... a los que solo falta agregar algunas consideraciones propias de manejo del IDE Netbeans y de la base de datos MySQL.

Pasos para ejecutar la instalación.
( proceso resumido )

Paso 1
Crear la base de datos mySQL del proyecto

..desde nuestro servidor Appserv u otro similar, crear utilizando phpMyAdmin la base de datos myproject ( se crea vacía por supuesto), y cargar con la utilidad de importación, las tablas necesarias desde el archivo sdsimple.sql proporcionado y disponible en la carpeta descargada del proyecto. Solo la tabla "empresa" debe tener registrada la información de nuestra empresa de prueba, así como los datos usuario y password para acceder al sistema; "passer" y "passer" respectivamente por defecto, pero podemos modificarlos a nuestro criterio.. asimismo, podemos verificar el año de ejercicio y otros datos generales (solo los datos resaltados son críticos y necesarios para los efectos del caso).

NOTA IMPORTANTE :

Antes de iniciarse la importacion del archivo *.sql proporcionado, debe revisarse con detalle el caso de las vistas utilizadas; en este caso, el proyecto original sdsimple utiliza vistas con "Create View", y a las que ha agregado la opción: SQL SECURITY DEFINER que hace referencia al usuario con que nos conectamos a MySQL - root u otro que estemos utilizando - El caso es que, debemos cerciorarnos que el proceso de creación de las vistas sea efectuado correctamente sino tendremos probemas para trabajar las opciones de presupuestos, ventas, compras, cobros, pagos y movimientos bancarios.. puede tambien obviarse la opción de seguridad planteada eliminando la sentencia DEFINER=`admin`@`%` SQL SECURITY DEFINER en cada creación de vista.

Paso 2
Cargar nuestro proyecto al Netbeans

... un paso similar al realizado al "cargar" nuestros proyectos Integracion Google 1ra y 2da parte...recuerde que en este caso nuestro proyecto se denominará myproject, y debe indicar correctamente la ubicación de nuestra carpeta "web" y las otras solicitadas.. una vez cargado nuestro proyecto debemos ingresar las "propiedades" de nuestro proyecto e indicar que el formato de nuestra fuente Java será JDK5 ó superior; y asimismo que utilizaremos el servidor Tomcat para lanzar nuestro proyecto...

NOTA IMPORTANTE :

las fuentes proporcionadas del proyecto sdsimple son casi las mismas de las originales del proyecto pero adecuados para trabajar con la version 3.4.0 de ExtJS, pero los "jar" proporcionados solo permiten el correcto funcionamiento del proyecto sobre un servidor Tomcat 5.x y utilizando JDK5.. pero el proyecto puede facilmente actualizarse para que trabaje con Tomcat versiones 6.x y 7.x (incluso con JDK7 de Java); para ello, debe revisarse la Guia de Migración Tomcat, y que para nuestro caso significa que debemos grabar el archivo commons-logging-api.jar, de la librería Apache Commons Logging en la carpeta WEB-INF/lib de nuestro proyecto, dado que este servicio ya no es soportado directamente en los servidores Tomcat 6.x y 7.x (entre otros cambios que conviene revisar..).

Paso 3
Configuración del "Pool de Conexiones"

Paso muy importante que requiere una explicación del porque del proceso, y es el que nos permitirá finalmente ingresar al sistema y poder utilizarlo (caso contrario, solo podremos acceder a la pantalla de acceso y se nos denegará el acceso).. la configuración se realiza sobre el archivo "context.xml" que pueden ubicar en la carpeta "configuration files" del proyecto cargado ( ó dentro de la carpeta META-INF de "web" ); y allí deben verificar los datos de conexión a la base de datos MySQL que hemos creado en el primer paso (usuario y password principalmente, el contexto es Datasource por defecto por lo que no debemos cambiarlo excepto si llegásemos a instalar el proyecto en un servicio de hosting externo, en que generalmente se nos proporciona un nombre de contexto personalizado (o modifiquemos nosotros el contexto).

Paso 4
Configuración del Log del proyecto...

Paso importante para monitorear el funcionamiento "interno" del sistema a través de los mensajes de servidor Tomcat, especialmente si no llegásemos a realizar una instalación exitosa del proyecto y allí podremos detectar y corregir los principales errores de nuestra instalación ( observe que en nuestro caso configuramos la salida de nuestro log en la carpeta "Logs" de nuestro servidor Tomcat indicando la ruta completa; y por supuesto que podemos grabarla donde querramos, pero es importante revisar, con el editor de nuestra preferencia, los "mensajes" que arroja nuestro proyecto durante su carga y funcionamiento )

Paso 5
disfrutemos de nuestra instalación, y por supuesto...

que podemos hacer con SdSimple ?

si ya llegamos a ingresar al proyecto... aparte de la satisfacción de haber culminado el proceso ( observe que hay un historial bastante grande de casos de instalaciones no exitosas que pueden revisar en el mismo blog de la misma página oficial del proyecto SdSimple, que incluso ahora ya no esta activo ); pues aún quedan varios puntos pendientes y muy interesantes por revisar, como por ejemplo:

El método de acceso al sistema..
El modelo de conexion y trabajo con la base de datos MySQL (altas, bajas, modificaciones)
El método de impresión utilizado...
Manejo de servicios proporcionados como por mail.jar..
otros métodos utilizados...

..y ahora ..a planificar nuestras modificaciones y mejoras...

:/)

Saludos
@Mlaynes

Using the Back-End Java+MySQL : Getting Started

2011-09-22T14:29:00.000-05:00

Recuerde que..

y empecemos ahora con el Back-End Java+MySQL, y su manejo no es por supuesto igual al de los servidores HTTP Apache que hemos venido utilizando.. y nuestra idea es presentar del entorno de desarrollo Web de Java de una manera practica, pues al tratarse de un lenguaje de programación orientado a objetos bastante especializado tanto para aplicaciones de escritorio, en sistemas de servidor (con las especificaciones Servlets y JSP, los que son de uso muy difundido), e incluso como aplicaciones "applets" incrustadas en código HTML.. estamos entonces frente a un lenguaje muy potente no solo orientado a aplicaciones Web.. pero es también bastante polémico respecto a la comunidad opensource, pues desde Abril del 2009, Oracle adquirió Sun Microsystems, lo que ocasionó el temor de las posibles y probables variaciones del licenciamiento GNU/GPL de Java, las cuales desde la versión 6 del lenguaje, ya se encuentran bajo el completo control de Oracle.. aunque Oracle aún mantiene el licenciamiento GNU/GPL de sus productos (incluído JDK 7 y del llamado OpenJDK).

Trabajar con el entorno Java para desarrollo Web, además de un servidor HTTP convencional, requiere que dispongamos de un contenedor y compilador de servlets y páginas JSP (ó servidores de aplicaciones tipo JBoss), y uno de los servidores más utilizados es el servidor Apache Tomcat, que es un servidor Web con soporte a objetos servlets y JSP, que ha sido desarrollado por supuesto en Java e incluye el compilador Jasper, que compila JSPs convirtiéndolas en servlets... vale decir, hablar de Tomcat es hablar de un contenedor de servlets que denominan catalina.

1er paso:
Instalar Nuestro Servidor Tomcat
(Nota : recomendamos lea primero completamente los dos primeros pasos y luego recien proceda a realizar las instalaciones que correspondan)

lo primero que debemos de tener en cuenta es que un servidor Apache Tomcat o jakarta Tomcat (como también suelen llamarlo), no es lo mismo que nuestro servidor HTTP Apache que hemos venido trabajando.. Tomcat es también un servidor Web y al instalarlo al igual que tenemos una carpeta "www", con Tomcat tendremos una carpeta "ROOT" contenido dentro de otra denominada "webapps" donde podremos poner nuestros archivos con extensión "jsp", los que serán interpretados y lanzados a nuestro navegador de preferencia (o por defecto).. pero para nosotros desarrolladores como ya debemos tener instalado un servidor HTTP Apache en el puerto 80, pues la instalación de Apache Tomcat la tendremos que hacer sobre otro puerto para evitar conflictos (uno recomendable puede ser 8080, 8090, etc. o realmente el que queramos pero que no sea utilizada por alguna otra opción o servicio web, proxy, etc; incluyendo por supuesto los puertos que utilizaremos con nuestro launcher de Google AppEngine (GAE).

Instalar Tomcat es realmente como instalar Apache con Appserv u otro similar (Wamp, Xamp, etc); pero es imprescindible indicar que primero debe haberse instalado el JDK de Java, para ello puede resultar conveniente revisar primero esta tabla requerimientos de JDK dependiendo de nuestra version Tomcat:

http://tomcat.apache.org/whichversion.html,

y como siempre, podemos elegir y trabajar con las ultimas versiones, las que como pueden ver ya son bastante estables: Otra cosa que debemos de tener en cuenta es que al instalar, Tomcat, a diferencia de HTTP Apache, el servicio no se carga en automático, excepto lo hayamos configurado expresamente para ello, por eso, concluída la instalación del servidor el primer paso imprescindible seleccionar en "Todos los programas", la opción Apache Tomcat, configurar Tomcat, y arrancar el servidor; y configurarlo en "automatico" si deseamos que siempre se cargue al inciar nuestro sistema operativo.

Para instalar Tomcat sobre window puede tener algunas peculiaridades (como tambien las tiene sobre Linux y Unix, pues varias cosas se tienen que ingresar comandos de consola, especialmente para dar atrbutos a nuestras carpetas y desempaquetar los archivos tar requeridos),..pero realmente trabajar sobre Linux tiene sus ventajas respecto a la perfomance de nuestro servidor Web, realmente es más rapido, lo que es conveniente si lo vamos a utilizar Tomcat en un ambiente de producción; pero si vamos a hacer nuestras pruebas, y siendo a este nivel indiferente que trabajemos sobre Linux o Windows, entonces les paso un enlace de como hacer la instalación sobre Window7, que como es característico Microsoft siempre pone algunas restricciones de "seguridad" que debemos de tomar en cuenta.

http://profesor.antonio.com.mx/?p=129

Solo basta reiterar que no utilicemos para la instalación el puerto 80 que probablemente la estemos utilizando para nuestro servidor HTTP Apache, ni tampoco del 20 al 25 /FTP y otros), ni 1433 no 3306 (de SqlServer y MySQL respectivamente); podemos utilizar puertos mayores a 8000 por poner un ejemplo, ó de 5 digitos que tambien puede hacerse, tamién pueden utilizar un scaner de puertos on-line si tienen dudas que algunos puertos puedan estan siendo utilizados, es decir, si tienen equipos o servicios como proxys instalados en su equipo que requieran conexiones a puertos; ó mejor aún, hacer un monitoreo de los puertos en uso y así seleccionar puertos que no estén siendo utilizados (en Windows podemos utilizar CurrPorts v2.02 el cual es bastante práctico y eficiente, y solo requiere ser desempaquetado para ejecutarlo)... asimismo, es conveniente tener presente que tanto el JDK de Java como nuestro Tomcat esten instalados sobre una carpeta raiz de alguna de nuestras unidades de disco, pues hay varias cosas del mundo Java que pueden configurarse directamente sobre archivos específicos (server.xml, context.xml, user.xml, entre otros), y es necesario que estos sean fácilmente identificables y accesibles...

Vale también indicar que un servidor Tomcat es en varios aspectos mucho mas flexible y configurable que un servidor Apache HTTP, en el sentido por ejemplo que no necesariamente un "proyecto" deba estar grabado en la carpeta ROOT (equivalente a nuestra carpeta "www" que hemos venido trabajando); e inclusive es factible configurar a Tomcat para que directamente llamando a http://localhost/myproject por ejemplo (y este sea un proyecto JSP-Java, este corra automáticamente sin indicar el puerto de escucha al que ha sido direccionado nuestro servidor Tomcat... esto por supuesto es muy útil y necesario si nuestro servidor Web es un servidor de producción (pueden revisar el siguiente link al respecto), pero como no es nuestro caso no ahondaremos sobre las diferentes opciones de configuración que puede brindarnos un servidor Tomcat, que realmente son interesantes pero basta por el momento que sepamos que, aún trabajando con un servidor Apache HTTP y un servidor Tomcat en forma simultanea, es posible que, dentro de un ambiente intranet tengan acceso a nuestra aplicación ingresando directamente la IP de nuestro servidor y el nombre de nuestra aplicación: por ejemplo 192.1681.100/myproject; (o también el nombre de nuestro dominio interno configurado); y en el caso de un ambiente internet, indicando nuestro dominio y la aplicación, como por ejemplo: www.mydominio.com/myproject; no importando en ningún caso las indicaciones respecto al puerto que utilicemos y donde se encuentre grabada la carpeta que contiene a nuestro proyecto.

2do. paso:
Instalar Netbeans y trabajar con Apache Tomcat.

Cabe mencionar también que cuando instale por primera vez Netbeans (que es un IDE bastante eficiente para realizar nuestros desarrollos sean estos Java, PHP, Phyton, C++ o Groovy, etc.), este solo incluía un servidor de aplicaciones llamado Glassfish (similar al Tomcat), y que luego había que indicarle que trabajase también con Tomcat; pero observo como una agradable sorpresa que ahora Netbeans 7 incluye como servidores tanto a Glassfish 3.x como Tomcat 7.0.x; y que incluso es posible instalar todo el paquete (Netbeans, los servidores Glassfish y Tomcat y el JDK de Java en un unico paquete, como cuando instalamos Appserv o Xamp -pero con el adicional de tener un IDE completamente integrado y listo para su uso en nuestros proyectos... estas son ventajas del desarrollo opensource y de la vigencia y actividad de esta plataforma que podemos disfrutar ahora.. como siempre, mi única recomendación al respecto es que hagamos toda la instalación en una carpeta directamente en la raíz de una de las unidades de disco de nuestro ordenador (para facilitar la identificación y ubicación de los componentes del servidor).

Download Netbeans : http://netbeans.org/downloads/
(elegir la opcion JavaEE ó All, o sigamos este enlace para descargar el JDK de Java junto con el IDE NetBeans en un solo paquete.

pero antes la aclaración a una pregunta importante... Porque utilizar un IDE como Netbeans, Eclipse u otro asociado al mundo Java? ..y porque Netbeans en particular? ...no pretendo dar una explicación de las ventajas de trabajar con un IDE en paticular porque eso creo que depende bastante de la pericia y experiencia del programador con uno u otro entorno de desarrollo... pero trabajar en Java con un IDE especializado es particularmente util porque nos facilita herramientas para la configuración, manipulación, modificación, mejora y/o adición de nuevas opciones a nuestros proyectos (especialmente si son proyectos "grandes")... y la idea de nuestros "codelabs" es que dispongamos de ellos para que lo adaptemos y mejoremos de acuerdo a nuestras necesidades... pues planteado así, Netbeans nos permite "cargar" directamente las "fuentes" de cualquier proyecto JavaWeb como un "proyecto Netbeans", y luego utilizando las pantallas de edición de sus componentes, se nos facilitará su revisión, depuración y adecuación; pero sobre todo, para ejecutar el proyecto (y lanzarlo a nuestro navegador por defecto), sencillamente debemos seleccionar nuestro proyecto e indicar la opción Run y listo.. si todo esta correcto el proyecto se lanzara a nuestro navegador... y si nuestro servidor fuera de producción internamente el IDE hace las configuraciones necesarias y nuestro proyecto podrá ser accesible directamente desde el navegador de preferencia de los "usuarios" que accesen a nuestro proyecto , ya sea a nivel intranet o internet... y eso si es para tomar en cuenta..

3er. paso:
Hablemos sobre Java y como trabaja...

Como ya les indique anteriormente, trabajar con código Java tiene una curva de aprendizaje mas compleja que utilizar HTML, CSS, Javascript, PHP, etc. (y bastante similar a otros lenguajes "compilados" como Phyton, esto por supuesto si queremos llegar a dominar todas sus posibilidades), pero no perdamos animos por ello, solo miremos a este entorno de desarrollo como un "paquete" asociado al mundo de desarrollo Web que podemos incluso integrar a nuestros proyectos, y poco a poco, y con la experiencia que ya debemos haber desarrollado al haber investigado y hacer uso de HTML, CSS, Javascript, PHP, las API de Google, de Facebook, de Twitter, etc.. pues mas rápido de lo pudiera pensarse se lograrán despejarán nuestras dudas e incomprensiones.. debiendo tener presente primordialmente que, como en el caso de PHP, para tener acceso a los comandos e instrucciones de dicho lenguaje utilizabamos las etiquetas del tipo : "<?php -my-codePHP- ?>", pues ahora con Java, en nuestros archivos JSP, para hacer referencia a nuestros codigos y variables utilizamos la etiqueta <% --my-codeJava-- %> ..y con esta rápida introducción creo ya estamos listos para empezar nuestras investigaciones respecto a este entorno "profesional" de desarrollo.

Nuestro Hello World en Java?

<html>
<body>
<h1><% out.println("Hola mundo"); %></h1>
<p>This is my first test</p>
</body>
</html>

..observan mucha diferencia a nuestro Hello World de nuestro servidor HTTP Apache? ..pues realmente no (excepto que hemos colocado nuestra "Hola Mundo" dentro de las etiquetas <% %> que indica que lo contenido es un código Java, y el servidor "compilará" esa instrucción, lo ejecuta y mostrará en nuestro navegador) .. solo basta grabar este código en un archivo tipo texto con el nombre prueba.jsp, y ejecutarlo en nuestro servidor Tomcat, una vez lo tengamos instalado y puesto en servicio por supuesto, digitando en la barra de direcciones de nuestro navegador de preferencia : http://localhost:8090/prueba.jsp, (nótese que indicamos el puerto con que hemos configurado a nuestro Tomcat al realizar nuestra instalación; y tambien por supuesto, debe resultarnos claro que ya todo lo que manejamos con HTML, CSS, e incluso con Javascript, también lo podremos usar en el mundo Java.. algo similar es con el "mundo Phyton",..y también con el mundo "Microsoft" (que plantea el uso de otro tipo de servidores -el IIS- y otro lenguaje por el back-end -ASP.Net en este caso- y que detallo por cuanto hemos tomado conocimiento del lanzamiento de WebMatrix 2.0 beta, un entorno de desarrollo que junta diversas herramientas opensource y de Microsoft para hacer desarrollos Web que involucra las herramientas mencionadas, y otras todas integradas con HTML, CSS, Javascript e incluso PHP, lo que le permite el manejo e instalación de varios proyectos sociales tambien opensource muy conocidos como Wordpress, Drupal, Joomla, etc.. incluye su propio editor y "lanzador" de aplicaciones (de una manera similar al "launcher" de Appengine), así que tenemos otro entorno de desarrollo por revisar...

Otro de los temas que tocaremos mas adelante es que también podemos utilizar PHP en entornos Java (y mantener el mismo acceso a los servicios sociales y otros desarrollos opensource como los indicados pero ahora desde el entorno Java, con el uso de Netbeans IDE y de servidores como Tomcat ó Glassfish.. y volviendo a nuestro tema, vale destacar que por supuesto esto es solo el principio, pero con este sencillo ejercicio "Hola Mundo" creo que podemos llegar a tener una idea real de como funciona Java en nuestros desarrollos Web, el resto es hacer nuestras pruebas e investigaciones personales, y para ello les presento este link de un curso bastante completo e interesante de Java EE hecho por Abraham Otero, del portal Javahispano.org; el cual además de mostrarnos todo lo básico de desarrollo Web (como es el manejo de HTML y CSS), pues nos detalla todos los secretos de Java de manera bastante práctica, y no dudo que comprensible para todos los interesados... de hecho, no solo detalla los "secretos" de Java sino que nos explica y muestra porque resulta recomendable trabajar con el IDE Netbeans para facilitar nuestros desarrollos en esta plataforma -y las que soporte Netbeans-, utiliza videos bastante apropiados, y esta en español... tal vez el único "inconveniente" es que los videos estan colgados en Parleys.com (que es una plataforma e-learning free asociada a Adobe), pero para optimizar el uso de esta plataforma basta con que instalemos "Parleys Desktop" (que instala un SDK y baja los videos a nuestro ordenador, y agiliza la presentación y calidad de ejecución de los mismos), para ello revise el "Home" de la pantalla de Parleys cuando accedamos a los enlaces de video indicados; lo que le permitirá también revisar con mas detalle y dar una mirada a otros videos y cursos de Javahispano.org, y tambien de otros expositores disponibles en esta plataforma

Curso Basico de JavaEE : http://www.javahispano.org/articulos/JavaEE.pdf
ó mejor aún, revisar el Tutorial JavaEE de JavaHispano completo.
(language = spanish)

4to. paso
Instalando nuestro primer proyecto JavaWeb

...empecemos con armar nuestro primer proyecto Web con Netbeans... es realmente sencillo...

si ya hemos instalado nuestro servidor Tomcat y Netbeans con cualquiera de las formas antes indicadas, solo basta que elijamos la opción File, New Project y en la pantalla de indicación de proyectos nuevos verifiquemos que esten seleccionados Java Web y Web Application, y luego elijamos Next (hay unos ejemplos alli que podremos revisar también); luego la pantalla nos solicitará el nombre y la ubicación de nuestro proyecto (por defecto una carpeta de Mis Documentos en Windows), podemos indicarle un nombre apropiado como "myHello" así como cualquier carpeta, lo más adecuado a nuestros intereses... el resto de opciones de esta pantalla las podemos dejar como están...

Luego pasamos a la configuración de nuestro servidor, y allí indicamos que utilizaremos Tomcat (si hubiésemos instalado Glassfish aparecerá esa opción por defecto); la versión de JavaEE indicada la dejamos por defecto, y podemos cambiar el Context Path a uno adecuado ("myHello" en este caso para referirnos al nombre de nuestro proyecto), teniendo presente que ese nombre es que corresponde al que utilizaremos como dirección en nuestros navegadores.. y con toda esta información nuestro proyecto "vacío" será creado.. Netbeans creará nuestro proyecto con todas las carpetas MVC requeridas para un proyecto Java Web, y asimismo observaremos al archivo index.jsp creado por defecto que solo tiene en HTML el mensaje "Hello World"...

Revisemos con detalle alguna de las carpetas creadas por el Netbeans, especalmente los archivos contenidos en WEB-INF (web.xml), y META-INF (context.xml); que han sido creadas con lo indicado al "armar" nuestro proyecto y que vamos a tener que utilizar y manipular cuando carguemos cualquier proyecto que tengamos sus fuentes.. y listo.. seleccionemos nuestro proyecto, botón derecho del mouse e indiquemos Run.. Netbeans procederá a construir y lanzar nuestro proyecto a nuestro navegador de preferencia y allí debe aparecer nuestro Hello World...

Instalando nuestros proyectos Integracion Google 1ra y 2da parte en Netbeans:

Aun cuando nuestros proyectos Integración Google 1ra. y 2da. parte son desarrollados exclusivamente con HTML y Javascript (recuerde que usamos ExtJs que es un framework de Javascript), puede entonces cargarse estos trabajos como proyectos del Netbeans pero acondicionando su presentación para que respete la distribución de archivos convencional de un proyecto "Java Web"... y las condiciones son faciles de implementar, y se resumen en este caso en crear una carpeta "web" que contenga todo nuestro proyecto ( no estamos utilizando ningún código Java que efectúe alguna operación por el lado del servidor en este caso), y asimismo que dentro de esta carpeta pondremos nuestra versión "liviana" del framework (carpeta Ext-3.4.0 en este caso); y además 02 carpetas denominadas META-INF y WEB-INF, quienes alojarán a los archivos "context.xml" y "web.xml" respectivamente (y en donde se indicará el nombre de nuestro "context-path" y archivo de arranque del proyecto, que en este caso es index.html)...

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

IntGoogle-01.rar, que nos muestra Visualizaciones Google sobre ExtJs (la versión Ext-3.4.0 en este caso) correpondiente a dicho codelab, ahora adecuados a un formato "Java Web" para poder cargarlos como un proyecto de Netbeans. Puede revisar nuestra entrada Integracion Google 1ra parte para mayores detalles.

IntGoogle-02.rar, que nos muestra Visualizaciones Google y ExtJs de nuestro documento "Spreadsheet Productos": correspondiente a dicho codelab (adjuntamos también nuestro modelo de hoja de calculo en formato xls para que puedan realizar pruebas con un documento propio, cargando este archivo a Google Docs)... Puede revisar nuestro codelab Integracion Google 2da. parte para mayores detalles.

Integracion Google Parte No.1 corriendo sobre Netbeans-Tomcat :

Integracion Google Parte No.2 corriendo sobre Netbeans-Tomcat :

NOTA IMPORTANTE :

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_01.js / MenuGVisualization_02.js where appropiate!

TRABAJANDO CON OAUTH 2.0 :

..now you can test our IntGoogle01-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.

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

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 e IntGoogle02-Oauth20 como JavaWeb projects corriendo sobre un servidor Tomcat !

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 actualizacion a la API v.3)..por supuesto, al trabajar con nuestro servidor local "localhost" no se presentan problemas.. el asunto es, como indicamos, al cargar nuestros proyectos a un servicio de hosting externo cualquiera.. como sobre la plataforma GAE (Google App Engine), que es donde esta corriendo nuestra demo)

Pasos para realizar el Codelab..

Descargados estos proyectos en la carpeta de proyectos de Netbeans (en Mis Documentos en caso de Windows, u en otra crapeta que creamos conveniente), hay que cargar estos proyectos a Netbeans; para ello, debemos seleccionar la opción File, New Project; y en ella debemos seleccionar Java Web y Web Application with Existing Sources; luego al seleccionar Next, se nos indicará que ingresemos la carpeta que contiene nuestro proyecto (Int-Google01 por ejemplo), y al seleccionarla, Netbeans nos pondrá como nombre de nuestro proyecto y su ubicación las de nuestra fuente que estemos cargando, pero que podemos cambiar si estimamos necesario (no en este caso); luego indicando Next nuevamente, Netbeans nos pedirá los datos de configuración del proyecto, el servidor a utilizar (Tomcat en este caso), la versión de JavaEE (que dejaremos la indicaba pues no estamos utilizando Java en este caso); y nuestro "Context-Path", que tendrá el nombre del proyecto que estemos cargando...y al indicar Next nuevamente, ahora Netbeans nos solicitará la configuración de nuestro "codigo fuente", vale decir, la ubicación de nuestra carpeta web que debe aparecer ya predeterminada (sino debemos ubicarla y seleccionarla), la ruta de nuestra carpeta WEB-INF, que tambien debería aparecer ya predeterminada, sino habra que realizar el mismo proceso indicado.. y listo; en este caso, al ser nuestro proyecto exclusivamente un proyecto "web" (y que no contiene nada de código Java), no es necesario indicar librerías complementarias ni otros datos, luego entonces al indicar "finish", Netbeans creará nuestro proyecto con una estructura similar al de nuestro primer proyecto... luego solo basta seleccionar al proyecto, hacer click derecho con el mouse y seleccionar Run, y Netbeans construirá y lanzará nuestro proyecto a nuestro navegador de preferencia... Debemos hacer lo mismo con nuestro proyecto Int-Google02, y con esto veremos corriendo nuestros ejercicios (si han seguido todos los pasos de nuestro proyecto), hasta en 03 plataformas distintas: sobre un servidor HTTP Apache, sobre AppEngine como proyecto Python, y ahora sobre un servidor Apache Tomcat como proyecto JavaWeb; y con lo que podemos sacar como una clara conclusión que dentro del mundo Web no hay problemas de compatibilidad si trabajamos con sus elementos básicos: refiriéndonos a HTML, CSS y Javascript, y de manera simultanea, ahora ya tenemos mas claro como cargar proyectos a Netbeans con "códigos existentes".. que es el caso del proyecto sdsimple que detallamos en nuestro siguiente codelab ó cualquier otro proyecto JavaWeb..

Nota Importante: No realizamos lo mismo con nuestro proyecto Integración Google 3ra. parte, que describe un modelo CRUD de una tabla utilizando como Back-End PHP y la base de datos MySQL. En este caso no existe ningún problema respecto a trabajar y manejar la base de datos MySQL - y cualquier otra, como PostgresSQL, SQL Server, Oracle, Acces, etc.- el problema esta por el lado del lenguaje que utilizamos para "comunicarnos" con ella, que en este caso es PHP; pues nuestro servidor de servlets Tomcat no viene preparado para trabajar con PHP, pero vale mencionar que si es posible hacer que nuestro entorno Java reconozca PHP, pero hay que trabajar con un "paquete" complementario a nuestro proyecto para así ocurra ( y eso escapa los alcances del presente codelab ), pero es bueno tenerlo en cuenta si se nos presenta el caso de proyectos que involucren códigos java, y soluciones y códigos PHP... pues ya habrán podido darse cuenta, en el mundo Web todo se puede configurar, interconectar y utilizarse en forma conjunta de alguna u otra manera..

Asimismo cabe destacar que, usualmente los proyectos "Java Web" se inician con un archivo "index.jsp" (y que por supuesto, probablemente debe y puede contener códigos y variables java; pero en este caso, como hemos indicado, no estamos tocando nada de ese entorno por el lado del back-end, y en el caso de nuestro codelab Integracion Google 2da. parte, pues nuestro "back-end" es una hoja de cálculo de Google Docs que es externa a nuestro entorno de Desarrollo, y nos estamos conectando a ella utilizando únicamente código javascript (el API Ajax Javascript de Google para ser mas exactos, cuya biblioteca resumen de ejercicios para muestra podemos consultar en el llamado Google Palyground); y es así como también podemos trabajar en nuestros proyectos personales... conectando nuestros aplicativos a bases de datos externas grabadas en la nube (internet), sean propias o de terceros que nos proporcionen un API de conexión y enlace, o también conectandonos a otros equipos en forma remota, para lo que debemos tener nuestro correspondiente usuario y password de acceso con los derechos necesarios, utilizando internet por supuesto...

Saludos
@Mlaynes

Integracion a Google (3ra parte)

2011-04-24T13:21:00.000-05:00

Recuerde que..

...y continuando con el entorno del Back-End PHP+MySQL pasamos a mostrar nuestro modelo de visualizaciones Google y ExtJs mostrado en nuestros codelabs Integracion Google 1ra y 2da parte, pero utilizando una base de datos llamada IGCodelab creada sobre MySQL (cuyo archivo IGCodelab.sql si proporcionamos en esta oportunidad para facilitar el desarrollo del ejercicio), y en la que la respectiva Tabla de Usuarios tiene registrados nuestro username y password de acceso al Modulo (puede probar con prueba y prueba, o passer y passer), entonces, y solo así, podremos acceder a las opciones de nuestro TreePanel que muestra ls diversas opciones de visualizacion utilizando las API de Google y de ExtJS que henos preparado, y creo suficientes para observar el potencial de ExtJS integrado a Google para el desarrollo de aplicaciones reales, y que incluye el manejo de Wizard cuyo modelo básico fue desarrollado en un tutorial del Quizzpot.

Con que contamos en estos momentos?

Si siguieron el desarrollo de nuestros codelabs desde el inicio, y por supuesto los anteriores respecto al Back-End PHP-MySQL, ya deben tener instalado en sus ordenadores un servidor de pruebas Apache con PHP+MySQL, y PHPMyAdmin (para administrar nuestras bases de datos), por lo que solo basta que verifiquen que tengan completo acceso a MySQL a través de PHPMyAdmin, accediendo a la misma y poder observar las tablas de la base de datos Tutorial creada en el ejercicio anterioir... y bueno, ahora nuevamente ya estamos listos para empezar nuestro codelab.

Audiencia

Se recomienda que, para entender este codelab, tengamos los suficientes conocimientos de ExtJs y desarrollo Web (HTML, Javascript ...y algo de PHP (que si no dominamos o desconocemos, pues no debería preocuparnos tanto puesto que en este modelo solo se utilizan instrucciones fáciles de comprender y su sintaxis es bastante sencilla, además que si nuestro interes va por el empleo de este Back-End, debe ser un buen motivo para empezar a explorar este lenguaje).

Asimismo se recomienda haber leído y probado: 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 en este caso no se emplean pero se hacen referencia.

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

Int-Google03.rar, Descomprimir el material de apoyo en una carpeta de www de nuestro servidor local AppServ u otro compatible Apache-PHP-MySQL, y se creara la carpeta "Int-Google03" que contiene los archivos correspondientes al presente codelab (si no entiende este paso favor consulte "empezando desde cero').Luego en éste código debemos proceder a la configuración de las rutas de importación de nuestra versión del framework ExtJs que utilicemos ( recomendado cualquier versión Ext-3.x, la versión ExtJs4 no es soportada por éste código ).

Int-Google03.rar ( 2.6Mb ), Este código corresponde al material de apoyo utilizado para instalar el presente codelab pero en la plataforma de Desarrollo WebMatrix. ( compatible con el servidor Appserv en este caso, pues este codelab sólo involucra al Back-End PHP+ MySQL que también es soportada por WebMatrix ). El resultado de éste código es una versión mejorada del material presentado primero, y 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" como hemos indicado ), podremos ver directamente los resultados al llamarlo desde la barra de direcciones de nuestro navegador usando : "http://localhost/WebMatrix/Int-Google03" (previa configuración de los parámetros de conexión a la base de datos, tal como se indica a continuación), y en este caso, también deben tenerse en cuenta las instrucciones para la correcta configuración de nuestra base de datos "igcodelab" empleada en este codelab, y para lo cual se anexa el archivo igcodelab.sql.

NOTA : Entre las mejoras planteadas con este segundo código, cabe resaltar que ahora en nuestro modelo de Menu TrrePanel hemos adicionado a nuestro modelo CRUD de Mantenimiento y Listado de Presidentes empleado en los codelabs anteriores referidos al tema del Back-End PJP+MySQL a efectos de mostrar como se puede "integrar" estos modelos de manejo de base de datos en nuestros proyectos personales...

Pasos para ejecutar el Codelab...

Para ejecutar el tutorial debemos primero debe realizar lo siguiente:

Crear la base de datos IGCodelab. Esta base de datos contiene las tablas drivers, productos y usuarios que son las necesarias para ejecutar el codelab (utilice el archivo igcodelab.sql que incluimos en el material de apoyo).
Para los que están ejecutando el ejercicio en su versión "completa", la sugerida para probar sobre la plataforma WebMatrix, sin haber realizado los anteriores referidos al Back-End PHP+MySQL, deben crear la base de datos Tutorial, y cargar las tablas y datos desde el archivo pdtes_usa.sql el cual es utilizada en ese ejercicio.
Creada nuestra base de datos, puede observar que la tabla usuarios tiene registrado los usuarios prueba y passer con la que podremos acceder al Modulo.
Con nuestro explorador debemos ingresar a la carpeta "Int-Google03" creada en la carpeta www del Appserv, y alli "editar" el archivo "drivers.php". Este archivo en sus primeras lineas tiene en su inicio las intrucciones de conexion a nuestra base de datos:

// Database connection information
$host = "localhost"; // Host name
$user = "root"; // User default for MySQL access
$pwd = "..yourPassword.."; // put your PHPMyAdmin Password
$db = "igcodelab"; // Our Database of exercise

$user

$pwd

$db

"igcodelab"

$host

localhost

www.mydominio.com

..y ahora nuevamente ya estamos listo para ejecutar nuestro ejercicio...!

Ahora, si con nuestro navegador ingresamos a "localhost", y luego al ingresar a la carpeta a carpeta "Int-Google03" siguiendo la ruta donde hayamos descargado el material de apoyo (pero que debe dentro de la carpeta www de AppServ); pues al ingresar esta carpeta que contiene a nuestro archivo index.html, deberá aparecer una pantalla como la que se muestra a continuación:

Esto nos indica que nuestra descarga y copia ha sido correcta, y ya estamos listos para revisar el material de apoyo descargado y descubrir como hemos desarrollado nuestro codelab de Integracion Google empleando Wizards y Visualizaciones desarrollados con la API de Google y ExtJs.

Nota.- si no aparece la primera pagina mostrada es probable que no hayamos descargado nuestra version completa o "liviana"de 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 vigente al 01/03/2011). Observe la ruta rerlativa a www que utilizamos para acceder dichos archivos "../../extjs/extjs-3.1.1" en este caso (que indica 2 carpetas sobre nuestra descarga del tutorial). Efectúe los cambios de la ruta necesarios en el archivo index.html del tutorial y pruebe nuevamente hasta que aparezca la pantalla indicada.

La segunda imagen nos muestra nuestro modelo de Pantalla de Acceso o Login, la cual en su parte inicial, al seleccionar el drivers de nuestra conexion, al mismo tiempo verifica la conexion a nuestra base de datos (si no aparece la opcion MySQL es porque aún cuando nuestra configuración de ExtJs es correcta, nuestra conexion a nuestra base de datos MySQL no lo es, y debemos revisar los parametros indicados de nuestro archivo drivers.php.

Asimismo, si no nos aparece nada, o al ingresar nuestros datos de acceso no se activa nuestro treePanel, o si la consola de nuestro browser nos muestra mensajes de problemas de conexion a la base de datos o conexion a MySQL, pues debemos revisar con mas detalle nuestra configuración y observar si los datos indicados han sido correctamente ingresados...

Nota (22/11/2011).- los ejercicios mostrados sobre uso del Back-End PHP+MySQL funcionan sin mayor problema tal como los presentamos, pero para los codelabs Grid-MySQL :Using the Bak-End PHP+MySQL (Getting Started), y en este codelab: Int-Google03, como podrá comprobarse, los archivos *.php involucrados utilizan codificación ANSI, aún cuando lo recomendado cuando trabajemos en nuestros proyectos web es que como norma todos nuestros archivos sean construidos con la codificación UTF-8.... Ocurre que cuando se trabaja con cookies (como es el caso de estos codelabs), puede haber restricciones para el uso de la función setcookie(), por cuanto en PHP por defecto, al trabajar sobre un servidor Apache, se encuentran restringidas las salidas del buffer del servidor luego que se haya cargado o ejecutado algun script HTML... y en el caso de los dos codelabs mencionados, como puede fácilmente observar por la forma en que se encuentran construidos los ejercicios, primero se cargan a los archivos index.html, y luego durante el proceso se invoca a los respectivos archivos *.php para interactuar con la base de datos MySQL.

Esta restricción puede superarse convirtiendo los archivos *.php que invocan a las funciones setcookie() a codificación ANSI, o como otra alternativa, reconfigurar nuestro archivo PHP.ini, indicando la directiva: output_buffering=on (su valor por defecto es off).

La documentación no indica al detalle la causa de esta salvedad pero puede ser verificado - utilizando Firebug de Firefox para hacer sus pruebas - que al convertir los archivos *.php del proyecto Int-Google03 a codificación UTF-8 (utilizando notepad++ u otro editor). Por ejemplo, pueden probar con el archivo drivers.php que se utiliza primero para la grabación de los cookies, al cual a variar a codificación UTF-8 éste arroja por la consola de inspección el warning : "Cannot modify header information - header alreaqdy sent by..",.y nos indica las líneas de nuestras instrucciones setcookies(); y por supuesto, no funciona la carga de datos, o mas propiamente dicho, se bloquea la salida de datos desde el buffer del servidor, aún cuando la información haya sido "capturada"...

Esto reiteramos, como hemos indicado, se soluciona al convertir nuevamente a ANSI nuestro archivo drivers.php, o también podemos reconfigurar nuestro PHP.ini la directiva: output_buffering=on, y en este ultimo caso, aún cuando nuestros archivos PHP sean codificados UTF-8 si se permitirá la "salida" de la información y el ejercicio funcionará sin ningún contratiempo.

Cabe anotar asimismo, que esta situación no ocurre si trabajamos con PHP sobre un servidor IIS (como WebMatrix), pero como hemos indicado al inicio de esta entrada que podemos bajar el codelab correspondiente a dicha plataforma para probar el ejercicio sin realizar mayores onfiguraciones para la importación de las librerías ExtJs, entonces, hemos cargado en ese codelab los archivos *.php que involucren el manejo de cookies en codificación ANSI para evitar cualquier problema en su funcionamiento.

Saludos
@Mlaynes

Opina en nuestro foro §FB..!

Using the Back-End PHP+MySQL ( Wizard & Safety themes )

2011-03-10T14:52:00.000-05:00

Recuerde que..

...y continuando con el entorno del Back-End PHP+MySQL pasamos a mostrar el mismo modelo de la entrada anterior que nos muestra un mantenimiento basico de Tablas (Altas, Bajas, Modificación, Consulta e Impresion); pero en este caso mostrando previamente una pantalla de acceso o Wizard, mediante el cual, de habernos registrado previamente en una respectiva Tabla de Usuarios (en donde debe estar registrados nuestro username y su respactivo password de acceso al Modulo), entonces, y solo así, podremos acceder a nuestro GridEditor que nos muestra una lista de Presidentes de U.S.A y los partidos a los que pertenecen...

El hecho de utilizar Wizards o Pantallas de Acceso a nuestros modulos o sistemas, va asociado de manera ineludible a temas de seguridad por lo que debemos empezar a tomar en cuenta las siguientes consideraciones:

No debe permitirse el "acceso directo" a nuestras paginas, en este caso a nuestro modelo "grideditor" de presidentes, vale decir que si alguien obtuviese la direccion URL de nuestro GridEditor (como debe ser con cualquier otra pagina de nuestros sistemas), estos no deben poder acceder a ellas, sino que deberán ser redirigidos a la Pantalla de Acceso de nuestro modulo o sistema, y acceder a nuestras opciones solo si hubiesen sido debidamente registrados.

Debe asimismo tomarse en cuenta acciones de Auditoria de Datos, es decir, que deberíamos a empezar a registrar en una Tabla de diseño adecuado, todas las operaciones que estan efectuando nuestros usuarios (Alta, Baja, Modificacion, Consulta, y su fecha y hora de operación), y así poder hacer un seguimiento de ellas (este tema no forma parte del presente "codelab" pero lo mencionamos para su consideración)

Debe tambien tomarse en cuenta una Validacion de Datos pensando en el funcionamiento del sistema (no solo en las condiciones estáticas de las mismas); es decir por ejemplo, si en nuestro ejercicio se quisiera eliminar un partido poltico (que trabaja en este caso como una Tabla de Datos), primero se debe verificar si no esta siendo utilizada en la tabla de Presidentes (que para los efectos expuestos trabaja en este caso como si se tratase de una Tabla de Transacciones); de no hacerlo así y se procediera a borrar un partido que esta siendo utilizado.. sencillamente los presidentes que pertenecen a dicho partido "desaparecerían" de nuestra Vista (por la condicion Where del Query), y eso seria erróneo. pues la data seguiría grabada en nuestra base de datos pero no se mostraría (la codificación del presente codelab tampoco contempla lo indicado, pero también reiteramos que debe tenerse en cuenta.

y finalmente, debe tomarse en cuenta temas de seguridad de la WEB y evitar la acción de virus y hackers... PHP nos presenta varias opciones y temas de seguridad que debemos empezar a revisar y considerar para nuestros proyectos, y para lo cual detallaremos algunas referencias tecnicas que esperamos que con su aporte se puedan mejorar aún mas, por cuanto, en lo que respecta a estos temas en particular, los diversos software de desarrollo permanentemente presentan mejoras en sus formas y opciones... y en lo que respecta a este "codelab", hemos considerado un Modelo Básico pero bastante practico, el cual esperamos mejorar aun mas para cuando presentemos nuestro modelo de Integracion a Google utilizando el manejo de las API de visualizaciones.

Con que contamos en estos momentos?

Si siguieron el desarrollo de nuestros codelabs desde el inicio, y por supuesto el anterior respecto al Back-End PHP-MySQL, ya deben tener instalado en sus ordenadores un servidor de pruebas Apache con PHP+MySQL, y PHPMyAdmin (para administrar nuestras bases de datos), por lo que solo basta que verifiquen que tengan completo acceso a MySQL a través de PHPMyAdmin, accediendo a la misma y poder observar las tablas de la base de datos Tutorial creada en el ejercicio anterioir... y bueno, ahora nuevamente ya estamos listos para empezar nuestro codelab.

Audiencia

Se recomienda que, para entender este codelab, tengamos los suficientes conocimientos de ExtJs y desarrollo Web (HTML, Javascript ...y algo de PHP (que si no dominamos o desconocemos, pues no debería preocuparnos tanto puesto que en este modelo solo se utilizan instrucciones fáciles de comprender y su sintaxis es bastante sencilla, además que si nuestro interes va por el empleo de este Back-End, debe ser un buen motivo para empezar a explorar este lenguaje).

Asimismo se recomienda haber leído y probado: 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 en este caso no se emplean pero se hacen referencia.

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

Wizard-sample.rar, Descomprimir el material de apoyo en una carpeta de "www" de nuestro servidor local AppServ u otro compatible Apache-PHP-MySQL, y se creara la carpeta "Wizard-sample" que contiene los archivos correspondientes al presente codelab (si no entiende este paso favor consulte "empezando desde cero'). Luego en éste código debemos proceder a la configuración de las rutas de importación de nuestra versión del framework ExtJs que utilicemos ( recomendado cualquier versión Ext-3.x, la versión ExtJs4 no es soportada por éste código ).

Wizard-sample.rar ( 2.6Mb ), Este código corresponde al material de apoyo utilizado para instalar el presente codelab pero en la plataforma de Desarrollo WebMatrix.( compatible con el servidor Appserv en este caso, pues este codelab sólo involucra al Back-End PHP+ MySQL que también es soportada por WebMatrix ). El resultado de éste código es una versión mejorada del material presentado en el enlace anterior, y 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" como hemos indicado ), podremos ver directamente los resultados al llamarlo desde la barra de direcciones de nuestro navegador usando : "http://localhost/WebMatrix/wizard-sample" (previa configuración de los parámetros de conexión, tal como se indica a continuación a la base de datos "tutorial" (empleada en este codelab), y el archivo pdtes_usa.sql anexado corresponde al mismo empleado por el codelab anterior Grid-PHP-MySQL, y en la que debemos crear a la tabla "usuarios" y registrar el nombre y password de nuestro usuario para acceder al sistema, y lo debemos crear "manualmente" como una manera de familiarizarnos con el manejo de la herramienta phpMyAdmin que viene instalado con el servidor Appserv.

NOTA : Entre las mejoras planteadas con este segundo código, cabe resaltar que ahora nuestra pantalla de acceso presenta en su codificación condiciones dinámicas respecto al lenguaje de nuestro navegador para lo cual, hemos procedido a determinar mediante instrucciones HTML el lenguaje utilizado por nuestro navegador... y con instrucciones javascript, y empleando la Google API language, mostrar la información desplegada en nuestra pantalla de acceso en español, inglés e incluso otros idiomas (prueben con cambiar el lenguaje de su navegador Ingresando a Herramientas, Opciones, Avanzado, Contenido Web, Configuración del Idioma - si estamos utilizando Google Chrome - ; asimismo, en nuestros archivos php, se esta utilizando toda la información cargada en los "cookies", para así poder recuperar en cada "pagina php", los datos de acceso a nuestra base de datos MySQL...

NOTA (22/11/2011) : Desde Mayo del 2011, Google ha declarado en proceso de obsolescencia de la API Language v.1 que utilizamos en este codelab (y de forma definitiva a partir del 01/12/2011 según la documentación respectiva); y ha considerado la versión de la Google API Language v.2 como un servicio exclusivo de paga - así es en estos momentos, sin cuotas libres... algo extraño en el mundo Google, pero esa es la realidad por el momento - y la actual versión 1 de la API Language de Google no se muestra estable en su funcionamiento, por lo que hemos modificado nuestro código para que, en caso de efectuarse la traducción, se muestre nuestro mensaje en ingles... es una restricción que también hemos tenido que efectuar a los mensajes de bienvenida y de alertas de nuestro Blog, los que eran multi-lenguaje -incluyendo chino, japonés, etc.- los que ahora, de no funcionar la API de traducción (por motivos de cuota, restricción, etc.), pues por lo menos muestren los mensajes en Inglés... Google informa que el gadgets Google Traductor seguirá siendo un servicio libre, pero mientras no contemos con algún proyecto opensource de fuerza para traducciones libres (como si existe para el caso de servicios de Mapas por ejemplo), pues ., .increible!... pero también podemos recurrir a la Microsoft API Language, la cual nos brinda una cuota de subscripción libre de hasta 5M de caracteres por mes.

Pasos para ejecutar el Codelab...

Para ejecutar el tutorial debemos primero debe realizar lo siguiente:

Crear en nuestra base de datos TUTORIAL la tabla usuarios. Esta base de datos fue creada en el ejercicio anterior (importada de pdts_usa.sql), y en esta oportunidad no les proporcionamos un archivo para su creación con el objeto que sean creadas directamente utilizando nuestro PHPMyAdmin o DBManager. Los requisitos de nuestra tabla de usuarios es que tenga definido como mínimo los siguientes campos: ID : Int(10), primary_key, auto_increment y unique; el campo usuario: varchar(15), y el campo password: varchar(15); adicionalmente podemos crear otros campos de diferentes tipo como Apellidos completos -o separado Paterno, Materno- Nombre completo, e-mail, telefono fijo, móvil, id_skype, direccion, o cualquier forma de contactar con nuestros usuarios, etc.. siempre dependiendo de los requerimientos de diseño de nuestro modulo o sistema ( los tres primeros campos deben tener exactamente ese nombre -respetando minusculas y mayusculas para mejor identificacion- caso contrario, debemos cambiar la respectiva codificación en nuestro archivo index.php que controla el acceso a nuestro ejercicio).
Creada nuestra tabla usuarios, pues ahora debemos registrar 2 o mas usuarios para hacer nuestras pruebas; puede ser uno llamado prueba con nombre prueba y password prueba (para hacer mas facil nuestro ingreso de datos), o como sea de nuestro agrado.
Con nuestro explorador debemos ingresar a la carpeta "Wizard-sample" creada en la carpeta www del Appserv, y alli "editar" el archivo "index.php". Este archivo en sus primeras lineas tiene en su inicio las intrucciones de conexion a nuestra base de datos:

// Database connection information
$host = "localhost"; // Host name
$user = "root"; // User default for MySQL access
$pwd = "..yourPassword.."; // put your PHPMyAdmin Password
$db = "tutorial"; // Our Database of exercise

$user

$pwd

$db

"tutorial"

$host

localhost

www.mydominio.com

..y ahora nuevamente ya estamos listo para ejecutar nuestro ejercicio...!

Ahora, si con nuestro navegador ingresamos a "localhost", y luego al ingresar a la carpeta a carpeta "Wizard-sample" siguiendo la ruta donde hayamos descargado el material de apoyo (pero que debe dentro de la carpeta www de AppServ); pues al ingresar esta carpeta que contiene a nuestro archivo index.html, deberá aparecer una pantalla como la que se muestra a continuación:

Esto nos indica que nuestra descarga y copia ha sido correcta, y ya estamos listos para revisar el material de apoyo descargado y descubrir como hemos desarrollado nuestro Wizards de conexion a nuestra aplicacion descrita en el post anterior, correspondiente a un Modelo Basico de mantenimiento de Tablas con opciones de Alta, Baja, Modificacion, Consulta, Impresion, Busquedas, etc, bajo un formato clasico.

Nota.- si no aparece la primera pagina mostrada es probable que no hayamos descargado nuestra version completa o "liviana"de 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 vigente al 01/03/2011). Observe la ruta rerlativa a www que utilizamos para acceder dichos archivos "../../extjs/extjs-3.1.1" en este caso (que indica 2 carpetas sobre nuestra descarga del tutorial). Efectúe los cambios de la ruta necesarios en el archivo index.html del tutorial y pruebe nuevamente hasta que aparezca nuestra pantalla de acceso.

La segunda imagen nos muestra nuestro modelo de mantenimiento de una tabla desarrollado en el post anterior, si hacemos click sobre dicha imagen nos remitirá a la pagina indicada en la web oficial de ExtJs para la demostracion, pero en nuestro aplicativo, en el toolbar le hemos agregado un boton adicional para salir del Modulo (y que nos redirigirá a nuestra pantalla inicial de acceso); asimismo vale indicar que nuestras pruebas las debemos realizar sobre nuestro servidor local ( htpp://localhost ), pues en este caso se trata de una version mejorada como indicamos.

Asimismo, si al ingresar nuestros datos definidos en la tabla usuarios no aparece nuestra pantalla de mantenimiento del ejercicio anterior, y nuestro browser nos muestra mensajes de problemas de conexion a la base de datos o conexion a MySQL, pues debemos revisar con mas detalle si nuestra tabla usuarios ha sido correctamente creada y definida, y si los datos de acceso registrados en ella son a su vez tambien correctamente ingresados...

Detalle del Modulo.

Al revisar los archivos desempaquetados de nuestro Material de Apoyo encontraremos los siguientes archivos:

Readme.txt, donde encontraremos informacion respecto a este tutorial y los foros que nos sirvieron de apoyo y referencia para desarrollar este ejercicio.
pdts_usa.sql, archivo tipo texto en formato de lenguaje SQL con que se crearon las tablas presidents y parties de nuestra base de datos tutorial (la ponemos de referencia, pues como indicamos antes, nuetra tabla de usuarios requerida para este ejercicio deberá ser creada directamente con PHPMyAdmin o DBManager de nuestro servidor MySQL).
database.php, archivo de tipo texto en formato de lenguaje PHP con el cual actua del lado del servidor para interactuar con nuestra base de datos, en ella hemos comentado las partes que corresponden a la carga de datos de acceso a nuestra base de datos, así como las funciones correspondiente a cada caso como es la actualizacion, creación, borrado, busqueda e impresion de nuestra data; las formas de este codigo puede ser facilmente comprendido y ajustado anuestros desarrollos propios.
Se presenta asimismo las funciones getlist() y getparties() que son las ejecutan nuestras consultas de las tablas MySQL, habiendose comentado las adiciones efectuadas por el caso de efectuar "Conteo de Paginas" y "Busquedas rapidas".
Se presenta asimismo a las funciones JEncode y codeDate, la primera para llamar a las funciones standard de codificacion del formato Json, y la segunda para el tratamiento de los campos tipo fecha al formato mm/dd/yyyy empleado en el GridEditor de presidentes de nuestro ejercicio..
JSON.php, archivo de tipo texto en formato PHP que es una libreria clasica de PHP para el manejo del formato JSON con el que se trabaja las base de datos y tablas de MySQL (y que siempre debemos utilizar en nuestros proyectos que trabajemos con MySQL)
Index.php, archivo de tipo texto en formato PHP, HTML y Javascript debidamente etiquetados por cada grupo de codificación. Este archivo es de ejecución automatica y en ella se define nuestra pantalla de acceso al Modulo, y la correspondiente consulta a nuestra tabla de usuarios respecto a que si los datos ingresados (nombre y password), son correctos y corresponden a los registrados en nuestra tabla usuarios, lo que permitira el acceso a nuestro GridEditor de presidentes.

Las instrucciones de contacto vía mail y redireccionamiento a nuestra Fan Page Facebook son detallados en nuestro post referido a técnicas de Localización e Internacionalizacion. (y próximamente a este codelab le agregaremos también la técnica de traduccion automatiza del API Language de Google, conforme al lenguaje de nuestro navegador, para completar el manejo del referido tema).
Grid-PHP-MySQL.php, en formato PHP y HTML en donde la parte PHP del mismo realiza el control de acceso a nuestra aplicación (para evitar los "accesos" directos sin haber utilizado el Wizard), y asimismo, la parte HTML indica las directivas de inicio de nuestro ejercicio para la importacion de las librerias de ExtJS y las de nuestro ejercicio.
presidentslist.html, archivo en formato HTML que nos muestra una Tabla, la cual se genera al ejecutar la opcion impresion de nuestro ejercicio: luego en las instrucciones de nuestro archivo database.php podrá observar la técnica de como se manda a imprimir dicho documento.
mainscript.js, archivo en formato ExtJs debidamente empaquetado utilizando namespace, que nos muestra las funciones e instrucciones ExtJs que permiten el funcionamiento de las opciones de Actualizacion, Creacion, Modificacion, Consulta, Impresion y Busqueda, entre otras opciones, de nuestra aplicacion de mantenimiento (no varia del codelab anterior).
searchfield.js, archivo en formato ExtJs que exclusivamente contiene las funciones que nos muestran el recuadro de Busqueda Rapida de nuestro codelab anterioir (no varía).
style.css, archivo en formato CSS que permite la llamada a las imagenes que utilizaremos en los botones de acceso a las opciones de nuestro ejercicio mostradas en la barra superior de nuestra ventana (toolbar) de nuestra aplicacion de mantenimiento (no varía del codelab anterior).
carpetas icons e images, la primera contiene el icons mostrado en la pestaña de nuestro navegador; y el segundo, las imagenes jpg personales utilizadas en el ejercicio y los dos estilos de celdas que hemos presentado en este caso para mejorar la presentación de las celdas del Grid. No varía del codelab anterior.

APUNTES TECNICOS

Si ya han probado con exito nuestro pantalla de acceso a nuestro modelo básico de mantenimiento de Tablas, al revisar los archivos del ejercicio debe tenerse presente lo siguiente :

Si revisan el codigo de Index.php observarán que como herramienta de "control" de nuestros accesos utilizamos las "cookies", en la cual grabamos la informacion necesaria para verificar que nuestro usuario ha utilizado el Wizard de acceso de nuestro ejercicio; reiteramos que este se trata de un modelo basico y que en este caso solo pregunta si nuestra cookie del nombre esta vacia, y por supuesto que nuestra logica de verificacion puede y debe ser mejorado (como adicionando la verificacion de nuestro usuario y password de acceso, o verificando y poniendo un limite al tiempo trascurrido desde nuestra ultima operacion para evitar que las cookies grabadas en nuestros ordenadores y no borradas al salir cerrando nuestro navegador pues sean mal utilizadas, entre otros posibles casos).
Si hemos salido correctamente de nuestro modelo de mantenimiento, y digitasemos en la barra de direcciones nuestro navegador la direccion exacta de nuestro modelo http://localhost/tutorial/Wizard-samples/Grid-PHP-MySQL.php para nuestro caso, nos remitirá a nuestra pantalla de acceso (porque las cookies estan vacias), de ingresar al modulo es porque las cookies no han sido borradas al salir directamente al cerrar el browser.
Nuestro modelo nos muestra que podemos utilzar todas las cookies que querramos y asimismo, que nuestros passwords, como cualquier otro dato, pueden ser encriptados y desencriptados con el objeto que terceros no "vean" y utilicen indebidamente nuestros datos utilizando para ello las instrucciones:
$pwd = base64_encode($pwd); // en index.php
$my_pwd = base64_decode($pwd); // en database.php
Resulta interesante asimismo, observar con la opcion "Inspeccionar Elemento" del navegador Google Chrome (opcion del boton derecho del mouse sobre nuestra pantalla del browser), y con el Firebug de Mozila Firefox (que debe ser instalado como un plug-in de dicho navegador, y es el utilizado en los videos tutoriales del Quizzpot), pues que los recursos de nuestras paginas web (la pantalla de acceso y la de nuestra pantalla de mantenimiento para este codelab) no nuestran los codigos PHP en la parte "cliente" de nuestros navegadores (revise opcion recursos de nuestra pagina web al Inspeccionar elemento con Google Chrome o Firebug de Firefox, cuando esten cargadas), y con esto nos estamos asegurando que los datos de informacion de acceso a nuestro servidor HTTP no se muestran a los usuarios (refiriendonos a los que hemos escritos al inicio de index.php), pero sería mas interesante que efectuesemos nuevas pruebas con capturadores de paginas web (con herramientas como HTTrack, WebRipper o el mismo Dreamweaver, entre otros), para que observemos que archivos y que informacion pueden bajar y utilizar terceros no autorizados por nosotros.
Con la misma herramienta podemos revisar las cookies de nuestro modelo y verificar que nuestras contraseñas se encuentran encriptadas y no disponibles para terceros, quedando pendiente revisar diversas tecnicas de encriptacion disponibles para dicha función, así como otras opciones del propio PHP.(como el uso de sesiones, que son como las cookies pero por el lado del servidor y totalmente invisibles a los usuarios o clientes).
Cabe resaltar asimismo que este modelo de codificacion no es muy recomendada por no mantener el criterio de separar nuestras validaciones (archivos PHP) de nuestros form (HTML y Javascript), o seguir un modelo de desarrollo MVC (Models, Views, Controlers), que en desarrollos grandes nos facilitarían bastante el desarrollo por componentes trabajando en equipo, mejorando así la comprensión y mantenimiento de los mismos; pero este modelo que presentamos es muy practico y nos permite comprender espero facilmente toda la logica planteada con muy pocos archivos, y por eso nuestra elección para utilizarlo en este codelab.
Ponemos a su consideración las siguientes direcciones:

1. Pagina del foro de www.cristalab.com que sirvió de base para este modelo, entrada antigua pero que aun mantiene vigencia y que en sus comentarios muestra enlaces a temas de seguridad muy importantes (agradecimiento a azelito, usuario de dicho foro).
2. Pagina de Blogdephp.com que nos muestra un login a MySQL empleando empleando el modelo MVC, y que utiliza el framework codeigniter para PHP (que es bastante utilizado comercialmente), y cuya presentacion en el foro de Cristalab.fue motivo de comentarios apasionados pero interesantes que finalmente nos pueden ayudar a mejorar nuestros codigos.
3. ..y no olvidemos revisar las opciones de manejo de las cookies y de las sesiones en PHP, que sin dudar son interesantes para mejorar la seguridad de nuestras desarrollos y proyectos.

Espero que estos dos últimos codelab de introduccion al manejo del entorno del Back-End PHP-MySQL sea suficiente para completar y entender su forma básica de funcionamiento, y nos animemos a hacer nuestras propias investigaciones y pruebas sobre este entorno de uso tan difundido.. especialmente ahora que los servicios de Hosting PHP+MySQL externos se muestran tan accesibles a nivel de costos (..desde US$20.00 anuales), e ilimitados respecto a los tamaños, velocidad y nivel de transferencia de datos que nos proporcionan, vale decir, que nos permitirían llevar todos nuestros requerimientos de base de datos y aplicativos a la web (cloud computing)

Saludos
@Mlaynes

Opina en nuestro foro §FB..!

Using the Back-End PHP+MySQL ( Getting Started )

2011-03-09T00:55:00.000-05:00

Recuerde que..

y bueno amigos, ya estamos en el momento en que debemos empezar a experimentar con el Back-End PHP-MySQL (que viene integrado y listo para utilizar con AppServ u otras herramientas similares que tenga integrado un servidor Apache con PHP y la Base de Datos MySQL).

Recordemos que al instalar AppServ, e ingresar con nuestro navegador a http://localhost, nuestro navegador nos muestra una pantalla de Bienvenida que entre otros enlaces, nos permite ingresar a PHPMyAdmin, y al enlace de Configuracion de nuestro servicio PHP instalado en nuestro servidor de pruebas (todo ya viene integrado al servidor Apache), ..y ahora es el momento de empezar a comprenderlos y utilizarlos.. para lo cual debemos tener en cuenta lo indicado a continuacion:

Para ingresar a PHPMyAdmin usualmente el usuario de ingreso es "root", y la clave de acceso corresponde a la clave que utilizamos al instalar AppServ (si no pusimos clave alguna, nuestra clave de acceso sera una cadena vacia). Alli debemos a experimentar para crear nuestras propias bases de datos y tablas, y a practicar nuestro lenguaje SQL.
Si no recuerda su clave de phpMyAdmin (que realmente es de MySQL), puede utilizar las opciones Reset MySQL Root Password y MySQL Command Line Client, ambas en la opcion Appserv de Menu Inicio (Windows); la primera es para registrar un nuevo password para MySQL, y la segunda para verificar rápidamente si la clave es correcta (realmente me resulta mas conveniente trabajar MySQL con phpMyAdmin o DBManager, y no directamente desde la linea de comandos, esto especialmente si trabajamos con otros servidores de aplicaciones como Tomcat o GlassFish)
La configuracion por defecto de PHP de los servidores locales AppServ y otros, es que los archivos "index" con extension "php" y "html" sean de ejecucion automatica; pero esto a veces no es así, y cuando trabajamos con servidores o hosting externos (como con www.x10hosting.com por ejemplo), donde a veces solo los archivos index.php son de ejecucion automatica, pero esto no debe incomodarnos, por cuanto esa opcion es configurable (a traves del enlace de configuracion de PHP, que es bastante complejo pero con ayuda de algunos tutoriales puestos en la web -y que algunos indicamos en nuestro post empezando desde cero- pues, ya podemos ir cambiando algunas cosas, pero si no podemos asi, pues tampoco nos preocupemos, puesto que PHP esta integrado a los lenguajes scripting instalados en nuestro servidor, y a HTML por supuesto; entonces, basta que renombremos nuestro archivo index.html por index.php ..y listo.. esto ocurre por cuanto el compilador PHP reconocerá las etiquetas html y aun siendo un archivo "php", sencillamente ejecutara html ...interesante no?
...y ahora empezaremos a manejar hasta 03 lenguajes en forma simultanea y interrelacionada: HTML, PHP y Javascript (ExtJs es una libreria Javascript). PHP nos permitira trabajar del lado del servidor (principalmente a conectarnos y trabajar con nuestras bases de datos, aunque todo lo podriamos hacer con PHP si quisieramos); y luego con HTML y Javascript -y con la importante ayuda de ExtJs- nos manejaremos nuestras pantallas y presentaciones de nuestro navegador, en la que interactuaran nuestros usuarios..
Este manejo de lenguajes que ahora se ha convertido en lo basico en lo que corresponde al mundo de desarrollo Web, esta siendo revolucionado con el ingreso de Javascript al lado del servidor (con node.js y el motor de desarrollo V8, cuyo perfomance y versatibilidad son realmente sorprendentes.. asi que anímense y continuen con la investigacion y desarrollo de estos lenguajes que serán muy importantes en el futuro.

Con que contamos en estos momentos?

Si siguieron el desarrollo de los codelabs desde el inicio, ya deben tener instalado su servidor de pruebas Apache+PHP+MySQL, y PHPMyAdmin (para administrar nuestras bases de datos), por lo que solo basta que verifiquen que tengan completo acceso a MySQL a través de PHPMyAdmin -pruebe con crear alguna base de datos de prueba y algunas tablas para que verifiquen su funcionamiento, asi como hacer algunas consultas SQL de prueba.. si ese es el caso, ya estamos listos para empezar nuestro codelab.

Audiencia

Se recomienda que, para entender este codelab, tengamos los suficientes conocimientos de ExtJs y desarrollo Web (HTML, 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: 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 en este caso no se emplean pero si se hacen referencia en este tutorial.

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

Grid-PHP-MySQL.rar, Descomprimir este material de apoyo en la carpeta "www" de nuestro servidor local AppServ u otro compatible Apache-PHP-MySQL, y se creara la carpeta "Grid-PHP-MySQL" (si no entiende este paso favor consulte "empezando desde cero'). Con éste código debemos verificar que la configuración de las rutas de importación del framework ExtJs sea correctamente efectuada a nuestra ubicación y versión del framework ExtJs que utilicemos (recomendado cualquier versión ExtJs-3.x, éste código no soporta la versión ExtJs4).

Grid-PHP-MySQL.rar ( 2.4Mb ), Este código corresponde al material de apoyo utilizado para instalar el presente codelab pero en la plataforma de Desarrollo WebMatrix (conviene que la descarguemos en una carpeta llamada WebMatrix para diferenciarla del código anterior). El resultado de éste código es una versión mejorada del material presentado primero, y 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/Grid-PHP-MySQL", pero en este caso, si deben tenerse en cuenta las instrucciones para la configuración de nuestra base de datos "tutorial" (empleada en este codelab), y el archivo pdtes_usa.sql adicinado en este segundo código contiene además a la tabla "usuarios" que en el detalle del codelab habíamos propuesto que se creara "manualmente" como una manera de familiarizarnos con el manejo de la herramienta phpMyAdmin que viene instalado en el servidor Appserv.

NOTA : Entre las mejoras planteadas en el segundo código, cabe resaltar que ahora todos nuestros combobox empleados para seleccionar los partidos políticos son "dinámicos" (conectados a los datos de nuestra tabla "parties" de la base de datos "tutorial"), con ello logramos que, si se efectuase alguna modificación en esta tabla - agregar un partido político ó modificar su nombre por ejemplo - estos cambios se verán reflejados en los combobox que lo requieran...

Pasos para ejecutar el Codelab...

Para ejecutar el tutorial debemos primero realizar lo siguiente:

Crear nuestra base de Datos: utilizando PHPMyAdmin debemos crear la base de datos "tutorial" (asi es el nombre que le hemos dado en nuestro ejercicio, si utiliza otro nombre debera recordarlo y registrarlo en nuestro archivo php que nos comunica a nuestra base de datos.
Para crear la base de datos se debe ingresar a MySQL con PHPMyAdmin, y en su primera pantalla seleccionar la opcion correspondiente, digitar el nombre de nuestra base de datos, y elegir el boton "Crear"..y listo, ..nuestra base de datos será creada y su nombre aparecerá en la lista situada al lado izquierdo. ...luego debemos ingresar a nuestra base de datos creada y seleccionar la lengueta "Importar", alli hay una opcion para seleccionar nuestro archivo bajo formato sql, la cual debemos buscar en la carpeta "Grid-PHP-MySQL" desempaquetada de www, el nombre de nuestro archivo es "pdts_usa.sql" y corresponde a una tabla con la relacion de presidentes de los Estados Unidos de Norteamerica (tabla presidents), y de partidos politicos (tabla parties), con la realizaremos opciones alta, baja, modificacion, consulta e impresion...
Con nuestro explorador debemos ingresar a la carpeta "Grid-PHP-MySQL" creada en la carpeta www del Appserv, y alli "editar" el archivo "database.php". Este archivo en sus primeras lineas tiene en su inicio las intrucciones de conexion a nuestra base de datos:

// This will connect us to our database...
mysql_connect("localhost", "root", "myPassword") or
die("Could not connect: " . mysql_error());
mysql_select_db("tutorial");

En ella debemos modificar los parametros root (si nuestro usuario de ingreso no es root sino otro personalizado, y poner nuestro Password de conexion a MySQL (el que utilizamos en PHPMyAdmin), asimismo poner en la clausula mysql_select_db el nombre nuestra base de datos, si no corresponde a "tutorial" como se indica. Si nuestra prueba la realizamos directamente en un servidor externo como www.x10hosting.com con dominio propio, entonces en lugar de localhost debemos colocar nuestra direccion web correspondiente: www.mydominio.com

..y ya estamos listo para ejecuatr nuestro ejercicio...!

Ahora, si con nuestro navegador ingresamos a "localhost", y luego al ingresamos a la carpeta "Grid-PHP-MySQL" ( o donde quiera hayamos descargado el material de apoyo dentro "www" de AppServ ); pues al ingresar esta carpeta, que contiene a nuestro archivo "index.html" en este caso, deberá aparecer una pantalla como la que se muestra a continuación:

Esto nos indica que nuestra descarga y copia ha sido correcta, y ya estamos listos para revisar el material de apoyo descargado y descubrir como hemos efectuado nuestro conexion a MySQL utilizando PHP, HTML y Javascript para trabajar con ella funciones basicas de mantenimiento de Tablas como Ingreso, Modificación Eliminación, Consulta, Impresion, Busquedas, etc, bajo un formato clasico.

Nota.- si no aparece la pagina mostrada es probable que no hayamos descargado nuestra version completa o "liviana"de 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 vigente al 01/03/2011). Observe la ruta rerlativa a www que utilizamos para acceder dichos archivos "../../extjs/extjs-3.1.1" en este caso (que indica 2 carpetas sobre nuestra descarga del tutorial). Efectúe los cambios de la ruta necesarios en el archivo index.html del tutorial y pruebe nuevamente hasta que aparezca la ventana con nuestro Grid como indica la figura (haga click sobre esa figura, y se dirigirá a una pantalla de prueba indicada en el propio tutorial de la pagina oficial de ExtJs, aunque reiteramos que, debemos hacer nuestras pruebas sobre nuestro servidor local ( htpp://localhost ), pues en este caso nuestro código es una version mejorada de la mostrada en dicho tutorial...

Y en caso que aparezca el Grid, pero sin "data", entonces lo que debemos revisar es nuestra configuración a la base de datos "tutorial" que debimos haber creado con phpMyAdmin en nuestro servidor Appserv (el nombre de nuestro usuario de acceso a MySQL, el password, el nombre de la base de datos, etc.)

Detalle del Modulo.

1. Al revisar los archivos desempaquetados de nuestro Material de Apoyo encontraremos los siguientes archivos:

Readme.txt, donde encontraremos informacion respecto a este tutorial en la pagina web oficial de ExtJs, por cuanto este ejercicio ha sido bajado y adaptado de allí; teniendo como principal mejora que ahora estamos trabajando con "stores" tanto para la base de datos de presidentes, como con la de partidos (vale decir que si corregimos en la Base de Datos el nombre de un partido esto debe verse reflejado en los "combobox" utilizados, no ocurria asi en el tutorial original donde el store de partidos es un dataarray "local" y estatico; asimismo se ha corregido algunos errores para que el ejercicio trabaje bien en todas sus opciones (en especial en el grabado del nombre del partido de cada presidente, donde el combobox del Grideditor no trabajaba bien por un error simple: en el tutorial original: se indicaba como PartyValue del combobox a PartryID en vez de PartyName, pero si revisa la logica de la funcion updatePresident() de database.php, observará que para encontrar un registro se utiliza el nombre del partidoy no su codigo o ID..).. pero en general este tutorial ExtJs esta muy bien explicado, por lo que para consultas detalladas de todo el desarrollo del mismo paso a paso, pues puede tambien seguir y revisar el enlace indicado.
pdts_usa.sql, archivo tipo texto en formato de lenguaje SQL con el, una vez creada nuestra base de datos tutorial, se crearan las tablas presidents y parties, y la data correspondiente para iniciar el ejercicio.
database.php, archivo de tipo texto en formato de lenguaje PHP con el cual actua del lado del servidor para interactuar con nuestra base de datos, en ella hemos comentado las partes que corresponden a cada caso: modo de Conexion inicial y funciones de actualizacion, creación, borrado, busqueda e impresion de nuestra data; las formas de este codigo pueden ser facilmente comprendido y ajustado anuestros desarrollos propios.
Se presenta asimismo las funciones getlist() y getparties() que son las ejecutan nuestras consultas de las tablas MySQL, habiendose comentado las adiciones efectuadas por el caso de efectuar "Conteo de Paginas" y "Busquedas rapidas".
Se presenta asimismo a las funciones JEncode y codeDate, la primera para llamar a las funciones standard de codificacion del formato Json, y la segunda para el tratamiento de los campos tipo fecha.
JSON.php, archivo de tipo texto en formato PHP que es una libreria clasica de PHP para el manejo del formato JSON con el que se trabaja las base de datos y tablas de MySQL (y que siempre debemos utilizar en nuestros proyectos que trabajemos con MySQL)
Index.html, archivo de tipo texto en formato HTML de ejecucion automatica donde se encuentran las directivas de inicio de nuestro ejercicio para la importacion de las librerias de ExtJS y las de nuestro ejercicio.
presidentslist.html, archivo en formato HTML que nos muestra una Tabla, la cual se genera al ejecutar la opcion impresion de nuestro ejercicio: luego en las instrucciones PHP correspondientes podrá observar como se manda a imprimir dicho documento.
mainscript.js, archivo en formato ExtJs debidamente empaquetado utilizando namespace, que nos muestra las funciones e instrucciones ExtJs que permiten el funcionamiento de las opciones de Actualizacion, Creacion, Modificacion, Consulta, Impresion y Busqueda, entre otras opciones, de nuestro tutorial.
searchfield.js, archivo en formato ExtJs que exclusivamente contiene las funciones que nos muestran el recuadro de Busqueda Rapida del ejercicio.
style.css, archivo en formato CSS que permite la llamada a las imagenes que utilizaremos en los botones de acceso a las opciones de nuestro ejercicio mostradas en la barra superior de nuestra ventana (toolbar).
carpetas icons e images, la primera contiene el icons mostrado en la pestaña de nuestro navegador; y el segundo, las imagenes jpg personales utilizadas en el ejercicio y los dos estilos de celdas que hemos presentado en este caso para mejorar la presentación de las celdas del Grid...

APUNTES TECNICOS

Si ya han probado todas las opciones de nuestro modelo de mantenimiento de Tablas, al revisar el Codigo debe tenerse presente los siguientes puntos:

Si revisan el codigo de mainscript.js notarán que, la codificación del form de busqueda, en el combobox de partidos, mantiene una estructura estatica y de carga "local" a partir de un simplestore que carga un array con los ID y nombre de los partidos. Vale como ejercicio que recodifiquen dicho combobox con el store de partidos ya creado (al modo de como se ha efectuado en el combobox del grideditor de presidentes), para que el ejemplo sea mas real, es decir, que si efectua una modificacion de algun dato de la Tabla de Partidos (como cambiar el nombre), entonces "dinamicamente" los cambios se vean reflejados al cargar los combobox.
En el grideditor de presidentes podrán observar que algunas columnas pueden estar definidas pero no mostrarse mediante las clausulas hidden:false o hidden:true, como es el caso del IDparty. Y Este es un apunte que debemos tener muy en cuenta especialmente al trabajar tablas cuya ID a veces no queremos mostrar en nuestra pantalla, como si quisieramos que no se muestre el ID de los presidentes en nuestro ejemplo; en estos casos, casi como norma, resulta imprescindible definir como primera columna de nuestros Grids el ID de nuestras tablas, por cuanto si observan con detalle la codificacion de Actualizacion de Datos en database.php, la logica de ubicación de nuestros registros se basa en un "Where" que utiliza al ID para especificar el registro...
Cabe resaltar asimismo, que los ID de nuestras tablas en nuestra base de datos (MySQL en este caso), son por defecto definidas con tipo de datos INT, modalidad "auto_increment" y del tipo "primaryKey"; es decir, que corresponden a los campos con los usualmente efectuaremos "relaciones" con otras tablas (como es nuestro caso de la Tabla Partidos con la de Presidentes).

Espero que este Codelab de introduccion al entorno del Back-End Apache, PHP, MySQL sea suficiente para entender el esquema de su funcionamiento, y nos animemos a efectuar nuestras propias pruebas, y en el como siempre, les entregamos modelos de codificación, librerias y herramientas muy utiles para el desarrollo de casos reales; en lo que corresponde a nosotros, nos comprometemos a la brevedad a desarrollar otro ejercicio que contenga un Wizard para el control de acceso a nuestras aplicaciones, y siguiendo la línea de los ejercicios anteriores nos Integremo a Google, empleando por el momento visualizaciones (pero que bien podriamos utilizar otras API como Google Language que utilizamos en todas las paginas de este Blog); pero al respecto cabe indicar que el proceso indicado de utilizar visualizaciones Google esta practicamente solucionado, por cuantro al ya tener nuestra "data" cargadas en "stores" entonces, ya es posible utilizar nuestras extensiones ya desarrolladas en nuestros post Integracion a Google 1ra y 2da parte".>

Saludos
@Mlaynes

Opina en nuestro foro §FB..!

Google Gadgets

2010-06-01T01:06:00.000-05:00

Recuerde que..

En términos generales, Los gadgets de Google son objetos o aplicaciones en miniatura desarrollados para ofrecer contenidos dinámicos que pueden ser ubicados en cualquier lugar de cualquier página web. Los Gadgets pueden ser muy útiles para su uso en el trabajo (como lista de tareas, conversor de monedas, calendario), en la escuela (calculadora, Wikipedia, herramientas de traducción), o simplemente pasar el tiempo (noticias, blogs, juegos).

El término gadget (o widget), también se ha dado a una nueva categoría de mini aplicaciones, diseñadas para proveer de información o mejorar una aplicación o servicios de un ordenador o computadora, o bien cualquier tipo de interacción a través de Internet, por ejemplo una extensión de alguna aplicación de negocios, que nos provea información en tiempo real del estatus del negocio u organización.

Un ejemplo de gadgets en una computadora serían los gadgets del Dashboard de Apple sobre Mac OS X Leopard, o los de la barra lateral de Windows, que viene incluida en el nuevo sistema operativo de Microsoft: Windows 7 y Microsoft: Windows Vista; y por supuesto, los Gadgets de Google, que pueden ser instalados en iGoogle, Google Desktop o en cualquier pagina Web que desarrollemos.
(fuente: Wikipedia)

Los Gadgets de Google son en especifico aplicaciones desarrolladas en XML, HTML y JavaScript, en donde un archivo XML es el contenedor de la aplicación (y en el se describe datos estructurados que tanto los programadores y las computadoras podrán leer y ejecutar), y que soporta instrucciones HTML para dar formato al espacio de la pagina web utilizado por el gadget, y como ya conocemos en el estandard opensource, también permite que nuestro código HTML soporte Javascript, que es un lenguaje de comandos que utilizamos para añadir comportamientos dinámicos a nuestras paginas y desarrollos web.

En resumen entonces, desarrollar Gadgets es muy similar a desarrollar paginas web, y de hecho debe resultar mas sencillo, pues en este caso se trata de objetos o aplicaciones especificas que luego ubicaremos adecuadamente en nuestras paginas web... pero en el cual debemos poner especial cuidado en las sintaxis y opciones que nos proporciona el contenedor XML, el cual también podrá interactuar con nuestros códigos HTML y Javascript.

Como una practica de aprender a utilizar y desarrollar los gadgets de Google, recomedamos seguir paso por paso los avances del Tutorial de Seoish, el cual presenta las siguientes ventajas:

Nos alecciona para trabajar con iGoogle, y nos explica paso por paso como ir preparando la pagina inclusive para desarrollar y probar en ella misma nuestros Gadgets utilizando nuestra cuenta Google (y ya hemos reiterado que, con dicha cuenta podemos utilizar los múltiples servicios que Google nos brinda, como GMail, YouTube, Google Docs, App Engine, Albumnes de Picasa, Blogger, Google Maps, Google Earth, etc. entre los que podemos haber usado siguiendo los casos propuestos por nuestros códigos hasta la fecha).
Tambien nos explica al detalle como usar el Google Gadget Editor (GGE), e inclusive nos indica algunas peculiaridades del editor que debemos superar (lean con detalle los comentarios, asi como el manejo del caché de Google).
Asimismo, nos explica las partes del código Gadget (XML), y como se utilizan con un caso practico (Hello World e il Tiger).
Detalla como utilizar los tipos de contenidos actuales de XML para Gadgets: HTML y URL (ejemplo Big Brother 9 - Live Cams), y a ver a los Gadgets como mini-webs, así como a ver a todas las aplicaciones web como Gadgets.

Y continuando con nuestra secuencia de casos para utilizar Google Spreadsheets como fuente de datos, les alcanzo el código de un Gadgets para "consultar" utilizando visualizaciones Google, en un formato mas adecuado para los tamaño de algunos Gadgets (pero que debemos ajustar para casos específicos dependiendo como los presentemos en iGoogle o en nuestras webs)
):

IG_Productos.rar, que nos muestra una Visualización tipo Tabla de nuestro documento "Spreadsheet Productos": los productos y su fecha de venta.

IG_Clientes.xml, que nos muestra Visualizaciones tipo Tabla y PieChart de nuestro documento "Spreadsheet Productos": nuestros clientes, monto de venta, cantidad de productos vendidos y monto cobrado...

Web 2.0: Los negocios y las redes sociales.

2010-05-15T18:08:00.000-05:00

Recuerde que..

En este post vamos a comentar un poco sobre el concepto de Web2.0, y que representa el uso de las redes sociales para los negocios...

El termino Web 2.0 (vigente desde el año 2003) está comúnmente asociado con un fenómeno social, basado en la interacción que se logra a partir de diferentes aplicaciones web, que facilitan el compartir información, la interoperatividad, el diseño centrado en el usuario y la colaboración a través de Internet. Ejemplos de la Web 2.0 son las comunidades web, los servicios web, las aplicaciones Web, los servicios de red social, los servicios de alojamiento de videos, las wikis, blogs, mashups y folcsonomías. Un sitio Web 2.0 permite a sus usuarios interactuar con otros usuarios o cambiar contenido del sitio web, en contraste a sitios web no-interactivos donde los usuarios se limitan a la visualización pasiva de información que se les proporciona.
(fuente: wikipedia)

Bajo estos conceptos, una aplicación nativa del concepto de Web2.0 aplicada a los negocios serían las campañas de mercadeo y publicidad con la participación de los mismos "clientes" o "consumidores" de nuestros productos o servicios, pero debe considerarse que, también se le puede utilizar con bastante acierto dentro del campo motivacional, de instrucción y capacitación, y para el seguimiento de "casos" ó temas específicos, tanto en forma "pública" (toda la red), como a nivel "intranet", dentro de una organización, con los empleados y colaboradores de dicha organización o empresa, entre otras aplicaciones.

Ya centrándonos en lo que respecta los negocios, el principal empleo del concepto Web2.0 se orienta principalmente, como ya hemos indicado, en el campo de la publicidad y mercadeo, pero resulta conveniente considerar los siguientes aspectos:

primero, debe tenerse en cuenta el uso combinado en forma armoniosa de elementos tipo Blog (como Blogger, WordExpress o Ning por ejemplo), con herramientas ma "ligeras" pero de uso muy difundido y vigentes.. como Facebook y Twitter, así como de otras redes sociales que puedan tener importancia y aceptación en nuestro medio local como Yahoo, Sonico, Netlog, etc.; pues juntos van a constituir nuestra manera "corporativa" de penetración social a los mercados y "nichos" donde tengamos presencia ó queramos incursionar, el cual ha de transformarse en nuestro "comunidad social". Cada uno de estos elementos que utilicemos tiene un objeto distinto: así podemos utilizar Blogger para contactar directamente a nuestros clientes y profundizar una idea, producto, concepto ó servicio con nuestros "usuarios consumidores"; ó Facebook para difundir lo mismo, pero de manera "global" (tratando de aprovechar su cartera de casi mil millones de usuarios), y todo ello de una manera sumamente atractiva y sugestiva; y por supuesto, utilizar Twitter para "perifonearlas" y causar el efecto "virulencia"; y prácticamente creo que, con todas estas herramientas, todas gratuitas en lo que concierne a su uso estándar (pues existen servicios de pago como son los Avisos de Facebook o Google Adwords); son más que suficientes para iniciar verdaderas campañas de mercadeo tanto para pequeñas y medianos negocios, pues considérese que las grandes compañías ya buen tiempo las vienen empleando... y revisando algunas experiencias al respecto, podemos observar que el "elegante" y muy vigente formato de Facebook, la facilidad de difusión de mensajes a través de Twitter y los contactos personales que podamos desarrollar a través de nuestros Blogs, bien podría hacer prácticamente innecesario el desarrollo de paginas web propias, excepto que por temas de seguridad se llegue al e-commerce o manejo de información que requiera discreción como manejo de pagos, claves de acceso, ó información técnica ó sensible de nuestros productos, servicios o del negocio.

segundo, debe tenerse presente que si consideramos utilizar un mercadeo social, pues este debe ser monitoreado de forma permanente manteniendo un adecuado nivel de comunicación y respuesta con nuestros usuarios, seguidores y clientes, pues si lo dejamos para "cuando tengamos tiempo", los usuarios y seguidores de nuestro servicio web rápidamente van a notarlo, y por supuesto, dejar de seguir nuestros "servicios sociales". Interesante la idea del empleado de mostrador que muchas veces dispone de mucho tiempo "no productivo" para nuestros negocios.. a quienes podríamos recurrir previa capacitación respecto a los objetivos de nuestro negocio, y de "modales sociales", pues debe mantenerse un estilo de comunicación y respuesta que pueda identificarnos; asimismo, debe tenerse presente los conceptos de Asistencia Virtual y tele-trabajo, mediante el cual podemos recurrir a servicios de terceros que podrían asesorarnos y ayudarnos a definir el perfil social de nuestro negocio, diseñar las formas de interrelación de las redes sociales que utilicemos, y además, dedicarse a revisar y responder las múltiples entradas y comentarios de nuestros usuarios, clientes y seguidores, e informar directamente a los encargados de la dirección del negocio respecto a los resultados tangibles de nuestra red de mercadeo social.

tercero, reiterar que si nuestra empresa o negocio va a utilizar bondades de los servicios Web2.0 resulta necesario definir y establecer un formato ó modelo "propio" conveniente para cada caso, pensando inclusive hasta en la posibilidad de empleo de múltiples idiomas, pagos "on line", y servicios de entregas directas a domicilio... dependiendo en cada caso y por supuesto, de nuestros productos y/o servicios ofertados, aunque esto signifique muchas veces incluso cambiar y/o adecuar nuestros canales vigentes de comercialización

Otro plano es el control y manejo administrativo, Internet ya prácticamente nos ha demostrado que es bastante estable y que soporta sin mayor problema millones y millones de datos y de usuarios, y con niveles bastante aceptables de seguridad (dependiendo de los navegadores, herramientas y modo de desarrollo que utilicemos), pero su empleo a nivel administrativo contable, prácticamente es bastante escaso ,y su empleo es aún mayoritariamente a nivel de mercadeo, y por eso termino esta entrada indicando que necesariamente va a existir Web3.0, que es cuando no solo las aplicaciones sociales de las organizaciones, empresas y personas estén en la red.. sino cuando inclusive los aplicativos de organización, gestión y control administrativo también lo estén, aunque esto ya tienen nombre y apellido: "Cloud Computing" y "Grid Computing" (los enlaces indicados están escritos en español, pero recomendamos su lectura usando las diferentes opciones de lenguaje de wikipedia ó haciendo uso de su traductor de idiomas preferido)

UN CASO PRACTICO

Para redondear mejor la idea presentemos un caso practico que ya hemos planteado durante el desarrollo de nuestros codelabs:

Como Manejar y Controlar un Negocio "retail" de venta de productos Cosméticos, de Belleza, y otros Articulos diversos para el Hogar.

Planteado el caso vale destacar que nos conviene recurrir a las redes sociales para difundir nuestro negocio.. mejor aún si es posible utilizar dicha plataforma para facilitar nuestro manejo y control del negocio, y el cual básicamente debe centrarse en las siguientes operaciones:

Registrar y Controlar los pedidos ó solicitudes de nuestros clientes y usuarios..
Registrar y Controlar nuestras Compras.. para que podamos tener idea de lo que tenemos en stock, lo podamos ofertar.. y atender los pedidos de nuestros usuarios.
Registrar y Controlar nuestras Ventas y Cobranzas.. para que podamos tener idea de lo que cuanto hemos vendido, cobrado.. y por supuesto cuando tenemos por cobrar y a quienes..
y por supuesto, aprovechar las ventajas de la Web 2.0 para difundir y afiliar mas clientes a nuestro negocio, y por supuesto, hacer mas "moderno", ameno y fácil la interrelación con todos ellos... y por supuesto también, (porque no), pensar en eBusiness y eCommerce para facilitar el registro de pedidos, pagos, entre otras posibilidades..

Pues, todo lo descrito puede realizarse utilizando portales especializados (si desean recurrir por esta opción conviene que revisen proyectos tipo Magento, que incluso tiene su opción opensource), donde por supuesto, había que adquirir nuestro propio dominio (nuestro nombre ó dirección personalizada en Internet como minegocio.com, minegocio.net, minombre.pe, otronombre.us, denuevo.la, etc..como estimemos conveniente y no olvidando considerar el alcance y las posibilidades de nuestra organización o negocio), y esto ahora ya no es caro, desde US$10 al año; pero también sería necesario adquirir un servicio de hosting (que tampoco ya no es caro: desde US$10-15 dolares mensuales dependiendo mucho del tiempo de contrato de 1 o mas años); y por supuesto, el costo de desarrollo y personalización del portal, que nos puede costar de US$1,000 a $10,000, dependiendo del desarrollador que contratemos, y donde el costo principalmente dependerá, del tipo de gestión administrativa asociado a nuestro proyecto: solo compras con pago on-line adelantado, que es el más convencional; con pagos contra-entrega, con opción de créditos y cobranzas, inclusión de flujo y cierre de caja, con todo lo anterior, etc.

Pero debemos tener presente que existen maneras de reducir los precios y tiempos de desarrollo de nuestros proyectos recurriendo a las mismas redes sociales "convencionales" que ahora conocemos, y a otros desarrollos que ya están empezando a mostrar sus bondades, y nos referimos principalmente al empleo de la plataforma blogger de Google y las "fanpages" de Facebook, las que incluso dependiendo del menor o mayor grado de especialización de nuestro negocio o servicio, pues podrían incluso trabajar juntos (consideramos que el uso de blogs es para poder explicar temas de manera mas detallada de lo que podríamos hacer en las entradas que ofrece Facebook).

El caso es que trabajando con la plataforma blogger de Google tenemos acceso a "entradas" y "páginas" que podemos desarrollar utilizando HTML, CSS y Javascript de la misma forma convencional con que se desarrolla cualquier pagina Web, y utilizando algunos servicios sociales disponibles para dicha plataforma, como "Google Friend Connect" y la API Opensocial, pues podríamos identificar a cada uno de nuestros usuarios (y por supuesto a los administradores del negocio), a través de una "ID" única, lo que constituye la base para poder iniciar cualquier tipo de "sistema de gestión" en la web.

Lo mismo ocurre si trabajamos con Facebook, donde empleando el SDK Javascript y otros que se nos provee (el SDK para PHP como back-end por ejemplo), pues también podríamos identificar a todos nuestros usuarios y clientes empleando la "UID" de cada uno de ellos..

Ambas plataformas son "gratuitas" (e indican que siempre lo seguirán siendo), pero vale preguntarnos como poder asociar a estos entornos de desarrollo la gestión y control de nuestros proyectos.. y como indique al inicio de esta entrada, podríamos recurrir a proyectos eCommerce ya consolidados, pero en este caso, estos proyectos principalmente se instalan sobre servicios de hostings convencionales bajo plataforma LAMP ó WAMP (de Linux ó Windows + servidor Apache + base de datos MySQL + lenguaje PHP), y con una estructura de desarrollo ya establecida (y tal vez bastante complicada para usuarios o programadores promedio). ..vale entonces preguntarnos si sería posible comenzar con estos servicios sobre plataformas más "faciles", de uso más difundido y accesible para muchas personas, como son las "hojas de cálculo" ..y vale resaltar también, que esto es totalmente posible, utilizando los "formularios" y los servicios UI y GUI Builder de las App Script de Google, con la ventaja que su formatos nativo es "https", lo que le permite incluso ser incluidos dentro de las aplicaciones facebook como aplicaciones iframes externas, cuyo principal requisito desde octubre del 2011, es que los desarrollos que realicemos para ser incluidos dentro de Facebook, como URL ó servicios "canvas", deben contar una URL segura propia, por lo que si deseamos, que algunas páginas o desarrollos de nuestros servicios web alojados en un servicio de hosting externo, y bajo nuestro dominio, puedan ser "cargados" dentro de facebook, pues ese servicio de hosting debe proveernos URL seguras "https".. y no solo las convencionales "http".

Algo que vale también resaltar, es que la plataforma blogger de Google no provee URL seguras, por lo que no podríamos colocar "paginas" o desarrollos blogger dentro de Facebook.. pero tampoco es necesario recurrir a un servicio de hosting de "paga" que nos provea el servicio para poder incluir nuestros desarrollos dentro de Facebook.. pues por grata coincidencia y junto a todo el "enojoso" cambio de los estándares de programación de Facebook, y que desde el 01 de Junio del 2012 implica la deshabilitación definitiva del entorno de desarrollo FBML (de uso bastante popular y difundido actualmente en cientos de miles de "fanpages" en todo el mundo).. pues Facebook ahora también provee para el registro de sus aplicaciones, la opción de utilizar URL de hosting "gratuitos" (hasta cierta cuota bastante razonable).. y este es el caso de Heroku, que es una plataforma cloud para el desarrollo de aplicaciones basado en Git, que podemos utilizar en nuestras propias aplicaciones Facebook, que nos brinda la opción de selección de nuestro lenguaje de programación back-end favorito (Ruby, Python, NodeJS y PHP disponibles).. a lo que he podido probar que, PHP está bastante bueno, por cuanto, el SDK para PHPproveído por Facebook ya esta bastante probado, consolidado y estable.. y que incluso, al instalar nuestra propia aplicación "Heroku", se nos provee de una "plantilla de muestra" bastante entendible, que nos permite observar las posibilidades de desarrollo con el SDK del lenguaje que seleccionemos...

Y Aún cuando nuestro proyecto Integracion Google principalmente investiga y presenta codelabs y pruebas respecto a las herramientas y API de Google, no hemos resaltado las bondades de Google+ tanto como una plataforma social .2.0 sobria y elegante (que también permite la creación de paginas para instituciones, empresas, negocios, otros), y de mucho potencial especialmente por el manejo de streaming en lo que se conoce como Hangoust API, pero por el momento, aparte de sus plug-ins y REST API (para autenticación de cuentas Google desde sitios web externos), Google+ no provee aún de "canvas" donde podamos anexar desarrollos ó aplicaciones propias.. y que luego poder difundirla por la red social de Google+, lo que consideramos, constituye por el momento una clara ventaja de Facebook sobre el tema, pero que no dudamos que Google+, en plena evolución, y sobre todo, desarrollado sobre una plataforma más robusta, escalable y limpia que Facebook ..pues si será una opción muy interesante para el futuro.. no se, yo imagino que Google+ hasta podría asociar dominios propios a sus "fanpages" ó alguna otra sorpresa que no dudo será bastante importante en el mundo de las redes sociales..

CONCLUSIONES :

Podemos empezar con el desarrollo sobre "Hojas de Calculo" para gestionar y controlar pequeños y medianos negocios de manera menos compleja que desarrollando aplicaciones sobre bases de datos, y recurrir a los "formularios" e incluso a "Interface de Usuario" para facilitar el registro y el proceso de la data ingresada..
Podemos "insertar" esos desarrollos dentro plataformas Web 2.0 bastante populares como blogger o las "Fanpage" de Facebook, para facilitar el acceso de nuestros clientes y facilitar la gestión y administración de nuestros negocios (hasta pudiendo ingresar "data" desde equipos móviles), incluyendo el desarrollo de gadgets ó widgets de consulta de datos para facilitar nuestros procesos de ventas (para consultar nuestros stocks), y de cobranza (para consultar nuestros saldos por cobrar), y por supuesto finalmente consolidar y sumarizar la información disponible para monitorear los resultados de nuestra organización o negocio (utilidad, ratios, otros) los que por supuesto, también podríamos acceder incluso desde equipos móviles..
..realmente me ha impresionado el potencial de las "App Scripts" (en pleno proceso de evolución), pero vale también resaltar que estas opciones tienen un limite, ahora de 10,000 lineas, hasta 256 columnas, y un máximo de 400,000 celdas por tabla; que es una cuota importante (debiéndose programar cortes anuales, semestrales ó mensuales según la carga de nuestro proyecto), y aún cuando esta cuota pueda incrementarse, la realidad, es que esta es una herramienta apropiada para pequeños y medianos negocios (como hay varios cientos de miles de estos negocios por aquí en Perú, y Latinoamérica en general), pero para las empresas medianas que tengan aspiraciones de crecer, por supuesto pueden utilizar estas herramientas para iniciarse ó en temas específicos y/o complementarios, pero considero que para la gestión total de estos negocio, necesariamente los responsables y dueños de estos negocios necesariamente deben empezar a presupuestar, dentro de sus costos de operación y funcionamiento, a personal de Desarrollo y Soporte TI permanente, para enfocar sus respectivos casos y sus respectivas soluciones informáticas bajo parámetros mas convencionales (empleo de Base de Datos, y considerar un adecuado diseño y departamentalización de la organización o negocio, con la correspondiente automatización de procesos de las área críticas (producción, ventas, cobranzas, contabilidad), 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.

..y para finalizar, les presentamos algunas imágenes del proyecto planteado sobre Facebook, para lo que hemos creado una "fanpage" de Facebook, y desarrollado una aplicación "canvas" utilizando Heroku, la que hemos adicionado a una pestaña de nuestra fanpage utilizando la interface de Dialogos también proporcionado por Facebook, y en la cual, para todos los usuarios de nuestro servicio, les damos acceso a nuestras aplicaciones de presentación, promoción y compra de nuestros productos (como pantallas informativas o eCommerce si es el caso), y sólo para los administradores, acceder a las opciones de registro y consulta de las operaciones de nuestro negocio... todo ello, solo utilizando nuestra cuenta Facebook (todas las herramientas empleadas son free).. a lo que se debe considerar por supuesto, el tiempo que demore nuestro desarrollo ... un buen reto!

Esta en una "fanpage" de Facebook a la que le hemos agregado nuestra aplicación "Intranet" desarrollada utilizando la plataforma Cloud de Heroku

Esta es la pantalla principal de nuestra aplicación "montada" dentro de Facebook como un iframe "canvas"

Nuestra Aplicación e Registro de Datos desarrollada utilizando la GUI Builders de las App Scripts proporcionadas por las Hojas de Calculo de Google Docs

Esta es nuestro Registro de Egresos, una de las tablas de Google Docs que comprende el proyecto donde se graba lo registrado en la pantalla de Registro de Compras, Gastos y Otros Egresos anterior..

..y para la gestión de Ventas, Cobranzas y Otros Ingresos :

..como pueden observar en las imágenes mostradas, las "App Scripts" de Google nos permiten mantener nuestro de Registro de Información basica de nuestro negocio (Egresos e Ingresos), nuestro Flujo de Caja (en otra tabla de diseño adecuado), y el "Modelo" puede aun perfeccionarse incluyendo una manejo de Cuentas Corrientes (Cuentas por Cobrar, Cuentas por Pagar); vale decir, todos los requerimientos de nuestra organización ó negocio.

Para mayores detalles técnicos también pueden revisar nuestras entradas:

En las próximas entradas vamos a comentar mas respecto a estos conceptos que están muy asociados al mundo Google en general por cuanto, hacia ese concepto de desarrollo web de manejo total es hacia donde estamos apuntamdo...

NUESTRO PROYECTO: Community OAuth 2.0 & Business

Continuando con el desarrollo de nuestro caso practico, pero ampliado y considerando el uso del protocolo OAuth 2.0 empleado para la Autenticación y Autorización de acceso a los datos de los usuarios, protocolo que es utilizado ahora tanto por Google como en redes sociales muy difundidas como Facebook, Twitter, OpenID, otros.. y utilizando como describimos, hojas de Calculo y Apps Script de Google Docs (ahora Google Drive) ó de Google Apps, éste ultimo de uso ahora bastante difundido a nivel de instituciones, corporaciones y en especial a nivel académico-universitario; resulta que también es posible acceder a los principales datos de contacto de un usuario a objeto que dicha información quede grabada y disponible en nuestras propias base de datos a objeto de conformar "comunidades" con que podamos interactuar, ofertar nuestros productos o servicios, y hacer seguimiento detallado de su participación en nuestros proyectos.. eso quiere decir que, previa autorización de un usuario, podremos tener acceso a su "ID" utilizada dentro de la red social que utilicemos: su nombre, nickname.. y su correo electrónico principalmente, entre otros datos que se nos permita acceder (la URL de su imagen o perfil por ejemplo); y con dicha información, podríamos entonces de manera mas sencilla diseñar y entregar a nuestros usuarios, formularios para que actualicen sus datos de contacto (dirección, teléfono, otros); que registren sus preferencias respecto a nuestros servicio ó negocio, así como invitarlos a que hagan pedidos on-line de nuestros productos y servicios ofertados, pudiendo controlar sus pagos y saldos por cobrar, otorgarles regalos, ofrecerles promociones, más ofertas, etc.. el potencial es increíble.. y esto por supuesto, puede ser utilizado desde diferentes back-end (Java, PHP, Python, otros ..y utilizando base de datos MySQL, Postgres, otros, ó el datastore de Google App Engine).

Nuestro proyecto Community OAuth 2.0 and Business realiza todo ello, pero utilizando como bcak-end hojas de calculo de Google Docs y su servicio Apps Script, que permite el uso de javascript para interactuar con el datastore (las tablas de nuestras hojas de calculo en este caso) ..y consideramos que el potencial de este proyecto es bastante importante por cuanto:

las Hojas de Calculo de Google Docs son de uso libre hasta 5Gb (400,000 celdas por hoja de Calculo y hasta 200 hojas por cuenta Google), suficiente para el manejo de PYMES (pequeñas y medianas empresas)
Trabajar con las Apps Script es bastante sencillo y hay hasta 03 maneras de utilo izar la API: UI Service (que es la forma básica de emplear la API), utilizando GUI Builder (que permite diseñar nuestras "pagina" Web a desplegar utilizando un interface gráfico que nos facilita su construcción y desarrollo), y ahora desde Agosto 2012, utilizando el denominado HTML service, que significa que ahora incluso podemos construir nuestros desarrollos directamente desde una pagina HTML en blanco (utilizando todas las ventajas de uso de HTML, CSS y javascript por el front-side de nuestra pagina, incluyendo el empleo de frameworks como JQuery, JQueryUI, ExtJS, Sencha Touch u otro de nuestra preferencia en nuestros desarrollos.
..y por el back-end, utilizamos también Javascript con todos los servicios que nos brinda las Apps Script, como los servicios de email, manejo del calendario, de los Mapas, de las Visualizaciones para hacer nuestros gráficos, API Contact otros.. e incluso de conexión a otras bases de datos vía "Jdbc" con lo que podríamos conectarnos y trasladar nuestra data a bases de datos más escalables como MySQL o el mismo datastore de Google App Engine.. y trabajar con la data de ambas plataformas (la de nuestras hojas de calculo.. y la "guardada" en nuestra base de datos corporativa).
y finalmente, para acceder al protocolo OAuth 2.0 utilizamos la Google API Javascript Client, y logramos con ello que nuestro proyecto finalmente solo utilice como lenguaje de programación Javascript.. al mismo modo que nodeJS !!

Nuestro proyecto como hemos indicado nos permite el manejo de todas esas opciones, y como podrán revisar y probar, se forma una "comunidad" en la cual haciendo click sobre las imágenes de las personas registradas se puede tener acceso a las paginas Google+ de los integrantes; y a diferencia de lo expuesto en nuestro CASO PRACTICO planteado, ahora si podemos remitir a nuestros "usuarios registrados" nuestras ofertas, promociones, novedades, etc. (como campañas de ventas), directamente a su mail ó mostrándolos en una página web para invitar a los usuarios no registrados todavía (sobre la plataforma Blogger en este caso); y lo que buscamos es que ellos puedan registrar on-line sus requerimientos (ordenes de compras).. interesante no?

Pueden revisar nuestro proyecto en el siguiente enlace:

http://communytyproject.blogspot.com/p/welcome.html

..ó también pueden dirigirse a la pagina Google+ que promociona nuestro proyecto en el GADC 2012 para que puedan comentar sus pruebas, opiniones y las posibilidades de este proyecto.. y al hacer click sobre la siguiente imagen mostrada accederemos a algunos screenshots.

El proyecto cuenta con su propio Mini-Manual y resumen técnico, pero al estar compitiendo en el Google Apps Developer Challenge GADC-2012, no tenemos disponible por el momento enlaces de descarga de las "fuentes" del modelo.. pero por supuesto, el tema es bastante amplio por lo que toda dicha información será proporcionada en un futuro próximo en una nueva entrada de éste nuestro proyecto Integracion Google.. por lo que estas lineas solo tienen carácter introductorio.

SIGUIENTES PASOS

Si ha llegado a revisar completamente esta entrada debe haberse convencido, o intuir con entusiasmo, que el potencial de todas estas herramientas mencionadas es realmente importante; y todo este desarrollo tiene un nombre: "Community Management" y "Social Media Management"; vale decir, todo el proceso descrito busca que nuestras organizaciones, negocios ó emprendimientos que estemos involucrados (propios ó de terceros), lleguen a conformar una "Comunidad" con la que podamos interactuar y fidelizar con nuestros productos, servicios, conceptos.. es el comienzo de lo que se también se conoce como "marketing digital", y reitero que es solo el comienzo por cuanto la labor de "Community Manager" va a convertirse poco a poco en un puesto de trabajo relevante y de importancia en toda organización o negocio.. como se indica, no solo es atender el blog, los anuncios, el chat.. sino establecer verdaderas campañas y estrategias.. y por supuesto cuantificar, monitorear, reportar y monetizar resultados.. todo ello acorde a las reales posibilidades y expectativas de la institución o negocio.. realmente todo un reto..

Conviene entonces den una revisión a los siguientes artículos:

Que es Community Manager? (en español)
Social Media Manager vs Community Manager (in English)
y por supuesto, googlear sobre el tema..

y finalmente, vale destacar que a lo largo del desarrollo del tema nos hemos entusiasmado con respecto al empleo de las Apps Script y las Google spreadsheet especialmente en lo que concerniente a la gestión de micro y pequeñas empresas (que abundan en nuestra zona Latam, y por supuesto en todo el planeta.. y que en lo personal, también me interesa mucho para algunos proyectos personales), pero eso es también solo un comienzo.. la realidad concreta es que en el desarrollo de todo nuestro proyecto hemos logrado conseguir disponer de información de contacto de nuestros seguidores por el "front-side" ó lado del cliente (como variables javascript) las que hemos almacenado sobre hojas de calculo Google; pero dependiendo de la envergadura y del crecimiento de nuestros proyectos bien fácilmente podríamos "cambiar" nuestro Back-End por uno convencional PHP+MySQL, Java+MySQL (u otra base de datos como Postgress, Oracle, otros); e incluso utilizar servicios "escalables" y de "alta disponibilidad", como el servicio Amazon C3 ó el datastore de Google App Engine.. no existe limite para utilizar el "online storage web service" de nuestra preferencia de acuerdo a nuestros requerimientos, preferencias y presupuestos.. pero nuestro desarrollo del lado del cliente no tendría que variar sino en muy pocas líneas.. y en algunos casos no variar en lo absoluto, dependiendo de las técnicas de desarrollo por el lado del cliente que utilicemos en nuestro proyecto.. y hacia ello es que apunta todo el concepto de desarrollo de nuestro proyecto Integración Google.. en la que con un mismo "interface" (pero por supuesto con las respectivas adecuaciones según el Back-End que utilicemos), pues un mismo proyecto puede correr en las diferentes plataformas de desarrollo web vigentes.. tal vez en las futuras por desarrollarse.. y trabajando con PHP, Java, Python, nodeJS (Javascript), DART, GO u otro lenguaje del lado de servidor que dominemos, nos sea solicitado, o sea de nuestra preferencia.. y ésta si es una magnifica meta!.

Una muestra de ello es nuestro codelab Integration with Google (1st. part), que ahora utiliza el protocolo Oauth 2.0 para la autenticación y autorización de nuestros usuarios, desarrollo en que utilizamos el framework ExtJs, JQuery y otras herramientas "javascript" de geolocalización y disponer de una información básica de contacto con nuestros seguidores que utilicen nuestros "demos".. por supuesto, en el enlace indicado ponemos a disposición la descarga del código empleado con el cual podrá realizar sus propias pruebas en un servidor local convencional HTTP Apache (como Appserv por ejemplo) ..pero que en nuestro caso, como podrá observar, lo hemos podido desplegar sin mayores inconvenientes sobre la plataforma Google App Engine..

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

Saludos
@Mlaynes

Let's talk about Twitter

2010-05-15T13:25:00.000-05:00

Recuerde que..

MUY BUENAS NOTICIAS... (nuestra experiencia con Twitter - 29/05/2010)

El equipo de Twitter, despues de meditar nuestros descargos remitidos durante casi 02 semanas, decidió levantar la suspensión de nuestra cuenta Twitter en Inglés que nos había impuesto, lo que habla muy bien de dicha red social, por cuanto, atendió nuestros argumentos, (el cual principalmente se centró en indicarles que nuestro proyecto trata de integrar a la comunidad GTUG mundial para formar una biblioteca de codigos, y que por tanto, resulta imprescindible tratar de comunicarnos con toda dicha comunidad, y por supuesto no somos spam..!); y bueno, Twitter trata de mantener un manejable rango de relación y control de los seguidores de su red que debemos destacar... y esto, unido a su pronunciamiento Twitter loves open source, (el cual compartimos en esta humilde comunidad), y el lanzamiento de @anywhere, y con el reconocimiento que Twitter es la principal red de microblogging vigente en el momento, pues en verdad nos alegra contar ahora con todas nuestras cuentas Twitter completamente operativas, en español, inglés y portugués... por lo que les detallamos a continuación nuestros tips respecto a nuestros avances al jugar con el API que Twitter nos proporciona...

REFERENCIA TECNICA (18/07/2010)

Como siempre, les indicamos las paginas oficiales de Twitter para que las revisemos continuamente y estemos atentos a los cambios y mejoras que nos brindan los servicios de esta red social (y que realmente nos conviene revisar para mantener al día y sin problemas nuestras aplicaciones).

Extras de Twitter, que nos proporciona diversos widgets y botones para emplear en nuestras paginas web, y en la que resaltamos el widget de perfil, que nos muestra en cualquier un listado de los tweets de la cuenta Twitter que indiquemos; pero debemos destacar que dependiendo de cada caso, bien podriamos utilizar los otros widgets tanto para nuestros sitios web como para Facebook, que Twitter nos proporciona... (solo basta ingresar los datos que nos indican y luego probar y observar el resultado, y al terminar y guardar el código, se nos proporciona el mismo para pegarlo en nuestros documentos HTML)

TWITTER ANYWHERE
IMPORTANTE: Twitter Anywhere dejo de funcionar desde el 01 de Marzo del 2013 !
Consulte este enlace: https://dev.twitter.com/blog/sunsetting-anywhere

A diferencias de los Extras, con Anywhere, Twitter busca que interactuemos directamente con nuestra cuenta Twitter en nuestras paginas web, sin ingresar directamente a Twitter, logrando así facilitar el uso de nuestras cuentas, incrementar el trafico de las mismas y su difusión.

Para ello, el APIde Twitter requiere como primer paso que registremos nuestra aplicación (debemos tener presente que si tenemos varias cuentas twitter siempre estemos conectados con la misma para que nuestros desarrollos se muestren agrupados, o que las asignemos a la cuenta Twitter de su respectiva aplicación, el caso es que para poder acceder a los datos de nuestra aplicación luego de creadas -especialmente a nuestro API Key, Consumer Key, Consumer Secret u otros datos que necesitemos-, basta con que ingresemos a la cuenta Twitter con la que accedimos al registrar nuestra aplicación e ingresar a nuestra cuenta de desarrollor utilizando la opción "Siqn", y luego ingresemos a los datos de nuestra aplicación usando la pestaña "Your Apps")

NOTA : Al registrar nuestra aplicación es importante que indiquemos en "Registered Callback URL" la dirección exacta de nuestra pagina web a partir de la cual se va a tener acceso a Anywhere, y asimismo, que indiquemos el "Default Acces Type" (read only o write & read, dependiendo si deseamos que solo se tenga acceso de lectura o se pueda escribir en la cuenta twitter que acceda a la aplicación... nosotros elegimos write&read)

Registrada nuestra aplicación, podemos utilizar en la pagina web que desarrollemos las diversas aplicaciones Anywhere que nos presenta la API, y entre las que destacamos las "Hovercards" (que a diferencia de las linkifyUsers, no solo nos direccionan a nuestras paginas Twitter, sino que nos permite mostrar el logo e información básica, y opción a seguirlas, y en un formato bastante apropiado, con solo pasar sobre el link el mouse), las "Twitter Box", que nos permiten escribir en el muro de la cuenta Twitter de nuestros usuarios, y "User login & SignUp", para controlar el acceso y salida de la cuenta Twitter de nuestro usuario.

Detallamos a continuación el codigo de nuestra aplicación Anywhere que hemos detallado en nuestra pagina "Ayudenos a difundir nuestra comunidad", la cual considera en forma conjunta la aplicación de las figuras de Anywhere que les hemos recomendado, y en la que debemos destacar los siguientes aspectos:

Utilizamos Anywhere sobre una misma pagina HTML, por lo que las instrucciones de conexion las colocamos en el mismo documento (a diferencia de utilizar el HEAD recomendado en la documentación de Twitter Anywhere), lo que es muy util cuando consideremos el desarrollo de widgets, gadgets o paginas independientes que utilizen Anywhere.
Utilizamos la conexion a la librería "jsapi" de Google para tener acceso al framework JQuery que ésta nos proporciona (necesario para hacer uso de los comandos JQuery que utilizamos)
y bueno, se requiere tener conocimientos basicos de JavaScript y JQuery, por lo que aprovecho la oportunidad para indicarles la direccion de un tutorial javascript para consultas rapidas; y en lo que respecta a JQuery, les indico una pagina de introducción bastante util.

Detalle de nuestro codigo :


<script charset='utf-8' src='http://platform.twitter.com/anywhere.js? id=nQjC8OfVtcUWjVjKW1ATlw&v=1' type='text/javascript'></script>
<script type="text/javascript">
twttr.anywhere(function (T) {
//T("##main-content").linkifyUsers();
T("#main-content").hovercards();
})
</script>

<div id="main-content">
..and now, with Twitter @Anywhere you can connect directly with us: @IGCodelab_en
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">(Put the mouse on the links)</span></span></div>

<script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q">
</script>
<script type="text/javascript">
google.load("jquery", "1");
twttr.anywhere(function (T) {
var currentUser,
screenName,
profileImage,
profileImageTag;

T("#tbox").tweetBox({
height: 100,
width: 400,
label: 'Post on your Twitter Wall...',
defaultContent: "I like Integracion Google. Check out our fan page into http://tinyurl.com/35ac3on\nhelp us to disseminate our project..!"
});
T("#withus").tweetBox({
height: 100,
width: 400,
label: 'Tell us your thoughts ....',
defaultContent: "@IGCodelab_en ..."
});

function isConectado() {
$("#twitter-connect-placeholder").show();
$("#tbox").show();
$("#withus").show();
};
function noConectado() {
$("#twitter-connect-placeholder").hide();
$("#tbox").hide();
$("#withus").hide();
};
function myAvatar() {
document.getElementById('twitter-connect-placeholder').innerHTML="";
if (T.isConnected()) {
currentUser = T.currentUser;
screenName = currentUser.data('screen_name');
profileImage = currentUser.data('profile_image_url');
profileImageTag = "<img src='" + profileImage + "' style='cursor: hand; cursor: pointer; display: block; float: left; margin: 0px 10px 5px 0px; text-align: left;'/>";
$('#twitter-connect-placeholder').append('<p>' + profileImageTag + '<b>' + screenName + '</b> esta conectado..!</p>');
$("#twitter-connect-placeholder").append('<p><button id="signout" type="button">Sign out</button><p>');
$("#twitter-connect-placeholder").bind("click", function () {
twttr.anywhere.signOut();
});
};
};

if (T.isConnected()) {
myAvatar();
isConectado();
} else {
noConectado();
};

T("#connect").connectButton( {
authComplete: function(user) {
// alert("It's Connected");
myAvatar();
isConectado();
},
signOut: function() {
// alert("It's not Connected");
noConectado();
}
});
});
</script>
<span id="connect"></span>
<span id="twitter-connect-placeholder"></span>
<div id="tbox">
</div>
<div id="withus">
</div>

(Tenga cuidado con las instrucciones de inicio y fin de parrafo en html ( <p> y </p> ), pues el editor de Blogger usualmente corta la linea despues del primer <p> cuando editamos nuestras paginas, y eso debe corregirse antes de grabarlas, sino nuestras pruebas y desarrollos no funcionaran).

Con dicho código, y si accedemos a nuestra cuenta Twitter, se mostraría los Tweet Box en nuestra pagina como lo indicamos a continuación (si utiliza su propia pagina web, recuerde que debe ingresar el ID de su propia API KEY en el inicio del código):

Les indicamos asimismo, la pagina de la documentación general de la API (disponible en la pagina del desarrollador), en la cual, además de Twitter Anywhere, podremos revisar todas las opciones de desarrollo que nos presenta Twitter; así como la documentación de Twitter para Negocios, cuya lectura tambien nos debe interesar y debemos tener presente.

@Mlaynes

Hablemos sobre Twitter..

Let's talk about Facebook...

2010-05-07T22:31:00.000-05:00

Recuerde que..

Al estar haciendo las modificaciones a nuestro Blog, para adicionarles servicios sociales y propiciar la difusión de nuestra comunidad utilizando Facebook, twitter, Google Buzz, etc.; y leyendo diversos comentarios al respecto, realmente nos resultan muy impresionantes las cifras asociadas a Facebook: a inicios del 2010, mas de 400 millones de usuarios y mas de US$300 millones anuales de ingresos, y las cifras siguen en aumento... al mes de Julio 2010 reportan mas de 500 millones de usuarios...en Marzo del 2011 ya son 600 millones, y a Julio del 2011 se habla ya de 750 millones de usuarios y alrededor de US$ 2,000 millones de dolares de ingresos ..

..por supuesto, nuestras felicitaciones a Facebook, es innegable que brilla con luz propia y lo convierte en un servicio con vigencia para bastante tiempo.. pero no todo lo referido a Facebook brilla... y también encontré por ahí este post, y se los presento para su consideración:

10 razones para no estar en Facebook

Los términos del servicio de Facebook solamente benefician a Facebook.
El CEO de Facebook (Mark Zuckerberg) tiene un historial documentado de comportamiento no ético.
Facebook ha declarado la guerra contra la privacidad.
Facebook constantemente está cambiando cual información se comparte y cual no sin tu consentimiento.
Facebook no tiene buenas intenciones (..uy!)
Toda tu información se comparte a través de las aplicaciones
Facebook tiene muchos problemas técnicos (..uuy!)
Es muy difícil eliminar tu cuenta de Facebook
Facebook no soporta una Web abierta de verdad
Facebook apesta (...que fuerte esto, no??)

y bueno, ...aunque no son necesarias las exageraciones, de todo esto algo hay de cierto, (pueden revisar informacion general, y sobre las políticas, criticas e impactos referidos a Facebook en wikipedia, la cual es un poco mas escueta pero también incisiva en su versión en español, siendo igual en las paginas para otros idiomas)

Facebook es una herramienta muy poderosa e importante, pero los últimos cambios efectuados durante el 2010, 2011 y los programados para el 2012, confirman la variación del estándar "Facebook" y la comprensible saturación de su plataforma de desarrollo ahora que se acerca a los mil millones de usuarios registrados; y aun cuando ahora recurren a conceptos "opensource", como el uso de un SDK Javascript (con soporte al estandard OAuth 2.0 para la autenticación, registro de usuarios y uso compartido de información), con soporte y manejo de "canvas" e iframes dentro de la red social, e incluso con soporte para otros entornos de desarrollo como Java, PHP, Python, entre otros.

Pero el gran cambio de Facebook va a ser resaltado a partir del 01 de Junio del este 2012, con la desactivacion de la aplicación Static FBML (en la que estan hechas miles y tal vez millones de "fanpages" de negocios, profesionales e instituciones de todo tipo que difunden sus actividades a través de la Red Social de Facebook.. Facebook requiere ahora que todas las aplicaciones que trabajen dentro de su red social utilizen los recursos de terceros (colgado sus widgets o servicios sociales a nuestras paginas webs), ó pegando como "canvas" nuestros desarrollos dentro de tabuladores de Facebook.

Ahora se requiere que todas nuestras paginas web en donde las utilicemos el SDK de Javascript de Facebook deban ser previamente "registradas" en Facebook Developers... y bueno, estas maneras no son propios de desarrollos abiertos sino 'propietarios' (tipo Microsoft para ser mas exactos), y aunque las principales criticas a Facebook van referidas a sus políticas de Privacidad y manejo de su ahora apetecible y gigantesca base de datos de "gustos" de sus usuarios, a nivel técnico, Facebook se muestra bastante errático y cambiante respecto a sus estándares de desarrollo, los que como ahora, puede continuar cambiando cuando así lo estimen.. aunque en estos ultimos 02 años realmente han habido ya muchos cambios.. así que debemos empezar a ponernos al día....

En resumen, como se indica, parece que Facebook solo piensa en Facebook, pero como consecuencia de su innegable éxito, y por los parámetros propios del negocio publicitario, es muy difícil que se convierta en un servicio por el que los usuarios tengamos que pagar..(así lo anuncian.!); aparte que su entorno para instituciones y empresas (las llamadas "fan pages"), es ahora realmente bastante sólido y eficiente, y deben ser considerados muy seriamente para su empleo en toda campaña publicitaria y de difusión a nivel local y/o global (por supuesto, siempre tomando nuestras respectivas precauciones respecto a temas de seguridad empresarial, institucional o personal principalmente en lo que respecta al manejo de información sensible o confidencial).

Considérese entonces que los comentarios presentados no deben significar que mantengamos una posición anti-Facebook, y reiteramos que e trata de una opción social muy eficiente y un innegable medio de mercadeo y difusión en plena vigencia y expansión... así que no dudemos en utilizar ese potencial para comunicar nuestros propios conceptos personales, empresariales o institucionales.. y así pensamos que debe hacerse... y por ello ahora también tenemos nuestra propia pagina Facebook, bajo el formato "fan page", que como hemos indicado, Facebook ha mejorado notablemente (y que creo, es uno de las grandes "olvidos" del recién lanzado Google+), y que ahora nos permite una captación ilimitada de seguidores, y hace que la interacción entre las entidades y sus seguidores sea mas fácil para opinar, sugerir, hacer difusión y seguimiento de enlaces, publicación y etiquetado de fotos con comentarios personales o institucionales, etc.), y que por supuesto, también incluye modificaciones en su entorno de programación para desarrolladores, temas que tocaremos a continuación...

REFERENCIAS TECNICAS

Para averiguar como agregar botones, enlaces y otros servicios sociales Facebook a nuestras paginas Web, existen múltiples foros y blogs dedicados al tema, pero manteniendo nuestro estilo de contribuir al estudio y la investigación, le pasamos los links "oficiales" de Facebook al respecto, y que en este caso toman particular relevancia, por cuanto, como indicamos en el principio de este post, FaceBook ha modificado bastante los parametros para desarrolladores desde mediados del año 2010 (..este 2011 ha continuado y en el futuro se espera mas modificaciones). Así que nos conviene revisar periódicamente los siguientes enlaces:

Facebook Developers, imprescindible revisar el segmento "Add Facebook to my site".
Crear una Pagina, para crear paginas FaceBook ("fan page"), para negocios, instituciones, de la comunidad, etc.,
de FaceBook a Twitter, para vincular nuestras paginas Facebook a Twitter, haciendo que lo publicado por los administradores de nuestra pagina en el Muro se repliquen en Twitter...
Insignias de Facebooks, una colección completa de widgets de insignias, botones y otros servicios sociales de Facebook, que podemos pegar en nuestras paginas Web personales e institucionales, siendo esta una manera directa y fácil para empezar a utilizarlos.
Pagina de Desarrollador Facebook, la cual en el nuevo concepto de desarrollo de aplicaciones cobra bastante importancia por cuanto en ella podremos registrar nuestras paginas Web en donde querramos correr las insignias y servicios "enriquecidos" de Facebooks utilizando iframes y el SDK< de Javascript, entre otros entornos los que podemos empezar a revisar en el siguiente link, y probar su funcionamiento en su sección "Tools".
Javascript Test Console, que en su link "examples" podemos seleccionar diversos ejercicios y ejemplos sencillos de aplicaciones del SDK Javascript de Facebook que podemos poner en nuestras websites o aplicaciones iFrames de nuestras fan pages.
Ya no existe Directorio de Aplicaciones, para acceder a las aplicaciones existentes basta con utilizar la opción Buscar digitando su nombre, o acceder a ellas a través de las invitaciones de nuestras amistades directamente desde las entradas de nuestro Muro.

Todas estos links, y otros que conviene revisar, están disponibles desde nuestra propia cuenta personal Facebook, allí observe y revise las opciones del pie de página. opción Desarrolladores.

Prepárate para tu página "optimizada" Facebook.

A partir del 23 de agosto del 2010, y continuando los cambios durante el presente año, Facebook simplificará sus páginas "para que sea más fácil navegar por ellas", confirmándose los siguientes cambios:

El menú de usuarios en la parte superior de nuestras entradas es ahora de manejo exclusivo para aplicaciones de Facebook, ya no se puede poner aplicaciones propias o de terceros en las pestañas o "tabs" de la parte superior del Perfil de usuarios (ahora las "pestañas" de nuestras aplicaciones o terceros se ubican en la lista de aplicaciones de la pantalla de Inicio, en la barra izquierda, y en algunos casos, si tenemos varias aplicaciones instaladas, hay que expandir la vista para que aparezcan.. es decir..nuestras pestañas pueden estar ahora bastante escondidas ..y no muy accesibles para nuestros seguidores sino tenemos en cuenta la capacidad de espacio otorgado, es por ello que ahora el desarrollo de aplicaciones bajo Facebook utiliza mas el concepto de Aplicaciones por invitación sobre publicaciones en nuestro Muro como ocurre con los Juegos u otros...
El espacio otorgado para la presentación de nuestros desarrollos se reducen ahora a 520 píxeles. Lo que debemos tener en cuenta al realizar nuestros desarrollos y realizar los ajustes necesarios en caso de anexar iframes, imagenes o cajas (las que debemos dimensionar al espacio disponible) ...
Se ha efectuado mejoras para el formato personal y "fan pages". Ahora es bastante mas atractiva la interacción como el etiquetado de fotos pues estas se mostrarán en una barra en la parte superior de nuestra pagina personal o institucional; y para el caso de paginas personales, se ha mejorado bastante los datos de perfil profesional y de trabajo (los que también se muestran en la parte superior de nuestra pagina; y en el caso de las "fan pages", ahora podemos mostrarnos como indica nuestro nick, e incluso hacer comentarios como "representantes" de nuestra pagina (y con la imagen de perfil que registremos), como si se tratase de un usuario "normal", aunque esto aun no se habilita completamente para los foros, donde las publicaciones de los "administradores" son etiquetados como de la "pagina", y no se pueda hacer comentarios en foros de terceros como "representantes".
Pero uno de los cambios principales para los desarrolladores es que a partir de Marzo 2011 Facebook ha desactivado las pestañas y aplicaciones FBML estático (que es una de las formas principales en que se adicionaban "pestañas" a nuestras paginas), por lo que ahora para crear "tabs" y aplicaciones para nuestras fans page de Facebook, debemos recurrir a los iFrames y al SDK de Javascript... (a la fecha sigue habiendo soporte a las aplicaciones FBML existentes pero con una funcionalidad reducida... pueda que algunos desarrollos FBML no funcionen correctamente..).
Pueden revisar en nuestro foro mas información al respecto:
- http://tinyurl.com/3vyqwvp (en español)
- http://tinyurl.com/3nrafbs (in English)

Algo imortante que debemos tomar a consideración respecto a este último punto descrito es al trabajar con iframes "propias" o de "terceros" en nuestras paginas facebook significa que ahora para "programar" las presentaciones de dichas páginas debemos utilizar lo convencional en desarrollo Web, vale decir, basicamente HTML, CSS y Javascript; pero dependiendo de la fuente de nuestra iframes, de ser propia por ejemplo, podremos utilizar herramientas propias de nuestro entorno de desarrollo como el empleo de back-end tipo PHP+MySQL u otros JSP, Java y MySQL, etc, con lo que nuestras "paginas" podrian convertirse en aplicaciones full dinámicas... vale decir, al fin Facebook se apertura a todas las opciones de desarrollo Web, aunque debemos de tomar muy en cuenta las "politicas de desarrollo" que nos plantea:

Actually, there is one exception: Facebook policy is that you ARE NOT ALLOWED have autoplaying media in a tab. So no autoplaying videos, songs, etc. in the tab.

Asi podremos observar que algunas funciones "autoplay" son incluso bloqueadas, por lo que debemos probar con detalle todos los desarrollos que realicemos para paginas Facebook.

En resumen... Facebook ha mejorado bastante su presentación y perfil de "usuario" personal y de negocios con herramientas que son muy utiles para la gestión y mercadeo de nuestros proyectos personales, empresariales o institucionales .. todo es muy interesante.. pero el diseño general de la pagina es como siempre inamovible.. al estilo de Facebook..

Agregando Facebooks a nuestras paginas Web

Este es una forma de agregar plug-ins de Facebook a nuestras paginas, y las hemos utilizado para mantener una mejor interaccion con nuestros usuarios, y para que también nos puedan ayudar a difundir nuestra comunidad.

Como lo hicimos?

La imagen nos muestra como hemos efectuamos un enlace para que nuestros seguidores puedan efectuar comentarios en sus propios Muros personales, así como tambien muestra una caja con las entradas de nuestra Fan page, la que aparece en nuestro Blog. Detallamos a continuación el código utilizado para que sirva de referencia:

<script>
function fbs_click() {
u=location.href;
t=document.title;
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),' sharer', 'toolbar=0, status=0, width=626, height=436');
return false;
};
</script>

<a href="http://www.facebook.com/share.php?u=http%3A%2F%2Fmlaynessanchez.blogspot.com" onclick="return fbs_click()" target="_blank" title="Coment about us on Facebook..!">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFi4uZqjZ9Sju6d8aaSYMNAgy3PoYobPKKvPAh0ouk1I5qWskr83o6oCtHSPdykZj6LI0n0axlIm0DoAc8xsSst15sgfHiqicblLQ1SINFURH5s5PdDsgibOn4Bdy4OB03rhpLfLPasWzG/s1600/FbSobreNosotros.JPG" style="cursor: hand; cursor: pointer; display: block; float: left; height: 150px; margin: 0px 10px 5px 0px; text-align: left; width: 120px;" /><span class="Apple-style-span" style="font-size: large;">Comments about us..!</span></a>
<p>
Your support is very important to disseminate our project and bring together our users, fans GTUG, web developers and freelancers who are already using, or would like to use, the technology than Google puts at our disposal ...
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">(click on the link or in the left image)</span></span></p>
<p>
..</p>

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?id=120321264650448&width=430&height=650&connections=10&stream=true&header=true" style="border: none; height: 650px; overflow: hidden; width: 430px;"></iframe>

Asimismo, al final de esta entrada podran observar un Plug-in para comentarios que ha sido desarrollado utilizando la técnica SDK de Javascript que ahora proporciona Facebook...

Este plug-in de Comentarios de Facebook permite al usuario hacer incluso "comentarios de los comentarios" en cualquier página web. Los comentarios pueden ser referidos a una página, artículo, foto o cualquier contenido que indiquemos; y los comentarios que se hagan en páginas externas ahora también pueden aparecer en tu perfil de Facebook (si así lo desea el "comentarista", pues tiene la opción de activar o desactivar el posteo a su Muro)

Como lo hicimos?

Detallamos también a continuación nuestro codigo para que les sirva de referencia:

La primera parte, correspondiente a la definición FB.init, inicializa el SDK de Javascript vinculado a nuestra pagina Web, debiendo utilizar como appId el numero obtenido al registrar la URL y la pagina específica donde se va a mostrar nuestra caja de comentarios; operación que debemos realizar la Pagina del Desarrollador Facebook indicada.

Pueden tener mayor explicación del proceso revisando el siguiente link:

http://www.faceblog.es/desarrollo-aplicaciones-para-facebook/fbjs/fbjs-como-instanciar-el-sdk/

La segunda parte corresponde al codigo XFBML que crea el plug-in de comentarios, el cual podemos generar de: http://developers.facebook.com/docs/reference/plugins/comments/

Realmente el código es bastante corto, y hay mas cosas que pueden ser consideradas, como "localizar" los mensajes a nuestro idioma ( por defecto la indicación en_US muestra el formato "Like" en vez de "Me gusta", para lo que tenemos que utilizar es_LA), pero una opción que voy a empezar a revisar con detenimiento es respecto a las traducciones que por ejemplo se encuentra disponible en el widgets de comentarios del servicio Open Social de Google, con esto esta herramienta sería aún mas interesante... lo indicado son solo algunas de las opciones que ahora son posibles de considerar utilizando los enriquecidos "plug-ins" de Facebook.

Para los que por urgencia requieran continuar trabajando con FBML, conviene revisen el siguiente link:

http://www.cuentamelared.com/alternativas-static-fbml/

..y para empezar a revisar em manejo de iFrames conviene revisar este enlace:

http://www.cuentamelared.com/como-crear-pestana-con-iframe/

Hablar de Facebook es hablar de difusión y mercadeo, por eso los invito a continuar con mayor detenimiento las nuevas herramientas y funcionalidades proporcionadas por Facebook, y también revisar nuestra entrada referente a conceptos de Web2.0: los negocios y las redes sociales.

Saludos.
@Mlaynes

Hablemos sobre Facebook..

Adonde queremos llegar...

2010-04-22T08:32:00.000-05:00

Recuerde que..

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

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

2010-04-19T22:26:00.001-05:00

Recuerde que..

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:

<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

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:

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:

<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>


--> ...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:

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:

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..!

Integracion a Google AppEngine

2010-04-15T11:47:00.000-05:00

Recuerde que..

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:

www.youtube.com/watch?v=9Ocjqxhh3RQ

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:

code.google.com/intl/es/appengine/docs/whatisgoogleappengine.html
code.google.com/intl/es/appengine/docs/python/overview.html
code.google.com/intl/es/appengine/docs/python/runtime.html"

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:

code.google.com/intl/es/appengine/downloads.html

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.

Material de Apoyo

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 :

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..!

Integracion a Google (2da parte)

2010-04-04T16:10:00.000-05:00

Recuerde que..

(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 :

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)

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:

http://code.google.com/intl/es-ES/apis/visualization/documentation/reference.html

http://code.google.com/intl/es-ES/apis/visualization/documentation/querylanguage.html

http://code.google.com/intl/es-ES/apis/visualization/documentation/examples.html

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..!

Integracion a Google (1ra parte)

2010-03-16T07:00:00.000-05:00

Recuerde que..

Esta es la primera parte de nuestro proyecto utilizando el framework ExtJs, cuyo objetivo es unir las ventajas que éste nos ofrece, junto con el innegable aporte de Google al Desarrollo Web, y así poco a poco, llegar a proponer proyectos de alcance profesional... ocurre que Google no sólo es el popular buscador que todos utilizamos en nuestros ordenadores ó equipos móviles con acceso a Internet, sino que existen muchos servicios como Google Maps, Google Earth, Google Docs, Google Calendar, YouTube, Google Translate, Google Visualizations, y otros cuyo resumen los podemos disfrutar a través en el llamado Google Code Playground, vale decir, Google también nos provee diversas API, principalmente utilizando tecnología Ajax de Javascript, los que nos permiten acceder a varios servicios, y utilizarlos y presentarlos en nuestras páginas y desarrollos Web, estas API casi siempre son de uso libre y gratuito (excepto las que involucren fuerte consumo de recursos de la infraestructura Google como Google App Engine, la nueva Google Cloud SQL ó la API Google Language, la cual desde este Diciembre 2011 es ahora un servicio de paga.

Planteado de esta manera, en esta oportunidad lo que mostramos es como crear los "stores" que utilizamos con ExtJs, adaptándolos a los formatos de datos de Google, y así poder utilizar Visualizaciones de Google en nuestros desarrollos con ExtJS. Este es un procedimiento realizado a través de una extensión en código Javascript del framework ExtJS denominada GVisualizationPanel; y asimismo, mediante otra extensión que hemos llamado GVisualizationMaps, hemos adaptado nuestros datos desde ExtJs para acceder a la API de Google Maps; logrando trabajar con una variedad de visualizaciones Google y de Google Maps en "paneles" ExtJs(en sus versiones Ext-3.x y ExtJS4); y éste es un primer paso donde mostramos como trabajar con los "stores" de ExtJS, y mostrarlos sobre diferentes visualizaciones y procedimientos Google. Asimismo, estamos presentando todas estas visualizaciones en un TreePanel menú, en que para acceder a la aplicación utilizamos nuestra Cuenta Google datos de usuario y password de acceso, método que corresponde al uso de la API de Autenticación de Cuentas de Google, el que también puede ser replicado para utilizar sobre Google Apps, sólo permitiendo el acceso a cuentas de los miembros de comunidades específicas.

Este codelab fue desarrollado inicialmente con código de la versión Ext-2.x, y se tuvo que realizar pequeñas modificaciones para adaptar nuestras extensiones a la versión Ext-3.x (actualmente nuestro código trabaja bien con la versión Ext-3.4.0, la última de la serie Ext-3.x lanzada por sencha.com); y ahora también entregamos nuestro codelab con su código adaptado a la versión Ext-4.0.7, la última versión opensource ExtJs4 disponible a la fecha 15/12/2011 (aunque Sencha ya menciona la próxima liberación de Ext-4.0.8 y el lanzamiento de Ext-4.1 aún en etapa "beta") ...pueden entonces ahora disfrutar nuestros códigos, que hemos intentado documentar lo mejor posible, y así poder observar las diferencias..

Audiencia

Se recomienda que, para entender este 'codelab', tengamos los suficientes conocimientos de ExtJs y desarrollo Web (HTML y Javascript básicamente, y tengamos instalado nuestro servidor HTTP Apache local para pruebas; o en su defecto, haber seguido los capítulos inicales del curso de ExtJs que nos ofrece Crysfel Villa de México en su pagina del Quizzpot (donde también describen como instalar un servidor local), o al menos haber revisado con detalle nuestro post "empezando desde cero".

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

IntGoogle-01.rar, Descomprimir este material de apoyo en la carpeta "www" de nuestro servidor local AppServ u otro compatible Apache-PHP-MySQL (LAMP ó WAMP), y se creara la carpeta "Ynt-Google01" (si no entiende este paso favor consulte "empezando desde cero'). Este código en su archivo "index.html" se debe terminar de configurar correctamente las rutas para la importación de las librerías de ExtJS a la versión con que trabajemos siguiendo los pasos del codelab detallados a continuación. ( código compatible versión ExtJs-3.x ).

IntGoogle-01.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 y totalmente compatible para ejecutar sobre una plataforma LAMP ó WAMP, pero en este caso (por exigencia de la plataforma WebMatrix), el proyecto se presenta 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 del ejercicio al llamarlo desde la barra de direcciones de nuestro navegador usando "http://localhost/WebMatrix/Int-Google01", y esto ocurre porque el archivo inicio del ejercicio, es en este caso también "index.html", el cual como debemos tener presente, es de ejecución automática al llamar a la carpeta que los contienen...

Int-Google01-ExtJs4.rar ( 1.2Mb ), Este código corresponde a nuestro mismo "codelab", pero la codificación utilizada corresponde a ExtJs4 versión Ext-4.0.7, vigente al 15/12/2011, la cual en esta oportunidad deberá "descargar" de la pagina oficial de sencha y copiarla en su servidor local de pruebas (en nuestro caso "D:\_Appserv\www\ext-4.0.7" ...por poner un ejemplo, ruta que debemos considerar en la importación de las librerias ExtJS en "index.html"). Este codelab corresponde a nuestras experiencias de migración a código ExtJs4, y realmente tuvimos varios obstáculos que superar pues ExtJs4 es bastante diferente a Ext-3.x; pero consideramos que ExtJs4 es un gran esfuerzo de sencha.com para integrar toda la tecnología de Desarrollo Web disponible a la fecha ( incluído HTML5 y CSS3, entre otros );y realmente vale empezar a considerar la versión ExtJs4 para nuestros proyectos, mas aún que a la fecha, ya se han corregido varios "bugs" y otras anormalidades observadas, y no dudamos que el producto va a ser muy eficiente como sus predecesoras de la versión Ext-3.x ..aún observamos algunas cosas que no funcionan igual en Google Chrome y Firefox por ejemplo, pero son cosas ahora notoriamente menores y "solucionables" respecto a las versiones anteriores, y el resultado es bastante estable (solo los hemos probado sobre Google Chrome y Firefox reiteramos) ...y en esta oportunidad les mostramos los resultados del uso del novedoso SDK de sencha y para ello, en las fuentes entregadas deben observar con detalle a los archivos index.html e index-prod.html. Al correr el codelab con index.html (de ejecución automática), observarán que el proyecto demora algo al cargar en nuestro navegador.. pero como podrán observar al revisar su contenido que en nuestro desarrollo hemos utilizado el archivo ext-debug.js, el cual nos permite detectar y solucionar todas las declaraciones "require" que necesite nuestro proyecto para la carga dinámica de los componentes de ExtJs que utilizaremos... y por supuesto, al ejecutar el "SDK de Sencha", se crearán los archivos "app-all.js" y "all-classes.js", que contienen los elementos de ExtJs y de nuestro código que necesitaremos para instalar nuestro proyecto para producción... el cual por supuesto será notoriamente de menor peso (hasta mas de 50% menos al considerar únicamente los componentes ExtJs que utilizaremos), también será notoriamente más rápido para su carga y respuesta, e incluso nuestro código utilizado será "ofuscado"... El archivo index-prod no se genera automáticamente y para la prueba deberá llamar directamente al archivo mediante : http://localhost/ExtJs4/Int-Google01-ExtJs4/index-prod.html (en nuestro caso), pero los cambios que deben efectuarse son realmente sencillos, conviene para ello que revisemos la guía ExtJs4 de sencha.com:

http://docs.sencha.com/ext-js/4-0/#!/guide/getting_started

(recomendamos descargar este código en una carpeta independiente a las anteriores que podriamos llamar ExtJs4 por ejemplo).

Int-Google01-MVC.rar ( 1.3Mb ), Este código corresponde a nuestro mismo codelab, pero la codificación utilizada corresponde a ExtJs4 utilizando la arquitectura MVC de aplicaciones, la cual es ampliamente recomendada para facilitar la comprensión, mantenimiento y re-utilización de componentes de nuestros proyectos, especialmente si se tratase de proyectos grandes, con la participación de varios desarrolladores, los que finalmente deban integrar sus componentes desarrollados para la elaboración del producto. El ejercicio nos muestra que realmente podemos "desagregar" nuestro proyecto hasta el nivel que querramos... y en nuestro caso, hemos presentado los "models" de nuestras extensiones que adecuan nuestra data a "stores" como clases externas de ExtJs, las cuales incluso presentan sus propios "requires" para la correspondiente carga dinámica de componentes de ExtJs. A este punto vale también nuestra recomendación que revisen con detalle la guía ExtJs4 de sencha.com:

http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture

Desarrollo del ejercicio

Luego de descargado nuestro Material de Apoyo, debemos ingresar a las carpetas que se han creado y con nuestro editor de preferencia (como Notepad+ u otros), como primer paso, revisar con detalle el contenido del archivo "index.html" , que corresponde a los archivos principales de ejecución automática de cada proyecto al ingresar con nuestro navegador a la carpeta que los contienen (ó el archivo 01.GVisualization-sample.html para el caso del primer código, que no es de ejecución automática y debemos seleccionar para su ejecución). Ya dentro de nuestro archivo "html" debemos prestar atención a las etiquetas "link" y "script" que nos permiten "importar" y utilizar en nuestros proyectos, a los componentes y clases javascript del framework ExtJS (como los archivos ext-all.css ó ext-all.js entre otros según la versión ExtJS que trabajemos) ..Debemos entonces verificar que las "rutas relativas" desde la carpeta "www" de nuestro servidor sean correctas (las que corresponden a la dirección "http://localhost" de nuestro navegador) ..y listo. Ahora si con nuestro navegador ingresamos a "http://localhost", y luego a la carpeta "Int-Google01" ( ó las carpetas "WebMatrix/Int-Google02", "Int-Google01-ExtJs4" ó "Int-Google01-MVC" donde hayamos descargado nuestro material de apoyo), debe aparecer una pantalla como la que se muestra a continuación:

Esto nos indica que nuestra descarga y configuración de nuestra copia ha sido correcta (y que las rutas indicadas para la importación de las librerías de ExtJs tambien lo son), y ya estamos listos para revisar el material de apoyo instalado en nuestro codelab.. y descubrir como hemos empezado a Integrar ExtJs con Google.

Nota1.- 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 descargada en una ruta diferente de la indicada en nuestro archivo HTML (..nuestro código proporcionado en la primera descarga, como podrá observar, esta configurado para trabajar con la versión extjs-3.3.1, y por supuesto ya hemos verificado que esta versión es completamente compatible con la última versión ExtJs-3.4 que es la recomendamos debe utilizar). Reiteramos que no olvide verificar las rutas relativas a "www" de nuestra carpeta AppServ sean correctas a las indicadas en las directivas de nuestros archivos "index.html", ó el archivo script 01.GVisualization-sample.html para el caso de la primera descarga.

Nota2.- si va a realizar directamente sus pruebas sobre un servicio de Hosting Apache-PHP-MySQL externo -como www.x10hosting.com u otro- Cerciórese primero de registrar correctamente su dominio; y asimismo de Registrar su propia API Key de Google Maps (si sigue el enlace indicado observará que para acceder a una API Key de Google Maps deberá indicar la dirección web de la website donde será empleada, por supuesto que Ud. podrá registrar varias website o dominios si es necesario), caso contrario, la API de Google Contacts al acceder a su pagina le mostrará respectivos mensajes de error y no le permitirá el acceso a su aplicación; pero en caso de servidores locales Google permite el uso de cualquier API Key registrado con su cuenta Google o cualquiera de las API "públicas" que se utilizan en el Google Code Playground, como es el caso que se utiliza en el material de apoyo de nuestra descarga)

Nota3.- Obsérvese que la API de Google Contacs se encuentran definidas en http://www.google.com/jsapi, y no requiere de un registro personalizado como en el caso de Google Maps (lo mismo ocurre con la API Ajax de Google -para usar Javascript y sus framework como JQuery, Dojo, Prototype, etc- , así como Google language, Google Search, Blogger, entre otros (herramientas que utilizamos incluso en el desarrollo de este Blog), y para lo cual se necesita registrar un API Key personalizado asociado al dominio donde se colgara nuestra aplicación, y para obtener estas API Keys solo es necesario como requisito tener una cuenta Google (refiriéndonos por ejemplo a una cuenta gmail)

Detalle del Modulo.

1. Para poner en funcionamiento el modulo necesitamos en primer lugar, tener una cuenta activa en Google, si no tenemos una, pues sigamos las indicaciones de la pantalla de acceso de Google Accounts, luego de haber seleccionado la opción "login", y así tener acceso a las opciones del módulo, y observar su funcionamiento.

Si desea revisar algo de teoría respecto a Autenticación de Cuentas Google ya les había sugerido revisar el siguiente link que emplea Javascript para dicho propósito:

http://code.google.com/intl/es-ES/apis/gdata/docs/js-authsub.html

NOTA IMPORTANTE :

Resulta que, si siguen el enlace indicado, podrán observar que el sistema de autorización "AuthSub for JavaScript" de Google ya no se encuentra disponible, 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_01.js

TRABAJANDO CON OAUTH 2.0 :

por supuesto, a la brevedad trataremos de actualizar todos nuestros códigos para que trabajen con el protocolo OAuth20, pero como adelanto tenemos este código y su demo 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 IntGoogle01-Oauth demo (New!) .
the demo may prompt popup window (you must enable it)

IntGoogle01-OAuth20.rar ( 2.06Mb ), Este código corresponde a nuestro mismo codelab pero adecuado al protocolo OAuth 2.0 version 2, 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 autenticacion y autorización para acceder a nuestras cuentas y poder utilizar las API de Google, por ello hemos adecuado nuestro codelab a dicho estandar 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 actualizacion a la API v.3)..por supuesto, al trabajar con nuestro servidor local "localhost" no se presentan problemas.. el asunto es, como indicamos, al cargar nuestros proyectos a un servicio de hosting externo cualquiera.. como Godaddy, HostGator, myHosting, otros ó sobre plataforma GAE (Google App Engine), que es donde esta corriendo nuestra demo..

2. Al revisar con mayor detalle los archivos desempaquetados de nuestro material de apoyo encontraremos los siguientes archivos:

01.GVisualization-sample.html (ó index.html), que contiene las instrucciones y etiquetas HTML necesarias para "llamar" a los componentes del framework ExtJs y a las API de Google, entre otras importaciones y configuraciones.
MenuGVisualization_01.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.
GoogleCharts.js, que contiene las instrucciones Javascript en ExtJs, que nos permiten visualizar, en esta primera parte del proyecto, data asignada en simples "array", pero utilizando las Visualizaciones Google, que representará para nosotros, nuestro primer 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
GVisualizationMaps.js, que contiene las instrucciones Javascript en ExtJs que construyen la "extensión" que nos permiten utilizar Google Maps sobre ExtJs
carpeta icons, que contiene archivos gráficos GIF, PNG que utilizamos en este ejemplo.

En nuestro archivo HTML resulta curiosa la instrucción mediante el cual, cargamos sin mayor propósito un archivo gráfico (en este caso "icons/mypic.gif", aunque pudo ser cualquier otro), y esto es porque uno de los requisitos para la autenticación de una cuenta, es brindar a Google un objeto que pertenezca al entorno del servidor que esta solicitando el servicio de acceso, para identificar su ubicación y detectar si la ruta del mismo se encuentre registrada, caso contrario emitirá un mensaje de seguridad al respecto, pero nos permitirá continuar; pero de eliminarse esta línea, Google sencillamente emitirá un mensaje de error y abortará el proceso.

3. Cabe resaltar que en este proyecto estamos utilizando métodos de desarrollo que emplearíamos en proyectos reales como es el uso de "namespace", compartiendo las aplicaciones en diferentes archivos js (imagínense si todos nuestro código lo escribamos en un único archivo js. sería inmanejable), así como mostramos el uso de extensiones, funciones "xtype", manejo de "regiones" y viewports, entre otros puntos cuyo detalle podemos revisar en diversos capitulos del Curso ExtJs de Quizzpot..

4. En el archivo "01.GVisualization-sample.html" (ó archivos "index.html" según nuestra descarga), se encuentran comentadas casi todas las líneas explicando paso a paso que realizan, especialmente las empleadas para la importación de las librerías del framework ExtJs, y las correspondientes a las API de Google.

5. En el archivo "GoogleCharts.js", se encuentran detalladas cada una de las funciones llamadas desde "MenuGVisualization_01.js", que muestran el código de cada Visualización Google empleada, y entre ellas tenemos:

Integracion.Google.GoogleTable, que muestra un simple "grid" a partir de un store elaborado por un array de datos que muestra los nombres de los empleados de una empresa (tabla que despues utilizamos para mostrar como integrar una visualización tipo organigrama utilizando esta misma data) ..debiendo indicar que todas las opciones vigentes para la Visualización Table de Google, se encuentran detalladas en :

http://code.google.com/intl/es-ES/apis/visualization/documentation/gallery/table.html

Integracion.Google.lineChartLink, que muestra un simple "LineChart" elaborado a partir de otro store elaborado a partir de las compras y ventas por años de una empresa cualquiera, cuyas opciones de configuración, métodos, manejo de eventos y otros aspectos de esta visualización de Google, los que se encuentran detallados en :

http://code.google.com/intl/es-ES/apis/visualization/documentation/gallery/linechart.html

Integracion.Google.pieChartLink, que muestra un "PieChart", cuyas opciones vigentes de configuración, manejo de eventos y otros aspectos se encuentran detalladas en :

http://code.google.com/apis/visualization/documentation/gallery/piechart.html

Integracion.Google.gaugesLink, que muestra ejemplo de uso de Gauges, y cuyas opciones vigentes de configuración y manejo de eventos encuentran detalladas en :

http://code.google.com/intl/es-ES/apis/visualization/documentation/gallery/gauge.html

Integracion.Google.intensityMapLink, que muestra un ejemplo de uso de Mapas mundiales con "carga de data"... cuyas opciones de configuración y detalle vigentes para esta visualización se encuentran detalladas en :

http://code.google.com/apis/visualization/documentation/gallery/intensitymap.html

Integracion.Google.orgChartLink, que muestra un ejemplo de "Organizational Chart" cargado sobre la misma data que se uso en la primera visualización Table, y dividiendo el sector en 02 regiones, y con el adicional de mostrarnos una introducción del manejo de eventos (nótese que al seleccionar un nombre de organigrama se selecciona también su correspondiente en la Tabla, y viceversa). Todas las opciones de configuración y detalle de esta visualización se encuentran detalladas en :

http://code.google.com/intl/es-ES/apis/visualization/documentation/gallery/orgchart.html

Integracion.Google.myGoogleMaps, que nos muestra un ejemplo de uso del API de Google Maps, y que al ser tratada como una visualización, nos muestra como utilizarlos dentro de paneles ExtJS, y a los que se ha adicionado una simple barra de botones para agregar algun plano adicional ó una Visualizacion StretView, cuya forma de construcción, configuración, manejo de eventos y otros conceptos son detallados en la documentación del API de Google Maps, la que podemos revisar en :

http://code.google.com/intl/es-ES/apis/visualization/documentation/gallery/map.html

Cabe reiterar asimismo, que para poder utilizar Google Maps hay que utilizar una API Maps Key, y que preferentemente deba ser propia (para que Google nos registre, mida la cantidad de uso de nuestras aplicaciones y "nos vaya reconociendo")... la API key que estamos utilizando en este codelab corresponde a una API Key "pública" tomada de los ejercicios del Code Playground la que debe funcionar sin ningun problema en nuestros servidores locales.

Estas son solo alguna de las opciones de Visualización Google que les estamos presentando, pero en realidad Google tiene varias opciones que vale la pena revisar en :

http://code.google.com/intl/es-ES/apis/visualization/documentation/gallery.html

Por supuesto que ExtJs tiene sus propias visualizaciones, y algunas son muy interesantes y potentes, como es el caso de las opciones de "agrupación" y "filtrado" de Tablas (que mostraremos posteriormente en nuestro siguiente "codelab"), pero es interesante mostrar que podemos Integrar las opciones Google dentro de ExtJs sin mayores contratiempos, y ello lo efectuamos a través de las "extensiones" detalladas en :

GVisualizationPanel.js, para las Visualizaciones Google en general (compatible para utilizar con cualquier visualizacion detallada en la galería indicada), y cuyas generalidades de implementación, sin considerar ExtJs, podemos empezar a revisar en: http://code.google.com/intl/es-ES/apis/visualization/documentation/index.html

GVisualizationMaps.js, para la Visualizacion de Google Maps en particular, por cuanto esta es una implementación del API de Google Maps, cuyas generalidades podemos empezar a revisar en: http://code.google.com/intl/es-ES/apis/maps/

Algunas conclusiones

Esta es la primera parte del proceso de Integración Google utilizando al entorno de desarrollo del framework ExtJs, y su objetivo es mostrar que dentro del entorno Google es posible utilizar nuestras cuentas (direcciones de gmail en este caso), como nombre de usuario - con su respectivo password - para poder tener acceso a nuestros proyectos (a nuestro modulo de visualizaciones en este caso), del mismo modo como lo hacemos con nuestros programas y sistemas de escritorio, algo que debemos tomar muy en cuenta cuando se trabaja por ejemplo con "Google Apps", que es actualmente una opción que esta empezando a ser muy utilizada por empresas y organizaciones de todo tipo. Asimismo, este ejercicio permite mostrarnos un modelo simplificado de un Menu Tree-panel bastante utilizado en desarrollos web.

En nuestro próximo ejercicio detallaremos como Integrarnos con Google utilizando Google Spreadsheets como fuentes de datos (hojas de calculo), con un caso practico que nos permita empezar con el manejo de "datasources" y bases de datos de uso más difundido como MySQL u otros.

y finalmente como podrán observar, nuestro codelab esta completamente desarrollado con herramientas Javascript, y en particular, en nuestro código que muestra el uso del protocolo OAuth 2.0 utilizamos las siguientes herramientas:

Google API Javascript Client
JQuery framework
ExtJS framework
Google API Visualizations
algunas herramientas de Geolocalización básica, como Atlas geolocation service y YQL service, que podríamos afinar incluso utilizando HTML5 Geolocation (pero este ultimo caso también requiere autorización del usuario)

Que ventaja obtenemos? ..teniendo toda nuestra información requerida en la capa cliente (variables javascript en este caso), podremos "grabarla" en la base de datos de nuestra elección, y utilizando un lenguaje de programación de lado del servidor de nuestra preferencia (PHP, Java, Python, nodeJS, DART, Go, otros.)..vale decir, crear nuestra "comunidad" anexa a nuestra organización empresa ó emprendimiento; y empezar a interactuar con ella.. y por poner un ejemplo, en nuestro caso, al tratarse nuestro proyecto de una comunidad bastante especializado, que tal vez no llegue a millones de usuarios, ó que definitivamente tomaría bastante tiempo para llegar a ese nivel, hemos elegido como Back-End: Google Apps Script(GAS) y las Google Spreadsheets.. vale decir, cada vez que un usuario se registre en nuestros demos, su información básica de contacto será grabada en una hoja de calculo con una capacidad de almacenamiento máxima de 400,000 celdas vigente en el momento, suficiente para iniciar nuestra primera experiencia Social Media management con nuestros propios seguidores..

Saludos
@Mlaynes

Opina en nuestro foro §FB..!

Google busca bronca

2010-03-13T14:27:00.000-05:00

Recuerde que..

Un comentario respecto al articulo "Google busca bronca" escrito por Sergio LLerena, y publicado por la revista Somos del diario ElComercio, Lima PE..

Aunque el articulo hace más referencia respecto a lo que son los navegadores (los que son nuestra puerta de entrada a Internet), pues tanto Google como Microsoft no solo desarrollan navegadores, pues como algo se menciona, también estamos hablando de sistemas operativos (Windows 7 vs Chrome OS), suites (MS-Office vs Google Docs), redes sociales (Windows Live vs Google Buzz), lenguajes de programación (VB, .Net, ASP vs Go, Phylon, Android, y todo el mundo de desarrollo opensource: como HTML, Java, PHP, Javascript, etc. de los que Google es un verdadero promotor), y muchos otros productos .. pues es importantísimo resaltar que mientras Microsoft es software "propietario", por lo que hay que pagar para poder utilizarla; pues Google Inc. es una marca registrada cuyos productos informáticos en su mayoría operan bajo licenciamiento opensource o de código abierto, es decir, por lo que "no tenemos que pagar para poder utilizarla", y como ya es una realidad, resulta estupendo ver como dicho software, es tanto o mejor que por los que teníamos que pagar.

Y bueno, bajo estos conceptos, esto no solo es una pelea.. sino una verdadera guerra por la supervivencia; Google, como indica el articulo, no solo es un producto post-Internet, sino que, como Facebook, Twitter, Netlog, etc. y miles de proyectos (en la destaca por brillo propio el proyecto GNU/Linux y sus múltiples distribuciones), todos ellos son hijos de la "era opensource" (que poco o nada utilizan de la tecnología microsoft), y no les interesa y no les resulta necesario cobrar a sus "usuarios", por el contrario, los invita a participar en sus desarrollos y pruebas, y por supuesto que tienen ingresos. Google es también un gigante multimillonario, pero su negocio no es vender software, sino publicidad, aunque ahora le entra a todo lo que es tecnología, incluido las comunicaciones (telefonía celular), la energía, y un largo etc..

El mundo de la informática ha cambiado y va a seguir cambiando nuestras formas de ver el mundo y "hacer negocios", pero creo que ya es hora que se empiece a tomar en serio al mundo del software libre, que se mueve muy bien dentro del ambiente universitario (ya se merece su artículo!!), en donde quienes participamos de este enfoque, nos preocupa más investigar, desarrollar, promover y mejorar aplicativos que sean "útiles" para su uso comercial, social, gubernamental ó lúdico, sin pensar si nos alcanza la billetera para adquirir las herramientas para poder crearlas.

Un avance de Integración a Google

2010-03-13T04:00:00.000-05:00

Recuerde que..

Habiendo revisado con mas detalle lo correspondiente al mundo Google, observo que para facilitar su aprendizaje e integración al mundo Web, podría ser conveniente seguir los siguientes pasos:

1.- Aprender ahora si a utilizar las API Ajax de Google
Las API AJAX de Google nos permiten crear sitios web completos y dinámicos utilizando únicamente Javascript y HTML. Pudiéndose insertar mapas, graficos o un cuadro de búsqueda dinámico en tu sitio web, o descargar feeds con tan solo unas líneas de JavaScript:

para revisar las diferentes opciones ofrecidas:

https://developers.google.com/products/

para revisar la parte práctica :

http://code.google.com/apis/ajax/playground/

Para que hagamos nuestras pruebas, solo basta con copiar los archivos html que nos presenta el Code Playground de Google, y grabarlos con nombres apropiados en una carpeta que podríamos llamar "Apicode" dentro de "www" de nuestro servidor local ( htpp://localhost ), y ejecutarlos con nuestro navegador, como hacemos con los ejemplos del curso ExtJs de Quizzpot.

El Code Playground de Google es también bastante interesante porque tiene entre sus opciones la posibilidad de cambiar el código y hacer nuestras propias pruebas desde el mismo entorno Playground, y no presenta mayores dificultades para su manejo y comprensión; no ocurre lo mismo con el entorno de desarrollo de Gadgets de Google GGE (el Google Gadget Editor), el cual si es un poco problemático para usar, y que espero que cuando veamos las API Gadgets de Google, pues ojala haya mejorado algo, bueno.. tambien algunos tips para trabajar y no tener mayores problemas.

2.- De las API Visualization de Google en particular resulta interesante observar que se puede integrar estas visualizaciones (Herramientas de Google Charts), a diferentes fuentes de datos, lo que podemos revisar con mas detalle en:

https://developers.google.com/chart/interactive/docs/dev/implementing_data_source/

...pero como tal vez nos resulte un poco complicado entender todas las opciones de fuente de datos disponibles para investigar, y tal vez sea conveniente empezar utilizando "spreadsheets" (hojas de Cálculo) de Google Docs como fuente de datos :

https://developers.google.com/chart/interactive/docs/dev/implementing_data_source/

3.- Después de revisar toda lo indicado en el punto anterior, resulta necesario probar algunos ejemplos para ver como implementar una fuente de datos, y como ya hemos sugerido resulta más fácil y conveniente empezar utilizando Spreadsheets de Google Docs como fuente de datos, así que revisemos con detalle los siguientes ejemplos del Code Playground :

http://code.google.com/apis/ajax/playground/?type=visualization#data_source_request

http://code.google.com/apis/ajax/playground/?type=visualization#using_the_query_language,

http://code.google.com/apis/ajax/playground/?type=visualization#more_query_options, aunque esta ultima opción utiliza formatos predeterminados de Google.

El empleo de las Hojas de Calculo Google resulta bastante interesante por cuanto, en primer lugar, son ejemplos sencillos y fáciles de probar (sin necesidad de haber instalado un motor de base de datos como MySQL, SQL Server, Firebird, Oracle, etc); y con ella también podemos fácilmente crear nuestras propias tablas en Google Docs, y utilizarlas en nuestras pruebas (y así podremos realmente observar la funcionalidad de utilizar Google Spreadsheet como fuente de datos); y en segundo lugar, porque para un pequeño negocio, facilmente se puede llevar su manejo administrativo empleándolas en lugar de base de datos como MySQL, SQLite, PostgreSQL, Oracle o SQLServer; cuya integración para su uso son algo más complejos, y fácilmente ya podríamos iniciarnos en el manejo de aplicaciones comerciales prácticas y sencillas, que bien ya podríamos implementar.

4.- Ya en este punto resulta necesario empezar con una revisión de la API de Cuentas de Google por lo es bueno ir leyendo:

https://developers.google.com/accounts/

Esto con el objeto de aprender a utilizar nustra Cuenta Google para Autenticarnos y Autorizar el acceso o uso de nuestros datos personales, el acceso a nuestras aplicaciones, a nuestras hojas de calculo y otros, a los que se debe permitir su uso ó ser revisadas, solamente por las personas quienes se les quiera dar acceso (además de compartir tablas con atributos de modificación o solo lectura dentro de los entorno de Google Docs ó Google Apps), resultando con todo ello que nuestras aplicaciones sean mas interesantes.

Téngase presente que a este nivel, ya nos resulta imprescindible tener nuestra Cuenta Google propia (la podemos crear utilizando nuestra cuenta hotmail u otra que utilicemos, pero conviene una gmail por cuanto nos permite el acceso a todas los elementos y herramientas de Google+), por lo que es recomendable crear una cuenta "gmail" nueva, con nuestro nombre y datos verdaderos, diferente a las que tengamos para otros usos, y anexar nuestras otras cuentas a esta nueva cuenta.

Anteriormente, era importante prestar bastante atención en revisar lo correspondiente al Protocolo de Uso de AuthSub en la Biblioteca de datos de Google de JavaScript de cliente, en el siguiente link:

http://code.google.com/intl/es-ES/apis/gdata/docs/js-authsub.html

..pero como podrán observar, este servicio ya no se encuentra disponible, y esto porque Google, en una gran cambio que ha efectuado respecto al manejo de sus cuentas, a implementado como elemento principal de toda su plataforma, el uso del protocolo OAuth (OAuth v2.0 en particular), por lo que muchos otros protocolos implementados anteriormente por Google ya han sido descartados.. pero Oauth v2.0 no solo esta disponible para diversos clientes como PHP, Java, Python, Go, NodeJS.. sino que también para Javascript, lo que nos permite su uso por el front-side en cualquier aplicación o desarrollo web, por lo que conviene empezar con revisar el siguiente enlace:

https://code.google.com/p/google-api-javascript-client/

Bueno, a estas alturas ya nos debe resultar mas sencillo comprender todo el manejo del entorno de Google en lo que respecta a sus herramientas e integracion a aplicaciones Web... las que iremos profundizando poco a poco en los siguientes posts, donde les voy a presentar un ejemplo, completo y sencillo que ya tengo casi terminado, de como integrar todas estas herramientas de Google dentro de una aplicación desarrollada con ExtJS, que incluya autenticacion de cuenta Google (para acceder al modulo), empleo de visualizaciones Google dentro de paneles ExtJS, empleo de Spreadsheets, uso indistinto de Grids Google y Grids ExtJS, utilizando por el momento a Google Spreadsheet como fuente de datos.

Pero no se preocupen si por ahora solo estamos utilizando las hojas de calculo de Google para empezar nuestro proceso de integración a integrarnos a Google; también vamos a presentar más adelante, un ejemplo detallado y sencillo de conexión utilizando como back-end PHP-MySQL, Java-MySQL, utilizando el datastore "big table" de la plataforma Google App Engine (GAE); y para lo cual utilizaremos la fuente de datos que instalaremos en nuestro Servidor Local de Pruebas, como Appserv (vea el post "empezando desde cero"), y otros que iremos descubriendo..

Como siempre no duden en postear cualquier inconveniente o interés que tengan.. y comentarnos sus pruebas y desarrollos, ahora en nuestras cajas de comentarios Facebook que hemos añadido a cada una de nuestras entradas.

Opina sobre las herramientas y API de Google

El potencial de ExtJS

2010-03-12T12:45:00.001-05:00

Recuerde que..

Si Ud. amigo lector ha revisado los post anteriores y han empezado con el Curso de EXtJS que nos brinda Crysfel Villa en su página web del Quizzpot, pues entonces creo que resulta necesario que puedan observar porque realmente nos resultó interesante ExtJS y lo consideramos un framework bastante importante...

Cursos Ext-3.x del Quizzpot :

Curso ExtJs-3.x en español : http://tinyurl.com/d4x75u
ExtJs-3.x Course in English: http://tinyurl.com/885v8w4

A estas alturas, ya deben haber instalado su servidor Apache+MySQL +PHP+PHPMyAdmin y debe estar en funcionamiento, por lo que al ingresar "http://localhost" en la barra de direcciones de su navegador les debe aparecer lo siguiente:

Dicha imagen nos indica que nuestro servidor local esta funcionando sin mayores contratiempos.. y aparece así porque en la carpeta "www" de c:/Appserv (o la carpeta donde hayamos elegido instalar nuestro servidor), están los archivos index.php y phpinfo.php; resulta necesario aclarar, si aún no es de su conocimiento, que los archivos "index" (sean php, html, entre otros), son de ejecución automática cuando se ingrese a las carpetas que los contienen, porque así puede ser configurado por defecto (el standard es index.php), lo que podemos comprobar empezando a examinar la información que nos presenta el link "PHP Information" de la pagina mostrada en la figura...

Si no desea que aparezca esta pagina al ingresar a nuestro servidor local ("localhost"), pues sencillamente ingrese con su explorador a la carpeta en "www" y renombre index.php por Server.php por ejemplo.. y con ello lograra que cuando ingrese a "localhost" aparezca directamente el directorio del servidor (como aparecen en el Curso ExtJS de Quizzpot).

No le recomendamos eliminar esos archivos, por cuanto nos van a ser útiles cuando queramos trabajar con la base de datos MySQL ( y utilicemos PHPMyAdmin para administrarla), ó cuando queramos ver o revisar la configuración de nuestro servidor Apache y de PHP ( mediante PHPInfo.php, ...pero ténganse en cuenta, que para ingresar a los servicios del servidor, debe ahora hacer click en el ahora archivo Server.php (o abrirlo en otra pestaña).

Si ya han seguido y probado los primeros capítulos del Curso de ExtJS, y siguiendo las recomendaciones de Crysfel, deben haber bajado la ultima versión de ExtJS de su pagina oficial, aunque debo reiterarles que la ultima versión compatible 100% con la versión ExtJs utilizada en el primer curso de Crysfel es la versión ExtJs-3.4.0, y es en la que debemos utilizar y copiar en nuestra carpeta "Ext-3.4.0" los archivos básicos de ExtJs indicados en el curso (si queremos que los ejemplos funcionen tal como están). Cabe indicar asimismo que los capítulos iniciales del curso y de manejo básico del framework funcionan tal como están con ExtJs3 y ExtJs4 (por cuanto ExtJs4 reconoce las formas basicas de declaración de clases de Ext-3.x), aunque esta ultima versión sugiere una implementación MVC, y una forma de declaración de componentes de ExtJs orientada a agilizar la carga de los mismos.. y bueno.. nuestra recomendación al respecto es que el curso lo trabajen con la versión Extjs-3.4.0 y sencillamente a la hora de importar la biblioteca de ExtJs en nuestras aplicaciones o ejemplos, reemplacemos la ruta de ExtJs-2.2 que indican en el tutorial de Crysfel, y pongamos el nombre de la carpeta que corresponda a la versión de ExtJs-3.x que estemos utilizando...

Asimismo, también les recomiendo crear en la carpeta "www" de nuestro servidor Appserv, una carpeta que podriamos llamar GoogleCode, y en donde podríamos guardar nuestros propios archivos HTML que podamos copiar los ejercicios del Code Playground de Google y probar en nuestro propio servidor las herramientas y API de Google que queramos integrar a nuestros desarrollos Web, e inclusive por supuesto a nuestros desarrollos con ExtJs.

Pero hoy les propongo hacer algo más interesante... cuando hayamos bajado nuestra versión de ExtJs (la versión ExtJs-4.0.7 vigente al 02/01/2012, la versión ExtJs-4.1 aún esta en su etapa "beta" ), probablemente la hemos hecho en una carpeta cualquiera.. y de allí hayamos copiado los archivos como nos indicó Crysfel en la carpeta "Curso"... pues, mejor copiemos toda la carpeta que contiene todo nuestro ExtJs que hemos bajado también en "www", siempre revisando la web oficial de ExtJS para asegurarnos que estemos trabajando con la ultima versión vigente de ExtJs

Ingresemos ahora a nuestro navegador y en la barra de direcciones coloquemos los links:
localhost/Ext-4.0.7 (o la versión que hayamos bajado), y revisemos allí su opción "View the Examples", equivalente a la ruta: localhost/Ext-4.0.7/examples

Si no tenemos algun contratiempo debemos observar la web de ejemplos de ExtJS correspondiente a la versión que estemos utilizando... si es la última versión debe coincidir con la que muestra ExtJS en su pagina oficial:

http://www.extjs.com/deploy/dev/examples/

Si observamos la barra de direcciones de nuestro navegador de nuestra primera carga, nos daremos cuenta que hacemos referencia a archivos grabados en nuestro disco (como puede observar estimado lector, toda la web oficial de ExtJs ha sido programada íntegramente en ExtJs, y la parte correspondiente a los ejemplos, la tenemos ahora grabada en nuestro disco); y sabiendo cuales son esos archivos, sencillamente los podremos revisar, copiar, modificar y utilizar durante nuestro proceso de aprendizaje... y de paso, observar las equivalencias y diferencias entre el código ExtJs-3.x del tutorial del Quizzpot, con el código de la versión ExtJs4, y así poder actualizarnos y realmente observar todo el potencial de éste framework, y que lo hace sumamente útil para desarrollar aplicaciones administrativas de "apariencia" similar a los que nos presentan cualquiera de los lenguajes de desarrollo convencionales, con el uso de ventanas, menús, grillas, formularios, etc... pero integrado completamente a la web.. y a bases de datos... asimismo, ExtJs abarca y hace posible el desarrollo de opciones que observamos en las mejores paginas web.

Ahora si revisamos las muestras nos encontraremos que varias de ellas nos permiten trabajar con pantallas muy similares a cuando hacemos nuestros desarrollos para sistemas de escritorio con ventanas, grids, forms, manejo de eventos, etc.. vale decir, todo lo necesario para empezar a desarrollar "sistemas" todo a la Web !

Algo similar ocurre si en lugar de utilizar ExtJs-4.0 empleamos la ultima versión de ExtJs-3.4 disponible, y cuya link hemos indicado, y observar la documentación de la versión y los ejemplos que nos muestran bajo el codigo de la version ExtJs-3.x, y que son equivalentes a los utilizados en el Tutorial de Crysfel, pero cabe dar una revisión a las características y mejoras de ExtJs-4.0, y empezar tambien nuestras pruebas bajo esta versión.. que nos presenta varias ventajas que para nosotros desarrolladores Web debemos empezar a revisar, pues nos permite un mejor manejo interno de los componentes del framework, y por supuesto, una increíble mejora de nuestro potencial de programación.

NOTA IMPORTANTE: Si deseamos empezar a trabajar con ExtJs4 y empezar a utilizar esta versión con los ejercicios propuestos por el Curso ExtJs-3.x de Quizzpot, debemos tener presente que para crear nuestra versión "liviana" de ExtJs4 debemos copiar dentro de una carpeta ExtJs-4 el archivo ext-all.js y la carpeta resources de nuestra fuente descargada de ExtJs4. Asimismo, para la importación de las librerías de ExtJs4 solo es necesario importar a ext-all.js mediante en siguiente script que va dentro del Head de nuestra aplicación:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Ext.Panel</title>
  <!-- Importar los estilos -->
  <link rel="stylesheet" type="text/css" href="../js/Ext/resources/css/ext-all.css" />

  <!-- Importar el ext-all-dev.js -->
  <script type="text/javascript" src="../js/Ext/ext-all-dev.js"></script>

  <script type="text/javascript" >
      Ext.onReady(function(){
          alert("ExtJs4 esta instalado correctamente!");
      });
  </script>
</head>
<body>
<div id="center">
<h1>Bienvenido ExtJs4...</h1>
</div>
</body>
</html>

(en la versión ExtJs4 ya no existe ni es necesario importar el "adapter")

Nota:


Curso ExtJs4 en español: http://tinyurl.com/bvh6kte 
Curso ExtJs4 in English :  Under Construction..!

ExtJs es un framework de Javascript realmente potente.. y por eso mi interés de integrarlo con el mundo Google, el cual también es bastante importante... además, si han revisado los primeros links presentados referidos al mundo Google, deben notar que ExtCore esta completamente integrado a Google a través de sus API de Biblioteca AJAX; por ello los invito a bajar ExtCore y grabarlo también en "www", y observe los ejemplos que nos presenta... ExtCore no ocupa mucho espacio de disco y presenta algunos ejemplos interesantes que podemos probar y unir a nuestros proyectos...

El Potencial de ExtJs4

desde este 2011 Sencha lanza al mercado ExtJs4, y realmente esta si es una gran renovación y cambio de conceptos respecto a las versiones ExtJs-3.x..anteriores; y los cambios se plantean desde de los propios fundamentos del framework, como es la declaración de Clases y modos de Herencia y Manejo de prototipos, y aunque las formas de declaración y uso de clases de las versiones anteriores son soportadas en ExtJS4....este es realmente the New Way ExtJs4 con evidentes ventajas por supuesto... y es que ExtJS4 busca abarcar todos los conceptos vigentes de Desarrollo Web como es HTML5 y CSS3, y lo que es muy importante, el uso de la Arquitectura MVC para el desarrollo de aplicaciones sustentado en el propio diseño y concepto del framework, y no en el desarrollador como esta planteado en la mayoría de frameworks; lo que facilita su uso en el desarrollo, mantenimiento e integración de componentes en desarrollos grandes, con la participación incluso de varios desarrolladores. Se une a todo lo anterior, el lanzamiento del SDK de Sencha, el cual es una herramienta que nos permite optimizar nuestros desarrollos antes de ponerlos en producción, lograndose que solo se grabe en nuestro "hosting" los componentes de ExtJs necesarios para nuestro proyecto, y "ofuscando": incluso nuestro código, lográndose una notable mejora en el tiempo de carga y respuesta de nuestros desarrollos (hasta 2 veces mas rápido) ..y por supuesto, una mejora del "peso" de nuestras aplicaciones - hasta 50% menos de espacio de disco - y consideramos que todas estas novedades hacen a ExtJs4 un framework bastante importante.

En lo que respecta a estas novedades conviene que revisemos y sigamos con detalle los conceptos expresados en la documentación de ExtJs4 :

http://docs.sencha.com/ext-js/4-0/#!/guide/getting_started

y asimismo, revisemos el resto de temas relacionados al framework, de la misma documentación, especialmente los temas respecto al Sistema de Clases y la Arquitectura MVC para aplicaciones, donde se detalla a manera de codelabs casos practicos para mayor entendimiento de cada tema..

una mirada al mundo ExtJS...

Google como hemos indicado utiliza tambien una version liviana de ExtJS como ExtCore, pero el potencial de este framework radica en que partiendo de las formas de esta librería Javascript se ha desarrollado Sencha Touch, que es una variación de ExtJs especializada para desarrollos web para móviles Apple, iOS y Android, (teléfonos celulares, tablets, pockets, etc.); y lo que es una interesante novedad, ExtJs4 inicia la integración del manejo de ExtJs con Sencha Touch. Asimismo en este framework tenemos Ext-GWT, como un framework especializado para el entorno Java y el desarrollo web usando Google Web Toolkit (Java software development framework); y no debemos perdernos la oportunidad de revisar Ext-Designer (un IDE gráfico para diseño de aplicaciones ExtJs), Ext-Animator y Sencha.io versión beta; y cabe resaltar que con Node.js y el motor V8 ya estamos en el camino para emplear Javascript desde el lado de Servidor (como un back-end con capacidades asincronas de alto rendimiento), y Sencha.com ya esta incursionando por ese lado con Ext-Direct, así que como podrá observarse, aún se espera mucho en el desarrollo de este framework.

En nuestro siguiente post: Integracion Google 1ra. parte, mostraremos como empezar a integrar ExtJs con alguna de las API de Google (en versión ExtJs-3.x y ExtJs4), por lo que si están siguiendo el Curso de Crysfel, los animo a continuar... pues como indique, ese curso es uno de los más completos que hemos encontrado (y bastante practico en lo que respecta a la teoría de manejo de clases asociados a la programación orientada a objetos POO), esto por la forma que esta planteado, y aunque no siempre hay ayudas visuales, pues no se preocupen, si tienen dudas o no funciona algo... posteen en el mismo curso, el foro de Quizzpot, o por nuestro bloque de comentarios facebook si lo desean...los que siempre serán bienvenidos y considerados en lo posible...