Chalalo Land

Introducción a Linq to JavaScript

2012-01-31T02:33:00Z

Linq es un lenguaje de consulta sobre colecciones de objetos, generalmente escuchamos sobre LinqToSQL , LinqToXML, LinqToDataSet entre otros, pero también lo puedes ocupar con Javascript, el lenguaje de moda

Primero que nada LinqToJavascript (JSLINQ) es una implementación de Linq to Object en JavaScript. Está creado usando un conjunto de métodos de extensión en Arreglos de Objetos de Javascript. Si estamos utilizando un Arreglo, podemos entonces utilizar LINQ to Javascript.

Ejemplo de Uso

Primero que nada, debes descargar la librería en jslinq.codeplex.com, con la descarga tienes los script y bastantes ejemplos que sin duda, son de gran ayuda. Primero que nada vamos a agregar las referencias a los Script y luego crear un arreglo de objetos

var Personas =[

{Rut:1, Nombre:"Gonzalo",Apellido:"Perez",Edad:32},

{Rut:2, Nombre:"Pedro",Apellido:"Correa",Edad:31},

{Rut:3, Nombre:"Carlos",Apellido:"Jerez",Edad:26},

{Rut:4, Nombre:"Gonzalo",Apellido:"Diaz",Edad:23},

{Rut:5, Nombre:"Juan",Apellido:"Rocha",Edad:19},

{Rut:6, Nombre:"Jose",Apellido:"Osses",Edad:27},

{Rut:7, Nombre:"Gonzalo",Apellido:"Mellado",Edad:21}

];

</script>

Debemos crear ahora una instancia del objeto JSLINQ con nuestro arreglo Personas:

var ejemploPersonas = JSLINQ(Personas);

Podemos además ocupar el operador Where para especificar el criterio de selección y además ocupar el método Count()

var cantPersonas =JSLINQ(Personas).Where(function(persona){
return persona.Nombre == "Gonzalo";}).Count();

Veamos ahora como recorrer el arreglo de personas resultantes de una consulta por Nombre:

var ejemploPersonas =JSLINQ(Personas).Where(function(persona){
return persona.Nombre == "Gonzalo";
});

var rs = ejemploPersonas.ToArray();

for (var i in rs) {

alert( rs[i].Nombre +" "

+ rs[i].Apellido +" "

+ rs[i].Edad);

}

En el caso que queramos obtener una consulta ordenada por algún campo, en este caso edad, debemos modificar la consulta para incluir el campo edad en el orden:

var ejemploPersonas =JSLINQ(Personas).Where(function(persona){

return persona.Nombre == "Gonzalo";

}).OrderBy(function(persona){return persona.Edad;});

var rs = ejemploPersonas.ToArray();

for (var i in rs) {

alert( rs[i].Nombre +" "

+ rs[i].Apellido +" "

+ rs[i].Edad);

}

Y listo!, bastante útil para manejar nuestros objetos JSON que podemos obtener a través de un WS, revisa la página del proyecto y los ejemplos que se descargan para mayor detalle.

Espero que te sirva!

Saludos

@chalalo

Dándole más caña, agregando sonido con HTML5 a animaciones jQuery

2012-01-25T22:16:00Z

Este post viene a modificar el ejemplo anterior, es uno en donde ocupamos elementos HTML5 y Modernizr para cargar distintos polyfills para solucionar el problema de la compatibilidad.

Ahora, para darle un poco más “choreza” como decimos por acá, vamos agregar audio con HTML5. Ahora bien, no creo que mucha gente le interese escuchar el sonido a cada rato, pero bueno, es para fines demostrativos.

La modificación al ejemplo consistirá en dejar el formulario oculto y crear una especia de acordeón, de tal manera de ejecutar un sonido cuando se abra y cierre el acordeón.

Algo así:


Estado Cerrado (inicial)	Estado Abierto

En cada abrir y cerrar reproduciremos un sonido, el resultado es el del siguiente video:

Entonces manos a la obra, primero vamos a agregar los tags de audio

</audio>

</audio>

Como vemos no es necesario mostrar los controles del tag audio, luego, mediante jQuery vamos a hacer play a esto controles.

