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 avec AngularJS et Firebase

by
Difficulty:BeginnerLength: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

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

Dans cette série, nous utiliserons AngularJS et Firebase pour créer une simple application web depuis le début. Ce sera une simple application de blog où l'utilisateur pourra s'identifier ou s'enregistrer et publier un article.

Ce tutoriel suppose que vous ayez une connaissance basique d'AngularJS, mais ça ne devrait pas être trop dur de comprendre les principes en cours de route.

Introduction à AngularJS

AngularJS est l'un des frameworks MVC JavaScript les plus prisés. C'est un framework de construction pour créer des applications web dynamiques en étendant les capacités du HTML. Des caractéristiques comme la liaison de données et l'injection de dépendance facilite le développement d'applications avec moins de code.

Depuis la documentation AngularJS:

HTML est génial pour déclarer des documents statiques, mais il chancelle quand on essaye de l'utiliser pour déclarer des vues dynamiques dans les applications web. AngularJS vous laisse étendre le vocabulaire HTML pour votre application. L'environnement qui en résulte est extraordinairement expressif, lisible et rapide à développer.

Introduction à Firebase

Imaginez créer une application web sans devoir se soucier de la partie back-end. Firebase rend possible la synchronisation de données en temps réel avec l'application sans s'inquiéter du back-end. Tout ce que nous avons à faire ce sont quelques appels API.

Firebase est une puissante API (interface de programmation) pour ranger et synchroniser des données en temps réel. En combinant de façon bilatérale la puissance de la liaison de données d'AngularJS avec les résultats de Firebase on obtient une synchronisation à trois niveaux qui est plutôt énorme.

Commencer avec AngularJS

Le projet angular-seed est un boilerplate pour démarrer la création d'une application web avec AngularJS. Télécharge ou copie le projet angular-seed depuis le répertoire.

Navigue jusqu'au dossier du projet et installe les dépendances requises.

Lance le serveur node:

Fais pointer ton navigateur surhttp://localhost:8000/app/index.html et tu devrais voir tourner l'application par défaut.

Navigue jusqu'au dossier app à l'intérieur de angular-seed. C'est là que se situe le code de l'application. A l'intérieur du dossier app tu trouveras app.js qui est le noyau de l'application. Nous allons déclarer tous les modules et routes du niveau de l'application dans ce fichier. Par défaut, le projet angular-seed a deux vues, view1 et view2. Supprime les dossiers view1 et view2 du dossier de l'application.

Commençons depuis le début. Ouvre app.js et enlève le code existant. Dans app.js nous allons définir les routes de notre application, par exemple, comment gérer une requête comme /home. Afin de définir les routes, nous allons avoir besoin d'un module d'AngularJS appelé ngRoute. Pour utiliser ngRoute nous devons d'abord l'injecter ou l'ajouter dans notre application. Nous allons utiliser angular.module pour ajouter le module ngRoute à notre application comme montré ci-dessous:

Le module ngRoute a un composant appelé $routeProvider qui est utile pour configurer les routes. Nous allons injecter $routeProvider dans la méthode config de angular.module et définir nos routes dans sa fonction de rappel comme montré ci-dessous:

Ensuite, ouvre index.html et enlève les références de script pour view1 et view2. Supprime tout le contenu du body de index.html à l'exception des références script et la div montrée ci-dessous avec la directive ngView.

ngView est une directive qui aide à rendre la vue attachée avec une route particulière dans le layout principal, index.html. Donc à chaque fois que la route change, le contenu de la div montrée ci-dessus change également.

Maintenant créons une nouvelle vue pour la connexion utilisateur. A l'intérieur du dossier app crée un nouveau dossier appelé home. A l'intérieur de home, crée deux fichiers appelés home.html et home.js. Ouvre home.html et inclus le code HTML suivant:

Comme on l'a vu dans le code ci-dessus, nous allons utiliser Bootstrap pour créer les vues de notre application.

A l'intérieur de home.js, nous allons déclarer les routes pour que l'application accède à la vue de home. $routeProvider a une méthode appelée when, que nous allons utiliser pour créer une vue pour notre vue home. Quand on définit une nouvelle route, on met en place un templateUrl qui sera rendu dans index.html. Egalement, nous allons mettre en place un controller pour le $scope nouvellement créé de la vue home. Un controller est une logique qui contrôle une vue en particulier. Voici à quoi ça doit ressembler:

