Rapport de stage Développement Web – Teoola

Réalisé par

Mathis GOICHON

Enseignant référent

Alain MARIE-JEANNE

Maitre de stage

Benjamin ARNAUDET

Pour l’obtention du diplôme universitaire et technologique

Année universitaire 2019 – 2020

27 avril 2020 – 19 juin 2020

II

III

Sommaire 1. PRESENTATION DE L’ENTREPRISE .................................................................................... 2

1.1. Création et évolution de l’entreprise .......................................................................................... 2

1.2. Activités .................................................................................................................................... 2

1.3. Marché et clients ....................................................................................................................... 3

1.4. Equipe de développement et partenaires ................................................................................... 3

1.5. Organisation et fonctionnement ................................................................................................. 3

2. REFONTE DE LA VISIONNEUSE DE MAGAZINE .............................................................. 5

2.1. Cahier des charges ..................................................................................................................... 5 2.1.1. Analyse du sujet et de son contexte ................................................................................................................ 5 2.1.2. Analyse des besoins fonctionnels .................................................................................................................... 5 2.1.3. Analyse des besoins non fonctionnels ............................................................................................................. 6

2.2. Rapport technique ..................................................................................................................... 7 2.2.1. Conception ....................................................................................................................................................... 7 2.2.2. Réalisation ....................................................................................................................................................... 9

2.3. Validation, résultats et perspectives ........................................................................................... 9 2.3.1. Résultats et intégration ................................................................................................................................... 9 2.3.2. Perspectives d’évolutions .............................................................................................................................. 10

IV

Table des figures Figure 1 : Diagramme de Cas d'utilisations, visionneuse de magazines .............................................. 6

Figure 2: Diagramme de Classe, visionneuse de magazines ................................................................ 7

Figure 3: Code Mail, visionneuse de magazines .................................................................................. 8

V

Glossaire E

entity Cela représente une entreprise. Toutes les variables PHP où apparaissent $entity sont donc des extractions de toutes

les données connues sur l'entreprise. ....................................................................................................................... 9

M

mailjet Il s’agit d’un service d'envoi d'email qui sert notamment aux entreprises pour envoyer des emails marketing ou des

emails transactionnels. ............................................................................................................................................. 9

1

Introduction

Réseaux sociaux, smartphones, web, internet, … Rapidement, chacun s’est approprié ces technologies révolutionnaires de notre siècle. Les moyens de communication sont de plus en plus variés, les distractions de plus en plus grandes, les consommations de plus en plus étendues. C’est pourquoi il est essentiel de garder un contact précieux avec ses clients. La fidélisation est un point-clé pour tout professionnel souhaitant voir son activité perdurer. Les géants du marketing ont très rapidement compris l’enjeu que cela représente et ont lourdement investi pour s’approprier ce monde numérique. Les petits artisans et commerçants se sont alors retrouvés en retrait, faute de moyens ou de connaissances.

Pour faire face à ce problème, la technologie a également permis de développer de nouveaux outils afin de faciliter l’accès à celle-ci. Nous pouvons notamment citer les CMS, qui permettent de réaliser simplement des sites web, les ERP, qui facilitent largement les systèmes de gestion, ou encore les CRM, qui donnent aux entreprises des moyens pour interagir en permanence avec leurs clients. Ces outils sont d’autant plus précieux dans la situation sanitaire actuelle.

C’est dans ce contexte que Teoola a mis en place un outil qui donne, aux petites structures notamment, les moyens de développer une présence numérique. En effet, côté entreprise, elle offre un accès à une application web et mobile permettant d’accéder à tous ses contacts maintenus à jour, de gérer des ressources, des événements, des magazines, des rendez-vous, obtenir des statistiques, … Côté client, une application mobile permet notamment de mettre à jour ses informations, d’avoir un système de carte de fidélité, … Ma mission dans l’entreprise est de travailler sur l’application web professionnelle (Teoola Pro) en fonction des besoins de celle-ci. En effet, les solutions sont développées en suivant les demandes des professionnels.

Après avoir présenté l’entreprise Teoola, je vous présenterai la première mission qui m’a été confier, à savoir la refonte de la visionneuse de magazine. Je présenterais tout d’abord le cahier des charges, puis les spécificités techniques de cette mission, et enfin comment elle a été intégrer dans l’application Teoola Pro.

2

1. Présentation de l’entreprise 1.1. Création et évolution de l’entreprise

