10 Pasos para Crear una Aplicación Web (Ejemplo de Directorio de Herramientas)
Verás, durante mis últimas vacaciones decidí probar alguna herramienta que tenía por ahí guardada (pensarás sin equivocarte que soy un friki por hacer estas cosas, pero bueno, las circunstancias lo acompañaron y ahora quiero compartirlo para que esas horas que dediqué ahora se te conviertan en minutos para ti)
El resultado final es un Directorio con más de 1000 herramientas para creadores, gamificado, monetizable y con el 95% de las cosas automatizadas.
Si te has dado cuenta pone “Aplicación Web” y no “Web”, por lo que no hablamos de una página estática sino de una página web dinámica con login y con datos por detrás.
Se tarda tan poco y es tan sencillo, porque se utilizan dos herramientas NoCode fáciles de utilizar: Softr y Airtable.
- Softr se utilizar como frontal, llevando incorporado el tema de login y personalización de qué tiene que ver cada usuario en función de su rol, por ejemplo. Estructura las páginas web y te crea tantas como necesites.
- Airtable se encargará de hacer de base de datos y de backend para hacer acciones sencillas o avanzadas mediante bloques.
Ahora, voy a enseñarte paso a paso qué he hecho para ahorrarte tiempo pero que sigas entendiendo lo que haces:
Paso 1:
Registrarte en ambas herramientas Airtable y Softr. Te dejo mis enlaces patrocinados:
Fácil, rápido y gratis de probar. No tiene mucha complicación, lo que sí te recomiendo será hacerlo con el mismo email. En Airtable, apúntate la API KEY que te hará falta. Se obtiene desde https://airtable.com/account y en el apartado API.
Paso 2:
En Softr, elige una plantilla. Sé que te resulta más sexy hacerlo de cero, pero créeme, te ahorrará tiempo incluso si no encaja con tu modelo de aplicación y te ayudará a entender cómo funciona Softr. Yo escogí uno de Resource directory.
La razón principal de empezar por un template es porque te permiten empezar con una base de Airtable preparada, por lo que podrás tener la estructura de datos preparada para que todo funcione. Durante el proceso, tendrás que hacer la integración con Airtable, por lo que tendrás que usar la API KEY del paso anterior.
Paso 3:
Modifica las páginas en Softr, crea las que quieras y elimina las que te sobren. Esta herramienta se denomina Softr Studio y es una herramienta de bloques, por lo que lo mejor que puedes hacer es ir probando cómo quedan usando el Preview que tiene incluso sin publicarla.
Crea lo que que quieras y ve pensando qué cosas deberían ver los distintos roles de tu aplicación. Yo pensé en dos roles distintos (usuarios y expertos) por lo que tengo 2 menús distintos (usuarios sin login y con login) y las páginas requeridas para ello.
Incluso algún bloque le he metido visibilidad únicamente para uno de los roles.
Otra opción que tendrás es mostrar cosas únicamente a los usuarios logados o no logados. Interesante para bloques Call To Actions o Heroes.
Paso 4:
Verás, que los bloques son estáticos o dinámicos. Éstos últimos bloques serán los encargados de mostrar o enviar datos de Airtable en el frontal y podrás condicionar su visibilidad a los roles o a otras condiciones que se te ocurran. También podrás gestionar el tema de pagos e incluso gráficos en base a datos.
Aquí está la magia de la herramienta y es lo que me hizo probarla. Además de condicionar la visibilidad o permitir incluir filtros, ¡permite incluir un buscador por distintos campos!
Paso 5:
Cuando ya tengas claro todo en el frontal, modifica los campos de la base plantilla, y crea tu contenido.
Si te faltan ideas para el contenido o el contenido que tienes es escaso, te dejo 2 ideas que yo he utilizado.
- Contenido en inglés traducido por Google Translate desde Airtable. Así es, uno de los bloques de Airtable que puedes incluir es el de Google Translate y por pocos céntimos podrás meter cosas en Airtable en cualquier idioma y traducirlo con un click.
- Contenido obtenido por APIs de terceros en base a algún dato de Airtable desde el bloque de Data Fetcher. Con ello, sin tener que crear ningún backend, podrás automatizar el enriquecimiento de datos. Yo he ampliado el contenido gracias a la API de Microlink, sacando pantallazos de otras páginas, logos y otra información como títulos, descripciones etc…
Paso 6:
El SEO sin duda es algo que no puedes dejar de lado sobre todo para la parte pública. Softr hace un buen trabajo aquí y podrás mejorarlo agregando varias columnas de datos a tus tablas de Airtable.
En la documentación está la clave y podrás crear para cada página y página de registro la información SEO como título, imagen, descripción y el resto de información cuando se comparta en redes sociales.
Yo incluí mucha información que obtuve con el paso anterior previa traducción claro.
Paso 7:
Una vez tengas tu página preparada, te recomiendo incluir el login de Google, ya que muchos usuarios (aquí me incluyo) usan mucho el registro y login de Google.
Paso 8:
Cómprate un dominio y configúralo en Softr. Yo uso Google Domains para ello y me permite crear alias de correos que redirecciono a otras cuentas así no tengo que pagar Workspace. Eso sí, debes saber que así, recibirás los correos pero no podrás enviar. Siempre y cuando eso te venga bien, hazlo.
Paso 9:
Para medir la interacción, créate una propiedad de Google Analytics y verifica tu domino de Search Console. Te confieso que todavía no uso GA4 y todavía uso la de Universal, pero como puedes crear las dos, usa la que quieras.
Por otro lado, te recomiendo crearte algo para medir el crecimiento de uso de lo que crees, dado que el tráfico en sí no te dará pistas a menos que te vuelvas loco con el tema de los eventos.
Yo he creado unos cuadros de mandos con los bloques nativos de Airtable de charts.
Paso 10:
Llega el momento de dar a conocer tu herramienta, es importante para ver si pasa la validación o no. Aquí no soy experto, pero estos son los pasos que estoy haciendo yo.
- Uso la gamificación mediante fórmulas de cálculo en Airtable. Ello en sí, no hará que se conozca, pero sí que crezca orgánicamente en el caso que se dé a conocer.
- Listar la web en el apartado de hecho con Softr. Les escribí y están valorándolo, son super simpáticos y seguro que lo intentan.
- Busca en Redes sociales potenciales usuarios y date a conocer. En el caso que aporte valor, enseguida lo sabrás. Aquí lo que mejor me funciona es enseñárselo a la gente en persona y sin explicarles nada, pedirles feedback. Podrás comprobar por lo menos, si la idea se entiende.
- Si quieres hacer algo de Growth, usa alguna herramienta tú mismo, no te vuelvas loco. Yo estoy preparando cosas con PhantomBuster y no pensé que me resultaría tan fácil hacerlo.
Pues nada, espero haberte animado a crear algo, como verás, intentarlo será cuestión de una buena sentada. Es importante que no pierdas el foco de lo que quieres crear, y no te líes en los detalles, algo que me ocurre habitualmente.
Podrás validar una idea por menos de lo que crees.
¡Espero tus comentarios y aplausos si te ha servido este artículo! Sígueme para más o visita mi página de creador de contenido en Yeswelab
