Dédicaces

A l’expression de ma reconnaissance, je dédie ce modeste travail à ceux qui, quels que soient les
termes embrassés, je n’arriverais jamais à leur exprimer mon amour sincère

A l’Eternel, mon Dieu

A l’Eternel, mon Dieu, Le Tout puissant de m’avoir aidé à arriver au bout de mes études, de m’avoir
donné la force pour survivre, ainsi que l’audace pour dépasser toutes les difficultés.

À Mes Chères Parents

«Lotfi & Rafiqua»

Aucune dédicace ne saurait exprimer mon respect, mon amour éternel

et ma considération pour les sacrifices que vous avez consenti pour

mon instruction et mon bien être. Je vous remercie pour tout le soutien

et l’amour que vous me portez depuis mon enfance et j’espère que

votre bénédiction m’accompagne toujours.

Que ce modeste travail soit l’exaucement de vos vœux tant formulés, le fruit de vos

innombrables sacrifices, bien que je ne vous en acquitterai jamais assez.

Puisse Dieu, le Très Haut, vous accorder santé, bonheur et longue vie et faire en sorte

que jamais je ne vous déçoive.

À tous mes Amis

Merci infiniment pour leurs aides, leurs temps, leurs encouragements, leurs assistances

et soutiens

À tous mes enseignants

Je dédie ce travail A tous ceux qui ont contribué de près ou de loin la réalisation

de ce travail. Que dieu vous accorde la santé et la prospérité

Dédicaces
 A l’expression de ma reconnaissance, je dédie ce modeste travail à ceux qui, quels que soient les
termes embrassés, je n’arriverais jamais à leur exprimer mon amour sincère

A l’Eternel, mon Dieu

A l’Eternel, mon Dieu, Le Tout puissant de m’avoir aidée à arriver au bout de mes études, de m’avoir
donné la force pour survivre, ainsi que l’audace pour dépasser toutes les difficultés.

À Mes Chères Parents

«Lotfi & Chiraz»

Aucune dédicace ne saurait exprimer mon respect, mon amour éternel

et ma considération pour les sacrifices que vous avez consenti pour

mon instruction et mon bien être. Je vous remercie pour tout le soutien

et l’amour que vous me portez depuis mon enfance et j’espère que

votre bénédiction m’accompagne toujours.

Que ce modeste travail soit l’exaucement de vos vœux tant formulés, le fruit de vos

innombrables sacrifices, bien que je ne vous en acquitterai jamais assez.

Puisse Dieu, le Très Haut, vous accorder santé, bonheur et longue vie et faire en sorte

que jamais je ne vous déçoive.

À tous mes Amis

Merci infiniment pour leurs aides, leurs temps, leurs encouragements, leurs assistances

et soutiens

À tous mes enseignants

Je dédie ce travail A tous ceux qui ont contribué de près ou de loin la réalisation

de ce travail. Que dieu vous accorde la santé et la prospérité

Remerciements
Nous profitons par le biais de ce rapport, pour exprimer nos vifs remerciements à toute
personne qui a participé de près ou de loin à l’élaboration de ce travail.
Un merci bien particulier adressé à Mr. Adnen Rouatbi notre encadrant pour ses
remarques et ses directives. Nous tenons à lui exprimer nos sincères remerciements pour
son suivi et ses orientations.

Mlle Malak Jridi notre encadrante aux seins de société, qui n'a pas cessé de nous prodiguer
ses conseils et qui n'a épargné aucun effort pour contribuer à la réussite de notre travail.

Nous tenons à remercier vivement tous nos professeurs qui nous ont aidés tout au long de
notre parcours.

Aussi, nous présentons notre reconnaissance à nos familles, nos collègues et amis qui
nous ont soutenus tout le long de ce projet.

Nous adressons également nos chaleureux remerciements aux membres du jury qui ont
accepté d’évaluer notre travail.

Que tous ceux qui ont contribué à mener à bien ce projet trouvent ici l’expression de
notre parfaite considération.

Sommaire
Introduction Général...........................................................................................................................1
Chapitre 1 : Présentation du cadre du projet.................................................................................3
 Introduction........................................................................................................................................3
1. Présentation de la société d’accueil...........................................................................................3
2. Etude Préalable...........................................................................................................................4
2.1. Etude de l’existant..............................................................................................................4
2.1.1. Freelancer...................................................................................................................4
2.1.2. Upwork.......................................................................................................................6
2.1.3. Tasahil........................................................................................................................7
2.1.4. peopleperhour.............................................................................................................8
2.2. Critique des solutions existantes.........................................................................................8
2.3. Solution Proposée.............................................................................................................10
3. Choix de modèle de développement.........................................................................................10
4. Diagramme de GANTT............................................................................................................11
Conclusion........................................................................................................................................11
Chapitre 2 : Spécification des besoins...........................................................................................12
Introduction......................................................................................................................................12
1. Identification des acteurs.........................................................................................................12
1.1. Acteurs Primaires.............................................................................................................12
1.2. Acteur secondaire.............................................................................................................13
2. Spécification des besoins..........................................................................................................13
2.1. Besoins fonctionnels.........................................................................................................13
2.2. Besoins non fonctionnels..................................................................................................14
3. Diagramme des cas d’utilisation global....................................................................................15
4. Diagramme des cas d’utilisations raffiné..................................................................................16
4.1. Diagramme du cas d’utilisation raffiné de « Publier Une Mission ».................................16
4.2. Diagramme du cas d’utilisation raffiné de « Payer Freelancer ».....................................17
4.3. Diagramme du cas d’utilisation raffiné de « Postuler à une mission »..............................18
4.4. Diagramme du cas d’utilisation raffiné de « Gérer les expériences »...............................19
4.5. Diagramme du cas d’utilisation raffiné de « Gérer les catégories »..................................20
4.6. Diagramme du cas d’utilisation raffiné de « Gérer les languages »..................................21
4.7. Diagramme du cas d’utilisation raffiné de «Gérer les utilisateurs»...................................22
Conclusion........................................................................................................................................23
Chapitre 3 : Conception du système.............................................................................................24
Introduction......................................................................................................................................24
1. Architecture globale du système...............................................................................................24
2. Diagrammes de Classes............................................................................................................26
3. Diagrammes de séquence.........................................................................................................28
 3.1. Diagramme de séquence « Inscription »...........................................................................28
3.2. Diagramme de séquence « Publier une mission»..............................................................30
3.3. Diagramme de séquence « ajouter une demande mission »..............................................31
3.4. Diagramme de séquence « S’authentifier ».......................................................................32
3.5. Diagramme de séquence « payer un freelancer »..............................................................34
Conclusion........................................................................................................................................35
Chapitre 4 : Réalisation.................................................................................................................36
Introduction :........................................................................................................................................36
1. Environnements du travail........................................................................................................36
1.1. Environnement matériel....................................................................................................36
1.2. Environnement Logiciel...................................................................................................37
1.3. Technologies utilisées.......................................................................................................38
1.3.1. Langages de programmation.....................................................................................38
1.3.2. Bibliothèques et Frameworks....................................................................................39
1.3.3. Web RTC..................................................................................................................41
2. Quelques Scénario d’exécution................................................................................................42
2.1. Freelancer.........................................................................................................................42
2.1.1. S’authentifier............................................................................................................42
2.1.2. Modifier les informations personnelles.....................................................................44
2.1.3. Ajouter une éducation...............................................................................................45
2.1.4. Ajouter une expérience académique.........................................................................46
2.1.5. Générer un CV..........................................................................................................47
2.1.6. Générer le contrat d’une mission..............................................................................48
2.1.7. Evaluer Client...........................................................................................................49
2.1.8. Rechercher une mission................................................................................................49
2.1.9. Consulter la liste des Missions de Freelancer............................................................50
2.2. Administrateur..................................................................................................................51
2.2.1. S’authentifier............................................................................................................51
2.2.2. Gestion Utilisateurs...................................................................................................51
2.2.3. Consulter les différentes statistiques.........................................................................52
2.2.4. Consulter la liste des missions..................................................................................52
2.3. Client................................................................................................................................53
2.3.1. Consulter son profil..................................................................................................53
2.3.2. Rechercher un freelancer..........................................................................................53
2.3.3. Payer freelancer........................................................................................................54
2.3.4. Publier une nouvelle mission....................................................................................56
 2.4. Internaute..........................................................................................................................57
2.4.1. Consulter les différentes statistiques.........................................................................57
2.4.2. S’inscrire en tant que client/freelancer......................................................................57
Conclusion........................................................................................................................................57
Conclusion et perspectives.................................................................................................................58
Bibliographie et Nétographie.............................................................................................................59
 Liste des abréviations