Los archivos de audio mp3 y ogg los convertí desde wav mediante esta herramienta gratuita (cuidado con sus barras para IE instalables)http://www.koyotesoft.com/audio-software/free-mp3-wma-converter.html imagino que hay mucho mejores, pero fue lo primero que encontré. Entonces, en la carpeta audio agregamos los archivos y listo!

PD: Recuerda que no todos los navegadores soportan los mismos codec para reproducción de audio y video, por eso tenemos que agregar diferentes formatos para asegurar compatibilidad. Puedes ver el siguiente cuadro para tener el escenario con el que vas a tener que lidiar:

Ahora el código jQuery, muy simple para crear el efecto y puedes notar el atributo play para el tag audio con id abrir y el otro tag con el id cerrar:

$(document).ready(function(){

$("form").hide();

$("#texto").toggle(function(){

$("form").slideDown("slow");

$("#texto").html("- Cerrar");

$("#abrir")[0].play();

},function(){

$("form").slideUp("slow");

$("#texto").html("+ Abrir");

$("#cerrar")[0].play();

});

Y estamos ok, ya tenemos nuestro ejemplo balls breaker con sonido

Espero que te sirva!
@chalalo

Modernizr–Ejemplo práctico 2 : Utilizando Border Radius, elemento date y atributo required

2012-01-25T04:12:00Z

Hola que tal, este vez revisaremos tres ejemplos prácticos en donde podemos utilizar modernizer para detectar características del browser y decidir según la disponibilidad de ellas que hacer, como por ejemplo, incluir librerías o polyfills para mitigar el problema. Puedes ver mi articulo anterior en donde iniciamos esta serie de ejemplos prácticos.

Vamos dos problemáticas , la de la archi nombrada característica de HTML5 de bordes redondeados,también el nuevo elemento date formulario y por ultimo la propiedad “required” de los elementos del formulario.

Ejemplo:

Veamos que cuenta con las siguientes características HTML5:

Bordes Redondeados
Campo Date en el formulario
Campo Date es obligatorio

<!DOCTYPE html>
<html lang="en">
<head>

form{

background-color:#9fbfa3;

width:300px;

padding:15px;

border-radius:10px;

}

</style>

</head>

<body>

<label for="TxFecha">Seleccione Fecha</label>

</form>

</body>

</html>

El resultado en un IE9 es:

Si bien existen el soporte a bordes redondeados, no se soporta el campo email ni el atributo “required”

IE7 (Probando con IE9 En modo explorador IE7), no existe soporte para ninguna funcionalidad.

En Chrome (16.0.912.77 m), si bien se soporta además el atributo required, no se soporta el campo date:

Veamos ahora en Firefox 9.0.1, al igual que Chrome, no se soporta el campo date.

El turno de Safari, no soporta required y si bien soporta el campo fecha, lo hace de una manera deficiente a mi parecer, pero al fin y al cabo, lo soporta.

Opera, al menos para nuestro ejemplo, lleva la delantera soportando todas las funcionalidades.

Ahora vemos como arreglar el código para que exista soporte para bordes redondeados para todos los navegadores:

Primero vamos a ver como solucionar el tema del Borde Redondeado.

Los pasos a seguir serán:

Agregar librería Modernizr y jQuery (estoy utilizando versiones de desarrollo)
Agregar, solo para asegurarnos de compatibilidad hacia atrás, las propiedades CSS para border radius propietarias.
Agregar y ejecutar la librería jquery.corner en el caso de que el browser no soporte nativamente la característica de bordes redondeados, de manera que este script proporcione la funcionalidad, notar que es lazy download, es decir solo se va cargar esta librería cuando se necesite.

<!DOCTYPE html>

<head>

form{

background-color:#9fbfa3;

width:300px;

padding:15px;

-moz-border-radius: 10px;

-webkit-border-radius:10px;

border-radius: 10px;

}

</style>

</head>

<body>

<label for="TxFecha">Seleccione Fecha</label>

</form>

</body>

</html>

if (!Modernizr.borderradius) {

$.getScript("js/jquery.corner.js", function () {

$("form").corner();

});

}

</script>

Si ejecutamos esta página en IE7 veremos:

Es decir, ya no hay problema de los bordes redondeados, ahora continuemos con el calendario, para esto vamos a utilizar JqueryUI, el script de calendario, para ello seguiremos los siguientes pasos:

Determinar si el navegador soporta el tag input type=”date” mediante modernizer
En caso que el browser no cuente con esta característica, cargar el script de jQueryUI y asignárselo al campo fecha, además de cargar dinámicamente el CSS asociado.

if (!Modernizr.inputtypes.date) {

$.getScript("http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js",
function () {

var css = jQuery("<link>");

css.attr({ rel: "stylesheet",

type: "text/css",

href: "http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/ui-lightness/jquery-ui.css"

});

$("head").append(css);

$("#TxFecha").datepicker();

});

}

Ahora ejecutamos en IE y veremos

Tenemos bordes redondeados y calendario, pero falta el validador, esta vez no usé jQuery-Validator, ya que lo consideré mucho para un solo campo, pero obviamente consideraría JV para la próxima, en este caso, yo mismo hice una validación de requerido, obviamente es solo a modo de ejemplo, le queda mucho ser algo para producción.

if (!Modernizr.input.required){

$("#formulario").submit(function(){

if ($("#TxFecha").val().length==0){

return fallo();

}else{

return normal();

}

});

$("#TxFecha").focus(normal);

}

function normal(){

$("#TxFecha").css("background","white");

$("#TxFecha").css("color","black");

$("#TxFecha").val("");

return true;

}

function fallo(){

$("#TxFecha").css("background","red");

$("#TxFecha").css("color","white");

$("#TxFecha").val("Este campo es necesario");

return false;

}

Luego al probarlo, tenemos lo siguiente:

Si bien no es lo mismo, podemos lograr un efecto más deseado con distintos plugins.

Para terminar veamos las cargas de archivos con los dos navegadores (obviamente todos van a cargar jQuery y Modernizr)

IE7 (todos los polyfills)

IE9(Solo jQueryUI, ya que soporta bordes redondeados)

Firefox(Solo jQueryUI, ya que soporta bordes redondeados)

Chrome(Solo jQueryUI, ya que soporta bordes redondeados)

Opera (No necesita cargar pollyfills)

Como puedes ver, solo se cargan los scripts cuando se les necesita, aumentando el rendimiento.

Espero que les sirva!
Saludos,

[Tips]Ejecutar métodos en paralelo en ASP.NET 3.5

2012-01-16T19:41:00Z

Hola, en esta ocasión quiero volver a tocar el tema de la ejecución en paralelo de métodos en ASP.NET, que si bien está muy optimizado en la versión 4.5, que aún está en desarrollo, muchos de nosotros no tenemos planes a corto plazo de migrar para aprovechar las ventajas.

Veamos un escenario común, grillas grillas combos combos, a que me refiero con esto, es que muchas veces nuestros sistemas cargan una cantidad considerable de combos que no están asociados e igual cantidad de grillas en el Page Load. Generalmente no es necesario que esto se cargue secuencialmente, y podemos aprovechar las ventajas en términos de tiempo al utilizar la carga en paralelo.

Para explicar un poco más vamos a crear un pequeño proyecto, que tenga 2 DropDownList (o combos, como le llamamos universalmente). Cada uno de estos combos va a tener una duración de carga de 3 segundos, obviamente de manera secuencial se va a demorar mínimo 6 segundos la carga de la página, mientras que en paralelo, claro como el agua, mínimo 3 segundos:


Carga Secuencial	Carga Paralela

Ahora veamos el código

El código de la página con carga secuencial:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Page.IsPostBack Then

dd_ciudades.DataSource = Obtciudades()

dd_ciudades.DataBind()

dd_regiones.DataSource = Obtregiones()

dd_regiones.DataBind()

End If

End Sub

Public Function Obtciudades() As List(Of Ciudad)

System.Threading.Thread.Sleep(3000)

Dim ciudades As New List(Of Ciudad)

ciudades.Add(New Ciudad With {.id = 1, .nombre = "Concepcion"})

ciudades.Add(New Ciudad With {.id = 2, .nombre = "Santiago"})

ciudades.Add(New Ciudad With {.id = 3, .nombre = "Viña del Mar"})

ciudades.Add(New Ciudad With {.id = 4, .nombre = "Puerto Montt"})

ciudades.Add(New Ciudad With {.id = 5, .nombre = "Cañete"})

Return ciudades

End Function

Public Function Obtregiones() As List(Of Region)

System.Threading.Thread.Sleep(3000)

Dim regiones As New List(Of Region)

regiones.Add(New Region With {.id = 1, .nombre = "Primera Region"})

regiones.Add(New Region With {.id = 2, .nombre = "Segunda Region"})

regiones.Add(New Region With {.id = 3, .nombre = "Tercera Region"})

regiones.Add(New Region With {.id = 4, .nombre = "Cuarta Region"})

regiones.Add(New Region With {.id = 5, .nombre = "Quinta Region"})

Return regiones

End Function

Puedes notar los métodos Sleep para causar la demora en el thread de ejecución en cada uno de los métodos que sirvan para poblar los dropdownlist.Ahora si vemos la carga del la página con el IE Developer Toolbar, el resultado son 6.07 segundos:

Veamos el código para ASP.NET 3.5, es más largo pero la relación costo beneficio es muy buena, ya que vamos a bajar los tiempos casi a la mitad. Como dije anteriormente, implementar esta misma funcionalidad en ASP.NET 4.5 es mucho más sencillo, ya que elimina las complejidades al momento de especificar cuales métodos serán ejecutados de manera Asíncrona, pero eso lo dejaremos para otro post

Imports Microsoft.VisualBasic
Imports System.Threading

Partial Class Paralelo

Inherits System.Web.UI.Page

Private ehRecuperarDatosDeDropDownList1 As EventHandler = Nothing

Private ehRecuperarDatosDeDropDownList2 As EventHandler = Nothing

Private listaRegiones As New List(Of Region)

Private listaCiudades As New List(Of Ciudad)

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

Dim pat1 As New PageAsyncTask(New BeginEventHandler(AddressOf
Me.RecuperarDatosDeDropDownList1), New EndEventHandler(AddressOf
Me.CargarDropDownList1), Nothing, Nothing, True)

Dim pat2 As New PageAsyncTask(New BeginEventHandler(AddressOf
Me.RecuperarDatosDeDropDownList2), New EndEventHandler(AddressOf
Me.CargarDropDownList2), Nothing, Nothing, True)

Page.RegisterAsyncTask(pat1)

Page.RegisterAsyncTask(pat2)

End Sub

#Region "dd_regiones"

Private Function RecuperarDatosDeDropDownList1(sender As Object, e As
EventArgs, cb As AsyncCallback, state As Object) As IAsyncResult

Me.ehRecuperarDatosDeDropDownList1 = New EventHandler(AddressOf
Me.RecuperarRegiones)

Return Me.ehRecuperarDatosDeDropDownList1.BeginInvoke(Me,
EventArgs.Empty, cb, Nothing)
End Function

Private Sub RecuperarRegiones(sender As Object, e As EventArgs)

Me.listaRegiones = Obtregiones()

End Sub

Private Sub CargarDropDownList1(ar As IAsyncResult)

Me.ehRecuperarDatosDeDropDownList1.EndInvoke(ar)

Me.dd_regiones.DataSource = Me.listaRegiones

Me.dd_regiones.DataBind()

End Sub

Public Function Obtregiones() As List(Of Region)

System.Threading.Thread.Sleep(3000)

Dim regiones As New List(Of Region)

regiones.Add(New Region With {.id = 1, .nombre = "Primera Region"})

regiones.Add(New Region With {.id = 2, .nombre = "Segunda Region"})

regiones.Add(New Region With {.id = 3, .nombre = "Tercera Region"})

regiones.Add(New Region With {.id = 4, .nombre = "Cuarta Region"})

regiones.Add(New Region With {.id = 5, .nombre = "Quinta Region"})

Return regiones

End Function

#End Region

#Region "dd_ciudades"

Private Function RecuperarDatosDeDropDownList2(sender As Object, e As EventArgs, cb As AsyncCallback, state As Object) As IAsyncResult

Me.ehRecuperarDatosDeDropDownList2 = New EventHandler(AddressOf Me.RecuperarCiudades)

Return Me.ehRecuperarDatosDeDropDownList2.BeginInvoke(Me,
EventArgs.Empty, cb, Nothing)

End Function

Private Sub RecuperarCiudades(sender As Object, e As EventArgs)

Me.listaCiudades = Obtciudades()

End Sub

Private Sub CargarDropDownList2(ar As IAsyncResult)

Me.ehRecuperarDatosDeDropDownList2.EndInvoke(ar)

Me.dd_ciudades.DataSource = Me.listaCiudades

Me.dd_ciudades.DataBind()

End Sub

Public Function Obtciudades() As List(Of Ciudad)

System.Threading.Thread.Sleep(3000)

Dim ciudades As New List(Of Ciudad)

ciudades.Add(New Ciudad With {.id = 1, .nombre = "Concepcion"})

ciudades.Add(New Ciudad With {.id = 2, .nombre = "Santiago"})

ciudades.Add(New Ciudad With {.id = 3, .nombre = "Viña del Mar"})

ciudades.Add(New Ciudad With {.id = 4, .nombre = "Puerto Montt"})

ciudades.Add(New Ciudad With {.id = 5, .nombre = "Cañete"})

Return ciudades

End Function

#End Region

End Class

Ciertamente el código puede resultar confuso,(adjunto el código fuente, ya que se ve mejor en Visual Studio que en el blog), primero se registran las “tareas” que vamos a correr en paralelo, cada tarea tiene un método de inicio(BeginEventHandler), y método de finalización (EndEventHandler), luego registramos cada una de estas tareas, en este caso son dos, lo hacemos llamando al método RegisterAsyncTask de la página.

Los métodos ObtCiudades y ObtieneRegiones no sufren alteraciones, ahora al momento de ejecutar la página, obtenemos mejores tiempo, tal cual habíamos estimado, 3,16 segundos.

Claro está que solo estoy usando esta funcionalidad con dos métodos, puedes utilizarlos con más según tu conveniencia.

Puedes bajar el código desde acá

Espero que te sirva!
@chalalo

Modernizr–Ejemplo práctico 1 : Utilizando Placeholder

2012-01-10T15:59:29Z

Como ya saben Modernizr es una librería JavaScript que nos permite detectar las capacidades del soportadas por el navegador en relación a HTML5 y CSS3. Esto nos será en extremo útil cuando estemos desarrollando nuestras páginas con funcionalidades incluidas HTML5 y deseemos que, en la medida de lo posible, usuarios con navegadores antiguos puedan tener la misma experiencia de usuarios, es decir, simular la característica nativa de HTML5 con un pollyfill, que básicamente son códigos o plugins que proveen la tecnología que nosotros, los desarrolladores, esperaríamos que el browser soportara nativamente.

Ejemplo práctico – PlaceHolder

El atributo Placeholder

Atributo HTML5, que podemos describirlo como el texto que aparece dentro de un campo de texto antes de que este tenga el foco, cuando el campo pierde el foco y si el campo está vacío, aparece nuevamente el texto. Ejemplo:

<label for="Rut">Ingrese su Rut:</label>
<input type="text" placeholder ="Ej: 13657654-K" id="rut" />

Lo que resulta en lo siguiente:

Ahora bien, que pasa y con browser que no soporten esta característica? y como detectamos si el browser que navega nuestra página no soporta esta funcionalidad? Tenemos dos opciones:

La más fácil : No hacer nada, simplemente las personas que naveguen con browser antiguos no van a tener esta funcionalidad

Lo mejor, mantener la experiencia de usuario, utilizando Modernizer y PollyFills

Paso 1, Agregar la librería Modernizr

Paso 2, Agregar el código de detección y Pollyfill

if(!Modernizr.input.placeholder){

$('[placeholder]').focus(function() {
   var input = $(this);
   if (input.val() == input.attr('placeholder')) {
       input.val('');
       input.removeClass('placeholder');
}
}).blur(function() {
     var input = $(this);
     if (input.val() == '' || input.val() == input.attr('placeholder')) {
         input.addClass('placeholder');
         input.val(input.attr('placeholder'));
     }
}).blur();
$('[placeholder]').parents('form').submit(function() {
    $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
       input.val('');
    }
})
});

