J’ai Recréé une APP à 34M€ en 20 Minutes avec l’IA — Transcript

Full transcript

1. 0:00Cette application génère plus de 34
2. 0:02millions de chiffres d'affaires par an
3. 0:04et elle a été créée par un adolescent de
4. 0:0617 ans. Sa particularité, elle permet
5. 0:08simplement d'analyser ses repas grâce à
6. 0:10l'intelligence artificielle et dans les
7. 0:1220 prochaines minutes, on va la recréer
8. 0:14ensemble à partir de zéro. D'ailleurs,
9. 0:16ce qui m'avait pris il y a 5 ans des
10. 0:18mois de développement et plus de 500000
11. 0:20€ d'investissement pour créer ma
12. 0:22première application, et bien n'importe
13. 0:24qui peut le faire aujourd'hui depuis son
14. 0:26canapé. Et je sais qu'on s'est tous déjà
15. 0:28réveillé un jour avec une superbe idée
16. 0:30révolutionnaire avant de découvrir
17. 0:31combien coûtait un développeur ou d'à
18. 0:33quel point apprendre à coder pouvait
19. 0:35être un enfer. Et bien aujourd'hui,
20. 0:37cette époque est révolue et votre seule
21. 0:39limite c'est votre imagination. À la fin
22. 0:41de cette vidéo, vous saurez exactement
23. 0:42comment recréer n'importe quelle
24. 0:44application, la personnaliser à vos
25. 0:46besoins et l'installer sur votre
26. 0:47téléphone. Et pour y parvenir, on va
27. 0:49utiliser trois outils. Le premier va
28. 0:51nous permettre de configurer toutes les
29. 0:53IA. Le deuxième va donner vie à
30. 0:55l'application et le troisième,
31. 0:57honnêtement, c'est celui qui a tout
32. 0:58changé pour moi pour vraiment réussir à
33. 1:00faire une app professionnelle. Alors,
34. 1:02c'est parti. Bon déjà avant de se
35. 1:04plonger clairement dans la création de
36. 1:05l'application et l'utilisation de ces
37. 1:07outils, IA pour y parvenir, c'est quoi
38. 1:09l'application qu'on va créer ensemble ?
39. 1:10Alors vous allez me dire cet
40. 1:13millions d'euros pour une application
41. 1:14par an. On aimerait bien savoir d'où tu
42. 1:16tiens cette information et je vais vous
43. 1:17le montrer tout. Donc l'application
44. 1:18qu'on va recréer aujourd'hui, c'est Cal
45. 1:20EA. Vous allez voir, il y a plein
46. 1:21d'applications, des dizaines et des
47. 1:23dizaines qui font la même chose. Mais
48. 1:24l'avantage avec celle-ci, c'est que
49. 1:26l'histoire du fondateur, donc de ce
50. 1:27jeune de 17 18 ans, est publique et il
51. 1:30partage ses chiffres de manière assez
52. 1:32transparente et donc ça nous permet de
53. 1:33savoir combien fait l'application. Donc
54. 1:35si on regarde déjà, je vais le traduire
55. 1:37en français pour que tout le monde
56. 1:38puisse s'y retrouver, vous voyez que
57. 1:39c'est assez basique comme application.
58. 1:41Même le site web, il est assez simple.
59. 1:43Ça permet simplement de suivre ses
60. 1:44calories avec une simple photo.
61. 1:46C'est-à-dire qu'on va prendre en photo
62. 1:47son repas. Pour les plus sportifs
63. 1:48d'entre vous, et bien vous savez que
64. 1:50pour vraiment obtenir le physique de vos
65. 1:51rêves ou atteindre la performance que
66. 1:53vous souhaitez atteindre, le plus
67. 1:54important quand on fait du sport, c'est
68. 1:55de suivre ces calories. Et du coup, eux,
69. 1:57ils l'ont très bien compris, sauf que
70. 1:58tout le monde sait à quel point c'est
71. 2:00une prise de tête de noter tout le temps
72. 2:01les informations manuellement, aller
73. 2:03trouver les calories et cetera. Du coup,
74. 2:04ce que se sont dit ces jeunes, c'est
75. 2:05pourquoi pas utiliser l'IA pour
76. 2:07simplement prendre une photo et obtenir
77. 2:09toutes les informations dont j'ai besoin
78. 2:10et les ajouter sur l'application, ce qui
79. 2:12en vrai peut paraître assez simple mais
80. 2:13résout une vraie problématique. Donc par
81. 2:15rapport au revenu pour vous montrer
82. 2:16qu'on dit pas n'importe quoi, on voit
83. 2:18ici que il a bien affirmé dans plusieurs
84. 2:20podcasts différents que l'application
85. 2:22vient d'atteindre en mai 2025 entre 30
86. 2:25millions et 35 millions d'euros en
87. 2:27revenu annuel récurrent, ce qui revient
88. 2:29à peu près à 31 millions d'euros. Et du
89. 2:31coup bah pour ceux que ça intéresse, je
90. 2:33vous invite vivement à aller voir
91. 2:35l'histoire de ce CEO. Franchement, c'est
92. 2:36ultra inspirant de voir ce qu'il a
93. 2:38réussi à faire avec de l'IA à un si
94. 2:40jeune âge, même s'il a commencé assez
95. 2:41tôt à coder. Et par contre, pour vous
96. 2:43montrer que ça a rien d'extraordinaire
97. 2:45entre guillemets, il y a des dizaines et
98. 2:46des dizaines d'applications qui font
99. 2:48exactement la même chose. D'ailleurs, je
100. 2:50crois que si je dis pas de bêtises, Food
101. 2:52Visor, je crois que c'était passé dans
102. 2:53une des émissions qui veut être mon
103. 2:55associé il y a quelques années. Donc
104. 2:57comme quoi, ils étaient sur le bon
105. 2:58chemin. Et on peut voir ici, bon bah on
106. 3:00retrouve le logo de Cal EA juste là que
107. 3:02vous pouvez voir et on voit qu'il y a
108. 3:03plein d'autres applications. Donc c'est
109. 3:05simplement pour vous montrer
110. 3:06qu'aujourd'hui la barrière à l'entrée
111. 3:07c'est plus tant le développement parce
112. 3:08qu'avec l'A et les outils que je vais
113. 3:09vous montrer aujourd'hui bien n'importe
114. 3:11qui est capable de créer au moins le MVP
115. 3:13de son application. Je vous expliquerai
116. 3:14après ce que c'est exactement le MVP
117. 3:17mais la réelle distinction ça va être le
118. 3:18marketing et comment vous allez réussir
119. 3:20à faire de l'acquisition pour votre app.
120. 3:21Et je pense que c'est en ça que Cal AI
121. 3:23sont vraiment extraordinaires et très
122. 3:25très bons. D'ailleurs, je crois que leur
123. 3:26entreprise s'appelle viral développement
124. 3:28donc ils ont tout compris. Et nous on va
125. 3:29voir comment à partir de toutes ces
126. 3:31applications et de ma problématique
127. 3:32basique qui est celle de juste ça
128. 3:33m'ennuie de devoir récrire manuellement
129. 3:35toutes les calories toute la journée et
130. 3:37bien on va réussir à créer cette app.
131. 3:38Alors maintenant qu'on a identifié
132. 3:40l'application qu'on allait recréer qui
133. 3:42est CAL EAI, on va passer à notre tout
134. 3:44premier outil IA et il s'agit de
135. 3:46cloud.ai. Alors vous allez voir dans
136. 3:48cette vidéo, on va avoir trois rôles
137. 3:50spécifiques. On va avoir notre chef de
138. 3:51projet, notre développeur et notre
139. 3:54expert designer UX UI. Et c'est grâce à
140. 3:56ces trois agents IA entre guillemets
141. 3:58qu'on va réussir à réunir une équipe
142. 4:00complète pour créer notre application.
143. 4:01Donc Claude concrètement ce qu'on va
144. 4:03faire c'est simplement lui expliquer ce
145. 4:05qu'on veut faire, lui donner les sites
146. 4:06web qui nous servent de fonctionnalité
147. 4:08et il va pouvoir nous aider à préparer
148. 4:10le cahier des charges pour la prochaine
149. 4:12IA. Alors une fois que vous arrivez sur
150. 4:14Cloud, ce que je vous recommande de
151. 4:15faire, c'est de vous mettre en opus 4.5,
152. 4:17donc c'est le modèle le plus performant
153. 4:19et de simplement lui expliquer ce que
154. 4:20vous allez faire. Salut Claude, j'ai
155. 4:22envie qu'aujourd'hui tu joues le rôle de
156. 4:24chef de projet et d'expert en création
157. 4:26d'application pour m'aider sur le
158. 4:28développement d'une toute nouvelle
159. 4:29application que je vais appeler Cal
160. 4:31Snap. Pourquoi Cal Snap ? C'est parce
161. 4:33que j'ai envie de faire un petit peu un
162. 4:34un un une combinaison entre un Snapchat
163. 4:36et un compteur de calories et qui aura
164. 4:38pour objectif à partir d'une simple
165. 4:40photo, de pouvoir déterminer combien il
166. 4:42y a de calories dans le plat ou dans
167. 4:43l'aliment que je prendrai en photo pour
168. 4:45me faciliter la tâche sur le tracking de
169. 4:47mes calories. On va commencer par la
170. 4:49fonctionnalité la plus importante qui
171. 4:51est celle de la prise de photo et de la
172. 4:52reconnaissance des plats et des
173. 4:54aliments. À partir du moment où on aura
174. 4:56réussi à développer cette première
175. 4:58fonctionnalité, et bien on pourra voir
176. 4:59pour la suite pour ajouter d'autres
177. 5:00fonctionnalités un peu plus complètes.
178. 5:02Je vais te mettre euh le meilleur
179. 5:03exemple de ce que je souhaite faire
180. 5:04comme de comme application qui est cal.
181. 5:06Ça va te donner une idée globale de ce
182. 5:08que je cherche à faire. Et ensuite, je
183. 5:09te mettrai une capture d'écran de
184. 5:11quelques fonctionnalités en plus à ne
185. 5:12pas ajouter tout de suite dans le cahier
186. 5:13des charges qui nous servira par la
187. 5:15suite. Faites attention quand vous
188. 5:16l'utilisez. Mettez toujours réflexion
189. 5:17approfondie, ça vous permettra d'avoir
190. 5:19les meilleurs résultats possibles. Donc
191. 5:21là, on va le lancer et pendant qu'il va
192. 5:23le lancer, on va pouvoir gentiment
193. 5:25préparer la prochaine étape. Alors,
194. 5:26pendant que notre cher chef de projet
195. 5:28est en train de travailler sur le prompt
196. 5:29qu'on va utiliser dans le Vable, du
197. 5:31coup, je vous présente le développeur de
198. 5:32cette vidéo qui est le Vable. Alors, il
199. 5:34y a vraiment beaucoup d'applications qui
200. 5:36permettent de générer des applications
201. 5:38du coup des sites web et cetera. Il se
202. 5:40trouve que j'en ai testé vraiment
203. 5:41beaucoup euh des dizaines et les
204. 5:42dizaines. Et pour la création
205. 5:44d'applications euh mobiles, il y en a
206. 5:46qui vont être un peu plus spécialisé que
207. 5:47d'autres. Par exemple, pour ceux qui ont
208. 5:48entendu parler de Émergent, et bien
209. 5:50Émergent va vous permettre plus
210. 5:51facilement, je dirais, de déployer une
211. 5:52application sur App Store ou le Play
212. 5:54Store. Le souci, c'est que si vous êtes
213. 5:56pas développeur, et bien vous pourriez
214. 5:57faire souvent face à des bugs sur
215. 5:59émergents qu'on a'urait pas sur Lovable.
216. 6:01Donc moi ce que je vais vous recommander
217. 6:02de faire, on va quand même déployer
218. 6:04l'application sur votre téléphone et
219. 6:05vous allez pouvoir l'utiliser depuis un
220. 6:06smartphone. Mais je vais vous expliquer
221. 6:08à la fin la petite astuce pour passer de
222. 6:11Loveable à une application que vous
223. 6:12allez pouvoir déployer sur les Play
224. 6:13Store et App Store. Mais par expérience,
225. 6:15c'est beaucoup plus simple si vous avez
226. 6:17aucune connaissance en code de commencer
227. 6:18par Lovable car vous allez réussir avec
228. 6:20un seul prompt à atteindre probablement
229. 6:21tout de suite le résultat que vous
230. 6:23voulez et c'est beaucoup plus facile à
231. 6:24utiliser. Donc si on revient sur notre
232. 6:25cher chef de projet donc Claude pour
233. 6:27voir où il en est. Parfait, j'ai une
234. 6:28bonne vision de Kayaii maintenant. Voici
235. 6:30ce que je retiens de leur approche.
236. 6:32Nanani nanana. Et là, il va nous faire
237. 6:33un cahier des charges cal snap. Donc une
238. 6:36app mobile qui permet de tracker ses
239. 6:37calories en prenant totati. Donc là,
240. 6:39justement, ça va être la prochaine étape
241. 6:40et je vais simplement venir prendre une
242. 6:42capture d'écran de Lovable pour être sûr
243. 6:44qu'il comprennent exactement ce que je
244. 6:45souhaite faire. Donc, prenez le réflexe
245. 6:47quand vous utilisez Lisia ou quand vous
246. 6:49créez des applications de prendre des
247. 6:50captures d'écran. Ça donnera toujours
248. 6:51plus de contexte que ce que vous pouvez
249. 6:53écrire. Et ensuite, je vais lui dire
250. 6:55"Écoute, j'ai envie d'utiliser Lovable
251. 6:57pour faire ce premier MVP. Du coup euh
252. 7:00fait en gros un prompt qui va pouvoir me
253. 7:01servir que je vais pouvoir copiercoller
254. 7:03simplement dans le vable à partir de ce
255. 7:04que tu as vu dans CAL AI pour développer
256. 7:07cette première fonctionnalité. Et là je
257. 7:08vais simplement le laisser travailler.
258. 7:10Il va me faire le prompt et on va
259. 7:11pouvoir le copiercoller directement sur
260. 7:13le web en espérant qu'on aille déjà une
261. 7:15application fonctionnelle du premier
262. 7:17coup ou du moins pour vous démontrer le
263. 7:19concept. OK, donc il vient de me sortir
264. 7:20le prompt ici directement. On va
265. 7:22simplement venir copiercoller et on va
266. 7:24revenir sur love. OK, magnifique. On
267. 7:26vient d'avoir le premier résultat.
268. 7:27Franchement, c'est pas mal du tout.
269. 7:29Alors, on pourrait chipoter un petit peu
270. 7:30sur le design, je vous l'accorde, mais
271. 7:32justement c'est à ça que va servir le
272. 7:33prochain outil. Mais juste pour vous
273. 7:35montrer du coup que j'ai pas triché, que
274. 7:36j'ai pas développé, que j'ai pas fait
275. 7:37venir une équipe complète de
276. 7:38développeurs en faisant ce petit cut.
277. 7:40C'était simplement pour éviter
278. 7:41d'attendre. Là, on a toujours un seul et
279. 7:42unique prompt, donc je peux pas remonter
280. 7:44plus. Et du coup, à partir de ce prompte
281. 7:45là, après eu la validation de est-ce que
282. 7:47je lui donne l'accès pour faire le en
283. 7:48cloud et toutes les fonctionnalités que
284. 7:50je vous ai montré juste avant, je lui ai
285. 7:50donné l'accès et là, il m'a dit cal snap
286. 7:53est prêt. J'ai créé une app mobile de
287. 7:55suivi nutritionnel avec le design et
288. 7:56cetera. qu'on va pouvoir tester en live
289. 7:58ensemble maintenant. Donc ça ça a été
290. 7:59fait avec un seul prom. En 2 3 minutes,
291. 8:01je pense qu'on aura coupé pour vous
292. 8:03éviter d'attendre. Donc aucun repas
293. 8:04scanné pour aujourd'hui. Donc déjà le
294. 8:06design est plutôt pas trop mal. Je
295. 8:08trouve que pour un premier euh pour un
296. 8:09premier essai, c'est pas mal. Donc là,
297. 8:11on voit qu'on peut suivre l'historique.
298. 8:13OK, on peut revenir en arrière donc sur
299. 8:15l'accueil. C'est simple, efficace. Et là
300. 8:17maintenant, ce qui va nous intéresser,
301. 8:18c'est scanner mon repas. Donc on va voir
302. 8:20si ça fonctionne. OK, ça nous ouvre une
303. 8:22fenêtre directement. Donc, je vous ai
304. 8:23préparé des petites bananes pour rester
305. 8:25bien sûr sain. Hop, on va faire comme ça
306. 8:27et on va prendre la photo. OK, on va
307. 8:28voir s'il va réussir à l'analyser du
308. 8:30premier coup ou est-ce qu'il va falloir
309. 8:32itérer un petit peu, ce qui est aussi le
310. 8:33but de ces outils hein. OK, pas mal. 210
311. 8:37calories, 2,6 g de protéines, de pièces,
312. 8:39environ 200 g. Et ben, on va faire le
313. 8:41test pour voir si est-ce qu'il nous sort
314. 8:43pas n'importe quoi. Combien de calories
315. 8:45dans de bananes. Donc, on va voir s'il a
316. 8:47bien réussi son taf déjà. Si on revient
317. 8:49en arrière, c'est pas mal du tout hein,
318. 8:51je trouve. Là, on a la petite image qui
319. 8:52a été prise. On voit qu'il y a un
320. 8:54élément qui a identifié mais deux
321. 8:55pièces. Donc, on voit qu'il a compris
322. 8:56qu'il y avait deux bananes. Donc, grâce
323. 8:57à Lia qui a été intégré directement dans
324. 8:59l'app, il a réussi à le voir. Et là, si
325. 9:01on regarde, il dit qu'il y a 50 g, 210
326. 9:03calories. Et là, com 210 calories. J'ai
327. 9:05pas triché, je l'ai fait devant vous. Ça
328. 9:07a exactement le bon résultat.
329. 9:08Magnifique. Donc maintenant, on peut
330. 9:10revenir en arrière. Je me demande bah,
331. 9:11on a même la photo qui a été ajoutée
332. 9:13directement ici. J'imagine que c'est
333. 9:15fait aussi dans l'historique.
334. 9:16Franchement, c'est pas mal du tout. Et
335. 9:18c'est exactement ça ce qu'on va appeler
336. 9:20un MVP. en anglais minimum viable
337. 9:22product. Alors, je vais reprendre
338. 9:23simplement la définition qu'a fait un de
339. 9:26nos experts dans l'académie que je
340. 9:27trouve très bonne et qu'il l'explique
341. 9:29très bien. Donc, il l'a fait dans un des
342. 9:30ateliers où il explique quand est-ce que
343. 9:32notre MVP valider. Donc, qu'est-ce qu'un
344. 9:34MVP ? Un MVP représente la première
345. 9:36version fonctionnelle et testable de
346. 9:38votre produit conçu spécifiquement pour
347. 9:40valider une hypothèse clé du marché avec
348. 9:41un investissement minimal en temps et en
349. 9:43ressources. C'est exactement ce qu'on a
350. 9:45fait ici avec Lovable. Donc en quelques
351. 9:48minutes avec littéralement 0 € investi,
352. 9:50on a réussi à faire une application
353. 9:52fonctionnelle qu'on peut utiliser, qu'on
354. 9:54peut présenter pour démontrer le
355. 9:55concept. Donc je le répète encore une
356. 9:57fois, là on est sur un MVP qu'on va
357. 9:58itérer, on va le pousser un petit peu
358. 9:59plus loin sur l'application, mais s'il
359. 10:01vous plaît, si demain vous prévoyez
360. 10:02d'avoir des dizaines et des dizaines de
361. 10:04milliers d'utilisateurs, vous allez tout
362. 10:06pouvoir faire tout seul sur LIA avec le
363. 10:07MVP. Mais avant de le mettre en
364. 10:09production, euh je vous conseille
365. 10:11vivement quand même de le faire review
366. 10:12par un euh développeur, un vrai dev qui
367. 10:15va pouvoir voir s'il y a des failles de
368. 10:16sécurité et autres. D'ailleurs pour les
369. 10:17membres de l'académie, c'est pour ça
370. 10:19qu'on leur a mis à disposition la
371. 10:20possibilité de soumettre leur projet
372. 10:21pour justement faire review leur
373. 10:23application ou leurs solutions avant de
374. 10:25les déployer avec des clients. Mais dans
375. 10:26tous les cas, Lovable, je crois qu'ils
376. 10:27sont vachement avancés maintenant sur la
377. 10:29sécurité et on va le voir juste après.
378. 10:30Donc là, on a notre première étape de
379. 10:32MVP qui est terminée. Donc maintenant,
380. 10:34ce qui va nous intéresser, c'est comment
381. 10:35est-ce que moi je peux accéder à cette
382. 10:37application depuis mon téléphone
383. 10:38directement. Donc ce qu'on va faire,
384. 10:39c'est que vous voyez là, encore une
385. 10:40fois, on n pas fait grand-chose. On a vu
386. 10:42que ça fonctionnait. On a un premier
387. 10:43historique 14h49 avec ma superbe tête et
388. 10:46les bananes. Et ce qu'on va avoir besoin
389. 10:47de faire à ce stade, c'est de venir
390. 10:49publier l'application. On va juste
391. 10:51appuyer sur publish et l'application va
392. 10:53être déployée sur ce nom de domaine là.
393. 10:56OK ? Donc là, on voit que l'application
394. 10:57a été bien déployée sur un lien qui est
395. 10:59hébergé directement par Lovable. Donc ce
396. 11:00qu'on va faire, c'est qu'on va venir
397. 11:01copiercoller directement ce lien et je
398. 11:03vais le copier sur mon navigateur, sur
399. 11:04mon téléphone. Et on voit l'application
400. 11:06qui s'affiche du coup sur le téléphone
401. 11:08avec les mêmes fonctionnalités pour
402. 11:09l'instant. un design approximatif mais
403. 11:12du coup on va quand même tester. On voit
404. 11:13encore ces deux super bananes juste ici.
405. 11:15On voit qu'on a la possibilité
406. 11:16d'analyser. Donc là on vient d'avoir le
407. 11:18résultat 210 calories. C'est exactement
408. 11:20la même chose. On voit les deux aliments
409. 11:21détectés. Banane banane 120 g 105
410. 11:24calories. C'est exactement ce que Claude
411. 11:25nous a confirmé. Donc ça fonctionne très
412. 11:27bien pour l'instant. Et si je clique sur
413. 11:29retour à l'accueil, on voit que on a
414. 11:31bien l'historique. Donc maintenant
415. 11:32qu'est-ce qu'on va faire pour pouvoir
416. 11:33vraiment accéder à cette application
417. 11:35quand on veut sans devoir passer par le
418. 11:37navigateur et sans avoir cette petite
419. 11:38barre de navigation tout en bas ? Vous
420. 11:40allez cliquer sur ces trois petits
421. 11:41points, vous allez voir que vous avez le
422. 11:42bouton partager qui s'affiche. On va
423. 11:43cliquer dessus et une fois que vous avez
424. 11:45cliqué dessus, on va descendre un petit
425. 11:46peu. Vous allez descendre un petit peu
426. 11:48et vous allez voir ici que vous avez un
427. 11:49petit bouton qui s'appelle sur l'écran
428. 11:51d'accueil. On va cliquer dessus et vous
429. 11:53voyez ici qu'on a écrit Lovable app. Moi
430. 11:56ce que je vais faire après, je vais vous
431. 11:57expliquer, ça va être assez sympa, c'est
432. 11:59que je vais lui dire cal snap. On aurait
433. 12:00pu demander à Lovable, je le fais assez
434. 12:02souvent, euh de dire littéralement de de
435. 12:05créer une un logo pour l'application sur
436. 12:07votre téléphone. Donc n'importe quel
437. 12:09logo que vous voulez, vous pouvez le
438. 12:10créer et le nom directement. Là, je le
439. 12:12fais manuellement et il y a un L, mais
440. 12:13en général, si vous lui dites de créer
441. 12:14un logo, il va pouvoir le modifier.
442. 12:15Donc, je vais le faire et on va écrire
443. 12:17ouvrir comme app web. Donc, ça va être
444. 12:19une PWA qui va nous permettre vraiment
445. 12:20d'y accéder comme une application
446. 12:22classique. OK, on a l'application qui
447. 12:23s'affiche ici. Et si je clique dessus
448. 12:24maintenant, et bien normalement ça va me
449. 12:26sortir directement depuis l'application
450. 12:28sans la barre de navigation. Mais ça
451. 12:29c'est le moyen le plus simple de rendre
452. 12:31accessible votre MVP comme je vous
453. 12:32l'expliquais depuis votre téléphone ou à
454. 12:34n'importe qui. Et je vous montrerai à la
455. 12:35fin pour ceux qui veulent aller plus
456. 12:36loin comment le déployer sur Play Store.
457. 12:38Maintenant qu'on a notre fonctionnalité
458. 12:40principale, et bien on va passer à
459. 12:41l'étape d'après qui est celle d'ajouter
460. 12:43plusieurs fonctionnalités pour vraiment
461. 12:45configurer jusqu'au bout cette
462. 12:46application. Mais avant ça, et bien il
463. 12:48va falloir revoir cette interface pour
464. 12:49qu'elle puisse suivre toutes les
465. 12:50fonctionnalités qu'on va ajouter par la
466. 12:52suite. Et c'est comme ça qu'on va passer
467. 12:53gentiment à notre troisième outil qui va
468. 12:55être celui qui va nous générer le design
469. 12:57ultra impressionnant de notre
470. 12:59application. Mais juste avant ça, ce que
471. 13:00j'aime bien faire dans mes vidéos pour
472. 13:01donner un petit peu d'inspiration aux
473. 13:03ZIA sur le design que je veux faire,
474. 13:04c'est d'aller sur Dribble. Et Dribble,
475. 13:06c'est une plateforme où on peut trouver
476. 13:07les top designers. Et quand on parle de
477. 13:09designer, et bien on va trouver un petit
478. 13:10peu de tout et n'importe quoi. Site web,
479. 13:12application, brand, tout ce que vous
480. 13:15pouvez imaginer. Et nous ce qu'on va
481. 13:16faire c'est simplement qu'on va taper
482. 13:17calorie app ici pour voir ce qui sort
483. 13:19déjà. Et du coup le but là où on a
484. 13:21défini au tout début les applications
485. 13:23qu'on souhaitait avoir, enfin les
486. 13:24fonctionnalités qu'on souhaitait avoir.
487. 13:26Là maintenant le but ça va être de
488. 13:27définir quel est le design qu'on veut
489. 13:29avoir. Donc vous voyez qu'il y a pas mal
490. 13:31d'applications et on voit qu'on est
491. 13:32quand même très très loin du code
492. 13:34couleur de ce qu'on souhaitait faire au
493. 13:35début. Donc on voit qu'il y a plein
494. 13:36d'App et donc nous on va utiliser cette
495. 13:39inspiration pour venir configurer notre
496. 13:41troisème et dernier outil de cette vidéo
497. 13:43qui est Stitch. Alors Stitch, qu'est-ce
498. 13:45que c'est ? C'est un des tout derniers
499. 13:47outils de l'écosystème de Google qui est
500. 13:49spécialisé sur le design d'application
501. 13:52et de site web. C'est-à-dire que pour
502. 13:53ceux qui s'y connaissent un petit peu,
503. 13:55c'est exactement la même chose qu'un
504. 13:56graphiste UI et UX. Et du coup, bah
505. 13:59globalement, vous voyez là, on lui a mis
506. 14:00l'application, enfin une capture d'écran
507. 14:02de l'application d'inspiration et on est
508. 14:04venu mettre appli ici au lieu de web.
509. 14:06Donc là, l'interface, elle paraît toute
510. 14:07bête, mais vous allez voir, le résultat
511. 14:08est vraiment cool. Et on va revenir sur
512. 14:10notre chef de projet avec une capture
513. 14:12d'écran pour qu'il comprenne ce qu'on
514. 14:13est en train de faire. et on va lui
515. 14:14mettre juste ici et on va lui dire hop
516. 14:16salut Claude, super, on a pu du coup
517. 14:18développer la première fonctionnalité
518. 14:20euh pour notre application sur Lovable,
519. 14:22mais maintenant on aimerait utiliser
520. 14:23Stitch pour générer les interfaces qui
521. 14:25vont accueillir les autres
522. 14:26fonctionnalités qu'on va ajouter euh par
523. 14:28la suite sur Lovable. Hop, là on va
524. 14:30avoir le prompt. OK, donc notre cher
525. 14:32chef de projet nous a fait le prompt,
526. 14:33donc il l'a fait en anglais. C'est pas
527. 14:34plus mal, on aura des résultats encore
528. 14:36plus sympas. On revient sur Stitch, on
529. 14:39met directement ici tout le promte que
530. 14:41nous a généré Claude, d'où l'importance
531. 14:42de vous configurer ce fameux assistant
532. 14:44dès le début. Et là, on va laisser
533. 14:46Stitch se lancer et on va laisser du
534. 14:47coup la magie opérer. OK, regardez le
535. 14:49résultat. Franchement, c'est pas mal.
536. 14:51Donc là, on se retrouve avec
537. 14:52l'inspiration qu'on lui a mis il allé
538. 14:54beaucoup plus loin. Donc là, il a fait
539. 14:55la première interface Gunboarding. Donc
540. 14:57quand on arrive sur l'application, là il
541. 14:59a fait le dashboard d'arrivée, il a fait
542. 15:01ajouter des repas. Il a mis toutes les
543. 15:02fonctionnalités qu'on va développer et
544. 15:04qu'on a mentionné au tout début. on a
545. 15:05les résultats. Bref, il y a pas mal
546. 15:07d'interfaces différents. On a mis la
547. 15:09gamification aussi pour pouvoir suivre
548. 15:10directement tout ça. Donc vous voyez,
549. 15:12une fois que vous avez fait tout ça,
550. 15:13donc si vous revenez, on va prendre la
551. 15:14petite flèche et on va venir tout
552. 15:15sélectionner. Et littéralement, on va
553. 15:16pas sélectionner le premier car en a
554. 15:18mais nous ce qu'on va faire, c'est venir
555. 15:19cliquer sur exporter et on va le
556. 15:21télécharger en zip. Du coup là, j'ai
557. 15:23tous les fichiers à chaque fois avec une
558. 15:26interface. Donc vous allez le voir juste
559. 15:27ici de l'application qu'on a téléchargé,
560. 15:29qu'on a généré sur Stitch et le code
561. 15:31HTML. Donc là, si vous avez des doutes
562. 15:33sur ce qu'il faut faire, demandez
563. 15:34simplement à votre chef de projet Cloud,
564. 15:36envoyez-lui une capture d'écran de
565. 15:37Stitch et dites-li bah voilà, on a des
566. 15:39interfaces, on aimerait les intégrer,
567. 15:40comment on fait ? Donc à un moment
568. 15:41donné, si vous avez des bugs, vous
569. 15:42pouvez toujours faire ça. Mais là, ce
570. 15:43qu'on va faire, c'est simplement venir
571. 15:45copiercoller le prom de Cloud où on lui
572. 15:47dit "Voici les maquettes de design pour
573. 15:49l'application CAL Snap reproduit
574. 15:50fidèlement chaque écran, attache les
575. 15:53images, créer ses écrans respectant
576. 15:54exactement les couleurs." Tatati tatata.
577. 15:56Donc pour éviter de surcharger le Wable
578. 15:57et de faire brique par brique, ce que je
579. 15:59vous recommande vivement de faire, c'est
580. 16:00qu'on va venir mettre euh directement
581. 16:02les écrans qui nous intéressent un par
582. 16:04un pour éviter de surcharger au début.
583. 16:06Euh on va faire seulement quatre et
584. 16:07après on laissera quatre qu'on pourra
585. 16:08toujours faire par la suite. Qu'est-ce
586. 16:09qu'on fait ? On fait fot journal. Allez,
587. 16:11on fait journal, on l'ajoute et euh du
588. 16:13coup, on va pas tout mettre d'un coup,
589. 16:14mais on va pouvoir lancer Lovable cette
590. 16:16fois-ci pour venir changer tout le
591. 16:19design de l'application et ajouter,
592. 16:20préparer le terrain pour toutes les
593. 16:21futures fonctionnalités qu'on va ajouter
594. 16:23juste après. On se retrouve dans un
595. 16:24instant. OK, on a enfin le résultat.
596. 16:26Vous voyez que chacun vient enfin
597. 16:28chacune des images vient s'afficher,
598. 16:29chacun son tour. Donc c'est pas mal. On
599. 16:31voit qu'on peut changer de navigation.
600. 16:32On a un petit bouton vert qui suit ici
601. 16:34qui se déplace. On pourrait venir itérer
602. 16:36encore. Là, on voit qu'il y a
603. 16:37l'historique de tout à l'heure avec la
604. 16:38banane et le design est quand même
605. 16:40vachement plus sympa. Donc là, on voit
606. 16:41qu'on a même la possibilité de venir
607. 16:43ajouter des photos depuis la galerie
608. 16:44directement. Mais on va juste prendre
609. 16:46cette banane. Et là, on voit qu'il a
610. 16:48quand même bien détecté la banane avec
611. 16:49l'image au-dessus et il a mis les
612. 16:51calories en conséquence. Donc la
613. 16:52fonctionnalité marche bien, l'interface
614. 16:54est beaucoup plus adaptée, mais ce qui
615. 16:55va être intéressant, donc là on voit
616. 16:57qu'il y a le calcul, on voit les
617. 16:58différents jours, on peut suivre
618. 16:59l'historique des jours et cetera. Moi ce
619. 17:01que je vais lui dire de faire, c'est
620. 17:02qu'on va venir développer le vocal et le
621. 17:04scan bar. Pourquoi ? Parce que peut-être
622. 17:06que des fois, plutôt que de faire des
623. 17:07photos, je vais avoir envie de dicter ce
624. 17:09que je viens de manger parce que j'ai
625. 17:10plus les photos prêtes et j'ai envie que
626. 17:12Lia comprenne exactement ce que je viens
627. 17:13de manger, calcule les calories et
628. 17:15l'ajoute à mon tracking du jour. OK le
629. 17:18vableble, j'aimerais que maintenant tu
630. 17:19développes la fonctionnalité vocale. Le
631. 17:21but, si tu l'as bien compris, ça va être
632. 17:22de dicter les aliments et les quantités
633. 17:24que je viens de manger. Et à partir de
634. 17:25là, je veux que l'application puisse
635. 17:27utiliser l'IA pour comprendre combien il
636. 17:29y avait de calories dedans et venir
637. 17:31ajouter ces calories là à mon tracking.
638. 17:33OK, pour vous faire gagner du temps,
639. 17:34j'ai développé les deux fonctionnalités
640. 17:36juste ici que je vais pouvoir vous
641. 17:37montrer maintenant du coup avec le prom.
642. 17:39Donc là, vous voyez, j'ai ajouté la clé
643. 17:40d'Ap de Google pour pouvoir utiliser
644. 17:42leur techno et donc venir faire du texte
645. 17:44to speech. Et j'ai également demandé à
646. 17:46Claude de me faire une recherche sur la
647. 17:48meilleure base de données des codes
648. 17:49barres, des aliments qu'on peut trouver
649. 17:51en France et en francophonie. Et du
650. 17:52coup, il m'a mis Open Food Fact. Donc
651. 17:54j'ai fait en sorte que le Vable puisse
652. 17:56avoir accès à ces informations et du
653. 17:58coup, je vais pouvoir tester les deux
654. 17:59nouvelles fonctionnalités en direct avec
655. 18:00vous. Et ça vous montre en fait à quoi
656. 18:02ça correspond de venir itérer et
657. 18:04d'ajouter des fonctionnalités au fur et
658. 18:05à mesure. Donc on va utiliser la dictée
659. 18:07ici. On va cliquer dessus. Donc là, ça
660. 18:08nous ouvre une entrée et on va pouvoir
661. 18:10voir ce que ça donne. Je viens de manger
662. 18:11un plat avec 300 g de blanc de poulet,
663. 18:14100 g de riz et 150 g de lentill. OK,
664. 18:18jusqu'à là, la dicté fonctionne bien. Si
665. 18:20je mets analyser le repas, qu'est-ce qui
666. 18:21se passe ? Est-ce qu'il va pouvoir
667. 18:23comprendre ? OK, magnifique. Donc là, il
668. 18:25a compris directement le nombre de
669. 18:27calories, combien il y avait de
670. 18:28protéines dans chacun, les calories que
671. 18:29représente chacun et là, je peux venir
672. 18:31directement sauvegarder le 1000. Bon, ça
673. 18:33il l'a compris, c'est très très bien.
674. 18:34Donc on peut venir sauvegarder le 1000
675. 18:36juste ici. Et maintenant, on va venir
676. 18:37tester le code barre. Mais ça, je vais
677. 18:38le faire directement sur le téléphone
678. 18:40pour vous montrer à quoi ça peut
679. 18:42ressembler. Donc là, on est sur
680. 18:43l'application, on va mettre scan. Et là,
681. 18:45vous voyez que ça va nous demander
682. 18:47l'accès directement à la caméra. Et je
683. 18:50vous ai préparé un superbe paquet de et
684. 18:53on va voir là, on va venir scanner. OK.
685. 18:55Et donc là, on voit qu'il a bien reconnu
686. 18:57six œufs plein air. Donc c'est le
687. 18:59produit œuf de France sans OGM. On voit
688. 19:02le nombre de de de calories et de
689. 19:04protéines dans chacun. On voit qu'il y a
690. 19:06analysé avec Lia et au cas où ça ne
691. 19:08marche pas, bah en fait Lovable est
692. 19:09aller un petit peu plus loin que ce que
693. 19:10je je lui avais demandé. On a toujours
694. 19:12la possibilité d'avoir le bouton
695. 19:14analyser avec Lia qui devrait s'afficher
696. 19:16juste ici. Donc on va cliquer pour voir
697. 19:17ce que ça donne. Et donc là on voit que
698. 19:19cette fois-ci c'est la fonctionnalité
699. 19:20d'avant qui s'ouvre. Et on va venir
700. 19:22prendre les œufs en photo juste tel quel
701. 19:24et on va voir si ce que ça fait. Du
702. 19:26coup, au cas où le code barre n'est pas
703. 19:28détecté ou les calories, et bien là,
704. 19:30vous avez le même résultat qui s'affiche
705. 19:32avec la fonctionnalité, ce qui est pas
706. 19:34mal du tout. Et on commence à avoir une
707. 19:35une application qui prend forme et qui
708. 19:37est assez complète. Bon, du coup, on est
709. 19:39arrivé gentiment au bout de cette
710. 19:40application, on a réussi à faire notre
711. 19:42MVP. Donc, je vous ai montré la
712. 19:44définition dans l'académie de ce que ça
713. 19:45voulait dire un MVP qui est celle de
714. 19:47réussir à prendre au moins une photo et
715. 19:49obtenir les datas exactement comme dans
716. 19:50les applications qu'on a vu au début. On
717. 19:52a vu comment on a réussi à itérer et
718. 19:53ajouter des nouvelles fonctionnalités
719. 19:55grâce à le vable et déployer notre
720. 19:57application. Et on a vu comment ajouter
721. 19:58et designer des nouvelles interfaces
722. 20:00grâce à Stitch. Maintenant, comme je
723. 20:02vous l'ai expliqué, ce qu'on a fait là,
724. 20:03c'est ce qu'on appelle une web app et le
725. 20:05fait qu'on l'ait déployé sur le
726. 20:06téléphone, c'est une PWA pour la rendre
727. 20:09accessible directement depuis le
728. 20:10dashboard pour accéder à votre
729. 20:11application. Maintenant, si demain vous
730. 20:13voulez avoir des utilisateurs, vous
731. 20:15voulez avoir une plateforme de paiement
732. 20:16en utilisant un moyen de paiement comme
733. 20:17Stripe, vous voulez avoir une base de
734. 20:19données avec des users qui vont pouvoir
735. 20:21s'authentifier, déjà je vais vous mettre
736. 20:23une vidéo qui va s'afficher juste après
737. 20:24où je rentre dans le détail de comment
738. 20:26créer l'authentification, comment créer
739. 20:28la connexion avec Stripe pour pouvoir
740. 20:29faire tout ça. Mais surtout ce dont vous
741. 20:31allez avoir besoin, c'est de rendre
742. 20:33l'application native pour pouvoir la
743. 20:35déployer sur Play Store et sur App
744. 20:37Store. Je vous conseille vivement de
745. 20:39commencer comme je l'ai fait là.
746. 20:41Commencer par une web app, c'est
747. 20:42infiniment plus simple pour ne serait-ce
748. 20:45que déployer et tester votre MVP.
749. 20:47Faites-le tester à votre entourage, à
750. 20:48vos proches, à votre famille et une fois
751. 20:50que vous sentez que vous avez une vraie
752. 20:51application qui sert vraiment à votre
753. 20:53utilisateur final et qui résout une
754. 20:55vraie problématique, et bien à ce
755. 20:56moment-là, vous pourrez réfléchir à la
756. 20:58déployer sur les stores et passer par
757. 21:00des outils comme capacitor qui vont être
758. 21:02un wrappeur, enfin qui vont venir vous
759. 21:03aider à transformer votre web app en
760. 21:06code natif pour pouvoir le déployer sur
761. 21:08les applications. D'ailleurs, si ça vous
762. 21:09intéresse de voir comment est-ce qu'on
763. 21:11peut aller jusqu'au déploiement sur les
764. 21:12Play Store, n'hésitez pas à me le dire
765. 21:14en commentaire. Si je vois que la
766. 21:15question est qu'il y a une vraie envie
767. 21:16de la part de la communauté, et bien je
768. 21:18me ferai un plaisir de tourner une vidéo
769. 21:19à ce sujet. Maintenant, comme je l'ai
770. 21:21mentionné avant, la prochaine étape, ça
771. 21:23va être de créer de l'authentification
772. 21:25pour permettre à d'autres utilisateurs
773. 21:26d'avoir leur propre compte et leurs
774. 21:28propres données qui se mettent à jour
775. 21:29dans le cloud, dans votre base de
776. 21:30données, de créer le moyen de paiement
777. 21:32avec Stripe. Et je sais que c'est plein
778. 21:34de noms techniques qui peuvent faire
779. 21:36peur et plein de démarches où on a
780. 21:37l'impression que c'est impossible. Du
781. 21:38coup, c'est pour ça que j'ai fait une
782. 21:39vidéo entière bien plus complète que
783. 21:41celle-ci et bien plus longue que
784. 21:42celle-ci où je vous montre dans le
785. 21:43détail comment réussir chacune de ces
786. 21:45étapes. Si ça vous intéresse, je vous
787. 21:47invite à cliquer sur ce petit lien pour
788. 21:48accéder à la vidéo juste ici.