L’entreprise Teoola est une SAS qui a été créé le 1er juin 2017 par Charlie Alfredo VARELA DA VEIGA et Benjamin ARNAUDET. Les activités de développement ont cependant débuté bien avant la création de la société. En effet, c’est 3 ans plus tôt, dès juin 2014, que les premières idées sont apparues et les premières lignes de code écrites.

Cela a abouti à la création de moyens d'accès aux services de la société que sont les applications mobiles, le tableau de bord, l'API et le web client. L'ensemble du travail a été réalisé selon les hypothèses de la conception innovante, la démarche principale de conception étant le prototypage.

L'objectif initial du projet visait la recommandation et le bouche à oreille numérique. Au cours de la recherche, le projet s'est orienté vers un carnet d'adresses social et de recommandations, couplé à des outils destinés aux professionnels souhaitant gérer une communauté de clients avec leur smartphone. A ce jour, les fonctionnalités !teoola, Teoola Pro et l'API Contacts sont opérationnelles.

1.2. Activités

Comme dit précédemment, Teoola propose de multiples solutions permettant aux professionnels d’être au maximum en contact avec leurs clients.

Il y a tout d’abord le tableau de bord pour les professionnels. Celui-ci permet de gérer ses fichiers clients, d’envoyer des offres commerciales, avoir le suivi de commandes de ses clients, posséder un système de carte de fidélité, une gestion de site web et de réseaux sociaux, une gestion d’événements, un système de communication. Cette application est facilement personnalisable via un panel Paramètres qui permet de mettre à jour toutes ses informations et choisir ses préférences.

Ensuite, il y a l’application mobile disponible sur l’App Store et sur le Play Store. Celle-ci est disponible aux professionnels comme aux particuliers. Pour les professionnels, il s’agit d’une extension de l’application web et permet donc de réaliser les mêmes choses. Pour les particuliers, l’idée est de suivre tout ce que l’entreprise met à disposition, avoir ses cartes de fidélité, mettre à jour ses informations, rechercher des contacts ou des professionnels.

Enfin, il y a une extension de l’application web qui permet aux professionnels de publier du contenu qui peut être accessible à toute personne non inscrite chez Teoola. Cela sert notamment pour la gestion d’évènement ou la lecture de magazines par exemple, les clients n’ont pas forcément envie de télécharger une application pour avoir accès à ces éléments.

3

1.3. Marché et clients

Toutes les applications de Teoola sont disponibles gratuitement pour un usage limité. Pour les particuliers cela sert notamment à avoir accès à un carnet de contact étendu et faire du bouche-à-oreille numérique. Pour les professionnels on a un usage restreint des fonctionnalités. Cela permet d’inciter plus facilement les professionnels à utiliser les services de Teoola, qui auront naturellement envie de faire évoluer leur offre vers un abonnement mensuel pour un accès total aux applications.

Comme dit précédemment, Teoola s’intéresse aux petites entreprises, artisans et commerçant. Bien que cela soit toujours vrai, le segment client à légèrement évolué et s’oriente également vers des structures plus importante comme les clubs d’entreprises.

1.4. Equipe de développement et partenaires

En ce qui concerne l’équipe de développement, celle-ci est assez réduite. En effet, il y a Benjamin ARNAUDET, mon tuteur, qui possède un DUT Informatique et un autre développeur, Matthew VERGELY. L’entreprise possède globalement plus d’acteurs externes, notamment pour la communication, la gestion des serveurs, … De plus, elle a pour habitude de former régulièrement des stagiaires et alternants en licence professionnelle. Par exemple, en ce moment, il y a un alternant et deux stagiaires, Nicolas BOFI, étudiant à l’IUT Informatique de Montpellier, et moi-même.

Au niveau des partenaires, l’entreprise a la chance d’être soutenue par InnovoSud, un organisme apportant aux jeunes entreprises innovantes un soutien matériel et humain, à commencer par des locaux. Celle-ci est également soutenue par la Domitienne, qui est une communauté des communes du biterrois, ainsi que l’agglomération de Béziers.

1.5. Organisation et fonctionnement

Je vais vous présenter le fonctionnement interne de l’entreprise tel que j’ai pu le percevoir durant mes deux premières semaines de stage. Il y a deux principaux cas de figure :

