62

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

46952Puntos

hace 2 años

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. Mantén 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
Korpi
Korpi
korpi

46952Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
7
48397Puntos

Larga vida al No-Code.

8
16437Puntos
2 años

jajaja. Larga vida al “¡Hola Mundo!”

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

Disculpen soy nuevo, !

2
63970Puntos
2 años

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

2
18687Puntos

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.

2
5655Puntos

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.

1
24903Puntos

Wow como agiliza todo esto!!! La contrapartida es que no tienes control del software estimo…

1
27971Puntos

Es algo que no tenía conocimiento. Será motivo para probarlo.

1
11412Puntos

Este tema esta super interesante, muchas gracias!

1
26763Puntos

Me parece excelente quiero hacer una prueba con ello, pero mi duda es ¿qué limitaciones tiene él NO-CODE? Además de ¿qué punto es recomendable tener conocimiento de código para solucionar algún problema?

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.

1
16437Puntos

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

1
41171Puntos

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

1
16028Puntos

Wow! Increible, muchas gracias.