octubre 02, 2011

WebMatrix: la plataforma opensource de Microsoft para Desarrollo Web



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

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

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




No hay comentarios: