Crea un API REST con Node.js y Express


Probablemente has escuchado de Node.js y te has preguntado que es y como usarlo, en este post vamos a abordar ambos temas.

Básicamente, Node.js es un entorno en tiempo de ejecución multi plataforma de código abierto, para la capa del servidor que se auxilia del El motor V8 JavaScript que google usa en su navegador Chrome para interpretar y ejecutar código Javascript, pero ahora del lado del servidor. Sin embargo, Node definitivamente No es como Apache Tomcat. Esos servidores básicamente son productos para servidor listos para instalar y que están listos para implementar aplicaciones instantáneamente, sin embargo esto no implica que sea mas complejo en uso o que tenga menos capacidades.

Entre las bondades que podemos encontrar usando Node estan:

  • Está basado en eventos,  y en un modelo asíncrono, que no bloquea la ejecución del hilo mientras se realizan operaciones de lectura/ escritura, lo que le permite servir una gran cantidad de peticiones al mismo tiempo.
  • Permite utilizar el mismo lenguaje (Javascript) tanto en el cliente como en el servidor.
  • Tiene una gran gestión de paquetes gracias a NPM (si quieres hacer algo, probablemente exista una librería/paquete que ya lo hacen).
  • Nos permite hacer en el servidor todo lo que necesitamos (acceso a ficheros, a bases de datos, conexiones de clientes.. )

Ahora si bien Node ya incluye un set de instrucciones para poder crear un API REST,   ocuparemos Express.js el cual es un framework ligero, flexible y robusto que se acopla muy bien a Node y que facilitará el desarrollo de nuestras apis.

Para instalar Node en nuestra PC es muy sencillo , solo debemos ir a la pagina oficial de Node.js  descargar el instalador de la ultima version recomendada.

Una vez se allá instalado Node, abriremos una terminal y escribiremos el siguiente comando para verificar la instalación de node.

node -v

Esto nos dará come resultado la version de Node.js que hallamos instalado.

Ahora procederemos a instalar Express.js de modo global, así como su herramienta para generar el esqueleto de nuestro proyecto REST ,para lo cual  ejecutaremos los siguientes comandos en la consola.

npm install express -g
npm install express-generator -g

Una vez se hallan ejecutados ambos comando tendremos Express.js y express generator de manera global y lo único que necesitamos para crear nuestro proyecto es colocarnos en alguna carpeta que destinada para nuestros proyectos de node y ejecutar en la consola.

express --view=ejs geeks-mexico

Una vez se ejecute este comando , crearemos el esqueleto de nuestro proyecto, usando como nuestro manejador de vistas a EJS (aunque hay soporte para otros incluiremos este por ser mas sencillo y familiar).

El siguiente paso sera  ubicarnos dentro de la carpteta  raíz de nuestro proyecto que en este caso es /geeks-mexico, y sera necesario descargar  la dependencias de nuestro proyecto  ejecutando.

npm install

Las dependencias de nuestro proyecto se encuentran declaradas en nuestra  archivo package.json (si has usado Maven se puede decir que este es el POM de Node), el cual si lo vemos en detalle aparte de declarar las dependencias del proyecto, también declara el nombre del proyecto, al versión y un script que le indica a en este caso a node, donde se encuentra el archivo que arranca todo el proyecto.

{
  "name": "geeks-mexico",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "ejs": "~2.5.7",
    "express": "~4.15.5",
    "morgan": "~1.9.0",
    "serve-favicon": "~2.4.5"
  }
}

Antes de arrancar la aplicación vamos a explorar con mas detalle la estructura del proyecto.

.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.ejs
└──index.ejs

Y como puedes ver el proyecto esta segmentado en 4 carpetas base

  • /bin . Aquí se encuentra el archivo que arranca nuestro proyecto.
  • /public . Aquí ubicaremos todos los recursos estáticos para un proyecto web, es decir CSS, Javascript en el front e imágenes.
  • /routes. Aquí se encuentran declarados los endpoints de nuestro API Rest.
  • /views. Como su nombre lo indica las vistas usadas en nuestro proyecto.

Pues bien entonces procederemos a modificar el archivo index.js y users.js, y como se muestra a continuación.

//index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title:'Hello world to geeks readers' });
});

