P L A T F O R M F R E E L A N C E P R O J E TA S P.

N E T

R A L I S P A R I c h i o u i A y o u b J a d l i T o u k S i k a l N a w f a l Z e r h o u n i S a a d

E N C A D R P A R
M. A B D E L L A HA B O U A B D E L L A H

REMERCIEMENTS
En prambule ce rapport, nous tenons remercier toute lquipe pdagogique de lcole nationale des sciences appliques de Kenitra et les intervenants professionnels responsables de la formation gnie informatique, pour avoir assur la partie thorique de celle-ci. Nous remercions particulirement et tmoignons toute notre reconnaissance Mr. Abdellah ABOUABDELLAH, Professeur de technologies web au sein de lcole nationale des sciences appliques de Kenitra, de nous avoir trs bien appris et instruit le bagage ncessaire, ainsi que pour ses efforts colossales et ses conseils aviss qui nous ont permis de donner naissance ce projet. Cette exprience sera capitale pour notre avenir professionnel. Enfin, Nous tenons adresser notre reconnaissance et notre gratitude toute personne lie de prs ou de loin la ralisation de ce projet.

DEDICACES
On ddie ce modeste travail et notre profonde gratitude nos mres et pres 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 chres frres et surs. A tous nos collgues de la promotion 2015.

RESUME DU TRAVAIL
Le Projet Plateforme Freelance raliser par lquipe constitu de ICHIOUI Ayoub, SIKAL Nawfal, JADLI Toufik et ZERHOUNI sad, reprsente une interface de Freelance, qui est une interface offrant un membre Freelancer de vendre ses services un employeurs entreprise expressant des besoins. La problmatique laquel on essaie de rpondre dans ce projet, est de simplifi et facilit linteraction entre employeurs et employs, pour cela, une interface web semble tre la bonne solution. ainsi on essayera datteindre les objectifs majeur suivants : Demander une authentification pour la connexion au site. !!!!!! Crer une interface Freelancer, donnant la possibilit de visualiser et de postuler pour lensemble des projet proposer. Crer une interface employeurs entreprise permettant de proposer des projets Sassurer de la scurit de lensemble des information dans le site.

Afin datteindre nos objectifs, on a optez pour un ensemble de technologies, bien evidement le ASP.NET qui represente la thmatique sous la quelle se projet sintgre, et pour une meilleurs intractivit avec lutilisateur on utlisera des outiles tel que jquerry, Angular , Websocket, FACEBOOK API et autres. Pour conclure, le projet raliser nous a permis dappliquer les comptances acquise au cours de du module de l ASP.NET et dapprendre de nouvelles technologies afin dassurer une meilleur experience nos utilisateurs et atteindres nos objectifs trace prcedemment.

ABSTRACT
Quand une entreprise a un nouveau besoin, une problmatique rsoudre ou tout simplement un surplus dactivit. Plusieurs solutions soffrent : Recruter un stagiaire Faire appel un intrimaire Embaucher un nouvel employ Avoir recours une agence spcialis

Certaines solutions sont coteuses, certaines sont dpendance ou engagement forc. Donc la solution est de faire appel un freelance. Bien que le freelance est bien rpondu, difficile est la tache de trouver des freelancers qui eux nont pas un endroit prcis, bureau ou place o tre. Do le besoin davoir des plateformes pour la fois, trouver et faire le contact entre lentreprise et le freelancer. Le rsultat de ce projet est alors un site web qui soit une plateforme freelance pour ce dessein.

SOMMAIRE
Introduction gnrale 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 prvisionnelle 3.2 Planification relle Chapitre 2 : Conception et modlisation de la base de donnes 1. 2. 3. 4. Diagramme de cas dutilisation Diagramme dactivit Rgles de gestion et diagramme de classe Modles de donnes

Chapitre 3 : Ralisation 1. Outils de travail 2. Captures des crans et commentaires Conclusion gnrale et perspectives de travail

INTRODUCTION GENERAL
Etudiants en 4eme anne du cycle ingnieur en filire gnie Informatique lEcole Nationale des Sciences Appliques de Kenitra. On prsente dans ce rapport le projet web quon a effectu pendant notre 7eme semestre en technologie web.

Durant ce travail, Il est question pour nous, la cration dune plateforme freelance sous forme de site web ralis par lIDE de Microsoft, Visual Studio. On avait plusieurs thmes pour choisir (un site de vente achat, ,), mais notre choix sest fix sur le freelance, de par le rel 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 quest le freelance, son utilit, son importance etc... Et dans un second temps, tre capable de raliser le projet (la plateforme freelance) pour utiliser les outils et technologies informatiques acquises pendant notre formation, les difficults et les solutions qui se prsentent lors de la ralisation de ce genre de travail.

