Conociendo un poco de Typescript

A continuación les dejo un vídeo que acabo de hacer sobre Typescript. Ya hemos visto un poco sobre eso anteriormente y me resulta muy interesante y útil ya que lo he estado utilizando día a día en proyectos con .NET.

Saludos!

Anuncios

Consumir Gravatar API con Kendo UI MVVM

Hola a todos, en esta entrada escribiré algo corto y simple. Lo que haremos hoy es consumir la JSON API de Gravatar para que partiendo del User Name poder sacar información del usuario. Si no sabes que es Gravatar, no sé que haces aquí 😛 (Es broma, lee un poco aquí). Es muy útil que las aplicaciones Web que regularmente uso usen Gravatar, con tan solo mi Email ya sacan mi foto de perfil y si es necesario mi biografía (todo depende de cuanto le digas a Gravatar).

El código lo subí a este fiddle. Trabajos de puro Javascript seguro los estaré subiendo a mi cuenta de Fiddle para que si lo usan, estén al pendiente.

HTML

Primero tendremos que agregar las librerías que vamos a usar, vamos a usar las mismas que el post pasado y tendremos la siguiente base:

Screen Shot 2015-05-02 at 8.45.39 PM

Y dentro de body agregaremos nuestra vista de MVVM:
Screen Shot 2015-05-02 at 8.48.06 PM

Lo que hay que explicar aquí son los bindings, el div#container tiene un binding que se casa con su estilo in-line y la propiedad css background-color. Esto porque Gravatar me puede dar el background color que el usuario tiene personalizado. Los demas bindings son como ya lo hemos visto antes, vinculos con propiedades de nuestro View Model. Es importante hablar del span que tiene el binding “text: getGravatarData”, aquí es un truquito para ejecutar una función de mi View Model cada cuando la propiedad gravatarName cambie en el input. En realidad este no mostrará nada. La cosa aquí es que cualquier binding que se ponga en el HTML se van a evaluar nuevamente cada vez que una propiedad cambie.

Javascript

Agregamos dentro del load function de jQuery que ya agregamos el siguiente código javascript:

Screen Shot 2015-05-02 at 8.52.29 PM

getGravatarData consume la api de Gravatar. El URL de la api de gravatar es http://en.gravatar.com/{userName}.json, pueden usar un REST client para probarlo y ver los datos que manda (o simplemente ponerlo en el navegador funciona). So, le concatenamos el user name al url para obtener la información del usuario que queremos, así de fácil.

La api nos regresa un hash MD5 del email del usuario, y lo necesitamos para obtener la imagen de perfil del tamaño que queramos. Por eso usamos el URL http://www.gravatar.com/avatar/{has-md5}?s={size}.

Y el resultado es como lo hemos visto en el fiddle que he subido.

Screen Shot 2015-05-02 at 8.57.28 PM Screen Shot 2015-05-02 at 8.58.49 PM

Saludos!

Listado de productos con diferentes templates – Kendo UI y Bootstrap

Buen día a todos, en esta entrada voy a hablar un poco más de front-end y el patrón de diseño MVVM que ya hemos visto un poco en entradas anteriores utilizando Kendo. Lo que vamos a hacer lo subí en este JSFiddle pero de igual forma ya lo pudieron ver en la imagen destacada de esta entrada.

Crearemos un listado de productos que se cargarán de forma dinámica utilizando Kendo UI MVVM con datos locales y estáticos para dejarlo de una forma simple. La parte interesante del post es que se utilizarán los templates de Kendo para poder intercambiar en tiempo de ejecución la forma en la que se ven los productos (o cualquier cosa) sin tener que hacer un esfuerzo grande y lo importante, sin tener que refrescar completamente la página.

El HTML

Para comenzar no vamos a utilizar ningún lenguaje de servidor (como NodeJS o MVC) y vamos a comenzar con los siguientes archivos (solo tres): Continuar leyendo “Listado de productos con diferentes templates – Kendo UI y Bootstrap”

Aplicaciones Web MVVM con Kendo UI y NodeJS (ft. bootstrap) – Parte 2

Buenas noches (o tardes?) a todos :D.

En esta ocasión seguiré con la ahora serie de posts de NodeJS y Kendo UI, ya que es continuación del post anterior te recomiendo que la leas antes de seguir en este.

Lo que busco hacer en esta entrada es seguir viendo como funciona MVVM incluyendo ahora operaciones clásicas “CRUD” utilizando la funcionalidad del Data Source de Kendo. Lo que haremos es siguiendo el mismo ejemplo de la entrada anterior el poder crear, leer, actualizar y eliminar elementos de nuestro listado realizando los requests HTTP necesarios. No usaremos bases de datos, tal vez lo extendamos después. También decidí incluir Bootstrap en este ejemplo y básicamente esta será la actualización de nuestro proyecto:

Screen Shot 2015-04-03 at 10.52.41 PM

Continuar leyendo “Aplicaciones Web MVVM con Kendo UI y NodeJS (ft. bootstrap) – Parte 2”

Aplicaciones Web MVVM con Kendo UI y NodeJS (y Jade)

En esta entrada hablaré un poco de lo que puede ofrecer Kendo UI en su versión Open Source para crear aplicaciones Web con el patrón MVVM, utilizando Node.js como lenguaje y Express como framework web. En entradas anteriores hablé sobre NodeJS y MongoDB pero bajo Windows y pre compilado con TypeScript. Ahora será diferente, lo haremos bajo ambiente Unix utilizando Atom como nuestro editor de texto y NodeJS puro sin pre compilar por TypeScript.

UPDATE:

Esto ya se convirtió en una serie de posts, te invito a que la sigas toda:

  1. Parte 1 (esta)
  2. Parte 2

Aquí ya voy a suponer que tienes NodeJS instalado en tu computadora, ya sea linux, mac o windows, el código y el proceso que se mostrará funcionará en cualquier plataforma.

Crear Proyecto Express

Como les comenté, utilizaremos Express JS para hacer este ejemplo, pero en realidad será puro Front-end y no importará el lenguaje.

Primero, utilizaremos el generador que contiene express, si no lo tienes, ve a la página de expressjs y aprende a instalarlo. Continuar leyendo “Aplicaciones Web MVVM con Kendo UI y NodeJS (y Jade)”

Comenzando con NodeJs, Express y TypeScript – Parte 2

Buen día a todos, en esta entrada seguiremos con la pequeña serie de programación en Nodejs con express utilizando Typescript como compilador de Javascript. En esta entrada estaremos integrando en el ejemplo que estamos llevando la persistencia de datos utilizando Mongodb.

Si no has leído la parte 1, te dejo el enlace.

Para comenzar primero tenemos que estar al tanto con Mongodb, existe un instalador y no tiene ciencia la instalación. También necesitamos un cliente con una GUI amigable. Podemos usar Robomongo, fue la herramienta de administración que más me gusto, además no busqué muchas. Sigue estas instrucciones para tener Mongodb corriendo, ya que por default no corre como un servicio (mi costumbre de MySQL o SQL Server que siempre lo hagan). Una vez teniendo Mongodb corriendo, podrás usar Robomongo para jugar con el, pero continuemos.

Continuar leyendo “Comenzando con NodeJs, Express y TypeScript – Parte 2”

Comenzando con NodeJS, Express y TypeScript – Parte 1

Muy buenas tardes a todos, por fin me esfuerzo un poco para volver a escribir en este blog que cada vez lo tengo más abandonado. En todo este tiempo que he durado sin escribir he tenido mucho trabajo, y como nunca me canso, en mi tiempo libre decido seguir aprendiendo tecnologías que regularmente no uso en mi trabajo.

Ahora le toca a NodeJS y el Framework Web Express junto con mi nuevo pre compilador de Javascript: TypeScript. La verdad es que Javascript es uno de mis lenguajes favoritos por el simple hecho que lo uso todos los días para funciones específicas, nunca como lenguaje principal en un desarrollo. Javascript se ha vuelto amigable conmigo gracias a Visual Studio e intellisense, pero de igual forma, por no ser fuertemente tipado, me sigue dando a veces dolor de cabeza cuando uso librerías/componentes de terceros y no hay mucha documentación.

Esto me empezó a pasar con NodeJS y Sails, un framework MVC que hace el desarrollo muy similar a Ruby on Rails. Mi costumbre al comenzar a utilizar un framework que desconozco es comenzando con intellisense y ver que posibilidades tengo al ver el autocomplete de Visual Studio (lo sé, no es muy buena idea depender de eso). Pero pensé, en que si Javascript se convertirá en el lenguaje principal en el desarrollo, en mi opinión, tiene que ser un lenguaje fuertemente tipado para hacer todo el ciclo lleno de felicidad. Para esto les presento TypeScript, un pre compilador (se le llama así?) fuertemente tipado, robusto y orientado a objetos que su código se convierte en Javascript que cualquier navegador lo correrá sin problemas.

Para comenzar, necesitaremos Visual Studio 2013 como mínimo el update 2 (cualquier versión de Visual Studio, te recomiendo Community Edition) y las herramientas de desarrollo de NodeJS. Una vez esto instalado, comenzemos.

Creando el proyecto

Creando el proyecto Continuar leyendo “Comenzando con NodeJS, Express y TypeScript – Parte 1”