Herramientas de desarrollo

​ En este post antes de avanzar con AngularJS (todavía estoy preparando el material y viendo tutoriales xD), quiero compartir unos consejos sobre el uso de herramientas para programar.

Sublime Text

Se trata de un editor de texto plano muy bueno con una interfaz muy amigable, muchos atajos por teclado y lo podemos usar en distintos sistemas operativos. Página oficial de Sublime Text.

Tenemos muchas facilidades para manejar un proyecto ya que podemos abrir una carpeta y ver todos los subdirectorios muy fácilmente. La interfaz de esta función luce como la siguiente imagen.

Sublime Text también tiene reconocimiento de sintaxis del archivo que estemos editando. El editor reconoce la sintaxis automáticamente con la extensión correcta del archivo, aunque si la deseas cambiar accede al menú: View->Syntax y selecciona la de interés.

Entre los atajos por teclados que más usamos están:

• TAB: Con tener seleccionado una sección de código, podemos corregir la indentación agregando espacios por igual a la izquierda a todas la líneas por cada TAB que presionemos. También podemos eliminar espacios ejecutando SHIFT+TAB.
• CTRL+P: Permite buscar un archivo dentro de la carpeta del proyecto que usamos actualmente. Escribimos un par de letras y la herramienta nos va a sugerir todos los archivos que coincidan con estas letras.
• CTRL+D: Nos permite renombrar un texto en todo el archivo en tiempo real.
• CTRL+F: Podemos encontrar una palabra que nos interese con este comando y para buscar la siguiente coincidencia del texto usa F3.
• CTRL+H: Lo usamos para conseguir y reemplazar un texto dentro del archivo.
• CTRL+SHIFT+F: Es una versión mejorada de CTRL+H ya que reemplaza en todos los archivos del proyecto abierto en el que este texto coincida.
• CTRL+Barra espaciadora: Muestra las sugerencias para completar el texto que escribimos. En varios lenguajes de programación nos sugiere funciones y autocompleta el cuerpo de esta con los campos mínimos y necesarios.
• CTRL+SHIFT+T: Vuelve abrir el último archivo que cerramos.
• CTRL+TAB: Navegamos entre los archivos que tenemos abiertos en el orden que los hemos estado usando.
• CTRL+Página arriba y abajo: Navegamos al siguiente archivo a la derecha con CTRL+Página arriba y navegamos a la izquierda con CTRL+Página abajo.

Además de estos existen muchos otros comandos y pueden subscribirse a josh@sublimetexttips.com para recibir nuevos Tips cada semana sobre funciones y comandos útiles en Sublime Text.

Git

Es altamente recomendable manejar versiones de tu código, porque cada cambio que hagas tú o tu equipo pueden rastrearlo a través de la historia. Y es por esto que les quiero hablar de la herramienta Git, el controlador de versiones más usado hasta ahora. Y una de las plataformas que permite almacenar el proyecto es GitHub. Visiten la página oficial de Github.

Los conceptos básicos que necesitamos manejar acerca del control del versiones son:

• Repositorio: Es un sitio donde se almacena y mantiene la información.
• Commit: Es un registro de todos los cambios realizados en el proyecto. En este se suele escribir un comentario que resuma los cambios realizados en el código.
• Branch: Es una versión del proyecto que se suele tener para diferenciar la versión en desarrollo, producción y de prueba.

GitHub nos permite tener repositorios públicos y privados, aunque este último es pago. Podemos trabajar en un proyecto varias personas a la vez, ya que con el manejo de versiones podemos saber el estado actual y quien realizo los cambios. Debemos crear una cuenta en la página web para poder trabajar y ser agregado en un proyecto.

Entre los comandos más usados tenemos:

