격차 해소: MAUI 하이브리드 모바일 개발-JS 튜토리얼-php.cn

Bridging the Gap: MAUI Hybrid Mobile Development

모바일 애플리케이션 개발의 역동적인 세계에서 효율성, 유연성, 견고성을 결합한 올바른 도구를 찾는 것은 지속적인 탐구입니다. 프로그래밍에 사용할 수 있는 모바일 프레임워크는 많지만 JavaScript 프레임워크 및 하이브리드 애플리케이션에 초점을 맞추면 옵션이 제한됩니다. 개발자는 기본 기능과 함께 최신 JavaScript 프레임워크를 원활하게 활용할 수 있는 솔루션을 찾는 경우가 많습니다.

JavaScript 애플리케이션을 .NET MAUI와 통합하도록 설계된 강력한 라이브러리인 MAUI Hybridizer를 사용하면 개발자가 동적인 크로스 플랫폼 하이브리드 모바일 애플리케이션을 쉽게 만들 수 있습니다.

향상된 하이브리드 라이브러리의 필요성

기존 솔루션을 기반으로 구축

JavaScript 프레임워크를 사용하여 하이브리드 애플리케이션을 구축하는 데는 여러 가지 옵션이 있습니다. Capacitor 및 NativeScript와 같은 도구는 하이브리드 모바일 앱 개발에 상당한 기여를 했습니다. 귀중한 기능을 제공하며 고유한 장점도 있습니다.

Capacitor는 광범위한 플랫폼 지원과 친숙한 웹 기반 개발 접근 방식을 제공합니다.
NativeScript를 통해 개발자는 JavaScript, TypeScript 또는 Angular를 사용하여 네이티브 앱을 구축하고 네이티브 API에 직접 액세스할 수 있습니다.

그러나 개발자는 다음과 같은 문제에 직면할 수 있습니다.

플러그인 개발 복잡성: 커패시터 플러그인에는 Java 및 Swift와 같은 기본 언어에 대한 지식이 필요한 경우가 많으며, 이는 주로 웹 개발 경험이 있는 사람들에게는 장벽이 될 수 있습니다.
지원 및 유지 관리: NativeScript는 강력하지만 적극적인 지원 및 업데이트가 부족하여 프로덕션에 바로 사용할 수 있는 애플리케이션을 개발하고 유지 관리하는 데 어려움을 겪을 수 있습니다.

이러한 고려 사항은 기존 솔루션의 장점을 결합하는 동시에 한계를 해결하여 특히 JavaScript 프레임워크 및 하이브리드 애플리케이션을 위한 더욱 간편하고 액세스 가능한 개발 환경을 제공하는 라이브러리에 대한 기회를 강조합니다.

MAUI 하이브리드라이저 소개

MAUI의 풍부한 유산 활용

.NET MAUI(다중 플랫폼 앱 UI)는 Xamarin의 강력한 기반을 바탕으로 Android, iOS, macOS, Windows를 비롯한 여러 플랫폼에서 네이티브 애플리케이션을 만들기 위한 통합 프레임워크를 제공합니다. 이러한 풍부한 배경은 MAUI가 이미 구현된 수많은 API를 보유하고 있어 플랫폼별 코드 없이도 기본 장치 기능에 대한 액세스를 제공한다는 것을 의미합니다.

도서관 뒤에 숨은 논리

MAUI Hybridizer는 JavaScript 애플리케이션과 .NET MAUI 프레임워크 사이의 브리지 역할을 합니다. 이는 JavaScript와 C# 계층 간의 양방향 통신을 가능하게 하여 개발자가 JavaScript에서 기본 API를 호출하거나 그 반대로 호출할 수 있도록 합니다. 이는 JavaScript 애플리케이션을 로드하고 메시징 시스템을 사용하여 커뮤니케이션을 촉진하는 하이브리드 웹 보기를 통해 달성됩니다.

원활한 플러그인 통합

MAUI Hybridizer는 MAUI의 광범위한 API 세트를 최대한 활용하므로 개발자는 이러한 기존 구현을 하이브리드 애플리케이션 내 플러그인으로 사용할 수 있습니다. 이는 개발을 가속화할 뿐만 아니라 검증되고 안정적인 기술을 기반으로 애플리케이션이 구축되도록 보장합니다.

주요 특징

양방향 통신: JavaScript에서 기본 C# 메서드를 원활하게 호출하고 C#에서 JavaScript 함수를 호출합니다.
플러그인 아키텍처: 맞춤형 플러그인을 쉽게 생성하고 통합하여 애플리케이션 기능을 확장합니다.
이벤트 처리: 두 계층 모두에서 재개 및 중지와 같은 애플리케이션 수명 주기 이벤트를 트리거하고 처리합니다.

플러그인 생성: 단계별 가이드

MAUI Hybridizer의 뛰어난 기능 중 하나는 사용자 정의 플러그인을 생성하여 개발자가 기본 장치 기능을 활용하여 애플리케이션의 기능을 확장할 수 있다는 것입니다.

