Transcript · English → French
Creating an AI-Powered Mobile App
Beaucoup de gens réalisent vite qu'on peut vraiment créer une appli avec
l'IA et la publier sur l'App Store. Mais la plupart de ces applis
sont relativement simples.
Enfin, c'était le cas jusqu'à la semaine dernière, car on peut désormais créer une
appli iOS complète avec l'IA et base de données, des intégrations
IA comme diverses API, et on peut également
accepter des paiements. Et on peut faire tout ça sans écrire
une seule ligne de
code, et publier l'appli sur l'App Store,
et c'est exactement ce que je vais
vous montrer maintenant. Ce qu'on va faire,
c'est aller sur vibe code point
dev, et tout ce qu'il faut faire, c'est taper ceci dans un navigateur.
Ici, on peut créer une appli mobile. Alors, voici mon
idée d'application. Je veux créer une appli
qui utilise le tout nouveau
Nano Banana Pro, et nous allons simplement créer le
l'interface front-end de l'
appli dans le premier prompt, mais elle servira aux parents à aider leurs
enfants avec leurs
devoirs. Vous allez donc pouvoir prendre une
photo des devoirs de votre enfant, et
l'image sera modifiée de telle sorte que ce sera comme si vous
aviez écrit la bonne réponse sur le devoir, et elle affichera toutes
les étapes. Et on ajoutera la fonction d'IA juste
après avoir utilisé ce premier
prompt. Tout ce qu'il reste à faire, c'est simplement copier ce premier prompt.
Nous allons utiliser Claude Opus 4.5.
Nous allons coller ce prompt et nous allons l'exécuter.
Et cela utilise donc Claude Code. L'application Vibe Code utilise Claude
Code nativement, c'est donc littéralement Claude Code comme
si vous l'utilisiez dans
votre terminal. Et maintenant l'application charge.
Voilà, c'est prêt. Très bien, elle est maintenant chargée.
Voyons voir. J'ai justement préparé un devoir
qu'on
peut prendre en photo. On peut donc prendre ce devoir en photo.
Et, ah, il y a cette petite animation de crayon.
J'aime bien. « Notre IA analyse soigneusement le problème
et rédige la
solution étape par étape. » Et hop. C'est là que
le montage interviendra. Ajoutons maintenant la
fonctionnalité d'IA ici. Bien. Maintenant, si on va sur l'onglet API et qu'on
va sur l'image et qu'on clique sur Nano Banana Pro,
et qu'on l'ajoute au prompt :
« Pourriez-vous me permettre d'utiliser
cette API pour ajouter la réponse
correcte et tout le raisonnement ? » Donc le
prompt pour l'IA devrait être : « Termine ce
devoir en écrivant la réponse
correcte au stylo et montre tout le travail
pour tous les problèmes. » On peut ajouter la
fonction IA. Et voilà ce qu'on vient d'entrer comme prompt.
Maintenant, ce qu'on veut faire, c'est créer une base de données.
Ce qu'on peut faire maintenant, c'est activer un backend.
On va donc configurer un backend Vibe Code.
« Déplace la fonctionnalité d'IA
vers le backend et ajoute aussi
une base de données et l'authentification
afin de stocker les précédentes
images générées, etc. » On vient donc de configurer le
Vibe Code Cloud. L'IA a donc fini avec l'invite précédente,
et elle implémente maintenant le backend.
Ici, on peut tester et voir si l'application fonctionne. Allons-y
et faisons-le.
On peut prendre notre application et la placer devant le devoir.
On prend une photo ici. Elle est en train de la traiter.
Oh, et voilà. Regardez ça. Elle a parfaitement répondu George
Washington. Elle a résolu le problème de maths.
Ici, il est écrit : « Injustice raciale et courage moral ». Et ensuite pour
quatre, j'ai mis ce problème partiel pour voir ce qu'il
allait faire, et il n'a tout
simplement pas répondu. C'est vraiment cool. Et là, on peut enregistrer.
En fait, ça ne va rien faire parce qu'il n'a pas encore implémenté
le back-end. Il est donc toujours en train de le faire.
On va donc attendre que le back-end et la base de données soient créés.
C'est bon, c'est fait. Regardons ça.
Comme vous le voyez ici, il y a désormais une icône de profil.
Je peux sélectionner l'icône de profil et je peux m'inscrire.
Ça y est, je suis inscrit. Cliquons sur Enregistrer.
On retourne sur l'application. Et là, si j'ouvre ce document, maintenant
prenons une photo des devoirs. Il est maintenant en train de traiter.
Oups, on a une erreur. On va simplement cliquer sur Corriger.
Et c'est gratuit. Quand ça arrive, c'est gratuit pour lui de corriger le
problème. On va juste attendre que l'erreur
soit corrigée.
Bon, c'est terminé. Jetons un coup d'œil
ici. Si on ouvre ce Google Doc, essayons
cela.
Oh, c'est fait. Et regardez ça. Ça l'a parfaitement résolu, et
ça a répondu à toutes ces questions.
Bon, maintenant, ce qu'on va faire, c'est appuyer sur Enregistrer.
Maintenant, si on va dans l'onglet Cloud et dans l'onglet Images générées,
on devrait la voir juste ici. Et voilà.
On a maintenant l'URL de l'image juste ici.
Ces images sont stockées dans la base de données et on peut
se connecter. La base de données est intégrée
parfaitement, et on a les différentes tables
qu'on peut voir directement dans
notre vue web, et on peut aussi la voir dans notre
vue mobile également.
Comme vous le voyez sur le téléphone, vous voyez aussi toute la base de données, tout
comme
sur le Web. On a des intégrations, et maintenant, nous devons juste
pouvoir accepter les paiements avant de l'envoyer sur l'App Store.
Et ce processus est très simple. Tout ce que vous avez à faire, c'est pincer
et aller dans l'onglet Paiements. Et dès que l'onglet Paiements est ouvert —
et au
fait, c'est un processus identique si vous le faites sur le Web.
C'est donc exactement pareil. Euh, pour l'instant,
je vais vous montrer comment faire sur le Web.
Cliquez simplement sur Terminer la configuration ici.
Et dès que c'est initialisé, ça a créé un projet sur
RevenueCat automatiquement. Et on peut donc faire un f—
euh, créer un abonnement mensuel à 4,99 $.
De plus, j'aimerais que vous ajoutiez un
écran de paywall, afin que si l'utilisateur n'a pas payé quand il va sur
cliquer sur un projet, leur afficher un paywall.
Euh, s'ils essaient par exemple de prendre une photo avant d'avoir vu un
paywall, au moment où
ils appuient sur le bouton, un paywall devrait s'afficher
et leur faire payer les
4,99 $ par mois pour avoir accès.
Rends cet écran professionnel. Et on peut donc lancer ça.
Et puis très rapidement, ce que je vais faire,
c'est aller dans l'onglet Image.
On va faire une icône en rendu 3D d'un
appareil photo au-dessus d'un
devoir. Et je peux copier ça pour pouvoir le lancer
plusieurs fois ici. On va générer des images.
Toutes ces images peuvent être mises directement dans l'appli, et on peut générer de l'audio
aussi. Je ne veux pas vraiment générer d'audio pour
celui-ci.
Ouais, et ensuite on peut ajouter ce prompt à la
file d'attente ici.
Je crois que j'aime bien celui-ci. On peut donc ajouter ça
icône. Utilisez cette icône sur
cet écran de paywall. Mettez-la
en grand. Faites-en l'icône/
image principale de cet écran.
Et comme vous le voyez, ça a, euh, créé un produit, ça a créé un prix,
et ça crée essentiellement toute l'offre au sein de
RevenueCat. Et si nous allons sur RevenueCat
et cliquons sur Study Sketch,
on voit que ça a créé ce projet, et nous n'avons aucun
essai actif car personne n'a payé. Pour vous. Bon, c'est fait.
Faisons un essai. Maintenant, nous avons ceci d'ouvert.
Ce que je vais faire maintenant, c'est aller juste ici pour
les devoirs. Cliquons. Boum, et voilà.
Débloquez avec Premium. En cliquant sur Démarrer, on peut maintenant
tester l'achat valide. Et comme vous le voyez, si on retourne sur
RevenueCat et qu'on actualise la page, on devrait voir…
Et voilà, 5 $ de revenus. C'est donc un achat test.
Ce ne sera pas un véritable achat tant qu'elle ne sera pas sur l'App Store.
Ce sont des données sandbox. Mais ce paywall a bien fonctionné.
Vous voyez qu'il y a quelques secondes, on a fait un achat test de
5 $. On a donc créé une app avec base de données,
intégrations IA, qui gère les paiements, soit un backend complet.
Et maintenant, on peut l'envoyer sur l'App Store simplement en pinçant.
On va cliquer sur Publier sur l'App Store, puis cliquer sur Démarrer.
Je me suis déjà connecté avec mon compte développeur Apple. Je clique sur Suivant,
Suivant.
Il vous faut juste un token Expo, que j'ai déjà récupéré.
Et voilà votre appli en route pour l'App Store,
et elle va être envoyée sur TestFlight. Et voilà.
Dans cette vidéo très rapide, vous m'avez vu créer une appli, euh,
avec un front-end, avec une
base de données, avec intégration de l'IA. Il accepte les paiements, a donc un
backend entièrement intégré, et on l'envoie sur l'App Store.
C'est vraiment aussi simple que ça.
On se retrouve ici pour la prochaine vidéo.
End of transcript · 1,479 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 back end.
So we're gonna set up a Vibe Code back end. "Please move the AI feature to the back end 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 back end. 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 gonna do anything because it hasn't yet implemented the back end. And so it's still doing that.
So now we're gonna wait for the back end 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 gonna do is we're gonna 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 Revenue Cat 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.