Como puedes ver, el primer if , detecta mediante el objeto Modernizr la capacidad del navegador , y si no soporta placeholder (que es un atributo de input), entonces aplicamos el código jQuery que provee la misma funcionalidad del placeholder nativo HTML5.

En navegadores que aún no soportan este atributo, mediante la técnica de graceful degradation vamos a lograr similares experiencias de usuario en navegadores antiguos.

Saludos!, pronto subo más ejemplos.

@chalalo

Grabación WebCast, Nuevas características de Visual Studio 2011 para el Desarrollo Web.

2012-01-04T11:29:26Z

Hola!, para empezar el año, les dejo un video de algunas de las nuevas características de Visual Studio 2011 para el desarrollo con ASP.NET. Bueno ya estamos en el 2012, quizás Visual Studio cambie de nombre a Visual Studio 2012, no lo sé. Sin más teorías, acá está el video:

Los puntos a tratados en este WebCast son:

Nuevas características en el Solution Explorer
Nuevas características de desacoplamiento de ventanas
Editor CSS (Regiones, Helpers, Autocompletación)
Editor JavaScript (Referencia de Definiciones, Referencia a librerías)
Nuevas posibilidades del editor de código (Asociar Eventos, agregar columnas en grillas)
Repeters Tipados, Bundling , Validaciones no Intrusivas
Instalación de Librerías mediante NuGet , ValidateRequestMode.

