Picto360 est une collaboration avec École en Réseau visant à développer une application pédagogique qui enrichit des images panoramiques et à 360° avec des annotations interactives et permet la création d'activités académiques.
👀 Exemple d'annotation de photos 360 (prise avec un drone)
Dossier Drive: Contient la documentation du projet
Wiki: Contient la documentation de l'application et de l'infrastructure développée (Services, API, Base de données...)
Ce projet est un template de site web pour le cours IFT3150, construit avec MkDocs et le thème Material for MkDocs.
Assurez-vous d’avoir les outils suivants installés :
- Python 3.8 ou plus récent
pip(gestionnaire de paquets Python)
- Clonez ce dépôt :
git clone git@github.com:udem-diro/template-projet.git
cd ift3150-template- Installez les dépendances :
pip install -r requirements.txtPour lancer un serveur de développement local :
mkdocs serveLe site sera accessible à l'adresse http://127.0.0.1:8000
Pour construire le site :
mkdocs buildLes fichiers générés seront dans le dossier site/.
Pour déployer sur GitHub Pages :
mkdocs gh-deployCette commande pousse automatiquement le contenu du site sur la branche gh-pages.
docs/: Contient tous les fichiers Markdown du sitemkdocs.yml: Configuration de MkDocsrequirements.txt: Dépendances Pythonsite/: Site généré (créé lors de la construction)
- Modifiez
mkdocs.ymlpour changer la configuration du site - Ajoutez/modifiez les fichiers Markdown (
.md) dansdocs/ - Personnalisez le thème en modifiant les paramètres dans
mkdocs.yml
Code serveur et logique métier.
models/: Modèles de données (Annotations, Projets, Images).routes/: Endpoints API RESTful.services/: Logique applicative.utils/: Utilitaires généraux.middlewares/: Vérifications avant l'exécution de la logique .
Documentation du projet.
css/: Styles pour la documentation.images/: Logos et illustrations.index.html: Page d'accueil de la documentation.
Frontend développé avec React et TypeScript.
assets/: Styles CSS et autres assets.authContext/: Contexte d'authentification avec une scope générale.components/: Composants React (Barre d'outils, Menu contextuel, Visionneuse).firebase/: Gestion des configurations de firebase.hooks/: Hooks personnalisés.pages/: Pages principages de l'application.utils/: Outils.public/: Fichiers publics incluantpannellum.js.
README.md: Description générale.TIMELINE.md: Suivi hebdomadaire.
Un hook Git pre-commit (via Husky) vérifie automatiquement le typage, le lint et les tests avant chaque commit.
Après avoir cloné le dépôt, installez les dépendances aux trois niveaux (racine, backend/, picto-app/) :
npm install # à la racine — active le hook via le script `prepare` de Husky
npm install --prefix backend
npm install --prefix picto-appAucune autre étape n'est requise : le hook est activé automatiquement dès le npm install à la racine et s'applique à tous les clones locaux du dépôt.
À chaque git commit, le hook regarde quels dossiers (backend/, picto-app/) contiennent des fichiers indexés (staged) et exécute, uniquement pour ces dossiers :
backend/:tsc --noEmit(typage) →eslint .(lint) →jest(tests)picto-app/:tsc -b(typage) →eslint . --ext ts,tsx(lint) — pas encore de tests automatisés côté frontend
Le commit est bloqué si une de ces étapes échoue. La règle no-explicit-any est en avertissement (non bloquante) le temps de réduire la dette existante ; les autres erreurs de lint bloquent le commit.
Le script du hook se trouve dans .husky/pre-commit. En cas d'urgence, il peut être contourné avec git commit --no-verify, mais c'est déconseillé.
Supervision par Louis-Edouard LAFONTANT.