Connectez Bolt.new à une base de données en 5 minutes ! 🚀

à tous j'espère que vous allez bien dans cette vidéo là on va travailler comment connecter Bolt avec une base de données alors ce qu'il faut savoir que lorsqu'on crée une application bol généralement les données et les datas ils sont enregistrés en cach ça veut dire uniquement au niveau navigateur et on peut pas sauvegarder les datas et les données c'est pour cela lorsqu'on termine la création donc de notre projet ou bien parfois même au milieu de projet c'est très important de connecter le projet avec une base données pour pouvoir sauvegarder les données pour pouvoir bien sûr

manipuler ces données-là imaginez une personne il entre dans votre application il crée un compte il s'enregistre et il fait voilà donc l'utilisation de quelques fonctionnalités c'est par la deuxième fois lorsqu'il va se connecter il trouve pas ces données c'est tout à fait normal il va plus revenir vers votre site internet donc l'utilisation de la base de données elle est obligatoire je vous fais déjà une vidéo de A à Z comment créer une application sur bold donc il fallait vraiment voir cette vidéolà pour pouvoir suivre avec nous aujourd'hui la partie qui est la création de base

données je vais vous montrer étape par étape comment vous créer une base de données avec votre application Bolt alors à tout de suite alors c'est parti donc là on va travailler sur la base de données pour la connecter à notre application Bolt première chose on va chercher firebase ça c'est tout simplement un projet en fait proposé par Google donc il nous donne une version gratuite qui nous permet de créer une base base de données alors pourquoi en fait le choix de fireb tout simplement parce que cette base de données là elle a une capacité en

fait à être traité avec l'intelligence artificielle donc c'est un petit peu un projet de Google que lui il a créé pour son propre en fait assistant virtuel et du coup dès que j'entre sur ce lien là il suffit tout simplement donc de créer un compte voilà gratuit hein avec tout simplement votre Gmail vous allez voir que là ici làhaut moi je suis connecté j'ai la possibilité donc d'accéder donc il suffit d'avoir tout simplement Mo un compte Gmail vous allez voir qu'aujourd'hui firebase c'est quelque part très lié avec tout ce qui est eii tout ce qui

est la génération en fait avec l'a et aujourd'hui lui c'est vrai que il est très posé pour que soit aussi hébergé en ligne et euh tout simplement en fait on a l'avantage en fait de pouvoir connecter énormément énormément d'autres applications ioutil externes avec cette base de données et aussi sans oublier que elle est fait vraiment pour faire l'intégration et le stockage de tout ce qui est data qui sont sur l'application mobile iOS ou Android et bien évidemment les applications Web alors c'est très simple donc une fois que je suis sur l'interface de de firebase là

tout ce qu'il reste à faire c'est de créer un compte ici et vous allez pouvoir tout simplement utiliser gratuitement la base données de Google très bien donc là ici je suis sur fairbase donc là je vais tout simplement cliquer ici pour créer un projet donc là je clique sur la création de mon projet projet il me propose un nom de projet allez on va l'appeler on va l'appeler home work on va l'appeler homework par exemple fr ok ça c'est le nom de de mon projet je clique sur continuer alors là il y a la possibilité

en fait de connecter avec Google Analytics enfin vu que on est avec la base de données de Google c'est possible aussi de le connecter avec le produit Google Analytics pourquoi pour pouvoir après avoir des rapports en fait he sur la base de données ça c'est vraiment nouveau c'està-dire de voir des statistiques he sur le nombre de personnes qui sont connectées leur localisation la un petit peu vous aurez des datas ou des rapports sur le site et aussi des rapports sur la base de données et ça ça permet en fait voilà donc de de déclencher en

fait des fonctionnalités de faire des tests sur la base donc ça si si vous voulez le faire bah il suffit tout simplement de Gaucher 100 sinon si vous voulez tout simplement avoir accès à une base sans avoir les statistiques vous allez tout simplement cette option pour le décocher donc là je clique sur Créer un projet vous allez voir ça prendra juste quelques instants pour pouvoir avoir tout simplement la main et et votre base données va être prête pour que je puisse tout simplement la connecter avant avec mon projet Bolt donc là je retourne en fait

à mon application donc ai Smart homework donc c'est une application de test qu'on a fait pour pouvoir tester en fait la puissance de Bolt et ici l'objectif c'est que c'est vrai que là en fait j'ai des différentes fonctionnalité voilà j'ai des informations et là mon objectif en fait de connecter cette application là avec donc ma base de données donc comme vous le voyez là la base de données est prête donc je clique sur continuer donc du coup là il va me faire entrer dans ma base de données et là j'ai besoin de récupérer les codes

