Lộ Trình .NET: Giới thiệu về .NET MAUI cho Lập trình viên Full-Stack .NET

Chào mừng các bạn quay trở lại với series “Lộ trình học ASP.NET Core 2025“! Chúng ta đã cùng nhau đi qua rất nhiều chủ đề quan trọng, từ những khái niệm cơ bản về C#, hệ sinh thái .NET, .NET CLI, quản lý mã nguồn với Git, cho đến phát triển Web API với ASP.NET Core, làm việc với cơ sở dữ liệu (từ SQL, Entity Framework Core đến NoSQL) và các kỹ thuật nâng cao khác như caching (Redis, Cache phân tán), Dependency Injection (Vòng đời dịch vụ), Messaging, Docker, Kubernetes, CI/CD, kiến trúc ứng dụng (như Clean Architecture, DDD, CQRS). Hầu hết chặng đường của chúng ta tập trung vào mảng Backend và Web. Tuy nhiên, một lập trình viên Full-Stack hiện đại cần có khả năng xây dựng cả giao diện người dùng (UI) cho nhiều nền tảng khác nhau.

Đó là lúc .NET MAUI (Multi-platform App UI) xuất hiện. Là lập trình viên .NET, bạn đã có một nền tảng vững chắc về ngôn ngữ, framework và các công cụ. .NET MAUI chính là cây cầu giúp bạn mở rộng kỹ năng đó để xây dựng các ứng dụng mobile (Android, iOS) và desktop (Windows, macOS) từ một codebase duy nhất. Trong bài viết này, chúng ta sẽ cùng nhau khám phá .NET MAUI, tại sao nó lại là lựa chọn hấp dẫn cho các bạn Full-Stack .NET, và làm thế nào để bắt đầu những bước đi đầu tiên.

.NET MAUI là gì và vì sao nó quan trọng?

Trước khi .NET MAUI ra đời, Microsoft có Xamarin.Forms, một framework cho phép xây dựng ứng dụng mobile đa nền tảng bằng C# và XAML. Xamarin.Forms đã làm rất tốt công việc của mình, nhưng nó còn một số hạn chế về hiệu năng, cấu trúc dự án và khả năng hỗ trợ desktop.

.NET MAUI là sự kế thừa và phát triển vượt bậc của Xamarin.Forms. Nó không chỉ cải thiện hiệu năng và trải nghiệm phát triển mà còn mở rộng phạm vi nền tảng được hỗ trợ bao gồm:

  • Android
  • iOS
  • Windows (.NET MAUI sử dụng Windows App SDK / WinUI 3)
  • macOS (.NET MAUI sử dụng Mac Catalyst)