API : Application Programming Interface

PU : Processus Unifié
UML : Unified Modeling Language
DSI : Développement des systèmes d’informations
 Liste des Figures
Figure 1 : Logo de com & Dev...................................................................................................3
Figure 2 : Logo altagem..............................................................................................................3
Figure 3 : Logo Freelancer [URL1]............................................................................................5
Figure 4 : Logo Upwork [URL2]...............................................................................................6
Figure 5 : Logo Tasahil [URL3].................................................................................................7
Figure 6: Logo Peopelperhour [URL4]......................................................................................8
Figure 7: Les phases d'un processus unifié...............................................................................11
Figure 8 : Diagramme de GANTT............................................................................................11
Figure 9 :Représentation acteur................................................................................................12
Figure 10: Diagramme du cas d’utilisation...............................................................................15
Figure 11: Publier Une Mission................................................................................................16
Figure 12 : Payer un Freelancer................................................................................................17
Figure 13 :Postuler à une mission.............................................................................................18
Figure 14 : Gérer Expérience....................................................................................................19
Figure 15 : Gérer les catégories................................................................................................20
Figure 16 :Gérer les languages.................................................................................................21
Figure 17: Gérer les utilisateurs................................................................................................22
Figure 18 : le modèle MVC......................................................................................................24
Figure 19 : Diagramme de classes............................................................................................27
Figure 20 : Diagramme de séquence "S’inscrire".....................................................................29
Figure 21 : Diagramme de séquence de conception du cas d’utilisation "Publier mission".....30
Figure 22: Diagramme de séquence " ajouter une demande mission"......................................31
Figure 23 : Diagramme de séquence de conception du cas d’utilisation " S'authentifier".......33
Figure 24 : Diagramme de séquence « Payer un Freelancer »..................................................34
Figure 25: Logo Ruby [URL11]...............................................................................................38
Figure 26: Logo TypeScript [URL12]......................................................................................38
Figure 27: Logo HTML [URL13].............................................................................................39
Figure 28: Logo CSS [URL14].................................................................................................39
Figure 29: Logo Angular [URL15]...........................................................................................40
Figure 30 : Logo Ruby on rails [URL16].................................................................................40
Figure 31: Logo Bootstrap [URL17]........................................................................................40
Figure 32 : Logo Konnect [URL19].........................................................................................41
Figure 33 : WEBRTC [URL20]................................................................................................42
Figure 34 : home Page..............................................................................................................43
Figure 35 : Login Page..............................................................................................................43
Figure 36 : Dashboard freelancer page.....................................................................................43
Figure 37: Profil Details button................................................................................................44
Figure 38: Modifier Profil.........................................................................................................44
Figure 39: Résultat de modification profil................................................................................44
Figure 40 : Formulaire ajouter School/university.....................................................................45
Figure 41 : Add School/University Button...............................................................................45
Figure 42: Résultat de l'ajout....................................................................................................45
Figure 43: Experience Page......................................................................................................46
Figure 44 : Formulaire ajouter Experience...............................................................................46
Figure 45 : button download my cv..........................................................................................47
Figure 46 : Exemple Générer cv Freelancer.............................................................................47
Figure 47: Button Generate Contrat..........................................................................................48
Figure 48: Generate Contrat page.............................................................................................48
Figure 49: Rate client star button..............................................................................................49
Figure 50: Système de filtre missions.......................................................................................49
Figure 51 : Résultat de système de filtre...................................................................................50
Figure 52: liste des missions completées..................................................................................50
Figure 53: liste missions embauchées ou active.......................................................................50
Figure 54: gérer les Utilisateurs................................................................................................51
Figure 55 : Supprimer un utilisateur.........................................................................................51
Figure 56 : statistiques administrateur......................................................................................52
Figure 57 : liste des missions administrateur............................................................................52
Figure 58 : Dashboard client.....................................................................................................53
Figure 59: Système de filtre freelancers...................................................................................53
Figure 60: Résultat de système de filtre....................................................................................54
Figure 61 : boutons de payement..............................................................................................54
Figure 62 : payement Konnect API..........................................................................................55
Figure 63 : Résultat payement Konnect....................................................................................55
Figure 64 : payement Stripe API..............................................................................................55
Figure 65 : Résultat payement Stripe........................................................................................56
Figure 66: Formulaire "Add New Mission"..............................................................................56
Figure 67 : Statistique Internaute..............................................................................................57

Liste des Tableaux

Tableau 1 :Tableau des critiques................................................................................................9
Tableau 2:Description de cas d'utilisation "Publier Une Mission"..........................................16
Tableau 3 :Description de cas d'utilisation "Payer un freelancer"...........................................17
Tableau 4 :Description de cas d'utilisation "Postuler à une mission"......................................18
Tableau 5 :Description de cas d'utilisation " Gérer les expériences "......................................19
Tableau 6 :Description de cas d'utilisation " Gérer les catégories "........................................20
Tableau 7 : Description de diagramme de cas d'utilisation " Gérer les languages ".................21
Tableau 8 : Description de diagramme de cas d'utilisation " Gérer les utilisateurs "...............22
Tableau 9 : Environnement matériel.........................................................................................36
 Introduction Général
Le Freelancing (le métier de freelancer) est un domaine en plein développement dans le
monde entier puisqu’il offre aux freelancers. La possibilité de travailler en tant
qu’indépendants et de bénéficier d’une grande autonomie dans leur travail. Néanmoins, ce
domaine reste difficilement atteignable pour les jeunes tunisiens et tunisiennes. En effet, le
client tunisien trouve une difficulté à trouver les freelancers les plus adéquats à ses missions.
En plus, il n’y a pas de moyens de paiement localement et sur l’échelle internationale. Aussi,
généralement, les ressources ne sont pas toujours disponibles pour le suivi et la
communication entre les clients et les freelancers. Le client ne peut pas payer le freelancer en
toute sécurité et légalité. Il rencontre aussi un problème pour évaluer les compétences que le
freelancer prétend avoir. De même, un freelancer tunisien trouve une difficulté à prouver ses
compétences, à se confier au client et lui délivrer le produit demandé. De plus, l’apparition du
smartphone qui est considérée la deuxième évolution pour accéder aux services web avec les
sites.

Dans le but de remédier à ces problèmes qui handicapent un jeune tunisien ou une jeune
tunisienne et de booster les jeunes talents tunisiens, nous détectons le besoin d’un outil qui
réunit les donneurs d’offres et les potentiels talents recherchés. C’est dans ce contexte que
s’inscrit notre stage de fin d’études, afin de valider notre diplôme de licence en technologies
de l’informatique parcours DSI. Nous allons concevoir et développer une plateforme de
freelancing tunisienne nommée « Freelancy » proposée par la société COM & DEV. Cette
plateforme permettra de suivre de bout en bout le processus de proposition d’offres

et d’affectation de missions aux freelancers. « Freelancy » permettra aussi de garantir le

paiement contrôlé par un administrateur. Elle recommande les freelancers les plus adéquats
aux missions postées et les missions les plus adéquates aux freelancers inscrits.

Le présent rapport s’articule autour de quatre chapitres, présente le travail réalisé pour
mettre en place la plateforme de freelancing.

 Chapitre 1 : Présentation du cadre de projet + les solutions de freelancing avec

caractéristiques.
 Chapitre 2 : Spécification des besoins.
 Chapitre 3 : La conception de notre plateforme.

1
  Chapitre 4 : Présentation d’environnements matériel et logiciel + les scénarios
d’exécution de système.

Chapitre 1 : Présentation du cadre du projet

Introduction 
Dans ce chapitre introductif, nous citons le projet à son cadre général. Pour ce faire, nous
procédons à la présentation de l’entreprise d’accueil et du cadre général du travail suivi par
l’étude préalable et le choix de la méthodologie.

1. Présentation de la société d’accueil

Figure 1 : Logo de com & Dev

Com&Dev est une société de services et d'ingénierie en informatique basée à Sousse et fondée
en 2015 spécialisée en Développement Web et Mobile, Réseau et administration des
systèmes, marketing digital et télémarketing. Elle est une filiale de la société française
ALTAGEM qui est une entreprise de développement informatique et organisme de formation
située en région de Lyon et spécialisée dans le développement de solutions dédiées à la
gestion d’équipe mobiles.

Figure 2 : Logo altagem

Créé en 2014, ALTAGEM est le résultat de la confrontation de M. BERTRAND Billon, PDG,

