Qu es Tailwind CSS?

Tailwind CSS es un framework basado en clases utilitarias. Esto significa que, en lugar de darte componentes ya armados (como botones o cards), te ofrece una serie de clases, tambin llamadas utilities que pods combinar para construir tu diseo desde cero.

Pensalo as: si Bootstrap te da una casa ya construida, Tailwind te da los ladrillos, la madera y las herramientas para que vos la armes como quieras. Esta filosofa lo convierte en una herramienta mucho ms flexible y personalizable.

Tailwind vs Bootstrap: Diferencias clave

Con Bootstrap, si quers una card, lo ms comn es ir a la documentacin, copiar el cdigo HTML de una card ya armada, y pegarlo en tu sitio. Eso funciona, pero ests importando toda la librera de Bootstrap, aunque solo uses una parte.

Con Tailwind, en cambio, no copis componentes prefabricados. Vos cres tus propios componentes usando clases como bg-white, shadow-md, p-4, etc. Cada clase hace una cosa especfica, y las combins segn tus necesidades.

Esto te da:

• Ms control sobre el diseo

• Menos dependencias

• Mejor rendimiento

El superpoder de Tailwind: su compilador JIT

Una de las caractersticas ms poderosas de Tailwind es su compilador JIT (Just-In-Time).

Este compilador analiza tu cdigo y genera nicamente el CSS necesario para las clases que ests usando. Nada ms.

Qu significa esto?

• Tu archivo CSS final es sper liviano

• No se carga todo el framework, solo lo que uss

• Incluso tus clases personalizadas se procesan sin problema

Por ejemplo, si tens un h1 dentro de un contenedor y le aplics clases como m-5, text-2xl, font-bold, el compilador solo va a generar esas clases en el CSS final. As de eficiente.

Ventajas principales de usar Tailwind

• Flexibilidad total para crear tu propio diseo

• Carga ms rpida gracias a un CSS optimizado

• Estilo consistente sin escribir CSS desde cero

• Escalable para proyectos chicos o grandes

Conclusin

Tailwind no es solo un conjunto de clases utilitarias: es una nueva forma de pensar el diseo web.
Te da control, velocidad y eficiencia. Y su compilador JIT es la clave para mantener tu proyecto liviano y gil.

Muchas gracias y saludos!

Qu bueno que exista Supabase! Es genial para usar como backend en nuestros proyectos web y hacer que todo sea un poco ms fcil.

En este artculo te voy a mostrar, paso a paso, cmo crear una aplicacin en React que sirve como ejemplo para hacer todo lo necesario con una base de datos de Supabase: cargar datos, mostrarlos en nuestro sitio web, actualizarlos, eliminarlos y todo eso.

Para eso, vamos a crear una app simple que permite listar videos de youtube mediante un link a una web. Los videos se podrn marcar como vistos o no vistos (actualizar), borrarlos y todo lo necesario para aprender a usar Supabase.

Es un proceso simple y, en poco tiempo, vas a saber cmo utilizar Supabase en tu proyecto.

Vamos con el paso a paso!

Primer paso: Crear una cuenta en Supabase

Vamos entonces al sitio de Supabase y crear una cuenta si es que an no lo hiciste, es gratis hacerlo y no necesitas poner datos de una tarjeta de crdito. El proceso de crear una cuenta es rpido y simple.

Ya esta lista tu cuenta? Perfecto, seguimos con el segundo paso.

Segundo paso: Crear un proyecto en Supabase

Cuando creas tu cuenta en Supabase, lo primero que hay que hacer es crear una organizacin. Dentro de esa organizacin, hay que crear un proyecto.

En mi caso, la organizacin se llama ondecode y el proyecto lo nombr video manager.

Despus, Supabase te va a pedir que configures una contrasea segura. Esta clave es la que protege el acceso a la base de datos, as que tiene sentido usar el botn "Generate a password" que te ofrece la plataforma. As nos aseguramos de tener una contrasea fuerte y segura.

Por ltimo, hay elegir una regin. Lo ideal es seleccionar la que est ms cerca del pas en el que te encontrs, para optimizar el rendimiento.

Ahora s, hay que hacer clic en "Create Project".

Una vez creado el proyecto, deberas poder ver dentro del Project overview las configuraciones generales, algo como esto 👇

Tercer paso: Cmo Configurar Supabase en un proyecto React

Vamos ahora a crear el proyecto de react utilizando vite.

Para ello en tu terminal ejecuta el siguiente comando.

npm create vite@latest

Ahora vamos a ir respondiendo las preguntas para configurar el nombre, el package, el framework y la variante o lenguaje.

npm create vite@latest

  Project name:
   REACT-SUPABASE

  Package name:
   package.json

  Select a framework:
   React

  Select a variant:
   JavaScript

Como lenguaje opte por JavaScript, para no dejar afuera a quienes no se sienten cmodos con TypeScript.

Luego:

  Scaffolding project in .../Desktop/REACT-SUPABASE...
  Done. Now run:

cd REACT-SUPABASE
npm install

Una ves ejecutado el comando npm install ya tenemos el proyecto de React creado con sus dependencias instaladas.

Pero Supabase no viene incluido por defecto, as que necesitamos instalarlo manualmente con el siguiente comando:

npm install @supabase/supabase-js

Para conectar nuestra app con Supabase, agregu dos archivos al proyecto:

• supabase.js donde vamos a inicializar el cliente de Supabase

• .env donde guardamos de forma segura nuestras claves de acceso

As se ve la estructura bsica del proyecto: 👇

Empecemos por el primer archivo: .env.

En este archivo vamos a guardar las claves de nuestro proyecto de Supabase, como SUPABASE_URL y SUPABASE_KEY.

Estas son las variables de entorno necesarias para conectar tu app con el backend de Supabase de forma segura.

La SUPABASE_URL la pods encontrar en la seccin Project Overview, justo despus de crear tu proyecto. Est identificada como PROJECT URL, hay que copiarla y pegarla en el archivo .env.

En caso de que ya no aparezca dentro de Project Overview la vas a poder encontrar en Project Settings en la opcin data API.

Archivo .env

VITE_SUPABASE_URL=https://dgmtpjufuhzjznaid.supabase.co

Ahora nos queda ir a buscar la SUPABASE_KEY. Para eso, vamos a Project Settings y, dentro de esa seccin, entramos a API Keys.

Presiona "Reveal" para ver la Secret Key, y copiala en el archivo .env, justo debajo de la variable SUPABASE_URL.

Archivo .env 👇

VITE_SUPABASE_URL=https://dgmtpjufuhzwjhzznaid.supabase.co
VITE_SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.epc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRnbXRwanVmdWh6d2poenpuYWlkIiwicm9sZSI6InNlcnZpY2Vfcm9sImlhdCITkxMCwihwIjoyMDY1ODI1OTEwfQ.wZl7L-BPJ6lD_A0dT0Ra2FKs78

Como estoy usando Vite, a las variables de entorno les agrego el prefijo VITE_.

Por supuesto, estas claves deben mantenerse seguras y privadas. Justamente por eso las colocamos en el archivo .env, que no debera compartirse ni subirse a ningn repositorio pblico.

En mi caso, las muestro nicamente porque se trata de un proyecto de prueba creado especficamente para este artculo, y que va a ser eliminado antes de ser publicado.

Ahora vamos a crear el archivo supabase.js usando las claves que guardamos en el archivo .env.

archivo supabase.js👇

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseKey = import.meta.env.VITE_SUPABASE_KEY

const supabase = createClient(supabaseUrl,supabaseKey)

export default supabase

Este archivo se encarga de importar e inicializar el cliente de Supabase.

Una vez hecho esto, ya tendremos Supabase listo para usar en cualquier parte de nuestro proyecto React.

Con esto, nuestro proyecto React con Supabase est configurado y listo para seguir avanzando.

Cuarto paso: Cmo crear base de datos en Supabase

Para crear una base de datos en Supabase, vamos al Table Editor dentro de nuestro proyecto. All podremos crear nuestras tablas de forma visual y sencilla. 👇

Dentro de Table editor nos vamos a la opcin Create a Table y dentro de ella asignamos un nombre y una descripcin.

Sin cerrar esa ventana, bajamos un poco y comenzamos a agregar las columnas que formarn nuestra base de datos.

Por defecto ya vienen creadas dos columnas: id y created_at Esto es comn en bases de datos SQL. En el caso de Supabase se utiliza PostgreSQL

Sumemos entonces dos columnas ms a nuestra tabla:

• videoLink con Type: Text

• isFinished con Type: Boolean

Estas columnas nos van a servir, por ejemplo, para guardar el enlace de un video (que luego se mostrar como un reproductor en el sitio web) y para saber si el video ya ha sido visto o no.

Importante: en el caso de la columna videoLink, entramos a sus Settings (clic en el cono de la tuerca a la derecha) y desactivamos la opcin que asigna un valor tipo Null por defecto cuando no se especifica ninguno.

