ETTORI Matteo - Stage 2ème année BTS SIO

ACCUEIL

Période de stage :

Dates : Du Lundi 8 Janvier au Vendredi 23 Février 2018
Durée : 7 semaines

08/01 :
1. Découverte et rencontre de l'entreprise
2. Mise en place de l'environnement de travail
3. Initiation au framework Bootstrap
4. Découverte du logiciel Bootstrap Studio
5. Explication des missions à mettre en œuvre

09/01 :
1. Début des 3 premières missions : les parties graphiques des fiches clients, fournisseurs et articles
2. Élaboration des différentes parties graphiques des premiers formulaires des fiches clients :
  - la recherche
  - l'identification
3. Utilisation du framework Bootstrap et du logiciel Bootstrap Studio pour la réalisation
4. Respect de la mise en forme des anciennes versions des formulaires programmées en langage web classique et d'un cahier des charges précis

10/01 :
1. Finalisation du formulaire d'identification des fiches clients
2. Début d'élaboration des parties graphiques des formulaires des fiches clients suivants :
  - les contacts (et ses 2 modales)
  - la vente
3. Création d'une barre de navigation permettant d'accéder à chaque formulaire

11/01 :
1. Améliorations du code Bootstrap :
  - Retrait de la plupart du code CSS en dur et du code présent dans le fichier "styles.css" pour :
    1. Respecter au mieux les contraintes de Bootstrap
    2. Rendre les formulaires bien plus "responsives" (utilisation des longueurs XS)
2. Finalisation du formulaire des contacts et de ses 2 modales

12/01 :
1. Finalisation du formulaire de la vente et de sa modale de sélection des sociétés de dépannage
2. Amélioration des 2 modales de création d'un interlocuteur du formulaire des contacts :
  - Regroupement en 1 seul modale avec une barre à 2 onglets
  - Simplification des assignations et non-assignations des centres d'intérêt avec une gestion par des checkbox
3. Correction d'une erreur dans le code du formulaire de la vente empêchant une balise "div" fermante d'être généré et d'organiser correctement les lignes et les colonnes par conversion du code généré en "code custom" (code modifiable à la main)

15/01 :
1. Commencement et finalisation des formulaires de la facturation et de la comptabilité et de leurs modales respectives :
  - Facturation : modales de la liste des éléments de facturation à part et de la maintenance des modes d'envoi
  - Comptabilité : modale de la liste des autres RIB
2. Adaptation des boîtes de texte sur la ligne correspondant à l'IBAN dans le formulaire de comptabilité pour chaque taille d'OS (LG, MD, SM et XS) afin d'obtenir une taille d'écriture sans dépassement des textbox : utilisation d'une feuille de style CSS avec un padding des textbox de 1 pixel

16/01 :
1. Présentation du fonctionnement de l'entreprise, du progiciel (ERP) et des logiciels de gestion et d'information utilisés et du principe de fonctionnement général
2. Commencement et finalisation des formulaires suivants : les codes internet, la liste des véhicules, les statistiques, les dépôts externes, les messages clients, les taxes, les tarifs et la logistique
3. Début et achèvement des modales respectives aux formulaires qui en possèdent :
  - Codes internet : la liste de recherche
  - Statistiques : la liste des affectations par groupement et la liste des affectations aux entités/représentants
  - Dépôts externes : la liste des articles à exclure et le paramétrage des dépôts
  - Messages : la maintenance des messages et la liste des documents

17/01 :
1. Début et fin des formulaires suivants : l'EDI, les conventions, la refacturation et le TECCOM
2. Re-structuration des tailles des colonnes de manière à respecter la taille minimale SM de l'application
  - Utilisation de colonnes en taille XS en l'adaptant pour un écran de taille SM

18/01 :
1. Finalisation des derniers formulaires : les catalogues, les autres (informations complémentaires) et les conditions (et sa modale/vue)
2. Achèvement de la re-structuration des tailles des colonnes
3. Début de mise en place des normes applicatives décrites dans le guide IHM

