BRUTAL! Creo una APP MONETIZABLE por IA GRATIS para Android, iPhone y Web 📱 Tutorial FÁCIL

Las grandes ideas no siempre necesitan grandes presupuestos. Durante años, crear una aplicación requería conocimiento, equipo, inversión y tiempo. Pero ahora podemos encontrarnos esta aplicación, esta y esta otra, que se crearon sin estos requerimientos. En este vídeo estaremos viendo la forma más fácil de crear una aplicación de multiplataforma que podamos publicarla como web, en la App Store de Android o la Apple Store de los iPhone, y sin tener conocimientos de programación. Esto lo haremos en pocos minutos con los siguientes pasos: creando una aplicación primera versión de la aplicación que luego podamos mejorar y ejecutar. La personalizaremos e incluso podremos publicarla en cualquier plataforma. Lo mejor es que lo estaremos haciendo con estas inteligencias artificiales de aquí, que vas a poder utilizar de una forma totalmente gratuita. ¿Suena bien? Pues comencemos por el primer paso. Vamos a empezar creando la primera versión de nuestra app. Bueno, realmente no lo haremos nosotros, sino la inteligencia artificial. Lo que sí será nuestra tarea es elegir una buena idea que solvente un problema real. Aquí podrías ir a páginas como Trustpilot y fijarte en las opiniones de las aplicaciones similares a las que vayas a hacer, mejorando sus deficiencias. Una vez sepas lo que quieres crear, tenemos que saltar a Bolt New, una herramienta que te vas a encontrar abajo en la descripción junto a todas las que estaremos viendo a lo largo de este vídeo. Cuando cliques sobre el primer enlace, vas a aterrizar a esta plataforma de aquí, desde donde para poder utilizarla tendríamos que clicar en Sign In e iniciar sesión con alguno de estos métodos. Y una vez lo tengas, ahora sí que vamos a poder crear nuestra primera versión de la app. Para ello, desde este apartado escribimos lo que queramos crear. En mi caso, viendo lo bien que funciona el sistema de Airbnb para las viviendas, le voy a pedir que directamente me clone esa página web, pero en mi caso para un alquiler de motos. Esta la voy a llamar Hermoto. Y muy importante en el prompt, que pongamos que la aplicación queremos que sea para smartphone con Expo. Esa es una herramienta que te estaré detallando en los próximos pasos. Ya teniendo todo esto, yo lo que te recomiendo sería que cliques en este botón de aquí, ya que si lo haces vas a ver que te va a aplicar una ingeniería de prompt de forma automática, por lo que no te tendrías que preocupar en tener que optimizar ese mensaje. Una vez ya tenemos todo, pues le daríamos a enviar y ya desde aquí pues nos empezaría a crear toda la aplicación. Y unos segundos más tarde ya lo tendríamos por aquí creado. Y como puedes ver, no tenemos una previsualización, ya que realmente tendríamos que coger nuestro smartphone y escanearlo. Además, desde tu smartphone te tendrás que descargar esta aplicación de aquí. Yo, como ya la tengo instalada, voy a entrar en la cámara y escanear este código QR, le doy un clic y ya se me abriría en Expo y se me empezaría a cargar esta aplicación. Y listo, ya la tendría por mi teléfono móvil y ahora lo voy a poder probar. Y aquí, como puedo estar viendo, yo tengo dos modelos con una visual similar poniéndome el precio por día. Además, va a aparecer aquí un mapa que veo que también es totalmente funcional, y esto la verdad es que no se lo había pedido. Y veo además dónde estarían ubicadas las motos, teniendo aquí una que sería la Harley-Davidson y aquí tendría la otra que sería la Ducati. Si le doy mostrar lista, me aparecerían estas dos motos solo, y además si le doy un clic veo que no se me llega a abrir. Además, el filtro tampoco funcionaría. Y el buscador, si pongo alguna ubicación que está por aquí, como por ejemplo Brooklyn, al darle un intro pues realmente tampoco haría nada. Y oye, como primer resultado la verdad es que no está nada mal. Y es que como puedes ver, ya lo tenemos optimizado para los teléfonos móviles, así que tendríamos que tirar un poco. Pero antes debes de saber algo, y es que si me voy al inicio de la plataforma y entro en los ajustes, sobre el apartado de tokens vas a ver que de forma diaria tenemos un límite de 150.000 tokens. Yo aquí realmente, como he hecho pruebas previas, pues ya casi habría llegado al límite. Pero no te preocupes, porque con los siguientes pasos vas a ver cómo lo vamos a poder hacer de forma ilimitada. Antes de adelantarnos, vuelvo a la aplicación y desde aquí le voy a pedir un cambio más, en donde le estoy diciendo que la haga totalmente funcional, que la página inicio sea como la de Airbnb y que tengamos pues todos esos apartados de categorías, recomendaciones, filtros. Y además, aunque sea ficticio, porque esto es una primera versión, me gustaría ver el proceso de reserva para que cuando clique en una moto pues me aparezcan más opciones. Yo ahora esto le voy a dar a mejorar prompt, y una vez ya lo tenemos todo esto más detallado, le doy a enviar y ya me empezaría por aquí a aplicar todo el código necesario. En en torno a un minuto más tarde ya lo tendríamos en teoría aplicado. Así que cojo de nuevo mi teléfono y lo voy a escanear. Ya por aquí se empezaría a cargar nuevamente y listo, ya tendría por aquí cargada mi aplicación. Vamos a ver cómo ha quedado. Ahora sí que estaría viendo por aquí algunas categorías más. Además, si deslizo hacia abajo veo que tenemos también más motos. Estas tienen algo más de información, como por ejemplo las reviews, tal y como tenemos en Airbnb. Y además, si clico sobre alguna moto, como por ejemplo esta, pues puedo ver que se despliega algo más de información. También me pondría los puntos clave y por abajo también un botón de reservar ahora. Yendo para atrás, sí que es cierto que veo que los modelos no son los correctos, aunque esto evidentemente lo modificaríamos por las motos reales. Y por probar voy a mirar si clico en sport bikes si se filtra, y aquí efectivamente parece que solamente tendría esta. En motos de aventura tendría la Harley-Davidson y una KTM. Y en off-road, que creo recordar que no había ninguna, efectivamente no nos aparecería nada. Así que al parecer estos filtros sí que funcionan, aunque las otras opciones realmente habría que quitar un poquito más. Y esta aplicación pues de forma consecutiva la podríamos seguir puliendo más. Yo sin embargo la voy a dejar así, pero voy a volver a la plataforma ya que te quiero mencionar que incluso podrías conectarlo con Supabase para que le pudieras poner un login y registro de forma sencilla. Pero de esto ya lo estuvimos viendo en detalle en este otro vídeo de aquí, así que yo por ahora la voy a dejar así y la vamos a mejorar y ejecutar en el siguiente paso. La aplicación que hemos hecho en el paso anterior está en BoldNew, pero ahora en este paso nos vamos a descargar ese proyecto para tener nosotros esa propiedad. Y además vamos a estar utilizando una herramienta gratuita ilimitada para seguir iterando sin límites. Para verlo tendríamos primero que volver a Bolt New y desde nuestro proyecto clicar en exportar y seleccionar el botón de descargar. Y una vez lo tengamos descargado, abriríamos nuestra carpeta de descarga y le daríamos un doble clic. Ya por aquí lo tendríamos descomprimido. Ahora le daríamos un nombre cambiando el que tiene la carpeta. Yo le voy a escribir Air Moto y le doy un intro. El archivo que tenemos comprimido realmente, como es el mismo que este, lo podríamos borrar. Y ahora si entramos en este proyecto, pues nos vamos a encontrar con un montón de código que realmente podremos modificar desde alguna plataforma. Para ello yo te recomiendo plataformas como la de Cursor, que estuvimos viendo en este vídeo de aquí para crear una aplicación Android, ya que esta es capaz de programar en cualquier proyecto que tú les des acceso, como por ejemplo la carpeta que me he descargado. Sin embargo, aunque esta la podamos utilizar gratuitamente, también tenemos ciertos límites, y para evitarlos yo te recomendaría directamente esta otra herramienta que es de la compañía de ByteDance, y actualmente, como están en fase beta, nos dejan utilizarla de forma gratuita ilimitada. Aquí ten en cuenta que lo vas a tener disponible tanto para Mac como para Windows. Así que yo me lo voy a descargar, y una vez descargado e instalado nos encontraríamos con esta visual de aquí, desde donde tenemos que clicar en abrir carpeta y seleccionar la de nuestro proyecto. Clico en abrir y permitiríamos todos los accesos, autorizamos, y ya este programa, pues como puedes ver en este apartado de aquí, estaría leyendo todos los archivos. Así que ahora lo que voy a hacer va a ser ejecutar este programa en local para ver si realmente funciona igual de bien. Para hacerlo tendremos que clicar en este botón de aquí, ya que de esa forma vamos a entrar en el terminal. Y sé que esto puede llegar a intimidar un poco, sobre todo con los diferentes comandos que tenemos que escribir, pero no te preocupes porque te he preparado este documento de aquí, que es el que yo voy a utilizar en el tutorial, en donde te muestra cada comando, qué es y cuándo lo deberíamos de poner. No obstante, en este tutorial lo vamos a ver. Así que yéndome arriba del todo y empezando por el primero, para configurar el proyecto inicial vamos primero a instalar todas las dependencias para que esta aplicación funcione en nuestro ordenador. Así que copio este y desde el terminal lo pegaría. Si está bien escrito nos pondría npm install, y si le doy un intro, pues segundos más tarde, en concreto 6, nos tendría que decir que nos ha añadido diferentes paquetes para que esto funcione. Teniendo hecho esto, volvemos al documento y vamos al segundo paso, que es el que va a hacer posible iniciar esta tecnología de Expo, la que hará capaz que nuestra aplicación se pueda publicar en la Play Store, Apple Store o una web. Por lo que copiamos este y lo pegaríamos por aquí. Pulso tecla hacia la derecha y le damos un intro. Y listo, ya lo tendríamos ejecutado. Ahora nos dice por aquí si lo queremos abrir en Android, iOS o en una web. Y para previsualizártelo de una forma rápida, yo lo voy a abrir en formato web, aunque también te comentaré cómo podríamos hacerlo en los otros dispositivos. Para hacerlo, fíjate que nos aparece aquí una letra, y según pone aquí, para que sea en la web simplemente tengo que pulsar en la W. Así que desde aquí escribo W y ya automáticamente me acaba de abrir mi aplicación en el navegador, que evidentemente aquí está un poco estirado porque está optimizado para dispositivos móviles, pero puedo ver que efectivamente sería la herramienta que yo he hecho antes. Esto, para que se vea bien, lo voy a poner estrecho como sería un dispositivo móvil. Y además, fíjate en la URL, que se estaría ejecutando en local. Así que ya tendríamos nuestra aplicación en nuestro propio ordenador pudiéndose ejecutar cuando nosotros queramos. Y aparte de ejecutar, también vamos a poder iterar. Así que para ello vuelvo a Try AI, y olvidándonos del terminal, ahora nos vamos a centrar en esta parte de la derecha, que por cierto, si no te saliera, tendrías que clicar justo en este botón para que se pueda habilitar. Y es que aquí vamos a tener la inteligencia artificial para que haga todo por nosotros. Aquí vas a ver un apartado de chat conversacional para preguntarle dudas, o el que me parece más interesante a mí siendo este llamado Builder. Y aquí tú vas a poder escribirle desde este apartado lo que quieras cambiar, e incluso donde pone Claude 3.5 Sonnet podrías cambiarlo por cualquiera de estos modelos. Yo sin embargo voy a mantener este, y aprovechando que por ahora esto es gratuito ilimitado, le voy a pedir el siguiente cambio en donde quiero que me añada una página de blog con artículos de motores en una página distinta que se llame blog. Así que clico en enviar y ya por aquí la inteligencia artificial parece que ha entendido todo y me está empezando a ejecutar los cambios en los archivos en donde se necesita modificar el código. Ya por aquí me dice que añadió un nuevo archivo llamado blog y le ha metido 122 líneas de código. Así que como aquí sigue trabajando, lo voy a dejar un rato más y ahora vuelvo contigo. Ya por aquí me acaba de decir que ha terminado y que ya estaría todo el trabajo realizado, y me estaría poniendo en verde todo el código que ha añadido. Pero como yo confío en la inteligencia artificial, lo voy a aceptar todo y ya en teoría lo tendría aplicado, por lo que desde mi aplicación Si yo ahora le escribo la ruta blog, al darle un intro, pues ya por aquí veo que me añade algunos artículos. Aunque sí que es cierto que si clico en alguno de ellos no me haría nada. Pero aquí, como vamos a poder iterar, le voy a escribir que haga el contenido de cada artículo para que cuando le haga un clic se pueda leerlo. Y ya de paso también le he pedido que añada un botón en la página principal para que se pueda acceder al blog. Así que con esto le doy a enviar. Unos 3 minutos más tarde ya me habría recomendado los cambios, así que los voy a aceptar. Y volviendo a la aplicación que por cierto lo voy a poner un poco más estrecho para que lo podamos ver mejor. Observo que ya tenemos por aquí el botón del blog tal y como se lo acabo de pedir. Si le doy un clic, pues entraríamos. Y además, si clico en cualquiera de estos artículos, pues ahora sí que sería totalmente funcional y tendríamos la información que evidentemente podríamos modificar. Vale, imaginemos que ya tenemos la versión final que queremos publicar, pues ahora tendremos que darle un poquito de identidad de marca. En este tercer paso vamos a estar creando el logo de la aplicación y además también vamos a renombrar el proyecto. Empezando por el logo, realmente podríamos utilizar un montón de herramientas de inteligencia artificial que son gratuitas, siendo una de las más recientes la plataforma de ReVe, otra inteligencia artificial que actualmente es gratuita y limitada por estar en beta. Desde aquí vamos a poder ver muy buena calidad de imágenes, ya que realmente es uno de los mejores modelos que hay en la actualidad. Así que desde aquí yo voy a crear mi logo, por lo que en el ratio de aspecto, al ser un logotipo, le voy a pedir el formato cuadrado. Voy a decirle que me haga 8 variaciones de una, y manteniendo encendida la opción de mejora de prompt, le pondría que me haga un logo para una app de smartphones de alquileres de motos. Y ahora si le doy a enviar, pues ya por aquí me la empezaría a crear. Y en cuestión de unos 15 segundos más tarde, pues ya tendría todas estas opciones, que sí que es cierto que me gusta más de una, pero observo que se me ha olvidado ponerle el nombre de la marca y se ha inventado otro. Así que le voy a poner el mismo prompt pero diciéndole que se llama Hermoto. Y clicando en enviar, pues ya tendría por aquí otras opciones. Y oye, la verdad es que no están nada mal. En este aspecto yo me voy a quedar con esta de aquí abajo, ya que realmente la veo bastante minimalista. Así que le voy a dar un clic y desde aquí arriba le daría a descargar. Una vez lo tengo en mi dispositivo, volvería a Trae AI y desde la carpeta de assets doy un clic. Y fíjate que tenemos un favicon, que esto básicamente es este icono que aparece cuando abres una pestaña, y también nos da la opción del icono de la aplicación. Así que yo, empezando por el favicon, este archivo lo voy a eliminar. Voy a arrastrar ahora desde las descargas justamente en esta carpeta la imagen, solo que ahora en botón derecho clico renombrar y pongo favicon. Y lo mismo con la del icono, por lo que este lo elimino, arrastro la misma imagen y le pondría exactamente el mismo nombre. Y listo. Ya con esto lo tendríamos aplicado. Ahora otra de las cosas que voy a hacer va a ser cambiar el nombre del proyecto. Para ello clico en app.json y donde pone name lo selecciono y pondría Hermoto. Y en el de abajo, como también es genérico, habría puesto exactamente lo mismo. Y ya una vez tenemos estos aspectos de la identidad de nuestra aplicación, estaríamos listos para publicar. Para hacerlo tendremos que volver a Trae AI y desde el apartado de terminal, al igual que pudimos ejecutar la aplicación en local, desde aquí también la vamos a poder publicar. Para empezar con un terminal limpio Le he clicado en el más y ahora desde aquí pues tendríamos que volver a poner diferentes comandos. Así que vamos a volver al documento y deslizando hacia abajo nos vamos a encontrar todo lo necesario para hacer la publicación. Antes de nada, requisitos a tener en cuenta: si quisieras publicar la aplicación en el Play Store de Android, pues tendrías un pago único de $25. Este ya lo he hecho para que veas cómo es la plataforma. Y luego, por otro lado, si quisieras publicarlo en la Apple Store, pues tendrías que hacer un pago anual de $99. Aunque ojo, tampoco te hace falta hacer ningún pago aquí porque también lo vas a poder ejecutar en la web. Para ver cómo sería todo esto, pues vamos a seguir en el documento y tendríamos que seguir todos estos pasos. El primero es para verificar que todo esté bien, así que copiamos este comando, lo pegamos y le damos un intro. Y este lo que va a hacer va a ser verificar que no tengamos ningún error antes de empezar a publicar. Desde aquí veo que tengo un par, así que como una de las recomendaciones que yo he puesto por aquí, podrías poner o bien este comando o pedirle a la inteligencia artificial que lo arregle. Yo voy a probar este primer método, así que copio y pegaría, envío, y ya me dice por aquí que instalando algunos módulos. Ahora me dice por aquí que para acabar con todos los errores ponga este comando, así que lo copio, pego por aquí y envío. Y ya me dice que todo estaría correcto, así que voy a volver para atrás, voy a seleccionar nuevamente el comando en donde nos ha salido los errores, y pegándolo y enviando me diría que me falla uno, así que voy a volver a hacer el proceso. Bueno, aquí por cambiar voy a aprovechar ahora con el segundo método de que lo haga la inteligencia artificial. Así que fíjate que en un error del terminal te va a aparecer este botón de añadir al chat, así que si le das un clic y automáticamente se te adjuntaría las líneas exactas donde tienes el error en el comando. Y si le das enviar, pues ya la inteligencia artificial lo estaría leyendo y desde aquí pues lo podríamos corregir. Aquí, como me ha dicho que sabe que puede ser el error, le he puesto que lo corrija y directamente me ha hecho un cambio. Así que primero lo voy a aceptar y voy a correr este comando tal y como me dice aquí. Ya por aquí me dice que lo ha aplicado todo. Además, he clicado en preview y parece que todo sigue en orden. Así que voy a iniciar un nuevo terminal y voy a volver a verificarlo. Así que envío, cruzamos los dedos, y ya nos dice que sí, que tenemos todos los checks listos y podemos proseguir. Siguiente paso, tenemos que instalar el CLI. Así que copiamos esto, pegaría por aquí y enviamos. Ya una vez instalado, le pondría el siguiente comando de la lista, y este nos pediría iniciar sesión en nuestra cuenta. A mí ya por aquí me aparece que estoy logueado, pero en tu caso primero te va a preguntar por el nombre de usuario y contraseña. Estas credenciales las vas a poder conseguir desde la página de Expo, que es la que hace posible tener una aplicación de multiplataforma. Así que desde aquí tendrías que clicar en sign up, harías un registro, y una vez lo tuvieras tendrías que pegar el nombre que le hayas puesto a usuario y posteriormente la contraseña. Así que por aquí pondríamos el nombre de usuario que hayamos elegido y y desde aquí la contraseña. Así que pego, envío, y listo, ya estaríamos logueados. Ya nos quedaría el penúltimo para iniciar el proyecto poniendo este, le decimos con la Y que queremos crear un nuevo proyecto, y ya en teoría pues tendríamos uno creado llamado Air Moto. Por último de este paso pues tenemos que poner este comando que va a hacer toda la configuración final. Así que lo enviamos, aceptamos con la Y, y listo, ya lo vamos a poder empezar a publicar. Desde aquí nos van a preguntar si lo queremos hacer para todos los dispositivos, solamente iOS o Android. Android. Aunque aquí también podrías hacerlo posteriormente poniendo cualquiera de estas opciones. Para mostrarte una forma rápida, yo primeramente lo voy a publicar en la web, así que voy a copiar el primer comando, voy a abrir desde aquí un nuevo terminal y le enviaría lo que he copiado. Vale, esto ya ha finalizado, así que le voy a poner el segundo comando para publicar en la web, que sería desplegarlo. Y yo directamente lo voy a poner en producción, así que envío. Desde aquí nos van a preguntar por un nombre, ya que realmente esta plataforma nos incluye un pequeño hosting y dominio personalizado. Así que yo le voy a poner hermoto.expo.app, le doy un intro y listo, ya lo tenemos por aquí publicado tal y como nos dice aquí. Vamos a ver si eso es cierto. Así que voy a copiar esta URL y desde el navegador la pego y le doy un intro. Y efectivamente, aquí tenemos la aplicación que estaría en ese hosting. Y ahora, si tú entrase directamente a esta URL, pues vas a ver que es cierto y que tendría la aplicación aquí puesta y la podría compartir ya con quien quisiera. Y con esto pues podrías adquirir feedback de los conocidos que prueben tu aplicación para ir mejorándola antes de plantearte pagar para poder publicarla tanto en Android como en iOS. Sin embargo, te voy a decir brevemente cómo podríamos hacerlo, y es que esto ya te lo dice el documento. Simplemente tendrías que poner este comando y de forma conversacional te van a ir preguntando las diferentes credenciales que tengas de cada plataforma para publicarlo. Por ejemplo, si fuese Android, pues yo copiaría esto y desde un nuevo terminal, para hacer las cosas bien, lo pegaría, enviaría, y ya proseguiría pues haciéndome diferentes preguntas, como por ejemplo el nombre que utilizar para la aplicación, que en mi caso sería este, Así que enviaría, le diría todo que sí, y ya no habría que hacer nada más. Ya como estás viendo por aquí, nos dice que lo está construyendo y que el proceso comenzará pronto. De anteriores pruebas que yo estaba haciendo, esto puede llegar a tardar incluso unos 20 minutos dependiendo de la complejidad de tu aplicación. Aquí, de hecho, por cierto, te voy a enseñar ahora dónde se publica esta aplicación Android. Pero antes, ten en cuenta que en este vídeo de aquí ya estuve haciendo el tutorial completo de cómo crear una aplicación para Android utilizando exactamente el mismo entorno de desarrollo que utilizaría un programador. Bien, teniendo eso en cuenta, si yo vuelvo a mi cuenta de Expo, al clicar en proyecto, pues por un lado me voy a encontrar con este proyecto último que es el que yo he creado, ya que los anteriores eran pruebas, y este se llama Air Moto. Y si le doy un clic para entrar, pues efectivamente por aquí ya me está diciendo que está configurando todo lo necesario para que nuestra aplicación se ponga en producción. Bueno, como esto suele tardar un poco, te voy a mostrar otro proyecto que llamé Moto Alquiler, en donde yo ya hice este proyecto. Es que fíjate que cuando tú ya tengas hecha tanto la aplicación Android como la iOS, que te aparecerá de la misma forma, tú le podrías dar un clic Y ya desde aquí podrías clicar en download, se te descargaría en tu dispositivo y ya con eso lo vas a poder publicar. Para las de Google tendría que ser desde la plataforma de Google Play Console, que también te voy a dejar el enlace abajo en la descripción. Y es que esta es la plataforma de desarrolladores por la que se pueden publicar las aplicaciones de forma oficial. Para ello ya sería tan fácil como clicar en crear aplicación, le daríamos un nombre, en mi caso Hermoto, seleccionaríamos nuestro idioma, le decimos que es una aplicación, si es gratis gratis o de pago, confirmaríamos los términos y le damos a crear aplicación. Y ahora pues podríamos clicar en probar y publicar, y desde aquí podría directamente ponerla en producción, pero yo te recomiendo que primero selecciones pruebas, le des a pruebas internas, y desde aquí crees una nueva versión. Ya simplemente subiríamos por aquí la aplicación descargada, y por aquí pues ya se empezaría a subir y cargar todo lo necesario para la publicación. De esta versión le tendrías que dar un nombre, como por ejemplo versión 1, y cuando tuviésemos todo, clicando en siguiente podríamos ver desde aquí la aplicación ya que realmente añadiendo un grupo de personas para testarla lo van a poder instalar directamente desde la Play Store. Pero también clicando en descarga podría descargarte esta APK y compartirla con quien quisiera. Y bueno, ¿qué te parece que hayamos podido hacer todo esto de una forma gratuita? Déjamelo por los comentarios y comparte si te gustó. Como estamos viendo, ya no se necesitan grandes recursos para crear algo, pero sí empezar para construir algo grande.