• git init: Inicializa el repositorio del proyecto.
• git add <file_name>: Agrega el archivo en particular al commit actual del proyecto.
• git add .: Agrega todos los archivos presentes en la carpeta del proyecto al commit actual del proyecto.
• git commit -a: Nos permite crear un commit con un mensaje visualizando los nombres de los archivos agregados, modificados, eliminados e ignorados.
• git remote add origin <repository_link>: Permite agregar al origen un repositorio remoto a tu proyecto.
• git remote set-url origin <repository_link>: Si queremos modificar el repositorio remoto con otro link usamos este comando, aunque si no existe todavía lo crea.
• git push origin master: Subimos al repositorio todos los commits que tengamos aún sin subir al repositorio.
• git status: Nos muestra en que branch estamos actualmente y que archivos estan siendo ignorados, modificados o eliminados actualmente.
• git pull origin master: Descarga el estado actual del repositorio, así que si hemos realizado cambios se sobrescribiran.
• git branch: Lista todos los branch del proyecto.
• git branch <nombre_branch>: Crear un branch con el nombre indicado. Por defecto estamos posicionados en el master
• git checkout -b <nombre_branch>: Moverse al branch indicado.
• git merge <nombre_branch>: Une el branch actual y el indicado.
• git reset --hard HEAD: Regresar al último commit.
• git reset --hard <old-commit-id> y luego git push -f origin branch: Regresa a un commit determinado y te deja como el último.
• git fetch <repo> <commit>: Descargar un commit específico.
  Ejemplo: git fetch https://github.com/tonylattke/haskell_helpers.git 8484c8b5dd6812b4194f627598d2323072e5ef28
• git push --delete origin <nombre_branch> o git push origin :<nombre_branch>: Elimina un branch específico.

Dropbox

Es un servicio de almacenamiento de archivos en línea que permite a su vez a través de una aplicación sincronizar archivos de tu computadora con lo que tengas en línea. Página oficial de Dropbox.

Les hablo de Dropbox más que por su capacidad de compartir archivos con otros usuarios, además del acceso a los archivos en donde sea, lo hago más bien por la capacidad de tener archivos públicos. Por ejemplo en la carpeta Public podemos situar una página HTML, con su CSS y Javascripts, así tenemos en un instante nuestra página web en línea para mostrar a alguien, claro no tenemos un sistema completo como lo que les he ido hablando en los últimos posts pero sirve de mucho para mostrar vistas básicas.

Otras alternativas

Además a estas herramientas podemos usar:

• Como editor de texto plano: Emacs, VI y Notepad++.
• Manejador de versiones: Bitbucket, Subversion, Google Code y Darcs.
• Almacenamiento en línea: OneDrive y Google Drive

Para el próximo post ya les tengo información acerca de Angular.js!

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Tutorial Node.js: Avanzado II

​ Gracias a los últimos comentarios voy a continuar un poco más con Node.js, ya que con la gran cantidad y variedad de herramientas que se tienen en Node.js se puede entender muy bien el funcionamiento de un sistema web.

Como lo muestro en la imagen podemos dividir en varias capas todas las herramientas que necesitamos para un sistema web.

• Servidor: Es el proyecto en ejecución y se encarga de escuchar por un puerto las solicitudes del usuario. Node.js es la herramienta que nos permite levantar el servidor en este caso.
• Manejador de base de datos: Es la herramienta que permite tener la conección del sistema con la base de datos y manipular los datos.
• Framework: Es la herramienta que nos permitirá manejar adecuadamente las consultas del usuario, tener una estructura de proyecto escalable y con código robusto. Este existen 2 tipos de framework:
• Backend: De forma sencilla es el framework que tendremos del lado del servidor.
• Frontend: Es el framework que se tiene en la aplicación del lado del cliente, es decir que los cáculos se llevarán a cabo desde el navegador. Esto nos permite tener páginas web dinámicas y con actualizaciones en tiempo real de la interfaz sin tener llamadas al servidor tan pesadas.

Le​​s hablo de todo esto con el propósi​​to de dar entender de la mejor ma​​nera que ​​​​​​​​​​​​en​​​​c​​ontre a MEAN, una herramienta ​​de javascript que une y permite d​​e una manera ​​​​​​​​​​​​m​​u​​y transparente el levantar el servidor​​, manejar base de datos, tener l​​os frameworks ​​​​​​​​​​​​d​​e​​ Front y Back end, y de ahí es donde​​ viene su nombre :​

• MongoDB: Manejador de base de datos.
• Express.js: Framework de Backend.
• Angular.js: Framework de Frontend.
• Node.js: Servidor.

​​Ex​​isten MEAN.js y MEAN.io, las diferencias​​ radican en que M​​EAN.js esta pensado como aplicación MVC (Modelo Vista Controlador) y MEAN.io trabaja por modulos. Además de esto tenemos que usan herramientas diferentes para manejar el proyecto mean para MEAN.io y yeoman para MEAN.js. ​​

MEAN.js

Los comandos de instalación tomando en cuenta que ya se tiene instalado npm y nodejs son:

Para crear un proyecto necesitamos ejecutar el comando yo meanjs y este automáticamente creará todo el proyecto con la siguiente estructura:

