Firebase | AngularFire V6

Contenu

Créer un backend avec Firebase et AngularFire en quelques instants. 

AngularFire permet une interaction simplifiée avec Angular, en bénéficiant des Observables permettent de traiter les données comme des flux asynchrones. Il permet également très facilement d'implémenter un système d'authentification.

Apprenez à

- créer des comptes utilisateurs

- gérer l'authentification (login, logout)

- permettre aux utilisateurs connectés d'accéder à leur profil

- faire du CRUD sur une base Firestore (le cloud de Firebase)

- sécuriser les données grâces aux règles de sécurité de Firestore

- prendre en main puis maîtriser AngularFire

- créer des interfaces graphiques esthétiques grâce à Angular Material

Public

Développeurs Web Front-End et Back-End avec de bonnes connaissances en Angular.

Programme

AngularFire 6 

1. Démarrage du projet:

  • Génération d'un nouveau projet avec angular-cli
  • Installation d'AngularFire 6
  • Création d'une base de données Firestore
  • Configuration et importation des modules AngularFire

2. Angular Material:

  • Installation d'Angular Material
  • Material Toolbar
  • Angular Material Tabs
  • Angular Material Card
  • Angular Material Form field et Button
  • Angular Material Form field et Button (suite)
  • Remise à zéro des styles d' formulaire après soumission

3. Permettre à un utilisateur spécifique de faire du CRUD dans la base Firestore 

4. Lecture des données présentes sur Firestore:

  • Récupération de données de Firestore depuis Angular
  • Refactorisation afin de requêter Firestore via un service

5. Récupération des saisies via un template Reactive Form:

  • Création d'un Reactive Form
  • Création d'un Reactive Form (partie HTML)
  • Soumission du Reactive Form
  • Création et émission d'un custom event
  • Pousser un objet dans Firestore
  • Accéder aux métadonnées de Firestore
  • Les templates driven forms

6. Le routage:

  • Création de routes
  • Récupérer les paramètres d'une route à l'aide d'ActivatedRoute
  • Naviguer vers le détail d'une citation à l'aide de Router et navigate()
  • Refactoriser vers le backend
  • Suppression d'un document de Firestore
  • Préparer la suppression d'une Quote
  • Suppression d'une Quote

7. Mise à jour d'un document dans Firestore:

  • Création d'un custom event "update"
  • Ajout d'une méthode d'update dans le service
  • S'abonner à un RxJs Subject
  • Remplir un formulaire avec les données poussées par un RxJS Subject
  • Créer l'interface Quote
  • Sauvegarder une Quote modifiée
  • Annuler l'édition

8. Authentification:

  • Créer un formulaire d'authentification
  • Créer un service d'authentification
  • Implémentation du service d'authentification utilisant AngularFireAuth
  • Permettre à un utilisateur créer en base de se loguer
  • Accéder aux informations de l'utilisateur actuellement logué
  • Implémenter la déconnexion
  • Envoyer un email de vérification
  • Configurer la langue de l'email de vérification

9. Autorisations:

  • Permettre à un utilisateur spécifique de faire du CRUD dans la base Firestore
  • Création d'un component de login dédié

Prochaines dates

du 08.06.2020 au 12.06.2020

Écolage

CHF 750.-

nomades e-learning

Les formations nomades.ateliers certifiantes ainsi que les workshops
peuvent être suivis dorenavant d'une manière interactive
sur notre platforme Moodle

Cliquez sur la cafetière