REALISATION D’UN RESEAU SOCIAL D’ECHANGES DE COMPETENCES ENTRE DEVELOPPEURS

 

Rapport de stage de fin de licence :

Informatique et science du numérique / développement d’application & e-services

Présenté par :

Ouattara Datouloba Ben Aziz

DEDICACES

Je dédie ce travail à mes chers parents, qui m’ont fortement soutenu durant toute ma vie et tout projet que j’ai voulu réalisé.

Tous mes sentiments de reconnaissances, d’amour et de fierté pour eux, que dieu, le tout puissant, leur procure santé et bonheur durant toute leur vie.

A mes très chères et mes frères, pour leur soutien moral et leur aide.

Je leur souhaite tout le bonheur et la réussite dans leur vie.

A mes ami(e)s, qui n’ont pas cessé un instant à me soutenir et m’encourager,
pour pouvoir avancer.

Et enfin, à tous ceux et celles qui m’ont aidé à la réalisation de ce projet.

Remerciements

Je remercie en premier lieu DIEU, le tout puissant, qui m’a doté d’une santé morale et physique ainsi que le courage et la force pour pouvoir accomplir ce travail.

Je tiens à remercier particulièrement mon cher encadrant, en l’occurrence Mr. Kragbe Laurka Mathieu pour son encadrement, ces précieux conseils, sa patience et sa générosité.

Je remercie également tous mes enseignant(e)s de l’UVCI qui m’ont formé
tout le long de mon parcours de licence.

Je n’oublie pas bien sûr, tous ceux qui m’ont aidé de près ou de loin à réaliser
ce travail.

Et enfin un particulier remerciement à tous les membres de ma famille, ainsi que mes ami(e)s et collègues pour leur soutien et encouragement.

Table des matières

INTRODUCTION

Contexte de travail

1.Présentation de la structure d’accueil 6

2.Etude de l’existant 6

Conception

1.Description de la méthode. 8

     a. Spécification des exigences : les cas d’utilisations

     b. Analyse des tables. 9

     c. La conception fonctionnelle. 10

2.Les techniques utilisées. 12

     a. Les règles de nommage et de codage. 12

     b. La conception graphique. 12

     c. Accessibilité des navigateurs. 12

     d. Le système de navigation. 12

     e. Apparence du site. 14

     f. Les langages et Templates utilisés. 15

Realisation

1.Interfaces et fonctionnement du site. 17

     a.La barre de navigation. 17

     b. La page d’accueil 18

     c. La page d’inscription. 19

     d. La page de connexion. 20

     e. La page de profil 21

2. Les difficultés rencontrées. 22

     a.      Les difficultés rencontrées. 22

     b.      Les enseignements tirés. 22

CONCLUSION

Liste des abreviations

C

CSS : Cascading Style

H
HTML : hyperText Markup Language

J
JS : JavaScript

P
PHP : Hypertext Preprocessor

U
UVCI : Université Virtuelle de Cote D’Ivoire

INTRODUCTION

La tendance actuelle du web, dans l'évolution technologique comme dans l'évolution sociale représente une avancée dans ses utilisations.

 Illustré par le terme "Web 2.0", les sites de réseaux sociaux, aussi appelés "social networking", sont des exemples parmi ces évolutions sociales. Ils permettent de connecter des internautes selon leurs centres d'intérêt afin de partager des flux d'informations, tels que des vidéos (Youtube), des photos (Flickr), de la musique (Last.fm) et d'agrandir leurs réseaux d'amis ou de faire partie de communautés. Ces exemples montrent l'ampleur que prend ce phénomène, aussi bien pour les loisirs, que pour des fins professionnels (LinkedIn).

 Nous avons donc choisi pour notre projet, de réaliser notre propre réseau social d'échanges de compétence entre développeurs en s'appuyant sur des grands sites web comme github , twitter et d'autres qui représentent le web 2.0 par leurs technologies utilisées.

 Ainsi l'objectif est de développer un site Internet de réseau social pour les développeurs, en mettant à leurs dispositions des outils de base pour échanger des informations, des idées, et partager des centres d'intérêts.

Pour mener à bien ce projet, nous avons tout d'abord listé et analysé les exigences requises, afin d’obtenir une expression précise des besoins. Cette analyse a permis de développer plus efficacement les différentes fonctionnalités. Ensuite, nous avons effectué des tests dans le but de comparer les exigences attendues aux résultats obtenus et d'améliorer ces derniers. Et enfin, nous avons procédé à un bilan de notre projet.

