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 permis de 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
7. ◦ Etudier et dé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
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
15. 15
Utilisateur
Responsable
Identification des acteurs
Cette personne 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 cas d’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
31. Nous sommes parvenus 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 de ré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
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]
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
On commence par une introduction
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].
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.
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
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)
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
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.
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.
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
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
Notre application à seulement 2 acteurs :
Un pour l’utilisateur et l’autre est consacré pour le responsable qui []
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.
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.
Passons à la conception
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.
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
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
À partir d’un navigateur l’utilisateur demande d’ajouter une demande
Une requéte
Enfin la demande sera ajouter à la liste des demandes
À 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
Dans la partie réalisation nous présentons quelques interfaces capturé de l’application.
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.
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.
On va les découvrir en plus de détail dans la démonstration après.
La recherche d'un tel dossier existant est accessible à travers cette fenêtre, où il existe une fonctionnalité de recherche universelle.
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.
Passons à la conclusion et les perspectives
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