PLATFORM FREELANCE

Ichioui AyoubJadli ToufikSikal Nawfal Zerhouni Saad

RÉALISÉ PAR

ENCADRÉ PAR

M. ABDELLAH ABOUABDELLAH

PROJET ASP .NET

REMERCIEMENTS

En préambule à ce rapport, nous tenons à remercier toute l’équipe pédagogique de l’école nationale

des sciences appliquées de Kenitra et les intervenants professionnels responsables de la formation

génie informatique, pour avoir assuré la partie théorique de celle-ci.

Nous remercions particulièrement et témoignons toute notre reconnaissance à Mr. Abdellah

ABOUABDELLAH, Professeur de technologies web au sein de l’école nationale des sciences

appliquées de Kenitra, de nous avoir très bien appris et instruit le bagage nécessaire, ainsi que pour

ses efforts colossales et ses conseils avisés qui nous ont permis de donner naissance à ce projet.

Cette expérience sera capitale pour notre avenir professionnel.

Enfin, Nous tenons à adresser notre reconnaissance et notre gratitude à toute personne liée de près

ou de loin à la réalisation de ce projet.

DEDICACES

On dédie ce modeste travail et notre profonde gratitude à nos mères et pères pour l'éducation qu'ils

nous ont prodigué; avec tous les moyens et au prix de tous les sacrifices qu'ils ont consentis à notre

égard, pour le sens du devoir qu'ils nous ont enseigné depuis notre enfance.

A nos chères frères et sœurs.

A tous nos collègues de la promotion 2015.

RESUME DU TRAVAIL

Le Projet « Plateforme Freelance » réaliser par l’équipe constitué de ICHIOUI Ayoub, SIKAL

Nawfal, JADLI Toufik et ZERHOUNI saâd, représente une interface de Freelance, qui est une

interface offrant à un membre « Freelancer » de vendre ses services à un employeurs « entreprise »

expressant des besoins.

La problématique à laquel on essaie de répondre dans ce projet, est de simplifié et facilité

l’interaction entre employeurs et employés, pour cela, une interface web semble être la bonne

solution.

ainsi on essayera d’atteindre les objectifs majeur suivants :

Demander une authentification pour la connexion au site. !!!!!!

Créer une interface Freelancer, donnant la possibilité de visualiser et de postuler pour

l’ensemble des projet proposer.

Créer une interface employeurs « entreprise » permettant de proposer des projets

S’assurer de la sécurité de l’ensemble des information dans le site.

Afin d’atteindre nos objectifs, on a optez pour un ensemble de technologies, bien evidement le

ASP.NET qui represente la thématique sous la quelle se projet s’intégre, et pour une meilleurs

intéractivité avec l’utilisateur on utlisera des outiles tel que jquerry, Angular , Websocket,

FACEBOOK API et autres.

Pour conclure, le projet réaliser nous a permis d’appliquer les compétances acquise au cours de du

module de l ASP.NET et d’apprendre de nouvelles technologies afin d’assurer une meilleur

experience à nos utilisateurs et atteindres nos objectifs tracée précedemment.

ABSTRACT

Quand une entreprise a un nouveau besoin, une problématique à résoudre ou tout simplement un

surplus d’activité. Plusieurs solutions s’offrent :

Recruter un stagiaire

Faire appel à un intérimaire

Embaucher un nouvel employé

Avoir recours à une agence spécialisé

Certaines solutions sont coûteuses, certaines sont à dépendance ou engagement forcé. Donc la

solution est de faire appel à un freelance.

Bien que le freelance est bien répondu, difficile est la tache de trouver des freelancers qui eux n’ont

pas un endroit précis, bureau ou place où être. D’où le besoin d’avoir des plateformes pour à la fois,

trouver et faire le contact entre l’entreprise et le freelancer.

Le résultat de ce projet est alors un site web qui soit une plateforme freelance pour ce dessein.

SOMMAIRE

Introduction générale

Chapitre 1 : Besoins fonctionnels et conduite de projet

1. Expression des besoins fonctionnels

2. Expression des besoins non fonctionnels

3. Conduite de projet

3.1 Planification prévisionnelle

3.2 Planification réelle

Chapitre 2 : Conception et modélisation de la base de données