module.exports = router;
 Aquí por medio de Express estamos haciendo 2 cosas,  la primera es renderizar la vista index.ejs sobre la raíz de nuestro servidor y pasando como parámetro a la vista el valor de title.
var express = require('express');
var router = express.Router();
//simulation of our resources
var users = [];

/* GET users listing. */
router.get('/', function(req, res, next) {
res.json(users);
});

//Create a new user {"user":#,"name":"something"}
router.post('/', function(req, res, next) {
users.push(req.body);
res.json(req.body);
});

//Update an existing user {"user":#,"name":"something"}
router.put('/', function(req, res, next) {
var user=users.filter(function(user){ return user.user==req.body.user}).pop();//find the user
if(user!=null&&user!=undefined){
   user.name=req.body.name;//update name by reference
   res.json(user);
}else{
   res.status(404);
   res.json("User to update not found");
}
});

module.exports = router;
 En este archivo estamos declarando 3 endpoints, el primero solo devuelve la lista de los usuarios que tenemos, el segundo nos permite agregar un usuario a la lista y el tercero nos permite actualizar algún usuario existente, buscándolo por medio de campo user.
Finalmente para arrancar nuestro proyecto, solo nos colocamos en la carpeta raíz de nuestro proyecto y desde la consola ejecutamos.
npm start
Comando que por detrás ejecuta, el o los scripts declarados en el package.json, que en este caso seria equivalente a  ejecutar.
node ./bin/www
Con esto habremos iniciado nuestro proyecto, y podemos acceder  a este sobre localhost:3000.
Podemos agregar usuarios si hacemos una llamada POST a localhost:3000/users
{ "user":1, "name":"user1"}
Y actualizarlo por medio de la misma ruta pero haciendo un PUT.
El repositorio de git con el código de ejemplo lo puedes clonar o descargar aquí.
Por el momento es todo amigos, pero muy pronto seguiremos con este ejemplo y mostraremos como acoplar este proyecto para una aplicación WEB con angular 5.
Autor : Hugo Alberto Avelino Hernández
Contacto :  hugo.avelinoh@gmail.com

Databinding en Angular 4 Parte 2 Event binding


En este post se explicará Event Binding y será utilizado para disparar eventos desde la vista html hacía el controller en Typescript, para esto crearemos un nuevo componente llamado events, veamos los pasos a seguir para hacerlo.

1 Crear el componente events

Para crear el componente events ejecutaremos el siguiente comando:

ng generate component events

Una vez generado el componente lo incluiremos en nuestro app.component.html Con el siguiente código:

<div align="center">
<h1>Geeks México</h1>
<h3>Base component</h3>
<img class="img-fluid" src="https://geeksjavamexico.files.wordpress.com/2017/09/5.png?w=400" width="25%" height="25%" alt=""></div>
<app-events></app-events>

Esto mostrará la siguiente vista:
Captura de pantalla 2017-10-26 a las 5.03.24 p.m.

2 Modificar events.component.ts

El siguiente paso será modificar el componente events.component.ts como se muestra a continuación:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-events',
  templateUrl: './events.component.html',
  styleUrls: ['./events.component.css']
})
export class EventsComponent implements OnInit {
  eventMessage = 'Where is Geeks México ?';

  ngOnInit() {
  }

  onSearchIt(){
    this.eventMessage='Geeks México is here !';
  }

}

Ahora analizaremos el código anterior:

  • Se creó el atributo eventMessage y se le asignó el valor Where is Geeks México ?
  • Se creó un método llamado onSearchIt() que al ejecutarlo cambia el valor de la variable eventMessage a ‘Geeks México is here !’

3 Modificar events.component.html

Una vez que nuestro método esta listo el siguiente paso es agregarlo a nuestro archivo events.component.html, para hacerlo utilizaremos el siguiente código:

<h3>{{eventMessage}}</h3>
<button class="btn btn-primary" (click)="onSearchIt()">Search</button>

Ahora analizaremos el código anterior:

  • En un título se colocará el valor del atributo eventMessage utilizando String interpolation
  • Cuando se oprima el botón con la leyenda Search se ejecutará el método onSearchIt() definido en typescript.
  • Del mismo modo que es posible utilizar el evento click utilizando la siguiente sintaxis (evento)=”método o código typescript” es posible definir otros eventos definidos en html

4 Probando todo junto

