[PDF] Rapport de stage Je tiens tout d'abord à

View - Download Rapport de stage

Previous PDF

Next PDF

RemerciementsJe tiens tout d"abord à remercier RENATER pour m"avoir pris en tant que stagiaire pour travailler sur Sympa. Cela a été une véritable opportunité pour moi de contribuer à un projetopen source. Merci à StéphaneCateloinet LaurentGydé, mes deux responsables de stage. Je remercie le département informatique de l"Université de Strasbourg dans la globalité, notamment pour m"avoir accueilli dans leurs locaux, et de m"avoir préparé un bureau dans l"open space. Un grand merci à toutes les personnes de l"open space que j"ai pu côtoyer durant ces quelques semaines, pour toutes les discussions intéressantes que l"on a pu avoir, et pour les pauses de midi où j"ai pu manger et jouer avec certain d"entre eux. Enfin, je tiens particulièrement à remercier MarcChantreux, car c"est grâce à lui que le hackathon fêtant les vingt ans de Sympa a pu être organisé, rassemblant ainsi une partie de la communauté, que je remercie également au passage, durant deux jours afin de discuter du futur du projet, et que mon stage a pu se réaliser. Un immense merci encore à QuentinGliech, pour m"avoir fait découvrir Sympa et pour ses maquettes, sa disponibilité et ses conseils. 1

Table des matières

1 Introduction 2

2 Présentation du logiciel Sympa 4

3 Organisation du stage 6

Présentation de l"entreprise et des lieux de travail . . . . . . . . . . 6 Objectifs du stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Les outils utilisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Le versionning avecgit. . . . . . . . . . . . . . . . . . . . . 7 L"environnement de développement . . . . . . . . . . . . . . . 7 L"intégration continue . . . . . . . . . . . . . . . . . . . . . . 8 VueJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

4 Travail réalisé 9

Intégration de maquettes . . . . . . . . . . . . . . . . . . . . . . . . 9 Documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 JMAP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Apache James . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Emplacement de la documentation . . . . . . . . . . . . . . . 12 Création du client JMAP . . . . . . . . . . . . . . . . . . . . . . . . 13 Le composantDatasources. . . . . . . . . . . . . . . . . . . . . . 13

5 Conclusion 17

6 Bibliographie 18

1

Chapitre 1

IntroductionJ"ai fait le choix de m"orienter en Cursus Master Ingénierie Informatique, Systèmes et Réseaux à l"Université de Strasbourg en partie pour la proximité avec le monde de l"entreprise, avec un certain nombre de stages à effectuer. Cela permet d"acquérir de nombreuses connaissances supplémentaires ainsi qu"une véritable expérience professionnelle, qui ne pourra qu"être bénéfique pour nous aider à nous lancer par la suite sur le marché du travail. Ce stage, qui était facultatif, réalisé du 22 mai au 30 juin 2017 dans le cadre de la deuxième année de CMI permet de confirmer mon orientation dans le monde de l"informatique. Ce rapport de stage a pour but de présenter le travail réalisé tout au long de mes six semaines de stage. Le sujet de mon stage concerne le futur dufront-end1de Sympa, un gestionnaire de listes

électroniques libre.

Ce stage fait suite au hackathon2organisé à l"Université de Strasbourg les deux premiers jours d"avril, à l"occasion des vingt ans de Sympa. C"était l"occasion pour moi de découvrir ce projet, de discuter de son avenir, et de faire connaissance avec la communauté.

C"était également l"occasion de définir les contraintes pour la nouvelle version1. Lefront-endest la partie visible du site pour les différents utilisateurs.

2 . Le mot hackathon désigne un événement où un groupe de développeurs volontaires se réunissent pour faire de la programmation informatique collaborative, sur plusieurs jours.

C"est un processus créatif fréquemment utilisé dans le domaine de l"innovation numérique.

