Node JS: Un sencillo ejemplo con Express JS

ec564-shomecode4

En otros posts hemos visto cómo crear un servidor, sin embargo, en esa ocasión se empleó Typescript. En este post sólo usaremos Node JS.

 Si no tienes instalado express, deberás instalarlo:

 
$ npm install -g express

Creamos un archivo llamado servidor.js que tendrá el siguiente contenido:

 
//Agregamos Express JS
const express = require('express');
const app = express();

Creamos una petición GET:

 
app.get("/",(req, resp) =&gt; resp.send("<h1>Express<font color='steelblue'>JS</font> funcionando</h1>"))

El servidor escuchará en el puerto 5000 (puedes ponerle 8080, 8090, 3000, etc.):

 
app.listen(5000, ()=> console.log("Servidor funcionando en http://localhost:5000/"));

Ejecutamos:

$ node servidor.js

Abrimos el navegador en http://localhost:5000/

También podríamos poner un servicio:

app.get("/prueba", (req,resp) =>{
  var listaDatos = [
  {
    "id": 1,
    "fecha":"Martes, 4 de Septiembre de 1982"
  },
  {
    "id":2,
    "fecha":"Miercoles, 10 de Febrero de 1999"
  }];

  resp.send(listaDatos);
});

También instalaremos body-parser (para realizar peticiones HTTP):

$ npm install -g body-parser

El servicio lo podemos ver en http://localhost:5000/prueba

Código completo:
servidor.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extend:true}))

app.get("/",(req, resp) =&gt; resp.send("<h1>Express<font color='steelblue'>JS</font> funcionando</h1>"))


app.get("/prueba", (req,resp) =&gt;{
  var listaDatos = [
  {
    "id": 1,
    "fecha":"Martes, 4 de Septiembre de 1982"
  },
  {
    "id":2,
    "fecha":"Miercoles, 10 de Febrero de 1999"
  }];

  resp.send(listaDatos);
});

app.listen(5000, ()=&gt; console.log("Servidor funcionando en http://localhost:5000/"));

Advertisements

NodeJS + Typescript: crear un sencillo servicio

ec564-shomecode4

En el anterior post vimos cómo crear un servidor. En este post veremos cómo crear un sencillo servicio (en formato JSON) para después mostrarlo en un div HTML.

Ejemplo. Crearemos un servicio que nos muestre los datos de unas computadoras. Los atributos de la computadora serán: marca, modelo, sistema (operativo), dirección ip y dns.

1. El archivo servicio_computadora.ts es una interface en Typescript:

/*servicio_computadora.ts*/

//interface con 5 atributos
export interface ServicioComputadora{
	marca:string
	modelo:string
	sistema:string
	ip:string
	dns:string
}

 
2. Importaremos el archivo servicio_computadora.ts en servidor.ts
 

/*servidor.ts*/
import express from 'express'
import {Application} from 'express'

//En esta parte se realiza la importación
import {ServicioComputadora} from './servicio/servicio_computadora'


export class Servidor{
	private app: Application;

//...

//Creamos el servicio
this.app.get("/computadoras",function(request,response){
//computadoras de tipo ServicioComputadora
			var computadoras: ServicioComputadora[] = [{
			marca:'DELL',
			modelo:'1200',
			sistema:'Windows Vista',
			ip:'147.215.23.13',
			dns:'8.8.8.8'},
			{
			marca:'DELL',
			modelo:'Alienware',
			sistema:'Windows 8.1',
			ip:'147.215.23.16',
			dns:'207.68.222.222'},
			{
			marca:'iMac Pro',
			modelo:'AirBook Pro',
			sistema:'OSX Solaris',
			ip:'147.215.23.14',
			dns:'207.68.222.222'},
			{
			marca:'DELL',
			modelo:'1500',
			sistema:'Windows XP',
			ip:'147.215.23.11',
			dns:'207.68.222.222'}];

			response.send(computadoras);
		});



}

3. Creamos un archivo HTML index.html, este archivo debe estar en el directorio dist.

&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Typescript + NodeJS&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;h1&gt;Computadoras&lt;/h1&gt;
	&lt;div&gt;
		&lt;div id="contenedor"&gt;&lt;/div&gt;
		&lt;button id="btn"&gt;Cargar&lt;/button&gt;
	&lt;/div&gt;
	&lt;script&gt;
		const btn = document.querySelector("#btn");
		const contenedor = document.getElementById("contenedor");

		contenedor.addEventListener("dblclick",()=&gt;{
			contenedor.innerHTML = "";
		});

		btn.addEventListener("click", ()=&gt;{
			fetch('http://localhost:5000/computadoras')
			.then(function(response) {
				return response.json();
			})
			.then(function(myJson) {
				console.log(myJson);
				var resultado = "";
				for(dato in myJson){
					resultado +="<br />Marca: "+myJson[dato].marca;
					resultado +="<br />Modelo: "+myJson[dato].modelo;
					resultado +="<br />Sistema: "+myJson[dato].sistema;
					resultado +="<br />Ip: "+myJson[dato].ip;
					resultado +="<br />Dns: "+myJson[dato].dns+"<br />";
				}
				contenedor.innerHTML = resultado;
			});

		});
	&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

