Stage de Fanny Pierre - IUT Charlemagne - [8/04/19 au 14/06/19]

Important : cette page est réservée au suivi du stage, merci de ne pas la modifier

Informations générales pour les stagiaires

Pour toute information concernant ce stage : contacter André ou François-Xavier

Sujet

• Proposition de stage

Stage (Avril - Juin 2019)

Avril

Semaine 1

Lundi 8 :

• 8, arrivée, journée d'accueil salle de réunion de la Coupole (présentation de différents outils et métiers de l'observatoire et du CDS)
• Visite de la salle des serveurs
• Visite de la bibliothèque de l'observatoire

Mardi 9 :

• Installation à mon poste de travail
• Inscription à Wiki et à GitLab
• Installation de Rust sur l'ordinateur (nécessité d'installer Curl aussi)
• Installation de VisualStudio
• Apprentissage de Rust avec lecteur et suivi du manuel (https://doc.rust-lang.org/book/ch03-02-data-types.html (part.1, 2 et 3)

Mercredi 10 :

• Suite apprentissage de Rust : part.4 Ownership, part.5 Structure, part.6 Enums and pattern matching
• Installation de Yew (par lignes de commandes) : https://crates.io/crates/yew
• Installation de Git pour pouvoir tester Yew avec un projet déjà fait
• Manque de connaissances en Rust pour pouvoir comprendre correctement Yew, donc poursuite de l'apprentissage de Rust : part.7 (Package, Crates and Modules) finie

Jeudi 11 :

• Poursuite de l'apprentissage de Rust : Part.8, 9 et 10.1 terminées

Vendredi 12 :

• Poursuite de l'apprentissage de Rust : Part. 10 terminée
• Séminaire dans l'amphi de l'observatoire "What's new at CDS" (Présentation d'outils et de leurs améliorations tels que Simbad, Aladin...)
• Essais de programmes en WebAssembly avec le framework Yew

Semaine 2

Lundi 15 :

• Réalisation d'exercices d'entraînement au Rust : https://github.com/crazymykl/rust-koans (Exercices pratiquement finis)
• Présentation du métier d'astronome par Sébastien

Mardi 16 :

• Précédents exercices sur Rust terminés
• Réalisation d'une autre série d'exercices : https://github.com/rust-lang/rustlings

Mercredi 17 :

• Installation de WebAssemnly et des packages nécessaire en suivant les instructions https://rustwasm.github.io/docs/book/game-of-life/introduction.html
  • Problèmes avec l'installation de <cargo-generate>,, l'erreur : warning: build failed, waiting for other jobs to finish...
  • -> Il suffisait de d'installer un package manquant... (sudo apt-get install pkg-config)

• Réalisation d'une première page affichant simplement une alerte "Hello world", en suivant le tutoriel

  • -> Il fallait ouvrir un nouveau terminal pour qu'une commande soit effective

Jeudi 18 :

• Comparaisons des deux "framework" Yew et Seed afin de choisir celui qui me conviendra le mieux par la suite (Chois : Yew)
• Faire un appel à une url afin de récupérer et de stocker en mémoire toutes les lignes contenues dans la page web
  • Peu de documentation pour Yew et surtout peu de documentation concernant l'uilisation de requetes http

Semaine 3

Mardi 23 :

• Suite de l'appel à l'url, difficultés à comprendre comment les appels se font, peu de documentation
• Création d'un projet sur GitLab
• Appel à l'url pour récupérer les données et les afficher fini : nécessité de devoir télécharger le fichier de données dans un dossier static puisqu'il manque les permissions pour pouvoir accéder aux données directement depuis l'url

Mercredi 24 :

• Stockage des données dans un vecteur de String dans le corps du modèle
• Affichage de ces données sur la page sous forme de Liste
• Changement de l'affichage avec du CSS

Jeudi 25 :

• Changement du CSS pour affichier les données dans un tableau, possibilité de scroller dans le tableau si le nombre de données est trop grand
• Mise en place d'une fonction de recherche d'une table dans les données chargées : on rentre un nom entier ou partiel et le programme cherche les lignes dans les données qui peuvent correspondre

Vendredi 26 :

• Rendu du résultat des recherches de tables responsive (possibilité de scroller)
• Ajout de la possibilité de rechercher des informations spécifiques à une table en rentrant le nom de la table, l'url contenant les bonnes informations est alors appelée et celles-ci sont sensées s'afficher (problème pour afficher les données car manque de droits pour accéder à la page)
• Amélioration du CSS
• Réunion infusion : Librairies Python par Matthieu Baumann
• Séminaire du vendredi : présentation par Françoise GENOVA sur la science ouverte, l'astronomie et le CDS (présentation des enjeux, du rôle et des obligations de la science ouverte, du cds...)

Semaine 4

Lundi 29 :

• Affichage des informations concernant la table choisie
  • Création d'une nouvelle structure representant la strucutre du fichier Json associé aux données de la table
• Ajout d'un lien vers l'image associée à la table choisie
• Suppression du bouton de chargement des données pour rendre ce chargement automatique
• Suppression des lignes de données doubles (il y en a une en majuscules et l'autre en miniscules, seules celles en majuscules sont pertinentes)
• Modification du CSS

Mardi 30 :

• Consultation des documents et notamment de la charte graphique réalisée par une précédente stagiaire en licence Pro de Graphisme, Coline Narcy.
• Recherches sur l'erognomie, et réalisation d'un petit document recueillant les infromations les plus essentielles à retenir
• Comparaison de différents framework pour les interfaces graphiques :
  • Semantic.ui : Très bonne documentation, semble facile d'utilisation et intuitif
  • Materialize : Ressemble beaucoup à Semantic mais peut être un peu moins de documentation et d'explications, plutôt choisir Semantic
  • Bulma.io : Très bien documenté, très simple de trouver les éléments graphiques que l'on souhaite
  • FlexBox : Aucune documentation sur le site... éliminé
  • BootStrap : intéressant car beaucoup utilisé par les collègues de l'IUT et est bien documenté

• Installation de homebrew, node...

Mai

Jeudi 2 :

• Choix du framework : j'avais choisi Mardi d'utiliser Bulma mais ce matin je me suis rendue compte que je me trouvais limitée par rapport aux composants choisis, j'ai donc décidé d'uiliser Materialize puisque Gregory Mantelet a dit qu'ils n'uilisaient plus que Materialize puisqu'il propose le meilleur compromis entre légèreté et complétude.
• Premières amélioration de l'interfaces avec Materialize

Vendredi 3 :

• Changements dans le CSS
• Création d'une première version d'autocomplétion

Semaine 5

Lundi 6 :

• Changement de l'autocomplétion
• Amélioration du code pour une meilleure optimisation : pour l'instant les données des tables sont rechargées à chaque appel de l'autocomplétion, il faut essayer de charger les données une seule fois au chargement de la page
• Optimisation du code ok + autocomplétion mieux réalisée mais toujours sous forme de tableau qui s'affiche ne dessous da la zone de saisie, il faut mettre en place une vraie autocomplétion

Mardi 7 :

• Gros bug dans le programme : Panick : recursion exceeded, très difficile de comprendre pourquoi. Nous avons du retourner sur des précédents commit pour pouvoir récupérer un code fonctionnel à l'aide de "git checkout <num_commit>". J'ai finalement décidé de recréer un nouveau projet sur gitlab sur lequel j'ai récupérer le code sain pour pouvoir repartir sur de bonnes bases, au final peu de code a été perdu, cela m'a simplement fait perdre beaucoup de temps
• Tentative d'uilisation de javascript dans le programme Rust pour pouvoir proposer une meilleure autocomplétion mais j'ai beaucoup de mal à comprendre comment faire, je ne suis même pas sûre que ce soit possible
• Petite réunion avec André Schaaff et françois-Xavier Pinneau pour voir l'avancé du projet et pour donner des consignes pour la suite (appeler une autre url pour afficher un tableau de données afin de pouvoir placer des checkbox pour permettre à l'uilisateur quelles données il souhaite concerver)
• Je n'ai pas trouvé de solution pour utiliser Javascript dans le programme donc j'ai utilisé des balises html de type "datalist" qui permet de proposer une sorte d'autocomplétion qui fait bien l'affaire
• Maintenant, lorsque l'on clique sur "entrée" après avoir sélectionné une table dans la partie de gauche, les informations la concernant s'affichent directement dans la partie de droite prévue à cet effet
• Je vais donc dans un premier temps supprimer en quelques sortes la partie de droite pour enlever la saisie manuelle de la table afin de laisser seulement place à sa saisie automatique, puis j'entammerai le travail sur les tableaux de la nouvelle url

Jeudi 9 :

• Suppression des éléments "description", "name", "nbrows" dans la partie informations sur la table lorsqu'aucune information n'est affichée
  • Au début le code était devenu impropre mais le problème a été résolu, le code est bien propre (utilisation de fonctions implémentées pour le modèle)
• Lecture du livre "Ergonomie Web, pour des sites efficaces" de Amélie Boucher

Vendredi 10 :

• Gestion du cas où aucune information n'a été trouvée pour une table donnée
• Le lien cliquable sur l'image envoie maintenant sur une autre fenêtre
• Tentative de mise en place des tableaux

Semaine 6

Lundi 13 :

• Appel de l'url avec les tableaux fonctionnel (Merci à Jeremy qui m'a aidée à comprendre le problème d'appel à l'url qui ne marchait pas)
• Affichage du tableau
  • Dans un premier temps le tableau s'affichait avec les "Some(attribut)" car il faut trouver comment afficher des Options correctement
  • Ensuite affichage des données correctement : sans guillemet et sans les Some(_) et None
• Affichage de checkbox pour la futur sélection des colonnes

Mardi 14 :

• Mise en place des checkbox qui se sélectionnent ou se désélectionnent toutes lorsqu'on appuie sur la checkbox la plus haute
• Appel automatique du tableau de données en fonction de la table choisie
• Amélioration de l'affichage du tableau (par exemple, les rangées sont moins épaisses)

Mercredi 15 :

• Tentative de modification du css pour supprimer un scroll inutile, mais tentive non conluante
• Autre tentative pour tenter de récupérer les tables sélectionnées par les ckeckbox mais cela ne marchait pas pour cause de borrowing et de lifetime qui me faisaient perdre des droits sur des variables essentielles

Jeudi 16 :

• Deuxième essai pour la récupération des lignes séléctionnées dans le tableau :
  • Initalisation du vecteur comportant toutes les lignes et du vecteur comportant les lignes sélectionnées, par clonage des données récupéréer dans le json
  • Relecture du cours sur les lifetimes car la deucième tentaive pose problèmes...
  • Problème de lifetime... je ne comprends pas comment résoudre mon problème...

Vendredi 17 :

• Lecture du livre sur l'ergonomie

Semaine 7

Lundi 20 :

• Changement du code pour résoudre le problème : utilisation d'un seul vecteur dans lequel on ajoute un attribut booleen indiquand si la ligne est sélectionnée ou non
• Tentative de mise en place du programme js pour le stockage des données dans le navigateur

Mardi 21 :

• Modification du css pour tenter de résoudre le problème d'affichage (non résolu)
• Suite programme js pour stocker les données dans le navigateu

Mecredi 22 :

• Arrêt du stockage en JS pour le faire directement avec Yew
• Création d'une petite maquette sur papier représentant l'interface finale que j'aimerais réalise
• Refonte du programme pour pouvoir faire plusieurs recherches de tables, avec création d'une structure "Database" comportant toutes les tables recherchée

Jeudi 23 :

• Refonte du code terminée, il faut régler quelques bug et améliorer le css
  • 3 écrans : Recherche d'une nouvelle table, affichage des infos sur la table voulue, et affichage de la liste des tables choisies
• Réglage du problème de FnMut/FnOnce

Vendredi 24 :

• Amélioration de la nouvelle interface :
  • Plus que 2 fenêtres : recherche d'une table et affichage des infos
  • Une navbar sur le côté permet d'afficher en permanence les tables déjà choisies
  • Mise en place de la navbar du dessus simulant la navbar de la vraie interface X-match
• Réglage de bugs dans l'interface (notamment muavais affichage des noms de tables sur le côté)

Semaine 8

Lundi 27 :

• Réglage du problème de Panic! lorsqu'on cliquait sur le nom d'une table pour en afficher les détails
• Refonte du code HTML pour le rendre plus propre et plus lisible
  • il fallait notamment veiller à ce que chaque macro html! {...} ne revoit qu'on seul élément (div par exemple) sinon le programme imbrique des éléments seuls
• Ajout de la possibiltié de retirer une table de la table
• CSS

Mardi 28 :

• CSS
• Choix de couleurs pour le site : https://htmlcolorcodes.com/fr/ressources/meilleurs-generateurs-de-palette-de-couleur/ , https://colorhunt.co/

Mercredi 29 :

• Tentative de résolution du problème de nom sauvegarde de l'état des checkbox
• Un peu de réalisation du rapport
• Amélioration de l'interface

Vendredi 30 :

• Mise en place de la fenêtre pour le X-Match

Juin

Semaine 9

Lundi 3 :

• Ajout de la possibilité de choisir des tables parmi celles contenues dans la base dans les deux champs de recherches pour le X-Match

Mardi 4 :

• Affichage des informations concernant les tables choisies pour le X-Match
• css : https://www.pierre-giraud.com/html-css/cours-complet/types-input-formulaires-html.php

Mercredi 5 :

• Tentative de mise en place des dropdown échouée, j'ai donc réalisée une interface moins pratique pour x-match, mais de facon à limiter les dégâts
• Lecture de mon rapport pour supprimer les fautes

Liens

• ...

Versions testables

• ...

Documentation

• ...

Liste des améliorations à envisager

• ...

Bugs connus

• ...
• SoutenanceStage.pdf: SoutenanceStage.pdf

• RapportDeStage.pdf: RapportDeStage.pdf