(source : Wikipédia) 2 de Sympa. Pour la partiefront-end: -Utiliser VueJS :avantage du fonctionnement par composants, gestion duroutingassez simple, performances (ne change que ce qui doit être changé), ... -Utiliser leMaterial design3: les utilisateurs sont désormais habi- tués à utiliser ce type d"interface, ils ne seront pas trop dépaysés. De plus se forcer à suivre des règles de design nous assure de ne pas trop diverger et assurer ainsi une certaine cohérence. J"aurais l"occasion de revenir sur ces points dans la suite de ce rapport.3 . Ensemble de règles de design proposées par Google s"appliquant aux interfaces des applications et des logiciels 3

Chapitre 2

Présentation du logiciel SympaFigure2.1 - Logo de SympaSympa (Système de Multi-Postage Automatique) est un gestionnaire de listes

électroniques libre (diffusé sous licence GPL) écrit en Perl développé sous la responsabilité de RENATER. La première version est sortie le premier avril

1997. Il permet d"automatiser les fonctions de gestions des listes telles que

les abonnements, la modération et la gestion des archives, et propose une interface web complète pour gérer les listes. Sympa est utilisé par la grande majorité des établissements d"enseignement supérieur et de recherche français, et est également très largement utilisé dans les milieux académiques internationaux tout comme par de nombreuses organisations (NASA, Unesco,...), des ministères (affaires étrangères, culture, défense, finances,...) et certains hébergeurs. 4 Les sources sont actuellement disponibles sur le dépôt GitHub suivant : https://github.com/sympa-community/sympa.Figure2.2 - Page d"accueil de Sympa Sur la capture d"écran ci-dessus, on peut par exemple voir que l"on peut facilement trouver les listes auxquelles on s"est abonné, créer une liste ou bien en chercher une rapidement. 5

Chapitre 3

Organisation du stage

Présentation de l"entreprise et des lieux de tra- vailJ"ai effectué mon stage chez RENATER. Le groupement d"intérêt public Réseau National de télécommunications pour la Technologie l"Enseignement et la Recherche, créé en 1993, est le réseau informatique français qui relie les différentes universités et les différents centres de recherches entre eux. RENATER propose un certain nombre de services, -réseaux et applicatifs notamment-, dont ce dernier contient Sympa. Cependant, pour des soucis pratiques, j"ai effectué mon stage dans les lo- caux du département informatique de l"Université de Strasbourg, qui étaient organisés sous forme d"open space, ainsi que depuis chez moi de temps en temps. En effet, vu que je travaillais en totale autonomie, cela ne posait pas de problème.

Objectifs du stage

Ma mission principale de mon stage était d"intégrerles maquettes réalisées par Quentin dans le projet, c"est-à-dire réaliser le design de sorte à ce qu"il ressemble le plus possible aux spécifications fournies. 6 Je devais également me renseigner sur le protocole JMAP, le protocole que l"on utilisera par la suite pour exposer les archives des listes de diffusion dans l"interface web.

Les outils utilisés

J"ai choisis de travailler sur mon ordinateur personnel durant ce stage, car j"avais déjà tout le nécessaire qui était en place. J"ai cependant choisis, au cours de mon stage de passer de la distribution Ubuntu à une distribution Debian, dans le but d"assurer la compatibilité de mes travaux avec le plus grand nombre de machines possible.

Je vais présenter ici brièvement les différents outils que j"étais amené à utiliser.

Le versionning avecgit

Versionner son projet est vraiment quelque chose de primordial. Pouvoir revenir en arrière, travailler avec différentes branches, travailler à plusieurs sur un même projet,gitest vraiment l"outil idéal ! Il s"agit du logiciel de gestion de version décentralisé le plus populaire, puisqu"il est utilisé par plus de douze millions de personnes. Lors du hackathon, nous avions créé un dépôtsympa-vuesur GitHub, acces- sible depuishttps://github.com/sympa-community/sympa-vue, c"est sur ce dépôt que j"ai principalement travaillé durant mon stage.

L"environnement de développement