4. Agregamos un request (tipo GET) en servidor.ts

//...

//http://localhost:5000/index
this.app.get('/index', function(req, res, next) {
			res.sendFile('./index.html', { root: __dirname });
		});

//...

El código final de servidor.ts

import express from 'express'
import {Application} from 'express'
import {ServicioComputadora} from './servicio/servicio_computadora'


export class Servidor{
	private app: Application;

	constructor(private port?: number | string){
		this.app = express();
		this.saludar();
		this.setting();
	}
	
	private saludar():void{
		console.log("Iniciando el servidor...");
	}

	private setting():void{
		this.app.set('port', this.port || process.env.PORT || 5000)
	}


	//Promise
	async listen(){
		await this.app.listen(this.app.get('port'));
		console.log("Servidor en http://localhost:5000");

		//http://localhost:5000/saludo
		this.app.get("/saludo",function(request,response){
			response.send("<h1>Typescript + Node<font color='red'>JS</font> </h1>");
		});


		this.app.get('/index', function(req, res, next) {
			res.sendFile('./index.html', { root: __dirname });
		});

		//http://localhost:5000/computadoras
		this.app.get("/computadoras",function(request,response){
			var computadoras: ServicioComputadora[] = [{
			marca:'DELL',
			modelo:'1200',
			sistema:'Windows Vista',
			ip:'147.215.23.13',
			dns:'8.8.8.8'},
			{
			marca:'DELL',
			modelo:'Alienware',
			sistema:'Windows 8.1',
			ip:'147.215.23.16',
			dns:'207.68.222.222'},
			{
			marca:'iMac Pro',
			modelo:'AirBook Pro',
			sistema:'OSX Solaris',
			ip:'147.215.23.14',
			dns:'207.68.222.222'},
			{
			marca:'DELL',
			modelo:'1500',
			sistema:'Windows XP',
			ip:'147.215.23.11',
			dns:'207.68.222.222'}];

			response.send(computadoras);
		});


	}



}

Compilamos:

$ tsc --watch

Ejecutamos:

$ node dist/index.js

Abrimos navegador en http://localhost:5000/index

 

 

 

Node JS + Typescript: montar un servidor con Express

images

Siguiendo el anterior post.

Seguiremos estos pasos:

1. Crear directorio ‘typescript-node01’ :

$ mkdir typescript-node01 && cd typescript-node01

2. Crear proyecto NodeJS y Typescript.

$ npm init -y

$ tsc --init

Al hacer esto deben crearse de manera automática los archivos:

  • package.json
  • tsconfig.json

package.json

{
  "name": "typescript-node01",
  "version": "1.0.0",
  "description": "Proyecto Typescript + Node JS",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies":{
    "express": "^4.16.4"
  },
  "devDependencies": {
    "@types/express": "^4.16.1"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  }
}

3. Instalar dependencias (puedes omitir Typescript si ya lo tienes instalado):

$ npm install -g typescript

$ npm install -g express

$ npm install -g @types/express

4. Enlazar dependencias a node_modules:

$ npm link express && npm link @types/express

5. Creamos servidor:
servidor.ts

//Importamos express y declaramos que la usaremos como Application
import express from 'express'
import {Application} from 'express'

//clase Servidor
export class Servidor{
	private app: Application;

	constructor(private port?: number | string){
		this.app = express();
		this.saludar();
		this.setting();
	}

	private saludar():void{
		console.log("Iniciando el servidor...");
	}

	private setting():void{
		this.app.set('port', this.port || process.env.PORT || 5000)
	}

	//Promise
	async listen(){
		await this.app.listen(this.app.get('port'));
		console.log("Servidor en http://localhost:5000");

		//Debemos abrir el navegador en http://localhost:5000/saludo
		this.app.get("/saludo",function(request,response){
			response.send("
<h1>Typescript + Node JS</h1>
");
		});

	}

}

6. Creamos archivo principal:
index.ts


//Importamos clase de 'servidor.ts'
import {Servidor} from './servidor'

async function main(){
	const serv = new Servidor();
	await serv.listen();
}

//Invocamos función
main();

7. Compilar:

$ tsc --watch

8. Ejecutar

$ node dist/index.js

Abrir el navegador en http://localhost:5000/saludo

Node JS + Typescript: crear clases

surprised-1184889_960_720

Continuando con el anterior post es momento de ver las clases en Typescript. Agregamos una clase a nuestro proyecto: servidor.ts

typescript-node01/package.json
typescript-node01/tsconfig.json
typescript-node01/src/index.ts
typescript-node01/src/servidor.ts

servidor.ts

//Clase Servidor, debe tener 'export' para poder usarla en otro archivo
export class Servidor{

