Transcript · English → Spanish
Creating AI-Powered Apps Without Coding
Mucha gente se está dando cuenta rápidamente de que realmente puedes crear una app con
IA y publicarla en la App Store. Pero la mayoría de estas apps
son relativamente
simples. Bueno, eso era hasta la semana pasada, porque ahora puedes crear una app completa
para iOS con IA que tiene una base de datos, integraciones de
IA, como diferentes API, y también puedes
aceptar pagos. Y puedes hacer todo esto sin escribir
una sola línea de
código, y puedes publicar la app en la App Store,
y eso es exactamente lo que estoy a punto
de mostrarte ahora mismo. Así que lo que vamos a hacer
es ir a vibe code punto
dev, y todo lo que haces es escribir esto en cualquier navegador.
Y aquí podemos crear una app móvil. Vale, esta es mi
idea para una app. Quiero crear una app
que use el nuevo
Nano Banana Pro, y básicamente solo estamos creando la
la estructura base del front-end de
la aplicación en el primer prompt. Pero será para que los padres ayuden a sus
hijos con
sus tareas. Así que podrás tomar una
foto de la tarea de tu hijo,
y editará la imagen de tal forma que será como si hubieras
escrito la respuesta correcta en la tarea, y mostrará todo
el procedimiento. Y añadiremos la función de IA justo
después de usar este primer
prompt. Así que solo tenemos que copiar este primer prompt.
Vamos a usar Claude Opus 4.5.
Vamos a pegar este prompt, y lo vamos a ejecutar.
Y esto usa Claude Code. La aplicación Vibe Code usa Claude
Code de forma predeterminada, así que es literalmente Claude Code como
si lo usaras en
tu terminal. Y ahora la aplicación está cargando.
Bien, ya está listo. Bien, ya lo tenemos cargado.
Veamos esto. Y de hecho he preparado una tarea
que
podemos fotografiar. Así podemos fotografiar esta tarea.
Y, eh, tiene esta pequeña animación de lápiz.
Me gusta. «Nuestra IA está analizando cuidadosamente el problema
y escribiendo la
solución paso a paso». Y ¡bum! Aquí es donde
entrará la edición. Ahora vamos a añadir la
función de IA aquí. Muy bien. Ahora, si vamos a la pestaña API y
vamos a imagen, hacemos clic en Nano Banana Pro,
y lo añadimos al prompt:
«Por favor, ¿puedes permitirme usar
esta API para añadir la respuesta
correcta y todo el procedimiento?». Así que el
prompt para la IA debería ser: «Completa esta
tarea escribiendo la respuesta correcta
con bolígrafo y muestra todo el procedimiento
para todos los problemas». Así podemos añadir la función de IA
función. Y esto es lo que acabamos de introducir como prompt.
Lo que queremos hacer ahora es crear una base de datos.
Así que ahora lo que podemos hacer es habilitar un backend.
Vamos a configurar un backend de Vibe Code.
«Por favor, mueve la función de IA
al backend y también añade una
base de datos y autenticación para
poder almacenar imágenes
generadas anteriormente», etcétera. Así que acabamos de configurar
Vibe Code Cloud. Bien, ahora la IA terminó con la instrucción anterior,
y ahora está implementando el backend.
Aquí podemos probar y ver si la aplicación funciona. Vamos a hacerlo.
Ahora podemos tomar nuestra aplicación y acercarla a la tarea.
Ahora podemos tomar nuestra aplicación y acercarla a la tarea.
Tomaremos una foto aquí. Ahora está trabajando en ello.
Ah, ahí lo tienen. Miren eso. Respondió perfectamente: George
Washington. Resolvió el problema de matemáticas.
Aquí dice: «Injusticia racial y valentía moral». Y luego, para
cuatro, planteé este problema parcial para ver qué haría
y simplemente no
lo respondió. Así que eso es genial. Y aquí podemos pulsar Guardar.
En realidad, no hará nada porque todavía no ha implementado el
backend. Así que sigue haciéndolo.
Ahora vamos a esperar a que se creen el backend y la base de datos.
Bien, ya está. Veámoslo.
Como pueden ver aquí, ahora hay un icono de perfil.
Puedo seleccionar el icono de perfil y registrarme.
Bien, acabo de registrarme. Pulsemos Guardar.
Volveremos a la aplicación. Y si abro este documento ahora,
vamos a sacar una foto de la tarea. Ahora está trabajando en ella.
Vaya, tuvimos un error. Vamos a pulsar Corregir.
Y esto es gratis. Cuando pasa esto, le sale gratis corregir el problema.
Ahora solo esperaremos a que se corrija el error.
Bien, ahora ya está listo. Vamos a seguir y echar un
vistazo aquí. Si abrimos ese documento de Google, vamos a probar esto.
Oh, ya está hecho. Y miren eso. Lo resolvió perfectamente y
respondió todas estas preguntas.
Bien, ahora lo que vamos a hacer es pulsar Guardar.
Ahora, si vamos a la pestaña Cloud y vamos a la pestaña Generated Image
deberíamos verlo justo aquí. Ahí está.
Ahora tenemos la URL de la imagen justo aquí.
Así que estas imágenes se están almacenando en la base de datos y podemos
iniciar sesión. Así que tenemos la base de datos integrada
perfectamente, y tenemos las distintas tablas
que podemos ver directamente en
nuestra vista web, y también podemos verlas en nuestra vista
móvil.
Como puedes ver aquí en el teléfono, también puedes ver toda la base de datos
igual
que en la web. Y tenemos integraciones.
Y ahora solo tenemos que poder aceptar pagos antes de enviarla a la App
Store. Y este proceso es muy sencillo.
Solo tienes que hacer zoom con los dedos e ir a la pestaña Pagos.
Y una vez abierta la pestaña Pagos— por cierto, este proceso es idéntico
si lo haces en la web. Así que esto es exactamente lo mismo.
Eh, por ahora te mostraré cómo hacerlo en la web.
Solo tienes que pulsar «Finalizar configuración» aquí.
Y luego, una vez que se inicialice, básicamente creó un proyecto en
RevenueCat automáticamente. Y ahora podemos hacer de esto una s-
eh, crear una suscripción mensual de 4,99 $.
Además, quiero que añadas un muro de pago.
Configura una pantalla para que, si el usuario no ha pagado, cuando haga clic en un
proyecto, se encuentre con un muro de pago. Eh, como si intenta tomar una foto
antes de encontrarse con un muro de pago, justo cuando pulse el botón,
debería aparecer
un muro de pago, y debería hacer que pague los 4,99 $
al mes para obtener
acceso. Haz que esa pantalla tenga un aspecto profesional.
Y así podremos ejecutarlo.
Y luego, muy rápidamente, lo que voy a hacer
es ir a la pestaña Imagen.
Vamos a hacer un icono renderizado en 3D
de una cámara sobre una tarea
escolar, y puedo copiar esto para ejecutarlo
muchas veces aquí. Vamos a generar imágenes.
Todas estas imágenes se pueden colocar directamente en la aplicación, y también podemos generar audio
. No quiero generar audio para
esta.
Sí, y luego podemos añadir esta indicación a la
cola aquí.
Creo que me gusta este de aquí. Así que podemos añadir este
icono. Usa este icono en
esa pantalla de pago. Haz que sea
grande. Haz que este sea el
icono/imagen principal de esta pantalla.
Y como puedes ver aquí, eh, creó un producto, creó un precio,
y básicamente está creando toda la oferta dentro de
RevenueCat. Y si vamos a RevenueCat
y hacemos clic en Study Sketch,
podemos ver que creó este proyecto, y no tenemos pruebas activas
todavía porque nadie ha pagado. Por ti. Bien, ya está hecho.
Probemos esto. Ahora tenemos esto abierto.
Ahora lo que voy a hacer es ir aquí mismo para
tarea. Hagamos clic. Boom. Ahí está.
Desbloquear con Premium. Si pulsamos Iniciar, ahora podemos
probar la compra válida. Y como puedes ver aquí, si volvemos a
RevenueCat, si actualizamos nuestra página, deberíamos ver...
Ahí está, cinco dólares de ingresos. Esto es una compra de prueba.
No será una compra real hasta que la consigas en la App Store.
Estos son datos de sandbox. Pero este muro de pago sí funcionó.
Como pueden ver, hace unos segundos hicimos una compra de prueba de cinco dólares.
Y creamos una app con base de datos, integraciones de IA, y que
también acepta pagos, o sea, un backend completo.
Y ahora podemos enviarla a la App Store simplemente pellizcando.
Ahora pulsaremos «Publicar en la App Store» y luego «Empezar».
Ya inicié sesión con mi cuenta de desarrollador de Apple. Solo pulso «Siguiente»,
«Siguiente».
Y ahora solo necesitas un token de Expo, que ya conseguí.
Y ahora tu app está de camino a la App Store,
y ahora se enviará a TestFlight. Y listo.
En este video tan rápido, me vieron crear una app, eh,
con una interfaz, con una
base de datos, con integración de IA. Acepta pagos, así que tiene un
backend totalmente integrado, y la enviamos a la App Store.
De verdad, es así de fácil.
Nos vemos aquí en el próximo video.
End of transcript · 1,462 words · machine translated
Original transcript (English)
Many people are quickly realizing that you can actually build an app with AI and get it on the App Store. But most of these apps are relatively simple apps. Well, that was up until last week, because now you can create a full iOS app with AI that has a database, AI
integrations, like different APIs, and you can also accept payments. And you can do all of this without writing a single line of code, and you can get the app on the App Store, and that's exactly what I'm about
to show you right now. So what we're gonna do is we're gonna go to vibe code dot dev, and all you do is just type this into any browser. And here we can build a mobile app. Okay, so this is my idea for an app. I want to create an app
that uses the brand-new Nano Banana Pro, and we're basically just creating the front end shell of the app in the first prompt. But it will be for parents to help their kids with
their homework. And so you're gonna be able to take a photo of your kid's homework, and it's going to edit the image in such a way that it will be as if you wrote on the homework the correct answer, and it will show all of the work. And we're gonna add the AI feature right
after we use this first prompt. So all we need to do is just copy this first prompt. We are going to use Claude Opus 4.5. We're going to paste in this prompt, and we are going to run it. And so this is using Claude Code. Vibe Code app uses Claude
Code out of the box, so it's literally Claude Code as if you were using it in your terminal. And now the app is loading. Okay, so it's done now. Okay, so we have it loaded up. Let's see this. And so I've actually prepared a homework
assignment we can take a photo of. So we can take a photo of this homework. And, ah, it has this little pencil animation. I like it. "Our AI is carefully analyzing the problem and writing the
solution step by step." And bang. This is where the edit will come in. So now let's go ahead and add the AI feature here. All right. So now if we go to the API tab, and we go to the image, and we click Nano Banana Pro, and we add it to the prompt:
"Please can you allow me to use this API to add the correct answer and all of the work?" So the prompt for the AI should be, "Complete this assignment by writing the correct
answer in pen and show all work for all problems." So we can add the AI feature. And so this is what we just entered a prompt. Now what we want to do is we want to actually create a database. So now what we can do is we can actually enable a backend.
So we're going to set up a Vibe Code backend. "Please move the AI feature to the backend and also add a database and authentication in order to store previous
images generated," et cetera. So we just set up the Vibe Code Cloud. Okay, so now the AI is done with the previous prompt, and now it's implementing the backend. Here we can actually test and see if the app works. Let's go ahead and do that.
We can now take our app, put it up to the homework. We'll take a photo here. Now it is working on it. Oh, and there you go. Look at that. It perfectly answered George Washington. It solved the math problem. Here it says, "Racial injustice and moral courage." And then for
four, I put this partial problem to see what it would do, and it just didn't answer it. And so that is really cool. And here we can hit Save. It's actually not going to do anything because it hasn't yet implemented the backend. And so it's still doing that.
So now we're going to wait for the backend and database to be created. Okay, so it's done. Let's check it out. As you can see here, there's now a profile icon. I can select the profile icon, and I can actually sign up. Okay, so I just signed up. Let's hit Save.
We'll go back to the app here. And so if I open up this document, now let's go ahead and take a photo of the homework. It's now working on it. Uh-oh, we got an error. Let's go ahead and just press Fix. And this is free. So when this happens, it's free for it to fix the issue. Now we'll just wait for the error to be fixed.
Okay, so it is now done. Let's go ahead and take a look here. If we open up that Google Doc, let's go ahead and try this. Oh, it's done. And look at that. It solved it perfectly, and it answered all of these questions. Okay, so now what we're going to do is we're going to press Save.
Now if we go to the Cloud tab and we go to the Generated Image tab, we should see it right here. There you go. We now have the image URL right here. So these images are being stored in the database, and we can sign in. And so we have the database integrated
perfectly, and we have the different tables that we can just see directly in our web view, and we can also see it within our mobile view as well. As you can see here on the phone, you can also see the entire database just
like you can on the web. And we have integrations. And now we need to just be able to accept payments before we send it to the App Store. And this process is very simple. Just all you have to do is pinch and go to the Payments tab.
And once we have the Payments tab open -- And by the way, this is an identical process if you do it on web. So this is the same exact thing. Uh, for now I'll show you how to do it on web. You can just hit Finish Setup here. And then once it initializes, it basically created a project on
RevenueCat automatically. And so now we can make this a f- uh, create a monthly subscription for $4.99. Also, I want you to please add a paywall. Screen so if the user has not paid, when they go to click on a project, hit them with a paywall. Um, like if they go to try and take a photo
before they've hit a paywall, right as they press the button, a paywall should come up, and it should make them pay the $4.99 per month in order to get access. Make that screen look professional.
And so we can run that. And then very quickly, what I'm going to do is go to the Image tab. We're gonna do 3D render icon of a camera over a homework
assignment, and I can copy this so that I can run it many times here. We're gonna generate images. All of these images can be placed directly into the app, and we can generate audio as well. I don't really wanna generate audio for this one.
Yeah, and then we can add this prompt to the queue here. I think I like this one right here. So we can add this icon. Please use this icon on that paywall screen. Make this
big. Make this the main icon/image for this screen. And as you can see here, it, uh, created a product, it created a price, and it is basically creating the whole offering within RevenueCat. And if we come to RevenueCat
and we click on Study Sketch, we can see that it created this project, and we have no active trials yet because no one's paid. For you. Okay, so it's done. Let's give this a try. So now we have this open. Now what I'm going to do is I'm gonna go to this right here for
homework. Let's click. Boom. There you go. Unlock with Premium. If we hit Start, now we can test the valid purchase. And as you can see here, if we go back to RevenueCat, if we refresh our page, we should see... There we go, $5 revenue. So this is a test purchase.
It won't be an actual purchase until you actually get it on the App Store. This is sandbox data. But this paywall did indeed work. You can see a few seconds ago we did a test store of $5. And so we created an app with database, AI integrations, and it also accept payments, so a full backend.
And now we can send it to the App Store simply by pinching. Now we're gonna hit Publish to App Store, and we're gonna hit Get Started. I've already signed in with my Apple developer account. I can just hit Next, Next. And now you just need an expo token, which I've already gotten.
And now your app is on the way to the App Store, and now it's going to be sent to TestFlight. And there you go. In this very quick video, you saw me create an app, uh, with a front end, with a database, with AI integration. It accepts payments, so it has a
fully integrated backend, and we send it to the App Store. It's really that easy. I'll see you guys here for the next video.