Una vez que creamos el código anterior lo siguiente será probarlo, para hacerlo ejecutaremos el comando ng serve y veremos la siguiente vista:

Captura de pantalla 2017-10-26 a las 5.21.19 p.m.

Una vez que se oprima el botón Search se mostrará lo siguiente:
Captura de pantalla 2017-10-26 a las 5.22.11 p.m.

Como se puede observar al oprimir el botón Search el título que mostraba Where is Geeks México ? Será actualizado a Geeks México is here ! Sin necesidad de actualizar ningún componente HTML.

Si tienes alguna duda o comentario no dudes en hacerlo en la sección de comentarios o en nuestras redes sociales.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com

 

Databinding en Angular 4 Parte 1


Databinding en Angular 4 es utilizado para comunicar los templates (Archivos html) con typescript (La lógica de negocio de nuestra aplicación). Esto nos permitirá generar aplicaciones web dinámicas que puedan generar contenido diferente de acuerdo a los usuarios.

Existen distintos modos de comunicación:

  • Para envío de información (Typescript->HTML):Permite tomar información de nuestro código typescript, este puede obtenerlo de un servicio web o de un cálculo y desplegarlo en una pantalla HTML, realizar este envío de información es posible a través de las siguientes opciones:
    • String interpolation:{{data}}
    • Property binding:[property]=”data”
  • Para la reacción a eventos del usuario(HTML-> Typescript): Los archivos HTML son la forma en la que el usuario interactúa con una aplicación, por esto es necesario disparar eventos hacia el código que es capaz de ejecutar la lógica de negocio, para hacerlo lo haremos con lo siguiente:
    • Event binding : (event)=”expression”
  • Combinación de ambos (Two way binding): También seremos capaces de ejecutar ambos al mismo tiempo con esto seremos capaces de disparar eventos y mostrar información al mismo del siguiente modo:
    • Two way data binding : [(ngModel)]=”data”

Con esto seremos capaces de realizar la comunicación entre nuestro sitio código typescript y nuestros templates html, veamos algunos ejemplos de cada modo. Se tomará como base para este post el ejemplo Crear componentes en Angular 4.

String interpolation

String interpolation funciona muy parecido a expression language, con esto es posible tanto declarar variables en el archivo typescript e utilizarlas dentro de nuestro html como escribir cualquier expresión que pueda ser traducida a un String veamos un ejemplo editando nuestro componente posts.components:

posts.components.ts

import { Component } from '@angular/core'
@Component({
    selector: 'app-posts',
    templateUrl: './posts.component.html'
})
export class PostsComponent {
    author='@raidentrance';
    title='Angular from scratch';

    getTitle(){
        return this.title;
    }
}

Como se puede observar, dentro de nuestro componente PostsComponent declararemos 2 atributos el atributo author y el atributo title y los inicializaremos con algunos valores por defecto. Es importante mencionar que es posible declarar métodos que devuelvan el valor de alguno de nuestros atributos, muestra de esto es el método getTitle().

posts.component.html

<div align="center">
    <h3>Post List</h3>
    <div>
        <table  class="table">
            <tr>
                <th>Author Twitter</th>
                <th>Post name</th>
                <th>Post date</th>
            </tr>
            <tr>
                <td>{{author}}</td>
                <td>{{getTitle()}}</td>
                <td> {{'19/08/1988'}}</td>
            </tr>
        </table>
    </div>
</div>

Es momento de analizar el funcionamiento del archivo HTML, como se puede observar en la tabla se utilizarán los símbolos {{}} para definir que utilizaremos String interpolation y se colocarán las variables definidas dentro de nuestra clase en typescript, a demás es importante resaltar que la fecha fue declarada como una expresión String, por esto es posible colocarla dentro de nuestro String interpolation y que del mismo modo que podemos obtener el valor de un atributo podemos obtener el resultado de un método.

Property binding

Una vez que entendimos como funciona String interpolation es tiempo de entender como funciona property binding, para esto agregaremos un botón a nuestro componente posts y lo modificaremos de acuerdo a un evento dirigido por un componente typescript, veamos el ejemplo:

posts.component.ts

import { Component } from '@angular/core'
@Component({
    selector: 'app-posts',
    templateUrl: './posts.component.html'
})
export class PostsComponent {
    author = '@raidentrance';
    title = 'Angular from scratch';
    disableNewPost = true;

