Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Créer une application web depuis le début en utilisant AngularJS et Firebase: Partie 3

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Creating a Web App From Scratch Using AngularJS and Firebase.
Creating a Web App From Scratch Using AngularJS and Firebase: Part 2
Creating a Web App From Scratch Using AngularJS and Firebase: Part 4

French (Français) translation by Florence Bertic (you can also view the original English article)

Dans la partie précédente de cette série, nous avons créé la page d'enregistrement, mis en place les route, et également fait quelques validations de formulaire en utilisant AngularJS. Dans ce tutoriel, on va implémenter la fonctionnalité d'enregistrement en reliant AngularJS et la dernière version de Firebase. On va aussi modifier le code d'identification avec l'API Firebase le plus récent.

Commencer

Commençons par cloner la deuxième partie du tutoriel depuis GitHub.

Après avoir cloné le code source, va dans le dossier du projet et installe les dépendances requises.

Une fois les dépendances installées, lance le serveur.

Dirige ton navigateur sur http://localhost:8000/app/ et tu devrais voir l'application tourner.

Références du Script Firebase

Firebase a récemment sorti une nouvelle version, et le client FirebaseSimpleLogin que nous utilisions dans notre premier tutoriel pour identifier l'utilisateur est désormais obsolète et a été inclue dans la librairie principale de Firebase. Donc ouvre app/index.html et enlève les références Firebase existante et inclus les références script suivantes:

Modifier l'implémentation Sign-In

Va dans app/home et ouvre home.js Enlève $simplefirebaseLogin du contrôleur et injecte $firebaseAuth. Utilise-le pour créer le loginObj comme montré.

Le nouveau Firebase fournit une méthode API appelée $authWithPassword pour s'authentifier en utilistant l'adresse email et le mot de passe. Remplace la méthode de login avec $authWithPassword dans la fonction SignIn comme montré:

Enregistre les changements, relance le serveur, et essaye de t'identifier en utilisant une adresse email et un mot de passe valides. Tu devrais avoir un message de réussite dans la console du navigateur.

Implémenter la fonctionnalité d'enregistrement

On utilisera la méthode de Firebase createUser pour créer un nouvel utilisateur en utilisant l'adresse email et le mot de passe. Puisqu'on a déjà validé les données dans notre précédent tutoriel, on va lié une fonction d'enregistrement appelée par le clic du bouton d'enregistrement. Ajoute la directive ngClick au bouton d'enregistrement comme montré:

Ouvre register.js et à l'intérieur du contrôleur RegisterCtrl, crée une nouvelle fonction appelée signUp.

Dans la fonction signUp on va juste vérifier si notre formulaire est valide:

Ajoute la directive ngController à la balise body dans register.html.

Relance le serveur et navigue jusqu'à la page d'enregistrement. Clique sur le bouton Register après avoir entré l'adresse mail et le mot de passe. Maintenant, si tu vérifies la console du navigateur tu devrais le message Valid for submission.

Donc, avant d'appeler l'API Firebase pour créer un nouvel utilisateur, on a besoin d'injecter firebase dans notre application. Ouvre register.js et ajoute le module firebase.

Ensuite, on va aussi avoir besoin d'injecter $firebaseAuth dans notre contrôleur d'enregistrement.

En utilisant notre URL Firebase on va créer une instance Firebase et grâce à cette instance, on va créer un objet $firebaseAuth. On utilisera cet objet $firebaseAuth pour faire l'appel de notre API. Ajoute le code suivant dans register.js, à l'intérieur du contrôleur d'enregistrement.

Maintenant, on va récupérer l'adresse email et le mot de passe depuis $scope et appeler la méthode Firebase createUser. Voici la méthode signUp modifiée.

Comme tu peux le voir dans la fonction signUp ci-dessus, on appelé la méthode $createUser pour créer un nouvel utilisateur. Pour une création d'utilisateur réussie, on va enregistrer le message de réussite dans le message de réussite de la fonction createUser.

Relance le serveur et dirige le navigateur sur http://localhost:8000/app/#/register et essaye d'enregistrer un nouveau compte utilisateur en utilisant une adresse email et un mot de passe. Vérifie la console du navigateur après avoir cliqué sur le bouton d'enregistrement d'utilisateur. Si ça fonctionne, tu devrais avoir le message de réussite de création d'utilisateur dans la console du navigateur.

Ensuite, envoie le navigateur sur http://localhost:8000/app/#/home et essaye de t'identifier en utilisant les nouvelles valeurs utilisateur.

Le traitement des message de l'enregistrement utilisateur

Créer un message de réussite d'utilisateur

Quand un enregistrement d'utilisateur a réussi, on a besoin de rediriger l'utilisateur vers la page d'identification. Afin de rediriger l'utilisateur, on a besoin d'injecter le service $location d'AngularJS dans notre contrôleur. Donc, injecte $location comme ci-dessous:

Ajoute le code suivant au message de réussite de la fonction auth.$createUser pour rediriger l'utilisateur vers la page d'identification si l'enregistrement utilisateur a réussi.

Enregistre les changements, relance le serveur, et essaye d'enregistrer un autre compte utilisateur. Si l'enregistrement utilisateur a réussi, tu devrais être redirigé vers la page d'identification.