Llaboration de ce rapport a pour principale source les diffrents enseignements quon a pu acqurir au fil de nos stages par la pratique des diffrentes tches et missions quon 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 thoriques.

CHAPITRE 1: BESOINS FONCTIONNELS ET CONDUITE DE PROJET

1. EXPRESSION DES BESOINS FONCTIONNELS:

A. BETE A CORNE:

La bte corne est un outil danalyse fonctionnelle du besoin. En matire dinnovation, il est tout dabord ncessaire 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 privilgient des solutions dj connues sans analyser concrtement 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 manire structure 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 ds 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 dduire le diagramme "pieuvre", graphique circulaire qui met en vidence les relations entre les diffrents lments de l'environnement du produit. Ces diffrentes relations sont appeles les fonctions de services qui conduisent la satisfaction du besoin. Le diagramme pieuvre (ou APTE) nous permet de rpertorier 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 DUTILISABIL ITE :

Une interface simple et facile utiliser pour le freelancer et les entreprises assurant une certainne fluidit et intractivit dutilisation. D lutilisation de technologies avances, notre siteweb sera compatible avec les dernire version de Google Chrome et Mozilla Firefox, a noter quil sera incompatible avec le navigateur Internet Explorer.

BESOINS DE PERFORMANCE : les performances dexcution du systme :

Configuration Windows requise Configuration Mac requise Configuration Linux requise

Systme d'exploitation

Windows XP Service Pack 2 ou version ultrieure Windows Vista Windows 7 Windows 8

Mac OS X 10.6 ou version ultrieure

Ubuntu 12.04 ou version ultrieure Debian 7++ ou version ultrieure OpenSuSE 12.2+ ou version ultrieure Fedora Linux 17+

Processeur

Intel Pentium 4 ou ultrieur

Intel

Intel Pentium 3 / Athlon 64 ou ultrieur

RAM

128 Mo

Le chargement dune 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 linterface du Freelancer et de lentreprise, Ainsi un Freelancer doit avoit la possibilit dappliqu pour un projet a tout moment tant quil est diponible. Une entreprise doit avoir la possibilit de postuler un projet a tout moment Une entreprise doit avoir la possibilit devaluer le travail effectuer par un freelancer ds lapplication de ce dernier.

BESOINS DE SECURITE:

On a deux niveaux daccs possible, laccs en tant quune entreprise et laccs en tant que Freelancer, chaque accs ncissite une inscription prcedante dans le site, et la prsentation dun mot de passe. Toute information confidentielle fournie par les clients via lInternet sera crypte avec le systme XYZ ou par lalgorithme, la mthode.ABC.. BESOINS MATERIELS : Afin daccder au site, vous devez disposez dun appareil mobile ou un ordinateur avec une connexion internet. BESOINS DE DEPLOIEMENT :

Lapplication sera hbrger dans un nom de domain, afin de la rendre accssible tout les utilisateur, on procdera aprs la publication du site dans les rseaux sociaux en gnral les rseaux sociaux profssionnels plus particulirement.. Tous les logiciels du ct client vont tre tlchargs et installs partir du navigateur, sans que le poste du client ne soit redmarr ou configur manuellement

2. CONDUITE DE PROJET : A. PLANIFICATION PRVISIONNELLE

Lobjectif de la gestion du planning consiste laborer, en prvisionnel, le planning des personnes en termes dhoraire de prsence, dindisponibilit et de nature du travail effectu lors de la prsence, en essayant dassurer au mieux la couverture des charges de travail de chaque entit. Lapplication propose une dfinition des charges de travail de chaque entit en sappuyant sur une description des besoins par lintermdiaire dune notion de postes de travail . Le module Planning multipostes donne ensuite la possibilit de positionner les ressources sur les charges de travail dcrites par les postes.

B.

PLANIFICATION RELLE

CHAPITRE 2: CONCEPTION ET MODELISATION DE LA BASE DE DONNEES

1. DIAGRAMME DE CAS DUTILISATION:

Le diagramme de cas dutilisation reprsente la structure des grandes fonctionnalits ncessaires aux utilisateurs du systme. Un cas dutilisation est une manire spcifie que dutiliser un systme. Les acteurs sont lextrieur du systme ; ils modlisent tout ce qui interagit avec lui. Un cas dutilisation ralise un service de bout en bout, avec un dclenchement, un droulement et une fin, pour lacteur qui linitie.

