Partie 1 : Démarrer un projet sur de bonnes bases
Partie 2 : Construire un espace membre sécurisé avec JWT
Partie 3 : Implémenter des fonctionnalités métiers
Partie 4 : Bonus

4.1. Créer le backend de notre application

Pour commencer, connectez-vous à la console d’administration de Firebase. Vous devez entrer vos identifiants Google, si vous n’étiez pas déjà connecté avec votre compte Google. Vous verrez un bouton, au milieu de la page, intitulé « Créer un projet« . Cliquez dessus.

La page pour démarrer un nouveau projet sur Firebase.

Une boite modale va s’ouvrir et vous demander de choisir un nom et un pays pour votre projet. Le choix du pays permet d’indiquer l’emplacement de vos données et une devise pour vos éventuelles factures, mais ça n’a pas beaucoup d’importance pour la suite. Notre application de productivité ne devrait pas dépasser le quota d’utilisation gratuit de Firebase, ne vous inquiétez pas. 😀

De mon côté, j’ai renseigné “awesome-list » comme nom du projet, et j’ai sélectionné « France » pour la zone des données analytiques (j’ai laissé la valeur par défaut pour les autres champs) :

Le formulaire de Firebase vous permettant de créer un nouveau projet.

Cliquez ensuite sur le bouton « Créer un projet« . Après quelques instants, vous devriez apercevoir un message de confirmation, pour vous informer que votre application a bien été créée. Cliquer ensuite sur le bouton “Continuer”, vous serez redirigé vers l’espace dédié à l’administration de votre application, qui devrait ressembler à quelque chose comme ça :

La page d’onboarding de Firebase.

Avant de vous présenter rapidement l’interface de Firebase, nous allons d’abord récupérer les clefs de configuration de notre projet. Je vous invite donc à cliquer sur l’icône ronde et blanche, vers laquelle pointe la flèche verte ci-dessus. Vous devriez tomber sur un écran comme ceci :

On relie notre application Angular avec Firebase.

La boîte modale ci-dessus devrait s’ouvrir, et vous devrez ajouter un nom interne à votre application, qui ne sera visible que par vous. Ne cochez pas l’option Firebase Hosting, car nous le ferons plus tard dans le chapitre sur le déploiement. Cliquer ensuite sur « Enregistrer l’application ».

Vous apercevrai alors plusieurs clefs de configuration :

Récupérer la configuration Firebase pour votre application !

Vous pouvez les sauvegarder quelque part, car nous en auront besoin prochainement. 😏

Vous pouvez ensuite cliquer sur « Accéder à la console » pour fermer la page courante.

Pour récupérer ces identifiants plus tard si jamais vous fermer cette page par inadvertance, rendez-vous dans l’onglet « paramètres » de votre projet, en cliquant sur la petite molette indentée en haut à gauche de votre espace Firebase. Vous serez alors redirigé vers une page, descendez un peu, et vous retrouverez vos clefs de configuration.

Pour revenir à notre interface, vous pouvez voir plusieurs onglets dans la section “Développer”, dans le menu de navigation à gauche de la page. Les sections qui nous intéressent sont les suivantes :

  • Authentification : Concerne l’authentification au sein de notre application.
  • Database : C’est notre base de données, qui sauvegarde toutes les données générées par notre application, et fournit une interface permettant de consulter ces données.
  • Storage : Similaire à la base de données, mais pour le stockage des fichiers.
  • Hosting : Il s’agit de l’hébergement de notre application, lorsque nous la déploierons.

Pour le moment, cette espace d’administration est plutôt vide, car notre application Angular n’est pas encore reliée à Firebase. Mais plus tard, nous pourrons consulter le nombre d’utilisateurs inscrits, ou encore les données sauvegardées depuis notre application de productivité. Maintenant, vous avez un projet disponible sur Firebase, prêt à accueillir les données de votre application. 😎