Esto lo hacemos porque queremos asegurarnos de que, si no se carga un enlace de video, el campo quede vaco y no se muestre ningn reproductor por error en el sitio web.

Listo! Solo queda hacer clic en la opcin Save, y ya tenemos nuestra base de datos creada y lista para usar.

Nuestro Table Editor ahora se ve as 👇

Quinto paso: Cmo Usar la base de datos de Supabase desde React

Levantamos primero nuestro proyecto de React con el siguiente comando:

npm run dev

Una vez que confirmamos que el proyecto se est ejecutando correctamente en http://localhost:5173, vamos a limpiar el archivo App.jsx. Para comenzar a construir nuestra aplicacin desde cero e interactuar directamente con la base de datos que creamos en Supabase.

Comencemos armando la estructura 👇

Archivo App.jsx

import supabase from "./supabase"
import './App.css'

import { useState } from "react"

function App() {
  const [videoRequest, setVideoRequest] = useState('')
  const [videoList, setVideoList] = useState([])

  return (
    <div>
      <h1>VIDEO MANAGER</h1>
      <input
        type="text"
        placeholder="video url"
        value={videoRequest}
        onChange={(e) => setVideoRequest(e.target.value)}
      />
      <button>AGREGAR</button>
    </div>
  )
}

export default App

Primero importamos Supabase e importamos un poco de CSS para darle algo de estilo. Adems, definimos dos estados (hooks) que nos van a servir para gestionar los videos:

• videoRequest: guarda lo que el usuario escribe (la URL del video).

• videoList: almacenar la lista de videos agregados, que vamos a ir cargando desde Supabase ms adelante.

Te muestro tambin unos mnimos estilos que deje en App.css 👇

/* CSS correspondiente a todos los elementos usados en el JSX del proyecto */
body {
text-align: center;
}

input {
  padding: 0.6em 1em;
  margin-right: 0.5em;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  width: 60%;
  max-width: 400px;
}

button {
  padding: 0.6em 1em;
  font-size: 1rem;
  background-color: #646cff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;

}

button:hover {
  background-color: #4b5cd4;
}

/* Lista de videos */
ul.video-list li {
  padding: 1rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 45rem; 
  margin: 0 auto;
}

ul.video-list li button {
  margin: 0.3rem 0.2rem;
  max-width: 40rem;
  font-weight: bold;
  padding: 1rem;
}


iframe {
  border-radius: 12px;
  margin-bottom: 1rem;
  width: 40rem;
  height: 20rem;
  max-width: 100%;
}


ul.video-list li button {
  margin: 0.3rem 0.2rem;
  font-size: 0.9rem;
  width: 90%;
}


h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

Ahora si, llego el momento! Vamos a crear la funcin addVideo(), que es el corazn de esta app. Con esta funcin vamos a insertar un nuevo dato (la URL del video) en nuestra base de datos en Supabase y luego mostrar ese video directamente en nuestro sitio web.

import supabase from "./supabase"
import './App.css'

import { useState } from "react"

function App() {
  const [videoRequest, setVideoRequest] = useState('')
  const [videoList, setVideoList] = useState([])

  //1. Creamos un nuevo objeto con los datos que queremos insertar en la tabla
  const addVideo = async () => {
    const newVideo = {
      videoLink: videoRequest, // La URL del video que viene del input
      isFinished: false        // Un campo extra para marcar estado
    }

    //2. Usamos supabase para insertar el nuevo video en la tabla 'Videos'
    const { data, error } = await supabase
      .from('Videos') // accede a la tabla 'Videos' en la base de datos
      .insert([newVideo]) // inserta un nuevo registro (objeto) en la tabla
      .select() // despus de insertar el nuevo registro, queremos que nos devuelva los datos del registro insertado.
      .single() // espera solo un nico resultado (no un array), y lo devuelve como objeto

    console.log(newVideo)
    console.log(data)

    //3. manejo de errores y se agrega nuevo dato al estado local
    if (error) {
      console.log('error al agregar video', error) // Logueamos el error si algo sali mal
    } else {
      setVideoList([data, ...videoList]) // Agregamos el nuevo video al estado local
    }

    setVideoRequest('') // Limpiamos el input
  }
  return (
    <div>
      <h1>VIDEO MANAGER</h1>
      <input
        type="text"
        placeholder="video url"
        value={videoRequest}
        onChange={(e) => setVideoRequest(e.target.value)}
      />
      <button onClick={addVideo}>AGREGAR</button>
    </div>
  )
}

export default App

Estudiemos un poco esta funcin addVideo()

1. Creamos un nuevo objeto con los datos que queremos insertar en la tabla

Las claves videoLink e isFinished son los nombres que usamos en nuestro objeto, y coinciden exactamente con los campos que definimos en la tabla Videos de Supabase. De esta forma todo va a ser mas claro y ordenado.

2. Usamos Supabase para insertar el nuevo video en la tabla Videos

De forma asncrona, utilizamos los mtodos que Supabase nos provee para insertar el nuevo video en la base de datos, y luego le pedimos que nos devuelva el registro insertado para mostrarlo en nuestro sitio.

from('Videos')           // Accedemos a la tabla 'Videos' en la base de datos  
  .insert([newVideo])    // Insertamos un nuevo registro (objeto) en la tabla  
  .select()              // Queremos que nos devuelva los datos del registro insertado  
  .single()              // Esperamos solo un nico resultado (no un array), y lo recibimos como objeto

3. Manejo de errores y actualizacin del estado local

Por ltimo, capturamos cualquier error que pueda ocurrir durante el proceso. Si todo sale bien, agregamos el nuevo video que recibimos de Supabase al estado local (videoList), para poder mostrarlo inmediatamente en la interfaz.

Finalmente, limpiamos el input para que quede vaco y listo para ingresar otro video.

La funcin addVideo() est asignada al botn AGREGAR. Para que todo esto suceda cuando el usuario presiona ese botn

De momento nuestro cdigo esta funcionando, si agregas un link de video en el input va a poder verlo en la base de datos de Supabase. 👇

Cuando Supabase recibe el link que le enviamos por medio del input lo guarda en la tabla y automticamente le asigna un id nico y un campo created_at con la fecha y hora de creacin. Estos dos campos vienen por defecto cuando creamos nuestra tabla en Supabase.

En nuestro caso recibimos todo esa informacin en nuestra data y la agregamos en nuestro estado local

 setVideoList([data, ...videoList]) // Agregamos el nuevo video al estado local

Esa es la diferencia entre data y newVideo:

• newVideo es simplemente la informacin local que creamos antes de enviarla a Supabase.

• data es la informacin que nos devuelve Supabase despus de guardar el video, con datos adicionales como el id generado y el campo created_at.

Por lo tanto, ahora simplemente nos queda mostrar los videos de forma correcta en nuestro sitio web.
Adems, vamos a agregar la posibilidad de actualizar su estado (isFinished) y tambin la opcin de eliminar el video.

Para eso, vamos a modificar un poco el return de nuestro componente y agregar algunos botones para interactuar con cada video. 👇

Sexto paso: Mostrar datos desde Supabase en tu aplicacin React

 return (
    <div>
      <h1>VIDEO MANAGER</h1>
        <input
          type="text"
          placeholder="video url"
          value={videoRequest}
          onChange={(e) => setVideoRequest(e.target.value)}
        />
        <button onClick={addVideo}>AGREGAR</button>


      <ul className="video-list">
        {videoList.map(video => (
          //Recorremos la lista de videos para mostrarlos

         <li key={video.id}>
           {/* iframe para mostrar el video de YouTube.
           Detecta si la URL es del tipo youtu.be o youtube.com y extrae el ID del video para incrustarlo */}
            <iframe
              src={`https://www.youtube.com/embed/${
              video.videoLink.includes('youtu.be/')
              ? video.videoLink.split('youtu.be/')[1].split('?')[0]
              : video.videoLink.split('v=')[1]?.split('&')[0]
            }`}
          ></iframe>

           {/* Botn para cambiar el estado "visto" del video */}
              <button>
               {video.isFinished ? 'VISTO' : 'MARCAR VISTO'}
              </button>
              {/* Botn para eliminar el video de la base de datos y del estado local */}
              <button>BORRAR</button>
          </li>
        ))}
      </ul>
    </div>
  )

Nota rapida sobre el iframe

Para incrustar correctamente el video de YouTube, se hace necesario manejar dos tipos de URLs que los usuarios pueden copiar: la URL directa desde el navegador (youtube.com/watch?v=...) y la que se obtiene al hacer clic en el botn "Compartir" (youtu.be/...).

Por eso usamos mtodos como .includes(), .split() y una lgica condicional sencilla para extraer el ID del video de forma limpia. As adaptamos la URL al formato que requiere la etiqueta <iframe> y evitamos errores que puedan romper nuestra web.

Por ltimo, agregamos dos botones por cada video:

• <button>{video.isFinished ? 'VISTO' : 'MARCAR VISTO'}</button>: Este botn le permitira al usuario alternar el estado isFinished del video. Segn el valor de ese estado, se mostrar el texto correspondiente.

