50

Guía: cómo crear una aplicación real sin una sola línea de código

39362Puntos

hace 10 días

Curso para Crear un MVP sin Código
Curso para Crear un MVP sin Código

Curso para Crear un MVP sin Código

En este curso verás cómo validar tu idea de emprendimiento a través de un mínimo producto viable. Construirás tu producto digital con herramientas no-code y aprenderás cómo analizar los resultados de tu lanzamiento. Descubre cómo desarrollar una aplicación web progresiva completa para todos los dispositivos usando Adalo.

No-code, como su nombre lo dice, son herramientas que te permiten construir productos digitales sin tener que escribir líneas de código. Gracias a no-code, una emprendedora puede construir su mínimo producto viable, validar sus hipótesis, recibir feedback e iterar en el menor tiempo posible sin invertir mucho dinero. Programar un producto de software llega a ser la parte más cara de validar una idea.


¿Tu startup utiliza nocode?

Regístrala aquí, nos encantaría verte en el directorio de startups no code latinas.


El movimiento no-code tiene la idea de democratizar el acceso a la creación tecnológica. Desde hace un par de años, muchas startups nacieron de no-code. Es decir, sin una sola línea de código. Es el caso de Scribly.ioLogieq o Hunty, esta última siendo una startup latinoamericana.

En este artículo, te enseñaré cómo construir una aplicación sin escribir una sola línea de código. En mi caso, será un directorio de startups no-code latinoamericanas, donde cualquiera podrá ver el directorio y registrar su startup mediante un formulario.

Antes de comenzar, crea una cuenta en airtable y softr.io. Manten la sesión iniciada en ambos.

¿Ya las tienes?

¡Vamos!

Preparando la plantilla

01.png

Cuando entras a softr.io tendrás varias opciones de cómo comenzar a utilizar la plataforma. Puede ser desde cero o usando una plantilla. Nosotros usaremos una plantilla.

02.png

Como puedes ver, hay diferentes plantillas según el caso. Como nosotros haremos un directorio, escojamos “resource directories”. A mí me gusta “dream jobs”, escogeré esa. Tú puedes seleccionar la que quieras para tu directorio y dale “use template”.

Se verá más o menos así

👇

03.png

Airtable y la base de datos de nuestro directorio

De lado izquierdo tienes diferentes opciones para construir tu sitio con softr.io y arriba puedes probar cómo se ve el diseño responsivo. Por ahora vamos a settings > integrations > Airtable. Verás que te pide tu “Airtable API Key”. Ve a https://airtable.com/account y genera tu API key. Pégala en tu directorio. Dale guardar y luego connect to airtable en la pantalla emergente que sale.

Recuerda: No compartas tu API Key con nadie 👁️

04.png

Hagamos un paréntesis

¿Qué es Airtable?

Airtable es un servicio de colaboración en la nube. Funciona como un híbrido de hoja de cálculo y base de datos.

Nuestro directorio se alimenta de una base de datos hecha en airtable. La plantilla ya trae una integrada, nos queda clonarla a nuestro proyecto. Así que dale Copy template base.

05.png
06.png

Después de darle click se abrirá una pestaña con la base de datos de la plantilla. No podrás modificarla, es solo lectura. En la esquina superior está “copy base” . Selecciónalo y en la siguiente pestaña que se abre, elige el workspace que tú quieras y dale add base. Yo dejé el que estaba.

Una vez que agregues la base a tu cuenta de airtable puedes su editar el nombre, color e ícono. Solo tienes que pasar el puntero por encima y seleccionar la flecha blanca.

07.png

Selecciona la base de datos de tu directorio. Vamos a editarla con las categorías que queremos. Para modificar las columnas selecciona la flecha que está junto a cada nombre.

08.png

Así se ve mi base de datos ya limpiada y con las categorías que quiero. Dejé una fila de test para evitar problemas al conectar mi base.

09.png

Nota que he quitado todos los checks de “approved”.

¿Para qué?

Lo veremos adelante. De mientras regresemos a softr.io y selecciona “click here to refresh” para que salga la base de datos que hemos creado en el dropdown menu.

10.png

Personalizando el directorio

Editemos el copy del directorio. Al colocar el punto sobre los bloques de la página puedes eliminarlas, duplicarlas, ocultarlas y moverlas. Si haces click sobre los bloques los podrás editar. Explora los diferentes bloques utilizando el botón + y personaliza tu directorio.

11.png

Cuando selecciones el bloque que muestra los registros, el menú lateral te mostrará distintas maneras de configurar qué información y cómo se mostrará en la página. En mi caso, para el directorio he puesto que solo se vea el board de airtable donde están startups aprobadas. También puedes configurar cómo se verá cada card. En el campo de search bar selecciona todas las categorías que estarán consideradas cuando alguien busque una startup. Yo activé todas.

12.png

Así quedó el MVP del directorio.

13.png

Ahora vamos a configurar el botón para registrar una startup. Ve a pages y selecciona la página “add-job”. Puedes editar el SEO, la ruta, el foot, header, entre otras cosas al hacer click en los tres puntos. Si cambias la url de tu formulario, no olvides actualizarla en el botón de registro. De lo contrario te marcará error.

Personaliza los campos que vas a captar de la misma manera al seleccionar el bloque de formulario. Cada campo tendrá el tipo de dato, label o nombre a mostrar, el placeholder y el tag. Este último dato es muy importante que coincida con el nombre de la columna correspondiente en airtable.

Imgur

¡Listo!

Ya quedó nuestro directorio. Solo queda publicarlo. Puedes utilizar un subdominio de softr.io o si ya tienes el tuyo, agregarlo. Puedes encontrar el directorio aquí.

Screen Shot 2022-01-07 at 8.36.57.png
Curso para Crear un MVP sin Código
Curso para Crear un MVP sin Código

Curso para Crear un MVP sin Código

En este curso verás cómo validar tu idea de emprendimiento a través de un mínimo producto viable. Construirás tu producto digital con herramientas no-code y aprenderás cómo analizar los resultados de tu lanzamiento. Descubre cómo desarrollar una aplicación web progresiva completa para todos los dispositivos usando Adalo.
Diana
Diana
korpi

39362Puntos

hace 10 días

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4
35949Puntos

Larga vida al No-Code.

7
4331Puntos
10 días

jajaja. Larga vida al “¡Hola Mundo!”

2
4113Puntos

Gracias Diana por el articulo. Abre un mundo de posibilidades. Entre al sitio y conoci algunas empresas interesantes. Creotec entre ellas. Sus historias muy motivadoras. Gracias Diana.

2

Disculpen soy nuevo, !

2
40967Puntos
8 días

¡Hola PlatziNauta! 🙌
¿Hay algo en lo que pueda ayudarte? 😊

2

Soy maestro y quiero aprender a usar la pantalla con mis alumnos usando notas y movimientos. Que curso me recomiendan para empezar? Gracias

2
15060Puntos

Un artículo muy práctico que me llevo a probar todo el día una idea que tenía para mis clases y entender el potencial que hay en las herramientas No-Code.

1
4331Puntos

El No-Code es bueno, pero el Low-Code es mucho mejor!

1
12433Puntos

Que buen articulo, no sabia que era el no-code y como aplicarlo. con este articulo me quedo más claro.

1
4571Puntos

Wow! Increible, muchas gracias.

1

Ya había leído sobre este tipo de aplicaciones pero no sabia cómo funcionaban hasta ahora, definitivamente esto para una empresa es un gran plus para mejorar y/o acelerar parte de sus procesos internos, gran articulo.