Creo una APP IOS en MINUTOS por IA GRATIS e ILIMITADA 🫡 Tutorial FÁCIL con TRAE y Xcode

Alejavi Rivera builds a complete iOS app called iSol in minutes using Trae AI and Xcode, without coding knowledge. The app pulls real solar data for sunrise, sunset, and UV radiation levels. He shows installation, generating code with Claude 3.7 Sonnet, testing on iPhone, and creating an app icon with Imagen 3.
Chapters
En el nuevo mundo digital, quien sabe pedir bien puede construir lo que quiera. Durante años ha existido una especie de idioma secreto conocido solo por unas personas que permitía convertir una idea en una realidad. Este lenguaje se llama programación, y gracias a que la IA generativa actúa de traductor, ahora puede ser usado por todos nosotros. De hecho, en este vídeo estaremos viendo una nueva inteligencia artificial que nos permitirá convertir un simple mensaje a una aplicación totalmente funcional. Podremos hacer programas más complejos como este en el estilo en 3D, pero lo interesante es que programará por nosotros en cualquier entorno de desarrollo, pudiendo crear, por ejemplo, aplicaciones como estas para iPhone en donde estuve utilizando exactamente los mismos programas que utilizaría un desarrollador. Lo mejor, la plataforma que estaremos viendo viene a cambiar el mercado, ya que la podremos usar, al menos a día de hoy, de una forma totalmente gratuita e ilimitada. ¿Suena bien? Pues veamos cuál es. La nueva inteligencia artificial que veremos viene por parte de una gran compañía china que es uno de los unicornios tecnológicos más importantes de todo el mundo. La empresa es ByteDance, creadora también de aplicaciones como TikTok o CapCut. Hoy nos comparten gratuitamente la plataforma de Trae AI, una herramienta a la que podrás aterrizar cuando cliques en el primer enlace de la descripción. Y al hacerlo, pues te vas a encontrar con esta visual de aquí, en donde haciendo scroll para abajo vamos a poder ver que se trata de una herramienta muy similar a Cursor que nos va a desarrollar cualquier código aunque nosotros no sepamos programar. Esta tiene muchas peculiaridades y para verlas todas me voy a ir arriba del todo. Y aquí sobre el apartado de descarga vas a poder ver que lo tenemos disponible tanto en dispositivos Mac como en Windows, por lo que aquí simplemente clicaríamos en descarga, le daríamos un clic al instalador, instalamos. Ahora clicaremos en Get Started, elegimos el tema, si queremos importar la configuración de alguna otra herramienta como la de cursor, y en el último paso tendríamos que instalar este apartado que pone Try Command. Una vez hecho esto ya lo podríamos utilizar y para ello sería tan simple como trabajar en esta parte de la derecha, y en concreto en la nueva funcionalidad de Builder, ya que esta se va a encargar de crear cualquier aplicación que nosotros le pidamos. Además, un punto interesante a tener en cuenta es que toda la programación que se haga la vamos a tener nosotros en local. Y además, clicando en este apartado de aquí, vamos a poder seleccionar cualquier modelo de inteligencia artificial que son los mejores para programar, como podría ser Claude 3.7 Sonnet, que lo vamos a poder utilizar desde aquí gratuita ilimitadamente, la versión anterior, modelos como DeepSeek. Y si nos volvemos al apartado del chat, podemos encontrar que también tenemos modelos como el GPT-4o de OpenAI, o incluso podríamos añadir modelos adicionales simplemente dándole un clic aquí. Yo, sin embargo, como lo quiero utilizar para programar y el mejor para programar es Claude 3.7 Sonnet, pues voy a mantener este. Conociendo esto, vamos a hacer una pequeña aplicación para ir conociendo esta herramienta. Aquí simplemente voy a clicar en este ejemplo de crear el juego de la serpiente, y ahora lo primero que nos van a preguntar es dónde queremos almacenar todo ese código que va a programar por nosotros. Así que voy a clicar en abrir carpeta y dentro del escritorio le voy a abrir una nueva carpeta que se va a llamar Snake, por lo que la selecciono y clico abrir. Clico en continuar y autorizo. Bien, ya habría accedido a esa carpeta y ahora empezaría a programar. Pero debes tener en cuenta una cosa, y es que como es una plataforma gratuita ilimitada, si nos metemos a ciertas horas pues quizá haya bastantes personas y tenemos que esperar una pequeña cola. Pero realmente no es mucho la espera, ya que por aquí, como estás viendo, conforme voy hablando va bajando. Y es que cada posición suele tardar en torno un segundo. Ahora bien, esto es cuando seleccionamos el modelo de Claude 3.7 Sonnet, que es el que está en auge, pero si selecciona cualquier otro como el 3.5 o el de DeepSeek, no habría ningún tipo de espera. Bien, esos segundos más tarde, pues ya nos empezaría a configurar por aquí todos los archivos que necesitaremos. En este caso, un HTML en donde me ha puesto 30 nuevas líneas de código, por eso nos aparece aquí un 30 más. Y en otros archivos como el estilo nos ha añadido otras 73 líneas. En el script 240 adicionales. Y en el caso que nosotros hagamos modificaciones, vamos a estar viendo que este apartado en rojo también se puede modificar el número. Eso querría decir que nos ha quitado líneas que ya había porque quizás nos esté causando algún error. Ahora, desde aquí nos dice que tenemos que ejecutar esto para poder correr el juego, así que voy a clicar en Run. Y conforme lo he hecho, voy a aceptar todos los archivos que nos ha programado simplemente clicándolo aquí. Una vez ha hecho todos los cambios, pues por aquí nos está explicando todas las cosas que ha hecho, pero deslizando hacia arriba, lo más interesante es que tenemos un botón llamado Preview. Si yo le doy un clic, automáticamente lo voy a poder previsualizar directamente Desde aquí, incluso si clico en Start Game, pues podemos ver que realmente es totalmente funcional. Pero es que aquí lo estamos ejecutando en local. Así que yo, si por aquí copio esta URL donde se estaría ejecutando en local, al yo pegarla en el navegador, si le doy un intro, pues ya tendría por aquí el juego, que nuevamente, si le doy a empezar, pues puedes ver que funciona perfectamente. Bien, aquí de hecho acabo de conseguir algunos puntos, y si toco sobre alguno de los lados, pues evidentemente nos pone que hemos perdido. Bueno, este primer ejemplo era para calentar motores, nada súper extraordinario, pero tenemos que tener en cuenta que tenemos dos puntos muy importantes. Uno, el modelo más potente para programar, Claude 3.7 Sonnet, y luego que lo podemos utilizar ilimitadamente en local. Y esto lo que nos va a permitir es hacer todas las iteraciones que nosotros queramos. Y aquí, por ejemplo, le puedo pedir que haga que este juego se convierta en 3D pudiendo jugar en primera persona. Si yo ahora le doy a enviar, pues ya empezaría a transformarlo de 2D a 3D. Poco más tarde ya me ha puesto nuevamente por aquí la explicación ejecutándolo en el localhost:8000, que sería la URL que yo lo puedo ejecutar desde mi ordenador. Y desde aquí tenemos un apartado de preview, así que voy a copiar la URL y lo he pegado para abrirlo en el navegador. Y vamos a ver qué nos ha hecho en el primer intento. Así que voy a clicar en empezar juego y por aquí ya veo que estamos en primera persona. Aquí tendríamos que coger estos circulitos rojos, así que voy a intentar que crezca un poquito la serpiente para ver si realmente podemos ver la cola. Y ya por aquí tenemos unos 50 puntos, así que voy a girar rápido. Bueno, y fíjate que me acabo de equivocar, ya que por aquí estaba parte de la serpiente. Y es que tendríamos un juego en primera persona totalmente funcional en simplemente un par de prompts. Ahora bien, Lo interesante de esta herramienta es que nosotros le vamos a poder dar acceso a cualquier proyecto, como podría ser el desarrollo de una aplicación para iPhone, para que programe por nosotros en cualquier entorno. Esto es lo que vamos a ver ahora para subirlo de nivel. Pero si también quieres subir tu nivel en inteligencia artificial generativa, debes de conocer mi curso de inteligencia artificial, donde podrás estar por videollamada conmigo con un grupo reducido de personas, en donde te haré un seguimiento real para que aprendas todo de inteligencia artificial en solo 6 semanas. Tendremos varias sesiones a la semana, tendrás proyectos Me podrás preguntar siempre al final de la sesión. Aprenderás de forma práctica y tu experiencia será tan buena como la de estos alumnos que ya formaron parte de la academia. Las plazas se van a cerrar este 19 de marzo, así que no te quedes sin la tuya porque se cierran pronto. Venga, pues vamos a ponerla a prueba con algo que habéis pedido mucho. Respondí que si tenía apoyo lo haría, y vaya si lo tuvo. Así que, como lo prometido es deuda, vamos a crear una aplicación en iPhone. Lo primero que necesitamos para crear una aplicación en iPhone es esta herramienta de Xcode, el entorno de desarrollo oficial por Apple para desarrollar aplicaciones en iOS. Esta herramienta realmente solo lo puedes instalar si tienes un Mac, pero como sé que sois muchos los que tenéis Windows, os he preparado este documento de aquí que os voy a dejar abajo en la descripción, en donde te comento diferentes alternativas tanto para poder ejecutar este programa de Xcode en tu propio Windows como otras alternativas que conseguirán tener el mismo resultado. Así que por la descripción tendrás el enlace para acceder a él. Y dicho esto, voy a instalar Xcode. Tras unos minutos de instalación Clicamos en abrir, aceptamos, y al hacerlo es muy importante que seleccionemos todos aquellos dispositivos en donde nosotros queramos crear aplicaciones. En mi caso, como son los iPhone, voy a clicar en el sistema operativo de iOS, pero también lo podrías hacer tanto para los Apple Watch como para el sistema operativo de Apple TV o las Vision. Yo, sin embargo, voy a dejar simplemente la de iOS y la de Mac. Así que ahora me tendré que descargar e instalar algunos paquetes adicionales. Bien, al hacerlo ya te va a aparecer por aquí este menú, pero yo te recomiendo que te esperes a que termine toda la instalación de los sistemas operativos que hayas elegido para evitar posibles problemas. A mí ya por aquí me acaba de decir que ya tendría todo instalado, por lo que ahora voy a esperar a que se termine de verificar. Ya teniendo la verificación, ahora sí voy a clicar en continuar. Y ahora seleccionaríamos en nuevo proyecto, muy importante aquí seleccionar iOS. Y sobre el apartado de app clicamos en siguiente. Ahora le vamos a dar un nombre, y yo como voy a hacer una aplicación que nos muestra los horarios de amanecer y atardecer de una forma visual, voy a poner simplemente amanecer. Y en mi caso, como ya tengo un dominio, voy a clicar com.alejavirivera. Ya que realmente ya tengo ese dominio. Clico en siguiente y seleccionaría una carpeta que yo acabo de crear, una nueva vacía llamada App iOS. Clico en crear y ya por aquí tendríamos nuestro proyecto base sobre el cual podemos empezar a programar. Bueno, realmente la inteligencia artificial. Desde aquí vamos a poder ver algunos archivos como este de aquí de Hola Mundo, que yo evidentemente voy a poder modificar, como por ejemplo poniéndolo en español, cambiando las letras a Hola Mundo, al igual que el icono cambiando globo por un círculo, por ejemplo. Bien, ahora aquí ya simplemente tendríamos que programar a código todos los cambios que queremos hacer en nuestra aplicación, pero aquí vamos a poder utilizar la primera aplicación para que haga todo esto por nosotros. Para ello volvemos a entrar en Trae, y ahora en lugar de seguir programando en el proyecto que teníamos antes, que eso realmente estaba en otra carpeta, vamos a cerrar la aplicación y esta vez la vamos a volver a abrir, pero en lugar de abrir una nueva carpeta vamos a seleccionar ese asistente que acabamos de crear con Xcode. Así que clico en Open Folder y dentro de mi carpeta de app iOS, que es el que había creado antes. Selecciono la carpeta que hemos creado a través de Xcode, le doy a abrir, y ya tendríamos a esta IA dentro de nuestro proyecto de la aplicación del iPhone, desde donde ahora nosotros le vamos a poder pedir cualquier cambio como hemos hecho antes. Simplemente clicando en Builder, nosotros podríamos describir aquí la aplicación. En mi caso le voy a poner esta descripción de aquí, en el que estoy pidiendo una aplicación iOS de datos solares simplemente para obtener horarios de amanecer y atardecer. Aquí le pido que solicite la ubicación del usuario, que también pueda buscar en otras ubicaciones y que además también se vea visualmente mediante una gráfica cuáles serían los valores de rayos ultravioleta. Bien, yo con esto voy a mantener el modelo de Cloud 3.7 Sonnet, así que voy a clicar en enviar y ya por aquí estaría empezando a programar todos los archivos. Bien, mientras lo va haciendo, ten en cuenta que aquí estamos creando una aplicación iPhone, pero en este vídeo de aquí ya estuvimos viendo a cómo podíamos crear una aplicación pero para dispositivos Android. Minutos más tarde ya nos diría por aquí que nos ha modificado 7 archivos, que son justamente los que nos aparecen por aquí arriba. Nosotros podríamos clicar uno uno por uno para ver si el código está correcto, pero yo en mi caso personal, como no tengo ni idea programar, voy a confiar en la herramienta aceptando todo. Y ya con esto pues lo tendríamos aplicado. Volviendo aquí a Xcode, veo que me ha añadido todos estos archivos por aquí, pero clicando en el apartado advertencia podemos ver que nos salen algunos errores, por lo que voy a seleccionar, copio, y desde Try lo pego y envío. Ya desde aquí nos dice que ve dónde están los errores y que se va a poner a corregirlos. Bien, y yo tras haber iterado un poco, ten en cuenta que también le he añadido la clave API a partir de esta página que es la que me ha recomendado. Simplemente la busqué, copié la API, se lo di, y ya con eso pues pudo aplicar data real y ha hecho algunos cambios en base a los errores que le había puesto. Volviendo a la herramienta, pues ahora sí que veo un iPhone con un pequeño buscador. Así que vamos a poner una ubicación, voy a poner por ejemplo Madrid, selecciono, voy a clicar en buscar. Vale, ya por aquí me pone que Madrid corresponde a España, me pone algunas coordenadas, y si clico pues ya tendríamos por aquí la aplicación funcional en donde nos aparecería a qué hora exacto empezaría el amanecer, que sería a las 7:27 de la mañana, y luego a las 7:20 de la tarde, pues ya tendríamos ese atardecer en donde sería el sol. También nos pone el nivel de rayos ultravioleta y todo esto súper funcional. Y aquí teniéndolo simulado en un iPhone 16 Pro. Bien, yo ahora aquí le voy a pedir algunos cambios visuales, ya que aquí realmente veo que solamente puedo buscar ubicaciones concretas, como por ejemplo Málaga. Aquí me saldría otra y si lo selecciono pues me cambiarían esa información, ya que como puedes ver realmente es información de esa API. Pero siento que la parte visual podría estar un poquito mejor, así que le voy a cambiar el nombre de la aplicación a, por ejemplo, iSol, y luego le voy a decir que cuando inicie el principio que me ponga todas esas ubicaciones. Así que voy a volver por aquí y lo voy a iterar un poco más. Bien, yo ya lo tengo por aquí aplicado, así que volviendo sobre la aplicación voy a probar poniendo cualquier ubicación, como por ejemplo la de Valencia. Y desde aquí ya veo que por un lado la aplicación se llama iSol, me aparecen por aquí estos dos datos, y un poquito más hacia debajo también aparece cómo sería el tiempo, ya que realmente es algo que se lo he pedido. Ahora bien, cuando nosotros volvemos a clicar en buscar se me vuelve a desplegar todo esto, aunque sí que es cierto solamente veo ubicaciones españolas, así que voy a buscar, por ejemplo, Argentina. Clico en buscar y efectivamente nos sale por aquí. Y si le doy un clic, pues ya nos habría puesto esta información. Así que vamos a deslizarla hacia abajo y realmente pues parece que está totalmente funcional. Bien, esta herramienta, para poder testar de una forma más real, vamos a poder clicar en este símbolo de play, ya que automáticamente lo que nos va a hacer va a ser cargar nuestra aplicación en un iPhone virtual. Aquí ya tendríamos el iPhone virtual, así que voy a deslizar y clicar en esta aplicación que se llama Amanecer. Y ya se nos abriría. Y ahora aquí nuevamente, si clicamos en cualquier ubicación como Madrid, se nos cargarían los datos y podríamos ver que está funcionando bien. Y en mi caso, como lo voy a dejar así y está todo realmente funcionando, vamos a pasar ahora a hacer el icono de la aplicación. Y para ello yo voy a estar utilizando esta página que he encontrado, que te la voy a dejar también abajo en la descripción, en donde nos dan un montón de consejos de cómo debería ser un icono para los iPhone. Por lo que aquí simplemente copio la URL, me voy a ChatGPT y le voy a decir primero que me cree un prompt para el diseño de este icono. Así que abro el micro y se lo voy a comentar: quiero que me generes un prompt para poder generar una imagen para el logotipo de mi aplicación en donde se muestra las mejores horas de atardecer y amanecer. Bien, yo ya habiéndole puesto esa pequeña descripción, le voy a decir ahora: sigue las indicaciones de esta web, dos puntos, le pego la URL, le activo el modo buscar y lo envío. Bien, ya por aquí nos estaría buscando en internet eso que le hemos puesto, y ya con toda esta descripción nos empezaría por aquí a redactar todo el prompt. Ya lo tengo por aquí, así que copio. Y desde la herramienta que para mí es la mejor para generar imágenes por inteligencia artificial, llamada Imagen 3, voy a iniciar sesión y se lo pegaría. Selecciona aquí el ratio, que lo quiero en modo cuadrado ya que va a ser un icono. Y teniendo la descripción en inglés, que es una pequeña limitación de esta aplicación, le doy a crear y ya me lo empezaría por aquí a procesar. Y realmente es un icono que la verdad que me gusta bastante. De esta herramienta debes tener en cuenta que en algunas ubicaciones no se puede acceder, pero para ello puedes utilizar una Ahora bien, si te gustaría conocer más en detalle esta herramienta, cómo utilizarla y cómo podrías acceder, te tienes que ver este vídeo de aquí en donde ya hablaba de eso. Bien, una vez nosotros ya tenemos el icono, que en mi caso será este primero, podrías editar la imagen. Aunque yo, como lo voy a dejar así, voy a clicar en descarga. Y volviendo a Xcode, clico en assets, icono de aplicación, que por cierto, si no te saliese, puedes clicar en el más iOS y clicar en este símbolo. Y ya desde aquí solo lo tendríamos que arrastrar, así que le voy a dar un clic, clic en descargas y selecciono mi icono. Como veo que me mantiene los marcos blancos, voy a editarla recortándole un poco hasta que no se vean esos marcos blancos. Así que lo voy a dejar así. Y ya teniendo esto, lo voy a arrastrar en cada una de estas opciones. Y ahora, ya teniendo esto, lo voy a instalar en mi propio iPhone. Aunque antes, sobre las imágenes, una de las cosas que también te quiero comentar es que si volvemos a Trae AI, nosotros vamos a poder seleccionar una imagen y le podremos pedir cambios. Más allá de decirle que nos replique algún estilo que a nosotros nos guste, le podremos pegar nuestro logotipo y que apareciese en la propia aplicación. Aunque en este caso yo no lo voy a añadir, así que yo ahora lo voy a añadir en mi iPhone. Por lo que para ello vamos a necesitar el cable. Enchufamos en el iPhone, en el ordenador también, y muy importante que cliquemos en permitir. Desde el iPhone tenemos que decir que confiamos en nuestro ordenador, así que yo lo clico. Y ahora, teniendo iniciada nuestra cuenta y también teniendo conectado nuestro iPhone, es importante que desde nuestro dispositivo tengamos desde el apartado de privacidad y seguridad el modo desarrollador encendido. Para ello tendríamos que reiniciar. Y ya teniendo todo listo, si clico en el play, ya nos empezaría a hacer toda la configuración. Ya instalada, para poder abrirlo tenemos que clicar en los ajustes generales, VPN y gestión de dispositivos, y sobre nuestra cuenta de desarrollador le daríamos a confiar, permitimos. Y ya teniéndolo verificado, pues ahora sí que voy a poder abrir la aplicación, que ya la tengo por aquí instalada. Así que le voy a dar un clic y ya me aparece completamente funcional. Aquí de hecho veo que nos aparece el modo noche, ya que yo lo tengo así en mi dispositivo, por lo que voy a clicar en Madrid. Me pone que está cargando los datos y efectivamente ya nos aparece por aquí que estaría funcionando. Y también aparece otras ubicaciones como Barcelona, Argentina, o cualquier información que busque por aquí. Y bueno, ¿Qué te ha parecido que hayamos podido hacer todo esto de una forma gratuita? Déjamelo por los comentarios y comparte si te gustó. Como estamos viendo, lo que parecía muy difícil ayer, hoy podría hacerlo cualquiera. No puedes predecir qué pasará mañana. Ahora bien, hay una forma de saberlo: creando tu propio futuro.
More from Alejavi

¡FreeLLMAPI acaba de Romper las Suscripciones de IA! TODO GRATIS y SIN límites









