[MUSIC]
Dans l'exercice précédent, nous avions déjà configuré notre
back-end Firebase en tant que service avec le nouveau projet.
Configurez également une grande partie des données dans notre base de données, puis configurez notre stockage et
configurez notre serveur Firebase pour agir comme le backend de notre application React.
Dans cet exercice, nous allons examiner une version modifiée de notre application React,
qui utilise le back-end Firebase comme un service afin d'
obtenir les données et également stocker des informations pour les utilisateurs sur le serveur.
En outre, nous tirons parti de la prise en charge de l'authentification
fournie par Firebase pour authentifier les utilisateurs.
À la fois en utilisant une approche par e-mail et mot de passe, et en utilisant également un compte Google.
Pour commencer cet exercice, allez à un emplacement pratique sur votre ordinateur,
puis clonez le dépôt Git donné, je
vous ai fourni la version Firebase de notre application React.
Donc, tapez git clone https://github.com/jmuppala/conFusion-Rea -
CT-Firebase.git.
Et puis clonez le dépôt Git.
Et une fois que le dépôt Git est cloné sur votre ordinateur, puis déplacez
dans le dossier Confusion-React-FireBase qui sera créé à ce stade.
Et puis vous remarquerez qu'un tas de fichiers y sont déjà installés.
Allons de l'avant et faisons une installation de fil pour installer tous les
modules de noeud sur lesquels cette application angulaire dépend.
Cette version installera également des modules de nœuds supplémentaires appelés Firebase.
Je vais en expliquer un peu plus sur ces modules de noeud plus tard dans cet exercice.
Une fois l'installation du projet terminée, ouvrez le projet dans un éditeur.
Et puis dans le projet, allez dans le dossier source > Firebase
, puis ouvrez le fichier config.js.
Et dans le fichier config.js, vous verrez un ensemble de configuration Firebase
que vous devez configurer avec votre propre configuration de serveur Firebase.
Comme nous l'avons vu dans l'exercice précédent, nous pouvons obtenir toutes ces informations en
cliquant sur ce bouton ici appelé Ajouter Firebase à votre application web.
Et puis copiez ces informations
, puis collez ces informations dans votre fichier config.js.
Pour les remplacer par la configuration spécifique de vos serveurs Firebase pour
toutes ces informations.
Et une fois que cela est terminé, vous pouvez démarrer votre
application React en tapant fil start à l'invite.
Une fois votre application React compilée, et donc
ici, vous verrez la page d'accueil, la page à propos, comme nous le voyons ici.
Et le menu.
Et la page de contact.
Nous allons nous connecter,
laissez-moi retourner à la page d'accueil et ensuite nous nous connecterons nous-mêmes.
Ainsi, lorsque vous cliquez sur le bouton Connexion,
vous verrez le formulaire typique ici avec l'e-mail et les informations de mot de passe.
Vous verrez également un bouton initial appelé Se connecter avec Google.
Laissez-moi donc me connecter avec mon compte Google.
Ainsi, lorsque vous cliquez sur la connexion avec Google, il ouvrira une autre
fenêtre de navigateur où vous serez invité à autoriser l'utilisation de votre compte Google.
Ensuite, vous verrez, dans le coin droit, vous verrez immédiatement votre nom
s'afficher ici, et avec le bouton de connexion maintenant transformé en un bouton de déconnexion.
Donc, à ce stade, vous devriez être en mesure de voir vos favoris.
Et dans ce cas, puisque nous n'avons pas de favoris, donc
ce sera vide à ce stade.
Laissez-moi revenir au menu, puis ajouter quelques éléments dans mes favoris.
Donc, je vais ajouter ce plat à mes favoris, donc quand je clique sur ce plat,
vous verrez immédiatement l'icône se transformer en un cœur rempli.
Et laissez-moi également sélectionner un plat de plus et l'ajouter dans mes favoris.
Annonce alors maintenant quand vous allez à mes favoris, vous verrez quelques
plats ajoutés dans vos favoris, comme vous vous y attendez.
Et encore une fois, vous pouvez supprimer les plats en cliquant sur la
croix de suppression pour supprimer l'élément de votre liste de favoris, comme indiqué ici.
Maintenant, nous pouvons également ajouter, comme vous le savez, nous pouvons aller à n'importe quel plat
, puis ajouter des commentaires sur ce plat.
Permettez-moi donc d'ajouter un commentaire ici.
Et au moment où vous soumettez le commentaire, vous verrez immédiatement que
votre commentaire sera affiché ici avec le nom de l'auteur également inclus ici.
Et avec cette date comme indiqué ici.
Ainsi, vous pouvez voir que la soumission de commentaires par l'utilisateur
sera prise en charge pour n'importe quel plat spécifique.
Donc, c'est ainsi que votre application fonctionne avec cette
Firebase en tant que service principal.
Maintenant, bien sûr, vous devez vous demander, comment remanions-nous notre application pour
utiliser Firebase au lieu d'utiliser le
serveur standard MongoDB Express que nous avons construit plus tôt ?
Pour configurer votre application pour qu'elle communique avec le serveur Firebase,
vous devez installer le module Firebase.
Le module Firebase, comme vous le voyez ici, fournit l'outil et
l'infrastructure qui vous permettent de communiquer avec le serveur Firebase.
Et pour installer cela dans votre application,
vous tapez le fichier install moins save firebase.
Maintenant, comment faire usage de ceux-ci ?
Je vais illustrer cela en vous exécutant rapidement à travers le code modifié
où nous utilisons Firebase pour modifier l'application que nous avons développée
précédemment pour utiliser le serveur Firebase en tant que service principal.
Voyons rapidement notre application React modifiée pour comprendre
comment elle a été reconfigurée pour communiquer avec notre serveur Firebase.
Nous allons commencer notre voyage dans le fichier package.json.
Et dans le fichier package.json,
vous remarquerez que j'ai ajouté dans le module Firebase npm dans ce.
Ainsi, lorsque vous clonez le référentiel Git et que vous effectuez l'installation de fil,
le module Firebase est automatiquement installé dans votre application.
Si vous configurez une nouvelle application React pour
communiquer avec le serveur,
vous devez installer explicitement le module Firebase dans votre application.
Maintenant, après cela, vous remarquerez des changements dans le dossier Firebase.
Ici, nous avons déjà vu le fichier de configuration.
L' autre fichier que vous remarquerez ici s'appelle firebase.js.
Maintenant, c'est là que nous configurons notre application pour communiquer avec
le serveur Firebase.
Donc nous importons la config ici.
Et puis importer firebase à partir de firebase.
Et puis vous initialisez l'application ici en fournissant la configuration à la Firebase,
donc c'est là que vous fournissez toutes les informations de configuration afin
que votre client puisse communiquer avec le serveur Firebase.
En outre, j'exporte quelques-unes de ces exportations d'
ici appelées auth, fireauth et ainsi de suite.
Ceux-ci que je vais utiliser dans les créateurs d'action
afin de communiquer avec mon serveur Firebase.
Maintenant, après cela, les principales modifications seront dans le fichier ActionCreators.
Maintenant, je n'ai pas ajouté de nouvelles actions, mais à la place toute la communication
avec le serveur est maintenant modifiée pour communiquer avec notre serveur Firebase.
Donc, au lieu d'utiliser le fetch, comme nous l'
avons fait plus tôt, nous allons maintenant utiliser firestore.
Donc, comme vous pouvez le voir, j'ai importé l'auth, firestore,
fireauth et firebasestore à partir du module firebase que
j'ai configuré plus tôt dans le dossier firebase.
Et puis tout cela me permettra de communiquer avec mon serveur Firebase.
Afin de récupérer une collection de ma Firebase,
nous disons simplement firestore.collection, puis fournissons le nom de la collection.
Ensuite, vous pouvez ajouter à la collection en disant, ajouter, comme vous pouvez le voir ici,
qui prend l'élément spécifique que vous ajoutez dans votre collection là.
C' est donc le document que nous ajoutons à notre collection.
Donc, c'est pour le commentaire de la publication, comme vous pouvez le voir ici.
Et lorsque vous publiez cela, vous recevrez un DocRef,
qui est la référence au document,
que vous pouvez ensuite utiliser pour aller chercher le document à partir de votre serveur.
Maintenant, la façon dont Firebase fonctionne est qu'elle fournira
l'ID séparément du contenu réel des documents.
Firebase conserve donc l'ID et les données du document lui-même séparément.
Donc ici, je dois combiner explicitement les deux ensemble dans
un objet JavaScript ici, appelé commentaire ici.
Donc, comme vous le voyez dans le document, donc vous remarquez que lorsque j'
insère un élément dans une collection, il renvoie un DocRef ici.
Et à partir du DocRef, je peux obtenir l'ID du document.
Et donc ce que je fais ici, c'est que je vais
chercher le document correspondant ici.
Et puis une fois que le document est récupéré, maintenant, bien sûr, le document devrait exister,
donc cela devrait toujours être vrai, parce que nous venons d'insérer le document.
Mais juste par souci d'exhaustivité, je fais une vérification explicite pour cela.
Et puis après cela, les données qui sont dans le document sont
obtenues en disant doc.data, comme vous le voyez ici.
Et puis l'identifiant du document est obtenu par doc.id.
Donc, ces deux sont séparés.
Mais dans notre code React, nous avons toujours stocké l'id et
les données ensemble comme un seul document JSON ici, ou objet JavaScript ici.
C' est pourquoi je combine les deux ensemble
en un seul objet JavaScript ici en faisant cela.
Vous me verrez à plusieurs reprises faire cela pour, disons par exemple,
pour des promotions audacieuses et ainsi de suite, également dans les ActionCreators.
Et puis après cela, j'ajoute dans le commentaire dans mon magasin Redux ici,
et le reste du code reste en tant que tel.
De même, pour aller chercher des plats,
vous verrez comment nous récupérons plusieurs plats de la Firebase.
Donc, nous voyons firestore.collection plats obtenir et obtenir les plats.
Maintenant, quand vous obtenez cela, alors cela me donnera une valeur d'instantané,
qui est l'instantané de l'état actuel de cette collection, et
à partir de cela, je dois entrer et récupérer chaque plat.
Et puis je reconstruit ma gamme de plats ici.
Maintenant, remarquez que, comme je l'ai dit, l'id et les données sont séparés, donc
je dois les combiner ensemble, parce que c'est la façon dont j'utilise les données dans mon
application React, donc je le pousse dans le tableau de plats.
Et puis finalement retourner les plats qui seront ensuite insérés dans mon
magasin Redux ici.
Ce type de modifications a donc été apporté dans ActionCreators.
Maintenant, le processus de connexion et de déconnexion sera géré ci-dessous.
Donc, pour la connexion, l'authentification que nous avons importée à partir de
la Firebase, l'authentification est celle qui me permet de faire la connexion et la déconnexion.
Donc, si vous vous connectez en utilisant e-mail et mot de passe,
il fournit avec cette méthode appelée SigninWithEmailAndPassword.
Et puis vous fournissez l'e-mail et le mot de passe comme les deux paramètres ici.
Et puis cela vous permettra de vous connecter.
Et lorsque vous vous connectez, l'auth fournit cet objet appelé CurrentUser sur l'authentification.
Donc, vous obtenez les informations de l'utilisateur en disant Auth.CurrentUser ici.
Et aussi je stocke les informations de l'utilisateur dans ma base de données.
Maintenant, je ne suis pas explicitement le suivi de jeton et de
choses comme ça parce que cela est automatiquement suivi par auth pour moi,
qui est fourni par le module Firebase npm.
Donc, je tire juste parti de cela pour suivre l'utilisation actuelle.
Si l'utilisateur actuel est nul, alors je sais que mon client
n'a aucun utilisateur connecté au serveur.
Et de même, pour déconnecter l'utilisateur, je dis simplement Auth.Signout.
Maintenant encore, la documentation sur l'utilisation du
module npm Filebase est disponible dans la documentation Firebase.
Ainsi, vous pouvez facilement rechercher cela pour comprendre comment tirer parti
de Firebase pour utiliser toutes ces différentes fonctions
qui sont disponibles à partir du module Firebase npm.
Aussi, pour les favoris, nous publions soit un favori et
alors vous devez poster des éléments, de sorte que vous diriez ajouter, et
quand vous avez besoin d'obtenir un article, vous direz obtenir.
Et vous pouvez même obtenir un élément à partir d'un document spécifique dans les collections.
Si vous voulez un document spécifique dans la collection, vous direz .doc.
Et puis vous indiquez l'identifiant du document ici.
C' est ainsi que vous pouvez obtenir un document spécifique.
Supprimez également les favoris, et récupérez les favoris et ainsi de suite.
Maintenant, pour que les favoris soient stockés dans ma Firebase,
les favoris sont stockés comme l'ID utilisateur et l'ID plat ici.
Maintenant, Firestore lui-même n'a aucun moyen de remplir les
informations du plat dans l'ID du plat.
Donc, je vais juste chercher toutes les informations de plat,
donc c'est chaque favori est une paire, utilisateur et paire d'ID plat.
Donc je vais juste chercher ça dans mes favoris ici.
Mais cela signifie aussi que j'ai besoin de modifier mon composant favoris afin
qu'il puisse utiliser l'ID plat, puis indexer dans les plats qui
sont stockés dans mon magasin Redux, et obtenir les informations de plat.
Ou l'alternative serait d'aller sur le serveur et ensuite récupérer les informations.
Mais puisque j'ai déjà les données sur les plats dans mon magasin Redux,
parce que j'ai déjà fait les plats chercher pour récupérer toutes les
informations sur les plats.
Je vais juste directement dans l'objet vaisselle dans mon Redux déchiré et
chercher cette information.
Donc, cela signifie également qu'il y a des modifications au composant principal.
Dans le composant principal, vous remarqueriez que lorsque je fais le favori ici pour
le détail du plat, je devrais simplement comparer le plat à ce disHID.
Donc, le plat ici dans mon favori est le DisHID lui-même, donc
j'ai juste besoin de faire la comparaison.
Il y aura donc un changement mineur à cette ligne dans le DisHID.
Et aussi, vous remarquerez que lorsque j'appelle les favoris,
en plus de fournir leurs favoris,
je fournit également les plats comme l'un des accessoires pour mes favoris.
C' est donc un autre changement que vous remarquerez dans le composant principal.
Et de même, dans le composant favori,
vous remarquerez qu'à l'intérieur du composant favori ci-dessous,
vous remarquerez que, lorsque je rende le composant favori.
Puis, juste ici dans cette fonction ici, const favoris,
ce que je fais est que je vais dans les plats favoris,
plats est un tableau de tous les DisHID ici, donc je mappe à travers cela.
Alors regardez chaque DisHID, puis à partir des plats,
j'ai filtré ce plat particulier.
Et puis obtenu le DisHID, donc
ici vous me verrez en utilisant le filtre de tableau JavaScript ici.
Il filtrera cette information spécifique du plat
, puis rendra ce plat particulier.
Donc, c'est un travail supplémentaire que je dois faire dans mon
composant préféré afin de rendre chacun des plats là-bas.
Donc, ce genre de modifications mineures, vous remarquerez dans quelques composants, en
particulier le détail du plat, le favori et le composant principal.
C' est là que quelques modifications mineures ont été apportées afin de faciliter l'
application React pour pouvoir tirer parti du serveur Firebase.
Voici donc un aperçu rapide de la façon dont
mon application React a été modifiée pour communiquer avec mon serveur Firebase.
Maintenant, comme avec Angular, nous avions aussi l'Angularfire, qui
nous fournissait un moyen d'exploiter avec Firebase pour communiquer avec le serveur.
React n'a pas de pareille contrepartie, donc j'utilise directement le
module Firebase npm qui fournit la base de base pour accéder au serveur Firebase.
Et puis tirer parti des fonctions qu'il fournit pour communiquer avec mon
serveur Firebase.
Passez un peu de temps à parcourir ce code pour comprendre comment
j'ai tiré parti des modules Firebase npm afin de communiquer
avec mon serveur Firebase que j'ai configuré dans l'exercice précédent.
Avec cela, je vous ai donné un aperçu rapide de la façon dont vous pouvez configurer votre
application React pour interagir avec Firebase back-end en tant que service,
puis être en mesure de prendre en charge diverses opérations que vous avez dans votre application.
Maintenant, avec cela, je termine cet exercice particulier où j'ai
illustré dans cette leçon sur le back-end en tant que service et
également démontré Firebase comme un exemple d'un back-end en tant que service.
[ MUSIQUE]