Cómo crear un repositorio web con Softr y Airtable

Hace ya un tiempo descubrí dos aplicaciones no-code que funcionan perfectas juntas para crear aplicaciones web sin necesidad de programar: Softr y Airtable.

Hoy os voy a mostrar un caso de uso de una aplicación que he creado para la comunidad del videojuego Starcraft 2. Pero antes de empezar, vamos a ver brevemente qué hace cada herramienta.

¿Qué es Softr y Airtable?

Softr: plataforma no-code para crear sitios web, directorios, dashboards o aplicaciones conectadas a bases de datos como Airtable. Puedes arrastrar bloques, personalizar el diseño y publicar tu web sin programar.

Airtable: una base de datos visual que funciona como una hoja de cálculo avanzada; es ideal para organizar contenido, gestionar productos, contactos y alimentar tu web con datos dinámicos.

👉 Puedes ver ejemplos reales creados con Softr en la galería Made with Softr, que está creada con la propia aplicación de Softr también.

Ejemplo de aplicación creada con Softr + Airtable: Web SC2Builds

En mi caso, quería crear una web donde la comunidad pudiera subir sus builds de Starcraft II, y que estas se organizaran visualmente, con filtros, y que pudieran subirse de forma semi automática. Como no sé programar, decidí usar Softr para la interfaz y Airtable como base de datos.

Os muestro cómo queda la interfaz en Softr:

Y cómo se estructura la información en Airtable:

Este mismo sistema se puede aplicar a otros casos de uso como:

• Repositorio de materiales educativos, como el baúl de Letcraft Educación.
• Directorios de mundos creados con Minecraft Education, como este de Letcraft Educación.
• Catálogos de productos, proyectos o herramientas.
• Portales o directorios de personas, lugares, actividades, etc.

Pasos para crear tu propio repositorio con Softr y Airtable

A continuación, te cuento los pasos básicos para crear tu propio repositorio o directorio dinámico con las herramientas de Softr y Airtable. ¡Vamos allá! 🔽

1. Lo primero que debes hacer es crear tu cuenta de Airtable y Softr de forma totalmente gratuita.
2. Crea tu base de datos en Airtable y que luego conectarás con Softr. Debes crear una tabla con los campos que quieras mostrar, como por ejemplo: título, descripción, imagen, categoría, estado, etc. Ten en cuenta que cada fila será un elemento del repositorio (por ejemplo, un producto).
3. Ve a Softr y crea un nuevo proyecto, puedes elegir una plantilla o empezar desde cero. Ten en cuenta que luego se puede personalizar como quieras.
4. Añade un bloque dinámico que sea tipo "grid" o "list" para mostrar los datos de Airtable, que tendrás que conectarlos con la aplicación, así que tendrás que iniciar sesión en Airtable desde el propio Softr para poder darle los permisos.
5. Crea un formulario de envío para que los usuarios puedan colaborar y enviar sus propuestas al repositorio. Este formulario lo puedes crear en el mismo Softr y vincularlo con los campos de Airtable.
6. Es el momento de ajustar el diseño y los filtros, como por ejemplo mostrar sólo los elementos que tengan el estado "validado", personaliza colores, tipografías, espacios, estructura, etc.
7. Y por último, cuando lo tengas todo listo, puedes publicar tu web en Softr con su propio dominio o puedes optar por conectar el tuyo propio (si tienes uno comprado).

Consejos finales de uso de Softr y Airtable

• Utiliza los filtros inteligentes de Softr para controlar lo que quieres que se muestre y no se muestre en la web; de esta forma podrás revisar los envíos en Airtable antes de publicarlos en Softr.
• Ten en cuenta que cuando hagas algún cambio en Airtable o entre un registro nuevo, automáticamente se actualizará en Softr, no hace falta que actualices nada de forma manual más que en Airtable.
• Con el plan gratuito de Softr puedes tener hasta dos aplicaciones activas en cada proyecto que crees y además se verá el sello de "Made with Softr" en tu aplicación.

¡Y listo! 🥳🎉 Ya tienes tu web funcionando, y responsive, sin una línea de código. Si tienes dudas, puedes visitar mi canal de Youtube de Las Cositas de Sita y seguir aprendiendo sobre estas aplicaciones.

Compártelo si te ha gustado 😊 ¡Muchas gracias!