Cours Crash Base

Le guide de ce développeur frontal émouvait les mystères de Firebase. Nous explorerons les capacités de Firebase, ses avantages et ses exemples pratiques. Mais d'abord, une brève histoire ...

Il y a huit ans, Andrew Lee et James Tamplin ont lancé Envolve, une startup de chat en temps réel. Son succès, alimenté par des utilisateurs de célébrités comme Ricky Martin et Limp Bizkit, découle de sa facilité d'utilisation et de la livraison rapide de messages. Envold était un widget de chat simple - une balise de script ajoutée à une page gérée tout. Il a effectivement fourni une base de données et un serveur prédéfinis pour les messages de chat.

Au fur et à mesure que Envold a grandi, une tendance surprenante est apparue: les développeurs utilisaient le widget (souvent invisible) non seulement pour le chat, mais à des fins diverses - des données de jeu, des scores élevés, des paramètres d'applications, etc. Ils ont exploité les capacités en temps réel du widget pour la synchronisation des données sans faille, en contournant la nécessité d'un développement back-end complexe.

Cette épiphanie a conduit à la création de Firebase. Les fondateurs ont envisagé une plate-forme permettant aux développeurs de construire et d'étendre rapidement les applications, éliminant le fardeau de l'infrastructure arrière et leur permettant de se concentrer sur le frontal.

Comprendre la base de feu

Firebase est-il juste une base de données? Pas entièrement. Alors qu'au départ une base de données cloud en temps réel, Firebase est devenu une plate-forme complète englobant une infrastructure pour les développeurs et les outils pour les spécialistes du marketing. Actuellement, il possède 19 produits intégrés, chacun conçu pour prendre en charge un aspect spécifique du développement d'applications et fournir des informations précieuses sur les performances des applications et le comportement des utilisateurs. Ces produits peuvent être utilisés individuellement ou collectivement pour former une solution back-end complète.

Voici un aperçu des diverses offres de Firebase:

• Hébergement: déploiement sans effort des mises à jour du site Web avec chaque demande de traction GitHub.
• Firestore: fonctionnalité de base de données en temps réel, même hors ligne, sans gestion du serveur.
• AUTH: Authentification et gestion des utilisateurs à l'aide de divers fournisseurs.
• Stockage: stockage sécurisé pour le contenu généré par l'utilisateur (images, vidéos, etc.).
• Fonctions cloud: fonctions sans serveur déclenchées par des événements (création de données, inscription utilisateur, etc.).
• Extensions: fonctions pré-construites avec interfaces utilisateur (par exemple, paiements de rayures, services de traduction).
• Google Analytics: suivi et analyse complets des activités des utilisateurs.
• Configuration à distance: Store de valeur de clé dynamique pour les drapeaux de fonctionnalité et les tests A / B.
• Surveillance des performances: métriques de performances détaillées et traces personnalisées.
• Messagerie cloud: notifications push multiplateformes.

Ce n'est qu'une fraction des capacités de Firebase. Vous n'avez pas besoin d'utiliser chaque service; La sélection des outils pertinents pour votre projet est parfaitement acceptable. Plongeons les applications pratiques.

Les sections suivantes vous guideront dans la configuration de Firebase et démontrent ses fonctionnalités à l'aide d'exemples intégrés. Il s'agit d'un aperçu de haut niveau, pas d'un tutoriel étape par étape. Pour des tutoriels détaillés, laissez un commentaire!

Configuration de Firebase

Cette section est cruciale si vous prévoyez d'intégrer l'application de démonstration avec votre propre back-end Firebase. Sautez ceci si vous connaissez les projets Firebase.

Firebase est basé sur le cloud, nécessitant la configuration initiale du compte. Cependant, le développement peut se produire hors ligne à l'aide d'émulateurs locaux. Ce guide utilise Codepen, nécessitant une connexion cloud. Le processus consiste à créer un projet Firebase et à récupérer la configuration nécessaire à l'intégration frontale.

Création d'un projet de base de feu

Accédez à la console Firebase. Vous pouvez ignorer la configuration Google Analytics pour l'instant.

Création d'une application Web Firebase

Créez une nouvelle application Web et attribuez-lui un nom. Les projets Firebase peuvent contenir plusieurs applications. Après la création, vous recevrez un objet de configuration:

 Laissez FirebaseConfig = {
  apikey: "votre clé",
  AuthDomain: "Your-Domain.fireBaseApp.com",
  projectid: "votre projectide",
  StorageBucket: "your-projectid.appspot.com",
  MessagingSenderid: "Votre-Senderid",
  appid: "votre appidé",
  MesurementId: "Your-MeasureId"
};

Cette configuration connecte votre frontal à Firebase. L'inclusion de ces propriétés dans votre code frontal est sécurisée. Les mécanismes de sécurité seront expliqués plus tard.

Maintenant, représentons cette application dans le code. Cette application agit comme un conteneur pour la logique partagée et l'authentification entre les services Firebase. Nous utiliserons les bibliothèques Firebase à partir d'un CDN (bien que les bundlers du module soient également pris en charge).

 // Ce stylo ajoute une base de feu via l'option "Ajouter des scripts externes" dans Codepen
// https://www.gstatic.com/firebasejs/8.2.10/firebase-app.js
// https://www.gstatic.com/firebasejs/8.2.10/firebase-auth.js

// Créer un projet sur la console Firebase
// (console.firebase.google.com)
Laissez FirebaseConfig = {
  apikey: "votre clé",
  AuthDomain: "Your-Domain.fireBaseApp.com",
  projectid: "votre projectide",
  StorageBucket: "your-projectid.appspot.com",
  MessagingSenderid: "Votre-Senderid",
  appid: "votre appidé",
  MesurementId: "Your-MeasureId"
};

// Créez votre application Firebase
Soit FirebaseApp = Firebase.InitializeApp (FirebaseConfig);
// L'instance d'autorise
Console.log (FirebaseApp.Auth ());

Ensuite, activez les services Firebase requis.

Activer les fournisseurs d'authentification

Les exemples utilisent l'authentification pour la connexion et la sécurité des données de l'utilisateur. Initialement, les fournisseurs d'authentification sont désactivés pour des raisons de sécurité. Activez Google et les méthodes de connexion anonymes dans l'onglet Authentification. N'oubliez pas d'ajouter du codepen en tant que domaine autorisé à des fins de test (mais de le supprimer en production).

Création d'une base de données Firestore

Créez une base de données Firestore en "Mode Test". La sécurité sera abordée plus tard.

Maintenant, explorons les cas d'utilisation du monde réel.

Authentification des utilisateurs

La fonctionnalité de l'application nécessite souvent des comptes d'utilisateurs. Explorons l'authentification anonyme et la connexion Google.

Authentification anonyme

L'authentification anonyme de Firebase permet aux utilisateurs d'accéder à l'application sans enregistrement, fournissant un utilisateur temporaire pour l'association de données.

(Exemple de code démontrant la connexion anonyme et la mise à jour de profil omise pour la concision)

Authentification Google

La connexion Google fonctionne de manière similaire à l'authentification anonyme.

(Exemple de code démontrant la connexion Google omise pour la concision)

Surveillance de l'état d'authentification

La méthode onAuthStateChanged suit les modifications de l'authentification, permettant des mises à jour d'interface utilisateur en fonction de l'état de connexion.

(Exemple de code démontrant onAuthStateChanged omis pour la concision)

Convertir les invités en utilisateurs permanents

Les comptes d'invités peuvent être mis à niveau vers des comptes permanents à l'aide de linkWithRedirect .

(Exemple de code démontrant la fusion de compte omis pour la concision)

Gestion des erreurs de fusion de compte

La gestion des erreurs est essentielle lors de la fusion du compte.

(Exemple de code démontrant le traitement des erreurs omis pour la concision)

Visualisation des données et flux de données en temps réel

Cette section se concentre sur la création d'un graphique à secteurs et les synchroniser avec les données de Firestore.

(Explication des propriétés personnalisées de gradient conique et de CSS omises pour la concision)

(Exemple de code démontrant Firestore Data Retrieval and Pie That Update omis pour Brevity)

Modélisation des données dans les bases de données NoSQL

Firestore est une base de données de documents NoSQL avec une structure hiérarchique de collections et de documents. La modélisation des données implique de structurer efficacement les données à l'aide de collections et de sous-collections.

(Exemples de code démontrant la récupération des données de Firestore et l'interrogation omise par Brivity)

Streaming Data à la visualisation

La méthode .onSnapshot() de Firestore permet le streaming de données en temps réel.

(Exemple de code démontrant le streaming de données en temps réel omis pour la concision)

Sécuriser votre base de données avec des règles de sécurité Firebase

Les règles de sécurité contrôlent l'accès aux données dans Firebase. Ils sont évalués sur le serveur pour chaque demande.

(Explication des règles de sécurité et des exemples omis pour la concision)

Conclusion

Ce guide a couvert l'authentification des utilisateurs, la modélisation des données, la synchronisation des données en temps réel et la sécurité de la base de données à l'aide de Firebase. N'oubliez pas d'explorer des ressources de base d'incendie supplémentaires pour un apprentissage ultérieur. Firebase simplifie la gestion back-end, permettant aux développeurs de se concentrer sur le front-end.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!