Creo una APP Funcional en Minutos que AUTOMATIZA TODO por IA GRATIS

El equilibrio no nace de lo igual, sino de la unión y balance de lo más opuesto. Hoy en día podemos hacer casi cualquier cosa: crear aplicaciones sin programar, automatizar procesos en una tarde y generar imágenes, vídeos o contenidos con un simple prompt. Cualquiera podría hacerlo, pero cuando unimos todos estos elementos se transforma en un sistema monetizable capaz de resolver problemas reales. Por ello, en este vídeo estaremos viendo cómo crear una aplicación que no se quede solo en lo visual, sino que tenga una infraestructura por detrás para solventar necesidades. Para ello, estaremos utilizando Firebase Studio para crear un prototipo y la aplicación funcional. Luego, estaremos usando Make para crear toda la lógica y automatizaciones para ofrecer un servicio real. Por último, usaremos Gemini para crear la landing de ventas, imágenes y demás contenidos para difundir nuestro proyecto. Lo que veremos será cómo tener un equipo de expertos, solo que a diferencia de uno real, estarán disponibles las 24/7 y de forma gratuita. ¿Suena bien? Pues comencemos por el primer paso. Vamos a empezar creando el prototipo de nuestra aplicación. Para ello necesitaremos una herramienta escalable que nos permita iterar mucho sin llegar a un límite y que esté basado en uno de los modelos más potentes como Gemini Pro. Para hacer esto posible, saltemos a Firebase Studio, una plataforma que te vas a encontrar enlace abajo en la descripción, y cuando cliques en este aterrizarás a esta página de aquí, desde donde si clicamos en Try Firebase Studio aterrizaríamos a esta visual para ponerle un prompt y hacer real nuestra aplicación. Para este caso de uso yo voy a crear una aplicación automatizada que permitan a los pequeños comercios gestionar todas sus reservas y citas sin necesidad de que tengan que dedicarle tiempo a ello, haciendo posible que un cliente pueda seleccionar una fecha y que la inteligencia artificial, que es la que vamos a estar construyendo a lo largo del vídeo, se ocupe de gestionar las reservas, enviar comunicaciones, e incluso que una inteligencia artificial orqueste todo. Algo que podría venir genial a restaurantes, peluquerías y otro tipo de negocio. Y para hacer esto posible, lo primero que tenemos que hacer sería escribir aquí un prompt como el que yo acabo de poner, en donde le especifico que quiero crear una interfaz web de una aplicación de reservas de citas, pero ya le especifico también qué tipo de información me gustaría que el usuario pueda modificar, como es el campo de elegir una fecha, que añade también las diferentes horas según disponibilidad, y que el usuario pues pueda escribir su nombre y correo electrónico para que el negocio sepa a quién dirigirse. Además, cuando cliquemos en reservar, le voy a decir que yo todo esto lo voy a conectar con una herramienta llamada Make, que es la que se va a encargar de, por un lado, decir las horas que tenemos disponibles y, por otro lado, enviar la confirmación de reserva para que la herramienta ya empiece a hacer toda la arquitectura acorde a la funcionalidad real que va a haber por detrás. Así que con todo esto, si clicamos en prototipar con inteligencia artificial, lo primero que nos vamos a encontrar es cómo la inteligencia artificial de Gemini nos propone un diseño para nuestra aplicación con esta selección de horas, botón de reserva e incluso cómo deberían ser la guía de estilos de esta herramienta. Eso lo podemos modificar, pero como nos vamos a centrar en lo funcional, voy a clicar en prototipar esta aplicación. Y poquito más tarde ya me podría encontrar una aplicación como esta de aquí llamada Cita Fácil, en donde con 3 sencillos pasos el usuario va a poder gestionar su cita. Para ello simplemente tendría que escribir el nombre, un correo electrónico, y seleccionando una fecha pues podría reservarlo. No obstante, como la aplicación ahora mismo no está conectada a nada, pues independientemente que nosotros rellenáramos la información, realmente no se ejecutaría ninguna reserva. Y es que para hacerlo de una forma real vamos a saltar al segundo bloque, donde estaremos viendo cómo vamos a construir toda la infraestructura y lógica de nuestra aplicación. Para hacer esto posible vamos a estar utilizando Make, y aquí voy a estar creando dos automatizaciones. Por un lado, una que consulte mi calendario para ver qué huecos tengo disponibles para que el usuario pueda reservar. Y en segundo lugar, una vez el usuario haga la reserva de su cita, pues tendré otra automatización que se encargue de reservar la cita para bloquear el calendario. También todo eso lo voy a querer en una hoja de cálculo para tener el seguimiento. Y además le voy a pedir a la inteligencia artificial que redacte un email personalizado a cada usuario para que le confirme que su cita se reservó con éxito. Vamos a empezar por la primera automatización, así que para ello desde Mail vamos a clicar en crear nuevo escenario, y desde aquí vamos a interconectar todas las herramientas necesarias. Lo primero de todo sería tener un webhook, ya que esto se encarga de enviar eventos a cualquier herramienta que se conecte con esta información. Algo que podremos poner en nuestra aplicación. Así que por ello voy a seleccionar Custom Webhook, y al clicar en añadir le daríamos un nombre, como por ejemplo Calendar. Guardamos, y ahora nos vamos a encontrar con esta URL que va a ser la encargada de conectarse con nuestra herramienta y que Make pueda funcionar por detrás. Así que para ello nosotros copiaríamos la URL y desde Firebase Studio le diríamos que ya tenemos el webhook para el escenario 1, para toda la parte de comprobar la disponibilidad. Aquí simplemente le decimos que la URL sería esta, y si clicamos en enviar, pues poquito más tarde Firebase nos diría que ya ha modificado lo necesario para que realmente se comunique con esa URL cuando quiera comprobar la disponibilidad que tenemos. Así que ahora tan solo tendríamos que configurar desde Make las herramientas con las que vamos a gestionar toda esa disponibilidad para enviarle la respuesta de vuelta. Para ello yo me he preparado esta automatización desde donde, sobre el webhook que hemos conectado a nuestra aplicación, yo la he conectado al Google Calendar, pero realmente clicando en el más tú podrás interconectarla con cualquier otra herramienta porque realmente hay miles, aunque yo lo gestionaré todas las reservas por esta. Al entrar aquí pues va a comprobar qué disponibilidad tengo en mi Google Calendar y una vez hace eso organiza la información hasta devolverla de vuelta a la aplicación. Y es que ahora, si yo clico en Run Once, aquí el webhook va a esperar hasta que alguien intente comprobar la disponibilidad para ejecutar esta automatización. Y para ver si esto funciona, voy a poner aquí de nombre Alejavi, de email pongo alejavitest. Pues al clicar en seleccionar una fecha, antes de yo clicar cualquiera, vamos a ver que esto sigue pensando. Pero si yo, por ejemplo, seleccionase el lunes, ahora aquí habría hecho una llamada y me muestra las horas que tenemos disponibles, desde las 9 de la mañana hasta las 5 y media de la tarde. Y es que si nos vamos al escenario vamos a poder ver cómo la automatización ha pasado por cada uno de estos pasos hasta devolver al final la respuesta a nuestra aplicación, haciendo posible que ahora podamos elegir cualquier hora y gestionar la reserva. No obstante, la automatización que hemos hecho solamente era para comprobar la disponibilidad y ver las horas disponibles, pero ahora vamos a estar creando un sistema completo para que cuando el usuario clique en reservar realmente se gestione la reserva se pase todo a una base de datos y el usuario reciba una comunicación personalizada por inteligencia artificial. Y para hacer esto posible, el proceso sería muy similar al primero, solo que con un escenario distinto. Para comprobarlo, vamos a saltar a Make, y ahora te voy a mostrar el segundo escenario que me he preparado para que este se ejecute cuando el usuario clique el botón de reservar. Y es que aquí nuevamente he elegido un nuevo webhook llamado reserva, y con esta otra URL yo le dije por aquí a Firebase que ese era el webhook para gestionar la reserva, dándole la URL, y además les puse en segundo mensaje, que aquí me gustaría que asegurase de que envíe toda la información que pone el usuario en la interfaz, como es el nombre, el email, la fecha y hora seleccionada. Y al hacer eso, pues toda esa información se pasaría por esa automatización, haciendo posible que en el calendario podamos poner un nombre de evento personalizado, en este caso reserva de, y aquí seleccionando la variable que estamos cogiendo del webhook del nombre que habría puesto el usuario en la aplicación, así como la fecha que ha reservado. Una vez tenemos esto, yo lo he conectado con Gemini, ya que con este voy a querer que cree un email personalizado a nombre de la persona que hizo la reserva. Y además, lo bueno que tenemos al utilizar Gemini es que su API es gratuita. Para adquirir una, simplemente sobre Google AI Studio clicaríamos en Get API Key, le damos a crear nueva API, y al seleccionar o crear un proyecto y crear la clave nos aparecerá una API que si la copiamos Y desde Make, si clicamos en añadir, le damos cualquier nombre, como por ejemplo Tuto, pegamos la API key y damos a guardar, pues ya vamos a tener acceso a los modelos más avanzados de Gemini. Que de hecho, si le damos un clic aquí, vamos a poder ver que están todos los modelos de esta compañía, pudiendo así utilizarlos sin necesidad de poner créditos y con límites bastante extensos. Por lo que ya teniéndolo conectado con la inteligencia artificial y haciendo posible que se redacte un email, yo este lo voy a volcar sobre una hoja de cálculos que me creé en mi Google Drive llamada seguimiento para que me vuelque en cada columna toda la información recibida, tanto el nombre, la fecha, la hora, el email del cliente y de paso el contenido del email que nos hizo Gemini, para que realmente pueda tener un control de todo lo que se ha estado haciendo. Y ya una vez con toda esa información, lo conecto también al email para que realmente el usuario pueda recibir esa confirmación. Aquí como remitente pondría el email que estamos recibiendo del webhook y como asunto lo voy a personalizar con su nombre diciéndole que la cita está reservada. De contenido he seleccionado el resultado en texto que nos habría dado Gemini, y con todo eso pues ya nuestro sistema estaría funcionando, terminando aquí con otro webhook de respuesta, que este por cierto es el único que te aparecería cuando quieres utilizarlo tras tener seleccionado el primero que recibe las cosas. Así que ahora vamos a ponerlo a prueba. Para ello yo he saltado a mi Google Calendar y como puedes ver yo tengo todas las citas libres, es decir, me debería dejar elegir cualquier hora como hemos visto en el primer paso. Pero ahora cuando alguien reserve me debería de aparecer aquí la cita configurada. Desde la hoja de cálculos que me he preparado con esas 4 columnas me debería de ir rellenando cada cita que se está confirmando con toda la información y además el usuario debería de recibir un email. Vamos a ver si esto sucede. Para ello yo desde aquí ya le he configurado que siempre se active una vez recibe información, pero para poder ver el paso a paso voy a clicar en Run Once nuevamente. Aquí ya estaría esperando a que pase algo. Así que volviendo a nuestra aplicación, voy a rellenar nuevamente con la información, solo que esta vez voy a seleccionar el día 25, que sería el lunes, a las 4 de la tarde. Y ahora cuando clique en reserva ahora, por aquí estaría cargando, ya que si nos vamos a la automatización vamos a estar viendo cómo esto estaría corriendo en cada uno de los pasos. Y al volver a la herramienta nos dice que la reserva se ha confirmado con éxito. Así que vamos a ver lo que ha hecho. Y es que si yo salto a mi Google Calendar, fíjate cómo tenemos por aquí un evento llamado reserva de Y el nombre del cliente, que sería Alejavi. Así que por aquí perfectamente configurado. En la hoja de cálculos nos aparecería cada una de las columnas rellenas, tanto con el nombre, la fecha, la hora, el email del usuario y qué contenido le hemos enviado de forma personalizada con la inteligencia artificial de Gemini. Y por último, como yo he puesto un email mío de prueba, vamos a ver qué hemos recibido. Y aquí efectivamente habré recibido el email teniendo un asunto personalizado a mi nombre diciendo: Alejavi, tu cita se ha confirmado. Y un email en donde nos confirma que la reserva se ha realizado correctamente y que nos vemos pronto en la peluquería, ya que en el prompt yo le dije que simulara como si yo fuese un peluquero. Y es que con esto realmente acabaríamos de crear una aplicación totalmente funcional que lo podríamos utilizar de forma real en nuestro negocio si tuviésemos alguno, o incluso crear esta solución para cualquier otro negocio al cual le queramos vender esto como una suscripción para gestionar todas sus citas. El ejemplo que acabamos de ver es solamente con las reservas, pero podríamos hacer cualquier tipo de servicio como gestión logística o cualquier otra necesidad que veas en el mercado. Con este ejemplo ya no nos hemos quedado solamente en la parte visual, sino que tenemos unas automatizaciones por detrás que hacen tareas reales. Ahora vamos a estar viendo cómo podemos escalar todo este proyecto que estaría en una versión 1, ya que ahora, una vez sí que está funcionando, podemos preocuparnos por esos detalles que hagan que luzca más profesional. Por ejemplo, desde Farbis Studio, más allá de tener estas opciones que la verdad es que cumplen su función, podríamos escribir desde aquí que nos lo haga más bonito con botones en 3D, un modo noche y una pantalla de confirmación con animación. También, además de esto, le digo que solo cambie la parte visual, ya que la parte funcional estaría perfecta. Y ahora, si clicamos en enviar, pues poquito más tarde nos diría por el chat que ha modificado todos estos archivos de aquí para hacerlo más visual. Y de hecho, si nos vamos a la herramienta, podemos ver cómo ha añadido esos tonos oscuros del modo noche que le hemos pedido. Y junto a esto también le pide una página confirmación. Así que vamos a seleccionar alguna otra fecha, como por ejemplo el martes 26 a las 11:30 de la mañana. Y si clico en reservar ahora, fíjate cómo los botones ha tenido esa animación en 3D. Y ya tendríamos esta página de confirmación que nos muestra un resumen con la confirmación de esta reserva, diciéndonos el nombre, cuál es la fecha y hora que hemos seleccionado, y que en breve vamos a recibir un email con la confirmación. Nuevamente, si yo me voy al calendar, pues podemos ver que a las 11:30 tenemos esa cita a nombre de Alejavi Rivera. En nuestra base de datos también nos aparecería esta segunda cita, y por el email de igual forma hemos recibido esta comunicación, que como puedes ver sería distinto a la anterior, ya que la inteligencia artificial lo estaría personalizando. No obstante, el apartado de las mejoras no solamente se puede quedar en la parte visual, sino que podemos mejorar también todo el apartado más funcional. Y es que, volviendo a los escenarios, ten en cuenta que nosotros tenemos 2 automatizaciones activas, que son las que nos permiten en el plan gratuito, pero podríamos escalarlo, pues, por ejemplo, para automatizar las facturas, realizar pagos, o con cualquier otra funcionalidad que le queramos dar a nuestra herramienta. Y aquí, gracias a que estoy colaborando con Make, me han dejado un enlace especial que te voy a dejar abajo en la descripción para que puedas adquirir sin poner ninguna tarjeta de crédito el plan Pro con escenarios ilimitados y otras ventajas más durante el primer mes. Además de esto, ten en cuenta que sería muy sencillo añadirle un registro e inicio de sesión a la aplicación e incluso alguna pasarela de pago si queremos ofrecer funcionalidades premium. Aunque de esto ya hablaba en todo detalle en este otro vídeo de aquí, que podría compaginar muy bien con este que estás viendo en el caso que quieras añadir ese tipo de funciones. Vamos a pasar ahora a todo el apartado de difusión de nuestra aplicación. Y es que realmente con inteligencia artificial aparte de poder conectar aplicaciones que podemos hacer sin necesidad de saber programar y darle por detrás una lógica funcional para que resuelva problemas reales, pues aquí quizás creemos algo que les pueda servir de ayuda a otras empresas. Pero es muy importante tener una presencia en internet para hacernos ver con este nuevo proyecto. Y para hacer esto yo te recomiendo que volvamos a Firebase Studio, ya que desde aquí lo que no todos saben es que aparte de poder crear herramientas de forma gratuita e iterar todo lo que queramos, también podríamos descargar todo el proyecto para tenerlo en local y hacer las transformaciones que necesitemos. Y es que nosotros, si clicamos en este icono de Switch to Code, se nos van a cargar todo el proyecto a código que hay detrás de esta aplicación, que como puedes ver tenemos bastantes archivos que hacen posible lo que acabas de ver. De aquí lo más interesante es que si seleccionamos desde el primer archivo hasta el último manteniendo el botón Shift, podríamos ahora clicar en el botón derecho y seleccionar zip y descarga. De esa forma lo podremos descargar en local. Yo de hecho por aquí ya lo acabo de hacer y al descomprimirlo me estoy encontrando con todas las carpetas y archivos detrás de mi herramienta. Así que ahora con toda esta información yo podría venir a Gemini, seleccionar todos los archivos y subirlo a esta plataforma. Y una vez ya los tengo por aquí subidos, pues le puedo decir desde el apartado de prompt que me cree una landing page de esta aplicación, ya que realmente va a tener por ahí toda la información. Aunque evidentemente también le podrías dar más información o incluso subirle captura de cuál es su funcionamiento. Con lo que le hayas especificado, si seleccionamos Canvas y enviamos, pues unos minutos más tarde nos podríamos encontrar un resultado como este de aquí, en donde nos muestran una página web que dice tu agenda de citas automatizada con inteligencia artificial. Nos dice cómo nuestra IA gestiona la reserva 24/7 sin perder ningún cliente. Y junto a esto pues nos encontramos diferentes aspectos clave, como que el asistente funciona las 24 horas, que tiene una sincronización perfecta con los calendarios, y además añade recordatorios a los usuarios. Nos dice cómo podríamos utilizarla con 3 simples pasos, y hasta nos ha añadido un plan que podríamos tener para ofrecer límites mayores a los usuarios de pago. Esto, ten en cuenta que tenemos diferentes botones, solo que si yo los clico ahora mismo no funcionaría ninguno. Así que desde aquí yo ahora lo que voy a hacer va a ser publicar la aplicación que tenemos en Firebase Studio para poder poner la URL en esta landing, y también le voy a pedir algunos cambios como que me añada formularios. Y es que si nosotros volvemos a Firebase Studio, ten en cuenta que desde esta bolita de internet, al clicarlo, por defecto la aplicación estará en privado, pero si le das a publicar vas a poder copiar la URL, y de esa forma, si desde el apartado prompt le decimos que nos cambie esos 3 botones teniendo en cuenta que todo lo relacionado para empezar ahora lo redirija a nuestra aplicación pública, y que además en este botón de solicitar una demo nos añada un formulario con nombre e email si lo enviamos, pues poquito más tarde nos diría que ya lo ha cambiado todo. Y aunque a priori veamos todo igual, yo ahora si clico en cualquier botón, como por ejemplo solicitar una demo, me aparecería este formulario con nombre y correo electrónico como le hemos pedido. Además, si yo clico en el botón de empieza gratis, automáticamente me va a redirigir a mi aplicación de cita fácil. Y es que con esto ya no solo hablamos que la inteligencia artificial nos puede ayudar con esa parte más técnica de código o de automatización, sino que realmente nos puede ayudar como un equipo de marketing o ventas creando nuestra página web y en definitiva todo lo que queramos construir alrededor de esta aplicación. Y es que de hecho, volviendo a Gemini, más allá de crear una página web Nosotros le podríamos decir que con toda esta información, manteniéndonos en Canvas, nos cree el contenido de 5 emails de lanzamiento de este proyecto. Si yo ahora clico en enviar, pues ya Gemini va a empezar a procesar, solo que ahora el Canvas, en lugar de editar en formato código, nos lo estaría haciendo en formato texto, teniendo por aquí un email 7 días antes del lanzamiento con su asunto y cuerpo. También podríamos tener otro email 5 días antes del lanzamiento, y así de forma sucesiva hasta el lanzamiento oficial con todos los contenidos listos para copiar y ponerlos a funcionar. De una forma similar también podríamos utilizar Gemini para generar todos los contenidos que queramos publicar, por ejemplo, en las redes sociales. Y es que de hecho, si volvemos a Gemini y nos vamos al resultado que hicimos antes, nosotros ahora podríamos copiar todo este código HTML que tiene un montón de información interesante describiendo nuestro proyecto, y desde un nuevo chat de Gemini lo podríamos pegar, y desde aquí abajo decirle que con todo lo que sabe de nuestra aplicación genere una imagen para publicar el lanzamiento en LinkedIn. Aquí ahora yo podría seleccionar el apartado de imagen, y si clico en enviar, pues ya va a empezar a analizar todos los contenidos que hay en la página web que acabamos de hacer en el paso anterior, para que unos segundos más tarde ya nos encontremos una imagen como esta de aquí, en donde podemos ver cómo un robot de inteligencia artificial podría estar gestionando todo el calendario en automático, haciendo así que crear contenido sea más fácil que nunca, pero que sobre todo encajen perfectamente con el proyecto que estemos trabajando. De una forma similar también lo podremos hacer con el formato vídeo. Esta es la única función que sí sería de pago, ya que actualmente VO3 solo estaría disponible desde las versiones Pro. Pero porque lo tengas en cuenta, tú podrías trabajar con este formato simplemente seleccionándolo y escribiendo un prompt como la de un peluquero loco con personas esperando y hablando bien de nuestra aplicación. Un poquito más tarde nos podríamos encontrar un resultado como este, pero para que lo puedas ver mejor te lo voy a dejar por aquí. Con Cita Fácil ahora puedo dedicar tiempo a lo mío. Ya que dejo que la IA se ocupe de mis reservas. Lo cierto es que esto nos ayuda a crear sistemas completos en tiempo récord. Pero eso sí, no se trata tanto de la velocidad del resultado, sino de la profundidad del impacto que dejamos.