Điều quan trọng nhất là .NET MAUI cho phép bạn xây dựng ứng dụng cho tất cả các nền tảng này từ MỘT DỰ ÁN (single project) duy nhất và sử dụng một ngôn ngữ (C#) cùng một framework (.NET). Điều này khác biệt so với việc phải duy trì các dự án riêng biệt cho từng nền tảng hoặc phải viết lại logic kinh doanh nhiều lần.

Đối với lập trình viên Full-Stack .NET, điều này có nghĩa là bạn không cần học một ngôn ngữ hoặc framework UI hoàn toàn mới như Java/Kotlin (Android), Swift/Objective-C (iOS), hay các framework desktop khác. Bạn có thể tận dụng ngay kiến thức về C#, các nguyên tắc lập trình quen thuộc và hệ sinh thái .NET rộng lớn mà bạn đã dành thời gian tìm hiểu.

Tại sao Lập trình viên Full-Stack .NET nên học .NET MAUI?

Nếu bạn đã theo dõi lộ trình .NET này, bạn đã trang bị cho mình rất nhiều kiến thức và kỹ năng về phát triển phần mềm trong môi trường .NET. Học .NET MAUI sẽ giúp bạn:

  1. Mở rộng khả năng phát triển: Từ các ứng dụng web và backend, bạn có thể dễ dàng chuyển sang xây dựng ứng dụng mobile và desktop, đáp ứng được yêu cầu đa dạng hơn từ khách hàng hoặc dự án.
  2. Tái sử dụng kiến thức: Ngôn ngữ C#, runtime .NET, các design patterns (như MVVM rất phổ biến trong MAUI), và thậm chí cả cách tương tác với RESTful API (mà bạn đã học cách xây dựng với ASP.NET Core) đều được áp dụng trực tiếp trong .NET MAUI.
  3. Tăng hiệu suất: Với mô hình single project, bạn chỉ cần viết code business logic một lần và chia sẻ nó trên tất cả các nền tảng. Điều này giúp giảm đáng kể thời gian và công sức phát triển, cũng như việc bảo trì sau này.
  4. Tiếp cận các tính năng gốc (Native Features): .NET MAUI không chỉ đơn thuần là hiển thị giao diện. Với .NET MAUI Essentials, bạn có thể dễ dàng truy cập các API gốc của thiết bị như GPS, camera, danh bạ, bộ cảm biến, v.v., mang lại trải nghiệm người dùng mượt mà và đầy đủ tính năng như một ứng dụng native thực thụ.
  5. Phù hợp cho ứng dụng nội bộ/line-of-business: Rất nhiều ứng dụng nội bộ trong doanh nghiệp cần chạy trên cả desktop và mobile. .NET MAUI là lựa chọn tuyệt vời để xây dựng những ứng dụng này một cách hiệu quả.

Kiến trúc và các khái niệm cốt lõi của .NET MAUI

Để bắt đầu với .NET MAUI, chúng ta cần hiểu một vài khái niệm cơ bản về cách nó hoạt động:

Mô hình Single Project

Đây là một trong những cải tiến lớn nhất so với Xamarin.Forms. Thay vì có nhiều dự án cho các nền tảng khác nhau (dự án dùng chung code, dự án Android, dự án iOS, v.v.), .NET MAUI gom tất cả vào MỘT dự án duy nhất. Bạn sẽ thấy cấu trúc thư mục có một folder Platforms chứa code đặc thù cho từng nền tảng khi cần (ví dụ: truy cập API riêng của Android hoặc iOS), còn lại phần lớn code (UI, business logic, services) nằm ở ngoài folder này và được chia sẻ.


├── MyMauiApp.csproj
├── Platforms/
│   ├── Android/
│   ├── iOS/
│   ├── MacCatalyst/
│   └── Windows/
├── Resources/       // Chứa assets dùng chung: fonts, images, raw files
├── App.xaml         // Định nghĩa tài nguyên ứng dụng
├── App.xaml.cs
├── AppShell.xaml    // Quản lý cấu trúc và điều hướng ứng dụng
├── AppShell.xaml.cs
├── MauiProgram.cs   // Điểm khởi tạo ứng dụng, cấu hình DI
└── MainPage.xaml    // Một trang UI ví dụ
└── MainPage.xaml.cs

File MauiProgram.cs là nơi bạn cấu hình Dependency Injection, thêm fonts, hay đăng ký các dịch vụ. Nếu bạn đã quen với việc cấu hình Startup.cs hoặc Program.cs trong ASP.NET Core (Hiểu Rõ Vòng Đời Dịch Vụ: Scoped, Transient, Singleton), bạn sẽ thấy rất quen thuộc.

Handlers (Bộ xử lý)

.NET MAUI sử dụng kiến trúc Handler để render UI. Thay vì sử dụng các “renderer” riêng cho từng nền tảng như Xamarin.Forms, MAUI sử dụng một handler duy nhất cho mỗi loại control (ví dụ: một handler cho Button, một cho Label). Handler này chịu trách nhiệm ánh xạ control trừu tượng của MAUI thành control gốc (native control) tương ứng trên từng nền tảng (ví dụ: MAUI Button -> Android Button, iOS UIButton, Windows Button). Điều này giúp cải thiện hiệu năng và khả năng tùy chỉnh.

XAML và C# UI

.NET MAUI hỗ trợ hai cách chính để xây dựng giao diện người dùng:

  • XAML (Extensible Application Markup Language): Ngôn ngữ markup khai báo, rất phổ biến trong các framework UI của Microsoft (WPF, UWP, Xamarin.Forms). XAML giúp mô tả cấu trúc phân cấp của UI một cách trực quan và dễ đọc.
  • C# UI: Bạn cũng có thể xây dựng toàn bộ UI bằng C# code. MAUI cung cấp các API Fluent cho phép bạn viết code C# một cách dễ dàng để tạo và bố trí các control.

Hầu hết các lập trình viên MAUI chọn sử dụng XAML cho phần lớn cấu trúc UI vì tính rõ ràng của nó, và sử dụng C# cho logic động hoặc các thao tác phức tạp hơn.

MVVM (Model-View-ViewModel)

Mặc dù bạn có thể viết code UI trong code-behind của file XAML (như ví dụ Counter mặc định), mô hình MVVM là một pattern được khuyến khích sử dụng trong .NET MAUI. MVVM giúp tách biệt logic nghiệp vụ (ViewModel) khỏi giao diện người dùng (View), làm cho code dễ kiểm thử (link đến các bài về Testing: Kiểm thử Unit, Mocking), dễ bảo trì và tái sử dụng hơn. Data Binding là một kỹ thuật cốt lõi trong MVVM, cho phép liên kết thuộc tính của View với thuộc tính của ViewModel một cách tự động.

.NET MAUI Essentials

Đây là tập hợp các API cross-platform cho phép bạn truy cập các tính năng gốc của thiết bị một cách dễ dàng, mà không cần viết code đặc thù cho từng nền tảng. Ví dụ: Battery, Connectivity, Geolocation, Permissions, Preferences, Share, v.v. Điều này giúp việc tích hợp các tính năng thiết bị trở nên cực kỳ đơn giản.

Bắt đầu với .NET MAUI

Để bắt đầu phát triển ứng dụng .NET MAUI, bạn cần:

  1. Cài đặt Visual Studio 2022 hoặc mới hơn. Trong quá trình cài đặt, đảm bảo bạn đã chọn workload “.NET Multi-platform App UI development”.
  2. Visual Studio sẽ tự động cài đặt .NET SDK cần thiết (hiện tại là .NET 8). Bạn có thể kiểm tra phiên bản .NET SDK đã cài đặt bằng .NET CLI: dotnet --version.

Sau khi cài đặt xong, bạn có thể tạo dự án .NET MAUI đầu tiên:

Tạo dự án bằng Visual Studio

Mở Visual Studio 2022, chọn “Create a new project”. Tìm kiếm “MAUI” và chọn template “.NET MAUI App“. Đặt tên dự án (ví dụ: MyFirstMauiApp) và chọn vị trí lưu. Nhấn Create.

Tạo dự án bằng .NET CLI

Nếu bạn yêu thích làm việc với command line (Làm Chủ .NET CLI), bạn có thể tạo dự án bằng lệnh sau trong Terminal hoặc Command Prompt:


dotnet new maui -n MyFirstMauiApp
cd MyFirstMauiApp

Chạy ứng dụng

Mở dự án trong Visual Studio. Trên thanh công cụ, bạn sẽ thấy mục chọn nền tảng và thiết bị debug. Bạn có thể chọn Android Emulator, iOS Simulator, Windows Machine, hoặc Mac Catalyst. Nhấn nút Run (mũi tên xanh lá cây) để build và chạy ứng dụng.

Ứng dụng .NET MAUI mặc định là một ứng dụng Counter đơn giản. Khi chạy lần đầu, nó có thể mất một chút thời gian để build và triển khai lên thiết bị/máy ảo.

Khám phá cấu trúc dự án và ví dụ Counter

Hãy xem xét cấu trúc dự án .NET MAUI vừa tạo và code của ứng dụng Counter mặc định:


// App.xaml: Định nghĩa các tài nguyên dùng chung như màu sắc, styles
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyFirstMauiApp"
             x:Class="MyFirstMauiApp.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>


// App.xaml.cs: Code-behind của App.xaml, nơi khởi tạo trang chính
namespace MyFirstMauiApp;

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        // AppShell là nơi định nghĩa cấu trúc điều hướng chính
        MainPage = new AppShell();
    }
}


