Développement d’un réseau social professionnel Projet de technologies du web Développement d’un réseau social professionnel Cette année en projet de WEB dans le cadre de la licence informatique, il nous à été demandé de réaliser un réseau social professionel incluant quelques spécificités novatrices. 5 Parties dans l'exposé. 3ème année de Licence Informatique UFR Sciences et Techniques Dijon Année 2009-2010

Plan 1) Présentation du projet 2) Présentation du produit 3) Organisation Cette présentation est composée de quatre parties. Tout d’abord nous présenterons très généralement le projet ainsi que son contexte. Nous présenterons ensuite une rapide synthèse du cahier des charges. Nous aborderons ensuite le sujet de l’organisation. Ensuite, nous expliciterons le travail effectué lors de la phase de conception et de développement. Enfin nous conclurons rapidement en présentant les apports de ce projet. 4) Conception et développement 5) Conclusion

Présentation du projet

Mise en place d'un outil innovant : cartographie 3D Création d'un réseau social professionnel Buts de l'étudiant: Trouver du travail, des projets, différents contrats ou stages Buts de l'entreprise: Subvenir à ses besoins humains pour ses projets Mise en place d'un outil innovant : cartographie 3D Création d'un réseau social professionel 2 points de vue : Etudiants et Entreprises. But de l'etudiant: Trouver du travail, des projets, différents contrats ou stages But de l'entreprise: Subvenir à ses besoins humains pour ses projets Mise au point d'un outil innovant : Cartographie -> permet une visualisation rapide et claire des informations Nous avons utilisés les connaissances acquises lors des cours de programmation WEB Rappel du sujet

Donner aux étudiants la possibilité de promouvoir leurs compétences via leurs CV Donner aux entreprises la possibilité de trouver des personnes compétentes Offrir une plateforme permettant de stimuler la sphère professionnel des inscrits Donner aux étudiants la possibilité de promouvoir leurs compétences via leurs CV Donner aux entreprises la possibilité de trouver des personnes compétentes. -> Elargir son réseau professionel (pour les 2) Objectifs du projet

Présentation du produit

Utilisateur: S’inscrire Consulter un projet Rechercher une personne Etudiant: Créer son CV en ligne Ajouter des contacts Gérer son profil Entreprise: Créer sa page de présentation Créer un projet Rechercher des jeunes diplômés Fonctionnalités

Aucun ne dispose d’un outil cartographique 3D Viadeo Dtalent Xing Aucun ne dispose d’un outil cartographique 3D Comparaison avec l'existant

Basée sur la technologie JavaScript Cartographie 3D Basée sur la technologie JavaScript Carrousel Visualisation rapide des informations Système de recherche avancée Cartographie (Moteur 3D basé sur la technologie Javascript) Carousel en page d'accueil qui permet une visualisation rapide des informations. (Fraiche)(JQuery) Système de recherche avancé permettant un filtrage des personnes du site très fin. Atouts majeurs

Organisation Cette présentation est composée de quatre parties. Tout d’abord nous présenterons très généralement le projet ainsi que son contexte. Nous présenterons ensuite une rapide synthèse du cahier des charges. Nous aborderons ensuite le sujet de l’organisation. Ensuite, nous expliciterons le travail effectué lors de la phase de conception et de développement. Enfin nous conclurons rapidement en présentant les apports de ce projet.

Notre équipe

Dynamisme de l'équipe permettant de combler les retards Méconnaissance des technologies ne permettant pas de chiffrer le temps de travail Problèmes humains 1semaine retard interface + 1sem developpement + 1 sem BDD Dynamisme de l'équipe permettant de combler les retards Planning prévisionnel et effectif

Conception et développement

Equipe composée de quatre membres Mise en place de la base de données du site Création du modèle relationnel Construction de la base de données Création de requêtes SQL -Conception de la BDD à l'aide d'UML -Mise en ligne de la BDD Bases de données

Equipe composée de six membres Mise en place de l’interface du site Travaux sur l’ergonomie Réflexion autour des interactions avec l’utilisateur Mise en place de la charte graphique Interface

Outils de retouche d'images XHTML/CSS3 Javascript Design du site Boutons + développement du squelette du site Carousel -Charte graphique/Maquette globale ==> Explication des choix graphiques -Developpement du caroussel -Maqette des pages à l'attention de l'équipe DEV -Développement d'une ébauche de cartographie -Production logo/bannière en parallèlle -Outils de retouche d'images Photoshop, photofiltre Utilisation de ces outils pour produire le design du site ==> Maquettes -XHTML/CSS3 Utilisation de CSS3 pour les boutons du site Développement du site à l'aide de XHTML/CSS -Javascript (JQuery) Utilisation pour le caroussel situé sur la page d'accueil Utilisation d'une large palette de technos Interface