L"environnement de développement tourne dans un environnement NodeJS. Webpackest lebundlerque l"on utilise. Avec l"aide de certains modules, il permet de générer les différentsassetsstatiques, comme le JavaScript et le CSS par exemple. Il est également utilisé pour permettre lehot reload, ce qui nous permet de voir les modifications en direct dufrontlorsque l"on développe. 7 Pour assurer une certaine cohérence dans la manière de coder, lelinter

JavaScriptESLintest utilisé.

Pour utiliser dès maintenant les nouveaux standards JavaScript, notamment l"ECMAScript 2015,Babelest utilisé, ce qui permet detranspiler, ou traduire, le code et le rendre compatible avec les anciens navigateurs ne supportant pas encore ces nouveaux standards.

L"intégration continue

Pour l"intégration continue,Travis CIétait utilisé. Du coup à chaque fois que l"on push quelque chose sur le dépôt, ça va exécuter les tests, et voir si tout fonctionne correctement. Lors d"un push sur la branchemaster, et que les tests réussissent, le code est déployé surhttp://sympa-vue.surge.sh/avec l"aide desurge.sh, dans le but de pouvoir montrer à d"autres personnes de la communauté comment l"interface évolue. Cependant lors d"un grand changement de technologie pour lefront-end, j"ai décidé de travailler sur d"autres branches; une partie de mes modifications ne sont donc pas encore déployées. VueJS VueJS est unframeworkJavaScriptopen source, qui se veut accessible, polyva- lent et performant, qui a été créé pour organiser et simplifier le développement web. Le fait de travailler avec différents composants permet de bien découper la logique, ce qui offre un avantage quant à la lisibilité du code et favorise la réutilisation de ces derniers. La gestion duroutingest plutôt simple, et, concernant les performances, le fait de ne recharger seulement les éléments qui changent en fonction d"un état à un autre est vraiment quelque chose qui offre un gain en termes de confort d"utilisation. C"est donc la raison pour laquelle lors du hackathon nous avions décidés de choisir ceframework. 8

Chapitre 4

Travail réalisé

Intégration de maquettesQuentin me fournissait des maquettes qui montraient à quoi devrait ressembler

les différentes pages de la future interface de Sympa. Je devais donc faire en sorte de créer les différentes pages, de créer les routes vers chacune de ces pages, d"identifier et de créer les différents composants, et faire en sorte que le tout se rapproche le plus possible des maquettes en utilisant VueJS. Lors du hackathon, nous avons décidé d"utiliser leMaterial Design, qui est un concept de design pensé par Google, qui définit certaines règles s"appliquant à l"interface graphique des logiciels et applications. Vu que les utilisateurs ont déjà l"habitude d"utiliser ce style d"interfaces, notamment dans les applications Android ou certains autres sites, l"utilisateur ne sera donc pas perdu et trouvera ses marques assez rapidement sur la nouvelle version de Sympa, qui elle se veut nettement plus accessible que la version actuelle. Au départ on utilisait le projetvue-materialpour construire rapidement notre application VueJS, mais il se trouve, qu"après concertation avec Quentin, qu"il y avait un certain nombre de soucis de performances. Le nombre et la taille de calques lors des rendus dans le navigateur faisait planter l"inspecteur de Google Chrome dans certains cas, ce qui n"était pas très pratique. 9

Figure4.1 - Exemple de maquetteOn a donc fini par changer pourmdl. Développé par Google directement, il

était certain pour le coup que les questions de performances auraient été bien prises en compte, que ce serait donc le remplaçant idéal pourvue-material, et nous auront toujours leMaterial Designque nous souhaitions. Cependant ce changement a nécessité une grande réécriture de code pour ma part, mais cela en valait la peine ! Après quelques jours de travail sur une nouvelle branche sur le dépôt, que j"ai nomméemdlpour l"occasion, j"ai réussi à faire en sorte d"avoir une interface qui ressemble à ce que j"avais auparavant, mais cela a nécessité la création de certains composants ainsi que de nombreuses retouches dans le CSS (=Cascading Style Sheets, feuille de style).10 Figure4.2 - Résultat de la maquette intégrée