Soit un professionnel a un besoin spécifique, il l’exprime alors celui-ci à l’entreprise. Ensuite, les développeurs s’occupent de réfléchir à une conception par prototypage. C’est-à-dire qu’ils vont réaliser un prototype des besoins informels du professionnel afin de lui présenter. Toujours de manière informelle ils vont échanger puis reprendre le code précédent, et ceux jusqu’à arriver à un résultat satisfaisant.

Sinon, aucun client n’a de besoins particuliers et Benjamin, qui est le lead développeur, décide d’améliorer les modules, de restructurer et mettre à jour le code. En effet, l’objectif principal de l’entreprise est de faire un code qui fonctionne, les développeurs s’attardent plus tard sur comment il est construit. Tout cela est, comme précédemment, exprimé avec des besoins informels.

4

Ces méthodes de travail sont d’autant plus présentes dans cette période particulière. Étant tous en télétravail, je passe plusieurs heures par jour au téléphone avec Benjamin, mon tuteur. En effet, nous discutons des besoins des professionnels, nous établissons un cahier des charges informel et je commence à coder. Dès que j’ai terminé je le rappelle et nous recommençons le même processus. La méthode de travail ressemble globalement à une méthode agile incrémentale. Si je suis bloqué alors j’appelle Benjamin qui m’aide, prend le temps de m’expliquer sans pour autant me donner la solution afin que j’apprenne de moi-même. J’ai donc été parfaitement et rapidement intégré à l’équipe de développement sans problèmes particuliers.

5

2. Refonte de la visionneuse de magazine La première mission que j’ai eu à faire dans l’entreprise a été de refaire la conception et le développement d’une visionneuse de magazines.

2.1. Cahier des charges

Avant de réaliser la conception et la réalisation de la mission, il faut réaliser un cahier des charges. Pour cela, il convient d’étudier le sujet en réalisant des analyses pour ne pas se lancer dans l’inconnu.

2.1.1. Analyse du sujet et de son contexte La première chose à faire est de consulter l’application déjà existante ainsi que les

applications disponibles sur internet.

Tout d’abord, l’application déjà existante était entièrement à revoir. En effet, celle-ci n’a pas été développé par Teoola mais récupéré sur internet. Il s’agissait d’une intégration JavaScript du code et créait donc une dépendance externe. Dans ce cas le risque est important car si le code original venait à être supprimé, l’application ne fonctionne plus. Par ailleurs, il n’était pas du tout adapté à un usage mobile, point très négatif donc.

Ensuite, en ce qui concerne l’analyse de l’existant, je me suis appuyé sur le site web Calaméo [1] qui est une plateforme proposant de multiples magazines. La visionneuse est très efficace, charge rapidement mais, à mon sens, n’est pas suffisamment fluide et intuitive. Les clics souris se transforment en zoom s’ils ne sont pas suffisamment sur les bords, ce qui n’est pas du tout agréable. La navigation avec les flèches n’est pas non plus possible. Par ailleurs on peut changer de vue, élément très pratique si on veut plutôt afficher le magazine comme une diapositive, un vrai magazine, voir l’index, …

Enfin, l’application va être intégrée sur la partie « publique » de l’application. C’est-à-dire qu’une personne non-membre de Teoola peut avoir accès au magazine. Pour ce faire celui-ci doit s’identifier à l’aide d’un mail et de son nom et prénom afin de pouvoir compter le nombre de lecteurs et apporter des statiques fiables aux professionnels. Par ailleurs cela envoi un courriel à l’utilisateur et, s’il est membre, envoie une notification sur son téléphone. Ce système est également à revoir entièrement. En effet, la version PHP de ce module est obsolète et plus rien ne fonctionne. De plus, les systèmes de courriel et de notification ont été généraliser et sont désormais beaucoup plus performants.

2.1.2. Analyse des besoins fonctionnels

Cette partie détaille l’ensemble des besoins utilisateurs de manière formelle. Ces besoins sont le résultat de plusieurs discussions téléphoniques avec mon tuteur, Benjamin.

6

Comme dit précédemment, lorsque l’utilisateur veut accéder au magazine, il doit pouvoir s’identifier. Une fois cela fait, il accède alors à la première page du magazine

Figure 1 : Diagramme de Cas d'utilisations, visionneuse de magazines

Après avoir analysé les besoins informels, voici le diagramme de cas d’utilisation obtenu. Plusieurs options de navigation doivent être disponibles : navigation à l’aide des flèches gauche et droite, navigation en cliquant sur des boutons ou alors en renseignant la page souhaitée dans un champ de type texte. Il en va de même pour les fonctionnalités de zoom. L’utilisateur doit pouvoir zoomer avec les flèches haut et bas, des boutons ou via un champ texte. De plus, l’utilisateur doit pouvoir télécharger les pages qui l’intéressent. Enfin, il doit pouvoir connaître la page courante ainsi que le nombre total de pages du magazine.

