Codage Vibe pour créer de véritables applications avec l'IA : un voyage sans code avec Bolt. nouveau | Faisal Memon | Skillshare

Vitesse de lecture


1.0x


  • 0.5x
  • 0.75x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Codage Vibe pour créer de véritables applications avec l'IA : un voyage sans code avec Bolt. nouveau

teacher avatar Faisal Memon, Product | Engineer | Entrepreneur

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Introduction du cours

      3:21

    • 2.

      Qu'est-ce que Bolt.new ?

      6:06

    • 3.

      Votre première application construite par IA à l'aide de Bolt.new

      6:21

    • 4.

      Comprendre l'interface et les fonctionnalités

      6:34

    • 5.

      Créer un projet un peu complexe - Une application de liste de tâches !

      11:08

    • 6.

      Développement itératif avec Bolt.new

      5:42

    • 7.

      Intégrer la base de données dans Bolt.new

      19:20

    • 8.

      Déployer votre application pour la production

      7:14

    • 9.

      Conclusion du cours

      2:22

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

95

apprenants

1

projet

À propos de ce cours

Dans ce cours, nous allons nous plonger dans Bolt.new, un outil de pointe qui vous permet de créer des applications entièrement fonctionnelles en décrivant ce que vous voulez. Que vous soyez un débutant curieux, un fondateur non technique ou simplement quelqu'un qui cherche à réaliser un prototype rapidement, ce cours vous montrera que la création d'applications est désormais plus facile, plus rapide et plus accessible que jamais.

Voici ce que vous allez apprendre : :

  • Ce qu'est Bolt.new, comment il fonctionne, y compris un tutoriel de son interface et de ses fonctionnalités clés.

  • Comment créer votre première application générée par l'IA, en transformant instantanément votre idée en un prototype fonctionnel.

  • Comment aller plus loin en créant une application de to-do list, étape par étape. . .

  • La puissance du développement itératif avec l'IA : il suffit de mettre à jour vos instructions pour peaufiner votre app.

  • Comment intégrer une base de données dans votre application, en débloquant le stockage de données et le contenu dynamique.

  • Comment prévisualiser et déployer votre application pour la rendre disponible pour le monde entier en quelques minutes seulement.

À la fin de ce cours, vous serez en mesure de fonctionner avec plusieurs applications. Vous aurez également la confiance nécessaire pour créer et tester vos idées à la vitesse de l'éclair.

Ce cours est parfait pour :

  • Aux débutants sans expérience en codage

  • Les entrepreneurs et les créateurs qui veulent prototyper des idées

  • Toute personne curieuse de savoir comment utiliser l'IA pour créer des applications.

Aucune compétence technique ? Pas de problème. Vous n'avez besoin que d'une idée, et Bolt.new vous aidera dans le reste.

Commençons et regardons vos idées prendre vie grâce à la puissance de l’IA.

Rencontrez votre enseignant·e

Teacher Profile Image

Faisal Memon

Product | Engineer | Entrepreneur

Enseignant·e

Hey - this is Faisal and thanks for being here.

I have over 12 years of experience working as a Product Manager Founder/CEO Engineer in Mobile and App development industry. I have been building global products being used by millions of users across the globe since the beginning of my career.

Currently I am heading Product at one of the fast-paced startup in India and enjoying every moment of it. Prior to his, I built out couple of startups which had over half a million users across the globe, raised funding from Google other investors and was part of Google Launchpad Accelerator. I have experience of building products from scratch and scaling to global users.

I am here on Skillshare to share my knowledge with seekers and help them grow personally and professional... Voir le profil complet