Documentation

JMAPLors de mon stage je devais aussi me documenter sur le fonctionnement d"un protocole qui se veut être le successeur d"IMAP, nommé JMAP. J SONMetaApplicationProtocol est un protocole créé dans le but de remplacer IMAP, en se voulant plus simple d"utilisation pour les développeurs, en retournant toutes les réponses sous forme d"objets JSON. Il a été conçu pour utiliser de manière plus efficace les ressources réseau et intègre des fonctionnalités particulièrement intéressantes, comme le mécanisme depush, qui permet de notifier un client du moindre changement (par exemple l"arrivée d"un nouveau mail) pour l"ensemble des répertoires, ce qui n"était pas possible avec IMAP, où on ne pouvait que surveiller un seul répertoire à la fois et nécessitait une connexion persistante. Il se trouve que pour le moment Sympa utiliseMHonArcpour afficher les archives des mails des listes de diffusion depuis l"interface web, mais le remplacer par JMAP offrirait nettement plus de souplesse, puisque ce sera le 11 client qui demandera directement les informations souhaitées; cela permettra une réelle séparation entre leback-endet lefront-endà terme. J"ai donc écrit une petite documentation pour montrer comment s"authentifier avec JMAP, notamment pour les points suivants : - Comment avoir uncontinuationToken? Il s"agit d"un jeton permettant de demander unaccessToken. - Comment avoir unaccessToken? Il s"agit d"un jeton permettant d"effectuer des requêtes, tel que récupérer les boîtes mail disponibles, récupérer les mails, ceux qui ne sont pas encore lus, etc. L"utilisateur est identifié grâce à ce jeton. - Comment récupérer les différentsendpoints? - Comment révoquer un token ?

Apache James

Maintenant que j"avais les informations théoriques nécessaires, j"ai souhaité construire un petit client dans l"interface de Sympa pour mettre en pratique le système d"authentification et essayer de récupérer quelques données. J"avais donc besoin de trouver quelque chose qui puisse être capable de me fournir un endpointsur lequel je pouvais effectuer des requêtes. Ce fût assez difficile à trouver, mais j"ai finis par tomber surApache James. Cependant en suivant les instructions sur leur site, je n"étais pas en mesure de faire fonctionner JMAP, alors que sur leur page d"accueil ils annonçaient pourtant bien un support de ce protocole. J"ai donc décidé de contacter directement les développeurs du projet afin de voir comment faire. Après discussion avec eux, je suis donc parvenu à obtenir ce que je souhaitais, et j"ai donc également choisis de documenter les étapes nécessaires pour montrer les étapes à suivre pour l"installer avec le support de JMAP, comment ajouter un utilisateur, et comment se connecter avec Thunderbird avec cet utilisateur, pour tester le bon fonctionnement de

James.

Emplacement de la documentation

J"ai décidé de publier l"ensemble de la documentation que j"ai ré- digé en langue anglaise sur un dépôt GitHub dont voici le lien : 12

https://github.com/ludovicm67/sympa-internship/tree/master/docs(en anglais); le fichierREADME.mdse trouvant à la racine du dépôt explique

comment les compiler sous forme de pdf avec l"aide depandoc. Dans ce dépôt se trouve également mondiary, document dans lequel j"écrivais ce que je faisais chaque semaine, histoire d"avoir une trace chronologique de mon travail, et faciliter la rédaction de ce rapport, qui lui-même se trouve

également à cet endroit.

Création du client JMAP

J"ai donc créé un client JMAP avec JavaScript dans le but de contacter un serveur mail, pour mes tests il s"agissait d"Apache James que je venais de mettre en place. Tout fonctionne à merveille, la connexion, le listing des différentes boites mails et les indicateurs de mails non lus. J"étais satisfait de mon travail, et je pense qu"il sera fortement utile pour la suite, lorsque l"on pourra directement effectuer une requête sur unendpoint exposé par leback-end, au lieu de passer par Apache James, qui ne m"étais utile que pour tester le bon fonctionnement de mon mini-client.