• <button>BORRAR</button>: El boton que va a eliminar el video tanto de Supabase como del estado local.

Con esto tenemos todo listo para poder visualizar los videos. en nuestra web, solo que no aun no los estamos trayendo desde la base de datos de Supabase.

Vamos a hacerlos ahora con un simple useEffect 👇

//importar el useEffect
import { useState, useEffect } from "react"  

//utilizamos la funcion fetchvideos dentro del useEffect
useEffect(() => {
    fetchVideos()
  }, [])

//  funcion para traer los videos de suapabse a nuestra web
  const fetchVideos = async () => {
    const { data, error } = await supabase //de forma asyncrona caputramos la data(videos) o un posible error
      .from("Videos") // accede a la tabla "Videos" en Supabase
      .select("*");  // selecciona todos los registros y columnas

    if (error) {
      console.log("Error: ", error);
    } else {
      setVideoList(data);
    }
  };

La funcin fetchVideos accede con .from a la tabla "Videos" de la base de datos de Supabase, y con .select("*") trae todos los registros.
Luego, si no ocurre ningn error, esos datos se guardan en el estado videoList usando setVideoList.

Ese videoList es justamente lo que recorremos ms adelante con .map() dentro del return, para mostrar los videos en nuestra web.

Algo as se vera nuestro proyecto hasta ahora 👇

Para mayor contexto te dejo el cdigo completo tal como lo tenemos hasta ahora.

import supabase from "./supabase"
import './App.css'

import { useState, useEffect } from "react"

