Práctica: Cree una aplicación web de sala de chat con tecnología de Node.js (Cuarta 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 4: creación de una interfaz de usuario de sala de chat con Bootstrap
Bienvenido a la Parte 4 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, le mostraré cómo agregar una interfaz estilo Bootstrap de Twitter al backend de la sala de chat que incorporó. Parte 2 y parte 3.
¿Qué es Bootstrap?
Oreja es un marco HTML y CSS muy popular para crear sitios web y aplicaciones web. Es el proyecto número uno en GitHub. Bootstrap es compatible con el diseño web receptivo, lo que permite que el diseño de su página se adapte al dispositivo (computadora de escritorio, tableta, móvil).
Agregar Bootstrap a nuestro proyecto
Para agregar Bootstrap a nuestro proyecto, tenemos que descargar los archivos CSS y JS minimizados para Bootstrap. Puedes descargar Bootstrap desde este Enlace. Después de descargar Bootstrap, descomprima el archivo y copie las carpetas «css», «js» y «fonts» en la carpeta «pública» de su proyecto.
Notará algunas inconsistencias con la estructura de carpetas existente. Unificaremos las hojas de estilo y las carpetas de JavaScript. Prefiero la nomenclatura de Bootstrap de «css» para «hojas de estilo» y «js» para «javascripts», ya que se comparte con otras bibliotecas de terceros. Copie los archivos en «hojas de estilo» en «css» y elimine la carpeta «javascripts», ya que debería estar vacía. A continuación, vaya a layout.jade y cambie la siguiente línea:
link(rel="stylesheet" href="https://www.noupe.com/stylesheets/style.css")
para:
link(rel="stylesheet" href="https://www.noupe.com/css/style.css")
A continuación, queremos agregar los enlaces del archivo Bootstrap CSS al encabezado y las etiquetas meta apropiadas para las aplicaciones HTML5 en el archivo layout.jade. Debe agregar las siguientes líneas justo antes de la línea que contiene el enlace style.css.
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
link(rel="stylesheet" href="https://www.noupe.com/css/bootstrap.min.css")
link(rel="stylesheet" href="http://www.noupe.com/css/bootstrap-theme.min.css")
A continuación, queremos agregar el archivo JavaScript que necesita Bootstrap para sus componentes y complementos. Agregue la siguiente línea al final de layout.jade:
script(type="text/javascript" src="https://www.noupe.com/js/bootstrap.min.js")
Diseño completado.jade
doctype html
html
head
title= title
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
link(rel="stylesheet" href="https://www.noupe.com/css/bootstrap.min.css")
link(rel="stylesheet" href="http://www.noupe.com/css/bootstrap-theme.min.css")
link(rel="stylesheet" href="https://www.noupe.com/css/style.css")
body
block content
script(type="text/javascript" src="https://www.noupe.com/js/bootstrap.min.js")
Crear el diseño de la interfaz de usuario de Chat
Es hora de desarrollar el diseño de la interfaz de usuario del chat. En primer lugar, es posible que desee leer sobre Bootstrap y echar un vistazo a este tutorial largo. Todos los motores de chat tienen un área para los mensajes recibidos recientemente y un área para que un usuario escriba y envíe un mensaje. Históricamente, el diseño consistía en tener el área de edición adjunta en la parte inferior y los mensajes en la parte superior.
No es fácil fijar elementos en una página HTML en la parte inferior de la ventana gráfica sin un poco de trabajo. estaré siguiendo esto muestra para fijar un pie de página en la parte inferior. Queremos modificar el archivo index.jade y eliminar todas las líneas de código debajo del bloque de contenido.
Primero, agregamos el área de la página que contendrá los mensajes recibidos.
Comencemos agregando un div con el ajuste de clase. En Jade, todo lo que necesita escribir es ajustar para generar un
. Al usar la sangría, podemos indicarle al motor de plantillas de jade que los elementos con más sangría irán dentro de los elementos con menos sangría.
Mira esto tutorial de jade si te lo perdiste en los otros tutoriales.
A continuación, queremos agregar otro div con la clase container-fluid para agregar un ancho fluido a la página. En el interior, crearé un elemento h1 que dice «Bienvenido a la sala de chat de Node» y un div con mensajes de identificación y un div final con la inserción de clase que usaremos para empujar hacia abajo el área de edición de mensajes de la sala de chat hasta la parte inferior de la ventana
.wrap
.container-fluid
h1 Welcome to the Node Chatroom
#messages
.push
A continuación, vamos a desarrollar el área de edición de mensajes. Queremos capturar el cuadro de texto y el botón de envío dentro de un div llamado footer y un div llamado container-fluid. El div de pie de página tendrá la misma sangría que el div de ajuste.
A continuación, usaré el sistema de cuadrícula Bootstrap (lea sobre esto aquí) para dividir el área de edición de mensajes en dos. Una de las columnas ocupará la mayor parte del espacio y contendrá el cuadro de texto para escribir el mensaje, la segunda columna contendrá un botón a nivel de bloque para enviar el mensaje.
Observe cómo Jade nos permite especificar los atributos de un elemento utilizando la notación de párrafo. El código se verá así:
.footer
.container-fluid
.row
.col-xs-8.col-sm-9
input(type="text" id="message-box" class="form-control input-lg" placeholder="Write a message here..." rows="3")
.col-xs-4.col-sm-3
button#send-message-btn.btn.btn-primary.btn-lg.btn-block Send Message
index.jade completado
extends layout
block content
.wrap
.container-fluid
h1 Welcome to the Node Chatroom
#messages
.push
.footer
.container-fluid
.row
.col-xs-8.col-sm-9
input(type="text" id="message-box" class="form-control input-lg" placeholder="Write a message here..." rows="3")
.col-xs-4.col-sm-3
button#send-message-btn.btn.btn-primary.btn-lg.btn-block Send Message
Agregar CSS para forzar el área de edición de mensajes en la parte inferior de la ventana gráfica
Queremos forzar el área de edición de mensajes en la parte inferior de la ventana gráfica, querremos agregar algunos CSS personalizados en la página public/css/style.styl. Este archivo utiliza el Aguja preprocesador de CSS, pero también puede pegar CSS palabra por palabra que se volverá a copiar en el archivo CSS generado.
Primero, querremos asegurarnos de que toda la página ocupe el 100% de la altura.
html, body
height: 100%
En segundo lugar, queremos asegurarnos de que el área de ajuste ocupe la máxima altura posible, pero deje un margen de 60 px en la parte inferior para nuestro pie de página y área de edición de mensajes.
.wrap
min-height: 100%
height: auto !important
height: 100%
margin: 0 auto -60px
En tercer lugar, queremos asegurarnos de que se respete este espacio para el área de edición y asignarlo al pie de página.
.push, .footer
height: 60px
Finalmente, por razones de estilo, vamos a darle un color de fondo sutil al pie de página.
.footer
background-color: #f5f5f5
Archivo Style.styl completado
html, body
height: 100%
.wrap
min-height: 100%
height: auto !important
height: 100%
margin: 0 auto -60px
.push, .footer
height: 60px
.footer
background-color: #f5f5f5
Captura de pantalla
Conclusión
¡Voila! Hemos utilizado los preprocesadores Bootstrap y Jade/Stylus para agregar un buen diseño de interfaz de usuario para nuestra sala de chat que es atendida por Node. En la próxima entrega, le mostraré cómo conectar la interfaz de usuario y el backend del nodo a través de WebSockets.
¡Estén atentos para la Parte 5!
La Parte 5: Conexión de la sala de chat con WebSockets, se publicará pronto en Noupe y también se encuentra en mi blog. aquí. Puedes mantenerte actualizado sobre este y otros artículos siguiendo mi cuenta de twitter: @ramisayar.
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
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:
Este artículo es parte de la serie de tecnología de desarrollo web de Microsoft. Estamos emocionados de compartir Borde de Microsoft 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.
(dpe)
#Práctica #Cree #una #aplicación #web #sala #chat #con #tecnología #Nodejs #Cuarta #parte