Le composantDatasources

Comme je le disais avant, avec VueJS on aime bien travailler avec des compo- sants qui peuvent être réutilisables. Avec la communauté de Sympa, on s"est dit qu"il serait intéressant de voir si je pouvais déjà essayer d"intégrer un des composant de la nouvelle interface de Sympa dans la version actuelle, dans le but d"avoir des retours de la part des utilisateurs, pour voir si cela leur convient, et pour les préparer petit à petit à la nouvelle interface. Pour cela il fallait choisir un composant qui n"avait pas besoin de stocker de données et d"interagir beaucoup avec le serveur; le choix s"est donc porté sur composantDatasources. Ce composant permet de choisir rapidement les sources de données pour les listes, par exemple il est possible de diretous les utilisateurs de cette base de données doivent être automatiquement inscrit à telle liste de diffusion. 13 J"ai donc créé dans un premier temps une branchedatasourcesdans la partie front, dans le but d"avancer au maximum sur ce composant dans la nouvelle version de Sympa. Figure4.3 - Le composant Datasources dans la nouvelle interface de Sympa J"ai ensuite créé une nouvelle branche dans le dépôt du logiciel en lui-même, feat-ui-datasources, dans laquelle j"ai fait en sorte d"intégrer le composant VueJS des sources de données dans l"interface actuelle. J"ai donc dans un premier temps dû analyser le code source, pour repérer où se trouvent les fichiers detemplate1, et voir comment est-ce que le tout fonctionnait. J"ai pu voir qu"il s"agissait detemplatesau formattt2, j"ai donc dû me documenter pour trouver comment est-ce que ce langage de template fonctionne, ce qui n"était pas spécialement compliqué. Cependant pour tester ce que je faisais, j"avais besoin de travailler sur une

instance de Sympa basée sur les sources en développement, car les versions1. Un fichier detemplateest un fichier dans lequel on écrit ou génère du code HTML

14 packagées actuellement sur les distributions n"est pas suffisamment à jour pour que je puisse travailler dessus. En effet, les fichiers detemplatesont été complètement retravaillés entre-temps. J"ai eu quelques difficultés à installer Sympa depuis les sources, car je rencontrais certains soucis de dépendances, mais au final j"ai installé en parallèle la version packagée, et fait en sorte de faire pointer le serveur web vers les sources directement, ce qui a parfaitement fonctionné. J"ai donc pu travailler sur les fichiers detemplateset tester directement en local ce que ça donnait. Cependant j"avais un peu de mal à me repérer au départ, car il y a un grand nombre de variables utilisées, et je n"arrivais pas à afficher le contenu de certaines variables pour els inspecter. J"ai donc demandé à la communauté de Sympa depuis le salon IRC, et on m"a dit qu"il était possible d"afficher le contenu des variables en activant un paramètre un peu caché quelque part dans les menus. J"ai donc pu comprendre la logique, et construire le composant des sources de données dans la version actuelle de Sympa, ce qui permet au final à l"utilisateur de beaucoup mieux s"y retrouver, car avant il s"agissait une longue page remplie de champs de formulaires à compléter qui était très longue et très austère, avec des champs de sélections qui contenaient énormément d"éléments; désormais on a un menu qui récapitule les différentes sources disponibles, que l"on peut facilement trouver pour les éditer, la création d"une source de données est également nettement plus agréable. 15 Figure4.4 - Le composant Datasources dans l"interface actuelle de Sympa 16

Chapitre 5

