Construcción del header de la aplicación

Clase 6 de 75 • Curso de MEAN 2017

Edgar Muñoz

student•

El módulo MdIconModule no me lo reconoce el angular material, pero buscando encontré que debo importar el módulo MatIconModule, como se indica en la página de angular material

Alvaro Gonzalez

student•

Gracias por tu comentario, no me estaba funcionando, seria bueno que estas correcciones al curso se comentaran por el profesor.

wesly hernandez

student•

a mi me salio el miso error. pero con los dos. MatToolbarModul y MdIdconModule

Mike Nieva

teacher•

Como comentan, dependiendo de las versiones que utilicen, es el resultado, pero eventualmente, funciona.

Así terminé el ejercicio funcional, haciendo las modificaciones correspondientes hacia la última actualización de Angular:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Material Angular

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';
import 'hammerjs';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
`

material.module.ts

import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';

const modules = [
  MatToolbarModule,
  MatIconModule
];

@NgModule({
  imports: modules,
  exports: modules
 })

 export class MaterialModule {}

app.component.html

<mat-toolbar color="primary">
    <span>PlatziOverflow</span>
    <span class="space"></span>
    <mat-icon>account_circle</mat-icon>
</mat-toolbar>

Y mi archivo de package.json:

{
  "name": "platzi-overflow",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.3",
    "@angular/cdk": "^5.0.0-rc.1",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0-rc.1",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.4",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

Mike Nieva

teacher•

Lo ideal es que sigan el consejo de @josevsp para igualar las versiones de Sacha.

De lo contrario, vayan haciendo los ajustes correspondientes de acuerdo a las suyas.

Luis Abdel Rangel Castro

student•

If you’re using Angular CLI, this is as simple as including one line in your styles.css file:
@import ‘~@angular/material/prebuilt-themes/deeppurple-amber.css’;

José Valentin Salina Peña

student•

Mi codigo tampoco funcionaba, pero al parecer sean las versiones de angular, al menos el core yo lo tenia en 5.0.0, o angular material. Les recomiendo descargarse el archivo package.json que utiliza sacha e incluirlo en su proyecto, luego ejecutar npm install.
Aqui les adjunto el archivo de sacha:

{
  "name": "platzi-overflow",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.3.6",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Javier Andres Navia Cartagena

student•

Muchas gracias =D

Ernesto Ledesma

student•

perfecto anduvo!

fabian Flechas

student•

el prefijo “md-*****” del selector de los componentes no funciona para la version 5.0.4 de material, se debe utilizar el "mat- " (material).
Esto mismo se aplica a los módulos.

javier alejandro segovia

student•

Descubri el error de toolbar <mat-icon>account_circle</mat-icon>
hay que reemplazarlo por esto:
account_circle

Jose Eduardo Nanni

student•

Genial! Ahora me funciona. Gracias

RAUL HENDE

student•

Excelente Aporte.... Gracias.-

Alejo Gonzalez

student•

para error mat-icon is not an angular module, incluir en material.module.ts lo siguiente
import {MatToolbarModule,MatIconModule } from ‘@angular/material’;
const modules = [MatToolbarModule,MatIconModule ];
hay que agregar el modulo de los iconos el cual se llaama, MatIconModule

javier alejandro segovia

student•

Aca lo dejo preparado la solucion:
<//app.component.html>

<mat-toolbar color=“primary”> <mat-toolbar-row> Second Line account\_circle </mat-toolbar-row> </mat-toolbar>

<//app.component.css>
.space {
flex: 1 1 auto;
}

Enzo Aliatis

student•

ERROR in Error: Metadata version mismatch for module /Users/enzoaliatis/Documents/Enzo2018/Platzi/MEAN/platzi-overflow/node_modules/@angular/material/core/typings/index.d.ts, found version 4, expected 3, resolving symbol MaterialModule in …

Para este Error tuve que actualizar todas mis dependencias entonces quedo asi:
“dependencies”: {
"@angular/animations": “^5.0.0”,
"@angular/cdk": “^5.0.0-rc0”,
"@angular/common": “^5.0.0”,
"@angular/compiler": “^5.0.0”,
"@angular/core": “^5.0.0”,
"@angular/forms": “^5.0.0”,
"@angular/http": “^5.0.0”,
"@angular/material": “^5.0.0-rc0”,
"@angular/platform-browser": “^5.0.0”,
"@angular/platform-browser-dynamic": “^5.0.0”,
"@angular/router": “^5.0.0”,
“core-js”: “^2.4.1”,
“hammerjs”: “^2.0.8”,
“rxjs”: “^5.4.2”,
“zone.js”: “^0.8.14”
},
“devDependencies”: {
"@angular/cli": “^1.5.0”,
"@angular/compiler-cli": “^5.0.0”,
"@angular/language-service": “^5.0.0”,
"@types/jasmine": “~2.5.53”,
"@types/jasminewd2": “~2.0.2”,
"@types/node": “~6.0.60”,
“codelyzer”: “~3.2.0”,
“jasmine-core”: “~2.6.2”,
“jasmine-spec-reporter”: “~4.1.0”,
“karma”: “~1.7.0”,
“karma-chrome-launcher”: “~2.1.1”,
“karma-cli”: “~1.0.1”,
“karma-coverage-istanbul-reporter”: “^1.2.1”,
“karma-jasmine”: “~1.1.0”,
“karma-jasmine-html-reporter”: “^0.2.2”,
“protractor”: “~5.1.2”,
“ts-node”: “~3.2.0”,
“tslint”: “~5.7.0”,
“typescript”: “~2.4.2”
}

Fuente : Fuente

Elvis W. Vásquez

student•

En esta página encontré la solución para lo de los iconos:

Emilio Jose Ugeda Sanoja

student•

Excelente clase Sacha 😃

Carlos Enrique Ramírez Flores

student•

vamos muy bien desde lo basico!!!

Walter Lensinas

student•

Trataré de ir subiendo el código de las clases a este repo:

RAUL HENDE

student•

Buenas, les realizo una consulta, estoy haciendo este fantástico curso, y de repente cuando modifico el código no veo los cambios reflejados en el navegador. ¿ A que se debe? Gracias.-

Diego Forero

Team Platzi•

Asegúrate que se compile todo el código cuando haces un cambio, otra opción que tienes es reiniciar el servidor de express y verificar que todo este funcionando bien, es importante que revises el log de la consola, puede ser que exista un error y no este transpilando el código y por eso no ves cambios en el navegador.

SocialLink Organizaciones Visibles

student•

Igual tenía este problema. Soy de los que no apagan la PC y se me ocurrió reiniciar mi IDE (Webstorm) y reiniciar Chrome. Ahora me está funcionando. Espero te sirva.

Herdic Asmeth Diaz Munevar

student•

De esta manera es como logro solucionar el problema de MdIconModule

Agustin David Luzenti

student•

Disculpen. Sigo sin poder visualizar el header después de haber seguido todos los pasos descriptos por las diferentes personas que han comentado.

Dejo mis clases aquí, quizás alguno pueda ayudarme para seguir avanzando.

package.json

{ "name": "platzi-overflow", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^7.2.1", "@angular/cdk": "^7.2.1", "@angular/common": "~7.2.0", "@angular/compiler": "~7.2.0", "@angular/core": "~7.2.0", "@angular/forms": "~7.2.0", "@angular/material": "^7.2.1", "@angular/platform-browser": "~7.2.0", "@angular/platform-browser-dynamic": "~7.2.0", "@angular/router": "~7.2.0", "core-js": "^2.5.4", "hammerjs": "^2.0.8", "rxjs": "~6.3.3", "tslib": "^1.9.0", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.12.0", "@angular/cli": "~7.2.2", "@angular/compiler-cli": "~7.2.0", "@angular/language-service": "~7.2.0", "@types/node": "~8.9.4", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.1.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.2.2" } }

app.modules.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component';

//material angular import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MaterialModule } from './material.module'; import 'hammerjs';

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MaterialModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

material.modules.ts

import { NgModule } from '@angular/core';

import { MatToolbarModule, MatIconModule } from '@angular/material';

const modules = [ MatToolbarModule, MatIconModule ];

@NgModule({ //declarations: [], imports: modules, exports: modules //providers: [], }) export class MaterialModule {}

app.component.html

<mat-toolbar color="primary"> Second Line <mat-icon>account_circle</mat-icon> </mat-toolbar>

index.html

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>PlatziOverflow</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> </head> <body> <app-root></app-root> </body> </html>

Espero me puedan ayudar.

Muchas gracias y saludos.

Agustin David Luzenti

student•

.Aquí dejo el error

Agustin David Luzenti

student•

Aquí dejo el error

node-sass@4.11.0 install C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules@angular-devkit\build-angular\node_modules\node-sass node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/win32-x64-72_binding.node Cannot download "https://github.com/sass/node-sass/releases/download/v4.11.0/win32-x64-72_binding.node":

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location try setting a proxy via HTTP_PROXY, e.g.

  export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

  npm config set proxy http://example.com:8080

node-sass@4.11.0 postinstall C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules@angular-devkit\build-angular\node_modules\node-sass node scripts/build.js

Building: C:\Program Files\nodejs\node.exe C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library= gyp info it worked if it ends with ok gyp verb cli [ gyp verb cli 'C:\Program Files\nodejs\node.exe', gyp verb cli 'C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\node-gyp\bin\node-gyp.js', gyp verb cli 'rebuild', gyp verb cli '--verbose', gyp verb cli '--libsass_ext=', gyp verb cli '--libsass_cflags=', gyp verb cli '--libsass_ldflags=', gyp verb cli '--libsass_library=' gyp verb cli ] gyp info using node-gyp@3.8.0 gyp info using node@12.0.0 | win32 | x64 gyp verb command rebuild [] gyp verb command clean [] gyp verb clean removing "build" directory gyp verb command configure [] gyp verb check python checking for Python executable "python2" in the PATH gyp verb which failed Error: not found: python2 gyp verb which failed at getNotFoundError (C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:13:12) gyp verb which failed at F (C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:68:19) gyp verb which failed at E (C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:80:29) gyp verb which failed at C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:89:16 gyp verb which failed at C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\isexe\index.js:42:5 gyp verb which failed at C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\isexe\windows.js:36:5 gyp verb which failed at FSReqCallback.oncomplete (fs.js:166:21) gyp verb which failed python2 Error: not found: python2 gyp verb which failed at getNotFoundError (C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:13:12) gyp verb which failed at F (C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:68:19) gyp verb which failed at E (C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:80:29) gyp verb which failed at C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:89:16 gyp verb which failed at C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\isexe\index.js:42:5 gyp verb which failed at C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\isexe\windows.js:36:5 gyp verb which failed at FSReqCallback.oncomplete (fs.js:166:21) { gyp verb which failed stack: 'Error: not found: python2\n at getNotFoundError ' + gyp verb which failed '(C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:13:12)\n' + gyp verb which failed ' at F ' + gyp verb which failed '(C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:68:19)\n' + gyp verb which failed ' at E ' + gyp verb which failed '(C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:80:29)\n' + gyp verb which failed ' at ' + gyp verb which failed 'C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:89:16\n' + gyp verb which failed ' at ' + gyp verb which failed 'C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\isexe\index.js:42:5\n' + gyp verb which failed ' at ' + gyp verb which failed 'C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\isexe\windows.js:36:5\n' + gyp verb which failed ' at FSReqCallback.oncomplete (fs.js:166:21)', gyp verb which failed code: 'ENOENT' gyp verb which failed } gyp verb check python checking for Python executable "python" in the PATH gyp verb which succeeded python C:\Program Files\Python37\python.EXE gyp ERR! configure error gyp ERR! stack Error: Command failed: C:\Program Files\Python37\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3]; gyp ERR! stack File "<string>", line 1 gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3]; gyp ERR! stack ^ gyp ERR! stack SyntaxError: invalid syntax gyp ERR! stack gyp ERR! stack at ChildProcess.exithandler (child_process.js:304:12) gyp ERR! stack at ChildProcess.emit (events.js:196:13) gyp ERR! stack at maybeClose (internal/child_process.js:1000:16) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:267:5) gyp ERR! System Windows_NT 10.0.17134 gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" gyp ERR! cwd C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules@angular-devkit\build-angular\node_modules\node-sass gyp ERR! node -v v12.0.0 gyp ERR! node-gyp -v v3.8.0 gyp ERR! not ok Build failed with error code: 1 npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.8 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.8: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: node-sass@4.11.0 (node_modules@angular-devkit\build-angular\node_modules\node-sass): npm WARN optional SKIPPING OPTIONAL DEPENDENCY: node-sass@4.11.0 postinstall: node scripts/build.js npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

audited 42967 packages in 13.896s found 3 vulnerabilities (1 low, 2 high) run npm audit fix to fix them, or npm audit for details

Jesus Eduardo Cruz Valdez

student•

¿que es ng?

Juan Camilo Angel Fandiño

student•

Es el comando de angular cli para utilizar los generadores y los comandos de angular en general.

Jorge Leonardo Céspedes Tapia

student•

La nueva versión ya tiene incorporado varias dependencia y módulos.

Rocio Silva Fernandez

student•

me salta el sig error, alguien sabe como solucionarlo? Cannot read property 'textContent' of null

Julián Sotelo

student•

También se deben reemplazar en el HTML las etiquetas <md-> por <mat->

Jose Alejandro Gonzalez Rondon

student•

¿Pregunta curiosa por que al traducir la pagina el icono se desaparece?

Quimey Lucas Marquez

student•

Yo probe traducirla y aun asi se mantiene eso 😕

Construcción del header de la aplicación

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