1단계: .NET MAUI 클래스 라이브러리 만들기

먼저 새로운 .NET MAUI 클래스 라이브러리 프로젝트를 만듭니다. 지원되는 .NET 버전을 사용하고 있는지 확인하세요(Roslyn 분석기는 아직 .NET 9를 완전히 지원하지 않을 수 있으므로 9 미만).

dotnet new mauiclasslib -n MyCustomPlugin -f net8.0

로그인 후 복사

2단계: AutoGen NuGet 패키지 추가

프로젝트에 Allowed.Maui.Hybridizer.AutoGen 패키지를 추가하세요.

dotnet add package Allowed.Maui.Hybridizer.AutoGen

로그인 후 복사

3단계: C# 플러그인 구현

속성을 사용하여 플러그인으로 지정하고 해당 메서드를 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);
}

로그인 후 복사

4단계: 종속성 주입으로 플러그인 등록

플러그인을 구현한 후 Maui Hybridizer에서 인식할 수 있도록 MAUI 종속성 주입 컨테이너에 등록해야 합니다.

MauiProgram.cs에 다음 코드를 추가하세요.

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

로그인 후 복사

참고: HwvPluginModule은 플러그인을 빌드할 때 Allowed.Maui.Hybridizer.AutoGen 패키지에 의해 생성된 자동 생성 클래스입니다. 플러그인 서비스를 등록하는 방법이 포함되어 있습니다.

5단계: 브리지 서비스 초기화

이 단계는 통신 채널을 설정하며 일반적으로 애플리케이션이 로드된 후 JavaScript 애플리케이션에서 한 번 수행해야 합니다.

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

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

로그인 후 복사

6단계: JavaScript 인터페이스 생성

JavaScript 애플리케이션에서 기본 플러그인과 통신하기 위한 인터페이스를 만듭니다.

dotnet new mauiclasslib -n MyCustomPlugin -f net8.0

로그인 후 복사

설명

플랫폼 확인: 애플리케이션이 웹에서 실행되고 있는지 아니면 기본 앱으로 실행되고 있는지 확인합니다.
메서드: 네이티브 앱으로 실행할 때 bridgeService.invoke를 사용하여 네이티브 메서드를 호출하세요.
사용법: 기본 저장소 기능에 액세스하려면 JavaScript 코드에서 StoragePlugin을 가져와 사용하세요.

C#에서 JavaScript 호출: 이벤트 처리

MAUI Hybridizer는 C# 계층에서 JavaScript 함수 호출도 용이하게 하며, 이는 재개 및 중지와 같은 애플리케이션 수명 주기 이벤트를 처리하는 데 특히 유용합니다.

이벤트 처리 구현

App.xaml.cs 파일에서 애플리케이션 수명 주기 이벤트를 설정하고 _jsCaller를 사용하여 JavaScript 메서드를 호출합니다.

dotnet add package Allowed.Maui.Hybridizer.AutoGen

로그인 후 복사

설명

AppLifecycleService: 애플리케이션 수명주기 이벤트를 처리하는 맞춤형 서비스입니다.
HwvJsCaller: C#에서 JavaScript 함수 호출을 활성화하기 위해 삽입되었습니다.
이벤트 구독: 앱이 재개되거나 중지되면 해당 JavaScript 함수 Resumed 또는 Stopped가 호출됩니다.

자바스크립트 사이드

JavaScript 애플리케이션에서 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);
}

로그인 후 복사

전체 예시

이 구현의 포괄적인 예는 MAUI Hybridizer 저장소 내의 샘플 프로젝트에서 찾을 수 있습니다.

결론

MAUI Hybridizer는 기존 도구의 강점을 바탕으로 하이브리드 모바일 애플리케이션 개발을 위한 강력하고 유연한 솔루션을 제공합니다. 플러그인 개발을 단순화하고 JavaScript와 네이티브 코드 간의 원활한 통신을 촉진함으로써 개발자에게 고품질 크로스 플랫폼 애플리케이션을 만들기 위한 액세스 가능하고 효율적인 도구를 제공합니다.

개인적인 의견

하이브리드 모바일 앱 개발의 복잡성을 해결해 온 개발자로서 저는 MAUI Hybridizer가 MAUI의 풍부한 API 유산을 효과적으로 활용하는 동시에 JavaScript 통합을 위한 직관적인 인터페이스를 제공한다는 것을 알았습니다. .NET MAUI와의 긴밀한 통합 및 보다 간단한 플러그인 개발 프로세스를 원하는 개발자에게 더 적합한 대안을 제공하여 기존 솔루션을 보완합니다.

현황 및 향후 계획

MAUI Hybridizer는 현재 베타 버전으로 개발자에게 기능을 탐색할 수 있는 기회를 제공합니다. .NET 9가 출시되면서 라이브러리는 핵심 기본 기능을 다루고 개발 경험을 더욱 향상시키는 MAUI Hybridizer Essentials 패키지의 필수 플러그인 세트와 함께 베타 단계를 종료할 계획입니다.