Atom: El editor del siglo 21

En este post, les hablaré sobre el nuevo editor de texto "ATOM"... Super chiva en mi opinión personal, para más detalles ver el video a continuación:





Los invito a que sigan investigando, ATOM tiene muchas más funciones que las que se comentaron en el video. Sus comentarios son bien recibidos.

Gracias por leer.

Read More »

Módulos en Angular JS

Módulos

El concepto de módulo en Angular es para definir una aplicación, es decir, darle un nombre a la misma. Un módulo es un contenedor de todas las partes de una aplicación, por ejemplo: un controlador siempre debe estar ligado a un módulo.

Para crear un módulo se debe usar la función angular.module:

<div ng-app="miApp">...</div>

<script>

var app = angular.module("miAPP", []); 

</script>

El parámetro "miAPP" es el nombre del módulo y al mismo tiempo el del elemento HTML donde se ejecutará la aplicación.  A partir de acá, se pueden añadir controladores, directivas, filtros y muchos más a tu aplicación en AngularJS.

Añadiendo un Controller

En otros posts estaremos hablando de los controladores, si ya tienes conocimientos en MVC, la "C" en este patrón cumple el mismo rol en AngularJS.

Añadiendo una directiva

See the Pen Directiva test by Gerardo (@gelopfalcon) on CodePen.

Conclusión

Los "module" son el corazón de las aplicaciones en AngularJS, ya que a partir de esta podemos construir y utilizar diferentes componentes de este framework.

Read More »

Más sobre Directivas

En este post hablaremos sobre otras directivas muy usadas en AngularJS, tales como : ngInit y ngClick o ngRepeat.

Directiva ngInit

Esta directiva nos sirve para inicializar datos en nuestra aplicación, por medio de expresiones que se evaluarán en el contexto actual donde hayan sido definidas. Dicho de otra manera, nos permite cargar cosas en nuestro modelo, al inicializarse la aplicación.

Así de manera general podemos crear variables en el "scope", inicializarlas con valores, etc. para que en el momento que las vayas a necesitar estén cargadas con los datos que necesitas.

Nota: Realmente no he explicado, al menos suficientemente bien, qué es eso del "scope" y ya he  abusado en el número de veces que usamos el término. Por ahora hemos comentado que el scope mantiene los datos de tu aplicación, lo que en el paradigma de la programación MVC se llama "modelo". Así pues, si digo que creo variables en el scope lo puedes entender como la definición de un dato de tu aplicación, que se guarda en el denominado "modelo" del MVC. 

<div ng-app ng-init="miArrayDatos = [];">

Con esto consigues que tu aplicación se inicialice en el scope un dato llamado miArrayDatos como un array vacío. Pero no le prestes demasiada atención al hecho de haber colocado la directiva ngInit dentro de la misma etiqueta que inicializa la aplicación, pues podría ir en cualquier otra etiqueta de tu HTML. Realmente, colocarla en esa división marcada con ngApp es considerado una mala práctica. Ten en cuenta lo siguiente cuando trabajes con ngInit:

El único caso apropiado donde se debería de usar ngInit es en enlace de propiedades especiales de ngRepeat. Si lo que quieres es inicializar datos en tu modelo para toda la aplicación, el lugar apropiado sería en el controlador. Enseguida vemos un ejemplo de uso apropiado, cuando conozcamos la directiva ngRepeat.

Nota: Aclaramos ya que en el ejemplo final de este artículo vamos a usar ngInit para asociar datos al scope, e inicializarlos. Sin embargo, debemos de ser conscientes que para ello deberíamos usar un controlador. Como no hemos llegado a los controladores todavía, y queremos limitarnos solo a trabajar con el HTML, nos sirve como método alternativo.

Directiva ngRepeat

Esta directiva te sirve para implementar una repetición (un bucle). Es usada para repetir un grupo de etiquetas una serie de veces. Al implementar la directiva en tu HTML tienes que decirle sobre qué estructura se va a iterar. ngRepeat se usa de manera muy habitual y se verá con detenimiento en decenas de ejemplos. De momento puedes quedarte que es como un recorrido for-each en el que se itera sobre cada uno de los elementos de una colección.

La etiqueta donde has colocado el atributo ng-repeat y todo el grupo de etiquetas anidadas dentro de ésta, funciona como si fuera una plantilla. Al procesarse el compilador HTML de AngularJS el código HTML de esa plantilla se repite para cada elemento de la colección que se está iterando. Dentro de esa plantilla tienes un contexto particular, que es definido en la declaración de la directiva, que equivale al elemento actual en el bucle. Se ve mejor con un ejemplo.

<p ng-repeat="elemento in miColeccion">
Estás en: <span>{{elemento}}</span>
</p

El dato miColeccion sería un dato de tu modelo, habitualmente un array sobre el que puedas iterar, una vez por cada elemento. Pero también podría ser un objeto y en ese caso la iteración se realizaría en cada una de sus propiedades.

En lo relativo al contexto propio del bucle te puedes fijar que dentro de la iteración podemos acceder al dato "elemento", que contiene como valor, en cada repetición, el elemento actual de la colección sobre el que se está iterando.

Esta directiva es bastante sofisticada y explicar cada una de sus posibilidades nos llevaría algo de tiempo. Sin embargo, vamos a mostrar cómo podemos trabajar con ngRepeat en conjunto con ngInit, para completar la explicación de punto anterior.

<p ng-repeat="elemento in miColeccion" ng-init="paso=$index;">
Elemento con id {{paso}}: <span>{{elemento}}</span>
</p>

