# Séance 10 : Projet – Kick-off réseau social ## 🎯 Objectifs * Lancer projet Nuxt/VueJs Social App. * Mettre en place authentification + channels. ## 📖 Partie théorique ### Présentation du projet * Mini-réseau social type Slack/Discord/... * Fonctionnalités principales : channels, publications (et réponses), authentification, système de like. ### Architecture * Frontend : Nuxt ou VueJs * Backend : API Platform (fourni) ### Endpoints principaux * `/auth/login` : authentification * `/channels` : gestion des salons * `/publications?channelId=...` : messages filtrés par salon * ... (voir documentation API fournie) ## 📝 Travaux pratiques * Créer projet Nuxt/VueJs Social App. * Mettre en place les différentes pages (login, channels, publications, ...). * Toutes les fonctionnalités utiles et nécessaires pour ce type d'application * Implémenter l'authentification et toutes les fonctionnalités utiles dans ce processus (login, logout, gestion du token, mot de passe perdu, inscription, ...). ## Evaluation du projet * Critères : fonctionnalités, qualité du code, UI/UX, tests, accessibilité. * Mise en place de tests unitaires (un service, un composant ou un store) * Mise en place d'un test ent-to-end (la page de login, l'ajout d'une publication) * Livrables : code source (sur un git), démonstration. {% hint style="danger" %} Rendu le 15/03/2026, par mail : * Github * Site en ligne (fournir des accès de démonstration) ou vidéo de démonstration des fonctionnalités {% endhint %} ### Grille d'évaluation | Critères | | Points | | ---------------------------------------------------------- | - | ------------------------------------------------------ | | Tests unitaires (service, composant ou store) | | 2 | | Tests E2E (page login + ajout d'une publication) | | 2 | | Accessibilité (AA) | | 1 | | UX (ergonomie, facilité d'utilisation, cohérence) | | 0. non/absent, 1. OK, dans la consigne. 2 Exceptionnel | | Authentification, création de compte | | 2 (tout présent ou pas) | | Ajouter, modification, suppression d'une publication | | 0. non/absent, 1. OK, dans la consigne. 2 Exceptionnel | | Gestion des réactions publications, commentaires | | 2 | | Gestion des médias | | 2 | | Gestion des commentaires (ajouter, suppression, affichage) | | 0. non/absent, 1. OK, dans la consigne. 2 Exceptionnel | | Gestion des channels | | 2 | | Recherche/filtres | | 0. non/absent, 1. OK, dans la consigne. 2 Exceptionnel | ## Lien de l'API fournie L'API est commune à tous les groupes et dispose des endpoints REST classiques pour chaque ressource. Ainsi pour gérer les accès sans mélanger vos données un "slug" unique vous sera attribué (fourni par l'enseignant) et à utiliser dans toutes les URLs * Base URL : `https://wra506d.davidannebicque.ovh/api/{votre-slug}/...` Un code d'inscription vous sera également fourni pour créer des comptes utilisateurs (à intégrer dans dans vos formulaires d'inscription). La base de données est pré-remplie avec des utilisateurs, channels et publications pour les tests. Libre à vous d'ajouter/modifier/supprimer des données via l'API. Une interface Swagger est également disponible pour explorer/tester l'API : `https://wra506d.davidannebicque.ovh/api` et une interface vous permet de récupérer un token JWT pour un utilisateur existant : `https://wra506d.davidannebicque.ovh/`. ## URL globales * **Connexion API** : `https://wra506d.davidannebicque.ovh/api/login` en envoyant en post les champs `email` et `password`, vous donnera un token JWT à utiliser dans les headers `Authorization: Bearer {token}` pour les appels suivants. * **Récupération de l'utilisateur courant** : `https://wra506d.davidannebicque.ovh/api/{slug}/users/me` avec le token JWT dans les headers, vous donnera les informations de l'utilisateur connecté. * **Inscription API** (sans slug) : `https://wra506d.davidannebicque.ovh/api/register` en envoyant en post les champs `displayName`, `email`, `password` et `codeInscription`, vous permettra de créer un nouvel utilisateur dans le bon workspace (slug). * **Inscription API** (avec slug) : `https://wra506d.davidannebicque.ovh/api/{slug}/register` en envoyant en post les champs `displayName`, `email`, `password`, vous permettra de créer un nouvel utilisateur dans le bon workspace (slug). ## Structure de l'API REST ### Channel (/api/channels) * name : string * slug : string * tags : tableau, optionnel * description: text, optionnel * image : text (url), optionnel ### Publication (/api/publications) * Author : User (géré par l'API) * Channel : Channel (à transmettre sous forme d'IRI) * title : string * body : string (contenu) * createdAt : datetime (géré par l'API) * updatedAt : datetime (géré par l'API) ### Comment (/api/comments) * Author : User (géré par l'API) * Publication : Publication (à transmettre sous forme d'IRI) * body : string (contenu) * createdAt : datetime (géré par l'API) * updatedAt : datetime (géré par l'API) ### User (/api/users) * displayName : string * email : string * password : string (non retourné par l'API) * avatar : string (URL de l'avatar) * createdAt : datetime (géré par l'API) ### Reaction (/api/reactions) * type : string (like, love, etc.) * Author : User (géré par l'API) * publication : Publication (optionnel) * comment : Comment (optionnel) * createdAt : datetime (géré par l'API) ### Media (/api/media) * owner : User (géré par l'API) * originalName : string * mimeType : string * size : integer (taille en octets) * path : string (URL du média) * createdAt : datetime (géré par l'API) * publication : Publication (optionnel) * comment : Comment (optionnel) ## Appel API avec un token JWT ### en VueJs avec fetch ```javascript const token = 'votre_token_jwt_ici'; fetch('https://wra506d.davidannebicque.ovh/api/ws-xx/channels', { headers: { 'Authorization': `Bearer ${token}` } }) .then(response => response.json()) .then(data => console.log(data)); ``` ### en NuxtJs avec useFetch ```javascript const token = 'votre_token_jwt_ici'; const { data, error } = await useFetch('https://wra506d.davidannebicque.ovh/api/ws-xx/channels', { headers: { 'Authorization': `Bearer ${token}` } }); ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://cours.davidannebicque.fr/vue.js-but/but3/seance-10-projet-kick-off-reseau-social.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.