Allons pêcher au marché du bar.
Nous commencerons avec Firebase,
l'offre premium de Google.
Comprenons un peu Firebase,
configurez un serveur Firebase,
puis nous allons regarder l'application angulaire,
que je vais moderniser en fonction de
l'application angulaire précédente que vous avez vu dans la conférence précédente.
Nous allons le modifier pour utiliser Firebase comme backend.
Ainsi, comme nous le verrions à la fin de cette leçon, de
cet exercice et de l'exercice suivant,
nous pouvons facilement prendre une application angulaire et la moderniser pour utiliser
Firebase en tant que fournisseur de services.
Pour commencer le voyage,
allons sur firebase.google.com pour comprendre un peu plus à propos de Firebase.
Une sorte de sujet de faire une présentation complète sur Firebase,
je vais rapidement vous faire parcourir ce qui a été
expliqué sur le site Firebase lui-même parce qu'ils vous donnent
suffisamment de détails sur la façon dont Firebase elle-même prend en charge diverses fonctionnalités.
Nous allons donc parcourir ce site Web pour comprendre comment Firebase fonctionne.
Donc, si vous allez sur le site Web, comme vous pouvez
le voir, Firebase vous aide à créer de meilleures applications mobiles et à développer votre entreprise.
Et puis, comme vous
le voyez ici, il vous explique comment il vous permet de créer
rapidement vos applications sans avoir à gérer l'infrastructure back-end de votre application,
et une console unique qui réunit un tas de produits qui fonctionnent ensemble.
Donc, ce sont tous des produits proposés par Google qui fonctionnent ensemble pour répondre à vos besoins back-end.
Et ici aussi, vous pouvez tirer parti
de nombreux produits complémentaires disponibles auprès de Google.
Ainsi, en particulier, dans cet exercice,
nous allons tirer parti du Cloud Firestore,
la nouvelle disposition de Google.
Nous verrons plus de détails à ce sujet plus tard.
Nous examinons comment nous pouvons utiliser la prise en charge
de l'authentification fournie par Firebase pour l'authentification des utilisateurs.
Nous examinerons le stockage dans le cloud pour stocker nos fichiers image et les servir.
Et puis nous allons également voir comment nous pouvons tirer parti de tous ces éléments avec
le module de noeud lié à FireBase que nous pouvons intégrer avec le
module de noeud angularfire2 dans notre application angulaire afin que
nous puissions communiquer avec notre backend Firebase en tant que service.
En outre, en regardant plus de détails,
nous voyons comment le tableau de
bord Firebase lui-même fournit diverses fonctionnalités comme vous permettre de déployer
différentes fonctionnalités utilisateur pour différentes intégration de votre application et
comment il est facile d'intégrer votre backend avec un iOS,
Android ou l'application Web .
En particulier, nous allons examiner l'application web et l'utilisation de JavaScript
ainsi que l'utilisation de la façon dont nous allons l'
intégrer dans notre application angulaire un peu plus tard.
De plus, Firebase fournit une base de données en temps réel, à
la fois la base de données en temps réel originale,
ainsi que le nouveau Cloud Firestone,
vous permettent de synchroniser automatiquement les données entre les différents appareils utilisateur.
Ainsi, toutes
les modifications apportées côté serveur seront automatiquement répercutées sur tous les clients,
et, bien sûr, vous pouvez lire plus de détails sur Firebase sur ce site.
Et c'est très facile de commencer car l'offre de base est gratuite pour les utilisateurs.
Commençons donc à utiliser Firebase.
Nous allons configurer notre compte Firebase, puis accéder et configurer notre backend en tant que serveur,
que nous allons ensuite tirer parti de notre application angulaire.
Donc, c'est une visite rapide de Firebase,
mais au lieu de simplement les regarder,
allons nous salir les mains, en
configurant une base Firebase
dans le service, puis en l'utilisant sur notre application angulaire.
Donc, pour commencer,
comme vous le verrez sur le bord droit ici,
il dit aller à la console.
Évidemment, vous devriez avoir un compte Google pour pouvoir utiliser Firebase.
Cela va sans dire,
et vous devriez être connecté à votre compte Google.
Donc, comme vous pouvez le voir,
je suis déjà dans mon compte Google.
Ça me donnera accès à ma console.
Si vous n'êtes pas connecté,
il est préférable de vous connecter à votre compte Google.
Ainsi, lorsque vous accédez à la console,
vous accédez à la console des services Firebase ici,
où vous pouvez configurer des projets.
Donc, lorsque vous allez à la console,
comme vous pouvez le voir, il est dit ajouter un projet.
Et, comme vous pouvez le voir,
j'ai déjà essayé de mettre en place
un autre projet Firebase avant de vous l'expliquer.
Alors mettons en place un projet ici.
Donc, nous allons cliquer sur le projet ajouter,
et cela devrait faire apparaître une belle petite fenêtre,
où vous pouvez taper des informations.
Donc, nous allons appeler ce projet comme ConfusionServer,
comme vous le souhaitez et le configurer où que vous soyez en ce moment.
Je vais donc le configurer pour utiliser
Hong Kong et créer un projet.
Et une fois votre projet créé,
c'est ce qui vous sera présenté par Firebase.
Et, ici, vous verrez que la première chose que vous voudriez saisir
est des informations sur votre configuration Firebase afin
que vous puissiez l'utiliser dans votre application angulaire.
Pour ce faire,
cliquez sur ce bouton ici.
Donc, il est dit, ajoutez Firebase à votre application web.
Et cela vous fournira un tas d'informations que
vous devriez copier et enregistrer car je vais
utiliser ces informations pour configurer
mon application angulaire un peu plus tard dans le prochain exercice.
Enregistrez donc ces informations à un emplacement approprié afin que vous
puissiez utiliser ces informations lorsque vous configurez le site de votre client.
L' étape suivante, je vais mettre en place quelques comptes ici.
Alors laissez-moi cliquer sur l'authentification ici.
Et lorsque l'authentification sera ouverte,
nous allons configurer les méthodes de connexion que nous allons utiliser pour notre serveur Firebase,
et dans mon cas,
j'utiliserai le mot de passe e-mail comme l'une des options.
Nous allons donc activer le mot de passe e-mail.
Je vais également activer la connexion Google.
Donc ces deux-là sont activés.
Si vous le souhaitez, vous pouvez activer d'autres méthodes d'authentification des utilisateurs.
Ensuite, aller aux utilisateurs, maintenant,
si vous vous connectez à cette application avec votre compte Google,
cet utilisateur sera automatiquement ajouté dans votre système.
Mais maintenant, je vais configurer un utilisateur avec un email et un mot de passe.
Donc, je vais mettre en place un admin@confusion.net,
et je vais mettre en place un mot de passe ici et ajouter à l'utilisateur.
Donc, ce sera un utilisateur,
qui peut se connecter avec la combinaison email-mot de passe.
Nous pouvons également vous inscrire pour y accéder en utilisant notre compte Google.
Donc, mon application angulaire,
je vais configurer pour utiliser à la fois le moyen de mot de passe e-mail de connexion
et ainsi que par la connexion basée sur un compte Google.
Après cela, nous irons dans le stockage.
Nous allons donc configurer le stockage suivant.
Donc, le stockage est l'endroit où vous pouvez configurer un moyen
de télécharger des fichiers sur votre serveur, puis de les rendre disponibles pour utilisation.
Donc, ce stockage, je vais configurer mon stockage pour stocker
les images que nous allons utiliser et enregistrer à partir de notre site serveur.
Ainsi, lorsque vous configurez le stockage,
il viendra avec l'ensemble des règles de sécurité,
qui spécifient quel type d'opérations sera autorisé par l'utilisateur.
Donc, il dit permettre lire,
écrire : si request.auth n'est pas égal à null,
ce qui signifie que seuls les utilisateurs qui se sont connectés
à ce serveur seront en mesure de lire et d'écrire.
Maintenant, je vais changer cela pour autoriser les lectures pour n'importe qui,
mais les écritures ne seront autorisées que par les utilisateurs authentifiés.
Donc on va dire, j'ai compris,
et ensuite je vais commencer.
Donc, dans les règles,
je vais entrer dans les règles ici et ensuite modifier les règles pour
permettre aux utilisateurs de pouvoir lire à partir du serveur.
Maintenant, nous pouvons le configurer au niveau du dossier spécifique,
mais comme il s'agit d'une application simple,
je vais la configurer au niveau du stockage entier.
Donc, ici, je vais dire, autoriser la lecture,
et puis je vais modifier cette règle pour dire autoriser la lecture,
et je dirai, autoriser l'écriture si demande.
Ainsi, comme vous pouvez le voir,
les utilisateurs seront autorisés à lire à partir du stockage.
Tout utilisateur sera autorisé à lire, même sans authentification,
mais l'écriture est limitée aux utilisateurs qui se connectent au système.
Il s'agit donc d'une simple modification des règles d'accès,
des règles de sécurité.
Vous pouvez être plus élaboré à ce sujet,
mais dans l'exemple simple,
je vais rester avec cela.
Ensuite, nous publierons ces règles sur notre serveur.
Ensuite, revenant aux fichiers, dans les fichiers,
je vais créer un nouveau dossier ici nommé images.
Maintenant, comme vous le voyez,
les règles peuvent être configurées pour ce dossier d'images spécifique, de
sorte qu'il permettra aux utilisateurs de lire uniquement à partir de ce dossier d'images, puis seulement
les utilisateurs autorisés à télécharger dans ce dossier d'images si vous le souhaitez.
Mais, en ce moment, je vais le laisser en tant que tel,
comme l'ensemble générique de règles que j'ai configuré là.
Maintenant, allez dans le dossier des images.
Je vais télécharger un tas d'images dans ce dossier ici.
Alors laissez-moi prendre un tas d'images que j'ai pour mon application.
Et donc, plus tôt, j'avais utilisé ces images dans mes autres applications.
Je vais sélectionner toutes ces images, puis les télécharger sur le stockage Google ici.
Ces images sont disponibles dans
votre fichier images.zip que je vous ai fourni dans l'exercice précédent,
dans la leçon précédente.
Il suffit donc de télécharger le fichier images.zip,
ou si vous avez déjà téléchargé,
vous devriez avoir ces images avec vous afin que vous puissiez les télécharger dans le fichier.
Lorsque vous téléchargez ces images,
vous pouvez cliquer sur l'une de ces images et aussi remarquer que ci-dessous,
il vous donne cet emplacement de fichier.
Vous devez copier cette URL pour cet emplacement de fichier car lorsque nous configurons notre base de données,
dans le champ images de nos données JSON,
nous allons configurer chacune d'entre elles avec cette URL pour l'image correspondante.
Ensuite, nous passerons à cette base de données.
Dans la base de données, vous avez deux choix.
Vous pouvez aller avec l'ancienne base de données en temps réel,
qui est prise en charge par Google,
et en effet la plupart des applications actuelles qui utilisent Firebase utiliseront la base de données en temps réel.
Mais alors, dans ce cours,
nous allons explorer la nouvelle version bêta de Firestore.
La version bêta de Firestore fournit une base de données en temps réel beaucoup plus complète.
Il s'agit donc de la base de données en temps réel de nouvelle génération et fournit
des moyens beaucoup plus avancés de faire des requêtes et de mettre à
l'échelle automatiquement leur stockage pour nous.
Donc on va aller avec la bêta de Firestore.
Maintenant, l'une des raisons pour moi de commencer avec
la bêta de Firestore est simplement parce qu'elle
nous permet de stocker les informations sous forme de documents et de collections.
Maintenant, d'après notre expérience avec MongoDB,
nous savons déjà comment les documents et les collections fonctionnent,
et c'est pourquoi la bêta de Firestore est un bien meilleur choix pour nous,
puisque nous savons déjà comment cela est configuré.
Si vous souhaitez utiliser par défaut la base de données en temps réel standard,
vous pouvez choisir de le faire.
Mais la base de données en temps réel stocke toutes vos données dans
une grande arborescence et dispose d'une capacité d'interrogation limitée.
Donc, pour les règles de sécurité de mon Firestore,
j'irai avec le mode test,
où je vais juste laisser le jeu ouvert pour que les gens lisent et écrivent en ce moment.
Et c'est correct parce que nous testons simplement la base de données, mais normalement,
je suggère d'aller avec une façon plus configurée de travailler avec votre base de données ici.
Nous allons donc commencer par un mode de test.
Nous allons donc mettre en place les règles de sécurité comme celle-ci pour commencer.
Vous pouvez opter pour une configuration d'outil de sécurité plus élaborée.
Donc, comme vous l'avez vu avec le stockage,
nous avions mis en place de telle sorte que les lectures soient autorisées par
n'importe qui, mais les écritures ne sont autorisées que par les utilisateurs autorisés.
Nous pouvons également mettre en place une fonctionnalité similaire ici.
Donc c'est le serveur de confusion.
Et donc, dans les règles,
laissez-moi aller à ce stockage et ensuite copier la règle du stockage ici,
et nous allons mettre en place le même type de restriction ici.
Nous allons donc permettre à tout le monde de lire, mais seulement
les utilisateurs autorisés à écrire dans la base de données.
Donc, en revenant à la base de données, dans les règles,
nous pouvons dire permettre lire : et puis la deuxième ligne je vais remplacer cela, en
disant autoriser écrire si request.auth n'est pas égal à null.
Donc, seules les personnes qui sont connectées,
elles seront en mesure d'apporter des modifications aux données afin que nous,
au moins, j'ai une certaine protection sur mes données.
Maintenant, ici, nous pouvons maintenant ajouter graphiquement les données à notre application.
Et ceci, je trouve le moyen le plus rapide d'ajouter les données.
Si vous configurez le site client,
vous pouvez également publier des données à partir du site client, mais, pour l'
instant, nous allons commencer par ajouter trois collections ici.
Donc, la première collection que j'ajouterai est la vaisselle.
Et nous pouvons ajouter des documents à la vaisselle,
afin que nous puissions ajouter notre premier document.
Donc, pour ajouter un document à la vaisselle,
rappelez-vous que je vous ai donné le fichier DB.json là-bas.
Ainsi, vous pouvez aller avec le fichier DB.json, puis ajouter,
étape par étape, chacun des plats que nous avons.
Donc, ici, je vais configurer le premier plat ici.
Donc, pour le plat, nous pouvons autoriser Firebase à attribuer automatiquement l'ID de notre document.
Donc, je vais laisser cela attribuer automatiquement.
Donc, nous allons ajouter le premier plat ici.
Le nom du champ et le premier plat ici.
Nous devons donc ajouter minutieusement,
peu à peu, chacun des plats ici.
Donc nous allons dire nom,
et ensuite nous dirons catégorie, qui est secteur.
Et puis nous allons ajouter dans l'image,
que je vais revenir et ajouter un peu plus tard parce que j'ai besoin de copier
l'URL de l'image de mon stockage et de l'utiliser ici.
Ensuite, nous l'aurons étiqueté comme Hot, prix.
Donc, nous avons la catégorie,
le nom, la catégorie, l'image, l'étiquette, le prix
, la description, que je vais copier et coller à partir de mon fichier DB.json.
Et, enfin, le drapeau en vedette,
que je vais définir comme un booléen et définir cela sur true dans ce cas.
Ce sera donc notre premier document que nous ajouterons ici dans notre base de données.
Donc, vous remarquerez immédiatement que,
dans notre base de données, le premier document est ajouté.
Nous allons donc voir les plats et le premier document,
et vous pouvez voir les informations sur ce document configuré ici.
Nous avons donc la catégorie, la description, la
vedette, l'image, l'étiquette, le nom et le prix.
Nous allons également ajouter un champ supplémentaire appelé CreateDAT,
et ce sera un horodatage.
Et l'horodatage serait l'horodatage d'aujourd'hui, puis je laisse là la valeur temporelle en tant que telle.
Donc, nous pouvons également ajouter des horodatages à cela, et, aussi,
nous allons ajouter un horodatage de plus comme UpdateDAT et avec l'horodatage ici.
Donc nous avons deux autres horodatages ici.
Maintenant, pour l'image,
nous irons au stockage ici.
Et à partir de notre stockage, dans les images,
nous allons sélectionner le fichier image ici,
puis aller à l'emplacement du fichier, puis copier cette URL ici.
Donc, si nous cliquons simplement sur
cela, cette URL sera copiée.
Donc, nous allons revenir à
cette base de données, puis
éditer le champ d'image, puis ajouter cette URL là.
Comme ça, vous pouvez aller de l'avant et ajouter les plats restants,
les promotions et aussi les leaders.
Donc, une fois que vous avez terminé toutes les étapes,
ce qui prendra un certain temps pour vous de faire étape par étape.
Donc je vous ai laissé finir d'ajouter toutes ces informations à votre Firebase.
Donc, une fois que vous avez terminé d'entrer toutes les données dans votre base de données,
vos plats devraient avoir quatre plats ici.
Encore une fois, assurez-vous d'initialiser
le champ d'image avec l'URL de ce stockage pour cette image particulière.
Donc vous aurez un, deux, trois et quatre plats.
Ensuite, vous aurez quatre leaders en conséquence.
Un, deux, trois et quatre et une promotion est là.
Encore une fois, assurez-vous d'initialiser les images pour chacune d'
elles de manière appropriée à partir du stockage Firebase.
Avec cela, notre serveur est complètement configuré.
Notre serveur Firebase dispose donc de toutes les données nécessaires pour qu'il soit conforme à nos plans.
Nous allons maintenant passer à l'exercice suivant,
où nous allons configurer notre client angulaire pour pouvoir accéder à
ce backend Firebase en tant que service, puis récupérer
des données et ensuite envoyer des données à leur serveur Firebase.
Avec cela, nous terminons cet exercice.
Dans cet exercice, nous avons vu à quel point il est facile pour nous de
configurer notre backend Firebase en tant que service pour l'authentification,
pour stocker des fichiers et les servir et aussi pour stocker des informations dans
la base de données Cloud Firestore sous forme de collections et de documents dans les collections.
Avec cela, nous terminons cet exercice.