au défi de bonne gestion d'équipes mobiles sur une autre structure mais aussi, à défaut d’avoir
trouvé sur le marché des solutions adaptées à la gestion efficace des interventions.

2
ALTAGEM combine 30 ans d'expérience terrain dans la gestion d’équipe mobiles et un
savoir- faire informatique et technologique pour offrir une solution permettant d'améliorer la
gestion opérationnelle de ces équipes ainsi que l’optimisation organisationnelle des
entreprises.

Com Dev préconise et met en œuvre des solutions techniques pour concevoir des applications
web et mobile sur-mesure ou adapter des solutions techniques existantes. A ce titre, elle est en
charge de :

 L’analyse des besoins.

 Le choix de solution technique.
 Le développement de toutes les fonctionnalités techniques.
 Le respect des bonnes pratiques de codage.
 Les tests et la validation des fonctionnalités développées.
 L'Intégration CMS, e-commerce.
 La maintenance évolutive des applications.

De façon complémentaire, la société participe aussi à :

 La formation du client lorsque l’application lui est livrée.

 Corrections des problèmes remontés par le client.
 Support technique.

Grâce à une expertise métier et technique, Com&Dev offre à ses clients une solution adaptée
à leurs besoins dans différents secteurs d’activités, même elle garantit également une bonne
communication et un service de support de qualité toute réclamation ou demandes.

2. Etude Préalable
[Link] de l’existant

La conception et la réalisation de tout projet doivent être précédées par une étude de l’existant
qui détermine les points faibles et les points forts des systèmes actuels, tenant compte des
objectifs à atteindre. La recherche que nous avons menée sur les solutions de freelancing
existantes dans le marché tunisien et dans le marché international nous a permis d’exposer
dans la suite quelques applications qui s’y intéressent de près :

3
 2.1.1. Freelancer

Freelancer [URL1] est une plateforme australienne très reconnue à travers le monde et a été
créée en 2009 par Matt Barrie. Elle adresse 55.635.000 utilisateurs et contient 19.430.032
travaux partagés dans plus de 30 domaines tels que le développement Web et Mobile, le
design et le marketing en 2021. La figure 3 représente sa page d’accueil.
Elle présente diverses fonctionnalités à ses utilisateurs :

-Le chat direct : la plateforme est capable d’assurer l’échange direct de messages entre tous
les utilisateurs que ce soit entre les freelancers ou entre les freelancers et les clients.

-Le chat direct : la plateforme est capable d’assurer l’échange direct de messages entre tous
les utilisateurs que ce soit entre les freelancers ou entre les freelancers et les clients.

-La recherche d’un freelance pour une mission : le client peut facilement trouver des
freelancers adéquats pour assurer la réalisation de son projet.

- Le paiement : Freelancer offre un service sécurisé et une garantie de paiement pour les
deux intervenants dans le projet à l’aide de : PayPal et les cartes bancaires
internationales.

-Freelancer à double rôle : le Freelancer peut également déposer un projet.

-La partie News et Presse : la plateforme permet à ses utilisateurs d’être informés de toutes
nouveautés du domaine de freelancing.

-La validation des compétences : offre la possibilité aux freelancers de passer un test payant
pour valider leurs compétences.

4
 Figure 3 : Logo Freelancer [URL1]

2.1.2. Upwork

Upwork [URL2] est une plateforme américaine fondée en 1999 par un groupe de jeunes
ingénieurs et adresse aujourd’hui plus que 14 millions utilisateurs dans 180 pays.

Elle offre à ses utilisateurs plusieurs fonctionnalités telles que :

-La recherche missions/freelancer : Upwork permet à ses utilisateurs de trouver des

missions/freelancers compatibles avec les compétences et le travail demandé.

-Le chat : Upwork offre à ses utilisateurs la possibilité de communiquer avec toute la
communauté que ce soit des freelancers ou des clients.

-Une tarification horaire ou un tarif fixe pour un projet : avec la possibilité de choisir
entre une rémunération à chaque heure ou en une seule fois quand le projet est realisé.

-La classification du top skills : cette plateforme permet de classifier les tops skills par
région et de recommander des freelancers par région/pays/qualifications.

-La Signature des contrats : elle offre la possibilité de signer des contrats entre les
freelancers et les clients inscrits et même non-inscrits.

-L’amélioration des compétences : permet aux utilisateurs d’améliorer leurs

compétences en recommandant des articles et des vidéos à voir.

5
 Figure 4 : Logo Upwork [URL2]

2.1.3. Tasahil

Tasahil [URL3] est une nouvelle plateforme tunisienne qui met les entreprises en contact
avec des freelancers dans 400 domaines différents.

-Assurer le paiement : le paiement est assuré seulement par un transfert bancaire direct et est
assuré que lorsque le client confirme sa satisfaction pour le produit fournit.

-L’échange des fichiers : assurer l’échange des fichiers entre le freelancer et le client durant
la réalisation du projet.

-Donner feedback : Tasahil offre la possibilité au client de donner son avis à propos du
travail fournit par le freelancer.

-La vérification d’identité : l’utilisateur doit vérifier son identité en tant que freelancer
ou client (CIN/Passeport) pour pouvoir postuler ou publier une mission.

-Consulter la liste des freelancers : Tasahil offre aux entreprises la possibilité de consulter la
liste des freelancers.

-Consulter la liste des offres : la plateforme offre la possibilité au freelancer de consulter la

liste des offres.

-La recherche des offres : Tasahil offre à ses freelancers la possibilité de rechercher des
offres.

-L’enregistrement des données : possibilité d’enregistrer des freelancers / des

entreprises / des travaux qui vous intéressent et des services dans une liste des favoris.

Figure 5 : Logo Tasahil [URL3]

 2.1.4. peopleperhour

PeoplePerHour [URL4] est une plateforme anglaise fondée en 2007 par Xenios Thrasy
voulou et Simos Kitiris qui met en relation des propriétaires d’entreprises avec des
entrepreneurs qualifiés.
Elle offre à ses utilisateurs plusieurs fonctionnalités telles que :
-La recherche freelancer/projet /offre : cette plateforme offre aux clients la possibilité de
rechercher des freelancers inscrits dans notre plateforme, des projets ou des offres
enregistrées.
-La possibilité d’acheter un service d’un freelancer/des offres : par exemple dans
Le domaine du design on trouve des offres pour des logos de sites web)
-freelancer peut déposer des offres de service : dans cette plateforme le freelancer peut
aussi publier des offres de service.
-Blog : PeoplePerHour permet à ses utilisateurs de publier périodiquement des articles
personnels.

Figure 6: Logo Peopelperhour [URL4]

[Link] des solutions existantes

Le tableau 1.1 présente une évaluation des différentes solutions existantes présentées
précédemment selon un nombre de critères.

7
Critères Freelancer Tasahil Upwork PeoplePerHour

Gratuités des services Inscription Oui Utilisation gratuite pour Inscription

30 jours seulement puis gratuite mais
gratuite mais le
vous devrez payer pour l’accès reste
test est payant avoir plus de gratuit tant que
fonctionnalités (90 DT vous ne
pour 90 jours, 120 DT dépassez pas 15
pour 1 an ou 60 DT par heures par mois
mois)
Recommandation Oui Non Non Non
automatique des
missions pour le
Freelancer

Freelancer à double Oui Non Oui Oui

fonctionnalités (il
devient aussi client)

Possibilité d’améliorer Oui Oui Non Non

les compétences (offrir
des articles)

Signature des contrats Oui Oui Non Non

assurés par la
plateforme

Suivi de l’avancement Oui Oui Oui (à travers le chat) Oui

du projet

Délai de paiement Après la Possibilité de Une fois que le projet est Une fois que le
choisir entre un validé par le client projet est validé
livraison du paiement à par le client
projet chaque heure
ou en une fois à
la fin du projet
Concurrence (suivant Forte Forte Faible Forte
réputation et nombre
des utilisateurs)

8
Mode de Paiement -Paypal -Paypal -Transaction par carte -Paypal
-Carte bancaire -Carte bancaire bancaire directe -Carte bancaire
internationale internationale (tunisienne) internationale

Tableau 1 :Tableau des critiques

Nous remarquons que les applications existantes ne sont pas toutes gratuites. Elles ne sont pas
aussi adéquates pour les freelancers tunisiens à cause de l’absence de la carte PayPal en
Tunisie (les freelancers ont du mal à être payés). De plus, à cause de la forte concurrence
entre les plateformes existantes, les débutants n’ont pas la chance de s’améliorer et d’obtenir
des offres à travers ces plateformes.

