Überbrückung der Lücke: MAUI Hybrid Mobile Development

In der dynamischen Welt der mobilen Anwendungsentwicklung ist es eine ständige Suche, die richtigen Tools zu finden, die Effizienz, Flexibilität und Robustheit vereinen. Während in der Programmierung zahlreiche mobile Frameworks zur Verfügung stehen, werden die Optionen begrenzt, wenn man sich auf JavaScript-Frameworks und Hybridanwendungen konzentriert. Entwickler suchen oft nach Lösungen, die es ihnen ermöglichen, moderne JavaScript-Frameworks neben nativen Funktionen nahtlos zu nutzen.

Betreten Sie MAUI Hybridizer, eine leistungsstarke Bibliothek zur Integration von JavaScript-Anwendungen mit .NET MAUI, die es Entwicklern ermöglicht, mühelos dynamische, plattformübergreifende Hybrid-Mobilanwendungen zu erstellen.

Der Bedarf an erweiterten Hybridbibliotheken

Aufbauend auf bestehenden Lösungen

Es gibt mehrere Möglichkeiten, Hybridanwendungen mithilfe von JavaScript-Frameworks zu erstellen. Tools wie Capacitor und NativeScript haben maßgeblich zur Entwicklung hybrider mobiler Apps beigetragen. Sie bieten wertvolle Funktionen und haben ihre eigenen Stärken:

• Capacitor bietet umfassende Plattformunterstützung und einen vertrauten webbasierten Entwicklungsansatz.
• NativeScript ermöglicht Entwicklern die Erstellung nativer Apps mit JavaScript, TypeScript oder Angular und bietet so direkten Zugriff auf native APIs.

Entwickler können jedoch mit folgenden Herausforderungen konfrontiert werden:

• Komplexität der Plugin-Entwicklung: Kondensator-Plugins erfordern oft Kenntnisse in Muttersprachen wie Java und Swift, was für diejenigen, die hauptsächlich Erfahrung in der Webentwicklung haben, ein Hindernis darstellen kann.
• Support und Wartung: NativeScript ist zwar leistungsstark, kann jedoch unter einem Mangel an aktivem Support und Updates leiden, was möglicherweise zu Herausforderungen bei der Entwicklung und Wartung produktionsbereiter Anwendungen führt.

Diese Überlegungen verdeutlichen die Möglichkeit einer Bibliothek, die die Stärken bestehender Lösungen kombiniert und gleichzeitig deren Einschränkungen berücksichtigt und so eine optimierte und zugänglichere Entwicklungserfahrung speziell für JavaScript-Frameworks und Hybridanwendungen bietet.

Wir stellen den MAUI Hybridizer vor

Nutzung des reichen Erbes von MAUI

.NET Multi-Plattform App UI (MAUI) baut auf dem starken Fundament von Xamarin auf und bietet ein einheitliches Framework für die Erstellung nativer Anwendungen auf mehreren Plattformen, einschließlich Android, iOS, macOS und Windows. Dieser umfassende Hintergrund bedeutet, dass MAUI über eine Vielzahl bereits implementierter APIs verfügt, die Zugriff auf native Gerätefunktionen ermöglichen, ohne dass plattformspezifischer Code erforderlich ist.

Die Logik hinter der Bibliothek

MAUI Hybridizer dient als Brücke zwischen der JavaScript-Anwendung und dem .NET MAUI-Framework. Es ermöglicht eine bidirektionale Kommunikation zwischen der JavaScript- und der C#-Ebene, sodass Entwickler native APIs von JavaScript aus aufrufen können und umgekehrt. Dies wird durch eine hybride Webansicht erreicht, die die JavaScript-Anwendung lädt und die Kommunikation über ein Nachrichtensystem erleichtert.

Nahtlose Plugin-Integration

MAUI Hybridizer nutzt den umfangreichen API-Satz von MAUI voll aus und ermöglicht es Entwicklern, diese vorhandenen Implementierungen als Plugins innerhalb der Hybridanwendung zu verwenden. Dies beschleunigt nicht nur die Entwicklung, sondern stellt auch sicher, dass Anwendungen auf bewährten, stabilen Technologien basieren.

Hauptmerkmale

• Zwei-Wege-Kommunikation: Rufen Sie nahtlos native C#-Methoden aus JavaScript auf und rufen Sie JavaScript-Funktionen aus C# auf.
• Plugin-Architektur: Erstellen und integrieren Sie ganz einfach benutzerdefinierte Plugins, um die Funktionalität der Anwendung zu erweitern.
• Ereignisbehandlung: Auslösen und Behandeln von Anwendungslebenszyklusereignissen wie Fortsetzen und Stoppen auf beiden Ebenen.

Erstellen eines Plugins: Eine Schritt-für-Schritt-Anleitung

Eine der herausragenden Funktionen von MAUI Hybridizer ist die Möglichkeit, benutzerdefinierte Plugins zu erstellen, die es Entwicklern ermöglicht, die Funktionen der Anwendung durch die Nutzung nativer Gerätefunktionen zu erweitern.

Schritt 1: Erstellen Sie eine .NET MAUI-Klassenbibliothek

Erstellen Sie zunächst ein neues .NET MAUI-Klassenbibliotheksprojekt. Stellen Sie sicher, dass Sie eine unterstützte .NET-Version verwenden (weniger als 9, da Roslyn-Analysegeräte .NET 9 möglicherweise noch nicht vollständig unterstützen).

dotnet new mauiclasslib -n MyCustomPlugin -f net8.0

Schritt 2: Fügen Sie das AutoGen NuGet-Paket hinzu