d'accès à cette base vous allez voir que là il y a ici bien sûr il vous dit ok vous voulez connecter la base à quoi à une application mobile iOS ou bien Android ou bien là le web pour moi ça m'intéresse de la le connecter ici web donc je clique là là il me proposer voilà de d'écrire en fait le nom de l'application si je veux je peux le mettre avec le même nom du projet ou bien parce que un projet peut avoir une plusieurs bases données hein donc celui-là je vais l'appeler la même chose

he donc homework euh fr toujours voilà mais après vous pouvez donner des nom spécifique là je peux configurer ici l'hébergement avec fire base parce que là ici avec c'est cet outil là j'ai la possibilité aussi de faire l'hébergement bon pour l'instant j'aurai pas besoin d'héberger donc mon application je vais juste connecter la base données donc du coup là je clique sur Enregistrer l'application ce qui va se passer il va essayer de voir ici qu'il va me donner en fait un code d'accès à ma base tout simplement c'est un code là il se lance généralement avec

ce qu'on appelle la commande NPM sans trop entrer en fait en détail pour moi ce qui m'intéresse c'est cette partie-là ça c'est le code donc ici il y a quoi il y a le API ok il y a l'authentification de domain le projet ID le storage et ça en fait les informations de de de cette base données ça va me permettre à connecter cette application là avec ma base de données alors ce que je vais faire je vais tout simplement copier rien que ce code ok donc ce code là je peux le copier et ce

code va me permettre à créer une connexion avec ma base alors avant de de de de terminer bien évidemment il fallait cliquer ICI accéder à la console donc là ici j'ai ici à gauche une partie pour créer exécuter faire les statistiques vous allez voir ici aussi il y a des raccourcis hein ça c'est les parties d'authentification authentification en fait voilà si quelqu'un par exemple veut se connecter ave votre base de données à partir de votre site quelle est la méthode de connexion est-ce que vous voulez qu'il se connecte avec un login au mot de pass

ou il vousut tu veux qu'il se connecte avec Google vous rappelez que parfois lorsque vous êtes entré dans une application il vous donne même la possibilité de se connecter avec facebook en fait ça les types d'authentification aujourd'hui avec fairbase ils sont ici donc on peut tout simplement les paramètres là vous avez aussi le Cloud vous avez aussi l'hébergement vous avez aussi la partie storage donc là c'est un petit peu les raccourcis hein alors ce qui m'intéresse là pour l'instant c'est d'aller ici à la création je termine en fait la la la création et je clique

sur la partie en fait fairbase ou fa restory database ça veut dire là que je vais travailler le stockage de de ma base données donc dès que je clique ici bien évidemment il va me renvoyer dans l'espace là où les données et les informations vont être stockées tout ce qu'il reste à faire c'est de cliquer ICI sur créer une base de données donc là réellement on a créé le projet on a créer l'application et là on crée finalement la base de données pour parler de l'emplacement physique là où les datas vont être stockés parce que

une base de données en fait quelque part elle existe dans un serveur et donc du coup là c'est tout simplement je peux choisir l'emplacement de ma base si je veux les données qui soient enregistrés aux États-Unis ou bien en Europe ou voilà donc vous avez le choix en fait tout ça ce sont les serveurs de de de de Google hein vous pouvez les lesberger sur en las vegas voilà en Afrique en Asie où vous voulez donc pour moi je vais prendre Europe OK et là tout simplement je clique ici sur Suivant pour confirmer la création

physique de ma base de données alors il va me proposer est-ce que vous voulez que ça soit en mode production ça veut dire que vous voulez que votre base fonctionne euh réellement avec les les datas finou ou vous voulez tout simplement passer au mode de test alors le mode test en fait il va me donner 30 jours ça veut dire les dates ils vont pas rester plus que 30 jours euh et après bien sûr après tout simplement je peux passer au mode opérationnel production il faut que mon application elle est terminée à 100 %. alors

d'une manière générale lorsqu'on est développeur on travaille généralement en local ou bien en hébergement de test et on fait toujours un stockage de test ça veut dire que cette partie là on va pas le donner au client final parce que nous on va tester sur notre donnée on va ajouter voilà des datas de test pour voir l'application comment elle va tourner mais après lorsque la production finale final et le site est libergé c'est à ce moment-là qu'on lance réellement notre base de données avec les datas réel c'est pour cela que je vous recommande de tout

