2015 COMFAST Gestionnaire de communication · I. Introduction Etudiant en BTS Services ... il nous a fallu recenser tous les composants nécessaires à la réalisation du projet

2015

Rapport de stage

FINES Guillaume

COMBARI Christophe

29/06/2015

COMFAST Gestionnaire de communication

~ 1 ~

Remerciements

Je remercie Monsieur COMBARI de m’avoir accueilli dans son entreprise de business

intelligence (ou Informatique décisionnelle) ainsi que pour la confiance qu’il m’a accordée

lors du projet afin de mettre en pratique mes connaissances, approfondir mes acquis et

découvrir de nouvelles pratiques.

~ 2 ~

Table des matières I. Introduction.................................................................................................................................... 3

II. L’entreprise .................................................................................................................................... 4

1. Présentation ................................................................................................................................ 4

2. Fonctionnement ......................................................................................................................... 5

III. Contexte du stage ....................................................................................................................... 6

1. Contexte matériel ....................................................................................................................... 6

2. Contexte Logiciel ......................................................................................................................... 6

IV. Activités réalisées ....................................................................................................................... 7

1. Projet du stage ............................................................................................................................... 7

2. Analyse des besoins ....................................................................................................................... 7

3. Outils nécessaires à la réalisation.................................................................................................. 7

4. Réalisation de l’application ........................................................................................................... 9

a) Interface Utilisateur-Application ............................................................................................. 9

b) Création de la base de données .............................................................................................. 9

c) Module de connexion ............................................................................................................ 10

d) Module de communication ................................................................................................... 10

V. Conclusion .................................................................................................................................... 10

VI. Annexes ..................................................................................................................................... 11

~ 3 ~

I. Introduction

Etudiant en BTS Services Informatiques aux Organisations (SIO) options Solutions

Logicielles et Applications Métiers (SLAM), j’ai effectué un stage en entreprise afin de

parfaire ma formation.

J’ai pu effectuer ces 5 semaines de stage dans l’entreprise CHRISTOPHE COMBARI,

située à Branoux-les-Taillades, spécialisée dans le domaine de l’informatique

décisionnelle.

L’informatique décisionnelle (en anglais Business Intelligence) est l'informatique à

l'usage des décideurs et des dirigeants d'entreprises. Elle désigne les moyens, les

outils et les méthodes qui permettent de collecter, consolider, modéliser et restituer

les données, matérielles ou immatérielles, d'une entreprise en vue d'offrir une aide à

la décision et de permettre à un décideur d’avoir une vue d’ensemble de l’activité

traitée.

Suite à ce stage, j’ai réalisé un rapport comprenant une présentation de l’entreprise

ainsi qu’un compte-rendu des activités que j’ai réalisées.

~ 4 ~

II. L’entreprise

1. Présentation

La société COMBARI CHRISTOPHE a été créée par Monsieur COMBARI le 19 mai 2009

en tant qu’entreprise individuelle ou auto-entreprise.

Son siège social se situe 2260 route de Lancize à Branoux-les-Taillades dans le

département du Gard (30110).

Elle exerce ses activités dans le domaine de l’informatique décisionnelle et propose

ainsi à ses clients des services variés allant de la programmation aux conseils

informatiques.

Le but de son activité est donc de consolider les informations disponibles au sein des

bases de données de l’entreprise afin qu’elles soient mieux traitées et utilisées

efficacement.

Monsieur COMBARI travaille actuellement en étroite collaboration avec du personnel

du corps médical de Montpellier afin de concevoir un produit permettant la gestion

de données relatives à la médecine. Il travaille notamment avec des experts de la

médecine, des médecins praticiens ainsi qu’avec des étudiants. Le but est de faciliter

l’échange de connaissances afin de simplifier et d’améliorer le travail de chacun.

Par exemple, lorsqu’un médecin praticien va établir une ordonnance, toutes les

données qui lui sont relatives vont être traitées et enregistrées dans une base de

données qui pourra être consultée et commentée par les experts.

De plus, lorsque les avis des médecins praticiens et des experts divergent, il est alors

possible d’interpeller les étudiants et de leur proposer des cas réels afin qu’ils se

renseignent et donnent leur avis.

