M1 ILSEN Classique CERI AVIGNON. Rapport. Logiciel de collecte des données sur You tube. Réalisé par : Encadré par : Khaoula EL RHOZLANE

Transcription

1 M1 ILSEN Classique CERI AVIGNON Rapport Logiciel de collecte des données sur You tube Réalisé par : Encadré par : Fatima EL HERNOUSSI Khaoula EL RHOZLANE M. Cédric RICHIER Année universitaire : 2013/2014

2 Table des matières I Gestion du projet : Rappel du sujet Répartition des tâches Second semestre Planning Diagramme de Gantt... 3 II Descriptif de l application Vue d ensemble Barre de recherche Recherche Choix de langue Diagramme... 9 III Technologies utilisées IV Les difficultés rencontrées CONCLUSION... 12

3 I Gestion du projet : 1 Rappel du sujet Notre projet porte sur la réalisation d une interface web dynamique de type «front end»qui permet d utiliser et d exploiter des données récoltées sur You Tube par un crawler développée par le LIA et stockées dans une base de données non relationnelle (Mongodb).Autrement dit, cette interface permet à l utilisateur de consulter le contenu de cette dernière et d en extraire de l information. L application proposera un moteur de recherche et des méthodes de présentation de données statiques. Les utilisateurs, qui sont, en grande partie, des chercheurs travaillant sur une architecture collaborative faisant partie d un même consortium, pourront effectuer cette exploitation d information avec facilité sans entrer dans les détails du crawler ni de la base de données. 2 Répartition des tâches Toutes les tâches étaient faites par tous les membres du groupe : El hernoussi Fatima et El rhozlane Khaoula : Réalisation du site : développement et mise à jour. Documentation. Analyse du problème. Conception du projet. Réalisation de la maquette. Réalisation d une première version statique de l interface. Réalisation de l interface dynamique. Développement. Rédaction des comptes-rendus. 1

4 3 Second semestre Durant le premier semestre, il s agissait d une analyse du problème, comprendre le fonctionnement du crawler et de la base de données Mongodb que nous n avons jamais utilisé ainsi que de réaliser un cahier des charges. Le deuxième semestre porte sur la réalisation de cette application et normalement le projet doit être fait par trois personnes mais comme imprévu le troisième membre du groupe a abandonné donc, nous étions obligés de redistribuer les tâches à nouveau. Bien sûr cela a occasionné un contre temps, et il a alourdi la charge du travail de chacun. Cela n a pas influencé sur notre travail, c est au contraire, c était un défi pour nous, nous étions très motivées pour atteindre l objectif du projet. 4 Planning Première réunion : 17/02/2014 C était la première réunion du second semestre avec notre tuteur M. Richier, nous avons fait un résumé de ce qui a été réalisé lors du premier semestre ainsi que nous avons discuté de la deuxième phase du projet. Deuxième réunion : 25/02/2014 Réalisation d une première maquette qui devait présenter les exigences demandées dans l application. Troisième réunion : 07/03/2014 Nous avons refait la maquette en tenant compte des remarques faites par notre tuteur qui répond plus aux exigences demandées. Quatrième réunion : 21/03/2014 Présentation de Template statique que nous avons effectué avec du HTML/CSS et javascript. Discussion sur les différentes fonctionnalités de l application. 2

5 Cinquième réunion : 04/04/2014 Présentation d une version finale du Template et de ce que va contenir comme fonctionnalités. Réalisation d un exemple statique d un graphe en courbe (âge en fonction du nombre de vue). Début de la phase du développement. Sixième réunion : 16/05/2014 Résolution d un problème rencontré lors de la configuration du Mongodb dans le serveur Wamp pour le test. Explication du code source de l application et modification des erreurs. 5 Diagramme de Gantt 3