1. Diagramme de cas d’utilisation

2. Diagramme d’activité

3. Règles de gestion et diagramme de classe

4. Modèles de données

Chapitre 3 : Réalisation

1. Outils de travail

2. Captures des écrans et commentaires

Conclusion générale et perspectives de travail

INTRODUCTION GENERAL

Etudiants en 4eme année du cycle ingénieur en filière génie Informatique à l’Ecole Nationale des

Sciences Appliquées de Kenitra. On présente dans ce rapport le projet web qu’on a effectué pendant

notre 7eme semestre en technologie web.

Durant ce travail, Il est question pour nous, la création d’une plateforme freelance sous forme de

site web réalisé par l’IDE de Microsoft, Visual Studio. On avait plusieurs thèmes pour choisir (un

site de vente achat, ,…), mais notre choix s’est fixé sur le freelance, de par le réel besoin se faisant

sentir ainsi que son importance en étant le futur de toute transaction informatique.

Le but de ce projet est donc de comprendre dans un premier temps ce qu’est le freelance, son utilité,

son importance etc... Et dans un second temps, être capable de réaliser le projet (la plateforme

freelance) pour utiliser les outils et technologies informatiques acquises pendant notre formation, les

difficultés et les solutions qui se présentent lors de la réalisation de ce genre de travail.

L’élaboration de ce rapport a pour principale source les différents enseignements qu’on a pu acquérir

au fil de nos stages par la pratique des différentes tâches et missions qu’on a dû accomplir, ainsi que

de nos connaissances acquises tout au long de notre formation scolaire et nos recherches

personnelles pour ce qui est des questions théoriques.

CHAPITRE 1:

BESOINS FONCTIONNELS ET

CONDUITE DE PROJET

1. EXPRESSION DES BESOINS

FONCTIONNELS:

A. BETE A CORNE:

La bête à corne est un outil d’analyse fonctionnelle du besoin. En matière d’innovation, il est tout

d’abord nécessaire de formuler le besoin sous forme de fonctions simples (dans le sens de «

fonctions de bases ») que devra remplir le produit ou le service innovant.

On constate souvent que les acteurs projet privilégient des solutions déjà connues sans analyser

concrètement le besoin qui justifie le projet. Avant d'imposer un "comment" ou une solution, il faut

se tourner vers l'utilisateur et/ou le demandeur, pour aboutir de manière structurée à la solution, car

un projet n'a de sens que s'il satisfait le besoin. Il convient donc d'exprimer le besoin et rien que le

besoin dès le lancement du projet. Il s'agit d'expliciter l'exigence fondamentale qui justifie la

conception, ou la reconception d'un produit. Pour cela, il est essentiel de se poser les trois questions

suivantes :

B. DIAGRAMME PIEUVRE :

L'outil "diagramme pieuvre" est utilisé pour analyser les besoins et identifier les fonctions de service

de produit.

En analysant le produit, on peut en déduire le diagramme "pieuvre", graphique circulaire qui met en

évidence les relations entre les différents éléments de l'environnement du produit. Ces différentes

relations sont appelées les fonctions de services qui conduisent à la satisfaction du besoin.

Le diagramme pieuvre (ou APTE) nous permet de répertorier toutes les fonctions de notre produit.

En effet nous rappelons que lors de la conception, les techniciens chercheront pour chaque fonction

à satisfaire, la meilleure solution. Et c'est l'ensemble des solutions qui donnera le produit final.

On distingue deux types de fonction :

Fp = Fonction principale : lien entre le produit et 2 objets environnants.

Fc = Fonction de contrainte : lien entre le produit et 1 objet environnant.

1. EXPRESSION DES BESOINS

NON FONCTIONNELS

BESOINS D’UTILISABILITE :

Une interface simple et facile à utiliser pour le freelancer et les entreprises assurant une certainne

fluidité et intéractivité d’utilisation.

Dù à l’utilisation de technologies avancées, notre siteweb sera compatible avec les derniére version

de Google Chrome et Mozilla Firefox, a noter qu’il sera incompatible avec le navigateur Internet

Explorer.

BESOINS DE PERFORMANCE :

les performances d’exécution du système :

Configuration Windows

requise