[Link] Proposée

Après une étude comparative des différentes solutions existantes et afin de permettre d’une
part aux jeunes tunisiens d’avoir plus de chance d’obtenir des offres de travail et d’améliorer
leurs compétences et d’autre part aux clients de trouver les meilleurs talents pour répondre à
leurs besoins, notre projet de conception et de développement consiste à concevoir et à
développer une plateforme Web de freelancing gratuite. La solution permettra d’inscrire des
freelancers et des clients avec un control bien déterminé par un webmaster guidé par des
statistiques de notre plateforme en facilitant les méthodes de payement par carte bancaire
tunisienne, E-dinar de la poste et Stripe.

3. Choix de modèle de développement

Processus unifié

Un processus Unifié est un processus de développement logiciel construit sur UML. Il est
itératif et incrémental, conduit par les cas d'utilisation et piloté par les risques. La gestion d'un
tel processus est organisée selon 5 phases :

● Pré étude, capture des besoins et étude

● Analyse et conception préliminaire

● Conception et tests

9
● Déploiement et tests

● Bilan du cycle de développement.

Le processus unifié n'est pas un processus universel mais une trame commune des meilleures
pratiques de développement. L'objectif d'un processus unifié est de maîtriser la complexité
des projets informatiques en diminuant les risques. UP est un ensemble de principes
génériques adapté en fonction des spécificités des projets.

Figure 7: Les phases d'un processus unifié

4. Diagramme de GANTT

La conduite d’un tel projet est relativement complexe si on ne suit pas une démarche. Une
méthodologie et un planning bien défini à l’avance. Ainsi, le projet a été décomposé en
plusieurs phases. Ci-dessous le diagramme de GANTT qui illustre le planning effectif du
projet :

Figure 8 : Diagramme de GANTT

10
Conclusion

Dans ce chapitre nous avons mis en évidence les limites des solutions existantes avant de
présenter notre propre solution. Nous nous focaliserons dans le chapitre qui suit sur la partie
analyse des besoins.

11
Chapitre 2 : Spécification des besoins
Introduction 

Dans ce chapitre nous allons identifier les différents acteurs de notre système. Nous
identifions également les besoins fonctionnels et non fonctionnels exigés pour notre
plateforme. Nous abordons aussi le suivi du diagramme de cas d’utilisation globale et
raffinée.

1. Identification des acteurs

Un acteur est un élément externe (utilisateur humain, dispositif matériel ou autre système) qui
interagit avec le système. Nous distinguons ainsi deux types d’acteurs : acteur primaire qui
utilise le système pour bénéficier de ses besoins fonctionnels et acteur secondaire qui va aider
le système à assurer ses fonctionnalités.

Figure 9 :Représentation acteur

[Link] Primaires

 Administrateur : une personne qui va intervenir pour gérer les Utilisateurs et qui
pourra consulter les données relatives à la plateforme.
 Internaute : toute personne qui va accéder à notre plateforme pour voir les Freelancers
et d’autres informations générales liées à notre plateforme.
 Client : une personne qui poste des missions et cherche un Freelancer pour répondre à
ses besoins.
 Freelancer : une personne qui travaille pour son propre compte en utilisant notre
plateforme. Le freelancer possède des connaissances dans un domaine particulier ou
dans plusieurs domaines et offre certains services aux clients de notre plateforme.

12
 [Link] secondaire

Dans notre plateforme, nous avons deux acteurs secondaires qui est l’API de paiement de la
Konnect et le Stripe qui assure le transfert d’argent en toute sécurité entre le freelancer et le
client à travers l’application.

2. Spécification des besoins

Nous présentons dans cette section les besoins fonctionnels et non fonctionnels de notre
plateforme

[Link] fonctionnels

Ce sont les services offerts par notre système à l’ensemble de ses acteurs primaires. Notre
plateforme offrira au client les fonctionnalités suivantes :

Notre plateforme offrira à l’internaute les fonctionnalités suivantes :

 S’inscrire : l’internaute peut créer un compte pour devenir un Freelancer ou un client.

 Consulter les informations : notre plateforme offre à l’internaute la possibilité de
consulter la liste des freelancers dans notre plateforme, les statistiques relatives
(nombre de freelancers inscrits, nombre de clients inscrits et nombre de Missions
réalisées, ...) et la liste de tous les missions avec un système de filtre.

Notre plateforme offrira au client les fonctionnalités suivantes :

 Se connecter : le client peut se connecter à son compte.

 Déposer une nouvelle mission : le client peut publier une mission à faire en spécifiant
la description détaillée, le délai de réalisation, la fourchette de prix et les compétences
nécessaires.
 Rechercher Freelancer : le client peut rechercher un Freelancer.
 Payer Freelancer : suite à la livraison du produit final, le client va payer le Freelancer à
travers notre plateforme.
 Evaluer Freelancer : après le dépôt du produit final, le client est encouragé à évaluer le
Freelancer en donnant une star comme étant son avis sur la mission.

Notre plateforme offrira au Freelancer les fonctionnalités suivantes :

 Se connecter : le freelancer peut se connecter à son compte.

13
  Générer CV : notre plateforme offre au freelancer la possibilité de générer son CV à
partir des informations recueillies sur son profil.
 Gérer Compte : le freelancer peut gérer son compte (modifier ses informations
personnelles, ajouter des informations (éducation, expériences, skills...)
 Evaluer Client : après la livraison du produit final, le freelancer peut évaluer le client
en donnant une star comme étant son avis sur la mission et ses détails.
 Ajouter Favoris : le freelancer peut ajouter des missions à une liste de favoris.
 Demander Une mission : le freelancer peut postuler à plusieurs missions.

Notre plateforme offrira à l’administrateur les fonctionnalités suivantes :

 se connecter : Administrateur peut se connecter à son compte.

 Gérer les catégories
 Gérer les compétences
 Consulter les données de la plateforme : permet à l’administrateur de consulter des
statistiques (nombre de freelancers inscrits, nombre de clients utilisant la plateforme,
nombre de catégories et compétences).

[Link] non fonctionnels

Les besoins non fonctionnels sont des critères très importants pour assurer la qualité des
services assurés par notre plateforme et garantir la satisfaction de tous les utilisateurs. Ils sont
présentés dans les points suivants :

 La facilité d’utilisation : L’utilisateur est capable d’utiliser notre plateforme après une
formation de 15 min.
 Fiabilité : l’application doit toujours être en mesure de fonctionner correctement.
 La simplicité : le système doit être simple à utiliser. La navigation entre les pages doit
être souple et facile.

3. Diagramme des cas d’utilisation global

Dans cette partie nous allons schématiser la vue fonctionnelle de notre système par un
diagramme des cas d’utilisation globale comme indiqué dans la FIGURE 10 :

14
 Figure 10: Diagramme du cas d’utilisation

4. Diagramme des cas d’utilisations raffiné

[Link] du cas d’utilisation raffiné de « Publier Une Mission »

15
 Figure 11: Publier Une Mission

Cas d’utilisation Publier Une Mission

Résumé Cette Phase permet aux client de Publier une

nouvelle mission

Acteur Client

Précondition Le client doit être authentifié

Scénario nominal [Début]

1) Accées à l’application
2) Le client peut ajouter une nouvelle
mission à travers un formulaire

[Fin]
Alternative exception Si les informations fournies sont incomplètes ou
incorrectes, le système réaffichera le formulaire
d'ajout et attendra que le client resaisisse les
informations.

Tableau 2 : Description de cas d'utilisation "Publier Une Mission"

[Link] du cas d’utilisation raffiné de « Payer Freelancer »

16
 Figure 12 : Payer un Freelancer
Cas d’utilisation Payer un Freelancer

Résumé Cette phase permet aux clients de Payer un

freelancer après l’achèvement d’une mission.

Acteur Client

Précondition -Le client doit être authentifié.

-La mission doit être terminée par le freelancer.
Scénario nominal [Début]
1) Accées à l’application
2) Si la mission est terminée par le freelancer
le client se dirige vers la page
“ended-mission-client”
3) Le client clique sur le bouton
“payer freelancer” et paie selon la
méthode de payement à son choix
4) Le client doit remplir la formulaire de
payement
5) Transaction terminée

[Fin]
Alternative exception Si les informations fournies sont incomplètes ou
incorrectes, le système réaffichera le formulaire de
payement et attendra que le client resaisisse les
informations.

Tableau 3 :Description de cas d'utilisation "Payer un freelancer"

[Link] du cas d’utilisation raffiné de « Postuler à une mission »

