tenemos Claro que con chat gpt 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 aplic como la que estáis
viendo que es el resultado 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 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 tres 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 javascrip hará posible que nuestra
aplicación sea interactiva teniendo esto claro ahora sí que vamos a poder pedirle a chat gpt 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 tres en líneas o Tic Tac to Así que para crear
nuestra aplicación saltamos a chat gpt y le pondríamos este prom de aquí que por cierto Vais
a tener toda la información y enlaces abajo en la descripción yo a modo ejemplo le he puesto que
cree el juego de Tic Tac to pero realmente Aquí vamos a poder 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óbil 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 tendremos 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 tres bloques de código que hemos creado html tss y js así que
ahora lo único que tenemos que hacer es copiar cada uno de los bloques que nos ha proporcionado
chat gpt Así que nos venimos a chat gpt copiamos el html y donde pone html botón derecho y pegar y
del mismo modo lo haremos para estos dos bloques de aquí genial y ya podemos PR visualizarlo aquí
si esto lo pongo un poquito más grande ya podemos ver que tenemos aquí el título de Tic Tac to
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 x y ahora pasaría al 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 x 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 chat
gpt lo primero que le voy a estar pidiendo es que me ponga esto centrado así que me voy de nuevo
a chat gpt 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 control
a y control V para pegar y fijaros ya tenemos por aquí Este cambio de una forma s 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 chat gpt y le escribo añade un
fondo de un color gradiente oscuro le di 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 al heavy games Así que nuevamente
se lo pediré a chat gpt la acabo de escribir añade el títul lo juego al heavy games con las letras
en blanco le doy un intro 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 Alex heavy games Esto se lo podemos volver a pedir a chat gpt 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 chat gpt y directamente cambiarlo aquí simplemente sería sustituir donde ponga Tic
Tac to por Alex heavy games y ya tendríamos el cambio Así que aquí voy a poner de título al heavy
games y como el encabezado de h1 también vamos a cambiar a heavy 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éndolo a chat gpt 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 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 aleji 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 control a para seleccionar todo control C para copiar nos
venimos al bloc de notas o la aplicación de sublime con mi caso y control V para pegar
Ahora aquí yo voy a guardar con un control S y voy a seleccionar la carpeta que acabamos
de crear en este le vamos a poner como título dar la control S para guardar y aquí es importante
que pongamos el nombre de styles.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 tendremos 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 tres archivos de aquí si nosotros
clicar 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 tenga 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 la fila cco 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 nuestra aplicación dependiendo de lo que queramos hacer yo os voy a dar dos opciones
la primera Tiny Host 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 meg 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 hostinger de este Hosting no voy a parar mucho ya que lo vimos en detalle en este
otro vídeo 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 testar lo primeramente antes de dar un pasito más allá para hacerlo más profesional
una vez hayas clicado sobre enlace de Tiny Host aterrizará en esta página de aquí de de aquí lo
que tenemos que hacer es seleccionar donde pone punto 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 alav games en mi caso damos un clic sobre la carpeta y le damos a comprimir genial y ya
tenemos aquí nuestro punto zip Ahora sí volviendo a esta plataforma le damos a subir archivo y
seleccionaremos el punto 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 Alex javy 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ío y le damos
a completar genial y prácticamente a tiempo real ya tendríamos nuestra aplicación subido 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 ordenador ahora sí que lo tenemos 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 utilizar le daríamos a 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 Alex javy
games en mi caso y el nombre de la compañía yo voy a poner Alex Javi 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 dirigir 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 vasis 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 esa página que es este de aquí le doy abrir y ya lo tendremos por aquí teniendo
esta información clico en next y aquí teng en cuenta que de forma gratuita vas a poder crear la
aplicación para los dispositivos Android y además al ser gratuito ellos van a meter alguna pequeña
publicidad de su página web y damos a make app Ahora aquí nos registrarías y una vez tengamos
todos los datos le daríamos a registrar y una vez registrado ahora sí que sí le volvemos a dar
a makeup 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 vamos en el botón de descarga y le damos a download free lo descargamos en archivo.zip
y ya lo tendremos 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 no hemos descargado de la aplicación
de web into app 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
este 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 y 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 y 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 es el nombre de la aplicación en mi caso el de Alex heavy games con el icono que le
hemos puesto así que voy a clicar sobre instalar ya empezaría la instalación y Listo Ya lo 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 clico aquí evidentemente me va a poner la X ahora me pone
el círculo nuevamente la x el círculo y si pongo aquí la x pues ya no pone que la x 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 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 al interen artificial podemos
probar y aterrizar prácticamente cualquier idea a un proyecto Y si los miles de proyectos que
prueben no tienen ningún resultado no habrá fracasado sino que habrás encontrado otras
miles de formas y aprendizajes para tu futuro proyecto an