Node en ejemplos: importando paquetes

 

Node JS es una plataforma que nos permite correr aplicaciones Javascript del lado del servidor.  En post pasados hemos visto su instalación y algunos ejemplos. 

Instalación en distribuciones Ubuntu.

$ curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
$ sudo apt-get install -y nodejs

Comprobamos su instalación:

$ npm -v
$ node -v

Paquetes en Node JS.

Un paquete son archivos JS empaquetados. Es una parte fundamental en la reutlización de código.

Node JS nos permite importar paquetes para realizar ciertas funciones especiales, así como importar nuestros propios paquetes.

Ejemplo. Importar el paquete 'path' de Node Js. Para ello necesitamos tener un archivo texto.txt.

const path = require('path');
const print = console.log;

print("Archivo:");
print(path.parse("/home/codemonkey/Documentos/pruebasNodeJS/texto.txt"));

La salida:

Archivo:
{
  root: '/',
  dir: '/home/codemonkey/Documentos/pruebasNodeJS',
  base: 'texto.txt',
  ext: '.txt',
  name: 'texto'
}

Ejemplo. Crear un paquete llamado suma e importarlo en otro archivo denominado test_suma.js.
suma.js

exports.sumar = (x,y) => x+y;

test_suma.js

// Importamos suma.js
const operacion = require('./suma');
var x = 4, y = 3;
console.log(`Suma de ${x} + ${y} es: ${operacion.sumar(x,y)}`);

// Creamos una clase
class Operacion{
   getOperacion(x,y){
      const operacion = require('./suma.js');
      return operacion.sumar(x,y);
   }
}

x = 7;
y = 8;
let my_operacion = new Operacion().getOperacion(x,y);
console.log(`Suma de ${x} + ${y} es: ${my_operacion}`);

Ejecutamos:

$ node test_suma.js

Resultado:

Suma de 4 + 3 es: 7
Suma de 7 + 8 es: 15

Nota:  Cuando es un paquete de Node JS no es necesario poner el punto y diagonal. Solo cuando es un paquete hecho por nosotros. También se puede omitir la extensión *.js en paquetes propios como se puede ver:

// Importo paquete de Node JS
const path = require("path");

// Importo mi paquete 
const path = require("./saludo");

Y un ejemplo más...

const path = require('path');
const print = console.log;

print("Archivo:");
print(path.parse("/home/codemonkey/Documentos/pruebasNodeJS/texto.txt"));


const saludo = require('./saludo');
saludo.saludo();
saludo.despedida();

const opera = require('./suma');
let x = 87.5;
let y = 45.8;
console.log(`Numeros >> x = ${x}, y = ${y} `);
console.log("Suma: ",opera.sumar(x,y));

const os = require('os');
console.log("Info del sistema:");
console.log("Arquitectura:",os.arch());
console.log("Hostname:",os.hostname());

Enlaces:
https://codemonkeyjunior.blogspot.com/search?q=node
https://nodejs.org

Instalar Angular Cli

 

He aquí los pasos para configurar Node e instalar Angular Cli.

1. Abrir Chrome, dar F12 para abrir consola.

2. En la consola escribir:

btoa('ID:PASSWD');

3. Copiar la cadena resultante (sin comillas).

4. Abrir una terminal (CMD, etc.) e ingresar los siguientes comandos:

npm config set progress true
npm config set registry http://url_nexus
npm config set strict-ssl false
npm config set always-auth true
npm config set _auth CADENA_RESULTANTE

5. Teclear el siguiente comando para instalar Angular Cli.

npm install -g @angular/cli

Nota: en caso de no tener chrome usar el servicio de https://www.base64encode.net/javascript-btoa

Ionic framework

Ionic es un framework que permite crear aplicaciones móviles híbridas. Éstas aplicaciones son las que emplean tecnologías como HTML, CSS y Javascript. Una aplicación móvil híbrida se despliega dentro de un contenedor como Cordova. Contrario a las aplicaciones nativas no emplea ninún lenguaje propio del dispositivo.

Instalando Ionic Framework

$ npm i -g ionic

Comprobamos su instalación:

$ ionic --version

Creando una aplicación.

Creamos una aplicación en blanco.

$ ionic start miApp blank --type=angular

Nos ubicamos en la carpeta creada.

$ cd miApp 

 Arrancamos el servidor:

$ ionic serve

Se abrirá el navegador en la dirección http://localhost:8100

Creamos una página.

$ ionic generate page pagina-uno

Ahora editamos home.page.html y agregamos un botón.

<div class="ion-padding">
    <p>Está la página de inicio.</p>
    <ion-button class="primary"  (click)="launchPaginaUnoPage()" >Ir a la página uno</ion-button>
  </div>

Editamos home.page.ts añadiendo un método para lanzar la página pagina-uno.

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';
import { PaginaUnoPage } from '../pagina-uno/pagina-uno.page';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(public navCtrl: NavController,
   private router: Router) {}

  launchPaginaUnoPage(){
   console.log('Voy a la página uno')
   this.router.navigate(['/pagina-uno'])
  }

}

Agregamos un bóton de regreso a home en pagina-uno.page.html

<div class="ion-padding">
    <p>Está es nuestra primera página.</p>
    <ion-button class="primary" (click)="launchHomePage()" >Ir a home</ion-button >
  </div>