ROLE DU DIAGRAMME D UTILISATION Donne une vue du systme dans son environnement extrieur. Dnit la relation entre lutilisateur et les lments que le systme met en uvre Est la base du modle UML

2.

DIAGRAMME DACTIVIT

Le diagramme d'activits fait partie des diagrammes peu connus que propose UML. Pourtant, il est trs utile et dispose d'un spectre d'utilisation trs large c'est d'ailleurs le diagramme que j'utilise le plus aprs le diagramme de classes. Il permet de dcrire toutes sortes de processus : des processus industriels, des processus mtier, le droulement d'un cas d'utilisation ou encore un algorithme. Je vous invite donc le dcouvrir travers un exemple quelque peu original... Le diagramme d'activit prsente une vision macroscopique et temporelle du systme modlis : Action Action structure Historique Fusion Dcision

A) DIAGRAMME DACTIVIT FREELANCER:

B) DIAGRAMME DACTIVIT DE LENTREPRISE :

3. REGLES DE GESTION ET DIAGRAMME DE CLASSE

Le diagramme des classes identifie la structure de la classe dun systme, y compris les proprits et les mthodes de chaque classe. Les diverses relations, telles que la relation d'hritage par exemple, qui peuvent exister entre les classes y sont galement reprsentes. Le diagramme des classes est le diagramme le plus largement rpandu dans les spcifications 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 Posedon permettant de produire directement du code source dans les principaux langages informatiques (Java, C++, et de C #, Phyton) partir de ces modles (forward engineering). Ces outils peuvent synchroniser les modles et le code, rduisant votre charge de travail. Ils peuvent galement produire des diagrammes de classes partir du code source orient objet. (Reverse engineering) Pour un modle complexe, plusieurs diagrammes de classes complmentaires doivent tre construits. On peut par exemple se focaliser sur : les classes qui participent un cas d'utilisation (cf. collaboration), les classes associes dans la ralisation d'un scnario prcis, les classes qui composent un paquetage, la structure hirarchique d'un ensemble de classes.

4.

MODLE DE DONNES:

Le modle relationnel est bas sur une organisation des donnes sous forme de tables. La manipulation des donnes se fait selon le concept mathmatique de relation de la thorie des ensembles, c'est--dire l'algbre relationnelle. L'algbre relationnelle a t invente en 1970 par E.F. Codd, le directeur de recherche du centre IBM de San Jos. Elle est constitue d'un ensemble d'oprations formelles sur les relations. Les oprations relationnelles permettent de crer une nouvelle relation (table) partir d'oprations lmentaires sur d'autres tables (par exemple l'union, l'intersection, ou encore la diffrence). La thorie des ensembles met en uvre deux notions : La notion de domaine. la notion de produit cartsien.

o Rgles de gestion :
Il s'agit des fonctionnalits du systme. Ce sont les besoins spcifiant un comportement d'entre / sortie du site :

Un utilisateur peut sincrire comme etant un freelancer Un utilisateur peut sincrire 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 catgorie Une catgories 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 :

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: RALISATION

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 diffrentes, grce au protocole HTTP, permettant d'accder via le rseau des documents reprs par une adresse unique, appele URL. Cette nouvelle version du langage de dveloppement reste dans la ligne du HTML qui a permis la publication des premires pages web, mais introduit un certain nombre de nouveauts qui en font un concurrent srieux au format Flash dvelopp par Adobe. Les spcifications du HTML5, ralises par le W3C ne sont pas encore termines, malgr tout, on note que toute la structure et l'organisation du code ont t revus dans le sens dintroduire de nouvelles manires et faons, pas seulement de crer mais, ainsi quutiliser le web.
B. CSS 3 (CASCADING STYLE SHEETS) :

Le principe des feuilles de style consiste regrouper dans un mme document des caractristiques de mise en forme associes des groupes d'lments. Il suffit de dfinir par un nom un ensemble de dfinitions et de caractristiques 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 crer des sites Web dynamiques, des applications Web ou des Web services XML. La technologie est accessible grce l'installation d'un serveur Web compatible ASP (IIS) ou l'intrieur 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 socit Microsoft. Le C# est, dune certaine manire, le langage de programmation qui reflte le mieux larchitecture Microsoft .NET qui fait fonctionner toutes les applications .NET, et en est par consquent extrmement dpendant. Il a t cr afin que la plate-forme Microsoft .NET soit dote d'un langage permettant d'utiliser toutes ses capacits. Il est trs proche du Java dont il reprend la syntaxe gnrale 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 excut par le navigateur Web du visiteur. Il apporte aux pages Web des fonctionnalits correspondant des besoins spcifiques, et s'il est dsactiv 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'insre dans le code (x)HTML d'une page web, et permet d'en augmenter le spectre des possibilits. Ce langage de POO [Programmation Oriente Objet], faiblement typ, est excut ct client. 1. JQUERY :

