Vue.js - Développer des applications Web

Objectif : Comprendre le fonctionnement de Vue, configurer son environnement de développement et initialiser un premier composant avec la Composition API.

• Concepts fondamentaux et avantages du framework réactif Vue.js.
• Création d'un projet performant avec Vite et exploration de l'arborescence.
• Structure d'un composant SFC (Single File Component) : Template, Script, Style.
• La réactivité moderne : variables réactives (ref, reactive) et propriétés calculées (computed).

Atelier pratique : Initialisation d'une application multi-composants avec Vite et mise en place de structures réactives de base.

Cas métier : Création du tableau de bord de supervision énergétique d'un bâtiment intelligent avec affichage réactif des consommations.

Compétence acquise : Être capable d'initialiser de manière autonome un projet Vue et de créer des composants interactifs élémentaires.

Livrable : Squelette applicatif structuré et réactif à base de composants autonomes.

Objectif : Maîtriser le rendu dynamique du template HTML en s'appuyant sur les directives intégrées et la capture des actions utilisateur.

• Les liaisons de données unidirectionnelles et bidirectionnelles (v-bind, v-model).
• Le rendu conditionnel (v-if, v-else) et l'affichage de listes d'éléments (v-for).
• Écouteurs d'événements (v-on / @) et modificateurs d'événements pratiques (.prevent, .stop).

Atelier pratique : Conception de listes dynamiques filtrables et associées à des champs d'interactions.

Cas métier : Développement de la console d'alertes de maintenance du bâtiment : listage des pannes matérielles, filtres par sévérité et boutons d'acquittement rapide.

Compétence acquise : Savoir manipuler dynamiquement le rendu graphique de l'application en réponse aux actions des utilisateurs.

Livrable : Module d'alerte métier réactif, dynamique et interactif.

Objectif : Faire communiquer de manière fluide et sécurisée des composants d'une même page en exploitant les flux d'informations descendants et ascendants.

• La transmission de propriétés descendantes à l'aide des props (defineProps).
• L'émission d'événements personnalisés ascendants à l'aide des emits (defineEmits).
• Compréhension fine des étapes du cycle de vie d'un composant (onMounted, onUnmounted, onUpdated) pour y lier des scripts.

Atelier pratique : Établissement d'une structure relationnelle parent/enfant complexe avec transfert d'événements et de données typées.

Cas métier : Création du panneau de réglage d'une pièce : le composant parent envoie les consignes de température aux thermostats enfants, qui notifient en retour le parent des changements de statut.

Compétence acquise : Structurer un arbre de composants communicant de manière saine et maintenable.

Livrable : Composants interconnectés gérant de manière récursive la remontée et la redescente d'informations.

Objectif : Connecter l'application Vue à un serveur de base de données distant pour charger et manipuler des données d'entreprise.

• Utilisation du client HTTP fetch ou d'outils externes comme axios au sein du framework.
• Gestion asynchrone des phases de chargement et des scénarios de pannes ou d'erreurs réseau.
• Création de fonctions d'effets secondaires réutilisables (Composables) pour isoler la logique métier d'accès aux API.

Atelier pratique : Écriture de services d'appels asynchrones connectés à une API de démonstration avec gestion des statuts de chargement.

Cas métier : Connexion de l'application au service de surveillance générale pour récupérer la liste en temps réel des températures de chaque pièce d'un bâtiment de l'entreprise.

Compétence acquise : Savoir requêter, manipuler et intégrer proprement des flux de données distants asynchrones.

Livrable : Module de traitement asynchrone résistant aux pannes de communication API.

Objectif : Concevoir des formulaires de saisie riches, fluides et validés de manière robuste côté client avant soumission.

• Mise en œuvre du double-sens de données (v-model) sur tous les types d'éléments d'un formulaire (inputs, select, checkbox, radio).
• Gestion d'états de formulaires complexes (objets imbriqués).
• Création de règles de validation métier personnalisées et affichage dynamique des erreurs.

Atelier pratique : Établissement d'un formulaire dynamique d'ajout d'équipement intégrant des validations asynchrones et des formats stricts.

Cas métier : Formulaire d'enregistrement d'une nouvelle sonde thermique (contrôle de conformité de l'adresse IP, du type de capteur et du nommage du bâtiment).

Compétence acquise : Savoir collecter, valider et structurer des données complexes saisies par l'utilisateur.

Livrable : Écran d'enregistrement métier hautement sécurisé sur le plan des données d'entrée.

Objectif : Implémenter un système de navigation multi-pages et compiler l'application finale pour son hébergement de production.

• Introduction et configuration du routeur officiel : Vue Router.
• Paramétrage des routes, sous-routes et gestion des paramètres dynamiques d'URL.
• Mise en place de barrières de sécurité de navigation (Navigation Guards) pour sécuriser l'accès aux pages.
• Processus de build final optimisé à l'aide de Vite pour générer les fichiers de production.

Atelier pratique : Déploiement d'un routeur complet avec authentification d'accès fictive et exécution du build de production.

Cas métier : Finalisation du portail d'énergie avec sécurisation de la page d'administration générale, uniquement accessible après validation des droits du technicien.

Compétence acquise : Savoir structurer une architecture complète de site de type Single Page Application et exporter ses livrables pour un hébergement web professionnel.

Livrable : Application Web de supervision entièrement finie, sécurisée au niveau de sa navigation, optimisée et compilée pour la production.