Revisión y próximos pasos

Clase 32 de 33 • Curso de Node.js: Base de Datos con MongoDB y WebSockets

Clase anteriorSiguiente clase

Iván Felipe Velasteguí Jaramillo

student•

Para iniciar el frontend del Vue.js:

Descargar la carpeta del proyecto frontend desde "Archivos y Enlaces" de esta clase
En consola moverse al directorio del proyecto descargado (ES UN PROYECTO APARTE, no ponerlo en el directorio del proyecto de Node que hemos venido trabajando.
Una vez en el directorio leer el archivo README.md, aquí indica que hacer. Correrá los scripts definidos en package.json npm install npm run serve npm run build _ Al hacer npm run serve iniciará el frontend en http:localhost:8080/ _ Correr el servidor del chat y recargar la página del frontend y listo! NOTA: asegurarse de instalar e iniciar el módulo cors en el backend del chat para que funcione

Carlos Hernández

teacher•

Efectivamente. También se puede ejecutar

npm run build

Esto generará una carpeta "dist" con el código minificado y listo para producción. . El contenido de esa carpeta se puede mover a la carpeta "public" del backend, y así lo estaremos enviando desde el servidor Node.

Alejandro Espitia

student•

Gran aporte, me ayudo muchísimo, muchas gracias

Juan Esteban Velez Muñoz

student•

El curso genial, pero necesito un curso completo de websockets para entenderlo bien jejej

Alvaro Eduardo Garzón Pira

student•

¡Hola! Ten: https://platzi.com/cursos/socket-io/ Por si no lo habías visto ya

Daniel Alberto Esquinazi

student•

Para la gente de React, cree un frontend que utiliza esta API. Pueden descargarlo de mi github y dejarme una estrellita. Tambien pueden cambiarlo como gusten y comentar sugerencias!

Luis Chavez

student•

Para conectar el Frontend hay que seguir los siguiente pasos:

Descargar todos los archivos en la pestaña de Archivos y Enlaces.
Copiar y pegar todos los archivos (ojo hay archivos que en el explorador de archivos no aparecen como el .eslintrc.js asegurate de también copiarlos) a la carpeta public del proyecto de node.
Desde la consola estando en la carpeta general del proyecto de node, moverse a la carpeta public (cd public).
Ejecutar el comando: npm install (se instalaran todas las dependencias del proyecto).
Ejecuten el servidor que tienen de node: nodemon server.js (estando en la carpeta general del proyecto cd ..).
Ejecutar el comando: npm run serve (correrá el proyecto en un servidor local en el puerto 8080).
En el navegador pongan http://localhost:8080/ y listo ahi podrán ver el front que muestran en el video funcionando!

Jose Gabriel Jiménez Vidales

student•

Yo hice el front con React, aquí les dejo mi Github por si quieren darme estrellita y hacerme sugerencias :D, también desplegué la aplicación en Heroku por si quieren probarla!

Jhon Arcila Castaño

student•

Le quedo muy bien

Yamid Alejandro Gonzalez Martinez

student•

Excelente. Me anima seguir aprendiendo. Proximo curso ++React++ :-)

Victor Contreras

student•

Leyendo los comentarios y resumiendo la información faltante:

Descargar la carpeta que está en Archivos y enlaces Descomprimir Por consola entrar a esa carpeta ejecutar: npm install npm run serve npm run serve --fix npm run build Debería crear una carpeta dist, entrar y copiar los archivos Pegarlos en la carpeta public de nuestro proyecto Listo! nodemon server

Reinaldo Mendoza

student•

Muchas gracias

Angel Raúl Acosta Rojas

student•

2021 Seguimos sin poder implementar el frontend que el profe proporcionó, pero bueno, no por eso dejen de hacer su propio frontend

Gerardo Barbosa

student•

Yo borre el contenido de dependencias en el archivo pakage_json-lock ya que tenia referencias ya no validas. Luego ejecute el npm install, npm serve, npm serve --fix, y por ultimo el npm build para copiar el contenido de la carpeta dist dentro del proyecto del servidor

Cristofher Jumbo Jimenez

student•

Les presento los retos que propone socketio:

- Broadcast a message to connected users when someone connects or disconnects.
- Add support for nicknames.
- Don’t send the same message to the user that sent it. Instead, append the message directly a soon as he/she presses enter.
- Add “{user} is typing” functionality.
- Show who’s online.
- Add private messaging.