Contexte de travail

1.Présentation de la structure d’accueil

En 2015, l’université virtuelle de côte d’ivoire voit le jour. L’université virtuelle de côte d’ivoire (UVCI) est une université publique d’enseignements a distance exerçant particulièrement dans le domaine du numérique qui adopte le régime linguistique français avec à sa tête le professeur Tiemoman Kone.

Elle accueil en 2016 sa première génération d’étudiant en filaire d’informatique et science du numérique avec quatre spécialités :

·         ⎻Développement d’application et e-services (DAS),

·         ⎻Réseaux et sécurité informatique(RSI),

·         ⎻Bases de Données(BD),

·         ⎻MultiMedia et art numérique(MMX).

Aujourd’hui elle crée encore deux (2) spécialités que sont :

·         ⎻E-commerce et marketing digital(CMD),

·         ⎻Communication digital(COM).

L’université virtuelle de côte d’ivoire fonctionne selon le système LMD, donc elle accueille les étudiants de la licence au doctorat.

2.Etude de l’existant

Une bonne compréhension de l’environnement de communication aide à déterminer la portée du projet d’implémentation d’une solution d’intercommunication dans notre université.

Il est important d’voir des informations pertinentes sur les systèmes de communication de l’Université Virtuelle de côte d’ivoire.

En effet, ces informations affectent une grande partie des décisions que nous allons prendre dans le déploiement de la solution de communication.

Il s’agira donc pour nous de rassembler les informations relatives à l’organisation de l’existant.

Dans le but de faciliter la communication interne (administration-étudiant professeur-étudiant et étudiant-étudiant) plusieurs moyens sont mis en place.

•       Le mail

Cette méthode est surtout utilisée pour diffuser les informations aux personnes composants l’université (professeurs, tuteurs, étudiants etc…). Mais la communication par mail rencontre un problème de synchronisation.

•        Hangouts

Permet de communique en interne de façon synchrone ou asynchrone facilitant ainsi la communication et l’apprentissage. Mais Hangouts n’est pas adéquat pour le partage de fichiers multimédias et des codes informatiques.

•        Les forums

Les forums de discussions sont un excellent moyen de communication qui permettent aux étudiants de discuter selon des thématiques bien précise. Grâce aux conseils des autres membres, un forum de discussion peut vous aider dans vos choix et surtout, à résoudre un problème personnel.

Mais les forums sont beaucoup asynchrones et les questions sont souvent répété vue le nombre d’pulsateurs qui posent les mêmes questions.

Contenue des limites de tous ces moyens de communications nous avons mis en place un nouveau moyen de communications synchrone permettant de partager quasiment tous les fichiers multimédias.

Conception

1.Description de la méthode

Pour notre projet, nous utiliserons la methode merise en vue de définir les aspects techniques, la prise en compte des nouvelles architectures d'applications et la prise en compte des nouvelles interfaces.

a. Spécification des exigences : les cas d’utilisations

Nous allons répondre aux questions suivantes : Quels sont les utilisateurs du système ? Quelles sont leurs interactions avec celui-ci ? Il faut donc identifier les différents acteurs ainsi que les cas d’utilisation c’est-à-dire les différentes fonctionnalités du système.
Les acteurs pour le site CodeBook sont les suivants :
• L’internaute / l'invité : personne qui n’est pas membre du site et qui souhaite le devenir.
• Le webmaster : rôle des personnes qui ont en charge la maintenance du site Web.
• Le membre : personne qui possède un compte, qui peut rechercher des membres, fait partie de communautés, possède des amis...
Les principaux cas d’utilisation des acteurs précédemment identifiés, ont été bien mis en évidence dans la partie précédente. Voici donc le diagramme de cas d’utilisation.

Figure 1: Diagramme d'utilisation

Remarque : par la suite, le webmaster ne sera plus pris en compte.
L’annexe A décrit de façon détaillée les cas d’utilisation précédemment identifié, dans le but d’obtenir une expression précise des besoins. Pour chaque cas d’utilisation, on trouvera les différentes interactions entre les utilisateurs et le système, les scénarios des cas d’utilisation ainsi que les alternatives ou erreurs que peut rencontrer le système, dans le but de connaître les différentes étapes à développer pour chaque fonctionnalité.

b. Analyse des tables

Dans cette partie, nous étudierons les entités statiques du système. Ceci est illustré par le schema suivant :

c. La conception fonctionnelle

•       La structure du site