// AppShell.xaml: Định nghĩa cấu trúc điều hướng (Shell UI)
// Shell giúp đơn giản hóa việc xây dựng giao diện dạng tab bars, flyout menus.
<Shell
    x:Class="MyFirstMauiApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MyFirstMauiApp"
    Shell.FlyoutBehavior="Disabled" // Tắt Flyout menu nếu không dùng

    Title="MyFirstMauiApp">

    <!-- TabBar hoặc ShellContent định nghĩa các trang chính -->
    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

</Shell>


// MainPage.xaml: Định nghĩa giao diện trang Counter
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyFirstMauiApp.MainPage"
             BackgroundColor="{DynamicResource SecondaryColor}"> <!-- Sử dụng Resource từ Styles -->

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25" // Khoảng cách giữa các control theo chiều dọc
            VerticalOptions="Center"
            HorizontalOptions="Center">

            <Image
                Source="dotnet_bot.png" // Sử dụng ảnh từ folder Resources/Images
                SemanticProperties.Description="Cute dotnet bot wading through floodwater"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to .NET Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn" // Đặt tên cho Button để truy cập trong code-behind
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked" // Gắn sự kiện Clicked với phương thức trong code-behind
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>


// MainPage.xaml.cs: Code-behind xử lý logic cho MainPage
namespace MyFirstMauiApp;

