Qué aprendimos durante el curso de MEAN

Clase 75 de 75 • Curso de MEAN 2017

Clase anteriorSiguiente clase

Enzo Aliatis

student•

Mi curso favorito hasta ahora!

Jose Osses Plaza

student•

enzoooo tengo algunas dudas podrias ayudarme … porfa :G

Enzo Aliatis

student•

Que dudas tienes?

Daniel Alejandro Molina Yepes

student•

Excelente curso!!!

Edwin Balseca García

student•

Les comparto las notas que tomé durante el curso:

Node.js es nuestro servidor web.
Express es el micro-framework que nos brinda la libertad para que organicemos los archivos y usemos los módulos que necesitamos para nuestro proyecto.
MongoDB es una de las bases de datos NoSQL más utilizadas hoy en día. Nos permite almacenar objetos en formato JSON sin un esquema de datos rígido, como en las de datos relacionales.
Con Angular podemos crear componentes visuales y reutilizables en todo nuestro proyecto o incluso en otros proyectos.

// Angular

Angular:
- Es un framework para Frontend.
- Tiene la opción actualmente de correrlo desde el Backend y poder reutilizar el código.
- Nos permite organizar los archivos que vamos a tener y de separar las responsabilidades de cada archivo. Nos permite separar en componentes reutilizables nuestra aplicación.
- Este framework, de lo que más se va a tratar es de componentes. Los componentes son unidades visuales reutilizables y con cierto comportamiento definido.
- Otra cosa que nos va a solucionar Angular, es el routing, es decir, el sistema de ruteo.
- Angular nos va a dar también los services. son maneras de conectarnos con el Backend, desde ahí vamos a pedir ciertos datos que necesita el Frontend para mostrar en la pantalla.
- Angular ofrece un sistema de templates. Cada componente va a tener asociado un template o vista que va a ser la estructura HTML que tenga.
- Desde Angular es posible que podamos definir nuestras propias etiquetas para definir los componentes reutilizables.
- Otra cosa que nos permite Angular son los modules o módulos. Son librerías enteras con componentes y directivas ya armadas o preestablecidas. Un ejemplo es Material Angular.
- CLI = Command Line Interface o Interfaz de Línea de Comandos.
- Google está detrás de Angular. Son los desarrolladores de Google quienes le dan soporte a esta librería Open Source.
- Angular es muy adaptado y tiene una comunidad muy grande alrededor.
Angular Material son componentes basados en Material Design para Angular.
package.json es como el manifiesto de nuestros proyectos, es donde están todos los detalles.
En el archivo app.module.ts es donde le decimos a angular cuales son los modulos que vamos a ejecutar, los componentes que forman parte de nuestro proyecto y que providers son los que vamos a utilizar en nuestros componentes.
@NgModule({imports: [], exports: []}) Es una notacion con el que indicamos que es estamos construyendo un modulo de angular, recibe como parametro un objeto. Decorador que marca la siguiente clase como un NgModule y proporciona metadatos de configuración para él.
ng serve crea la aplicación e inicia un servidor web.
declarations: Es el conjunto de directivas y pipes que pertenecen a este módulo.
imports: El conjunto de NgModules, con o sin proveedores, cuyas directivas / pipes exportadas están disponibles para las plantillas de este módulo.
Existen dos maneras de organizar la estructura de los archivos dentro de nuestro proyecto:
- Siguiendo la funcionalidad de cada uno de los archivos.
- Tenemos ciertos modelos, ciertas pantallas, ciertos componentes o ciertos servicios. Podemos ir almacenando todo en una carpeta según el tipo.
El componente mat-card es un contenedor de texto, fotos y acciones en el contexto de un solo tema.
angular2-moment nos permite saber la temporalidad de las acciones en las aplicaciones.
Para crear nuevos componentes en angular tienes que importar el modulo de Component de @angular/core.
Angular nos permite ingresar codigo en nuestro documento html de acuerdo a una condicion, eso lo hacemos con *ngIf=“condicion”.
Angular nos permite, que cada que modifiquemos los objetos que estamos mostrando en la pantalla, los atributos de esos objetos se van a ver reflejados en la pantalla a medida que cambian.
El método unshift() agrega uno o más elementos al inicio del array, y devuelve la nueva longitud del array.
*ngFor() nos permite establecer un ciclo.
En la parte de declarations van nuestros componentes y en la parte de imports van los modulos.
Para poder utilizar los Reactive Forms tenemos que indicar el nombre del control del formulario, eso lo hacemos con formControlName="".
Reactive Forms: es una filosofia mas de Angular para crear formularios. Se comienza definiendo el formulario desde la clase del componente.
Pasos importantes:
- Importar en el app.modules.ts el ReactiveFormsModule.
- Importar en la clase del componente FormGroup y Validators
- Dentro del componente debemos definir también una variable que enlazará con el formulario del template y en el constructor es donde creamos los controles del formulario.
Con el <router-outlet> le decimos al modulo del router de acuerdo a las rutas ya configuradas cual es la que se tiene que mostrar.
con el atributo [routerLink]="[‘ruta’, parametros]" le indicamos cual es la ruta a la que debe dirigirse.

