COMFAST. Gestionnaire de communication

Transcription

1 COMFAST 2015 Gestionnaire de communication Rapport de stage FINES Guillaume COMBARI Christophe 29/06/2015

2 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. ~ 1 ~

3 Table des matières I. Introduction... 3 II. L entreprise Présentation Fonctionnement... 5 III. Contexte du stage Contexte matériel Contexte Logiciel... 6 IV. Activités réalisées Projet du stage Analyse des besoins Outils nécessaires à la réalisation 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 d) Module de communication V. Conclusion VI. Annexes ~ 2 ~

4 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. ~ 3 ~

5 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. ~ 4 ~

6 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. ~ 5 ~

7 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. ~ 6 ~

8 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. ~ 7 ~

9 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. ~ 8 ~

10 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). ~ 9 ~

11 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 databinding 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. ~ 10 ~

12 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 ~ 11 ~

13 Annexe 2 : Ng-view Index.html : ~ 12 ~