6 II Descriptif de l application 1 Vue d ensemble Nous avons choisit une interface tres simple, qui porte comme nom «OurTube». Cette image represente la premiere page de notre application.elle affiche toutes les informations des vidéos récentes qui sont stockées dans notre base de données mongodb. Si l'utilisateur désire voir la vidéo, nous avons proposé un lien qui va le rediriger vers Youtube. L utilisateur peut trier les informations affichées, soit popularité, de plus anciennes au plus récentes ou l inverse. 4

7 2 Barre de recherche A partie de cette barre de recherche, l utilisateur peut effectuer sa recherche dans la base de données en introduisant un mot clé donné. En cliquant sur la première icone, il peut faire une recherche à partir des différents critères proposés. La deuxième icône affiche les informations des vidéos les plus regardées par les utilisateurs. 3 Recherche Quand on clique sur la loupe, nous avons proposé des filtres catégorie, âge et popularité (nombre de vues) afin de permettre à l utilisateur d affiner sa recherche. L application propose à l utilisateur de choisir une des catégories proposées : Gaming/ Music /People&Blogs /Education/ Entertainment. 5

8 Nous avons laissé le choix aux utilisateurs de ne pas choisir le filtre en premier lieu (c est-à dire que l utilisateur peut ne pas choisir l âge, la popularité ou la catégorie). Dans l image ci-dessus, l utilisateur a choisi le filtre âge et popularité. Dans cet exemple, l utilisateur veut afficher les informations des vidéos qui ont l âge entre 7 et 15 mois, le nombre de vues entre 100 et 1000 sans choisir de catégorie. Voici le résultat qui va obtenir : Le résultat est affiché aléatoirement. Dans ce cas l utilisateur peut trier les informations obtenues. 6

9 Dans l exemple ci-dessus, l utilisateur a choisi de trier par popularité (les plus regardées). L image ci-dessus représente le résultat de sa recherche effectuée. 4 Choix de langue L interface s affiche par défaut en français, l utilisateur peut choisir la langue désirée (Français ou Anglais). 7

10 L image ci-dessus représente l interface en langue française. L image ci-dessus représente l interface en langue anglaise. 8

11 4 Diagramme Nous avons ajouté une rubrique «Choix graphique» pour permettre à l utilisateur d afficher le résultat de sa recherche sous forme de graphes (courbe ou bâton). L image ci-dessus est un exemple de graphe en bâton qui représente le nombre de vue en fonction des mois. 9

12 L image ci-dessus est un exemple de graphe en courbe qui représente le nombre de vue en fonction des mois. III Technologies utilisées Nous avons utilisé comme outils de travail DreamWeaverCS5 éditeurs HTML de type «tel affichage, tel résultat». Nous avons utilisé comme langages de programmation : HTML Ajax JavaScript CSS PHP 10

13 IV Les difficultés rencontrées Comme nous avons déjà cité, l absence du 3éme membre du groupe n a pas influencé sur l avancement du travail, au contraire il nous a encouragé et motivé pour atteindre notre objectif. Ceci dit, pour avoir un bon résultat, nous avons augmenté le temps du travail. Aussi nous avons rencontré des difficultés au niveau de la partie dynamique du projet, celles de l optimisation des requêtes PHP dans Mongodb. C était un défi pour nous, nous avons fait plus d efforts, nous avons essayé de faire plus de recherches avancées et lire des documentations, ce qui nous a aidés à avancer sur le projet. Lors de la réalisation de ce projet, nous avons eu des difficultés au niveau de la configuration de mongodb dans le wamp server. 11

14 CONCLUSION Ce projet nous a permis d avoir une idée plus claire sur la conception de ce genre de sites web, et nous a aidé à approfondir nos connaissances en ce qui concerne les langages de développement web que ce soit html, JavaScript ou PHP. Nous avons par ailleurs appris à faire une application avec une véritable réflexion préalable et une modélisation qui nous a permis de mieux gérer notre avancement et de réussir à implémenter les fonctionnalités attendues grâce aux capacités de chacun des membres, qu'elles soient techniques, de gestion ou fonctionnelles. En fin nous avons pu dépasser toutes les difficultés rencontrées durant tout le semestre pour avoir en fin de compte un bon résultat. 12