function App() {
  const [videoRequest, setVideoRequest] = useState('')
  const [videoList, setVideoList] = useState([])

  useEffect(() => {
    fetchVideos()
  }, [])

  const fetchVideos = async () => {
    const { data, error } = await supabase
      .from("Videos")
      .select("*");

    if (error) {
      console.log("Error: ", error);
    } else {
      setVideoList(data);
    }
  };


  const addVideo = async () => {
    const newVideo = {
      videoLink: videoRequest,
      isFinished: false
    }

    const { data, error } = await supabase
      .from('Videos') // accede a la tabla 'Videos' en la base de datos
      .insert([newVideo]) // inserta un nuevo registro (objeto) en la tabla
      .select() // despus de insertar el nuevo registro, queremos que nos devuelva los datos del registro insertado.
      .single() // espera solo un nico resultado (no un array), y lo devuelve como objeto

    console.log(newVideo)
    console.log(data)

    if (error) {
      console.log('error al agregar video', error)
    } else {
      setVideoList([data, ...videoList])
    }

    setVideoRequest('')
  }
  return (
    <div>
      <h1>VIDEO MANAGER</h1>
        <input
          type="text"
          placeholder="video url"
          value={videoRequest}
          onChange={(e) => setVideoRequest(e.target.value)}
        />
        <button onClick={addVideo}>AGREGAR</button>


      <ul className="video-list">
        //Recorremos la lista de videos para mostrarlos

        {videoList.map(video => (
          <li key={video.id}>

              //iframe para mostrar el video de YouTube.
              //Detecta si la URL es del tipo youtu.be o youtube.com y extrae el ID del video para incrustarlo
                <iframe
                  src={`https://www.youtube.com/embed/${
                  video.videoLink.includes('youtu.be/')
                  ? video.videoLink.split('youtu.be/')[1].split('?')[0]
                  : video.videoLink.split('v=')[1]?.split('&')[0]
                }`}
              ></iframe>

                //Botn para cambiar el estado "visto" del video
              <button>
                {video.isFinished ? 'VISTO' : 'MARCAR VISTO'}
              </button>

                //Botn para eliminar el video de la base de datos y del estado local
              <button>BORRAR</button>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default App

Bueno, vamos poco a poco terminando, nos quedan simplemente dos cosas ms: Actualizar el estado del video si ya fue visto (y guardar ese cambio en Supabase), y tambin la posibilidad de eliminar videos de nuestro sitio web y de Supabase.

Sptimo paso: Cmo actualizar el estado de un video en Supabase

El video ya fue marcado como visto o no? Eso es algo que le tenemos que avisar a Supabase.
As que vamos a armar la funcin justo ac abajo 👇

    //UPDATE
    const toggleDone = async (id, isFinished) => {
      const { error } = await supabase
        .from('Videos')
        .update({ isFinished: !isFinished })
        .eq('id', id);

      if (error) {
        console.error('Error actualizando video:', error);
      } else {
        setVideoList(videoList.map(v =>
          v.id === id ? { ...v, isFinished: !v.isFinished } : v
        ));
      }
    };

    //en nuestro boton aregamos la funcion

  {/* Botn para cambiar el estado "visto" del video */}
    <button onClick={() => toggleDone(video.id, video.isFinished)}>
        {video.isFinished ? 'VISTO' : 'MARCAR VISTO'}
    </button>

Con esta funcin toggleDone, lo que hacemos es avisarle a Supabase que el estado del video cambi (si fue visto o no).

Primero usamos .from('Videos') para decirle a Supabase en qu tabla queremos trabajar. En este caso, nuestra tabla se llama "Videos".

Despus viene .update({ isFinished: !isFinished }), que bsicamente invierte el valor actual del campo isFinished. Si estaba en true, lo pasa a false, y viceversa.

Con .eq('id', id) le indicamos exactamente qu fila (qu video) queremos actualizar. Es como decirle: "busc el video con este id y actualizalo".

Si todo sale bien, usamos setVideoList(...) para actualizar el estado local en React y que la interfaz tambin muestre el cambio sin necesidad de refrescar.

Por ltimo, le pasamos la funcin al botn que se encarga de actualizar el estado cuando se hace click, y le indicamos que muestre VISTO o MARCAR VISTO segn corresponda.

Bueno, lo ltimo que nos queda es eliminar entonces, ya vamos terminando.

Octavo paso: Cmo eliminar el estado de un video en Supabase

 //DELETE
  const deleteVideo = async (id) => {
    const { error } = await supabase
      .from('Videos')
      .delete()
      .eq('id', id);

    if (error) {
      console.error('Error eliminando video:', error);
    } else {
      // Solo actualiza el estado si la eliminacin fue exitosa
      setVideoList(videoList.filter(video => video.id !== id));
    }
  };

 {/* Botn para eliminar el video de la base de datos y del estado local */}
  <button onClick={() => deleteVideo(video.id)}>BORRAR</button>

Ahora vamos con la funcin para eliminar un video. Es muy parecida a la de actualizar, pero en vez de usar .update(), usamos .delete().

Con .from('Videos') le decimos a Supabase que queremos trabajar en la tabla Videos. Luego.delete() para indicarle que queremos borrar un registro de la base de datos. Y con .eq('id', id) especificamos cul video eliminar, usando su id.

Si no hay errores, actualizamos el estado local con setVideoList, pero esta vez filtrando la lista para sacar el video que borramos. As desaparece inmediatamente de la interfaz.

Para que el usuario pueda borrar un video, agregamos un botn con un onClick que llama a esta funcin y le pasa el id del video correspondiente.

Con esto entonces, ya hemos finalizado este proyecto con Supabase, quiero dejarte ahora el cdigo completo para mayor claridad 👇

import supabase from "./supabase"
import './App.css'

import { useState, useEffect } from "react"

function App() {
  const [videoRequest, setVideoRequest] = useState('')
  const [videoList, setVideoList] = useState([])

  useEffect(() => {
    fetchVideos()
  }, [])

  const fetchVideos = async () => {
    const { data, error } = await supabase
      .from("Videos")
      .select("*");

    if (error) {
      console.log("Error: ", error);
    } else {
      setVideoList(data);
    }
  };

    //AGREGAR VIDEOS
  const addVideo = async () => {
    const newVideo = {
      videoLink: videoRequest,
      isFinished: false
    }

    const { data, error } = await supabase
      .from('Videos') // accede a la tabla 'Videos' en la base de datos
      .insert([newVideo]) // inserta un nuevo registro (objeto) en la tabla
      .select() // despus de insertar el nuevo registro, queremos que nos devuelva los datos del registro insertado.
      .single() // espera solo un nico resultado (no un array), y lo devuelve como objeto

    console.log(newVideo)
    console.log(data)

    if (error) {
      console.log('error al agregar video', error)
    } else {
      setVideoList([data, ...videoList])
    }

    setVideoRequest('')
  }

    //UPDATE
    const toggleDone = async (id, isFinished) => {
      const { error } = await supabase
        .from('Videos') // Asegurate tambin de que esta tabla se llame "Videos", no "videoTest"
        .update({ isFinished: !isFinished })
        .eq('id', id);

      if (error) {
        console.error('Error actualizando video:', error);
      } else {
        setVideoList(videoList.map(v =>
          v.id === id ? { ...v, isFinished: !v.isFinished } : v
        ));
      }
    };

  //DELETE
  const deleteVideo = async (id) => {
    const { error } = await supabase
      .from('Videos')
      .delete()
      .eq('id', id);

    if (error) {
      console.error('Error eliminando video:', error);
    } else {
      // Solo actualiza el estado si la eliminacin fue exitosa
      setVideoList(videoList.filter(video => video.id !== id));
    }
  };
  return (
    <div>
      <h1>VIDEO MANAGER</h1>
        <input
          type="text"
          placeholder="video url"
          value={videoRequest}
          onChange={(e) => setVideoRequest(e.target.value)}
        />
        <button onClick={addVideo}>AGREGAR</button>


      <ul className="video-list">
        {videoList.map(video => (
          //Recorremos la lista de videos para mostrarlos

         <li key={video.id}>
           {/* iframe para mostrar el video de YouTube.
           Detecta si la URL es del tipo youtu.be o youtube.com y extrae el ID del video para incrustarlo */}
            <iframe
              src={`https://www.youtube.com/embed/${
              video.videoLink.includes('youtu.be/')
              ? video.videoLink.split('youtu.be/')[1].split('?')[0]
              : video.videoLink.split('v=')[1]?.split('&')[0]
            }`}
          ></iframe>

           {/* Botn para cambiar el estado "visto" del video */}
              <button onClick={() => toggleDone(video.id, video.isFinished)}>
                {video.isFinished ? 'VISTO' : 'MARCAR VISTO'}
              </button>
              {/* Botn para eliminar el video de la base de datos y del estado local */}
              <button onClick={() => deleteVideo(video.id)}>BORRAR</button>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default App

Muchas gracias por leerme y espero que te haya servido!

Saludos!

Pablo.

Tengo un video al respecto, si te interesa podes verlo, y si no tambin voy a ir a paso a paso en este articulo.

Vamos con el paso a paso:

1. Cmo conseguir un modelo 3d para tu web

La internet esta llena de modelos 3d para descargar de forma gratuita o de pago. Un lugar muy conocido es sketchfab

yo encontr un dragon 3D muy bueno y me lo pude descargar de forma gratuita (agradecimientos al creador del modelo en el video)

Te recomiendo descargar con el formato en formato .gltf o .glb

Si descargas .glb se te va a descargar directamente un archivo con la extensin .glb. En cambio con .gltf se te va a descargar una carpeta con varios archivos dentro, hay que descomprimirla. Si bien el importante es es el scene.gltf no elimines ningn archivo, dependen uno de otro y esta bien dejarlos dentro de la carpeta.

Una vez que tenes tu modelo 3D vamos al paso dos:

2. Cmo insertar un modelo 3D en el HTML

No existe por default una etiqueta HTML que pueda cargar elementos 3D en la web, sera un sueo, pero lo bueno es que google se encargo de solucionar esto creando una poderosa etiqueta web llamada model-viewer

Qu es model-viewer?

<model-viewer> Es un componente web que te permite incrustar modelos 3D directamente en tu HTML sin necesidad de libreras como Three.js. Es compatible con los principales navegadores modernos y soporta formatos como .glb y .gltf.

Como dice la documentacin en la pagina de model-viewer hay que importarse el script con el componente model viewer y luego de ello ya se puede usar <model-viewer> como cualquier otro elemento de HTML.

Hay que tener en cuenta que como estamos trabajando sin ningun framework, solo con un poco de HTML. Entonces tenemos que visualizar nuestro proyecto levantando un servidor, sin un servidor esto no funciona. La extension live server es mas que suficiente.

Entoces:

3. Insertar el modelo 3D en el HTML con model-viewer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<!-- Use it like any other HTML element -->
    <model-viewer
    src="shenron_dragon_ball/scene.gltf"
    alt="avatar"
    shadow-intensity="1"
    camera-controls
     >
    </model-viewer>

<!-- Import the component -->
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
</body>
</html>

El elemento <model-viewer> tiene varios atributos y propiedades que se pueden utilizar. Se pueden encontrar dentro del apartado de API REFERENCE de la documentacin.

Pero los mas elementales para agregar casi de forma obligatoria son los siguientes

src Para poner la ruta de nuestro archivo 3d, si descargaste glb sera simplemente el archivo. Si descargaste gltf entonces la ruta sera a la carpeta descargada y dentro de ella al archivo scene.gltf

Hay que tener mucho cuidado de no fallar con la ruta del archivo 😅

shadow-intensity Es quien controla la opacidad de la sombra del modelo 3d, si por ejemplo dejaras el valor en 0, debera desactivar la sombra por completo.

camara-controls Le permiten al usuario mover y controlar al modelo 3d

Pero hay muchos otros que te van a encantar si te da ganas de probarlos :) bscalos aca: API REFERENCE

Tambin al model-viewer se le pueden aplicar estilos sin problemas, a modo de ejemplo:

<style>
   model-viewer {
       width: 100vw;
       height: 100vh;
   }
</style>

Comentarios finales

Queda marcar que model-viewer es compatible con las ltimas versiones principales de todos los navegadores.

Los nicos limites estn en si lo queres utilizar en modelos de realidad aumentada especialmente con los navegadores safari y mozilla. Pero con 3D todo funciona de maravilla!

Eso es todo y muchas gracias!

Saludos, Pablo

Record que cuando hablamos de preferencia nos referimos a la info bsica del producto que quers vender: nombre, precio, cantidad y dems.

Primero en tu proyecto de next js hay que instalar el sdk de mercado pago corriendo el siguiente comando:

npm install @mercadopago/sdk-react

Una vez hecho eso te voy a mostrar los archivos que necesitas crear y cmo organizarlos dentro del sistema de rutas.

Ac hay tres archivos importantes que vamos a usar:

1. global.d.ts, donde vamos a agregar unas configuraciones mnimas para que todo funcione bien con TypeScript y mercadopago.

2. page.tsx, que es el archivo principal del frontend en Next.js donde vamos a mostrar el botn de pago.

3. route.ts, que va en la ruta api/mercadopago/route.ts y se encarga de la lgica del backend y del armado de la preferencia.

1) Archivo global.d.ts

Dentro de este archivo hay que poner esta simple linea

declare module 'mercadopago';

El archivo global.d.ts con declare module 'mercadopago'; le indica a TypeScript que existe un mdulo llamado 'mercadopago', permitiendo importar y usar esa librera sin errores de tipado.

2) Archivo page.tsx: El Frontend

Este es el archivo principal de nextjs. Lo vamos a utilizar para construir el frontend que mostrar un botn de pago de Mercado Pago, generando la preferencia de pago con los datos de nuestro producto.

El cdigo seria algo como esto 👇

'use client';

import { initMercadoPago, Wallet } from '@mercadopago/sdk-react';
import { useState } from 'react';

initMercadoPago('public_key', { locale: 'es-AR' });

export default function ClientWallet() {
  const [preferenceId, setPreferenceId] = useState<string | null>(null);

  const handleClick = async () => {
    const res = await fetch('/api/mercadopago', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        title: 'producto con next',
        price: 1000,
        quantity: 1,
      }),
    });

    const data = await res.json();
    setPreferenceId(data.id);
  };

  return (
    <div>
      <button onClick={handleClick}>Pagar</button>
      {preferenceId && <Wallet initialization={{ preferenceId }} />}
    </div>
  );
}

vamos a enternder un poco que es lo que estamos haciendo en este frontend

use client

en la primer linea con 'use client' se convierte el componente en client-side, y eso es clave porque usamos useState para manejar cundo mostrar el botn de Mercado Pago.

imports

lo siguiente es importar las cosas que necesitamos de mercado pago como el initMercadoPago, Wallet y tambien el useState de React.

Inicializacin del SDK

Llamamos a initMercadoPago con nuestra API_KEY(que hay que conseguirla desde el panel de mercadoPago) y la configuracin regional. Esto prepara todo para que el SDK funcione correctamente en nuestra app.

preferenceId

Creamos un estado con useState para guardar el id de la preferencia. Cuando enviamos la informacin de nuestro producto al backend, Mercado Pago toma esos datos y genera una preferencia de pago. A cambio, nos devuelve un id nico que representa esa preferencia.

Ese id es clave: es el que usamos cuando queremos mostrar el botn de pago con Checkout Pro, y le dice a Mercado Pago qu producto mostrar, con qu precio y cantidad.

Funcin handleClick

En este funcion hacemos un simple POST a nuestra api para enviarlos los datos de nuestro producto, para ello dentro del body de nuestro POST enviamos el title (nombre del producto), su precio y tambien su cantidad. Hay mas cosas que se podrian enviar al backend para que arme la preferencia pero estas son las cosas minimas que mercado pago necesita.

Por ultimo en la constante data guardamos la respuesta que nos devuelve el backend(el preference id de nuestor producto) y lo guardamos en nuestro estado.

Renderizado condicional del botn de pago

Si existe un preferenceId, mostramos el componente del SDK de Mercado Pago, que renderiza automticamente el botn de pago con todos los datos cargados.

Este componente es simple, pero hace todo lo necesario: conecta el frontend con el backend, y con Mercado Pago.

3. Archivo route.ts: El Backend

import { NextRequest } from 'next/server';
import { MercadoPagoConfig, Preference } from 'mercadopago';

const client = new MercadoPagoConfig({
  accessToken: 'acces_token',
});

export async function POST(request: NextRequest) {
  try {
    const body = await request.json();

    const preferenceData = {
      items: [
        {
          title: body.title,
          quantity: Number(body.quantity),
          unit_price: Number(body.price),
          currency_id: 'ARS',
        },
      ],
      back_urls: {
        success: 'https://www.youtube.com/@onthecode',
        failure: 'https://www.youtube.com/@onthecode',
        pending: 'https://www.youtube.com/@onthecode',
      },
      auto_return: 'approved',
    };

    const preference = new Preference(client);
    const result = await preference.create({ body: preferenceData });

    return new Response(JSON.stringify({ id: result.id }), {
      status: 200,
      headers: {
        'Content-Type': 'application/json',
      },
    });
  } catch (error) {
    console.error('Error al crear la preferencia:', error);
    return new Response(JSON.stringify({ error: 'Error al crear la preferencia :(' }), {
      status: 500,
      headers: {
        'Content-Type': 'application/json',
      },
    });
  }
}

Inicializacin del cliente de Mercado Pago

Usamos MercadoPagoConfig para crear una instancia del cliente, pasndole nuestro accessToken (la clave secreta que obtens desde tu cuenta de Mercado Pago). Con eso ya podemos hacer llamadas seguras al servicio desde el backend.

Funcin POST

Esta funcin se activa cuando el frontend hace una peticin a /api/mercadopago. Recibimos los datos del producto desde el cuerpo del request: ttulo, precio y cantidad.

Armado de la preferencia

Con esos datos, creamos un objeto llamado preferenceData. Ac le pasamos todo lo que necesita Mercado Pago para armar el checkout:

Los items (producto, precio, cantidad, moneda).

Las back_urls, que son las URLs adonde redirigir al usuario despus del pago (sea exitoso, fallido o pendiente).

Y auto_return: 'approved', que hace que el usuario vuelva automticamente cuando el pago se aprueba.

Creacin de la preferencia

Con new Preference(client).create(...) mandamos los datos a Mercado Pago. Si todo sale bien, nos devuelve un id, que es la preferencia de pago ya lista.

Respuesta al frontend

Devolvemos ese id al frontend en formato JSON. Con eso, el botn de pago ya sabe qu mostrar.

Manejo de errores

Si algo sale mal, lo mostramos en consola y devolvemos una respuesta con error. As evitamos que la app se rompa sin explicacin.

Con esto ya deberamos tener lista la pasarela de pago con Checkout Pro, usando los datos de nuestro producto. Al hacer clic en el botn "Pagar", se genera la preferencia y se renderiza automticamente el botn de Mercado Pago.

Al presionar ese botn, nos lleva directo al flujo de pago, donde el usuario va a ver el producto con su precio, cantidad y podr completar la compra.

Antes de cerrar, no quiero dejar de recomendarte un video que te puede ayudar mucho a configurar el ambiente de pruebas de Mercado Pago. En ese video te muestro cmo crear tu app desde el panel de desarrollador, cmo generar las credenciales necesarias (la public_key para el frontend y la access_token o secret_key para el backend), y tambin cmo crear cuentas de prueba para simular pagos.

tambin te dejo link al cdigo completo en github

Me dejarias una estrella en el repo? 😊 Repositorio en Github

Muchas Gracias

Hace poco recib este comentario en uno de mis videos de YouTube en donde muestro como ir paso a paso creando la lgica de un E-commerce con JavaScript.

Aqu el video para quien le interese:

En verdad esto me motivo a escribir este articulo para explicar la diferencia entre ambos y comentar cual es conveniente utilizar.

Qu son append y appendChild?

Append y appendChild en JavaScript son metodos para manipular el DOM (es decir: el Document Objet Model). Ambos tienen la facultad de agregar elementos al DOM pero tienen enfoques ligeramente diferentes.

El mtodo appendChid

Su tarea principal es agregar un nico nodo como hijo al final de otro nodo existente.

Para utilizarlo, primero hay que seleccionar el nodo al que deseas agregar un hijo y luego llamar a appendChild.

Un ejemplo con appendChild()

const parent = document.getElementById("parentElement");
const child = document.createElement("div");
parent.appendChild(child);

Este cdigo va a agregar elemento child al final del elemento parent.

En resumen, appendChild sirve para agregar un solo nodo como hijo al final de otro nodo.

El mtodo append

Con append, se puede agregar uno o varios nodos al final de un elemento especfico, se van a ir agregando en el orden en que en se proporcionan.

Un ejemplo con append()

const parent = document.getElementById("parentElement");
const child1 = document.createElement("div");
const child2 = document.createElement("span");
parent.append(child1, child2);

Este cdigo agrega el elemento child1 seguido por el elemento child2 al final del elemento parent.

Entonces, append es ms verstil y permite agregar mltiples nodos en una sola llamada, lo que puede simplificar la manipulacin del DOM.

Diferencias entre append y appendChild

Comencemos con la primer diferencia importante

1. appendChild() agrega un solo nodo / append(), agrega uno o varios nodos.

Ademas con append() se pueden agregar strings. Esto no es posible con appendChild() ya que este solo acepta nodos

Ejemplo:

const parent = document.getElementById("parentElement");
parent.append("soy un texto");

En este caso va a funcionar ya que append() acepta el agregar texto.

Seguimos:

const parent = document.getElementById("parentElement");
parent.appendChild("soy un texto");

En este no va a funcionar como se espera, porque el mtodo appendChild() solo acepta agregar un nodo y no permite agregar texto

Entonces segunda diferencia importante:

2. appendChild() no permite agregar texto, / append() si permite agregar texto.

Conclusin:

appendChild() agrega un solo nodo y no permite agregar texto. append() agrega uno o varios nodos y si permite agregar texto.

Cul utilizar?

En mi caso prefiero utilizar append() porque es mas moderno y es una opcin ms verstil, ya que te permite agregar mltiples nodos en una sola llamada y acepta tambin pasarle texto.

Pero si estas buscando agregar un solo nodo appendChild() es suficiente.

En mi caso, me acostumbre a utilizar siempre directamente append().

Bueno, espero que esto te haya servido y que la pasen bien!

Saludos,

Pablo.

Vamos a crear paso a paso un filtro de bsqueda con JavaScript. La intencin es compartir el cdigo con explicaciones debajo para que puedas copiarlo e ir probando el proyecto en tu propio editor de cdigo.

Antes de comenzar te dejo el video de este articulo.

No te olvides de suscribirte a mi canal, subo contenido de programacin regularmente.

1 - Armando la estructura HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="search-container">
      <input type="text" id="searchInput" placeholder="buscar pas" />
      <ul id="resultsList" class="results-list"></ul>
      <p id="noResults" class="no-results">No se encontraron resultados.</p>
    </div>
    <script src="app.js"></script>
  </body>
</html>

En el HTML tenemos nicamente un

contenedor, dentro de el colocamos un en donde el usuario va a escribir lo que desea buscar y una etiqueta <ul>, en donde luego le vamos a insertar etiquetas <li>. Armando de esta forma una lista con los resultados de la bsqueda del usuario.

Por ultimo, tenemos una etiqueta <p> a esta etiqueta la vamos a mostrar nicamente si no hay resultados que mostrarle al usuario.

Cada una de estas etiquetas tiene una clase para darle estilos y un ID para asignarle funcionalidad en un futuro con javascript.

2 - Aplicando estilos CSS

.search-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
}

.results-list {
  margin-top: 10px;
  padding-left: 0;
  list-style-type: none;
  text-align: center;
  font-size: 22px;
}

.results-list li {
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  cursor: pointer;
}

.no-results {
  font-size: 20px;
  color: #666;
  text-align: center;
  display: none;
}

Aplicamos unos simples estilos a las clases de nuestra estructura HTML para dejar el contenido ordenado, estilamos tambin las futuras etiquetas <li> que vamos a incluir con javascript con los resultados para mostrarle al usuario y una clase no-results, que en el fututo representar el estilo de un mensaje de aviso en el caso que no se encuentren resultados.

3 - Funcionalidad con Javascript

const countries = [
  { name: "Argentina" },
  { name: "Bolivia" },
  { name: "Brasil" },
  { name: "Chile" },
  { name: "Colombia" },
  { name: "Ecuandor" },
  { name: "Mexico" },
  { name: "Panama" },
  { name: "Paraguay" },
  { name: "Peru" },
  { name: "Uruguay" },
  { name: "Venezuela" },
];

const searchInput = document.getElementById("searchInput");
const resultList = document.getElementById("resultsList");
const noResults = document.getElementById("noResults");

const handleSearch = () => {
  const searchTerm = searchInput.value.toLowerCase();
  const filteredCountries = countries.filter((country) => country.name.toLowerCase().startsWith(searchTerm));

  resultList.innerHTML = "";

  if (filteredCountries.length === 0) {
    noResults.style.display = "block";
  } else {
    filteredCountries.forEach((country) => {
      const li = document.createElement("li");
      li.textContent = country.name;
      resultList.appendChild(li);
    });
    noResults.style.display = "none";
  }

  if (searchInput.value === "") {
    resultList.innerHTML = "";
  }
};

searchInput.addEventListener("input", handleSearch);

A) Primero listamos los posibles resultados a la bsqueda del usuario, en mi caso son pases. Para eso listamos un array de objetos en donde cada uno de esos objetos nos representa un resultado posible para el usuario con su clave y valor.

B) Como segundo paso capturamos los IDs que tenemos en el HTML que corresponden al (de donde vamos a capturar lo que escriba el usuario), al <ul/> (de donde vamos a mostrar la lista de resultados) y al

En donde mostraremos un mensaje en caso de que no se encuentren resultados.

C) Por ltimo armamos la funcin handleSearch en donde manejamos toda la lgica.

