Maintenant, que nous avons terminé la mise à jour du côté serveur.
Il est temps de passer au client réactif.
Pour votre commodité, je vous ai fourni le référentiel GitHub,
qui contient la version finale du client qui est capable de communiquer avec
notre serveur API REST, puis de rendre les différentes vues pour notre client.
Donc, j'ai pris la réapplication que nous avons développée dans
le deuxième cours de la spécialisation et ensuite l'ai modifiée.
Nous ferons un bref tour à travers le code un peu plus tard.
Maintenant, vous allez cloner le dépôt Git sur votre ordinateur,
puis démarrer votre client, puis le voir communiquer avec notre ensemble de serveurs.
Voyons les détails ensuite.
Pour commencer cet exercice,
dans votre terminal ou fenêtre de commande,
allez à votre emplacement pratique, puis à l'invite, tapez git clone
https://github.com/jmuppala/conFusion-React.git, puis laissez
l'application React être clonée sur votre ordinateur.
Une fois le clonage terminé,
déplacez vers le dossier Confusion-React
qui vient d'être créé lorsque vous clonez ce dépôt Git.
Ensuite, vous remarquerez immédiatement qu'il y a déjà un tas de fichiers.
Maintenant, à l'invite, tapez yarn install,
afin d'installer tous les modules de nœuds
dont dépend cette application React.
Donc, une fois que les modules de noeud sont tous installés,
alors nous pouvons démarrer notre fil commencer à compiler et servir notre application React.
Une fois que tout est dans,
assurez-vous que votre serveur MongoDB est
opérationnel et que votre serveur API REST est également opérationnel.
Sinon, le client ne fonctionnera pas.
Donc, maintenant que vous avez installé votre client sur votre ordinateur,
ajoutez le début de fil de type invite
et votre application sera recompilée et servie dans un court laps de temps.
Une fois votre application compilée avec succès,
allez dans le navigateur et vous verrez que
votre application React démarre et est visible sur l'écran ici.
Vous remarquerez immédiatement que votre application est
capable de récupérer les données du serveur, puis de rendre
les différentes parties de votre application comme vous l'avez
fait à la fin de votre cours React.
Lorsque vous accédez au dossier À propos,
vous verrez également que la page A propos affiche également les informations.
En tant que tel plus tôt dans le menu,
vous voyez les éléments du menu s'afficher comme nous l'avons vu avec l'application.
Maintenant, en outre, j'ai ajouté
une page de plus à l'application d'une seule page appelée Mes favoris,
que vous ne pouvez pas accéder,
car aucun utilisateur n'est connecté à leur système.
Donc, vous voyez que je n'ai aucun utilisateur connecté au système.
Donc, c'est pourquoi il ne sert à rien d'indiquer mes favoris parce que vous ne savez pas
quel utilisateur comme favoris devrait être affiché ici et la page de contact comme d'habitude.
Maintenant, connectons-nous.
Pour vous connecter à notre application,
nous allons cliquer sur le bouton de connexion et vous verrez que la boîte de dialogue de connexion apparaît.
Ensuite, permettez-moi de me connecter en tant que l'un des utilisateurs enregistrés,
que nous avons enregistrés dans le cadre de ce cours plus tôt.
Donc, une fois que vous vous connectez,
vous remarquerez immédiatement que dans le coin droit,
vous voyez que le bouton de connexion s'est maintenant transformé en
déconnexion et le nom de l'utilisateur est indiqué ici.
Donc, quiconque est connecté est indiqué ici.
Vous pouvez également en principe remplacer cela par l'image de l'utilisateur.
Maintenant, pour cela, vous devez faire plus de modifications au
client et au serveur afin de prendre en charge l'affichage de l'image ici.
Mais pour le moment, je vous montre juste
comment nous pouvons facilement afficher les informations de l'utilisateur ici.
Donc, cela nécessitait une modification mineure à la tête du composant,
où je serai en mesure de récupérer le nom d'utilisateur.
Donc, une fois que l'utilisateur se connecte,
alors si vous cliquez maintenant sur Mes Favoris, vous
remarquerez qu'il n'y a rien dans Mes Favoris pour l'utilisateur.
Évidemment parce que l'utilisateur n'a pas encore choisi de favoris.
Alors, allons maintenant au menu.
Ensuite, dans le menu,
laissez-moi sélectionner un élément et ensuite nous ajouterons ce plat à nos favoris.
Donc, en descendant ici,
vous verrez le symbole du cœur là-bas,
cliquez dessus, et vous verrez que cela serait ajouté dans les favoris.
Le fait que cela a été ajouté dans les favoris,
est indiqué par le changement dans l'icône ici d'un cœur non rempli à un cœur rempli.
Maintenant, si vous allez à n'importe quel autre plat,
vous remarquerez que cela a un cœur vide, ce
qui signifie que ce n'est pas encore parmi nos favoris.
Donc, laissez-moi ajouter un élément de plus à
mes favoris, puis ajoutons un troisième élément à mes favoris aussi.
Donc, maintenant, vous verrez que si je vais maintenant à mes favoris,
vous verrez un ensemble de Mes Favoris s'afficher ici.
Donc, vous avez vu que je viens d'ajouter ces trois plats
à mes favoris et donc ceux-ci sont affichés ici.
Donc, ceci est suivi en utilisant
ce point de terminaison favoris sur
le côté serveur, selon ce qui est implémenté dans le cadre de votre dernière affectation.
Donc, si vous avez fait cette affectation correctement,
alors cette partie devrait fonctionner comme prévu.
Maintenant, nous pouvons également modifier Mon favori.
Donc, laissez-moi aller de l'avant et supprimer l'un des éléments de Mes Favoris.
Donc, quand je clique sur ce bouton, vous remarquerez immédiatement
que, cet élément est supprimé de Mes Favoris et disparaît immédiatement et
mes favoris sont mis à jour et vous voyez la valeur résultante affichée ici.
Par conséquent, notez que les Mes favoris seront affichés uniquement
pour les utilisateurs qui sont connectés au système.
Ainsi, vous remarquez immédiatement un ensemble de modifications qui ont été
apportées au client afin de prendre en charge
certaines de ces fonctionnalités supplémentaires que vous voyez ici.
Vous avez également vu la fonctionnalité de connexion et de déconnexion être prise en charge ici.
Donc, quand je clique sur le bouton de déconnexion,
vous remarquez immédiatement que l'utilisateur est déconnecté et
le nom d'utilisateur disparaît de là et
donc le bouton est également transformé en bouton de connexion.
Maintenant, donc, avec cela, vous remarquez comment mon client a été
mis à jour pour utiliser le nouveau serveur API REST,
afin de prendre en charge les favoris enregistrés côté serveur et
ensuite automatiquement reflétés dans l'application My Client comme indiqué ici.
Maintenant que vous avez vu l'application React modifiée en action,
il est temps de visiter le code source pour voir
exactement comment elle est implémentée et quelles sont les modifications
que nous avons apportées correspondant à l'application Redux à la fin du cours Redux.
Maintenant, les deux changements majeurs que vous remarquerez,
est le support pour les favoris et aussi le support d'authentification,
la connexion utilisateur et le support de déconnexion.
Maintenant, comment ces mesures sont-elles mises en œuvre ?
Nous commencerons notre parcours dans la partie Redux de notre application.
Donc, en allant dans la partie Redux,
visitons les types d'action.
Dans les types d'action, vous verrez maintenant que nous avons
trois nouveaux types d'action liés à leurs favoris.
Ainsi, vous verrez le chargement des favoris, les
favoris ont échoué, et ajouter des favoris,
qui comme vous vous attendiez à être là.
Ensuite, six types d'action différents liés à leur processus de connexion et de déconnexion.
Maintenant, de sorte que vous pouvez voir la demande de connexion, le succès de connexion, l'
échec de connexion, la demande de
déconnexion, le succès de déconnexion et l'échec.
Donc, nous allons voir comment ces types d'action sont réellement utilisés dans notre action créer.
Donc, aller dans les créateurs d'action,
donc c'est là que vous verrez le support pour les favoris ici.
Donc, nous allons d'abord examiner le support pour les favoris, puis après cela, nous allons
examiner le support de la prise en charge de l'authentification.
Donc, ici, vous verrez que nous avons de nouvelles méthodes ci-dessous
appelées FavoritesLoading, FavoritesFailed et AddFavorites.
Maintenant, à partir de vos expériences précédentes
vaisselleChargement et vaissellesFailed et addDishits et ainsi de suite.
Donc, ces choses vous sont très familières, de
sorte que c'est exactement le même type de configuration pour le code ici.
En outre, vous verrez une autre méthode ici appelée FetchFavorites,
qui est à nouveau comme je l'ai dit un réservoir Redux
, qui est implémenté ici,
où nous allons utiliser le fetch pour accéder au serveur pour récupérer les favoris.
Donc, ce sont les méthodes que vous verrez ici et puis aussi vous verrez
DeleteFavorite ici et aussi un réservoir Redux pour PostFavorite ici.
Donc, dans le PostFavorite comme vous vous y attendez,
vous afficheriez le favori sur le serveur ici.
Donc, notez ici comment nous utilisons l'autorisation.
Étant mis en place dans notre en-tête d'autorisation donc,
c'est quelque chose sur lequel je voudrais attirer votre attention en ce moment,
nous reviendrons à cela lorsque nous examinerons l'authentification et l'autorisation de l'utilisateur.
Donc, nous sommes en train de configurer l'en-tête d'autorisation comme celui-ci en utilisant fetch ici.
Donc, pour fetch, nous postons un élément dans le fetch
ici et vous remarquerez que la structure de la façon dont le fetch est fait est donnée ici.
Maintenant, chaque fois que vous publiez un favori ou supprimez un favori ou récupérez un favori
, nous aurons toujours
le serveur retourné à vous, l'ensemble des favoris, puis nous allons simplement ajouter ces favoris
dans notre magasin redux ici, donc c'est ce que nous faisons ici.
Encore une fois, la structure du code devrait vous sembler très familière,
si vous regardez simplement comment le favori de publication,
le favori de suppression, et les favoris de récupération sont implémentés.
Donc, tout cela va gérer la question des favoris.
Maintenant, comment exactement les favoris eux-mêmes sont-ils implémentés ?
Ainsi, la fonction de réducteur est implémentée dans la structure préférée ici.
Donc, à l'intérieur de cette fonction réduite,
vous verrez comment nous gérons l'ajout de favoris, le
chargement des favoris et les favoris a échoué ici.
Encore une fois, le code devrait vous sembler très
familier en fonction de votre expérience avec les fonctions de réducteur que vous avez vues pour redux auparavant.
Donc, faites encore une fois un peu d'attention à la façon dont le code est implémenté.
C' est assez simple, donc je ne passe pas
trop de temps à expliquer comment ces choses sont mises en œuvre.
Maintenant, en profitant de ceux-ci,
nous avons dans les composants, nous avons maintenant
un nouveau composant favoris dont le travail est de rendre toute la liste de nos favoris.
Donc, ici vous voyez que le composant favoris lui-même,
la structure du composant favoris est très similaire à
la structure du composant de menu donc ici nous avons
le composant favoris qui est implémenté en tant que composant fonctionnel et
là nous rendons les favoris dans ici comme vous le voyez dans le code ici.
Encore une fois, très simple, je pense que vous devriez être en mesure de
comprendre facilement comment le composant favoris est
implémenté en ayant eu de l'expérience avec la façon dont le composant de menu est implémenté là.
Donc, encore une fois, je ne passe pas trop de temps à expliquer le code ici.
Maintenant, l'analyse à travers le code est également
une bonne expérience pour vous d'apprendre comment le code est implémenté afin de
traiter ce code dans votre propre tête vous aidera à comprendre
à nouveau pour consolider votre compréhension de réagir plus en détail.
Donc, je vais laisser ça comme un exercice pour vous.
Maintenant, je souligne où les changements ont été
faits pour implémenter le support pour les favoris.
Maintenant, le terme préféré,
favoris est également l'effet de levier dans
le composant de détail de plat et à l'intérieur du composant de détail de plat,
vous verrez que nous avons l'additionnel- Ici,
dans le plat de
rendu composant fonctionnel, nous allons rendre le bouton qui prend en charge
la sélection ou lorsque vous cliquez sur le contour du cœur,
il ajoutera cet élément particulier dans votre liste de favoris.
Donc, tout cela est supporté ici en utilisant ce bouton ici qui
appelle comme vous voyez cette fonction appelée post favori qui est le redux.
Merci que nous avons mis en œuvre là et ce support pour cela
est implémenté dans les composants principaux donc quand vous allez dans le composant principal,
vous verrez comment le favori de poste est mis en œuvre ici
et vous verrez également que cela est
inclus dans la carte envoyée aux accessoires et donc le post favori mis en œuvre.
Donc, vous voyez que la structuration est très la
même que ce que vous avez vu pour l'autre code là-bas.
Donc, je ne vais pas passer trop de temps sur la façon dont le support des favoris est implémenté,
permettez-moi plutôt de passer un peu plus de temps sur
la façon dont l'autorisation et l'authentification de l'utilisateur sont prises en charge dans le code ici.
Maintenant, pour l'authentification de l'utilisateur,
ce que nous faisons ici est que lorsque vous allez dans le magasin de configuration ici,
vous verrez que j'ai une autre fonction de réducteur appelée Auth qui est implémentée ici.
Donc, cela suivra la partie autorisation de celui-ci.
Maintenant, comment cela est-il mis en œuvre ?
Encore une fois, aller dans les créateurs d'
action, les types d'inaction nous avons déjà vu l'ensemble des actions liées à la connexion et la déconnexion.
Donc, en allant dans les créateurs d'action,
vous verrez que ici nous avons
toutes les fonctions qui sont implémentées pour la connexion et la déconnexion.
Donc, vous verrez une nouvelle fonction appelée login request, receive logging,
et donc ce sont quand la connexion est réussie et ainsi de suite, mais en particulier,
cette fonction particulière ici de l'utilisateur de connexion est l'endroit où nous commençons avec le processus de connexion.
Donc, nous allons envoyer la connexion de la demande au moment où l'utilisateur essaie de se connecter,
après cela, nous allons faire une récupération aux utilisateurs barre oblique point de terminaison de connexion avec
le post et cela contient dans le corps du message les informations d'identification de l'utilisateur ici.
Donc, une fois que nous faisons la récupération,
si la réponse est correctement renvoyée,
alors la réponse devrait contenir le jeton là.
Donc, nous allons traiter cette réponse ici et ensuite si la connexion a réussi,
alors nous allons stocker le jeton dans le stockage local ici.
Donc, vous pouvez voir que nous disons LocalStorage définir jeton de
réponse de jeton d'élément et ensuite nous allons
également stocker les informations d'identification de l'utilisateur dans le stockage local ici.
Donc, ces deux-là m'aideront à suivre le processus de connexion de l'utilisateur.
Après cela, nous enverrons ensuite le login de réception.
Maintenant, à ce stade, lorsque l'utilisateur est connecté avec succès,
nous allons également chercher les favoris pour l'utilisateur.
Rappelez-vous maintenant que vous ne pouvez récupérer les favoris que pour un utilisateur connecté.
Lorsqu' aucun utilisateur n'est connecté, il n'y a pas de favoris à récupérer,
mais lorsque l'utilisateur se connecte avec succès, vous voulez récupérer
le favori de l'utilisateur afin qu'il puisse l'afficher dans votre application de réaction.
Donc, c'est pourquoi je fais aussi une recherche favoris
ici et puis nous recevrons la connexion ici.
Ensuite, s'il y a une erreur, nous enverrons l'erreur de connexion ici.
Ainsi, toutes ces fonctions l'erreur de connexion de réception et de connexion
appellera alors les fonctions de réducteur appropriées qui sont implémentées dans le fichier Auth.Js.
Donc, en allant dans le fichier Auth.Js,
l'état ici suit l'état de connexion de l'utilisateur ici.
Donc, ici, nous allons également stocker dans l'état,
l'état implique le booléen de chargement Est qui
suit si vous êtes en train de vous connecter. La facilité d'authentification -
Indiquera si l'utilisateur est authentifié et si l'utilisateur est connecté, de
sorte que vous serez en mesure d'autoriser l'utilisateur.
Par conséquent, cet indicateur est utilisé dans de nombreuses circonstances
pour afficher l'état de connexion de l'utilisateur, puis également
la propriété de l'utilisateur pour l'état suit les informations d'identification de l'utilisateur.
Donc, c'est là que nous obtiendrons le nom d'utilisateur pour l'affichage dans notre composant d'en-tête.
Maintenant, ici vous verrez la demande de connexion et lorsque le succès de connexion est déclenché,
alors vous stockerez la valeur du jeton ici, puis l'échec de connexion.
La demande de déconnexion, déconnexion réussie,
tous ceux-ci sont gérés par ces différentes parties à l'intérieur de ce réducteur le réducteur auth.js ici.
Donc, c'est ainsi que l'authentification de l'utilisateur est gérée ici.
Maintenant, dans le composant d'en-tête,
aller dans le composant d'en-tête,
donc c'est là que nous avons la fonction de connexion ici.
Donc, le HandleLogin, vous vous souvenez que nous avons
déjà implémenté cela dans le cours de réaction.
Dans le HandleLogin, ils activeront le modal.
Donc, nous allons fermer le modal et ensuite nous allons connecter l'utilisateur à ce stade.
Donc, nous dirons ceci .props LoginUser et vous verrez que les informations d'identification, le nom d'
utilisateur et le mot de passe sont transmis en tant que paramètres à
l'utilisateur LoginUser et que cela pénètre dans le func LoginUser,
qui s'occupe ensuite de la connexion à l'utilisateur.
Maintenant, comment affichez-vous l'état de connexion de l'utilisateur.
Donc, c'est encore très simple.
Dans la barre de navigation ici,
vous verrez que j'ai ajouté un nouvel élément ici.
Donc, c'est là que nous dirons this.props.auth.isAuthenticated.
Donc, l'indicateur isAuthenticated est utilisé ici par moi et donc si cela est réglé sur true,
alors j'afficherai
le bouton Déconnexion ici et c'est donc la chose que je vais afficher ici.
Sinon, j'afficherai le bouton de connexion.
Donc, en utilisant ce drapeau isAuthenticated,
je retourne quel bouton particulier va être affiché dans
l'en-tête là, que vous affichiez le bouton de déconnexion ou le bouton de connexion.
Donc, c'est le point que nous montrons ici.
Donc, la connexion ou la déconnexion ici.
Donc, c'est comme ça que nous gérons le processus de connexion et de déconnexion
ici et aussi nous allons afficher le nom d'utilisateur juste là.
Ainsi, lorsque vous affichez le bouton de déconnexion,
vous verrez également que nous affichons le nom de l'utilisateur.
Donc, en bas ici,
nous allons également afficher le bouton
HandleLogout et ensuite nous avons le bouton de déconnexion affiché ici.
En outre, cette déclaration particulière ici,
c'est ainsi que nous affichons le nom d'utilisateur ici.
Donc, cela utilise le this.props.auth.user.username.
Donc, la propriété utilisateur dans l'état auth contient les
informations d'identification de l'utilisateur et à partir de là j'ai récupéré le nom d'utilisateur, puis j'
utilise cela pour afficher cela dans la barre d'en-tête.
C' est ainsi que le composant d'en-tête est
mis à jour afin de gérer le processus de connexion et de déconnexion.
Encore une fois, des moyens assez simples de mise en œuvre,
c'est assez simple que j'ai mis en œuvre ici.
Maintenant, évidemment, si vous voulez une façon plus complexe de gérer le processus de connexion et de déconnexion,
vous pouvez certainement aller dans la façon complète de faire les choses,
mais cela suffit pour répondre aux exigences de mon application.
Donc, j'ai implémenté le processus de connexion et de déconnexion
d'une manière très simple ici en utilisant l'aide du magasin Redux.
Donc, par le magasin Redux lui-même suit
mon état de connexion si je suis connecté et que je suis authentifié et si je suis déconnecté.
Donc, si l'utilisateur est déconnecté,
alors les Mes favoris ne sont pas affichés ici.
Maintenant, un point important que vous allez demander est,
comment pouvons-nous nous assurer que nous n'allons pas dans l'état favori ici ?
Donc, cela est géré à l'endroit où nous gérons les routes ici.
Donc, vous remarquerez que pour les favoris ici,
nous déclarons pour les favoris le point de terminaison au lieu d'
appeler ceci comme la route que nous l'appelons comme une route privée.
Ainsi, l'itinéraire privé vous permet de vous assurer que vous serez
autorisé à entrer dans cette partie uniquement
dans des circonstances, où l'utilisateur est connecté.
Ainsi, cela empêchera une navigation vers leur point de terminaison /favorites si aucun utilisateur n'est connecté.
Maintenant, comment cette route privée est-elle mise en œuvre ?
Cette route privée est implémentée ici.
Donc, vous pouvez voir que cette route privée est implémentée comme indiqué ici.
Donc, ce n'est rien d'autre qu'une route ici et puis ici,
nous allons implémenter this.props.auth.isAuthenticated.
Donc, si l'utilisateur est authentifié,
alors je vais permettre de naviguer vers
le composant qui est le composant favoris.
Sinon, je vais simplement rediriger vers le composant d'accueil.
Donc, si aucun utilisateur n'est connecté,
je vais simplement rediriger vers le composant home et donc cela est
implémenté en utilisant cette route privée que j'ai conçue ici.
Donc, la route privée est quelque chose qui est pris en charge par le routeur
que nous utilisons le routeur React Dom que nous avons utilisé dans notre application React.
Donc, une façon très simple de gérer les situations,
où vous ne voulez pas que certaines routes soient naviguées lorsque l'utilisateur n'est pas connecté.
Encore une fois, quelques modifications simples que j'ai apportées à
l'application pour faciliter
toutes les différentes fonctionnalités que vous voyez dans votre application React.
Maintenant, comme vous vous y attendez,
vous pourriez être sous-estimé à ce stade,
« Est-il si simple à implémenter » et c'est
exactement ce qui a été fait pour prendre en charge toutes les nouvelles fonctionnalités.
Comme vous le voyez, l'authentification de l'utilisateur et le
processus de connexion et de déconnexion puisque notre serveur a un support complet pour tout,
la mise en œuvre du suivi côté client de la
connexion utilisateur et le processus de déconnexion et tout ce qui devient assez simple
en modifiant simplement certains des composants et ajouter dans
la fonction de réducteur d'authentification et ajouter dans l'état d'authentification à notre magasin Redux.
L' ensemble du processus de gestion de l'authentification de l'utilisateur
et de la connexion et de la déconnexion devient assez simple dans ce cas.
Donc, avec cette visite rapide du code React mis à jour,
continuons à examiner
notre application React quelques fonctionnalités supplémentaires de notre application React.
Donc encore une fois, revenant à notre application,
nous pouvons maintenant aller au menu et ensuite tirer
n'importe quel plat ici et je peux poster des commentaires sur le plat ici,
donc je mettrais immédiatement en place la note ici et ma valeur de commentaire ici.
Notez que je ne saisis pas mon nom d'utilisateur ou le nom de mon auteur ici dans le formulaire ici.
Bien sûr, pour soumettre un commentaire, vous devez être connecté.
Donc, si vous n'êtes pas connecté, ce commentaire ne sera pas accepté par mon serveur.
Laisse-moi d'abord me connecter.
Donc, je peux me connecter ici
et au moment où je me connecte, vous remarquez immédiatement que la
barre d'outils d'en-tête est mise à jour pour indiquer mon statut.
Maintenant, je peux poster ce commentaire et vous remarquerez que lorsque je poste le commentaire,
le commentaire est ajouté dans la liste des commentaires
et aussi remarquer que le champ auteur est
automatiquement rempli ici parce que c'est ainsi que nous configurons notre côté serveur.
Dans le champ commentaires,
nous avons configuré notre utilisateur comme référence
aux informations utilisateur que nous stockons sur
notre serveur et comme nous utilisons le peuplement Mongoose du côté serveur,
les informations utilisateur sont automatiquement renseignées
dans les commentaires entrants du côté serveur.
Donc, c'est comme ça que vous remarquez comment je tire parti de
ce que le serveur me fournit déjà pour remplir automatiquement les détails.
Ainsi, des modifications mineures à nouveau même dans
la page de détail du plat pour refléter l'utilisation de la prise en charge des commentaires sur le site du serveur.
Avec cela, je complète
l'illustration rapide du client React que nous avons implémenté dans le cadre de
cet exercice et j'espère que vous
allez à travers les détails du code dans le client aussi et ensuite
réfléchir à ce que vous avez appris dans le cours React et voir comment
les modifications nous permettent d'implémenter dans une version modifiée,
[inaudible] qui est maintenant capable de communiquer avec le serveur et de prendre en charge toutes les fonctionnalités que
nous avions l'intention d'implémenter à l'origine dans le cadre de notre client et du côté serveur.