Vous êtes sur la page 1sur 35

IM CREATIVE

MISE EN PLACE D’UNE APPLICATION


DE GESTION DES COLLOCATIONS

Réalisé par :
Iliyass ZAMOURI
Professeur Encadrant :
M. Hamid MACHHOUR

Maitre de stage :
Mme. Khadija TAHIA
Dédicace :

Toutes les lettres ne sauraient trouver les mots qu’il faut…

Tous les mots ne sauraient exprimer la gratitude,

L’amour, le respect, la reconnaissance…

Je dédie ce travail :

A mes parents qui se sont sacrifiés pour m’offrir la possibilité de


poursuivre mes études dans les meilleures conditions, et qui n’ont jamais cessé
de m’encourager et de me soutenir.

A ma sœur pour ses encouragements et s’assistance.

A toute ma famille, et à tous mes amis pour l’amour, le respect, le courage


qu’ils nous ont toujours octroyés et qui je leurs souhaite une vie pleine de
bonheur et de succès.

A tous mes collègues pour le soutien moral et l'ambiance familiale qu'ils


n'ont pas manqué d'apporter durant cette année.

A nos professeurs pour leurs énormes efforts.

Au personnel du IM creative.
REMERCIEMENTS
Je veux d'abord remercier Dieu qui m'a donné la force et la patience pour atteindre ce
travail dans les meilleures conditions ainsi que l’audace pour dépasser toutes les difficultés.
Et deuxièmement, je veux me remercier se croyez en moi et de suivre le travail acharné.

Je souhaite exprimer ma gratitude et mes remerciements à mon encadrant de stage


Madame « TAHIA Khadija » pour m’avoir encadré et sa bonne orientation avisée et son
encouragement tout au long de cette période du stage dont la courtoisie et la disponibilité
ont été constantes à notre égard, pour ses conseils précieux et la qualité de l’encadrement
dont il nous a faits bénéficie tout le long de ce projet.

Avant de présenter mon travail, je veux exprimer ma grande reconnaissance envers tous
les responsables et toute l’équipe IM Creative pour leur accueil et leur aide.

Que les membres de jury trouvent, ici, l’expression de nos remerciements pour l’honneur
qu’ils nous font en acceptant de juger ce travail.
RESUME
Le projet réalisé dans ce stage est une application mobile et web visée à rencontrer les
personnes qui sont intéressés à louer un bien immobilier. Cette application permet aux
locataires l’automatisation du processus de recherche des biens immobiliers, ainsi la
communication avec les propriétaires et les colocataires. A travers de cette application on
pourra demander un bien immobilier à travers des annonces, aussi le locataire peut poster
ces biens immobiliers avec des détails et réagir avec les personnes qui sont intéresser.

En vue d’appliquer ce qu’on a appris dans le cours Modélisation en UML, nous avons fait
tout d’abord une étude conceptuelle. Cette dernière nous a facilité la réalisation de notre
application et nous a permet ainsi de bien organiser les idées, les taches et les délais. Et de
structurer l’implémentation selon les diagrammes pour la bonne gestion du projet.
L’application web a été basé sur l’étude conceptuelle et a été implémentée par diverses
technologie comme Laravel, JQuery, Bootstrap et Vue.js qui sont des Framework permettant
de créer efficacement des sites web complexes et flexibles, l’application mobile a été
développé avec Flutter et Dart

En effet, ce stage est considéré comme une occasion qui nous a permis d’entrer en
contact direct avec le monde du travail et nous a premièrement aidé à renforcer la théorie par
la pratique, deuxièmement à élargir nos connaissances, et enfin à s’adapter à la vie
professionnelle et établir des relations directes avec les autres, ainsi à savoir exprimer nos
idées et améliorer nos habiletés de communication.
ABSTRACT
The Project carried out in this stage is a mobile and web application aimed at meeting
people who are interested in renting real estate. This app enables tenants to automate the
real estate search process, as well as communication with landlords and roommates. Through
this application it will be possible to request real estate through advertisements, also the
tenant can display these real estates with details and react with the people who are of
interest.

