Una de las claves en el ecosistema no-code es la capacidad que te ofrece para poder crear proyectos increíbles sin código. Y a lo largo de nuestra trayectoria nos hemos encontrado proyectos geniales, que empujan los límites de lo que es posible hacer - pero que no tenían un lugar en el que mostrarlo.
Es por eso que nos pusimos el reto de crear un espacio, en el que los makers pudieran publicar sus proyectos hechos con no-code.
En este post, te vamos a contar cómo lo hemos hecho en 1 semana - usando herramientas no-code y las decisiones que hemos tomado.
Lo primero que tuvimos que plantear es la estructura de cómo ibamos a plantear el portfolio. Queríamos hacer un producto lo más rápido posible - para poder validar que existe demanda por este tipo de herramienta.
Sin embargo, queríamos que esta versión fuera un M.A.P. (Minimum awesome product), concepto del que puedes leer más en este artículo de Carlos Beneyto. Un producto que funcionara correctamente pero que diera la sensación de ser un producto robusto.
Todos los datos los almacenaremos en una base de Airtable - que nos servirá para llevar un control de los proyectos y actuar como back-end. Para el front (lo que ve el usuario), hemos decidido mantenernos en Webflow para que esté integrado con nuestra web.
La clave del producto pasa por tres aspectos fundamentales:
Así que decidimos simplificar al máximo el producto para poder hacerlo en tiempo - y que fuera funcional.
Los proyectos cuentan con dos tipos de datos: Los datos relativos al proyecto en si, pero además la información acerca del usuario (Nombre, foto de perfil, etc...). Y nos encontrábamos con el problema de que actualmente no se pueden crear cuentas de usuario en Webflow y que queríamos evitar tener que hacer que se crearan otra cuenta en un nuevo servicio.
.jpg)
Eso plantea el problema de ¿qué pasa cuando un usuario quiere subir más de un proyecto? Sin una cuenta de usuario a la que poder asociarlo, no se puede hacer.
Para hacer el producto más sencillo, decidimos eliminar el registro de usuario. Para ello, optamos por crear una "cuenta" de usuario, basada en el email de la persona que sube el producto. De esta manera podremos asociar los proyectos que suba a su usuario y conseguir la funcionalidad de crear perfiles de usuarios - aunque no fueran cuentas realmente dichas.
Para ello, utilizaremos Arengu que nos permitirá aplicar la lógica necesaria para que esto funcione.
Otra de las funcionalidades críticas del mismo es la posibilidad de simplificar al máximo el proceso de subida de un proyecto.
Si queremos tener un producto que sea sencillo de usar y que la gente pueda subir sus proyectos sin fricción, el proceso de subida tiene que ser lo más sencillo posible, y eso pasa por pedir la menor cantidad de datos posible.
Sabíamos que un proyecto al menos debería tener los siguientes datos:
Algunos de estos campos no nos queda más remedio que pedirlos, pero lo esencial es que tengamos el link al proyecto. Es por eso que será lo primero que le pidamos al usuario que introduzca.
Para poder vincular el proyecto a su cuenta - hemos decidido utilizar como comentábamos antes el correo electrónico para la creación de su perfil. Decidimos además, para que esta creación sea lo más transparente posible para el usuario, únicamente pedirle como dato adicional su perfil de Twitter - y obtener toda la información a partir de su perfil.
Una vez que sabemos cuál es el proyecto y quién lo sube, le pedimos información adicional que nos enriquecerá el proyecto - pero que no es obligatoria, como el nombre del proyecto, duración, herramientas, etc...
Nuestro objetivo es que el proyecto se cree en el menor tiempo posible, por lo que en caso de que no tengamos esta información, siempre podremos pedirla después.
Una vez que teníamos el mecanismo de subida de proyectos definido, lo hemos implementado en Arengu, utilizando dos flows en el proceso.
.jpg)
En el primer flow, una vez que el usuario nos deja su email, comprobamos si existe este usuario en nuestra base de datos de Airtable, y en caso de que así sea nos guardamos el valor de su ID en una "state variable", que nos permitirá usarlo en el siguiente flujo.En caso de que no exista, crearemos un nuevo usuario en nuestra tabla de Usuarios.
En el segundo, crearemos el proyecto dentro de nuestra base de datos, asociando al Usuario que hemos creado/encontrado en el paso anterior.
De esta manera, siempre obtenemos como resultado del envío del formulario un proyecto y un usuario al que pertenece el proyecto.
Otro de los principales puntos del portfolio es que debíamos revisar los proyectos que nos entran, para asegurarnos de que están hechos con no-code y que cumplen con nuestros criterios para poder estar en el proyecto.
Para ello, simplemente hemos creado un campo en Airtable de "Estado", que nos permite identificar aquellos proyectos que aún no hemos revisado en una vista de gestión, que nos facilita la operativa y control.
En el momento de aprobar un proyecto, simplemente deberemos cambiar el estado de Recibido a Publicado.
Ahora que tenemos los datos básicos del proyecto, es el momento de enriquecer la información.
Siguiendo con la línea de simplificar el producto y su operativa, queríamos hacer que la gestión y subida de los proyectos sea lo más sencilla posible.
Es por eso que hemos automatizado la obtención de elementos como la imagen del proyecto, el avatar del usuario, su biografía...
En la primera, utilizamos Microlink para automáticamente sacar una captura a la url del proyecto - lo cual nos simplifica la obtención de estas imágenes y estandariza el tamaño de las mismas.
.jpg)
En la segunda, cuando se crea un usuario, vamos a su perfil de Twitter y usando el módulo de Twitter obtenemos la información de su avatar, biografía y nombre - datos que están presentes en su perfil.
Una vez que tenemos la información del proyecto, es el momento de publicarlo a Webflow y de mantenerlo actualizado.
Uno de los grandes retos a la hora de montar cualquier proyecto no-code, especialmente si utilizas Webflow y Airtable es mantener sincronizada la información.
Es por ello que decidimos explorar las distintas vías de sincronizarla de la manera más robusta y sencilla posible. La creación de los elementos en Webflow desde una base de Airtable es sencilla, pero la sincronización plantea retos.
Es por ello que en vez de desarrollar un proceso con Integromat - susceptible a problemas de integridad y robustez, nos decidimos a probar una herramienta de sincronización como es Nobull, de F'insweet.
Una vez configurado (no lleva más de 10 minutos) y entendido su funcionamiento (y límites), actualizar la información es tan sencillo como pulsar un botón y dejar que funcione.
Nobull cogerá la información de tus tablas de Airtable, comprobará si está correcta en Webflow y en caso de no serlo (como por ejemplo cuando se crea un elemento nuevo en Airtable), se encargará de crearlo o modificarlo.
Esto, nos simplifica muchísimo la gestión de nuevos elementos y mantener toda la información al día.
El último paso del proceso es maquetarlo en Webflow.
El último paso es crear la visualización de los datos en si misma.
Para ello, contamos con la ayuda del equipo de minimum para que nos ayudaran tanto en el diseño como en la maquetación.
Optamos por crear una visualización sencilla, en la que primara el proyecto, la persona y en segundo plano las herramientas.
Si haces hover en un proyecto, podrás descubrir más información acerca del mismo:
Si accedes a la ficha de producto, podrás ampliar la información del proyecto como las herramientas utilizadas, el tiempo que ha llevado hacerlo, encontrar proyectos de la misma categoría y del mismo autor.
Además, como están relacionados los proyectos con el usuario, contamos ahora con una página específica autogenerada para cada usuario, en la que podrás ver su portfolio de proyectos personal, las herramientas en las que tiene expertise y una manera de contactar con él o ella.
Con este proyecto pudimos aprender mucho y profundizar en cómo poder simplificar el producto para crearlo en el menor tiempo posible.
Sin embargo, nos hemos encontrado muchos aprendizajes en el proceso que nos gustaría compartir como colofón a este artículo:
Ejemplos de esto es que no podemos tener tildes en el nombre del proyecto. Cosa que nos llevó varias horas descubrir.
Y este ha sido el resumen del portfolio que hemos creado. Esperamos que te haya gustado - de ser así compártelo con tus conocidos.
Si quieres aprender cómo poder hacer tú productos y proyectos como este, en Nocodehackers contamos con la formación de mayor calidad, para que tú puedas crear lo que te imagines. Puedes adquirir nuestros cursos por separado, o unirte a Nocodehackers PRO y tener acceso a todo nuestro contenido por solo 174€ al año.
Nos encantaría verte dentro de nuestra comunidad.
Descubre el mundo del no-code en 1 hora
Conoce proyectos creados en No-code y descubre las mejores herramientas.
Aprende Gratis
Crea 5 proyectos reales en 6 semanas
Descubre cómo utilizar las mejores herramientas No-code en esta formación práctica.
Empieza a aprender
Academia de herramientas no-code y low–code
.svg){kind=icon}
