Galeria de Fotos/Imagenes con Nodejs, Mongodb y Cloudinary
Вставка
- Опубліковано 8 лют 2025
- Aprende a crear una aplicación web de Galeria de imagenes o Fotos, usando Nodejs, Mongodb y otras tecnologías de Javascript como handlebars, express, swiper y otras más. Ademas almacenaremos nuestras imagenes en un servicio de la nube llamado Cloduinary.
ENLACE PARA CREAR CUENTA EN CLOUDINARY
cloudinary.com...
INDICE DEL CURSO
1. ESTRUCTURA DEL PROYECTO: 2:49
2. CREANDO EL SERVIDOR CON NODEJS Y EXPRESS 10:22
3. MONGODB Y MONGOOSE 30:50
4. VARIABLES DE ENTORNO 38:47
5. ESTILOS CSS Y BOOTSTRAP4 52:58
6. SUBIDA DE IMAGENES A CLOUDINARY 01:11:32
7. OBTENER IMAGENES Y ELIMINAR IMAGENES 01:40:30
CÓDIGO DEL CURSO
github.com/Faz...
CURSO DE NODEJS
• Nodejs Curso Desde Cer...
SUBIDA DE IMAGENES USANDO NODEJS
• Subida de Imagenes en ...
VARIABLES DE ENTORNO EN NODEJS
• Variables de Entorno e...
RED SOCIAL NODEJS Y MONGODB
• Nodejs y MongoDB Red S...
MAS EJEMPLOS DE JAVASCRIPT ORIENTADO A OBJETOS
• Aplicación de Producto...
CURSO DE GIT:
• Git y Github | Curso P...
CURSO DE MONGODB
• MongoDB, Curso Practic...
INSTALACIÓN DE MONGODB
• MongoDB instalación en...
VIDEO DE VSCODE:
• Visual Studio Code, Ed...
VISITA MI SITIO WEB PARA MÁS CURSOS Y TUTORIALES
www.faztweb.com
blog.faztweb.com
FAZT CODE - UA-cam:
/ @faztcode
TWITTER
/ fazttech
INSTAGRAM
/ fazttech
FACEBOOK
/ fazttech
COMUNIDAD EN DISCORD
/ discord
#cloudinary #javascript #nodejs #mongodb
Les dejo el código que funciona, se utiliza en 1:40:33:
const express = require('express');
const morgan = require('morgan');
const multer = require('multer');
const path = require('path');
const exphbs = require('express-handlebars');
const {allowInsecurePrototypeAccess} = require('@handlebars/allow-prototype-access');
const Handlebars = require('handlebars');
//Initializations
const app = express();
require('./database');
//Settings
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.engine('.hbs', exphbs({
defaultLayout: 'main',
layoutsDir: path.join(app.get('views'), 'layouts'),
partialsDir: path.join(app.get('views'), 'partials'),
handlebars: allowInsecurePrototypeAccess(Handlebars),
extname: '.hbs'
}));
app.set('view engine', '.hbs');
Las dependencias que utilizo:
"dependencies": {
"@handlebars/allow-prototype-access": "^1.0.3",
"cloudinary": "^1.22.0",
"cross-env": "^7.0.2",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-handlebars": "^5.1.0",
"fs-extra": "^9.0.1",
"handlebars": "^4.5.3",
"mongoose": "^5.10.0",
"morgan": "^1.10.0",
"multer": "^1.4.2"
}
Deben instalar, estas dos dependencias adicionales:
npm install @handlebars/allow-prototype-access
npm install handlebars@4.5.3
Gracias, ya me estaba volviendo loco. me salio un error y con tu ayuda se ha resuelto. Muy agradecido.
muchas gracias me soluciono la vida jaja
Gracias, no me cargaba las fotos, solucionado!!!
se merece el cielo amigo mio
y uno buscando en internet, solo ver comentarios y listo gracias mano.
Que crack, no les ha pasado que necesitan averiguar algo y vienes a Fazt y lo encuentras!!!!! Larga vida a Fazt
INDICE DEL CURSO
1. ESTRUCTURA DEL PROYECTO: 2:49
2. CREANDO EL SERVIDOR CON NODEJS Y EXPRESS 10:22
3. MONGODB Y MONGOOSE 30:50
4. VARIABLES DE ENTORNO 38:47
5. ESTILOS CSS Y BOOTSTRAP4 52:58
6. SUBIDA DE IMAGENES A CLOUDINARY 01:11:32
7. OBTENER IMAGENES Y ELIMINAR IMAGENES 01:40:30
INDEX COURSE
1. PROJECT STRUCTURE: 2:49
2. CREATING THE SERVER WITH NODEJS AND EXPRESS 10:22
3. MONGODB AND MONGOOSE 30:50
4. ENVIRONMENT VARIABLES 38:47
5. CSS STYLES AND BOOTSTRAP4 52:58
6. UPLOADING IMAGES TO CLOUDINARY 01:11:32
7. GET AND DELETE IMAGES 01:40:30
Spanish | English -
Me he visto casi todos tus videos y son geniales. Haces un gran aporte a la comunidad subiendo estos videos.
Yo sigo aprendiendo. Muchas gracias por brindar tu conocimiento, eso es espíritu de docencia.
Excelente...!
Muy claro, muy entretenido, te felicito!!!
Por favor has un ejemplo con amazon S3
me encanta este canal siempre sube buen contenido, me gustaria un tutorial para saber mas de Amazon web services
Para los que no les carga las imógenes en el {{#each photos}} de la vista image: solo tienen que poner un .lean() al final del find para que el documento que trae nuestro modelo se transforme en un json, entonces pueda ser leído por hbs, la ruta para que lea bien la img quedaría así:
router.get('/', async (req, res) => {
const photos = await Photo.find().lean();
// Prueben sin el lean
res.render('images', {photos});
});
Yo ayer estaba como loco buscando la forma. Había encontrado que se podía instalar una versión anterior de handlebars pero yo esperaba encontrar una solución mejor: tu solución!
@@correomaraco1284 jaja de nada, próximamente Fazt XM(?)
@@xavimc95 Haz visto el tutorial de Fazt llamado "Angular Mysql CRUD Tutorial, REST API Node & Typescript"? Podrías ayudarme con este error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed.
@@correomaraco1284 No, no lo vi, pero parece que un error parecido, no? Probá buscando algo parecido en sequelize o el orm que esté usando Fazt en ese video
@@xavimc95 Gracias. Revisaré
Hola Fazt, Muchas gracias por compartir este buen y excelente curso, te superas más y más en cada video que subes creando aplicaciones y este creo es uno de los mejores, eres super. Un saludo desde República dominicana.
Para los que tengan problema con la configuración del motor vistas: Utilizar el método engine cuando requieran el módulo. Algo así: const {engine} = require('express-handlebars')
Queremos S3 aws, yo se que todos tus suscriptores lo estan esperando con ansias :DD SABIDURIA grandes me gusta todo lo que haces
gran video amigo, saludos desde El Salvador
Genial esto de aprender a utilizar cloudinary en nuestro server :D Espero utilizarlo pronto :D
Hola Fazt, primero comienzo agradeciendo por tan valioso aporte y sobre todo la constancia.
El siguiente punto, es preguntar si tienes en tu agenda algo de tiempo para implementar exactamente esta vista, con el mismo Backend + servicios, hacerlo con React JS. (teniendo en cuenta que Handlebars tiene lo suyo),
Como actualmente ando aprendiendo esta gran librería, estoy seguro que a otros compañeros también les agradaría la idea de poder implementar esta vista con React.
¡muchas gracias!
si react o angular seria genialñ hacerlo con algun framework
Hola, sería genial hacer un video sobre el uso de Docker o kubernetes!!
Genial estaria esto
Megusta
Excelente contenido, Fazt.
Aprecio y valoro mucho tú trabajo.
Muchas gracias. ;D
Que buen video, bien explicado, preciso y consiso, este chico es un crack.
Buen tutorial, justo lo necesitaba para mi tarea
Solo por si algo, si no pueden subir la imagen hay que cambiar las siguientes líneas así:
const cloudinary = require('cloudinary').v2;
const result= await cloudinary.uploader.upload(req.file.path);
buenas tardes Fazt como estas?,te sigo hace mucho y me ayudaste bastante con esto del diseño.Queri pedir si puedes actualizar este video pero con Angular,Node,mySql y obviamente Cloudinary.Muchas gracias!!!!!!
Muchas Gracias desde ya antes de verlo completo.
Buenísimos tus tutoriales, siempre los veo completos y aprendo algo nuevo, mil Gracias ! ... Una pregunta: Como es que sabes y te mantienes al corriente de todo o donde aprendes tanto ? Saludos !
Excelente como siempre Fazt !!!
Gracias fazt. Esperaba esto hace semanas.
Me encanta el contenido de tu canal. Me decidí a meterme en el mundo de JS y tus videos prácticos me han ayudado muchísimo.
Me gustaria saber si existe la posibilidad de que en algún momento hagas algo en Ionic. Saludos y gracias.
Gracias por este gran aporte.
Excelente video, lo único que falto fue el manejo de errores, pero el resto excelente ! Con respecto al próximo video sería ideal algo relacionado con app móviles programada con js, saludos!
Exelente video como siempre. La nube de IBM tiene montón de servicios gratuitos, me gustaría si puedes desplegar una app en esta nube para aprender hacer este tipo de deploy. Gracias
Increible, muchas gracias señor!
Crack, ídolo, eminencia 🙌🙌🙌
En el 1:40:33, el código deja de funcionar si sigues tal cual los pasos, pues las actualizaciones de handlebars te deniegan permisos para obtener las imagenes. Lo solucione, siguiendo estos pasos:
translate.google.com/translate?hl=es-419&sl=en&u=stackoverflow.com/questions/59753149/express-handlebars-wont-render-data&prev=search&pto=aue .
muy buen aporte, igual espero que en un furuto hagas un curso de react native, saludos cordiales
Gracias Fazt! Finalizado con éxito!
Excelente contenido, me fue de mucha ayuda. Quedo suscrito.
amazon S3 man, perfecto tuto :D
Hola FAZT tus videos son geniales, podrias hacer uno realizando realizando login con ANGULAR ?? seria de mucha ayuda !! Saludos !! Gracias !!
MUY BUEN PROYECTO, GRACIAS
Excelente! Muchas gracias!
Eres la ostia guacho, Saludos desde Mexico
hola amigo seria genial que hicieras un curso de godot
Son geniales tus videos!! Estaría bueno en el corto plazo que puedas hacer un e-commerce bien completo, con seguimiento de productos un buen backend con nodejs + express y frontend con angular. Y un modelo de plataforma tipo e-learning Django + angular estilo udemy, es interesante el rol curso + docente -> alumnos pero sin uso de su api de udemi. O una tipo airburn airbnb.... No hay casi nada algo semejante y si hay mucho e-commerce con PHP o Cms nomás.. estaría bueno unos proyectos así... Te felicito por todos tus conocimientos y dedicación!!!
Es verdad, hay una herramienta que se ve muy bien que es Schema.io para el desarrollo de eCommerce
@@gokufanmaxus1 si, pero idea es no recaer en plataformas existentes cómo woocomerce, PrestaShop, Magento, shopify, opencart, etc. La idea es hacerlo uno mismo, con una impronta, totalmente personalizada...por eso es lo que puse arriba
Ha fecha de hoy, funciona correctamente. aunque he tenido que instalar algunos módulos ya explicados por @jean pinto. aunque en el archivo database.js. tenemos que añadir un línea más
const mongoose = require("mongoose");
mongoose
.connect(process.env.MONGODB_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
// esta línea.
})
.then((db) => console.log("DB is connected"))
.catch((err) => console.error(err));
Que genial, excelente!
Genial
el de amazon s3 estaria genial * - *
Min 1:43:20 EL EACH AQUI YA NO FUNCIONA SI USAS LAS ULTIMAS VERSIONES DE HANDLEBARS ,
SE RECOMIENDA QUE PARA QUE EL EJEMPLO TE FUNCIONE BIEN
SI YA INSTALASTE HANDLEBARS USA EL COMANDO(npm remove handlebars)
SI NO LO INSTALASTE O SI YA LO REMOVISTE USA EL COMANDO (npm i handlebars@4.5.0).
gracias por su atencion
Me paso lo mismo, estuve buscando la solucion por la red pero no me sale tiene que ver una forma de hacerlo con esta version de handlebars sin tener que instalara una version antigua, gracias por el comentario
aunque use el npm remove y lo instale con otra version, sigue el error. alguna idea??
@@yatsuwarui6284 aparte del modulo express-handlebars debes instalar el modulo de handlebars para que te funcione, npm i handlebars 👍
@@leonardosocorro236 muchas gracias, pero sigue sin aparecer nada en mi galeria, de todas manera, gracias!
Yo igualmente me tope con ese error, después de tanto buscar, solo debes poner un helper cuando reenderizas tu vista, en tu archivo tu index.js de tu carpeta router:
router.get('/', async (req, res) => {
const photos = await Photo.find();
res.render('images', {
photos,
helpers: {
imageURL: function () {
return this.imageURL;
}
}
});
});
Saludos buen tutorial, tengo una consulta, en Coudinary existe la opción de poder crear carpetas para organizar las imágenes y me preguntaba si se podría almacenar en una carpeta con el nombre de la web que hace el upload y no que queden todas mezclada por si deseas usar la misma cuenta de cloudinary en otro tipo de proyecto.
Hola , muy bueno tus videos, fazt, podrian hacer Subida de Imagenes con Cloudinary y Mongodb con Typescript
Gracias brother, aprecio de corazón tus aporte pero aun muero con las ganas de ver un tutorial de como hacer un app con videos como formato: mp4, ogg o webm seria genial.
Puedes usar UA-cam
@@ericktucto es en serio no existe tutorial de app para videos en todo Google
Hola fazt, ante todo agradecerte por los buenos vídeos, mi duda es la siguiente: Las variables de entorno que nosotros declaramos en el .env solo esa para Desarrollo, y cuando quiera manda a producción el API_KEY, API_SECRET, etc. deberías crear variables de entorno del mismo Heroku? Gracias por su tiempo (Y)
y la respuesta es...?
Fazt, Qué te parece el Storage de Firebase?, Saludos. Gracias por tus videos.
excelente como siempre fazt
Hola fazt tus vídeos son muy buenos podrías hacer uno subiendo imágenes al storage de GCP te lo agradezco
Gracias 🙏 Fazt !!!
Fazt en el caso de que este manejando carpetas como mvc esa configuracion del cloudinary donde deberia ir en Routes o en Controllers?
Hola para los que tengan problemas para visualizar las imagenes se corrige con las siguiente linea
const photos = await Photo.find().lean()
crack
No me las carga de todas maneras me aparecen en recuadros en blanco ayudaaaa
:(
@@cristianmdv3239 yo tuve que modificar estas lineas:
const cloudinary = require('cloudinary').v2;
const result= await cloudinary.uploader.upload(req.file.path);
todo lo demas es igual.
@Vazquez Padilla Luis en donde coloco esa linea de codigo :/
Un favor como puedo eliminar la imagen de cloudinary sin nodejs solo usando por ejemplo angular claro usando su api rest de cloudinary se puede??
Estaría genial que hicieras una aplicación pero con algún panel admin, o algún sistema que apruebe las imagenes.
Una consulta tengo problemas o un error path cuando le doy a subir y no seleccione un archivo. Cómo podría arreglar hay alguna propiedad.
muy buen video, lo que está en el repo no es el mismo codigo =(
Hola Fazt !! a este tutorial por favor le podras agregar como editar la informaciòn de cada foto ? Gracias !!
Hola Fazt, excelente video y gracias.
Tengo una duda, y es la siguiente como haria para restringir el acceso a imagenes en cloudinary, para que solo mis usuarios logueado tengan acceso, si las imagenes estuvieran en mi server seria sencillo pero utilizando cloudinary
Puedes poner las datatable en tus proximos tutoriales? seria genial!
como puedo guardar las imagenes en un folder creado en cloudinary?
Hola, tendrás algún video como incluir un progress bar al upload, usando nodejs y hamdlebars, gracias
Hola tengo un problema al momento de mostrar mis fotos en la application 1:43:47 el error que me enseña en la consola es
Handlebars: Access has been denied to resolve the property "_id" because it is not an "own property" of its parent.
You can add a runtime option to disable the check or this warning:
See handlebarsjs.com/api-reference/runtime-options.html#options-to-control-prototype-access for details
me pasa lo mismo, alguna idea??
En tu consulta debes agregarle el lean al final. Por ejemplo await Models.find().lean() de esta manera podra handlebars leer los datos.
Puedes probar utilizando un helpers cuando reenderizas tu vista, en tu archivo tu index.js de tu carpeta router:
router.get('/', async (req, res) => {
const photos = await Photo.find();
res.render('images', {
photos,
helpers: {
imageURL: function () {
return this.imageURL;
}
}
});
});
Pdst: en mi caso me salia cuando llamaba la propiedad imageURL, tu cambialo por la propiedad que deseas, espero haberte ayudado :)
@@brandovidaldeza6840 Graciasssssss me sirvio tu respuesta!!
@@brandovidaldeza6840 gran paro mi estimado!
Oye fast, en git tienes el codigo de finterest, no de la galería.
hola que tal, para hacer este ejercicio con typescript es necesario cambiar mnucho el codigo?
Hola Fazt, una pregunta como podría hacer la subida con un front hecho con Angular 7?
Muchas gracias por compartir este proyecto, está genal Fazt, con respecto a esto tengo una duda y es precisamente si en caso de utilizar mlab o mongodb atlas para hostear mongodb la conexión a través de mongoose ya se encuentra está encriptada, o hay que realizar alguna configuración adicional en mongoose para garantizar una conexión segura a la db ?. Muchas gracias de nuevo. CP
una segunda parte fazt 😎😎
👍🏼
¿Como editarias la imagen? Help me.
Hola Fazt, podrías indicarme que distro estás usando?
Can you help me add multiple images ?Tks
Ya no hay que poner el v2 por si les da un error 1:30:30
Seria una excelente idea realizar un proyecto utilizando LARAVEL o IONIC 👨🏻💻
Hola fazt, me gustaría saber si se puede configurar las carpeta partials de la misma manera con webpack y como podria hacerlo ? muchas gracias espero tu respuesta
una pregunta Fazt estoy desarrollando una app una red social para entrenadores similar a TikTok y queria tu consejo que servicio me recomiendas en este caso para subir estoy utilizando nodejs ya que seran muchos videos bueno saludos espero tu respuesta
me salvaste!
oye bro puedes hablar sobre q paso con mongo db y aws
hace el de amazon s3
¿Qué tan eficiente es Amazon S3 - AWS?
Pues todo el mundo habla que aws s3 es una de la mejores opciones para el almacenamiento. Creo que sería bueno aprender cómo se suben los archivos a aws s3
Es necesario instalar algo para el archivo .env? No me crea la variable...
Excelente video, pero tengo una duda, si tengo mi app en heroku y no puedo subir archivos a la plataforma, se puede subir directamente la imagen enviada sin tener que guardarla en el servidor primero?
Alguien sabe cuánto espacio da la capa gratuita?
Saben si hay algo similar a cloudinary, pero que tambien acepte archivos de otros formatos???
me recomendas subir a cloudinary en vez de mongo?
He notado que en todos los cursos relacionados con imágenes y NodeJs que haz impartido, nunca las editas. Será algo complicado de hacerlo? Lo pregunto porque he buscado guía en tus excelentes cursos.
Sería bueno con Vue, Mongo, Node y Amazon S3
Una pregunta, si hago un crud con electron y node, al compilarlo, el usuario puede modificar el código? Sí es así, hay alguna manera de impedirlo?
Saben como puedo subir videos a Cloudinary??? AYUDA :(
Cuál es la distro de Linux que usas en el vídeo? :/
Fazzzttt, como puedo entrar desde otras pc en la misma red o a través de Internet a mi servidor
Holaa! Algun alma solidaria podría responderme, cuando llego al minuto 57:35 y hago la ruta como la hace fazt, '/images/add' me lanza el siguiente error:
Error: Failed to lookup view "image_form" in views directory
Tiene que colocar las carpetas images e image_form en la carpeta views y no en partials.
@@OXGAMES_Z Muchas gracias por tu respuesta OXGAMES, voy a probarlo!
Excelente tutorial FAZT..
Me puedes decir como hago un UPDATE a la PHOTO en CLOUDINARY?
Gracias.
Actualmente estoy eliminado la phota de cloudinary y guardo la actualizada nuevamente.
Es que la foto es lo principal en la app, no hay que actualizarla, en todo la descripción y el título pero eso está en mongodb
@@xavimc95 Y como se haría¿?
Lo q no me.gusta de handlebars es la condición.if para comparar valores. No logre hacerlo
La razon de que sea dificil, es por el enfoque de handlebars de dejar la interfaz lo mas limpia de código, eso quiere decir que tienes que utilizar un helper para realizar una condicional, que no es más que una funcion. Estos días estaré publicando justo un curso de Handlebars :)
@@FaztTech espectacular. Como siempre
Cloudinary es peor que Amazon S3?
Y sobre Amazon, se puede contratar un servicio solo para guardar imágenes, o es un combo de hosting de la web e imágenes?
Me gustaría que hagas un vídeo explicando todo esto Amazon, Google cloud, digital ocean etc
Gracias
El link que adjuntas en la descripción al código del curso es erróneo. Reemplázalo por éste, y un saludo!
github.com/FaztWeb/nodejs_cloudinary_photo_gallery
Hola fazt! tengo un problema, cuando ejecuto cualquier comando en el terminal me sale esto: "no se reconoce como un comando interno o externo, programa o archivo por lotes ejecutable"- Por favor necesito solucionarlo para seguir.
Ese "error" es tipico cuando no tienes los programas instalados, recuerda que tienes que tener Nodejs y Mongodb instalado y los comandos son distintos en cada Sistema operativo, te recomiendo ver los videos de la descripción de cada tema para que te puedas enterar que tema te falta entender. Un Saludo y mucha suerte :)
@@FaztTech Muchas gracias Fazt :D eres el mejor, sigue así
La verdad me volvi infeliz intentando hacer funcionar bootstrap con jquery, no funciona y no hay manera de que funcione, hasta jquery ya no existe mas, por lo menos de su pagina oficial ya esta caida totalmente