Ionic - 3.10 Associer une application Ionic à Firebase

Firebase est un ensemble de services d'hébergement créé en 2011. Il peut héberger des bases de données en temps réel, du contenu, de l'authentification sociale ou des notifications. Cette leçon relie une application Ionic à Firebase, puis enregistre une note dans la base de données.

Comprendre les étapes de la liaison

Firebase convient à tout type d'application. La liaison avec Ionic suit quatre étapes : créer le projet et enregistrer l'application, installer le SDK et l'initialiser, récupérer la configuration, puis utiliser un module d'empaquetage qui réduit la taille de l'application web.

La documentation officielle de Firebase détaille chacune de ces étapes. La vidéo s'appuie sur cette documentation pour suivre le même chemin.

Créer le projet Firebase et l'application web

Dans la console Firebase, on crée un projet en saisissant son nom. Si le nom est déjà pris, Firebase propose une variante, à accepter ou à modifier.

On choisit ensuite le type d'application web, on lui donne un pseudo, puis on l'enregistre. Firebase propose alors d'installer le SDK, par une commande ou par un script. La vidéo utilise la commande.

Préparer l'application Ionic

On crée une application Ionic avec la commande ionic start, puis on ouvre le dossier du projet. La vidéo génère ensuite une page modale, puis un service placé dans le dossier services.

L'installation d'AngularFire se fait avec la commande suivante, qui ajoute le module Firebase à l'application.

ionic start <nom-du-projet>
ng add @angular/fire
ionic g service services/data

Relier la configuration et enregistrer une note

La configuration copiée depuis la console est placée dans le fichier d'environnement. Dans la vidéo, les guillemets doubles posaient un problème, et les apostrophes simples ont permis de le résoudre.

Dans le module principal, les fonctions fournies par AngularFire initialisent Firebase et Firestore. La base est créée en mode test pour l'apprentissage, car le mode production demande des règles de sécurité adaptées.

Le service de données importe les outils Firestore, comme la collection. La page d'accueil contient un formulaire avec un champ de saisie, qui envoie la note à la base. Pour tester, la vidéo ajoute la note « faire des abdos » avec l'indication sport, puis vérifie qu'elle apparaît dans la base.

export const environment = {
  production: false,
  firebase: {
    // Coller ici la configuration copiée depuis la console Firebase
  }
};

En résumé

Relier une application Ionic à Firebase demande trois parties : le projet dans la console, le SDK installé dans l'application, et la configuration copiée dans le fichier d'environnement. Une fois la base créée, un formulaire peut y enregistrer une note. La vidéo termine par ce test concret : la note apparaît dans la base de données.

Points clés

• Un projet Firebase se crée dans la console, avec une application web enregistrée.
• Le SDK Firebase s'installe avec AngularFire dans le projet Ionic.
• La configuration Firebase se place dans le fichier d'environnement.
• La base de données démarre en mode test pour l'apprentissage, pas en production.
• Un service et un formulaire permettent d'enregistrer une note dans la base.

Questions fréquentes

Pourquoi le mode test n'est-il pas adapté à la production ?

Le mode test autorise tout utilisateur qui connaît la référence de la base à y accéder. Une application réelle a besoin de règles de sécurité plus strictes.

Pourquoi utiliser des apostrophes simples dans la configuration ?

Dans la vidéo, les guillemets doubles n'étaient pas lus correctement. Les apostrophes simples ont permis de corriger le problème.

Comment vérifier que l'application est bien reliée à Firebase ?

Ajoutez une note depuis le formulaire, puis ouvrez la base dans la console Firebase. La note doit y apparaître avec son texte.