In order to apply what we have learned in the Modeling in UML course; we first did a
conceptual study. The latter facilitated the realization of our application and thus allows us to
organize the ideas, the tasks and the deadlines. And to structure the implementation
according to the diagrams for the good management of the project. The web application was
based on the conceptual study and has been implemented by various technologies such as
Laravel, jQuery, Bootstrap and Vue.js which are frameworks for efficiently creating complex
and flexible websites, the mobile application has been developed with Flutter and Dart

Indeed, this stage is seen as an opportunity that allows us to come into direct contact
with the world of work and help us firstly to strengthen theory through practice, secondly to
broaden our knowledge, and finally to adapt to professional life and establish direct
relationships with others, as well as knowing how to express our ideas and improve our
communication skills.
Table des matières
Cadre du stage.......................................................................................................................................... 10
I. Introduction................................................................................................................................... 11
II. Présentation de l’organisme d’accueil .......................................................................................... 12
1. Introduction : ............................................................................................................................. 12
2. Services et Activités : ................................................................................................................. 13
3. Organigramme de la société :.................................................................................................... 13
III. Présentation du projet .............................................................................................................. 14
1. Contexte et Objectifs : ............................................................................................................... 14
2. Cahier des charges : ................................................................................................................... 14
Conception et Etude théorique ................................................................................................................ 10
I. Conception .................................................................................................................................... 16
1. Diagramme de classe ................................................................................................................. 16
2. Diagramme de cas d'utilisation ................................................................................................. 17
3. Diagramme séquence : .............................................................................................................. 19
4. Digramme de Gantt théorique : ................................................................................................ 21
Réalisation ................................................................................................................................................ 11
I. Technologies utilisées : ................................................................................................................. 24
1. Langage de Modélisation :......................................................................................................... 24
2. Langage de programmation cote serveur : ............................................................................... 24
3. Langage de programmation coté client .................................................................................... 25
4. Système de gestion de base de données : ................................................................................ 25
II. Réalisation : ................................................................................................................................... 26
1. Application Web ........................................................................................................................ 26
2. Mobile ........................................................................................................................................ 35
Conclusion ................................................................................................................................................ 37
1. Bibliographie .............................................................................................................................. 38
2. Webographie ............................................................................................................................. 38
Table des matières
Figure 1 Organigramme de la société IM CREATIVE ................................................................................ 13
Figure 2 diagramme de classe .................................................................................................................. 16
Figure 3 diagramme de cas d'utilisation .................................................................................................. 17
Figure 5 séquence d'ajout d'un nouveau bien immobilier ...................................................................... 19
Figure 6 diagramme de Gantt .................................................................................................................. 21
Figure 7 page d'accueil ............................................................................................................................. 26
Figure 8 détails de l'immobilier ................................................................................................................ 27
Figure 9 forme d'ajout d'un nouveau bien immobilier ............................................................................ 28
Figure 10 forme de publication d'une nouvelle annonce ........................................................................ 28
Figure 11 annonce de collaboration ........................................................................................................ 29
Figure 12 Annonce ................................................................................................................................... 29
Figure 13 page d'inscription ..................................................................................................................... 30
Figure 14 page de connexion ................................................................................................................... 30
Figure 15 profil ......................................................................................................................................... 31
Figure 16 profil d'un autre utilisateur ...................................................................................................... 32
Figure 17 à propos.................................................................................................................................... 33
Figure 18 Web de conversation dans le navigateur de bureau ............................................................... 34
Figure 19 perspective mobile de conversation web ................................................................................ 34
Figure 20 liste de contacts (boîte de réception) ...................................................................................... 35
Figure 21 discussion mobile en temps réel .............................................................................................. 35
CHAPITRE I
Cadre du stage
I. Introduction
Pour acquérir une bonne et parfaite qualité, la formation théorique seule ne suffit pas, pour cela,
nous sommes amenés à faire un stage de fin d’études dans une entreprise. L’objectif primaire de ce
stage est l’insertion dans le milieu professionnel et la mise en application des connaissances acquise.

Ce stage réalisé au sein de la société t créative spécialise dans le domaine informatique du 24


