Combler le fossé : développement mobile hybride MAUI

Dans le monde dynamique du développement d'applications mobiles, trouver les bons outils alliant efficacité, flexibilité et robustesse est une quête permanente. Bien qu'il existe de nombreux frameworks mobiles disponibles en programmation, les options deviennent limitées lorsque l'on se concentre sur les frameworks JavaScript et les applications hybrides. Les développeurs recherchent souvent des solutions qui leur permettent d'exploiter de manière transparente les frameworks JavaScript modernes ainsi que les fonctionnalités natives.

Entrez MAUI Hybridizer, une bibliothèque puissante conçue pour intégrer des applications JavaScript avec .NET MAUI, permettant aux développeurs de créer facilement des applications mobiles hybrides dynamiques et multiplateformes.

Le besoin de bibliothèques hybrides améliorées

S'appuyer sur les solutions existantes

Il existe plusieurs options pour créer des applications hybrides à l'aide de frameworks JavaScript. Des outils tels que Capacitor et NativeScript ont apporté une contribution significative au développement d'applications mobiles hybrides. Ils offrent des fonctionnalités précieuses et ont leurs propres atouts :

• Capacitor offre une large prise en charge de la plate-forme et une approche de développement basée sur le Web familière.
• NativeScript permet aux développeurs de créer des applications natives à l'aide de JavaScript, TypeScript ou Angular, offrant un accès direct aux API natives.

Cependant, les développeurs peuvent rencontrer des défis tels que :

• Complexité du développement des plugins : les plugins Capacitor nécessitent souvent la connaissance de langages natifs comme Java et Swift, ce qui peut constituer un obstacle pour ceux qui sont principalement expérimentés dans le développement Web.
• Support et maintenance : NativeScript, bien que puissant, peut souffrir d'un manque de support actif et de mises à jour, ce qui peut entraîner des défis dans le développement et la maintenance d'applications prêtes pour la production.

Ces considérations mettent en évidence l'opportunité d'une bibliothèque qui combine les points forts des solutions existantes tout en répondant à leurs limites, offrant une expérience de développement plus rationalisée et accessible spécifiquement pour les frameworks JavaScript et les applications hybrides.

Présentation de l'hybridateur MAUI

Tirer parti du riche héritage de MAUI

.NET Multi-platform App UI (MAUI) s'appuie sur les bases solides posées par Xamarin, offrant un cadre unifié pour créer des applications natives sur plusieurs plates-formes, notamment Android, iOS, macOS et Windows. Ce riche historique signifie que MAUI dispose d'une multitude d'API déjà implémentées, donnant accès aux fonctionnalités natives de l'appareil sans avoir besoin de code spécifique à la plate-forme.

La logique derrière la bibliothèque

MAUI Hybridizer sert de pont entre l'application JavaScript et le framework .NET MAUI. Il permet une communication bidirectionnelle entre les couches JavaScript et C#, permettant aux développeurs d'appeler des API natives depuis JavaScript et vice versa. Ceci est réalisé grâce à une vue Web hybride qui charge l'application JavaScript et facilite la communication à l'aide d'un système de messagerie.

Intégration transparente des plugins

MAUI Hybridizer tire pleinement parti du vaste ensemble d'API de MAUI, permettant aux développeurs d'utiliser ces implémentations existantes comme plugins au sein de l'application hybride. Cela accélère non seulement le développement, mais garantit également que les applications reposent sur des technologies éprouvées et stables.

Principales fonctionnalités

• Communication bidirectionnelle : invoquez de manière transparente des méthodes C# natives à partir de JavaScript et appelez des fonctions JavaScript à partir de C#.
• Architecture des plugins : créez et intégrez facilement des plugins personnalisés pour étendre les fonctionnalités de l'application.
• Gestion des événements : déclenchez et gérez les événements du cycle de vie des applications, tels que la reprise et l'arrêt, sur les deux couches.

Création d'un plugin : un guide étape par étape

