2) Crea el back-end de tu tienda online usando NodeJs y Express. | UtilAPIs
ฝัง
- เผยแพร่เมื่อ 19 ก.ย. 2024
- En esta serie de videos te muestro cómo desarrollar una tienda online desde cero.
- Usamos HTML, CSS, Javascript, y Node.
- Conectamos con Google Sheets.
- Conectamos con medios de pago. (Mercado Pago y Stripe)
1 - Maqueta tu tienda online usando HTML, CSS y Javascript. | UtilAPIs
- Video: • 1) Maqueta tu tienda o...
- Código: github.com/uti...
2 - Crea el back-end de tu tienda online usando NodeJs y Express. | UtilAPIs
- Video: • 2) Crea el back-end de...
- Código: github.com/uti...
3 - Agrega control de stock a tu tienda online usando NodeJs y Express. | UtilAPIs
- Video: • 3) Agrega control de s...
- Código: github.com/uti...
4 - Agrega una base de datos a tu tienda online usando Google Sheet. | UtilAPIs
- Video: • 4) Agrega una base de ...
- Código: github.com/uti...
5 - Hostea tu tienda online usando Heroku. | UtilAPIs
- Video: • 4) Agrega una base de ...
- Código: github.com/uti...
6 - Agrega un método de pagos a tu tienda online usando Mercado Pago. | UtilAPIs
- Video: • 6) Agrega un método de...
- Código: github.com/uti...
6.1 - Agrega un método de pagos a tu tienda online usando Stripe. | UtilAPIs
- Video: • 6.1) Agrega un método ...
- Código: github.com/uti...
7 - Muestra la orden de compras de tu tienda online usando HTML, CSS y Javascript. | UtilAPIs
- Video: • 7) Muestra la orden de...
- Código: github.com/uti...
8 - Muestra el formulario de envío de tu tienda online usando HTML, CSS y Javascript. | UtilAPIs
- Video: • 8) Muestra el formular...
- Código: github.com/uti...
9 - Guarda la orden de compras de tu tienda online usando Google Sheet. | UtilAPIs
- Video: • 9) Guarda la orden de ...
- Código: github.com/uti...
10 - Muestra diferentes categorías de productos en tu tienda online usando HTML, CSS y Javascript. | UtilAPIs
- Video: • 10) Muestra diferentes...
- Código: github.com/uti...
Un genio explicando mejor que platzi y fast y encima mejores proyecto. Exitos sigue asi
Gracias!
Abrazo.
sos un crack de verdad te digo, hasta ahora venia peleando con mi aprendizaje de express y node. Vos me hiciste entenderlo mucho mejor que otras reconocidas paginas las cuales pagué jajaj, te mereces todo loco
Gracias Marky, abrazo grande.
La verdad sos un crack! Mas que nada porque le respondes a todos los que comentan con dudas y eso dice mucho de vos, gracias!
Gracias Valentin! Abrazo grande.
La verdad es que sos lo mejor que hay por youtube, si seguís así vas a ser de los grandes. En el minuto 14:04 se llama (`) acento grave ;).
Gracias AlGusto, para la proxima que lo use me voy a acordar que se llama acento grave!
Si sabes de alguien que le pueda llegar a interesar los videos compartile mi canal. :D
Según PHP se llama comillas invertidas
Amigo que manera de explicar muy clean, que locura!! Ojala hagas cursos porque la vas a romper!
Gracias! Te mando un abrazo grande!
Sigo cada video paso a paso porque son es una joya, increíble tu contenido, te lo agradezco.
Gracias! Abrazo. :D
@@utilapis Disculpe profe, estoy trabado en el video 3 minuto 7 si me podria dar una mano en el discord se lo agradecería, ahí postee el problema, saludos :D
Agradecido con el de arriba por encontrar este canal
Gracias Jonathan!
Excelente forma de explicar, muy sencilla. Muchas gracias
Gracias a vos, si sabes de alquien que le pueda llegar a interesar este canal for favor compartilo.
Abrazo!
Cómo es que este crack tiene tan pocos subs?? no entiendo :s, gracias, me sirvió un monton!!
Gracias Sebastián! Abrazo grande.
buenisimoo, super infravalorado tu canal loco, gracias!
Gracias a vos! Abrazo
Muy buen contenido en este canal
felicitaciones
Gracias Jorge! Abrazo.
Es solo cuestion de tiempo para que este sea crack
Gracias!
Vi la primera parte y dije: "mm bastante básico al parecer" y desde el segundo ya se pone muy interesante. Al primero te falto hacer una explicación corta de los temas que ibas a tocar. Ahora estoy con la facu, pero en estos días pongo en práctica lo que veo de tus videos.
Gracias por tu sugerencia Hemmanuel, trato de ir mejorando video a video.
Abrazo!
@@utilapis son muy buenos y entretenidos para aprender. Seguí así, miro atentamente 👀
Buenardo, clave empezar a usar node
Node es muy sencillo para desarrollar este tipo de proyectos. Abrazo!
Buen video la verdad, excelente entendí todo
Gracias!!!
Que genio! Muy bueno !
Gracias!
Que crack Muy bueno
Gracias Maycol!
Muy buen video :)
Gracias Iera!
cuando se crean las características para cada elemento el id debe ser solo numero o puede ser el valor que uno quiera por ejemplo si lo quiero dividir por categorías id: "pesa1", id: "pesa2"
o siempre tiene que ser numerico
Hola Kevin, podes usar el valor que quieras, pero yo no usaría el ID para definir la categoría. La categoría debería ser otra propiedad como el precio o el stock. Entonces todos los que son pesa pueden tener categoria: "pesa".
@@utilapis muchísimas gracias crack
6:11 profe como freno la terminal y vuelve a abrir de nuevo?
En vez de borrar y abrir un nuevo terminal
Hola Juan, con Ctrl + C frenas el servidor. Pero a veces no funciona y hay que cerrar la terminal y volverla a abrir.
Abrazo!
@@utilapis muchas gracias;
la flechita esa para atrás que no te acordás como se llama, se llama backtick o tambien backquote 😉
Gracias Martin, abrazo.
Excelentes videos, tengo un problema yo le había hecho un footer a la pagina pero ahora cuando carga los productos desaparece el footer que tengo que hacer?
Hola Esteban, lo mas seguro es que cuando se cargan los productos se reemplaza el contenido de la pagina.
Fijate que tu tag de HTML para el footer este afuera del tag "page-content" porque ese se reemplaza.
Si no te funciona unite al discord y pegame el codigo ahi que lo miro. Abrazo.
discord.com/invite/kjYye7FTpW
cuando intento utilizar el comando "npm init" me dice El término 'npm' no se reconoce como nombre de un cmdlet, función, archivo de script o programa ejecutable. Compruebe si escribió correctamente el nombre o, si incluyó
una ruta de acceso, compruebe que dicha ruta es correcta e inténtelo de nuevo
Tenés que instalar node.
Amigo tengo una duda,
Con nodejs, Javascript y mysql se puede hacer un sistema de asistencia o diferentes tipos de sistemas??
Ya que ando buscado tutoriales por todas partes y no encuentro ninguno:(
Si, claro que se puede.
como frenas el servidor desde la terminar del visual estudio, a mi se me bloque me toca cerrar y volver abrir.
Usas Ctrl + x, pero a veces se traba y tenes que cerrar y volver a abrir.
Bro y la siguiente parte para que envias todos los productos a la api cuando la subiras ?
Está subida. Busca el vídeo número 3. Está en la descripción del vídeo. Abrazo!
Mi gran amigo yo cuando le doy node index.js me da el host pero de ahí ya no me dejs escribir nada
Una vez que corres: npm run start
La consola que estas usando queda bloqueada corriendo el servidor.
Para frenar el backed podes apretar ctrl+c.
muchas gracias buen video, pero si en los productos los separo por categorias al momento de generarlos con js como van a ir separados por categorias los pongo en un if y dependiendo la categoria lo dirige a la categoria que debe agregar, tienes alguna red social ???
Unite al canal de discord y pone tus preguntas ahi, es mas facil para compartir codigo.
discord.com/invite/kjYye7FTpW
Hola, como hiciste para frenar la ejecución en el minuto 6:18?
Hola Nico, usando Ctrl + X. En Mac es Ctrl + Z.
Abrazo.
No me puedo abrir el terminal de NodeJs solo me abre windows powershell que hago?
Hola Carlos, unite al canal de discord y vemos el problema, podred configurar la consola predeterminada dependiendo del archivo que tenés abierto. discord.com/invite/kjYye7FTpW
para que sirve ejecutar desde el backend y no desde html?
La respuesta a esta pregunta es dificil de explicar en un comentario y la vas a ecnontrar en los siguientes videos. Basicamente el HTML es lo que vos ves en tu compu, pero con eso no te comunicas con la tienda que vende los productos. Necesitas alguna forma de decirle al dueño de la tienda lo que estas comprando y necesitas pagarle. Toda esa comunicacion se hace a través el backend. Abrazo
cuando inicio node index.js, no me slae el link del host me sale esto "Example app listening on port 3000" nose como corregirlo. Cual es el error?
Te da ese mensaje en la consola? Eso está bien. Y que pasa si vas al navegador a localhost:3000? Debería funcionar.
@@utilapis gracias. Yo tuve el mismo inconveniente
Como puedo abrir la consola si uso el sublime text ?
Hola, la verdad que no tengo idea. No uso sublime text. Creo que tenes que instalar algo aparte. La verdad que te recomiendo vs code.
Nuevo sub
Gracias Hash!
Hola tengo un problema :c es que mi tienda, no esta en el index html, y por eso no me funciona :c que se puede hacer
Hola, unite al canal de Discord y pone el problema que tenés ahí. Abrazo.
Esta es la url del canal de discord: discord.com/invite/kjYye7FTpW
que hay bro me da problema con el window onload me dice que no esta definido
window.onload = async() => {
^
ReferenceError: window is not defined
Hola, windows es una variable que está definida en el navegador. Si estás tratando de correr el código del Front End en el server Node no te va a funcionar.
Hola! utilapis. Tengo nuevamente un error ;( , y es que cuando voy a iniciar mi app ("/api/products") todo bien pero cuando lo abro estaticamente es decir app.use("/", express.static("fe"));
me sale este error Cannot GET /. Gracias y disculpa tanto comentarios tengo 13 años y vengo empezando con js..
Hola Emmanuel, tenés el código en algún lado donde lo pueda ver?
app.use("/", express.static("fe")); tiene que estar mas abajo que app.get("/api/products"...
El órden importa.
Compara tu código con el mio: github.com/utilapis/webstore/blob/feature/02-CreaElBackEndDeTuTiendaOnline/index.js
Avisame si lo podes hacer andar, abrazo!
@utilapis Hola!. Gracias por responder ya revise pero sigue igual este es mi codigo.
const express = require("express");
const app = express();
const port = 3000;
const products = [
{
id: 1,
name: "Converse Off-White",
price: 110,
image: "Photoslider/page1.jpg",
stock: 50
},
{
id: 2,
name: "Adidas SuperStar",
price: 110,
image: "Photoslider/page2.jpg",
stock: 50
},
{
id: 3,
name: "Nike Dunk High",
price: 110,
image: "Photoslider/page3.jpg",
stock: 50
},
{
id: 4,
name: "Vans Bob Esponja Old Skool",
price: 110,
image: "Photoslider/page4.jpg",
stock: 50
},
{
id: 5,
name: "Nike Sportswear",
price: 110,
image: "Photoslider/page5.jpg",
stock: 50
},
{
id: 6,
name: "New Balance Retro",
price: 110,
image: "Photoslider/page6.jpg",
stock: 50
},
];
app.get("/api/products", (req, res) => {
res.send(products);
});
app.use("/", express.static("fe"));
app.listen(port, () => {
console.log(`Example app listening at localhost:${port}`);
Al final del código que me pasaste, te falta cerrar con });
Asi:
app.listen(port, () => {
console.log(`Example app listening at localhost:${port}`);
});
Si haces eso deberia andar, tenes algun error?
Tenes una carpeta que se llama "fe" Y adentro de esa carpeta tenes un archivo index.html
Y cuando vas al localhost:3000/index.html no te muestra nada?
@@utilapis Lo hice pero sigue igual 😓😞😰
Probá de cambiar esta linea:
app.use("/", express.static("fe"));
Con esta otra:
app.use(express.static("fe"));
Si eso no funciona probá cambiando por esta otra:
app.use(express.static(__dirname + '/fe'));
Acabo de crear un server de discord, si te queres unir podemos seguir la conversacion ahí: discord.gg/kjYye7FTpW
Abrazo!
Hola! No consigo que la app me corra bien. Una vez hecho todos los pasos del video me sale este error : "Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
at displayProducts (scripts.js:27)
at window.onload (scripts.js:33)"
Y me lo marca en la linea 27 del archivo scrip.js que es: "document.getElementById('page-content').innerHTML = productsHTML;"
Podrías ayudarme.
GRACIAS!
Hola Jefry,
El error es bastante claro, document.getElementById('page-content') retorna null.
Eso es porque seguramente te falta modificar el index.html .
Asegurate que sea id="page-content".
Abrazo.
intento poner el npm run star pero no sale la linea del proyecto
Hola Gerardo,
El comando es npm run start. Con t al final.
Miraste todo el video? Te saltaste la parte donde ponemos el comando en el archivo packages.json?
Hola! utilapis.. Una pregunta como puedo abrir el terminal que tienes en vscode?
Hola Emmanuel, mira este video: th-cam.com/video/TiEFCMuO8wg/w-d-xo.html
Ahi explico como usar el visual studio code, en el minuto 3:35 explico como abrir la terminal.
Abrazo.
@@utilapis Muchas gracias.
me sale esto: ƒ json() { [native code] }
Unite al canal de Discord, y compartí tu problema y código ahí. Abrazo
yo solo veo que escribe y escribe pero no entiendo
Hola Gabriel, si estás recién empezando a programar tengo otra serie de videos que explican cómo arrancar. Quizás está serie presupone que tenés algunos conceptos básicos de programación.
Si estás trabado en alguna parte en particular avísame.
Abrazo.
Tenes algun video en que enseñes a aplicar a este tipo de paginas un crud por asi decirlo en el que el cliente que no sabe de programacion luego pueda agregar o sacar productos de su pagina desde ahi sin interactuar con el codigo ?
Hola Franco, si seguis mirando la lista de videos, vas a ver que podes cargar los productos usando google sheets. Tenes otra lista en la cual hacemos un CRUD pero no la termine, esta aca: th-cam.com/play/PLvzG1-HX2hyEvLjfeHoQRr-aEWOw4FQCp.html
Hola, quisiera cotizar contigo cuanto puedes cobrar por enseñarme a hacer e implementar este carrito de compras th-cam.com/video/BBNsYRuDJ3c/w-d-xo.html es para mi web sites en google pero me tiene estancada el no tener ningún tipo de conocimiento en programación si al menos la persona hubiera facilitado los archivos hubiera yo intentado adaptarlo modificando el sheets pero no facilito nada
Hola Yovelys, nunca use google sites. Cuál es tu razón para usar google sites? Quizas puedo hacer un video en la serie "aprendamos juntos" y vemos como hacerlo.
Hola! Son geniales tus videos, me han servido de mucha ayuda para aprender!!
Quería saber si podías ayudarme en un problema al intentar iniciar la app, no presenta / * app listening at "localhost:3000" * / lo cual me lo hace imposible de ejecutar.
Probé muchas opciones en internet y ninguna dio resultado.. quizá tenga que manualmente abrir los puertos. No sé si tener IP fija tenga que ver.
Mil gracias!! =)
Hola Elooz, muchas gracias!
Explicame un poco mas el error, que es lo que te esta pasando?
Haces: npm run start
Y no pasa nada?
Fijate que tengas bien configurado el archivo package.json.
Proba haciendo: node index.js
Y decime si eso anda.
Abrazo!
@@utilapis Gracias x responder y el aguante!
Mí solución momentánea fue matar el firewall de Windows, ahí pude ejecutar la app, pero luego tuve que cambiar el puerto al 4000. Se ve que otra aplicación o algo está hosteada y ocupando el puerto. Ya veré cómo solucionarlo sin tener que desactivar el firewall.
Mil gracias de nuevo y seguí con el gran contenido! 🤗
Buenísimo Elooz, gracias por explicar cómo lo solucionaste. Quizá le sirva a alguien más.
Abrazo!
Cuando intento correr el archivo con node index.js no me corre, que puedo hacer
Hola Pedro, que error te da?
Si querés unite al Discord y comparti una captura de pantalla ahí así te podemos ayudar.
@@utilapis Cual es el discord
como instalo eso de node, npm?
Lo instalas desde la pagina de NodeJs nodejs.org/en/