Répondre aux besoins de l’utilisateur Equipe composée de six membres Mise en place de la partie métier du site Implémentation des liens entre l’interface et la base de données -L'équipe de développement se compose de six développeurs. -Notre tâche a été de mettre en place toute la partie métier en implémentant les liens entre l'interface et la base de données afin de répondre aux besoins de l'utilisateur. Répondre aux besoins de l’utilisateur Développement

Rédaction du cahier des charges Auto-formation Conception Développement du site Développement de la cartographie Dès le début du projet, j’ai établi un planning afin de parvenir à maitriser au mieux le facteur temps et le facteur humain. 5 tâches ont été dégagé. Je vais vous maintenant vous les présenter. Développement

Rédaction du cahier des charges Etude de l’existant Formalisation des objectifs Description des fonctionnalités proposées Gestion du temps et des ressources humaines Etude de l’existant: Avant de commencer un projet, il est important de partir en quête de projets similaires. En effet, il est regrettable et coûteux de se lancer dans un projet proposant des fonctionnalités qui inondent déjà « le marché ». Nous avons donc réalisé une étude de l’existant afin de s’assurer que la création de notre site était vraiment une entreprise viable. Nous avons axé nos « recherches » sur trois critères: -Le site réalise t’il une séparation entre entreprise et chercheurs d’emplois? -Le site dispose t’il d’un système de recherches poussés? -Le site dispose t’il d’une cartographie? Si oui, en 3D? Formalisation des objectifs: Nous nous sommes ensuite intéressé aux objectifs de notre projet. Nous avons pour cela dégagé deux points de vue, les attentes des entreprises vis-à-vis de notre projet et les attentes des chercheurs d’emplois. Description des fonctionnalités proposées: A partir de la liste des objectifs, il nous a été possible d’établir la liste des fonctionnalités que devrait proposer notre site. Gestion du temps et des ressources humaines: Grâce à la liste des fonctionnalités, nous avons pu obtenir une quantité très approximative du travail à effectuer pour chaque équipe. Cela nous a permis de fixer le nombre de personnes pour chacune des équipes. Grâce à la liste des fonctionnalités, nous avons pu également fixé les plannings prévisionnels présentés précédemment. Développement

Auto-formation Développement Modèle Vue Contrôleur Lisibilité du code Modularité du code Programmation Orienté Objet Simplification du développement PHP Data Objects Abstraction de l’accès aux données Sécurité Protection des données Protection de l’outil de travail Optimisation Réduction des temps d’attente Amélioration de la navigabilité Présentation des sujets des tutoriels par leur rédacteur Optimisation: Malgré que cet aspect puisse être considéré comme un « bonus », nous avons tout de même souhaité nous intéresser aux techniques d’optimisation. Nous nous sommes notamment documenté sur la notion de cache qui permet de garder des pages en mémoire afin d’éviter des calculs trop fréquents. Malgré cela, nous n’avons pu utiliser ces nouvelles connaissances lors de l’implémentation. Toutefois, la rédaction de ce tutoriel a tout de même été enrichissant pour notre équipe. Développement

Définition exhaustive de l'ensemble des fonctionnalités Conception: Etape 1 Définition exhaustive de l'ensemble des fonctionnalités Il s’agit ici d’expliciter la totalité des fonctionnalités du site en devenir. Nous avons eu recours au diagramme UML de cas d’utilisation pour cela. Une dizaine de diagramme ont été produit afin de caractériser les fonctionnalités pour les différents acteurs: visiteur non inscrit, etudiant connecté, entreprise connecté… Présentation d’un diagramme. Diagramme de cas d’utilisation Développement

Explicitation de la structure des pages du site Conception: Etape 2 Explicitation de la structure des pages du site Grâce aux diagrammes de cas d’utilisation, nous avons pu dresser la liste des pages du site. Nous avons ensuite, pour chacune d’entre elle, créer une maquette permettant d’obtenir une idée précise de la page finale. Cette étape de la conception a été effectuée en collaboration avec l’équipe interface. Nous avons dans un premier temps produit des maquettes au format image puis l’équipe interface a ensuite codé ces dernières à l’aide des langages HTML/CSS et Javascript. Développement

Définition de l'architecture de l’implémentation du pattern MVC Conception: Etape 3 Définition de l'architecture de l’implémentation du pattern MVC Grâce aux maquettes, nous avons pu obtenir une vision relativement complète de notre site. Toutefois, étant donné que nous avions choisi d’utiliser le pattern MVC afin de profiter des avantages présentés plus haut, il nous a paru important de schématiser la structure de notre site en terme de « fichiers ». Présentation du diagramme: sur ce diagramme, on retrouve les trois parties du pattern MVC à savoir les modèles, les vues et les contrôleurs. L’utilisateur se situe à gauche du diagramme. Ce dernier navigue dans le site en passant par le contrôleur frontal. En fonction des requêtes émises par l’utilisateur, ce contrôleur dispatche les requêtes parmi les back contrôleurs. Ces derniers sont chargés d’afficher les données et de faire appel au fonction du modèle adéquat pour satisfaire la requête de l’utilisateur. Les vues permettent d’afficher les données. Enfin, la partie modèle sera explicité dans la diapo suivante à l’aide d’un diagramme de classes. On notera la présence d’un module d’accès aux données permettant d’accèder à la base de données depuis les modèles. Modèle MVC Développement

