IFT3150 – Projet informatique

Objectifs

• Prendre en main les outils qui seront utilisés pour le projet
• Produire une première version de l'échéancier
• Déterminer les exigences du projet
• Étudier le domaine, les notions et outils envisagés pour le projet

Réalisations

• Échéancier divisant le projet en 4 phases:
• Semaines 1-2: élaboration des exigences
• Semaines 3-6: prototypage et conception
• Semaines 7-12: développement
• Semaines 13-16: tests & rapports
• Exigences du projet:
• Espace de dépôt pour les images
• Base de données préservant les annotations et les détails liés aux images
• Service API traitant des opérations et communiquant avec la BD
• Application web interagissant avec les utilisateurs
• Rencontre avec le représentant du client "Écoles en réseau" Michel Perreault:
• Divulgation du domaine cible de Picto360: photos standards, panoramiques et de 360°
• Démonstration d'une gamme d'outils dédiés à la visualisation d'images à 360° et l'ajout de couches d’informations
• Précision de la livraison d'une solution n'ayant pas recourt à un compte d'utilisateur à des fins de protection des renseignements personnels garantis par la loi 25
• Précision sur la livraison d'une application gratuite, open source avec la possibilité d'exporter le contenu

Notes

Objectifs

• Explorer les ressources proposées par le client et leur concurrence sur le marché
• Identifier des formes d’annotations intéressantes
• Anticiper les choix de technologies ainsi que les contraintes associées
• Rédiger les cas d'utilisations de l'application

Réalisations

• Test des services suivant: H5P, Teliportme, Matterport, Thinglink, Momento360
• Collecte d'idées d'annotations pertinentes:
• Identification:
• Zoom
• Surbrillance dynamique
• Transitions/effets visuels (ex: fondus, glissements, déplacement, etc.)
• Apprentissage:
• Boîte de texte/texte avec contour (+ masquage/dévoilement)
• Ligne du temps
• Légende (ex: distances)
• Narration audio
• Vidéo statique (ex: tutoriel, clip, documentaire…)
• Liens vers des ressources supplémentaires
• Vote
• Évaluation:
• QCM
• Vrai ou faux
• Commentaire/rétroaction

Notes

• Léger obstacle rencontré lors du choix d'annotations: le concept d'annotations d'images semble être associé en grande partie à la vision par ordinateur via l'étiquetage de données, rendant la pertinence de leur inclusion douteuse dans un contexte pédagogique

Objectifs

• Formaliser les exigences fonctionnelles et non fonctionnelles à l'aide d'un diagramme de cas d'utilisation
• Compléter le sprint de la modélisation des données et du prototypage idéalement avant le mois de juin

Réalisations

• Enrichissement de la description du projet
• Liste des exigences fonctionnelles et non fonctionnelles

Notes

• Clarification de l'encapsulation que représente le contexte pédagogique de l'application désiré par le client: celui-ci doit être pris en charge par Picto360, mais les cas d'utilisations dérivés ne doivent pas exclusivement traiter d'acteurs du contexte tels que les enseignants et les élèves.
• Recommandation de React pour l'interface et MongoDB pour la base de données faite par M. Lafontant: possibilité de converger vers la collection de technologies MERN
• Alternative de React: solution codée en Javascript "pur" dotée d'une gestion de "states" incontournable
• Le langage de programmation choisi pour MongoDB déterminera s'il s'agira d'un projet assemblé avec Javascript à 100% ou non

Objectifs

• Remplir la section "Infrastructure" du site internet
• Compléter le diagramme de cas d'utilisation
• Fournir le diagramme de séquence système
• Concevoir un prototype "papier" de Picto360
• Entamer la modélisation des données de l'application

Réalisations

• Diagramme de cas d'utilisation complété
• Prototype Figma couvrant le téléversement, l'annotation et le partage d'une image annotée

Notes

• Architecture MERN: ExpressJS remplacé par Fastify
• Backend programmé en TypeScript
• Problématique: latence de communication avec la BD (ex: efficacité des algorithmes)
• Règle des 3 clics à suivre pour le prototypage:
• Pas plus de 3 changements de contexte pour chaque exécution d'action (ouverture de l'explorateur Windows, menu latéral caché, barre des paramètres, etc.)
• Paramètres de sécurité du système de partage par clé à débattre (public/privé/etc.)

Objectifs

• Continuer la modélisation des données
• Concevoir une application simple React en mode progressive web app

Réalisations

• Flux des diagrammes de séquences système
• Diagramme de classes entamé via la modélisation des données
• Amélioration de la page d'annotation du prototype Figma

Notes