Le site web est basé sur une structure que l'on appelle structure hiérarchisée. Il s'agit d'une structure découpée en blocs d'informations, ou de fonctionnalités, reliés à un même nœud.
La page d'authentification fait office de nœud principal qui donne racine à diverses fonctionnalités une fois authentifier.
Ces fonctionnalités sont présentes dans 3 barres d'outils regroupées par thèmes:
-fonctionnalités d’un membre
-fonctionnalités d’un membre face à ses amis
- fonctionnalités d’un membre dans ses communautés.

Nous avons donc choisi ce type de schéma d'organisation puisqu'il s'adapte facilement à nos objectifs, qui sont d'une part, une facilité de navigation pour l'utilisateur en se familiarisant très rapidement à ce schéma, et d'autre part une organisation soignée de nos informations et fonctionnalités.

·         La structure des pages

Toutes les pages de notre site ont une même structure.

Les éléments changeants entre les différentes pages sont le contenu, ainsi que la barre d’outils. On reviendra sur cela lors de la conception graphique.

Le site s'organise d'un conteneur principal, l'index. L'index est présent continuellement pendant la navigation puisqu'il affiche toutes les autres pages du site. C’est lui qui se charge d’afficher les deux bannières, mais aussi de changer la zone de contenu.

2.Les techniques utilisées

 a. Les règles de nommage et de codage

Nous devons respecter certaines règles de nommage et de codage que nous nous sommes définis.
Elles permettront une compréhension plus rapide du code par les différents membres du groupe.

b. La conception graphique

L’ergonomie est un point important. Son objectif principal est de faciliter l’utilisation du site par les utilisateurs. Pour cela, nous nous imposerons certaines contraintes :

c. Accessibilité des navigateurs

Notre site doit être fonctionnel sous les navigateurs les plus utilisés, c’est-à-dire : Firefox, Google Chrome et Internet Explorer. Les différentes fonctionnalités développées devront donc être testées sur les deux navigateurs.

d. Le système de navigation

La navigation doit être simple, même pour les usagers débutants. Il est donc indispensable que l’apprentissage du site ne demande pas des efforts à l’utilisateur. L’utilisation de menu qui répertorie les principales fonctionnalités permet à l‘utilisateur de minimiser son effort mental.
La barre de fichiers, qui est un menu horizontal statique est donc composé de :

Ø  Page d’accueil

Ø  Inviter

Ø  Partage

Ø  Recherche

Ø  Déconnexion

·            Barre de fichiers.

La barre d’outils quant à elle changera selon la navigation de l’utilisateur. C'est-à-dire selon s’il se trouve sur une page qui le concerne, ou une page qui concerne un ami ou un autre membre, ou une page relative à ses communautés.
Ainsi lorsqu’il navigue que des pages le concernant, la barre d‘outils sera composé des onglets suivant :

Ø  Accueil : page d’accueil

Ø  Messages : sa messagerie

Ø  Profil : sa description

·         Barre d’outils : utilisateur.

Lorsque l’utilisateur navigue sur une page d’un autre membre ou ami, la barre d’outils sera composée des onglets :

- home : le profil de l’ami / du membre

- message : envoie d’un message à l’ami / membre

- ajouter ami : si l’utilisateur souhaite demander à ce membre d’être son ami.

·         Barre d’outils : ami / autre membre.

Lorsque l’utilisateur navigue sur une page relative aux communautés, la barre d’outil sera composée des onglets suivants :

Ø  Accueil : le profil de la communauté

Ø  Ajouter communauté : si l’utilisateur souhaite s’inscrire dans une communauté

Ø   Inviter communauté : inviter des membres dans une communauté

Ø  Quitter communauté.

e. Apparence du site

·         La charte graphique

Afin de donner à l’utilisateur des repères au sein du site et de faciliter sa visite, il doit y avoir une cohérence entre chaque page. La charte graphique détermine les différentes règles graphiques et ergonomiques.

Elle contient :

ü  Les dimensions des pages

ü  Les couleurs à employer (le texte, les liens, les liens actifs, les boutons…)

ü   Les styles à employer (famille, taille…)

ü  Les types d’images…

·         Choix des couleurs

Pour réaliser l’image du nom « CodeBook », nous avons cherché les tendances actuelles. Il en a découlé qu’une image avec des formes rondes avec des couleurs bleu et orange correspondait le mieux, mais le choix était encore assez vaste pour la création.