2.1.3. Analyse des besoins non fonctionnels

Cette partie présente l’ensemble des besoins non fonctionnel, c’est-à-dire les contraintes techniques imposées par l’entreprise.

L’application étant une application web, les langages de programmations sont donc naturellement imposés. Il s’agit du HTML pour la structure de la page, du CSS pour la mise en page,

7

PHP pour accéder aux fichiers côtés serveurs ainsi que JavaScript pour gérer les pages et les événements côté client. Enfin, l’application doit être intégrée à une structure déjà existante et il faut donc respecter les conventions de nommage de celle-ci.

En ce qui concerne les performances, il faut que la visionneuse soit fluide et rapide, il ne faut pas qu’elle soit saturée par de multiples animations de pages ou autres. En outre, les images des pages sont au format JPG, il va donc falloir adapter le code et notamment la résolution des images du magazine. Des images de grande qualité seront longues et couteuses à charger. A contrario, des images de mauvaise qualité ne seront pas lisibles. De plus, il faut qu’elle soit responsive, c’est-à-dire qu’elle s’adapte parfaitement à l’écran de l’utilisateur. En d’autres termes il faut que l’expérience sur mobile soit agréable.

2.2. Rapport technique

Après avoir réalisé une analyse et établis un cahier des charges, le temps est venu pour commencer à travailler sur le projet. Pour cela, il convient tout d’abord de présenter la partie de la conception du projet. Ensuite se présente la conception des fonctionnalités de celui-ci.

2.2.1. Conception Pour la réalisation de la visionneuse en elle-même, c’est le langage JavaScript qui a été

retenue. En effet, c’est un langage orienté objet côté client qui permet de facilement capter et traiter les interactions de l’utilisateur.

Figure 2: Diagramme de Classe, visionneuse de magazines

Comme vous pouvez le voir sur le diagramme ci-dessus, l’application ne possède que deux classes. Il y a un également un troisième script qui s’occupe de la gestion des événements.

Tout d’abord, dans la classe Page il y a trois attributs. Le sprite représente une chaine de caractère menant à l’URL de l’image JPG correspondant à une page du magazine. L’id est également une chaine qui représente l’attribut id de l’image HTML associé. L’attribut width est un entier

8

représentant la largeur de l’image. Cette classe possède trois fonctions. En effet, chaque page sait quelle largeur et hauteur elle doit adopter en fonction du style qu’on lui demande.

Ensuite, il y a la classe Reader. Cette classe est composé d’un tableau de pages, du numéro de la page courante, ainsi que le pourcentage de zoom qui est appliqué à la page. À sa création le Reader s’occupe de créer l’ensemble des pages et de les ajouter dans un tableau. Il est alors simple de parcourir les pages, il suffit de parcourir le tableau et d’interagir sur le code HTML. Il possède de multiples fonctions qui permettent notamment de répondre aux besoins utilisateurs exprimés plus tôt. La méthode view sert à initialiser tout l’affichage au lancement de la visionneuse.

Enfin, il y a un autre fichier appelé Script qui permet de gérer toutes les interactions avec l’utilisateur. En effet, chaque bouton de la page HTML est associé à un événement JavaScript qui déclenche une fonction du Reader. Le principe est que, à chaque interaction, le Reader sait comment positionner ses éléments, et chaque élément sait quelle taille il doit avoir.

En ce qui concerne la partie d’accès au magazine, il n’y a pas de conception particulière étant donné que cela a principalement été une mise à jour de PHP ainsi que l’utilisation de classe où tout est interfacé et prêt à l’emploi.

Figure 3: Code Mail, visionneuse de magazines

Comme vous pouvez le voir sur la figure ci-dessus, l’envoie de courriel à grandement été simplifier grâce à une classe. Le code de celle-ci étant suffisamment commenté, il est simple à utiliser. Il faut définir les éléments principaux d’un courriel comme le destinataire, le sujet, le corps du message, … Ensuite, il faut définir de qui vient le courriel, à qui il faut répondre et la signature. Si l’entity* possède un mail, alors c’est à ce mail que les utilisateurs doivent répondre. De même, si

9

