Nodejs, Express & JSON | Guardando datos en Archivo JSON
HTML-код
- Опубликовано: 18 сен 2024
- Este video es un ejemplo practico de Nodejs y Express en el que aprenderemos a guardar los datos de nuestra aplicación en un archivo JSON.
la aplicación web que crearemos sera una especie de CRUD (Create, read, update, delete) usando Nodejs, y otros modulos de Javascript en el servidor.
CÓDIGO
github.com/Faz...
CURSO DE GIT
• Git y Github | Curso P...
VISUAL STUDIO CODE
• Visual Studio Code, Ed...
VISITA MI SITIO WEB PARA MAS CURSOS Y CONTENIDO
www.faztweb.com
blog.faztweb.com
FAZT - RUclips:
/ fazttech
TWITTER
/ fazttech
INSTAGRAM
/ fazttech
FACEBOOK
/ fazttech
#nodejs #json
24:15 Si tienen un error parecido a:
Unexpected identifier in....
Es porque la sintaxis de EJS cambió, deben utilizarlo de esta manera:
Gracias, hacia horas que estaba atascado con esto.
Gracias, pero mejor use la plantilla de express-handlebars
gracias, me exploto el pc
y para el minuto 45:32
@@carlosmparra7484 Para el motor de plantillas EJS en el minuto 45.32 la sintaxis es la siguiente:
Te sigo hace banda de tiempo, nunca te canses de hacer estos videos. Sos un genio. Me sirvió mucho este manejo de archvios json te lo re agradezco
Despues de aprender AJAX, esto es lo que buscaba!! gracias amigo!
Por cierto tambien recomiendo el tutorial de Javascript FullStack donde podrias aprender a usar Javascript en el backend y frontend :) ruclips.net/video/Fs1G1BcP4BI/видео.html
Excelente. Muchisimas gracias. Primer video que encuentro que explica como implementar archivos de JSON en una applicación de node y express. Gracias nuevamente.
Mil Gracias Fazt-Code por compartir tu conocimiento, me ha servido bastante este tutorial para implementarlo en mi proyecto, tu forma de explicar es increible, eres bastante asertivo en todo.
Seria interesante si pudieras subir un pequeño tutorial con este mismo formulario o con otro de como implementar una validación reCAPTCHA v2 en nuestros formularios con Nodejs.
Muchisimas gracias hermano me salvaste el estudio.. segui asi Fazt
Que buen material. Me sirvió mucho para entender varios aspectos. Y mas de lo que aún te había preguntado! La verdad desde que encontré tu canal aprendí varias cosas, todavía me queda un montón mas por aprender. " Creo que debo desaprender varias cosas que ya no uso para hacer mas lugar en mi cabeza y aprender mas de este tema que me interesa" jaja. Te dejo un gran saludo y gracias.!
Amigos para aquellos que tienen algún problema con el require 'uuid/v4'
const {"v4": uuid} = require('uuid');
Esto es debido a un pequeño cambio en la documentación creo....
wena wn
me paso igual, lo solucione viendo la documentacion.
Gracias!!
Gracias Fazt por la enseñanza, en tiempos de cuarentena esto sirve mucho.
Saludos!
Excelente video
Mmm seguí el vídeo al pie de la letra y tengo el interés de saber cómo se actualiza los datos siempre usando un archivo JSON
Esta muy bien, tan solo una cosa que igual puede ayudar serian timestamps en vídeos tan largos quizás a veces si buscas algo que se te pueda haber pasado puede ser frustrante el resto muy bien explicado. Felicitaciones.
Muy buenos todos los vídeos que subes Fazt, he estado aprendiendo muchas cosas, Gracias, Saludos desde Guatemala
brillante la manera de explicar! gracias! error/correccion ..... es brillante
Buen tutorial. Saludos desde Academia Web
Mean Stack Mean Stack Mean Stack con Angular 8 !!!!!!!! :D
Hombre de cultura
Cuando le llamas "muy sencilla" a una aplicacion como esta trato de imaginar de cuanto sera tu sueldo como desarrollador y solo puedo concluir q te pones el sueldo q quieras. Felicitaciones
Superandote día a dia
excelente lo realize con handlebars todo bien
10:20 ⇾ 🔖Bookmark (OLD)
12:46 → 🔖 Current Bookmark (04/16/2023)
Gracias Mann, aprendí como nunca. Gracias, sigue así.
Excelente fazt me ayudas mucho en lo que necesito, pero podría crear más tutoriales de Flutter, gracias eres el mejor
Hola, estuvo genial tu video, excelente explicacion. Solo tengo una duda con respecto a la actualizacion del .json, no logro realizar el update mediante el PUT. Tendras algun video donde explicaras como se realiza ? Muchas gracias!
hola como estas pudiste hacer el put se que es viejo esto pero yo estoy sin poder hacerlo tambien saludos
@@ignaciomorales5883 Hola, no hay problema todavía tengo el código que genere en su momento xD La manera en que lo resolví fue que a cada libro le agregue un campo más que es el ID (lo genero automáticamente con la librería uuid) entonces cuando quiero realizar un PUT lo primero que hago es buscar mediante el ID el libro que quiero actualizar
En mi caso lo use para una app de ecommerce:
Busco el producto/libro mediante el ID y lo envio a la vista de edit, mostrando la informacion actual del producto/libro
const getproducto = ('/edit/:id', (req, res) => {
const producto = getConnection().get('inventario').find({ id: req.params.id }).value();
res.render('edit.ejs', { producto });
});
Luego de modificar los datos en la vista de edit llamo al updateProduct enviando el ID para buscar nuevamente el producto/libre y enviarle el body del formulario para que actualice.
const updateproduct = ('/edit/:id', async (req, res) => {
const result = await getConnection().get('inventario').find({ id: req.params.id })
.assign(req.body)
.write();
res.redirect('/inventory');
});
Espero haberme explicado bien, además si alguien encontró alguna otra manera de realizarlo mejor de lo que hice es bienvenido de los errores se aprende 😆
@@martinlepes3329 gracias bro! saludos
Buenas Fazt me encanta lo que estas haciendo ahora montando este tipo de videos... asi es que uno aprende mas... puedas en algun momento montar uno con RxJs con el patron redux
Excelente video...!!! Gracias por compartir tus conocimientos...!!!
Buenas noches fazt
Tendrás algún tutorial sobre firebase
Gracias por los tutoriales ayudaban mucho
Disculpen mi ignorancia, cual es la diferencia de usar , por ejemplo, router.post() y app.post() de videos anteriores
alguna guia para implementar la función editar ?
Me encantan tus videos, pero si ves uno, todos los demás ya los sabes, bd json, un crud de tareas, un crud de notas, y ya...si usas los módulos que utilizas como stripe, Morgan etc etc...
Pero a veces los sitios son un poco más complejos, por ejemplo como crear con javascript nativo en node para un módulo de lógica de un videojuego
Sockets, como evitar ataques de estrés en tu sitio, como evitar deny o services etc etc...
Saludos, repito muy bueno he aprendido contigo pero a veces si noto que los tutos son iguales o':
Aquí ya es cuestion de otra cosa bro, estos son tuts para aprender algo o para repasar alguna cosilla, si quieres más tendrás que, o buscar un canal dedicado a eso (desarrollo de juegos con Node, unity, etc), o empezar a buscar info en internet tú mismo.
Hola podrías usar vuejs para hacer una aplicación con nodejs y Jason . gracias excelente vídeo.
Fazt en qué tipo de aplicación necesitaría guardar mis JSON en un archivo del backend, en lugar de hacerlo en MongoDB?
Gracias por el video, me gusto bastante.
muy bueno, pero y si tengo el html ya establecido, y para rematar está en ajax en codeigniter 4?...... q lugar tendría ejs allí?...............................
Podrías explicar el editar así Completas todo lo de crud, osea crear editar y eliminar
Buenas tardes, en la linea donde se agrega el uuid, me marca error (SyntaxError: Unexpected end of JSON input
at JSON.parse ()) , hubo cambios en la version de uuid version 4
Resuelto, el json estaba vacio y me marcaba ese error, ahora en la parte UUID, hubo cambios y ahora se configura de la siguiente manera: const {"v4": v4} = require('uuid'); y en la parte de let newBook se agrega esta linea id:v4(),
Podrías haber una aplicación de auténticacion con jwt y angular
Mira bro yo tengo un demo de Angular 8 y Node pero está en inglés, aqui te dejo los códigos en github para que les eches un ojo github.com/AldoHub/Angular8-JWT-API-Node github.com/AldoHub/Angular8-JWT-Client
Este video me ayudo mucho Fazt Code, tengo una duda y si quiero editar un dato que ya se cargo en el json con un boton ¿como lo hago?
Eres grande Fazt , gran video muchas gracias
Tienes tutoriales para todo, wow. Tengo la duda, ¿En que tipo de proyectos es recomendable usar archivos Json para almacenar información? Quiero crear un blog, pero no se si sea optimo almacenar los post en archivos json y que tan seguro sea 🤔
Muchas gracias!
Excelente video, solo falto el tema de modificación de un registro del JSON, esto se puede realizar o toca borrar el registro y volverlo a adicionar?
Hola, muy buenos tus videos, ayudan un montón más de lo que te imaginas creo yo jajajaja
Cómo hago para crear in id autoincremental, paraque, en mi caso, los productos que agrego aumenten su id en 1. Desde ya muchas gracias, sos un crack.
Lo que podrías hacer es guardar con casa objeto una propiedad Id que sea un número y cada vez que guardas uno nuevo leer el objeto final del arreglo y sumarle 1. De esa forma se auto incrementaría por cada nuevo objeto
Json se puede usar como una base de datos. Fija???
Osea que no se puede guardar ni relacionar??
Pero puedes hacer algo parecido a un crud???
Hola estuve buscando y no vi en tus tutoriales, una app simple de tareas (con calendarios y tareas), con nodejs hbs y mysql por ej.
saludos!
Fazt Code eres un máquina, una pregunta, tienes algun aplicación en vez de subir imagines de una url, suber por ejemplo un .pdf y que otro usuario que use la aplicación lo pueda descargar, gracias!
Qué motor de plantilla recomiendan para empezar, EJS o HBS?
Ejs es mucho más sencillo en mi opinion. Handlebars no es complicado tampoco, pero en comparasion a EJS, la configuracion es un poquito más trabajosa.
Así que EJS para empezar y luego puedes pasar a Handlebars con facilidad
Gracias Fazt ♡
hola , tengo un problema con la "la validacion del formulario " en el if (!title || !autor || ....) se me activa se me muestra el mensaje que no cumple con todo el formulario, por que sucedera si estoy llenando todos los campos,
Este video me ayudo mucho Fazt, una consulta, estoy haciendo un crud con Node con equipos de futbol y solo me falta poder editar/actualizar un equipo, me darias alguna pista sobre como podria lograrlo?
Oye fazt! Podrias hacer otro ejemplo mas completo de Electronjs? Porfa!! saludos!
Buenas Fazt, mi curiosidad más grande es como puedo estilizar los bordes o el from de mi ventana de mi aplicacion en ElectronJS asi como esta en Visual Studio Code, he buscado en google y no he hallado ningún tema parecido.
Gracias Fazt
amigo puedes hacer mas cursos de MEVN con Vue cli 3 :)
Buena idea, voy a elaborar un ejemplo para publicarlo pronto
pregunta, en mi caso la aplicacion que tengo genera un array con objetos, estos tienen un name y un array con diez numeros, hay forma de guardar ese objeto en un archivo .json? sin que necesariamente se mande con el formulario con el metodo post o get?
Realmente Eres un Crack, también se puede hacer de esta manera con react native?
ayuda! me salio este error
Uncaught TypeError: fs.writeFileSync is not a function
Un grande Fazt !! Saludos
Una pregunta fazt, estoy realizando una aplicación con el stack mern, y usando jwt para la autenticacion, y quiero hacer un HOC que me envie al login si el token en el localstorage es invalido, tienes idea como hacerlo ? he buscado mucho y no encuentro nada :(
Podrías intentar dentro del HOC agarrar el token usando localStorage, de ahi checar si el localStorage.getItem("token") esta vacio, sería algo como:
if(localStorage.getItem("token")){
//el usuario está loggeado
}else{
//redirecciona al login, el usuario no esta loggeado
this.props.history.push('/login');
}
y dentro de las rutas lo conectas así:
siendo Auth el HOC que exportes
Sería posible hacer esa misma web. Para almacenar todo los datos en googleDrive en formato .json
Excelente!!!!
Hola Fazt este ejemplo de guardar datos en Archivos JSON funcionaria en una app con chat para guardar las conversaciones por usuario ?? como lo hacían Blackberry Messenger. He estado pensando en esta alternativa para no tener que guardar las conversaciones en una BD y hacer muchas peticiones. Tu valorable Opinión :)
Hola como puede recuperar los usuarios el documento que hemos subido?
Fazt code, hice deploy de este proyecto en Heroku pero los datos se guardan solo por 30 minutos los libros que creo solo se mantienen por unos 30 minutos y al cabo de un tiempo se borran cuando actualizo el navegador, a que se debe esto, así funcionaria ya en producción ?
Como hacer que el api en node JS pueda procesar varios objetos JSON en forma masiva , alguien tiene ejemplo o algun
link
Espectacular! :^)
hola que tal muy buen video me gustaria saber como se podria hacer para que desde el archivo que creaste yo pueda hacerque el archivo mande su informacion en cierto tiempo a una base de datos real
como hago para subirlo a un host ? no tiene index.html, alguno puede darme una mano ?
Me funcionó asi :
Necesito hacer esto en angular. porque necesito crear varias direcciones ip donde estarán servicios en diferentes clientes. entonces quería hacer un json que me funcione como base de datos para las ip de los diferentes servicios. Esto es posible? Saludos!
Esto lo podría usar en una App de flutter?
Pregunta:
Estoy creando una app para aprender y quiero usarla para guardar mis archivos de video ¿como puedo guardar y reproducir videos estilo RUclips o cualquier app de video? Sin descargar el archivo que no se guarde en el mismo servidor
Contexto: tengo 2 pc una la uso como servidor y solo tiene 10gb de disco y la otra tiene un 100gb y quiero usarla para guardar los videos todo funciona con react y node
Perdón si no me se explicar bien 😔
Thanks man. It is really helpfull
fazt, node.js es hackeable cn xss??????
(injeccion de codigo javascript)
Por que en el endpoint para eliminar el registro utilizas un GET y no un DELETE?
Esta hecho con un GET, por simplicidad (o incluso flojera en mi caso xD). La razón es, que es mucho más fácil crear una etiqueta y que esta haga la peticion GET; pero seria mucho mejor hacer una peticion DELETE. Para hacerla tendrias que capturar el evento click del boton, y enviar una peticion quizas usando Fetch. Otro metodo tambien seria creando un formulario y con un input oculto y que el backend sea capaz de interpretarlo.
Suena complicado, pero de hecho hay modulos de npm, que lo hacen. Por ejemplo hay uno llamado method-override. el cual te permite usar peticiones GET,POST,PUT,DELETE todo desde HTML a traves de formularios.
www.npmjs.com/package/method-override
De cualquier modo. seria mejor que los metodos HTTP sean descriptivos. Así que apunto esto para actualizar el código pronto :)
Un Saludo.
@@FaztCode en el caso de hacer el metodo para editar sucederá lo mismo??? o en ese caso al usar la etiqueta no hay problema de actualizar el registro usando un PUT??
Si me puedes ayudar con la inquietud del PUT te agradeceria mucho la información
Para el método PUT también necesitarias una de las formas que te mencioné. Pero si no vas a enviar datos, podrías hacerlo con una etiqueta a simplemente, o si en caso necesitas enviar datos podrías usar un formulario con un método post. Voy a elaborar un vídeo del tema para mañana :) gracias por la idea
Fazt Code estaba haciendo el método put pero no puedo cargar los datos en el form de editar, ya puedo enviar el id en la url pero no sé cargar los datos correspondientes a ese ID 😭😭😭😭😭.
Excelente video, Gracias por compartir tus conocimientos, de verdad que es muy valioso eso de tu parte, ya tienes un subscriptor mas!, tengo una duda y si me puedes ayudar a resolverla, te agradecería! : porque a la ruta new-entry al hacer el res.render('new-entry') no le pones la extensión del archivo (.ejs) como en el res.render('index.ejs'), yo estoy intentando hacer lo mismo con otro proyecto mio aplicando tus mismos conceptos, pero cuando envió la petición al servidor me responde un mensaje "Error: No default engine was specified and no extensión was provided.", no se porque a ti sin ponerle la extension te funciona, yo en mi caso no tengo el formulario en una ruta especifica, lo tengo en mi index.ejs, no se si sea por eso el problema, te agradecería si me puedes ayudar.
Si lo pudiste solucionar te agadeceria la espuesta bro porque me pasa lo mismo con mi new-entry
Thx master!
Mencionaste que usarías handlebars como motor de plantillas y al final lo cambiaste, por qué? 🤨
No lo cambie de hecho yo seguiría usando handlebara pero el tema es que para este ejemplo sencillo evito usar handlebara por sus configuraciones que son más complicadas para algo tan simple :)
@@FaztCode vale… te la compro porque si es engorroso la configuración de hbs 😬 saludos y gracias por tus videos, son geniales y de muchísima ayuda.
por favor usa disparadores con mongodb o mongoose
Es recomendado usar un archivo json cómo base de datos?
Para aplicaciones reales no realmente, pero a modo de práctica o de crear aplicaciones muy pequeñas, no creo que importe mucho. Una mejor opción yo diría que sería SQLite
Funciona para Python?
La idea es la misma, pero el modulo en python se llama: json
Voy a elaborar algun ejemplo de python tambien para publicarlo pronto
@@FaztCode gracias 😁
primer comentario :D
Y pare que funcione uuid: const { v4: uuidv4 } = require('uuid');
id: uuidv4(),
update json data ???
2:15
Cada vez que guarda el archivo books.json se reinicia el servidor por Nodemon. ¿Hay manera de evitar eso? saludos.
Nodemon tiene una forma de ignorar archivos:
stackoverflow.com/questions/24120004/nodemon-exclusion-of-files
En este caso tendrías que ejecutar nodemon algo así:
nodemon --ignore ''src/books.json'
o la ruta de en donde este tu archivo books.json
En efecto, funciona perfecto. Gracias, y también por hacer estos vídeos haha
Como tabulas el código
con la tecla Tab
Que tamaño y fuente usas tio fazt?
Gracias por tus videos
pregunta se podra editar asi como que sifuera un crud :D
Sí claro. de hecho lo que faltaria a este ejemplo para que sea un CRUD tan solo seria el editar. pero si prestas atención a las operaciones del guardar y eliminar facilmente lo implementas
@@FaztCode si muchas gracias :D
ui en v4:
const { v4: uuidv4 } = require('uuid');
uuidv4();
No me queda del todo claro que es "npx"..
Javascript nativo sin nodejs ni nada más no se puede manipular archivos no 😐
si se puede crear y editar con js vanilla
prefiero react doc
Código para editar:
// -----------UPDATE-------------------
router.get("/update/:id", async (req, res) => {
let userId = await usuarios.find(
(user) => user.id === parseInt(req.params.id)
);
res.render("update", { user: userId });
});
// -------
router.post("/update", async (req, res) => {
userId = await usuarios.find((user) => user.id === parseInt(req.body.id));
let indexFound = usuarios.findIndex(
(user) => user.id === parseInt(req.body.id)
);
const { id, nombre, edad, telefono, correo, area } = req.body;
let newUser = {
id: id,
nombre: nombre,
edad: edad,
telefono: telefono,
correo: correo,
area: area,
};
console.log("INDEX FOUND");
console.log(indexFound);
console.log("NEW USER NUEVOS VALORES");
console.log(newUser);
const newData = [...usuarios];
newData[indexFound] = newUser;
usuarios = newData;
console.log("NEW DATA INDEX");
console.log(newData);
const json_usuarios = JSON.stringify(usuarios);
fs.writeFileSync("usuarios.json", json_usuarios, "utf-8");
res.json({
message:"product updated successfully"
})
});
Mean Stack Mean Stack Mean Stack con Angular 8 !!!!!!!! :D
X2