public partial class MainPage : ContentPage // Là một ContentPage (một loại Page trong MAUI)
{
    int count = 0; // Biến đếm

    public MainPage()
    {
        InitializeComponent(); // Khởi tạo UI từ XAML
    }

    // Phương thức xử lý sự kiện Click của Button
    private void OnCounterClicked(object sender, EventArgs e)
    {
        count++; // Tăng biến đếm

        // Cập nhật Text của Button
        if (count == 1)
            CounterBtn.Text = $"Clicked {count} time";
        else
            CounterBtn.Text = $"Clicked {count} times";

        // Thay đổi màu nền của Button khi click
        SemanticScreenReader.Announce(CounterBtn.Text);
        
        // Ví dụ nhỏ về truy cập native feature (Accessibility)
    }
}

Như bạn thấy, cấu trúc file và cách tổ chức khá trực quan. File .xaml định nghĩa giao diện, còn file .xaml.cs (code-behind) chứa logic xử lý sự kiện hoặc thay đổi trạng thái UI. Tuy nhiên, với ứng dụng phức tạp hơn, bạn sẽ muốn chuyển logic này ra khỏi code-behind và sử dụng mô hình MVVM với Data Binding.

So sánh XAML và C# UI trong MAUI

Khi xây dựng UI, bạn có thể linh hoạt lựa chọn giữa XAML và C#. Dưới đây là bảng so sánh ngắn gọn:

Đặc điểm XAML C# (Fluent UI / Code-behind)
Mục đích Khai báo cấu trúc UI tĩnh/bán tĩnh Lập trình logic, tạo UI động, tương tác
Độ rõ ràng Dễ đọc, cấu trúc phân cấp trực quan Cần đọc code để hình dung UI, phù hợp với UI tạo theo điều kiện
Công cụ Hỗ trợ tốt từ Visual Studio (Previewer, Hot Reload cho XAML) Ít hỗ trợ trực quan hơn, Hot Reload cho C# cũng có nhưng ít hiệu quả bằng
Khả năng động Thường tĩnh, cần Data Binding hoặc Code-behind để cập nhật trạng thái Rất linh hoạt để tạo và thay đổi UI trong runtime
Sử dụng phổ biến Rất phổ biến để định nghĩa cấu trúc UI chính Thường dùng cho các phần UI nhỏ, động hoặc trong code-behind xử lý sự kiện

Đối với người mới bắt đầu và xây dựng UI phức tạp, XAML thường là lựa chọn ưu tiên vì tính khai báo và hỗ trợ công cụ tốt hơn.

Kết nối MAUI App với Backend của bạn

