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

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

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.