Creamos el método para regresar a home en pagina-uno.page.ts

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

@Component({
  selector: 'app-pagina-uno',
  templateUrl: './pagina-uno.page.html',
  styleUrls: ['./pagina-uno.page.scss'],
})
export class PaginaUnoPage implements OnInit {

  constructor(private router:Router) { }

  ngOnInit() {
  }

  public launchHomePage():void{
    console.log('De regreso a home');
   this.router.navigate([''])
  }


}

Arrancamos el servidor.

$ ionic serve

Observamos el resultado:

Damos click en Ir a la página uno.

 Tenemos hecha nuestra primera aplicación con Ionic.

AngularJS: Directivas y expresiones

En este post hablaremos de directivas en AngularJS. Pero antes que nada debemos instalar un sencillo y muy útil servidor:

$ npm install -g http-server 

Para ponerlo activo tecleamos desde una terminal:

$ http-server carpetaProyecto/

Abrimos nuestro navegador en http://localhost:8080/ para cerrar tecleamos en la terminal Ctrl + C.

Como vimos en el anterior post AngularJS posee etiquetas especiales llamadas directivas.Éstas directivas son atributos que se agregan a los elementos HTML, por lo regular comienzan con ng-.

Directivas comunes:

• ng-app: para especificar una aplicación.
• ng-controller: para especificar un controlador.
• ng-model: asocia el valor de una variable con el elemento HTML.
• ng-click: para soltar o ejecutar un evento.
• ng-bind: para enlazar un valor del scope con un elemento HTML sin necesidad de {{ }}

Ejemplo. Creamos un módulo y un controlador.

app.js

/*Módulo 'miApp'*/
var app = angular.module('miApp', []);

/*Controlador 'miControlador'*/
app.controller('miControlador', function($scope) {});

En HTML:

view.html

<!-- Definimos la app -->
<html ng-app='miApp'>

<!-- Definimos el controlador -->
<body ng-controller='miControlador'>
   <!-- contenido -->
</body>

¿Cómo defino las expresiones?
Existen dos formas para definir una expresión.

 Primera forma:

{{ expresion }}

Segunda forma:

ng-bind="expresion".

Ejemplo. Algunas expresiones:

{{ 34 + 32 }}

{{ cadena }}

{{ edad>18? "Eres mayor de edad" : "Eres menor de edad" }}

Ejemplo. Una página simple usando AngularJS.

<html ng-app="miApp">

<script src="js/angular.min.js"></script>


<body ng-controller="miControlador">
<h1>{{ titulo }}</h1>

<script>
/*Módulo 'miApp'*/
var app = angular.module('miApp', []);

/*Controlador 'miControlador'*/
app.controller('miControlador', function($scope) {
 
 //$scope es la variable principal
 $scope.titulo ="Codemonkey Junior";

});

</script>

</body>
</html>

Es todo por hoy.

Node JS

 

Node es considerado un entorno de ejecución de JavaScript orientado a eventos asíncronos (más información en https://nodejs.org/es/about/). 

Creamos un archivo *.js

test.js

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  res.end('<h1>Hola Node JS</h1>');
});

server.listen(port, hostname, () => {
  console.log(`El servidor se está ejecutando en http://${hostname}:${port}/`);
});

Ejecutamos:

$ node test.js

Abrimos el navegador en http://localhost:3000

Ahora crearemos un módulo.

1. Creamos una carpeta llamada testNodeJS
2. Tecleamos npm init
3. Tecleamos npm install

Si todo va bien, debe haber un archivo llamado package.json. 

{
  "name": "app-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Por defecto tendremos un index.js Ahora sustituimos su contenido por esto:

const http = require('http');
const hostname = '127.0.0.1';
const port = 8088;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  res.write('<h1>Node JS</h1><br/>');
  res.end();
});

server.listen(port, hostname, () => {
  console.log(`Servidor corriendo en http://${hostname}:${port}/`);
});

Ejecutamos:

$ node index.js

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

Veremos el mensaje Node JS

Ahora crearemos un módulo

listaString.js

exports.listaString=["Java","Kotlin","Scala","Groovy","Ceylon"];

Ahora modificaremos el archivo index.js, importamos el módulo de la siguiente manera:

var identificador = require('nombre_modulo')

index.js

//importamos nuestro módulo listaString.js
var listaStr = require('./app/listaString.js');


const http = require('http');
const hostname = '127.0.0.1';
const port = 8088;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  res.write('<h1>Node JS</h1><br/>');
  res.write("<ul>");
  for(elemento in listaStr.listaString){
   res.write("<li>"+listaStr.listaString[elemento]+"</li>");
  }
  res.write("</ul>");
  res.end();
});

server.listen(port, hostname, () => {
  console.log(`Servidor corriendo en http://${hostname}:${port}/`);
});

Es preciso notar esto:

res.write("<ul>");
  for(elemento in listaStr.listaString){
   res.write("<li>"+listaStr.listaString[elemento]+"</li>");
  }
  res.write("</ul>");

Así la lista se verá en nuestro index.js

Links:

https://linuxize.com/post/how-to-install-node-js-on-ubuntu-18.04/

https://codemonkeyjunior.blogspot.com/2016/11/un-vistazo-nodejs.html 

https://nodejs.org/es/