Configuration Mac

requise

Configuration Linux

requise

Système

d'exploitation

Windows XP Service Pack 2 ou

version ultérieure

Windows Vista

Windows 7

Windows 8

Mac OS X 10.6 ou

version ultérieure

Ubuntu 12.04 ou version

ultérieure

Debian 7++ ou version

ultérieure

OpenSuSE 12.2+ ou version

ultérieure

Fedora Linux 17+

Processeur Intel Pentium 4 ou ultérieur Intel Intel Pentium 3 / Athlon 64

ou ultérieur

RAM 128 Mo

Le chargement d’une page Web dans le navigateur ne devrait pas prendre plus de 15 secondes en

condition normale.

BESOINS DE DISPONIBILITE/FIABILITE :

Le site web doit être disponible 24h/24 7j/7 ceci pour l’interface du Freelancer et de l’entreprise,

Ainsi un Freelancer doit avoit la possibilité d’appliqué pour un projet a tout moment tant qu’il est

diponible.

Une entreprise doit avoir la possibilité de postuler un projet a tout moment

Une entreprise doit avoir la possibilité d’evaluer le travail effectuer par un freelancer dés l’application

de ce dernier.

BESOINS DE SECURITE:

On a deux niveaux d’accès possible, l’accès en tant qu’une entreprise et l’accès en tant que

Freelancer, chaque accès nécissite une inscription précedante dans le site, et la présentation d’un mot

de passe.

Toute information confidentielle fournie par les clients via l’Internet sera cryptée avec le système

XYZ ou par l’algorithme, la méthode….ABC..

BESOINS MATERIELS :

Afin d’accéder au site, vous devez disposez d’un appareil mobile ou un ordinateur avec une

connexion internet.

BESOINS DE DEPLOIEMENT :

L’application sera hébérger dans un nom de domain, afin de la rendre accèssible à tout les utilisateur,

on procédera aprés à la publication du site dans les réseaux sociaux en génral les réseaux sociaux

proféssionnels plus particuliérement..

Tous les logiciels du côté client vont être téléchargés et installés à partir du navigateur, sans que le

poste du client ne soit redémarré ou configuré manuellement

2. CONDUITE DE PROJET :

A. PLANIFICATION PRÉVISIONNELLE

L’objectif de la gestion du planning consiste à élaborer, en prévisionnel, le planning des personnes

en termes d’horaire de présence, d’indisponibilité et de nature du travail effectué lors de la présence,

en essayant d’assurer au mieux la couverture des charges de travail de chaque entité.

L’application propose une définition des charges de travail de chaque entité en s’appuyant sur une

description des besoins par l’intermédiaire d’une notion de « postes de travail ».

Le module Planning multipostes donne ensuite la possibilité de positionner les ressources sur les

charges de travail décrites par les postes.

B. PLANIFICATION RÉELLE

CHAPITRE 2:

CONCEPTION ET MODELISATION

DE LA BASE DE DONNEES

1. DIAGRAMME DE CAS D’UTILISATION:

Le diagramme de cas d’utilisation représente la structure des grandes fonctionnalités nécessaires aux

utilisateurs du système.

Un cas d’utilisation est une manière spécifie que d’utiliser un système. Les acteurs sont à l’extérieur

du système ; ils modélisent tout ce qui interagit avec lui. Un cas d’utilisation réalise un service de

bout en bout, avec un déclenchement, un déroulement et une fin, pour l’acteur qui l’initie.

ROLE DU DIAGRAMME D’UTILISATION

Donne une vue du système dans son environnement extérieur.

Définit la relation entre l’utilisateur et les éléments que le système met en œuvre

Est la base du modèle UML

2. DIAGRAMME D’ACTIVITÉ Le diagramme d'activités fait partie des diagrammes peu connus que propose UML. Pourtant, il est

très utile et dispose d'un spectre d'utilisation très large — c'est d'ailleurs le diagramme que j'utilise le

plus après le diagramme de classes. Il permet de décrire toutes sortes de processus : des processus

industriels, des processus métier, le déroulement d'un cas d'utilisation ou encore un algorithme. Je

vous invite donc à le découvrir à travers un exemple quelque peu original...

