miércoles, diciembre 04, 2013

Review de Mondrian in Action

Hace unos 20 días aproximadamente comencé con la lectura de Mondrian in Action, libro escrito por William D. Back, Nicholas Goodman y Julian Hyde.



El libro está escrito de una forma muy seria y es muy simple de comprender, en cada capítulo, exceptuando el primero, se define perfectamente el público al cual está orientado. Los públicos posibles son:
✓ Analistas de Negocio
✓ Arquitectos de Datos
✓ Arquitectos Empresariales u Organizacionales
✓ Desarrolladores de Aplicaciones
Y como decía, al inicio de cada capítulo se deja en claro a quién de estos roles está orientado.

Por otro lado los capítulos son casi independientes, o sea, no es necesario leerlos en orden o a todos.

El libro aborda en detalle la versión 4 de Mondrian.

Algo sobre los capítulos:

En el capítulo 1 nos encontramos con el estado del arte en cuanto a la complejidad de generar reportes sobre las bases de datos actuales, las ventajas de los análisis OLAP y argumentos del porqué utilizar Mondrian para llevar a cabo los análisis.

El capítulo 2 nos presenta formalmente a Mondrian y lo contextualiza respecto de las herramientas que lo complementan, también se presenta la base de datos que se utilizará como ejemplo en el libro.

El capítulo 3 nos introduce en los conceptos relacionados con el modelado multimensional, esquemas estrella y diversas técnicas de modelado como: dimensiones de cambio lento (SCD), copos de nieve, dimensión tiempo, dimensiones degeneradas, etc. Este capítulo me ha parecido muy bueno, lo recomiendo ya que "pasa muchos conceptos en limpio" y contiene excelentes ejemplos.

En el capítulo 4 comienza la acción, se crea paso a paso un esquema simple y se explica cada elemento XML, este esquema será extendido y utilizado en todo el libro. Tanto en este capítulo como en posteriores se van explicando las diferencias con las versiones anteriores del motor.

En el capítulo 5 nos explican como van creciendo los esquemas y como mantener varios cubos e implementar diferentes tipos de dimensiones como pueden ser dimensiones compartidas,  dimensiones conformadas, etc. También como almacenar dimensiones de diferentes formas explicando en cada caso ventajas y desventajas. Nos explican también como manejar jerarquías padre-hijo, ragged hierarchies a las que podríamos traducir como jerarquías imperfectas y por último diferentes tipos de cálculos.

El capítulo 6 nos muestra como implementar seguridad basada en roles mediante ejemplos muy didácticos y sencillos, este capítulo desmitifica el siempre ríspido  tema de seguridad en Mondrian.

El capítulo 7 es uno de mis preferidos junto a uno de los últimos, se trata de performance, realmente presenta los problemas y las posibles soluciones de una forma excelente!, no he encontrado en la web ninguna post, ni paper que aúne este tema, centrado en Mondrian por supuesto, de forma tan completa y didáctica. Este capitulo sorprende al final cuando expone temas como Community Distributed Cache (CDC) y varios tips que tienen que ver con Saiku. Recomiendo su lectura.

El capítulo 8 da un paso más allá en el tema seguridad, los autores nos explican como implementar seguridad dinámica desde dos puntos de vista exponiendo sus pros y contras de forma muy clara y precisa, como siempre acompañando cada tema con sendos ejemplos. Nos muestran como implementar procesadores de esquema dinámicos y como restringir los datos mediante la modificación dinámica de roles.

El capitulo 9 nos muestra como se utiliza a Mondrian desde las principales herramientas de explotación de Pentaho, tanto las comerciales como las Open Source, los autores nos dan un pequeño paseo por: Pentaho Analyzer, Saiku, Community Dasboard Framework (CDF), Pentaho Report Designer (PRD) y Pentaho Data Integration (PDI). Nada que un usuario medio de la suite no conozca ya.

El capítulo 10 es el otro de mis capítulos preferidos, definitivamente debido a mi perfil, soy desarrollador. Este capítulo nos muestra con sendos ejemplos, como lidiar con conexiones a Mondrian, obtener metadata, ejecutar sentencias MDX y manejar los resultados, comienza por el camino duro, esto es, puro javascript y luego lo hace implementado xmla4js desde un cliente web, al final nos muestra como implementar clientes java (desktop o servidor) mediante olap4j.