Esto lo divido en varias partes para poder explicarlo mejor paso a paso.

C.1) Lo primero consiste en crear dos constantes que son claves para para funcionalidad de este proyecto:

La Primera ellas (searchTerm) captura el valor de lo que se esta escribiendo en el input, es decir, cada letra que el usuario esta tipeando transformndolas a minscula (con toLowerCase), para asegurase de mas all de como escriba el usuario, siempre vamos a evaluar los resultados en minscula.

La Segunda (filteredCountries) va a ir filtrando todos los nombres del array de objetos pases pasados a minscula (para coincidir con searchTerm) y por ultimo con el mtodo startsWith que se encarga de hacer la filtracin de pases condicionando que nicamente devuelva aquellos pases del array que comiencen con las letras que esta escribiendo el usuario es decir, la constante searchTerm.

C.2) En esta paso con innerHTML nos aseguramos de que el la lista de pases comience en blanco.

C.3) En este punto tenemos un If, Else. Dentro del If nos aseguramos que si dentro el array de pases filtrados (filteredCountries) no hay pases que mostrar, es decir, que no se encontraron resultados que coincidan con la bsqueda del usuario y por por la tanto su extensin en igual 0, entonces se mostrara el <p> para avisar que no se encontraron resultados.

Dentro del Else colocamos el caso contrario, que seria bsicamente se encontraron resultados y que hay que mostrarlos. Para ello creamos una etiqueta <li> y dentro de ella agregamos un contenido de texto con el nombre del pas a mostrar y colamos esas <li> dentro del <ul>.