Espero que les sea de ayuda

Saludos!
@chalalo

Video del WebCast del Introducción de MongoDB y ASP.NET

2011-12-24T00:07:17Z

Hola, les dejo el video del Webcast que di sobre MongoDB y ASP.NET. No profundicé mucho pero creo que la se entiende, en este mismo blog están los códigos que se mostraron en la presentación, cualquier duda, no dudes en consultar.

Saludos!
@chalalo.

Grabación del WebCast de Uso de HTML5 y Pollyfills

2011-12-22T14:46:00Z

Hola, les dejo la grabación del WebCast que realizé el día martes 20 de Diciembre, está basada en la charla del mix2011 Master Rey Bango, con algunos aportes propios.

Véanla en HD, mucho mejor! :)

Saludos!
@Chalalo

Serie de WebCast de Fin de Año: HTML5, MongoDB y ASP.NET WebStack

2011-12-18T13:13:00Z

Holas, ya es fin de año pero no por eso se bajan las revoluciones!. Te invito a una serie de WebCast que voy a impartir:

Webcast MSDN:Cómo llenar los vacíos de HTML5 con Pollyfills y Shims

Todo el mundo quiere saltar a HTML5, pero ¿cómo usar las mejores características de esta nueva especificación garantizando al mismo tiempo que los navegadores más antiguos ofrece páginas Web como se esperaba? Aquí es donde entran los multillenados y las cuñas. En la sesión, aprenderás cómo usar el código especialmente diseñado para JavaScript y CSS que emula las características de HTML5 para que puedas tomar ventaja de HTML5 hoy sin romper tus sitios en navegadores antiguos.