Figure 13 :Postuler à une mission

17
Cas d’utilisation Postuler à une mission

Résumé Cette phase permet aux freelancers de Postuler à

une mission par l’envoi d’une demande ou
“request” aux client.

Acteur Freelancer

Précondition Le freelancer doit être authentifié.

Scénario nominal [Début]

1) Accées à l’application
2) Le freelancer se dirige vers la page
“find-mission”
3) Le freelancer clique sur le bouton
“Postuler”
4) La demande se fait avec succès et le
freelancer se dirige vers la page
"postulated-mission-freelancer” avec un
statut mission = “encours”

[Fin]
Alternative exception Si le freelancer a déjà postulé à la mission, le
système alerte le freelancer.

Tableau 4 :Description de cas d'utilisation "Postuler à une mission"

[Link] du cas d’utilisation raffiné de « Gérer les expériences »

18
 Figure 14 : Gérer Expérience

Cas d’utilisation Gérer les experiences

Résumé Cette phase permet au freelancer de gérer ses

expériences professionelles dans son domaine.

Acteur Freelancer

Précondition Le freelancer doit être authentifié.

Scénario nominal [Début]

1) Accès à l’application
2) Le freelancer peut ajouter une expérience
3) Le freelancer peut modifier ou supprimer
une experience

[Fin]
Alternative exception Si les informations fournies sont incompletes, le
système alerte le freelancer et réaffiche le
formulaire d'ajout ou de modification et attend que
le freelancer resaisisse les informations.

Tableau 5 :Description de cas d'utilisation " Gérer les expériences "

[Link] du cas d’utilisation raffiné de « Gérer les catégories »

Cas d’utilisation Gérer les categories

Figure 15 : Gérer les catégories

19
Résumé Cette phase permet a l’administrateur de gérer les
catégories de notre plateforme

Acteur Administrateur

Précondition L’administrateur doit être authentifié.

Scénario nominal [Début]

1) Accès à l’application
2) L’administrateur peut ajouter une catégorie
3) L’administrateur peut modifier ou
supprimer une catégorie

[Fin]
Alternative exception Si les informations fournies sont incompletes, le
système réaffiche le formulaire d'ajout ou de
modification et attend que l’administrateur resaisisse
les informations.

Tableau 6 :Description de cas d'utilisation " Gérer les catégories "

[Link] du cas d’utilisation raffiné de « Gérer les languages »

Figure 16 :Gérer les languages

20
Cas d’utilisation Gérer les languages

Résumé Cette phase permet à l’administrateur de gérer les

languages de notre plateforme.

Acteur Administrateur

Précondition L’administrateur doit être authentifié.

Scénario nominal [Début]

1) Accès à l’application
2) L’administrateur peut ajouter une language
3) L’administrateur peut modifier ou supprimer
une language

[Fin]
Alternative exception Si les informations fournies sont incompletes, le
système réaffiche le formulaire d'ajout ou de
modification et attend que l’administrateur resaisisse
les informations.

Tableau 7 : Description de cas d'utilisation " Gérer les languages "

[Link] du cas d’utilisation raffiné de « Gérer les utilisateurs»

21
 Figure 17: Gérer les utilisateurs
Cas d’utilisation Gérer les utlilisateurs

Résumé Cette phase permet à l’administrateur de gérer les

utlilisateurs de notre plateforme

Acteur Administrateur

Précondition L’administrateur doit être authentifié.

Scénario nominal [Début]

1) Accès à l’application
2) L’administrateur peut consulter ou supprimer
un utilisateur

[Fin]
Alternative exception

Tableau 8 : Description de cas d'utilisation " Gérer les utilisateurs "

Conclusion
22
Dans ce chapitre nous avons identifié les différents acteurs interagissant avec le système ainsi
que les besoins fonctionnels et non fonctionnels. Ensuite, nous avons eu recours au
diagramme de cas d’utilisation et des tableaux qui décrivent quelques scénarios possibles de
notre application. Nous allons consacrer le chapitre suivant pour décrire la phase de
conception.

Chapitre 3 : Conception du système

Introduction 
Après avoir présenté les différentes fonctionnalités de notre application, nous allons décrire
dans ce chapitre la phase de conception qui est une étape primordiale pour la mise en
évidence de notre plateforme.

1. Architecture globale du système

Dans cette partie, on va présenter le modèle MVC adopté pour notre future solution et ses
composants.

MVC est connu sous le nom de modèle architectural et se compose de trois parties ; modèle,
vue et contrôleur. Précisément, il divise une application en trois parties logiques ; partie
modèle, vue et contrôleur. Il était utilisé pour les interfaces graphiques de bureau, mais il est
aujourd'hui utilisé dans la conception d'applications mobiles et d'applications Web.

23
 Figure 18 : le modèle MVC

Pour notre système, nous essayons de garantir un maximum d'indépendance entre les Couches
de présentation, le modèle de données et la partie contrôle. Nous suivrons dans l’application
une architecture logicielle suivant le modèle MVC.

Les composants MVC

 Modèles(M) : cette section traite les données de votre site. Ce composant est
responsable de la gestion des données, de les organiser et de les assembler pour que le
contrôleur puisse les traiter. Cela inclut les requêtes SQL.
 Vue(V) : Gère l'interface utilisateur (UI). Ce composant se compose généralement des
fichiers html, css et js statiques. Le composant de vue est utilisé pour attacher et
déclencher des événements utilisateur, mais la gestion des événements relève du
domaine du contrôleur.
 Contrôleur(C) : La responsabilité principale d'un contrôleur est de gérer les
événements déclenchés par l'entrée de l'utilisateur et agit également en tant que
médiateur entre la vue et le modèle.
En d'autres termes, le contrôleur contient une logique spécifique côté client. Le
contrôleur fournit diverses fonctions basées sur des événements qui peuvent être
déclenchés, puis contacte le modèle pour lire/mettre à jour les données et présente les
nouvelles informations pour visualiser le composant à montrer à l'utilisateur.

24
2. Diagrammes de Classes
Nous présentons le diagramme de classes de notre plateforme pour voir les propriétés de
chaque classe à travers les attributs, les méthodes ainsi que les associations entre elles comme
le montre la FIGURE 18. Nous détaillons ainsi le rôle de chaque classe :

 Freelancer : Cette classe contient toutes les informations nécessaires pour un

freelancer inscrit dans notre plateforme.
 Client : Cette classe contient toutes les informations nécessaires pour un client inscrit
dans notre plateforme.
 Admin : Cette classe contient toutes les informations nécessaires pour un
administrateur inscrit dans notre plateforme.
 Skill : Elle contient toutes les informations nécessaires pour une compétence
enregistrée dans notre plateforme.
 Mission : Cette classe contient toutes les informations nécessaires pour chaque
mission publiée sur notre plateforme.
 Education : Cette classe contient toutes les informations nécessaires pour chaque
éducation enregistrée dans notre plateforme.
 Experience : Cette classe contient toutes les informations nécessaires pour chaque
expérience enregistrée par un freelancer.
 Reviews : Cette classe contient tous les commentaires écrits par un freelancer ou un
client.
 FreelancerSkills : Cette classe présente l’association entre les deux classes skills et
freelancers.
 MissionSkills : Cette classe présente l’association entre les deux classes skills et
Missions.
 Requests : Cette classe présente l’association entre les deux classes freelancers et
Missions.

25
  Favoris : Cette classe présente l’association entre les deux classes freelancers et
Missions.
 Category : Cette classe contient toutes les informations nécessaires pour les catégories
de nos missions.

Figure 19 : Diagramme de classes

3. Diagrammes de séquence
Le diagramme de séquence décrit l’aspect dynamique de système. Il modélise les interactions
entres les objets ou entre utilisateurs et objets en mettant l’accent sur la chronologie des
messages échangés. Les diagrammes de séquences de chaque cas d’utilisation sont :

[Link] de séquence « Inscription » 

Description

 Un internaute ne peut bénéficier des services offerts à un freelancer ou à un client que s’il
est inscrit à notre plateforme. Pour ce fait, après consultation de la page “Home”, il doit
cliquer sur le bouton «Get started »

26
 L’internaute saisit les champs fournis (nom, prénom, email, rôle et mot de passe) afin de
s’inscrire.

 L’application transfère toutes les données saisies par une requête http au serveur par
l’intermédiaire d’un web service de contrôleur « Registrations_controller.rb » qui à son
tour fait appel aux model « [Link] » afin d’enregistrer cet utilisateur
 Si l’internaute a saisi des données invalides, un message d’erreur sera envoyé.
 Sinon, si les données saisies sont valides un email de confirmation sera envoyé