Le diagramme d'activité présente une vision macroscopique et temporelle du système modélisé :

Action

Action structurée

Historique

Fusion

Décision

A) DIAGRAMME D’ACTIVITÉ FREELANCER:

B) DIAGRAMME D’ACTIVITÉ DE L’ENTREPRISE :

3. REGLES DE GESTION ET

DIAGRAMME DE CLASSE

Le diagramme des classes identifie la structure de la classe d’un système, y compris les propriétés et

les méthodes de chaque classe. Les diverses relations, telles que la relation d'héritage par exemple,

qui peuvent exister entre les classes y sont également représentées.

Le diagramme des classes est le diagramme le plus largement répandu dans les spécifications

d'UML. Une partie de la popularité du diagramme des classes provient du fait qu'il existe des outils

tels que Rational XDE, ClassBuilder, Omodo for Elipse ou Poseïdon permettant de produire

directement du code source dans les principaux langages informatiques (Java, C++, et de C #,

Phyton…) à partir de ces modèles (forward engineering). Ces outils peuvent synchroniser les

modèles et le code, réduisant votre charge de travail. Ils peuvent également produire des

diagrammes de classes à partir du code source orienté objet. (Reverse engineering)

Pour un modèle complexe, plusieurs diagrammes de classes complémentaires doivent être construits.

On peut par exemple se focaliser sur :

les classes qui participent à un cas d'utilisation (cf. collaboration),

les classes associées dans la réalisation d'un scénario précis,

les classes qui composent un paquetage,

la structure hiérarchique d'un ensemble de classes.

4. MODÈLE DE DONNÉES:

Le modèle relationnel est basé sur une organisation des données sous forme de tables. La

manipulation des données se fait selon le concept mathématique de relation de la théorie des

ensembles, c'est-à-dire l'algèbre relationnelle. L'algèbre relationnelle a été inventée en 1970 par E.F.

Codd, le directeur de recherche du centre IBM de San José. Elle est constituée d'un ensemble

d'opérations formelles sur les relations. Les opérations relationnelles permettent de créer une