    constructor() {
        setTimeout(() => { this.disableNewPost = false }, 2000);
    }

    getTitle() {
        return this.title;
    }
}

Podrás notar que al código anterior se realizaron las siguientes modificaciones:

  • Se le agregó el atributo disableNewPost inicializado en true, con esto seremos capaces de determinar que un botón que se agregará se encontrará desactivado al principio
  • Se declaró un constructor el cual se ejecutará cuando se cree el objeto de nuestra clase
  • Se utilizó la función setTimeout() la cual definirá que una vez pasados 2 segundos se cambiará el valor de la variable disableNewPost a false lo cual permitirá que el botón se active después de este periodo de tiempo

posts.components.html

<div align="center">
    <h3>Post List</h3>

    <button class="btn btn-primery" [disabled]="disableNewPost">Create</button>
    <div>
        <table  class="table">
            <tr>
                <th>Author Twitter</th>
                <th>Post name</th>
                <th>Post date</th>
            </tr>
            <tr>
                <td>{{author}}</td>
                <td>{{getTitle()}}</td>
                <td> {{'19/08/1988'}}</td>
            </tr>
        </table>
    </div>
</div>

Al principio del archivo HTML se agregó un botón nuevo con el texto Create, como ya sabrán el tag button contiene una propiedad tipo boolean llamada disabled, con esta es posible determinar si el elemento será habilitado o no. Utilizando property binding determinaremos el valor de este atributos de acuerdo al valor del atributo disableNewPost que se encuentra en nuestro archivo typescript, con esto el botón se encontrará des habilitado durante 2 segundos y pasando esto se habilitará de nuevo sin necesidad de actualizar algún elemento del DOM.

En el siguiente post se explicarán los otros modos disponibles en Angular 4 para realizar el databinding en nuestras aplicaciones. Si tienes alguna duda o comentario no dudes en hacerlo en la sección de comentarios o en nuestras redes sociales.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com

Crear componentes en Angular 4


Como se explicó en el primer post de Angular 4, la forma en la que se crea una aplicación es a través de componentes. En este post se explicará como crear componentes manualmente y haciendo uso de la CLI(Command line interface). Se tomará como base el post Configura Bootstrap en Angular 4.

Una vez que se tiene un proyecto construido veremos un componente llamado app.component que será utilizado para cargar el contenido al archivo index.html. A continuación veremos como crear componentes adicionales a nuestra aplicación.

Creación de componentes manualmente

A continuación crearemos un componente nuevo llamado posts siguiendo los siguientes pasos:

  • Crear un folder con el nombre del componente dentro del folder src/app/ , en este caso nuestro folder sería /src/app/posts.
  • Dentro del folder /src/app/posts crearemos los siguientes archivos:
    • posts.component.html : Contendrá el HTML que se desplegará donde se inserte el componente
    • posts.component.ts : Contendrá una clase typescript que definirá el componente.
  • Dentro del folder /src/app editaremos el archivo app.modules.ts para registrar el nuevo componente.

Paso 1 Editar el archivo app.component.html

El primer paso para este ejemplo será editar el archivo app.component.html con el siguiente código:

<div align="center">
<h1>Geeks México</h1>
<h3>Base component</h3>
<img class="img-fluid" src="https://geeksjavamexico.files.wordpress.com/2017/09/5.png?w=400" width="25%" height="25%" alt=""></div>

Con esto la aplicación se verá como se muestra en la siguiente imagen:

Captura de pantalla 2017-10-11 a las 21.13.14

Paso 2: Agregar un nuevo componente

Una vez que tenemos el componente base que es app.component, el siguiente paso es crear el componente posts. Para esto seguiremos los siguientes pasos:

1.- Crear un folder vacío en el folder /src/app/ llamado posts

2.- Crear el archivo posts.components.html dentro del folder /src/app/posts.

<div align="center">
<h3>Post List</h3>
<div>
<table  class="table">
<tr>
<th>Author Twitter</th>
<th>Post name</th>
<th>Post date</th>
</tr>
<tr>
<td>@raidentrance</td>
<td>Angular from scratch</td>
<td> 10/10/2017</td>
</tr>
</table>
</div>
</div>

3.- Crear el archivo posts.components.ts dentro del folder /src/app/posts.

