Académique Documents
Professionnel Documents
Culture Documents
Maitre de Stage :
Thai-Bin Phan
Formateurs :
Duc-Ahn Pham
Marc Lambert
Constant Matsima
Stagiaire :
Maxime Richard Manager de formation :
maxime.j.richard@gmail.com Vanessa Sultan
P.1/36
Sommaire
Introduction
3 Avant Propos
4 Résumé
5 Présentation de l’entreprise
5 Présentation du stagiaire
Projet
6 Contexte du projet
7 Gestion et organisation
8 La méthode Agile
9 Typologie technique
10 Ressources humaines
Conception
11-13 Descriptif fonctionnel
14 Architecture technique
15 Maquette interactive
Développement
16-17 Le FrameWork Angular
Le composant : ticket-parent
18 - Le Modèle
19 - Le Service
20 - La Vue
Le composant : intervention-planning
21 - Le Modèle
22 - Le Services
23 - La Vues
24 - Le Formulaire
Conclusion
25 Succés
26 Analyse critique
26 Bonnes pratiques
27 Remerciements
Annexes
28-29 Diagrammes BPMN
30-31 Backlog Jira
32-33 Modèle de données
34 Le composant ticket-parent
35 Le composant intervention-planning
36 Journal de bord
P.2/36
Introduction
Avant propos
Mon stage en entreprise de neuf semaines s’est déroulé
dans le cadre de la conclusion d’une formation de Concepteur-Développeur
Informatique proposé par l’Afpa et financé par le Conseil Régional d’Ile-de-
France. En mars 2020 j’ai pu participer à plusieurs salons professionnels
informatiques et découvrir le marché de l’emploi de cette industrie. C’est lors
de l’événement du Hacking de l’Hôtel de Ville à Paris que j’ai eu mon premier
contact avec la société SmarterPlan qui présentait son produit innovant à ce
salon de l’entrepreneuriat local.
P.3/36
Introduction
Résumé
Smarter plan propose une nouvelle solution innovante dans
la gestion de maintenance assistée par ordinateur avec des photos à 360°, un
modèle 3d du bâtiment et des fonctions de computer vision qui permettent
de reconnaître les équipements. Durant ce stage j’ai pu découvrir plusieurs
dimensions dans un projet informatique. J’ai à la fois pu travailler à la concep-
tion et au développement.
P.4/36
Introduction
Présentation
de l’entreprise
Smarter Plan est une start up formée autour de la vision de
trois associés : Thai-Binh Phan, Jean-Baptiste Dumont, et Philippe Boyer-Nar-
don. A partir de leur expériences respectives du pilotage de projet informa-
tique innovant, de la gestion de maintenance assistée par ordinateur et du
marché de la gestion immobilière, ils ont imaginé une gamme de produits au
croisement de tous leur domaines.
Alors qu’elle est agée de quelques mois, l’entreprise m’in-
tègre a une période charnière de sa croissance. Une première version de
démonstration est présentée à des clients potentiels depuis quelques temps,
et le besoin de pouvoir vendre une application fonctionelle se fait de plus en
plus ressentir. Les équipes de développement du Front-End (Just A.I.) et du
Back-End (Odin Core) ont travaillé chacune de leur côté et elles vont devoir
rentrer dans une phase de synchronisation intense afin d’uniformiser les
différentes versions commercialisables. Un premier produit, développé par un
seul technicien, SmarterPlan Essentiel, est fini a 80%. SmarterPlan Plateforme
a été développé intensément en front durant les 6 derniers mois et va devoir
maintenant implémenter le back end dont la conception est en train d’aboutir.
Enfin, SmarterPlan Bim reste à l’état de projet en recherche et développement
car il repose sur une technologie très lourde et normalisé, le BIM, et que le
projet SmarterPlan se veut dans un premier temps plus libre et adaptable à la
demande.
Présentation
du stagiaire
J’ai d’abord suivi des études de philosophie afin de passer
une license où je m’intéressais particulièrement aux spécialités de la logique
et de l’esthétique. En parallèle, je travaillais en tant que libraire, ce qui m’a
donné un sens de l’organisation et du classement assez rigoureux. Puis avec
plusieurs associés j’ai ouvert un studio de post-production et de motion-de-
sign tout en suivant des formations professionnelles dans les effets spéciaux
et le graphisme. Freelance depuis plusieurs années dans ces domaines, j’ai
continué à m’intéresser et à me former en autodidacte à la programmation en
python et en JavaScript. J’ai voulu certifier cette compétence de développe-
ment en suivant une formation qui m’apporterait des bases théoriques et des
bonnes pratiques professionnelles. Je n’avais pas comme projet d’aller vers
une reconversion professionnelle, mais plutôt d’apprendre à utiliser des ou-
tils numériques dans une industrie que je connais bien, celle de l’audiovisuel.
J’aimerais désormais acquérir des compétences qui m’orienteraient vers le
métier d’Ingénieur Vision (DIT).
P.5/36
Projet
Contexte du projet
La GMAO (gestion de maintenance assistée par ordinateur)
est un domaine industriel informatique qui a pour objectif d’organiser et de
faciliter la résolution de problèmes techniques liés au bâtiments. Les clients
principaux sont des gestionnaires immobiliers qui sont en charge de plusieurs
bâtiments et dont ils doivent assurer l’intégrité au niveau des normes de
confort, de sécurité et de législation. D’autres clients potentiels peuvent être
les sociétés de location de bureaux, mais aussi les entreprises de services, de
maintenance et de ménage.
P.6/36
Projet
Gestion et organisation
L’organisation du travail pendant ce stage a été tout à fait
inédite pour moi. J’avais l’habitude en tant que freelance en motion-design de
faire du télétravail, mais aussi que toute mission commence habituellement
par un brief dans les bureaux du client. Pour ce projet, tous les collaborateurs
étaient dans une ville différente : Paris, Chartres, Nantes, Rouen, Grenoble, etc
…
P.7/36
Projet
La méthode Agile
La méthode Agile ne prend pas en compte la notion de
risque quand on fonctionne avec des prestataires, le commanditaire en porte
la charge entièrement. Une petite société limitée en budget et en temps ne
peut pas vraiment se permettre cette organisation, car il faut un produit fini au
plus vite.
P.8/36
Projet
Typologie technique
P.9/36
Projet
Ressources humaines
P.10/36
Conception
Descriptif fonctionnel 1
Lors des différentes réunions nécessaires à la compréhen-
sion du besoin, j’ai pris en notes les synthèses des visions de mes collabora-
teurs. A l’aide de plusieurs cas d’usages qui ont étés rédigés sur l’application
StoriesOnBoard et de l’analyse des échanges avec les trois associés de Smar-
terPlan, j’ai élaboré les logigrammes des fonctions attendues pour la V1 en
utilisant la codification BPMN. J’ai d’abord détaillé des processus en faisant la
liste exhaustive des fonctions demandées et des possibilités de parcours. Ce
sont les diagrammes du signalement d’incident, de la gestion d’un incident, de
la validation d’une intervention, de l’inspection réglementaire, et de la commer-
cialisation.
P.11/36
Conception
Descriptif fonctionnel 2
Le cas d’usage qui sera reproductible dans le MVP est le
signalement d’un incident nécessitant une intervention. Il représente 4 acteurs
de sociétés différentes. Un visiteur des locaux qui va signaler un problème
sur un équipement. Un responsable des services généraux d’une société qui
loue les locaux et qui va faire de la gestion de données manuelle à partir du
signalement. Un gestionnaire de propriété qui va gérer les aspects financiers
et techniques de l’incident, et qui va planifier la réparation. Enfin un artisan en
charge de la maintenance qui va intervenir dans les locaux et clôturer l’inter-
vention.
P.12/36
Conception
Descriptif fonctionnel 3
Afin de pouvoir gérer les statuts des différentes tables de la
base, nous avons utilisé la méthodes des Enum. Ce sont des ensembles sta-
tiques de valeurs dans un ordre spécifique qui seront utilisées de façon sys-
tématique et invariable. Les jours de la semaine sont un ensemble de valeurs
idéales pour une énumération de ce type, aussi appelé liste de données. Pour
finaliser le développement de la base, en concertation avec les différents col-
laborateurs, j’ai rédigé les listes exhaustives des statuts qui seraient utilisés,
renseignant ainsi 16 champs ayant chacun une liste de données différente.
P.13/36
Conception
Architecture technique
P.14/36
Conception
Maquette interactive
Pour guider les développeurs sur ce qui sera attendu, j’ai
réalisé les maquettes de toutes les pages nécessaires pour le MVP et apporté
des changements à partir de captures d’écrans de la version démo actuelle-
ment en ligne. En suivant précisément le logigramme du MVP et en reprenant
les éléments graphiques déjà développés et validés, j’ai fait le design des 40
pages de l’application, en appliquant les variations sur chaque vue condition-
nelle, en fonction de l’acteur connecté à l’application et de l’évolution du ticket
dans le Workflow.
P.15/36
Développement
Le FrameWork Angular
Angular est une plateforme de développement en Javascript
qui se structure avec des components. En théorie, elle violes plusieurs règles
de l’architecture MVC, et elle est associée à une architecture Modèle-vue-vue
modèle, mais en pratique elle permet de la même manière de séparer la vue
de la logique et de l’accés aux données. Pour ce projet j’ai utilisé l’interface par
ligne de commande sous mac OSX pour créer les composants sur lesquels
j’ai travaillé.
P.16/36
Développement
Le FrameWork Angular
P.17/36
Développement
Le composant
link-ticket-parent Le Modèle
link-ticket-parent.component.ts
Ce composant intervient dans le processus de liaison entre
deux tickets de signalement. C’est une opération “manuelle” qui requiert une
intervention humaine et une prise de décision qui nécessite une connaissance
pratique des locaux. Chaque component ticket-détail contient un bouton qui
redirige le contenu de la balise <router-outlet> pour permetre l’affichage du
composant ticket-parent.
P.18/36
Développement
Le composant
link-ticket-parent Le Service
tickets.service.ts
La variable tickets ayant une Subscription est privée afin
d’assurer la sécurité de ce canal de communication. Le fichier tickets.service.
ts va interroger la base de données pour obtenir un tableau JSON de tickets,
et interpréter chaque objet avec différentes fonctions. Elles servent par
exemple à donner un sens intelligible aux listes de données des Enums. Ce
service trie aussi les tickets en fonction de leur statut, en ne faisant pas ap-
paraître ceux qui sont archivées, ou ceux dont le statut est terminé. Enfin il va
aussi corriger leur date en fonction du fuseau horaire.
P.19/36
Développement
Le composant
link-ticket-parent La Vue
link-ticket-parent.component.html
Cette vue va utiliser la directive ngFor afin de faire une
boucle dans la liste des tickets. Pour chaque ticket elle va afficher les infor-
mations suivantes : la couleur dépendante de sa priorité, son titre, son statut,
les équipements liés, son type, et les informations horaires qui le concernent.
Pour obtenir la couleur, un attribut [style.color] va exécuter la fonction getPrio-
rityColor(ticket) qui retourne une couleur correspondant à sa priorité.
Cette relation d’un ticket à d’autres tickets est dite relation ré-
cursive. On la retrouve dans un autre objet de la base de donnée : l’équipement
qui peut être lié à un sous équipement qui le compose, dont chacun aurait une
entrée différente dans la base de donnée.
P.20/36
Développement
Le composant
intervention-planning Le Modèle
intervention-planning.ts
Ce processus de l’application sert à transformer un ticket du
type “demande de maintenance” en type “demande d’intervention”. Pour cela,
un acteur ayant l’autorisation de prendre des décisions financières (Property
Manager) doit renseigner 5 informations indispensables.
P.21/36
Développement
Le composant
intervention-planning Le Service
tickets.service.ts - API.service.ts
Ce Component appelle le fichier tickets.service.ts afin de
porter les informations principales utiles à la prise de décision sur l’interven-
tion. Le ticket sélectionné sera appelé par le modèle (intervention-planning.
ts) à l’aide de son ID et transmis à la vue (intervention-planning.html) avec son
titre et sa description.
P.22/36
Développement
Le composant
intervention-planning La Vue
intervention-planning.html
Comme toutes les vues de l’application, ce sont des élé-
ments Bootstrap qui sont utilisés, et c’est à l’aide de row et de col que sont
organisé les balises <div> de la page. Pour intervention-planning.html, c’est
la création d’un calendrier hebdomadaire décalable en incrémentant et en
décrémentant les semaines qui m’a demandé le plus de travail. J’ai repris un
élément du composant dashboard qui avait déjà été développé auparavant et
qui affichait le jour actuel dans un style différent.
P.23/36
Développement
Le composant
intervention-planning Le Formulaire
intervention-planning.html
Cette vue permet de renseigner un formGroup angular du
nom de planIntervention qui a été déclaré et initialisé dans le Côntroleur.
Chacune des listes, domaine, mission, organisation, intervenant, enregistre le
choix de l’utilisateur et renvoie la valeur associée à sa clef.
P.24/36
Conclusion
Succés
Durant ce stage j’ai pu découvrir plusieurs dimensions dans
un projet informatique. J’ai à la fois eu la chance de pouvoir travailler à la
conception et au développement. D’abord en faisant l’analyse du besoin que
j’ai restitué sous forme d’un logigramme BPMN reprenant le cas d’utilisation
qui serait le plus fréquent et le plus utile aux premières versions commerciali-
sables de l’application. Puis j’ai élaboré les 40 maquette avec Photoshop et j’ai
renseigé toutes les demandes dans 67 tickets Jira détaillant le cas d’usage,
le comportement actuel, les critères d’acceptations, et d’autres informations
additionnelles. Ainsi j’ai pu plonger dans les détails de chaque tâche technique
qui allait être nécessaire pour réaliser les fonctions du workflow. Enfin, dans
le deuxième mois, j’ai pu développer avec l’équipe en charge du Front-End et
réaliser cinq composants différents répondant aux besoins que nous avions
identifiés.
P.25/36
Conclusion
Bonnes pratiques
Le travail en collaboration avec d’autres professionnels de
l’industrie informatique m’a appris des méthodes pour pratiquer ce métier
correctement. La méthodologie Agile est très intéressante, et j’ai pu expéri-
menter ce processus de création très ritualisé. J’ai pu utiliser Git sur un projet
avec plusieurs participants et un besoin de changement permanent, et j’ai
appris à travailler mieux avec les Branches ainsi que les ajouts de fichiers
à chaque Commit. Enfin j’ai compris qu’il était très important de formaliser
les cas d’usages assez tôt dans le développement, ceci afin de pouvoir faire
communiquer ensemble les différents membres d’un projet informatique, et
d’assurer que tous les besoins soient implémentés à la fois dans le Front-End
et le Back-End.
Analyse critique
En revenant sur la répartition de mon temps de travail et le
déroulement de mon stage, il me reste des points à améliorer.
P.26/36
Conclusion
Remerciements
Thai-Bin Phan
mon maître de stage, qui m’a donné la chance de participer à
l’aventure SmarterPlan et qui m’a montré ce qu’était piloter un projet informa-
tique à partir d’une vision analytique.
Duc-Ahn Pham
formateur à l’AFPA, pour son entraînement intensif des es-
prits à la communication avec les ordinateurs.
Marc lambert
formateur à l’AFPA, pour ses connaissances dans la science
informatique et son humour inimitable.
Vanessa Sultan
manager à l’AFPA, qui a su maintenir l’organisation de la for-
mation malgré la période d’urgence sanitaire.
Samir Akarioh
mon camarade de stage plein de bonne volonté qui travaille
à des heures improbables.
P.27/36
Cas d’usage MVP :
Incident et Intervention
P.28/36
P.29/36
P.30/36
P.31/36
P.32/36
P.33/36
Le composant
intervention-planning La Maquette
Le composant
intervention-planning La Page
P.34/36
Le composant
link-ticket-parent La Maquette
Le composant
link-ticket-parent La Page
P.35/36
P.36/36