Práctica: Cree una aplicación web de sala de chat con tecnología de Node.js (segunda parte)

Este Nodo.js La serie de tutoriales lo ayudará a crear una aplicación web de sala de chat en tiempo real con tecnología de Node.js completamente implementada en la nube. A lo largo de la serie, aprenderá a configurar Nodo.js en su máquina Windows, cómo desarrollar una interfaz web con Expresarcómo implementar una aplicación basada en Node Express para microsoft azurecómo utilizar Zócalo.IO para agregar una capa en tiempo real y cómo implementarlo todo junto.

Nivel: Principiante a Intermedio: se espera que sepa HTML5 y JavaScript

Parte 2: Bienvenido a Express con Node.js y Azure

Bienvenido a la Parte 2 de la serie de tutoriales prácticos de Node.js: Cree una aplicación web de sala de chat con la tecnología de Node.js. En esta entrega, te mostraré cómo iniciar una nueva Expresarbasado en un proyecto de nodo e implementarlo en Azure.

¿Qué es Express?

Express es un marco de aplicación web Node.js mínimo, de código abierto y flexible diseñado para facilitar mucho el desarrollo de sitios web, aplicaciones web y API.

¿Por qué usar Express?

Express lo ayuda a responder a solicitudes HTTP con soporte de ruta para que pueda escribir respuestas a URL específicas. Express admite múltiples motores de plantillas para simplificar la generación de respuestas HTTP.

Deberá asegurarse de que Node.js esté correctamente instalado y listo. Vea la parte 1 de esta serie de tutoriales: Introducción a Node.js.

Empecemos

Comenzar un nuevo proyecto de Node.js es bastante sencillo.

1. Inicie Visual Studio. En el menú Archivo, haga clic en Nuevoy luego haga clic en Proyecto.

2. Deberá ir a Instalado > Plantillas > elemento de menú JavaScript a la izquierda y seleccionar Aplicación básica de Windows Azure Express a la derecha. Elija una ubicación y un nombre para su proyecto y haga clic en Aceptar.

3. Un mensaje le notificará que las dependencias definidas en package.json deben instalarse utilizando NPM, el administrador de paquetes. Echa un vistazo a una explicación de NPM aquí.

4. Se generará un proyecto que incluye un archivo llamado app.js. Empezaremos por ahí.

Explicación de app.js