El capítulo 11 ahonda un poco en el lenguaje MDX con buenos ejemplos en posibles escenarios. Este capítulo es muy didáctico aunque muy escueto para mu gusto, esto es, faltaría cubrir algunos escenarios comunes más. Aunque los que están cubiertos son una muy buena propuesta.

Para redondear debo decir que es un excelente libro y que recomiendo sin lugar a dudas su lectura.

Los autores son si duda un trío excelente, uno de ellos es Julyan Hyde el creador de Mondrian.

Saludos

Mariano



martes, noviembre 19, 2013

Especialización en sistemas móviles y aplicaciones de servicios intercativos en red

Estimad@s,

en esta ocasión los quiero invitar a formar parte de la primera cohorte de la "Especialización en sistemas móviles y aplicaciones de servicios intercativos en red" que se dictará en forma presencial en la Universidad Católica de Córdoba.



Este posgrado es como un sueño hecho realidad para mí ya que he formado parte del pequeño grupo que la ha creado. Personalmente he participado en la creación de carreras de grado, años atrás tuve la oportunidad de formar parte del grupo que creó la carrera de Ingeniería en Informática de una prestigiosa universidad, hoy tenemos camadas de egresados de esa carrera cuyo desempeño es brillante en la faz laboral.  Siempre que me ha tocado este rol, he pensado simplemente en "que me gustaría como profesional?" y luego he intentado traducirlo en asignaturas, en este caso he compartido la visión con algunos colegas y hemos creado una carrera pensada en las necesidades de las organizaciones actuales, una de los objetivos de este posgrado es que el estudiante conozca y pueda llevar a la práctica nuevas tecnologías relacionadas con mobile y web.

Brindamos la posibilidad a empresas que formen parte de nuestro posgrado a través de convenios.

Más información aquí.

Para consultas: magm3333@gmail.com

Saludos

Mariano

jueves, octubre 10, 2013

Taller FLOSS Reporting con Pentaho 5 en las jornadas de informática de la UNdeC

Los días 4 y 5 de octubre se realizaron en la Universidad Nacional de Chilecito (UNdeC) las VI Jornadas de Informática y Comunicaciones.

Fuimos invitados a dictar un taller sobre Pentaho Reporting 5, el mismo fue dictado el día 4 con muy alta concurrencia.
Aprovechamos la oportunidad para hablar de nuestro libro y el proceso de construcción. Algunos concurrentes fueron acreedores de copia (gracias Sandy Joseph de Packtpub).

Más información de las jornadas aquí.



Agradezco personalmente a Fernanda Carmona por la invitación y excelente recibimiento.

Saludos
Mariano

jueves, septiembre 12, 2013

Revisión del libro: Instant Pentaho Data Integration Kitchen

Hace unos días he recibido el libro "Instant Pentaho Data Integration Kitchen" para realizar una revisión. El autor del libro es  Sergio Ramazzina.
Hasta el fin de semana pasado no había tenido tiempo de leerlo, al abrirlo me encontré con una obra de unas 70 páginas aproximadamente que constituye una guía con buen nivel de detalle de las herramientas kitchen y pan de Pentaho Data Integration (PDI), o para los más viejos, Kettle.
El libro guía al lector en el aprendizaje de estas herramientas mediante ejemplos prácticos muy simples y concretos.
La ejecución de trabajos y transformaciones dentro y fuera de un repositorio y no son un tabú.
Este libro demuestra la flexibilidad que brindan estas herramientas ejecutadas desde la consola.

Recomiendo la lectura de este libro, más de un usuario habitual de PDI se sorprenderá.

Saludos
Mariano

martes, septiembre 10, 2013

Curso de Pentaho Reporting (100% distancia!)

Hola Estmad@s.

Desde eGluBI, invitarl@s a nuestro nuevo curso online de Pentaho Reporting:


El curso será dictado a través de un aula virtual desde la cual nos encargaremos de guiar el proceso de aprendizaje, como así también de responder todas las consultas que vayan surgiendo.
El curso inicia el 15 de Octubre de 2013 y tiene una duración aproximada de 120hs. Los cupos son limitados así que quien tenga interés, le recomendamos se ponga en contacto o solicite más información a esta dirección: admin@troyanx.com

Saludos

Mariano

martes, septiembre 03, 2013