Fecha – Hora:
martes 20 de diciembre de 2011 - 06:00PM (Chile)
martes 20 de diciembre de 2011 - 4:00PM (Bogotá)

Registrarse aquí

----------------------------------------------------------------------------------------------------------

Webcast MSDN: Desarrollo de Aplicaciones Web con ASP.NET y MongoDB

MongoDB es una base de datos multiplataforma orientado a documentos, OpenSource preparada para alta disponibilidad y High-Performance, que es una de las principales exponentes del movimiento NoSQL.

En esta sesión veremos una introducción a esta nueva filosofía en el manejo de datos y como utilizarla para nuestros proyectos ASP.NET MVC y ASP.NET WebForms

Fecha – Hora:
viernes 23 de diciembre de 2011 - 03:00PM (Chile)
viernes 23 de diciembre de 2011 - 01:00PM (Bogotá)

Registrarse aquí

----------------------------------------------------------------------------------------------------------

Webcast MSDN: Una visión general de MS Web Stack of Love

La creación de aplicaciones Web en la pila de Microsoft continúa evolucionando. Hay un montón de grandes herramientas que se pueden aprovechar, pero puede ser difícil mantenerse al día con todas las opciones disponibles.

En esta sesión técnica y con un ritmo rápido, aprenderás cómo encajan las piezas. Nos ocuparemos de ASP.NET MVC 3, MvcScaffolding, Entity Framework Code First (Magic Unicorn Edition), SQL Compact 4, jQuery y mucho más.

