Créer une application Web complète avec Angular

14/11/19 dannyEnglish Version

Qu'allons nous faire ?

Nous allons créer une application web complète.
Nous utiliserons le Framework Javascript Angular version 8.2.14

L' application est accessible à l'adresse suivante

Le code source est disponible sur github


Comment le faire ?

Le résumé de ce que nous allons faire

  • Avant de Commencer
    Nous parlerons du projet et de son architecture
  • Récupération du code source
    Tout ce que nous utiliserons pour créer notre application
  • Exécution de la partie Front End
    En utilisant Angular CLI
  • Exécution de la partie Back End
    Installer et créer les API

Architecture

Ce projet comporte deux parties

  • La partie Front End
    Cette partie représente la partie graphique de l'application, celle que l'utilisateur voit dans son navigateur
     
  • La partie Back End
    Cette partie pemet de gèrer les données.

Ces deux parties vont nous permettre de constituer un projet complet.

  • Front End
    Cette partie fait appel aux éléments suivants
    Le Framework Javascript Angular
    Le Framework CSS Bootstrap
     
  • Back End
    Cette partie permet de traiter les données.
    La base de données utilisée est PostgreSQL.
    Elle nous pemert de créer une API RESTFull de type CRUD.

Git

Il nous faut récupérer le code source sur notre poste de travail.
Pour cela nous utiliserons la commande git suivante

git clone https://github.com/ganatan/angular8-pwa.git

Exécution du Front End

Nous allons utiliser un éditeur de code.
Notre choix se porte sur Visual Studio code.

Il faut ouvrir le projet.
Puis nous éxécuterons les étapes suivantes

  • Installation des dépendances
  • Exécution du programme en mode développement
  • Exécution des tests unitaires
  • Exécution des tests end to end
  • Compilation du projet en mode SSR

Les commandes à utiliser sont les suivantes

# Installation des dépendances
npm install

# Développement
npm run start
http://localhost:4200/

# Tests du code source
npm run lint

# Tests unitaires
npm run test

# Tests end to end
npm run e2e

# AOT Compilation
npm run build

# SSR Compilation
npm run build:ssr
npm run serve:ssr
http://localhost:4000/


Fonctionnement du Front End

Cette application fonctionne en utilisant le principe des API.
L' accès aux API est paramètrable.

Ce projet propose 4 types d'API

  • Une API basée sur des fichiers JSON en local
    Cette API permet de faire fonctionner le projet immédiatement sans autre logiciel
    Elle n'est pas de type CRUD (create,read,update,delete)
     
  • Une API local basée sur la partie Backend de ce projet
    Pour la faire fonctionner il faut lancer la partie Back end détaillée plus loin dans ce tutoriel
    Elle est de type CRUD (create,read,update,delete)
  • Une API externe mock.ganatan.org
    Elle est de type CRUD (create,read,update,delete)
    Les données sont les mêmes que sur l'API Backend
  • Une API externe api.ganatan.org
    Elle n'est pas de type CRUD (create,read,update,delete)
    Les données sont basées sur l'actualité ciné et séries



Par défaut le projet utilise l'API JSON.

Le choix peut être fait via les fichiers d'environnement.

src/environnement/environnement.ts
export const environment = {
  production: false,
  application: {
    name: 'angular.ganatan',
    angular: 'Angular 8.2.14',
    bootstrap: 'Bootstrap 4.3.1',
  },
  config: {
    /* SELECT ONE OF THOSE CONFIGURATIONS */

    /* LOCAL JSON (NO CRUD) */
    api: false,
    url: './assets/params/json/',

    /* LOCAL REST API CRUD  */
    /* api: true,
    url: 'http://localhost:5201/', */

    /* EXTERNAL REST API CRUD */
    /* api: true,
    url: 'https://mock.ganatan.org/', */

    /* EXTERNAL REST API (NO CRUD) */
    /* api: true,
    url: 'https://api.ganatan.org/',*/

  },
};

Exécution du Back end

Nous allons faire fonctionner l'API disponible dans ce dépôt.

L'API se situe dans le répertoire api du projet.
Les étapes à suivre sont les suivantes

  • Aller dans le répertoire du code source
  • Installer les dépendances
  • Créer la base de données
    Cette API utilise postgreSQL.
    Il vous faut indiquer vos informations de login et password dans le fichier config.json
  • Executer l'API

Les commandes à éxécuter sont les suivantes.

# Aller dans le répertoire de l'api
cd api

# Installer les dépendances
npm run install

# Créer la base de données
npm run app

# Exécuter l'api
npm run start

# Vérifier l'api avec les commandes
http://localhost:5200/continents?formatted
http://localhost:5200/countries?formatted
http://localhost:5200/cities?formatted
http://localhost:5200/movies?formatted
http://localhost:5200/shows?formatted

Fonctionnement du Back End

Cette API dispose de scripts permettant de créer la base de données et ses éléments.
Les opérations qui peuvent être réalisées sont les suivantes

  • Création de la base de données
  • Création des domaines
  • Création des tables
  • Importation des données à partir de fichiers json
  • Exportation des données dans des fichiers json

Il faut évidemment avoir installer postgreSQL sur son poste de travail.
L' API doit pouvoir se connecter à postgreSQL pour cela il vous faut indiquer les informations de votre sgbdr

  • Login
  • Password

Par défaut le login de postgreSQL est postgres
Ces informations sont modifiables dans le fichier config.json
Dans ce dépôt les informations sont 

  • login : postgres
  • password : Trustno1

Il vous suffit de les remplacer par vos propres identifiants.

{
  "dev": {
    "application": "ganatan-backend",
    "databaseName": "ganatan",
    "url": "http://localhost:5200/",
    "login":"postgres",
    "password":"Trustno1",
    "port": 5200
  },
  "prod": {
    "application": "ganatan-backend",
    "databaseName": "ganatan",
    "url": "https://mock.ganatan.org/",
    "login":"postgres",
    "password":"Trustno1",
    "port": 5200
  }
}

Commentaires 4
User Image
danny


Bonjour
Il faudrait me donner un peu plus de détails.
S'agit t'il des modules en tant que constituants du projet (Application/General),
ou l'utilisation de la notion inheritance (commande extends).
Je suis en train de retravailler sur une prochaine version de ganatan avec des tutoriaux beaucoup plus détaillés.
Et notamment ce tutoriel.
J'espère qu'il sera plus clair.
Cordialement



User Image
Side SARR
C'est trés interessent mais j'ai pas bien compris la notion des module

User Image
Luni
Je debute sur Angular (et je galère énormément pour la partie Back-end), et ce tuto est jusque là d'une aide très précsieuse !!
Je suis extrémement ravie d'avoir trouvée cette pépite dans mes recherches et met de suite dans mes favoris en attente de plus de savoir à apprendre !

Merci beaucoup !

User Image
danny ganatan
Luni,

Merci du compliment,
Faire communiquer Front et Backend n'est pas toujours évident.
Je ferais prochainement un nouveau tutoriel plus étoffé sur la partie backend.

cordialement


Laissez un commentaire

Votre avis
Cette adresse ne sera pas publiée