Architecture de production en profondeur
Vous avez créé une petite application Wisej.NET — apprenez maintenant à en structurer une qu’une équipe pourra maintenir et faire évoluer pendant des années. Ce cours approfondi vous fait passer d’un projet de la taille d’un exercice à une architecture de niveau production, avec des frontières nettes entre UI, domaine, services, données et infrastructure, et une séparation claire entre composants côté serveur et widgets côté client. Douze modules abordent la structure du projet et le cycle de vie de l’application, la composition d’interfaces responsives et réutilisables, la liaison de données et les pipelines d’enregistrement sûrs, les workflows modaux et transactionnels, les tâches en arrière-plan et les mises à jour en temps réel, l’injection de dépendances et les modèles testables, l’interopérabilité JavaScript, les thèmes et la localisation, et les frontières de sécurité — pour finir avec le déploiement, le diagnostic, la répartition de charge et la livraison d’un projet de synthèse. Il s’adresse aux développeurs qui livrent déjà des applications Wisej.NET et veulent les modèles qui les gardent propres face aux contraintes du monde réel.
Passez d’une petite application de formation à une structure Wisej.NET de production maintenable — composants côté serveur, widgets côté client et frontières de projet nettes.
- Niveau: Intermediate
- Durée: 12 h
- Modules: 12
Programme
Module 1: Architecture Wisej.NET de production et structure du projet
Module 1 du cours Architecture de production en profondeur. Lisez le guide de la leçon et le guide des concepts appliqués, regardez la vidéo pas à pas sur le refactoring vers la production, réussissez la vérification des connaissances, puis restructurez la TicketOps Console en une structure prête pour la production dans le lab pratique.
- LectureGuide de la leçon · 12 min
Comment Wisej.NET associe les contrôles .NET côté serveur aux widgets côté navigateur — et pourquoi cela permet à vos contrôles de rester légers.
- LectureGuide du lab / de l’examen · 12 min
Approfondissez l’architecture de production : quand une frontière est rentable, comment connecter les services sans état statique, et un refactoring complet de TicketOps.
- Leçon vidéoRestructurer TicketOps pour la production · 8 min
Regardez une application de tickets écrite par un junior devenir une solution prête pour la production — composants côté serveur associés à des widgets, gestionnaires d’événements légers et logique déplacée derrière ITicketService. S’exécute directement dans le lecteur.
Transcription de la narration
Refactorisez TicketOps en attribuant des responsabilités distinctes à l’interface et aux opérations commerciales. L'objectif est une structure dans laquelle un autre développeur peut trouver une règle, modifier son implémentation et vérifier le résultat sans chercher dans les gestionnaires de boutons.
Le gestionnaire encombré mélange les requêtes de base de données, la validation, les décisions de flux de travail et les mises à jour d'écran. Ces responsabilités changent pour différentes raisons, donc les garder ensemble rend même une petite correction plus difficile à isoler et à examiner.
Créez des dossiers qui nomment les responsabilités prévues, puis utilisez ces noms pour décider à quelle place le code appartient. L'avantage vient des limites cohérentes, et non du déplacement du même gestionnaire étroitement couplé dans un fichier nommé différemment.
Définissez l’interface du service de tickets autour des opérations dont l’écran a réellement besoin. La forme peut alors dépendre d'un contrat stable tandis que des tests ou des implémentations ultérieures de stockage proposent différentes manières de la remplir.
Implémentez d’abord un faux service de tickets et transférez-y les décisions de flux de travail. Cela vous permet de vérifier l'interaction de l'écran avec le contrat avant d'introduire l'accès aux données réelles et ses cas de défaillance supplémentaires.
Le gestionnaire délègue désormais l'opération, affiche son résultat et gère les échecs. Lisez-le comme une description de l'action de l'utilisateur ; les règles métier doivent être compréhensibles dans le service plutôt que cachées parmi les mises à jour de contrôle.
Exécutez localement et vérifiez à la fois la grille remplie et l’état actualisé. Les deux résultats doivent concorder : le service a fourni les données et l'interface indique désormais à l'utilisateur que l'actualisation est terminée.
Donnez à l'utilisateur un message d'échec compréhensible tout en conservant la véritable exception dans le journal. Cela sépare l'explication nécessaire pour continuer à travailler des détails de diagnostic dont les développeurs ont besoin pour enquêter sur la cause.
- LectureExercice de code avec l’IA · 20 min
Construisez l’exemple TicketOps de ce module avec ChatGPT ou Claude à partir d’un prompt prêt à l’emploi qui oriente le modèle vers la spécification du module, puis relisez, exécutez et étendez ce qu’il vous renvoie — y compris en le comparant à notre propre solution de référence sur GitHub.
- Quiz de connaissancesVérification des connaissances — Module 1 · 12 min · Note de réussite 80%
- Lab pratiqueLab — Refactorisation vers une architecture de production · 40 min
Objectif: Restructurez l’application TicketOps écrite par un junior en une solution prête pour la production : des dossiers Views, Controls, Services, Domain, Data, Infrastructure, Resources et Diagnostics ; une interface ITicketService avec une implémentation TicketService simulée ; des gestionnaires d’événements légers qui appellent le service ; et une courte note d’architecture expliquant où placer le nouveau code.
Module 2: Démarrage, configuration, état de session et cycle de vie de l’application
Module 2 du cours Architecture de production en profondeur. Lisez le guide de la leçon et le guide des concepts appliqués, regardez la vidéo pas à pas sur SessionContext, réussissez la vérification des connaissances, puis construisez un SessionContext à portée de session et une page de diagnostic dans le lab pratique.
- LectureGuide de la leçon · 12 min
État de l’application, de la session, de l’utilisateur, de l’onglet du navigateur ou de la requête — et pourquoi une session ressemble davantage à une instance d’application de bureau qu’à un compte utilisateur.
- LectureGuide du lab / de l’examen · 12 min
Approfondissez l’état de session : un contexte à portée de session connecté sans champs statiques, le pipeline de démarrage et de configuration, et le piège des champs statiques.
- Leçon vidéoConstruire un SessionContext et une page de diagnostic · 8 min
Regardez l’état propre à chaque utilisateur quitter les champs statiques pour un SessionContext à portée de session, avec une page de diagnostic qui sépare les paramètres globaux des valeurs propres à la session. S’exécute directement dans le lecteur.
Transcription de la narration
Décidez comment l'application Wisej.NET démarre et où appartient son état avant d'ajouter d'autres flux de travail. Les choix de configuration et de durée de vie déterminent si l'écran de chaque utilisateur voit les données correctes à mesure que les sessions et les onglets changent.
Une session représente une interaction en cours, pas simplement l'identité d'une personne. Les actualisations, les reconnexions et les onglets multiples signifient qu'un utilisateur peut avoir plusieurs contextes. Les enregistrements sélectionnés ne doivent donc pas être automatiquement stockés en tant qu'état à l'échelle de l'utilisateur.
Pour chaque valeur, distinguez la propriété à l’échelle de l’application, de la session, de l’utilisateur et de l’onglet. Demandez qui doit observer un changement et quand il doit disparaître ; ces réponses guident la vie de manière plus fiable que la commodité d’un champ mondial.
Examinez Default.json dans le cadre du déploiement, y compris le thème, le délai d'expiration, les limites de session client, la validation et la culture. Ces paramètres influencent le comportement d'exécution, ils nécessitent donc des valeurs délibérées et révisés parallèlement au code de l'application.
Les champs statiques ordinaires sont partagés entre les sessions même si Wisej.NET fournit un accès compatible avec les sessions via l'application. N’en déduisez pas que votre propre champ statique de ticket sélectionné bénéficie de la même isolation ; il peut exposer la valeur d'une autre session.
Placez les valeurs appartenant à la session dans un contexte de session ou dans le stockage de session fourni par Wisej.NET. Chaque session possède alors sa propre instance, ce qui rend l'isolation souhaitée visible dans la conception plutôt que de s'appuyer sur des conventions de dénomination.
Définissez le contexte de la session avec un identifiant de session, un utilisateur actuel et un ticket sélectionné. Le regroupement de ces valeurs associées indique clairement le contexte qu'un formulaire ou un service utilise lorsqu'il gère une opération.
Transmettez le contexte aux formulaires et aux services qui en ont besoin. Le gestionnaire de sélection de tickets écrit dans ce contexte, donc sa dépendance est visible et la sélection appartient à la session en cours au lieu d'une variable globale partagée.
Sélectionnez un ticket dans l'application en cours d'exécution et lisez l'état spécifique à la session. Confirmez que la sélection affichée provient du contexte actuel ; c'est le résultat visible de la décision de propriété prise plus tôt.
Continuez à appliquer la même discipline tout au long du TicketOps : écrans concevables, noms compréhensibles, limites de service et pannes visibles. Une appropriation claire par l’État complète ces pratiques en facilitant l’examen des comportements au cours de plusieurs sessions.
- LectureExercice de code avec l’IA · 20 min
Construisez l’exemple TicketOps de ce module avec ChatGPT ou Claude à partir d’un prompt prêt à l’emploi qui oriente le modèle vers la spécification du module, puis relisez, exécutez et étendez ce qu’il vous renvoie — y compris en le comparant à notre propre solution de référence sur GitHub.
- Quiz de connaissancesVérification des connaissances — Module 2 · 12 min · Note de réussite 80%
- Lab pratiqueLab — SessionContext et audit de l’état statique · 40 min
Objectif: Un SessionContext à portée de session pour la TicketOps Console : enregistré avec une durée de vie de session, injecté dans les Forms et les services, affichant l’ID de session, l’utilisateur, le tenant, le thème et le profil client, plus une page de diagnostic qui sépare les paramètres globaux de l’application des valeurs propres à la session — et un audit de l’état statique appliqué à l’application existante.
Module 3: Mises en page responsives, profils client et composition d’UI réutilisable
Module 3 du cours Architecture de production en profondeur. Lisez le guide de la leçon et le guide des concepts appliqués, regardez la vidéo pas à pas sur l’espace de travail responsive, réussissez la vérification des connaissances, puis construisez un Ticket Workspace responsive avec des Client Profiles dans le lab pratique.
- LectureGuide de la leçon · 12 min
Choisissez les moteurs de mise en page selon l’intention — Dock/Anchor pour les panneaux de bureau, Table pour les grilles de formulaire, Flow pour le contenu qui se replie, Flex pour les zones proportionnelles.
- LectureGuide du lab / de l’examen · 12 min
Approfondissez l’interface responsive : imbriquer les moteurs de mise en page, réagir aux changements de Client Profile et construire des UserControls réutilisables pour le Ticket Workspace.
- Leçon vidéoConstruire un Ticket Workspace responsive · 8 min
Regardez un même Ticket Workspace s’adapter aux profils bureau, tablette et téléphone grâce aux moteurs de mise en page, aux Client Profiles et aux UserControls réutilisables. S’exécute directement dans le lecteur.
Transcription de la narration
Adaptez l'espace de travail de tickets à l'ordinateur de bureau, à la tablette et au téléphone en préservant la tâche à chaque taille. La mise en page doit modifier la façon dont les informations sont organisées sans que les utilisateurs perdent l'enregistrement ou l'action sur laquelle ils travaillent.
Commencez par ce que les opérateurs doivent comparer, lire et agir ensemble. Les panneaux qui se chevauchent ne sont pas simplement en désordre ; ils peuvent masquer le message ou l’enregistrement qui donne son sens à une action.
Choisissez les conteneurs en fonction de leur tâche : fixation des bords, alignement tabulaire, éléments fluides ou distribution flexible. Faire correspondre le mécanisme de disposition à la relation souhaitée est plus fiable que de positionner manuellement chaque contrôle pour chaque largeur.
Regroupez les sections d'interface répétées dans UserControls qui restent utilisables dans le concepteur. Une barre de recherche partagée donne à plusieurs écrans une disposition et un comportement maintenables, tandis que l'espace de travail compose ces parties en une tâche plus vaste.
Utilisez ClientProfiles.json pour décrire les profils qui génèrent des modifications de propriétés côté serveur. Un profil est une règle d'adaptation délibérée, alors gardez son effet compréhensible plutôt que de disperser les contrôles de largeur dans des gestionnaires d'événements non liés.
Appliquez le profil actif dans un seul gestionnaire : masquez la navigation, déplacez l'activité dans un onglet et exposez une action de retour si nécessaire. La centralisation de ces changements coordonnés rend chaque mode de mise en page plus facile à comprendre et à vérifier.
Testez le même flux de travail sur chaque largeur. Le bureau affiche le contexte complet, la tablette déplace l'activité dans un onglet et le téléphone se concentre sur une tâche ; vérifiez que les utilisateurs peuvent toujours accéder aux informations et aux actions dont ils ont besoin.
Fournissez ensemble l’espace de travail, les profils, les notes de profil et la barre de recherche réutilisable. Expliquez ce que chaque profil change et pourquoi, afin que le prochain développeur puisse préserver le flux de travail lors de l'ajout d'un autre panneau ou écran.
- LectureExercice de code avec l’IA · 20 min
Construisez l’exemple TicketOps de ce module avec ChatGPT ou Claude à partir d’un prompt prêt à l’emploi qui oriente le modèle vers la spécification du module, puis relisez, exécutez et étendez ce qu’il vous renvoie — y compris en le comparant à notre propre solution de référence sur GitHub.
- Quiz de connaissancesVérification des connaissances — Module 3 · 12 min · Note de réussite 80%
- Lab pratiqueLab — Espace de travail de tickets responsive · 40 min
Objectif: Un UserControl TicketWorkspace responsive pour la TicketOps Console : tous les panneaux à la fois sur bureau, le panneau d’activité replié dans un onglet sur tablette, et une vue unique orientée tâche avec un bouton retour sur téléphone — piloté par ClientProfiles.json / ResponsiveProfileChanged, avec un contrôle SearchBar réutilisable.
Module 4: Liaison de données, DataGridView et workflows orientés données
Module 4 du cours Architecture de production en profondeur. Lisez le guide de la leçon et le guide des concepts appliqués, regardez la vidéo pas à pas sur la liaison de données, réussissez la vérification des connaissances, puis construisez la grille des Work Orders et la vue maître-détail dans le lab pratique.
- LectureGuide de la leçon · 12 min
Utilisez BindingSource, BindingList<T>, INotifyPropertyChanged, la mise en forme des grilles, le filtrage, les flux maître-détail et les modèles d’enregistrement/annulation pour les écrans de données métier.
- LectureGuide du lab / de l’examen · 12 min
Approfondissez la liaison de données : un modèle Work Order observable, le câblage BindingSource vers grille, la mise en forme des colonnes, le filtrage, la synchronisation maître-détail et un Save/Cancel propre.
- Leçon vidéoConstruire une grille de Work Orders liée aux données · 8 min
Une vidéo pas à pas guidée sur la liaison de données, à exécuter directement dans le lecteur.
Transcription de la narration
Connectez la liste et l'éditeur TicketOps afin que les utilisateurs puissent inspecter, modifier et enregistrer le même dossier commercial de manière cohérente. La liaison réduit la synchronisation manuelle, mais le flux de travail doit toujours définir la sélection, les modifications non enregistrées et enregistrer les résultats.
Une liaison connecte une propriété de modèle à une propriété de contrôle, tandis que BindingSource coordonne l'élément actuel. Utilisez cette source partagée pour la liste et les détails afin qu'une modification de sélection mette constamment à jour le contexte de l'éditeur.
Les notifications de changement de propriété indiquent aux contrôles liés lorsqu'une valeur d'ordre de travail change. Une liste prenant en charge les liaisons signale les modifications de la collection séparément ; ensemble, ces notifications empêchent la grille de dépendre des actualisations manuelles après chaque modification ou ajout.
Connectez le réseau à un BindingSource et connectez cette source à la liste. Choisissez les colonnes délibérément. Conservez le formatage de l’affichage dans l’interface utilisateur, séparé des données et des règles métier.
Utilisez la recherche et le filtrage d'état pour affiner la liste, puis laissez la ligne sélectionnée déterminer l'enregistrement détaillé. Garder cette relation explicite aide les utilisateurs à comprendre exactement quel ordre de travail leur prochaine modification affectera.
Vérifiez si l'éditeur a des modifications non enregistrées. Cancel devrait restaurer les valeurs précédentes, tandis que Save tente de les valider ; en cas d'échec, signalez cet échec au lieu de laisser l'affichage lié impliquer que les données ont été conservées.
Fournissez le modèle, la configuration de la liaison, les gestionnaires de formatage, l'éditeur et validez ou annulez les notes. Le transfert doit expliquer comment un enregistrement sélectionné passe de l'affichage à l'édition, puis à un état enregistré ou restauré.
- LectureExercice de code avec l’IA · 20 min
Construisez l’exemple TicketOps de ce module avec ChatGPT ou Claude à partir d’un prompt prêt à l’emploi qui oriente le modèle vers la spécification du module, puis relisez, exécutez et étendez ce qu’il vous renvoie — y compris en le comparant à notre propre solution de référence sur GitHub.
- Quiz de connaissancesVérification des connaissances — Module 4 · 12 min · Note de réussite 80%
- Lab pratiqueLab — Grille d’ordres de travail et maître-détail · 40 min
Objectif: Créez une grille de Work Orders avec recherche, filtre par statut, éditeur maître-détail, suivi des modifications non enregistrées, Save/Cancel et colonnes mises en forme pour la priorité, l’utilisateur assigné, la date d’échéance et le coût. Livrables : Modèle WorkOrder observable ou view model ; Configuration de BindingSource ; Gestionnaires de mise en forme de la grille ; Éditeur maître-détail ; Notes sur le comportement de validation/annulation.
Module 5: Validation, gestion des erreurs dans l’UI et pipelines d’enregistrement sûrs
Module 5 du cours Architecture de production en profondeur. Lisez le guide de la leçon et le guide des concepts appliqués, regardez la vidéo pas à pas sur la validation, réussissez la vérification des connaissances, puis construisez la validation des Work Orders et le pipeline d’enregistrement dans le lab pratique.
- LectureGuide de la leçon · 12 min
Concevez la validation à la fois comme une expérience utilisateur et comme un mécanisme de sécurité métier, grâce à une validation centralisée, l’affichage des erreurs par champ, des contrôles côté serveur et des pipelines d’enregistrement cohérents.
- LectureGuide du lab / de l’examen · 12 min
Approfondissez la validation : des règles en couches, une commande d’enregistrement réutilisable, des erreurs par champ et récapitulatives, et un pipeline d’enregistrement sûr où le serveur est le vrai garde-fou.
- Leçon vidéoAjouter la validation et un pipeline d’enregistrement sûr · 8 min
Une vidéo pas à pas guidée sur la validation, à exécuter directement dans le lecteur.
Transcription de la narration
Demandez à l'éditeur de bon de travail d'expliquer les entrées non valides avant de tenter une sauvegarde non sécurisée. Le pipeline de validation relie les commentaires sur le terrain aux règles métier et à la persistance, afin que l'utilisateur sache ce qui doit changer et si quelque chose a été enregistré.
Distinguez les vérifications d’interface, la validité métier, les contraintes de persistance et l’autorisation. Chacun protège une frontière différente ; la désactivation de Enregistrer peut guider les utilisateurs, mais le service doit toujours rejeter une demande qui viole ses règles ou autorisations.
Placez chaque erreur à proximité du champ qui nécessite votre attention et rassemblez les problèmes dans un résumé. Utilisez un langage qui explique la correction, afin que les utilisateurs puissent localiser le problème sans comprendre l'exception ou la règle de base de données sous-jacente.
Collectez et validez l’entrée avant de créer la commande. Vérifiez les règles commerciales et l'autorisation avant d'enregistrer. Ce n'est qu'après une sauvegarde réussie que l'application doit actualiser l'écran et enregistrer le résultat.
Arrêtez-vous tôt lorsque la validation échoue, avant que la persistance ne commence. Si l'opération de stockage elle-même échoue, conservez les véritables détails du diagnostic dans le journal et expliquez clairement l'échec de la sauvegarde au lieu de présenter une erreur interne à l'utilisateur.
Appliquez le pipeline aux champs obligatoires, aux dates d'échéance, aux limites de coûts, aux transitions de statut et aux restrictions de rôle. Ces cas couvrent différentes couches, ce qui permet de vérifier que l'éditeur fait plus que vérifier si une zone de texte est vide.
Déclenchez une sauvegarde échouée et inspectez ensuite l’éditeur. Les modifications de l'utilisateur doivent rester disponibles, le message doit expliquer le problème et les détails internes doivent apparaître uniquement dans le journal afin que la récupération ne nécessite pas de retaper le travail.
Une bonne validation protège les données tout en aidant les utilisateurs à terminer leur travail. Préservez le contexte, expliquez les corrections et distinguez une entrée rejetée d'une sauvegarde échouée afin que l'action suivante soit claire.
- LectureExercice de code avec l’IA · 20 min
Construisez l’exemple TicketOps de ce module avec ChatGPT ou Claude à partir d’un prompt prêt à l’emploi qui oriente le modèle vers la spécification du module, puis relisez, exécutez et étendez ce qu’il vous renvoie — y compris en le comparant à notre propre solution de référence sur GitHub.
- Quiz de connaissancesVérification des connaissances — Module 5 · 12 min · Note de réussite 80%
- Lab pratiqueLab — Validation des ordres de travail et pipeline d’enregistrement · 40 min
Objectif: Ajoutez la validation à l’éditeur de Work Orders. Imposez les champs obligatoires, les règles de date d’échéance, la plage de coût, les transitions de statut valides et les restrictions selon le rôle. Affichez les erreurs par champ et un panneau récapitulatif. Livrables : Règles de validation ou validation du modèle ; Objet de commande d’enregistrement ; Panneau récapitulatif des erreurs ; Méthode de pipeline d’enregistrement sûr ; Cas de test de validation.
Module 6: Workflows modaux, objets de résultat de dialogue et UI transactionnelle
Module 6 du cours Architecture de production en profondeur. Lisez le guide de la leçon et le guide des concepts appliqués, regardez la vidéo pas à pas sur la boîte de dialogue d’approbation, réussissez la vérification des connaissances, puis construisez la boîte de dialogue d’approbation et son résultat typé dans le lab pratique.
- LectureGuide de la leçon · 12 min
Utilisez des formulaires modaux et des flux de dialogue pour les actions métier complexes : approbations, escalades, affectations, confirmations et transactions en plusieurs étapes.
- LectureGuide du lab / de l’examen · 12 min
Approfondissez les flux modaux : des objets de résultat de dialogue typés, la confirmation avant validation, et une action métier en plusieurs étapes traitée comme une seule transaction.
- Leçon vidéoConstruire un flux de dialogue d’approbation · 8 min
Une vidéo pas à pas guidée sur la boîte de dialogue d’approbation, à exécuter directement dans le lecteur.
Transcription de la narration
Utilisez une boîte de dialogue d'approbation pour rendre explicite la décision de l'utilisateur avant de modifier l'état de l'entreprise. L'écran recueille l'intention, renvoie un résultat structuré et donne au service un point clair à partir duquel l'exécution peut commencer.
L'ouverture d'un modal devrait marquer une véritable limite de décision dans le flux de travail. Les utilisateurs doivent comprendre ce qu'ils confirment et ce que signifie l'annulation avant que l'application n'effectue l'action consécutive.
Gardez le dialogue axé sur l’approbation ou le rejet, avec des commentaires et une confirmation ou une annulation explicite. Une seule décision facilite la validation du résultat et évite que des modifications non liées ne se transforment en effets secondaires cachés.
Attendez la boîte de dialogue et lisez son résultat d'approbation tapé au lieu d'inspecter ensuite les propriétés de contrôle sans rapport. Le résultat porte la décision comme un seul contrat, gardant l'appelant indépendant de la façon dont la boîte de dialogue organise ses champs.
Seul un résultat confirmé devrait déclencher la transaction de service. Garder l'exécution en dehors du dialogue signifie que les mêmes règles d'approbation restent dans les opérations commerciales plutôt que de dépendre de l'ouverture d'une fenêtre particulière.
Exiger des commentaires lorsque l'utilisateur refuse, car la raison fait partie de cette décision. Testez à la fois Annuler et le bouton de fermeture : aucun des deux ne doit émettre la commande de service ni modifier le dossier commercial.
Fournissez la boîte de dialogue, le résultat saisi, la commande de service, le diagramme de flux de travail et les cas de test. Affichez la confirmation, le rejet avec des commentaires et l'annulation afin que le transfert décrit à la fois l'action et les chemins qui n'apportent délibérément aucun changement.
- LectureExercice de code avec l’IA · 20 min
Construisez l’exemple TicketOps de ce module avec ChatGPT ou Claude à partir d’un prompt prêt à l’emploi qui oriente le modèle vers la spécification du module, puis relisez, exécutez et étendez ce qu’il vous renvoie — y compris en le comparant à notre propre solution de référence sur GitHub.
- Quiz de connaissancesVérification des connaissances — Module 6 · 12 min · Note de réussite 80%
- Lab pratiqueLab — Dialogue d’approbation et résultat typé · 40 min
Objectif: Construisez une boîte de dialogue d’approbation qui accepte ou rejette le Work Order sélectionné. Elle doit renvoyer un objet de résultat typé, exiger un commentaire en cas de rejet et n’appeler le service d’approbation qu’après confirmation. Livrables : Formulaire ApprovalDialog ; Classe ApprovalDialogResult ; Méthode d’ApprovalService ; Cas de test de type unitaire pour le traitement du résultat ; Diagramme du flux.
Module 7: Tâches en arrière-plan, mises à jour en temps réel et synchronisation
Module 7 du cours Architecture de production en profondeur. Lisez le guide de la leçon et le guide des concepts appliqués, regardez la vidéo pas à pas sur les tâches en arrière-plan, réussissez la vérification des connaissances, puis construisez l’import CSV en arrière-plan dans le lab pratique.
- LectureGuide de la leçon · 12 min
Utilisez les tâches en arrière-plan et le push serveur en temps réel pour exécuter des traitements longs, mettre à jour l’interface en toute sécurité, prendre en charge l’annulation et éviter de bloquer l’interface utilisateur.
- LectureGuide du lab / de l’examen · 12 min
Approfondissez le traitement en arrière-plan : s’exécuter hors du thread d’interface, renvoyer les mises à jour en toute sécurité, gérer l’annulation et signaler les erreurs ligne par ligne pour l’import CSV.
- Leçon vidéoExécuter un import CSV en arrière-plan · 8 min
Une vidéo pas à pas guidée sur les tâches en arrière-plan, à exécuter directement dans le lecteur.
Transcription de la narration
Importez des valeurs séparées par des virgules en arrière-plan tout en gardant l'écran réactif. Les utilisateurs doivent pouvoir voir les progrès, demander l'annulation et comprendre le rapport final sans se demander si l'application a cessé de répondre.
Une longue importation dans le gestionnaire de clics maintient la session occupée par ce travail. Le fait de sortir l'opération de l'interaction immédiate permet à l'écran de rester utile pendant que l'importation traite ses lignes.
Démarrez l'opération en arrière-plan avec Application.StartTask, puis revenez au contexte de session correct avant d'accéder aux contrôles. RunInContext établit cette limite, de sorte que le travail exécuté ailleurs ne met pas à jour les contrôles comme s'il appartenait déjà au contexte de l'interface.
Publiez les progrès réalisés à des étapes significatives et utilisez Application.Update pour apporter ces modifications au navigateur. Enregistrez les lignes invalides individuellement afin qu'un enregistrement incorrect puisse apparaître dans le rapport sans mettre inutilement fin à l'intégralité de l'importation.
Laissez Cancel demander l’annulation via le jeton d’annulation pendant que l’interface reste disponible. Le travailleur doit respecter cette demande aux endroits sécuritaires; appuyer sur le bouton devrait conduire à un résultat contrôlé, et non à une interruption inexpliquée.
Exécutez une autre importation jusqu’à la fin et comparez les résultats de réussite, d’annulation et d’erreur. Chaque chemin doit laisser les contrôles dans un état cohérent avec un rapport utile, afin que l'utilisateur puisse comprendre le résultat et commencer une autre opération.
Traitez le lancement, la progression, l'annulation et le reporting comme un seul flux de travail utilisateur. L'implémentation en arrière-plan réussit lorsque l'utilisateur reste informé et contrôle tout au long de l'opération, et pas seulement lorsque l'importation se termine.
- LectureExercice de code avec l’IA · 20 min
Construisez l’exemple TicketOps de ce module avec ChatGPT ou Claude à partir d’un prompt prêt à l’emploi qui oriente le modèle vers la spécification du module, puis relisez, exécutez et étendez ce qu’il vous renvoie — y compris en le comparant à notre propre solution de référence sur GitHub.
- Quiz de connaissancesVérification des connaissances — Module 7 · 12 min · Note de réussite 80%
- Lab pratiqueLab — Import CSV en arrière-plan · 40 min
Objectif: Implémentez une simulation d’import CSV qui s’exécute en arrière-plan, met à jour une barre de progression et un panneau de journal, prend en charge l’annulation et signale les erreurs ligne par ligne sans bloquer l’interface. Livrables : ImportService ; Lanceur de tâche en arrière-plan ; Interface de progression ; Gestion de l’annulation ; Notes sur la sécurité des threads.
Module 8: Services, injection de dépendances et modèles d’UI testables
Module 8 du cours Architecture de production en profondeur. Lisez le guide de la leçon et le guide des concepts appliqués, regardez la vidéo pas à pas sur l’injection de dépendances, réussissez la vérification des connaissances, puis injectez des services dans l’interface dans le lab pratique.
- LectureGuide de la leçon · 12 min
Utilisez l’enregistrement de services de Wisej.NET, les services à portée de session, l’injection par propriété, l’injection par constructeur pour les services, et des modèles simples de presenter et de service applicatif.
- LectureGuide du lab / de l’examen · 12 min
Approfondissez les services et l’injection de dépendances : des interfaces propres avec profils simulé et de production, le choix des durées de vie des services, et un presenter qui rend un écran testable.
- Leçon vidéoInjecter des services pour une interface testable · 8 min
Une vidéo pas à pas guidée sur l’injection de dépendances, à exécuter directement dans le lecteur.
Transcription de la narration
Laissez les écrans déclarer les services dont ils ont besoin via l’injection de dépendances. Cela sépare leur travail des décisions de construction, permettant à la même interface d'utiliser une implémentation de démonstration maintenant et une implémentation de production plus tard.
Définissez des interfaces pour les fonctionnalités consommées par l'écran, telles que les tickets, les utilisateurs, les autorisations, les notifications et l'audit. Ces contrats doivent décrire les opérations utiles plutôt que d'exposer les classes internes ou les choix de stockage derrière chaque service.
Enregistrez les faux services dans Application.Services et choisissez délibérément leur durée de vie. L'attribut injection fournit ensuite les dépendances de la page, vous permettant d'exercer le contrat de service avant de connecter l'infrastructure réelle.
Déplacez les décisions de coordination de l'écran vers un présentateur, laissant les commandes responsables de l'interaction et de l'affichage. Les requêtes de base de données, les décisions d'autorisation et les règles multi-écrans deviennent alors plus faciles à inspecter sans naviguer dans l'arborescence de contrôle visuel.
Comparez les durées de vie partagées, de session, de thread et transitoires avec ce que le service stocke. Tout ce qui est spécifique à l'utilisateur nécessite la portée de session appropriée ; un enregistrement partagé pratique ne doit pas transformer le contexte d'un utilisateur en dépendance d'un autre utilisateur.
Remplacez le faux enregistrement par une implémentation de production qui remplit la même interface. L'écran devrait continuer à appeler les mêmes opérations, démontrant que les changements d'infrastructure ne nécessitent pas de réécrire la logique d'interaction.
Il est plus facile de raisonner sur les dépendances lorsqu'elles sont déclarées, remplaçables et correctement définies. Un réviseur doit être capable de voir ce dont un écran a besoin et de tester ces interactions sans construire l'intégralité de l'environnement de production.
- LectureExercice de code avec l’IA · 20 min
Construisez l’exemple TicketOps de ce module avec ChatGPT ou Claude à partir d’un prompt prêt à l’emploi qui oriente le modèle vers la spécification du module, puis relisez, exécutez et étendez ce qu’il vous renvoie — y compris en le comparant à notre propre solution de référence sur GitHub.
- Quiz de connaissancesVérification des connaissances — Module 8 · 12 min · Note de réussite 80%
- Lab pratiqueLab — Injecter des services dans l’UI · 40 min
Objectif: Restructurez l’application pour utiliser des services injectés pour les tickets, les utilisateurs, les permissions, les notifications et la journalisation d’audit. Ajoutez un profil d’enregistrement de services simulés et un profil d’enregistrement de production. Livrables : Méthode d’enregistrement des services ; Cinq interfaces et leurs implémentations simulées ; MainPage/Form injecté ; Presenter ou service de workflow pour un écran ; Tableau des durées de vie des services.
Module 9: Intégration JavaScript, interop avec Widget et améliorations côté client
Module 9 du cours Architecture de production en profondeur. Lisez le guide de la leçon et le guide des concepts appliqués, regardez la vidéo pas à pas sur l’interopérabilité JavaScript, réussissez la vérification des connaissances, puis construisez des raccourcis clavier et l’interopérabilité avec le presse-papiers dans le lab pratique.
- LectureGuide de la leçon · 12 min
Utilisez JavaScript en toute sécurité là où il apporte de la valeur : raccourcis, comportement des widgets, bibliothèques externes, API du navigateur et callbacks serveur/client, sans transformer l’application en SPA fragile.
- LectureGuide du lab / de l’examen · 12 min
Approfondissez l’interopérabilité JavaScript : raccourcis clavier, aller-retour du callback du client vers le serveur, et une note de sécurité pour chaque point d’interopérabilité.
- Leçon vidéoAjouter une interopérabilité JavaScript sûre · 8 min
Une vidéo pas à pas guidée sur l’interopérabilité JavaScript, à exécuter directement dans le lecteur.
Transcription de la narration
Ajoutez un raccourci clavier et une aide au presse-papiers en tant qu'améliorations ciblées du navigateur. Les exemples montrent comment l'interaction locale peut devenir plus rapide alors que le serveur contrôle toujours le contenu du lien et enregistre l'opération.
Utilisez JavaScript pour le comportement côté navigateur, tel que les raccourcis, les interactions avec les widgets et les interfaces de programmation du navigateur. Donnez-lui une amélioration spécifique tout en conservant les décisions commerciales dans l'application côté serveur où elles restent exécutoires.
Conservez le script dans une source nommée et maintenable et attachez-le uniquement une fois le widget existant. Une ressource intégrée ou JavaScriptSource facilite la localisation du comportement, tandis qu'une synchronisation correcte du cycle de vie lui donne une cible valide.
Gérez Control K dans le navigateur pour concentrer immédiatement la recherche globale. Étant donné que cette action change uniquement le focus, elle n'a pas besoin d'un aller-retour du serveur avant que l'utilisateur puisse commencer à saisir une requête.
Créez le lien sécurisé sur le serveur, puis appelez le comportement du presse-papiers via Application.Eval et enregistrez l'action. Le navigateur effectue l'interaction locale avec le presse-papiers tandis que l'application conserve le contrôle de ce qui est partagé.
Documentez quelles données vont à JavaScript, quel résultat revient et quelles décisions restent sur le serveur. Cette limite rend l'amélioration plus facile à examiner et empêche un navigateur d'acquérir discrètement une autorité commerciale.
Gardez chaque script suffisamment petit pour que son objectif et ses limites soient évidents. Le comportement ciblé du navigateur est plus facile à maintenir lorsqu'il complète le flux de travail Wisej.NET et ne devient pas un lieu alternatif pour les règles métier.
- LectureExercice de code avec l’IA · 20 min
Construisez l’exemple TicketOps de ce module avec ChatGPT ou Claude à partir d’un prompt prêt à l’emploi qui oriente le modèle vers la spécification du module, puis relisez, exécutez et étendez ce qu’il vous renvoie — y compris en le comparant à notre propre solution de référence sur GitHub.
- Quiz de connaissancesVérification des connaissances — Module 9 · 12 min · Note de réussite 80%
- Lab pratiqueLab — Raccourcis clavier et interop avec le presse-papiers · 40 min
Objectif: Ajoutez des raccourcis clavier côté client et un utilitaire de presse-papiers du navigateur. Utilisez JavaScript pour détecter Ctrl+K et donner le focus à la zone de recherche globale, et ajoutez une action de copie dans le presse-papiers confirmée par le serveur pour le lien du ticket sélectionné. Livrables : Script incorporé ou JavaScriptSource ; Méthode C# qui déclenche le comportement côté client ; Gestionnaire du callback serveur ; Note de sécurité pour chaque point d’interopérabilité.
Module 10: Thèmes, ressources, localisation et modernisation de l’UI
Module 10 du cours Architecture de production en profondeur. Lisez le guide de la leçon et le guide des concepts appliqués, regardez la vidéo pas à pas sur les thèmes, réussissez la vérification des connaissances, puis construisez un tableau de bord thématisé et localisé dans le lab pratique.
- LectureGuide de la leçon · 12 min
Modernisez les applications Wisej.NET grâce aux thèmes, à CSSStyle, aux ressources, aux icônes, au changement de thème à l’exécution, à la localisation et à des règles de cohérence visuelle.
- LectureGuide du lab / de l’examen · 12 min
Approfondissez les thèmes : bascule clair/sombre à l’exécution, pastilles de statut réutilisables via CSSStyle, gestion des ressources et localisation tenant compte de la culture.
- Leçon vidéoThématiser et localiser le tableau de bord · 8 min
Une vidéo pas à pas guidée sur les thèmes, à exécuter directement dans le lecteur.
Transcription de la narration
Modernisez le tableau de bord grâce à des règles visuelles partagées et un contenu adapté à la culture. Un thème cohérent, un affichage d'état réutilisable et un formatage localisé aident les utilisateurs à reconnaître le même flux de travail même lorsque sa langue et l'espace disponible changent.
Mettez de larges choix d’apparence dans le thème avant d’ajouter des exceptions spécifiques aux contrôles. Les règles centrales permettent à un ajustement visuel d'atteindre l'ensemble de l'application, tandis que les remplacements locaux dispersés rendent le même changement plus difficile à appliquer de manière cohérente.
Créez une puce d'état UserControl pour posséder son texte, sa couleur et son espacement. La réutilisation de ce composant empêche les écrans d’inventer différentes significations visuelles pour le même statut et donne aux ajustements futurs un seul endroit où vivre.
Stockez les étiquettes destinées aux utilisateurs dans les ressources et formatez les dates et l'argent à travers la culture sélectionnée. La traduction et le formatage résolvent différents problèmes, donc changer de langue doit également produire des valeurs que les utilisateurs peuvent interpréter correctement.
Changez de culture dans le tableau de bord actuel et inspectez à la fois l'ajustement du texte et les valeurs formatées. Des étiquettes allemandes plus longues peuvent révéler des hypothèses de mise en page, tandis que les dates et les devises modifiées révèlent si le formatage suit la culture sélectionnée plutôt que le texte codé en dur.
Examinez ensemble l’espacement, la hiérarchie, le contraste, les icônes, les messages d’état et les exceptions de thème. Ces contrôles relient la cohérence visuelle à la lecture et à l'action pratiques, aidant ainsi à identifier un écran attrayant qui masque encore des informations importantes.
Un tableau de bord soigné conserve sa signification quels que soient les écrans et les cultures. Les composants et ressources partagés permettent de maintenir la cohérence, tandis que le test de mises en page réelles traduites confirme que la conception prend toujours en charge la tâche de l'utilisateur.
- LectureExercice de code avec l’IA · 20 min
Construisez l’exemple TicketOps de ce module avec ChatGPT ou Claude à partir d’un prompt prêt à l’emploi qui oriente le modèle vers la spécification du module, puis relisez, exécutez et étendez ce qu’il vous renvoie — y compris en le comparant à notre propre solution de référence sur GitHub.
- Quiz de connaissancesVérification des connaissances — Module 10 · 12 min · Note de réussite 80%
- Lab pratiqueLab — Tableau de bord thématisé et localisé · 40 min
Objectif: Créez un tableau de bord d’exploitation soigné avec une bascule de thème clair/sombre, des pastilles de statut cohérentes, des libellés localisés pour au moins deux cultures et une mise en forme des dates et des montants selon la culture. Livrables : Interface de bascule de thème ; UserControl de pastille de statut ; Fichiers de ressources ou notes de localisation ; Checklist de modernisation de l’interface appliquée à deux écrans.
Module 11: Sécurité, authentification, autorisation et frontières serveur sûres
Module 11 du cours Architecture de production en profondeur. Lisez le guide de la leçon et le guide des concepts appliqués, regardez la vidéo pas à pas sur la sécurité, réussissez la vérification des connaissances, puis construisez l’authentification, l’autorisation et l’audit dans le lab pratique.
- LectureGuide de la leçon · 12 min
Construisez des applications Wisej.NET sécurisées en gardant la confiance côté serveur, en assainissant les chemins d’affichage dangereux, en gérant l’authentification, en appliquant l’autorisation dans les services et en documentant les paramètres de sécurité du déploiement.
- LectureGuide du lab / de l’examen · 12 min
Approfondissez la sécurité : une autorisation appliquée par le serveur, pourquoi un bouton désactivé n’est pas un contrôle de sécurité, la gestion sûre du HTML et la journalisation d’audit.
- Leçon vidéoAjouter l’authentification et l’autorisation · 8 min
Une vidéo pas à pas guidée sur la sécurité, à exécuter directement dans le lecteur.
Transcription de la narration
Appliquez les actions sensibles dans le service qui les exécute. Ce module utilise l'interface pour guider les utilisateurs légitimes tout en prouvant que le serveur rejette les demandes non autorisées même lorsque les commandes de l'écran sont manipulées.
Établissez l’identité de la session avant d’autoriser le démarrage des flux de travail sensibles. L'authentification fournit la réponse fiable sur qui agit, que les contrôles d'autorisation ultérieurs utilisent pour décider si cette personne peut effectuer une opération.
Autorisez à la limite d’exécution et auditez à la fois le succès et le refus. Un enregistrement des tentatives rejetées est important aux côtés des actions terminées, car il explique pourquoi une demande n'a apporté aucun changement et soutient l'enquête sur une utilisation abusive.
Forcez le bouton à passer à un état activé et essayez l'action restreinte. Le service doit toujours le refuser, démontrant qu’un paramètre d’interface utile n’est pas le mécanisme protégeant l’opération sous-jacente.
Encodez le texte fourni par l’utilisateur avant de le placer sur des surfaces capables d’interpréter le balisage. Examinez délibérément chaque chemin AllowHtml afin que le contenu destiné à être des données ne puisse pas devenir de manière inattendue une structure de page exécutable ou active.
Auditez les actions importantes et inspectez les paramètres de session, de cookie, de téléchargement, de journalisation et de politique de sécurité du contenu environnants. Ces vérifications complètent les autorisations de service en examinant la façon dont l'identité, le contenu entrant et les informations de diagnostic transitent par l'application.
Le serveur doit être capable de rejeter une requête non sécurisée, quelle que soit la manière dont elle a atteint l'application. Une identité claire, des contrôles d'autorisation au niveau du service, une sortie sécurisée et des enregistrements d'audit significatifs travaillent ensemble pour faire respecter cette limite.
- LectureExercice de code avec l’IA · 20 min
Construisez l’exemple TicketOps de ce module avec ChatGPT ou Claude à partir d’un prompt prêt à l’emploi qui oriente le modèle vers la spécification du module, puis relisez, exécutez et étendez ce qu’il vous renvoie — y compris en le comparant à notre propre solution de référence sur GitHub.
- Quiz de connaissancesVérification des connaissances — Module 11 · 12 min · Note de réussite 80%
- Lab pratiqueLab — Authentification, autorisation et audit · 40 min
Objectif: Ajoutez une simulation d’authentification, une autorisation basée sur les rôles, des contrôles de permission côté serveur, une gestion sûre du HTML et une journalisation d’audit. Démontrez qu’une action non autorisée ne peut pas s’exécuter même si un contrôle de l’interface est activé manuellement. Livrables : Écran de connexion ; Service de permissions ; Contrôles d’autorisation au niveau des services ; Politique de texte/HTML sûr ; Checklist de sécurité.
Module 12: Déploiement, diagnostic, répartition de charge et livraison du projet de synthèse
Module 12 du cours Architecture de production en profondeur. Lisez le guide de la leçon et le guide des concepts appliqués, regardez la vidéo pas à pas sur le déploiement, réussissez la vérification des connaissances, puis préparez la mise en production et la livraison du projet de synthèse dans le lab pratique.
- LectureGuide de la leçon · 12 min
Préparez une application Wisej.NET pour le déploiement et l’exploitation : choix d’hébergement, health checks, journalisation, diagnostic, répartition de charge, notes de version et présentation du projet de synthèse.
- LectureGuide du lab / de l’examen · 12 min
Approfondissez le déploiement : compromis d’hébergement, health checks et diagnostic, sessions persistantes pour la répartition de charge, et un plan de mise en production et de retour arrière propre.
- Leçon vidéoPréparer le projet de synthèse pour la mise en production · 8 min
Une vidéo pas à pas guidée sur le déploiement, à exécuter directement dans le lecteur.
Transcription de la narration
Préparez TicketOps pour l’exploitation après la publication. Le projet final comprend les décisions d'hébergement, les preuves de santé, les diagnostics et les instructions de récupération afin que quelqu'un autre que le développeur puisse vérifier et prendre en charge l'application en cours d'exécution.
Choisissez la cible d'hébergement en vérifiant son effet sur la configuration, les journaux, la mise à l'échelle, l'identité et les connexions WebSocket. Ces exigences façonnent le plan de support, alors enregistrez-les avant de traiter la publication comme un déploiement terminé.
Exposez des informations de santé sécurisées via HealthCheck.json pour les moniteurs et les équilibreurs de charge. La réponse doit aider à déterminer si l'instance est utilisable sans révéler les informations d'identification ou d'autres détails de configuration dont les appelants opérationnels n'ont pas besoin.
Placez les informations sur l'environnement, l'état de la journalisation et les vérifications sur une page de diagnostics protégée par un rôle. Cela donne au personnel d'assistance autorisé un point de départ cohérent tout en limitant les informations affichées à ce qui est utile pour le fonctionnement de l'application.
Le serveur conserve l'état de session de chaque utilisateur. Configurez des sessions persistantes afin que l'équilibreur de charge maintienne cet utilisateur sur la bonne instance. Le déploiement doit également autoriser la connexion WebSocket de l'application.
Regroupez la liste de contrôle, les diagnostics, les notes de version, les notes de restauration et le script de démonstration. Le package doit expliquer ce qui a changé, comment le vérifier et comment le récupérer, afin que la version puisse être révisée par une autre personne.
Le projet final est prêt à passer le relais lorsque son fonctionnement est aussi compréhensible que ses écrans. Conservez les preuves de version avec l'application afin que le support et les modifications futures commencent à partir d'une base de référence partagée et documentée.
- LectureExercice de code avec l’IA · 20 min
Construisez l’exemple TicketOps de ce module avec ChatGPT ou Claude à partir d’un prompt prêt à l’emploi qui oriente le modèle vers la spécification du module, puis relisez, exécutez et étendez ce qu’il vous renvoie — y compris en le comparant à notre propre solution de référence sur GitHub.
- Quiz de connaissancesVérification des connaissances — Module 12 · 12 min · Note de réussite 80%
- Lab pratiqueLab — Mise en production et livraison du projet de synthèse · 40 min
Objectif: Préparez l’application du projet de synthèse pour la mise en production. Ajoutez HealthCheck.json, une page de diagnostic, une checklist de déploiement, des notes de version, des notes de retour arrière et un script de démonstration final. Livrables : HealthCheck.json ; Checklist de déploiement ; Page de diagnostic ; Notes de version ; Présentation du projet de synthèse / script de démonstration.