Framework EHop/Ecenvir

Présentation au sujet: "Framework EHop/Ecenvir"— Transcription de la présentation:

1 Framework EHop/Ecenvir

2 Historique Client-Serveur
Quelques clients connus Client Lourd Client HTML/CSS/JS Léger puis de plus en plus lourd Potentiellement des millions de clients inconnus Réseau internet 1 connexion par requête Protocole HTTP Réseau privé 1 connexion par client Langage SQL Serveur HTTP (apache) Langage php, java… BDD Réseau privé 1 connexion par requête (avec gestion de pool éventuelle) Langage SQL BDD

3 Client-Serveur EHop/Ecenvir
IHM (browser) Toute l’IHM (client) est chargée en une fois. Javascript est le langage de programmation HTML/CSS est le langage de description HTML/CSS Bootstrap Javascript KnockoutJS JQuery Les données sont chargées à la demande. Les échanges sont le plus souvent en JSON. Réseau CHU Echange en JSON wiki_json Serveur (unix) Le serveur présente une API au client Cette API est programmée en PHP PHP-Silex (symfony) BDD MySQL ou Oracle

4 L’application (1) Authentification Toute l’IHM d’authentification
Toute l’IHM d’authentification est chargée en une fois. C’est une page HTML-CSS-JS (C’est une vue pour le modèle MVC habituel) Une fois chargée L’IHM est initialisée (linkage HTML-knockout) On peut alors l’utiliser Les échanges avec le serveur sont en JSON Si la connexion est validée une redirection vers une autre IHM est effectuée.

5 L’application (2) IHM Admin Toute l’IHM d’administration
Toute l’IHM d’administration est chargée en une fois. Elle est différente de l’IHM de d’authentification (C’est une autre vue pour le modèle MVC habituel) Les échanges avec le serveur sont en JSON

6 L’application (3) IHM Admin L’onglet Formation User est vide
L’onglet Formation User est vide Comment ajouter une fonctionnalité ?

7 Ajout d’une liste d’utilisateurs (0)
Les fichiers impactés Création d’un bouton de chargement Affichage de la liste des utilisateurs E:\christian_merour\ecenvir\current\web\component\Admin\TabFormationUser.html Gestion du click du bouton de chargement Appel HTTP-AJAX Utilisation du retour JSON E:\christian_merour\ecenvir\current\web\component\Admin\TabFormationUser.js Réception de l’appel HTTP-AJAX retour en JSON Appel du service utilisateur E:\christian_merour\ecenvir\current\src\Ecenvir\Ctrl\AdminAjaxCtrl.php Appel SQL en BDD sur la table des utilisateurs E:\christian_merour\ecenvir\current\src\Ecenvir\Service\UserService.php http_foundation doctrine-dbal

8 Ajout d’une liste d’utilisateurs (1)
HTML E:\christian_merour\ecenvir\current\web\component\Admin\TabFormationUser.html Utilisation de bootstrap pour le choix des classes CSS Utilisation de knockout pour la liaison javascript

9 Ajout d’une liste d’utilisateurs (2)
javascript E:\christian_merour\ecenvir\current\web\component\Admin\TabFormationUser.js Le lien entre le fichier html et js est assuré par knockout Appel Ajax/JSON

10 Ajout d’une liste d’utilisateurs (3)
JSON Url d’appel : Retour json : [ {"id":"4","login":"user_3","firstname":"Christian","lastname":"MEROUR"}, {"id":"3","login":"user_2","firstname":"Christian","lastname":"MEROUR"}, {"id":"2","login":"user_1","firstname":"Christian","lastname":"MEROUR"}, {"id":"1","login":"root","firstname":"Christian","lastname":"MEROUR"} ]

11 Ajout d’une liste d’utilisateurs (4)
Controleur Url d’appel : Rôle : Présentation de l’API (Ce que voit le client) Vérification des droits d’accès Extraction des données de la requête Appels aux services Gestion du la mise en forme du retour Fichier php : E:\christian_merour\ecenvir\current\src\Ecenvir\Ctrl\AdminAjaxCtrl.php

