Blazor : créer des applications web riches et dynamiques (.NET 8)

Le framework UI de Microsoft pour des applications web et portables

5,01 avis Débutant 16 h 30 min Certificat de réussite
Blazor : créer des applications web riches et dynamiques (.NET 8)

Présentation

Bienvenue dans ce cours complet sur Blazor avec .NET 8 ! Au cours de cette formation, vous découvrirez tous les aspects de Blazor, depuis les fondamentaux jusqu'aux fonctionnalités avancées. Nous explorerons les trois variantes de Blazor, à savoir Blazor Web App, WebAssembly autonome et Hybrid avec MAUI, pour vous offrir une compréhension complète de ce framework de développement web moderne.

Nous commencerons par les bases de Blazor, y compris la création d'un projet, la mise en place de la structure des composants, la gestion des événements, la liaison de données et la création de composants. Nous examinerons également les outils et les fonctionnalités que .NET 8 met à notre disposition pour faciliter la création d'applications web avec Blazor. Nous y aborderons notamment la possibilité de mettre en commun les composants pour les utiliser dans des projets Blazor utilisant différents modèles d'hébergement. Après ce premier module, vous réaliserez votre premier projet en autonomie : le nombre magique !

Nous passerons ensuite aux fonctionnalités avancées de Blazor, telles que le cycle de vie, la création de services, la gestion de l'authentification et de l'autorisation, la mise en place de la sécurité, la communication avec JavaScript, les appels API et bien plus.

Nous explorerons en détails la variante Web App de Blazor en faisant un focus sur le fonctionnement serveur, qui utilise SignalR pour la communication entre le serveur et le client. Vous découvrirez comment configurer un serveur Blazor et comment gérer la communication entre le client et le serveur, ainsi que toutes les subtilités de Blazor Server.

Nous aborderons ensuite la variante WebAssembly de Blazor, qui permet d'exécuter du code C# directement dans le navigateur. Vous découvrirez comment configurer un projet Blazor WebAssembly et comment gérer les performances de votre application. Nous y découvrirons également la possibilité de compresser les projets avec la compilation en AOT (Ahead Of Time).

Enfin, nous verrons en détails la variante Hybrid de Blazor avec MAUI, qui permet de créer des applications mobiles multiplateformes avec .NET. Vous découvrirez comment créer une application hybride Blazor avec MAUI et comment utiliser les fonctionnalités spécifiques à MAUI pour créer une expérience utilisateur mobile native.

Tout au long de ce cours, nous améliorerons un projet en trois applications de gestion de photos :

  • Une application Blazor Web App avec l'interactivité serveur, qui servira d'interface d'administration des photos uploadées dans le système
  • Une application Blazor WebAssembly, qui servira de visionneuse des photos disponibles sur le système, ouverte à tout le monde
  • Une application Blazor Hybrid avec MAUI, qui servira d'utilitaire pour les photographes afin de pouvoir uploader leurs photos prises avec leur device et gérer leur portfolio

En bref, ce cours complet sur Blazor avec .NET 8 vous fournira toutes les connaissances et les compétences nécessaires pour créer des applications web et mobiles modernes et performantes avec Blazor.

Contenu du cours

96 leçons · 14 sections

Introduction 3 leçons · 31min
  • Introduction générale6:50
  • Les différentes variantes de Blazor17:22
  • Le projet que nous allons créer dans ce cours !6:54
Découverte de Blazor et ses variantes 11 leçons · 2h02min
  • Créer un projet Blazor avec Visual Studio 202211:53
  • Créer un projet Blazor avec le CLI (ligne de commandes)9:06
  • Composant statique et StreamRendering : le Server-Side-Rendering à la loupe11:17
  • L'abandon de l'attribut
  • Le fonctionnement de l'interactivité en mode Auto11:32
  • Découverte de Blazor Hybrid avec MAUI14:48
  • Librairie de composants Blazor - Composant statique11:58
  • Librairie de composants Blazor - Stream rendering13:45
  • Librairie de composants Blazor - Composant interactif7:50
  • Ajouter un composant routable dans la librairie13:01
  • Application Blazor Server en interactivité globale7:20
  • Application Blazor WebAssembly autonome10:27
TP 1 : le nombre magique 3 leçons · 29min
  • Énoncé5:22
  • Corrigé - part 116:30
  • Corrigé - part 27:26
Le cycle de vie d'un composant 8 leçons · 1h30min
  • Introduction au cycle de vie8:01
  • OnInitialized - Serveur13:43
  • OnInitialized - WASM, Auto & Hybrid13:23
  • Les paramètres (routing & composant)11:33
  • OnParametersSet10:35
  • OnAfterRender14:38
  • SetParametersAsync & BuildRenderTree12:02
  • Dispose6:18
