Curso de Integración de Backend y Frontend

Clases del Curso de Integración de Backend y Frontend

Instruido por:
Oscar Barajas Tavares
Oscar Barajas Tavares
Avanzado
2 horas de contenido
Ver la ruta de aprendizaje
Platzi Video
Proyecto del curso
Platzi Video

Integra el frontend y el backend construidos en la Escuela de Javascript para desplegar PlatziVideo en diferentes entornos productivos.

Curso de Integración de Backend y Frontend

Curso de Integración de Backend y Frontend

Progreso del curso:0/23contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/23contenidos(0%)

Introducción a Backend for Frontend

Material Thumbnail

Todo lo que aprenderás sobre integración de backend y frontend

00:58 min

Material Thumbnail

Preguntas frecuentes sobre el Curso de Integración de Backend y Frontend

09:02 min

El patrón de software Backend for Frontend

00:01 min

Integra PlatziVideo con la API

Material Thumbnail

Preparación del servidor e instalación de dependencias

11:35 min

Material Thumbnail

Instalación y configuración de Redux Thunk

02:54 min

Material Thumbnail

Configuración de registro de usuario

12:20 min

Material Thumbnail

Probando nuestro registro de usuario

04:41 min

Material Thumbnail

Integración del inicio de sesión

11:17 min

Material Thumbnail

Validación de rutas

10:03 min

Integración del cierre de sesión

02:41 min

Material Thumbnail

Fetch de estado inicial

09:26 min

Implementación de testing en el proyecto

Material Thumbnail

Pruebas unitarias con Jest

06:00 min

Material Thumbnail

Configuración de fileMocks y styleMocks

04:43 min

Material Thumbnail

Implementando pruebas en el footer

07:18 min

Material Thumbnail

Implementando snapshots

05:04 min

Material Thumbnail

Creando Mocks del store

05:52 min

Material Thumbnail

Implementando pruebas en el header

11:05 min

Material Thumbnail

Probando el envío del formulario

06:51 min

Material Thumbnail

Probando Gravatar function

04:11 min

Material Thumbnail

Probando acciones

08:58 min

Despliegue del Frontend

Desplegar Platzi Video en Heroku

02:29 min

Conclusiones

Material Thumbnail

Conclusiones y cierre

01:06 min

nuevosmás votadossin responder
Agustin Olivares
Agustin Olivares
Estudiante

capaz es una pregunta algo tonta, pero por ejemplo si yo ya tengo mi api o mi “backend” creado es necesario realizar todos los pasos?
me refiero al hecho de configurar todo lo que esta en parte del server o esta parte es simplemente para trabajar con esa parte que se desarrolló en los anteriores cursos, no se si se entiende jajaj

1
danielmedina
danielmedina
Estudiante

Buenos días comunidad, cuando ejecuto la auditoria de npm, me arroja las siguientes dependencias con vulnerabilidades:

~/Proyectos/platziBackenFronted/curso-bff(master*) » npm audit                                                      130[email protected]
# npm audit report

glob-parent  <5.1.2
Severity: moderate
Regular expression denial of service - https://npmjs.com/advisories/1751fix available via `npm audit fix --force`
Will install [email protected]1.16.5, which isa breaking change
node_modules/webpack-dev-server/node_modules/glob-parent
  chokidar  1.0.0-rc1 - 2.1.8
  Depends on vulnerable versions of glob-parent
  node_modules/webpack-dev-server/node_modules/chokidar
    webpack-dev-server  2.0.0-beta - 3.11.2
    Depends on vulnerable versions of chokidar
    node_modules/webpack-dev-server

3 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Cuando ejecuto npm audit fix --force, me arroja los siguientes mensajes:

~/Proyectos/platziBackenFronted/curso-bff(master*) » npm audit fix --force                                            1[email protected]
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating webpack-dev-server to 1.16.5,which is a SemVer major change.
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]5.42.0npm WARN node_modules/webpack
npm WARN   peer [email protected]"4.x.x || 5.x.x"from @webpack-cli/[email protected]1.0.4npm WARN   node_modules/@webpack-cli/configtest
npm WARN     @webpack-cli/[email protected]"^1.0.4"from [email protected]4.7.2npm WARN     node_modules/webpack-cli
npm WARN   12 more (babel-loader, compression-webpack-plugin, css-loader, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer [email protected]">=1.3.0 <3"from [email protected]1.16.5npm WARN node_modules/webpack-dev-server
npm WARN   [email protected]"1.16.5"from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]5.42.0npm WARN node_modules/webpack
npm WARN   peer [email protected]"4.x.x || 5.x.x"from @webpack-cli/[email protected]1.0.4npm WARN   node_modules/@webpack-cli/configtest
npm WARN     @webpack-cli/[email protected]"^1.0.4"from [email protected]4.7.2npm WARN     node_modules/webpack-cli
npm WARN   12 more (babel-loader, compression-webpack-plugin, css-loader, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer [email protected]">=1.3.0 <3"from [email protected]1.16.5npm WARN node_modules/webpack-dev-server
npm WARN   [email protected]"1.16.5"from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]5.42.0npm WARN node_modules/webpack
npm WARN   peer [email protected]"4.x.x || 5.x.x"from @webpack-cli/[email protected]1.0.4npm WARN   node_modules/@webpack-cli/configtest
npm WARN     @webpack-cli/[email protected]"^1.0.4"from [email protected]4.7.2npm WARN     node_modules/webpack-cli
npm WARN   12 more (babel-loader, compression-webpack-plugin, css-loader, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer [email protected]"^1.0.0 || ^2.0.0 || ^3.0.0"from [email protected]1.12.2npm WARN node_modules/webpack-dev-server/node_modules/webpack-dev-middleware
npm WARN   [email protected]"^1.10.2"from [email protected]1.16.5npm WARN   node_modules/webpack-dev-server
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]5.42.0npm WARN node_modules/webpack
npm WARN   peer [email protected]"4.x.x || 5.x.x"from @webpack-cli/[email protected]1.0.4npm WARN   node_modules/@webpack-cli/configtest
npm WARN     @webpack-cli/[email protected]"^1.0.4"from [email protected]4.7.2npm WARN     node_modules/webpack-cli
npm WARN   12 more (babel-loader, compression-webpack-plugin, css-loader, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer [email protected]"^1.0.0 || ^2.0.0 || ^3.0.0"from [email protected]1.12.2npm WARN node_modules/webpack-dev-server/node_modules/webpack-dev-middleware
npm WARN   [email protected]"^1.10.2"from [email protected]1.16.5npm WARN   node_modules/webpack-dev-server

added 37 packages, removed 216 packages, changed 11 packages, and audited 1268 packages in20s

95 packages are looking for funding
  run `npm fund` for details

# npm audit report

braces  <2.3.1
Regular Expression Denial of Service - https://npmjs.com/advisories/786
fix available via `npm audit fix --force`
Will install [email protected]3.11.2, which is a breaking change
node_modules/micromatch/node_modules/braces
  micromatch  0.2.0 - 2.3.11
  Depends on vulnerable versions of braces
  Depends on vulnerable versions of parse-glob
  node_modules/micromatch
    http-proxy-middleware  0.3.0 - 0.17.4
    Depends on vulnerable versions of micromatch
    node_modules/http-proxy-middleware
      webpack-dev-server  <=2.11.3 || 3.0.0-alpha1 - 3.1.10
      Depends on vulnerable versions of http-proxy-middleware
      Depends on vulnerable versions of open
      Depends on vulnerable versions of optimist
      node_modules/webpack-dev-server

glob-parent  <5.1.2
Severity: moderate
Regular expression denial of service - https://npmjs.com/advisories/1751
fix available via `npm audit fix --force`
Will install [email protected]3.11.2, which is a breaking change
node_modules/glob-base/node_modules/glob-parent
  glob-base  *
  Depends on vulnerable versions of glob-parent
  node_modules/glob-base
    parse-glob  >=2.1.0
    Depends on vulnerable versions of glob-base
    node_modules/parse-glob
      micromatch  0.2.0 - 2.3.11
      Depends on vulnerable versions of braces
      Depends on vulnerable versions of parse-glob
      node_modules/micromatch
        http-proxy-middleware  0.3.0 - 0.17.4
        Depends on vulnerable versions of micromatch
        node_modules/http-proxy-middleware
          webpack-dev-server  <=2.11.3 || 3.0.0-alpha1 - 3.1.10
          Depends on vulnerable versions of http-proxy-middleware
          Depends on vulnerable versions of open
          Depends on vulnerable versions of optimist
          node_modules/webpack-dev-server

minimist  <0.2.1 || >=1.0.0 <1.2.3
Prototype Pollution - https://npmjs.com/advisories/1179
fix available via `npm audit fix --force`
Will install [email protected]3.11.2, which is a breaking change
node_modules/optimist/node_modules/minimist
  optimist  >=0.6.0
  Depends on vulnerable versions of minimist
  node_modules/optimist
    webpack-dev-server  <=2.11.3 || 3.0.0-alpha1 - 3.1.10
    Depends on vulnerable versions of http-proxy-middleware
    Depends on vulnerable versions of open
    Depends on vulnerable versions of optimist
    node_modules/webpack-dev-server

open  <=0.0.5
Severity: critical
Command Injection - https://npmjs.com/advisories/663
fix available via `npm audit fix --force`
Will install [email protected]3.11.2, which is a breaking change
node_modules/open
  webpack-dev-server  <=2.11.3 || 3.0.0-alpha1 - 3.1.10
  Depends on vulnerable versions of http-proxy-middleware
  Depends on vulnerable versions of open
  Depends on vulnerable versions of optimist
  node_modules/webpack-dev-server

webpack-dev-server  <=2.11.3 || 3.0.0-alpha1 - 3.1.10
Severity: critical
Missing Origin Validation - https://npmjs.com/advisories/725
Depends on vulnerable versions of http-proxy-middleware
Depends on vulnerable versions of open
Depends on vulnerable versions of optimist
fix available via `npm audit fix --force`
Will install [email protected]3.11.2, which is a breaking change
node_modules/webpack-dev-server

alguna idea? he probado varias cosas y no logro resolverlo
desde comenzar el proyecto de 0, hasta actualizar node y npm

1
danielmedina
danielmedina
Estudiante

Tengo problemas con algunas dependencias de npm y no logro resolverlas, alguna idea?

probé con npm fix y npm --force, actualice el npm con sus dependencia y persiste el problema

~/Proyectos/platziBackenFronted/curso-bff(master*) » npm audit                                                      243[email protected]
# npm audit report

glob-parent  <5.1.2
Severity: moderate
Regular expression denial of service - https://npmjs.com/advisories/1751fix available via `npm audit fix --force`
Will install [email protected]1.16.5, which isa breaking change
node_modules/webpack-dev-server/node_modules/glob-parent
  chokidar  1.0.0-rc1 - 2.1.8
  Depends on vulnerable versions of glob-parent
  node_modules/webpack-dev-server/node_modules/chokidar
    webpack-dev-server  2.0.0-beta - 3.11.2
    Depends on vulnerable versions of chokidar
    node_modules/webpack-dev-server

trim-newlines  <3.0.1 || =4.0.0
Severity: high
Regular Expression Denial of Service - https://npmjs.com/advisories/1753fix available via `npm audit fix --force`
Will install [email protected]3.4.2, which isa breaking change
node_modules/trim-newlines
  meow  3.4.0 - 5.0.0
  Depends on vulnerable versions of trim-newlines
  node_modules/meow
    node-sass  >=3.5.0-beta.1
    Depends on vulnerable versions of meow
    node_modules/node-sass
      sass-loader  5.0.0 - 6.0.7 || >=8.0.0
      Depends on vulnerable versions of node-sass
      node_modules/sass-loader

7 vulnerabilities (3 moderate, 4 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

alguna idea?

1
rafael quispe
rafael quispe
Estudiante

no puedo conectarme a este curso AYUDA

2
Pedro Alexander Diaz Quiroga
Pedro Alexander Diaz Quiroga
Estudiante

alguien ha podido hacer el Logín con google? ayuda por favor

2
gasparnd
gasparnd
Estudiante

Soy el único que esta perdido o no lo hizo. En el curso de React o Redx, no colocamos el action de setError.
No se si o yo no lo hice o el curso esta adelantado o que?

1
gasparnd
gasparnd
Estudiante

Que API KEY TOKEN coloco en las variables de entorno, la publica o la privada?

1
Alvaro Marcelo Flores Guachalla
Alvaro Marcelo Flores Guachalla
Estudiante
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node src/server/index.js`
development server running on Port 3001/home/alvarto/personalProjects/Sistema_Juego281/sysgame/node_modules/mini-css-extract-plugin/dist/index.js:86
    const resource = this._identifier.split('!').pop();
                                      ^

TypeError: Cannot read property 'split' of undefined
    at CssModule.nameForCondition (/home/alvarto/personalProjects/Sistema_Juego281/sysgame/node_modules/mini-css-extract-plugin/dist/index.js:86:39)
    at Function.checkTest (/home/alvarto/personalProjects/Sistema_Juego281/sysgame/node_modules/webpack/lib/optimize/SplitChunksPlugin.js:335:52)
    at Object.fn [as getCacheGroups] (/home/alvarto/personalProjects/Sistema_Juego281/sysgame/node_modules/webpack/lib/optimize/SplitChunksPlugin.js:272:35)
    at compilation.hooks.optimizeChunksAdvanced.tap.chunks (/home/alvarto/personalProjects/Sistema_Juego281/sysgame/node_modules/webpack/lib/optimize/SplitChunksPlugin.js:543:38)
    at SyncBailHook.eval (eval at create (/home/alvarto/personalProjects/Sistema_Juego281/sysgame/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)
    at SyncBailHook.lazyCompileHook (/home/alvarto/personalProjects/Sistema_Juego281/sysgame/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/home/alvarto/personalProjects/Sistema_Juego281/sysgame/node_modules/webpack/lib/Compilation.js:1336:38)
    at compilation.finish.err (/home/alvarto/personalProjects/Sistema_Juego281/sysgame/node_modules/webpack/lib/Compiler.js:675:18)
    at hooks.finishModules.callAsync.err (/home/alvarto/personalProjects/Sistema_Juego281/sysgame/node_modules/webpack/lib/Compilation.js:1261:4)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/alvarto/personalProjects/Sistema_Juego281/sysgame/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
[nodemon] app crashed - waiting forfile changes before starting...

Tengo este problema alguien sabe porque me da este error? o como solucionar

0
Marcelo Vargas Avila
Marcelo Vargas Avila
Estudiante

tengo un problema con el axios, me lanza el error 400 😕

0
Ivan Santiago Barrera Medina
Ivan Santiago Barrera Medina
Estudiante

De que forma se podría hacer un test en Vue.js a funciones creadas dentro de variables reactivas? Ya que para llegar al 100% de coverage en ese componente, es necesario validar esas funciones
Ejemplo de la funcion customData dentro de la variable reactiva chartOptions:

export default{
  name: 'component',
  data: function() {
	chartOptions: {
	  customData: function(val1) {
	    returnval1 > 0 ? val1 * 2 : 0  
	  }
        }
  }
}
0