L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Nouveau modèle de solution hybride et d’application Web .NET MAUI Blazor
Commencez dès maintenant avec le modèle .NET MAUI Blazor Hybrid et Web App, vous permettant de réutiliser des composants dans des projets Web et mobiles.
Nous sommes à deux pas de la sortie officielle de la version .NET 9 lors de la .NET Conf 2024, apportant avec elle plusieurs annonces importantes et de nouvelles fonctionnalités.
L’une des nouveautés qui plaira sûrement à de nombreux développeurs est la nouvelle .NET MAUI Blazor hybride et application Web modèle, qui vous permettra de réutiliser des composants dans des projets Web et mobiles. Dans cet article, je vais vous expliquer en quoi consiste ce nouveau modèle et comment vous pouvez commencer à l’utiliser pour vos futurs projets. Commençons !
Comment obtenir le nouveau modèle d’application hybride et Web .NET MAUI Blazor ?
Sans aucun doute, la première étape à suivre est de faire expérimenter le nouveau modèle. La manière la plus simple de procéder consiste à utiliser version préliminaire de Visual Studio 2022qui contient les versions préliminaires des futures versions de .NET.
Une chose importante à savoir est que lorsque vous installez la version d’aperçu, cette installation n’interférera pas avec les autres installations de Visual Studio dont vous disposez, il s’agit donc d’un processus sûr à exécuter.
Le programme d’installation est le même que celui de Visual Studio 2022, il vous suffit de vous assurer de sélectionner le Développement d’interface utilisateur d’application multiplateforme .NET MAUI charge de travail, comme le montre l’image suivante :
Une fois le processus d’installation terminé, vous serez prêt à explorer le modèle nouvellement installé.
Présentation du modèle
Une fois la version préliminaire de Visual Studio 2022 installée, vous pouvez démarrer le processus de création d’un nouveau projet, qui affichera les modèles disponibles en fonction des charges de travail sélectionnées lors de l’installation. Un moyen simple de trouver le nouveau modèle consiste à le filtrer via le Blazor hybride type de projet, comme indiqué ci-dessous :
L’étape suivante consiste à sélectionner le modèle pour configurer le nom et l’emplacement de la solution, pour ensuite passer au Informations Complémentaires fenêtre.
Il s’agit d’une fenêtre de configuration courante dans les projets Blazor, qui vous permet de sélectionner la version du Framework, si vous souhaitez utiliser HTTPS, le mode de rendu interactif, entre autres propriétés. Dans mon cas, je laisserai les valeurs par défaut comme indiqué ci-dessous :
Avec ces informations, vous pouvez cliquer sur le Créer bouton pour créer le nouveau projet.
Une fois la solution créée, vous verrez qu’elle est composée de trois projets, contrairement à un Application hybride .NET MAUI Blazor projet qui ne consistait qu’en un seul projet.
Structure du modèle
Regardons un peu plus en détail les projets qui ont été créés avec ce nouveau modèle.
Premièrement, nous avons un projet avec le .Shared fin. Ce projet est celui qui nous permettra de créer et d’héberger des composants pouvant être partagés à la fois pour l’application .NET MAUI et le projet Blazor. C’est un grand avantage dans le monde du développement .NET, car pour la première fois, nous pourrons créer des projets qui ciblent à la fois les appareils mobiles et les navigateurs Web tout en réutilisant au maximum le code via les composants Razor.
Dans le projet exemple, vous pouvez voir que ce composant contient les Layouts de l’application, un ensemble de pages Razor, le fichier de routage et la définition du IFormFactor interface, qui sera réutilisée à partir des autres projets :
Deuxièmement, nous voyons un projet avec le .Web fin. Ce projet est le projet Blazor que nous pouvons exécuter dans un navigateur Web grâce au mode de rendu interactif sélectionné dans l’écran de configuration.
Au sein de ce projet, vous pouvez voir des composants spécifiques au projet Blazor, comme le fichier qui sert de point d’entrée App.razorle composant de gestion des erreurs Error.razor et le fichier d’initialisation Program.cs. De plus, vous pouvez remarquer qu’il y a également une référence au Shared projet dans la section dépendances :
Enfin, le projet qui porte le même nom que la solution (sauf si vous avez modifié le nom du projet) est le projet .NET MAUI. Ce projet a des configurations pour cibler différentes plateformes telles qu’Android, iOS, Windows, entre autres.
Dans ce projet, on peut remarquer des choses intéressantes, comme le fait qu’il existe un dossier appelé wwwroot avec les fichiers index.html et app.cssqui servent à restituer les composants Blazor. De plus, il y a une référence au Shared projet de chaque bibliothèque de chaque plateforme (dans l’image ci-dessous je montre uniquement celui d’Android), ainsi qu’un Components dossier où l’on pourrait ajouter des composants spécifiques au projet mobile :
Fonctionnement de l’exemple de projet
Maintenant que vous savez comment est composé l’exemple de projet, examinons plus en profondeur comment accéder aux fonctionnalités de chaque plateforme grâce à l’exemple de code.
Plus tôt, j’ai mentionné que le projet Shared définit un IFormFactor interface qui a la structure suivante :
public interface IFormFactor
{
public string GetFormFactor();
public string GetPlatform();
}
C’est cette interface qui définit quelles méthodes seront implémentées sur chaque plateforme, à la fois Blazor et .NET MAUI.
Dans le projet Blazor, vous pouvez voir que dans le Services dossier, il y a un FormFactor.cs fichier qui ressemble à ceci :
public class FormFactor : IFormFactor
{
public string GetFormFactor()
{
return "Web";
}
public string GetPlatform()
{
return Environment.OSVersion.ToString();
}
}
Cette classe renvoie une chaîne avec la valeur Web à travers le GetFormFactor méthode pour représenter que nous exécutons le projet Blazor, en plus d’obtenir la version du système d’exploitation via le OSVersion propriété dans le GetPlatform méthode.
En revanche, dans le projet .NET MAUI au sein du Services dossier, il y a aussi un FormFactor classe qui a la structure suivante :
public class FormFactor : IFormFactor
{
public string GetFormFactor()
{
return DeviceInfo.Idiom.ToString();
}
public string GetPlatform()
{
return DeviceInfo.Platform.ToString() + " - " + DeviceInfo.VersionString;
}
}
Dans cette classe, nous utilisons le DeviceInfo classe, qui permet d’obtenir des informations sur la plateforme sur laquelle l’application est exécutée. Dans cet exemple, le Idiom la propriété est utilisée dans le GetFormFactor méthode pour savoir sur quel type d’appareil l’application est exécutée. Et au sein du GetPlatform méthode, le Platform et VersionString les propriétés sont utilisées pour connaître le système d’exploitation et sa version respective.
Lors de l’exécution de l’application Blazor, nous obtenons le résultat suivant :
En revanche, si nous sélectionnons le projet .NET MAUI comme initial et spécifions une plateforme de démarrage, par exemple Android, nous obtiendrons le résultat suivant :
Sans aucun doute, pouvoir réutiliser des composants entre les deux plates-formes est passionnant et encouragera davantage de développeurs à emprunter cette voie pour déployer leurs solutions sur les plates-formes les plus connues et les plus utilisées aujourd’hui.
Création d’une application de génération d’images avec le modèle Flux partageant les composants Telerik dans Blazor et .NET MAUI
Le moment est venu de se mettre au travail pour créer un projet de générateur d’images intéressant, en utilisant le modèle Schnell FLUX.1, super réaliste et puissant. De plus, nous allons utiliser les composants de l’interface utilisateur Progress Telerik, qui nous permettent d’utiliser des contrôles pré-créés pour un développement simple et agile.
Pour commencer, vous devez créer un nouveau projet en sélectionnant le .NET MAUI Blazor hybride et application Web modèle. Ensuite, nous allons nous concentrer sur la configuration du Shared projet.
Configuration du projet partagé pour ajouter le composant générateur d’images
Une fois que nous aurons créé le nouveau projet, nous allons ajouter la référence des contrôles Telerik au .Shared projet, selon l’un des méthodes d’installation. Dans mon cas, j’ai choisi d’ajouter le package Telerik NuGet au projet.
Ensuite, nous ouvrons le _Imports.razor fichier pour ajouter les espaces de noms globaux et ne pas avoir à les référencer dans chaque composant, ce qui se termine comme suit :
@* required *@
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.SvgIcons
@using Telerik.FontIcons
@* optional *@
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
Une fois le fichier d’espace de noms prêt, l’étape suivante consiste à créer notre propre composant Razor, que vous pouvez ajouter en cliquant avec le bouton droit sur le fichier. Pages dossier dans le projet avec le .Commun fin | Ajouter | Composant de rasoir. J’ai appelé le nouveau composant FluxGeneratormais vous pouvez le nommer comme vous le souhaitez.
Création du nouveau composant
Une fois le nouveau composant créé, remplacez-le par le code suivant :
@page "/flux"
@using System.Text.Json
@using System.Net.Http.Headers
@using System.Text
@using Telerik.Blazor.Components
<div class="container py-5">
<h1 class="text-center mb-5">AI Image Generator</h1>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card custom-shadow">
<div class="card-body">
<div class="mb-4">
<label for="prompt" class="form-label">Describe the image you want to generate:</label>
<textarea class="form-control" id="prompt" rows="3" @bind="prompt" placeholder="E.g.: A cat astronaut floating in space with Earth in the background"></textarea>
</div>
<div class="d-grid">
<button class="btn btn-primary btn-lg" type="button" id="generateBtn" @onclick=GenerateImage disabled="@isLoading">Generate Image</button>
</div>
</div>
</div>
<div class="card mt-4 custom-shadow">
<div class="card-body">
<h5 class="card-title mb-3">Generated Image</h5>
<div class="text-center">
@if (isLoading)
{
<TelerikLoader Visible="@isLoading"
Size="@ThemeConstants.Loader.Size.Large"
ThemeColor="@ThemeConstants.Loader.ThemeColor.Tertiary"
Type="@LoaderType.ConvergingSpinner" />
}
else if (!string.IsNullOrEmpty(imageUrl))
{
<div class="flex-center">
<TelerikCard>
<CardImage Src="@imageUrl"></CardImage>
<CardBody>
<CardTitle>Used prompt:</CardTitle>
<CardSeparator></CardSeparator>
<p>@prompt</p>
</CardBody>
<CardActions Layout="@CardActionsLayout.Stretch">
<TelerikButton FillMode="@(ThemeConstants.Button.FillMode.Flat)" Icon="@SvgIcon.HeartOutline">Like</TelerikButton>
<TelerikButton FillMode="@(ThemeConstants.Button.FillMode.Flat)">Share</TelerikButton>
<TelerikButton FillMode="@(ThemeConstants.Button.FillMode.Flat)">Read More</TelerikButton>
</CardActions>
<CardFooter Class="k-hbox justify-space-between">
<span>Created by @@hprez</span>
<span>@DateTime.Now.ToShortDateString()</span>
</CardFooter>
</TelerikCard>
</div>
}
else
{
<p>No image generated yet.</p>
}
</div>
</div>
</div>
</div>
</div>
</div>
@code {
private string prompt = "";
private string imageUrl = "";
private bool isLoading = false;
private DateTime StartDate = new DateTime(2019, 5, 2);
private DateTime Min = new DateTime(2015, 1, 1);
private DateTime Max = new DateTime(2025, 12, 31);
private async Task GenerateImage()
{
isLoading = true;
var apiKey = "api-key"; // Replace with your actual API key
var apiUrl = "https://api.together.xyz/v1/images/generations";
var client = new HttpClient();
var requestData = new
{
model = "black-forest-labs/FLUX.1-schnell",
prompt = prompt,
width = 1024,
height = 768,
steps = 4,
n = 1,
response_format = "b64_json"
};
var requestContent = new StringContent(JsonSerializer.Serialize(requestData), Encoding.UTF8, "application/json");
client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", apiKey);
var response = await client.PostAsync(apiUrl, requestContent);
if (response.IsSuccessStatusCode)
{
var responseContent = await response.Content.ReadAsStringAsync();
var jsonResponse = JsonDocument.Parse(responseContent);
var base64Image = jsonResponse.RootElement.GetProperty("data")[0].GetProperty("b64_json").GetString();
imageUrl = $"data:image/png;base64,{base64Image}";
}
else
{
Console.WriteLine("Error generating image: " + response.ReasonPhrase);
}
isLoading = false;
}
}
<style>
.justify-space-between {
justify-content: space-between;
}
</style>
Avec le code ci-dessus prêt, accédez au ensemble site et créez un compte, qui vous donnera une clé d’accès à l’API pour trois mois d’utilisation illimitée et gratuite, suffisamment de temps pour jouer avec l’API. Une fois votre clé API prête, remplacez la valeur du apiKey variable avec votre clé, qui vous permettra de vous connecter au service.
Enfin, allez dans le fichier situé dans Layout | NavMenu.razor et ajoutez la section suivante dans le div avec la classe nav-scrollable:
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
<nav class="flex-column">
...
<div class="nav-item px-3">
<NavLink class="nav-link" href="flux">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Flux Generator
</NavLink>
</div>
</nav>
</div>
Avec cela, nous terminons la configuration du projet partagé.
Configuration du projet Blazor
Pour que le projet Blazor fonctionne correctement, nous devons modifier le fichier situé dans Components | App.razoren ajoutant ce qui suit au head étiqueter:
<head>
...
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="AppName.styles.css" />
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
<HeadOutlet @rendermode="InteractiveServer" />
</head>
En revanche, dans le body balise, nous ajouterons ce qui suit :
<body>
...
<script>
document.addEventListener("DOMContentLoaded", function () {
Blazor.start();
});
</script>
</body>
Avec ce changement, si nous démarrons l’application, nous verrons un écran qui nous demande une invite pour générer l’image :
En entrant une invite et en cliquant sur le Générer une image bouton, une image super réaliste est générée en quelques secondes seulement :
Passons maintenant à la configuration du projet .NET MAUI.
Configuration du projet .NET MAUI
Il est temps de configurer le projet .NET MAUI. Dans ce cas, nous devons ouvrir le fichier situé dans wwwroot | index.html.
Dans le head section, nous allons ajouter les lignes suivantes :
<head>
...
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
<link rel="stylesheet" href="AppName.styles.css" />
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
</head>
Dans le body il n’est pas nécessaire d’ajouter quoi que ce soit, nous n’y toucherons donc pas. Avec ces modifications, nous pouvons démarrer le projet et saisir une invite :
Comme vous pouvez le constater, nous avons le même comportement sur un appareil mobile réutilisant le composant Blazor.
Conclusion
Dans cet article, vous avez pu en apprendre davantage sur .NET MAUI Blazor hybride et application Web modèle. De la même manière, nous avons créé un projet qui vous permet de générer des images en utilisant l’IA en un instant, qui, combiné à l’utilisation des contrôles Telerik, permet la création d’applications de manière rapide et robuste.
Essayez la suite complète de Telerik DevCraft Suite de composants d’interface utilisateur gratuite pendant 30 jours.
Source link