12 Ajout d’une liste d’utilisateurs (5)
Service Fichier php : E:\christian_merour\ecenvir\current\src\Ecenvir\Service\UserService.php Rôle : Donne des services aux Contrôleurs Accède à la base de Données Effectue des traitements métier lourds

13 Les fichiers (1) Configuration Répertoire :
E:\christian_merour\ecenvir\current\config Un répertoire de configuration par environnement Initialise les objets principaux de l’application (fait le new object) Loggeur Service Connexion BDD … Déclaration du routage des requêtes HTTP

14 Les fichiers (2) Le Serveur Répertoires : Les contrôleurs (API HTTP)
E:\christian_merour\ecenvir\current\src\Ecenvir\Ctrl\ E:\christian_merour\ecenvir\current\src\Ecenvir\Service\ E:\christian_merour\ecenvir\current\src\Ecenvir\Support\ Les contrôleurs (API HTTP) Les services Code métier Accès BDD Les outils

15 Les fichiers (3) L’IHM (1) Répertoire des vues HTML :
E:\christian_merour\ecenvir\current\views\ Une vue par type d’IHM client Rôle : Charger tout le code nécessaire à l’IHM. Contient donc tout le code des composants.

16 Les fichiers (4) L’IHM (2) Répertoire des composants HTML-JS :
E:\christian_merour\ecenvir\current\web\componant\ Un répertoire par vue d’IHM Un couple de fichier HTML-JS par composant Le fichier HTML donne le design Le fichier JS donne le comportement Les composants peuvent utiliser d’autres composants. Au final ils constituent l’IHM.

17 Les fichiers (5) Les Librairies Répertoires
E:\christian_merour\ecenvir\current\vendor\ E:\christian_merour\ecenvir\current\web\lib\ Répertoire var n’est pas source-contrôlé Contient les logs, les exports Répertoire vendor administré par Composer Contient les dépendances PHP Le répertoire web est accessible directement par l’IHM Répertoires communs pour l’IHM Répertoire lib administré manuellement Contient les dépendances js-css Fichier Composer pour administrer le répertoire vendor

18 Les outils du projet (1) Composer, Gestionnaire de dépendances
Site web du repository principal de composer SVN, Gestionnaire de versions des sources Tortoise, Client SVN Serveur http Apache Moteur Php Moteur HTML/CSS/Javascript

19 Les outils du projet (2) Laragon Environnement intégré LAMP pour développer Contient : Apache, PHP, MySQL, Composer, GitBash, NodeJS… Netbean, Editeur de projets PHP et Java NotePad++, Editeur de texte et de code Client FTP, FileZilla Putty, Client ssh MySQL workbench, outil de gestion de base de données MySQL (Client lourd en java) Phpmyadmin, outil de gestion de base de données MySQL (Client léger PHP)

20 Les outils du projet (3) Jira, gestion des tickets

21 Les outils de l’IHM Outils principaux Outils secondaires Bootstrap
Design HTML-CSS knockoutjs Linkage HTML-Javascript Manipulation HTML Gestion de tableaux Gestion de graphs Gestion des collections Manipulation de date Gestion d'icones (compatible Bootstrap)

22 Les outils du serveur Silex, Framework Principal, routage des requêtes (micro-framework symfony) Pimple, Gestionnaire de dépendances (IOC/configuration) symfony/templating, Gestionnaire de template simple php (Partie Vue de MVC) Wrapper HTTP symfony/http-foundation Wrapper DB doctrine/dbal Logueur monolog Wrapper smtp Wrapper ldap

23 Autres outils intéressants
(Non utilisés car double emploi) Gestion des collections javascript (détrôné par lowdash) MVC javascript Linkage HTML-Javascript orienté composants ExtJS, Système intégré de création d'IHM Dojo, Système intégré de création d'IHM Linkage HTML-Javascript Linkage HTML-Typescript (orienté composants) Gestion de dépendances Gestion de graphs MVC node.js Le langage typescript