Télécharger pour lire hors ligne
![Final présention [recovered]](https://cdn.slidesharecdn.com/ss_thumbnails/yiss0uyqrcoxmmtmeayl-signature-53247b4a817d4ab0915f34047a536cc6bc0c9736ef61e157e239a5d80510ea9d-poli-160609193437-thumbnail.jpg?width=640&height=640&fit=bounds)
Présentation PFE Mastère PRO
- 1. INSTITUT SUPÉRIEUR DESÉTUDES TECHNOLOGIQUES DE SOUSSE 1 Réalisé par : AKID Ahmed Encadré par: M. KHALIFA Nouri Année universitaire : 2014-2015
- 2. 2 Description et analysedu projet Conclusion et Perspective Réalisation Plan Conception préliminaire Conception Introduction
- 3.
- 4. Sujet :ETUDE ET MISE EN OEUVRE D'UNE APPLICATION DE PERMIS DE BÂTIR Proposé par : M. KHALIFA Nouri Lieu de stage : Municipalité de Tunis Mission : Concevoir et réaliser une application web front office de permis de bâtir. 4 Introduction 1/2
- 5. L'application de permisde bâtir relative au service des affaires urbaines de la municipalité de Tunis souffre de divers soucis, les utilisateurs sont insatisfaits. Nous essayons d’apporter une solution à ces problèmes et de réaliser une solution informatique. 5 Introduction 2/2
- 6.
- 7. ◦ Etudier etdéterminer les anomalies de l’application existante ◦ Trouver la solution et les techniques à adopter ◦ Etudier les nouvelles technologies de développement web ◦ Etudier le processus de travail de permis de bâtir ◦ Mise en œuvre de la solution 7 Objectifs du projet
- 8. 8 Maintenance difficile Application lourde au cours dutemps consultation non intuitive des données Nécessite une machine Windows Solution existante et problématiques
- 9. 9 Application Web Offrir des interfaces conviviales Réduire le tempsde réponse Utiliser des nouvelles technologies Solution proposée
- 10.
- 11. 11 Description de Workflow Citoyen 2 1 3 4 5 6 7 Municipalitéde Tunis Arrondissement 1 2 3 4 5 6 7 Le citoyen dépose des pièces bien spécifiques Transfère les informations à la municipalité de Tunis La commission technique délibère la fiche d’étude L’agent de l’arrondissement contacte le citoyen pour l’informer de la réponse. L’agent saisit toutes les données dans l’application de l’arrondissement L’agent technique transmet une fiche d’étude à la commission technique Application VB.net notifie l’agent par les dossiers transmis
- 12.
- 13. 13 Comparaison entre lestechnologies Backbone.js, Knockout.js, Angular.js et Ember.js
- 14.
- 15. 15 Utilisateur Responsable Identification des acteurs Cettepersonne bénéficie de tous les droits, il est généralement le premier responsable de l’arrondissement ou la personne qui le représente. Cette personne possède les droits du responsable en omettant le droit de la gestion des utilisateurs.
- 16. 16 Identification de casd’utilisation Fonctionnalité Utilisateur Responsable Gestion Dossier X X Gestion Demande X X Gestion Document X X Gestion Architecte X X Gestion Déplacement X X Gestion Propriétaire X X Gestion Utilisateur X
- 17. 17 Diagramme de casd’utilisation général
- 18.
- 19. 19 Conception de l’interfacede l’application
- 20. 20 Conception de l’interfacede gestion d’une demande
- 21.
- 22. 22 Diagramme de séquencedétaillé pour ajouter une demande
- 23. 23 Diagramme de navigationd’une demande
- 24.
- 25.
- 26. 26 Partie de droitede l’application
- 27. 27 Partie de gauchede l’application
- 28. 28 La fenêtre desdossiers
- 29. 29 Outils utilisés • WebStorm9.01 • Microsoft SQL Server 2008 R2 • Power AMC 15.1 • Gantt Project • Adobe Photoshop CS5 • Adobe Illustrator CS5
- 30.
- 31. Nous sommesparvenus par le biais de ce projet, à mettre en place une application de permis de bâtir pour le compte du service des affaires urbaines de la municipalité de Tunis. Ce projet nous a donné la possibilité de découvrir de nouvelles approches de développement web et d’utiliser de nouvelles technologies, telles que Node.JS, ainsi que les frameworks Angular.JS, REST API et Bootstrap. Ce projet présente un nouveau contact avec la vie professionnelle avec tout ce que cela peut engendrer comme difficultés, et surtout, nos aptitudes à les surmonter. 31 Conclusion
- 32. Taux deréalisation: ≃65% Taux de satisfaction: ≃100% Perspectives: ◦ Achever l’application, ◦ Utiliser le protocole de communication HTTPS, ◦ Pagination des listes, ◦ Ajouter le module de messagerie. 32 Perspectives
- 33.
Notes de l'éditeur
- #2 Bonjour tout le monde. Pour commencer, permettez-moi d’abord de vous remercier M. le président du jury, M. le rapporteur, M. Nouri KHALIFA pour son encadrement tout au long du projet et j’aimerais aussi remercier tous ceux qui ont contribué, de prés ou de loin pour l’élaboration de ce travail, chers amis vous êtes tous les bienvenus en vue de l'obtention du diplôme de MASTÈRE PROFESSIONNEL EN GÉNIE LOGICIEL ET DÉVELOPPEMENT RAPIDE D’APPLICATIONS. J'ai l'honneur de vous présenter mon mémoire qui s’intitule [ETUDE ET MISE EN OEUVRE D'UNE APPLICATION DE PERMIS DE BÂTIR]
- #3 Voici le plan de ma présentation D'abord je vais commencer par une introduction ensuite je vais décrire et analyser le projet Aussi je vais Présenter la partie conceptuelle et la réalisation enfin je vais conclure et citez les perspectives
- #4 On commence par une introduction
- #5 En fait, le projet intitulé [] était proposée par M. Nouri KHALIFA au sein de la municipalité de Tunis, Leur mission été [concevoir et réaliser une application web front office de permis de bâtir].
- #7 Pour la partie [Description et analyse de projet ] En fait c’était une partie un peu délicat pourquoi ? Actuellement les technologies sont de plus en plus énorme et choisir la plus adéquate n’est quelque chose de facile.
- #8 Mon travail consiste à [Etudier et déterminer les anomalies et les inconvénients de l’application existante] Ensuite de [trouver la solution, l’architecture et les technologies à adopter] Par la suite on a [Etudier le processus de travail de permis de bâtir] Et finissant par la réalisation ou plutôt de la solution
- #9 Voici le schéma qui illustre l’architecture de l’application existante. Pour chaque arrondissement on a son propre serveur et une base de données locale dedans. Après il y aura une synchronisation au serveur de la municipalité de Tunis Après chaque ajout d’un dossier complet dans l’application, il existe une fonctionnalité afin de transférer les informations de dossier à la municipalité de Tunis, qui par la suite fait sa délibération. Les anomalies de l’application existante sont : Maintenance difficile : en cas de mise à jour il est nécessaire de déplacer sur tous les arrondissement afin d’installer la nouvelle version de l’application (donc un travail pénible), Temps d'exécution élevé : l’application existante est très lourde au cours du temps, consultation non intuitive des données La structure de l’interface client ne permet pas une consultation intuitive des données, Pour installer l’application sur une nouvelle machine : Le système d’exploitation doit être de type Windows, aussi il doit être bien configuré(donc les framework.net)
- #10 Afin de remédier aux problèmes de la solution existante, nous avons essayée de réaliser une application Web qui repose sur l’architecture 3-Tiers. Le principe de cette architecture est très simple il consiste à séparer la solution en trois couches (couche présentation, couche métier et couche de persistance) Où on a l’application, le serveur et la base de données. On va expliquer ce schéma en plus de détail dans le diapo suivant. Aussi nous avons essayé de [Réduire le temps de réponse] au maximum [Offrir des interfaces conviviales] donc des interfaces plus ergonomique et facile à utiliser À travers des nouvelles technologies Cette solution peut résoudre les problèmes de maintenance (donc seulement on fait la mise à jour dans un seul machine qui est le serveur de l’application) rendre les information à jour
- #11 Voici l’architecture adoptée de notre application On a en premier lieu la couche présentation qui représente les interfaces de l’application. Ces interfaces utilise les technologies HTML5, CSS3, Boostrap et Cette couche communique avec la couche métier à travers l’API Rest (plus précicemment avec les méthodes GET, POST ,PUT, DELETE) Concernant le GET et pour la lecture, Post pour l’écriture PUT pour la modification Delete pour la suppression Nous avons utilisée Node.JS pour cette couche. Node.js est une plateforme de développement Javascript qui utilise la machine virtuelle V8 Le serveur Node.JS communique avec la couche persistance à travers l’ORM Sequelizes alors pourquoi un ORM? C’est simplement pour minimiser et le niveau de code Donc inutile d’écrire un code native de 20 ligne alors qu’il peut être écris dans une seule. La base de donnée est de type SQL Server Dans l’application de permis de bâtir on a utilisé les technologies Bootstrap, HTML 5, CSS 3 et Angular.JS afin de mener à bien notre projet.
- #12 Chaque citoyen souhaitant construire ou procéder à des travaux de restauration dans son bâtiment, il est appelé à déposer des pièces et documents constitutifs (tel que l’architecte, les rues, les document, ) 3:_à partir d’une fonctionnalité existante dans leur application. 6:_soit par : Le refus du dossier L’acceptation du dossier L’acceptation conditionnée (en cas de manque d’un document) 7:_et de lui fournir le permis de bâtir en cas d’acceptation.
- #13 Ce schéma illustre l’[Architecture Angular.JS] En premier lieu on a l’application qui généralement mono-page (SPA) single page application un peuvent dépendre par d’autres modules Dans chaque module on trouve sa configuration et ses routes La configuration est une fonction importante utilisée pour la configuration de l'application. Les routes sont les clés pour la création d'une application dans une seule page.(SPA) single page application Les vues et les contrôleurs sont reliés ensemble à travers scoope
- #14 Dans notre travail, nous avons eu recours à google tendances pour être au courant des technologies les plus utilisées. Donc dans le premier schéma en haut on voit bien que la technologie Angular.js est la plus utilisée à présent à côté des technologies Backbone.js, Knockout.js et Ember.js. La figure ci-dessus montre bien que la technologie JAVA EE était la plus utilisée en 2005 en comparaison avec les technologies Ruby on Rails et avant l'apparition de Node.js. De nos jours Node.js se trouve au sommet de ces technologies
- #16 Notre application à seulement 2 acteurs : Un pour l’utilisateur et l’autre est consacré pour le responsable qui []
- #17 Voici la table qui identifie le cas d’utilisation La gestion de dossier, la gestion de demande, la gestion de document … de propriétaire est accessible pour tous les acteurs sans exception Alors que la gestion des utilisateur n’est accessible que pour le responsable.
- #18 Passons au diagramme de cas d’utilisation général Donc on constate que le responsable hérite de l’utilisateur et inclue la gestion des utilisateurs. Tous ces cas d’utilisation seront accessible aux acteurs après l’authentification.
- #19 Passons à la conception
- #20 Nous avons essayé de concevoir une interface claire et simple, dont l'utilisateur n'a pas besoin de naviguer sur plusieurs onglets ou pages afin de remplir ou consulter les informations relatives aux projets. Cette interface est à l'instar d'un tableau de bord de l'application.
- #21 Voici la fenêtre conçus pour l’ajout ou modification d’une demande Où on voit les information relative au dossier(le numéro et l’année) Les différents listes Le projets et la date d’inscription de demande Aussi les boutons d’enregistrement et d’annulation
- #22 Ce diagramme de classe n’est pas l’actuel de l’application existante mais plutôt conçus pour mettre en évidence les tables et leurs relations les uns entre les autres On a la table Dossier qui englobe presque tous les autres entité Chaque dossier contient a un arrondissement Aussi il peur contenir 1 ou plusieurs demandes Chaque demande peut avoir 1 seul architecte et 1 ou plusieurs documents. On se demande alors pourquoi on a conçu ce diagramme ? On fait l’existant contient plus de 200 tables et chaque table peut contenir des vingtaines des attributs. Aussi vous voyez que nous avons utilisé le type date pour les attribut de type date alors que dans le réel est utilisée comme String Donc on a été obligé de créer des fonctions pour les convertir en cas de modification
- #23 À partir d’un navigateur l’utilisateur demande d’ajouter une demande Une requéte Enfin la demande sera ajouter à la liste des demandes
- #24 À partir de la liste de demandes on peut ajouter, modifier ou supprimer une demande Lors d’ajout une boîte de dialogue apparait est reste en attente soit pour l’enregistrement soit pour l’annulation La même façon pour la modification et la suppression
- #25 Dans la partie réalisation nous présentons quelques interfaces capturé de l’application.
- #26 L'interface d'authentification est la face de l'application de permis de bâtir, où l'utilisateur est appelée à déterminer son arrondissement, login et mot de passe.
- #27 Voila la partie droite capturé de l’application existante Alors pourquoi il existe en 2 partie ? L'interface de l'application de permis de bâtir est assez large, nous l’avons présenté en deux parties afin de mieux faire apparaître leurs fonctionnalités.
- #28 On va les découvrir en plus de détail dans la démonstration après.
- #29 La recherche d'un tel dossier existant est accessible à travers cette fenêtre, où il existe une fonctionnalité de recherche universelle.
- #30 On a utilisé dans notre projet les outils suivant: WebStorm ? C’est parce qui est IDE très populaire pour les langages NodeJS, AngularJS et HTML Microsoft SQL Server qui est le SGBD actuelle de l’application Power AMC pour la modélisation UML Gantt Project pour la planification de projet Adobe Photoshop CS5 et Adobe Illustrator CS5 pour le traitement des images.
- #31 Passons à la conclusion et les perspectives
- #33 Le taux de réalisation d’après M. Nouri KHALIFA est à soixante dix% Pour la communauté de la municiapalité de Tunis est à 100% On espère que la municipalité de Tunis adopte réellement notre application. Donc on doit après [Achever l’application], [Utiliser le protocole de communication HTTPS] avec d’autres améliorations qui peuvent être apportées à ce projet, [Pagination des listes] pour minimiser le temps d’attente de réponse surtout pour les dossiers [Ajouter le module de messagerie] pour que les agent puissent se communiqués ensemble dans le cadre de travail