ConclusionCe stage d"une durée de six semaine sur Sympa a bénéfique pour moi. En effet, j"ai pu découvrir le mondeopen sourcegrâce à ce stage. Le fait de travailler avec l"aide d"une communauté est vraiment quelque chose d"intéressant. De plus le travail en autonomie favorise véritablement l"esprit de créativité et les prises d"initiatives. C"était également pour moi l"occasion de me familiariser avec leframework JavaScript VueJS et de me mettre véritablement à l"ECMAScript 2015 ou plus. Pour conclure, je dirais que ce stage m"a donné envie de m"investir davantage dans ce projet, et je pense que je continuerais à travailler dessus de manière occasionnelle voire régulière. 17

Chapitre 6

Bibliographie

- À propos de RENATER : -https://www.renater.fr/(site web de RENATER) -https://fr.wikipedia.org/wiki/RENATER(page Wikipédia de

RENATER)

- À propos de Sympa : -https://www.sympa.org/(site web de Sympa) -https://www.sympa.org/users/custom (liste des utilisateurs de

Sympa)

-https://www.renater.fr/logiciel-sympa (page de présenta- tion de Sympa depuis le site de RENATER) (page Wikipédia de Sympa) - Dépôts GitHub de Sympa sur lesquels j"ai pu travailler : (le dépôt princi- pal) (la branche que j"ai créée pour ajouter le nouveau composant dans la version actuelle) (le dépôt du front-endde la future version de Sympa) (la branche créée pour passer devue-materialàmdl) 18 (la branche créée pour ajouter le composant desDatasources) - Les principales technologies utilisées : -https://www.debian.org(page web de la distribution Linux De- bian) -https://fr.wikipedia.org/wiki/Git(page Wikipédia degit) (page de spécifications de l"ECMAScript 2015) -https://nodejs.org/(site web de NodeJS) -https://vuejs.org/(site web de VueJS) -http://vuematerial.io(site web du projetVue Material) -https://getmdl.io/(site web deMaterial Design Lite) -http://jmap.io/ (site web des spécifications du protocole JMAP) -https://webpack.js.org/(site web de Webpack) -https://eslint.org/ (site web d"ESLint, le linter JavaScript uti- lisé) -https://babeljs.io/(site web de Babel, le transpiler utilisé) -https://travis-ci.org/ (site web de Travis CI, un logiciel d"in- tégration continu utilisé) -http://surge.sh/ (site web de Surge.sh, utilisé pour les déploie- ments surmaster) -https://james.apache.org/ (site web d"Apache James, le serveur mail que j"ai utilisé pour tester JMAP) 19

Table des figures

2.1 Logo de Sympa . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.2 Page d"accueil de Sympa . . . . . . . . . . . . . . . . . . . . . 5

4.1 Exemple de maquette . . . . . . . . . . . . . . . . . . . . . . . 10

4.2 Résultat de la maquette intégrée . . . . . . . . . . . . . . . . . 11

4.3 Le composant Datasources dans la nouvelle interface de Sympa 14

4.4 Le composant Datasources dans l"interface actuelle de Sympa . 16

20quotesdbs_dbs29.pdfusesText_35

[PDF] Rapport de stage - DoYouBuzz

[PDF] rapport de stage evaluation du systeme de prevention-securite a dutag

[PDF] Rapport sur la gestion du personnel 2010 - Adminch

[PDF] Rapport de stage MOUSQUETON Vivien - Theses

[PDF] Rapport Assemblée Générale Ordinaire 1er juin 2017 - UIB

[PDF] Rapport de suivi et d 'évaluation des performances concernant le

[PDF] Rapport de veille technologique - Noratek

[PDF] Rapport de visite - EM Lyon

[PDF] les sanctions disciplinaires - CDG54

[PDF] Rapport financier Analyse financière et suivi de projet - STO

[PDF] RAPPORT FINANCIER EXERCICE CLOS LE 31 - Sherpa

[PDF] Rapport financier annuel - Rougier

[PDF] Des exemples de rations pour minimiser les achats de tourteaux

[PDF] exemple d 'enquête

[PDF] Extraits de Guides pour la Recherche Qualitative - rocare