STAGE 2EME ANNEE
Durant ce stage, le travail qui m’a été attribué était la création des exports PDF depuis les pages web de l'application Planzone, un logiciel de gestion de projet en ligne développer par Augeo Software. Pour réaliser ce projet j'ai utilisé différents logiciels et outils informatiques (IDEA, putty, TightVNC, Tomcat, JBoss, PrinceXML, Node.js, Notepad++...) et j'ai réalisé plusieurs activités que je vais vous présenter ci-dessous.
Les activités mises en œuvre:
A1.1.1 Analyse du cahier des charges d'un service à produire
A1.1.2 Étude de l'impact de l'intégration d'un service sur le système informatique
A1.1.3 Étude des exigences liées à la qualité attendue d'un service
A1.2.4 Détermination des tests nécessaires à la validation d'un service
A1.3.1 Test d'intégration et d'acceptation d'un service
A1.4.1 Participation à un projet
A1.4.2 Évaluation des indicateurs de suivi d'un projet et justification des écarts
A2.2.2 Suivi et réponse à des demandes d'assistance
A2.3.1 Identification, qualification et évaluation d'un problème
A2.3.2 Proposition d'amélioration d'un service
A3.2.1 Installation et configuration d'éléments d'infrastructure
A3.2.2 Remplacement ou mise à jour d'éléments défectueux ou obsolètes
A4.1.1 Proposition d'une solution applicative
A4.1.5 Prototypage de composants logiciels
A4.1.6 Gestion d'environnements de développement et de test
A4.1.7 Développement, utilisation ou adaptation de composants logiciels
A4.1.8 Réalisation des tests nécessaires à la validation d'éléments adaptés ou développés
A5.2.4 Étude d‘une technologie, d'un composant, d'un outil ou d'une méthode
A1.3.1 Test d'intégration et d'acceptation d'un service
Tout d’abord j’ai dû télécharger et installer les logiciels suivants : Putty et TightVNC sur la machine locale. Puis j'ai parametré les deux logiciels à l'aide de mon tuteur pour avoir l'accès à ma machine virtuelle où je devais effectuer mes changements et mes tests de production.
A1.1.1 Analyse du cahier des charges d'un service à produire
Mes tâches et certains cahiers des charges ont été fournis sur l'application Planzone et à l'oral. Voici le screenshot (cliquez sur l'image pour zoomer) :
A1.1.2 Étude de l'impact de l'intégration d'un service sur le système informatique
Pour réaliser cette activité, j'ai utilisé PrinceXML pour convertir les pages web de l'application en page PDF. PrinceXML ne traitant pas de la même maniere les codes HTML et CSS, j'ai dû verifier et faire des testes d'affichage du export PDF et de l'apercu pour chaque changement de code.
A1.1.3 Étude des exigences liées à la qualité attendue d'un service
Mon tuteur de stage m'a demandé d'appliquer leur nouveau design aux exports PDF et de créer le popup pour l'apercu et l'export PDF. Pour réaliser ce design, j'ai créé le code CSS suivant :
Voici les screenshot du design attendu, de l'ancien design et du résultat :
Pour la création de popup, j'ai utilisé une fonction JavaScript déjà créée par l'entreprise appelée pzDialog (), dans la fonction printPage () que j'ai crée. Je l'ai ensuite utilisée sur le bouton qui permet d'ouvrir l'aperçu d'export PDF. Voici les codes :
Code HTML du button pour l'apercu :
Le code JavaScript de la function printPage () :
Le résultat pour le popup:
J'ai dû créer une fonction JavaScript permettant de détecter le scroll de la vue Planing sur la page principale et de l’appliquer sur l’aperçu et le PDF. Le code JavaScript est le suivant:
A1.2.4 Détermination des tests nécessaires à la validation d'un service
Pour chaque page j'ai réalisé des tests visuels dans l'apercu et dans l'export PDF avec un navigateur pour vérifier si les changements avaient bien été pris en compte et que l'affichage d'export PDF avait bien été mis en place.
A1.4.2 Évaluation des indicateurs de suivi d'un projet et justification des écarts
Pour suivre l'exécution du projet et analyser les écarts entre le temps prévu et le temps consommé du projet et les tâches, j'ai utilisé leur logiciel Planzone. Voici le screenshot :
A2.2.2 Suivi et réponse à des demandes d'assistance
A2.3.1 Identification, qualification et évaluation d'un problème
Un client Planzone a contacté le support, où il a proposé une correction d'un bug d'affichage. Voici sur le screenshot son message:
Mon tuteur m'a proposé de prendre en charge l'incident et d'essayer de trouver une solution pour corriger le bug et répondre à la demande du client. Suite à de nombreuses tentative pour faire passer le titre du projet ou de la tâche à la ligne avec l'aide d'un employé de Planzone qui n'ont pas donné de résultats, nous avons décidé de supprimer les 2 colonnes proposées par le client dans son message.
A2.3.2 Proposition d'amélioration d'un service
J'ai demandé plusieurs fois à corriger des erreurs d'affichage que mon tuteur n'avait pas repérées, puis j'ai lui ai proposé d'enlever les boutons permettant de gérer le contenu de la page web dans l'apercu et le PDF. J'ai ensuite modifiés les liens en liens non-intéractifs ans l'export PDF avec l'accord de mon tuteur. J'ai utilisé les codes suivants :
-
Pour les boutons, j'ai créé un paramètre que j'ai ensuite utilisé dans les tests créés avant chaque bouton. Les codes sont les suivants :
-
Pour rendre les liens dans l'export PDF non intéractifs, j'ai ajouté le code suivant dans le code CSS:
A3.2.1 Installation et configuration d'éléments d'infrastructure
A4.1.1 Proposition d'une solution applicative
A5.2.3 Repérage des compléments de formation ou d'auto-formation utiles à l'acquisition de nouvelles compétences
PrinceXML ne lisant pas toutes les fonction et codes JavaScript pour l'export PDF, j'ai dû faire des recherche sur Node.js. Node.js nous a servi de filtre entre la page avec HTML, CSS, JavaScript et l'export PDF en HTML. Pour installer Node.js sur Ubuntu avec l'accord de mon tuteur, j'ai utilisé les commandes suivantes :
-
sudo apt-get install python-software-properties
-
sudo add-apt-repository ppa:chris-lea/node.js
-
sudo apt-get update
-
sudo apt-get install nodejs
A3.2.2 Remplacement ou mise à jour d'éléments défectueux ou obsolètes
PrinceXML n'étant pas à jour, il ne lisait pas les codes et les fonctions JavaScript. J'ai donc dû installer la dernière version pour pouvoir convertir les pages web en PDF correctement. Pour mettre à jour PrinceXML sur Ubuntu, j'ai utilisé les commandes suivantes :
-
sudo apt-get update
A4.1.5 Prototypage de composants logiciels
A4.1.6 Gestion d'environnements de développement et de test
A4.1.7 Développement, utilisation ou adaptation de composants logiciels
A4.1.8 Réalisation des tests nécessaires à la validation d'éléments adaptés ou développés
Pour réaliser ces activités, j'ai fait des recherches sur des forums pour trouver une solution et faire marcher le JavaScript sur Node.js que PrinceXML n'arrive pas a lire. Puis j'ai fais quelques tests pour vérifier s'il marche, voici quelques forums que j'ai utilisés pour faire les recherches et mes tests :
-
http://mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side.html
-
http://stackoverflow.com/questions/10185903/jsdom-doesnt-process-script-inside-web-page
-
http://stackoverflow.com/questions/9419242/how-do-i-return-a-value-from-a-simple-jsdom-function
En cherchant pourquoi la node.js ne voulait pas lire la function createSVGMatric() de la bibliothèque raphael.js (elle n’est pas supportée par node.js et prince XML), nous avons trouvé dans un article sur http://www.smashingmagazine.com/2014/05/26/love-generating-svg-javascript-move-to-server/ un hack permettant de désactiver la fonction et nous avons testé pour faire en sorte que le hack ne s’applique que quand un PDF est généré.
Le code que nous avons ajouté est : window.Raphael.prototype.renderfix = function(){};
Le test permettant au hack de ne s'appliquer que lorsque le PDF est généré est :
A5.2.4 Étude d‘une technologie, d'un composant, d'un outil ou d'une méthode
Pour réaliser cette activité, j'ai dû comprendre comment PrinceXML marche, et comment l'uitiliser pour faire des exports PDF. J'ai également dû faire des recherche sur la Node.js pour comprendre comment elle marche et comment nous pouvons l'utiliser pour les exports PDF.