Définition du modèle mémoire du système Conception: Etape 4 Définition du modèle mémoire du système Concepts variés: Etudiant Entreprise Projet Compétences … Je vais maintenant présenter la dernière étape de la conception. Il s’agissait là de définir le modèle mémoire (Voir schéma MVC) de notre site. Nous avons utilisé le diagramme de classes UML pour mener à bien cette tâche. On retrouve sur ce diagramme de nombreux concepts comme les étudiants, les entreprises ou encore les projets… Présentation rapide du diagramme de classes Diagramme de classes Développement

Développement du site Développement MyProNetwork Gestion des membres Outils de communication Gestion des informations personnelles Système de recherche Dans un premier temps, toute l’équipe a participé au développement afin de mettre en place la base du site (Notamment l’architecture MVC). Par la suite, une partie de notre équipe a poursuivi le développement du site à proprement parlé tandis qu’une autre équipe a entamé le développement des outils cartographiques. Le développement du site a été divisé en plusieurs parties afin de permettre la répartition du travail entre les membres. Une première partie concernait le développement de la gestion des membres. Cela comprend notamment le développement du module d’inscription permettant à un étudiant ou à une entreprise de s’inscrire sur le site mais également la gestion de la connexion/deconnexion au site. Cette partie a été réalisée par Raphaël Defraire et moi-même. Une deuxième partie concernait le développement des outils de recherche (Hors cartographie). Il s’agit notamment du développement des formulaires de recherche avancées permettant de filtrer de manière très fine les utilisateurs du site selon nos besoins. Le site dispose également d’un outil de recherche plus simple permettant de rechercher du contenu dans le site. Cette partie a été réalisée par Benjamin Harbelot. Une troisième partie concernait les outils de communication et d’échange. Il s’agit notamment de la gestion de la messagerie des membres (Possibilité d’envoyer des messages privés) ainsi que la possibilité de tenir un carnet de contacts. Cette partie du site a été réalisée par Jean François Bruel et Dylan Wilfart. Enfin, une dernière partie concernait l’affichage et la modification des informations personnelles des membres. Il s’agit notamment du développement du module de gestion de profil offert aux utilisateurs. Ce dernier permet notamment à un utilisateur de modifier les compétences de son CV ou encore d’ajouter une nouvelle formation. Les entreprises peuvent quant à elle ajouter de nouveaux projets par ce biais. Un outil d’affichage du profil a également été développé. Il permet d’obtenir rapidement et en un seul coup d’œil les informations pertinentes concernant une personne. On peut par exemple connaître rapidement le niveau d’un membre dans un langage de programmation X. Cette partie a été développé par Jeremie Viteau. Une démonstration sera faite après cette présentation pour illustrer tout ceci. Développement

Développement de la cartographie Affichage des membres d’un projet Navigation simple et intuitive Visualisation rapide de son équipe Affichage des profils pertinents pour un poste Connaître le niveau de pertinence d’un profil Affichage sur plusieurs niveaux Recherche efficace et ciblé Cartographie= service réservé aux entreprises. Premier type de cartographie: Affichage des membres d’un projet. On obtient alors la liste des membres participant au projet répartis sur un cercle qu’il est possible de bouger en 3D. Cela permet d’accèder rapidement au membre. Deuxième type de cartographie: Affichage des profils pertinents pour un poste. On obtient alors la liste des membres ayant des compétences en rapport avec les profils rechercher par le projet de l’entrepreneur. Ces membres sont triés par pertinence. Deux technologies ont été utilisées pour développer l’outil cartographie: Javascript pour le moteur 3D et PHP pour l’implémentation des algorithmes de recherche et de tris des membres. Pour terminer avec l’équipe développement, le planning a été globalement respecté. Malgré quelques retards en milieu de projet, notre équipe a su rattraper cela avant le terme du projet et donc rendre le site opérationnel dans les temps. Ce projet nous a permis de consolider et d’approfondir les notions vues en cours (PHP, HTML, CSS) mais également de découvrir de nouvelles technologies tel que Javascript. Développement

Conclusion Apports humains Consolidation des connaissances acquises dans le module Web Découverte de technologies novatrices Participation à un projet du début à la fin Apports techniques Apprentissage du travail en équipe Expérience des techniques d'organisation et gestion d'une équipe Expérience supplémentaire au niveau des échanges humains Conclusion

Avez-vous des questions ? MVC…quoi? Non Oui C’est déjà le matin??