import { Component } from '@angular/core'
@Component({
    selector: 'app-posts',
    templateUrl: './posts.component.html'
})
export class PostsComponent {

}

Paso 3: Incluir el nuevo componente en el archivo app.modules.ts

Una vez que ya se creó el componente el siguiente paso es registrarlo dentro del archivo app.modules.ts. Para hacerlo debemos editar el archivo como se muestra a continuación:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { PostsComponent } from './posts/posts.component';

@NgModule({
  declarations: [
    AppComponent,PostsComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Las modificaciones que se harán al archivo app.modules.ts son las siguientes:

  1. Incluir la sentencia import para PostsComponent desde ./posts/posts.component
  2. Incluir PostsComponent en el objeto declarations

Paso 4: Incluir el nuevo componente en el componente principal

Para hacer esto lo único que debemos hacer es editar el archivo app.components.html Como se muestra a continuación:

<div align="center">
<h1>Geeks México</h1>
<h3>Base component</h3>
<img class="img-fluid" src="https://geeksjavamexico.files.wordpress.com/2017/09/5.png?w=400" width="25%" height="25%" alt=""></div>
<app-posts></app-posts>

Como se puede observar,la única modificación fue agregar al final el selector de nuestro componente llamado .

Una vez concluido lo anterior la página se verá como se muestra a continuación:
Captura de pantalla 2017-10-11 a las 21.42.39

Creando un componente utilizando la CLI

Crear un componente utilizando la línea de comandos es mucho más sencillo, solo debes ejecutar el siguiente comando:

ng generate component posts

Una vez hecho esto verás que todos los archivos necesarios fueron creados automáticamente y que lo único que resta es editar los archivos para tener todo listo. Si tienes alguna pregunta sobre como hacerlo tu mismo, agrégala a los comentarios.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com

 

Introducción a Angular JS en español


Angular es un framework de Javascript que permite crear reactive single page applications (SPAs), pero ¿qué es una single page application?, Es una aplicación en la que puedes navegar y verás en la url que son páginas diferentes pero es solo un archivo html.

Javascript es más rápido que muchos frameworks como JSF or Struts ya que no necesita hacer una petición al servidor por cada cambio que se quiere hacer a la pagina, en dado caso que necesite alguna información del lado del servidor la puede realizar de modo asíncrono sin interrumpir la navegación del usuario actualizando solo en componente del dom que se desea.

¿Qué versión de Angular utilizar (Angular 1, Angular 2 o Angular 4)?

Existen varias versiones de Angular JS así que definamos cada una de ellas:

  • Angular 1 = Fue la primera versión de Angular JS y fue liberada un par de años atrás. Permitiendo por primera vez escribir reactive applications, lo cual lo hizo muy popular.
  • Angular 2 = Angular 2 es un framework completamente nuevo ya que fue re escrito completamente y es el futuro de angular. Fue liberado aproximadamente un año atrás (así que si ya sabes Angular 1 olvida todo lo que sabes e inicia de nuevo :D).
  • Angular 3 = Es una actualización a Angular 2, pero, ¿Por qué no llamarlo Angular 3 ? (La versión 3 se saltó debido a un conflicto interno en el versionamiento)

Instalando Angular

Para instalar angular utilizando la línea de comandos debemos seguir los siguientes pasos:

  1. Instala u actualiza tu versión de node js, para esto ve a http://nodejs.org descarga e instala la versión más reciente. En estos ejemplos no es necesario utilizar nodejs para crear algún tipo de backend, solo se descargará porque la CLI lo requiere.
  2. Actualiza la CLI con
npm uninstall -g angular-cli @angular/cli
npm install -g @angular/cli

Creando nuestro primer proyecto

Una vez que tenemos instalado Angular y nodejs el siguiente paso es crear nuestro proyecto, para hacerlo seguiremos los siguientes pasos:

ng new angular-js-example
cd angular-js-example
ng serve

Con los pasos anteriores se creará un proyecto angular y se iniciará un servidor de desarrollo, una vez que los comandos anteriores se ejecutaron correctamente podremos acceder a la url http://localhost:4200/ y ver la aplicación que hemos creado:

Captura de pantalla 2017-08-24 a las 2.00.56 p.m.

 Si se desea ejecutar el servidor en un puerto diferente es posible ejecutar:

 ng serve --port 8080

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com