Nous allons dans cet article créer une application Angular2 cherchant les données sur une base FireBase avec une authentification Google.

contenu technique:

• Angular2/Angular-CLI : nous utiliserons le générateur d’application angular2 (angular-cli) https://cli.angular.io/
• AngularFire2: middleware d’acces a la base. https://github.com/angular/angularfire2
• Firebase : une base de données NoSql en ligne. https://console.firebase.google.com/
• Google Authentification: authentification via un compte google.
• Upload d’image.
• Angular2 Flash Message : affichage de message flash https://www.npmjs.com/package/angular2-flash-messages

Lets get started:

spécifications:

Notre application est une sorte de bourse aux joueurs de football, mise à part que nous n’allons pas ajouter de fonctionnalités d’achat et de vente de joueurs 🙂

Nous voulons que les utilisateurs puissent vérifier les données relatives à leurs joueurs préféré.

Pour cela nous allons extraire quelques données depuis une api que j’ai trouver sur le web et qui met à notre disposition toutes sorte de données concernant le monde du football. nous n’allons pas en exploiter toutes les possibilitées, l’objectif étant de donner un exemple d’Angular2 et Firebase.

La première chose à faire est de créer un nouveau projet Firebase en se rendant sur le site de Firebase:

après avoir choisi un nom pour notre projet nous pouvons le créer:

ce qui nous donne accès a une interface ou nous pouvons paramétrer plusieurs aspect de notre projet.

la seconde chose à faire est de configurer notre base de données ainsi que le type d’authentification qu’utilisera notre application.

Firebase la base de données NoSQL:

Firebase est un SGDB en ligne qui ne se base pas sur du SQL mais plutôt sur du JSON, c’est un équivalent de MongoDB sauf que tous est en ligne. Firebase présente aussi des fonctionnalités d’authentification, de stockage etc.

Notre application doit se connecter à une base afin d’en récupérer les données et les afficher à l’utilisateur, créons donc cette base.

les données de notre base représentent une liste de joueurs de football avec les champs associés (nom , prénom, club, valeur, date de naissance, photo etc)

afin de peupler notre base de donnée nous allons créer un fichier json que nous importerons dans notre base ce qui aura pour effet de creer la base ainsi que les differents champs. (les données sont récupérées depuis l’api suivante http://api.football-data.org/documentation, j’ai effectué un petit travail d’adaptation afin d’avoir un fichier consomable par Firebase) vous pouvez récupérer le fichier data.json sur le github associer a cet article.

• import du fichier data.json afin de créer la base et d’en initialiser les enregistrements

si le fichier de données n’est pas bien formé il ne sera pas accepter lors de l’import

notre fichier est de la forme suivante :

{
"players":{
"-Kdl_wRRkn7nJxgz4B54" : {
"name":"Paul Pogba",
"position":"Central Midfield",
"jerseyNumber":6,
"dateOfBirth":"1993-03-15",
"nationality":"France",
"contractUntil":"2021-06-30",
"marketValue":"70,000,000 €",
"face":"pogba.jpg"
},

la nom de la table sera donc « players » nous pouvons verifier que l’import c’est bien passer à l’url suivantes:

maintenant que nous avons une collection avec un jeu de donnée passons à la configuration du fournisseur d’authentification.

Authentification:

rien de plus simple :

• dans le menu de droite l’onglet Authentification-> Mode de connexion nous allons choisir Google pour l’authentification Google.

nous avons ainsi créer une nouvelle application avec un mode d’authentification se basant sur google.

les données de notre application ne seront donc accessible qu’apres une authentification google.

 

Le Frontend:

notre application web est basé sur le framework Angular2, afin de nous simplifier la vie nous allons utiliser l’excellent générateur angular-cli:

• génerer un nouveau projet Angular:

  ng new footballeurs-faces 

cette commande génére tous les fichiers de base de notre application et install les dépendances, nous avons aussi un outils de build très performant « webpack » de l’autoreload, un git local, des test unitaires et endToend etc, je vous conseille vivement de l’utiliser si ce n’est pas le cas.

Le Middleware:

maintenant que notre application est en place il nous faut un middleware pour acceder à notre base ainsi que pour l’authentification.

le middleware que nous allons utiliser se trouve sur le repository github suivant:

https://github.com/angular/angularfire2

en gros ce middleware utilise les ‘observable’ de rxjs pour recuperer les données et les fournir à notre application.

Nous allons en profiter pour installer un framework css (semantic-ui-css) pour nous faciler la mise en page.

• installation

  npm install firebase angularfire2 semantic-ui-css --save

pour que semantic-ui soit builder lors du demarrage de notre application il faut ajouter le semantic-ui-css (ou min.css pour la prod) et la dependence jquery.js au fichier de configuration de angular-cli:

ce qui a pour effet lors du build via la commande ng serve ou ng build (webpack) d’ajouter tous nos styles et js dans les fichiers styles.bundle.css pour les css et scripts.bundle.js pous les js.

Génération des composants de l’application:

pour générer les differents élements visuel de notre application nous allons bien entendu utiliser le generateur angular-cli en executant les commandes suivantes:

ng generate component home //page d'acceuil

ng generate component players //page de la liste de tous les joueurs

ng generate component navbar //le navbar pour la navigation

ng generate component playerdetails //page des details d'un joueur

ng generate component playeradd //page d'ajout d'un nouveau joueur

ng generate component playeredit //page de modification des données d'un joueur

A chaque generation d’un composant quatre fichiers sont creer et une modification du fichier app.module.ts. (css, ts et html contiendrons le code du composant)
les fichiers *.component.spec.ts : contiennent les teste unitaire que nous pourrions implementer pour chaque composant mais ce n’est pas le sujet de cet article nous n’allons donc pas toucher a ces fichiers.
l’update  de src\app\app.module.ts consiste à importer tous nos composant dans le point d’entrer de notre application.

Pour tester que tous nos composants sont correctement configurés mettons en place les routes pour naviguer entre les differentes vues.

Nous pouvons soit generer un nouveau module contenant les routes de notre application (best practice pour garder un code lisible dans le cas d’application importante) soit les generer directement dans le module app.module.ts ce que nous allons faire vue que nous n’avons que quelques routes.

Les Routes:

Voici les routes que nous allons definir dans un premier temps:

à l’url :’/’ => Afficher le composant Home

à l’url :’/players’ => Afficher le composant players

pour mettre en place les routes nous allons

1. importer les modules de routes dans app.module.ts
   import { RouterModule, Routes } from ‘@angular/router’;
2. ajouter un tableau contenant les definition des routes
   const routesapp: Routes = [

     { path:  », component: HomeComponent },

     { path: ‘listings’, component: PlayersComponent }

   ]
3. ajour du tableau de route dans la partie import
   imports: [

       BrowserModule,

       FormsModule,

       HttpModule,

       RouterModule.forRoot(routesapp)

     ],

le point d’entree visuel est l’app.component.html c’est ici que nous allons ajouter le navbar et le contenu des routes:

 

 

Liens

Gihub :