Por ultimo nos aseguramos que el

que muestra que no hay resultados quede desactivado.

C.4) Con este ultimo IF nos aseguramos que al ejecutarse nuestra funcionalidad, la etiqueta <ul> con pases no se muestre en caso de que el usuario no escriba nada en el <input> o este vaco.

C.5) En este ultimo paso hacemos el llamado a la funcin handleSearch cuando se ejecute el evento input (es decir, cuando el usuario escriba algo en el <input>)

Bueno, esto fue todo por este articulo, espero que te sirva para crear tu filtro de bsqueda.

Muchas gracias y que la pases bien. Saludos, Pablo.

Pero bien, aca van los videos:

Te los recomiendo. De hecho, despus de estos, hay ms videos en mi canal sobre cmo integrar el checkout de Mercado Pago como un modal o con distintos tipos de redirecciones, as como tambin cmo capturar informacin un pago exitoso.

Por otro lado, me gustara elaborar una gua sobre cmo utilizar la versin anterior de esta API. Esto est destinado principalmente a ayudar a aquellas personas que hayan visto mis videos sobre esta API en mi canal de YouTube, pero aquellos que se encuentren desactualizados y estn buscando aprovechar esos proyectos sin necesidad de modificar el cdigo de mercado pago a la ltima versin como se muestra en los vdeos que compart ms arriba.

Dejo ac el link directo a los videos que han quedado desactualizados para que tengas a mano el tutorial que ests siguiendo.

Integracin Mercado Pago con Javascript: ver video

Integracin Mercado Pago con ReactJs: ver video

Proyecto Donaciones Mercado Pago Javascript: ver video

Proyecto Donaciones Mercado Pago ReactJs: ver video

Ecommerse principiantes Mercado Pago Javascript: ver video

Solucionando conflictos de versin de Mercado Pago

Lo que se debe hacer es asegurarse de tener alguna versin compatible de mercado pago en lugar de tener la ultima versin que se te instale por defecto. Nada mas que eso, el resto del cdigo queda tal cual.

Como vern por defecto se nos instala la ultima versin de mercado pago, puede que sea la misma que ves en la imagen o incluso alguna superior.

Esto hace que al correr el servidor nos de seguramente este error:

Esto es por que las ultimas versiones de mercado pago no resisten configure como manera optima para vincular las credenciales de nuestra cuenta.

Entonces hay que modificar la lnea del archivo package.json y colocar una versin de Mercado Pago adecuada.

Cololoca en tu archivo package.json la version "^1.5.17" de Mercado Pago.

Ahora hay que eliminar la capeta node modules y el archivo package-lock.json de tu cdigo. Una ves hecho esto hay que volver a instalar las dependencias del proyecto, en nuestro caso mercadopago cors y express.

Corre el siguiente comando en la consola:

npm install mercadopago cors express

Perfecto esto es todo!

Ya podes seguir el tutorial y el codigo te va a funcionar perfecto

Saludos!

Vas a poder encontrar el cdigo explicado paso a paso y te va a quedar disponible para que lo puedas copiar y probar en tu propio proyecto.

Antes de arrancar te dejo tambin disponible este tutorial en vdeo.

No olvides suscribirte a mi canal, subo contenido regularmente! ahora si , comenzamos con el cdigo.

1 - Comenzamos creando la maquetacin HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="scrolling-buttons-container">
      <span id="scrolling-button-left">👈</span>
      <span id="scrolling-button-right">👉</span>
    </div>

    <div class="scrolling-container">
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
      <div class="scrolling-card"><h2>Soy una card Feliz</h2></div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

A - Primero, dentro de un contenedor tenemos nuestros dos botones, en mi caso son unas etiquetas span que me simulan un botn y que dentro contienen un emoji. En tu caso, podras utilizar botones o lo que se ajuste a tu proyecto, lo importante es que les pongas un ID para poder identificarlo.

B - Por ultimo, dentro de un segundo contenedor, ponemos todas nuestras cards, cada una de ellas debe compartir una clase css.

2 - Aplicamos los estilos CSS.

.scrolling-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.scrolling-card {
  flex: 0 0 auto;
  border: solid 1px black;
  margin: 10px;
  width: 250px;
  height: 150px;
  text-align: center;
}

.scrolling-container::-webkit-scrollbar {
  display: none;
}

.scrolling-buttons-container {
  display: flex;
  justify-content: space-between;
  font-size: 25px;
  margin-left: 25px;
  margin-right: 25px;
}

A - Scrolling-container: Es el primer contenedor en el que se ordena la distribucin de todas las cards a las cuales les vamos a dar la posibilidad de desplazarse de izquierda a derecha.

Utilizamos flexbox para lograr mostrar todas las cards en una misma fila. Adems, le pasamos un comportamiento de scroll tipo smooth para generar mas suavidad en el desplazamiento de las cards.

B - Scrolling-card: Esta clase corresponde a cada card en particular, a las cuales alineamos con flexbox y les damos un estilo de aspecto y posicionamiento dentro de la web.

C - Scrolling-container::-webkit-scrollbar: En esta parte simplemente le decimos a la clase scrolling-container que queremos que nos elimine la barra de scroll horizontal que se muestra por defecto. Esta barra no se ve agradable en el diseo y la funcionalidad de desplazamiento la tendrn los botones.

D - Scrolling-buttons-container: Esta clase corresponde al contenedor de los botones en donde les damos un tamao y un posicionamiento en la web.

3 - Funcionalidad de los botones con JavasCript.

const rightBtn = document.querySelector("#scrolling-button-right");
const leftBtn = document.querySelector("#scrolling-button-left");

const content = document.querySelector(".scrolling-container");

rightBtn.addEventListener("click", () => {
  content.scrollLeft += 800;
});

leftBtn.addEventListener("click", () => {
  content.scrollLeft -= 800;
});

A) Primero atrapamos el ID de ambos botones y la clase contenedora de todas las cards guardando esos valores dentro de unas constantes. Una vez hecho esto, ya estamos en condiciones de armar la funcionalidad.

B) Llega el momento de utilizar la propiedad scrollLeft para lograr la funcionalidad de desplazar a la derecha o a la izquierda el contenido. Se que es confuso, pero no hay una propiedad que se llame scrollRight. Simplemente con scrollLeft vamos a poder mover el contenido para ambos lados de las siguiente manera:

