Conecta tu base de datos

En este tutorial conectas una base de datos Postgres, como una de Neon o Supabase, escribes una consulta SQL con un parámetro y le das valor a ese parámetro desde un cuadro de búsqueda para que la lista se filtre mientras el visitante escribe. Necesitas una base de datos Postgres accesible desde internet y un usuario con acceso de lectura.

Prepara una tabla

1. Crea datos de ejemplo

   Si todavía no tienes una tabla para mostrar, abre el editor SQL de tu proveedor de base de datos y ejecuta:

   sql

   create table products (id serial primary key, name text not null, price numeric(8, 2) not null);
   insert into products (name, price) values
     ('Canvas tote', 24.00), ('Ceramic mug', 14.50), ('Linen apron', 32.00),
     ('Notebook', 9.90), ('Oak coaster set', 18.00), ('Wool blanket', 89.00);
   

2. Encuentra los datos de conexión

   En el dashboard de tu proveedor, abre los datos de conexión de la base de datos (en Neon y Supabase, presiona Connect en el proyecto). Copia el host, el puerto, el nombre de la base de datos, el usuario y la contraseña. Son las partes de una cadena de conexión como postgresql://user:password@host:5432/database.

Conecta la base de datos

1. Agrega una integración PostgreSQL

   Abre el espacio de trabajo Data desde la parte inferior de la barra lateral izquierda. Junto a Integrations, presiona + y elige PostgreSQL. Llámala Shop database.

2. Completa la conexión

   En la tarjeta Connection, escribe el Host (por ejemplo ep-cool-name.us-east-2.aws.neon.tech), el Port (normalmente 5432), la Database y el User. Deja Ssl en require, o elige verify-full para verificar también el certificado del servidor.

3. Agrega la contraseña

   En la tarjeta Secrets, escribe la Password del usuario de la base de datos. Se cifra en el servidor y no se vuelve a mostrar.

4. Créala y pruébala

   Presiona Create integration y luego Run test en la tarjeta Test connection. Connected significa que Malla llegó a la base de datos y ejecutó una consulta simple. Un error muestra el mensaje y un código, por ejemplo una contraseña incorrecta o un host que no responde.

Consulta la tabla

1. Mira las tablas

   Junto a Queries, presiona + y cámbiale el nombre a la consulta a products. En Source, pon Integration en Shop database y Operation en List tables; luego presiona Run en la tarjeta Result. Ves todas las tablas que el usuario puede leer, con sus columnas.

2. Escribe el SQL

   Pon Operation en Query. En Sql, escribe:

   sql

   select id, name, price from products
   where name ilike '%' || $1 || '%'
   order by name
   

   $1 es un marcador de posición. Su valor viene de Params, nunca del texto SQL, así que un visitante no puede inyectar SQL a través de él.

3. Dale un valor al parámetro

   En Params, presiona Add item y escribe "mug", con las comillas: cada ítem recibe un valor JSON, así que el texto necesita comillas y los números no. Max rows devuelve 200 filas si lo dejas vacío, y como máximo 1000.

4. Devuelve las filas

   La consulta devuelve un objeto con rows, rowCount, columns y truncated. En When it runs, pon Response path en rows para que la consulta devuelva solo la lista. Presiona Run: el resultado es un producto, la taza de cerámica.

Agrega una búsqueda en vivo

1. Crea una variable de búsqueda

   Junto a Page variables, presiona + y elige String. Cámbiale el nombre a search y deja el valor por defecto vacío.

2. Dale valor al parámetro desde la variable

   Selecciona la consulta products. Junto al ítem "mug" en Params, presiona Use an expression (el botón ƒ) y reemplaza el valor por vars.search.

   En When it runs, elige Client. Ahora la consulta se ejecuta en el navegador al cargar y otra vez cada vez que cambia vars.search. Debounce (ms) espera hasta que el visitante deja de escribir; el valor por defecto es 250 ms. El navegador le pide a Malla que ejecute la consulta, así que la contraseña nunca sale del servidor.

3. Agrega el cuadro de búsqueda

   De vuelta en el lienzo, presiona + en la pestaña Layers y elige Input. En la sección Field, pon Placeholder en Buscar productos y Value en search. Ahora escribir en el cuadro escribe en la variable.

4. Muestra los productos

   Inserta una Collection list debajo del cuadro de búsqueda. En Collection list, pon Source en Expression e Items en queries.products.data. Agrega dos textos dentro de Item y enlázalos a item.name e item.price en Typography. Pon Empty text en Ningún producto coincide con tu búsqueda.

1. Prueba la búsqueda

   Presiona ⌘↵ para ver la página y escribe oa en el cuadro de búsqueda. Tras una breve pausa, la lista muestra solo el juego de posavasos. Escribe xyz para ver el texto de estado vacío. Presiona ⌘↵ otra vez para volver a editar.

2. Publica

   Presiona Publish y abre la página de staging. La búsqueda funciona igual para tus visitantes.

Lo que aprendiste

• Una integración PostgreSQL guarda el host, la base de datos y el usuario, y mantiene la contraseña cifrada en el servidor.
• Los marcadores $1, $2 toman sus valores de Params, y un parámetro puede leer una variable.
• Una consulta de cliente vuelve a pedir los datos cuando cambian las variables que lee, lo que convierte un input en una búsqueda en vivo.

Lee las guías en las que se basa este tutorial: