YT YouTube2Text

YouTube2Text → Transcripts → On crée ensemble une app iOS de A à Z avec l'IA

On crée ensemble une app iOS de A à Z avec l'IA — Transcript

by Maxime Gadras · 8,076 words · 1,240 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00Today, we're going to do something very
0:02simple: start from scratch and create an
0:05iOS mobile app from A to Z, from the
0:07initial idea to submission on the App
0:09Store.
0:10And in this video, I'm going to show you
0:12exactly how I do it, all the steps I go
0:15through to create my application. How I
0:17define the features to implement, how I
0:19handle the design, how I code with AI of
0:21course, and how I submit it to the App
0:23Store.
0:24The goal here isn't to make a
0:26theoretical demo video; it's really
0:27about the concrete process. And
0:29obviously, by the end of the video, you
0:31will know exactly how to go about
0:33creating your own iOS mobile app as well
0:35. So, don't forget to subscribe and
0:37share this video if you find it
0:38interesting or if it might interest
0:40people you know.
0:42And now, let's get started.
0:44Before we begin, a quick disclaimer.
0:46This video is not intended to encourage
0:48you to build crappy apps in just a few
0:50hours using AI and then flood the App
0:52Store hoping one of them takes off. That
0:54is not the goal at all; it's what we
0:56call "AI slop," and it is clearly not
0:57recommended. Right now, so many are
0:59being submitted that it's overloading
1:01the App Store, which is why app approval
1:03times are super long now, and that's
1:04terrible.
1:06If you make an app, make it thoughtfully
1:08, by trying to create something truly
1:10useful that you value, with a real art
1:12direction and a real identity so that
1:13you can be proud of what you've done.
1:16The video won't last for hours and hours
1:18either; I will inevitably condense my
1:20methodology and what I do, and I'll use
1:21cuts. So, obviously, it would take me
1:23more time to do it for real, and besides
1:25, this is a V1. Naturally, a more
1:27complete application would take more
1:28time. So, there you go, all this is to
1:30tell you not to take this as
1:32encouragement to do just anything. I'm
1:34just giving you a methodology here so
1:36you know how to do it and get on the
1:37right track; be responsible. Alright,
1:39now let's get to it. So, regarding the
1:40idea, there's something I've been
1:42wanting to do for a while.
1:44I know that if you follow this type of
1:45iOS app creation video, you've probably
1:47come across other YouTubers who do the
1:48same thing and who, for some, have a lot
1:50of success.
1:52And there is one type of application
1:53that we see very often: affirmation apps
1:55. There are plenty of them on the App
1:57Store, one of the best known is I Am,
1:59and the idea behind these apps is? It's
2:00to scroll through positive affirmations
2:03to feel better on a daily basis. So we
2:05can like them and so on, and above all,
2:07we can display them on our home screen
2:09via a widget.
2:10And so this type of application, which
2:12is widely replicated, is also one of the
2:14easiest to rebuild because there's
2:16hardly any tech involved, it's quite
2:17simple.
2:19So the idea today isn't to launch a
2:20clone just to say we're launching an
2:21affirmation app.
2:23I'm trying to think of an angle of
2:25attack that could be interesting in this
2:27ocean of affirmation apps, a type of
2:29persona it might interest.
2:33And so, thinking about it, I said to
2:34myself: who are the people who need
2:36motivation every day, to be in good
2:38spirits, to have a good mood, but who
2:40are nonetheless attacked a little every
2:42day?
2:43This good will, this motivation is
2:45attacked within the framework of their
2:47work.
2:48And actually, I didn't have to look very
2:50far, since I am one myself:
2:51entrepreneurs.
2:53Anyone who has ever tried to launch a
2:54project, a company, knows it's very hard
2:56to stay motivated every day despite the
2:58good news, the bad news, and the roller
2:59coaster that entrepreneurship can bring
3:01.
3:02And often we feel very alone, and there
3:04are days that are much tougher than
3:06others.
3:07So I thought it makes a lot of sense at
3:10that level to have an app that sends
3:12affirmations to keep entrepreneurs
3:14motivated.
3:16I told myself: rather than just making
3:18an app with just motivational phrases, I
3:20wanted to add a little twist. And so, I
3:22thought a bit, and I know that what
3:24helps me as an entrepreneur is seeing
3:25that I'm not the only one struggling at
3:27times.
3:29And in fact, I know that all the great
3:31entrepreneurs you know today, and they
3:32talk about it either in interviews or in
3:34the biographies they've written, is that
3:36they all struggled at some point, they
3:38all failed, they all tell those stories
3:40.
3:41And so I think it could be nice to
3:43create a mix, an affirmation app that
3:46also intersperses between affirmation
3:48phrases stories from entrepreneurs, but
3:50focused on their failures.
3:53To show that, well, you see, he's super
3:54successful, but actually before being
3:56super successful, he failed at this,
3:57this, and that, or he struggled with
3:59this, this, and that. So don't give up.
4:01Actually, I think it can also really
4:02help people feel better.
4:05There you go, so that's the idea for the
4:07application.
4:09So what I suggest is that we now move
4:11straight on to writing the features.
4:13The first step is to define which
4:15features I want in my app, and starting
4:18from there, we'll draft a specification
4:20based on what we call user stories,
4:22meaning user stories are what the user
4:25can do within our application.
4:27Every sentence in this specification
4:29will start with "As a user, I want to be
4:31able to." So, let's head over to the
4:33computer to tackle this right away. So
4:35we're back at my little whiteboard here
4:37, and what I suggest is that we add some
4:40text. We'll write it here like this and
4:43get everything out of my head that I'm
4:46thinking of for the application in this
4:49case.
4:50As I said, we're not going to make
4:51something very complicated. The idea is
4:53really to use the mechanics of apps that
4:55already exist and just add our own
4:57little twist. So first, we'll write "As
5:01a user."
5:04"I want to be able to," colon.
5:06Okay.
5:09And so, actually doing this exercise
5:11will allow us to really think about what
5:14we want in the app.
5:17For me, as a user, I want to be able to
5:21, uh, browse
5:25through phrases
5:29of motivational affirmations, let's say
5:31.
5:34I want to?
5:36I want to be able to swipe up to scroll
5:40through the phrases.
5:44You have to be very precise when writing
5:45our user stories. The idea is really to
5:47describe what the user does in the app,
5:48or rather, the future application. So, I
5:50want to be able to browse, and how do I
5:52do that? Well, I swipe up.
5:55Uh, for each affirmation, I want to be
5:59able to—and here we'll create sub-user
6:03stories. I want to be able to
6:07like, and therefore have, uh, a place
6:11where I can find my likes, add to
6:14favorites,
6:17share
6:19on social media.
6:21That will help with the organic side of
6:23the application. I also want to be able
6:25to...Actually, let's put it here instead
6:27. Browse motivational affirmation
6:30phrases and stories
6:35from entrepreneurs, or rather, stories
6:37of entrepreneurial failures.
6:42I also want to be able to access the
6:45application without logging in.
6:49Uh, for a V1, I'm not going to build an
6:51account system and so on, there's no
6:52point. The idea is that we create the
6:55app, we download the app, and then when
6:57arriving on the app, we go through the
6:59onboarding, and at the end of onboarding
7:02, we arrive directly on the app.
7:04So, access to the application without
7:06logging in.
7:08I want to be able to navigate a menu.
7:13Here, I'll put "bottom" in parentheses,
7:14so like all apps, right, it's the menu
7:15at the bottom.
7:17And so in the menu, I'll put the tabs
7:19that are there.
7:21So there is the, uh, main tab.
7:26There are the settings.
7:29I'm just thinking that the, the menu,
7:31sorry, for this type of app, it's
7:33actually not at the bottom; it's, uh,
7:35it's the little cross, the little
7:36settings in the top right, otherwise
7:38there's the swipe.
7:40So yeah, actually, we won't do that,
7:42we'll do, uh, browsing
7:46different tabs. We'll do it like that.
7:49OK.
7:50So here, main, settings. In the settings
7:53, we'll see what we put in.
7:57Possibly, favorites.
7:59So favorites, and inside, I'll put there
8:01are affirmations
8:04and stories. I also want to be able to
8:08create a widget on my
8:14home screen that displays a story or an
8:19affirmation every day
8:24at random.
8:26Simply. And roughly, that's all. There
8:28isn't much more that I could add.
8:30Afterward, the rest will be details that
8:32I might refine a little bit off-camera,
8:34but the idea here is, well, my V1 is
8:36this.
8:38I don't want more features, and that's
8:40why this exercise is extremely important
8:41because I could go off in all directions
8:43, adding stuff to post directly to
8:45TikTok with a, but actually, I don't
8:47care, there you go.
8:48This is what I want. This application,
8:50the V1, it's going to be this.
8:52So, we'll go with that, and so now, the
8:55next step will be to think about the
8:57design I want.
8:59So, we'll meet right back for the design
9:01brainstorming.
9:02So, for the design, what I like to do is
9:05go get inspired by what other designers
9:08are doing. Now, watch out, I'm not
9:09saying steal their work, I'm just saying
9:11get inspired, go see a little bit the
9:13different artistic directions that exist
9:15to be able to, well, adapt them to my
9:17thing. So, what I really like is the
9:19Dribbble website, right here.
9:22And so, on Dribbble, we're going to take
9:25a look at what's being done.
9:28I've already given it some thought, of
9:30course, and what I really like is
9:32looking at neo-brutalist or editorial
9:35styles, that kind of art direction.
9:39So, let's search for "brutalist mobile
9:41app."
9:43Yeah, something like this style here.
9:46See, that's not bad.
9:49Otherwise, what I also like—yeah, I like
9:52this one.
9:53I like this one because—well, it's very
9:55sports-oriented, and I often feel that
9:58entrepreneurship is a marathon, not a
10:00sprint.
10:02And so, I think the art direction of
10:03sports mobile apps could work really
10:05well for this app, drawing some
10:06inspiration from that.
10:09So, this is actually pretty good, really
10:11not bad at all; it's neo-brutalist, yeah
10:14.
10:15OK. So, neo-brutalist with, uh, a sports
10:18vibe. I'm not even saving the photo; I
10:20don't really need to. If worst comes to
10:22worst, I'll come back to it if I see
10:23that it doesn't work out in the mockups
10:24. We're going to generate mockups using
10:26AI later. But for now, in any case, OK,
10:28that's exactly what I want.
10:31It's really cool.
10:32I'll take a quick look to see if there's
10:34anything else, but the idea, the idea
10:36will be this; yeah, I like that. Let's
10:38see—it's not sports-related, but I like
10:40the big, bold text, very square, very
10:42straight; that's what's called
10:44neo-brutalism. So, I wanted to confirm—
10:47I had already thought about this,
10:49obviously—but I wanted to confirm it,
10:51and honestly, we got lucky here, but I
10:53want something that leans towards this.
10:56You could just save this image and give
10:59it to the AI.
11:01I feel like that's kind of stealing this
11:03person's work. I get the concept, so
11:05I'll just describe it instead.
11:07Now, as for how I handle the app design
11:09, I use—well, I have a ChatGPT
11:11subscription and a Claude subscription.
11:14You should know that ChatGPT is very,
11:16very good at imagining more artistic
11:18things, but it doesn't create editable
11:20designs or things like that the way
11:22Claude does. While Claude Design is good
11:25at creating fairly classic designs, if
11:27you don't guide it extremely well, it
11:29struggles a bit to step off the beaten
11:31path and do original things.
11:33So what I do is, I always generate one
11:35or two high-fidelity mockups—not
11:37wireframes, but actual things with color
11:39—in ChatGPT, and then I feed these
11:41ChatGPT images into Claude Design.
11:44So I'm going to enter my prompt into
11:45ChatGPT and we'll see what it gives us
11:46right away.
11:48OK, we're now on ChatGPT and it's not
11:51bad.
11:52It's not bad at all. So, it's called the
11:54app Grit.
11:55That was one of my suggestions I had in
11:57terms of a name. It's not bad at all.
11:59It's not bad at all, at all, at all.
12:02You see, there's this bold text, this
12:04very blocky look, and so on.
12:06So here, this is the part where we swipe
12:07. It might be a bit big, we'll see.
12:10The idea is that afterwards we have
12:12entrepreneur stories with—and I really
12:14like this—the entrepreneur's photo,
12:16which helps to better visualize who they
12:18are, with the name in big letters and
12:20just a sentence saying, "Before Airbnb
12:21took off, the founders sold cereal boxes
12:23just to keep building."
12:25For those who don't know, it's the
12:27Airbnb founders; at one point, they were
12:29really struggling.
12:31It was during the Obama-Trump election,
12:33and they made cereal boxes with Obama
12:34and Trump as mascots and sold them.
12:36Well, that's the legend; apparently, it
12:38allowed them to get back on their feet
12:41financially and keep developing Airbnb.
12:43So I think that's pretty cool, with the
12:45explanatory sentence and a little
12:47motivational phrase below, "You're
12:49probably earlier than you think."
12:51Same thing here, I had to guide ChatGPT
12:53to include that; it's also part of the
12:55user story work. I showed you a brief
12:57overview earlier, but the idea is to
12:59really dig into what you want exactly.
13:02The point is not to let the AI build
13:04your app for you; you don't want to lose
13:06the intellectual property of your app.
13:09And so, as I said, we find the ability
13:12to like, save, send, and we can swipe up
13:15to go to the next thing.
13:17I did, however, ask him to put a menu at
13:20the bottom here for me.
13:22I actually find it quite nice in
13:24neo-brutalist, because while other apps
13:26use those little floating icons, I think
13:27this is pretty good.
13:30We're looking at it here, yeah, that was
13:31it too.
13:32That right there is what was saved as a
13:34favorite.
13:35Right here.
13:37Uh, so I think that's cool.
13:38Now, he took a bit of liberty here, I
13:40see, with a like counter next to it—
13:41well, there is a like counter, but
13:42there's no count, there's nothing, so we
13:44won't be able to know how many people
13:45liked this phrase; it’s not a social
13:46network.
13:48So actually, in the real mockups—or
13:49rather the real app—we won't find this
13:51counter; it will just show whether or
13:52not you personally liked it, that's all
13:53.
13:55Uh, and this, then, is the profile, with
13:58, you know, notifications, widget
14:00preview, widget style, themes, and so on
14:03and so forth.
14:05It's true that in this type of
14:07application there are a lot of themes;
14:09for now, I haven't added any, to be
14:10honest, I think for a V1 I won't include
14:12payments, and these apps usually charge
14:14for app customization.
14:16However, for me, for now, since I don't
14:18want to charge, I probably won't do any
14:19customization. So, we'll see. So, now
14:22that I have these mockups, we'll take
14:25them and put them into Claude Design and
14:29see what it comes up with. The idea is
14:32really to do all the application screens
14:34, so screen by screen. Uh, that means,
14:37okay, here, if I click on Save, what
14:38happens? If I click on my Momentum, what
14:40happens? If I click here on Explore,
14:42what is there? What happens? I actually
14:45think I'm going to ask it to remove the
14:46Explore button. I don't really like it
14:47because, in fact, the Home and the
14:49Explore, well, it's useless.
14:51Alright, I'm heading into Claude Design
14:53now and we'll see what it gives us. So,
14:55we are back in Claude Design, which is
14:57right here. Uh, in terms of the model,
14:59I'm sticking with Opus 5.5, which is one
15:01of the latest models released and it's
15:03excellent. Uh, and for effort, though,
15:05I'm not setting it to medium, I'm
15:06setting it to high, and it performs
15:08perfectly like Fable 5.1.
15:09So, I'll leave it on Opus 5.5. The idea
15:12is that, as a result, I'm going to work
15:14on Mobile App Design. And so, what I'm
15:17going to do is go back into ChatGPT and
15:19ask it to create a prompt for me,
15:21because ChatGPT created these initial
15:24mockups. So, I'm going to tell it, "
15:26Create a prompt for me to really capture
15:28the design and the feeling of this art
15:30direction." I just told ChatGPT that I
15:32was going to give the mockups to Claude
15:35Design and so on, and so it's generating
15:37a prompt for me. There we go.
15:39Okay, so here we are in Claude Design.
15:41So, I have sent the entire prompt. I am
15:44also going to attach the mockups.
15:46And we're going to launch Claude Design
15:48and see what it does for us. We'll be
15:49back as soon as it's finished working.
15:51Okay, so Claude has finished creating
15:53the mockups. Now, I won't lie to you;
15:55Claude finished a little while ago. I
15:57chatted with it, brainstormed, and so on
15:59, to modify things and show you the
16:01final result.
16:03There were some things I said I wouldn't
16:04keep, but in the end, I kept them; the
16:06famous little "Explore" tab, I kept that
16:07one.
16:08You'll see that it got a little ahead of
16:10itself and created a paywall, even
16:11though I said the app would be free.
16:13It will be at launch, at least, but at
16:15least it's already there.
16:16And so, I suggest we take a look at the
16:18result of this entire session together
16:20right now so you can see what it looks
16:21like. So, here we are in Claude Design.
16:24So you see, this is cool, it created the
16:26entire design system for the app. So
16:27from here, I'll be able to generate
16:29everything, create all the App Store
16:30screenshots, and everything with a
16:32consistent art direction. So that's
16:33great.
16:34So I have my design system with the
16:36rules for each color, when it's used,
16:38and so on, the different fonts—that's so
16:41good—the different buttons, in short,
16:43absolutely everything.
16:46The idea is that now we have the screens
16:49. So I worked with it, particularly on
16:51the onboarding. Onboarding is something
16:53that's quite important because, well,
16:55often an onboarding process that's long
16:57—and I'm the first to say this in my
16:58videos—I find that super annoying in an
17:00app.
17:01But you still need to have a little
17:03onboarding where you ask questions.
17:05Because psychologically, the user feels
17:07more like it’s something personalized
17:09for them, and therefore they see greater
17:12value in the application.
17:14It's a little psychological tip.
17:16And the other thing is that it also lets
17:18you collect some data on who is using
17:19your application, so you can know
17:21exactly who to target to get more and
17:23more users.
17:24So here you can see I’ve been working on
17:26the onboarding.
17:27Uh, so I’ve done everything in English
17:28for the moment. So "You are not behind
17:30in your building" and so on. Anyway, a
17:32first affirmation sentence with various
17:34questions. Uh, what is the hardest thing
17:36in your journey today? What are you
17:38currently doing? Uh, where are you at?
17:40And I really like this—this wasn't my
17:42idea, this was actually Claude's—this
17:44little timeline here, from the idea
17:46stage all the way to scaling, it's just
17:48great.
17:49Uh "What do you need more?" And
17:52basically, each affirmation will have a
17:55category, a tag. And so we can see that
17:57there are several here that I had given
17:58it. So "Motivation, launch, rejection,
18:00comparison, burnout" and so on. And so
18:03it's a bunch of affirmation sentences to
18:04actually counter all of that. We have a
18:06few questions to really refine the user
18:09experience.
18:10This is the famous screen to authorize
18:11notifications or not, because obviously
18:13it's super important, we know that.
18:16Anyone with a smartphone has dozens and
18:18dozens of apps, and if there’s nothing
18:20to remind them to come back to the app,
18:22there’s a very high chance they’ll
18:24forget you and eventually delete it.
18:26And that's not what we want as app
18:29creators, so there’s this little screen
18:31that asks, well, do you want to be
18:34reminded—well, not reminded exactly, but
18:36how often do you want us to show you
18:39affirmation sentences?
18:41And then, here’s what the application
18:43looks like, and so we have 10 sentences
18:45a day, which is one of the things I
18:47reworked because I saw that it was
18:49common in many apps.
18:52And so, there you go, keep going, nobody
18:54sees the company yet, et cetera, et
18:55cetera; we scroll and we can see founder
18:57stories that will appear somewhat
18:58randomly within the 10. There are at
19:00least—I’ll specify later, but I think—
19:02one or two stories in the affirmations
19:04each day, because there aren't millions
19:05of stories, so maybe one story per day,
19:07I think that’s what I’ll do.
19:10We’re now on my desktop, and you can see
19:12that I’ve opened something called GitHub
19:14. Well, GitHub Desktop. Uh, what is
19:17GitHub? It's a platform that allows you
19:20to save versions of your code.
19:23When we develop, let's imagine something
19:25very, very simple; there is the
19:27application that your users see, the
19:29version of the app that your users see,
19:31but imagine now that you want to add a
19:34feature.
19:35The feature won't just be added all at
19:37once like that, although it's a bit
19:39easier now, but the idea is you have to
19:41add a new screen, you have to start
19:43making changes, and actually, as
19:45developers, we don't want to break the
19:47application that the users are currently
19:49using.
19:50So what happens is that we make a copy
19:53of this existing application, we do our
19:55little tinkering on this copy, and once
19:57that tinkering is done, we perform
19:59what's called a commit—meaning we save
20:02this new version to replace the other—
20:04and we perform a push, a deployment, to
20:07be able to replace the version we just
20:09created and thus replace the old version
20:11.
20:12And that way, the users don't see the
20:14version that's under construction while
20:16it's in progress, and as soon as it's
20:18finished, we commit, we deploy, and then
20:19, hop, without them having to do
20:21anything, they see this new version.
20:24It's a bit like what happens when you
20:25download an app on the App Store;
20:26sometimes when you go back to the page,
20:28there's an "update" button.
20:29Actually, what is an update? It just
20:31means that the developer has added a new
20:33version and that you need to download
20:35this new version to be able to access it
20:36.
20:37Up until then, you were on the old one.
20:39Well, for us, it will be exactly the
20:41same in our development.
20:42We will have our development in the
20:45Cloud with VS Code, one version of the
20:47application, but even while we are
20:49developing, we will want to save
20:51different versions every time we add a
20:54feature. Well, it can be very useful if
20:56, for example, we add a feature tomorrow
20:58and break something, and we end up
20:59thinking, "Actually, it was better
21:01before." Well, we can go back. We can
21:03return to the previous version. And well
21:05, GitHub allows us to do that.
21:08Uh, so GitHub, there are plenty of ways
21:09to install it, to download it. You can
21:11install it in the terminal via the
21:13terminal, via terminals. You can—I
21:15downloaded the GitHub application
21:16because, actually, I had a little issue
21:18on my computer, so it was simpler. So
21:20you can get GitHub Desktop; just type it
21:21into Google and you'll be able to
21:23download it.
21:24So it looks like this. So here you see,
21:26I am in the Giga repository. So, what is
21:28a repository? Well, it's a folder in
21:30which GitHub will track the different
21:32versions of your app.
21:34So what I'm going to do is go here, I'll
21:37click add, and then create a new
21:39repository.
21:42I'll call it Grid.
21:45I'll choose the location where I want to
21:47create it. I won't add a description or
21:49a license, we don't really care, and
21:50I'll click create repository.
21:53So what happens now is that I have a
21:55folder on my computer that is considered
21:57a repo, a repository, by GitHub.
22:00And so from there, GitHub will track the
22:02different versions of my app that we're
22:04going to put in there.
22:07Uh, what I'm going to do is click
22:08publish repository because, actually, as
22:10long as I don't publish, this repository
22:12, these versions of the app, stay on my
22:13computer. So if my computer burns
22:15tomorrow, I lose everything.
22:17When I click publish, it actually, uh,
22:20publishes the repo to github.com. And so
22:22it's in the cloud, and so if my computer
22:24burns tomorrow, it's fine, I can recover
22:26the future versions. I really hope my
22:28computer won't burn, but that's the idea
22:30.
22:31I will, however, keep "keep this code
22:33private" checked because if we don't set
22:34it to private, anyone can see the code,
22:36and that doesn't work for me for a
22:37project like this one.
22:38So I click publish repository.
22:41I now have my grid folder on my computer
22:44.
22:44So we're going to go back into Claude
22:46Code, download the HTML file with all
22:48the mockups, and put it into grid.
22:50And here, by the way, I'm going to add a
22:51new folder that will be called, uh,
22:55reference.
22:57And so in "reference," we'll be able to
22:59put reference images, mockups, and so on
23:01and so forth.
23:02So I'm going back to Claude Design, and
23:04I'll select project HTML.
23:06There, project archive, very good.
23:10I'm going to export it and put it in my
23:12folder. I'll save it in "reference,"
23:14save.
23:16And there you go, now Claude Code will
23:18be able to access this file to start
23:21coding the application.
23:23I'm going to do one more thing in this
23:25folder. Remember, I talked about my user
23:27stories that I had written up very
23:28quickly to show you; I didn't show you
23:30the full version, otherwise it would
23:32have taken, uh, half an hour or an hour
23:33.
23:35But what I'm going to do now is ask
23:37ChatGPT to generate a .md file for me, a
23:39markdown file that is easily readable by
23:42AIs, containing all the features that
23:44are supposed to be in the application.
23:48And there you go.
23:49So now I have my .md file, the
23:51specifications for my application, which
23:54Claude will be able to retrieve to start
23:56creating the development plan and, well
23:59, establish the rules for the
24:01development in general.
24:03So now, what we're going to do is head
24:06over to Visual Studio Code, where, hop,
24:10I've already set up Claude, Claude Code
24:13. So it's a plugin that you install, and
24:15it allows you to access Claude directly
24:17within Visual Studio. As I said, Visual
24:19Studio is an IDE. An IDE is?
24:24It's a development environment, which
24:26allows you to have—you know, rather than
24:29just this simple little chat window—the
24:31idea is that we really have this setup
24:34where we have our application files here
24:37, the file contents here, and we can
24:39talk here, we can use quite a few slash
24:41commands to talk to Claude in a way
24:44that's a bit more precise than in a
24:46normal chat window.
24:50And so here, what I'm going to do is
24:52open Visual Studio Code in my "grid code
24:54" folder that we created earlier, so
24:56Claude Code will be able to access all
24:58the files in this folder; it will be
25:00much more practical for developing.
25:03So here, what I'm going to do, hop, is
25:06click "Open Folder."
25:10I'm going to open "grid."
25:15It opened "grid" for me in the folder.
25:17And so there, you can see that now on
25:19the left, I have my "reference" folder,
25:22and there in my "reference" folder, I
25:24have my .md file and my mockups. So,
25:27from this point on, I'm going to tell
25:28him we're going to do it together.
25:32Hello, listen, you have access to the
25:33grid project folder, inside the
25:35reference folder, you'll find a .md file
25:37which is the project specifications. So
25:39, I would like you to analyze it in
25:41detail and deduce the development plan
25:44from it.
25:46If you have any questions, don't
25:48hesitate to ask me, and for clarity,
25:50don't forget that the project must be
25:53built using Expo 57.
25:55And the app previews will be done via
25:59Expo Go.
26:01In principle, there is no native build,
26:03so there are no native features, meaning
26:05there won't be a need for a development
26:07build, but I'll let you analyze all that
26:08and ask me questions if needed.
26:11So, what did I just tell him? I
26:12purposely didn't explain it to you
26:14beforehand; quite a few terms were
26:15mentioned, like Expo, development build
26:17, and so on.
26:19What you need to understand is that when
26:21developing a mobile application, there
26:23are several ways to do it: either you
26:25use the native language of the phone you
26:28want to develop for. So for iPhone, the
26:30language is Swift, but we also have
26:33other methods, which means developing in
26:35JavaScript and using what's called
26:38encapsulation to offer this version that
26:41isn't written in the phone's native
26:43language, but can still be read. And
26:45actually, Expo does exactly that. The
26:48advantage of Expo is that it allows you
26:50, with a single piece of code—actually,
26:52just one codebase that you develop—to
26:55deploy your application either on Apple
26:57, or on iOS, or on Android.
26:59So, it's very practical. Here, I'm going
27:01to do it for iOS, but tomorrow, if it
27:03works, I can very easily convert my
27:05application for Android.
27:07Um, and so, Expo is, uh, a
27:11a method that is very, well, that is
27:13very, very well-recognized and that I
27:14recommend you use. Uh, there is very,
27:16very little difference from Swift. Uh, I
27:18also mentioned Expo Go. So, what is Expo
27:21Go? It's an application you download on
27:23your phone, which I'll show you in a
27:24moment, that allows you to preview your
27:26application before it's on the App Store
27:28.
27:28And so, that is also truly extremely
27:30practical.
27:32Uh, I mentioned development build. What
27:34is a development build?
27:36It's actually a development version, so
27:38a development build, right, that you can
27:41install on your phone, so there's a link
27:43, etc., you can go through the internet
27:45and install the application on the phone
27:47to be able to test more advanced
27:49features that require an installation
27:51and cannot be tested by just previewing
27:53via the web with Expo Go.
27:56Uh, in principle, we won't need that
27:58here.
28:00So, it tells me "iOS widgets and real
28:02purchases require a native build,
28:03impossible in Expo Go, how do you want
28:05to?"
28:05So, I'm going to say "No widgets or
28:08native build planned for now for testing
28:11."
28:12Because, effectively, widgets, well,
28:14that's a feature that requires a native
28:16build, so potentially a development
28:18build.
28:19"Who produces the starting content,
28:21punch, and?" You generate a first batch
28:22for this example, we'll say we're going
28:24to generate it. "Where is the back-end
28:26at?"
28:28Here, we'll say "Mock data first." But I
28:31want to say "No Supabase back-end.
28:37We're going with
28:41local storage."
28:45There aren't any user accounts anyway,
28:50so nothing to store on an external
28:56back-end.
28:58"Which language for?" For the moment,
29:00we'll only do English.
29:03And we're launching. So there you go,
29:04hence the importance of working well on
29:07everything upstream to specify
29:09everything clearly. For example, here, I
29:11think I must have missed something in
29:13the .md file since it's asking me these
29:15questions again even though what I said
29:18was normally quite precise.
29:20So it says "I've updated the plan, phase
29:220, phase 1, phase 2 starting content,
29:24phase 3 onboarding, phase 4 feed home."
29:26"OK, very, very good." So it's putting
29:28all the development phases for me, we'll
29:29be able to refer to them later.
29:32Uh, that suits me, you can write the
29:36plan.md as well as a cloud.md.
29:41So the plan.md is the file it will refer
29:43to for development, to know if I'm at
29:45phase 1, phase 2. The cloud.md is a more
29:48global file that allows us to store the
29:50major decisions, the major best
29:52practices to follow, and so on and so
29:55forth. And so it's important to update
29:58it regularly.
29:59So in Visual Studio Code there are some
30:02very handy things, for example, the/
30:04init slash command allows you to update
30:06the file. When you select the cloud.md
30:09file, you can then update this cloud.md
30:10file with what we just did. So there, it
30:13finished writing the plan and the
30:14cloud.md for me, so it specifies, "I
30:16don't have figures for the free account
30:18limits, uh, I'll put in some default
30:20values.""So, indeed, I hadn't specified
30:21that because I wasn't sure when I did it
30:23, so that's not a big deal." The
30:24important thing is to know that there
30:26are limits for the free account. And you
30:27see, afterwards, these are the kinds of
30:28small details you'll correct as
30:29development progresses.
30:31So it tells me, "Well, look, I haven't
30:32committed anything; let me know if you
30:33want me to commit these files or start
30:35phase 0 directly." And so there, it
30:36tells me, "I haven't committed anything
30:37.""That's what I explained to you
30:39earlier."
30:40We just added files to our development
30:42folder.
30:44These files, for the moment, are on my
30:45computer.
30:46What we need to do is save a version of
30:49the application. So the application is
30:51the entire grid folder.
30:53And to be able to store it, to say, "
30:55Well, at this moment in time, these
30:57files now exist." Which means that from
30:58this version on, Claude will rely on
31:00these files to develop. So what we're
31:02going to do is, yeah, we're going to
31:03commit. So we'll go back into GitHub
31:05Desktop.
31:08Here. And you can see that now in GitHub
31:10, I see on the left that it has listed
31:12all the files that have changed.
31:14So here, I'm going to say, "Writing
31:16Claude MD and development plan."
31:21development. I click "Commit 5 files to
31:24main." So main is my main branch, it's
31:26the official version of the application
31:28, the primary one. And I click "Push
31:30origin" to send it to the web.
31:34A small clarification, I know there are
31:35people who automate this entirely. I
31:36don't want Claude to commit for me. I
31:38want to be in control of what is
31:40committed. I want to be able to know
31:42exactly where we are, at which phase,
31:44what I am validating, and what I am not
31:46. It takes a little more time, but it
31:47allows me to have more control over what
31:48I'm doing. I hate leaving everything to
31:50the AI. Maybe one day it will happen,
31:53but for now, I prefer to keep control
31:55over that.
31:56So now that we've got that, I'm going to
31:58tell it, "Listen, that's perfect.
32:00I've committed the latest version. You
32:03can launch development phase zero."
32:08And so, this development phase zero is
32:11right here.
32:13It's the project foundation. It will set
32:15up the Expo project using SDK 57. So SDK
32:1857 is the version of, well, of Expo, you
32:21could say.
32:22Uh, Expo Router, strict TypeScript, and
32:24so on. Anyway, it will initialize the
32:26project, set the name, and so on.
32:28It will use the theme directly from the
32:31mockup we made earlier. So it's
32:33important to do the mockup beforehand.
32:35And then, once that's done, we'll move
32:38on to phase 1, meaning content, local
32:41storage, etc. So really setting up, you
32:43know, the main essentials.
32:46The big part will be phase 2, since that
32:47will be the initial content, the
32:49different punchlines, and so on.
32:51And phase 4, phase 3 is the onboarding,
32:53and phase 4 is the home feed, and so on
32:54and so forth.
32:56So right now, it's setting all of that
32:58up.
32:58I'm not going to stay with you for every
33:00step to film it; it would be very, very
33:02long and not that interesting. It will
33:04always happen the same way; it will
33:06finish phase 0. So for phase 0, I have
33:09nothing to test, but starting from the
33:11content and local storage phase, yeah,
33:14phase 1, phase 2, yeah.
33:17Starting from phase 1, I'll have things
33:19to test on Expo Go. So we'll meet back
33:21right after to show you how it's going
33:23in Expo Go. Just know that I'll be going
33:26back and forth with it at each phase to
33:27make sure it truly respects my vision
33:29and the plan. And to be sure it follows
33:32the plan, we can obviously select it
33:34here so it always has it when launching
33:37the task.
33:39There you go. So I'm launching these
33:40different phases and we'll meet back
33:41right after so I can show you how it's
33:43going in Expo Go. So, we're back after
33:45several hours accumulated over two days
33:48of work with Claude. I've exchanged
33:50quite a bit with it, as I told you. So
33:51we've completed the different phases
33:53that we saw in the development plan. At
33:55each phase, I tested it on my phone,
33:57gave him my feedback, made small
33:59modifications, and so on. In short, a
34:01lot of back and forth, back and forth,
34:02back and forth. Every time, I manually
34:04committed via GitHub Desktop to make
34:06sure everything was up to date.
34:08And so I've reached a version that isn't
34:10completely finished yet, but I'm making
34:11a quick video to show you how I test it
34:13and how exactly it works. So, the first
34:15thing is, as I mentioned earlier, we're
34:17going to use Expo Go.
34:19So Expo, this famous Expo Go app, this
34:21famous mobile app that you can download
34:23on the iPhone and which acts as a
34:24companion to the Expo framework that we
34:26use for developing with Claude.
34:30There's one thing that is extremely
34:32practical when you want to test: we
34:34launch a local server on our computer,
34:36and by having this server on the
34:38computer, we can scan it with our iPhone
34:41and test our application.
34:43So, what happens is that we go into the
34:46terminal here and run npm run start.
34:49It will launch the server and give me a
34:52QR code that I'll need to scan with my
34:55phone.
34:58Hop, I'm currently recording my phone
35:00screen so you'll see, I select that, I
35:02click open in Expo Go.
35:04It will load my application, so you can
35:07see it starting up, and my Grid
35:09application appears, so you can see I
35:12have everything I had already decided on
35:15.
35:16So, the famous swipe up to see the
35:19different punches.
35:22We also have Founder Stories from time
35:23to time—well, from time to time actually
35:25means once a day for Founder Stories.
35:27So here we can see Ben Silbermann, who
35:29is the founder of Pinterest. Here, we
35:31can see the full story. Actually, the
35:33full story is just a little timeline of
35:35what happened, so there you go, in 2010
35:38Pinterest launches with 3,000 users.
35:41In 2012, two years later, 10 million
35:43monthly users, and with each one, a
35:45little phrase underneath: "small numbers
35:47are still a signal," meaning even if you
35:50don't have many users—well, 3,000 is
35:52still a lot, but anyway.
35:55And well, that's not a reason to get
35:56discouraged, you see.
35:59So there are plenty of stories, one per
36:02day, and 10 punches each day.
36:05And once you've reached the 10, or
36:06rather it's 9 punches and one story.
36:09And at the end, at the end of the 10,
36:11you get "that's today 10" and so you
36:13can't view anymore.
36:16You'll have to come back the next day.
36:18Uh then we have tabs, so "saved" where
36:20you can save punches or stories you
36:22liked.
36:23You have an "explore" button, now that's
36:25pretty cool; actually, uh you'll be able
36:27to find all the existing punches here, I
36:29didn't set a limit on that. On the other
36:31hand, for the stories, I thought I'd add
36:33the stories as the user sees them. It
36:36will increase retention because it makes
36:37us want to come back every day to see
36:39the entrepreneurial story of the day,
36:41and every time you see one it appears in
36:43"Founder Stories," and as you can see,
36:44there are 37 left to see, so you'll have
36:46to come back at least 37 times. I'll add
36:48more later, but the idea is there.
36:51Next, you have the famous uh profile tab
36:54where you can edit uh all all those
36:56things.
36:57And there you go, that's how we test uh
36:59the application. Now, once again, when
37:02there isn't a truly native feature that
37:04requires a what we call a development—
37:06wow, I could barely say it—a "
37:08development build," and the development
37:10build is, well, it's also an Expo
37:12feature that lets you install the
37:14application on your phone in development
37:16mode. You have to put the iPhone in test
37:18mode—sorry, in dev mode—but it's very
37:20easy to do.
37:21Uh, and so that's to be able to test
37:23things like widgets. Uh, I haven't done
37:26that yet, so I haven't made the widgets
37:27yet.
37:28I'm going to add French, Spanish, and
37:29Italian translations, the standard ones
37:31, especially French, for you so that you
37:33can download and use it.
37:35Uh, I'm going to add the logo and so on
37:37and so forth. I think it's going to be a
37:39G, a big G with a red bar. I think it's
37:41going to be nice.
37:42Uh, I also hesitated with the name "
37:44Grits" because there are a lot of "
37:45Grits" out there. Actually, "grit," I
37:47think I already mentioned it before, but
37:49in English, it means working hard,
37:51perseverance, and so on.
37:53Uh, so I like it; ultimately, it's not a
37:55big deal for a mobile app, the name
37:57isn't necessarily paramount. It just
37:59needs to be findable in the App Store,
38:01so I think I'll stick with that.
38:03Uh, and that's it.
38:05So there, I've shown you a little bit of
38:06my entire development process. Now,
38:08obviously, I can't show you everything,
38:10it's a bit complicated, but you have a
38:11preview of what it is, of what the
38:13application is today. I'm going to keep
38:15working on it for a bit.
38:17I'll continue certain phases, add the
38:19widgets, make a few more small
38:20adjustments, and we'll be back soon for
38:22the App Store launch.
38:26Finally.
38:28OK, so we're back after some time, a few
38:30hours spread over a few days where I
38:31reviewed the application.
38:33I went back and forth a few times with
38:34Claude. I manually reviewed each of the
38:37punchy sentences it generated in French
38:38and English to make sure they were
38:40translated correctly, that they actually
38:42mean something, and above all, that I
38:44like them.
38:45So you see, it’s also a good way for me
38:47to remind you that just because AI can
38:48do everything for you, doesn't mean you
38:49should let it do everything for you.
38:51You see, I told it, "Go ahead, generate
38:53the sentences for me." But I still spent
38:55several hours proofreading and
38:56correcting everything to make sure it
38:57really fits me and that the quality I
38:59want to provide to users is actually
39:00there.
39:03So once all that was done, and I had
39:04thoroughly tested my application from
39:06top to bottom, I, as you saw, asked EAS
39:08—well, I sent my build via Expo EAS,
39:10which then sent it directly to the App
39:11Store.
39:14So what happens is that when the App
39:15Store receives the build, it checks it
39:16to make sure there are no problems or
39:18anything, and then it makes it available
39:19in App Store Connect, where I can then
39:21add it.
39:22So we are here in App Store Connect, you
39:24can see I'm on my version page, I'm in
39:26my application Grit Motivation for
39:28Founders.
39:29I'm on my version 1.0, my version page.
39:33So I filled in all the information, well
39:34, app privacy; there was almost nothing
39:36to put because there's no account, no
39:38payment, I don't track anything at all,
39:39so there's nothing to put in privacy.
39:42That's the main thing to enter, and then
39:45there's also everything related to
39:48privacy URLs, user rights, and so on. So
39:51usually, you have to create an
39:53accessible web page. So I made a web
39:56page hosted on Vercel; I didn't even use
39:58a specific domain name. The important
40:00thing is just that it's online and
40:01accessible with a valid URL.
40:03So I asked Claude to make me a little
40:05landing page site with the different
40:07pages that we then add to privacy and
40:09here in the information section.
40:12Also, you should know that via the App
40:14Store Connect API, Claude can access it
40:16and do things for you. It can't fill out
40:18forms, it can't fill out privacy
40:20policies, etc., but it can fill out
40:23everything else, meaning all the
40:25metadata related to the app, like the
40:27description, keywords, and so on.
40:30As for adding screenshots, I made them
40:32in Claude Design and then asked Claude
40:34via the API to add them for me.
40:36And so that is extremely practical,
40:37especially when you have multiple
40:38languages, because it saves a crazy
40:40amount of time. For my first application
40:41, I did everything by hand, and it was
40:43endless.
40:44So now that we are here, and everything
40:46is filled out for all languages, I
40:48scroll down, go to Build, and click add
40:51build. Here, you can see that it's the
40:52build that was sent by Expo. There.
40:55I click finish. It is properly added, I
40:57click save.
41:01And I click add for review.
41:08I click create submission, send for
41:11review.
41:16And the item is sent.
41:19Now, I just have to wait for the Apple
41:20teams to look at the application and
41:22validate it to put it online on the App
41:24Store, and I have nothing else to do.
41:26What you should know is that I checked
41:28the box at the very bottom, "
41:28automatically release this version." So
41:30, from the moment the teams have
41:32reviewed it and given it the green light
41:34, it will be published automatically on
41:36the App Store.
41:37So, there you go, I hope you liked this
41:39video.
41:40I really tried to show you the different
41:42steps of the process, not necessarily in
41:44detail because otherwise the video would
41:46have lasted tens of hours, but simply to
41:48show you the steps I go through to go
41:50from an idea to an app directly on the
41:52App Store.
41:54I hope you like the app idea as well.
41:56Normally, when this video is released,
41:58it will be available on the App Store.
42:00If you are watching this video a long
42:01time from now, there may have been
42:02updates in the meantime, perhaps at that
42:04point there will be a paid version, I
42:05don't know. For the moment, it is
42:07entirely free. I will put the link in
42:09the video description as soon as it is
42:10available so that you can go download it
42:12.
42:13If you like the application, don't
42:14hesitate to give it a 5-star rating; it
42:16helps tremendously with ranking. And if
42:18you don't like it, well, just abstain,
42:20don't leave any stars. There you go.
42:21Send me a little message on YouTube and
42:24I will make the necessary improvements.
42:26There you go.
42:27Also, if you're interested in being
42:29guided to create your own application
42:31with Lia, where we go a bit more into
42:33the detail of all the methods, the whole
42:36method I showed you, I've put a link in
42:38the description so you can take a look
42:40at everything I offer and book an
42:42appointment with me.
42:44So, I'll see you very soon. Subscribe to
42:46the channel if you haven't already, and
42:48I'll see you very shortly for a new
42:50video.
42:51Alright, ciao.

About this transcript

This page contains the full transcript of On crée ensemble une app iOS de A à Z avec l'IA by Maxime Gadras, generated from the public captions YouTube serves with the video. The transcript has 8,076 words across 1,240 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to choose a caption track available on the video.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.