mai 2021 au 22 juin 2021, a eu pour principale mission, le développement d’une application web et
mobile permettant de rencontrer des personnes pour louer un bien immobilier dans le même quartier,
cette application contient plusieurs fonctionnalités qu’on les présentera dans la suite.

Le rapport que vous feuilletez, décrit les différentes phases de l’accomplissement de ce projet
en trois principaux chapitres :

Le premier chapitre intitulé « Contexte générale du projet » est le point du départ. Il consiste,
dans un premier lieu de présenté la société au celle on a effectué le stage, En deuxième lieu, nous
déterminons les différents objectifs du site sous forme d’un cahier de charge bien structuré, ainsi que
le plan suivi.

Le deuxième chapitre intitulé « Analyse et conception », aborde la phase de conception de


données, on exploite ce chapitre pour analyser les besoins fonctionnels et techniques, et présenter les
acteurs et les différents diagrammes et nous détaillerons les différents cas d’utilisation d’application.

Finalement, au niveau du dernier chapitre intitulé réalisation, nous présenterons les différents
outils utiliser tout au long du développement, ainsi que les principales interfaces graphiques réalisées
et quelques scénarios applicatifs.

Vous trouverez donc, dans ce rapport, le résultat d’un stage à la fois formateur et enrichissant aussi
bien sur le plan professionnel que personnel.

Ce chapitre nous a permis de faire une présentation générale du cadre du stage. Nous avons
commencé par présenter l’organisme d’accueil puis le cadre du stage et enfin terminé par donner un
aperçu sur le sujet et les objectifs à atteindre.

11
II. Présentation de l’organisme d’accueil
1. Introduction :
IM CREATIVE est une société informatique située sur la ville de Fès. Fondée en 2019, elle
s'intéresse aux métiers de communication, au développement d'applications de gestion et de sites web,
ainsi la création graphique.

La société fondée par Mr ALAMI Ibrahim met à la disposition de ses clients un groupe des jeunes
chercheurs, ambitieux et motivés qui ont des idées novatrices dans le domaine Informatique, afin de
leur accompagner dans la réalisation de leurs projets.

Issue d’une passion, IM CREATIVE offre aussi à ses clients une multitude de services. En effet,
l’équipe IM CREATIVE conseille et concrétise les idées de ses clients en leurs offrant des solutions sur
mesure : des créations graphiques uniques et personnalisées pour l’identité visuelle (logo), l’affichage
urbain, brochures, dépliants et catalogues produits, ainsi que la conception ou la refonte des sites web
de tous types : institutionnel, catalogues produits avec CMS et sites marchands, des newsletters et des
campagnes d’e-mailing et la publicité sur Facebook, etc.

En plus, de ces services, IM CREATIVE met à la disposition des clients un service d’achat de nom
de domaine et l’hébergement sur des serveurs avec la configuration des comptes messageries
professionnels.

L’organigramme de l’entreprise repose sur les différentes fonctions exercées au sein de


l’organisation (Développement, commerce, réseau et maintenance, multimédia…).

12
2. Services et Activités :
L’agence IM CREATIVE propose une large gamme de services tel que :

• Développement Web : Innover, créer et garantir une ergonomie intuitive, la société s’occupe de
conception des sites web créatifs et des boutiques en ligne alliant ergonomie, marketing et
référencement web.

• Hébergement : IM CREATIVE héberge également les sites web.

• Design et création graphique : Les infographies, sont les premiers éléments sur lesquels un lecteur
pose son regard. IM CREATIVE assure la réalisation d’illustrations très diverses (plaquettes, flyers,
cartes de visites, création de logos, journaux d’entreprise, affiches…).

• Maintenance informatique.

• Réseau informatique.

• Caméra de surveillance.

• Campagne SMS.

• Référencement Web (SEO).

3. Organigramme de la société :

Figure 1 Organigramme de la société IM CREATIVE

13
III. Présentation du projet
1. Contexte et Objectifs :
Dans le cadre de notre stage au sein de la société IM CREATIVE, notre mission c’était de réaliser un
site web pour la gestion locative des biens immobiliers, l’objectif de notre projet est de trouver une
solution informatique qui permet de faciliter la recherche des biens immobiliers ainsi la communication
avec les propriétaires et les colocataires.