19/01 :
1. Fin de la mise en place des normes applicatives :
  - Ajout des cases au pied de chaque tableau concerné par l'ajout rapide d'une nouvelle ligne de données
  - Ajout de boutons attachés à certaines boîtes de texte afin de pouvoir choisir rapidement une information : dates, calendriers, email...
  - Ajout de texte grisé dans les textbox concernés par les espaces réservés : choix en tapant des lettres comme dans une recherche web
2. Fin provisoire de la mise en œuvre des parties graphiques des formulaires des fiches clients
3. Prise d'informations pour la mise en place des parties graphiques formulaires des fiches fournisseurs

22/01 :
1. Ajout de code CSS aux fiches clients pour :
  - Appliquer les propriétés Flex visant à avoir une barre de défilement intérieure au bloc de contenu qui s'adapte à la hauteur et la largeur de la page web
  - Faire disparaître la barre de défilement par défaut du navigateur
2. Début de mise en place des parties graphiques des formulaire des fiches fournisseurs :
  - Finalisation des premiers formulaires : le formulaire d'informations générales et les contacts
  - Achèvement de la modale du formulaire des contacts pour l'ajout de nouveaux contacts

23/01 :
1. Finalisation des formulaires suivants : les multi-adresses et la comptabilité
2. Présentation des parties graphiques des fiches clients pour d'éventuels remarques ou correctifs à apporter
3. Début des correctifs des fiches clients :
  - Ajout d'une icône de recherche avec un + intérieur sur tous les blocs de texte de recherche
  - Ajout de certaines combobox à la place de certains champs texte
  - Ajout des certains champs spécifiques au Fax sur certains formulaires

24/01 :
1. Fin des correctifs des fiches clients :
  - Élimination de certaines modales d'ajout pour les inclure directement dans les formulaires liés
  - Ajout ou retrait des boutons propres aux lignes des tableaux, notamment les boutons de vue, d'édition, ou bien de suppression selon les tableaux
  - Réorganisation propre à chaque formulaire :
    - Simplification du rendu
    - Changement de certains mots pour + de lisibilité aux clients
    - Etc...
  - Changement des placements de certains blocs
  - Suppression de certains boutons de bloc de texte devenus inutiles
2. Fin de la mise en œuvre des parties graphiques des formulaires des fiches clients
3. Début de traitement du formulaire de contrôle des factures

25/01 :
1. Finalisation du formulaire de contrôle des factures
2. Début et fin du traitement des formulaires suivants : les achats et réapprovisionnement, la classification ABC, les conditions d'achats et l'EDI
3. Implémentation de code programmé en JavaScript :
  - Les formulaires avec des combobox dans lequel on peut écrire dans le bloc de texte (inexistantes en tant que type HTML ou dans Bootstrap Studio) :
    - Afficher la liste des items avec le bouton avec une icône en forme de flèche
  - Formulaire de classification ABC :
    - Afficher ou cacher des blocs spécifique selon le choix opéré dans une listbox
4. Début du traitement du formulaire de connexion du fournisseur

26/01 :
1. Fin du traitement du formulaire de connexion du fournisseur
2. Début et finalisation de l'élaboration des derniers formulaires des fiches fournisseurs :
  - les conventions
  - les commentaires pour commandes express
3. Fin provisoire des formulaires des fiches fournisseurs
4. Début et fin de traitement de la première moitié des formulaires des fiches articles et des modales sur ceux qui en possèdent :
  - l'identification
  - les critères
  - les tarifs
  - le réapprovisionnement
  - les autres informations (infos complémentaires)

29/01 :
1. Finalisation des premiers formulaires et début du traitement du formulaire des stocks et du formulaire des emballages
2. Présentation des parties graphiques des fiches fournisseurs pour d'éventuels correctifs à apporter
3. Début des correctifs des formulaires des fiches fournisseurs :
  - Remplacement de certains blocs de texte par des combobox à partir du code JavaScript déjà implémenté pour les fiches clients
  - Renommage de certains libellés pour + de compréhension

30/01 :
1. Fin des correctifs des formulaires des fiches fournisseurs :
  - Ajout et/ou rectification de l'emplacement de certaines informations et de certains groupes d'informations
  - Remise en forme : regroupement par des tableaux, ajout de certaines infos omises
  - Ajout d'une partie en JS affichant le code opérateur si on sélectionne le radio-button "Oui" pour l'envoi automatique d'une facture
  - Modification du formulaire des conventions pour suivre l'ordre des screens de l'ancienne version, et non celui du tableau démonstratif de la nouvelle version
  - Ajout de bouton pour ajouter une nouvelle ligne de données pour les tableaux et/ou les formulaires sur ceux auxquels il en manque