L'une des fonctionnalités les plus remarquables de MAUI Hybridizer est la possibilité de créer des plugins personnalisés, permettant aux développeurs d'étendre les capacités de l'application en exploitant les fonctionnalités natives de l'appareil.

Étape 1 : Créer une bibliothèque de classes .NET MAUI

Tout d’abord, créez un nouveau projet de bibliothèque de classes .NET MAUI. Assurez-vous que vous utilisez une version .NET prise en charge (inférieure à 9, car les analyseurs Roslyn ne prennent peut-être pas encore entièrement en charge .NET 9).

dotnet new mauiclasslib -n MyCustomPlugin -f net8.0

Étape 2 : ajouter le package AutoGen NuGet

Ajoutez le package Allowed.Maui.Hybridizer.AutoGen à votre projet :

dotnet add package Allowed.Maui.Hybridizer.AutoGen

Étape 3 : implémenter le plugin C#

Créez votre classe de plugin, en utilisant des attributs pour la désigner comme plugin et ses méthodes comme invocables depuis JavaScript.

using System.Text.Json.Serialization;
using Allowed.Maui.Hybridizer.Abstractions.Attributes;
using Allowed.Maui.Hybridizer.Abstractions.Plugins;

namespace MyCustomPlugin;

[HwvPlugin]
public class StoragePlugin
{
    [HwvMethod]
    public GetResponse Get([HwvPayload] GetRequest request)
    {
        return new GetResponse(Preferences.Default.Get(request.Key, string.Empty));
    }

    [HwvMethod]
    public void Set([HwvPayload] SetRequest request)
    {
        Preferences.Default.Set(request.Key, request.Value);
    }

    [HwvMethod]
    public void Remove([HwvPayload] RemoveRequest request)
    {
        Preferences.Default.Remove(request.Key);
    }

    public record GetRequest([property: JsonPropertyName("key")] string Key);

    public record GetResponse([property: JsonPropertyName("value")] string Value);

    public record SetRequest(
        [property: JsonPropertyName("key")] string Key,
        [property: JsonPropertyName("value")] string Value);

    public record RemoveRequest([property: JsonPropertyName("key")] string Key);
}

Étape 4 : Enregistrez le plugin avec l’injection de dépendances

Après avoir implémenté votre plugin, vous devez l'enregistrer auprès du conteneur d'injection de dépendances MAUI afin qu'il puisse être reconnu par Maui Hybridizer.

Dans votre MauiProgram.cs, ajoutez le code suivant :

// Add the Hybridizer with plugin modules
builder.Services.AddHybridizer(
    Allowed.Maui.Hybridizer.Essentials.HwvPluginModule.Invoke, 
    MyCustomPlugin.HwvPluginModule.Invoke
);

// Add essentials plugins you need
builder.Services.RegisterAlertPlugin();
builder.Services.RegisterBatteryPlugin();
builder.Services.RegisterStoragePlugin();

// Add your custom plugin
builder.Services.AddTransient<CustomAlertPlugin>();

Remarque : HwvPluginModule est une classe générée automatiquement créée par le package Allowed.Maui.Hybridizer.AutoGen lorsque vous créez votre plugin. Il contient une méthode pour enregistrer les services de votre plugin.

Étape 5 : initialiser le service Bridge

Cette étape configure le canal de communication et doit être effectuée une fois dans votre application JavaScript, généralement après le chargement de l'application.

import { bridgeService } from "../hybridizer/BridgeService";

// Initialize the bridge service for communication
if (!platformService.isWeb())
    bridgeService.initialize();

Étape 6 : Créer l'interface JavaScript

Dans votre application JavaScript, créez une interface pour communiquer avec le plugin natif.

dotnet new mauiclasslib -n MyCustomPlugin -f net8.0

Explication

• Platform Check : Détermine si l'application s'exécute sur le Web ou en tant qu'application native.
• Méthodes : utilisez bridgeService.invoke pour appeler des méthodes natives lors de l'exécution en tant qu'application native.
• Utilisation : importez et utilisez storagePlugin dans votre code JavaScript pour accéder aux fonctionnalités de stockage natives.