Para mover el contenido a la derecha le pasamos el escuchador de eventos al botn indicado y le pedimos que mueva el content (el contenedor de cards) hacia la derecha los pixeles que queramos utilizando scrollLeft con (+=) Es importante resaltar el +.

Para mover el contenido a la izquierda utilizamos exactamente la misma lgica pero esta vez utilizando el scrollLeft con signo (-=) Utilizamos el negativo para desplazar el contenido en sentido opuesto.

Eso es todo lo necesario para lograr el comportamiento de scroll horizontal utilizado botones.

Espero que te sirva y que la pases muy bien!

Saludos, Pablo.

Hace un tiempo hice un video de YouTube en mi canal on the code sobre cmo consumir la API del BCRA con Javascript, pero al recibir consultas sobre cmo resolver el problema de CORS sin utilizar una extensin del navegador (que era lo que estaba haciendo en mi vdeo), decid crear un proxy para solucionar este problema.

Primero te dejo el video, no olvides suscribirte a mi canal! subo contenido periodicamente.

Antes de seguir no te olvides de suscribirte a mi canal, subo contenido regularmente.

Todo esto de CORS es muy comn en las aplicaciones web modernas, ya que a menudo utilizan mltiples servidores y dominios diferentes. Afortunadamente, existe una solucin simple para este problema: usar un proxy.

Un proxy es bsicamente un servidor que acta como intermediario entre tu aplicacin y el servidor que ests intentando acceder. En otras palabras, en lugar de hacer una solicitud directa al servidor, haces la solicitud al proxy, y el proxy hace la solicitud al servidor en tu nombre. Esto permite que la solicitud provenga del mismo dominio que tu aplicacin, evitando conflictos con CORS.

En mi caso, quera acceder a la API del Banco Central de Argentina desde mi sitio web, por lo que cre un proxy para solucionar el problema de CORS. No dudes en utilizar el proxy! ac te comento como hacerlo:

Te muestro un ejemplo para acceder a la cotizacin del USD, aunque con el proxy se puede acceder a cualquier informacin que ofrezca la api del BCRA.

Ac te dejo el link a la API: https://estadisticasbcra.com/api/documentacion

const apiUrl = "usd";
const proxyUrl = "https://bcra-proxy-cors.vercel.app";

fetch(`${proxyUrl}/${apiUrl}`, {
  headers: {
    Authorization:
      "BEARER TOKEN",
  },
})
  .then((response) => response.json())
  .then((data) => console.log(data))

Este cdigo utiliza fetch para hacer una solicitud GET a la API del Banco Central de Argentina.

1. En la primera const apiUrl, especificamos la informacin a la que nos gustara acceder. No es necesario escribir la URL completa de la solicitud, de eso se encarga el Proxy. Por lo tanto, solo se debe escribir exactamente lo que se desea acceder (en este caso "usd").

2. En la segunda const proxyUrl, especificamos la URL del proxy. Desplegu el proxy en Vercel, ya que siempre me ha dado muy buenos resultados y es gratuito.

3. En los headers de la peticin, debemos especificar el token BEARER como una cadena de caracteres. Este token se obtiene al registrarse en la API.

Mejor sera hacer lo mismo con async-await try-catch ;)

  const fetchData = async () => {
   const apiUrl = "usd";
   const proxyUrl = "https://bcra-proxy-cors.vercel.app";

   try {
      const response = await fetch(`${proxyUrl}/${apiUrl}`, {
      headers: {
              Authorization:
              "BEARER TOKEN",
            },
          });

      const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error(error);
        }
      };

      fetchData();

Eso es todo lo que necesitas hacer para utilizar el proxy y evitar todo conflicto con CORS. Que la pasen bien!

Saludos!!

Pablo.

Te dejo tambin el paso a paso en video, no te olvides de suscribirte a mi canal .

Preparando proyecto para deployar en Vercel

Vamos a comenzar creando un proyecto simple para deployar, en tu editor de cdigo crea una carpeta llamada app. Dentro de esta carpeta corre el siguiente comando en la consola:

npm init -y

Esto va a crear un archivo package.json con informacin bsica y necesaria del proyecto.

Ahora, dentro de nuestra carpeta app hay que crear otro archivo al cual lo vamos a llamar index.js, es importantsimo que se llame index.js y no de otra forma como app.js o server.js, vercel va a buscar un archivo que se llame index.js a la hora de deployar el cdigo.

Entonces la estructura tiene que ir quedando algo mas o menos como esto:

Bueno, comencemos a escribir un poco de cdigo en nuestro index.js. Te dejo ac un cdigo bsico para que te sirva como referencia.

const express = require("express");
const app = express();

const port = process.env.PORT || 3000;

app.get("/", (req, res) => {
  const htmlResponse = `
    <html>
      <head>
        <title>NodeJs y Express en Vercel</title>
      </head>
      <body>
        <h1>Soy un proyecto Back end en vercel</h1>
      </body>
    </html>
  `;
  res.send(htmlResponse);
});

app.listen(port, () => {
  console.log(`port runing in http://localhost:${port}`);
});

A este punto seguramente tengas un proyecto propio o tengas en mente deployar otra cosa, pero paso a dar una explicacin rpida del cdigo que esta ac arriba, quizs te sirva.

1. Lo primero que esta haciendo es requerir a Express y luego invocarlo en la constante app

const express = require("express");
const app = express();

Al estar utilizando Express tenemos que instalarlo para que funcione 😅 Ejecuta este comando en la consola, siempre dentro de la carpeta app

npm i express

2. Lo segundo (y super importante) es la configurcion del puerto en la constante port.

const port = process.env.PORT || 3000;

En este punto el estamos diciendo que nuestro proyecto va a correr en un determinado dominio o en nuestro caso en alguna url que nos genere vercel. Eso lo indicamos con el (process.env.PORT). Luego le decimos que en caso de no haber ningn dominio/url configurada lo vamos a levantar en nuestro servidor local en el puerto 3000, con esto: ( || 3000). Pero todo bien! seguro que se nos va a configurar una url en vercel!

3. Vamos con lo tercero, pero en verdad lo importante ya se hizo en el paso 2. Lo dems ya va a estar ajustado a lo que suceda en tu proyecto. En mi caso solo tengo configurado un poco de cdigo HTML para mostrar en el navegador cuando se ejecute el servidor.

app.get("/", (req, res) => {
  const htmlResponse = `
    <html>
      <head>
        <title>NodeJs y Express en Vercel</title>
      </head>
      <body>
        <h1>Soy un proyecto Back end en vercel</h1>
      </body>
    </html>
  `;
  res.send(htmlResponse);
});

4. Por ultimo, le pedimos a la constante app (donde esta corriendo express) que escuche el puerto que configuramos mas arriba y que nos de un poco de feedback por consola.

app.listen(port, () => {
  console.log(`port runing in http://localhost:${port}`);
});

Bueno, ahora ya estamos en condiciones de probar el proyecto en nuestro servidor local (se va a levantar en el puerto 3000) para ver si todo esta funcionando, hay que correr este comando en la consola.

node index.js

Funcion? Bueno, si esta todo bien, sea no te dio ningn error y tu proyecto se ejecuto bien en el puerto 3000 de tu servidor local, entonces ya estamos en condiciones de subirlo a vercel.

Preparando configuraciones del proyecto para deployar en vercel

Lo primero que tenemos que hacer a esta altura es crear un archivo de extensin json llamado vercel.json (de nuevo, siempre dentro de la carpeta app), dentro de este archivo van las configuraciones bsicas que necesita vercel, ac te lo muestro:

{
  "builds": [
    {
      "src": "./index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/"
    }
  ]
}

No me quiero meter demasiado en esto, pero son las configuraciones necesarias en los "builds" y las "routes" que necesitamos para hacer funcionar el deploy.

Algo sinttico seria lo siguiente:

Builds: Definen como se construye la aplicacin, en este punto usamos nuestro archivo index.js empleado dentro del entorno de ejecucin @vercel/node.

Routes: Define como se manejan las rutas de la aplicacin. Todas las URl representadas como /(.*) Se van a redirigir a la raiz del sitio (/).

Mientras tanto la estructura de tu proyecto se debera ver como algo as (o eso espero).

Deployando el proyecto en vercel

Bueno, ahora vamos con lo ultimo, llego al fin el momento de subir esto a vercel. Primero hay que crear una cuenta si es que aun no te hiciste una, crear una cuenta en vercel es totalmente gratis y no te pide ninguna tarjeta de crdito ni nada de eso, crea una cuenta aca: https://vercel.com

Hay dos maneras de hacer el deploy, una es vinculando un repositorio y otra es utilizando el CLI de vercel y hacerlo todo por consola, yo prefiero usar la consola, es muy simple y ademas no hay necesidad de subir todo a github, te cuento como hacerlo.

Si nunca antes instalaste vercel llego el momento de hacerlo! En tu consola corre el siguiente comando para instalar vercel de forma global.

npm install -g vercel

