React- Redux: Ejemplo simple de listado y creación.

Estuve realizando un nuevo ejemplo pero esta vez con un ejemplo simple de utilizar React y Redux para administrar todo el estado de la aplicación. 

Para configurar el proyecto utilicé este tutorial: https://decembersoft.com/posts/starting-a-react-redux-project-with-typescript/

El proyecto completo lo pueden encontrar en este repositorio de GitHub: https://github.com/fedecoraglio/react-redux

Angular 5 - Radio Button junto con ngModel

Este es un ejemplo simple de como trabajar con radiobutton.

1) Definimos lo siguente en el html:

<input type="radio" name="customRadio"  [value]="1" [(ngModel)]="radioValue">Radio 1
<input type="radio" name="customRadio"  [value]="2 [(ngModel)]="radioValue"> Radio 2

2) En el archivo ts simplement podemos definir el valor que queremos que quede seleccionado al inicio del component:

radioValue = 1

3) El valor queda almacenado en la variable radioValue dependiendo de la opción que se seleccioné.

Angular 5 - Encode y Decode url

Para poder realizar esta operación de encoding y decoding debemos utilizar los siguientes métodos:

let encode_url = encodeURIComponent("url_to_econde);

Para hacer decoding:

let decode = decodeURIComponent(encode_url );

fuente: https://www.w3schools.com/jsref/jsref_decodeuricomponent.asp

Supervisord - Agregar Tomcat como como proceso del supervisord.

Instalar el supervisord de la siguiente manera:

sudo apt-get install -y supervisor

La configuración esta en /etc/supervisord y dentro de esta carpeta esta el archivo llamado /etc/supervisord/supervisord.conf donde se encuentra la siguiente linea:

[include]
files = /etc/supervisor/conf.d/*.conf

Todo archivo dentro de la carpeta conf.d y que tenga en la extensión conf va a ser incluido como proceso dentro de supervisor.

Podemos crear un archivo llamado tomcat_control.conf dentro de la carpeta /etc/supervisor/config.d/ y agregar lo siguiente:

[program:tomcat]
command=/opt/tomcat/bin/catalina.sh run
user=tomcat
numprocs=1
autostart=true
autorestart=true
stderr_logfile=/var/log/supervisor/tomcat.log
stdout_logfile=/var/log/supervisor/tomcat.out.log

De esta manera luego ejecutar los siguiente comandos:

sudo supervisorctl reread
sudo supervisorctl update
sudo supervisorctl start tomcat
sudo supervisorctl status

Vamos como salida que el proceso tomcat esta corriendo correctamente.


CONFIGURAR NOTIFICACIONES SOBRE EL PROCESO TOMCAT


Para ello vamos a utilizar distintos lisener que nos ofrece supervisord como ser Crashmail y HttpOk


Primeramente debemos configurar el SMTP para poder enviar mails desde nuestro windows.

Instalamos primeramente mailutils:

sudo apt-get install mailutils

Intalamos SMTP:

sudo apt-get install ssmtp

Configuramos el SMTP:

sudo vim /etc/ssmtp/ssmtp.conf

Actualizamos con los datos de la cuenta a utilizar:

AuthUser=<user>@gmail.com
AuthPass=Your-Gmail-Password
mailhub=smtp.gmail.com:587
UseSTARTTLS=YES

Hacemos una prueba para verificar que el mail quedo correctamente configurado.

echo "This is a test" | mail -s "Test" <user>@<email>.com

Ahora vamos a crear un archivo llamado monitoring_lisener.conf dentro de la carpeta /etc/supervisor/conf.d/* y le agregamos la siguiente información:

[eventlistener:httpok]
command=httpok -m <user>@<email>.com -t 10 http://localhost:8080
events=TICK_5

[eventlistener:crashmail]
command=crashmail -a -m <user>@<email>.com
events=PROCESS_STATE_EXITED

El primero realiza un chequeo sobre la url localhost:8080 cada 5 segundos y con un timeout de 10 segundos. Si esta condicion se cumple envia una notificación al email que se pasa como parametro.

El segundo envia un mail cuando algún proceso pasa de estado RUNNING a EXITED

Fuente:

https://rianjs.net/2013/08/send-email-from-linux-server-using-gmail-and-ubuntu-two-factor-authentication
https://serversforhackers.com/c/monitoring-processes-with-supervisord
http://superlance.readthedocs.io/en/latest/httpok.html
https://poweruphosting.com/blog/install-tomcat-8-ubuntu/

Angular 2 - 15) Soportar diferentes llamadas a servicios Rest API

Objetivo:

• Soportar múltiples entornos(desarrollo-producción)

1. Abrir una consola y dentro del proyecto angular-faster ejecutar este comando:

json-server database.json

Levante un servidor en el puerto 3000

2. Abrir una nueva consola y dentro del proyecto angular-faster ejecutar este comando:

json-server --port 3001 database.json

Levanta un servidor en el puerto 3001

3. Abrir el archivo llamado environment.ts y agregar la siguiente información:

export const environment = {

production: false,

apiEndPoint: "http://localhost:3000"

};

4. Abrir el archivo llamado environment.prod.ts y agregar la siguiente información:

export const environment = {

production: true,

apiEndPoint: "http://localhost:3001"

};

5. Abrir el archivo llamado user.service.ts y actualizar la información siguiente:

import { Injectable } from '@angular/core';

import { Http, Headers, RequestOptions } from '@angular/http';

import 'rxjs';

import { User } from '../models/user';

import { environment } from '../../../environments/environment'

const SERVER_REST_API_URL = "http://localhost:3000/users/";

@Injectable()

export class UserService {

private http: Http;

private serverRestAPIUrl: string;

constructor(http:Http) {

  this.http = http;

  this.serverRestAPIUrl = environment.apiEndPoint + "/users";

}

getUsers() {

  return this.http.get(this.serverRestAPIUrl)

      .map(res => res.json());

}

deleteUser(id) {

  return this.http.delete(this.serverRestAPIUrl + id);

}

saveUser(user:User) {

  let body = JSON.stringify({

      "id": user.id,

      "name": user.name,

      "username": user.username

  });

  let headers = new Headers({ 'Content-Type': 'application/json' });

  let options = new RequestOptions({ headers: headers });

  return this.http.post(this.serverRestAPIUrl, body, options);

}

}

6. Abrir una consola y dentro del proyecto angular-faster ejecutar los siguiente:

ng serve --env=prod

7. Abrir en un brower la url: http://localhost:4200 y analizar que las consultas en la consola se ejecutan contra el entorno que fue definido para producción

8. Analizar cómo agregar un nuevo entorno además del de producción. Para ello se debe actualizar el archivo llamado angular-cli.json

Repositorio en GitHub