Introducción a la pila MEAN

MEAN Stack es uno de los Technology Stack más populares. Se utiliza para desarrollar una aplicación web Full Stack. Aunque es un Stack de diferentes tecnologías, todas ellas están basadas en el lenguaje JavaScript.

MEDIA significa:

1. M – Mongo DB
2. E – Expreso
3. A – Angular
4. N – Node.js

Esta pila conduce a un desarrollo más rápido, así como a la implementación de la aplicación web. Angular es el marco de desarrollo de frontend, mientras que Node.js, Express y MongoDB se utilizan para el desarrollo de backend, como se muestra en la siguiente figura.

Flujo de datos en la aplicación MEAN Stack: aquí, cada módulo se comunica con los demás para tener un flujo de datos desde el servidor/backend al cliente/frontend.

Primeros pasos con cada tecnología con ejemplos: la descripción de cada tecnología en esta pila, así como los enlaces para aprenderlos, se proporcionan a continuación:

1. Node.js: Node.js se usa para escribir el código del lado del servidor en Javascript. Uno de los puntos más importantes es que ejecuta el código JavaScript fuera del Navegador. Es multiplataforma y Open Source.

• Requisitos previos para aprender Node.js- JavaScript/TypeScript
• Vaya a Descargas de Node.js y haga clic en el botón Descargar para obtener la última versión e instalar según su sistema operativo.
• Verifique si está instalado correctamente comprobando la versión:

  node -v

  Si no se obtiene ninguna versión, no se ha instalado correctamente.

• Verifique la versión de npm (Se instala por defecto con el Node):

  npm -v

• Cree un archivo index.js dentro de la carpeta de su proyecto y copie el siguiente código:

  var http = require("http");    http.createServer(function (request, response) {          response.writeHead(200, {'Content-Type': 'text/plain'});          // Send the response text as "Hello World"    response.end('Hello World\n'); }).listen(3100);    console.log('Server running at http://127.0.0.1:3100/');

• Ahora abre la terminal y ejecuta el siguiente comando:

  node index.js

• Verá en la consola de Terminal un registro que dice:

  Server running at http://127.0.0.1:3100/

• Vaya al navegador y escriba la URL: http://127.0.0.1:3100/ verá un resultado como el siguiente:
  
• Enlaces para obtener más información sobre Node.js:
  1. Introducción a Node.js
  2. Tutoriales de Node.js
  3. Obtenga información sobre la última versión de Node.js

2. AngularJS: Angular es un marco de código abierto front-end desarrollado por Google Team. Este marco se revisa de tal manera que se mantiene la compatibilidad con versiones anteriores (si hay algún cambio importante, Angular lo informa muy pronto). Los proyectos de Angular son fáciles de crear utilizando la herramienta Angular CLI (Command Line Interface) desarrollada por el equipo de Angular.

• Requisitos previos para aprender Angular:
  1. TypeScript
  2. Preprocesador CSS
  3. Código de plantilla (material angular, HTML 5, etc.)
• Instalación de Angular CLI: interfaz de línea de comandos mediante npm (Node Package Manager)

  npm install -g @angular/cli

• Ahora verifique si se instaló correctamente usando el siguiente comando:

  ng --version

  Debería mostrar algo como:
  

• Ahora, crea un nuevo proyecto usando el siguiente comando:

  ng new project_name

• Vaya al directorio del proyecto usando el siguiente comando:

  cd project_name

• Inicie la aplicación Angular usando el siguiente comando:

  ng serve

• La aplicación comenzará en http://localhost:4200, verá lo siguiente:
  
• Ahora haga cambios en el archivo app.component.html y guarde el archivo, la aplicación se recargará automáticamente y se reflejarán los cambios correspondientes.
• Enlaces de artículos relacionados con Angular:
  1. AngularJS
  2. Angular 7 Introducción
  3. Angular 7 Instalación
  4. Angular 7 Servicios de datos y Observables
  5. Angular 7 Simple To do App
  6. Conozca la última versión de Angular

3. MongoDB: MongoDB es una base de datos NoSQL. Tiene JSON como documentos. Es una base de datos orientada a documentos.

• Requisitos previos para aprender MongoDB:
  1. ¿Qué es la base de datos?
  2. Desventajas de la base de datos SQL
• Crear una base de datos:

  use database_name;

• Crear una colección:

  db.createCollection("first_collection");

• Insertar un registro en la Colección:

  db.first_collection.insertOne(
      {name:"Geeks For Geeks"}
  );

• Imprime todos los registros de una colección:

  db.first_collection.find()

  

• Enlaces relacionados con MongoDB:
  1. Introducción a MongoDB
  2. Introducción a MongoDB
  3. Definición, creación y eliminación de una colección de MongoDB
  4. ¿Cómo funciona MongoDB?
  5. Conozca la última versión de MongoDB

4. ExpressJS: Express es un marco web creado en Node.js y se utiliza para crear API y aplicaciones web.

• Requisitos previos para aprender Express:
  1. JavaScript/ TypeScript
  2. Node.js
• Inicialice un proyecto escribiendo el siguiente comando en la terminal:

  npm init

• Hará algunas preguntas, presione enter para configurar todas las opciones predeterminadas. Esto creará el archivo package.json como se muestra a continuación:

  {   "name": "gfg-express",   "version": "1.0.0",   "description": "Basic Express Node.js Application",   "main": "index.js",   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"   },   "author": "",   "license": "ISC", }

• Instale el expreso usando el siguiente comando:

  npm install express --save

  

• Ahora, el archivo package.json se cambiará para agregar las dependencias como se muestra a continuación:

  {   "name": "gfg-express",   "version": "1.0.0",   "description": "Basic Express Node.js Application",   "main": "index.js",   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"   },   "author": "",   "license": "ISC",   "dependencies": {     "express": "^4.17.1"   } }

• Cree el archivo index.js y agréguele el siguiente código:

  const express = require('express') const app = express() const PORT = 3000    app.get('/', (req, res) =>          res.send('Hello World!'))    app.listen(PORT,() => console.log( `Example app listening at http://localhost:${PORT}`))

• Inicie el servidor express usando el siguiente comando:

  node index.js

• Vaya a http://localhost:3000 para ver el resultado como se muestra a continuación:
  
• Enlaces para aprender ExpressJS:
  1. Introducción a Express
  2. Diseñar la primera aplicación usando Express