Ahora si! ya podemos usar el CLI y subir el proyecto por consola.

Hay que correr simplemente el comando vercel.

vercel

Una ves que corras ese comando se te van a mostrar algunas pocas preguntas en tu consola que hay que contestar.

Te las muestro por ac y te las explico:

Set up and deploy: Ac le ponemos que si con la letra: y

Wich scope do you want to deploy to? Ac nos pregunta en que mbito deseamos desplegar el proyecto. A mi me aparece pab-mchn porque es el nombre de mi cuenta y estoy logeado. Si aun no te logeaste, te va a pedir que te logees, es un proceso simple y se gestiona con una confirmacin de cuenta con el navegador.

Link to existing project? Ac nos pregunta si lo queremos vincular a un proyecto que se tenga creado en Vercel, le ponemos que no con una simple n. A no ser que si lo quieras vincular a un proyecto que tengas creado.

Whats is your project`s name? Ac todo bien, simplemente nos pregunta el nombre que le queramos poner a nuestro proyecto. Creale alguno o busca cual es el nombre de tu proyecto si es que en la anterior respuesta pusiste que si.

In wich directory is your code located? Ac nos pregunta donde esta ubicado nuestro proyecto y nos sugiere esta respuesta ./ Esta respuesta es correcta, nuestro archivo index.js esta en la raz del proyecto dentro de la carpeta app as que la ubicacin es correcta, simplemente damos un "Enter".

Y listo! Vercel va a generar los links para deployar el proyecto y ya vamos a poder verlo en las URL que nos esta mostrando en la consola. mralas en tu navegador.

En caso de que quieras subirlo a produccin deberas correr este comando (ya te lo sugiere por ah en consola ).

vercel --prod

Bueno, eso es todo!

Espero que puedas tener tu hermoso proyecto en vercel y que la pases bien.

Saludos! Pablo.

Te voy a ir dejando el cdigo limpio para que puedas copiarlo y probarlo en tu proyecto junto con explicaciones.

Te dejo tambin el video de este tutorial por si te interesa tenerlo a mano.

1) El HTML del buscador del productos en javaScript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <h1>BUSCAR PRODUCTOS</h1>

    <!-- search content -->
    <div class="search-container">
      <input type="text" id="searchInput" placeholder="Search products..." />
    </div>
    <p id="noResults" class="no-results">No se encontraron resultados.</p>

    <!-- shop content -->
    <div class="card-products-container">
      <div id="shopContent"></div>
    </div>

    <script src="app.js"></script>
  </body>
</html>

En este HTML se encuentra nicamente un <input> en donde el usuario va a escribir el producto que desea buscar junto con una etiqueta <p>, la cual contendr un texto que se va a mostrar nicamente en caso de que no se encuentren resultados para mostrar.

Por ultimo, se encuentra un <div> que ser el contenedor de los productos.

Cada una de estas etiquetas tienen clases y ids que son necesarios tanto para estilos como para la funcionalidad y dinamismo que se les dar en un futuro con JavaScript.

2) Estilos de la barra de bsqueda y de los productos

h1 {
  text-align: center;
}
.search-container {
  max-width: 400px;
  margin: 0vh auto;
  padding: 20px;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #646363;
  border-radius: 8px;
  outline: none;
}
.card-products-container {
  margin: 10vh auto;
  text-align: center;
}

.card-products {
  display: inline-block;
  text-align: center;
  margin: 0 30px;
}

.card-products img {
  height: 180px;
}

.card-products h3,
.card-products .price {
  margin-top: 10px;
}

.card-products button {
  border: none;
  outline: 0;
  padding: 10px;
  color: white;
  background-color: #1bcb7f;
  text-align: center;
  cursor: pointer;
  width: 80%;
  font-size: 15px;
}

.no-results {
  font-size: 20px;
  color: red;
  text-align: center;
  display: none;
}

Te dejo los estilos, efectivamente solo hacen a la esttica del proyecto. Lo nico a tener en cuenta en relacin a la funcionalidad es el "display:none" que se encuentra en la clase ".no-results", esto vendra a ser que el prrafo no se muestre por default en la pagina web. El dinamismo de mostrarse cundo sea necesario se lo vamos a dar en el JavaScript.

3) Cdigo JavaScript para ver, filtrar y buscar productos

const products = [
  {
    productName: "Sandia",
    price: 15,
    img: "https://res.cloudinary.com/pabcode/image/upload/v1699869750/e-commerce/ksmw5s3xg7eeakpva5xd.png",
  },
  {
    productName: "Cervecita",
    price: 20,
    img: "https://res.cloudinary.com/pabcode/image/upload/v1699869747/e-commerce/xhlekqrockwxzjskzppw.png",
  },
  {
    productName: "Bananita",
    price: 30,
    img: "https://res.cloudinary.com/pabcode/image/upload/v1699871193/e-commerce/mopgcvdiepr8axkazmcp.png",
  },
  {
    productName: "Compu",
    price: 40,
    img: "https://res.cloudinary.com/pabcode/image/upload/v1700045911/e-commerce/compu_unvcoi.png",
  },
];
const shopContent = document.getElementById("shopContent");
const searchInput = document.getElementById("searchInput");
const noResults = document.getElementById("noResults");

const displayProducts = (productList) => {
  shopContent.innerHTML = "";

  if (productList.length === 0) {
    noResults.style.display = "block";
  } else {
    productList.forEach((product) => {
      const content = document.createElement("div");
      content.className = "card-products";
      content.innerHTML = `
          <img src="${product.img}">
          <h3>${product.productName}</h3>
          <p class="price">${product.price}</p>
          <button>comprar</button>
          `;
      shopContent.append(content);
    });
    noResults.style.display = "none";
  }
};

const handleSearch = () => {
  const searchTerm = searchInput.value.toLowerCase();
  const filteredProducts = products.filter((product) => product.productName.toLowerCase().startsWith(searchTerm));

  displayProducts(filteredProducts);
};

displayProducts(products);

searchInput.addEventListener("input", handleSearch);

Por ultimo tenemos el JavaScript, vayamos viendo paso a paso que es lo que hace.

1. Lo primero es tener listados nuestros productos, en mi caso tengo un array de objetos, cada producto tienen un nombre, precio e imagen.

2. Lo siguiente es capturar mediante sus id las etiquetas que estn en HTML y que necesitamos para lograr el dinamismo y la funcionalidad.

3. Es momento de comenzar a armar la funcin que va a desplegar los productos, en este caso se llama displayProducts().Vamos viendo paso a paso que es lo que hace esta funcin.

a) Lo primero es notar que la funcin tiene como parmetro productList. Este parmetro representa dos cosas distintas segn lo que le pasamos al momento de invocar la funcin. Puede ser el array de productos en si mismo o puede ser tambin los productos que han sido filtrados y que debemos mostrarle a usuario como resultados de su bsqueda.

b) Como primera linea dentro de la funcin nos aseguramos que el shopContent este limpio cada vez que se ejecute la funcin. Esto lo hacemos para asegurarnos que los productos no aparezcan duplicados mientras vamos ejecutando la funcionalidad de nuestro programa.

c) Lo siguiente es un if(), else(). Dentro del if() tenemos nicamente un "display:block" al prrafo que muestra que no se encontraron resultados en caso de que se cumpla la condicin tener al producList con una extensin de 0.

Dentro del else() simplemente recorremos los productos filtrados con un forEach y armamos las cards con lo productos para mostrar en el sitio web, adems anulamos con un "display:none" el prrafo que muestra que no hay resultados para asegurarnos de que no se muestre.

4. Es ahora el turno de la segunda funcin del proyecto handleSeach(), esta funcion es la que hace todo el proceso de filtrado y busqueda, veamos que es lo que hace.

a) En la primer variable SearchTerm capturamos las letras que escribe el usuario en el input y las transformamos a minscula, esto ltimo para asegurarnos de que mas all de como escriba el usuario en el input siempre vamos a procesar toda la lgica con las letras en minscula para que no se nos generen conflictos.

b) La segunda variable filteredProducts lo que hace es filtrar todos los nombres del array "products" pasados a minscula (para coincidir con searchTerm). Luego con el mtodo startsWith se asegura que nicamente devuelva aquellos productos del array que comiencen con las letras que esta escribiendo el usuario, es decir, la constante searchTerm.

Esta ultima variable es fundamental, ya que contiene dentro de si todos los productos filtrados.

c) Lo siguiente es llamar a la primer funcin que creamos en este proyecto pasndole por parmetro los pases filtrados, es decir la variable filteredProducts.

5. Luego tenemos simplemente la invocacin del la funcin displayproducts() para mostrar los productos inicialmente al cargar la pagina.

6. Lo ultimo es simplemente ejecutar la funcin handleSearch() cuando se ejecute el evento input, es decir, cuando el usuario comience a tipear para buscar algn producto en la barra de bsqueda.

Perfecto, espero que te sirva! Esto es todo para lograr el buscador de productos con JavaScript

Saludos, Pablo.