Maintenant ouvre app.js et inclus le module home myApp.home dans l'application Déclare aussi la route par défaut de notre application en utilisant la méthode $routeProvider.otherwise pour la vue home.

Ensuite, afin d'afficher la page d'accueil, on a besoin d'inclure home.js dans le fichier du template HTML principal de l'application. Ouvre index.html et inclus le code suivant:

Relance le serveur et dirige ton navigateur sur http://localhost:8000/app/index.html et tu devrais voir l'écran de connexoin:

AngularJS Firebase

Commencer avec Firebase

Afin de commencer, on a besoin d'enregistrer un compte gratuit sur Firebase. Quand l'inscription est réussie, voici l'écran qui apparaît:

Firebase Dashboard

Prends note de l'URL de l'application créée et clique sur le bouton Manage App. On utilisera cette URL Firebase pour interagir avec la base de données Firebase.

Nous utiliserons Firebase pour authentifier notre application grâce à une email et un mot de passe. Afin que ça fonctionne, on a besoin de l'autoriser depuis Firebase. Dans le tableau de bord, clique sur l'onglet Login & Auth dans le côté gauche du menu. Dans cet écran, sous l'onglet Email & Password, coche la case Enable Email & Password Authentication comme montré ici:

Enable Email Password Authentication

Ajoute un nouvel utilisateur avec un Email et Password avec lesquels on va s'authentifier une fois la fonctionnalité de connexion implémentée.

Add a new user with an Email and Password

Implémenter la fonctionnalité de connexion

Pour commencer à utiliser Firebase, inclus les scripts suivants dans app/index.html:

Ensuite, on doit injecter le module firebase dans home.js. Ajoute le module firebase dans home.js comme montré ci-dessous:

Maintenant on est prêts à interagir avec Firebase. Ouvre home.js et à l'intérieur de HomeCtrl, crée une nouvelle fonction appelée SignIn pour authentifier l'utilisateur. Nous utiliserons $scope pour créer la nouvelle fonction. $scope est un objet qui se réfère au modèle de l'application, et aussi qui agit comme de la glue entre la vue et le controleur de l'application. Donc on injecte l'objet $scope dans la fonction SignIn pour que le modèle d'objet de la vue soit accessible à l'intérieur de la fonction SignIn.

Ensuite, dans HomeCtrl crée une instance Firebase en utilisant l'URL Firebase comme ici:

Le module $firebaseSimpleLogin est utilisé pour s'authentifier dans Firebase en utilisant l'ID d'email et le mot de passe. Pour l'utiliser, on doit injecter le module $firebaseSimpleLogin dans HomeCtrl comme ici:

En utilisant firebaseObj crée une instance $firebaseSimpleLogin comme ici:

Maintenant, en utilisant l'API $login, on va authentifier l'ID de l'email et le mot de passe dans Firebase. loginObj.$login prend l'email et le mot de passe comme paramètres. Pour une identification réussite, on aura un message positif et pour un échec d'identification, on aura un message d'erreur.

Maintenant pour que tout le code du contrôleur ci-dessus fonctionne, on doit attacher le contrôleur à la vue. AngularJS fournit une directive appelée ngController qui attache le contrôleur à une vue. Ouvre home.html et ajoute la directive ngController à l'élément body pour l'attacher à HomeCtrl.

On a besoin que les valeurs email et mot de passe soient accessibles dans la fonction du contrôleur SignIn. AngularJS fournit une directive appelée ngModel pour lier ces valeurs au $scope afin que ce soit accessible dans la fonction SignIn. Inclus la directive ngModel dans les éléments input de l'email et du mot de passe comme montré ici:

Finalement, ajoute la directive ngClick au bouton d'identification pour appeler la fonction SignIn:

Enregistre toutes les modifications et relance le serveur. Dirige le navigateur sur http://localhost:8000/app/index.html#/home et essaye de t'identifier en utilisant l'ID d'email jay3dec@gmail.com et le mot de passe jay. Si l'identification de l'utilisateur réussit, tu devrais voir le message Authentification successful dans la console du navigateur.

Conclusion

Dans ce tutoriel, nous avons vu comment commencer à créer une application web AngularJS. Nous avons implémenté la fonctionnalité d'identification et nous avons réussi à identifié l'utilisateur dans la base de données de Firebase.

Dans la deuxième patrie de ce tutoriel, nous amènerons tout cela à un autre niveau en implémentant les validations, la fonction d'enregistrement, et d'autres caractéristiques. Le code du tutoriel ci-dessus est disponible sur GitHub.

Laisse-nous tes 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.