Agregamos la variable de entorno de ambiente de desarrollo ejecutando el comando: export NODE_ENV=development​​.

Luego ejecutamos npm install para descargar todas las librerías que necesita el proyecto y luego grunt para levantar el servidor. Finalmente accedemos al sistema en la dirección por defecto localhost:3000 y en el navegador se tendrá una página como la siguiente: ​

MEAN.io

Los comandos de instalación tomando en cuenta que ya se tiene instalado npm y nodejs son:

Para crear un proyecto necesitamos ejecutar el comando mean init nombre_del_app y este automáticamente creará todo el proyecto con la siguiente estructura:

Donde cada carpeta dentro de packages representa un módulo y se estructura de la siguiente forma:

Luego ejecutamos npm install para descargar todas las librerías que necesita el proyecto y luego grunt para levantar el servidor. Finalmente accedemos al sistema en la dirección por defecto localhost:3000 y en el navegador se tendrá una página como la siguiente:

E​​x​​​​​​​​​​​​​​isten muchas otras her​​ramientas interesantes de Node.j​​s entre las que destacan: ​​

• Restify: herramienta que construye correctamente los servicios web REST.
• Jade: Una herramienta para trabajar con plantillas de html con node.js.
• Socket.io: Permite gestionar de manera sencilla la comunicación en tiempo real entre navegador y servidor con soporte multinavegador.
• Mastering Node.js: Permite trabajar la alta concurrencia de los servidores web.
• Log.io: Monitor en tiempo real de log en el navegador.

​​ Tenemos má​​s alterna​​tivas a MEAN si lo que queremos es usar javascript, ​​​​​​​​e​​n​​tre los más populares y q​​ue están​​ usando las empresas es Loopback.

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Tutorial Node.js: Avanzado

​ Hoy trataremos la librería Express.js que podemos usar en Node.js para lograr tener un manejo de URLs, cargar archivos y mostrar contenido de una forma más sencilla.

Express.js lo podemos usar simplemente en nuestro proyecto, al agregar la librería en nuestro archivo que ejecuta el servidor, aunque de esta forma ciertamente tenemos muchas facilidades, realmente no estamos aprovechando en su totalidad a Express.js, ya que podemos crear un proyecto completo que contenga carpetas y permita de forma intuitiva entender y trabajar el.

Al igual que cualquier otra librería en node.js podemos usar el package.json o instalar Express.js con el comando ​npm install express.

1 - Hola Express.js
​ Al usar la librería, la estructura del archivo luce diferente, porque no tenemos un área en la que se cree el servidor y código que se mantenga en ejecución todo el tiempo, más bien tenemos una configuración inicial del servidor que indica el uso de Express.js (líneas 6 y 7), luego tenemos el manejo de las rutas que estan escuchando cualquier consulta a través de los métodos:

• get:Muestra información consultada. El link puede contener atributos con valores, como por ejemplo /inicio?nombre=Tony&apellido=Lattke.
• post:Recibe información. El link guarda dentro la información cifrada y por tanto este no debería mostrar los valores de los atributos. Este método es el que solemos usar para enviar contraseñas al iniciar sesión
• put:Actualiza información.
• delete:Elimina instancias.

Para el ejemplo vemos en la línea 11 que se usa el método get para manejar la consulta al link /, que significa consultar el link localhost:3000 y mostrará el mensaje Hola Express. Para cualquier otro link dará error la consulta, ya que no se posee una página por defecto.

2 - Manejo de URLs con Express.js
​ El manejo de los URLs mejora en gran medida gracias a Express.js, ya que no tenemos que interpretar el string "manualmente" y podemos inclusive extraer valores con el uso de variables dentro del link.

En la línea 12 del ejemplo tenemos una función que maneja el link /objeto/:id, esto significa que podemos hacer uso del valor que sea pasado a través de la consulta, accediendo a la variable req.params.id. Y para el ejemplo lo que tenemos es que se imprime este valor dentro del HTML. El potencial de esta variable es muy alto ya que podemos hacer consultas a la base de datos, mostrar contenido según el año, país... usen su imaginación :)

Un link sin pasar valores es muy parecido, ejemplo de esto es la línea 16.

Un contenido por defecto lo tenemos al colocar la expresión *, esto significa que no importa el link, si este no se iguala con los 2 anteriores, mostrará siempre el mismo contenido que maneje esta función.

3 - Projecto con Express.js