o Si l’email est confirmé, l’application va rediriger notre nouvel utilisateur vers la
page « Login ».
o Si l’email n’est pas confirmé, l’internaute n’aura jamais accès à son compte
jusqu'à ce qu’il active le compte.

27
 Figure 20 : Diagramme de séquence "S’inscrire"

[Link] de séquence « Publier une mission» 

Description

 Après connexion, un client peut publier une mission en consultant tout d’abord la page
“addmission “ à travers le bouton du sidebar “Post new mission”. Ensuite, afin de poster
une nouvelle offre aux freelancers, il doit remplir le formulaire.

 Les données saisies vont être transférées par une requête http au serveur par
l’intermédiaire d’un web service de contrôleur « Missions_controller.rb » qui à son tour
fait appel aux model “Mission” pour enregistrer cette nouvelle mission.
 Si le client a saisi des données invalides, un message d’erreur sera envoyé au client.

 Sinon, si les données saisies sont valides ,la mission a été ajoutée avec succès.
L’application va rediriger le client vers “liste mission page”.

28
 Figure 21 : Diagramme
[Link] de séquence
de séquence de conception
« ajouter unedudemande
cas d’utilisation "Publier mission"
mission » 

Description

 Après connexion, un freelancer peut travailler sur une mission par l’envoi d’une demande
au client.
 Le freelancer se dirige vers la page “missions“ et doit choisir une mission de la liste
déposée. On clique sur le bouton “postuler “.
 Les données vont être transférées par une requête http au serveur par l’intermédiaire d’un
web service de contrôleur « Requests_controller.rb » qui à son tour fait appel aux model
“Request” pour enregistrer cette nouvelle Request(ou demande).
 Le freelancer se dirige vers la page “postulated-mission-freelancer“ où se trouve toutes les
demandes sur les missions qu’il a faites.

29
[Link] de séquence « S’authentifier » 

 Nos utilisateurs ne peuvent bénéficier des services que s’ils sont connectés à notre
plateforme. Pour ce fait, après consultation de la page « Home », ils doivent cliquer
sur le bouton “Get started“. 
 Les utilisateurs se dirigent vers la page “login“ et doivent saisir les champs fournis
(email, mot de passe) afin de s’authentifier.

 Les données vont être transférées par une requête http au serveur par l’intermédiaire
d’un web service de contrôleur « sessions_controller.rb » qui à son tour fait appel aux
model “User” pour vérifier les données.
 Si les données saisies sont correctes :

o Si le rôle d’utilisateur est « Admin », il se dirige vers la page ‘’Dashboard-

admin ‘’.
o Si le rôle d’utilisateur est « Freelancer », il se dirige vers la page ‘’Dashboard-
freelancer ‘’.

Figure 22: Diagramme de séquence " ajouter une demande mission"

o Si le rôle d’utilisateur est « Client », il se dirige vers la page ‘’Dashboard-

client ‘’.

 Sinon, si les données saisies sont incorrectes un message d’erreur sera envoyé et le
formulaire se réaffiche jusqu’à ce que les données soient correctes.

30
Figure 23 : Diagramme de séquence de conception du cas d’utilisation " S'authentifier"

31
 [Link] de séquence « payer un freelancer »

Après la réalisation de son mission et la vérification du travail délivré, le client peut consulter
la liste de ses missions finis et appuyer sur le bouton de paiement selon la méthode de son
choix soit par Stripe soit par Konnect et le processus va commencer. La FIGURE 22
représente le diagramme de séquence système de ce cas d’utilisation.

Figure 24 : Diagramme de séquence « Payer un Freelancer »

32
Conclusion
Dans ce chapitre, nous avons présenté l’architecture globale du projet et la conception de
l’application en utilisant le langage de modélisation orienté objet UML. A ce stade-là, il ne
reste plus qu’à implémenter l’application en détaillant les différentes étapes de réalisation.
Dans le prochain chapitre on aborde la partie réalisation ainsi que la description de quelques
choix techniques effectués pendant le développement.

33
Chapitre 4 : Réalisation

Introduction :
Dans le présent chapitre, nous présentons quelques interfaces homme machine traduisant
quelques scénarios afin de comprendre les fonctionnalités offertes par notre plateforme. Nous
décrivons aussi les environnements matériel et logiciel mis œuvre au cours de développement
de notre solution. Nous présentons aussi les différentes technologies ;langages de
programmation, outils et Frameworks utilisés dans la réalisation de notre projet.

1. Environnements du travail

[Link] matériel

Nous avons travaillé sur trois ordinateurs dont les caractéristiques sont présentées dans le
tableau ci-dessous.

Ordinateur 1 Ordinateur 2

Système d’exploitation ubuntu 20.04 ubuntu 20.04

Processeur Intel(R) Core(TM) i5-7200U Intel(R) Core(TM) i3-8130U

CPU @ 2.50GHz 2.71 GHz CPU @ 2.20GHz x4

Mémoire vive 8,00 Go 8Go

Disque dur 480TB SSD 480TB SSD

Tableau 9 : Environnement matériel.

[Link] Logiciel
34
Durant la phase de réalisation de notre application, nous avons utilisé plusieurs outils
logiciels. Parmi ces outils, nous pouvons citer :

-Visual Studio Code : C’est un éditeur de code source qui peut être utilisé avec une variété de
langages de programmation, notamment Java, JavaScript, Go, [Link] et C++. Cet éditeur
[URL6] est basé sur le cadre Electron, qui est utilisé pour développer des applications Web
[Link] qui s’exécutent sur le moteur de présentation Blink. Visual Studio Code utilise le
même composant d’éditeur (nom de code Monaco) utilisé dans Azure DevOps (anciennement
appelé Visual Studio Online et Visual Studio Team Services). Le logiciel prend en charge le
Windows Subsystem for Linux et, permet ainsi par exemple, de programmer facilement en
C/C++ depuis un ordinateur Windows 10.

-Postman : C’est un logiciel [URL7] qui se focalise sur les tests des API. Il permet de
construire et d’exécuter des requêtes HTTP, de les stocker dans un historique afin de pouvoir
les rejouer, mais surtout de les organiser en Collections.

-PostgreSQL : également connu sous le nom de Postgres, [URL8] est un système de gestion
de base de données relationnelle (SGBDR) libre et open source mettant l'accent sur
l'extensibilité et la conformité SQL. Il s'appelait à l'origine POSTGRES, faisant référence à
ses origines en tant que successeur de la base de données Ingres développée à l'Université de
Californie à Berkeley.

- Visual Paradigm : C’est un outil UML CASE prenant en charge UML 2 [URL9], SysML et
Business Process Modeling Notation (BPMN) du groupe de gestion d'objets (OMG). En plus
de la prise en charge de la modélisation, il fournit des capacités de génération de rapports et
d'ingénierie de code, y compris la génération de code. Il peut inverser l'ingénierie des
diagrammes à partir du code et fournir une ingénierie aller-retour pour divers langages de
programmation.

-GitHub : C’est un fournisseur d'hébergement Internet pour le développement de logiciels et

le contrôle de version à l'aide de Git [URL10]. Il offre les fonctionnalités distribuées de
contrôle de version et de gestion du code source (SCM) de Git, ainsi que ses propres
fonctionnalités. Il fournit un contrôle d'accès et plusieurs fonctionnalités de collaboration
telles que le suivi des bogues, les demandes de fonctionnalités, la gestion des tâches,
l'intégration continue et des wikis pour chaque projet. Basée en Californie, elle est une filiale
de Microsoft depuis 2018.

35
 [Link] utilisées

Dans cette partie, nous allons présenter les langages de programmation et les frameworks
utilisés dans le développement de notre projet.

1.3.1. Langages de programmation

Les langages de programmation que nous avons utilisés sont :

-Ruby : C’est un langage de programmation interprété [URL11], de haut niveau et à usage

général qui prend en charge plusieurs paradigmes de programmation. Ruby est typé
dynamiquement et utilise le ramasse-miettes et la compilation juste-à-temps. Il prend en
charge plusieurs paradigmes de programmation, y compris la programmation procédurale,
orientée objet et fonctionnelle. Selon le créateur, Ruby a été influencé par Perl, Smalltalk,
Eiffel, Ada, BASIC et Lisp.

Figure 25: Logo Ruby [URL11]

-TypeScript : C’est un langage de programmation libre et open source [URL12] développé