nouvelle relation (table) à partir d'opérations élémentaires sur d'autres tables (par exemple l'union,

l'intersection, ou encore la différence).

La théorie des ensembles met en œuvre deux notions :

La notion de domaine.

la notion de produit cartésien.

o Régles de gestion :

Il s'agit des fonctionnalités du système. Ce sont les besoins spécifiant un comportement d'entrée / sortie du site :

Un utilisateur peut s’incrire comme etant un freelancer

Un utilisateur peut s’incrire comme etant une entreprise

Une entreprise peut postuler un ou plusieurs projets

Un projet appartiens a une seule entreprise

Un freelancer peut appliquer un ou plusieurs projets

Un freelnacer peut supprimer son application pour un projet

Un projet peut etre appliqué par un ou plusieurs freelancers

Un projet appartiens a une catégorie

Une catégories peut contenir plusieurs projet

Une entreprise peut supprimer un projet postuler

un freelancer peut envoyer un message

un freelancer peut recevoir un message

une entreprise peut envoyer un message

une entreprise peut recevoir un message

une entreprise peut evaluer un ou plusieurs freelancers

un freelancer peut etre evaluer par un ou plusieurs

o MCD :

o MLDR :

Freelancer(id, pseudo, pass, nom, prenom, email, telephone, pays , date_naissance, image)

Application(id, pseudo_freelancer, id_projet, message, statut, date_application, etat, changed)

Categorie(id, nom)

Entreprise(id, pseudo, pass, adresse, email, telephone, pays, image)

Messages(id, pseudo_freelancer, id_projet, message, date_envoi, pseudo_entreprise, etreprise_seen,

freelancer_seen)

Projet (id, pseudo_entreprise, titre, description, budget, id_categorie, statut_projet, date_projet)

Review(id, pseudo_entreprise, pseudo_freelancer, review, score)

CHAPITRE 3:

RÉALISATION

1. OUTILS DE TRAVAIL:

A. HTML 5 (HYPERTEXT MARKUP LANGUAGE):

Comme son nom l'indique, le HTML5 est le successeur du HTML.4.0.1.

Le langage HTML permet notamment la lecture de documents sur Internet à partir de machines

différentes, grâce au protocole HTTP, permettant d'accéder via le réseau à des documents repérés

par une adresse unique, appelée URL.

Cette nouvelle version du langage de développement reste dans la lignée du HTML qui a permis la

publication des premières pages web, mais introduit un certain nombre de nouveautés qui en font un

concurrent sérieux au format Flash développé par Adobe.

Les spécifications du HTML5, réalisées par le W3C ne sont pas encore terminées, malgré tout, on

note que toute la structure et l'organisation du code ont été revus dans le sens d’introduire de

nouvelles manières et façons, pas seulement de créer mais, ainsi qu’utiliser le web.

B. CSS 3 (CASCADING STYLE SHEETS) :

Le principe des feuilles de style consiste à regrouper dans un même document des caractéristiques de

mise en forme associées à des groupes d'éléments. Il suffit de définir par un nom un ensemble de

définitions et de caractéristiques de mise en forme, et de l'appeler pour l'appliquer à un texte.

C. ASP.NET :

ASP.NET est un ensemble de technologies de programmation Web créé par Microsoft. Les

programmeurs peuvent utiliser ASP.NET pour créer des sites Web dynamiques, des applications

Web ou des Web services XML. La technologie est accessible grâce à l'installation d'un serveur Web

compatible ASP (IIS) ou à l'intérieur de Visual Web Developer Express Edition ou ASPNET Web

Matrix.

D. C# :

Le C# est un langage de programmation orienté objet à typage fort, créé par la société Microsoft.

Le C# est, d’une certaine manière, le langage de programmation qui reflète le mieux l’architecture

Microsoft .NET qui fait fonctionner toutes les applications .NET, et en est par conséquent

extrêmement dépendant.

Il a été créé afin que la plate-forme Microsoft .NET soit dotée d'un langage permettant d'utiliser

toutes ses capacités. Il est très proche du Java dont il reprend la syntaxe générale ainsi que les

concepts (la syntaxe reste cependant relativement semblable à celle de langages tels que le C++ et le

C).

E. JAVASCRIPT :

Aujourd'hui, presque toutes les pages Web contiennent du code JavaScript, un langage de

programmation de scripts exécuté par le navigateur Web du visiteur. Il apporte aux pages Web des

fonctionnalités correspondant à des besoins spécifiques, et s'il est désactivé pour une quelconque

raison, le contenu ou l'utilisation de la page Web peuvent s'en trouver restreints ou indisponibles.

Le JavaScript est un langage de script basé sur la norme ECMAScript.

Il s'insère dans le code (x)HTML d'une page web, et permet d'en augmenter le spectre des

possibilités.

Ce langage de POO [Programmation Orientée Objet], faiblement typé, est exécuté côté client.

1. JQUERY :

jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant

Ajax) et HTML, et a pour but de simplifier des commandes communes de JavaScript.

Par bibliothèque on entend donc un ensemble cohérent de fonctions permettant de s’affranchir des

tâches rébarbatives et répétitives de façon uniforme sur les navigateurs les plus courants.

2. AJAX :

AJAX (Asynchronous Javascript And XML, traduisez Javascript asynchrone et XML) est une

méthode de développement web basée sur l'utilisation d'un script Javascript pour effectuer des

requêtes web à l'intérieur d'une page web sans recharger la page.

AJAX rend plus interactifs les sites web et offre une meilleure ergonomie ainsi qu'une réactivité

amélioré en permettant de modifier interactivement une partie de l'interface web seulement.

En effet, le modèle web traditionnel est basé sur une suite de requêtes et de réponses successives,

c'est-à-dire une navigation séquentielle de page web en page web. AJAX permet de ne modifier que

la partie de la page web qui nécessite d'être mise à jour en créant une requête HTTP locale et en

modifiant tout ou partie de la page web en fonction de la requête HTTP récupérée.

L'architecture informatique Ajax (acronyme d'Asynchronous JavaScript and XML) permet de

construire des applications Web et des sites web dynamiques interactifs sur le poste client en se

servant de différentes technologies

3. ANGULARJS :

AngularJS est un framework JavaScript open-source, maintenue par Google, qui aide à l'exécution

des applications en une seule page. Son objectif est de doter les applications basées sur un navigateur