Seminario: Introducción a METEOR.JS

Martes 10 y miércoles 11 de setiembre. Laboratorio B - Facultad de Ingeniería del Instituto Universitario Aeronáutico
CUPOS LIMITADOS!
Seminario: "INTRODUCCION A METEOR.JS"


- Fecha: 10 y 11 de setiembre, 18 a 22 hs.
- Director: Ing. Mariano GARCÍA MATTÍO.

DESTINATARIOS: Alumnos, docentes, investigadores de las carreras de Sistemas, Informática y afines. Los interesados deberán poseer preferentemente conocimientos de HTML, CSS, Javascript y algoritmia.
OBJETIVOS:
Acercar a los asistentes a las nuevas tecnologías cliente/servidor basadas en Chrome V8 Javascript, particularmente Meteor
- Instalar y ejecutar y realizar tareas rutinarias con Meteor;
- Lograr discriminar componentes del lado del cliente y servidor en Meteor
- Comprender como implementar la programación reactiva en Meteor;
- Comprender el sistema de persistencia de Meteor;
- Generar una aplicación paso a paso en Meteor, en otras palabras, que los asistentes realicen una práctica guiada.
PROGRAMA
Parte I
- Qué es y que podemos hacer con Meteor.js
- Un poco de historia
- Los siete principios de Meteor
- Plantillas y funciones
- Meteor y su base de datos (MongoDB)
- Vistas, planillas y fuentes de datos
- Estilos (Twitter Bootstrap)
Parte II
- Variables de estado y getters para plantillas
- Implementación de la operación CRUD Create
- Eventos
- Relacionar plantillas (master-detail)
- Implementación de la operación CRUD Remove
- Estados de las vistas
- Implementación de la operación CRUD Update
Parte III
- MongoDB embebido en Meteor
- Autopublicacion
- Configuracion de pub/sub
Parte IV
- Estructura de la aplicación Meteor
- Estructura de carpetas
- Seguridad
- Autenticación
- Personalizar resultados
- Modificación de publicación
- Múltiples Cuentas
Parte V
- Paquetes de terceros
- Empaquetado de aplicaciones
- Publicación de aplicaciones en la Web
Certificados: Se entregarán certificados, y para lograr esta certificación los cursantes deberán contar con el 80% o más de asistencia al curso, y haber rendido y aprobado la evaluación final. El curso otorgará 1 crédito para los alumnos de la Facultad de Ingeniería (para todas las carreras) que aprueban el mismo. Los alumnos que deseen la certificación deberán abonar un costo de $65 por certificado.

lunes, agosto 26, 2013

Nuevo libro: Pentaho 5.0 Reporting

Hola gente,

Tengo el agrado de informales que ya está disponible el nuevo libro de Pentaho Report Designer 5!

Lo hemos co-escrito con mi colega y amigo Darío Bernabeu, ha sido una ardua tarea pero ha valido la pena el tiempo y esfuerzo:



Para más detalles acerca de las temáticas tratadas en el libro, se puede seguir este link.

Esperamos sea de su agrado.

Saludos

Mariano

jueves, agosto 15, 2013

Un Chat con Meteor.js (sí, uno más!)

Hola gente,

vamos a desarrollar un chat utilizando Meteor.js

Soy consciente que existen varios ejemplos sobre esto en la web, éste es uno más.
Me he propuesto realizar un chat minimalista que sirva como base para practicar.
Lo sobresaliente de este ejemplo es el poco código que posee.

Iniciamos el proyecto:

mrt create magmchat
cd magmchat
rm magmchat.*
mkdir client server public


Agregamos los paquetes que utilizaremos:

meteor add bootstrap
meteor add accounts-ui
meteor add accounts-base
meteor add accounts-password


Esquema de la página:

A continuación un esquema simple de como se verá la página, es buena práctica definir estos esquemas antes de comenzar a trabajar, luego se simplifica la tarea.



Implementación del esquema:

Archivo: client/magmchat.html

<head></head>
<body>
  <div class="navbar navbar-static-top">
    <div class="navbar-inner">
      <a class="brand" href="http://blog.magm.com.ar" target="_blank">Magm's Chat</a>
      <ul class="nav navbar-nav pull-right">
        <li><a href="#">{{loginButtons align="right"}}</a></li>
      </ul>
    </div>
  </div>
  {{> inicio}}