// NodeJS y Express

NodeJS es un entorno en donde podemos correr JavaScript del lado del servidor a traves de un motor llamado V8 desarrollado por Google.
con NodeJS podemos leer archivos del File System de nuestro Sistema Operativo, realizar request a otras APIs de otros sistemas y tambien podemos generar y servir respuestas ante peticiones que nos lleguen.
Con NodeJS solo tenemos un unico thread en donde corre nuestra aplicación y que atiende a todos los request, en ese unico proceso corre el Event Loop.
Si una tarea necesita realizar otra tarea lo hace a traves de llamadas asincronas al sistema y mientras tanto el Event Loop sigue atendiendo otras tareas.
NodeJS suele utilizarse principalmente para programar Servidores Web o Web APIs.
La manera de organizar nuestro codigo dentro de nodejs es a traves de modulos.
Express es un framework de nodejs.
Con express podemos contruir Servidores Web y APIs.
Caracteristicas de express: rapido, minimalista y flexible.
Un middleware es un bloque de código que se ejecuta entre la petición que hace el usuario (request) hasta que la petición llega al servidor.
Las funciones middleware reciben como maximo 3 parametros: el primero es el request, el segundo es un objeto que representa la respuesta y el tercero es un apuntador al siguiente middleware.
Un endpoint es la interface a través de la cual los sistemas externos pueden enviar y recibir mensajes.
El modulo Injectable del core de angular nos va a permitir agregar una annotation a nuestra clase para poder inyectarla en los componentes.
Cuando creas una funcion en TypeScript tienes que especificar el tipo de retorno.
Con la funcion +new Date() obtenemos los segundos que han pasado desde que empezo esa fecha.
Los middleware son funciones especiales de JavaScript que se encargan de realizar tareas especificas, reciben tres parametros.
- Request = Es el que fluye a traves de cada uno de los middleware, puede ser un formulario.
- Response = Sirve para terminar el flujo de la tuberia y devolver una respuesta al cliente.
- Next() = cuando ya no hay nada mas que hacer, le dice a express que llame al siguiente middleware de la tuberia.
Mongoose JS es un módulo de NPM creado por la comunidad que nos ayuda a modelar nuestros objetos de mongodb eliminando el “boilerplate” que se tiene que escribir con este motor de Bases de Datos.

// MongoDB

La Url para la base de datos en mongo se exporta de la siguiente manera: ‘mongodb://direcionIP/db-name’.
Para conectarnos a la base de datos lo hacemos de la siguiente manera:
- import mongoose from ‘mongoose’.
- Dentro de una funcion async-await: await mongoose.connect(mongoUrl).
Para utilizar mongo ingresamos el comando mongo en una terminal o consola.
Para realizar cambios en una base de datos de mongo usamos el comando use db_name.
Con el comando mongod arrancamos el proceso de daemon principal para el sistema MongoDB.
db.collection.find() = Selecciona documentos en una colección o vista y devuelve una consulta (cursor a los documentos seleccionados).
db.collection.findOne() = Devuelve un documento que cumple los criterios de consulta especificados en la colección o vista.
db.collection.remove({}) = Elimina todos los documentos de una coleccion.
db.collection.remove({_id:“id”}) = Elimina un documento de una coleccion.
bcryptjs es un modulo de nodejs que nos permite encriptar datos.

Roberto Ocando Morales

student•

Sacha, excelente curso, espero de verdad poder utilizar MEAN en algun proyecto proximamente, por ahora me voy con un par de dudas con respecto a las Promises y los maps que utilizaste en algunas funciones… En el curso de fundamentos de javascript podria reforzar estos temas?

