Cómo crear una APP en 2 minutos GRATIS con Inteligencia Artificial 📲 Tutorial FÁCIL Paso a Paso

Tenemos claro que con ChatGPT podemos generar prácticamente cualquier cosa en formato texto, e incluso con sus últimas actualizaciones podemos generar gráficas o imágenes. Pero, ¿sabías que también puedes crear tu propia aplicación para smartphones? Hasta ahora, para crear una aplicación necesitabas tener un gran conocimiento técnico y saber programar en código para poder realizarla, aunque también podíamos pagar a alguien para que desarrollara nuestra propia aplicación nativa, aunque esto es muy costoso. Pero ahora, gracias a la inteligencia artificial, vamos a poder crear cualquier aplicación como la que estáis viendo, que es el de este vídeo. Y esto podremos hacerlo sin tener ningún conocimiento en programar código, como es mi caso. La aplicación que vayas a crear tras este tutorial vas a poder instalarla en tu propio smartphone, compartirla con tus amigos, o incluso publicarlo en un marketplace como el Play Store, con la que podrás generar un ingreso. Y por cierto, todo el proceso que vamos a estar haciendo en este tutorial lo podrás hacer de una forma 100% gratuita. ¿Suena bien? Pues veamos el primer paso. Como primer paso estaremos generando el código que necesitamos para el desarrollo de esta aplicación, en nuestro caso apoyado por la inteligencia artificial. Pero antes de nada quiero enseñarte qué significan las palabras de HTML, CSS y JavaScript. Estos son los 3 lenguajes de programación que harán posible que construyamos nuestra aplicación. Por un lado tenemos el HTML, que se encargará de crear el contenido y la estructura de esta aplicación. El CSS se encarga de los estilos y la parte más visual del HTML. Y por último, el JavaScript hará posible que nuestra aplicación sea interactiva. Teniendo esto claro, ahora sí que vamos a poder pedirle a ChatGPT que nos genere todos los códigos que necesitamos para nuestra aplicación. En mi caso, y a modo de ejemplo para este tutorial, estaré creando un juego llamado 3 en líneas o tic-tac-toe. Así que para crear nuestra aplicación saltamos a ChatGPT y le pondríamos este prompt de aquí, que por cierto vais a tener toda la información y enlaces abajo en la descripción. Yo a modo de ejemplo le he puesto que cree el juego de tic-tac-toe, pero realmente aquí vamos a poder sustituirlo por otro juego o aplicación que vayamos a querer estar creando. Pero lo más importante es que queremos que nos proporcione el código para una aplicación móvil en HTML, CSS y el JavaScript que os comentaba anteriormente. Así que le damos un intro y ya nos empezaría por aquí a crear todos los códigos necesarios. Genial. Y ya lo tendríamos por aquí: un bloque para el JavaScript, que es este de aquí, otro bloque para el CSS y otro bloque para el HTML. Esto realmente tiene una visual muy fea, sobre todo si sois como yo, que no entendéis de código. Para ello os voy a estar dejando también una aplicación llamada CodePen, que es esta de aquí, en donde vamos a poder hacer la previsualización de la aplicación que estemos creando. Para ello le vamos a dar a Start Coding, y esta tened en cuenta que no hace falta ni siquiera que nos registremos y evidentemente es gratuita. Ahora aquí vamos a estar viendo que nos aparecen los 3 bloques de código que hemos creado: HTML, CSS y JS. Así que ahora lo único que tenemos que hacer es copiar cada uno de los bloques que nos ha proporcionado ChatGPT. Así que nos venimos a ChatGPT, copiamos el HTML, y donde pone HTML, botón derecho y pegar. Y del mismo modo lo haremos para estos 2 bloques de aquí. Genial. Y ya podemos previsualizarlo aquí. Si esto lo pongo un poquito más grande, ya podemos ver que tenemos aquí el título de tic-tac-toe, tenemos aquí en espera del primer movimiento y un botón de reiniciar. Entonces, si yo clico en este cuadradito de aquí, ya me pone la equis y ahora pasaría el turno del círculo. Así que si clico en el círculo, ya lo tenemos por aquí marcado y ya podríamos ir jugando hasta aquí, que acabaría de ganar, en donde ya nos muestra el juego que la equis ha ganado y tenemos el botón para reiniciar. Está genial y totalmente funcional. Pero como podéis ver, realmente tenemos un margen de mejora para que esta aplicación sea más visual. Así que para ello se lo vamos a poder estar pidiendo a ChatGPT. Lo primero que le voy a estar pidiendo es que me ponga esto centrado. Así que me voy de nuevo a ChatGPT y le digo que ponga el juego centrado y le doy un intro. Y ya automáticamente nos ha generado el código, en este caso de CSS, que como comentábamos son los estilos. Y ahora simplemente vamos a tener que sustituirlo. Así que copiamos, nos venimos a CodePen, seleccionamos todo con Ctrl+A y Ctrl+V para pegar. Y fijaros, ya tenemos por aquí este cambio de una forma súper sencilla, como si estuviésemos hablando con nuestro propio programador. Ahora voy a querer que le añada un fondo de color oscuro gradiente, así que me voy nuevamente a ChatGPT y le escribo: añade un fondo de un color gradiente oscuro. Le doy un intro y ya lo tendríamos nuevamente por aquí. Y pegamos nuevamente y ya lo tengo por aquí. Voy a cambiar este título por Alejavi Games, así que nuevamente se lo pediría a ChatGPT. Le acabo de escribir: añade el título del juego Alejavi Games con las letras en blanco. Le doy un intro Y nuevamente tenemos aquí el CSS, que lo voy a pegar por aquí. Y como podéis ver, sí que me ha cambiado el color del título al blanco como se lo he pedido, pero realmente no me ha puesto lo de Alejavi Games. Esto se lo podemos volver a pedir a ChatGPT para que nos dé el código, pero como ya sabemos que el HTML es el encargado de tener todo el contenido, nos vamos a poder venir a ChatGPT y directamente cambiarlo. Aquí simplemente sería sustituir donde ponga tic-tac-toe por Alejavi Games y ya tendríamos el cambio. Así que aquí voy a poner de título Alejavi Games, y como el encabezado de H1 también vamos a cambiar Alejavi Games, que es realmente donde vamos a estar viendo el cambio. Esto, como no se ve bien, le voy a pedir que lo ponga en blanco. Yo ya lo he pegado aquí y fijaros, ya tendríamos por aquí esto en blanco. Realmente aquí podemos pedirle más cambios para que quede aún más visual, pero quédate con que los cambios son muy sencillos simplemente pidiéndoselo a ChatGPT. Pero yo, para el ejemplo de este tutorial, lo voy a estar dejando así. Una vez ya tenemos el código tal y como nosotros queremos, es hora de pasar al siguiente paso en donde lo estaremos guardando en nuestro ordenador. Para guardar este código vamos a poder estar utilizando las propias aplicaciones de bloc de notas, tanto de Windows como de macOS, aunque yo estaré utilizando la aplicación de Sublime, ya que esta es una herramienta específica para este tipo de cosas y además es totalmente gratuita. Os lo dejaré también en la descripción. Lo primero que tenemos que hacer aquí es crearnos una carpeta en nuestro ordenador, y aquí le podemos dar el nombre de nuestro juego, en mi caso el de Alejavi Games. Y ahora tendremos que guardar cada uno de estos códigos, pero estos tienen unas pequeñas peculiaridades, así que empezamos por el de HTML. Ctrl+A para seleccionar todo, Ctrl+C para copiar. Nos venimos al bloc de notas o la aplicación de Sublime, como en mi caso, y Ctrl+V para pegar. Ahora aquí yo voy a guardar con un Ctrl+S y voy a seleccionar la carpeta que acabamos de crear. En este le vamos a poner como título index.html y le damos a guardar. Ya tenemos el primer código guardado. Vamos con el segundo. Para ello copiamos el CSS, pegamos aquí nuevamente, vuelvo a darle a Ctrl+S para guardar. Y aquí es importante que pongamos el nombre de style .css. Si os diese error, podéis probar quitándole esta última S de styles cuando guardéis el código. Le doy a guardar y ya tendríamos nuestros estilos guardados. Y del mismo modo vamos a guardar el JavaScript, copio y pego, y este lo vamos a guardar con el nombre de script.js y le damos a guardar. Una vez ya tenemos todo esto guardado, cuando nos venimos a nuestro ordenador vamos a poder ver dentro de la carpeta estos 3 archivos de aquí. Si nosotros clicáramos en el de HTML, que es el index, vamos a poder ver que se nos abre la aplicación. Si no lo ves correctamente con los estilos que hemos cerrado, como es mi caso, es porque quizás tengas que cambiar el nombre de styles como os comentaba antes. Así que nuevamente me voy a venir a estos archivos de aquí, le doy a renombrar y voy a poner style sin la S, le doy un intro, y ahora sí, cuando le vuelvo a dar al archivo index de HTML, ya sí que me lo abre correctamente con todos los estilos que hemos cerrado. Esto lo puedes ver muy rápido directamente en el código que hemos guardado, viendo que alrededor de fila 5, donde pone el enlace href de estilos, ponga exactamente el mismo nombre del archivo que vayamos a guardar. Una vez tenemos nuestro código correctamente guardado en nuestro ordenador, es hora de que pasemos al siguiente paso. Como tercero y penúltimo paso, estaremos subiendo este código a un servidor. Esto nos va a poder permitir compartirla con cualquier persona. Para ello vamos a poder utilizar un hosting, que es donde va a estar almacenada nuestra aplicación. Dependiendo de lo que queramos hacer, yo os voy a dar dos opciones. La primera, TinyHost, que es gratuita aunque tiene sus limitaciones. Esta solamente deja almacenar una aplicación de forma gratuita y además no puede pesar más de 5 megas. Realmente, para una aplicación sencilla como es el caso de este juego, no vamos a tener ningún problema. Además, ten en cuenta que ellos van a añadir su marca de agua a nuestra aplicación, por lo que si queremos hacer una forma más profesional o una aplicación un poco más compleja, os recomiendo el siguiente hosting, que es el de Hosting De este hosting no me voy a parar mucho, ya que lo vimos en detalle en este otro vídeo de aquí, donde creamos una tienda online profesional y hablamos de este hosting. Sin embargo, ten en cuenta que tiene unos precios muy competitivos e incluso puedes conseguir un descuento adicional con un código que te dejaré abajo en la descripción. Pero bueno, por cumplir de que este tutorial sea 100% gratuito, yo estaré utilizando la primera opción, ya que realmente es la ideal para testarlo primeramente antes de dar un pasito más allá para hacerlo más profesional. Una vez hayas clicado sobre el enlace de TinyHost, aterrizarás en esta página de aquí. De aquí lo que tenemos que hacer es seleccionar donde pone .zip y le damos a subir archivo. De aquí, como podéis ver, nos lo deja subir en estas diferentes extensiones. En nuestro caso tenemos una carpeta que vamos a tener que convertir en un formato zip. Para ello nos volvemos a nuestra carpeta de Alejavi Games, en mi caso damos un clic sobre la carpeta y le damos a comprimir. Genial, ya tenemos aquí nuestro .zip. Ahora sí, volviendo a esta plataforma, le damos a subir archivo y seleccionaremos el .zip que acabamos de crear y le damos a abrir. Ahora aquí vamos a poder poner un nombre personalizado para nuestra URL yo voy a poner Alejavi Games. Y para poder subirlo a este servidor nos vamos a tener que verificar con alguna de estas cuentas. Yo utilizaré como siempre Google con el email de todos los tutoriales. Y ahora nos va a pedir algunos datos adicionales. Yo aquí voy a seleccionar YouTube, aunque el resto de los datos los vamos a poder dejar vacíos. Y le damos a completar. Genial. Y prácticamente a tiempo real ya tendríamos nuestra aplicación subida a internet. Ahora, simplemente para verlo, lo primero que os recomiendo es copiar el link y clicar sobre View Site para ver qué tal ha quedado. Y aquí lo tendríamos, que a diferencia de cuando clicamos anteriormente en nuestro ordenador, ahora sí que lo tenemos online. Online y podemos compartir este enlace para que cualquier persona, como amigos o familiares, puedan acceder a él. Una vez ya lo tenemos en el servidor, estamos listos para el último paso. Como último paso, estaremos convirtiendo esta página web que acabamos de crear en una aplicación que podamos instalar en cualquier smartphone. Para ello estaremos utilizando la aplicación de Web into App, que es esta plataforma de aquí. Para poder utilizarla, le daríamos a Get Started, y aquí lo que tenemos que hacer es pegar la URL en donde está alojada la página que acabamos de crear en el paso anterior. Ahora aquí le damos un nombre, Alejavi Games en mi caso, y el nombre de la compañía yo voy a poner Alejavi. Desde aquí vais a poder cambiar el icono para nuestra aplicación seleccionando uno que tengáis en vuestro ordenador ya descargado, simplemente clicando en este icono de aquí. Aunque si no tenéis ninguno, vais a poder crear uno por inteligencia artificial o directamente clicando donde pone Find, ya que os va a redirigir a una página muy conocida de iconos llamada Flaticon. Aquí vais a poder poner un nombre relacionado con la aplicación que estéis creando, le dais a descargar y ya lo vais a poder subir. Yo, como he hecho eso previamente, le voy a dar directamente a Set Icon y clico en uno de los iconos que me he descargado de esa página, que es este de aquí. Le doy a abrir y ya lo tenemos por aquí. Teniendo esta información, clico en Next. Y aquí ten en cuenta que de forma gratuita vas a poder crear la aplicación para los dispositivos Android, y además, al ser gratuita, ellos van a meter alguna pequeña publicidad de su página web. Y damos a Make App. Ahora aquí nos registraríamos, y una vez tengamos todos los datos, le daremos a Registrar. Y una vez registrado, ahora sí que sí le volvemos a dar a Make App y ya empezaría a crear nuestra aplicación. Perfecto. Y después de aproximadamente unos 10 segundos, ya tenemos aquí nuestra aplicación lista para poder instalarla. Para poder probarla clicaríamos en el botón de descarga y le damos a download free. Lo descargamos en archivo .zip y ya lo tendríamos por aquí. Esta aplicación, como viene comprimida, le damos un doble clic para que se empiece a descomprimir y ya tendríamos esta carpeta que nos hemos descargado de la aplicación de WebIntoApp. Al abrirla vamos a ver diferentes archivos, pero realmente el que más nos interesa es dentro de la carpeta de Android el que pone APK, ya que este de aquí es el instalable que vamos a poder estar utilizando en los smartphones. Para ponerlo a prueba, lo que voy a hacer va a ser subir esta APK a mi Google Drive para poder instalarla en mi móvil y poder probar qué tal funciona. Así que me vengo a mi Google Drive, cojo el APK y lo arrastro dentro del Drive. Genial, ya tenemos por aquí el archivo instalable que ya realmente desde aquí vamos a poder compartirlo con quien nosotros queramos. Ahora voy a estar cogiendo mi teléfono móvil para mostraros qué tal es la instalación y si realmente funciona bien en un móvil. Genial, ya por aquí con móvil en mano acabo de entrar a mi Google Drive desde el teléfono y tendría aquí la aplicación que acabamos de crear. Le voy a dar un clic y ya nos aparece aquí lo típico cuando queremos instalar cualquier aplicación en un Android, que el nombre de la aplicación, en mi caso el de Alejavi Games, con el icono que le hemos puesto. Así que voy a clicar sobre instalar, ya empezaría la instalación, y listo, ya la tenemos instalada. Y además, como podéis ver, evidentemente no tiene ningún virus. Una vez ya la tenemos, le voy a dar a abrir, y fijaros, ya tendremos por aquí nuestro juego, que evidentemente es totalmente funcional. Yo, si ahora clico aquí, evidentemente me va a poner la equis. Ahora me pone el círculo, nuevamente la equis, el círculo. Y si pongo aquí la equis, pues ya nos pone que la equis Ha ganado. Y como podéis ver, funciona correctamente. Y además, una aplicación que hemos hecho en cuestión de minutos gracias a la inteligencia artificial. Genial. Y una vez ya tenemos nuestra aplicación, vamos a poder incluirle una membresía o anuncios con plataformas como la de Google AdSense para poder monetizarla y generar un ingreso gracias a través de esa aplicación. Aunque si esto queréis verlo más en detalle, déjamelo por los comentarios y haré un posible vídeo al respecto. Pero bueno, dime, ¿qué te ha parecido que hayamos conseguido hacer esto de una forma tan sencilla? Déjame por los comentarios si lo vas a probar y comparte si realmente te gustó. Como estamos viendo, ahora podemos empezar con proyectos como la creación de una aplicación de una forma sencilla, que como te comentaba al inicio de este vídeo, antes era algo muy costoso o muy difícil de conseguir si no teníamos los conocimientos apropiados. En la actualidad, gracias a la inteligencia artificial, podemos probar y aterrizar prácticamente cualquier idea a un proyecto. Y si los miles de proyectos que pruebes no tienen ningún resultado, no habrás fracasado, sino que habrás encontrado otras miles de formas y aprendizajes para tu futuro proyecto.