TP 2 : Photo Explorer 3 leçons · 25min
  • TP PhotoExplorer - Énoncé4:07
  • TP PhotoExplorer - Corrigé (partie 1)7:16
  • TP PhotoExplorer - Corrigé (partie 2)14:24
Fondamentaux 10 leçons · 1h52min
  • La navigation optimisée en Blazor Web App .NET 87:30
  • Navigation statique (composant NavLink)7:51
  • Introduction aux services11:32
  • Durée de vie des services (Transient & Singleton)12:42
  • Services : Le cas particulier de Scoped11:20
  • Fondamentaux du NavigationManager13:24
  • Fonctionnalités avancées de la navigation15:38
  • Déterminer la variante de Blazor dans un composant9:42
  • Appels HTTP (WASM & Hybrid)14:33
  • Appels HTTP (Blazor Web App)7:57
TP 3 : Photo Explorer (v2) 3 leçons · 25min
  • Énoncé4:15
  • TP PhotoExplorer v2 - Corrigé (partie 1)10:27
  • TP PhotoExplorer v2 - Corrigé (partie 2)11:17
Les formulaires 7 leçons · 1h09min
  • Introduction aux formulaires10:02
  • La gestion côté serveur des formulaires9:50
  • La validation avec les attributs du framework12:43
  • L'utilisation du package FluentValidation10:30
  • Les différents types de champs de saisie9:56
  • Comprendre le data-binding7:35
  • Un cas spécial : InputFile8:47
TP 4 : Photo Explorer Mobile 4 leçons · 44min
  • Introduction7:00
  • Corrigé TP (part 1)15:20
  • Corrigé TP (part 2)13:16
  • Corrigé TP (part 3)8:25
Faire des composants professionnels 10 leçons · 1h23min
  • Gérer la configuration (Blazor Web App)7:16
  • Gérer la configuration (Blazor WASM)8:44
  • Gérer la configuration (Blazor Hybrid)7:44
  • Créer un composant templatisable8:27
  • Créer un composant templatisable générique6:41
  • Gérer les erreurs de rendu7:46
  • Interop JavaScript9:27
  • Appeler C# depuis JavaScript11:18
  • Découper son code JavaScript en modules8:02
  • Faire cascader un paramètre dans la hiérarchie8:18
TP 5 : Photo Explorer Pro 5 leçons · 41min
  • Énoncé3:34
  • Corrigé (partie 1)10:00
  • Corrigé (partie 2)7:00
  • Corrigé (partie 3)10:09
  • Corrigé (partie 4)11:09
  • Réaliser le TP avec une application Android
La sécurité 17 leçons · 2h50min
  • Configuration du fournisseur d'identité (Auth0)10:11
  • Configuration de l'application Blazor WASM Autonome9:37
  • Authentification (Blazor WASM autonome)8:14
  • Déconnexion (Blazor WASM autonome)6:37
  • Récupérer les informations de l'utilisateur (toutes les variantes)3:29
  • Configuration de l'application Blazor Server (interactivité serveur globale)11:22
  • Authentification (Blazor Server)6:26
  • Déconnexion (Blazor Server)10:18
  • Authentification (Blazor Auto - côté serveur)23:58
  • Authentification (Blazor Auto - côté client)11:07
  • Authentification (Blazor Hybrid)14:46
  • Partage des informations de login entre MAUI et Blazor3:53
  • Déconnexion (Blazor Hybrid)5:13
  • Appeler une API sécurisée depuis Blazor (problématique)12:26
  • Appeler une API sécurisée depuis Blazor (solution)12:10
  • Ajouter une information personnelle au token12:17
  • Gestion des droits dans le token8:19
TP 6 : Sécurité Photo Explorer 7 leçons · 1h24min
  • Énoncé8:23
  • Modifications et ressources10:07
  • Corrigé - Explorer (Blazor WASM)9:23
  • Corrigé - Manager (Blazor Server) - Partie 111:49
  • Corrigé - Manager (Blazor Server) - Partie 212:13
  • Corrigé - Mobile (Blazor Hybrid) - Partie 112:30
  • Corrigé - Mobile (Blazor Hybrid) - Partie 220:27
BONUS : Plus sur l'authentification 5 leçons · 59min
  • Mise en place du setup pour l'authentification serveur14:34
  • Création de compte Blazor Server10:02
  • Authentification Blazor Server13:51
  • Déconnexion Blazor Server (2 façons)10:37
  • Mise en place avec Blazor Auto (.NET 9)10:07

Avis sur le cours

5,0 1 avis
5 1
4 0
3 0
2 0
1 0
  • Mohamed IGUIDER 30 mars 2024

    Merci pour ce cours clair et pratique

Aperçu gratuit

Demande de devis entreprise

Accès à vie

167 €