Ainsi, lorsqu’un médecin praticien devra rédiger une ordonnance similaire, il aura

accès aux commentaires des experts et à toutes les recherches effectuées par les

étudiants sur le sujet.

Ce qui a pour but de faciliter le choix des médecins et permettre l’acquisition de

nouvelles connaissances pour les étudiants.

~ 5 ~

2. Fonctionnement

La plupart du temps, Monsieur COMBARI travaille à domicile pour effectuer un suivi

régulier des produits déjà conçus. Lorsqu’il est appelé pour une mission, il va sur

place afin de pouvoir concevoir les produits ou les services demandés tout en étant

en contact direct avec le client et répondre au mieux à ses attentes.

Une journée de travail se déroule généralement de 9 h à 12 h et de 13 h 30 jusqu’à

19 h mais, étant une entreprise individuelle, il lui arrive de dépasser ces horaires

selon le travail à fournir.

~ 6 ~

III. Contexte du stage

1. Contexte matériel

L’entreprise ne disposant pas de système informatique à proprement parler, il m’a

était possible d’utiliser mon ordinateur personnel. J’ai ainsi pu le raccorder à une

connexion internet afin de pouvoir mettre à jour mon travail sur un serveur FTP

externe.

2. Contexte Logiciel

Dans le cadre de mon stage, j’ai eu à découvrir différents outils que je n’avais pas vu

en cours afin de réaliser mon projet, notamment :

- AngularJS : C’est avec ce Framework JavaScript que j’ai entièrement conçu le

projet.

Framework MVC (Modèle Vue Contrôleur), il adapte et étend le HTML

traditionnel pour servir le contenu dynamique de façon améliorée grâce à un

data-binding bidirectionnel permettant la synchronisation automatique des

modèles et des vues. En conséquence, AngularJS diminue l'importance des

manipulations DOM et améliore la testabilité du code.

Etant un outil libre, il a permis la création de nombreux modules conçus par sa

communauté et disponibles en libre accès.

- NodeJS : Il m’a permis de créer un chat en temps réel afin de mieux

comprendre son fonctionnement, cependant il n’a pas été utilisé dans la

conception du projet final où on lui a préféré le langage PHP afin de gérer les

évènements.

C’est une plateforme logicielle libre et événementielle en JavaScript orientée

vers les applications réseau. Elle utilise la machine virtuelle V8 de Google.

Node.js contient une bibliothèque de serveur HTTP intégrée, ce qui rend

possible de faire tourner un serveur web sans avoir besoin d'un logiciel

externe comme Apache, et permettant de mieux contrôler la façon dont le

serveur web reçoit, analyse et traite les évènements.

- Langage PHP : J’ai dû approfondir mes connaissances sur ce langage afin de

gérer l’interface entre le modèle de données d’AngularJS et le serveur de base

de données.

~ 7 ~

IV. Activités réalisées

1. Projet du stage

Dans le cadre de mon stage, j’ai travaillé en collaboration avec Monsieur COMBARI

lui- même afin de concevoir un produit, que l’on a appelé Comfast, qui permet :

- La mise en commun de plusieurs plateformes de communication telles que

Facebook, messagerie mail ou Skype et d’y intégrer un système de chat.

- La gestion des contacts quelle que soit la plateforme.

- La gestion d’envoi de données avec différent types de stockages (FTP, Cloud,

Local).

Le stage n’ayant duré que 5 semaines, je n’ai pas eu le temps d’achever le projet. J’ai

dû, dans un premier temps, me renseigner sur les utilisations des nouveaux outils. Il

n’est donc qu’en partie fonctionnel.

2. Analyse des besoins

Dans un premier temps, nous avons analysé les principaux produits déjà existants en

termes de communication (Annexe 1).

Ensuite, il nous a fallu recenser tous les composants nécessaires à la réalisation du

projet.

Enfin, nous avons réalisé un schéma de l’architecture technique du projet,

comprenant les interactions entre les différentes parties de l’application.

3. Outils nécessaires à la réalisation

Pour me permettre d’apprendre par moi-même à rechercher des informations et à

utiliser de nouveaux outils, Monsieur COMBARI m’a laissé en autonomie. Afin d ‘en

comprendre le fonctionnement pour pouvoir mettre en pratique ces connaissances