par Microsoft qui a pour but d’améliorer et de sécuriser la production de code JavaScript. Il
[URL14] s’agit d’un sur-ensemble syntaxique strict de JavaScript (c’est-à-dire que tout code
JavaScript correct peut être utilisé avec TypeScript). Le code TypeScript est transcompilé en
JavaScript, et peut ainsi être interprété par n’importe quel navigateur web ou moteur
JavaScript. TypeScript a été cocréé par Anders Hejlsberg, principal inventeur de C.

Figure 26: Logo TypeScript [URL12]

36
-HTML : C’est un type de langage informatique descriptif [URL13]. Il s’agit plus
précisément d’un format de données utilisé dans l’univers d’Internet pour la mise en forme
des pages Web. Il permet, entre autres, d’écrire de l’hypertexte, mais aussi d’introduire des
ressources multimédias dans un contenu.

Figure 27: Logo HTML [URL13]

-CSS : C’est l’acronyme de « Cascading Style Sheets » ce qui signifie « feuille de style en
cascade ». Le CSS [URL14] correspond à un langage informatique permettant de mettre en
forme des pages web (HTML ou XML). Ce langage est donc composé des fameuses « feuilles
de style en cascade » également appelées fichiers CSS (.css) et contient des éléments de
codage.

Figure 28: Logo CSS [URL14]

1.3.2. Bibliothèques et Frameworks

Au cours de l’implémentation de notre solution, nous avons utilisé des frameworks et des
outils parmi lesquels on peut citer :

-Angular : C’est un cadriciel [URL15] (framework) côté client, open source, basé sur
TypeScript, et co-dirigé par l’équipe du projet « Angular » à Google et par une
communauté de particuliers et de sociétés. Angular est une réécriture complète

37
 d’AngularJS, cadriciel construit par la même équipe. Il permet la création d’applications
Web et plus particulièrement de ce qu’on appelle des « Single Page Applications » : des
applications web accessibles via une page web unique qui permet de fluidifier
l’expérience utilisateur et d’éviter les chargements de pages à chaque nouvelle action.

Figure 29: Logo Angular [URL15]

-Ruby on Rails : ou Rails, est un framework d'application Web côté serveur [URL16] écrit en
Ruby sous la licence MIT. Rails est un framework modèle-vue-contrôleur (MVC), fournissant
des structures par défaut pour une base de données, un service Web et des pages Web. Il
encourage et facilite l'utilisation des standards du web tels que JSON ou XML pour le
transfert de données et HTML, CSS et JavaScript pour l'interface utilisateur.

Figure 30 : Logo Ruby on rails [URL16]

-Bootstrap : C’est un framework [URL17] développé par l’équipe du réseau social Twitter.
Proposé en open source (sous licence MIT), ce framework utilisant les langages HTML, CSS
et JavaScript fournit aux développeurs des outils pour créer un site facilement. Ce framework
est pensé pour développer des sites avec un design responsive, qui s’adapte à tout type
d’écran, et en priorité pour les smartphones.

Figure 31: Logo Bootstrap [URL17]

38
-Stripe Rest API : Stripe est une société irlando-américaine de services financiers [URL18]
et de logiciels en tant que service dont le siège social est à San Francisco, aux États-Unis et à
Dublin, en Irlande. La société propose principalement des logiciels de traitement des
paiements et des interfaces de programmation d'applications (API) pour les sites Web de
commerce électronique et les applications mobiles.

-Konnect Rest API : Konnect est une plateforme tunisienne [URL19] en marque blanche que
vous permet d'offrir une expérience utilisateur complète, multi-canal et personnalisée aux
couleurs de votre marque. Parfaitement adaptée aux entreprises qui souhaitent disposer d'une
Marketplace de services avec une solution de paiement intégrée. Cette offre inclus notamment
une application mobile personnalisée.

Figure 32 : Logo Konnect [URL19]

1.3.3. Web RTC

Le premier objectif d'ApiRTC [URL20] est de permettre le développement rapide

d'applications de communication en temps réel utilisant WebRTC.
WebRTC prend en charge la vidéo, la voix et les données génériques à envoyer entre pairs
sans serveur de signalisation mais il ne sait pas comment découvrir les pairs. ApiRTC gère
tous les services réseau dont une application WebRTC est requise pour vous.
WebRTC peut également être implémenté légèrement différemment par les différents
navigateurs. ApiRTC se présente comme une couche d'interopérabilité pour gérer la
communication en temps réel entre plateformes.
WebRTC est une technologie qui permet à n'importe quel navigateur de partager des données
d'application et d'organiser des conférences audio et vidéo peer-to-peer sans installer de
plugins ou de logiciels tiers.

39
 Figure 33 : WEBRTC [URL20]

2. Quelques Scénario d’exécution

Dans cette partie, nous présentons notre travail avec des captures d’écran afin de donner un
aperçu sur le scénario d’exécution pour chaque acteur primaire de l’application : client,
freelancer, administrateur.

2.1. Freelancer

Dans cette section nous présentons les scénarios d’exécution pour le freelancer.

2.1.1. S’authentifier

Après avoir accédé à la page d’accueil de notre plateforme, le freelancer peut appuyer sur le
bouton "Get Started" représenté dans la FIGURE 34. Un formulaire de connexion représenté
dans la FIGURE 35 sera affiché pour remplir les données de connexion (son email et son mot
de passe). Après son authentification, le profil du freelancer s’affiche comme le montre la
FIGURE 36 en lui permettant d’accéder aux différents services offerts.

40
 Figure 34 : home Page

Figure 35 : Login Page

41
 2.1.2. Modifier les informations personnelles
Figure 36 : Dashboard freelancer page

Suite à l’appui sur le bouton " Profil Details" de "Settings» affiché dans la FIGURE 37, le freelancer
peut modifier ses données comme c’est illustré dans la FIGURE 38. La FIGURE 39 montre un exemple
de résultat de la modification des informations.

Figure 37: Profil Details button

Figure 38: Modifier Profil

42
 Figure 39: Résultat de modification profil

2.1.3. Ajouter une éducation

Le freelancer peut améliorer son profil en ajoutant l’éducation qu’il a suivi. Ceci est possible
en remplissant le formulaire présenté dans la FIGURE 40 qui s’affiche en s’appuyant sur le
bouton «Add School/University" illustré dans la FIGURE 41. La FIGURE 42 montre un
exemple de résultat de la modification des informations.

Figure 40 : Formulaire ajouter School/university

Figure 41 : Add School/University Button

Figure 42: Résultat de l'ajout

43
 2.1.4. Ajouter une expérience académique

Le freelancer peut améliorer son profil en ajoutant une expérience académique. Ceci est
possible en remplissant le formulaire présenté dans la FIGURE 38 qui s’affiche en s’appuyant
sur l’icône "Add Experience" illustrée dans la FIGURE 43.

Figure 43: Experience Page

Figure 44 : Formulaire ajouter Experience

44
 2.1.5. Générer un CV

En accédant à son profil, le freelancer peut générer son CV automatiquement à partir de ses
informations enregistrées en appuyant sur le bouton "download my cv" qui s’affiche dans la
FIGURE 45 et le CV sera généré comme c’est illustré dans la FIGURE 46.

Figure 45 : button download my cv

45
 Figure 46 : Exemple Générer cv Freelancer

2.1.6. Générer le contrat d’une mission

Dès qu’il soit affecté à une mission, le freelancer peut générer le contrat relatif à cette mission
illustrée dans la FIGURE 48 en appuyant sur le bouton "Generate Contract" présent dans la
FIGURE 47.

Figure 47: Button Generate Contrat

Figure 48: Generate Contrat page

46
 2.1.7. Evaluer Client

Une fois le projet est terminé et le paiement est assuré, le freelancer peut donner son avis sur le
client qui a postulé pour la mission en appuyant sur l’icône « star » représentée dans la FIGURE 49.

Figure 49: Rate client star button

2.1.8. Rechercher une mission

Le freelancer peut rechercher un projet selon un système de filtre basé sur la catégorie, le budget, la
compétence requise à cette mission et la barre de recherche par nom illustrée dans la FIGURE 50.
Toutes les missions trouvées seront affichées comme c’est illustré dans la FIGURE 51.

47
 Figure 50: Système de filtre missions

Figure 51 : Résultat de système de filtre

2.1.9. Consulter la liste des Missions de Freelancer

Le freelancer peut également voir la liste des missions complétées représentée par la FIGURE
52. Les missions actives sont affichées dans la FIGURE 53.

Figure 52: liste des missions completées

Figure 53: liste missions embauchées ou active 48

 2.2. Administrateur