Gracias de todas maneras sacha.

saludos.

Yesica Lizeth Cortés Pineda

teacher•

Hola! que tipo de dudas son las que tienes, cuentame y seguro podremos hacer algo adicional para complementar y que todo quede super claro.

Fernando Salazar

student•

Excelente curso y profesor aunque parecia de PHP con tanto spagueti de videos en los videos :c.

Saludos!!

Alejandro Valenzuela

student•

Muy buen curso Sacha Lifszyc!! Saludos..

Herdic Asmeth Diaz Munevar

student•

Gracias profe

Usuario anónimo

user•

Excelente curso y gran profesor! Muchas gracias 😉✌

Platzi Mota

student•

Buen curso, Excelente profesor, Sacha debería ser el profesor del Curso de Angular 4

Qué aprendimos durante el curso de MEAN

Introducción al Curso de MEAN

Bienvenidos al Curso de MEAN

¿Qué es MEAN?

El Frontend de PlatziOverflow

Introducción a Angular y TypeScript

Instalación y configuración del entorno

Trabajando con Angular Material

Construcción del header de la aplicación

Detalles de preguntas para el proyecto

Construcción de pantalla de detalle de una pregunta

Estilo en la pantalla de detalle de una pregunta

Incorporando angular2-moment al proyecto

Agregando el listado de respuestas a la pantalla de detalle

Agregando un formulario para respuestas

Dando estilo al formulario de preguntas

Corrigiendo estilos en el formulario y toques finales

Cómo mostrar las respuestas en el listado

Empezando la pantalla de signin

Creando el formulario de signin

Dando estilo al formulario de signin

Creando la pantalla para el listado de preguntas

Creando el componente para los listados de preguntas

Crear la pantalla para cargar una nueva pregunta

Crear formulario de carga de nueva pregunta

Agregando iconos al formulario de preguntas

Agregando un icono genérico al formulario de preguntas

Seleccionando un icono para la pregunta

Conectando nuestras pantallas con el router de Angular

Conectando la pantalla de registro con la de login

Conectando el listado de preguntas con la pantalla del detalle

Conectando el listado de preguntas con el formulario de creación

El Backend de PlatziOverflow

Introducción a Node.js y Express

Express

Instalación y configuración del entorno de desarrollo de Backend con Babel

Instalación y primeros pasos con Express

Creando un endpoint en la API para servir preguntas al cliente

Creando el servicio de preguntas

Completando el servicio de preguntas

Conectando el Frontend de preguntas con nuestro Backend

Agregando un spinner para la carga de preguntas

Obteniendo el detalle de una pregunta desde el Backend

DESAFIO: Contruye el spinner del detalle de la pregunta

Agregando una ruta para crear una pregunta en el Backend

Agregando el método para crear preguntas en el QuestionService

Enviando una pregunta hacia el Backend

Agregando una ruta para crear una respuesta en el Backend

Agregando el método para crear respuestas en el QuestionService

Enviando una respuesta hacia el Backend

Creando la ruta de signin en el Backend

Creando un JSON web token para el usuario autenticado

Escribiendo nuestro servicio de autenticación

Conectando el signin con el Backend

Agregando el logout de usuarios a PlatziOverflow

Creando la ruta de signup en el backend

Conectando el signup de usuarios con el Backend

Qué son y Cómo funcionan los Middlewares

Organizando los middlewares del Backend

Autorizando usuarios para que puedan crear preguntas

Manejar el error del signin

La Base de Datos de PlatziOverflow

Creando el modelo de respuesta

Creando el modelo de usuario

Creando el modelo de pregunta

Estableciendo la conexión con la base de datos

Obteniendo todas las preguntas de la base de datos

Obteniendo una pregunta de la base de datos

Conectando el signup con la base de datos

Encriptando la contraseña del usuario

Conectando el signin con la base de datos

Guardando una pregunta en la base de datos

Guardando una respuesta en la base de datos

Ordenando las preguntas en la home

Despliegue a producción

¿Cómo vamos a hacer el deploy?

Configurando nuestra app para el entorno productivo

Creando el build para producción de nuestro Frontend

Creando el build para producción de nuestro Backend

Cómo enfrentar un proyecto MEAN de aquí en más