       //Método 'saludar'
	saludar(){
		console.log("Hola, mundo con Typescript y Node JS");
	}
}

Esta clase tiene un método que mostrará un mensaje. Modificamos index.ts

//Importamos el archivo 'servidor.ts'
import {Servidor} from './servidor';

//Creamos una función 'main'
function main(){
       //Creamos un objeto tipo 'Servidor'
	const miServidor = new Servidor();
        //método 'saludar' de la clase Servidor
	miServidor.saludar();
}

//invocamos a la función
main();

Compilamos y ejecutamos:

$ tsc --watch
$ node dist/index.js

Salida:
“Hola, mundo con Typescript y Node JS”

Links:

https://codemonkeyjunior.wordpress.com/2018/12/26/typescript-clases/

Node JS + Typescript: Iniciar un proyecto

images

En esta ocasión crearemos un proyecto con Typescript y Node JS. Comenzamos creando un directorio llamado typescript-node01 e inmediatamente un proyecto Node JS:


$ mkdir typescript-node01 && cd typescript-node01
$ npm init -y

Nos generará un archivo llamado package.json que puede lucir así:

{
  "name": "typescript-node01",
  "version": "1.0.0",
  "description": "Nuestro primer proyecto en NodeJS con Typescript",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

El siguiente paso es crear un proyecto Typescript:

$ tsc --init

Nota: Si no tienes Typescript, puedes instalarlo con esto:

$ npm install -g typescript

Al crear el proyecto Typescript se generará un archivo tsconfig.json. Podemos midificarlo para que luzca así:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  }
}

Ahora crearemos un directorio src y dentro de éste un archivo index.ts
typescript-node01/package.json
typescript-node01/tsconfig.json
typescript-node01/src/index.ts

index.ts

 console.log("Typescript y Node JS funcionando!!!");

Compilamos y ejecutamos proyecto:

$ tsc --watch
$ node dist/index.js

Salida:

Typescript y Node JS funcionando!!!

Nota: Recordar que nuestro código Typescript se convierte a Javascript para ser ejecutado por Node JS.

Node: Creando un sencillo servicio con Express JS

Selección_762

En está ocasión crearemos un sencillo servicio.

//Creamos lista de empleados
var listaEmpleados=[];

var empleadoDatosA = {"id":"1","nombre":"Robert Duvall","edad":30,"depto":"Informatica","salario":24000};
var empleadoDatosB = {"id":"1","nombre":"William Dafoe","edad":28,"depto":"Contabilidad","salario":22000};
var empleadoDatosC = {"id":"1","nombre":"Julianna Towers","edad":24,"depto":"Envios","salario":21000};

listaEmpleados.push(empleadoDatosA);
listaEmpleados.push(empleadoDatosB);
listaEmpleados.push(empleadoDatosC);

Montamos el servidor usando ExpressJS.

/*Cargar Express*/
var express = require('express');
var app = express();

//http://localhost:3000/empleados
app.get("/empleados",function(request,response){
	response.send(listaEmpleados);
});

/*Inicio del servidor*/
var servidor = app.listen(3000,function(){
	console.log("Servidor funcionando en puerto 3000");
});

Código completo.
empleados.js

/*Empleados*/
var listaEmpleados=[];

var empleadoDatosA = {"id":"1","nombre":"Robert Duvall","edad":30,"depto":"Informatica","salario":24000};
var empleadoDatosB = {"id":"1","nombre":"William Dafoe","edad":28,"depto":"Contabilidad","salario":22000};
var empleadoDatosC = {"id":"1","nombre":"Julianna Towers","edad":24,"depto":"Envios","salario":21000};

listaEmpleados.push(empleadoDatosA);
listaEmpleados.push(empleadoDatosB);
listaEmpleados.push(empleadoDatosC);

/*Cargar Express*/
var express = require('express');
var app = express();

//http://localhost:3000/empleados
app.get("/empleados",function(request,response){
	response.send(listaEmpleados);
});

/*Inicio del servidor*/
var servidor = app.listen(3000,function(){
	console.log("Servidor funcionando en puerto 3000");
});

Ejecutar:

$ node empleados.js

 Abrimos el navegador en:

http://localhost:3000/empleados

Node JS: Instalando Express JS

web-1935737_960_720

Levantar un sencillo servidor es aún más sencillo si usamos Express JS. Es ridículamente fácil como escribir unas cuantas líneas de código.

Comencemos con su instalación.

 

$ npm install express --save 
#O simplemente:
$ npm install express 
#Si no se quiere instalar permantemente
 

Nota: Antes debes tener instalado NPM y Node.

Creamos un archivo servidor.js

//Requerimos Express 
var express = require('express');

//Creamos nuestra app
var app = express();

//Creamos una petición GET
//http://localhost:8888/hola
app.get("/hola",function(request,response){
	response.send("<h1>Usando Express JS</h1>");
});

//Iniciamos servidor
var servidor = app.listen(8888,function(){
	console.log("Servidor en puerto 8888");
});

Ejecutamos:

$ node servidor.js

Abrimos el navegador en http://localhost:8888/hola

Links

https://expressjs.com/es/