Fecha – Hora:
martes 27 de diciembre de 2011- 12:00PM (Chile)
martes 27 de diciembre de 2011- 10:00AM(Bogotá)

Registrarse aquí

HTML5CL–ScreenCast sobre Geolocalización

2011-12-12T17:22:49Z

Hola , acabo de publicar un ScreenCast sobre Geolocalizacón de HTML5, lo puedes ver este y otros ScreenCasts en :

http://html5cl.wordpress.com/

Pero bueno, si quieres verlo por acá , comporto también el Video:

Descarga los archivos utilizados en el Screencast

Saludos!
@chalalo

Búsquedas de Texto con MongoDB y VB.NET ASP.NET Webform

2011-12-07T15:18:00Z

Hola, si recueras mi post anterior sobre MongoDB y ASP.NET MVC, vimos como instalar mongoDB, instalar las librerías y utilizarlo junto a ASP.NET MVC. Esta vez veremos como utilizar ASP.NET Webforms con VB.NET junto a MongoDB para crear búsquedas de texto.

El problema

Tenemos aproximadamente 105.000 registros, que corresponden a un listado de diagnósticos posibles. Las búsquedas de texto siempre (o al menos la mayoría de las veces) son bastante costosas en términos de procesamiento, entonces para liberar la carga de nuestro ya exigido motor de BD, decidí utilizar mongoDB para estas búsquedas.

