Créer une application iOS d’aide aux devoirs avec l’IA, sans coder
Beaucoup de gens se rendent vite
compte que tu peux en fait créer une app avec l’IA et la publier sur l’App Store.
Mais la plupart de ces apps sont des apps relativement simples.
Eh bien ça, c’était jusqu’à la semaine dernière… …
parce que maintenant tu peux créer une app iOS complète avec l’IA,
qui a une base de données, des intégrations IA, comme différentes API,
et tu peux aussi accepter des paiements.
Et tu peux faire tout ça sans écrire une seule ligne de code,
et tu peux mettre l’app sur l’App Store,
et c’est exactement ce que je vais te montrer tout de suite.
Donc ce qu’on va faire, c’est qu’on va aller sur vibecode.dev,
et tout ce que tu as à faire, c’est taper ça dans n’importe quel navigateur,
et ici on peut créer une app mobile. Alors, voici mon idée d’app.
Je veux créer une app qui utilise le tout nouveau Nano Banana Pro, et en gros nous
allons en créant juste l’interface de l’appli dans le premier prompt,
mais elle sera destinée aux parents pour aider leurs enfants à faire leurs devoirs.
Et donc vous pourrez 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 les devoirs,
et elle affichera tout le raisonnement.
Et nous allons ajouter la fonctionnalité IA juste après avoir utilisé
ce premier prompt.
Donc tout ce qu’on a à 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 donc là, ça utilise du code Claude.
L’app Vibecode utilise le code Claude directement, donc
c’est littéralement le code Claude comme si vous l’utilisiez dans votre terminal,
et maintenant l’app est en train de charger. Voilà, c’est terminé.
Bon, alors, nous avons… Ça s'est chargé. Voyons ça. Et donc j’ai en fait
préparé un devoir que nous pouvons prendre en photo. Comme ça, nous pouvons
prendre une photo de ce devoir. Et, euh, il a cette petite animation de crayon.
J’aime bien.
Notre IA analyse soigneusement le problème et écrit la solution étape par étape.
Et boum. C’est là que le montage va intervenir. Donc maintenant,
on va aller ajouter la fonctionnalité d’IA ici.
Très bien, donc maintenant si on va dans l’onglet API et qu’on va dans l’image,
et qu’on clique sur Nano Banana Pro et qu’on l’ajoute à l’invite:« S’il vous plaît,
pouvez- vous me permettre d’utiliser cette API pour ajouter
la bonne réponse et tout le raisonnement? Donc l’invite pour l’IA
devrait être: Complète ce devoir en
écrivant la bonne réponse au stylo et en montrant
tout le travail pour tous les exercices.
Comme ça, on peut ajouter la fonctionnalité d’IA.
Et donc c’est ce que nous venons juste de a saisi une invite.
Maintenant, ce que nous voulons faire, c’est en fait créer une base de données.
Donc maintenant, ce que nous pouvons faire, c’est en fait activer un backend.
Donc nous allons configurer un backend Vibecode. Veuillez déplacer la
fonctionnalité d’IA vers
le backend et aussi
ajouter une base de données et
une authentification afin de
stocker les
images générées, etc. Nous venons donc de configurer le cloud Vibecode.
Bien, maintenant l’IA a terminé avec l’invite précédente,
et maintenant elle met en place le backend.
Ici, nous pouvons en fait tester et voir si l’app fonctionne. Allons- y, faisons ça.
Nous pouvons maintenant prendre notre app, la placer devant les devoirs.
Nous allons prendre une photo ici.
Maintenant, elle est en train de travailler dessus. Ah, et voilà. Regardez ça.
Elle a répondu parfaitement George Washington.
Elle a résolu le problème de maths.
Ici, il est écrit injustice raciale et courage moral.
Et ensuite pour le quatre, j’ai mis ce problème partiel pour voir ce que ça ferait,
et il n’a tout simplement pas répondu. Et donc ça, c’est vraiment cool.
Et ici, on peut cliquer sur Enregistrer.
En fait, ça ne va rien faire parce que le backend n’est pas encore implémenté.
Et donc, ça fait toujours ça.
Donc maintenant on va attendre que le backend et la base de données soient créés.
OK, c’est fait. On va regarder ça.
Comme vous pouvez le voir ici, il y a maintenant une icône de profil.
Je peux sélectionner l’icône de profil et je peux en fait m’inscrire.
OK, je viens de m’inscrire. Cliquons sur Enregistrer. On va revenir sur l’appli ici.
Et donc si j’ouvre ce document,
maintenant on va prendre une photo des devoirs.
Il est en train de travailler dessus. Oh oh, on a une erreur.
On va simplement appuyer sur Corriger. Et c’est gratuit.
Donc quand cela se produit, il est libre de corriger le problème. Maintenant,
on va juste attendre que l’erreur soit corrigée. OK, c’est fait. Allons voir ça ici.
Si nous ouvrons ce Google Doc, essayons ceci. Oh, c’est fait.
Et regardez ça. Il l’a résolu parfaitement et il
a répondu à toutes ces questions. Maintenant,
ce que nous allons faire, c’est que nous allons appuyer sur enregistrer.
Maintenant, si nous allons dans l’onglet cloud et que nous allons dans
l’onglet image générée, nous devrions le voir juste ici. Voilà. Nous avons
maintenant l’URL de l’image juste ici.
Donc ces images sont stockées dans la base de données et
nous pouvons nous connecter.
Et donc nous avons la base de données parfaitement intégrée et nous avons les
différentes tables que nous pouvons simplement voir directement dans notre vue web,
et nous pouvons aussi les voir dans notre vue mobile également.
Comme vous pouvez le voir ici sur le téléphone, vous pouvez aussi voir toute la
base de données tout comme vous pouvez le faire sur le web.
Et nous avons des intégrations.
Et maintenant nous devons simplement pouvoir accepter des paiements avant de
l’envoyer à 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 une fois que nous avons l’onglet Paiements ouvert— et au fait,
c’est un processus identique si vous le faites sur le web,
donc c’est exactement la même chose.
Euh, pour l’instant je vais vous montrer comment le faire sur le web.
Vous pouvez simplement cliquer sur« Terminer la configuration» ici.
Et puis une fois que cela est initialisé, cela a essentiellement créé un projet sur
RevenueCat automatiquement.
Et donc maintenant nous pouvons en faire un…
créer un abonnement mensuel à 4,99$.
Aussi, je veux que vous ajoutiez s’il vous plaît un
écran de paywall,
donc si l’utilisateur n’a pas payé quand il va
cliquer sur un projet, on le confronte à un paywall.
Euh, par exemple, s’il essaie de prendre une photo avant d’avoir vu un paywall,
au moment précis où il appuie sur le bouton, un paywall doit apparaître et il doit
le faire payer 4,99$ par mois afin d’obtenir l’accès.
Fais que cet écran ait l’air professionnel.
Et comme ça, on pourra lancer ça. Et puis très vite, je vais aller dans
l’onglet Image. On va faire une icône en rendu 3D d’un
appareil photo au- dessus
d’un devoir maison.
Et je peux copier ça pour pouvoir l’exécuter de nombreuses fois ici.
On va générer des images.
Toutes ces images peuvent être placées directement dans l’appli.
Et on peut aussi générer de l’audio.
Je n’ai pas vraiment envie de générer de l’audio pour celle- ci.
Oui, et ensuite on peut ajouter cette invite à la file ici. Je crois que j’aime bien
celui- ci, là. On peut donc ajouter cette icône. Utilise celle- ci.
cette icône sur cet
écran de paywall. Mets- la en grand.
Fais- en l’icône/ image principale pour cet écran. Et comme tu peux
le voir ici, ça a, euh, créé un produit, ça a créé un prix,
et ça crée en gros toute l’offre dans RevenueCat.
Et si on va dans RevenueCat et qu’on clique sur Study Sketch, on peut voir que ça a
créé ce projet,
et qu’on n’a encore aucun essai actif parce que personne n’a payé pour toi.
OK, c’est fait. Essayons ça. Maintenant, on a ça d’ouvert. Maintenant,
ce que je vais faire, c’est aller ici pour les devoirs. Cliquons… Et voilà.
Débloquer avec Premium. Si on appuie sur démarrer,
maintenant on peut tester l’achat valide. Et comme tu peux le voir ici,
si on retourne sur RevenueCat, si nous actualisons notre page,
nous devrions voir… Voilà. Cinq dollars de revenus. Donc c’est un achat test.
Ce ne sera pas un achat réel tant que vous ne l’aurez pas
vraiment mis sur l’App Store. Ce sont des données sandbox,
mais ce paywall a bel et bien fonctionné.
Vous pouvez voir qu’il y a quelques secondes nous avons fait un test
de cinq dollars.
Et donc nous avons créé une app avec base de données, intégrations d’IA,
et elle accepte aussi les paiements,
donc un backend entièrement intégré, et nous l’envoyons sur l’App Store.
C’est vraiment aussi simple. Tout ce que vous avez à faire, c’est pincer.
Maintenant nous allons cliquer sur« Publish to App Store».
Et nous allons cliquer sur« Get started».
Je me suis déjà connecté avec mon compte développeur Apple.
Je peux juste faire suivant, suivant.
Et maintenant il vous faut simplement un token Expo, que j’ai déjà obtenu.
Et maintenant,
votre app est en route vers l’ App Store et elle va maintenant être
envoyée sur TestFlight.
Et voilà. Dans cette vidéo très rapide,
vous m’avez vu créer une app avec un front- end, avec une base de données,
avec une intégration de l’IA. Elle accepte les paiements,
donc elle a un backend entièrement intégré.
Nous l’envoyons sur l’App Store. C’est vraiment aussi simple que ça.
On se retrouve ici pour la prochaine vidéo.
End of transcript · 1,625 words · machine translated
Transcrit et traduit avec TranslateMom. Collez le lien de n'importe quelle vidéo pour obtenir des sous-titres et une transcription dans votre langue.
Original transcript (English)
Many people are quickly realizing that you can actually build an app with AI and 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, 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 vibecode.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 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. 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. Vibecode 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. I like it. Our AI is carefully analyzing the problem and I like it. Our AI is carefully analyzing the problem and So now let's go ahead and add the AI feature here. Alright, 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 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 gonna set up a Vibecode 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 Vibecode 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 gonna do anything because it hasn't yet implemented the backend. And so it's still doing that.
So now we're gonna 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. 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, 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 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 And we have integrations. And now we need to just be 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...
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, paywall screen so if the user has not paid when they go to click on a project, Um, like if they go to try and take a photo before they've hit a paywall,
right as they press the button, Make that screen look professional. And so we can run that. And then very quickly, 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 want to generate audio for this one. Yeah, and then we can add this prompt to the queue here.
icon on that paywall screen. Make this big. Make this the main and it is basically creating the whole offering within RevenueCat. And if we come to RevenueCat and we click on Study Sketch, and we have no active trials yet because no one's paid for you. Okay, so it's done.
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 going to go to this right here for homework. now we can test 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 five dollars. And so we created an app with database, AI integrations, And so we created an app with database, AI integrations,
and it also accept payments, so a fully integrated backend, and we send it to the App Store. It's really that easy. Just all you have to do is pinch. 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.
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 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,
to TestFlight. And there you go. In this very quick video, you saw me create an app with a front-end, with a database, with AI integration. It accepts payments, so it has a fully integrated backend. It accepts payments, so it has a fully integrated backend. We send it to the App Store. It's really that easy.
I'll see you guys here for the next video.