Ahora bien si queremos hacer un proyecto bien estructurado lo mejor que podemos hacer con Express.js es crear la aplicación completa con el comando express miprueba donde miprueba es el nombre de la aplicación. Este último comando creará una carpeta con el nombre miprueba con carpetas y archivos que se estructuran como la siguiente imagen:

Luego lo que necesitamos es ejecutar dentro de a carpeta npm install para instalar todas las librerías necesarias. El significado de esta estructura de archivos es la siguiente:

• app.js: Contiene todos los enlaces a las carpetas del proyecto.
• package.json: Se encuentran los requisitos de las librerías.
• bin: Tiene la configuración, creación, manejo de errores y eventos del servidor .
• node_modules: Se encuentran todas las librerías descargadas y usadas en el proyecto.
• public: Es la carpeta donde colocaremos todos nuestros archivos de imágenes, javascript y css.
• routes: Aquí se encuentran todas las funciones que manejan los URLs. Solemos llamar a esta sección la encargada de la lógica de nuestra aplicación.
• views: Contiene nuestros archivos HTML, solo que usamos la extensión .jade para hacer uso de etiquetas y funciones especiales para estructurar el HTML más fácilmente.
  • error.jade: Página para mostrar errores.
  • index.jade: Página de inicio en la ruta /. Hereda layout.jade
  • layout.jade: Página base en la que podemos tener la estructura plantilla que usarán todas las vistas. Esta página se suele estructurar de tal forma que todas puedan heredar de ella.

Finalmente para ver nuestro proyecto en funcionamiento ejecutamos DEBUG=miprueba ./bin/www​ y con esto veremos en el explorador al consultar localhost:3000, una página parecida a la siguiente imagen (puede que con actualizaciones en la librería esto cambie).

Hasta este punto ya tenemos una noción de como se estructura un proyecto web que usa un Framework, porque así como este existen otros que estructuran de una forma muy similar y que veremos en próximos tutoriales. Para más funciones se puede consultar la página oficial de Express.js.

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.

Team Oscar 2015

​ Este sábado no tengo un tutorial, les comparto un video que hice en los últimos 23 días para Team Oscar 2015, trata sobre el mejor consejo que haya recibido en la vida, para mi es una frase que me repite mi papá todo el tiempo, las cosas difíciles están hechas de cosas fáciles.



Pueden verlo en Youtube también, espero que les guste y puedan usar también este consejo en su vida, a mi me ha servido en cada paso que he dado :)

Nota: La resolución del video dentro de la página depende del dispositivo.

Tutorial Node.js: Intermedio

​ En este tutorial trataremos la conexión de Nodejs con un manejador de base de datos, pero primero ¿qué es una base de datos?

Una base de datos es un conjunto de datos almacenados para su posterior uso. Para poder acceder a estos y manipularlos usamos un manejador de base de datos, entre los más populares están: Oracle, Microsoft SQL Server, MySQL, PostgreSQL y SQLite.

Por motivos de tutorial trataremos SQLite, lo considero el más pedagógico y fácil de usar para desarrollo. Dentro de su carpeta de proyecto pueden instalarlo de 2 formas:

• Podemos usar el archivo package.json y especificar la librería a usar.
  Y para instalarlo ejecutamos en la carpeta del proyecto el comando: npm install. Para más información del manejo de librerías con package.json pueden consultar este enlace.
• La segunda opción que tenemos es instalar la librería manualmente con el comando: npm install sqlite3.

Ambas posibilidades crearan en la carpeta de nuestro proyecto una carpeta llamada node-modules, en esta se encuentran cada librería que usemos.

Para ejecutar el proyecto necesitamos al igual que antes situarnos en la carpeta donde se encuentra nuestro archivo y ejecutar desde la consola: node <nombre_de_archivo.js>. En tutorial no tendremos un servidor en ejecución, simplemente haremos operaciones con una base de datos. La integración de este código con uno que incluya un servidor en ejecución podemos llegarla hacer satisfactoriamente por nuestra cuenta, sin embargo en ese punto es donde entran en juego los frameworks web, los cuales harán todo ese trabajo por nosotros de una forma que nuestro proyecto sea legible, escalable y robusto.

1 - Creación de base de datos y consulta

SQLite a diferencia de otros manejadores de base datos se almacena en un solo archivo, es por eso que en el código vemos en la línea 5 un parámetro con el nombre del archivo que deseamos crear/cargar. Otros manejadores de base de datos tienen acceso restringido con administración de usuarios por contraseña y privilegios de uso.