simplement de choisir mode test il vous dit voilà que les données he automatiquement ils sont vidé dans les 30 jours bon c'est pas grave parce que ça va être toujours des données de test mais une fois que j'héberge mon application elle est ok il fallait pas laisser cette option là parce que sinon les utilisateurs qui vont créer des comptes après 30 jours ils vont être obligés de créer un autre compte et ça c'est va bien donc du coup là tout ce qu'il reste à faire c'est de cliquer sur Créer donc là actuellement j'ai créé un

projet j'ai mis dedans une application et j'ai créé physiquement ma base de données donc tout est prêt là pour qu'il soit tout simplement connecté ici c'est ce qu'on va ici maintenant d'exécuter la connexion de ma base données avec le projet Bolt alors maintenant je vais ici demander donc à mon outil Bolt je vais lui dire je veux que tu stockes les tous les données sur ma base de données firebase et voici ma configuration et là rappelez-vous qu'on a déjà copié en fait des datas donc là du coup là ici je suis sur mon cloud donc

là où la base de données en fait avec la technologie cloud de de de Google rappelez-vous qu'on avait enregistrer de code si vous avez pas copié il suffit tout simplement donc de revenir ici sur Vue d'ensemble là vous cliquez sur Application là vous avez ici la configuration vous cliquez ici et vous allez trouver en fait ce code là donc là vous allez le copier attention il fallait tout copier je fais copier je reviens là et là je reviens à la ligne et je fais coller alors ce qui va se passer le système il va connaître

et faire la connexion avec toutes les datas de et T les données en fait à ma base affire base et il va créer bien évidemment les tables les colonnes et tout ce qu'il va avec regardez donc là lui d'une manière automatique il connaît très très bien comment faire la connexion et comment com créer réellement ma base de données et voilà donc là on a terminé la connexion donc et maintenant je vais travailler cette partie làà qui est la partie paramètres en fait pour tester que si ma base donc elle est bien connectée j'aurais besoin tout

simplement d'ajouter des datas ici pour voir un petit peu l'impact de l'ajout de ces datas alors c'est pour cela en fait je vais lui demander de me créer un espace voilà d'inscription donc là pour que je puisse tout simplement voilà ajouter un utilisateur et par la suite on va un peu plus développer en fait cet cet espritlà donc là mon objectif c'est que mon système je veux que voilà comme vous le voyez là il est en train de bosser avec euh donc la base de données il est en train donc de créer en fait de

systèm d'authentification pour que j'arrive tout simplement à connecter euh l'utilisateur avec la base données mais attention là en même temps que lui il travaille je vais vous montrer ici au niveau de ma base de données c'est très important que j'active l'authentification ça veut dire quoi ça veut dire que là lorsque je vais cliquer sur Créer vous allez voir qu'il y a un petit bouton qui s'appelle authentification authentification je dois donner la possibilité à l'utilisateur de pouvoir euh se connecter et là lorsque je clique sur commencer vous allez voir qu'il va me donner plusieurs méthodes je

vais prendre la méthode la plus simple c'est celle de se connecter avec un un un email et un mot de passe vous avez euh ici d'autres fournisseurs hein comme la connexion avec Google la connexion avec gthub celle avec Microsoft Twitter eu Facebook donc il y a énormément de types de connexion il y en a ceux aussi qu'on leur donne la connexion par téléphone qu'il reçoit un sms pour confirmer s'il est la bonne personne ou pas donc du coup là ça ce sont les modes de connexion donc du coup pour moi je vais aller ici à

le dans l'adresse et email et celle-là en fait je vais tout simplement l'activer vous allez voir que là ici j'ai la possibilité en fait d'ajouter cette option là qui est envoyer un email de vérification vous ça vous ça vous dit quelque chose je pense he l ce que vous vous connectez à une application il vous envoie un email vous devez entrer pour cliquer pour lui il soit sûr que vous êtes que c'est une adresse email valable et que vous êtes bien la bonne personne donc du coup là tout ce qu' reste à faire c'est de

cliquer sur Enregistrer et vous allez voir que voilà ce mode de de d'authentification il est actif très bien donc lorsque je reviens à mon application regardez là ici il m'a créé un espace donc de de connexion ça c'est très bien et surtout là voilà il me permet donc de créer un nouveau compte avec email et mot de passe je peux me loguer avec un compte existant et ça c'est vraiment très très intéressant mais attention là il m'a créé en fait ce s'inscrire et ça c'est très important même si j'ai pas demandé donc il a compris

qu'il faut faire le mode d'inscription pour créer un compte donc je vais cliquer sur s'inscrire là ici je vais par exemple là mettre voilà par exemple là juste pour tester là je mettrai une adresse email de test on va mettre voilà et là je mettrai un mot de passe de test aussi voilà donc là j'ai créé une adresse email et un mot de passe donc je clique sur s'inscrire donc là vous voyez là il me dit attention il fallait mettre voilà un minimum de de mot de passe he pour que ça fonctionne donc ça c'est