Một điểm mạnh lớn cho lập trình viên Full-Stack là khả năng kết nối ứng dụng MAUI với các dịch vụ backend mà bạn đã xây dựng bằng ASP.NET Core. Giống như ứng dụng web frontend (SPA) hoặc mobile native, ứng dụng MAUI sẽ tương tác với backend thông qua các API.

Bạn có thể sử dụng các kỹ thuật quen thuộc để gọi API từ MAUI:

  • Sử dụng HttpClient để gửi request HTTP/HTTPS đến các endpoint RESTful API của bạn.
  • Tích hợp thư viện bên thứ ba như Refit để tạo các client API kiểu Type-Safe.
  • Sử dụng các service đã được đăng ký trong hệ thống DI của MAUI App để gọi API.

Ví dụ đơn giản sử dụng HttpClient (trong code-behind hoặc ViewModel):


using System.Net.Http;
using System.Text.Json; // Hoặc Newtonsoft.Json
// ...

public async Task<List<TodoItem>> GetTodoItemsAsync()
{
    string apiUrl = "https://your-backend-api.com/api/todoitems"; // Thay bằng URL API của bạn
    using HttpClient client = new();

    try
    {
        HttpResponseMessage response = await client.GetAsync(apiUrl);

        if (response.IsSuccessStatusCode)
        {
            string content = await response.Content.ReadAsStringAsync();
            // Deserialize JSON response into a list of objects
            List<TodoItem> todoItems = JsonSerializer.Deserialize<List<TodoItem>>(content);
            return todoItems;
        }
        else
        {
            // Handle error response
            Console.WriteLine($"Error: {response.StatusCode}");
            return null; // Or throw an exception
        }
    }
    catch (Exception ex)
    {
        // Handle network or other exceptions
        Console.WriteLine($"Exception: {ex.Message}");
        return null; // Or throw an exception
    }
}

// Định nghĩa class TodoItem phù hợp với dữ liệu từ API của bạn
public class TodoItem
{
    public int Id { get; set; }
    public string Title { get; set; }
    public bool IsCompleted { get; set; }
}

Phần code gọi API này hoàn toàn tương tự như cách bạn làm trong một ứng dụng Console, Class Library hay thậm chí là một ứng dụng Blazor. Đây chính là sức mạnh của việc sử dụng chung hệ sinh thái .NET.

Kết luận

.NET MAUI là một bước tiến lớn trong việc phát triển ứng dụng đa nền tảng với .NET. Nó cho phép các lập trình viên Full-Stack tận dụng tối đa kiến thức và kinh nghiệm sẵn có để mở rộng sang mảng ứng dụng client (mobile, desktop) một cách hiệu quả. Với mô hình single project, hiệu năng được cải thiện nhờ Handlers và khả năng truy cập các tính năng gốc của thiết bị, .NET MAUI là một công cụ mạnh mẽ đáng để khám phá.

Trên lộ trình .NET của chúng ta, việc học .NET MAUI giúp bạn hoàn thiện bức tranh về khả năng của .NET, từ Backend mạnh mẽ với ASP.NET Core, làm việc với dữ liệu (từ SQL đến NoSQL), triển khai ứng dụng (Docker, Kubernetes), cho đến xây dựng giao diện người dùng phong phú cho nhiều nền tảng khác nhau. Nếu bạn đã quen với Blazor, bạn cũng có thể xem xét Blazor Hybrid trong MAUI để kết hợp sức mạnh của cả hai.

Bắt đầu bằng cách cài đặt các công cụ cần thiết và tạo dự án MAUI đầu tiên. Hãy thử nghiệm với các control cơ bản, tìm hiểu cách bố trí UI với Layouts và dần làm quen với XAML hoặc C# UI. Sau đó, hãy đào sâu hơn vào các khái niệm như Data Binding, MVVM và Navigation để xây dựng các ứng dụng phức tạp hơn.

Chúc bạn thành công trên chặng đường khám phá .NET MAUI!

Recent News Articles

Fresh job related news content posted each day.

Mục lục

→ Chỉ mục