lors de la réalisation finale du projet.

AngularJS

Dans un premier temps, je me suis focalisé sur le Framework AngularJS, afin d’en

saisir la syntaxe et de comprendre le fonctionnement de l’architecture Modèle-Vue-

Contrôleur.

Grâce à la documentation trouvée sur internet et aux différents projets créés par la

communauté de ce Framework, j’ai pu me faire une idée globale de son

fonctionnement notamment en les modifiant ou/et en les testant par moi-même.

~ 8 ~

NodeJS

Au début du projet, nous pensions partir sur un chat en temps réel géré avec un

serveur local sous NodeJS. Cependant après réflexion, cette solution n’a pas été

retenue.

Malgré le fait que dans l’application finale, NodeJs ne sera pas présent, j’ai eu

l’opportunité de pouvoir étudier son fonctionnement à travers l’utilisation et la

modification d’un chat en temps réel.

Ainsi, j’ai pu mieux comprendre comment émettre, recevoir et traiter des

évènements (envoi de message sur le chat, connexion d’un nouvel utilisateur…) avec

NodeJS.

Gestion de tableaux dynamiques

Avec le data-binding bidirectionnel d’AngularJS, le meilleur moyen d’afficher les

données (contacts, messages, groupes..) sur l’interface était d’utiliser des tableaux

dynamiques.

Leur fonctionnement est assez simple :

- Du côté du modèle sont stockées les données du tableau (brutes ou reçues

depuis une base de données)

- Sur la vue, il suffit ensuite d’utiliser la directive ng-repeat d’AngularJS afin de

parcourir les données tableau et d’effectuer telle ou telle action pour chaque

donnée.

Drag and Drop interne/externe

Pour simplifier l’utilisation de l’interface, notamment l’ajout de contact ou la création

de groupes, nous voulions pouvoir le faire via un simple Drag and Drop.

Les recherches à ce sujet m’ont permis de comprendre comment récupérer et traiter

les attributs et les propriétés d’un élément sélectionné.

Bootstrap

Bootstrap est une bibliothèque d’outils utile à la création de sites et d'applications

web. C'est un ensemble qui contient des codes HTML et CSS, des formulaires,

boutons, outils de navigation et autres éléments interactifs.

Après m’être bien renseigné à son sujet en lisant la documentation et en étudiant

quelques exemples, cette bibliothèque m’a été très utile afin de concevoir l’interface

Utilisateur-Application notamment au niveau du style.

~ 9 ~

4. Réalisation de l’application

a) Interface Utilisateur-Application

Avant de commencer à développer l’interface, Monsieur COMBARI et moi-même,

nous nous sommes concertés afin de bien définir les éléments qui devaient s’afficher

et l’endroit précis où ils s’afficheraient.

J’ai ensuite commencé par réaliser l’en-tête et le pied de page de l’application en me

servant de ce que j’avais appris sur le positionnement des éléments avec Bootstrap et

à la gestion de l’affichage des données avec AngularJS.

AngularJS permet aussi, grâce à la directive ng-view (Annexe 2), de charger un

contenu différent en fonction de l’interaction de l’utilisateur tout en restant sur la

même page.

Ainsi après avoir configuré le contrôleur de la page principale afin de gérer

l’implémentation des vues, j’ai pu concevoir les vues qui allaient être affichées selon

l’interaction de l’utilisateur.

J’ai commencé par la vue de connexion qui affiche un formulaire permettant à

l’utilisateur de rentrer ses informations ou de créer un nouveau compte s’il le

souhaite en affichant une vue différente.

La communication avec la base de données n’étant pas encore prête à ce moment-là,

je n’ai pas pu tester la connexion.

Je me suis donc attaqué à la vue qui s’affichera une fois que l’utilisateur aura réussi à

se connecter (home). J’ai beaucoup utilisé Bootstrap afin de placer les éléments de

manière à ce qu’ils concordent avec ce que l’on avait décidé.

Une fois ces trois vues finalisées ainsi que leur contrôleurs (Annexe 3), il me fallait

configurer l’accès à la base de données et la remplir afin de pouvoir tester l’affichage

des composants.

b) Création de la base de données