Una base de datos en SQLite tiene una forma de representación de almacenamiento por tablas, donde los atributos están ordenados por columna y una sola instancia se ve representada por una fila. Para ilustrar esto mejor se tiene la siguiente foto, la cual es una vista de una extensión de Mozilla Firefox SQLite Manager.

En este caso tenemos una tabla que se llama personas y tiene como atributos el identificador, nombre y apellido.

Para hacer las operaciones sobre la base de datos usamos la función run, esta ejecuta el string que se le pase como parámetro. Las funciones en la base de datos que vemos en este ejemplo son:

• Creación de tabla: Esta tiene como sintaxis básica CREATE TABLE [IF NOT EXISTS] <nombre_tabla> (<nombre_de_atributo> <tipo_de_atributo> [,<nombre_de_atributo> <tipo_de_atributo>]).
• Insertar instancia: Permite crear una instancia dentro de la tabla y tiene como sintaxis básica: INSERT INTO <nombre_tabla> VALUES (<valor>[,<valor>]). Para el ejemplo vemos que se hace uso además de la función prepare, la cual permite realizar estas operaciones de inserción con menos código. Lo más importante de usar esta función de inserción es el orden de los atributos, ya que deben ser colocados en la misma posición en la que se creo la tabla.
• Realizar consulta: Esta función permite seleccionar de la base de datos los valores. La sintaxis básica que posee es: SELECT (* | <nombre_de_atributo> [AS <nombre_de_alias>] [, <nombre_de_atributo> [AS <nombre_de_alias>]]) FROM <nombre_tabla> [,<nombre_tabla>] [WHERE <condición> [, <condición>]]. Para el ejemplo tenemos la función each que ayuda a manipular cada valor que resulte de la consulta.

2 - Acceder, tipos de atributos, crear y eliminar tablas

En este ejemplo ya se asume que tienes una base de datos creada, además hago uso de unas buenas prácticas de código, para la lectura segura del archivo, esto se encuentra desde la línea 1 hasta la línea 10. Con respecto a la carga de la base de datos no existe mucha diferencia al compararlo código del ejemplo anterior.

Además quería ilustrar en este ejemplo el uso de varios tipos de valor y los más usados:

• INTEGER: Representa a los valores de tipo entero.
• TEXT: Representa a los valores de tipo string.
• DATE: Representa fechas y horas.
• REAL: Representa valores de tipo punto flotante.

Ya con esto se puede lograr representar muchas estructuras de gran complejidad, ya que podemos tener tablas que sirvan para expresar relaciones entre tablas, lo cual permite tener una representación de los datos muy robusta.

Además existen dos propiedades en los atributos que son mostradas en este ejemplo:

• PRIMARY KEY: Permite indicar que el atributo sirve de identificador de la instancia en la tabla.
• [NOT] NULL: Indica que el atributo debe tener valor en la instancia. Por defecto en SQLite el atributo puede no tener valor.

Otra función que podemos usar es la eliminación de tablas, para ellas usamos la siguiente expresión DROP TABLE <nombre_tabla>.

3 - CRUD

En este ejemplo ya se asume que tienes una base de datos creada.

Existen 4 funciones básicas dentro de una tabla que permiten gran modularidad del código:

• Create: Crear o insertar instancia. Más sobre la sintaxis de insert: INSERT INTO <nombre_tabla> (<nombre_atributo>[,<nombre_atributo>]) VALUES (<valor>[,<valor>]). La ventaja contra la sintaxis básica es que podemos insertar los valores en el orden que enunciamos los nombres de estos.
• Read: Consultar o leer instancias. A diferencia del ejemplo 1 tenemos la función all, esta permite tener en una lista todos valores que satisfagan las condiciones. Otros operadores sobre las condiciones son: =, ==, <, >=, >, >=, !=, <>, IN, NOT IN, BETWEEN, IS, and IS NOT.
• Update: Actualizar instancia. La sintaxis básica es: UPDATE <nombre_tabla> SET <nombre_atributo>=<valor> [,<nombre_atributo>=<valor>] WHERE <condición>.
• Delete: Eliminar instancias de la tabla. Sintaxis básica: DELETE FROM <nombre_tabla> WHERE <condición>.

Existen muchas otras funciones en las base de datos como ALTER TABLE (agregar o eliminar atributos en la tabla), UNIQUE (atributo o relación única en la tabla), FOREIGN KEY (crea referencia de atributo a otra tabla), ON DELETE CASCADE (al eliminar la instancia que haga referencia, se elimina esta también), entre otros. Para más funciones se puede consultar la página oficial de SQLite.

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.