//
/**
 * Module dependencies.
 */

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(require('stylus').middleware(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

Líneas 6 a 10

Las líneas 6 a 10 cargan varios módulos, incluidos express, http y path. Lo interesante es que también cargamos un módulo llamado rutas (que se explicará más adelante) y un módulo en la carpeta de rutas llamado usuario.

línea 12

En esta línea, llamamos a la función express() que creará nuestra aplicación. Esta aplicación se usará cuando decidamos crear un servidor HTTP y será el objeto que contenga todas las propiedades de nuestra aplicación web, así como el mapeo entre los URL recibida en una solicitud y la función que maneja su respuesta.

Línea 15 a 17

En estas líneas, establecemos varios parámetros de configuración, como en qué puerto se ejecutará el servidor (línea 15) y en qué directorio se encontrarán los archivos html de la plantilla (línea 16). En la línea 17 especificamos el motor de plantillas que queremos utilizar, en este caso Jade. Jade es un motor de plantillas popular que hace que escribir HTML sea extremadamente fácil y sin los requisitos de sintaxis extraños de los corchetes angulares (<>). Puede cambiar el motor de plantillas para que simplemente devuelva HTML tal como está y no haga nada más reemplazando la línea 17 con el siguiente código:
app.set(‘ver motor’, ‘html’);

Línea 18 a 23

Sobre estas líneas, establecemos varios parámetros de configuración. Puede encontrar el significado de cada parámetro individual echando un vistazo a la documentación de la API. La explicación de estos parámetros de configuración no es necesaria para este tutorial.

Línea 24 y 25

Estas líneas son interesantes ya que es donde especificamos el middleware para manejar Aguja Hojas CSS y HTML. El middleware es una capa que se inserta automáticamente en las llamadas a funciones entre la recepción de la solicitud y la devolución de una respuesta. En este caso, le pedimos a Express que ejecute el middleware stylus y el middleware estático para todas las solicitudes en las que la URL especifica una ruta dentro de la carpeta pública de nuestro proyecto. Usamos para este servidor CSS y JavaScript palabra por palabra y no ejecutamos una función de solicitud para esa URL.

Línea 27 a 30

En estas líneas, estamos especificando que Express maneje los errores si el entorno se configura como desarrollo y no como producción. No tienes que preocuparte por estas líneas.

Línea 32, 33

En estas líneas, finalmente estamos asignando una ruta URL en una solicitud HTTP a una función específica para manejar la respuesta. Volveremos a esto en breve.

Línea 35 a 38

En estas líneas, creamos un servidor HTTP y especificamos el puerto, junto con una devolución de llamada en caso de éxito para decir que el servidor se ha iniciado.

Enrutamiento

El enrutamiento y cómo hacer rutas correctamente es un tema controvertido y no hay una respuesta correcta. Hay muchos módulos que implementan enrutamiento para Express y Node.js, cada uno con un estilo y una estructura diferentes. Nos ceñiremos al motor de enrutamiento incluido en Express. En app.js, ya especificamos el motor de enrutamiento e importamos los módulos de ruta desde el directorio de rutas. Agregamos las rutas en la línea 32-33. En otras palabras, asignamos la URL en el navegador a la función en el servidor que responderá a esa solicitud. Esas funciones que manejarán las solicitudes están en el directorio de rutas. Echemos un vistazo a index.js.

/*
 * GET home page.
 */

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

Son solo tres líneas, pero esas tres líneas hacen mucho trabajo. La línea 1 agrega una función llamada índice a la variable exportaciones. Node.js crea la variable de exportaciones cada vez que se carga un módulo para permitirle pasar funciones y variables a otros módulos, en este caso, el módulo app.js.
El índice de función toma dos parámetros, req y res. Si recuerdas de Parte 1, el parámetro req contiene la solicitud recibida y el parámetro res contiene una variable en la que escribe su respuesta. En este caso, estamos ejecutando la función render en la variable de respuesta que toma dos parámetros. El primero es el parámetro que especifica la vista a usar (la vista es un archivo en el directorio de vistas) y no se requiere la extensión del archivo, por lo que el índice se convertirá en index.jade. El segundo parámetro es un objeto que contiene datos que se pueden insertar en la plantilla de jade.

La plantilla de índice

La plantilla index.jade es un lenguaje completamente diferente que no se explicará en este tutorial. Se requiere un conocimiento de HTML para toda esta serie de tutoriales y, en este caso, notará que el lenguaje de plantillas de jade casi siempre se asigna directamente a HTML.

extends layout

block content
  h1= title
  p Welcome to #{title}

Con la excepción de las palabras clave «bloquear» y «extender», las otras palabras clave significan exactamente lo mismo que en HTML. Esta plantilla será convertida por el middleware de jade que cargamos en el siguiente HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Express</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
  <body>
    <h1>Express</h1>
        <p>Welcome to Express</p>
  </body>
</html>

Notará que la etiqueta H1 que se generó contiene el valor del título que pasamos previamente en la función de representación. También notará que se insertó en la etiqueta p directamente en línea con el texto. Sin duda, también notará que todo el HTML generado incluye cosas que no están mapeadas en Jade. Ahí es donde entra la palabra clave «extiende». En este caso, elegimos extender el archivo layout.jade.

doctype html
html
  head
    title= title
    link(rel="stylesheet", href="https://www.noupe.com/stylesheets/style.css")
  body
    block content

Notará que el «contenido del bloque» vuelve a aparecer en ambos archivos, esto lo usa jade para especificar que este bloque de HTML va aquí (en el archivo layout.jade) y así es como se ve (en el archivo index.jade expediente).

En el archivo layout.jade, notará un enlace a un archivo style.css que aparentemente no existe en nuestro proyecto inicial. Este archivo se genera a partir del código style.styl usando el middleware Stylus tal como lo configuramos en app.js

¡Ahí tienes! Cómo pasamos de app.js a una ruta que define la respuesta y finalmente a la vista que declara cómo se ve esa respuesta. Si elige ejecutar la aplicación web localmente haciendo clic en el botón de depuración (puede elegir un navegador diferente haciendo clic en el botón desplegable a la derecha).

Cuando se presiona, se iniciará un servidor Node.js y se abrirá Internet Explorer en la URL raíz.

Publicación en Azure (para aquellos que usan Visual Studio)

Ahora que tenemos una aplicación Node.js basada en Express funcionando, implementémosla en la nube con unos pocos clics. Puede implementar en cualquier nube que admita Node.js entre ellos Nodejitsu, Herokuy Patio de máquinas. Usaré Microsoft Azure, ya que puedo ejecutar un sitio web de Node.js allí de forma gratuita.

Puede registrarse para una prueba gratuita de Microsoft Azure aquí. Obtendrá $220 para gastar en todos los servicios de Azure. Para el servicio que estamos usando, Sitios web de Azureen realidad puede ejecutar 10 sitios web sin gastar un centavo.

1. Una vez que haya configurado su cuenta de Azure, volveremos al IDE y haremos clic con el botón derecho en el proyecto Express y seleccionaremos el elemento Publicar del menú.

2. El elemento del menú Publicar abrirá un asistente con algunas opciones, querrá seleccionar los sitios web de Microsoft Azure de destino.

3. Se le pedirá que inicie sesión en este paso. Utilice aquí la misma cuenta de Microsoft que utilizó en el registro de Azure.

4. Deberá hacer clic en Nuevo para crear un nuevo sitio web de Azure. Si ya tiene uno creado, simplemente puede seleccionarlo del menú desplegable.

5. Complete los campos del asistente (igual que a continuación). Asegúrese de elegir un nombre de sitio único y haga clic en Crear.

6. Se encontrará con un asistente precargado con un Publicar abajo en el botón, presione Publicar.

¡ESTÁS LISTO! ¡AHORA USTED ESTÁ PUBLICADO EN LA NUBE AZURE!

Realice un recorrido por los sitios web de Azure en el portal azul. Puedes ver un vídeo aquí.

Nota: si encuentra errores al publicar, asegúrese de colocar su proyecto más cerca de la raíz de la unidad para evitar errores de copia temporales.

¡Estén atentos para la Parte 3!

La Parte 3 (Creación de un backend con Node, Mongo y Socket.IO) se publicará pronto en Noupe. Puedes mantenerte actualizado sobre este y otros artículos siguiendo mi cuenta de twitter: @ramisayar.

Más aprendizaje para el nodo en Azure

Para un aprendizaje más profundo sobre el nodo, mi curso es disponible aquí en la Academia Virtual de Microsoft.
O algunos videos de formato más corto sobre temas de nodos similares:

• Serie de seis partes: creación de aplicaciones con node.JS
• Un paseo por el nodo (Coding4Fun)

Este artículo es parte de la serie de tecnología de desarrollo web de Microsoft. Estamos emocionados de compartir proyecto espartano y es nuevo motor de renderizado contigo. Obtenga máquinas virtuales gratuitas o realice pruebas de forma remota en su dispositivo Mac, iOS, Android o Windows @ moderno.ES.

Más partes de la serie en MSDN

Parte 1 – Introducción a Node.js

Parte 2: Bienvenido a Express con Node.js y Azure
Parte 3 – Construcción de un backend con Node, Mongo y Socket.IO
Parte 4: creación de una interfaz de usuario de sala de chat con Bootstrap
Parte 5: Conexión de la sala de chat con WebSockets
Parte 6: el final y la depuración de aplicaciones de nodos remotos

(dpe)