2. Fin (provisoire) des formulaires des fiches fournisseurs
3. Finalisation des derniers formulaires des fiches articles :
  - les stocks
  - la liste des emballages
  - la liste des taxes
  - la liste des multilangues
4. Fin provisoire des formulaires des fiches articles

31/01 :
1. Présentation du rendu corrigé des formulaires des fiches fournisseurs et du rendu provisoire des formulaires des fiches articles
2. Début des correctifs supplémentaires des fiches fournisseurs :
  - Suppression de certains champs devenus inutiles
  - Changement des types de certains champs
  - Ajout de tableaux supplémentaires pour évincer certaines modales

01/02 :
1. Fin des correctifs supplémentaires des fiches fournisseus :
  - Ajout de certains boutons de modification supplémentaires
  - Alignement des champs finaux de chaque section jusqu'à la fin de la ligne
2. Début et fin des correctifs des fiches articles :
  - Regroupement de certains champs importants dans l'en-tête des formulaires
  - Suppression de certains champs de dates devenus inutiles
  - Condensation de certains champs multiples pour + de lisibilité
  - Replacement de certaines sections et/ou de certains champs
3. Fin des correctifs des fiches fournisseurs et articles

02/02 :
1. Dépôt des formulaires des fiches clients, fournisseurs et articles sur le serveur de l'entreprise pour récupération et tests par les développeurs de tests
2. Fin des 3 premières missions : les parties graphiques des fiches clients, fournisseurs et articles
3. Début d'apprentissage du framework Ember.js : suivi du tutoriel "quick-start" disponible en ligne :
  - Mise en place de l'environnement de travail
  - Installation de npm, de Node.js et de Ember
  - Création d'un projet de test
  - Lancement d'un serveur local d'adresse par défaut 127.0.0.1:4200
  - Installation des packages requis :
    1. ember-bootstrap
    2. ember-font-awesome
  - Tests d'écriture dans le fichier application.hbs

05/02 :
1. Continuité sur l'apprentissage d'Ember : suivi du second tutoriel sur les locations
  - Fonctionnement des tests d'acceptation des fichiers .hbs d'un projet Ember via les fichiers .js du dossier /tests/acceptance/ :
    1. Le fonctionnement général et les erreurs potentielles et provoquées
    2. Vérification du fonctionnement des visites et des liens
  - Création de nouvelles routes :
    1. About (À propos)
    2. Contact
    3. Index
    4. Rentals (Locations)
  - Implémentation de liens entre différents pages d'un même projet
  - Ajout d'une barre de navigation via du code Bootstrap avec des onglets fonctionnels via des liens Ember

06/02 :
1. Suite second tuto Ember sur les locations
  - Compréhension sur le fonctionnement du Model Hook (Modèle de Crochet) et l'utilisation des données implémentées en dur
  - Autres tests d'acceptation :
    - Tests de l'intégrité des données de la liste des locations
  - Installation d'add-ons Ember :
    1. ember-cli-tutorial-style
    2. ember-cli-mirage, avec adaptateur du namespace
  - Construction d'un composant simple permettant de changer la taille d'une image : utilisation du Wide et de isWide()
  - Intégration d'un assistant de barres de gestion (Handlebars)
  - Utilisation de la classe EmberData pour comprendre la manipulation des données d'un tableau JSON
  - Implémentation d'un composant complexe permettant de filtrer dynamiquement via un input text les résultats retournés par la boucle des données gérées par le tableau JSON

07/02 :
1. Fin second tuto Ember
  - Inclusion de routes imbriquées pour afficher les résultats de plusieurs templates au sein d'un template principal
2. Début de la 4ème mission : le tableau de maintenance des types d'emballage avec l'utilisation des frameworks Ember et Bootstrap via un projet Ember
3. Création et mise en œuvre de la partie graphique et responsive du tableau de maintenance :
  - Inclusion du code HTML stylisé avec les classes Bootstrap
  - Ajout du code CSS pour les parties spécifiques