celle-ci à un mailjet*, alors c’est par celui-ci qui le courriel doit transiter. Il faut ensuite ajouter un logo s’il y a lieu et le mail est envoyer par la méthode send().

2.2.2. Réalisation Au niveau de la réalisation, il n’y a pas d’architecture particulière. Toutefois les bonnes pratiques de code tel que le respect des méthodes de programmation en orienté objet ou encore les conditions de nommage par exemple ont été respecté.

Afin de mieux comprendre comment les fichiers coexistent, il est souhaitable de donner une description de la logique. Il est souhaitable d’aller tout d’abord consulter l’annexe afin de bien comprendre. Il faut tout d’abord savoir qu’en amont, du côté professionnel, à la publication du magazine, un lien statique est créé afin de donner l’accès à celui-ci à toute personne en possession du lien. Ce lien correspond à l’index.php. L’utilisateur doit alors rentrer les informations précédemment citées. Le code de register.php, qui a donc été mis à jour, enregistre l’utilisateur dans la base de données afin de pouvoir ajouter les statistiques aux professionnels. Si l’enregistrement à lieu, alors la page magazine.php s’affiche.

Cette page correspond à la visionneuse de magazine. Dès son ouverture, elle va analyser le dossier Files et renvoyer un tableau au format JSON dans une variable javascript. C’est alors tous les fichiers JavaScripts expliqués plus tôt qui vont s’exécuter afin de construire la visionneuse.

2.3. Validation, résultats et perspectives

2.3.1. Résultats et intégration Tous les besoins et spécifications données sont respectés, la visionneuse a été intégrée dans le site en développement et est désormais fonctionnelle. Les tests d’intégrations ont été réalisés avec Benjamin, lead développeur de l’entreprise. Pour ce faire, toujours de manière informelle, plusieurs essais d’accès à différents magazines ont été fait. Des vérifications de mails ainsi que de notifications sur les téléphones ont eu lieu. Des tests de performances ont été fait en limitant la bande passante à une connexion 2G, la visionneuse charge rapidement. Le contrat est donc respecté.

10

2.3.2. Perspectives d’évolutions Une fonctionnalité intéressante mais lourde à développer aurait été la possibilité de changer

de vue de manière dynamique, à l’image de la visionneuse de Calaméo [1]. Cependant, cela aurait induit une bien plus grosse partie de conception et développement. En effet, le patron de conception Stratégie semble parfaitement adapté pour répondre à ce besoin. Une interface Affichage implémenté par chaque stratégie d’affichage aurait permis à la visionneuse d’être parfaitement modulaire. De plus, le choix de ce patron de conception offre la possibilité de très facilement ajouter de nouveaux moyens d’afficher le magazine.

11

Conclusion Mes deux premières semaines de stage ont été très enrichissantes. En effet, j’ai découvert une jeune start-up innovante qui a à cœur de satisfaire les besoins de ses clients. Bien que la situation sanitaire soit exceptionnelle, le télétravail ne m’a pas découragé pour autant. Ma première mission était enrichissante et m’a surtout permis de mieux comprendre l’architecture interne de l’entreprise et des applications. Je suis maintenant familier avec l’ensemble des applications.

Par ailleurs, mon tuteur, Benjamin, a grandement facilité mon intégration dans l’entreprise. En effet, nous nous appelons quotidiennement afin de déterminer le travail à faire, ou alors si j’ai un problème ou que je suis bloqué. Il a le souci de s’assurer que je comprenne bien le travail et m’aide en cas de problème sans me donner la solution pour autant afin que j’apprenne par moi-même. C’est très agréable de travailler dans ces conditions.

Une nouvelle mission a commencé il y a quelques jours mais j’ai préféré ne pas l’intégrer dans ce premier livrable. Celle-ci consiste à réaliser un nouveau module pour les professionnels. Il s’agit de réaliser un gestionnaire de ressources, par exemple des salles informatiques avec des postes de travail. Ce gestionnaire est associé à un planning assez complexe dans la mesure ou on peut aussi bien réserver des salles, comme des sous salles ou encore des postes seuls. Cela implique quelques fonctions récursives qui demandent beaucoup réflexions mais qui n’en sont pas moins intéressantes.

V

Bibliographie

[1] «Calaméo - Publications de documents interactifs en ligne,» [En ligne]. Available: https://fr.calameo.com/. [Accès le 8 Mai 2020].

VI

Annexe Technique Annexe 1 : Arborescence des fichiers de la visionneuse de magazines