J’ai créé la base « comfast » et toutes les tables nécessaires à l’application (Annexe 4)

en utilisant EasyPHP et PHPMyAdmin.

De plus, afin de faciliter les requêtes, j’ai créé un Helper qui permet de ne pas avoir à

redéfinir la configuration de la base. Lors d’une requête, seulement le nom et les

paramètres sont nécessaires (Annexe 5).

~ 10 ~

c) Module de connexion

Ce module permet de récupérer et d’envoyer les informations entrées par

l’utilisateur lors de sa connexion ou de son enregistrement.

La vue de connexion étant déjà faite, il m’a donc fallu créer des services JavaScript

permettant de récupérer les données entrées par l’utilisateur lors de sa connexion ou

de son enregistrement (Annexe 6) et de les envoyer vers la base de données afin de

les stocker.

Lorsque l’utilisateur s’enregistre, les données sont directement stockées dans la base

alors que lorsqu’il se connecte, une requête va d’abord déterminer si ses identifiants

sont corrects afin d’afficher la vue adéquate.

d) Module de communication

Ce module permet l’envoi et la récupération de messages envoyés par l’utilisateur à

un contact.

Cependant, par manque de temps, je n’ai pu finaliser que l’envoi de messages.

Ce module implique que l’utilisateur soit connecté et qu’il ait sélectionné un contact.

Le module va ensuite récupérer les données de l’utilisateur, du contact sélectionné,

le contenu ainsi que l’objet du message avec des fonctions JavaScript du contrôleur

pour les transmettre à la base via un script PHP. Elles sont ainsi stockées tout en

créant une « conversation » entre les deux utilisateurs (Annexe 7).

V. Conclusion

Dans l’ensemble, je suis très content du stage et de ce que j’ai pu accomplir, même si

avec plus de temps, j’aurais peut-être pu améliorer le projet.

J’ai beaucoup appris durant ce stage. J’ai pu voir comment utiliser les services en

PHP.

Grâce à AngularJS, j’ai pu étudier l’architecture MVC et me familiariser avec son data-

binding bidirectionnel. Cela qui m’a aussi permis d’apprendre à décomposer mon

programme en plusieurs catégories (vues/contrôleurs/services).

Enfin, grâce à l’aide de monsieur COMBARI et le fait qu’il me laisse semi-autonome,

j’ai pu apprendre de moi-même plutôt qu’en suivant les directives de Monsieur

COMBARI.

~ 11 ~

VI. Annexes

Annexe 1 : Analyse des produits

- Facebook :

Chaque utilisateur à un profil détaillé

Possibilité de créer et gérer des groupes

Concept du « Mur »

- Skype :

Appels audio et vidéo via l’application

Appel à prix réduit

Partage de fichier simple

- Viber :

Synchronisation des contacts avec le téléphone

Appel à prix réduits

Envoi de message via l’application

~ 12 ~

Annexe 2 : Ng-view

Index.html :

~ 13 ~

Annexe 3 : Vues-Contrôleur-Html Login / Register / Home 1/6

Login.html

Login Vue

~ 14 ~


Login Contrôleur

Register HTML

~ 15 ~


Register Vue

Register Contrôleur

~ 16 ~


Accueil HTML

~ 17 ~


Accueil Vue

Accueil Contrôleur 1

~ 18 ~


Accueil Contrôleur 2

~ 19 ~

Annexe 4 : Base de données

~ 20 ~

Annexe 5 : Requête Helper 1/3

Configuration locale et distante

Construct

~ 21 ~

Annexe 5 : Requête Helper 2/3

Select

Insert

~ 22 ~

Annexe 5 : Requête Helper3 /3

CreateView

VerifParams

~ 23 ~

Annexe 6 : Services Connexion 1/2

Service Login

Requête Login

~ 24 ~

Annexe 6 : Services Connexion 2/2

Service Register

Requête Register

~ 25 ~

Annexe 7 : Services Message 1/4

Send Message

~ 26 ~


MessageManager

~ 27 ~


Conversation Manager 1

~ 28 ~


ConversationManager

Documents

2015 COMFAST Gestionnaire de communication · I. Introduction Etudiant en BTS Services ... il nous a fallu recenser tous les composants nécessaires à la réalisation du projet