</body>

El código anterior define la barra de navegación y la posición de widget {{loginButtons}}, al final se renderizará la plantilla {{> inicio}}, en la cual se definirá el resto de la página.

<template name="inicio">
  {{#if currentUser}}
    <div class="row vspace">
      <div class="offset4 span4 text-center">
        <textarea id="texto" rows="5"></textarea>
      </div>
      <div class="span4">
        Instrucciones:
        <ul>
          <li><span class="label label-success">Enter</span>=enviar texto</li>
          <li><span class="label label-success">Ctrl+Enter</span>=nueva línea</li>
          <li>Puede utilizar código html, por ejemplo: Hola &lt;b&gt;Meteor&lt;/b&gt;</li>
        </ul>
      </div>
    </div>
    <hr/>
    <div class="row">
      <div class="offset2 span8">
        {{> chatItems}}
      </div>
    </div>
  {{/if}}
</template>

El código anterior implementa la plantilla inicio, solo se generará contenido si hay un usuario autenticado, a eso lo determina {{#if currentUser}}. El contenido que se crea consta del área de texto con id="texto", el texto de ayuda y finalmente en una nueva fila (en la parte de abajo) se renderiza la plantilla {{> chatItems}}.

<template name="chatItems">
  <ul>
    {{#each entradas}}
      <li class="itemchat">
        <b>{{nombre}}: </b>{{{texto}}}
      </li>
    {{/each}}
  </ul>
</template>

Finalmente la plantilla chatItems en la cual se creará una lista con el contenido del chat. Esta plantilla contiene un bucle each que itera sobre la fuente de datos entradas de la cual hablaremos en breve. La fuente de datos contiene objetos que representan las entradas de chat, cada objeto posee la siguiente estructura:
{
  nombre: 'usuario',
  texto: 'texto de chat',
  timestamp: estampaDeTiempoDeLaEntrada
}
Puede observarse que se muestra el nombre en negrita <b>{{nombre}}: </b> y luego el texto está rodeado por tres llaves {{{texto}}} esto hace que si lo que se mostrará contiene código html, el browser lo interprete como tal.

Estilos personales:

Archivo: client/magmchat.css

textarea{ 
  resize:none; 
  width:100%;
  margin-bottom:10px; 
}

.vspace {
  margin-top:20px; 
}
Se definen las propiedades del área de texto, lo más importante es que ocupa el 100% del espacio horizontal. Luego se crea una clase que impone un espacio de 20 pixeles al objeto al que se le asigne, en nuestro caso se utiliza para crear un separador entre la barra de opciones y el área de texto.

/* para que los items vayan apareciendo en fade */
.itemchat{
  list-style:none;
  margin:0;
  padding:0;
  animation: fadein 1s;
  -moz-animation: fadein 1s; /* Firefox */
  -webkit-animation: fadein 1s; /* Safari and Chrome */
  -o-animation: fadein 1s; /* Opera */
}
@keyframes fadein {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@-moz-keyframes fadein { /* Firefox */
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@-o-keyframes fadein { /* Opera */
  from {
    opacity:0;
  }
  to {
    opacity: 1;
  }
}​
Finalmente se crea una clase que permite a los items de chat aparecer de forma gradual o fadein, la cantidad de texto es para dar soporte a varios navegadores, las reglas   from { opacity:0; } to { opacity:1; } definen el grado de transparencia y de opacidad de inicio y fin, en la clase se define el tiempo, que en este caso es de 1 segundo.

Definición de la Colección (la base de datos):

Archivo: /chat.js

chat = new Meteor.Collection("chat");

Con este simple código que es compartido por cliente y servidor ya que se encuentra en la carpeta raíz /, creamos una colección que Meteor se encarga de persistir y que además informar los cambios a todos los clientes para que aquellas plantillas que la utilicen se actualicen automáticamente, esto es parte de la reactividad.

El código del cliente:

Archivo: client/magmchat.js

Accounts.ui.config({
  passwordSignupFields: 'USERNAME_ONLY'
}); 

El código anterior configura el paquete accounts para que el sistema de login requiera como datos de cuenta un usuario y su contraseña, el almacenamiento y administración es local.

Template.chatItems.entradas = function () {
  return chat.find({}, {sort: {timestamp: -1}, limit: 10});
};

El código anterior define la fuente de datos entradas que se itera en la plantilla chatItems. Solo destacaré que se buscan todas las entradas sin filtro alguno y que se retornan ordenadas por estampa de tiempo descendente, solo se retornan las últimas 10 entradas.

Template.inicio.events({
  "keyup #texto": function (evt, tpl) {
    if (evt.ctrlKey && evt.keyCode == 13) {
      $("#texto").val($("#texto").val()+"\n");
    } else if (evt.keyCode == 13) {
      var val=$("#texto").val();
      if (val.trim().length==0) {
        $("#texto").val("");
        return;
      }
      val = val.replace(/(\r\n|\n|\r)/gm,"<br/>");
      Meteor.call('enviarTexto',Meteor.user().username,val,
        function (error, result) { 
          if (error) {
            console.log(error);
          }
        }
      );
      $("#texto").val("");
    }
  }
});

Finalmente, la última porción de código, es la más extensa, pero no reviste complejidad. Se trata del único evento que se es observado, evento keyup de la caja de texto, si se presiona Ctrl+Enter, se agrega un retorno de carro al texto '\n' y nada más. Si solo se presiona Enter, se obtiene el texto ingresado, si se ha ingresado un texto válido, se reemplazan los caracteres de retorno de carro por la marca html que lo representa <br/>,  luego se llama a un método remoto llamado enviarTexto que recibe como parámetros el nombre del usuario logueado (Meteor.user().username) y el texto. A continuación analizamos la complementación del método remoto.

El código del server:

Archivo: server/metodos.js

Meteor.startup(function () {
  Meteor.methods({
    enviarTexto: function (usuario, txt) {
      chat.insert({
         nombre: usuario,
         texto: txt,
         timestamp: new Date()
      });
    }
  })
});

Como puede observarse, el método es de lo más sencillo, solo inserta en la colección un nuevo objeto con los datos que recibe como parámetros y genera un valor para la estampa de tiempo, este es el motivo principal por el cual se implementa el método en el server, para que la estampa de tiempo sea coherente y no dependa de los valores de tiempo de cada cliente.

Así es como ve:



Conclusión

Eso es todo, con poco código hemos creado un char totalmente funcional, el poder de Meteor para abstraernos de problemas de sincronización y comunicaciones en tiempo real es realmente impresionante.

Pueden descargarse el código fuente desde: https://github.com/magm3333/magmchat
Pueden probarlo en funcionamiento en: magmchat.meteor.com

Espero les sea de utilidad

Mariano

viernes, junio 21, 2013

Personalizar autenticación de Google para aplicaciones Meteor

Hola nuevamente,

seguimos son la autenticación de Google en aplicaciones Meteor, esta vez lo que haremos será personalizar el inicio y cierre se sesión, en otras palabras, nosotros decidiremos cómo y cuando iniciar y cerrar sesión, por ende ya no nos hará falta el módulo accounts-ui

Creamos el proyecto y la infraestructura

Crearemos el proyecto:
meteor create loginConGoogleCustom 
loginConGoogleCustom: created. To run your new app: 
 cd loginConGoogleCustom 
 meteor

Eliminamos todos los archivos del proyecto:
cd loginConGoogleCustom
rm *.js *.css *.html


Creamos la estructura de directorios para componentes de nuestra aplicación:
mkdir client 
mkdir server

Instalamos el módulo de contiene la lógica para trabajar con cuentas de google:
meteor add accounts-google
accounts-google: Login service for Google accounts

Instalamos el módulo que contiene bootstrap: 
meteor add bootstrap
bootstrap: Front-end framework from Twitter 


Creamos los componentes del cliente: 
touch client/index.html 
touch client/index.js 

Creamos los componentes del server: 
touch server/configuracion.js (este archivo es idéntico que el que utilizamos anteriormente)

Iniciamos Meteor: 
meteor 

[[[[[ ~/loginConGoogleCustom ]]]]] 

Initializing mongo database... this may take a moment. 
=> Meteor server running on: http://localhost:3000/

Creamos la configuración
Abrimos el archivo server/configuracion.js y agregamos el siguiente código (este código es idéntico al del post anterior, solo hay que cambiar el clientId y el secret según los datos de cada cuenta):

//Quitamos cualquier configuración para 
//cuentas de Google 
Accounts.loginServiceConfiguration.remove({ 
  service: "google" 
}); 

//Agregamos la configuración con los datos que obtubimos de Google 
//campo clientId <-- Client ID 
//campo secret <-- Client Secret 
Accounts.loginServiceConfiguration.insert({ 
  service: "google", 
  clientId: "441624260670-5p0k5et2ns9pnlm8cgtp8bsdf.apps.googleusercontent.com",   secret: "3LMwasdfIOXfPqGhyeH4asdf3h
});

Creamos la vista (archivo client/index.html)
<head>
  <title>Login con Google</title>
</head>
<body>
  {{> inicial}}
</body>

<template name="inicial">
  {{#if currentUser}}
    {{> usuarioAutenticado}}
  {{else}}
    {{> usuarioNoAutenticado}}
  {{/if}}
</template>

<template name="usuarioAutenticado">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container pull-right">
        <span class="text-success">{{currentUser.profile.name}}</span>
        <img class="img-rounded" 
             style="height: 32px; margin-top: 4px;" 
             src="{{currentUser.services.google.picture}}"/>
        <div id="cerrarSesion" class="btn btn-primary">Cerrar Sesión</div>
      </div>
    </div>
  </div>
  {{> contenido}}
</template>

<template name="usuarioNoAutenticado">
  <div class="alert">
    <span class="icon-exclamation-sign"/> Debe Autenticarse!
    <div id="iniciarSesion" class="btn btn-info">Iniciar Sesión</div>
  </div>
</template>

<template name="contenido">
  <iframe width="100%" height="500px" src="http://www.meteor.com"></iframe>
</template>

A diferencia de la implementación anterior, esta es más prolija, la página web se limita al siguiente código:
<head>
  <title>Login con Google</title>
</head>
<body>
  {{> inicial}}
</body>

La plantila {{> inicial}} renderiza contenido en base a si el usuario actual está logueado o no.
  {{#if currentUser}}
    {{> usuarioAutenticado}}
  {{else}}
    {{> usuarioNoAutenticado}}
  {{/if}}

La plantilla {{> usuarioAutenticado}} mostrará una barra de navegación que a la derecha contendrá el nombre del usuario logueado, su avatar y un botón que permitirá cerrar la sesión, luego se mostrará el contenido de la página web. El botón cerrar sesión es nuestro componente personalizado y lo que más nos interesa es su id, ya que lo utilizaremos para programarle la escucha de eventos.
La barra de navegación debería verse más o menos así:



La plantilla {{> usuarioNoAutenticado}} mostrará un alerta que indicará la necesidad de iniciar sesión a la izquierda de la pantalla. El mensaje de alerta contiene además un botón que permite inicar la sesión, este es nuestro componente personalizado y su id es "iniciarSesion". El mensaje de alerta debería verse más o menos así:


Programación de eventos (archivo client/index.js)
Solo nos resta programar la interacción del usuario, en otras palabras, definir lo que ocurrirá cuando el usuario haga click en el botón "iniciar Sesión" o en el botón "Cerrar Sesión". Copiamos el siguiente código:

Template.usuarioAutenticado.events({
  "click #cerrarSesion":function(event,template){
    Meteor.logout(function(err){
      if(err){
        // manejar error
      }else{
        // todo ok
      }
    });
  }
});

Template.usuarioNoAutenticado.events({
  "click #iniciarSesion":function(event,template){
    Meteor.loginWithGoogle({
      requestPermissions: ['profile']
    }, function(err){
      if(err){
        // manejar error
      }else{
        // todo ok
      }
    });
  }
});

La programación o definicion de eventos en Meteor es muy simple y autodescriptiva. Los evenetos se programan en el ámbito de una plantilla, luego se define el evento y luego la regla de búsqueda de componentes a los cuales se les programará el evento.
En nuestro caso, en la plantilla usuarioAutenticado al hacer click en el botón con id cerrarSesion llamamos al método Meteor.logout el cual solo recibe como parámetro una función de retrollamada la cual nos permite manejar el resultado de la operación mediante el parámetro err.

Para el caso de la plantilla usuarioNoAutenticado  al hacer click en el botón con id iniciarSesion llamamos al método Meteor.loginWithGoogle el cual recibe como primer parámetro un arreglo llamado requestPermissions en el cual definimos los permisos que kle requerimos a google, en este caso solo hemos requerido el permiso profile el cual nos permitirá acceder a información básica de la cuenta, como segundo parámetro una función de retrollamada la cual nos permite manejar el resultado de la operación mediante el parámetro err.

Bien, eso es todo, espero les sea de utilidad.

Saludos

Mariano

jueves, junio 20, 2013

Usar autenticación de Google para aplicaciones Meteor.js (utilizando accounts-ui)

Hola estimad@s,

este post está dedicado a una tecnología con la cual vengo "jugando" hace un tiempo, se trata de Meteor.js, en pocas palabras se trata de un framework creado para Node.js que nos permite crear aplicaciones web de muy alto nivel en tiempos record.
Esta definición se acerca a la que pude verse en la página oficial, pero está basada en mi experiencia, con esto quiero decir que no me cabe ninguna duda de que realmente "hace lo que dicen sus creadores".

El post no es una introducción a Meteor ni mucho menos, es una solución puntual a un problema rutinario en nuestras aplicaciones web y es el de utilizar mecanismos de autenticación externos, en este caso el de Google. Dicho esto pondremos manos a la obra:

Debemos contar con Node y Meteor instalados:


  • Instalación de Node en Ubuntu: 
sudo apt-get install python-software-properties 
sudo add-apt-repository ppa:chris-lea/node.js 
sudo apt-get update 
sudo apt-get install nodejs npm
  • Instalación de Node en Debian:
apt-get install python g++ make mkdir ~/nodejs && cd $_ wget -N http://nodejs.org/dist/node-latest.tar.gz tar xzvf node-latest.tar.gz && cd `ls -rd node-v*` ./configure make install  
  • Instalación de Meteor: 
curl https://install.meteor.com | /bin/sh

Comenzamos con el proyecto

Ahora crearemos el proyecto:
meteor create loginConGoogle 
loginConGoogle: created. To run your new app: 
 cd loginConGoogle 
 meteor

Eliminamos todos los archivos del proyecto:
cd loginConGoogle
rm *.js *.css *.html


Creamos la estructura de directorios para componentes de nuestra aplicación:
mkdir client 
mkdir server

Instalamos el módulo de contiene los widgets para trabajar con cuentas:
meteor add accounts-ui 
accounts-ui: Simple templates to add login widgets to an app.

Instalamos el módulo de contiene la lógica para trabajar con cuentas de google:
meteor add accounts-google
accounts-google: Login service for Google accounts

Instalamos el módulo que contiene bootstrap: 
meteor add bootstrap
bootstrap: Front-end framework from Twitter 

Creamos los componentes del cliente: 
touch client/index.html 

Creamos los componentes del server: 
touch server/configuracion.js  

Iniciamos Meteor: 
meteor 

[[[[[ ~/loginConGoogle ]]]]] 

Initializing mongo database... this may take a moment. 
=> Meteor server running on: http://localhost:3000/


Iniciamos el navegador en: http://localhost:3000 (no veremos nada inicialmente)


Creando los token de autenticación de Google

Utilizando un navegador, accedemos a: https://code.google.com/apis/console/, luego seleccionamos API Access y luego Create an OAuth 2.0 client ID...

Luego en la primera parte del asistente colocamos nuestros datos según corresponda:



Luego configuramos los datos de nuestra aplicación web particular:




La URL http://localhost:3000/_oauth/google?close es la función de retrollamada, una vez que google nos autentique la llamará y esta función cierra la ventana de login actual en la aplicación Meteor.La URL http://localhost:3000 es la que será autorizada.

Los datos que se generan son:

Y los que nos interesan son Client ID y Client Secret

Configurando la cuenta de Google en nuestra aplicación

Abrimos el archivo server/configuracion.js y agregamos el siguiente código:

//Quitamos cualquier configuración para 
//cuentas de Google 
Accounts.loginServiceConfiguration.remove({ 
  service: "google" 
}); 

//Agregamos la configuración con los datos que obtubimos de Google 
//campo clientId <-- Client ID 
//campo secret <-- Client Secret 
Accounts.loginServiceConfiguration.insert({ 
  service: "google", 
  clientId: "441624260670-5p0k5et2ns9pnlm8cgtp8bsdf.apps.googleusercontent.com",   secret: "3LMwasdfIOXfPqGhyeH4asdf3h" 
});

Abrimos el archivo client/index.hml y agregamos el siguiente código:

<head>
  <title>Login con Google</title>
</head>
<body>
  {{#if currentUser}}
    <div class="alert">
      <img class="img-rounded" 
           style="height: 32px; margin-top: 4px;" 
           src="{{currentUser.services.google.picture}}"/>
      {{currentUser.profile.name}} {{loginButtons}}
    </div>
    {{> contenido}}
  {{else}}
    <div class="alert">
      <span class="icon-exclamation-sign"/> Debe Autenticarse! {{loginButtons}}
    </div>
  {{/if}}
</body>

<template name="contenido">
  <iframe width="100%" height="500px" src="http://www.meteor.com"></iframe>
</template>>

Breve explicación:

{{#if currentUser}} indica si el usuario está logueado ya que currentUser contiene el id del usuario logueado actualmente.

Ahora nos logueamos usando el browser:

Autorizamos manualmente la aplicación por única vez:

Y veremos...



Lo que sigue es solo para Google Chrome, en otros navegadores se realiza de otra forma (en Firefox se puede utilizar Firebug).

Presionamos botón derecho en la página (en la parte del botón de login) y seleccionamos Inspeccionar elemento

Luego seleccionamos Console y en el prompt ">" escribimos Meteor.user(), podremos ver:
La siguiente figura pone un poco de luz al contenido de {{currentUser.profile.name}} y {{currentUser.services.google.picture}}


{{> contenido}} será reemplazado por el contenido generado por el template name="contenido"

{{loginButtons}} es parte del módulo accounts-ui, aparecerán los botones adecuados según el estado de autenticación y cuentas disponibles.

Eso es todo, espero les haya sido de utilidad.

En breve más material sobre este tema.

Saludos

Mariano

Seguirme por email

Etiquetas

pentaho (45) java (35) eclipse (23) jdbc (14) curso (13) tomcat (13) primefaces (12) db2 (11) mondrian (10) review (10) jsf (9) openI (9) pdi (9) prd (9) libro (8) plugin (8) musql (7) struts (7) javascript (6) spring (6) cdf (5) ctools (5) instalar (5) linux (5) mysql (5) data studio (4) hibernate (4) ireport (4) jasper (4) meteor (4) videocurso (4) eglu (3) eglubi (3) elearning (3) graphite (3) grupo eglu (3) jboos tools (3) mexico (3) openbits (3) packt (3) python (3) undec (3) websphere (3) applet (2) cde (2) dao (2) db2university (2) exelearning (2) flexigrid (2) hadoop (2) iua (2) kettle (2) moodle (2) node (2) olap (2) osbi (2) pivot4j (2) scorm (2) sql (2) stpivot (2) actionscript (1) amazon (1) autenticacion (1) avanzado (1) base de datos (1) big data (1) bigdata (1) bodoc (1) cambiar (1) ccc (1) cdc (1) chat (1) cloud (1) coffeescript (1) control de acceso (1) corti (1) csv (1) cuba (1) curso meteor undec (1) dashboard (1) datamart (1) dataptix.tv (1) datasource (1) datatable (1) db2 ExpressC (1) demonio (1) distancia (1) driver (1) driver jdbc (1) eglufiltertwolist (1) encapsulamiento (1) especialización (1) etl (1) excepciones (1) export (1) faces (1) federación (1) filas afectadas (1) filtertwolist (1) filtrado (1) flegrid (1) flex (1) google (1) google viz (1) hostname (1) html (1) i18n (1) ibm (1) identidad (1) indignación (1) instancias (1) inteligencia de negocios (1) jee (1) jpivot (1) l10n (1) la azada (1) la zaga de los confines (1) layout (1) liberado (1) libre (1) libro promoción (1) lob (1) marktplace (1) menu (1) meteor node javascript google oauth autenticacion (1) mobile (1) mongoDB (1) node.js (1) oauth (1) olap4j (1) open source (1) orm (1) persistencia (1) personalizada (1) prd5 (1) psw (1) publicidad (1) rad6 (1) recursividad (1) reporting (1) rock (1) saiku (1) script (1) servicio (1) sessiontimeout (1) sourceforge (1) spinneta (1) sqlserver (1) ssl (1) taller (1) troyanx (1) ubuntu (1) ucc (1) ui (1) web (1) web console (1) xampp (1) xml (1) xpath (1)

Seguidores