Lors de la réalisation de ce projet on a affronté beaucoup de complexités, c’était difficile d’apprendre


de nouveaux langages et les appliquer dans notre site web. Ainsi il n’était pas facile de développer Front-
End et Back-End dans une durée très courte et surtout parce que le site contient autant de
fonctionnalités. Mais en même temps ce qui nous a motivé c’est que ce dernier offre presque tous les
services dont il aura besoin le locataire, et nous en tant qu’étudiants et d’après les difficultés qu’on
rencontre on voit que ce genre de site vont nous aider.

2. Cahier des charges :


Avant de passer à la réalisation de notre projet, nous avons effectué plusieurs réunions avec l'équipe
de développement de la société d'accueil afin d’échanger les idées, ce qui nous a permet de bien
spécifier les acteurs ainsi les besoins et les services offerts par notre système.

a. Les acteurs :

L’utilisateur (propriétaire, locataire ou bien visiteur)

b. Les fonctionnalités :

Le système doit permettre aux utilisateurs de :

• Consulter les biens immobiliers et effectuer une recherche multicritère

• Publier un bien immobilier pour chercher des locataires, le modifier ou le supprimer

• Publier un poste pour trouver des colocataires, il peut également le modifier ou bien le
supprimer

• Entamer une conversation avec le propriétaire ou bien les colocataires

• Commenter un bien immobilier ou un poste

14
CHAPITRE II
Conception et Etude théorique
I. Conception
1. Diagramme de classe
L’utilisateur identifié par et il a un nom, email, mot de passe, téléphone, sexe, statuts de
disponibilité, horodatage du profil créé à et mis à jour à.

Les utilisateurs (locataire) peuvent publier de nombreux biens immobiliers sur le site et le bien
immobilier est identifié par un identifiant et contient un titre, une description, un prix, un statut s'il est
disponible à la location ou occupé, la superficie, le nombre de personnes et de chambres, état neuf ou
à rénover, secteur et ville.

Figure 2 diagramme de classe


Un autre utilisateur peut faire une annonce ou plusieurs qui peut l'aider à trouver plus de personnes
qui voulaient louer le même bien immobilier avec lui ou dans le même secteur. L’annonce est définie
par un id, un titre, une description, le nombre maximum de personnes à louer avec, le secteur,
l'horodatage.

16
Un utilisateur peut faire de nombreux commentaires dans une annonce et un commentaire peut
être un commentaire ou une réponse et un commentaire peuvent avoir plusieurs réponses. Il est
identifié par un id, un contenu textuel et un horodatage.

Un utilisateur peut envoyer de nombreux messages et peut en recevoir plusieurs. Il est identifié par
un identifiant et il a un texte, l'attribut est lu booléen, est un horodatage.

2. Diagramme de cas d'utilisation


Décrivant comment l'utilisateur va interagir avec notre système et quelles sont les différentes actions
qu'il peut faire, et ce sont :

Figure 3 diagramme de cas d'utilisation

17
• D’abord un utilisateur peut voir la page d'accueil sans authentification mais pour faire toute
autre action il doit s'authentifier.

• Un utilisateur peut publier, éditer, supprimer un bien immobilier.

• On a deux types d'annonces qu'on peut publier

- Un propriétaire peut publier un bien immobilier

- Un locataire peut publier poste pour chercher des colocataires peut publier une
annonce avec ou sans un bien immobilier ou la modifier, la supprimer.

• Un utilisateur peut rechercher un bien immobilier.

• Un utilisateur pouvait voir l'annonce et les détails de l'immobilier.

• Un utilisateur peut envoyer des messages à un autre utilisateur.

• Un utilisateur peut modifier son profil (informations personnelles).

• Un utilisateur peut envoyer, supprimer un commentaire d'une annonce, et il peut répondre


à un commentaire déjà existe sous forme d'un sous-commentaire.

18
3. Diagramme séquence :
a. Ajoute des biens immobiliers :

