Kickoff

L'équipe choisit son commerce : produits, forfaits ou services. L'aperçu ci-dessous et la fiche du projet complète se synchronisent en direct : ce que vous tapez ici apparaît là-bas, et vice-versa (la page se souvient de vos réponses sur ce poste) :

• La fiche officielle est 100% web : la fiche du projet complète, avec son action Imprimer qui produit le PDF formel de l'équipe.
• En panne d'inspiration ? Les idées de sujets.

Le domaine de la boutique est choisi, réservé, et répond dans le navigateur. Notez-le ici, il vous sera rappelé au moment de la remise :

Le domaine tout neuf est bloqué sur le réseau du cégep ? C'est la règle, pas l'exception : suivez Débloquer son domaine (FortiGuard) - la demande de reclassification sur fortiguard.com/webfilter, avec le commentaire rédigé par Gemini.

Les commandes d'initialisation pour le serveur (à copier-coller en tant que root dans votre terminal) :

• 1. Le script auto-installable pour sécuriser le VPS (pare-feu, usager, fail2ban) :

  curl -fsSL https://raw.githubusercontent.com/nadineprofesseur/vps/refs/heads/main/bin/initialiser-serveur.sh -o /tmp/init.sh && sudo bash /tmp/init.sh

• 2. Le script d'installation de l'environnement Web (Apache, MySQL, PHP, phpMyAdmin) :

  curl -fsSL https://projet-web.projet.autos/scripts/installer-lamp.sh -o /tmp/lamp.sh && sudo bash /tmp/lamp.sh

Les références du cours de serveur :

• L'installation du serveur web : la semaine 1 du cours de serveur.
• Le domaine, les DNS et le vhost : la semaine 2 du cours de serveur.
• Le HTTPS et le certificat : la semaine 3 du cours de serveur - la documentation technique de référence pour maîtriser le HTTPS sur votre domaine.

La configuration du Virtual Host de la boutique, en résumé :

Chaque membre de l'équipe a son accès webmestre et peut se connecter à l'espace de la boutique. Le rappel des commandes, comme à la semaine 0 du cours de serveur :

L'IA génère les pages de départ de la boutique, et elles sont publiées sur le VPS :

• la boutique publique;
• le panneau admin de l'inventaire (dossier protégé par un .htaccess);
• le paiement en ligne de son produit.

La méthode à suivre : Générer les pages HTML avec l'IA.

Les deux prompts de la méthode, prêts à copier. ATTENTION : ces prompts utilisent l'exemple précis des cupcakes pour vous montrer le niveau de détail attendu. Vous DEVEZ les adapter à VOTRE projet, VOS champs et VOTRE charte.