Dans cette section nous présentons un scénario d’exécution pour l’administrateur.

2.2.1. S’authentifier

Après avoir accédé à la page d’accueil de notre plateforme, l’administrateur peut appuyer sur
le bouton "Login" représenté dans la FIGURE 34. Un formulaire de connexion représenté
dans la FIGURE 35 sera affiché pour remplir les données de connexion (son email et son mot
de passe).

2.2.2. Gestion Utilisateurs

Un administrateur peut également gérer les comptes des clients ou des freelancers en
supprimant leurs informations en consultant leurs listes représentées dans la FIGURE 54 et
55.

Figure 54: gérer les Utilisateurs

49
 Figure 55 : Supprimer un utilisateur

2.2.3. Consulter les différentes statistiques

L’administrateur peut voir les différentes statistiques de notre plateforme comme le nombre total de
freelancers et clients, le total des catégories, etc.... Ceci est illustré par la FIGURE 56.

Figure 56 : statistiques administrateur

2.2.4. Consulter la liste des missions

L’administrateur peut également voir la liste de toutes les missions de notre plateforme
présentée dans la FIGURE 57.

Figure 57 : liste des missions administrateur

50
 2.3. Client

Dans cette section nous présentons un scénario d’exécution pour le client.

2.3.1. Consulter son profil

Après la connexion à son compte, le client peut consulter son profil présenté dans la FIGURE 58.

Figure 58 : Dashboard client

2.3.2. Rechercher un freelancer

Le client peut rechercher un freelancer selon un système de filtre basé sur le montant par jour
de freelancer, le nombre de star, la compétence de freelancer (skills) et la barre de recherche
par nom FIGURE 59. Tous les freelancers trouvés seront affichés comme c’est illustré dans
la FIGURE 60.

51
 Figure 59: Système de filtre freelancers

Figure 60: Résultat de système de filtre

2.3.3. Payer freelancer

Le client termine une mission par la phase de paiement qui est réalisée grâce à l’API de
paiement de Stripe ou Konnect. L’appui sur le bouton "Konnect Service", FIGURE 61 appelle
l’API de Konnect pour faire le paiement comme l’illustre la FIGURE 62 et la FIGURE 63. Le
client doit choisir la méthode de payement soit par Konnect, soit par la poste, ou par transfert
bancaire adéquat. L’appui sur le bouton "Stripe ", FIGURE 61, appelle l’API de STRIPE pour
faire le paiement comme l’illustre la FIGURE 64 et la FIGURE 65. Le client doit entrer ses
coordonnées pour se connecter à son compte Stripe et faire le paiement comme expliqué ci-
dessous dans les tableaux.

Figure 61 : boutons de payement

52
 Figure 62 : payement Konnect API

Figure 63 : Résultat payement Konnect

53
 Figure 64 : payement Stripe API

Figure 65 : Résultat payement Stripe

2.3.4. Publier une nouvelle mission

L’appui sur le bouton "Post Mission" redirige le client vers un formulaire où il peut introduire les
détails de la mission comme ils sont illustrés dans la FIGURE 66. Après la validation de ce formulaire,
la mission est enregistrée et le client se dirige vers la page de toutes les missions postulées.

Figure 66: Formulaire "Add New Mission"

54
 2.4. Internaute
2.4.1. Consulter les différentes statistiques

L’internaute peut voir les différentes statistiques de notre plateforme comme le nombre total
de freelancers, le nombre total de clients et le total des missions. Ceci est illustré par la figure
67

Figure 67 : Statistique Internaute

2.4.2. S’inscrire en tant que client/freelancer

Après avoir consulté l’accueil de notre plateforme, l’internaute peut s’inscrire en tant que
client/freelancer. Il clique sur le bouton "Register" affiché dans la FIGURE 30. Un formulaire
d’inscription présenté dans la FIGURE 56 s’affiche. Une fois l’inscription est achevée, l’internaute est
redirigé vers son nouveau profil.

Conclusion
Dans ce chapitre, nous avons présenté les environnements matériel et logiciel. Ensuite, à
travers des captures d’écran, nous avons décrit les scénarios d’exécutions possibles pour
chaque classe d’utilisateurs de notre plateforme.

55
Conclusion et perspectives
De nos jours, le freelancing est un sujet d’actualité dans le monde puisqu’il offre aux
employés la possibilité de travailler en tant qu’indépendants et de bénéficier d’une grande
autonomie dans leurs missions.

C’est dans ce cadre que s’inscrit notre projet de conception et de développement. Notre projet
consiste à concevoir et à mettre en place une plateforme de freelancing qui permet d’offrir aux
travailleurs les meilleures offres adéquates à leurs profils. Il permet aussi aux clients de
trouver les meilleures freelancers.

Notre système a été élaboré pour être adéquat à quatre types d’acteurs. D’abord, l’internaute
qui doit s’inscrire pour devenir un freelancer ou un client. Ensuite, le freelancer qui peut
trouver des offres adéquates à son profil en postulant pour une offre. Puis, le client qui peut à
son tour publier des missions et accepter les freelancers adéquats à ses missions.

Enfin, nous trouvons l’administrateur qui peut faire la gestion globale de notre plateforme. Le
présent rapport illustre les différentes étapes de réalisation de notre projet. Nous avons
commencé par une étude des solutions existantes dans le marché tunisien et international.
Ceci nous a permis de proposer notre propre solution. Les besoins de cette solution ont été
identifiés et modélisés. Nous avons par la suite présenté la conception de notre système.
Finalement, nous avons présenté la plateforme mise en place à travers la description de
quelques scénarios d’exécution.

Pour conclure les fonctionnalités offertes par notre solution permettent d’offrir un
environnement favorable aux travailleurs pour trouver les meilleures offres adéquates à leurs
profils. Elles permettent aussi aux clients les meilleurs freelancers. Cette plateforme peut être
enrichie en ajoutant des autres fonctionnalités comme le système de chat Réel qui peut
faciliter la communication entre les clients et les freelancers.

56
Bibliographie et Nétographie
[URL1] [Link] , consulté le 20/02/2022.

[URL2] [Link] , consulté le 22/02/2022.

[URL3] [Link] consulté le 22/02/2022.

[URL4] [Link] consulté le 22/02/2022.

[URL5] https : //[Link]/uml/tutoriel/unifiedProcess/, consulté le

26/05/2022.

[URL7] [Link] Consulté le 26/05/2022.

[URL8] [Link] consulté le 22/02/2021.

[URL9] [Link] Consulté le 26/05/2022.

[URL10] [Link] Consulté le 26/02/2022.

[URL11] [Link] Consulté le 04/03/2022.

[URL12][Link] Consulté le 15/02/2022.

[URL13] [Link] Consulté le 26/05/2022.

[URL14] [Link]
hypertext-markup-langage-definition-traduction/ Consulté le 26/05/2022.

[URL15] [Link] Consulté le 26/05/2022.

[URL16] [Link] Consulté le 30/05/2022.

[URL17] [Link] Consulté le 30/05/2022.

[URL18] [Link] Consulté le 30/05/2022.

[URL19] [Link] Consulté le 01/05/2022.

[URL20] [Link] Consulté le 01/05/2022.

57
 Résumé
Notre projet consiste à concevoir et à développer une plateforme de freelancing en Tunisie qui
assure le dénouement du processus de demande et l’affectation d'une mission entre freelancer
et client. Cette plateforme se base essentiellement sur la méthode de payement tunisienne
Konnect qui nous à permis la facilité de payement et nous a offert des services divers.

Mots clés: Ruby, Ruby on rails, Angular, Postgresql, Konnect.

Abstract
Our project consists in designing and developing a freelancing platform in Tunisia which
ensures the end-to-end outcome of the request process and assignment of a mission between
freelancer and client. This platform is mainly based on the Tunisian Konnect payment method
which allowed Tunisians the easiest way of payment and to offer various services to It
different users.

Keywords : Ruby, Ruby on rails, Angular, Postgresql, Konnect

‫ملخص‬

‫يتكون مشروعنا من تصميم وتطوير منصة العمل الحر في تونس والتي تضمن النتيجة الشاملة لعملية الطلب وإسناد مهمة‬
‫ تعتمد“ هذه المنصة بشكل أساسي على طريقة الدفع التونسية والتي أتاحت لنا نحن التونسيين سهولة‬.‫بين المستقل والعميل‬
‫الدفع وأيضا تقديم خدمات متنوعة لمستخدميها المختلفين‬.

Ruby، Ruby on rails، Angular، Postgresql، Konnect‫ الكلمات المفاتيح‬:

58