La séquence des événements pour ajouter un bien immobilier :

Figure 4 séquence d'ajout d'un nouveau bien immobilier

19
b. Conversation en temps réel :

Le flux des événements qui mènent à une conversation en temps réel. Chaque utilisateur a un canal
unique sur lequel tout le monde peut envoyer des événements (messages) mais lui seul peut écouter
ces événements.

Si l'utilisateur a reçu un message et le message envoyé du contact sélectionné, il sera affiché


automatiquement sinon il sera ajouté à la liste des messages non lus.

20
4. Digramme de Gantt théorique :
La planification du projet permet de bien organiser le temps et consiste à prévoir le déroulement
des tâches tout au long des phases constituant le cycle de développement. Pour schématiser le planning
du projet, le choix a été porté sur l’outil Gantt Project. La figure ci-dessous explique le chronogramme
du projet j'avais pris en charge la réalisation d'application web et j'avais 2 taches de la partie mobile le
chat et la recherche des biens immobiliers.

Figure 5 diagramme de Gantt

21
CHAPITRE II
Réalisation
I. Technologies utilisées :
Les choix techniques pour le développement du l’application reposent en majorité sur des
solutions Open Source.

1. Langage de Modélisation :
Nous avons utilisé UML (langage de modélisation unifié) car il est largement utilisé et compris par
presque tout le monde. Cela nous a aidé à modéliser les idées en quelque chose de logique et
compréhensible, entourant également le système (application) et évitant les conflits entre le
développement mobile et Web.

2. Langage de programmation cote serveur :


a. Laravel :

Nous avons utilisé laravel parce qu’il a beaucoup fonctionnalités par example la sécurité et son
système d'emballage modulaire avec un gestionnaire de dépendances dédié, différentes manières
d'accéder aux bases de données relationnelles, des utilitaires qui facilitent le déploiement et la
maintenance des applications, aussi il était facile à apprendre car il syntaxe et les bases sont de PHP.

b. Real-Time technologies (Pusher) :

Real-time ou temps réel décrit diverses opérations dans l'informatique ou d'autres processus qui
doivent garantir des temps de réponse dans un délai spécifié (délai), généralement un temps
relativement court. J’ai utilisé cette technologie pour rendre l'intégration de l'application de chat en
temps réel.

c. APACHE

Le logiciel libre Apache HTTP Server (Apache) est un serveur HTTP créé et maintenu au sein de la
fondation Apache. Ce serveur m'a facilité l'accès à l'application laravel api via le point d'accès wifi.

24
3. Langage de programmation coté client
a. Vue.js :

Vue.js est un Framework JavaScript frontal open source pour la création d'interfaces utilisateur
et d'applications à page unique. Je l'ai utilisé pour rendre l'application de chat flexible et
automatiquement actualisable.

b. JavaScript

JS est un langage de programmation de scripts principalement utilisé dans les pages web
interactives mais aussi côté serveur.

c. Html :

L’HyperText Markup Language, généralement abrégé HTML, est le format de données conçu
pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où
son nom.

d. CSS :

(Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à
décrire la présentation des documents HTML et XML.

4. Système de gestion de base de données :


MySQL est un système de gestion de base de données (SGBD). Il est distribué sous une double
licence GPL et propriétaire. Il fait partie des logiciels de gestion de base de données les plus utilisés au
monde, autant par le grand public (applications web principalement) que par des professionnels, en
concurrence avec Oracle, Informix et Microsoft SQL Server.

25
II. Réalisation :
1. Application Web
a. Accueil : cette page montre les derniers biens immobiliers ajoutés.

Figure 6 page d'accueil

26
b. Bien immobilier :

Cette page contient plus d'informations sur l'immobilier, comme le nombre de personnes
autorisées, son coût, la superficie et la description. Dans le côté droit il y a un contact me de qui enverra
un message au propriétaire sans quitter la page.

Figure 7 détails de l'immobilier

27
c. Ajouter un Bien Immobilier ou une Annonce :

Cette page a un formulaire pour ajouter une nouvelle propriété immobilière

Figure 8 forme d'ajout d'un nouveau bien immobilier

La page pour ajouter une nouvelle


annonce de collaboration de location.
L’annonce est peut-être publier avec un
bien immobilier alors il sera affiché sur le
côté droit.

Figure 9 forme de publication d'une nouvelle annonce

28
d. Annonce :
L’annonce de collaboration apparaît dans une page répertorie toutes les annonces publiées par
des personnes qui recherchent une collaboration locative dans un bien immobilier et une zone
spécifique.

Figure 11 Annonce

Figure 10 annonce de collaboration

29
e. Pages d'authentification :

L’utilisateur n'a accès qu'à la


page d'accueil sinon il doit
s'authentifier pour continuer.

Figure 13 page de connexion

Figure 12 page d'inscription

30
f. Mon Profil :

Figure 14 profil

31
g. Profil d'un autre utilisateur :

Figure 15 profil d'un autre utilisateur

32
h. A propos :
Nous avons ajouté des informations sur l'entreprise comme indiqué dans la page ci-dessous.

Figure 16 à propos

33
i. Conversation and messages :

Une discussion en temps réel (conversation) avec un changement d'interface utilisateur réactif
avec les dimensions de l'appareil

Figure 17 Web de conversation dans le navigateur de bureau

Voici la perspective Web mobile de

La conversation de la boîte de réception

Figure 18 perspective mobile de conversation


web

34
2. Mobile
a. Conversation :

La conversation dans l'application mobile est en temps réel avec les mêmes services, donc si vous
envoyez un message depuis l'application mobile flutter, il sera reçu en temps réel à un utilisateur sur le
Web et j'ai utilisé l'API laravel pour diffuser un message et enregistrer dans la base de données. Voici
des captures d'écran de celui-ci.

Figure 19 liste de contacts (boîte de réception) Figure 20 discussion mobile en temps réel

35
b. Recherche des bien-immobilier :

36
Conclusion
Ce rapport de synthèse présente mon projet intitulé gestion des collocations et des biens
immobiliers réalisé durant la période de stage au sein de IM Creative

Mon travail a consisté, dans un premier temps, en l’étude du contexte du projet et l’analyse des
cas d'utilisation des différents acteurs en interaction avec le système. Dans un second temps, prendre
une formation sur les technologies comme laravel et vue.js, une compréhension en temps réel à utiliser
dans le projet a été une étape très importante dans le succès de sa réalisation. J’ai développé les
interfaces servant à réaliser leurs tâches appropriées en utilisant plusieurs technologies.

Ce stage m'a permis d'approfondir mes connaissances et compétences en développement web


et en conception et modélisation UML, ainsi de découvrir des nouvelles notions telles que le "responsive
design", le "mobile-first" et le "material design".

Vu la taille importante du projet et la limitation du temps, plusieurs améliorations à cette version


peuvent être envisagées. En perspective, nous pouvons implémenter des fonctionnalités telles que le
chat en temps réel.

Finalement, le développement web est un univers très vaste qui ne cesse de s'élargir, nécessitant
une veille technologique et une passion pour l'apprentissage. Ce projet a été un déclencheur pour
commencer à s'intéresser à ce domaine, je ne compte pas m'arrêter ici, mais continuer à développer
mes compétences et plonger encore dans ce domaine.

37
1. Bibliographie
https://www.youtube.com/watch?v=MFh0Fd7BsjE&t=279s •Laravel 8 Crash Course•Traversy Media.

https://www.youtube.com/watch?v=376vZ1wNYPA&t=19539s •Laravel8 for Beginners• CodewithDary

https://www.youtube.com/watch?v=PSKGeXr3j6w&list=PLMYF6NkLrdN-EowZ8sS73YguFKrCmhOek •

Laravel PHP MVC • Mohammed Essa.

2. Webographie
Laravel 8 Officiel Documentation : https://laravel.com/docs/8.x/readme

Bootstrap Official documentation : https://getbootstrap.com/docs/5.0/getting-started/introduction/

Vue.js Official documentation : https://vuejs.org/v2/guide/

38

Vous aimerez peut-être aussi