Une fois l’image intégrée sur le fond, il fallait trouvé quelque chose permettant de la faire ressortir de la bannière : une lueur blanche extérieure au logo correspondait parfaitement.
Les bannières et l’image du nom « CodeBook » réalisées et approuvées par les autres membres du groupe, il a donc fallu s’adapter aux couleurs utilisées pour choisir une palette de couleur pour le site.

Une fois cette couleur défini (#6699FF) nous avons utilisés le logiciel Color Scheme afin de connaître les couleurs qui s’harmonisent le plus avec celle-ci. D’après un accord de quatre tons de couleur, nous avons choisi l’orange et le vert. D’autant plus que l’orange a pour caractère psychologique la sociabilité et le fait d’être ouvert, et le vert représente les loisirs, la détente.

·         Contenu

Chaque page doit avoir un titre propre permettant à l’utilisateur de savoir sans réfléchir dans quelle section du site il se trouve.

Les phrases simples et les textes courts sont privilégiés car cela favorise une lecture rapide pour
l’utilisateur.

 f. Les langages et Templates utilisés

    Ø  HTML5 

Nous avons utilisé le HTML5 pour la création et manipulation de nos pages web.

    Ø  CSS

Afin de manipuler la présentation, nous avons utilisé des feuilles de style CSS. Voici les raisons :

D’une part, il permet d’alléger le code source écrit en HTML, puisque tout ce qui est relatif à la présentation est géré dans un fichier séparé. Ce qui entraîne donc un chargement plus rapide des pages, qui est après manipulé par la feuille de style. Et d’autre part, il permet de nous retrouver plus facilement dans notre code et ainsi facilite les modifications à effectuer, puisqu’au lieu d’avoir à modifier toutes les pages unes à unes, nous avons juste à modifier le fichier CSS.

    Ø  PHP

Pour le coté serveur, nous avons choisi le langage PHP, ceci pour plusieurs raisons :

Tout d’abord, le PHP gère très bien les requêtes SQL. Ce qui est important pour manipuler les

résultats de requêtes SQL. Mais aussi, le PHP possède beaucoup de fonctions utiles telle que la cryptologie…

Enfin, le PHP est un des langages coté serveur le plus utilisé, il existe une grande communauté

d’utilisateurs de PHP.

Exemples d’utilisation :

    ü  Cryptage de mot de passe

    ü   Traitement des différents formulaires

    ü   Utilisation de variables de session

    Ø  SQL

L'association PHP/MySQL est de plus en plus utilisée ces dernières années. C'est pourquoi nous

avons choisi le serveur de base de données MySQL qui offre de grandes performances en flexibilité et montée en charge. Il intègre de nombreuses fonctionnalités et assure une bonne sécurité des données.

    Ø  AJAX

Nous avons intégré à notre projet la méthode développement AJAX dans plusieurs de nos modules.

En effet, nous l'utilisons en grande partie pour ses requêtes asynchrone qui nous permettent de faire et de manipuler les requêtes au serveur sans déranger la page de l'utilisateur.

Exemple d’utilisation :

    ü  Chargement des listes d'amis et communautés dans les pages home

    ü   Recherche des utilisateurs

    ü  Module de messagerie

    Ø  JAVASCRIPT

Pour afficher et interagir dynamiquement avec la page de l'utilisateur grâce au JavaScript.

Exemple d’utilisation :

    ü  Affichage dynamique des emails reçus

    ü  Affichage dynamique du formulaire de réponse à un mail en ayant cliqué préalablement sur un bouton

Nous marrions plusieurs langages pour plusieurs raisons : leurs performances, leurs standardisations

et leurs portabilité face à une multitude de langages.

    Ø  Bootstrap

Grace à ce Framework de twitter, nous avons la possibilité de créer, styliser rapidement les pages de notre réseau social.

    Ø  Gravatar

Cette technologie nous a permis de charger les images de profiles de nos utilisateurs.

    Ø  Parseley.js

Ce Template nous permis de traiter nos formulaires de façon plus agréable.

    Ø  Font-awesome

Cette technologie nous a permis de petites images dans notre code afin de rendre la vue encore beau.

Nous avons listé la liste de nos outils :

RÉALISATION

1.Interfaces et fonctionnement du site

De même que la méthode utilisé, l’interface occupe aussi une grande place dans la réalisation de notre réseau social. C’est ainsi que nous avons mis tous les moyens disponibles a notre disposition pour un interface ergonomique, simple d’emploi pour faciliter l’utilisation du site afin que même un débutant puise s’y sentir à son aise.

Nous allons donc présenter les grandes lignes de notre interface.

a.La barre de navigation

La barre de navigation de notre réseau social est très simple et pratique car elle s’adapte à la navigation de l’utilisateur.

Lorsqu’un invité ne s’est pas encore inscrit alors il ne peut avoir accès à :

·         La page d’accueil

·         La page de connexion pour les membres non connecter

·         La page d’inscription qui permettra aux invités d’avoir un compte.

Comme l’illustre par la figure suivante :

Figure 1:Barre de navigation pour invité

Lorsqu’un membre est connecté alors il a accès à :

·           La page d’accueil

·           La page de profil

·           La page déconnexion

Comme l’illustre par la figure suivante : 

 

Figure 2:Barre de navigation pour membre

b.    La page d’accueil

C’est la page principale de notre site car c’est elle qui est chargé de présenter, d’attirer et de convaincre les internautes à nous rejoindre.

 

Figure 3:La page d'accueil

c. La page d’inscription

Cette page contient le formulaire à remplir afin de pouvoir acquérir un compte et de rejoindre notre communauté.

Figure 4:la page d'inscription

d.  La page de connexion

C’est cette page qui permet a un membre de s’authentifier afin d’accéder a sa page de profil.

En effet cette authentification va permettre aux utilisateurs de pouvoir bénéficier de tous les services proposer par notre réseau social.

Figure 5:Page de connexion

e.  La page de profil

Ici, le membre de voir, ajouter et modifier ses informations. C’est sur cette page que sera répertorier les ami

2. Les difficultés rencontrées

a.    Les difficultés rencontrées

Lors de la phase d’analyse toutes les fonctionnalités fondamentales n’ont pas pu être réaliser. Cela due à un délai de réalisation trop court nous n’avons pas pu concevoir entièrement notre social. En effet, nous avons environ deux (2) mois pour la réalisation et la conception qui n’ont pas pu suffire pour la réalisation entière du projet.

A part me problème lié au temps impartir, nous n’avons pas pu test tester certaines fonctionnalités du a l’absence d’un serveur. Car en effet la fonctionnalité de mail d’activation n’a pu être tester car nous n’avons pas mis notre site en ligne.

b.    Les enseignements tirés

Dans la réalisation de notre tâche nous avons rencontré de nombreux problèmes, mais ces problèmes nous ont permis de plus apprendre et d’en tire des leçons.

En effet, ce projet nous à permis de nous perfectionner avec les langages de programmations tels que :

•        PHP
•        HTML
•        CSS
•        JS

Ainsi nous avons compris que la modélisation est la partie la plus importante de la conception d’un site web. Ensuite nous avons appris à structurer notre réseau social car nous nous rendu compte que la structuration est aussi très importante dans la réalisation.

Suite a la complexité de réaliser un site d’A-Z nous nous sommes familiariser avec des Framework comme :

•         Boostrap
•         Parseley.js
•         Font-awesome

En sommes ce stage nous a permis d’apprendre et de se parfaire dans le domaine de la programmation.

Conclusion

Au terme de notre projet, nous avons compris qu’il est beaucoup plus complexe que prévu. Il  nous a permis de mettre en relation plusieurs enseignements.

Tout d’abord, ce projet nous a permis d'appliquer les connaissances que nous avons acquises durant notre licence, telles que la programmation, la modélisation et les gestions de  projet.
Ce projet nous a permis de renforcer ses connaissances.

A travers des méthodes de travail et des outils, ce projet nous a permis de nous immerger dans un univers professionnel, il est vrai qu’aller au bout de son projet et respecter un cahier des charges rendent un projet intéressant et professionnel mais il y a aussi toutes les démarches qui ne sont pas visibles et qui rendent enrichissante une telle expérience .
Le projet nous apporte donc une idée sur l’organisation dans le monde professionnel et qui
permettra de nous adapter plus facilement lors de notre stage.

En termes de perspectives de notre projet de recherche, notre projet gagnerait à être mise en
pratique dans notre université, voire dans d’autres. Il faut aussi s’assurer que les universités, dans lesquelles serait mis en place ce réseau social, bénéficient d’une connexion Internet fiable.
L’université hôte du réseau social devra aussi procéder à des bilans périodiques pour actualiser les différents besoins. Notre sujet pourrait être élargi vers une mise en place d’un réseau social
interuniversitaire, c'est-à-dire entre une ou plusieurs universités afin de représenter une plus grande diversité et d’améliorer l’expérience d’apprentissage.

Références

wikipedia.com

uvci.edu.ci

lesteachersdunet.com

YouTube.com/les teachers du net