jQuery est une bibliothque 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 bibliothque on entend donc un ensemble cohrent de fonctions permettant de saffranchir des tches rbarbatives et rptitives de faon uniforme sur les navigateurs les plus courants.

2.

AJAX :

AJAX (Asynchronous Javascript And XML, traduisez Javascript asynchrone et XML) est une mthode de dveloppement web base sur l'utilisation d'un script Javascript pour effectuer des requtes web l'intrieur d'une page web sans recharger la page. AJAX rend plus interactifs les sites web et offre une meilleure ergonomie ainsi qu'une ractivit amlior en permettant de modifier interactivement une partie de l'interface web seulement. En effet, le modle web traditionnel est bas sur une suite de requtes et de rponses successives, c'est--dire une navigation squentielle de page web en page web. AJAX permet de ne modifier que la partie de la page web qui ncessite d'tre mise jour en crant une requte HTTP locale et en modifiant tout ou partie de la page web en fonction de la requte HTTP rcupre. 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 diffrentes technologies 3. ANGULARJS :

AngularJS est un framework JavaScript open-source, maintenue par Google, qui aide l'excution des applications en une seule page. Son objectif est de doter les applications bases sur un navigateur avec larchitecture modle-vue-contrleur (MVC), offrant ainsi un dveloppement et un dbogage plus facile des applications. LAPI lit tout dabord les balises HTML qui contiennent les attributs personnalises supplmentaires; elle obit ensuite aux valeurs contenues dans ces attributs personnaliss. Les valeurs de ces variables JavaScript peuvent tre rgls manuellement, ou rcupres partir des ressources JSON statiques ou dynamiques.
F. FACEBOOK API :

Limplmentation de Facebook API permet aux utilisateurs de crer un compte instantanment en regroupant les informations ncessaires la cration de leur compte depuis les serveurs Facebook. Bien que cette opration nest pas trs facile faire surtout avec la dpendance 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 spcification est en cours de dfinition dsignant un protocole rseau1 de la couche application et une interface de programmation du World Wide Web. Cette spcification permet d'ouvrir une connexion bi-directionnelle permanente entre un client et un serveur, afin de rsoudre certains problmes poss par le caractre unidirectionnel et dconnect du protocole HTTP. Les WebSockets autorisent ainsi le dveloppement de vritables applications temps-rel performantes telles que des sites d'informations ou de suivi des cours boursiers, ou des applications multi-utilisateurs (chat, jeux en ligne...). La spcification permettant d'utiliser les WebSockets est dveloppe par le W3C, tandis que le protocole de communication est standardis par l'IETF. Le Websocket proposera terme une implmentation native et unifie 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 donnes en mode pousser (mthode Push) du serveur vers le client (sans que ce dernier ait effectuer une requte)

H. JSON :

JSON (JavaScript Object Notation) est un format de donnes textuelles, gnrique, driv de la notation des objets du langage ECMAScript. Il permet de reprsenter de linformation structure comme le permet XML par exemple.

Un document JSON a pour fonction de reprsenter de l'information accompagne d'tiquettes permettant d'en interprter les divers lments, sans restriction aucune sur le nombre de celles-ci. Un document JSON ne comprend que deux types d'lments structurels : des ensembles de paires nom / valeur ; des listes ordonnes de valeurs.

Ces mmes lments reprsentent trois types de donnes : des objets ; des tableaux ; des valeurs gnriques de type tableau, objet, boolen, nombre, chane ou null.

Cet outil a t utilis afin dassurer un change de donnes aussi fluide que scuris entre les diffrentes pages du site.

2.

CAPTURES DES ECRANS

CONCLUSION GENERALE ET PERSPECTIVES DE TRAVAIL

La projet trait dans ce rapport reprsente un atout puissant et moderne qui rpond avec brio au besoins du travail par correspondance, propsant une solution a un besoin rel et concret. En effet ce projet permet de faciliter toute une tache trs rude auparavant qui est la ventes des services et comptance de soi, en rpondant au besoins des entreprise sans aucune liaison physique ou moral, on se paye sur ce quon ralise. Nanmoins comme chaque travail, celui-l aussi est loin dtre achev, car bien qu on gre les interactions entre les freelancers et les entreprise, il reste un point cruciale qui est la partie dy payement des freelancers, afin de remdier a on pourrais intgrer PAYPAL API pour grer 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