Appeler JavaScript depuis C# : gestion des événements

MAUI Hybridizer facilite également l'appel de fonctions JavaScript à partir de la couche C#, ce qui est particulièrement utile pour gérer les événements du cycle de vie des applications tels que Resume et Stop.

Implémentation de la gestion des événements

Dans votre fichier App.xaml.cs, configurez les événements du cycle de vie de l'application et utilisez _jsCaller pour appeler des méthodes JavaScript.

dotnet add package Allowed.Maui.Hybridizer.AutoGen

Explication

• AppLifecycleService : un service personnalisé qui gère les événements du cycle de vie des applications.
• HwvJsCaller : injecté pour permettre l'appel de fonctions JavaScript à partir de C#.
• Abonnements aux événements : lorsque l'application reprend ou s'arrête, les fonctions JavaScript correspondantes Reprise ou Arrêté sont appelées.

Côté JavaScript

Dans votre application JavaScript, enregistrez les gestionnaires d'événements à l'aide de bridgeService.register.

using System.Text.Json.Serialization;
using Allowed.Maui.Hybridizer.Abstractions.Attributes;
using Allowed.Maui.Hybridizer.Abstractions.Plugins;

namespace MyCustomPlugin;

[HwvPlugin]
public class StoragePlugin
{
    [HwvMethod]
    public GetResponse Get([HwvPayload] GetRequest request)
    {
        return new GetResponse(Preferences.Default.Get(request.Key, string.Empty));
    }

    [HwvMethod]
    public void Set([HwvPayload] SetRequest request)
    {
        Preferences.Default.Set(request.Key, request.Value);
    }

    [HwvMethod]
    public void Remove([HwvPayload] RemoveRequest request)
    {
        Preferences.Default.Remove(request.Key);
    }

    public record GetRequest([property: JsonPropertyName("key")] string Key);

    public record GetResponse([property: JsonPropertyName("value")] string Value);

    public record SetRequest(
        [property: JsonPropertyName("key")] string Key,
        [property: JsonPropertyName("value")] string Value);

    public record RemoveRequest([property: JsonPropertyName("key")] string Key);
}

Exemple complet

Un exemple complet de cette implémentation peut être trouvé dans l'exemple de projet dans le référentiel MAUI Hybridizer.

Conclusion

MAUI Hybridizer s'appuie sur les atouts des outils existants pour offrir une solution robuste et flexible pour le développement d'applications mobiles hybrides. En simplifiant le développement de plugins et en facilitant une communication transparente entre JavaScript et le code natif, il fournit aux développeurs un outil accessible et efficace pour créer des applications multiplateformes de haute qualité.

Opinion personnelle

En tant que développeur ayant affronté les complexités du développement d'applications mobiles hybrides, je trouve que MAUI Hybridizer exploite efficacement le riche héritage API de MAUI tout en fournissant une interface intuitive pour l'intégration JavaScript. Il complète les solutions existantes en offrant une alternative qui pourrait mieux convenir aux développeurs recherchant une intégration plus étroite avec .NET MAUI et un processus de développement de plugins plus simple.

Statut actuel et projets futurs

MAUI Hybridizer est actuellement en version bêta, offrant aux développeurs la possibilité d'explorer ses fonctionnalités et capacités. Avec la sortie de .NET 9, la bibliothèque devrait sortir de sa phase bêta, accompagnée d'un ensemble de plugins essentiels dans le package MAUI Hybridizer Essentials, qui couvriront les fonctionnalités natives de base et amélioreront encore l'expérience de développement.

Commencer

Pour explorer Maui Hybridizer et le voir en action, visitez le référentiel GitHub et consultez l'exemple de projet. Que vous créiez une nouvelle application ou cherchiez à améliorer une application existante, cette bibliothèque offre une voie prometteuse dans le développement mobile hybride.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!