très intéressant donc du coup même au niveau de la sécurité il a iessay d'ajouter en fait un mode donc de de protection et bien sûr au niveau même de message je peux améliorer le design et tout donc ça c'est on a déjà vu he donc le le côté design je clique sur inscription et vous allez voir que là il vient de m'inscrire et me faire la connexion avec ce système là lorsque je clique sur Paramètres j'aurai bien évidemment ici la possibilité on va aussi l'améliorer de mettre à jour en fait mon compte alors là on

vient de s'inscrire alors c'est très intéressant en fait c'est de voir s'il y a un utilisateur qui a été fait ou pas donc là je clique ici sur la partie utilisateur et effectivement donc là c'est parfait donc l'utilisateur vient d'être ajouté je peux bien évidemment lui a é crré un ID je peux bien évidemment ici faire d'autres opérations comme réinitialiser le mot de passe désactiver le compte supprimer le compte donc j'ai le droit en tant que administrateur et si je vais aller à la base de données vous allez voir qu'il a ajouté ce qu'on appelle

une ligne en fait voilà du Data voilà ça c'est la ligne qui a été ajouté donc voilà je trouverai en fait voilà les différentes colonnes qui ont été remplies avec voilà le l'email le nom de la personne bien sûr le mot de passe il est crypté un donc password il est crypté ici et ça c'est très très intéressant ça c'est une preuve que mon site internet ici il se connecte avec la base sans que j'ai à taper aucune ligne de code maintenant on va essayer de travailler être un peu focus en fait sur cette partie-l

donc c'est une partie très très intéressante donc du coup comme vous le voyez là c'est très important de lui demander en fait ici je vais lui dire de me développer cette partie là pour que je mets à jour voilà le nom d'utilisateur et le mot de passe l'email et tout ces informations là donc là je peux changer le nom on va mettre virgule ici on va mettre adresse email et le mot de passe voilà et mettre à jour en fait les informations ça les informations existantes donc là du coup je veux tout simplement cet espace

qui soit fait traiter et vous allez voir que automatiquement lui il va faire faire Rael bien sûr à la base données il a besoin de la base données pour qu'il puisse tout simplement faire la création des nouvelles colonnes une nouvelle table pour que mon système voilà fonctionnera comme il faut et voilà donc là on va ici donc de se connecter on va mettre l'adresse email en fait de test qu'on a créé et voir un petit peu ce que ça donne donc là normalement il va me faire connecter on va voir si ça marche pas connexion

très bien donc là je suis connecté donc là ici j'ai le bout de déconnexion et là ici j'ai la partie Profi alors là lorsque je clique ici sur Profi vous allez voir que là je peux changer mes informations et là par exemple je peux mettre à jour en fait le mot de passe mais par contre là au niveau des informations ça sera bien si les informations soient déjà enregistré donc bon ça on peut un petit peu améliorer ça ça c'est bien de fait le fait de pouvoir ajouter l'image donc là lorsque je clique ça va

me donner en fait la possibilité d'uploader mon image et on va ici au niveau de mot de passe par exemple là on va mettre le mot de passe actuel et on va créer un notre mot de passe voilà voilà changer le mot de passe très très bien donc là on vient de changer le mot de passe allez on va tester en fait je vais me déconnecter ici de me connecter avec le le bon mot de passe ok c'est très bien donc là voilà on peut l'enregistrer donc là du coup je viens de mettre à jour

bien évidemment tout ce que je suis en train de faire ici alors là j'actualise ma base vous allez voir que ce que je suis en train de faire face donc à l'utilisation se fait ici d'une manière directe en temps réel sur ma base données et vous allez voir que voilà donc là ici c'est là donc mise information si je vais iciay de renommer par exemple docteur feras là ici je vaisevenir ici dans le profil on va essayer de mettre non on va mettre tout simplement comme ça je vais mettre de s ici on va essayer

d'enregistrer je reviens dans ma base j'actualise ici cette page oh voilà déjà ça a été fait sans que j'actualise et ça c'est très bien donc là du coup ces informations là sont des informations qui sont très très intéressantes euh je peux bien sûr comme on a dit donc on peut faire l'amélioration par exemple regardez là ici vu que j'ai pas rempli les autres formations formation donc ils sont vides par exemple par rapport à à à à ici ah d'accord donc là là en fait si je vais échanger ici l'information on va mettre à jour là