Gerardo Barbosa

student•

Cuando dices retos te refieres a lo que busca solucionar o los problemas que genera? A la fecha se ha resuelto? O debes resolverlo tu configurándolo en el código?

Angel Raúl Acosta Rojas

student•

Porqué no dice cómo implementar el FrontEnd? Ninguna respuesta es clara

Rony Porraz Vargas

student•

quieres renderizar frontend desde el servidor?

Cristian Blandón

student•

Porque este curso no comprende integración con Front-end 🤔

Te recomiendo seguir una ruta de aprendizaje o escuela para que tengas claro qué se ve en qué momento. Los siguientes cursos de la Escuela de Desarrollo Web comprenden lo que solicitas:

¡Saludos!

Daniel Hernandez

student•

Hola, existe alguna documentación para entender como puedo integrar el frontend de Vue en esta clase con el proyecto de Node que llevamos por a parte

Demian Arenas

student•

Hola @danhergir, el frontend de Vue corre en un proceso aparte y se comunica con el proyecto de Node a modo de API. El frontend realiza una petición mediante Axios, dentro del sistema de archivos en /src/store/modules puedes ver la forma en que el proyecto realiza las peticiones.

Si lo que buscas es aprender sobre la estructura del proyecto de Vue te recomiendo el Curso Profesional de VueJS o partir desde el Curso Básico de Vue.js. Si lo que buscas es hacer Server Side Render con el proyecto que hicimos en Node, te recomiendo la documentación de Vue.

Juan Valero Reyes

student•

Igual no responde la pregunta, tambien estoy teniendo problemas para integrar el Frontend, pero como nunca nadie me responde aqui igualo lo dejo para la posteridad

Anderson René Santacruz Aguilar

student•

Al correr npm install me da el siguiente error:

npm ERR! code ENOTFOUND
npm ERR! syscall getaddrinfo
npm ERR! errno ENOTFOUND
npm ERR! network request to http://npm.fintonic.com:4873/yorkie/-/yorkie-2.0.0.tgz failed, reason: getaddrinfo ENOTFOUND npm.fintonic.com
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Anderson\AppData\Local\npm-cache\_logs\2021-03-19T21_50_31_855Z-debug.log

¿Que debo hacer?

Antony Jose Cabeza Rauseo

student•

Tengo el mismo error, lograste resolverlo?

Anderson René Santacruz Aguilar

student•

Si, debes desinstalar el package-lock.json, después ya podras correr npm install.

Andrés Carrillo

student•

Cuando envio un mensaje desde insomnia, no llega al instante a la app de Vue, toca recargar, why?

Angel Raúl Acosta Rojas

student•

Todo bien hasta esta clase

Juan Teixeira

student•

Teniendo dos clientes abiertos, y en un mismo chat, lo que escribo en el cliente 1 no se ve en tiempo real en el cliente 2.

¿Como hago para que esto pase?

Chris X

student•

El frontend esta perfecto para realizar las pruebas de lo que se estuvo trabajando, pero soy el unico al que no le funciona el socket para mostrar los mensajes en la vista de chat ?

Desde mi cliente REST envio mensajes pero no se muestran en tiempo real

Angel Antonio Gonzalez Garrido

student•

Me ha encantado el curso, pero siuento que necesito retomarlo para afianzar muchas cosaas! Muchas gracias

Ariel Virgilio Solano Gonzalez

student•

Algo que me hubiese gustado fuera implementar un login con twj

Seba Cardoso

student•

¿Qué es twj?

David Camacho

student•

creo que se refiere a json web tokens...

Angel Raúl Acosta Rojas

student•

Ni idea como hacer que funcione el vue.js, ya seguí las instrucciones del readme pero desde el primer comando me dice ""vue-cli-service" no se reconoce como un comando interno o externo,programa o archivo por lotes ejecutable."

Jose Jimenez

student•

Como puedo desabilitar esto?

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

Me aparece al dar npm run en vuejs, va en 98% y es el unico error, busque y me salen formas como desabilitar pero nose donde colar el script.

Santiago Pulido Peláez

student•

Si yo hago el front end en React.js, cómo podría integrarlo con el back que hemos desarrollado en el curso?

John Cardenas

student•

Hola Santiago,

Tu pregunta la responde el curso de Integración de Backend con Frontend :)