Le prompt de la première page (l'accueil de la boutique publique) :

Génère la page d'accueil de ma boutique de cupcakes en UN SEUL
fichier HTML avec le CSS embarqué dans la page. Pas de framework,
pas de JavaScript pour l'instant.

La page présente : une section vedette avec le cupcake du moment,
puis la vitrine principale organisée en grille de cartes (image,
nom, prix sur chaque carte). La vitrine est séparée en deux
catégories : « avec gluten » et « sans gluten ». L'entête de la
page contient le nom de la boutique et le menu (Accueil, Cupcakes,
Contact), et un pied de page complète le tout.

Style : [ex: minimaliste, tons pastels roses et beiges, typographie
arrondie et chaleureuse].

Textes réalistes : tous les textes parlent de vrais cupcakes
(saveurs, prix, descriptions appétissantes), en français -
AUCUN lorem ipsum.

Spécification du code, sémantique et EN FRANÇAIS : des id pour les
éléments uniques (#entete, #vitrine-cupcakes), des classes
systématiques pour ce qui se répète (.cupcake > .cupcake-titre,
.cupcake-prix), balises header, nav, main, section, footer.

Le prompt de la page détail du produit :

J'ai téléversé ma page d'accueil terminée (index.html).

Génère maintenant la page de détail d'un cupcake : une grande
photo, le nom, la catégorie (avec ou sans gluten), la description
gourmande et le prix, avec un bouton "Acheter" bien visible. Une
seule page servira tous les cupcakes.

Le bouton "Acheter" lance l'achat en FLUX DIRECT : il mène
directement au paiement de CE cupcake, sans panier.

Cette page doit être PARFAITEMENT cohérente avec l'accueil :
exactement le même entête, le même menu, le même pied de page,
les mêmes classes et palette. Un lien "Retour à la vitrine"
permet de revenir.

Textes réalistes : un vrai cupcake, en français - AUCUN lorem
ipsum.

Spécification du code, sémantique et EN FRANÇAIS : des id pour
les éléments uniques (#detail-cupcake, #photo-cupcake,
#prix-cupcake), les classes pour ce qui se répète.

Le prompt des pages suivantes, à répéter pour chaque page (le panneau admin de l'inventaire, le paiement en ligne...) :

J'ai téléversé ma page d'accueil terminée (index.html).

Génère maintenant les DEUX pages du panneau d'administration.

1. La page "Liste de l'inventaire" : elle présente la liste des
cupcakes avec un bouton "Ajouter" en haut. Pour chaque ligne, on
retrouve un bouton "Éditer" et un bouton "Supprimer" utilisant des
icônes claires. Une alternance de couleurs ou une démarcation
franche permet de bien distinguer chaque rangée.

2. La page "Formulaire" (qui sert pour Ajouter ET Éditer) : elle
comporte les champs Nom, Description, Prix, Image, et un menu
déroulant (Avec / Sans gluten). Ces champs sont logiquement
regroupés dans deux fieldsets.

Ces pages doivent être PARFAITEMENT cohérentes avec l'accueil :
exactement le même entête, le même menu (avec l'élément actif
indiqué), le même pied de page, les mêmes classes et palette.

Textes réalistes : les libellés, le tableau et les exemples
parlent de vrais cupcakes, en français - AUCUN lorem ipsum.

Spécification du code, sémantique et EN FRANÇAIS : des id pour
les éléments uniques (#liste-inventaire, #formulaire-cupcake),
classes systématiques pour ce qui se répète (.rangee-cupcake).

Pour guider vos choix de design, consultez le hub Expérience utilisateur.

Le dossier fonctionnel de la boutique est généré et accompagne le site.

• Le template du devis fonctionnel : version modifiable (PPTX), et les références : le devis (PDF) et le diaporama de l'analyse fonctionnelle.
• La méthode : Générer le devis avec l'IA, et la référence Un bon dossier fonctionnel.

Amorcez votre dossier fonctionnel avec ce prompt, à copier directement dans votre projet IA :

Le prompt rapide du dossier fonctionnel :

À partir de la description du projet et du template du devis fonctionnel
(dans les documents du projet), rédige le devis fonctionnel de
l'itération 1 de notre boutique.

Respecte exactement les sections du template : MAQUETTES des fenêtres
(titre, description et auteur pressenti pour chaque fenêtre),
PROTOTYPES HTML et CSS (la liste des fenêtres à prototyper), et
SCÉNARIOS (une fiche de cas d'utilisation OU un storyboard par
processus important - propose le meilleur choix pour chacun).

Avant de commencer, pose-nous trois questions si des informations
manquent dans la description.

Pour éviter les conflits de versions en travaillant tous dans le même fichier, chaque coéquipier travaille dans son propre document pour réaliser son scénario et sa maquette, puis exporte son travail en fichier PDF séparé. Le scénario s'illustre par une fiche use case (format entrée-sortie) OU un storyboard, et doit couvrir le moment critique de votre propre volet (consulter, gérer ou payer).

Une fois vos PDF individuels prêts, assemblez-les en un seul document d'équipe final grâce à la ligne de commande Linux :

# Étape 1 : Assurez-vous que l'outil est installé
sudo apt install poppler-utils

# Étape 2 : Fusionnez les PDF (les fichiers sources d'abord, le fichier final à la fin)
pdfunite garde.pdf vitrine.pdf catalogue.pdf caisse.pdf dossier-equipe.pdf

Le dépôt git de l'équipe est créé, et chaque membre a cloné le projet et poussé au moins un commit.

Le dépôt se crée directement dans l'organisation du cégep : github.com/organizations/cegepmatane/repositories/new, sous le nom projet-web-2026-[nom-projet].

• La méthode : Versionner un projet GitHub.
• L'aide-mémoire : Les commandes GitHub.

La planification de l'itération avec le kanban : Sprint planning.

Le kanban se crée dans l'organisation du cégep : github.com/orgs/cegepmatane/projects, cliquer sur New project, puis choisir le layout Kanban en haut à droite.

• La méthode : GitHub Projects et le kanban.
• La référence : Le ticket parfait et imparfait.

Le tableau kanban de l'équipe est initialisé avec ses tickets de départ. Chaque étudiant ajoute exactement UN ticket (celui correspondant à son propre sujet). Voici trois gabarits prêts à copier-coller, un par volet de l'itération 1 :

La description de votre ticket doit clarifier le scénario et faire référence à vos maquettes. Ces liens s'écrivent directement dans le texte avec la syntaxe Markdown (exemple : "[voir la maquette](url)"). De plus, vous ajouterez vos liens de progression (commits) dans les commentaires du ticket.

Titre : [VITRINE] Consulter le catalogue des cupcakes

DEFINITION OF DONE (DoD) :
Le visiteur consulte [la liste des cupcakes classés par catégories
(avec et sans gluten)](https://cupcakes.projet.autos/),
puis clique sur un cupcake pour afficher la page détail qui présente
une grande image du cupcake, son prix et sa description détaillée.

TÂCHES :
- [ ] La page liste affiche les produits depuis la base de données
- [ ] Les catégories organisent la navigation
- [ ] Chaque produit a sa page de détail

TRAÇABILITÉ :
- Ajoutez vos liens de commits, ainsi que vos recherches, trouvailles et réflexions dans les commentaires de ce ticket.

Titre : [CATALOGUE] Gérer l'inventaire des cupcakes

DEFINITION OF DONE (DoD) :
Le marchand accède à [l'URL du panneau
d'administration](https://cupcakes.projet.autos/admin/) (mot de passe prof:cupcakes) pour
ajouter, modifier ou retirer des cupcakes de l'inventaire. Il doit
notamment pouvoir classer les cupcakes entre les catégories
"avec gluten" et "sans gluten".

TÂCHES :
- [ ] Le panneau admin liste l'inventaire depuis la base de données
- [ ] L'accès au répertoire est verrouillé par un .htaccess
- [ ] Ajouter, modifier et retirer fonctionnent
- [ ] Chaque produit peut recevoir son image

TRAÇABILITÉ :
- Ajoutez vos liens de commits, ainsi que vos recherches, trouvailles et réflexions dans les commentaires de ce ticket.

Titre : [CAISSE] Commander et se faire livrer les cupcakes

DEFINITION OF DONE (DoD) :
La page détail du cupcake présente un bouton Acheter. En cliquant
sur le bouton, le client procède au [paiement de ses
cupcakes](https://cupcakes.projet.autos/paiement.php?id=9) à travers un
parcours par étapes (wizard). Il doit d'abord indiquer son adresse
de livraison et ses préférences de réception, avant d'aboutir à la
transaction finale.

TÂCHES :
- [ ] Le tunnel d'achat (wizard) collecte l'adresse et les préférences
- [ ] Le paiement est complété via formulaire classique (ex: PayPal standard)
- [ ] l'Enregistrement de la transaction dans la base de données (IPN)
- [ ] Le panneau admin affiche la [liste des achats](https://cupcakes.projet.autos/admin/achats.php) réalisés par les clients
- [ ] Une confirmation d'achat est affichée au client

TRAÇABILITÉ :
- Ajoutez vos liens de commits, ainsi que vos recherches, trouvailles et réflexions dans les commentaires de ce ticket.