Créez un clone Twitter Web3 à l'aide de Solidity et de Polygon

1. INTRODUCTION DU COURS: Mais c'est l'une des plateformes de médias sociaux les plus populaires au monde. Cependant, les utilisateurs de cryptomonnaies se rendent compte qu' une version décentralisée de Twitter serait très bénéfique car elle éliminerait les aspects négatifs d' une plateforme centralisée. Dans ce cours, vous apprendrez à créer un clone Twitter décentralisé en utilisant solubilité et la blockchain polygonale, les utilisateurs pourront s'authentifier à l'aide portefeuille MetaMask, puis partager leurs pensées avec tout le monde sur cette plateforme. Chaque utilisateur aura un tag aléatoire généré lorsqu'il s' inscrira pour la première fois. Ils peuvent même modifier leur image d'affichage et leur bannière dans la section de votre profil. Plus tard, nous commencerons par écrire et tester ce contrat intelligent en utilisant la solidarité et le remix. Ensuite, nous déploierons le contrat, le réseau de test de Mumbai en utilisant Hearted. Ensuite, nous utiliserons React js pour construire notre interface et enfin utiliser le JS d'Ito pour interagir avec le contrat diploïde. Pour le téléchargement d' images, nous utiliserons un fournisseur de services IPFS de stockage Web à deux points. À la fin du cours, vous apprendrez tout ce qui est nécessaire pour devenir un développeur Web complet sans perdre de temps. Inscrivez-vous dès maintenant et c'est parti. 2. Créer un projet hardhat: Bonjour, bienvenue dans la toute première vidéo où nous allons configurer l'environnement de développement. Avant d'aller de l'avant, parlons de la feuille de route du cours. La première chose que nous allons faire est de mettre en place ce projet difficile. Ensuite, nous créerons un contrat intelligent qui suit et stocke les données des tweets. Après ça. Nous allons tester notre contrat intelligent. Nous n'écrirons peut-être pas de test unitaire, mais nous le testerons en utilisant remix. Ensuite, une fois que toutes les méthodes fonctionneront correctement, nous déploierons le contrat intelligent sur la destination du polygone. Ensuite, nous créerons un front-end React js et utiliserons un ptosis et MetaMask pour interagir avec le contrat diploïde. Lors de la dernière session, nous allons tester l' ensemble de l'application et nous assurer qu'elle ne contient aucun bogue. Je m'assure également que vous avez installé MetaMask et que vous avez des métriques de test dans votre compte. Vous pouvez simplement le rechercher sur Google si vous le souhaitez. Je ne vais pas recommencer. Vous pouvez regarder n'importe quel tutoriel. Il suffit de quelques clics sur les boutons et continuez avec ce cours. Encore une fois, vous pouvez voir l'ensemble de la pile technologique de notre application décentralisée. Cette blockchain sera la solidité du polygone, hardhat. Nous utiliserons mon damassé. Le fournisseur de nœuds sera Alchemy. Il a juste le devant. Ensuite, nous utiliserons HTML, CSS et JS. Commençons donc par créer ce projet. Commençons maintenant par créer un dossier. Je vais le nommer. Tweeter. Ici, nous allons créer un projet de casque. Au fait, j'espère que tu sais ce qui est difficile. Hard Hat est un environnement les développeurs utilisent pour tester, compiler, déployer et déboguer des applications décentralisées basées sur la blockchain Titanium qui aide les codeurs à gérer bon nombre de ces tâches que j'ai acquises, développer et rédiger un contrat intelligent et faciliter ce processus. Donc, dans ce dossier, sortez ce terminal. Et avant de créer ou d'installer hardhead, nous devons créer un projet vide et PM utilisant cette commande npm dedans. Pourquoi ? Et après ça, tout simplement avec style. Hardhead utilisant cette commande npm install, save dev. J'en avais eu. Alors, en savoir plus sur hardhat. Vous pouvez simplement aller à Hardhead, disons ici. Et vous pouvez également lire la documentation. Parce que quel que soit le code que nous utilisons, tout est écrit ici étape par étape, comme ceci, npm init y, et les paiements que Teilhard avait Dev comme ça. Maintenant, pour créer une logique, nous devons utiliser un casque de sécurité px. Ensuite, sélectionnez le premier qui a été fait est de créer un projet JavaScript. Appuyez sur et appuyez sur Entrée. Maintenant, il nous dit d'installer également cette dépendance. C'est une boîte à outils simplement gaspillée et appuyez sur Entrée. Ces ensembles de boîtes à outils sont packages moins couramment utilisés et la façon dont les connexions sont recommandées pour commencer à développer, tels que les éthers. Ma Cao Dai, j' avais eu des matchers chai, hardhat, ça va scanner, etc. Maintenant les dépendances sont installées, suffit d'ajouter notre projet dans VS Code. Je vais simplement écrire du code. Cela l'ouvrira dans VS Code. Et aussi dans le code VS, assurez-vous d'avoir des extensions telles que solidity, tailwind, hardhead, ce genre d'extensions que vous avez déjà installées. Mais c'est tout pour cette vidéo. Dans la vidéo suivante, nous allons récupérer les clés Alchemy et MetaMask de notre projet. Merci. 3. Touches d'alchimie et metamask: Bonjour, hardhead nous donne quelques dossiers et fichiers. Nous discuterons de tout cela étape par étape. Mais d'abord, passons à hardhead config dot chairs et assurez-vous que nous pointons notre réseau vers le réseau de test de polygone. Et pour que cela fonctionne, nous avons besoin d'une URL de nœud de polygone, de n'importe quelle adresse valide. Comme j'ai déjà des comptes, je ne créerais pas un nouveau compte sur Alchemy. Vous pouvez simplement vous rendre ici, puis vous connecter et créer un nouveau compte. Si vous n'en avez pas déjà un. Après vous être connecté à Alchemy. Après vous être connecté à Alchemy, créez simplement une nouvelle application. Je vais lui donner un nom. Troisièmement, la chaîne de tabulations sera un polygone. Et ce sera un polygone qui signifie que c'est ce serpent de test. Cliquez ensuite sur Créer une application. Ici, nous avons besoin de cette clé. Mais avant cela, assurez-vous d'avoir également installé MetaMask. Vous pouvez installer mon Tomas en vous rendant sur mon site Thomas.io et en installant l'extension pour votre navigateur. Assurez-vous de mettre la vidéo en pause et regarder la configuration d'un nouveau portefeuille. N'importe qui sur YouTube ou Google. Et aussi savoir deviner, obtenir un polygone de test. C'est automatique dans votre portefeuille. Vous pouvez l'obtenir via un polygone pour l'ensemble. D'une façon comme ça. Oui, il suffit de coller l'adresse et d'obtenir des jetons de test. Disons ça. Mon masque. Nous aurons besoin de cette clé privée. Et nous allons stocker ces clés, c'est-à-dire la clé d'alchimie, puis mon Dmowski dans notre projet. Et pour cela, nous utiliserons une dépendance appelée point ENV. Parce qu'il n'est pas recommandé de coller ces informations sensibles directement dans nos fichiers. C'est comme ici directement. Je ne veux pas qu'il soit collé. Il vous suffit de sortir votre terminal et de le faire. Et PM et style point ENV. Maintenant, assurez-vous qu'il est installé Oui. Dans le dossier racine. Il suffit de créer un fichier appelé point ENV et de créer des variables telles que polygone. Mumbai est comme ça. Et que E soit égal à comme ça. Mais pour le mode polygone, il suffit d'aller ici, cliquer sur la touche Afficher, cette touche, et de la coller ici. Pour l'adresse privée du portefeuille. Ouvrez simplement votre masque Meta. Cliquez ici. Ou dans ce point. Informations sur le compte. Exportez la clé privée. Il vous suffit de saisir votre clé privée. Il suffit de saisir votre mot de passe. Ensuite, il vous montrera une clé privée et s'assurera que vous n'exposez pas vos clés à quelqu'un d'autre. Copiez cette clé. Allez dans fichier point ENV et collez-le. C'est ça. Sauvegardez-le. Après ça. Accédez au fichier de configuration Hardware dot et importez ces clés. Avec cette commande activée, notre bright require dot ENV. Je vais péter un plomb. Ensuite, dans le module.exports, écrivez simplement les réseaux réseau. Alors je l'appellerai « Mom Bye ». Ensuite, dans l'URL, vous devez écrire le nom de la variable ENV du point de processus, qui est le polygone Mumbai. Et dans un const, qui est un tableau, il suffit d' écrire process dot ENV, wallet, vibrate, comme ceci. C'est donc ça. La configuration de votre casque de sécurité est terminée. Dans la vidéo suivante, nous allons écrire le contrat intelligent. Merci. 4. Créer un contrat Twitter: Bonjour, bon retour. Commençons maintenant à rédiger notre contrat intelligent. Supprimez tous les fichiers de casque, les scripts de contrat et le dossier de test. C'est le cas, je vais simplement le supprimer dans les scripts également. Je vais le supprimer du contrat. Copiez simplement ou non, vous n'êtes pas obligé de copier. Vous pouvez simplement renommer ces points soul. Et il suffit de déplacer tout le reste. Juste drapeau doit code de solidité. Commençons maintenant avec un nouveau contrat et nommez-le. D'abord. Nous aurons quelques variables d'état. Le premier sera propriétaire. Le deuxième sera contre. C'est, il présentera un identifiant, un jouet comme celui-ci. Ensuite, dans le constructeur. Initialisons qui est la largeur variable propriétaire , expéditeur du message. C'est celui qui déploie le contrat et le compteur avec 0. C'est la première idée. Nous allons commencer à partir de 0, comme ça. Maintenant que nous sommes en train de rédiger un contrat qui consistera à peaufiner. Donc, nous allons avoir une structure d' un nom nom de tweet, nous le faisons comme ceci. Ok, je suis le destructeur qui a frappé. Ok. Maintenant, il va se composer d'une adresse de retour, cette adresse et le nommer Twitter. Ensuite, il aura AD, puis il aura le poids x. Ensuite, la personne peut télécharger ou non l'image. Elle sera facultative. Ensuite, que cette personne veuille supprimer, c'est tweeter ou non. Enfin, nous aurons cet horodatage afin de pouvoir afficher la date de ce jouet. C'est la structure d'un tweet. Ensuite, nous aurons une structure d'un utilisateur. Il s'agira du nom étant ce profilage, c' est-à-dire que l'utilisateur écrira un profil bio Inde. Après-midi. Cet utilisateur peut avoir une image de profil. Après cela, l'utilisateur peut avoir une bannière de profil. Comme ça. Parce que si vous en avez vu un possible, très peu l'ont même vu. Twitter. La personne peut télécharger une biographie avec son nom d'utilisateur, image de profil et la bannière de profil également. Après cela, j'aurai un peu de mappage, que nous allons d'abord mapper maintenant l'identifiant à une structure de tweet qui est id to wait. Et je vais le nommer. Les poids. Et le deuxième mappage sera l'adresse. Et il indiquera un utilisateur. C'est-à-dire les utilisateurs. Adressez-vous simplement à un utilisateur. Nous avons donc juste son adresse. Nous pouvons trouver l'image du profil bio du genou de cet utilisateur en particulier. Disons. Également. Nous organiserons quelques événements. Le premier événement sera dû, il a été créé. Il aura une adresse. Même chose. Il aura une pièce d'identité. Il aura du texte de poids, une chaîne. Il aura l'image du poids. Ce booléen est retardé mort et cet horodatage. Donc ça va, c'est un événement qui sera, qui sera émis dans la fonction de tweet publicitaire, que nous créerons dans la prochaine vidéo. Le deuxième événement va-t-on supprimer, alors ? Il aura simplement cet identifiant de tweet. L'ID de Tweet et le booléen sont supprimés. Comme ça. C'est ça. C'est tout pour cette vidéo. Dans la vidéo suivante, nous allons travailler sur la fonctionnalité pour l'ajouter. Merci. 5. Fonctionnalité pour ajouter un tweet: Continuons à rédiger le contrat intelligent. Nous allons maintenant écrire la fonctionnalité pour ajouter un tweet de désabonnement. Il accepte le poids et l'image du poids. Il s'agira d'une fonction publique et payante. Pourquoi ? Eh bien, parce que nous demanderons à cette personne de nous envoyer nous 0,01 afin de nous assurer que nous sommes en mesure de télécharger l'historique, veuillez soumettre 0.01 magic. Ici, nous devons écrire de l'éther, mais nous allons envoyer une valeur métrique. Si cela est correct, c'est-à-dire que cette exigence est remplie, nous aurons un pointeur vers eux. C'est de la cartographie. Le droit est que vous allez faire les poids à 0. C'est ici l'idée que 0 ID, nous allons commencer à y ajouter les nouvelles données. Le texte sombre est égal au texte ici, puis Nouveau. Et ça devrait être Tweet. Tweetez. Super. L'image est égale à cela. Alors fais-le. Dot est incroyablement similaire à message. Expéditeur. Id est égal à counter. Ensuite, le nouveau tweet est supprimé, est égal à faux, évidemment. Enfin, point timestamp est égal à block dot timestamp. Après cela, nous émettrons simplement notre tweet. Événement créé. enverrai ces valeurs comme ça. Twitter est l'expéditeur du message, puis le compteur AD, puis le texte du tweet. La façon dont vous gérez ce qui est supprimé est faux, et l'horodatage. Horodatage. Comme ça. Après-midi, je vais juste incrémenter le compteur car le prochain identifiant de tweet devrait être un. Enfin, je paierai le propriétaire. C'est-à-dire que je vais simplement être transféré. Maintenant, la valeur du nœud, comme ceci. Avec le propriétaire, je vais transférer cette valeur. J'espère que vous avez compris cette ligne de code. C'était très basique. Tout d'abord, nous aurons besoin de 0,01 éther démotique. Ensuite, je viens de pointer ici notre variable d'état, qui est les tweets. Ce type de données est struct. C'est pourquoi je n'ai pas entendu tweet et j'ai simplement ajouté toutes les données qu'il contient. Et nous avons fait en sorte que vous n' incrémentiez pas le compteur et transportiez simplement la valeur qui est de 0,01 Ito. C'est ça. C'est tout pour cette vidéo. Merci. 6. Fonctionnalité pour obtenir tous les Tweets: Bonjour, bon retour. Passons maintenant à la fonctionnalité permettant de récupérer tous les tweets. C'est-à-dire que les tweets similaires seront affichés sur le fil de l'utilisateur. Il suffit d'écrire important, qui sont les poids et Chen, sur lequel il sera une fonction publique. Il affichera simplement les retours dans une structure comme celle-ci. Maintenant. La première chose que nous allons faire est de créer une variable vide temporaire. C'est-à-dire que je vais juste comme temporaire est égal à nu. Tweetez. Il sera vide et le terrain sera compté. C'est notre nombre latéral de tweets. Ensuite, je vais avoir le poids jusqu'à ce qu'il soit égal à 0. Cela comptera simplement le nombre total de tweets que vous pensez à ce que je fais. Je fais juste une boucle for pour m'assurer que nous n' affichons que les tweets qui ne sont pas supprimés. You int I est égal à 0, I inférieur au compteur I plus, plus. Ensuite, j'aurai une déclaration if comme celle-ci. Si le point I est supprimé est égal à faux, alors ajoutez-le seulement. Dans ce temporaire. Eddie, dans cette position, compter jusqu'à huit est égal aux poids. J'aime bien ça. Et augmentez simplement le nombre de tweets. Après ça. Je vais avoir des plaques Alda qui ne seront pas supprimées. Après cela, je vais simplement avoir une variable vide, qui sera le résultat est égal à mu 28. Maintenant, cette terre sera propre, c'est-à-dire comptez jusqu'à sa fin. Si nous envoyons directement celui-ci, alors la longueur de l'édition E sera beaucoup plus grande. C'est pourquoi je viens de créer, et je viens de créer une autre variable d'un tableau vide. Et encore une fois, vous faites la boucle for. Et cette fois, je ne compterai pas que les tweets. Et ici, il suffit de copier tout depuis la variable temporaire vers cette variable de résultat. Et finalement, je vais renvoyer ce résultat comme ceci. N ici. Pourquoi j'ai fait cette erreur ? nouveaux tweets devraient être petits. C'est ça. J'espère que tu as compris. abord, nous aurons un tableau vide de longueur de compteur, qui peut être 50. Ensuite, nous aurions des tweets en boucle et Alda qui n' ont pas été supprimés, ce qui suppose qu'il est en retard. Ensuite, comme la longueur est de 50 et à l'intérieur, seuls les articles seront 30. J'ai donc créé une autre zone avec juste un petit terrain afin que la longueur du tableau soit égale aux éléments qu'il contient. C'est ça. Il s'agit de la fonction. Récupérez tous les tweets. La prochaine chose que j'écrirai. La méthode pour recevoir des tweets. Mais, mais l'utilisateur le plus cool. Parce que si l'utilisateur se rend sur sa page de profil, seuls les tweets qu'il a téléchargés doivent être vus. Là-bas. Nous allons simplement écrire la fonction, recevoir mes tweets. Ce sera une chose externe, identique, externe ou publique, vous le souhaitez. Quelques retours. Il renverra une structure de tableaux de tweets. Encore une fois, je vais faire la même chose ici. Ils ont dit que je le faisais. mammaire. Stem ready équivaut à un nouveau mode de terre. Ensuite, je vais compter, mes poids sont variables. Dans la boucle for, je ferai la même chose que toi. Int I est égal à 0. Je compte moins que je plus plus. Ensuite, je vais le faire si l'instruction, si les poids que je partitionne sont égaux à l'expéditeur du message et je m'assurerai qu'il n'est pas supprimé. Si le point est égal, égal à faux, alors seulement nous ajouterons cela dans cette variable temporaire. Dans cette partition, comptez mes tweets que je positionne. Ensuite, je vais incrémenter la valeur de mes tweets. Après la boucle for, chaque connexion. Cliquez ensuite sur créer un nouveau tableau vide. Nommez-le résultat. Fais-le. Mon nouvel int, je suis égal à 0. Je compte moins que mes tweets. Je plus, plus. Oui, nous allons simplement échanger tout ce qui va de la variable temporaire à la variable résultat, c'est tout, rien d'autre. Et enfin, je vais renvoyer le résultat là où tout le monde, c'est tout. Il s'agissait de la fonctionnalité permettant d'obtenir des tweets de tous les utilisateurs et d'obtenir des tweets d'un utilisateur particulier. Merci. 7. Fonctionnalité pour supprimer un tweet: Continuons à travailler avec les fonctions. La prochaine fonction que nous allons écrire est d'obtenir un tweet particulier. Je vais donc simplement dire ma troisième couleur. Je vais juste aimer le désabonnement amusant. Mettez-y. Nous devons envoyer un identifiant de tweet. Eh bien, la vue sombre revient. Il retournera la chaîne mammaire, mammaire, puis adresse. La première chose est de s'assurer que identifiant est inférieur à ce compteur. C'est le nombre maximum de tweets. Non, jusqu'à huit. Ensuite, nous allons juste avoir le comment sont très bien pointés vers ce tweet, c' est-à-dire l'identifiant du tweet ici comme ceci, puis assurez-vous que le poids n'est pas supprimé. Le jour, s'il devait être faux, est supprimé. Et après ça, si tout va bien, je vais simplement dire de renvoyer le point, le texte, le point, l'image, le point comme ça. Je vais envoyer ces trois valeurs. C'est juste une méthode si, cas échéant, pour quelque raison que ce soit, vous êtes tenu d'obtenir ce tweet. Après cela, créons un technicien médical pour le supprimer, faites-le . Quand désabonnement. Poids retardé. Nous avons ceux qui envoient l'ID et Boolean est supprimé. Externe. Nous demanderons simplement que la personne soit le propriétaire de cet identifiant de tweet. Si ce n'est pas le cas, vous pouvez honnêtement supprimer votre propre tweet comme celui-ci. Après cela, il suffit de son identifiant. Est supprimé, est égal à, est supprimé comme ceci. Et je vais admettre qu'il a supprimé l'événement ici. Comme nous l'avons émis, il a créé de la même manière. En direct, nous enverrons, enverrons simplement cet identifiant de tweet, identifiant et sera supprimé. Comme ça. Cela dit, c'était poinçonner pour le supprimer, le faire, c'était très basique. Nous changeons simplement la valeur de E est évaluée à true de sorte que chaque fois que l' utilisateur veut l'obtenir, s'il ne peut pas récupérer ceux qui, qui sont notés comme nous ne pouvons pas supprimer directement la valeur d'une blockchain. Nous allons simplement modifier cette valeur particulière. C'est ça. Sachez que si nous le voulons, nous pouvons modifier cette blockchain. Nous pouvons avoir un nouveau tableau et ensuite placer cette zone à l'intérieur de cette zone comme ça. Si tu veux, tu peux le faire. Mais je vais simplement faire en sorte que les données soient stockées pour toujours dans la file d'attente. 8. Fonctionnalité pour mettre à jour l'utilisateur: Bonjour, bon retour. Voici la dernière vidéo du module des contrats. Nous allons simplement noter mon tour mettre à jour les détails de l'utilisateur. Je vais juste le nommer fonction. L'utilisateur fait sauf se souvenir du nouveau nom. Chaîne mammaire, nouvelle bio, partage de mémoire, nouvelle image de fichier. Et enfin, mémoire de chaîne, nouveau fichier, bannière. Laisse ça. Il s'agira d'une fonction publique. Maintenant, il suffit d'obtenir cet utilisateur ou vous pouvez dire insérer cet utilisateur dans mappage de l'expéditeur du message de ses utilisateurs comme ceci. Ensuite, je vais simplement écrire les données utilisateur. Le nom du point est égal à nouveau nom. Données utilisateur. Bio est incroyablement similaire à new bio. Image de fichier point de données utilisateur. Nouvelle image de profil Girl Two. Données utilisateur. Cette bannière de profil est égale à un nouveau piano de fichier comme celui-ci. Cela dit, c'est ainsi que vous mettez à jour les détails d'un utilisateur. Cette dernière fonctionnalité sera prise en compte pour obtenir les détails de l'utilisateur. Elle est destinée à un utilisateur en particulier. Amusez-vous simplement Chen, obtenez l'utilisateur. Nous enverrons une robe à l'utilisateur. Ce sera une fonction de visualisation publique qui renverra un utilisateur comme celui-ci. Et je vais simplement renvoyer l'adresse de l' utilisateur en tant que cette adresse d'exception de mappage utilisateur et il enverra à l'utilisateur une structure qui, disons, est cette fonction pour obtenir un utilisateur. Il s'agit de tous les détails de l'utilisateur. Et c'est la fonction à mettre à jour. L'utilisateur conserve. C'est ça. C'est tout pour ce module. Dans le module suivant, nous terminerons le contrat intelligent. Merci. 9. Tests à l'aide de Remix IDE: Notre contrat Twitter est donc prêt. Il est temps de tester toutes les méthodes et de s'assurer qu'il n'y a pas de bogue. J'utiliserai un identifiant en ligne de remix à cette fin. Si vous le souhaitez, vous pouvez également écrire un test unitaire en utilisant moka et la bibliothèque enfant. C'est à toi de décider. Mais juste pour gagner du temps et le faire plus rapidement, je vais utiliser le remix. Alors allez simplement dans remix point m point o, r g. Ensuite, dans ce dossier Contracts, créez simplement un nouveau fichier et nommez-le twitter point soul. Après cela, je vais simplement copier cette licence. Et une solidité pragmatique. Après cela, je vais simplement copier le contrat et le coller ici. Tu vois, c'est fait. OK. Donc, lorsque nous allons le tester dans l'IDE de remix, nous ne pouvons pas tester jusqu'à 0,01 éternel car lorsque nous faisons la transaction, nous devons envoyer des nombres sans décimal. Je vais donc écrire ici un mangeur juste à des fins de test, mais dans le code principal, ce sera 0,01 sur 30. Hier. Tu t'en souviens ? Ok, donc ici je vais compiler pour Inter Dot Soul. Nous avons cette coche verte ici. Cela signifie que tout va bien. Il n'y a pas d'adulte. Maintenant. OK. Accédez à cette section Déployer et exécuter des transactions. Cliquez simplement sur le bouton Appliquer. OK. Nous avons cette réponse. C'est-à-dire que notre adresse a été déployée. Voir les méthodes et les fonctions Alda sont là. Si nous cliquons sur propriétaire, nous pouvons voir que nous avons l'adresse du propriétaire, c'est-à-dire cette adresse C4. C4. Vous pouvez voir que c'est la bonne adresse. Maintenant, je vais simplement changer de compte. Et maintenant, nous allons essayer d'ajouter un nouveau tweet. Je vais juste donner la valeur un puisqu' il en demande un. Et maintenant, nous devons envoyer un texto sur Twitter. Il va d'abord le faire et le faire image quelque chose comme www point, URL factice, quelque chose comme ça. Ok ? Et je vais simplement cliquer sur « ajouter ». Je pense que c'est encore passé à 0. Si je clique à nouveau sur, ajoutez-y des éléments. Ok, ici ça ne devrait pas être moyen, ça devrait être mangeur. Maintenant, si j'ai essayé de cliquer, voyez, nous avons ce signal vert ici. C'est ce que nous avons été ajoutés. Et si vous vérifiez ce premier compte, c'est maintenant 100. Parce que cette fonction de paiement transfère ce montant au propriétaire de ce compte. C'est pour ça que ça a été augmenté. Maintenant, si je clique sur «  Obtenir tous les tweets ». Voyez que nous avons cette adresse, ce premier tweet texte et une URL factice ou des listes que nous avons. Et si j'écris, si je mets à jour un utilisateur, c'est cet utilisateur, si j'écris Arapaho, alors ce que cela demande. Comme vous pouvez le voir ici, nous avons bio web dev. Ensuite, nous avons l'image de profil, encore une fois, www image factice point. Ensuite, nous avons le profil. À présent, je vais simplement écrire www.banner.com et mis à jour. Et maintenant, si j'ai raison, obtenez les utilisateurs, c'est l'adresse de l'utilisateur. Si je dois envoyer une adresse utilisateur, nous allons simplement cliquer avec le bouton droit sur Copy, GetUser et GetUser voir mappé au développeur, à l'image factice et à banner.com afin que l'utilisateur ait été mis à jour. Comme ça seulement plus loin, je recevrais mon tweet sur le besoin de la dose à son idée, qui sont les miennes. Maintenant, si je change le compte en compte numéro trois, et maintenant si j'écris, récupère mon tweet, alors je vois qu'il est vide parce que cet utilisateur n'y en a pas ajouté. Mais si nous recevons tous les tweets, alors évidemment tous les tweets sont là, qui sont publiés dans cette application comme ceci. Maintenant, si cette personne veut supprimer ce tweet, s'il clique, voir annulé, vous ne pouvez supprimer que le vôtre. Mais si je passe au second et maintenant si j' essaie de le supprimer, il sera supprimé parce qu'il en est le propriétaire. Et maintenant, si je fais un clic droit, Obtenir tous les tweets. Attends, voyons ce qui se passe. Je pense qu'il y en a d'autres qui s'y ajoutent. S'il s'agit d'un identifiant, nous avons cette adresse. Fais-le d'abord. OK. Lorsque nous supprimons le tweet, nous devons envoyer plus de valeurs ici, id ainsi que la valeur booléenne. C'était le rédacteur en chef. Si vous le souhaitez, vous pouvez le vérifier et le détourner également. Je vais juste le lire et le supprimer. Si j'écris des cétones qui voient qu'elles ont été supprimées. C'est ce qu'il faut. Voyons ce qui se passe. La transaction a été annulée en disant qu'elle supprimée parce que ce tweet avait déjà été supprimé. J'espère donc que vous avez compris cet identifiant de remix car c'était moyen meilleur et plus rapide de tester ce contrat intelligent. Si vous le souhaitez, vous pouvez saisir plusieurs traits et un contrat STR pour n'importe quelle autre case que j'ai peut-être manquée. Mais pour l'instant, tout fonctionne parfaitement. Dans la vidéo suivante, nous y déploierons ce contrat. Réseau de test Polygon Mumbai. Merci. 10. Déployer sur le réseau de test Mumbai: Bonjour, bon retour. Dans cette vidéo, nous allons déployer notre contrat intelligent sur le réseau de test polygonal. Pour cela, passons au script de déploiement. abord dans le dossier scripts, créez un nouveau fichier et nommez-le deployed point js. Maintenant, il écrit du code. La première chose à faire est le laboratoire de casque. Ensuite, nous aurons une fonction sinc appelée main. Ensuite, nous obtiendrons, obtiendrons un contrat, l'usine obtiendra un contrat. Par exemple. C'est le nom de notre contrat. C'est ici, disons, sur Twitter. Ensuite, nous devons écrire cette commande. Il est petit d puis déployez. Ça se déploie point, point, comme ça. Ensuite, il faut peser. Il est déployé tel quel. Ça prend un peu de temps. Et c'est tout à fait fini. Nous allons consigner l'adresse du contrat point log, contrat déployé pour puis l'adresse comme celle-ci. Et maintenant, nous devons appeler cette fonction principale et simplement attraper toute erreur qui est levée. Console.log indique que le code de sortie est égal à un comme celui-ci. Il s'agit donc du seul code requis pour le déploiement. Maintenant, nous devons placer notre terminal dans le répertoire principal qui se trouve dans ce dossier. Et écrivez cette commande et px. J'avais exécuté des scripts. Ensuite, c'est le point. Et nous devons mentionner que le réseau, qui est déplacé et appuyez sur Entrée. Cela peut prendre quelques minutes. Nous avons maintenant créé le dossier des effets directs et voyons leur contrat déployé à cette adresse. Assurez-vous d'avoir copié cette adresse car elle sera nécessaire dans la prochaine vidéo. Donc, juste pour nous assurer que tout va bien, nous pouvons simplement vérifier que les polygones de Mumbai peuvent aller sur ce site Web, copier l'adresse du contrat, l'état de base ici, et simplement rechercher. Vous voyez, il y a cinq secondes, ce bloc a été créé et cette création de contrat avec 0 pourrait prendre de la valeur. Cela symbolise le déploiement réussi de notre contrat. C'est tout pour cette vidéo. Au cours de la prochaine session, nous travaillerons sur le front-end, qui est React JS. Merci. 11. Mise en place du projet réagir: Notre contrat est déployé avec succès. Il est maintenant temps de travailler sur le front-end React JS. Pour ça. Créons notre projet de configuration ADF JS pour cela, écrivez simplement np x sur les huit clients de l'application React comme ceci et appuyez sur Entrée. J'espère que React js est installé sur votre système. Si c'est le cas, je me sens en avoir et j' installe simplement l' âgisme dans le monde entier. Le projet React est donc maintenant configuré. Maintenant, pour interagir avec notre contrat intelligent déployé, nous aurons besoin de deux éléments adresse du contrat et l'ABA. Pour obtenir l'ABA, il suffit de copier ce fichier twitter.json à partir des contrats d' artefacts. Ici. Ce fichier suffit de le copier et d'aller dans le dossier client. Ensuite, créez un nouveau dossier et nommez-le ABI, et collez simplement ce fichier JSON Twitter ici qui se trouve dans ce dossier source de ligne. Ouais. OK. Ensuite, nous devons créer un nouveau fichier appelé config dot js dans le dossier source, comme ab.js sans pistolet. Et ici, nous allons coller l'adresse de notre contrat. L'adresse du contrat est identique à celle-ci. Il vous suffit de copier votre adresse. Colle-le ici, comme ça. Maintenant, pour aller de l'avant, nous devons installer quelques dépendances. Changez simplement ce répertoire en dossier client. Ici, écrivez npm avec style. Ethers, puis réagissez. Et le dôme extérieur. Ensuite, ce kit d'interface utilisateur Web, core. Ajoutez ensuite huit représentants, trois kits d'interface utilisateur. Je peux alors saisir le modèle d'arbre et enfin, le tableau de bord de dessin animé. Donc si tu vois ici. Nous avons 123456 dépendances et appuyez sur Entrer ces huit test.js. En d'autres termes, ethos est nécessaire pour interagir avec le contrat intelligent déployé. routeur dom React permet la navigation entre les différents composants de l'application React. Web trois, UIKit nous fournit des composants d'interface utilisateur magnifiques et légers loin de deux développeurs. Cette bibliothèque va accélérer notre développement DAB. Alors. Ensuite, nous avons trois modèles qui nous permettent de connecter notre application à trop de fournisseurs valides tels que portefeuille Coinbase, MetaMask, wallet connect. Enfin, cet avatar de dessin animé génère un avatar aléatoire pour nous. Nous l'utiliserons comme image de profil factice ultérieurement. Maintenant, si vous allez sur package.json ici, et nous allons simplement vérifier que le modèle Web trois existe maintenant. Caricature d'Ethers, Avatar. Tout est mort. Maintenant. Je vais simplement écrire npm. Commencez à démarrer notre cellulaire React JS. Ok ? L'application React fonctionne donc correctement. Il est maintenant temps de travailler sur le fichier index.js. Allons-y ici. Nous importons React, puis l'application CSS d'index de pâte. Ensuite, je vais importer le navigateur et et réagir. Et le dôme extérieur. Et je vais importer de la défécation. Fournisseur de défécation. Web trois, vous écrivez du code, notification, donnez-lui juste une impulsion. Cette appli. Il se trouve dans le fichier racine. Cela permettra à tous les fichiers d' afficher des notifications. Nous devons donc simplement supprimer ce mode strict en trois actes ici pour utiliser le fournisseur de défécation, une application qui intègre une application et un fournisseur de défécation. Ensuite, utilisez le routeur du navigateur et enveloppez l'application dans le routeur du navigateur. Comme ça. C'est tout ce que nous allons dire. Ok, il est en cours d'exécution. Maintenant. Je vais créer de nouveaux fichiers et répertoires. Dans le dossier source. Je vais créer des dossiers et les nommer. Allez Nance, composants, images et pages. Ces trois dossiers et pages d'informations. Je vais créer plusieurs fichiers. Accueil point js, forme point CSS. Encore une fois. Un fichier point js, fichier point CSS, puis settings.js, les paramètres point CSS. Ok ? Ces nombreux fichiers ont créé $9 home dot js. Je vais écrire le code. Tout d'abord, je vais importer React. Ensuite, je vais importer le lien depuis le dôme du routeur React. Ensuite, je vais importer ici dans ce point d'origine js, je vais importer fichier CSS point point CSS de cette façon, d'accord ? Ensuite, je vais simplement avoir un composant home et exporter par défaut la toute fin. Ensuite, à l'intérieur du composant home, je reviendrai, je vais retourner des balises de lien comme celle-ci. Et je vais le copier. Je vais chercher payé deux fois. La première barre oblique. Et ce jour-là, ce sera à la maison. Ensuite, il y aura le profil. Ce sera le profil. Le prochain sera des réglages et lourds comme des larmes, des réglages comme celui-ci. Maintenant, il suffit de copier tout le code ici. Allez au profil point js. Colle-le ici. Bon. Maintenant, déposez le fichier CSS point et exportez le profil à la toute fin. De même, allez dans settings.js, collez-le ici. Ça l'est. Le même code ici. Je vais importer les paramètres. Ensuite, le nom du composant sera settings. J'exporterai les paramètres à la fin. C'est donc tout pour cette vidéo. Nous avons fait beaucoup de choses ici. Notre projet React JS est maintenant lancé. Ensuite, dans les vidéos suivantes, nous travaillerons simplement sur l'interface utilisateur de base de notre application. Merci. 12. Travailler sur le composant App: Bonjour, Dans cette vidéo, nous allons travailler sur ce composant de l'application. Allez donc dans le fichier app.js. Ici. Je vais supprimer ce logo et commencer à importer des dépendances. Le premier va réagir à partir de React. Le second sera sorti ainsi que les retraits. Ensuite, je vais importer le composant home à partir de dark pages home. Ensuite, je vais importer le composant de fichier. Ensuite, je vais importer le composant des paramètres. Ensuite, j'importerai ce fichier CSS point d'application. Maintenant, dans cette fonction, je vais tout supprimer et commencer. Nous vidons les crochets. Alors Dave, nom de classe, je vais le nommer page. Je ferai le CSS plus tard. Ensuite, nous aurons le nom de la classe en direct, barre latérale, disons la barre. Ensuite, j'aurai Dave, la fenêtre principale de ClassName. Ensuite, j'aurai quelques itinéraires. Les routes que j' aurai distinguées, qui seront slash sur Lee, et l'élément qui le fera afficher le composant home. De même, je vais affiner. Il affichera le composant Phi, puis j'aurai les paramètres. Et il affichera le composant des paramètres. Après cette fenêtre principale aura le nom de famille, n'est-ce pas ? Un bar. Et si j'avais lu la barre d'écriture comme ça. Et à la fin, il exporte l'application. Maintenant, j'ai ces jours-ci, mais il faudra certainement quelques styles. Accédez simplement au fichier CSS point app. Ouais. Je vais tout supprimer. Et commencez par la page. Je vais écrire ce CSS rapidement. J'espère que vous avez des connaissances en CSS car ce tutoriel porte sur le Web trois et non sur le HTML et le CSS. Semaine du pixel collant. Et lisez le bleu moins 800 Excel en 0,45. Puis la bordure, à droite. Je serai un pixel, solide, RVB. Soixante-trois. Soixante-trois, soixante-trois. Et les a colorés en blanc et en rouge VH. Ensuite, j'aurai la classe de barre lumineuse. Je vais simplement le copier et le coller ici. Volition collant, top 0, poids. Oui, ce sera simplement en bordure, à gauche, pas à droite. Jours solides d'un pixel. Et juste à côté. Ensuite, nous aurons fenêtre principale, le pixel prévu. Ensuite, ancrez, rep, obtenez n'importe quel lien. Tout curseur de lien sera un pointeur. Ensuite, la décoration du texte doit être nulle. Et ce sera important. La hauteur sera alors de 0 pixel. C'est important. Ensuite, j'aurai la page de connexion, que je ferai plus tard. Mais nous devrions écrire le CSS ici. Parce que comme je le dis toujours, l'accent n'est pas mis sur la partie CSS. L'accent est mis sur la création d'une application décentralisée complète. Flex d'affichage, centre de contenu justifié. Direction de flexion, colonne, cap, pixel. Et cela se fait pour l'index point CSS. Mais le seul changement que nous devons apporter, désolé, c'était les enlèvements, c'est le prochain changement. Nous devons le faire en CSS index point ici. Après la marge ci-dessus, je vais simplement ajouter la couleur de fond au hachage, un pour un à six. C'est ça. Enregistrez maintenant le fichier. Et allons voir le résultat. C. Nous avons la barre latérale, puis les paramètres du profil d'accueil ici. Et nous l'avons fait et je divise ici, donc nous avons différentes sections dans notre application. Dans les vidéos suivantes, nous travaillerons séparément sur une section particulière. Merci. 13. Créer un composant Sidebar: Bonjour, bon retour. Dans cette vidéo, nous allons travailler sur le composant de la barre latérale. Il suffit de se rendre dans le dossier 02 composants. Ici, créez deux nouveaux fichiers. Prénom nous barre latérale point js et un autre point de barre latérale CSS. Dans la barre latérale JS, je vais tout fermer. Et seulement perspicacité mais point nous. Oui, tout d'abord, importez, réagissez, réagissez. Ensuite, nous devons importer le fichier CSS, qui est la barre latérale point CSS. Ok ? Ensuite, la barre latérale tourne simplement anti-taxe pour l'instant. Et exportez le Volet par défaut Ok, dans goto app.js, ici, dans la barre latérale de la barre latérale des composants. Ici, dans ce, Dave a fait cette div de la barre latérale, simplement des moyens de composant de la barre latérale comme celui-ci. Maintenant, nous allons travailler sur les composants de cette barre latérale. Quelques premières importations, qui seront nécessaires. Il y aura d'abord quelques icônes. J'aime beaucoup Twitter, cube, user et COG, cog de icône web kids ici. Et la deuxième chose qui sera requise est la banque de liens d'un routeur Create React. Non, oui, on ne l'a pas fait. instruction Return retournera un div et lui donnera un nom de classe de données, contenu du site. Ensuite, j'aurai un autre div et je le nommerai menu. Maintenant, je vais avoir un autre div et le nommer en détail. Dans ces détails, je vais simplement avoir ce logo Twitter ou l'icône Twitter, qui aura une taille de police de 50 pixels. Ensuite, après les détails, je vais simplement avoir une balise de lien, qui simulera également. La page d'accueil et le nom de la classe seront un lien. Ensuite, en dessous de cela, j'aurai un autre nom dans les éléments de menu. À l'intérieur des éléments de menu. Maintenant. Et cette div n'est pas terminée ici. Je vais avoir cette balise de lien. Et à l'intérieur de la balise de lien sera terminé. En dehors des éléments de menu. Et à l'intérieur, il y aura un logo ou une icône cube avec une taille de police de 50 pixels. Et ici je me rattache à la maison. Comme ça, cela dit, section Détails. Ensuite, le menu. Maintenant, de la même manière, je vais copier ce lien, le coller deux fois. Ce second sera le nom de la classe de profil dans les éléments de menu. Et ici seulement je vais écrire phi. Ce troisième sera settings, LastName, link. Et ici je vais écrire des paramètres comme celui-ci. Ok, c'est le composant de la barre latérale qui est terminé. Maintenant, nous devons travailler sur le CSS des points de la barre latérale car évidemment il y aura un certain style sinon cela aura l'air très mauvais. Le premier style sera le contenu cidal. Rembourrage. Le haut sera de 20 pixels. Bourgeonnant, c'est ça ? 90 pixels. Justifiez le contenu Espace entre l'affichage, la flexion, la direction de flexion, la colonne, la hauteur. Cinq, nous gravons les éléments d'alignement. Et puis la classe de détails aura display, flex. Lecture que pixel, écart. Pixel. Justifiez le contenu, commencez. Aligner les éléments, centrer. Texte, décoration, aucun, et ce sera important. Ensuite, les éléments de menu, verre, affichage, flex, justifient les contenus qui s'écartent. Mais en pixel, marge, en haut, entre la pointe Excel. Puis Elaine. Les objets seront au centre. Puis police. Le poids sera de 600. Taille de police. Entre cellule typique, remplissage, dix pixels. rayon de la bordure sera de mille pixels. La couleur sera blanche. Et ce sera important. La déclaration des decks sera nulle. Et c'est encore une fois important. Alors. Je vais avoir des éléments de menu. Et que se passera-t-il si vous le survolez, le curseur sera le pointeur. La couleur de fond sera de 2828 à 8. Ensuite, nous avons la classe de profil. Il aura l'affichage, la flexion, la direction de flexion, la colonne et l'écart sera de cinq pixels. Maintenant, sauvegardez tout. Et voyons à quoi ressemble l'interface utilisateur avec cette barre latérale. Tu vois, et maintenant j'ai commis une erreur, c'est d'avoir saisi ce cube. Ce sera utilisateur et le dernier sera Kg. Maintenant, vous voyez, nous avons des icônes différentes ici. Paramètres du profil. Maintenant, cette barre latérale est terminée. Dans la vidéo suivante, nous allons travailler sur cette barre de droite. Merci. 14. Créer un composant barre de droite: Donc, dans la dernière vidéo, nous nous sommes formés dans la barre latérale gauche. C'est l'heure. Nous travaillons sur la barre de droite ici, c'est cette section. Passons donc aux composants. Ici. Créez deux fichiers. Prénommez-le, le point de la barre droite est. Et le deuxième fichier sera le point de barre droit CSS, le point Pod droit js. Il suffit d'importer React depuis la bibliothèque. Et deuxièmement, nous allons importer le CSS. C'est vrai, barre point CSS comme ça. Ensuite, une fonction. Pour l'instant, nous allons simplement renvoyer des crochets vides. Et enfin je vais écrire export default. Barre de droite. Partir. Le fichier CSS est-il vide pour l'instant ? Accédez à l'application point JS. Oui, import, composant de la barre de droite. Et dans cette section de la barre latérale, appelez simplement. Et j'ai acheté celui-ci comme ça tout à l'heure, nous avons ce qu'on appelle le composant de barre latérale. Dans cette section, nous l'appellerons correctement, mais sauvegardez-le. La prochaine chose que nous voulons est dans le dossier source, nous avons le dossier images. Mettez toutes les images factices ici. Vous pouvez télécharger l'image que vous voulez sur Internet et la coller ici. Ce sera une publicité factice ou des nouvelles ou tout ce que vous verrez sur la bonne. J'ai utilisé ces images. Vous pouvez mettre la vidéo en pause si vous le souhaitez. Après cela, une fois que nous avons des images tout en haut, importez ces images. C'est important. Je vais juste nommer le premier, casque de sécurité. À partir d'images, de ce point JPEG. Copiez-le trois fois. Deuxièmement, je vais écrire solidity. Le nom de l'image est uniquement le D, et le suivant est Meta mask. Et ici je vais écrire mon Dallas. instant, nous allons simplement importer trois majeures. Ok, j'ai aussi ce numéro de CD. Importer l'image réactive dont ils réagissent est un fichier PNG et un fichier GIF comme celui-ci. Maintenant, puisque je vais avoir des données factices ici, je vais créer une variable qui sera un tableau. Il sera composé d'objets. L'image que j'avais eue. Apprenez à utiliser le développement matériel. Et si vous le souhaitez, vous pouvez également utiliser link. Si vous voulez que l'utilisateur soit vraiment redirigé quelque part. Mais pour l'instant, il ne s'agit que d'un lien vide et collez-le trois fois plus. Deuxièmement, nous allons être solidaires. Je vais simplement écrire un contrat maître intelligent. Développement 30s React Mastery Act juste en 2022 ou 20, masque. Pourtant, j'aime vraiment devenir développeur web. Ce ne sont que des données factices. N'oubliez pas, après cela, j'aurai un champ de recherche factice. C'est tellement important. Entrée à partir du code d'interface utilisateur, code d'interface utilisateur Web trois et je vais importer la recherche et cette entrée sera N majuscule ici. Icône de recherche à partir d'icônes Web three UI comme celle-ci. Maintenant, nous allons avoir un contenu div . Je vais le nommer. Ensuite, j'aurai une contribution. Comme ça. Le niveau sera « Recherche ». Nom, recherche. Nous finissons par préfixe. Je vais avoir cette icône, c'est-à-dire l' icône de recherche. Comme ça. Et la couleur de fond sera hashtag. Un pour un, petit D à six. Comme ça. Ensuite, j'aurai une autre div. Ce nom de famille sera des tendances que je vais juste me donner un titre de prêt. Et maintenant, je vais simplement faire une boucle à travers le tourbillon comme ça. Et je reviendrai ici. Dave. Nom de classe, tendance. Au clic. Je vais simplement écrire fenêtre point ouvert, lien point E comme ça. Et à l'intérieur de cette div, il y aura l'image E simplement l'image E point. Ce sera une image ponctuelle. Nom de la classe, image de tendance. Nous allons le styliser juste après un certain temps. Et puis une autre div avec ce texte qui est tendance. Suivant. Ici, il affichera un texte de point comme celui-ci. C'est ça. Maintenant, cela aura l'air horrible si nous ne faisons pas cette portion de style. Passons donc à écrire un style de barre qui est lu par point css. Tout d'abord, je vais rester à huit barres contenu en ajoutant unifier cellule Fix avec 80 pour cent. Puis les tendances sombres. Couleur de fond, aztèque 34. Ensuite, le rayon de la bordure de cinq pixels. Alors la hauteur minimale, je suppose, est-ce qu'on a moins 200 pixels ? Maximum, évalué à 90 pixels. Marge, pointe supérieure, aisselle. En ajoutant les pixels. Epaisseur de police, gras, taille de police, 18 pixels, débordement. Et puis je vais styliser tendance. Cette tendance. Il suffit d'afficher le flex. Justifiez le contenu Démarrer. Aligner les éléments Centre. Espace entre la marge des pixels, 15 pixels supérieurs. Rembourrage, dix pixels. Après cela, j' aurai un effet de survol. du pointeur et de l'arrière-plan. En vol stationnaire, devons-nous être aztèques ? Voir 353 e. Puis image de marque. Tu l'as fait rouge. Et pixel rouge, bordure, rayon, grande cellule. Et enfin, ensuite, une taille de 15 pixels. Poids de police, normal. Maintenant, sauvegardez tout le code. Laissez-le être compilé. Et veillez à ce que vous voyez qu'il est beau. Je trouve que le bonsaï n' est pas beau. Voyons voir. Nous avons une faute d' orthographe ici. Tendance. Voir. Maintenant, la taille de la police est également descendante. Nous avons ici, tout ça et tout. Je vais donc vérifier et rembourrer. Nous avons donc ici le bon contenu. Voyons voir. Ça va. Que se passe-t-il si je fais 90 % ? Ok ? En ajoutant d, nous avons cet envoi plus profond. Ok ? Puis tendances, fond d'écran, rayon de la bordure, hauteur minimale, taux maximum. Si j'augmente la largeur maximale, rien ne change. Marge, haut sur la taille. Ceci, puis nous avons tendance, justifier le contenu, marge centrale, top 15% en ajoutant 10%, Voyons à quoi ça ressemble. Juste quelques problèmes avec ce côté. Je pense juste que si nous n'arrivions pas à le faire, cela devrait être sur une seule ligne comme celle-ci et toutes. L'image dans l'application point css. Pourquoi faire ça ici ? Ok, pour l'instant ça se présente bien. Si je veux changer quelque chose, je le ferai dans la vidéo suivante. Merci. 15. Permet de travailler sur la page d'accueil: Bonjour, bon retour. Dans cette vidéo, nous allons travailler sur la page d'accueil. Mais avant d'aller de l'avant, je veux juste faire un petit changement ici dans l'application point CSS là-dedans, section de bus droite, je vais juste changer la largeur de 45 ici, le 55, c'est tout. Donc maintenant, notre application a l"air décente du point de vue compétitif avant d"avoir une distance appropriée et tout. Et aussi, nous avons besoin de quelques images factices. J'ai ces images ici. Si vous le souhaitez, vous pouvez simplement Google Avatar ou n'importe quelle image d'arrière-plan. Si tu veux. Utilisez-le uniquement dans le but de créer l'interface utilisateur. Quoi qu'il en soit, elle sera modifiée plus tard. Créez donc un nouveau fichier dans le répertoire source et nommez-le. Images par défaut point js. Ensuite, il suffit d'écrire export. Const. Par défaut. Images est égal à n ici. Il suffit de coller ces deux images. Celui-ci n'importe quelle image d'avatar aléatoire. Et celui-ci est utilisé comme bannière pour la section profil. Comme ça. Et sauvez-le. Ok. Maintenant, allez les pages et dans le fichier home point js. Commençons maintenant à écrire du code. Entrée provenant du Web. Trois icônes de kit d'interface utilisateur sont le code de pas principal, et non pas en diagonale. Si vous le souhaitez, vous pouvez consulter le kit d'interface utilisateur Web Three et quels sont les éléments d'interface utilisateur qu'il fournit ? Et deuxièmement, je vais importer une image avec trois icônes de l'interface utilisateur. Enfin, je vais importer les images par défaut. Images par défaut ici. Maintenant que je n'aurai besoin d'aucun de ces éléments, ce sont que des données factices. Je vais également supprimer cet œuf de lien. Et commencer, je pense qu'à partir de zéro, je vais avoir un développement. Et nous lui donnerons un nom de classe, un contenu principal. Alors j'aurai un autre Dave. Je n'aurai jamais de cinq à huit ans. Ensuite, j'aurai une autre section comme celle-ci. Et ici, je vais utiliser l'élément avatar du kit Web three UI. Et je vais simplement être mort, puis l'image sera, ce moment ce sera par défaut. Celui-ci est par défaut, images à la position 0 dans la taille d'image 60, comme ceci. Ensuite, j'aurai une zone de texte. étiquette. Pour l'instant, je ne prévois rien. Oui. Plaque nominative. Ensuite, zone, détenteur du bail, égal à ce qui se passe. Et le nom du verre sera un texte, une zone comme celle-ci. Alors je vais prendre ce Dave. Et après cette div aura une adresse. Dave. Et je vais lui donner le même nom de classe que la section tweet. À l'intérieur. Je vais avoir Dave, celui-ci a className image div. Ensuite, j'utiliserai l'élément d'image Image obtenu à partir des icônes sur la taille sera de 25. Comme ça. Après ça, tu as créé Steve, j'aurai simplement une autre div. J'écrirai le poids et le nom de la classe sera à manger. Après le coiffage, vous saurez vous comprendrez toutes les sections moins au bon moment juste pour obtenir l'avortement SDM. Après cette div. Ici. J'aurai j' aurai j'aurai simplement la section filet, la section alimentation. Et nous allons avoir la section fruits ici. Je vais avoir la section des fruits qui dit, accord, maintenant passons au CSS du point d'accueil. Faisons un peu de style. Commencez par la zone de texte. La majuscule colorée à cinq pour cent, puis le fond, transparent. Bordure, deux pixels. Puis border-radius. Conservez Excel. Ensuite, hauteur minimale. Et pixel rouge en ajoutant 15 grosses cellules. Débordez-le. Ensuite, j'aurai du poids. Un pixel inférieur, RVB fixe, 63363. Et du rembourrage. Nous sommes dans le pixel. Ensuite, j'ai cette section Tweet. Affichage. Flexible. Justifiez l'espace entre les attentes, 95 %. Aligner les éléments, le centre, la marge, les dix pixels supérieurs. Alors je resterai guidé. Classe. Couleur d'arrière-plan. Pour sept, E5. Ensuite, sélectionnez cellule et 20 pixels, rayon de bordure, blanc de mille pixels. Puis on a martelé. Donc, image, ils ont un rayon de bordure de 50 %. Ajout puis pixel. Marge gauche, elle représente le vendeur. Et puis j'ajouterai image div hover, Curtis, classeur, fond, couleur. Fais-le, fais-le comme ça. Je vais tout enregistrer. Et voyons voir. Dans le fichier app.js, nous avons la section Accueil. Ok. Ce n'est pas dans les paramètres. C'est pourquoi. Rentrons chez nous et voyons. Il est beau. Maintenant, la seule chose est la zone de texte. Voyons voir. Voyons ce qui se passe dans la zone de texte. Ils vérifieront simplement CSS. Nous avons une bordure latérale, ADS mort, la lecture de la hauteur minimale est le trop-plein caché. Alors je vais vraiment vérifier ça. Maintenant, ça fonctionne. Je n'ai rien fait. Je supprime simplement ce code et j'écris simplement la même chose. Encore une fois. C'est comme textarea nom de classe, nom de famille, celui-ci, et espace réservé, que se passe-t-il ? C'est ça. Maintenant que nous sommes capables d'écrire ici, cela fonctionne. La prochaine chose sur laquelle j' aimerais travailler est cette section image. C'est ainsi que vous pouvez sélectionner une image dans le répertoire de l'utilisateur. Je vais simplement importer depuis React. Vous déclarez, utilisez, réf. Ces deux-là. Ensuite, après quelques variables ici, c'est-à-dire, le fichier d'entrée est égal à utiliser RAF night. Puis const image sélectionnée, définie, image sélectionnée. Ils utilisent des données. Ensuite, j'aurais besoin d' un autre texte const. Ce texte va utiliser une date et une chaîne vide. Ensuite, je vais créer une fonction, nommer sur l'image, cliquer, fichier d'entrée, point, courant, point, clic. Ensuite, j'aurai de la monnaie. Manutentionnaire. Événement. Const. Le fichier image est égal aux fichiers point d' événement 0. Ensuite, je vais définir image sélectionnée objet URL de l'image sélectionnée, le fichier image URL comme ceci. Après cela, tout simplement. Nous allons aller dans la zone de texte. Ouais. Et je vais écrire leur propre méthode OnChange, qui va simplement définir le texte sur ce qu'il est écrit ici. Point E, point, valeur du point, comme ça. Ok ? Et puis j'ai cette image, que je vais donner le onclick et simplement écrire sur l'image, cliquer. Décochez. Après ça. À l'intérieur, j' aurai une balise d'entrée, qui était le fichier. Le type sera cinq. Amis, sera le fichier d'entrée. Et le changement sera le changement. Et apprenez et stylez. C'est quelque chose que tu dois voir. Je n'en afficherai aucun. Je ne veux pas que cette balise d'entrée s'affiche, l'élément d'entrée s'affiche. Je veux juste que les utilisateurs puissent cliquer sur cette image. Et je vais juste avoir une déclaration « if-else ». Si l'image sélectionnée est vraie, alors je vais simplement afficher l'image egg, quelle source. La largeur de l'image sélectionnée sera de 150. Et si ce n'est pas le cas, je montrerai cette étiquette. C'est l'icône de l'image. C'est ça. Sauvez toute la chair. Sélectionnez le fichier et reportez-vous à la section. Je peux maintenant sélectionner une image. Et si l'utilisateur le souhaite, il peut le modifier à nouveau en cliquant ici. C'est ça. Cette section d'image est terminée. Dans la vidéo suivante, nous allons travailler sur la section pieds ici. Merci. 16. Créer le composant Feed: Bonjour, bon retour. Dans cette vidéo, nous allons travailler sur cette section de flux. Pour cela, nous devons créer un nouveau composant, aller dans le dossier Components et créer un nouveau fichier dans feed point js. Et aussi avoir un fichier CSS pour cela. Le poids dans le CSS id dot. Dans les fauteuils d"alimentation intuitifs File. Importez l'acte, et importez également le poids dans le CSS point. Allons ce soir. Nous explorerons peut-être de nouveaux jours de cou. Allez à l'accueil point js. Et ici, plus le fichier d'importation de blé dans le composant d'alimentation. Et appelez simplement le composant ici comme ceci. Et voici que j'envoie un prop rho phi est égal à faux. Cela signifie que vous ne voulez pas que tous les flux soient ici, pas pour un profil en particulier. Alors. Bon dossier IGS. Faisons quelques importations. Tableau, par défaut, images, puis. Importer le noyau. Et en gras, icônes de message, de cercle, d'étoile et de magie comme celle-ci. Dans l'instruction return, écrivons le nom de la classe Dave pour y alimenter. Regardons nos données ici. Est arrondi. L'image est égale aux images par défaut. Ce ne sont que quelques images pour le moment. Image de l'équipe, disons 60. Alors prenons un autre Dave. Nom, gouache complète. abord, Dave pense que c' était qu'ils avaient tendance à manger et qu'ils écrivent juste un masque de terre maintenant. Et puis. Il suffit d'un compte comme celui-ci. Et ici, j'ai un compte fictif comme celui-ci. Puis Dave, ClassName, content. Sympa. Ils apprennent à partir de zéro. Et je vais montrer cette image. Il y avait une source lumineuse. Vous tombez par défaut. Et une image LastName. Alors. Au bout de quelques jours, Dave, j' aurai le nom de la classe. Le nom de la classe est le. Généralement dans leurs interactions. Les interactions auront une div. Avec LastName. L'interaction engourdit. engourdissements auront auront ici un cercle de message, une icône, une taille de police 20. Jambe cette copie pèse deux fois. Alors ce sera là, je vais simplement écrire mort. Et je vais faire de la magie. Maintenant. J'ai ces deux composants prêts maintenant il est temps de faire cette partie de style. Allons lire le tweet. Taux maximum et pourcentage rouge. Bordure inférieure. RVB d'un pixel. Soixante-trois. Soixante-trois. Soixante arbres. Comme ça. En ajoutant du vert, du pixel, du blanc coloré. Justifier le contenu, espace entre affichage, flex, curseur, pointeur. Ensuite, nous tweetons notre couleur d'arrière-plan. Je vais juste le changer pour ce code hexadécimal. C, fais-le. Avant. Alors je vais le supporter complètement. Tweetez. Ces drapeaux. Justifiez le contenu, commencez. Filet relaxant. Colonne, espace. Choisissez ensuite la cellule D9 pour cent. Ok. Ensuite, j'ai vraiment dans les élections, les élections mitogen. Puis pixel. Cette pièce. Lax. Oui, contenu D5, centre, espace, 150 pixels. Ensuite, je changerai cette interaction nums ash, T F T, F, T F. Affichage, flex. Justifiez le contenu, sombre, vide, puis pixel. En ajoutant un pixel, une bordure, un rayon. Mille pixels. Après ça. Je sais qu'il y a beaucoup de style. Si je le voulais, je peux juste te donner le fichier, mais j'écris juste sur tout ce qui se trouve sur le code CSS également. Parce que vous construisez aussi ce matériel, c'est mieux. Nous le faisons à partir de zéro sur 28600. Et alignez les éléments. central Pixel central. Ensuite, nous nous contenterions de flex. Justifier le contenu. Démarrer. Direction de flexion, colonne, espace, cylindre mince. Hauteur maximale en pixels. Alors attends. Image, attente, 98 %, rayon et hauteur de pixel 90 %. Ensuite, j'aurai un autre cours ici, chargement que nous utiliserons plus tard. J' aime statique, la colonne, écart, faire le pixel en avance, non ? Je sais qu'il y avait beaucoup de code maintenant, économisez. Nous allons consulter notre page d'accueil. Il y a là une erreur. Voyons ce qu'est une erreur stupide. Ce nom de classe. Je l'ai mal écrit. Je vais juste lui donner un petit f ici. Enregistrez et voyez. Tout n'est pas parfait. Nous avons le compte ici, l'image ici, ce texte. Si l'utilisateur télécharge une image, elle s'affichera correctement ici. Il est très beau. Ce ne sont que des icônes factices. Cela montre qu'il se trouve sur le réseau de polygones. C'est tellement sympa. Notre page d'accueil est terminée. C'est-à-dire que l'interface utilisateur est terminée. Dans la prochaine vidéo, nous allons travailler sur cette page de profil. Merci. 17. Permet de travailler sur la page Profil: Salut. Dans cette vidéo, nous allons travailler sur cette page de profil. Allez au profil point js. Et voici le top. Importons quelque chose. Tout d'abord, importons images par défaut à partir d'images par défaut comme celle-ci. Ensuite, je vais importer le poids en composant comme ceci. OK, supprimons ces liens et commençons par actif, pas Dave, je vais commencer par une image, un fichier de nom de famille d' une autre source. Images un. Ensuite, nous aurons un autre nom de conteneur div, F, B. Nous aimerions avoir ce profil. Et c'est comme ça qu'une image est encore une fois. Et maintenant cette image est affichée image. Il suffit d'écrire des images de fichiers et z, vous savez, ici. Après cela en HD, n'avez pas simplement rendu cette image rigide à fermeture automatique. Avoir une autre div, qui sera le nom du profil, bonjour. Et le portefeuille Raphael. Il suffit d'avoir une entrée aléatoire ici. Ensuite, j'aurai un lien qui enverra l'utilisateur vers la page des paramètres. Le nom de la classe. Raphaël. Très bien. Après ce lien, nous allons avoir une autre journée de bio plus trois, qui est moi. Alors allons-y et j'aurai un profil, des applications Web. Et à l'intérieur, je n'aurai un onglet de mes poids. Ensuite, à la toute fin, je devrai attendre en fondu. Composant. largeur. Profile est égal à vrai. Comme ça. Maintenant, évidemment ça aura l'air, ça n'aura pas l'air bien. Je dois faire le style pour aller au profil point CSS ici, et faisons ce style. Tout. Voici à propos du style. Donc pour cent de poids, pour cent de poids max. Hauteur pour faire une cellule typique, vérifier, couvrir. Et b, f, b, conteneur. Taux maximum et pourcentage de plomb. Affichage. Flexible. Contenu D5, commencez. Direction de flexion. Colonne. En bas. Un pixel. Solide, RVB, 63. Comme ça. Dossier, VFB. Avec Excel. Rayon. Plus profond, envoyé une tactique pixel par pixel, solide. Un pour un jour à six. Relatif moins 65 pixels. Gauche. Dépeint. Faites ensuite le style du fichier. Nom. blanc. Lésion relative moins 55 pixels. Gauche. Le pixel, la taille. Astuce Excel. Trouve le poids. Après ça. Je sais qu'il y a beaucoup de styles à créer. Portefeuille à dossier rugueux. Je ne sais pas si nous avons le profit, non ? Oui. Celui-là. Couleur RVB. Quand, quand ? Quand , quand, quand ? Quand, quand pour toi parent Shen. Puis moins 50 pixels. Pixel gauche. Taille de police 14 pixels. Puis des trucs de Jane, une sorte de bio. Apprenez la lumière. Eh bien, vous ne devriez pas avoir de moins relatif pour le pixel. À gauche, quelle est la taille du pixel, 16 pixels. Poids de police, 500 dollars, ou s'applique uniquement lorsque les lumières sont bonnes. Alors j'ai échoué. Et sa section, comme pour la suppression, relative moins 1 16ème pixel, gauche, 50 pixels. Taille, 16 pixels. Poids de la police 0,5 pixel. Blanc uni. Attends. Et pixel rouge, centre de contenu justifié. Cela laisse des drapeaux. Ensuite, le fichier brut dedans . Allez au CERN. pointeur. Affiner. Applis. Affichage flexible, justification du contenu centré, blanc, gras. Et enfin, Profile. Onglet. En bas. Puis pixel, bordure. En bas, deux pixels. Solide. Un, majuscule a, majuscule F. Do. Je sais qu'il y avait beaucoup de CSS dans ce fichier. Maintenant, sauvez-le. Et voyons à quoi ressemble notre écran de profil. Maintenant. Je pense que j' ai fait une erreur ici parce que j'ai appris que ce n'était pas là. Voyons voir. Affiner. C'était une erreur. Sauvegardez-le. Tu vois que la page de profil est tellement belle. Je sais ici que l'image binaire et cette image sont identiques parce que nous utilisons simplement les médiateurs. Plus tard. Les images seront différentes, mais je pense que c'est très beau. Notre page d'accueil et notre page de profil sont terminées. La seule chose qui reste est la page des paramètres, que nous ferons dans la prochaine vidéo. Merci. 18. Permet de travailler sur la page Paramètres: Salut. Dans cette vidéo, nous allons travailler sur notre page de paramètres. Accédez à settings.js. Commençons notre travail ici. Tout d'abord, je vais supprimer toutes ces longueurs. Ensuite, j'importerai l'entrée ainsi que le téléchargement. Ce que je suis là était trois codes d'interface utilisateur. Et j'utiliserai l' état d'utilisation de React. Puisque cela impliquera des fichiers et tout. Je vais donc créer des variables qui sont des états. Nous allons d'abord être fichier, ensemble de fichiers, fichier fichier appelé à utiliser une date comme celle-ci. Puis fichier rebondi, ensemble, fichier de bannière. Ils utilisent l'état. Puis const name. Setname est une bonne chose. Date d'utilisation. Puis const bio. Définir la bio. Pour utiliser un état comme celui-ci. J'aurai alors deux fonctions. Équilibré. Banner est l'événement. Si l'événement n'est pas nul. Même endroit défini par le fichier maintenant. Cet événement. Et le second sera le gestionnaire de fichiers const. Est-ce que ça va faire un événement ? Même chose. Si l'événement n'est pas égal à null ? Puis ce fichier brut. Devons-nous organiser un événement comme ça ? Alors travaillons ici. Ce sont les retours, une instruction return où Dave, LastName, page de paramètres. Le premier sera l' entrée, l'étiquette, le nom, nom, le changement de nom, le taux et le pourcentage de lecture étiqueté par couleur de fond. Hashtag un. Pour un. Le 26. Un onchange sera simplement défini le nom, la valeur cible. Comme ça. Le deuxième champ de saisie sera appelé bio. Changement de nom, bio. Et le leader sera défini bio. Ensuite, j'aurai le nom de famille, PFP, dont je change d'image. Je vais utiliser ce composant lumineux ou vous pouvez dire, cela nous est donné par eux à trois kits d'interface utilisateur. Et je vais utiliser le gestionnaire de profil ici. De même, j' aurai eu du changement. Image binaire. Et ici, il sera banni de ce gestionnaire. Et enfin, j' aurai le bouton Enregistrer que je vais éditer dans le CSS. Accédez à Settings dot CSS file. Disons que la page Paramètres. En ajoutant 1880 pixels. Flex d'affichage. direction de flexion sera l'écart entre les colonnes. Le pixel. Alors je vais prendre celui-ci. Velar et pile 6878. Le rembourrage gauche. Et j'utiliserai le CSS pour enregistrer la couleur de fond. Un D, A1, F que la lecture sera alors pixel et pointe de l'aile, axilla, rayon de la bordure. Ensuite, le blanc. Sur le poids six et le rouge. Pourcentage de rouge et de rouge. Flex d'affichage. Centre de contenu Justifier. Ensuite, cependant, je dirai simplement que Calcutta est carcéral devrait être pointé du doigt. Économisons et voyons voir. Regardez notre page. Il a l'air décent. page des paramètres du profil est également terminée. Toutes nos pages sont prêtes. Donc avant de terminer cette vidéo, je voudrais enfin créer un écran de connexion de base pour l'utilisateur, car évidemment l' utilisateur doit s'authentifier avant d'accéder à cet écran d'accueil. Jusqu'à présent, allez au fichier app.js. Ici. Tout en haut. Je vais importer le bouton. Trois codes d'interface utilisateur sont également une semaine importante et ont rencontré l'icône Masque à partir de trois icônes d'interface utilisateur. Maintenant, j'aimerais avoir un peu d'état et j'espère que nous l'avons utilisé. Non, tu n' as pas séjourné ici. Il suffit donc d'utiliser un const. Est-ce que notre ensemble de dix morts de désintégration est dix fermé. Ils utilisent les fichiers à la première valeur que j' aimerais avoir c'est faux. Retour. Je vais juste avoir une déclaration « if else ». Iv, l'authentification est vraie. Ensuite, je montrerai notre div. Si l'authentification est vraie, chaque émission est le flux d'heures ici. Et sinon, je vais afficher cet écran, qui sera Dave LastName. Maintenant, page de connexion. Comme ça. Ensuite, je vais devoir indiquer logo le logo sur le logo sur D. Et j'aurai un bouton. Je vais maintenant avoir un bouton ici, qui va se décliquer. Cela ne fera rien. Taille X L, X deux. Lorsque nous nous connectons avec MetaMask, l'icône principale de l'équipe sera ce masque. Ça peut me plaire. N dans le CSS point de l'application, nous avons cette page de connexion. Css, comme vous pouvez le voir. Comme je vais juste le dire, eh bien, si je vais sur mon site web et que je rafraîchis, il est compilé, voyons si c'est dans l'éditeur. Ok, tu vois, notre écran de connexion est également très beau. C'est très basique, mais c'est notre travail. C'est tout pour cette vidéo. J'espère que tu as beaucoup appris. Dans la vidéo suivante, nous allons travailler sur ces fonctionnalités telles que la connexion avec mon masque. Ensuite, nous récupérerons les données de notre blockchain à l'aide d'un fichier test.js. Alors restez à l'écoute et continuez à apprendre. Merci. 19. Authentifier l'utilisateur à l'aide de Metamask: Bonjour, bon retour. Dans cette vidéo, nous allons authentifier MetaMask de la semaine des utilisateurs. Plus tôt, nous avions cet écran de connexion. Il est maintenant temps d'écrire la fonctionnalité. Passons donc au fichier point JS de l'application. Ici, je vais m'assurer importance de toutes les dépendances. La première chose dont j'aurais besoin est l'effet utilisé. Ensuite, je l'ai fait à partir d'un noyau nécessitera notification utilisée ainsi que le chargement rigide. Ensuite, j'ai ceci, je peux simplement faire pivoter. Et après cela, j'importerai des éthers et des utils des mangeurs. C'est ce que nous demandons. Ensuite, j'aurai besoin d'un modèle d'arbre Web. À partir du modèle d'arbre Web. Après cela, nous aurons besoin de police, Drag, address. Rom. Je peux flipper Phi Prime ici. Après cela, nous aurons besoin de ABA, dossier ABA, puis cliquez sur ce point Jason. Et enfin, exigez notre dépendance. Je vais juste m'asseoir comme tu veux et ensuite régler notre Todd. Ce sont les dépendances. Et je crois que nous avons le dessin animé. Est-ce que votre ordinateur est déjà installé ? Voyons voir, tout va bien maintenant qu'une erreur est là, est en train de compiler. Je suppose que tout va bien, d'accord. Maintenant, nous avons besoin de certaines variables d'état. Comme nous le ferons, nous aurons besoin de cet ensemble de données. Le fournisseur est un état cool à utiliser et nous aurons Window Dot It Tedium comme tout premier rendez-vous. Ensuite, nous aurons besoin la bibliothèque de notifications du kit d'interface utilisateur Web three. Et puis nous avons un état juste pour montrer si le chargement n' est pas défini. L'état de chargement est prêt à l'utiliser. Et la première chose que nous lisons des fichiers. Maintenant, pour en savoir plus sur les notifications, vous pouvez vous rendre sur le site Web de trois UI Kit, site officiel et voir comment utiliser ces notifications et tout. J'aurai juste une fonction de notification d'avertissement. vacances sont égales à ça. Cela dira simplement « pas de défécation ». C'est celui-ci. Il aura simplement ceci. Et à l'intérieur, nous devons envoyer des paramètres tels que type, avertissement, message, changement, réseau. Quel polygone visiter ce site ? Après cela, je vais simplement passer au réseau de polygones. Et après cela, j' aurai simplement la position de la notification en haut à droite. Comme ça. C'est ça. C'est ainsi que nous affichons une notification. Ok. De même, nous en aurons besoin d' une autre, nous aurons une autre notification qui sera connue sous le nom de notification d'information. Le type sera complet. Il acceptera et le numéro de compte. Dans ce message, il suffit d' afficher le numéro de compte. Et ici nous allons écrire que je dis connecté au compte polygone. C'est-à-dire que si l'utilisateur change de compte polygone, nous afficherons également une notification car cet utilisateur ne peut pas utiliser un autre réseau tel que trimestriel ou Rob Stone et tout. Mais il peut définitivement changer de compte dans le polygone de Wallach. C'est ça. Maintenant, commençons à écrire cette fonction. Je vais le nommer, connecter, portefeuille, évier, comme ça. Nous allons maintenant avoir besoin du modèle Web trois pour cela. Je vais simplement écrire Web trois en 70, y échapper. Le modèle de petit arbre est égal à nouveau modèle. Ensuite, nous avons besoin d'une connexion égale pour attendre model.fit connect. Après cela, nous aurons le fournisseur Cloud est égal à de nouveaux mangeurs, ce fournisseur, Dodd Web trois fournisseur. Et nous enverrons cette connexion ici comme ceci. Après cela, je vais obtenir le réseau qui est connecté. Parce que le site ne s'ouvre que sur un réseau de polygones. Await provider dot get network like this. Et nous savons que pour une chaîne de polygones IgA1, id est égal à 80001. Il s'agit d'une idée de chaîne d'un réseau de polygones. Je vais maintenant avoir une clause « if else ». Si obtenir l'ID de jane point réseau, pas égal à l' idée de chaîne de polygones s'il n'est pas égal. Ensuite, tout d'abord, je vais afficher une notification d'avertissement. Après-midi. Je vais ajouter notre interrupteur. Ensuite, réseautez. Ce que je veux dire par là, je vais aller à l'extrême. Sélectionnons-le vers le bas. Donc tout simplement ceci. Elle s'exécutera si chaîne de polygones est connectée. Ok ? Et maintenant, nous allons travailler sur cet essai. Je vais simplement écrire wait provider, provider that the request. Donc ce que je vais demander, je demanderai à mon Ted de le laisser prendre une chaîne moyenne. C'est s'il est connecté à quelque chose d'autre qui est divin ou à n'importe quel réseau entre le commutateur du réseau. Et des paradigmes. Paradigmes, nous allons écrire l'ID de chaîne. Utils, valeur hexadécimale point. Il suffit d'envoyer l'identifiant du polygone. Et ici, s'il réussit, alors nous allons simplement recharger, c' est-à-dire l'emplacement de la fenêtre, pas le recharger comme ça. Et ce code d'addition indique que cette chaîne n'a pas été ajoutée à mes dégâts. C'est-à-dire que l'utilisateur n'a pas cette chaîne. Ok ? Mais nous devons absolument ajouter cette chaîne. Il s'agit du réseau de test de polygone vers le masque de matière des utilisateurs. Nous essayons simplement de rendre leur site Web plein de fonctionnalités. Ok ? Maintenant, cela signifie que nous allons et le réseau de polygones. Toi. Papa, mon masque de père. Ok. Maintenant, vérifions si code point du commutateur est égal à 4902. Dans ce cas, il suffit de sécher. Oui, j'ajouterais juste que l'édition est pendant que nous ajoutons là, elle a été lancée. Ok. Et ici, je vais juste essayer d'ajouter le compte. Désolé, dans le fournisseur de blockchain, cette méthode de demande s'appelle wallet. Ajouter. C'est ennuyeux. Motifs en profondeur. Nous aurons tout. C'est ça. Jane ID sera utils, cette valeur x. Nous devons écrire une idée de chaîne de polygones plutôt que de nom de chaîne légère de compagnie aérienne . Puis URL RPC. Il suffit d'avoir un RPC. Ou si vous pouvez changer de PC, vous n'avez qu'à le googler. Si, si cette URL ne fonctionne pas, Mumbai point chain, stack, labs.com, block x URL faibles, HTTP et HTTPS. polygonal de Mumbai. C'est vraiment Mumbai, Mumbai point polygone scan.com. Et puis j' aurai un jardin indigène. Voir. J'aurai la monnaie d' origine. Ici. Nous devons envoyer. Symbole, magie et décimales 180 k. Et ici, je l'aurai simplement. Alors c'est un poids. Et après cela, il suffit de l'emplacement du point de la fenêtre de chargement, point reload, comme ceci. Nous ajoutons donc la chaîne du stade, c' est-à-dire la chaîne de polygones si l'utilisateur ne l'a pas déjà. Et dans le précédent, nous ajoutons simplement, en changeant cette chaîne. C'est-à-dire que si l'utilisateur a, s'il utilise une autre chaîne, il la changera simplement ici. J'espère qu'il n'y a pas d'erreur. Tout va fonctionner. Ok. Et maintenant, nous devons travailler sur cette section L. Elle s'exécutera si chaîne de polygones est connectée au MetaMask. Donc, ce que nous allons faire ici, c'est vérifier si l'utilisateur n' existe pas. Dans notre blockchain. Nous mettrons à jour les détails de l'utilisateur dans notre contrat ainsi que dans le stockage local. Ce que je veux dire par là, c'est que nous utiliserons également le stockage local ici. Donc tout d'abord, ce que je vais faire, c'est que je vais obtenir la signature du bureau à condition que cela obtienne un signataire comme celui-ci. Ensuite, j'aurai ce signe que je m'habille, habille et que je m' habille comme ça. Ensuite, j'obtiendrai ce contrat. Instance du contrat, ce nouveau contrat, ce contrat C capitalisera comme ça. N ici, ce que je vais envoyer son adresse de contrat Twitter. Puis Twitter ABI point aba. Et enfin le signataire, comme ça. Et ici, j'appellerai le fonds get user detail Chen, c' est-à-dire GetUser wait. Sur la bonne voie. Obtenir l'utilisateur. Si vous allez dans le contrat intelligent que ce contrat solide, vous verrez cette méthode qui est GetUser, où elle accepte l'adresse. Ce que nous faisons maintenant, c'est vérifier si cet utilisateur est un nouvel utilisateur ou s'il a déjà été authentifié plus tôt. C'est ça. C'est ce que nous ajoutons ? Dette. Donc, ce que nous validons ici, nous allons simplement obtenir les détails de l'utilisateur. Si la valeur de l'image de profil existe. C'est-à-dire que si l'utilisateur existe ici, nous allons simplement obtenir et, euh, mettre à jour le contrat pour la première fois . Ok ? C'est ce que nous devons faire. Et après cela, comme c'est ici, nous devons simplement lire set provider avec leur valeur provider. Et l'ensemble est notre 10e billet pour vrai. Et cette fonction ou cette instruction if-else, nous allons écrire dans la vidéo suivante. Je sais qu'il y avait beaucoup à faire dans cette vidéo, cette vidéo aussi longue. Mais comme vous le voyez, cette vidéo était la vidéo la plus importante de notre section. Merci. Nous allons continuer dans la vidéo suivante. 20. Vérifiez si l'utilisateur existe déjà: Bon retour parmi nous. Continuons avec notre fonction connect vallate ici. Tout d'abord, il suffit de faire ce petit changement IMG qui est l'image de profil. Et si l'utilisateur existe déjà, alors je vais simplement définir que j'ai vidé dans ce stockage local par le nom d'abord, j' écrirai un compte actif comme celui-ci. Et j'ai relayé Jason point stringify. Et ici, il va démissionner de son adresse, mais je vais simplement le copier à nouveau. Et voilà, ce sera le sine à une robe comme ça. Je le stocke donc simplement dans le navigateur de l'utilisateur. C'est le nom de son compte. Ensuite, j' écrirai, nom d'utilisateur, sera ici, getUser detail, et il viendra au format JSON et j' écrirai simplement name. Et de même, je vais copier-coller. Le deuxième sera la biographie de l'utilisateur. Ce sera bio, puis ce sera l'image utilisateur. Et le prochain sera la bannière utilisateur. Et ici, changez-la en image de profil. Et le second sera le profil, comme ça. Ok ? Cela se produira donc si l' utilisateur existe et après cela, il le définira, le fournira et définira ces authentifiés sur true. cas contraire, si l'utilisateur est un utilisateur pour la première fois. Maintenant ici, nous allons d'abord écrire que l'état de chargement de l'ensemble est égal à true. Ensuite, je vais simplement écrire LED pour régler notre point de goudron, générer notre pneu comme ça. J'aurai donc une bannière par défaut ici. Je vais maintenant utiliser la valeur par défaut à partir des images par défaut. Alors j'ai celui-ci. Je l'utiliserai comme bannière par défaut. Ok ? De même, je ferai la même chose ici. Défini sur le stockage local. Le nom d'utilisateur sera donc vide car il s'agit d'un nouvel utilisateur. nom d'utilisateur sera donc vide. biographie de l'utilisateur sera vide. Puisque l'utilisateur mettra à jour la biographie plus tard. L'image de l'utilisateur sera notre Todd. Celui-là. Juste un avatar au hasard. Et le binaire utilisateur sera celui-ci, bannière par défaut comme celle-ci. J'espère donc que vous avez compris jusqu'ici. Après cela, je vais simplement essayer d'avoir ce bloc de capture comme celui-ci. Dans ce sec, je vais simplement écrire que transaction const est égale à un utilisateur de mise à jour de points de contrat de taux. Maintenant, nous devons envoyer quelques éléments, nom d'utilisateur, biographie de l'utilisateur, profil, photo et bannière comme ça. Ensuite, je vais tout de suite transaction, poids des données de transaction comme celui-ci. OK. Et s'il y a une erreur, je vais tout d'abord écrire l'additionneur console.log. Juste à des fins de débogage. Et l'utilisateur n' a aucune magie dans son compte. Juste à cette fin, je vais afficher un message d'avertissement de type notification. Obtenez le meilleur polygone de RAM magnétique ou un ensemble. Donc évidemment pour cette transaction qui est une transaction utilisateur de mise à jour, nous aurons besoin d'une sorte de jetons somatiques car il y a du gaz et tous ces éléments sont impliqués ici. Nécessite un minimum de 0,1 technologie médicale. Ce montant est nécessaire pour afficher sur notre site Web. Et une partition. En haut à droite. Comme ça. Après cette règle de multiplication, définissez l'état de chargement sur false. Et de là, je reviendrai tout simplement. C'était donc le bloc Else. C'est-à-dire que si l'utilisateur est un utilisateur pour la première fois , nous avons l'avatar par défaut, qui sera généré aléatoirement. Donc, évidemment, chaque utilisateur aura son propre avatar. Et plus loin la bannière par défaut. Je n'ai choisi aucune autre bibliothèque. J'ai juste une image factice. Maintenant, il est temps de faire la partie HTML. Donc, ici, nous avons authentifié side divide est leur fenêtre principale, ok. Maintenant, dans la page de connexion, nous avons ceci. Puis image Twitter. Maintenant, je vais avoir ce chargement. Si et sinon il est en cours de chargement. Ensuite, je vais montrer un chargement rigide. Même taille, 50, couleur verte. Et comme je vais le montrer, mais c'est fait. OK. Dans ce cas, mais il va simplement connecter le portefeuille. Et à part ça, nous avons XL. Tout va bien ici. Sauvegardez-le. Voyons notre site Web. J'espère que tout va bien ici. Maintenant, ce que je vais faire, c'est que je vais déclencher cette fonction de portefeuille en utilisant le crochet d'effet américain. Ici. Je vais utiliser un effet comme celui-ci. Il devrait se déclencher lors du chargement de la page. Maintenant fichier FASTA, ce que je vais faire est simplement écrire si ce fournisseur n' est pas là, c'est-à-dire. My Thomas n'est pas installé. Je vais simplement écrire une alerte de point de fenêtre. Non. Mon masque est installé comme ça. Et je vais assimiler window.location point remplacer HTTPS. Mask.io ira sur le site officiel. Et sinon, j'appellerai simplement la fonction Connect Wallet. Et aussi je vais avoir ces méthodes sont fournies par ce fournisseur. La première chose à faire sera de changer les comptes. Il y aura un handle d'appel de fonction aux robes changées. Alors j'aurai changé. Nous allons donc avoir une fonction appelée gène de poignée modifiée. Ensuite, je vais simplement écrire cette connexion. Et il va simplement gérer une fonction plus lourde appelée gérer cette connexion. Créons ces fonctions et supprimons les comptes modifiés. Cela nous donnera des comptes. Ici. Je vais faire une vérification. Si l' identifiant de la chaîne de points du fournisseur est égal à l'ID de chaîne démotique , c' est-à-dire que celui-ci est l'identifiant de la chaîne mitotique alors je vais apparaître pour notification et envoyer simplement les comptes 0, c' est-à-dire le compte numéro. Il affichera donc sur le site quel compte a été choisi. Deuxième. Après ça, je veux qu'il se recharge évidemment. Mais il y a eu quelques problèmes. Donc, juste pour éviter de recharger deux fois pour la toute première fois, j'utilise cette instruction if. Sinon, elle n'était pas nécessaire. Mais vous pouvez essayer sans cette instruction if. Et vous verrez que le site Web a été chargé deux fois et qu'il demandait ce que vous dites. Cette transaction plusieurs fois pour la même transaction. Donc, je veux juste aujourd'hui obtenir un compte actif ici. S'il n'est pas égal à null. Nous allons définir un délai d'expiration. Simplement. Je vais écrire l' emplacement de la fenêtre point reload. Et il devrait se recharger dans les arbres. Cela peut. Je ne fais que le répéter. Vous pouvez l'essayer sans cette instruction, mais il sera rechargé deux fois. Alors. Maintenant, je vais avoir une autre fonction appelée chaîne modifiée. Nous avons donc l'identifiant de la chaîne ici. Donc, si Shane n'est pas égal à notre numéro magique, alors nous aurons une notification d'avertissement. Et nous allons simplement recharger le point de la fenêtre, l'emplacement, le point. Et finalement, comme si je ne faisais rien. Dans cette déclaration. Ici. Si tu veux, tu peux le faire, faire ce que tu veux. Nous avons donc tout prêt. Maintenant, il est temps de le tester et de le faire, souvenez-vous, je l' ai déjà testé. Je pourrais donc avoir une sorte de sessions ou de locaux dans notre stockage local précédent. Donc tout d'abord, j'essaie de m' assurer qu'aucun compte n'y est associé. Je pense qu'il n'y a pas de compte. OK. Parce que cela déclenchera cette fonction. Ok, pour les tests. Passons à un autre identifiant de chaîne et nous allons simplement vous montrer. Je vais tester le réseau tôt, d'accord ? Maintenant, si je sauve tout, regarde ça d'abord. C'est demander, d'accord, de communiquer avec mon Thomas. Je dirai ensuite. Connecter. Ensuite, il nous demande de les adapter à votre réseau de test polygonal. Je vais simplement le changer. Maintenant, il est en cours de chargement, et maintenant il nous demande effectuer cette transaction pour mettre à jour l'utilisateur. Je suis en train de confirmer. Voyons maintenant ce qui se passe. Fais-le ici. Avoir un éditeur ou tout va bien. Cela peut prendre un certain temps. Vous voyez, nous sommes maintenant renvoyés à l'écran. Et si je le rafraîchis, voyons ce qui se passe. Voir neuf directement envoyés sur l'écran d'accueil car ce compte est déjà connecté. Vois ici, ce compte est connecté ici. Et si je vais à l' adresse du contrat et que je la recharge, voir J'ai cette transaction il y a 31 secondes pour mettre à jour l'utilisateur. Il a maintenant été mis à jour avec succès. Notre partie authentification est réussie. Dans la vidéo suivante, nous allons écrire la fonctionnalité permettant d'ajouter un jouet par cet utilisateur. Merci. 21. Configuration de Web3 Storage IPFS: Salut. Dans cette vidéo, nous allons travailler sur la partie stockage Tao Te. C'est-à-dire que nous devons activer une sorte d'IPFS afin de nous assurer que l'utilisateur peut également télécharger des images en dehors du texte. Il existe donc plusieurs fournisseurs de stockage IPFS. L'un est la pinata, le second que j' utiliserai est trois rangements. Si vous vous rendez simplement sur le site Web également. Tu vois, c'est le site officiel, stockage web à trois points. Nous cherchons ici à stocker des fichiers. Si vous souhaitez stocker des LFT, il existe également un stockage par points NFT. Donc, si vous le souhaitez, vous pouvez lire la documentation. Je vais juste me connecter. Je suis donc en train de me connecter à mon compte. Tu vois, c'est le tableau de bord. Ici. Je dois obtenir une nouvelle clé de jeton. Évidemment, il y a déjà beaucoup de fichiers dans mon stockage, mais vous devriez aller dans les jetons API et créer un nouveau jeton. Je vais l'appeler API Twitter. Et simplement créé. Après cela, juste copiée, assurez-vous de ne pas partager cette clé de jeton avec quelqu'un d'autre. Je vais certainement le supprimer plus tard. Simplement dans ce fichier config dot js ici, non ? Exporter. Const trois rangements. Api est égal à et collez la clé ici. Ensuite, allez dans le fichier home point js ici. Et maintenant il importe peu de choses. Dans le Web, trois codes d'interface utilisateur. Je voudrais imposer une notification de chargement et d'utilisation. Après ça. Après cela, nous devons attendre dans le flux. Ensuite, j'importerai des éthers. Ethers, mais de la bibliothèque Ethernet, pas de tête dure. Importez ensuite le modèle d'arbre du Web vers le modèle. Ensuite, j'importerai ces deux fichiers, c'est-à-dire l'adresse du contrat. Et celle-ci, notre API de stockage au niveau du Web. Depuis la configuration. Ensuite, je vais importer ABA, ABA slash return json. Et enfin, j' importerai les friandises de laboratoire dites à l'âge de 18 ans. Hum, nous avons installé le stockage de l'arborescence Web ou non. Voyons voir. Je ne m'en souviens pas. Dots door age, je suppose. Nous n'avons pas installé de stockage Web à deux points. Voyons trois points. Pour faire rage NPM. Nous devons l'installer. Simplement. Allez-y. Et PM avec style. Le stockage des points T. Après une installation réussie, à nouveau, npm démarre. Et ici, nous avons installé ce stockage Web t dot. Ok ? Nous avons maintenant ce fichier d'entrée, l'image du lactate. Ensuite, j' aurai quelques petites choses. Commençons par const. Utilisez cette image. Est-il bon d'analyser par points JSON, de stocker localement, d'obtenir un élément par point. Donc, j'obtiens simplement l'image utilisateur à partir du stockage local comme lorsque, lorsque nous nous authentifiions, nous avions un hasard au fil du temps. C'est vrai ? Nous l'utilisons donc. Nous l'obtenons dans le stockage local. Ensuite, nous avons sélectionné le fichier, le fichier sélectionné pour utiliser l'état. Ensuite, nous avons l'état de chargement. Chargement, set. Téléchargement, désolé de ne pas charger, c'est en cours de téléchargement. Pour utiliser la pause. Ensuite, nous avons une URL chargée par BFS vide. Et enfin, nous avons fait notification pour utiliser la notification. Ce sont toutes ces choses qui sont nécessaires. Ensuite, nous aurons une fonction sinc pour stocker le fichier dans notre IPFS. Mettons-le par écrit. Vous pouvez obtenir ces méthodes dans la documentation ainsi que dans le stockage de l'arborescence Web en cas la documentation ainsi que dans le stockage de l'arborescence Web en cas de confusion . confusion Simplement, ce client const est égal au nouveau stockage de goûts Web. Alors. Il en va de même pour l'API de stockage de Ensuite, const root CAD est égal à wait. Aveugle Vote. Très bien, comme ça. Et enfin, je vais avoir IPFS URL égale à cela. C'est au-dessus de la tabulation. Bouton de tabulation. Comme https slash dollar sign, roots CAD point b, fs de web dot link que slash dollar. Fichier sélectionné. Nom. Comme ça. C'était une fonction qui ne stockait le fichier qu'à ce point. Ensuite, nous avons cliqué sur l'image, OK, puis nous avons le gestionnaire de changement. Coûts. Le fichier image va dans le fichier cible, puis définit l'image sélectionnée. Nous avons ça. Ensuite, définissez le fichier sélectionné. Cible ponctuelle d'événement, trouve. C'est ça. Économisez sur. J'espère qu' il n'y a aucun problème. Dans cette vidéo, nous venons de travailler sur les fonctions IPFS et tout. Dans la vidéo suivante, nous allons écrire la fonctionnalité complète pour l'ajouter. Merci. 22. Fonction pour ajouter un Tweet: Salut. Dans cette vidéo, nous allons écrire Panchen pour l'ajouter. Alors, créons simplement une nouvelle fonction quand Chen et moi la nommerons, l'ajouterons. Tout d'abord, je vais avoir une déclaration « if else ». Si le tweet text dot dream est inférieur à cinq, alors nous aurons une notification affichant une délégation d'avertissement. Ce message sera d'au moins cinq. Une dose sera requise. Juif et droit. Et ici, je vais simplement revenir. C'est-à-dire que je ne veux pas que les autres fonctions s'exécutent. Si ce n'est pas le cas, je vais simplement écrire le téléchargement du set. C'est vrai. Si l'image est sélectionnée , cela signifie que vous avez sélectionné l'image est là. Ensuite, j'appellerai la fonction store file. D'ici. C'est cette fonction qui nous permettra d'obtenir l'URL téléchargée IPFS. Après cela, je vais simplement avoir notre connexion, c' est-à-dire que le modèle Web trois est égal au nouveau modèle. Alors même chose, const, connexion est égale à attendre que les trois points se connectent. Les inconvénients de la hauteur sont égaux à nouveaux. Testez que les fournisseurs Dodd Web Three Provider. Et je vais envoyer la connexion ici. Alors const sine est égal au fournisseur qui obtient Signer. Ensuite, j'obtiendrai le contrat. Ito est le contrat. Il aura l' adresse contractuelle EVA et cyanure. Ensuite, je vais avoir cette valeur de tweet égale à 0,01. Le prix contre est égal à E point plus la valeur e. Parce que si vous vous souvenez de l'avoir ajouté, nous devons envoyer cette magie. Essayer. Attrape, bloque, chasse plus loin. Disons que notre transaction équivaut à attendre, contracter et tweeter. Nous les avons envoyés à un texto, une URL BFS et à notre valeur de transaction de prix de cette façon. Et après avoir reçu une notification, ils ont réussi. À ça. Et puis Shen Dao debout avec succès. Ensuite, je vais définir l'image sélectionnée. Fais une autre série. Deux, il faut deux ensembles vides sélectionnés. Et enfin mettre en place de faux polluants. Et si nous avons un additionneur, encore une fois, je vais afficher une notification. Ils ont ajouté. Ici, je vais écrire un transaction message d'erreur de transaction, un message d'erreur. Et après cela, définissez le téléchargement sur false comme ceci, afin que l'utilisateur sache ce qui se passe. Ok ? Ensuite, nous devons renvoyer le fichier HTML ici. Vérifions chaque ligne sera une image utilisateur. Voyons où se trouve l'image utilisateur ici. Et je vais juste en faire une petite lettre. Utilisez cette image. Ensuite, nous avons une zone de texte. Alors nous avons le pont Sadia ici. La valeur sera du texte et des teintes. Ok. Ensuite, nous avons la section des tweets de Liz, leurs amis onchange n' affichent aucune image sélectionnée. Attends un jour, tout va bien. Ensuite, nous avons cette section ici. Au clic. Ajoutez à huit Chen amusant. Et à l'intérieur, il y aura une instruction if comme si le téléchargement est vrai, alors je montrerai l'indicateur de chargement comme un vrai droit, comme ceci. Et ici, j'enverrai également une prop de téléchargement, sorte que plus tard, lorsque l' utilisateur y ajoutera de nouvelles, ce tweet dans composant fluide actualise également cela. Désolé. Rien d'autre. Voyons voir. Voyons s'il y a une erreur. Je ne pense pas. Tu vois, nous avons notre hasard, notre temps ici. Cela signifie donc que cela fonctionne. Alors nous écrivons simplement, c'est mes 28 premiers. Je vais utiliser cette image. Je vais simplement lui écrire, dire que c'est l'indicateur de chargement. téléchargement va maintenant commencer. Après le téléchargement, il les appellera Meta mask. Pour y ajouter ça. Nous devons donner 0,01 métrique. Je confirme. Évidemment, cela va prendre un certain temps. Tu dois attendre. Voir le tweet ajouté avec succès. Nous avons une notification ici. Et si on passe au contrat et qu'on le rafraîchit, voyons voir. Tu vois, on a ajouté ça. Trois secondes, donc je suppose, et la valeur est 0 et donc tout fonctionne correctement. Dans la vidéo suivante, nous allons écrire la fonctionnalité pour montrer que les tweets de la blockchain. Merci. 23. Fonction pour montrer les Tweets: Bonjour, bon retour. Dans cette vidéo, nous allons travailler sur la fonction d'affichage tweets dans notre maison ainsi que sur l'écran de profil. Alors va attendre. Dans le fichier feed dot js. Nous devons trouver certaines choses. Nous devons importer des fruits. Je vais donc voir l'utilisation. Je vais simplement copier et coller ceci ici. Il faudra utiliser, affecter, utiliser la date, ces choses. Ensuite, nous demanderons demanderons qu'ils aient modifié SCSS depuis le noyau, nous aurons besoin du chargement d'avatar. Utilisez la notification. Ensuite, dans les icônes, dehors de la magie, nous aurons également besoin de l'icône de la corbeille. Ensuite, nous avons besoin d'un modèle d'arbre concis et d'une adresse de contrat Twitter. Nous n'avons pas besoin de l'API de stockage de l'arborescence Web. Enfin, nous exigeons que nous indiquions le contrat. Tu peux lui donner le nom que tu veux. Ce n'est pas comme si vous deviez nommer le même nom dans tous les fichiers. Dot Jason. Ok. Nous aurons besoin de certains États. Donc tout d'abord, nous devrions envoyer quelques accessoires ici. Tout d'abord, chaque jour, j'ai dit que const sur l'utilisateur va faire des props dot profile. Et laissez le composant de charge est égal à props point reload. Comme ça. Ensuite, je vais devoir, il est réglé sur son égal à utiliser l'état EMTALA. Ensuite, je vais avoir des données de chargement const. Set. L'état de chargement est égal à l'état d'utilisation et je ne le chargerai pas. Et enfin, j'aurai fait une notification si vous allez utiliser la notification. Ok ? Maintenant, je vais écrire cette fonction pour récupérer uniquement les utilisateurs pour relier une fonction sinc, charger mes tweets. Donc ici, je vais copier-coller quelques éléments. C'est le modèle Web trois, la connexion et ce contrat ici. Nous avons donc ici le modèle d'arbre Web, puis la connexion, puis le fournisseur, puis le signataire et le contrat ici. Ce ne sera tout simplement pas un signataire de points EBI ici. Et puis j'ajouterai les inconvénients, les données vont attendre le contrat. Je reçois mes tweets depuis la blockchain. Ensuite, j'ajouterai const. Username est égal à JSON.parse, point de stockage local obtient le nom d'utilisateur de l'élément. Et de même, j'aurai utilisé que l'image est égale à JSON dot parse. Ici, on utilisera cette image. Et puis je rapporte que le résultat const est égal à attendre. Ce que je vais manquer, les données ponctuelles, la carte des points. Tiens, un lavabo. D'abord, allons-y. Heure. Uniques est une bonne façon de le faire. Horodatage point. Ensuite, les armes, ils feront New. Et il suffit de convertir l' horodatage en date locale. Temps Unix multiplié par mille. C'est ce que j'ai obtenu par Google. Vous pouvez également le rechercher sur Google. Comment convertir des unités, unir un horodatage Unix en date JavaScript. Les fonds à ce jour sont la date d'échéance de la chaîne de date locale f, RC. Ok ? Ensuite, j'ajouterai un élément principal. Je suis en train de le convertir en un objet égal au poids. Twitter. Et cela ne sera pas égal. Il s'agit de l' ID de colonne, de l'identifiant du point du tweet, du texte point txt. Image à la gouache. Cette image est supprimée. Le taux est nom d'utilisateur. Nom d'utilisateur. Utilisez cette image. Utilisez cette image. Date, date. Il s'agit de l'objet objet, et ici je vais simplement retourner cet article et créer une annonce dans cette radio de résultat. Mais alors je vais simplement dire le point inverse parce que je suis juste en train d'inverser l'édition et définir l'état de chargement sur chargé comme ceci. Après cela, je vais créer une fonction similaire To fetch. Tous les tweets. C'est pour l'écran d'accueil. Je vais le nommer, charger nos tweets. Donc, ce web pour modéliser, ces choses sont courantes. Ici. Maintenant, certaines choses vont changer, mais tout n'est pas sur la bonne voie. Ensuite, nous recevons tous les tweets, tous les tweets. cas, nous n'avons pas besoin de ce nom d'utilisateur et de cette image car cela sera aléatoire pour tous les utilisateurs. Évidemment, nous recevons des tweets plus anciens. C'est pourquoi. Ensuite, le résultat promet une heure Unix point à une date d' horodatage point. Tout va bien. Ensuite, nous exigeons que les détails de l'utilisateur soient égaux à attendre. Contrat. Dot get user. Ici, nous allons envoyer un point d' attente, Twitter. Nous obtiendrons les détails de l'utilisateur. Nous avons cette fonction dans notre contrat intelligent de solidité. Ensuite, nous devons renvoyer leur identifiant par texto. Image, est-ce que le nom d'utilisateur sera obtenir les détails de l'utilisateur, et ici il sera nommé et utilisera cette image sera rho phi i m g image. Comme ça revient, alors tout est pareil. Nous devons maintenant renvoyer le code HTML en conséquence. Je vais ici, non ? Si l'état de chargement est égal à Non chargé, alors ici. Et renvoyez le nom de la classe. Chargement. Ici, comme le chargement du widget 60 et le hashtag couleur de l'imprimante a 2475. De même, nous aurons si l'état de chargement est égal à load in et une longueur de point n'est pas là. Ensuite, nous reviendrons à un nom de classe de balise. Je vais juste lui donner des chargements. Et ici, il n'ajoutera aucun poids disponible. Si l'utilisateur n' a rien posté, ce sera le cas. Et si ce n'est pas le cas, nous avons tout ici. Ici. Carte Hey Les Dot. Ensuite, nous aurons le poids et l'indice. Je vais tout couper et le coller ici. Ensuite, nous devons apporter quelques modifications. Évidemment. L'image sera le poids. Utilisez cette image. Alors ici, au lieu d'une masse terrestre, j'écrirai nom d'utilisateur. Sur ce compte. Je vais lui écrire. Ensuite, dans le contenu de ce tweet ici, je vais tweeter du texte. Et dans cette image, je dois vérifier si l' image de l'iris est disponible ou non. Je vais donc simplement écrire un tweet, image de tweet qui n'est pas égale à vide. Alors ne montrez que ça. Ensuite, nous n'avons qu'à montrer ici une image sombre comme celle-ci. Ok ? Ensuite, dans les interactions, le cercle des masses est correct. Engourdi j'ai dit cercle, j'écrirais simplement 0. Ici ne commence pas. Au lieu de ce style, je vais écrire un calendrier et simplement coller la date du tweet. Enfin, je vais faire une vérification. Si, sauf si l'utilisateur est vrai. Ensuite, je montrerai un dossier bin qui est Dave, nom de la classe, les interactions num. Et je vais montrer que j'ai été plié. Poids, couleur F, F 0000. Et maintenant, cela aura sur OnClick de null. Nul. Ok ? Et dans la partie suivante, je vais écrire ceci, peut-être en prendre un. C'est ici dans l'autre, et nous allons simplement les coller Arctic. C'est la raison de cette logique. S'il s'agit d'une section de profil que l'utilisateur doit pouvoir supprimer à l'aide de cette corbeille. Je peux faire ses propres tweets. Maintenant, tout est fait. La seule chose que j'ai à faire, c'est un effet énorme. Parce que évidemment nous devons appeler cette fonction qui est charger mes tweets et tout. J'aime beaucoup, s'il s' agit d'un profil utilisateur, alors j'appellerai Lord, mes tweets. Comme je vais appeler charger tous les tweets. Et cette page va être actualisée. Si nous envoyons un lac de consommation ici, le composant de charge et tout. Si cela est modifié, cette page sera actualisée. Maintenant, sauvegardez et voyons s' il y a une erreur ou non. Rafraichissant Tu vois, on a nos deux. Mais je n'en ai aucun. Et j'allais dire que l'image n'est pas là, mais que l'image est également montrée. Cela signifie que tout fonctionne parfaitement. Dans notre section profil également, nous avons ceci, c'est-à-dire nos tweets et toutes ces données sont également correctes. Voyez ici que nous avons ce dossier bin. Mais ici, nous avons ce signe métrique, qui signifie simplement que nous pouvons supprimer ces tweets de notre section profil. J'espère que vous avez beaucoup apprécié et appris. Dans la vidéo suivante, nous travaillerons pour montrer les informations correctes dans cette section de profil. Merci. 24. Montrer les données utilisateur dans la page de profil: Bonjour, bon retour. Dans cette vidéo, nous allons travailler sur cette section de profil. Accédez au fichier profile dot js. Tout d'abord, nous devons importer quelques éléments. Cette copie, cette chose CDX qui est utilisée avec effet d'utilisation de statine. Ensuite, nous avons besoin de lettres en gras des mangeurs. Importez l'arborescence Web, le modèle, trois modèles, puis importez à partir d'icônes. Maintenant, nous aurons besoin de beaucoup d'États. Commençons par récupérer les informations du compte actif à partir de ce stockage local. Jason. Barres. Stockage local, point get item, compte actif. De même, je vais simplement copier et coller quelques fois. Le deuxième sera le nom d'utilisateur. Ici, ce sera le nom d'utilisateur, puis ce sera la bio de l'utilisateur. Ce sera la bio de l'utilisateur. Ensuite, il s'agit de l'image utilisateur. Nous avons l'image de l'utilisateur, puis c'est Utiliser la bannière. Le nom de la clé est alors bannière utilisateur. Ensuite, j'aurai un état appelé solde du compte. Le solde du compte est égal à celui que vous avez indiqué. Le premier état sera 0. Je vais également récupérer le solde de ce compte à partir du portefeuille et l' afficher sur notre site Web. Il suffit donc d'écrire une fonction sinc, de compter, d'équilibrer. Comme ça. J'aurai le modèle d'arbre de verbes, modèle, le nouveau modèle d'arbre Web. Ensuite, cette connexion, comme toujours, connexion des canons est que nous attendrons module Web trois 18. Il devra modéliser cette connexion. Alors je vais laisser, laisser. Vida est due à de nouveaux mangeurs, fournisseurs, web à fournisseur. Nous devons envoyer cette connexion. Dirige alors. Valence est égale à attendre. Soit obtenir l'équilibre. Nous devons envoyer ce numéro de compte, qui se trouve dans le compte actif. Stockage local. Ensuite, je vais juste convertir par des lentilles un bon mangeur. Fais Tails. forme un tableau par points. Super, nous étions très longs. Je vais ajuster les gènes qui s' équilibrent à la sous-chaîne. Afficher quatre chiffres uniquement de 0 à quatre. C'est ça. Et je vais laisser régler le solde du compte, l'équilibre. Ensuite, dans l'effet américain, j'appellerai cette fonction obtenir le solde du compte. Et je vais montrer ces informations ici qui sont classées par nœud, seront la bannière utilisateur. Ensuite, le profil, l'image sera utilisé nom de l'image. S'il y a un nom, un nom d'utilisateur. Ici, ce sera un compte actif. Ensuite, je montrerai la magie. Je peux écrire le solde du compte comme ceci. Ensuite, vous avez la bio de bluff utilisateur. Je vais simplement écrire la biographie de l'utilisateur ici. Le nom d"utilisateur est leur image bio par tout n"est pas là. Disons : « Eh bien, tu vois, j'ai 4,7. Dramatique, c'est ma photo de profil. Le numéro de compte, le nom d'utilisateur, la biographie de l'utilisateur ne s'y actuellement car il s' agit d'un nouveau compte. Nous le mettrons à jour ultérieurement. Mais cette section de profil fonctionne parfaitement. Merci. 25. Fonction pour supprimer un Tweet: Bonjour, bon retour. Dans cette vidéo, nous allons travailler sur la fonction de suppression d'un tweet. Donc, évidemment, dans cette section de profil, nous avons ce bouton de la dette qui est de supprimer huit semaines. Passons à ce profil qui js et C ne sont pas dans les chaises à points de profil. Nous devons coder pour le faire en fluide. Ici. Et voici ce que vous verrez. Nous l'avons été. Il suffit d'aller ici. Ensuite, la fonction le nomme, poids différé. Nous aurons besoin de cet identifiant de tweet pour cela. Ensuite, le fichier FASTA Je définirai l'état de téléchargement sur Non chargé. Ensuite, j'aurai besoin de quelques jours pour modéliser. Connexion de l'un des deux. Les données Ebi sont égales ici, elles seront supprimées à huit. Ensuite, id, et nous devons envoyer à ce que cela soit supprimé. Attendez ensuite le poids du point de données. Ensuite, je montrerai dans la notification, le succès. Avec succès. Une audition. Sombre, brillant. Maintenant, nous pouvons également donner un peu de valeur par défaut. Nous pouvons changer l'icône. Je vais changer l' icône pour cette corbeille. Et après cela, j'appellerai charger mes tweets juste pour les rafraîchir. Ok ? Ensuite, dans ce onclick, nous devons écrire, supprimer pour attendre et le faire. ID de point. C'est ça. Il s'agit de la modification non éclairée requise. Maintenant, sauvegardez tout n. Juste pour simplifier, j'ai déjà ajouté un autre tweet, que je vais maintenant supprimer. Tu vois, c'est un tweet. Sans image. Je vais cliquer sur cette icône et voir où il y a du retard pour confirmer que la nuit prendra du temps comme toujours. Vous voyez, ce tweet a été supprimé avec succès, que Twitter a maintenant disparu de notre écran de profil ainsi que de l'écran d'accueil. Cela signifie que la fonctionnalité de suppression fonctionne également parfaitement. C'est tout pour cette vidéo de la prochaine session. Merci. 26. Fonction de mise à jour des détails du profil: Bienvenue dans la vidéo finale où nous allons travailler sur la page Paramètres pour mettre à jour les informations d'un utilisateur. Accédez au fichier settings.js. Et commençons à travailler. Depuis le cœur. J'aurai besoin d'une notification de chargement et d'utilisation. Ensuite, à partir de React, je vais demander la date d'utilisation et l'effet d'utilisation Ensuite, je vais importer des choses. Je pense que si je vais au profil, les chaises sont à la maison. Je trouverai toutes ces choses ici. Et nous allons simplement coller ce site Web pour modéliser avec une adresse de contrat et un stockage. Ensuite, pour indiquer ABI et le stockage Web. Maintenant, dans la page des paramètres, j'aurai besoin, je vais laisser la première notification. Est-ce que c'est bien d'utiliser la notification ? Alors nom d'utilisateur const ? Est-ce que ça va à Jason, bars, stockage local, point get item, nom d'utilisateur. De même, j'aurai besoin d'une biographie utilisateur. Utilisez l'image et la bande utilisateur comme ceci. Ensuite, j'ai le fichier de profil Prof, puis le nom du fichier binaire. La première chose qu'il aura est la bio du nom d'utilisateur, le premier état qu'il aura la bio de l'utilisateur. Alors j'aurai rebondi. État de chargement et de chargement. Utilise les barres. Alors laisse Phi. Seigneur, vous allez utiliser l'image dès le début que URL de téléchargement de Ben est égale au panneau utilisateur. Je vais tout expliquer. Mais ici, ce que je fais est ici nom, le tout premier, au tout début, il aura un nom d'utilisateur prédéfini, qui se trouve dans le stockage local, a montré que. Donc ici je vais écrire, j'en écrirai deux ou cela aidera comme espace réservé, quel que soit le nom précédent. Juste pour cette raison. Maintenant, je vais avoir des fonctions. Pour ça. Je vais simplement à nouveau aller à l'accueil point js, obtenir la fonction de fichier de porte poussière ici, le coller. Ici. Il aura sélectionné le fichier. Il aura sélectionné le fichier et tout est maintenant k. Et je vais retourner cette URL de téléchargement IPFS. Cette URL de téléchargement, je la renverrai. Toutes les autres choses. Ce sera le plomb. Parce que cela n'était pas prédéfini. C'est ce que nous déclarons ici. Ok ? Ensuite, dans leur gestionnaire de bannières, nous avons ceci, c' est-à-dire que nous n'avons rien à changer dans leur gestionnaire de profil. Événement. Ce profil. Ok. Et nous allons juste faire en sorte que cet effet énorme soit fait avec des éléments MDF. Et il changera en fonction, chaque fois que cet état de chargement change, il actualisera la page. Ensuite, nous devons écrire la fonction. Nous devons écrire la fonction pour mettre à jour le profil. Maintenant, ce que je vais faire définit le chargement sur true. Alors si le profil Phi n' est pas égal à null, alors nous devons faire une nouvelle piste, un nouveau fichier. Url est égal à wait store file. Et nous devons envoyer un fichier Ajouter un profil comme celui-ci. Ensuite, nous allons écrire le chargement du profil. C'est ici. Ça l'est. Phy payload que vous êtes exécuté. Par. Téléchargez maintenant cette URL. Ok. Je vais simplement y aller et l'insérer ici. Celui-ci est un nouveau profil téléchargé ici. Il s'agira d'une nouvelle URL de téléchargement de fichier Raw si l'utilisateur a modifié quelque chose. De même, ce que je ferai est que si le fichier de bannière change, ce que je ferai c'est que j'entends vraiment comme nouvelle URL téléchargée par la bannière. Et pourtant je vais aimer le fichier de bannière. Et puis encore une fois, ici je vais changer en n'étant pas téléchargé. Et ici, cela changera car ce sont des conditions car l'utilisateur peut ou non modifier la photo de profil. Il veut juste changer leur nom d'utilisateur. C'est à lui de décider. C'est pourquoi je fais tant de vérifications IF. Ok. Ensuite, j'exigerai, une fois, moins de choses. Poids. avait beaucoup de code. Donc maintenant je pense juste où ici, ce code encore et encore nous devons aller dans les paramètres ici J'ai cette date de base. Nous devons modéliser, nous avons la connexion, le centre. Ensuite, nous avons ce Twitter Aba ici. Nous aba point aba. Ensuite, nous avons cette transaction qui est capable de se contracter. Utilisateur de mise à jour point. Le nom d'utilisateur, l'URL téléchargée du fichier bio, bannière, l'URL téléchargée comme ceci. Ensuite, j'ajouterai wait transaction ce poids et mettrai à jour ce changement. Maintenant, nous devons nous assurer que nous mettons également à jour le stockage local. Nom d'utilisateur, JSON.parse, chaîne de caractères, nom. Utilisez ensuite bio. Jingle Fi, biographie. Vous êtes une image, une URL de profil téléchargée, une bannière. Par URL non téléchargée. Ensuite, je vais simplement envoyer une notification. Succès. Très bien. Réussir l'audition debout. Et enfin, nous ajouterons set loading false. Celui-ci a donc la fonction de télécharger l'URL. Enfin, nous devons également renvoyer du HTML. Ici. Le nom est mort. Sur les changements. Le S simplement que nous devons ajouter de la valeur est égal au nom d'utilisateur. De même, ici nous devons écrire value is equal to use bio. Ensuite, nous avons l' image de profil, ce qui est correct. Nous avons également ces images de bannière. Kay ? Ensuite, je vais juste montrer un chargement qui s'il est en cours de chargement, puis afficher un div LastName Save. Et je vais juste montrer le bouton de chargement ici. Et s'il ne charge aucun onclick, onclick, je vais simplement appeler la mise à jour. Il s'agit de cette fonction. Je vais le couper et le coller ici. Maintenant, sauvegardons tout. Voyons voir, j'espère que tout va bien. Il suffit de le nommer. Nous étions trois. Photo de profil du développeur. Je vais me changer pour Ben. Et je vais écrire ici. Je vais changer ça. J'ai essayé de changer le binaire pour celui-ci. Évidemment, cela prendra un certain temps car il s'agit de deux images téléchargées sur IPFS et toutes simplement enregistrées. Attends un peu de temps. Il demande donc une mise à jour. C'est pourquoi la confirmation de transaction plus forte. Attendons. Donc, le profil des morts a réussi ce spectacle. Passons maintenant à notre profil. Tu vois, c'est tellement beau. Toutes nos informations sont désormais mises à jour. Nous avons cette photo de profil, nous avons lancé cette nouvelle bannière. Si je vais sur l'écran d'accueil, voir ici, et ma photo de profil a également changé. Donc toutes les fonctionnalités et maintenant parfaitement fonctionnelle, notre application est terminée. J'espère que vous avez beaucoup apprécié et appris. Dans la vidéo finale suivante, nous allons juste tester à nouveau cette application complète et voir s'il y a un bogue ou non. Merci. 27. Testez l'application complète: Bonjour, bienvenue à la vidéo finale de ce cours. Dans cette vidéo, nous allons tester cette application complète. Commençons donc. Tout d'abord, je vais simplement copier l'hôte local et créer une nouvelle fenêtre de navigation privée. Ici, je n'ai pas installé de masse de matière. Voyons ce qui se passe. Voir une installation normale et stupide. Si je clique sur OK, cela va directement sur le site Web MetaMask. L'utilisateur doit donc l'installer pour visiter notre application pour cela. Cela le rend sans erreur. Et maintenant, changeons de compte. À l'origine, ce compte était déjà connecté, et j'ai également ajouté un nouveau tweet. Nous allons maintenant utiliser cet arbre de compte et cliquer sur Connecter le masque métallique. Souvent, indéfiniment, il demandera à jour le profil de profondeur. Voyons quelles sont les données que j'obtiens. Alors tu vois, c'est l'heure que j'ai et c' est la page d'accueil. Et ce tweet a été créé à partir de mon autre compte. Si je vais dans la section profil ici, aucun tweet disponible ne s'affichera. Et aussi, si vous le souhaitez, vous pouvez simplement changer la couleur de ce noir en blanc. Ça n'a pas l'air bien. Et maintenant, je vais juste le dire aussi. C'est à partir du second compte. Et je dis juste « peaufiner ». Confirmez-nous ce tweet, modifiez-le avec succès. Évidemment, cela a pris un certain temps, mais il est maintenant ajouté avec ce point r aléatoire. Et vous pouvez voir que nous avons cela aussi bien démontré aller et aller dans les paramètres et simplement changer pour. Je vais simplement écrire ici. Mark Zuckerberg, fondateur des réseaux sociaux. Et il suffit de le sauvegarder. Enregistrer le profil mis à jour avec succès Si je vais au profil, m'appelle Mark Zuckerberg. Et voici vraiment juste Mark Zuckerberg. Toutes ces sections fonctionnent parfaitement. Sur le côté droit. Vous pouvez simplement faire la publicité que vous voulez. Supposons des cours de formation, des actualités tendance, des blogs tendance, tout ce que vous voulez, vous pouvez simplement le coder en dur sur votre site Web. J'aimerais maintenant vous montrer les fonctionnalités que nous avons ajoutées. Supposons que si nous changeons le compte d'une escroquerie, voulons également un compte. Vois si je le connecte. Encore une fois. Il a connecté l'icône du polygone, celle-ci. Et maintenant je le suis de nouveau, revenez à mon premier compte. Tout cela se fait donc ici. Ça l'est. Dans le fichier app.js. Nous avons un compte change et change les gènes et tout. Alors, que se passera-t-il si je change le réseau de polygones pour qu'il devienne mou ? Vous voyez, il s'agit donc d'un réseau à deux polygones. Et maintenant, si je clique ici, il nous demande de changer de réseau. Et si je change de réseau, je suis renvoyé sur le site Web sinon je ne pourrai pas le visiter. Ce site Web possède donc toutes les fonctionnalités. Tout fonctionne. Vous pouvez simplement le mettre en ligne et éventuellement le mettre dans votre portfolio, c'est à vous de décider. J'espère que vous avez apprécié. Assurez-vous également de regarder mes autres cours. Merci. Passez une bonne journée et continuez à vous entraîner.