Los registros para la búsqueda tienen un código que se puede repetir y una descripción del diagnóstico, ej:

A244;Infeccion por Pseudomonas pseudomallei
A244;Melioidosis
A244;Neumoenteritis
A244;Neumonia debida a Pseudomonas pseudomallei
A250;Espirilosis
A250;Fiebre espirilar
A250;Fiebre mordedura debida Spirillum

No tengo idea que significan esos diagnósticos (y no me las doy de House MD). Entonces la idea e poder buscar por palabras, por ejemplo “mordedura” y “Spirillum” y obtener el o los registros concordante con los parámetros de búsqueda.

La Solución

Este post es parte de la solución, para eso armé un prototipo(que es el que ves en la siguiente imagen, un webform asp.net con vb.net)

La estructura, (si, Webform)

Diseño (si es que se puede llamar diseño)

Los botones AJ y KZ cargan los datos de lo archivos hacia mongoDB, y luego la búsqueda , consulta esos registros por las palabras ingresadas y lo muestra en el textarea.

Leyendo la documentación, revisé que se recomendaba crear un objeto con Keywords de búsqueda, es decir, las palabras relevantes, en mi caso todas las palabras que tengan más de 2 letras en la palabra. Veamos cual es la clase que utilizé: (Tapsa se llama el concepto de lista de diagnósticos)

Class Tapsa

<BsonId()> _

Public Id As ObjectId

Public codigo As String

Public texto As String

Public _keywords As List(Of String)

End Class

Como ves, la _keywords es una lista de String, así que para cargar la lista de registros desde el archivo, voy a utilizar la siguiente función asociada a un botón(por el ejemplo), eliminando las palabras con menos de 3 letras.

Pero primero, la conexión a MongoDB

Private Function DB() As MongoDatabase

Dim server = MongoServer.Create("mongodb://localhost")

Dim dbm As MongoDatabase = server.GetDatabase("sinetsur")

Return dbm

End Function

Lueego el botón AJ, que hace lo mismo que el botón KZ, solo cambia el archivo:

Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click