La directiva ngRepeat maneja una serie de propiedades especiales que puedes inicializar para el contexto propio de cada repetición. Para inicializarlas usamos la directiva ngInit indicando los nombres de las variables donde vamos a guardar esas propiedades. En este caso estamos indicando que dentro de la repetición vamos a mantener una variable "paso" que tendrá el valor de $index, que equivale al número índice de cada repetición. Osea, en la primera iteración paso valdrá cero, luego valdrá uno y así todo seguido. Igual que tienes $index, Angular te proporciona otras propiedades útiles como $first (que valdrá true en caso que sea la primera iteración) o $last (true solo para la última iteración)

Directiva ngClick

Terminamos nuestra dosis de teoría con una explicación de la directiva ngClick. Como podrás imaginarte es utilizada para especificar un evento click. En ella pondremos el código (mejor dicho la expresión) que se debe ejecutar cuando se produzca un clic sobre el elemento donde se ha colocado la directiva.

Típicamente al implementar un clic invocarás una función manejadora de evento, que escribirás de manera separada al código HTML.

<input type="button" value="Haz Clic" ng-click="procesarClic()">

Esa función procesarClic() la escribirás en el controlador, factoría, etc. Sería el modo aconsejado de proceder, aunque también podrías escribir expresiones simples, con un subconjunto del código que podrías escribir con el propio Javascript. Incluso cabe la posibilidad de escribir varias expresiones si las separas por punto y coma.

<input type="button" value="haz clic" ng-click="numero=2; otraCosa=dato " />

No difiere mucho a como se expresan los eventos clic en HTML mediante el atributo onclick, la diferencia aquí es que dentro de tus expresiones podrás acceder a los datos que tengas en tu modelo.

Ejemplo de uso de estas directivas en AngularJS

Ahora que hemos conocido las directivas, nos falta ponerlo todo junto para hacer un pequeño ejercicio básico con AngularJS.

Nota: Como advertimos al principio del artículo, solo voy a usar código HTML para este ejercicio. Por ese motivo hay un par de cosas que no serían consideradas buenas prácticas, como el uso de ngInit para inicializar el array "pensamientos" y el hecho de haber colocado dentro de un ng-click expresiones que sería mejor haber escrito en una función de nuestro controlador.

En esta aplicación tenemos un campo de texto para escribir cualquier cosa, un "pensamiento". Al pulsar sobre el botón se agregará dentro de un array llamado "pensamientos" lo que se haya escrito en el campo de texto. Además encuentras un bucle definido con ng-repeat que itera sobre el array de "pensamientos" mostrando todos los que se hayan agregado.

See the Pen Directives AngularJS by Gerardo (@gelopfalcon) on CodePen.

Read More »

GenyMotion, un nuevo emulador para Android

El SDK de Android es espectacular, incluye librerías y herramientas de depuración que son indispensables para crear una aplicación, pero el emulador siempre ha sido una piedra en el zapato para los desarrolladores. El rendimiento general del sistema se reduce al utilizar el simulador, al ejecutar una aplicación obtengo un rendimiento inferior al que tendría normalmente y de paso arruino la experiencia en cualquier otra aplicación que ejecute en mi sistema.

En resumen, el simulador de Android me pega toda la computadora!!!

Con Genymotion, el tiempo de respuesta es abismalmente inferior, por ejemplo, ejecutando la misma aplicación que me tomó casi 10 minutos en el simulador normal, me toma 1 minuto o menos realizar el mismo proceso en Genymotion.

El tiempo de arranque es mínimo y el rendimiento general de la aplicación es fluido y natural. El simulador de Genymotion se siente y se comporta como un dispositivo real.

Genymotion es un programa de paga, pero no te asustes, hay una versión gratuita para desarrolladores que te permite un amplio rango de acción, en mas de un año de usar la versión gratuita nunca he necesitado ninguna función adicional para probar mis aplicaciones.

Genymotion es el simulador perfecto que le faltaba a Android  ,durante mucho tiempo envidié secretamente el excelente emulador que tiene iOS, pero ahora lo siento por los fanboys de la manzana, ahora yo tengo un mejor emulador … y es gratis!

Instalar Genymotion

Para instalar Genymotion debes primero ir al sitio oficial  y crearte un nombre de usuario gratuito:

https://www.genymotion.com/#!/auth/signin

Ahora que tienes acceso al sitio, solo tienes que descargar la versión completa de Genymotion que incluye virtualbox, la maquina virtual en la que vas a ejecutar Genymotion.

Para los usuarios Mac, es necesario descargar por aparte VirtualBox e instalarlo antes de comenzar a usar Genymotion.

https://www.virtualbox.org/wiki/Downloads

Dispositivos virtuales Android

Ahora que tienes instalado Genymotion en tu equipo, el ultimo paso es instalar una versión de Android, puedes escoger diferentes equipos con configuraciones preestablecidas o equipos genéricos para configurarlos después. Si no estas seguro que equipo instalar, prueba con el Google Galaxy Nexus es un equipo bastante popular y te dará una buena guía de como se vera tu aplicación. Instala todas las maquinas virtuales que necesites.

Luego de unos minutos de descarga, tendrás disponible el emulador de Genymotion listo para probar tus aplicaciones.

Ejecutando aplicaciones

Para ejecutar una aplicación Android en Genymotion tienes dos opciones: la primera es simplemente tomar una aplicación con extensión  .apk y arrastrarla directamente al emulador. El sistema copiará e instalará automáticamente el archivo y lo ejecutará en el emulador.

La segunda opción, si estas creando aplicaciones en Android Studio o Eclipse solamente tienes que compilar tu aplicación mientras tienes Genymotion  funcionando. Una vez que tu aplicación este instalada el sistema te mostrara esta ventana para elegir donde ejecutar tu aplicación, elige la opción “choose a running device” y selecciona el simulador activo.

Este proceso instalará tu a aplicación directamente en Genymotion de la misma forma que lo haría en el simulador normal.

Read More »