donc là il est en train de mettre à jour les données donc là je vais mettre euh je vais mettre au lieu de s on va mettre de Z comme ça je fais mett je je je mets à jour je reviens ici alors si j'actualise ici donc normalement il doit me donner aussi avec les deux Z et voilà donc même ici le nom de mon profil il est affiché ici ça c'est très très bien donc là tout ce qui est information à partir de ma base donc là si je mets par exemple là euh c'est

juste pour tester on met des choses juste des informations de test là donc j'enregistre mes données donc du coup là si je reviens dans ma base voilà donc les datas il vient d'être enregistré la même chose he au niveau de la base de données ici l'email aussi bien donc je peux le faire alors moi j'ai une idée en fait de de tester avec vous aussi c'est pourquoi ne pas tester à ajouter par exemple exemple une connexion lorsque je me connecte je veux recevoir un email de vérification de mon adresse email donc du coup ça c'est

une option qui est très important à le faire pour ne pas avoir des spam ou tout simplement d'utilisateurs fake donc du coup c'est très intéressant d'ajouter cette option donc là ici je vais ajouter ici une option je vais lui dire ajoute-moi une vérification par email donc il va comprendre en fait de quoi il s'agit et là je reviens je vais aller à l'authentification donc l'authentification c'est un raccourci ici he comme je peux le trouver là comme il est là aussi donc donc généralement lorsque j'utilise ici des fonctions automatiquement il va me donner des raccourcis là

donc là je vais aller à authentification je vais aller à méthode de connexion cette méthode actuelle là je vais éditer ça je vais ajouter en fait la connexion en fait par l'envoi d'email et donc du coup pourtant regarde il y a des étapes à faire he mais nous on aura pas besoin de faire ces étapes là on fait juste enregistrer et on laisse l'intelligence artificielle avec Bolt faire le nécessaire pour que lorsque je mets mon adresse email je dois recevoir un email de confirmation alors on va tester en fait là on va mettre je mettrai

ici une adresse email en fait pour la tester et voilà donc sincèrement c'est c'est quelque chose de très très bien fait là je reçois en fait l'ail de confirmation sur la boîte email que j'ai mis et c'est vraiment extraordinaire donc ça permet vraiment de montrer comment le système il peut faire des configurations que ça nous prend généralement beaucoup de temps à le faire si on n'est pas des connaisseurs même si quelqu'un qui est expert pour le faire il va faire appel à des packages quand même il va investir plusieurs minutes voir parfois à traiter et

à connecter plusieurs autres interfaces quand même là on peut le faire en quelques secondde et si je reviens ici en fait au niveau ici de modèle vous allez voir que là vous avez la possibilité de bien sûr donc travailler en fait les modèles lors de la validation de l'email réinitialisation de mot de passe modification de l'adresse email notification d'activation les paramètres SMTP pour tout ce qui est en fait les protocoles d'envoie d'email donc tout ça en fait on peut le traiter comme vous voyez là même au niveau de la validation par SMS le message que

vous recevez vous pouvez le paramétrer et là ça montre en fait la force de cette applicationl parce que elle permet de tout simplement de de de mettre à jour d'abord les systèmes entre eux et surtout la mettre à jour la base de données sans avoir à taper aucune ligne de code vous pouvez bien évidemment tester d'autres modèles hein d'autres fournisseurs par exemple là si je veux ajouter la connexion avec Google j'aurais tout simplement à activer ici à partir de ce bouton-là et là bien évidemment vous devez choisir votre adresse email hein parce que la l'envoi

de de connexion doit être fait d'abord à partir de votre adresse email à vous pour profiter du service de Google et après vous avez que tout simplement à cliquer sur Enregistrer la même chose hein si vous voulez travailler par exemple avec les modèles plutôt les les modes de de de connexion avec facebook vous avez à tout simplement à cliquer ICI l'activer ici vous aurez aussi donc la possibilité bien évidemment d'ajouter Twitter il a énormément en fait de type de connexion que vous pouvez le faire pour que votre application bien évidemment fonctionnera correctement voilà donc là

on a pu connecter notre base données avec notre application si vous êtes intéressé de comprendre comment exporter l'application sur un hébergeur externe ça veut dire l'héberger dans votre propre hébergeur d'application web n'hésitez pas de m'écrire ça en commentaire je ferai une vidéo spécialement pour vous merci d'avoir suivi ce tuto et on se dit à très bientôt merci d'avoir suivi cette vidéo donc si vous avez des questions n'hésitez pas de m'écrire dans les commentaires je fais mon maximum pour répondre à toutes vos questions et si vous aimez la vidéo et vous voulez voir les prochaines nouveautés

n'hésitez pas à vous inscrire à ma chaîne je vous dis merci beaucoup et à très vite