Level: All Levels

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Introduction du cours: Dans ce cours, nous allons parler de la façon dont vous pouvez créer des applications de production à l'aide de IA sans écrire une seule ligne de code. Eh bien, vous n' avez même pas besoin de savoir coder. C'est ce que nous allons apprendre et nous allons apprendre de manière pratique. Je suis facil, et je suis ravie de vous guider dans ce cours « Hands on big no friendly » où nous explorons comment l' intelligence artificielle peut vous aider à donner vie à vos idées d'applications sans écrire une seule ligne de code Dans ce cours en particulier, nous nous intéressons un logiciel incroyable appelé bolt point N. Il s'agit d'un outil de pointe qui vous permet de créer des applications entièrement fonctionnelles simplement en décrivant ce que vous voulez. Maintenant, que vous soyez un débutant curieux, fondateur non technique ou simplement quelqu'un qui cherche à prototyper rapidement vos idées afin de pouvoir les valider. Ce cours vous aidera à comprendre comment vous pouvez le faire plus facilement, plus rapidement et en quoi c'est plus accessible que jamais. C'est ainsi que se déroule le cours. Nous allons donc d'abord comprendre ce qu'est le point de boulon Nu. Qu'est-ce que cet outil IE et comment fonctionne-t-il ? Nous allons configurer l'espace de travail de notre compte, puis nous allons commencer à écrire une application. Nous allons donc utiliser le logiciel bolt point neu pour générer une application pour nous. Nous comprendrons son interface et tous les détails nécessaires pour créer une application de production entièrement fonctionnelle Ensuite, nous construirons notre deuxième projet, qui sera encore plus complexe que le premier et c'est là que nous comprendrons le véritable pouvoir de tels outils d'IA. Je vais non seulement créer des produits pratiques et vous les présenter, mais je vais également vous expliquer comment vous pouvez affiner votre produit, améliorations, comment vous pouvez itérer sur les conceptions et comment vous pouvez corriger les bogues dans votre application Tout cela d'une manière totalement pratique, dans le laquelle nous allons réparer les sacs, améliorer les mises en page et ajouter de nouvelles fonctionnalités à notre application Chaque fois que vous créez quelque chose de nouveau, il est très important de le déployer quelque part sur Internet afin que le monde entier puisse y accéder, n'est-ce pas ? Cela est donc également abordé dans le cours dans lequel nous utiliserons Bolt point new et nous ajouterons une base de données à notre application, et nous la déploierons également un serveur en ligne afin que le monde entier puisse y accéder. À la fin du cours, non seulement plusieurs applications fonctionneront , mais vous aurez également la confiance nécessaire pour continuer à développer, tester et lancer vos idées à la vitesse de l'éclair. Et ce cours est parfait pour les débutants n'ayant aucune formation en codage. Même si vous avez de l' expérience en codage, vous êtes le bienvenu. Vous apprendrez comment le codage est beaucoup plus rapide de nos jours à l'aide de ces outils d'IA. Mais les débutants n'ayant aucune formation en codage sont également les bienvenus les entrepreneurs et les créateurs qui souhaitent prototyper leurs idées. Ce cours s'adresse également à eux. Ce cours s'adresse également à tous ceux qui sont curieux de savoir comment l'IA peut être utilisée pour construction d'applications destinées à la production. Aucune compétence technique, aucun problème. Tout ce dont vous avez besoin, c'est d'une idée et de ce logiciel incroyable, qui est nouveau en gras, qui vous aidera à faire le reste. Commençons donc et voyons vos idées prendre vie à l' aide de l'IA. 2. Qu'est-ce que Bolt.new ?: Commençons donc par parler de Bolt. Qu'est-ce que Bolt ? Bolt EI est donc une plateforme de développement Web innovante alimentée par IE qui permet aux utilisateurs de créer, d' exécuter, de modifier et même de déployer des applications Web complètes directement dans leur navigateur Web ou via le navigateur Web. Au lieu d'écrire du code ligne par ligne, vous décrivez simplement ce que vous voulez construire en langage naturel et cet outil , Bolt AI, générera le code correspondant. OK. Voici donc le titre de votre moteur de recherche préféré. J'ai donc ouvert Google. Vous pouvez ouvrir n'importe quel moteur de recherche de votre choix, et vous pouvez simplement rechercher Bolt ici. Maintenant, lorsque vous recherchez Bolt, le premier site Web que vous verrez ici sera probablement nouveau en gras. OK ? Vous pouvez donc cliquer dessus et accéder à ce site Web en particulier ici. Voici donc le site officiel. Ou si, pour une raison ou une autre, vous ne voyez pas ce résultat comme premier résultat, hésitez pas à faire défiler la page un peu vers le bas. OK ? Il s'agit peut-être du deuxième ou du troisième résultat pour vous. Vous pouvez également saisir directement la même chose. Jusqu'ici, tout va bien, d'accord ? Maintenant, ici, vous pouvez voir cette ligne de frappe ici. Que souhaitez-vous construire ? Créez des applications et des sites Web époustouflants en discutant avec l'IA. Oui, c'est ce que fait cet outil. Il utilise l' intelligence artificielle et l' algorithme d'apprentissage automatique à différents stades de développement et crée un produit à part entière pour vous. Et ce produit, vous pouvez même vous connecter à la base de données. Vous pouvez le déployer sur Internet et le rendre accessible à tous. Donc, ici, si vous êtes sur ce site Web en particulier, vous pouvez simplement donner cette invite ici. Vous pouvez voir, vous pouvez cliquer ici. Créez une application financière. Maintenant, dès que vous verrez ceci, d'accord, cela vous fera parcourir cette page de discussion ici. Nous ne nous sommes donc pas encore inscrits ou n'avons rien fait. Nous avons simplement cliqué sur Créer une nouvelle application financière, et vous pouvez voir qu'elle a commencé à importer le projet en gras et qu'elle a dit que cela va créer un moment, et vous pouvez voir ici qu'elle importe cette installation d'application financière NPM, elle exécute cette D'accord, il a donc configuré cette application pour nous sans que nous en disions trop sur l'application. Et vous pouvez voir qu'il s'agit d'une application de base qui est déjà construite avec Bolt. OK ? Cette application doit donc déjà être construite avec Bolt, et c'est ce que vous voyez ici. Maintenant, si vous revenez sur la page d'accueil, il y a plusieurs options il y a plusieurs options ici, vous pouvez y jeter un œil. Vous pouvez même importer des éléments depuis Figma ou Github si vous le souhaitez et les créer ici OK ? Et ici, en haut, vous verrez l'option d'entreprise communautaire, puis vous aurez une option de tarification. Maintenant, lorsque nous parlerons de prix, nous utiliserons bien sûr la version gratuite, d'accord ? Je ne pense pas que vous aurez besoin d'une version payante, mais si vous le développez sérieusement ou si vous travaillez sérieusement dessus, travaillez sérieusement avec cet outil, vous pourrez passer à la version Pro à si vous travaillez sérieusement avec cet outil, vous pourrez passer à la version Pro à l' avenir et comparer les avantages ici, d'accord ? Mais pour apprendre, expérimenter, construire des projets, d'accord, tant que nous sommes dans les minutes, désolé, pas dans les minutes. Tant que nous respectons les limites ici, d' accord, vous devez effectuer une mise à niveau. Une version gratuite devrait donc convenir ici. Maintenant, vous pouvez voir ici en version gratuite, vous avez des projets publics et privés, d'accord, ce qui signifie que vos projets peuvent vous être privés et ne pas être partagés avec qui que ce soit ou ne pas être vus par personne. Tu reçois 1 million de jetons par mois, d'accord ? Donc, ici, vous pouvez voir qu' en version pro, comme dans le plan à 20$ par mois, vous obtenez 10 millions de jetons par mois. Ici, vous recevez 1 million de jetons par mois. Que sont les jetons ? Nous y reviendrons sous peu, et vous l'obtiendrez sous forme de limite d'offre. D'accord, c'est la limite quotidienne pour les jetons. Parlons donc des jetons. Maintenant, que sont les jetons ? Vous pouvez considérer le jeton comme une monnaie, en gros, d'accord ? Ou laissez-moi passer aux ressources. Je vais aller au Docs and Health Center. OK. Et ici, sur le côté gauche, voici donc la documentation officielle en gras. Ici, sur le côté gauche, si vous faites défiler l'écran vers le bas, vous verrez ce que l' on appelle des jetons. Alors sélectionnez-le, et vous pourrez le voir ici. D'accord, les jetons sont de petits morceaux de texte, d'accord ? Maintenant, j'adore les chats, puis les exclamations. OK, ce sont tous des jetons ici. Donc, si vous comptez cela, un, deux, trois et quatre. OK, ça devient quatre jetons. Ainsi, les modèles d'apprentissage des langues, comme les LLM, traitent le texte sous forme de jetons, et il s'agit essentiellement de l'unité ou de la devise avec laquelle vous êtes débité OK ? Donc, si vous donnez beaucoup d'informations, si vous développez beaucoup, si vous itérez beaucoup sur le code et que votre utilisation est élevée, alors bien sûr, vous utiliserez un nombre élevé de jetons Si vous gagnez un grand nombre de jetons, si vous en utilisez un grand nombre, vous aurez besoin de la provocation. OK ? C'est ce que je veux dire. OK ? Donc, tant que votre utilisation est inférieure à 1 million de jetons par mois, vous pouvez opter pour le plan gratuit. OK. C'est donc quelque chose que vous devez comprendre. Vous pouvez voir ici qu'une fonction simple utilisera 5 200 jetons Le script Medium utilisera une telle quantité de jetons. Une application complète utilisera cette quantité de jetons. Et ici, vous pouvez voir que si vous utilisez un LLM via un service payant, comme Bold, les coûts sont souvent calculés en fonction du nombre de jetons traités OK. Moins de jetons, c'est moins cher. Donc, en gros, c'est une unité de monnaie, comme votre devise, vous pouvez y penser. Voici donc ce qu'est Token, et voici la documentation officielle ici. Je vous encourage donc vivement à jouer avec cette documentation si vous avez besoin d'aide à l'avenir. Mais oui, pour le moment, il est important que vous compreniez ce que sont les jetons. C'est bon. Il s' agit donc de Bolt ici. C'est le produit, d'accord ? Vous pouvez cliquer sur ces différentes options. Cela peut même vous aider à créer une application mobile. Vous pouvez donc cliquer sur ces différentes options et découvrir ce produit sous un angle. J'espère que cela a été utile jusqu'à présent. 3. Votre première application construite par IA à l'aide de Bolt.new: Le moment est donc venu de nous atteler à la tâche, configurer notre espace et même de créer une première application qui nous donne un aperçu de l'IE. OK ? Je vais donc cliquer sur Commencer. Si vous avez déjà un compte, vous pouvez cliquer sur Se connecter et vous serez redirigé vers la page de connexion, d'accord. Mais je vais suivre toutes ces étapes pour nouveaux utilisateurs afin que, si vous débutez dans cette configuration, vous suiviez. Je vais donc vous dire de commencer. Vous voyez cette page. Vous devez donc vous connecter avec Google Github, e-mail et mot de passe, afin que vous puissiez choisir l'option appropriée en fonction de vos préférences, accord, et créer un compte Maintenant, n'oubliez pas que si vous vous connectez avec votre adresse e-mail et votre mot de passe, vous devrez également vérifier votre adresse e-mail . C'est donc une étape. Je vais donc cliquer rapidement sur Se connecter avec Google ici. Vous pouvez donc voir ici que je me suis authentifié en utilisant Google, et j'ai été redirigé vers cette même page Web, qui n'est rien d'autre que la page d' accueil, d'accord ? Et vous pouvez voir ici en bas, d'accord, j'ai ce panneau latéral, accord, que nous pourrons explorer plus tard. Donc, pour créer l'application Web, je vais donner mes informations ici, d'accord ? Et l'application que je vais créer peut être n'importe quelle application, tout d' abord, mais l' application que j'ai choisie est un générateur de code d'inspiration aléatoire, n'est-ce pas ? Et je vais décrire ma candidature ici, d'accord ? Je parle donc du modèle d'IA ou de Boulg Dot New ici. Je vous conseille de créer une page Web avec un bouton central indiquant de générer un nouveau code. Lorsque vous cliquez dessus, affichez un code d'inspiration aléatoire sous le bouton. C'est ça. Il s'agit d'une application très simple. Il affiche simplement des codes aléatoires. OK ? Maintenant, je peux rapidement dire, allez ici, d'accord ? Ou si vous n'êtes pas sûr et si vous souhaitez améliorer un peu cette invite en particulier , alors il y a ce bouton. D'accord, vous pouvez voir ce bouton, améliorer l'invite et il existe une option pour télécharger les fichiers sous forme de. Donc, si vous souhaitez donner un contexte supplémentaire, vous pouvez également télécharger des fichiers. Mais je vais vous dire d' améliorer le prompt, d'accord ? Et dès que vous cliquez sur améliorer l'invite, cela va améliorer cette invite, rendre plus détaillée. Vous pouvez donc le voir ici ou le lire. OK. Tu peux le lire. Créez une page Web réactive en utilisant le design suivant : une mise en page centrée et épurée avec un bouton proéminent. Il contient ce texte, utilise une palette de couleurs attrayante et style moderne avec des effets de surclic L'interaction est facilement cliquable sur les ordinateurs de bureau et les appareils mobiles Lorsque vous cliquez dessus, pour que vous puissiez le voir ici, je peux récupérer le code à partir d'un tableau prédéfini sur un EPI, afficher le code sous le bouton, et vous pouvez voir ici quelques autres pointeurs et que quelques autres pointeurs et exigences de style Il suffit donc d'ajouter deux lignes, et ici, cette invite est améliorée pour ajouter des informations plus détaillées. Vous êtes maintenant libre de modifier ces informations comme vous le souhaitez, si vous ne voulez aucune sorte de choses, par exemple, si vous ne voulez pas ces animations, afin de vous débarrasser de cette ligne Si vous souhaitez ajouter autre chose, vous pouvez l'ajouter ici. Vous pouvez donc améliorer l'invite, et plus la saisie que vous donnez, le texte écrit ou la description que vous donnez de l'application que vous souhaitez avoir pour le modèle d'IA est bonne, meilleure sera la réponse. C'est donc très élaboré. D'accord, cela décrit tout et c'est l'avantage d' utiliser cette option d' invite améliorée ici. OK ? Vous pouvez voir que l' invite de conformation a été améliorée. Donc je vais vous dire de vous rendre ici. Et vous pouvez voir que vous serez redirigé vers ce genre de page, qui est, vous savez, laquelle vous allez essentiellement commencer à travailler dessus. Et ici, sur le côté droit, vous allez voir l'aperçu de votre application, n'est-ce pas ? Vous pouvez donc voir qu'il réfléchit, je réfléchis pendant 8 secondes. OK ? Et si vous voulez voir le processus de réflexion, vous pouvez cliquer dessus. OK. Voici donc le processus de réflexion. Il l'a donc créé et il génère maintenant l'intégralité de ce code. Vous pouvez donc voir qu'il met en place l'ensemble du projet pour vous. Il met à jour ce fichier pour vous. Il s'agit essentiellement d'écrire du code pour vous. Nous allons donc attendre un moment. Jusqu'à ce que l'ensemble du processus de génération du code soit terminé. OK ? Maintenant, si vous voulez également voir le code, voici une option en haut, à savoir le bouton de code, et vous verrez le code entier généré et mis à jour ici. Mais je vais simplement ignorer ça. Je vais simplement sélectionner l'aperçu car je laisserai l'IA faire le travail à ma place. D'accord, nous allons attendre un moment jusqu'à ce que tout ce processus soit terminé. Cela prendra quelques secondes ou minutes. Cela a donc été rapide. Il a généré ce type d'application. Vous pouvez le voir ici. Inspirez-vous au quotidien, découvrez la sagesse qui stimule la motivation et stimule votre potentiel à chaque clic Intéressant. Cliquez sur le bouton ci-dessus pour découvrir votre premier code source d'inspiration Génial. Vous pouvez donc voir ce bouton ici. Il a une bonne animation et un bon effet de survol. Tu peux voir. L'avons-nous conçu ? L'avons-nous développé ? Absolument, non. OK ? Tout est généré par. Si vous cliquez dessus, un nouveau code sera généré pour vous. Vous pouvez voir si vous travaillez sur quelque chose qui vous tient vraiment à cœur, vous n'avez pas besoin d'être poussé. La vision vous attire. Il s'agit d'un code de Steve Jobs. Intéressant. OK. Je n'ai donc même pas eu à donner la liste des codes et tout ça. Il vient de faire le travail pour moi. Tu peux voir. Il s'agit d'une application très simple très présentable C'est comme s'il s'agissait d'une application présentable. Vous pouvez le déployer en production et en faire une application simple que vous avez créée en 10 minutes à peine avec l'IA ou en 5 minutes avec l'IA. J'espère que cela vous donne une idée de la puissance que peut avoir l'IE. Donc, cette plateforme, comme vous pouvez le voir ici, pensé sur la base de vos commentaires. Tout d' abord, nous n'avons pas donné cette contribution détaillée. Nous venons de donner deux lignes. Nous avons demandé à Air d' améliorer le prompt. Cela l'a amélioré de cette façon, d'accord ? Puis il a réfléchi pendant 8 secondes ici. Vous pouvez suivre le processus de réflexion ainsi que ce qu'il a pensé ici. En cliquant dessus, je vais simplement le réduire. Ensuite, il a essentiellement réitéré ce qu'il avait compris. Donc ça s'est répété à ce sujet, d'accord ? Il a créé un plan et l'a publié ici. Puis il a commencé à développer l'application, et vous pouvez voir la réponse ici. OK ? Donc oui, il s'agit votre première application générée à l'aide de l'IA. J'espère que cela a été génial et j'espère que vous serez en mesure de suivre. 4. Comprendre l'interface et les fonctionnalités: Il est maintenant temps de passer l'interface et de comprendre revue l'interface et de comprendre les différentes options que nous voyons ici. Ici, sur le côté gauche, bien sûr, il est évident que vous voyez le chat et tout ce que vous ajoutez ici, quelles que soient les itérations que vous faites, ce que Bolt vous dit, vous voyez tout ici et l'intégralité de la progression Maintenant, tout de suite sur le côté droit. Donc c'était le côté gauche, d'accord ? Et voici le côté droit. Sur le côté droit, vous allez voir la fenêtre dans laquelle un aperçu est activé. Et peu importe ce qui est développé par l'IE, c'est quelque chose que vous voyez ici dans la fenêtre, la vie. Maintenant, si vous voulez voir le code source, vous avez ce bouton de code haut sur lequel vous pouvez cliquer, et en cliquant dessus, vous serez redirigé vers cette fenêtre de code source où vous pouvez voir le code source complet de l'application. Maintenant, c'est exactement comme le code source que vous verriez sur votre machine locale. Maintenant, si vous comprenez la technologie, vous comprendrez tout le code source écrit ici. OK ? Donc, si vous avez besoin d' accéder au code source, vous pouvez vérifier le code source ici. C'est bon. Il s' agit donc de ça. Vous pouvez même passer en plein écran comme celui-ci en cliquant sur cette option ici. Vous pouvez également rechercher des fichiers. C'est bon. Il s'agit donc de la fenêtre de code. Ici, vous avez également accès au terminal. Vous pouvez donc voir ici que vous avez accès à votre terminal. Vous pouvez donc, en gros, si vous voulez créer, déployer quoi que ce soit manuellement, vous pouvez également faire toutes ces choses depuis le terminal. Mais nous allons passer à la fenêtre d'aperçu. Et ici, vous avez quelques options sur le côté droit, vous pouvez donc voir cet aperçu ouvert dans un onglet séparé. Vous pouvez donc cliquer ici et il vous sera demandé pour voir votre aperçu, vous devez connecter cet onglet au projet, d'accord ? Vous pouvez donc dire «   connecter au projet », et il vous montrera un aperçu de l'ensemble du projet ici. OK, donc quoi que vous voyiez là-bas, vous le verrez ici. Vous pouvez voir quelque chose comme ça. Tu continues à rafraîchir le pelage, comme ça. C'est bon. Voici donc l'onglet d'aperçu, puis vous avez ce mode réactif. Il s'agit donc essentiellement d'une bascule qui vous permet basculer entre la vue mobile et la vue de bureau Donc, ici, vous pouvez voir que c'est sur iPhone 16. Voici donc à quoi cela ressemblera sur iPhone 16. Très bien, iPhone 16, Pixel 9, Galaxy 24. OK, tu peux zoomer sur une fosse si tu le souhaites. Donc, iPhone 16, je vais zoomer à 200 %. OK. Et c'est ainsi que vous le verrez sur votre téléphone, comme sur l'iPhone. Je vais donc simplement revenir au bureau ici. Ici, vous avez l'inspecteur. Vous pouvez donc cliquer ici et vous pouvez essentiellement voir ici. Je l'ai sélectionné et vous pouvez voir qu'il a été sélectionné ici dans le chat. OK ? Et vous pouvez discuter de cet élément ici. C'est quelque chose que tu peux faire. Je vais donc juste clarifier les choses. OK. Vous pouvez également passer en plein écran avec cela. Voici donc quelques options que vous devez connaître. En haut de la page, vous avez des options d'exportation. Vous pouvez télécharger le code source et l'ouvrir dans des plaques empilables. OK ? Mais si vous voulez faire du développement local, vous pouvez le télécharger. Il existe un onglet d'intégration, donc Bolt prend en charge ces intégrations dès maintenant Stripe, super base, lève-toi. Vous verrez peut-être d'autres intégrations à l'avenir. Ils ne cessent d'ajouter de l'intégration, vous pourriez donc en voir plus. Mais pour l'instant, au moment où j'enregistre ceci, je constate environ trois intégrations. accord ? Maintenant, sur le côté gauche, vous verrez cette option. Donc, si vous maintenez ça, cela s'ouvrira, non ? Vous avez donc vos discussions. Il s'agit donc du chat que nous faisons aujourd'hui ou de l'application de chat, désolé, pas de l'application de chat, mais de l' application de génération de code que nous avons créée. Il existe une option pour obtenir des jetons gratuits, afin que vous puissiez recommander des utilisateurs et gagner des jetons. C'est une façon incroyable d'ajouter des jetons à votre compte sans passer à la version Pro, n'est-ce pas ? Vous pouvez donc vérifier cela. Vous avez également des paramètres. Donc, si vous souhaitez modifier n'importe quel type de paramètres, apparaissez dans les paramètres, en ce moment, je suis en mode sombre. Vous pouvez également passer en mode éclairage . OK, tu peux le faire. Paramètres liés à l'éditeur, liés à l'équipe, vous avez des jetons. Alors, quels sont tous les jetons que vous avez utilisés. Toutes ces informations vous seront communiquées ici, informations de votre plan et tout le reste, en gros, n'est-ce pas ? Maintenant, en ce qui concerne les applications ici, vous avez donc vu cet onglet d'intégration, n'est-ce pas ? Et là aussi, vous verrez une liste similaire d' applications que vous pouvez connecter ici. Vous pouvez donc vous connecter à Netlife Net Life c'est essentiellement permettre à Net life un serveur ou une plateforme basée sur le cloud qui peut vous aider à héberger votre application sur Internet Super Base est un service qui permet d'héberger une base de données SQL. Et puis vous avez Figma à partir de laquelle vous pouvez saisir les dessins Le boulon analysera ces dessins et les convertira en modèles froids Et puis vous avez GitHub également. Si vous souhaitez effectuer une sauvegarde de ce code source ou le stocker sur GitHub, vous pouvez le faire en connectant GitHub Tout d'abord, qu' est-ce que l'aperçu des fonctionnalités ? L'aperçu des fonctionnalités est une option qui vous permet voir toutes les fonctionnalités à venir . OK, tu peux y accéder. Non, la première fonctionnalité ici est le DIFS. Donc, ce que vous pouvez faire, c'est activer cette approche DIF ici En utilisant cette approche DIF, il modifiera les fichiers existants plutôt que réécrire le fichier entier à chaque modification, ce qui signifie qu'il utilisera moins de jetons si vous activez ce mode ici OK ? Maintenant, cette option n'est disponible que pour les forfaits payants, je n'ai donc pas cette option car je suis sur un forfait gratuit. Raison dynamique : si vous souhaitez augmenter la capacité de raisonnement, vous pouvez activer cette option. OK ? Vous avez alors accès à la base de connaissances. Ici, vous pouvez définir toutes les instructions spécifiques au projet ou toutes sortes d' ou toutes sortes d'instructions globales que vous pouvez définir ici. Et oui, vous avez des sauvegardes et un réseau. Voici donc certains de ces paramètres qui existent, puis vous avez votre abonnement, comme le type d' abonnement que vous avez. Je suis donc sur un forfait gratuit. OK, si vous passez à quelque chose, vous verrez votre plan actuel ici, puis vous aurez la possibilité de vous déconnecter. OK ? Il s'agit donc de l'interface complète. En haut, vous avez le nom du projet, et ce projet est privé. Vous pouvez renommer le projet si vous le souhaitez, vous pouvez le dupliquer et modifier sa visibilité ici Donc, si je veux le renommer en autre chose, beau générateur de code, ou je peux dire aléatoire ou je peux dire inspirant Générateur de code, je peux le faire, non ? J'espère donc que cela a du sens, et j'espère que vous comprenez bien l'interface. 5. Créer un projet un peu complexe - Une application de liste de tâches !: Le moment est donc venu de commencer à travailler sur notre deuxième application, qui sera un peu complexe, et cette application sera l'application de liste de tâches. C'est donc un peu plus complexe que ce que nous avons déjà développé. D'accord ? Il va y avoir quelques éléments mobiles ici. Et je suis ici sur cette page principale. Vous pouvez accéder à cette page principale en vous dirigeant vers cette URL bool point Nu ou vous pouvez aller ici et dire, commencez une nouvelle discussion Vous dites de démarrer une nouvelle discussion, vous serez par défaut redirigé vers cette page particulière ici. Vous pouvez donc également voir l' historique des discussions précédentes ici , n'est-ce pas ? Il s'agit donc de la première application que nous avons créée. D'accord. Donc, ici, ce que nous allons faire, c'est ajouter une invite que j'ai déjà écrite. Donc, je dis que cette application ici ou que Boltea crée une application de liste simple à faire L'application doit avoir un champ de saisie pour une nouvelle tâche et un bouton Ajouter une tâche. La tâche ajoutée doit être affichée sous forme de liste ci-dessous. D'accord ? Maintenant, cet élément en particulier est une description de ce que j'ai en tête à propos de l' application. Et je ne fais que donner ces idées à ceux qui veulent se déplacer ici ou à n'importe quelle sorte d' intelligence artificielle ici, n'est-ce pas ? Maintenant, si je dis « vas-y », d'accord , cela commencera à fonctionner, mais avant cela, je vais améliorer un peu cette invite, n'est-ce pas ? Améliorons donc cela afin d'obtenir de meilleurs résultats. Il va donc improviser et développer tout ce dont nous avons besoin ici Si tu veux, tu peux passer par tout ça. Vous pouvez donc voir les éléments de l'interface utilisateur. Il définit l'interface utilisateur. Ajouter un bouton d'ajout à la tâche clairement visible à côté du champ de saisie. Afficher la liste des tâches sous la zone de saisie. termes de fonctionnalité, il demande aux utilisateurs de saisir la description de la tâche dans le champ de saisie lorsque l'utilisateur clique sur Ajouter une tâche OK, chaque tâche, lorsque vous cliquez sur Ajouter une tâche, elle est ajoutée à la liste Ensuite, chaque tâche est affichée sous forme d'élément de liste distinct. Ici, n'autorisez pas l'ajout de tâches vides. C'est donc une sorte de validation qui a été ajoutée. Effacez la saisie après avoir ajouté la tâche. Vous pouvez donc voir comment cela décrit et comment cela a amélioré le message pour nous. vue de la conception visuelle, il a ajouté quelques pointeurs ici, et vous pouvez voir ici quelques améliorations facultatives qu'il a mentionnées ici. C'est bon. Si vous souhaitez modifier l'amélioration optionnelle, vous pouvez le faire ici, mais je ne vais pas le faire. C'est bon. Ou nous pouvons nous concentrer ici. Concentré. Alors laissez-nous ou nous allons continuer comme ça. Voyons quel est le résultat que nous obtenons. Je vais dire, vas-y. D'accord. Donc voilà, j'ai reçu un message dès que j'ai dit, allez-y. Cela me dit que, hé, parlez-nous un peu de vous, et vous serez récompensé d'un million de dollars à la fin. Il semble donc qu' il y ait une sorte de chose que je ne vois pas d'habitude, mais il s'agit d'une sorte d'offre ou d'une sorte de travail de recherche en cours. Je peux donc simplement donner quelques informations me concernant. Je suis éducateur. Ici, je suis indépendant en solo ou je travaille pour une grande entreprise Qui que vous soyez, vous pouvez le choisir ici, et je suis une personne de niveau avancé. Je vais donc juste dire ce qui suit, et je fabrique des produits pour moi-même. Je vais juste dire ce qui suit. D'accord ? Et que cherchez-vous à réaliser avec Bold ? Lancez donc l'application ou le site Web, c'est terminé. C'est bon. Et une fois que vous aurez fait cela, 1 million de jetons seront ajoutés gratuitement à votre compte . Donc c'est génial. Il suffit de donner quelques informations vous concernant et vous obtiendrez quelque chose gratuitement. OK, en revenant ici, vous pouvez voir qu'il crée les fichiers initiaux, vous pouvez donc voir toutes les étapes qu'il a ajoutées. Et si vous faites défiler l'écran vers le haut, cela indique que les exigences que vous avez définies sont en train de créer tous les fichiers Vous pouvez voir tous les fichiers générés ici. Si vous allez sur app point TSX, il écrit tout le code que vous pouvez voir Il écrit App Dot TSX. Hein ? Maintenant, si vous passez à l'aperçu ici, l'application a démarré, et cela indique que j'ai créé une application complète de flux de tâches. Vous pouvez donc voir l'application ici. Et ici, vous pouvez voir que c'est une application décente. Pour être fluide, restez organisé et productif grâce à votre magnifique gestionnaire de tâches. Bon slogan. Je dirais : que faut-il faire ? Il a donc une limite de 500 caractères, comme vous pouvez le voir, et cette limite devrait changer et c'est bien quand vous tapez . Vous avez ce bouton Plus. Aucune tâche pour l'instant, vous devez donc ajouter toutes les tâches. Je crois donc qu'une fois que vous avez ajouté la tâche, elle apparaîtra ici. Génial Et voici quelques astuces comme appuyer sur Entrée pour ajouter ou sur Escape pour effacer. Génial Laissez-nous le tester. Je vais aller voir apporter des produits d'épicerie. Ainsi, laissez-moi dire Enter. C'est bon. Et je reçois ce genre d'interface utilisateur ici où il me dit d'apporter des courses avec cette coche ici. Et cela me donne également l'heure et la date auxquelles j'ai ajouté cette tâche, et cela revient à la qualifier de tâche active, c'est insensé Cela me dit donc au total une tâche que j'ai ajoutée, active est une et terminée est zéro. OK, je peux dire que je dois dire « faire ou aller à la gym ». Va au gym, quelque chose comme ça. Et permettez-moi de cocher une tâche ici. Oh, vous pouvez donc voir qu'il a magnifiquement bifurqué les tâches actives et les tâches terminées Avons-nous indiqué cela quelque part dans la liste des exigences ici, améliorations facultatives, o, Implémenter des catégories de tâches ou des niveaux de priorité. Cela figurait donc dans l'amélioration optionnelle. Vous pouvez donc voir ici qu'il a également terminé toutes les améliorations facultatives. Il a ajouté une case à cocher à côté de la tâche pour que le marché soit complet Il a également inclus le bouton de suppression. Le bouton de suppression est-il inclus ? Oui, il possède un bouton de suppression. Génial Il a ajouté des animations de base lors de l'ajout et de la suppression de tâches effectuées, et il a implémenté catégories de tâches ou des niveaux de priorité. Ce ne sont donc que des catégories de tâches, comme vous pouvez le constater. Et cela me montre également les progrès réalisés ici. Le truc de progression a-t-il été ajouté ici, d'accord, je ne le trouve pas, mais il s'est ajouté tout seul, je crois, ce qui est génial. D'accord ? Je ne pense pas que la question de la progression soit ajoutée aux exigences. Donc c'est fou, d'accord, juste en lui donnant quelques éléments, cela nous a permis de créer une application complète pour nous Un conseil que je voudrais mentionner ici, lorsque cette invite a été générée et que vous avez vu une amélioration facultative, je ne l'ai pas supprimée. J'étais sur le point de le retirer, mais je ne l'ai pas fait. Donc, si vous n' obtenez pas un bon résultat, si vous ajoutez une invite améliorée et que des améliorations facultatives ont été ajoutées, d'accord ? Et la réponse ou le résultat que vous avez obtenu n'était pas souhaitable et n'était pas ce que vous vouliez. Ce que vous pouvez faire, c'est réduire la charge de travail ici en vous débarrassant de l'amélioration optionnelle et concentrant vraiment sur votre tâche. Si vous le faites, vous pouvez vous attendre à de meilleurs résultats de la part de l'IA. Mais dans mon cas, même avec des améliorations optionnelles, j'ai pu constater que le résultat est vraiment excellent. Je ne vois aucun problème ici , n'est-ce pas ? Le résultat est donc excellent, mais ce n' est qu'un conseil que je tiens à souligner. Si vous pensez que le résultat n'est pas très bon, vous pouvez garder votre invite vraiment très ciblée. Vous pouvez vous concentrer vraiment sur le cœur des fonctionnalités que vous créez et vous pouvez voir le résultat. Vos résultats seront toujours meilleurs. Nous pouvons donc essayer de le tester clairement et complètement. D'accord ? Les éléments terminés ont été effacés. Cela fonctionne très bien. Je peux aussi obtenir une autorisation. OK, donc cela a également été réglé. Je peux dire « bien » ou étudier aujourd'hui. Présentateur. OK, tâches actives. Je ne pense pas qu'il reste rien d'autre à tester. D'accord ? Tests. Et je vais voir si je vais me décider. OK, ça marche bien, c'est ce que je peux voir ici. L'application fonctionne bien. Et si vous voulez l'ajouter dans la première version elle-même, je dois dire que nous avons ajouté un nombre décent de fonctionnalités. Par exemple, nous avons ajouté une tâche de suppression. La fonctionnalité permettant de supprimer la tâche est celle que nous avons ajoutée. La catégorisation est ce qui a été ajouté. Il y a aussi un tableau de bord ici, le tableau de bord Progress qui est également ajouté en une seule invite. C'est donc impressionnant. Une astuce a également été ajoutée. Maintenant, quelque chose que je peux ajouter ici est un pied de page. Je peux donc dire d'ajouter un pied de page professionnel en bas de page qui parle de l'entreprise Je peux donc ajouter cela à propos de l'entreprise et cela peut mentionner des informations sur le droit d'auteur. Quelque chose comme ça. Je peux donc donner ce genre de message ici et vous pouvez le modifier en fonction de vos besoins. Je ne vais pas améliorer cette invite, n'est-ce pas, parce que c'est juste un pied de page, et je vais simplement l'envoyer ou le donner en entrée Voyons donc si c'est révélateur, cela ajoute le pied de page professionnel ici et cela crée ce composant Vous pouvez donc voir si vous cliquez dessus, cela crée ce composant. Il est en train d'écrire ce code. Si vous cliquez dessus , vous pouvez voir qu'il écrit complètement ce code, et vous pouvez le voir en direct. Donc, une fois que cela sera écrit, l'app point TSX sera mis à jour Vous pouvez voir que l'intégralité du fichier est en cours de mise à jour ici. Nous allons donc attendre que cela se produise. C'est donc chose faite. C'est bon. Et ici, vous pouvez voir tout ce qui a été fait ici. Il a donc ajouté des informations sur l'entreprise, des liens rapides, des contacts par e-mail et des liens vers les réseaux sociaux. Alors laissez-moi faire défiler la page vers le bas et voir, d'accord, informations sur l' entreprise ici sont ajoutées et des liens de réseaux sociaux comme celui-ci. Alors laissez-moi prendre ce film en plein écran. Oups, pas cette partie. Je vais donc faire mieux d'accord, l'aperçu a disparu. Je vais donc simplement l'ouvrir dans un nouvel onglet et me connecter au projet. D'accord. Et ici. Très bien, voici à quoi ça ressemble ou ça apparaît ici Il arrive donc verticalement par ici. Il arrive verticalement ici parce que cet espace surface ou la taille de cette fenêtre sont très réduits. C'est pourquoi je l'ai ouvert dans un autre onglet pour m'en faire une idée. Ça a l'air décent. Vous pouvez le répéter ici si vous le souhaitez Et ici, ce que tu peux faire, c'est essayer de travailler là-dessus, d'accord, tu peux voir, im. OK, donc tu peux voir que ça a l'air bien. C'est une bonne application, je dirais, non ? Et si vous en vérifiez la réactivité sur iPhone 16. Vérifions-le donc sur les appareils mobiles. Je vais faire en sorte que ce soit 100 %. Donc, sur les appareils mobiles, d'accord, permettez-moi de faire un petit zoom arrière. Donc, si c'est à 90 %, vous pouvez voir à quoi cela ressemble, non ? C'est assez décent. D'accord. La sortie que nous avons obtenue est donc assez correcte pour la version 1.2, et j'en suis content, non ? Sans écrire une seule ligne de code, vous pouvez constater la puissance des outils d' intelligence artificielle tels que le pooled. J'espère que cela vous a été utile. 6. Développement itératif avec Bolt.new: Il est maintenant temps de commencer à parler de développement itératif Nous avons donc ici cette version 1.2 ou la version que vous appelez cette application particulière. Il y aura des situations dans lesquelles vous souhaiterez améliorer certaines choses, ajouter de nouvelles fonctionnalités ou supprimer certaines fonctionnalités. C'est donc quelque chose que vous pouvez absolument faire ici à l'aide du chat. Maintenant, ici, vous pouvez voir ce bouton Plus. Supposons que je n' aime pas ce bouton plus et que je puisse identifier le modèle d' IA ici, afin que je puisse améliorer ou améliorer le bouton plus pour ajouter du texte. OK, quelque chose comme ça et donne-lui une meilleure couleur. Je peux donc dire quelque chose comme ça. Je peux améliorer le message ici pour le rendre beaucoup plus détaillé afin d'obtenir une meilleure réponse. Vous pouvez donc voir ici qu'il l'a élaboré et laissez-moi vous l'envoyer. Voyons ce qui va se passer. C'est bon. Le résultat sera certainement le meilleur. Vous pouvez donc voir qu'il met à jour ce fichier en particulier ici. Nous allons attendre un moment. Vous pouvez donc voir que la mise à jour est terminée. Il a décrit la mise à jour, et ici il a ajouté ce texte publicitaire, n'est-ce pas ? Et maintenant, si je dis, allez à la salle de sport, vous pouvez voir le bouton apparaître. Il s'agit donc certainement d' une amélioration par rapport à ce que nous avions au début. Bien entendu, nous n'avons pas décrit grand-chose dans les modifications, mais si vous avez des exigences spécifiques ou une palette de couleurs spécifique à utiliser, vous pouvez certainement le mentionner ici lors de la saisie. accord ? Maintenant, quel que soit le type de problème que vous rencontrez, il y aura des scénarios dans lesquels vous rencontrerez également des problèmes. Donc, par exemple, si je passe ici en mode réactif, et si je passe à l'iPhone 16 et que je zoome un peu, vous pouvez voir que le texte se chevauche ici, n'est-ce pas ? Il y a donc un chevauchement de texte dans le champ de saisie si vous passez en mode réactif. Donc, ce que je vais faire, c'est mieux communiquer sur ce problème, je vais juste en prendre une capture d' écran je vais juste en prendre une capture d' écran et je vais la coller ici. Vous pouvez donc simplement prendre une capture d'écran, enregistrer sur votre appareil et la publier ici en utilisant cette option de téléchargement, ou vous pouvez directement prendre cette capture d'écran et la coller ici. C'est quelque chose que vous pouvez également faire. Et vous pouvez voir, euh, donc j'ai décrit mon problème. Je lui ai dit que hé, jetez un œil à l'indice dans la boîte de sortie. Désolé, indice dans la zone de saisie. Il n'est pas lisible en mode réactif et fonctionne bien sur le bureau, mais pas sur les appareils mobiles comme l'iPhone 16. Donc, plus vous pouvez élaborer, meilleur sera le résultat , n'est-ce pas ? J'ai donc bien élaboré, je pense, je vais simplement dire envoyer et laissez-nous voir s'il est capable de résoudre ce problème pour nous. Nous attendrons un moment jusqu'à ce que le traitement soit terminé pour nous. Vous pouvez donc voir ici qu'il a mis à jour l'application, et voici la description de la mise à jour qu'il a effectuée. Et maintenant, vous pouvez voir que cette zone de texte est en pleine largeur. OK, donc si vous lisez les modifications qu'il a apportées, il a ajouté un meilleur espacement, une séparation claire et agréable au toucher Donc, si vous tapez quelque chose ici, c'est mieux. Accédez à l'équipe. Vous pouvez le voir sur les appareils mobiles, ça va avoir l'air cool. Et si tu l'ajoutes, ça aura l'air bien. Aucun problème en tant que tel. Donc, sur les appareils mobiles, cela fonctionne également bien. Vérifions-le également sur ordinateur. Rien n'est cassé, donc rien n'est cassé. Ça a l'air bien. Donc oui, les changements ont été bons, et voici comment vous pouvez les itérer Maintenant, vous pouvez même savoir que ce que nous avons vu ici, c'est que nous avons résolu des problèmes. Nous avons apporté quelques améliorations. Maintenant, si vous souhaitez ajouter des fonctionnalités ici, vous pouvez en ajouter d'autres. Ainsi, par exemple, si je souhaite modifier les deux listes de tâches, je peux certainement le faire également. Donc, ici, je peux dire, s'il vous plaît, ajoutez une fonctionnalité pour que je puisse modifier les 22 qui ont été ajoutés. OK. Et je peux améliorer cela et nous montrer à quoi ressemble l'amélioration. Vous pouvez donc le voir, y accéder à identifiant ou à l' identifiant unique en entrée. Permettez aux utilisateurs de modifier le titre de la tâche , la description et la date limite. y a donc pas de date limite ici, ni de description, et niveau de priorité n'y figure pas non plus. Donc je vais juste m'en débarrasser. Validez les informations modifiées avant de les enregistrer et enregistrez-les ici, message de confirmation, gérez les erreurs éventuelles, renvoyez l'élément todo mis à jour une fois la modification terminée Voyons si tout va bien. Je l'ai donc donné en entrée, attendons un moment. Les mises à jour ont donc été effectuées. Vous pouvez voir ce qui a été mis à jour ici. L'icône Modifier a été ajoutée. Il existe une validation, des boutons d' annulation de sauvegarde et un retour visuel. OK, alors laissez-nous tester ça. Donc je vais juste ajouter un Tulu, passer à trois. D'accord Venons-en maintenant ici et il y a une icône d'édition. Génial. Je vais simplement cliquer sur Modifier. Vous pouvez voir que vous êtes déjà en mode édition, allez à la salle de sport aujourd'hui et vous pouvez voir la sauvegarde ici. Au moment où vous dites « Enregistrer », vous pouvez voir que todo l'a lu avec succès C'est génial. Et vous pouvez améliorer cela. Je peux le modifier à nouveau. Tu peux voir. C'est décent. Maintenant, si vous ne voulez pas que le message apparaisse ici ou que le message apparaisse en bas, vous pouvez donner toutes ces sortes de saisies ici et vous pouvez y remédier. Mais ça me convient. Ça a l'air génial. Et je pense que c'est une bonne chose. C'est un bon résultat que nous avons obtenu jusqu'à présent sur la base des contributions que nous avons fournies. Très bien, donc j'espère que vous êtes au courant de l'ensemble du processus. J'espère que vous comprenez également à quel point ces outils peuvent être puissants. 7. Intégrer la base de données dans Bolt.new: Donc. Il est maintenant temps de commencer à parler des données dans notre application. Il s'agit donc de l'application que nous avons développée jusqu'à présent. Il est ouvert ici dans le nouvel onglet. Il est également ouvert ici en avant-première. Mais ici, dans notre application, nous générons des données. Données, ce qui signifie qu'il existe des données générées par l'utilisateur , telles que les tâches, les tâches terminées. Les données sont également mises à jour, car une fois les données générées, contient une disposition notre application contient une disposition permettant aux utilisateurs de les mettre à jour Ils peuvent marquer les données comme terminées ou marquer la tâche comme terminée. Les données sont donc également mises à jour, créées, supprimées. Tout cela est en train de se produire. À l'heure actuelle, ces données sont stockées localement dans notre navigateur, n'est-ce pas ? Et tu peux vérifier ça, d'accord ? Si vous faites défiler la page vers le haut dès la première invite. Il s'agit de la première invite que j'ai donnée pour créer l'application Todo list Et une fois que nous vous l'avons demandé, vous pouvez voir ici, après avoir compris toutes les fonctionnalités, AI ou Bolt AI elle-même a vous pouvez voir ici, après avoir compris toutes les fonctionnalités, indiqué qu'elle utiliserait la persistance du stockage local, ce qui signifie que toutes les données, la liste des tâches, tout ce que vous générez ici sont stockés dans le navigateur lui-même Donc, si vous faites un rafraîchissement, laissez-nous le faire. Je vais devoir me connecter au projet. Nous sommes connectés au projet, et vous pouvez voir que les données ne persistent pas ici Maintenant, si j'ajoute une tâche, laissez-moi d'abord vous montrer où les données sont stockées. Je vais donc vous montrer un moyen rapide de voir les données dans la fenêtre Chrome. Vous devez donc cliquer avec le bouton droit de la souris pour inspecter. Cela peut donc sembler un peu accablant pour un public non technologique, mais restez là. Vous n'avez pas besoin de l'essayer. J'essaie juste d' expliquer un concept. Ici, vous devez cliquer sur les flèches et accéder à l'application. Maintenant, dans l'application, vous avez toutes les informations de stockage qui se produisent dans le navigateur. Cliquez sur le stockage local et sélectionnez votre URL. Il s'agit donc de l' URL de votre application, sélectionnez-la. Maintenant, vous verrez toutes les informations sur toutes les informations stockées pour cette application dans le navigateur. Maintenant, cela n'est pas clairement visible, alors je vais cliquer dessus et je vais le déplacer vers le bas. C'est donc beaucoup mieux maintenant. Vous pouvez donc voir ici. OK, et je vais fermer ça. Je vais également le fermer. Je vais également me débarrasser de la console à partir d'ici. OK, donc c'est assez juste. Maintenant, vous pouvez voir les todos ici. Donc, si vous le développez un peu, vous pouvez voir des objets vides. Hein ? Vous pouvez donc voir que c'est ainsi Todos est géré dans notre application Il est stocké dans le navigateur. Maintenant, si j'essaie d'ajouter un todo, je dis, allez voir Jim, si je dis Enter, vous pouvez voir qu'il y a un identifiant unique ici Le texto est destiné à Jim. Est-il marqué comme terminé ? Non, donc c'est marqué comme faux ici. Tu peux voir. Il est donc assez clair que c'est ainsi que les données sont gérées dans notre application. J'ai donc simplement zoomé pour que vous puissiez bien le voir et laissez-moi le développer pour que vous puissiez voir ici Complété, créé à, ID et texte. Tout cela se trouve ici. Maintenant, dès que je le marque comme terminé, donc si je le marque comme terminé, vous verrez que cette mise à jour terminée est définie sur true. Désormais, les applications de production ne gèrent pas les données sans rien faire. Vous ne pouvez pas gérer les données dans le navigateur, n'est-ce pas ? Et si demain, disons que vous fermez cette session et que vous essayez d'accéder à cette application depuis votre téléphone portable. Les données se trouvent dans le navigateur, elles n'apparaîtront donc pas dans le navigateur mobile. Maintenant, comment arrangez-vous cela ? Pour résoudre ce problème, les applications de production utilisent une base de données hébergée quelque part dans le cloud. Maintenant, si vous venez, nous avons ici cet onglet d'intégration, et il y a une intégration que Bolt nous permet de faire avec Super Base. Donc Super Base, nous pouvons utiliser la base de données Super Base dans notre application, et nous pouvons la configurer ici. Maintenant, la question est : qu'est-ce que Superbase ? Donc, ce que je vous recommande, c'est de vous rendre sur votre moteur de recherche préféré et de rechercher Super Base, ou d' aller directement sur superbs.com Donc, si vous ouvrez cet onglet ici, vous pouvez voir qu'il s'agit du site officiel de Super Base, et Super Base est la plateforme de développement PoSCRS. Qu'est-ce que PoSCRS ? PosGRS est un fournisseur de bases de données. accord, il existe plusieurs fournisseurs de bases disponibles sur le marché, comme Pascris SQL, puis vous avez MySQL, vous avez SQLlit Posgris est donc l'un des fournisseurs de bases de données. Superbs utilise donc Poscris et il est hébergé dans le cloud, et vous pouvez démarrer votre projet avec la base de données Poscris, l' authentification, les API instantanées, la fonction H, tout cela qu'il propose Maintenant, la meilleure partie est là pour que vous puissiez faire défiler la page vers le bas et explorer toutes les fonctionnalités, n'est-ce pas ? J'espère que vous savez ce qu'est Super Base. Cela va nous permettre de stocker notre base de données. Into the Cloud, qui est hébergé, d'accord ? Et cette base de données sera une base distante. Les données sur les étoiles seront conservées. Donc demain, si vous ajoutez une tâche ici dans ce navigateur, et si vous essayez d'accéder à la même application depuis votre téléphone portable, les données que vous avez ajoutées seront affichées à condition qu'elles soient liées à votre compte OK ? J'espère donc que cela a du sens. Et pour l'instant, ce qui se passe, c'est que nous les stockons localement, comme je vous l'ai démontré . Si vous ne parvenez pas à l'installer votre machine ou si vous utilisez un autre navigateur, ne vous inquiétez pas. C'était juste ma façon de vous montrer comment les données sont stockées localement. Je voulais donc prouver et vous montrer comment les données sont stockées dans le navigateur lui-même. C'est donc ce qui est utilisé ici. C'est donc chose faite. Je vais juste fermer cet onglet. Cela peut sembler accablant si vous n'êtes pas un codeur. En venant ici, nous allons intégrer Super B dans notre application et toutes les données stockées, toutes les tâches, tout le seront stockées dans une base de données cloud qui sera créée pour nous et ne sera pas stockée dans le navigateur Pour ce faire, nous devons parler à Bolt et là, je vais vous dire de conserver toutes les données de notre application dans une base de données, et je vais améliorer cette invite. Il va donc développer cette exigence et l'améliorer. Vous pouvez donc voir ici, identifier et cartographier toutes les données, implémenter des tables de base de données appropriées avec des relations, utiliser les meilleures pratiques, inclure tout cela. La solution doit être évolutive et tout cela. Il a élaboré. Votre élaboration peut être différente de la mienne, mais je vais juste envoyer ceci. Je ne vais pas le modifier et voyons comment cela fonctionne. Le truc ici, c'est que nous n'avons pas encore intégré de super base à notre compte. Nous n'avons pas non plus de compte créé avec Super Base. Voyons donc comment fonctionne ce processus si vous êtes un nouvel utilisateur de Super Base. Je n'ai pas de compte pour le moment, je vais vous expliquer. Alors, voyons voir. Donc, ici, il crée un script de migration dans le dossier de migration, superbs Migrations, et il a nommé ce fichier, quelque chose comme ça Je vais attendre un moment jusqu'à ce que toutes ces étapes soient terminées. Donc, au bout d'un moment, il a créé pas mal de fichiers. Cela a pris un certain temps, et il a créé ces nombreux fichiers qui exécutent certaines commandes, et cela a démarré l'application. Mais sur le côté droit, je vois une erreur, ce qui est bien. Maintenant, si vous faites défiler l'écran vers le bas, cela me dit qu'il m'invite à établir une connexion Superbase Cela me demande donc et je vais avoir besoin d' une nouvelle connexion Superbase . Oui, j'en ai besoin. Donc, ce que je vais faire, c'est venir ici, je vais dire à Data Bese Je vais donc cliquer sur cette option ici et je serai immédiatement redirigé vers ce site Web appelé subbase.com, le site Web que nous venons de voir Maintenant, si vous avez un compte, vous pouvez vous connecter. Si vous n'avez pas de compte, vous pouvez vous inscrire. Rien ne vous sera facturé. Vous n'avez besoin d'aucune sorte ou vous n'avez pas besoin de dépenser d' argent, c'est ce que je veux dire. En ce qui concerne les prix, ils proposent un niveau gratuit généreux, qui devrait nous suffire pour lancer et valider nos idées, n'est-ce pas ? Il s'agit donc d'un plan gratuit. C' est ce que nous allons utiliser. Et ce que je vais faire, c'est saisir mes informations, tout ce qui se trouve ici, et je vais créer le compte. Après avoir saisi l' e-mail et le mot de passe, vous sera demandé de vérifier votre adresse e-mail. Alors faites cette vérification, et je vous y verrai. Maintenant, lorsque j'ai cliqué sur le lien de confirmation contenu dans l'e-mail de confirmation, m'a demandé d'autoriser l'accès à l'API pour Bolt Bolt essaie donc de se connecter à mon compte Superbase, et il demande toutes ces autorisations Je vais juste dire créer une organisation. Je vais donc simplement passer aux autorisations. Et pour cela, nous allons créer une organisation. Vous pouvez maintenant saisir le nom de l'organisation ici. OK, donc je vais dire FASLsog ici. Vous pouvez entrer le nom que vous voulez, sélectionner le type, le plan. Nous avons un forfait gratuit. Nous n'avons pas besoin de dépenser quoi que ce soit. Je dirais créer une organisation. Et nous allons attendre un moment. Il le demande donc à nouveau, et je vais dire « autoriser ». Il se connecte donc au boulon et vous pouvez voir que la connexion a été établie avec succès. Maintenant, si vous venez ici, une fenêtre contextuelle m' indique que vous devez sélectionner votre projet Super Bs Data Bs ou Super Bees. SuperBSPject est donc censé être connecté ou créé, en gros, si vous ne l'avez pas Je vais donc simplement le créer car je n'ai pas encore de projet. Je dirais donc que le nom de mon projet est to do app, quelque chose comme ça. Vous pouvez saisir le mot de passe. Je vais simplement entrer ou générer une sorte de mot de passe. OK. Assurez-vous donc que votre mot de passe est suffisamment fort ici, et vous pouvez également voir ici l'option de génération du mot de passe. Je viens donc de cliquer dessus. OK ? Ainsi, au moment où vous cliquez dessus, un mot de passe de base de données sera généré pour vous et vous pourrez sélectionner la région. Je vais juste le garder par défaut et vous pouvez voir créer un projet. Maintenant, le projet sera créé automatiquement, et nous ne l'avions pas fait , nous n'avons pas fait beaucoup d'efforts ici. Vous pouvez donc voir ici que l'intégration est terminée. Vous pouvez voir que Supervase est installé. Et vous pouvez voir ici qu'il est connecté à la base de données. Il est connecté à Superbase, il est connecté au projet, il configure l'authentification Il a créé une base de données et finalisé cette configuration. Tout cela est fait, et maintenant il me demande de créer le schéma de base Je vais donc dire « appliquer » et « laissez-nous attendre ». Il applique donc l'application de la migration de base de données, d'accord, la migration de base de données n'a pas été appliquée correctement, et ici, elle m'a également montré cette fenêtre contextuelle. Il a donc identifié un problème et me donne cette option pour tenter de le résoudre. Donc, bien sûr, je vais dire essayer de réparer, et je vais laisser les choses se réparer. Et nous aborderons également cette erreur sur le côté droit, mais restez là. Il est donc en train de régler ce problème. Il le fait tout seul. Nous attendrons un moment jusqu'à ce que ces correctifs soient appliqués. Il a donc appliqué quelques modifications ici, et mon application est rechargée Je ne vois pas encore l' application fonctionner. Je vois toujours un message d'erreur, mais il me demande de terminer la migration Je vais donc dire « appliquer », et cela me montre quelques problèmes ici Je vais donc essayer de le corriger. Il a donc identifié le problème que je voyais sur le côté droit et essaie de le résoudre. Vous pouvez donc voir toutes ces erreurs qu'il me montre. C'est donc l'erreur que nous voyions dans le navigateur. Donc, une fois le problème précédent résolu, d'accord, le correctif précédent a été cliqué ici en tant que tentative de correction Je constate à nouveau un autre problème, je clique donc à nouveau sur cette tentative de correction. Voyons donc combien d'itérations sont disponibles pour résoudre tous les problèmes Ce qui se passe ici, c' est qu'il détecte lui-même les problèmes et qu'il m'incite à les résoudre Je vais donc simplement le faire et répéter pour obtenir le produit final Donc, après quelques itérations et en cliquant plusieurs fois sur Tenter de corriger, j'ai pu constater que le problème sur le côté droit était résolu, et maintenant je vois un autre problème, qui est ce problème Donc je vais juste dire «   essayer de corriger ». Maintenant, tous les problèmes ont été résolus. J'ai quelques fenêtres contextuelles ici me demandant que, hé, ce problème est identifié et résolu. Je l'ai donc fait à quelques reprises, et maintenant tous les problèmes identifiés, vous pouvez les voir ici. Tous ces problèmes ont déjà été résolus, si vous regardez le chat. OK ? Et nous voyons cette page de connexion. C'est bon. Nous n'avons donc pas demandé à Bowl d'ajouter l'authentification. Mais puisque vous ajoutez une base de données, elle ajoute elle-même l'authentification. De plus, si vous faites défiler les discussions vers le haut et que vous voyez, à partir du moment où vous lui avez demandé d'ajouter la base de données à l'application, vous vous rendrez compte qu' il y a une mention, comme Bolt l'a mentionné , qu'elle ajoute également l' authentification parce , vous savez, voici toutes les fonctionnalités qui sont ajoutées. Gestion des sessions utilisateur, recherche de mots de passe. Et cela est ajouté par Bolt lui-même sans que nous le sachions, car nous ajoutons une base de données, et chaque tâche doit être associée à l'utilisateur à la fin de la journée, n'est-ce pas Parce que vous souhaitez gérer la session. Donc, si vous vous connectez depuis le navigateur vous devriez voir vos tâches dans le navigateur, et si vous vous connectez depuis votre téléphone, vous devriez voir vos tâches là-bas Et cela ne peut être fait que si vos todos sont associés à un compte C'est bon. Cela a donc été pris en charge par Bolt lui-même. Maintenant, ce que je vais faire, c'est regarder le discours. Je n'ai pas encore de compte. Donc, ce que je vais faire, c'est dire de t' inscrire ici, et je vais entrer mon e-mail ici. Je vais également saisir le mot de passe. OK. Et je dirais de vous inscrire au 123, et je dirais simplement de créer un compte. Le compte a donc été créé, et je suis revenu la page de connexion, et dans la page de connexion, j'ai saisi mon e-mail et le mot de passe, sur la page de connexion, et dans la page de connexion, j'ai saisi mon e-mail et le mot de passe, et je vais voir la connexion ici. C'est bon. La connexion est donc terminée. Maintenant, cet e-mail que j'utilise est un faux e-mail et non mon vrai e-mail ici OK ? Je viens de le créer dans le cadre de ce cours. Alors voilà, je me suis inscrit avec ce faux e-mail, et maintenant vous pouvez voir ici, c'est notre page principale de candidature que vous voyez, n'est-ce pas ? Et si vous venez sur Super Base maintenant, voyons si les informations de notre compte sont stockées dans le compte Super Base. Alors voilà, je vais aller dans la barre latérale et ici dans la base de données Passons à la base de données. Donc, sous base de données, si vous allez dans les tables. OK, vous pouvez donc voir par-dessus votre visualiseur de schéma, qui vous donnera une visualisation de l'existence de tous les schémas Vous pouvez donc voir ici les préférences utilisateur dans lesquelles vous avez un identifiant utilisateur et tout. Ceci enregistre les préférences de l'utilisateur. Ensuite, vous devez créer des balises, puis vous devez le faire, puis créer des catégories. Toutes ces informations sont donc stockées dans la base de données. Si vous allez aux tables, vous allez voir les tables ici. Vous pouvez voir tous ces tableaux. Maintenant, où est la table des utilisateurs ? Vous ne trouverez donc pas de table utilisateur ici sous base de données. Vous devez passer à l' authentification. Donc, sous authentification, vous verrez ce tableau. Vous verrez les utilisateurs ici sur le côté gauche. Sur le côté droit, vous pouvez voir les utilisateurs créés dans votre application. Il s'agit donc d'un utilisateur, qui est un utilisateur avec lequel je viens de m'inscrire, et vous pouvez voir qu'il vient d'être créé. C'est mon nom d'utilisateur, non ? Vous voyez donc des informations ici. Passons maintenant à la base de données. Passons aux tables. Et ici, vous voyez pas mal de tables. OK. Et si tu vas chez Todos, d'accord ? Donc, si vous passez à l'affichage dans l'éditeur de tableau, passons à l'éditeur de tableau. Vous pouvez donc voir ici toutes les données contenues dans ces tables. OK ? Cela se trouve dans l'éditeur de table. Maintenant, ajoutons un tu do et voyons si le Todo est ajouté ici Je vais donc venir ici. Et ici, je vais dire, disons, allez le voir. Quelque chose comme ça. Vous pouvez ajouter n'importe quelle tâche Je vais dire « Enter ». OK, nous assistons donc à l'ajout de Todo Et si vous venez ici, d'accord, nous ne voyons aucune activité pour l'instant. Avons-nous un moyen de nous rafraîchir ici ? Je vois donc le Todo apparaître. J'ai juste cliqué sur ce todo, et les données ont juste été rechargées ici Tu peux voir. Allez au gymnase tel qu'il est apparu. Donc tu dois venir ici. Nous allons ajouter une autre tâche. Je dirais aller au marché, quelque chose comme ça. Viens par ici. Vous ne verrez pas Gudo MakeTueo ici. Cliquez sur Todos OK, ou changez comme ça. OK, je ne vois pas les données ici. Le chargement des données prend peut-être un certain temps, ou laissez-moi les rafraîchir ici. OK, donc je devrais voir Goodomrket, donc vous devrez effectuer une actualisation complète si les données n' apparaissent pas ici Donc oui, cela arrive ici, et vous pouvez voir que c'est lié à mon nom d'utilisateur. Il s'agit du Todo ID. Tout est stocké dans la base de données, vrai, créé et amélioré, toutes les informations sont stockées et complétées sont marquées comme fausses. Ce n'est donc pas encore terminé. Et si vous complétez l' un des Too, par exemple, si je termine GoodoGym ici Cette tâche est donc terminée. Et si vous venez ici et que je l'actualise, je vais m'assurer que GoodoGym est terminé, marqué comme vrai. Tu peux voir. Il est donc également mis à jour dans la base de données, et la base de données a été ajoutée. C'est bon. Et vous pouvez voir les efforts que nous avons déployés en ce moment pour ajouter une base de données. Cette base de données existe dans le Cloud dans le Cloud, c'est-à-dire sur Internet. Il n'est pas disponible localement sur notre système. C'est sur Internet. Et si vous déployez votre application sur Internet demain, cette base de données sera votre base de données de production. OK ? J'espère donc que cela a du sens et j'espère que vous serez en mesure suivre tout ce que nous avons fait. Maintenant, quelle que soit l'itération ou tout ce que vous voulez faire ici, vous pouvez absolument demander à Bol de le faire ici Mais cela a été incroyable jusqu'à présent, et vous avez également un bouton Sinnot ici Vous pouvez voir les informations de votre signe à l' aide d'un bouton Sinnot. Permettez-moi de l'ouvrir dans un onglet séparé ici. Je vais connecter le projet. Et vous pouvez voir comment cela apparaît. OK, donc je dois juste me reconnecter, d'accord ? OK, donc vous pouvez voir par ici ou par ici. Très bien, ça me dit de migrer tes todos. Nous avons trouvé que vos tâches étaient enregistrées localement. Souhaitez-vous les migrer vers le compte ? D'accord, la migration est donc également une fonctionnalité qui a été ajoutée ici. Donc, si l'utilisateur n'avait pas le compte, cela lui permettrait de migrer. Donc, en gros, une fois que vous avez mis à jour l'application, si cette application a été déployée, vous pouvez simplement cliquer sur Migrer et toutes les tâches seront ajoutées au compte Alors, voyons voir. Très bien, bonne salle de sport. Donc probablement plus tôt, j'avais ajouté GoTo Jim. C'est pourquoi il est ajouté deux fois. Et laissez-moi le supprimer, donc je supprimerai celui-ci GoTo Jim. OK. Vous pouvez donc voir que tout fonctionne bien. J'espère donc que vous avez pu me suivre, et j'espère que vous l'avez trouvé très utile. 8. Déployer votre application pour la production: Nous avons fait des progrès décents dans notre application, et ce que nous voudrions maintenant faire, c'est déployer cette application sur Internet, et je dirais que je voudrais partager cette application, son URL, avec tous mes amis. Mais puis-je partager l'URL et tout le reste avec mes utilisateurs, amis ou les personnes que je souhaite partager ? Quelqu'un peut-il accéder à cette application via Internet ? La réponse est non. Il se trouve dans votre compte ici, et il ne s'agit pas d'une URL publique. Donc, si je copie cette URL, c'est l'URL de notre application. Et si j'ouvre un nouveau mode navigation privée ou une session de navigateur invité, essayons d'y accéder Vous pourriez donc voir qu' il me demande que , pour voir votre aperçu, vous devez connecter cet onglet à son projet, ce qui signifie que vous devez être authentifié et vous connecter à votre nouveau compte audacieux Donc, si je dis connecter le projet, vous verrez qu'il n'a pas pu trouver le projet. Nous devons donc nous connecter. Mes amis n'auront donc pas accès à mon compte ou mes utilisateurs ou quiconque utilisant Internet n' auront pas accès à mon compte. Je ne vais pas partager mes informations d'identification avec tout le monde, non ? Alors, comment résoudre ce problème ? La réponse à cette question est donc que nous devrons déployer cette application publiquement ou je ne devrais pas le dire publiquement. Nous devons déployer cette application sur Internet. Nous devons faire appel à un fournisseur d'hébergement. Je vais donc demander à Bolt New de le faire. Je vais donc dire ici, déployez cette application pour moi. Vous pouvez simplement saisir cette invite. Je viens de lui demander de le déployer. Instructions de déploiement propres. Voyons ce qu'il fait. Bien, je n'ai pas amélioré cette invite. Voyons quel est le résultat que cela me donne. Je vais vous dire que Bold utilise Netify. Comme vous pouvez le constater, je vais déployer votre application sur Netlify pour vous. Maintenant, qu'est-ce que Netlify ? Je vais juste le sélectionner. Je vais juste faire une recherche sur Netlify ici. Qu'est-ce que Net Leaf ? Si vous allez sur Netefy, je vais juste vous présenter. Il vous permet d'héberger vos applications Web, et c'est très simple. C'est une plateforme très facile à utiliser , c'est ce que je dois dire, ici. Et vous pouvez constater qu'il y a eu tellement de déploiements qui ont été effectués, plus de 35 millions Il est utilisé par 7 millions de développeurs. C'est donc certainement l'une des solutions les plus populaires, et vous n'avez pas besoin de payer pour cela. Il vous offre un plan généreux gratuitement. Donc, ici, vous pouvez voir qu'il y un bon nombre, j'utilise beaucoup Netliee, et j'ai pas mal de sites Web qui l' hébergent gratuitement. Si vous harcelez quelque chose ici, vous pouvez utiliser Netlifee gratuitement vous pouvez utiliser Netlifee gratuitement . Vous n' avez rien à payer. Vous ne pouvez payer qu'une fois que vous avez effectué une mise à l'échelle et que vous avez besoin de fonctionnalités professionnelles. Nous aurons donc besoin de Netlify ici. Vous pouvez voir ici que cela nous invite à déployer notre application sur Netlife Donc, si vous faites défiler la page vers le bas, vous pouvez voir que je suis en train de construire et de déployer. Il a donc exécuté quelques commandes ici. Il a créé notre site Web à l'aide de certaines commandes, et il a dit : « Je suis en train de créer et de déployer votre application sur Netlify, et cela créera une version prête à être produite de votre belle application pratique avec toutes les fonctionnalités et tout le reste Le site a été déployé avec succès. Il a donc déjà déployé le site ici sur cette URL. Permettez-moi donc d'accéder à cette URL. Oui, il a été déployé. Vous pouvez voir ici qu'il s'agit d'une URL publique. Donc, si vous essayez d'ouvrir cette application ici dans un autre onglet, vous allez voir ceci. Il s'agit donc d'une URL publique. C'est une URL Netlify. Et laissez-moi vous dire une chose : nous n' avons pas de nom de domaine mappé ici Hein ? Nous n'avons pas de nom de domaine mappé ici parce que nous ne l'avons pas fait, n'est-ce Il s'agit donc d'une URL publique, qui nous est fournie par Ntlefy et à l'aide de Bolt, nous avons obtenu cette ND a déployé cette application sur Netlify, et elle nous demande de transférer ce projet Netlify Vous pouvez utiliser cette URL pour revendiquer cette application. Je vais donc cliquer sur cette URL ici, et je vais y accéder. Cette application est donc déployée, a-t-il dit, et vous devez revendiquer cette application pour la déplacer vers votre compte, n'est-ce pas ? Donc, si vous cliquez sur le bouton de réclamation, comme l'URL de réclamation ici , fournie par Bolt. Cette page de connexion s'affichera car vous devez vous authentifier ici Maintenant, si vous n' avez pas de compte sur Netlify, c'est tout à fait Vous pouvez cliquer sur s'inscrire et créer votre compte. Mais j'ai un compte ici. Je suis un utilisateur de Netlify, donc je vais juste me connecter. Si vous n'avez pas de compte, n' hésitez pas à vous inscrire. Le processus d'inscription est très simple et ne vous coûtera rien. Vous pouvez donc voir ici que je me suis connecté à mon compte Netlify Si vous vous êtes inscrit, vous verrez quelque chose comme ceci ici, récupérer vos applications audacieuses sur Netlify ou si vous vous perdez ici après le processus d' inscription, vous pouvez cliquer à nouveau sur cette URL Hein ? Je vois donc cette réclamation Maps, et je vais voir Claymps ici. Cela signifie que je réclame des applications et que l'application a été réclamée et transférée sur mon compte ici. Tu peux voir. Il est déployé depuis Bolt ici, et c'est à cette époque qu'il a été publié, et à partir de là, vous pouvez même l'ouvrir dans un pool. Vous pouvez donc voir le type d' intégration qu' ils ont avec Netefy et voici l' URL que vous avez détectée Et si vous souhaitez mapper un domaine, disons que j'ai acheté un domaine, todo list point app, par exemple, ou todo app.com. C'est un domaine que j'ai acheté. Vous pouvez accéder à la gestion des domaines. Et vous pouvez ajouter le domaine ici, et vous devrez lire la documentation ici pour comment ajouter un domaine personnalisé ou votre propre domaine. Domaine personnalisé, ce qui signifie que vous pouvez ajouter votre propre domaine, votre application, vous devrez suivre ces étapes si vous cliquez dessus. Nous vous expliquerons les étapes, et vous pourrez suivre les étapes et ajouter votre domaine ici. OK ? Voilà ce que c'est, et c'est ce que vous recevez ici. Donc, si vous essayez d'y accéder ici, vous pouvez voir que cela va fonctionner. Si je l'ouvre dans un autre onglet ici, vous pouvez voir que cela fonctionne ici, laissez-moi me connecter en utilisant le compte que j'ai créé ici. Quelque chose comme ça, vous pouvez le voir, je me suis connecté et je peux également voir mes todos ici C'était une nouvelle section du navigateur, si vous vous souvenez, je l'ai ouverte en mode devinette. Je me suis authentifié en utilisant mon compte et les todos que j'avais ajoutés en même temps que les rues Tout est enregistré dans le navigateur, ou désolé, pas dans le navigateur, mais dans l'application, en ou désolé, pas dans le navigateur, utilisant la base de données. Et où que je me connecte, je vais voir la même chose. Même si je me connecte depuis mon téléphone portable en utilisant cette URL, cela fonctionnera pour moi. Notre application est donc désormais disponible en production, c'est ce que je veux dire ici. Et des remerciements spéciaux à l'audace, non ? Bold a fait le travail si facilement. Vous pouvez donc voir ici que ce sont toutes les intégrations que vous pouvez également effectuer Je ne vois donc pas Netlify ici, mais nous n'avons pas vraiment connecté le compte Bolt à Netlify, mais nous l'avons déployé sur mais nous n'avons pas vraiment connecté compte Bolt à Netlify, Netlify, et nous et nous avons revendiqué le projet ici. C'est ce que nous avons fait. J'espère que cela vous a été utile et j'espère que vous avez pu comprendre le pouvoir de l'IA et comment des outils tels que le PLT peuvent, vous savez, vous faciliter la vie et comment vous pouvez tester vos idées ou faire beaucoup de choses avec toutes ces connaissances J'espère que cela vous a été utile. 9. Conclusion du cours: Nous sommes maintenant arrivés à la fin de notre parcours, où nous avons appris comment créer des applications destinées à la production à l' aide de l'intelligence artificielle et d' outils tels que Bolt Dot Nu. Tout au long de ce parcours, nous avons exploré comment ces outils vous permettent de créer de véritables applications prêtes pour la production sans écrire une seule ligne de code. Nous avons commencé par comprendre ce qu'est le bool point new et nous nous sommes familiarisés avec son interface et ses fonctionnalités intuitives À partir de là, vous avez créé votre toute première application générée par l'IA, constatant par vous-même quel point le développement axé sur les promotions peut être simple Nous sommes ensuite passés au niveau supérieur pour créer une application de liste de tâches laquelle nous avons commencé à nous plonger dans le développement itératif avec l'IA, apprenant à affiner et à développer vos projets en quelques minutes seulement Ensuite, vous avez vu comment intégrer une base de données dans votre application et vous avez ainsi débloqué le stockage et la récupération des données et la récupération des Vous avez également appris comment déployer votre application en production, ce qui a permis à votre application d'être accessible sur Internet. Et si vous avez des idées que vous souhaitez partager avec le monde entier, c'est le meilleur moyen de créer votre prototype d'application le déployer avec une base de données complète et de le partager avec le monde entier. N'oubliez pas que ce n' est que le début . Les développements axés sur l'IA évoluent chaque jour, et il y a encore beaucoup à explorer. Je vous encourage à continuer à expérimenter les concepts d' applications, nouvelles idées de produits, à affiner votre flux et à partager vos créations avec le monde entier Merci de m'avoir rejoint dans cette aventure sans code et propulsée par l'IA. J'espère que ce cours vous a inspiré et vous a donné l'assurance nécessaire pour continuer à créer, itérer et à lancer des idées d'applications innovantes plus rapide et cohérente que jamais Avec ce cours, vous trouverez également un projet de classe dans la section des projets. Vous pouvez y jeter un œil, et je vous encourage vivement à terminer le projet et à le partager avec toute la classe. ici là, happy Building et moi avons hâte de voir ce que vous allez créer ensuite.