avec l’architecture modèle-vue-contrôleur (MVC), offrant ainsi un développement et un débogage

plus facile des applications.

L’API lit tout d’abord les balises HTML qui contiennent les attributs personnalisées

supplémentaires; elle obéit ensuite aux valeurs contenues dans ces attributs personnalisés. Les

valeurs de ces variables JavaScript peuvent être réglés manuellement, ou récupérées à partir des

ressources JSON statiques ou dynamiques.

F. FACEBOOK API :

L’implémentation de Facebook API permet aux utilisateurs de créer un compte instantanément en

regroupant les informations nécessaires à la création de leur compte depuis les serveurs Facebook.

Bien que cette opération n’est pas très facile à faire surtout avec la dépendance du web qui implique

avoir une identité virtuelle dans tout site.

Et donc là, Facebook API permet la connexion à notre Site-projet en 1 seul clique.

Et voilà comment ça marche :

G. WEBSOCKETS

WebSocket est un standard du Web dont la spécification est en cours de définition désignant un

protocole réseau1 de la couche application et une interface de programmation du World Wide Web.

Cette spécification permet d'ouvrir une connexion bi-directionnelle permanente entre un client et un

serveur, afin de résoudre certains problèmes posés par le caractère unidirectionnel et déconnecté du

protocole HTTP.

Les WebSockets autorisent ainsi le développement de véritables applications temps-réel

performantes telles que des sites d'informations ou de suivi des cours boursiers, ou des applications

multi-utilisateurs (chat, jeux en ligne...).

La spécification permettant d'utiliser les WebSockets est développée par le W3C, tandis que le

protocole de communication est standardisé par l'IETF.

Le Websocket proposera à terme une implémentation native et unifiée dans les navigateurs et

serveurs web d'un canal bidirectionnel permettant :

la notification au client d'un changement d'état du serveur

l'envoi de données en mode « pousser » (méthode Push) du serveur vers le client (sans que

ce dernier ait à effectuer une requête)

H. JSON :

JSON (JavaScript Object Notation) est un format de données textuelles, générique, dérivé de la

notation des objets du langage ECMAScript. Il permet de représenter de l’information structurée

comme le permet XML par exemple.

Un document JSON a pour fonction de représenter de l'information accompagnée d'étiquettes

permettant d'en interpréter les divers éléments, sans restriction aucune sur le nombre de celles-ci.

Un document JSON ne comprend que deux types d'éléments structurels :

des ensembles de paires nom / valeur ;

des listes ordonnées de valeurs.

Ces mêmes éléments représentent trois types de données :

des objets ;

des tableaux ;

des valeurs génériques de type tableau, objet, booléen, nombre, chaîne ou null.

Cet outil a été utilisé afin d’assurer un échange de données aussi fluide que sécurisé entre les

différentes pages du site.

2. CAPTURES DES ECRANS

CONCLUSION GENERALE ET

PERSPECTIVES DE TRAVAIL

La projet traité dans ce rapport représente un atout puissant et moderne qui répond avec brio au

besoins du travail par correspondance, propsant une solution a un besoin réel et concret.

En effet ce projet permet de faciliter toute une tache très rude auparavant qui est la ventes des

services et compétance de soi, en répondant au besoins des entreprise sans aucune liaison physique

ou moral, on se paye sur ce qu’on réalise.

Néanmoins comme chaque travail, celui-là aussi est loin d’être achevé, car bien qu’ on gére les

interactions entre les freelancers et les entreprise, il reste un point cruciale qui est la partie dy

payement des freelancers, afin de remédier à ça on pourrais intégrer PAYPAL API pour gérer les

payements.

BIBLIOGRAPHIE ET WEBOGRAPHIE

Documentation jquerry : http://api.jquery.com/

Documentation ajax : http://api.jquery.com/jquery.ajax/

Documentation AngularJS : http://docs.angularjs.org/

Documentation websocket : http://www.websocket.org/

Documentation facebook API :

https://developers.facebook.com/docs/javascript/reference/FB.api

Documentation JSON : http://www.json.org/

ASP.net : http://msdn.microsoft.com/library/4w3ex9c2.aspx#aspnet_api_reference