Créer le message d'échec utilisateur

L'enregistrement utilisateur peut être un échec à cause de certains problèmes, par exemple si l'adresse email d' l'utilisateur existe déjà. Donc quand une erreur apparaît durant l'enregistrement utilisateur, on a besoin de la montrer à l'utilisateur. Nous allons ajouter un autre message d'erreur en-dessous du champ mot de passe et mettre en place son affichage pour montrer si une erreur apparaît. Voici le message d'erreur:

Comme on le voit dans le code ci-dessus, on a utilisé la directive ngShow pour montrer le message d'erreur ci-dessus quand regError est vrai (true). Le message est affiché en utilisant la variable $scope regErrorMessage. Dans le message d'échec de createUser, ajoute le code suivant pour afficher le message d'erreur.

Voici la fonction signUp modifiée:

Enregistre les changements, relance le serveur, et essaye de t'enregistrer en utilisant une adresse mail et un mot de passe que tu avais déjà utilisés. En faisant cela, tu devrais avoir un message d'erreur qui s'affiche à l'écran comme ici:

User Registration Error Message

Créer l'écran Home (Accueil)

Quand un utilisateur s'identifie sans problèmes dans l'application, on va le rediriger vers la page d'accueil. La page d'accueil va afficher les articles créés par l'utilisateur et il y aura également une option pour créer de nouveaux articles. Créons donc la page d'accueil.

Rends-toi dans le dossier app de l'application et crée un nouveau dossier appelé welcome. Ce dossier contiendra les templates et fichiers relatifs à notre page d'accueil. A l'intérieur du dossier welcome, crée les pages appelées welcome.html et welcome.js. Ajoute le code suivant à welcome.html.

A l'intérieur de welcome.js on va définir les routes pour l'application vers la page d'accueil. On utilisera $routeProvider pour créer une route pour la vue welcome. Quand on défini une nouvelle route, on met en place un templateUrl qui sera rendu dans index.html. En même temps, on va également installer un controller (un contrôleur est une logique qui contrôle une vue en particulier) pour le $scope tout juste créé de la vue welcome. Voici à quoi welcome.js ressemble au final:

Maintenant, ouvre app/app.js et inclus le module qu'on vient d'ajouter.

Aussi, ouvre app/index.html et inclus le script register.js qu'on vient d'ajouter.

Quand un utilisateur réussit à s'identifier, on le redirige vers la page d'accueil (welcome page). Ouvre app/home/home.js et injecte $location dans le HomeCtrl.

On va utiliser $location pour rediriger l'utilisateur vers la page d'accueil. Dans home.js, à l'intérieur de la fonction SignIn, sur le message de réussite, ajoute le code suivant:

Enregistre les changements, relance le serveur, et essaye de t'identifier dans l'application. Si l'identification est réussie tu devrais être capable de voir un écran comme montré ci-dessous:

AngularJS Firebase App User Home

Accéder $scope entre les contrôleurs

Maintenant affichons sur la page d'accueil l'email de l'utilisateur enregistré. Mais il y a un problème. Pendant l'identification, on a les détails utilisateur dans HomeCtrl, mais quand on redirige vers la page d'accueil, le $scope de HomeCtrl n'est pas accessible à l'intérieur de WelcomeCtrl. Donc pour rendre cela possible on va utiliser les services AngularJS.

Les services Angular sont des objets interchangeable qui sont reliés ensemble en utilisant dependency injection (DI). Tu peux utiliser les services pour organiser et partager le code à travers l'application.

En utilisant les services on peut partager des données à travers les différents contrôleurs. Donc dans home.js on va créer notre service appelé CommonProp.

Dans le service CommonProp on a créé une variable appelée utilisateur (user), où on va mettre en place l'email de l'utilisateur identifié. Puisque le service peut être accédé depuis tous les contrôleurs, il sera possible de partager des données entre les contrôleurs en utilisant le service CommonProp.

Injecte le service CommonProp dans le HomeCtrl comme montré:

Quand l'authentification utilisateur est réussie défini la variable user dans le service ComonProp comme montré.

Aussi, injecte le service CommonProp dans le WelcomeCtrl de welcome.js.

Dans welcome.html modifie le message d'accueil (welcome) pour inclure une variable $scope comme montré.

Maintenant dans WelcomeCtrl défini la valeur de $scope.username des services CommonProp de la méthode getUser.

Enregistre tous les changements, relance le navigateur, et essaye de t'identifier en utilisant une adresse mail et mot de passe. Si l'identification est réussie tu devrais voir ton adresse email sur la page d'accueil.

AngularJS Firebase App User Home

Pour conclure

Dans ce tutoriel, on a gravi des échelons dans notre tutoriel de développement une application blog utilisant AngularJS et Firebase. On a implémenté la fonctionnalité d'enregistrement et on a aussi vu comment partager des données entre deux contrôleurs.

Dans la prochaine partie de cette série, on verra comment commencer pour implémenter la page "Créer un article de Blog".

Le code source de ce tutoriel est disponible dans GitHub.

Laissez-nous vos impressions dans les commentaires ci-dessous!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.