• Prise en charge d'un «nouveau» cas d'utilisation: changement d'image tout en conservant les annotations actuelles
• Précision: combinaison des cas "supprimer une image" et "ajouter une image"
• Discussion au sujet du concept de couche:
• Exemple de la ferme:
• Couche liée aux
  • informations et détails directement visibles
  • agrégations de données (ex: commerce)
  • "related data"/informations connexes non tangibles (ex: captures d'écran/vidéos liées à une visite scolaire)
• Picto360: Zoom + annotations à la même position:
• Jeu de superposition plus pertinent pour un étudiant
• Ex: 1re & 2e couche: questions -> réponses
• Absence de couches -> conflit d'information (manque de contexte)

Objectifs

• Compléter la modélisation des données et le prototype Figma
• Acheminement d'une Progressive Web App sur React

Réalisations

• Diagramme de classes entamé via la modélisation des données
• Production d'une version prototypée fonctionnelle et prête pour la présentation au client

Notes

• Feedback concernant les diagramme séquence système (DSS) et de classes UML fourni par M. Lafontant
• DSS: mention des préconditions et postconditions ainsi qu'une courte description à inclure + expansion des flux requise
• Classes: Sous-classes de l'abstraction «Content» à compléter

Objectifs

• Initialiser l'application:
• Espace d'édition de l'image: affichage de l'image, navigation à travers celle-ci et ajout d'une annotation
• Layout général (header, body, barre latérale, etc.)
• Bouton flottant (optionnel)

Réalisations

• Mise à jour des DSS
• Modification du diagramme de classes:
  • Appliquer la rétroaction de M. Lafontant
  • Déterminer quelles classes sont dûes en juin et juillet
• Configuration de l'infrastructure backend et frontend: NodeJS, Fastify et MongoDB
• Programmation de l'application React:
  • Visionnement de l'image
  • Toolbar

Notes

• Suggestion du maintien d'une rencontre en présentiel par semaine minimum
• Référence pour l'installation de l'environnement NodeJS:
• https://philna.sh/blog/2019/01/10/how-to-start-a-node-js-project
• Référence pour l'installation de Fastify:
• https://fastify.dev/docs/latest/Guides/Getting-Started
• https://fastify.dev/docs/latest/Guides/Database
• Référence pour la configuration de MongoDB avec Fastify:
• https://backend.cafe/how-to-use-fastify-and-mongodb
• Référence pour l'installation de React:
• https://create-react-app.dev

Objectifs

• Supporter le processus d'annotation des images

Réalisations

• Mise à jour des DSS
• Finalisation du diagramme de classes
• Organisation de la structure des fichiers du dossier backend
• Mise à jour de TypeScript ainsi que des dépendances et modules npm du projet
• Programmation de l'application React:
  • Page de téléchargement d'image fonctionnelle
  • Pop-up de partage de projet

Notes

• Références pour l'installation de TypeScript:
• https://www.digitalocean.com/community/tutorials/setting-up-a-node-project-with-typescript
• https://khalilstemmler.com/blogs/typescript/node-starter-project
• https://medium.com/@induwara99/a-step-by-step-guide-to-setting-up-a-node-js-project-with-typescript-6df4481cb335

Objectifs

• Ajouter des annotations textuelles

Réalisations

• Réunion avec Michel Perreault
• Programmation de l'application React:
  • Menu contextuel de la page d'édition
  • Pop-up de partage de projet

Notes

• Investiguer le problème de dépendances causé par react-scripts@5.0.1

Objectifs

• Intégrer l'espace nuagique de stockage de projets:
• Sauvegarde et récupération de l'état d'un projet

Réalisations

• Refactorisation de l'application React avec Vite
• Migration des composantes, hooks, modèles, routes et autres fichiers dans le dossier "picto-app"
• Suppression du dossier "frontend" à valider
• Vitesse de compilation du serveur de développement presque instantanée
• Programmation de l'application React:
  • Refonte de la page de téléchargement
  • Logique de création des hotspots
  • Barre inférieure
  • Menu flottant

Notes

• Inclusion de l'espace de prévisualisation à revoir

Objectifs

• Préparer une version stable de l'application pour la "Foire aux projets 3150: Démo Alpha"
• Finaliser le support de tous les types d'annotations

Réalisations

• Refactorisation de la documentation sur les "custom hotspots" pour le contexte de Picto 360
• Icône (hotspot) personalisée selon le type d'annotation choisi associée à une info-bulle (tooltip) encapsulant le contenu principal de l'annotation
• Version stable des hotspots de texte, étiquette et hyperliens

Notes

• Utilité du menu contextuel à redéfinir

Objectifs

• Préparer une version stable de l'application pour la "Foire aux projets 3150: Démo Alpha"
• Finaliser le support de tous les types d'annotations

Réalisations

• Bouton "toggle" permuttant entre le mode édition actuel et le mode prévisualisation (pas encore programmé)
• Transfert de la logique du hook useImageViewer ainsi que de la création de hotspots dans des hooks séparés
• Hotspots textuels (texte, étiquette, hyperlien) désormais 100% fonctionnels
• Hotspots d'images et de GIFs inclus
• Édition dynamique des annotations textuelles prise en charge
• Réintégration du menu contextuel au sein du clic droit de la souris en tant qu'interface unique de création d'annotations
• Addition d'une nouvelle icône de cible à gauche du menu afin d'identifier la position de la future annotation
• Affichage dynamique du menu contextuel sans dépasser l'écran
• Retrait des sous-menus
• Retrait du menu flottant jusqu'à la redéfinition de sa fonction en échange

Notes

• Feedback de la foire à intégrer au sein de l'application

Objectifs

• Finaliser les formulaires et annotations vidéos
• Entamer le composant React d'édition d'annotation et la fonction de sauvegarde d'état du projet (backend):
• Cibler la mise à jour d'un élément précis en évitant d'écraser les données du projet entier

Réalisations

• Version initiale d'un formulaire avec entrées saisies par l'invite de texte de navigateur web
• Prise en charge des hotspots de vidéos
• Épuration des options excédentaires du menu contextuel (audio et sondage)

Notes

• Menu flottant à réintégrer éventuellement afin de simplifier l'UX liée aux annotations

Objectifs

• Compléter la rédaction du rapport de projet.
• Continuer le composant React d'édition d'annotation et la fonction de sauvegarde d'état du projet

Réalisations

• Rapport de projet complété

Notes

Objectifs

• Préparer la présentation finale:
• Prendre en charge le mécanisme de téléversement d'image avec un compte Google Drive (informations de connexion statiques) et d'exportation de projet afin de compenser pour le segment backend
• Soumettre une version complète des fichiers gabarits models/routes/services de la portion backend

Réalisations

• Liaison entre le frontend et le backend de Picto360 fonctionelle
• Logique contenue en grande partie au sein du fichier index.ts
• Image actuelle exportée vers le compte Google Drive à l'aide de l'API associée

Notes