1 00:00:02,120 --> 00:00:07,130 Commençons par gérer l'état de chargement ici sur l'écran d'authentification, car je veux évidemment donner 2 00:00:07,130 --> 00:00:10,570 à l'utilisateur des commentaires lorsque nous attendons actuellement une réponse. 3 00:00:10,670 --> 00:00:17,060 Pour cela, nous pouvons importer l'indicateur d'activité que vous connaissez déjà et gérer l'état de chargement 4 00:00:17,810 --> 00:00:26,990 ici en ajoutant un autre état ici, isLoading et définissez isLoading que nous initialisons sur false car initialement nous ne chargeons pas et 5 00:00:26,990 --> 00:00:36,470 maintenant ici quand nous sommes dans cette authentification gestionnaire, je peux ajouter async ici car bien sûr, inscrivez-vous ici renvoie une promesse, la même 6 00:00:37,370 --> 00:00:39,860 chose pour la connexion, donc 7 00:00:39,920 --> 00:00:46,040 ces fonctions de création d'actions renvoient des promesses. Nous pouvons donc attendre le résultat de 8 00:00:46,070 --> 00:00:52,820 l'envoi qui utilise finalement ces promesses que nous obtenons et démarre essentiellement tout ce processus et avant d'attendre 9 00:00:52,820 --> 00:00:56,890 cela, je peux définir isLoading sur true, donc lorsque nous commençons 10 00:00:56,900 --> 00:01:02,720 tout ce processus, avant d'envoyer une demande puis définissez isLoading sur false une fois que 11 00:01:02,840 --> 00:01:06,480 nous avons terminé cette demande, qu'elle échoue ou non. 12 00:01:07,720 --> 00:01:10,320 Et maintenant isLoading peut être utilisé pour afficher une filière 13 00:01:10,330 --> 00:01:15,760 de chargement, c'est à vous de décider où vous l'afficher, par exemple, vous pouvez dire que vous souhaitez remplacer ce 14 00:01:15,760 --> 00:01:17,890 bouton d'inscription par la filière de chargement. 15 00:01:17,890 --> 00:01:21,420 Donc, ici, nous pourrions dire si isLoading est vrai, je 16 00:01:21,490 --> 00:01:25,010 veux montrer l'indicateur d'activité comme ça, sinon je montrerai le 17 00:01:25,090 --> 00:01:27,520 bouton, donc c'est la syntaxe que nous 18 00:01:27,520 --> 00:01:29,590 pourrions utiliser, définissez la taille 19 00:01:29,590 --> 00:01:38,510 ici sur petit et la couleur sur Couleurs. disons primaire. Maintenant, si nous essayons et que nous 20 00:01:38,510 --> 00:01:47,660 revenons, ici sur iOS si j'essaie de me connecter, en effet je vois le spinner de chargement et puis je suis de retour, 21 00:01:47,900 --> 00:01:48,410 donc 22 00:01:48,410 --> 00:01:54,800 ça marche, maintenant pour la gestion des erreurs. Pour la gestion des erreurs, vous apprenez également comment cela fonctionne. 23 00:01:54,830 --> 00:01:58,900 Vous pouvez bien sûr également gérer votre état d'erreur ici, 24 00:01:58,940 --> 00:02:05,180 vous pouvez également utiliser use reducer pour fusionner le chargement et l'état d'erreur en un 25 00:02:05,180 --> 00:02:06,250 seul objet, 26 00:02:06,470 --> 00:02:11,540 mais je le ferai comme ceci, erreur et définir l'erreur à l'aide 27 00:02:11,570 --> 00:02:22,010 de l'état d'utilisation qui ne le fait pas initialement N'attribuez pas de valeur de sorte que cela ne soit pas défini au départ, puis ici, nous 28 00:02:22,010 --> 00:02:27,140 pouvons envelopper la capture autour de cette répartition ici où nous obtenons une 29 00:02:27,140 --> 00:02:34,640 erreur potentielle et définir notre erreur sur ce message d'erreur que nous recevons et avant d'envoyer la demande, Je 30 00:02:34,640 --> 00:02:41,420 veux également remettre mon erreur à null. Alors maintenant, nous stockons une erreur potentielle ici dans set error et 31 00:02:41,610 --> 00:02:45,620 je veux simplement lancer une alerte, afficher une alerte à l'utilisateur si nous obtenons une erreur. 32 00:02:45,630 --> 00:02:52,110 Donc, pour cela, vous devez vous assurer que vous importez l'alerte à partir de React Native 33 00:02:52,110 --> 00:02:58,860 et que vous utilisez également l'effet de react car use effect nous permet de réagir aux modifications 34 00:02:58,860 --> 00:03:09,340 de l'état d'erreur et d'afficher l'alerte d'erreur si nous avons une erreur. Alors peut-être qu'ici après avoir configuré le réducteur, nous pouvons ajouter un effet d'utilisation et 35 00:03:09,340 --> 00:03:14,620 ma dépendance ici est la variable d'état d'erreur ou constante et si nous avons une 36 00:03:14,620 --> 00:03:23,190 erreur, donc si c'est vrai, alors je veux afficher une alerte avec l'alerte API où je dis qu'une erreur s'est produite et mon message est 37 00:03:23,910 --> 00:03:29,580 l'erreur qui devrait être une chaîne et j'ajouterai un bouton où j'ai un texte OK et bien 38 00:03:29,940 --> 00:03:34,840 sûr vous pourriez ajouter plus de boutons où vous faites des choses différentes. 39 00:03:34,930 --> 00:03:41,950 Maintenant, nous pouvons simuler cela dans le créateur d'action en allant là-bas et pour vous connecter, disons que nous supprimons ce D ici, 40 00:03:42,370 --> 00:03:49,350 afin que ce soit une URL incorrecte à la fin. Si nous essayons maintenant de nous connecter 41 00:03:52,500 --> 00:03:54,790 ici, j'obtiens cette erreur. 42 00:03:54,810 --> 00:03:55,340 C'est 43 00:03:55,350 --> 00:04:01,920 bien, mais il y a aussi d'autres types d'erreurs que je veux gérer, par exemple si je 44 00:04:01,920 --> 00:04:08,930 me connecte avec une adresse e-mail qui n'existe pas? Bien sûr, je veux aussi montrer une erreur à l'utilisateur et 45 00:04:08,930 --> 00:04:15,670 je le fais, mais je montre seulement que quelque chose s'est mal passé, ce qui n'est pas exactement l'erreur que je voudrais montrer. 46 00:04:15,700 --> 00:04:21,850 Maintenant, je montre cette erreur parce que dans le créateur d'action ici, si la réponse n'est pas correcte, je lance quelque chose qui 47 00:04:21,850 --> 00:04:22,690 a mal tourné. 48 00:04:22,690 --> 00:04:27,910 Maintenant, le problème est lorsque nous envoyons un e-mail incorrect ou un mot de passe incorrect, également en 49 00:04:27,910 --> 00:04:35,410 passant pour vous inscrire si nous envoyons quelque chose qui n'est pas un e-mail ou un mot de passe trop court, si cela se produit, alors 50 00:04:35,410 --> 00:04:42,890 nous récupérer une réponse avec un code d'état de 400 quelque chose et nous obtenons des détails d'erreur dans le cadre de la réponse et en 51 00:04:42,890 --> 00:04:43,750 ce moment 52 00:04:43,760 --> 00:04:46,490 avec notre gestion des erreurs, nous ne les voyons 53 00:04:46,740 --> 00:04:50,590 pas, nous devons donc changer cela. Au lieu de lancer immédiatement une 54 00:04:50,600 --> 00:04:53,730 erreur ici si la réponse n'est pas correcte, je veux toujours l'examiner. 55 00:04:53,870 --> 00:04:57,980 Je vais donc avoir mes données de réponse 56 00:04:57,980 --> 00:05:06,230 d'erreur que j'obtiens en attendant la réponse JSON ici. Je fais donc la même chose que dans le cas de réussite, mais je l'extrait dans un 57 00:05:06,250 --> 00:05:09,550 champ différent et maintenant ici, je veux consigner les données de réponse d'erreur 58 00:05:09,580 --> 00:05:12,710 afin que nous ayons une idée de ce à quoi cela ressemble. 59 00:05:12,720 --> 00:05:20,680 Alors maintenant essayons d'entrer une adresse e-mail qui n'existe plus et maintenant nous obtenons notre étrange erreur que vous venez de voir mais maintenant nous avons cette 60 00:05:20,680 --> 00:05:25,600 sortie intéressante ici et vous voyez que c'est l'objet d'erreur que Firebase m'a renvoyé et bien sûr 61 00:05:25,600 --> 00:05:26,870 cela dépend de l'API 62 00:05:26,920 --> 00:05:30,130 à laquelle vous parlez, du type d'erreur que vous obtenez, du 63 00:05:30,130 --> 00:05:35,560 moment où vous l'obtenez et des détails qu'il contient. Comme vous le voyez, c'est un objet 64 00:05:35,560 --> 00:05:43,060 qui a une clé d'erreur qui est encore un autre objet qui a un code d'erreur, quelques détails sur les 65 00:05:43,060 --> 00:05:48,490 erreurs et ensuite ce message qui est par exemple un email non trouvé et 66 00:05:48,490 --> 00:05:53,060 c'est la partie qui m'intéresse. D'ailleurs, dans les documents officiels, vous trouverez plus d'identificateurs d'erreur 67 00:05:53,080 --> 00:05:55,860 potentiels que vous pourriez obtenir. Donc à 68 00:05:55,890 --> 00:06:04,800 la fin, c'est ce que je veux vérifier maintenant. Je veux obtenir mon ID d'erreur, disons à partir des données de réponse 69 00:06:04,800 --> 00:06:11,160 d'erreur en accédant au champ d'erreur qui est ce champ qui me donne accès à cet objet qui a ensuite 70 00:06:11,160 --> 00:06:12,580 ce champ de message. 71 00:06:12,720 --> 00:06:19,470 Donc donc ici, j'accède ensuite au message pour obtenir ce message et maintenant nous pouvons le vérifier, nous pouvons 72 00:06:20,040 --> 00:06:27,260 vérifier si l'ID d'erreur est égal à l'e-mail introuvable. Si c'est le cas, je veux définir mon propre message 73 00:06:27,270 --> 00:06:33,090 personnalisé, alors ici je vais ajouter un message variable qui est juste quelque chose qui a mal tourné 74 00:06:33,300 --> 00:06:38,580 par défaut mais ici si nous savons que le problème est que nous n'avons pas trouvé 75 00:06:38,610 --> 00:06:44,550 d'e-mail adresse, nous pourrions dire que cet e-mail est introuvable et j'ajouterai plus si vérifie dans une seconde. 76 00:06:44,550 --> 00:06:49,650 C'est donc quelque chose que je veux vérifier ici et à la fin, j'ai donc un message que je veux maintenant lancer, 77 00:06:49,650 --> 00:06:50,100 donc 78 00:06:50,130 --> 00:06:55,860 maintenant je vais lancer une nouvelle erreur avec mon propre message personnalisé. Donc, une autre vérification que 79 00:06:55,860 --> 00:07:03,890 je veux ajouter avec une instruction else / if ici est de savoir si l'ID d'erreur 80 00:07:03,890 --> 00:07:15,050 est pour la connexion à un mot de passe invalide, disons. Je peux donc vérifier cela et définir le message égal à ce mot de passe n'est pas valide et 81 00:07:15,050 --> 00:07:16,480 maintenant, essayons à nouveau. 82 00:07:16,580 --> 00:07:23,240 Revenons en arrière et entrez une adresse e-mail qui n'existe pas, connexion rapide et nous obtenons cette 83 00:07:23,250 --> 00:07:26,210 adresse e-mail introuvable ou cet e-mail introuvable. 84 00:07:26,430 --> 00:07:35,030 Essayons maintenant une adresse e-mail valide mais en fait un mot de passe non valide, comme celui-ci et nous obtenons ce mot de passe 85 00:07:35,030 --> 00:07:36,550 n'est pas valide, alors 86 00:07:36,590 --> 00:07:39,370 maintenant nous donnons à l'utilisateur une meilleure rétroaction. 87 00:07:39,410 --> 00:07:46,880 Maintenant, implémentons la même chose pour l'inscription, donc je vais copier cela et aller dans mon cas d'inscription ici et là J'ai 88 00:07:46,880 --> 00:07:49,310 juste des codes d'erreur différents, là j'ai 89 00:07:49,310 --> 00:07:52,130 des codes comme le courrier électronique existe, si 90 00:07:52,130 --> 00:07:54,270 cette adresse e-mail existe déjà. 91 00:07:54,560 --> 00:08:02,370 J'extrais donc mon ID d'erreur de la même manière, mais je vérifie qu'il existe un e-mail et si c'est l'erreur, je dis que 92 00:08:03,300 --> 00:08:04,740 cet e-mail existe déjà. 93 00:08:08,000 --> 00:08:09,710 Maintenant, c'est en fait la 94 00:08:09,710 --> 00:08:15,830 seule chose que je veux vérifier ici, il y a aussi d'autres erreurs que vous pourriez obtenir et vous pouvez par exemple 95 00:08:15,830 --> 00:08:20,860 simplement désactiver votre validation ici et voir quelle erreur vous obtenez si vous envoyez un e- adresse 96 00:08:20,870 --> 00:08:22,950 e-mail en enregistrant cet ID d'erreur et 97 00:08:22,960 --> 00:08:28,850 vous pouvez également le vérifier, ici je vais simplement implémenter ce message et donc maintenant si j'essaie de m'inscrire ici avec 98 00:08:28,850 --> 00:08:37,070 une adresse e-mail que j'ai déjà utilisée, comme celle-ci, j'obtiens cet e-mail existe déjà. D'un autre côté, si j'utilise une adresse e-mail valide, 99 00:08:37,100 --> 00:08:44,250 bien sûr, cela passe par et sur Firebase, alors en effet, si vous allez à l'authentification et 100 00:08:44,250 --> 00:08:47,530 actualisez cela, vous verrez ce deuxième utilisateur. 101 00:08:47,580 --> 00:08:52,040 Voici donc comment ajouter un spinner de chargement et une gestion des erreurs avec authentification. 102 00:08:52,080 --> 00:08:57,420 C'est très bien, mais maintenant, ce serait enfin bien de quitter cet écran et d'aller sur notre application, puis de commencer 103 00:08:57,420 --> 00:08:59,670 à travailler avec ce jeton que nous obtenons.