4. Création d'un tableau de tests temporaire en JSON reprenant les valeurs des données de l'exemple présent dans l'énoncé de la mission
5. Début d'implémentation de la boucle permettant de générer les données du tableau JSON temporaire nouvellement créé

08/02 :
1. Fin d'implémentation de la boucle générant les lignes de données du tableau JSON : utilisation d'une boucle Each
2. Ajout d'un conditionnement Ember dans le tableau pour remplacer les valeurs booléennes par des checkbox :
  - Checkés si vrai
  - Non-checkés si faux
3. Blocage de l'attribut onclick des checkbox dans les lignes du tableau hors modification :
  - Ajout d'un retour à faux
4. Création du nouveau composant package-adding : * Création du fichier HBS package-adding.hbs dans le dossier /templates/components/
  - Création du fichier JS package-adding.js dans le dossier /components/
  - Implémentation de la partie graphique de la ligne responsive à la fin du tableau pour l'ajout d'une nouvelle ligne

09/02 :
1. Réflexion sur la façon d'implémenter une base de données de tests liée au projet Ember sans utiliser le serveur de l'entreprise
2. Choix et imprégnation de l'API Mirage (ember-cli-mirage) :
  - Intérêt : Simuler un faux serveur HTTP pour y créer une BDD et y faire toute sorte d'ajout et requêtes
  - Lecture de la documentation
3. Début d'implémentation de la BDD de test sur le faux serveur monté par Mirage :
  - Stockage des données de test créées dans le tableau JSON à l'intérieur de la BDD
4. Début de mise en œuvre des requêtes d'ajout, de mise à jour et de suppression
  - Prise en compte de la requête de suppression d'une ligne de données dans la console à partir de son identifiant et d'une action incluse dans le bouton de suppression
  - Prévision de la destruction fonctionnelle des données des lignes de données dans la BDD

12/02 :
1. Abandon du tableau JSON temporaire et stockage des données dans la BDD avec des requêtes de création en dur : createRecord
2. Création du nouveau composant package-listing (donc les fichiers HBS et JS de même nom)
3. Implémentation de la requête de suppression des lignes de la BDD via le bouton de suppression :
  - Écriture de la nouvelle action removeRow qui utilise la méthode destroyRecord pour supprimer une ligne dans la BDD
  - Ajout de cette action au niveau du libellé du bouton lié à l'identifiant de chaque ligne et de leurs données - Création et utilisation du nouveau composant package-adding
4. Commencement à la mise en place du code pour l'ajout d'une nouvelle ligne de données dans la BDD

13/02 :
1. Finalisation à la mise en place du code d'ajout d'une nouvelle ligne de données :
  - Ajout de la fonction createPackaging permettant de prendre en compte la BDD (store) et les données inscrites dans les inputs présents dans la ligne d'ajout d'une nouvelle ligne
  - Ajout du code Ember des différents inputs (entre des doubles accolades {{ }}) dans le composant package-adding pour spécifier le type et la nature des données à prendre en compte et à importer dans la BDD
2. Ajout d'un popover pour chaque ligne afin d'établir une espèce de mini-modale avec 2 boutons, Confirmer et Annuler, lorsque l'on clique sur le bouton de suppression - Mise en place du code pour lancer l'édition d'une ligne via le bouton edit présent à la fin de chacune d'entre elles :
  - Ajout et écriture de conditionnements pour chacune d'entre elles qui vérifie si on a une variable edit à Faux par défaut et passant à Vrai si on clique dessus
  - Ajout de l'action launchEdit qui permet de changer la valeur de la variable edit pour respecter les conditionnements

14/02 :
1. Correction du code :
  - Pour faire en sorte que le bouton active l'édition uniquement sur la ligne auquel il est lié, et non pour toutes les lignes