Fügen Sie das Paket Allowed.Maui.Hybridizer.AutoGen zu Ihrem Projekt hinzu:

dotnet add package Allowed.Maui.Hybridizer.AutoGen

Schritt 3: Implementieren Sie das C#-Plugin

Erstellen Sie Ihre Plugin-Klasse und kennzeichnen Sie sie mithilfe von Attributen als Plugin und ihre Methoden als über JavaScript aufrufbar.

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);
}

Schritt 4: Registrieren Sie das Plugin bei Dependency Injection

Nach der Implementierung Ihres Plugins müssen Sie es beim MAUI-Abhängigkeitsinjektionscontainer registrieren, damit es von Maui Hybridizer erkannt werden kann.

Fügen Sie in Ihrer MauiProgram.cs den folgenden Code hinzu:

// 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>();

Hinweis: HwvPluginModule ist eine automatisch generierte Klasse, die vom Paket Allowed.Maui.Hybridizer.AutoGen erstellt wird, wenn Sie Ihr Plugin erstellen. Es enthält eine Methode zum Registrieren der Dienste Ihres Plugins.

Schritt 5: Initialisieren Sie den Bridge-Dienst

Dieser Schritt richtet den Kommunikationskanal ein und sollte einmal in Ihrer JavaScript-Anwendung durchgeführt werden, normalerweise nach dem Laden der Anwendung.

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

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

Schritt 6: Erstellen Sie die JavaScript-Schnittstelle

Erstellen Sie in Ihrer JavaScript-Anwendung eine Schnittstelle für die Kommunikation mit dem nativen Plugin.

dotnet new mauiclasslib -n MyCustomPlugin -f net8.0

Erläuterung

• Plattformprüfung: Stellt fest, ob die Anwendung im Web oder als native App ausgeführt wird.
• Methoden: Verwenden Sie „bridgeService.invoke“, um native Methoden aufzurufen, wenn Sie als native App ausgeführt werden.
• Verwendung: Importieren und verwenden Sie das StoragePlugin in Ihrem JavaScript-Code, um auf native Speicherfunktionen zuzugreifen.

Aufrufen von JavaScript aus C#: Behandeln von Ereignissen

MAUI Hybridizer erleichtert auch den Aufruf von JavaScript-Funktionen aus der C#-Ebene, was besonders nützlich für die Behandlung von Anwendungslebenszyklusereignissen wie Resume und Stop ist.

Implementieren der Ereignisbehandlung

Richten Sie in Ihrer App.xaml.cs-Datei die Anwendungslebenszyklusereignisse ein und verwenden Sie _jsCaller, um JavaScript-Methoden aufzurufen.

dotnet add package Allowed.Maui.Hybridizer.AutoGen

Erläuterung

• AppLifecycleService: Ein benutzerdefinierter Dienst, der Anwendungslebenszyklusereignisse verarbeitet.
• HwvJsCaller: Eingefügt, um den Aufruf von JavaScript-Funktionen aus C# zu ermöglichen.
• Ereignisabonnements: Wenn die App fortgesetzt oder gestoppt wird, werden die entsprechenden JavaScript-Funktionen Resumed oder Stopped aufgerufen.

JavaScript-Seite

Registrieren Sie in Ihrer JavaScript-Anwendung die Ereignishandler mit 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);
}

Vollständiges Beispiel

Ein umfassendes Beispiel dieser Implementierung finden Sie im Beispielprojekt im MAUI Hybridizer-Repository.

Abschluss

MAUI Hybridizer baut auf den Stärken bestehender Tools auf, um eine robuste, flexible Lösung für die Entwicklung hybrider mobiler Anwendungen anzubieten. Durch die Vereinfachung der Plugin-Entwicklung und die Erleichterung der nahtlosen Kommunikation zwischen JavaScript und nativem Code bietet es Entwicklern ein zugängliches und effizientes Tool zum Erstellen hochwertiger, plattformübergreifender Anwendungen.

Persönliche Meinung

Als Entwickler, der die Komplexität der Entwicklung hybrider mobiler Apps gemeistert hat, finde ich, dass MAUI Hybridizer das umfangreiche API-Erbe von MAUI effektiv nutzt und gleichzeitig eine intuitive Schnittstelle für die JavaScript-Integration bietet. Es ergänzt bestehende Lösungen, indem es eine Alternative bietet, die möglicherweise besser für Entwickler geeignet ist, die eine engere Integration mit .NET MAUI und einen einfacheren Plugin-Entwicklungsprozess suchen.

Aktueller Status und Zukunftspläne

MAUI Hybridizer befindet sich derzeit in der Betaphase und bietet Entwicklern die Möglichkeit, seine Funktionen und Fähigkeiten zu erkunden. Mit der Veröffentlichung von .NET 9 soll die Bibliothek ihre Beta-Phase verlassen, begleitet von einer Reihe wichtiger Plugins im MAUI Hybridizer Essentials-Paket, die native Kernfunktionen abdecken und das Entwicklungserlebnis weiter verbessern werden.

Erste Schritte

Um Maui Hybridizer zu erkunden und in Aktion zu sehen, besuchen Sie das GitHub-Repository und sehen Sie sich das Beispielprojekt an. Unabhängig davon, ob Sie eine neue Anwendung erstellen oder eine vorhandene erweitern möchten, bietet diese Bibliothek einen vielversprechenden Weg nach vorne in der hybriden mobilen Entwicklung.

Das obige ist der detaillierte Inhalt vonÜberbrückung der Lücke: MAUI Hybrid Mobile Development. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!