Dim sr As New StreamReader(Server.MapPath("ajC.csv"))

Dim linea As String = sr.ReadLine()

Dim tapsaas As MongoCollection(Of tapsa) = DB.GetCollection(Of tapsa)("tapsaas")

Do While linea <> Nothing

Dim tp As New Tapsa() With {.codigo = linea.Split(";")(0), .texto =
linea.Split(";")(1), ._keywords = divide(linea.Split(";")(1))}

tapsaas.Insert(tp)

linea = sr.ReadLine()
Loop

sr.Close()

End Sub

Y la función Divide, que devuelve un la lista de String, ignorando las palabras “cortas”

Private Function divide(texto As String) As List(Of String)

Dim lista As New List(Of String)

For Each obj In texto.Split(" ").ToList

If obj.Length > 2 Then

lista.Add(obj.ToLower)

End If

Return lista

End Function

Con esto ya llené mi colección MongoDB, veamos como se visualiza la colección:

O si lo prefieres ver en formato JSON:

{
"_id" : ObjectId("4edf74d4ac7d9820405ca343"),
"codigo" : "A021",
"texto" : "Septicemia debida a Salmonella cholerae-suis",
"_keywords" : ["septicemia", "debida", "salmonella", "cholerae-suis"]
}

Puedes ver que existen 4 keywords y el texto era de 5 palabras, pero el “a” es totalmente ignorable.

Puedes probar en el Shell de MongoDB las búsquedas, por ejemplo escribimos lo siguiente en la consola:

db.tapsaas.find({"_keywords": { "$all": ["dolor","ojo"] }});

El resultado fue prácticamente inmediato, pero aún se puede ejecutar la consulta más rápido, esto es creando un índice por el campo keywords

db.tapsaas.ensureIndex({_keywords:1});

El proceso de creación del índice varia dependiendo de el campo al que se le aplica y a la cantidad de registros que ya existen en dicha colección. y bueno con esto creamos el índice, y ahora las búsquedas simplemente vuelan. (luego me referiré en detalle sobre el profiler de MongoDB, en otro post)

Ahora vamos revisar el código de la búsqueda (botón Búsqueda).

Protected Sub Button2_Click(sender As Object, e As System.EventArgs) Handles Button2.Click

tx_resultado.Text = ""

Dim db__1 As MongoDatabase = DB()

Dim ta As MongoCollection(Of Tapsa) = db__1.GetCollection(Of Tapsa)("tapsaas")

Dim array As New List(Of String)

array = divide(tx_texto.Text)

Dim cont As Integer = 0

Dim q = Query.All("_keywords", BsonArray.Create(array))

For Each obj As Tapsa In ta.Find(q)

tx_resultado.Text &= obj.codigo & " " & obj.texto & vbCrLf

cont = cont + 1

lb_cantidad.Text = cont

End Sub

Como puedes ver en el código, creamos la conexión a mongo, luego sobre el texto ingresado aplicamos la misma regla de eliminar las palabras “cortas” de menos de dos letras utilizando la misma función divide. Una vez que el array esta listo , creamos una query, buscando en el campo keywords y transformando a un BsonArray nuestra lista de string (array), luego hacemos un foreach sobre todas los registros resultantes de la búsqueda. Si hacemos un watch sobre la query vemos lo siguiente:

Lo que corresponde a la misma consulta que habíamos ejecutado en el Shell (texto resaltado en amarillo, a 20cm de acá, hacia arriba )

Y luego mostramos los resultados en el tx_resultado (textarea), en el ejemplo siguiente busqué izquierdo:

La cantidad es 2.338 registros, es un tiempo muy reducido de tiempo, obviamente este sigue siendo un numero muy elevado de registros como para presentarlos al cliente, solo es para efectos de demostración, en producción la lógica es distinta, sin embargo, lo que quiero mostrar el la forma de buscar datos de texto dentro de una colección mongoDB.

Como siempre, te puedes bajar todo el código, incluyendo los registros para que pruebes:

Para la explicación de como instalar mongoDB en tu computador, revisa el Post Anterior

Saludos!
@chalalo