2. Poursuite de la mise en place du code de l'édition d'une ligne :
  - Implémentation du code du fichier HBS package-listing.hbs :
    1. Ajout de la nouvelle action validateEdit dans le bouton de validation de l'édition
    2. Ajout de la nouvelle action resetEdit dans le bouton de rétablissement des données de l'édition
  - Écriture du code de l'action validateEdit dans le fichier JS package-listing.js :
    1. Sauvegarde des données modifiées de la ligne au sein de la BDD
    2. Affectation de la valeur Faux à la variable edit pour fermer le formulaire d'édition de la ligne
  - Écriture du code de l'action resetEdit dans le fichier JS package-listing.js :
    - Utilisation de la méthode rollbackAttributes pour restituer les données initiales récupérées dans le formulaire au début de l'édition de la ligne

15/02 :
1. Remplacement du popover de chaque ligne par une modale codée en Ember afin de respecter le guide IHM établi par l'entreprise
2. Re-création d'un projet propre :
  - Renommage du projet intitulé type_packages par type-packagings (retrait de l'underscore et modification de packages en packagings, package étant un nom réservé)
  - Installations des add-ons utilisés dans le projet uniquement
  - Création des composants utilises uniquement
3. Simplification du code :
  - Stockage des méthodes, string, nombre, etc... utilisées dans les fonctions et les actions au sein de nouvelles variables de type let
  - Suppression des morceaux du programme et des fonctions commentés pour alléger le code du projet
4. Correction dans le code :
  - Renommage des noms de dossiers, fichiers et variables package et packages respectivement par packaging et packagings (cohérence et nom réservé)
5. Installations et lecture des documentations respectives des add-ons :
  - Power Select (ember-power-select) :
    - Pour la mise en place de selecbox plus facile à manipuler, offrant plus de paramètres et d'options, et contournant les limitations entre les navigateurs
  - Changeset Validations (ember-changeset-validations) :
    - Pour une gestion plus simple des formulaires, de manière à élaguer les répétitions des conditions qu'il peut y avoir du code JS classique

16/02 :
1. Tests d'utilisation du Power Select et du Changeset Validations grâce à l'imprégnation de leurs documentations respectives
2. Remplacement du selectbox classique utilisé pour l'édition d'une ligne par un Power Select :
  - Ajout d'un tableau de valeurs temporaire avec ses 3 valeurs par défaut en attendant d'avoir accès à la BDD du serveur de l'entreprise
  - Implémentation des valeurs du tableau temporaire dans le Power Select
  - Gestion de la restauration de la valeur enregistrée dans la BDD au sein du Power Select pour les lignes correspondantes
  - Gestion de l'enregistrement d'une nouvelle valeur choisie dans le Power Select au sein de la BDD
3. Idem pour le selectbox de l'ajout d'une ligne :
  - Ajout d'un tableau de valeurs temporaire
  - Implémentation des valeurs dans le Power Select
  - Gestion de l'ajout de la valeur choisie pour une nouvelle ligne
4. Test de désinstallation de Ember v2.18 et d'installation en v3.0 pour savoir comment procéder avec le versioning
5. Retour en arrière avec désinstallation de la v3.0 et la réinstallation de la v2.18 pour continuer le projet
6. Mise en place des différents conditionnements des formulaires d'ajout et d'édition :
  - Ajout : Récupération des données inscrites dans le formulaire
  - Édition : Récupération des données enregistrées dans la BDD avec liaison avec leurs champs dans le formulaire
  - Vérification si l'un des champs, sauf la checkbox par défaut, est vide pour les 2 types de formulaire

19/02 :
1. Installation de l'add-on ember-cli-notifications
2. Création de notifications pour chacune des requêtes :
  - Affichage d'un message de succès ou d'erreur (utilisation des méthodes success et error) pour les requêtes d'ajout et de modification
    - Messages déterminés par les conditionnements
  - Affichage d'un message d'information (utilisation de la méthode info) pour la requête de rétablissement des données initiales
3. Début de lecture de la documentation de l'add-on ember-light-table pour la mise en place de tableau maniable directement avec Ember
4. Début d'ajout des conditionnements pour le code des emballages pour l'ajout et l'édition d'une ligne :
  - Début de la différenciation et gestion du code unique afin d'éviter de l'avoir en plusieurs fois

20/02 :
1. Finalisation de la gestion du code unique de l'ajout et l'édition
  - Conditionnement simple pour l'ajout vérifiant si le code existe déjà ou non : utilisation de la méthode peekAll
  - Boucle forEach pour l'édition vérifiant pour la ligne concernée si le code changé existe déjà ou non, et ce pour chaque autre code des lignes enregistrées
  - Implémentation de l'affichage d'une notification si le code existe déjà
2. Ajustement de la gestion du code unique pour l'édition :
  - Ajout d'une variable booléenne de type let intitulée retour dont la valeur change dans la boucle forEach :
    1. True si la valeur du code modifié est égale à celle des autres codes enregistrés et si la valeur de l'id de la ligne est différent des autres
    2. False sinon
  - Ajout d'un conditionnement là où la sauvegarde permet de se lancer pour les données modifiées :
    - Vérification si la variable retour est à false
3. Test du dépôt du projet sur le serveur de l'entreprise :
  - Utilisation de la partie serveur déjà codée en JSA et en RPGLE
  - Suppression des fichiers utilisés avec ember-cli-mirage
  - Retrait du tableau en dur avec les 3 types d'emballage différents
  - Liaison du code du projet avec le serveur de l'entreprise :
    1. Renommage du fichier route et du fichier model en correspondance avec la table du serveur
    2. Modification du fichier adapter pour qu'il corresponde à l'URI sur le serveur
    3. Choix de la bonne table
  - Lancement du projet maintenant déposé sur le serveur avec tous les navigateurs et tests de son fonctionnement

21/02 :
1. Implémentation d'une action et d'une fonction pour les Power Select des formulaire d'ajout et d'édition :
  - Ouverture des Power Select avec le focus en partant de l'input text précédent en appuyant sur la touche Tab du clavier
  - Choix de la valeur avec les touches Haut et Bas du clavier
2. Retrait de toutes les notifications précédemment mises en place avec l'add-on ember-cli-notifications
  - Remplacement par des console.log()
  - Suppression le cas échéant
3. Remplacement de la modale ajoutée précédemment pour le formulaire d'édition, dont le guide IHM préconisait son utilisation, par une Popover après discussion avec mon maître de stage et ses collègues :
  - Avantage :
    1. Moins encombrant qu'une modale qui s'ouvre sur une grande partie la page
    2. Bien + rapide pour exécuter une action car s'affiche juste à côté du bouton de suppression
  - Codage de la Popover :
    1. Implémentation de l'action correspondant au bouton "Annuler" qui ferme la Popover
    2. Implémentation de l'action correspondant au bouton "Confirmer" qui valide l'édition et ferme la Popover
4. Ajout de 2 conditionnements, 1 pour le formulaire d'ajout et celui d'édition :
  - Même rôle : quand la valeur par défaut d'une des lignes d'un groupe ayant le même type d'emballage est coché, les autres lignes de ce même groupe ne peuvent pas être cochés
  - Formulaire d'ajout : implémentation d'un conditionnement simple
  - Formulaire d'édition : début d'implémentation du conditionnement à l'intérieur de la boucle forEach (celle pour la gestion du code unique)

22/02 :
1. Finalisation de l'ajout du conditionnement du formulaire d'édition dans la boucle forEach
2. Prise de screenshots de la Popover pour mon maître de stage :
  - Future modification dans le guide IHM
  - Remplacement du screenshot de la modale par un screenshot de la Popover
3. Poursuite de la lecture de la documentation de l'add-on ember-light-table
4. Fin des objectifs la 4ème mission : le tableau de maintenance des types d'emballage sans Light Table
5. Début de mise en place du tableau avec ember-light-table :
  - Suivi des exemples donnés dans la documentation
  - Affichage des données enregistrées dans la table de la BDD au sein du tableau
  - Tentative de réglage de la prise en compte du modèle lié à la table de la BDD :
    - Pour la mise en place des tris initiaux et interactifs sur les colonnes du tableau

23/02 :
1. Poursuite de la mise en place du Light Table en Ember :
  - Finalisation du réglage de la prise en compte du modèle lié à la table de la BDD
  - Mise en œuvre d'un PushObjects des éléments enregistrés dans la BDD au sein du Light Table
  - Repérage d'un conflit répétant des données enregistrées :
    1. Cause : Limitation programmée dans le composant du Light Table
    2. Conflit entre les add-ons ember-cli-mirage et ember-light-table pour la prise en compte des données