Traffic Count

Avalonia UI: Viết một lần, ứng dụng chạy trên cả máy tính, điện thoại lẫn trình duyệt

Một phần mềm có thể chạy được trên Windows, macOS, Linux, Android, iOS và cả trong trình duyệt mà lập trình viên chỉ cần viết một bộ mã. Avalonia UI là một công cụ giúp làm được điều đó.

Hãy nhìn quanh nhà bạn: có máy tính chạy Windows, chiếc MacBook của anh chị, điện thoại Android của bố, iPhone của mẹ. Nếu một công ty muốn làm phần mềm cho tất cả những thiết bị ấy, cách truyền thống là thuê nhiều nhóm lập trình viên, mỗi nhóm viết riêng cho một hệ điều hành. Tốn tiền, tốn thời gian, lại khó giữ các phiên bản giống nhau. Lập trình đa nền tảng ra đời để giải bài toán này. Avalonia UI là một trong những lựa chọn đáng chú ý.

Lập trình đa nền tảng là gì?

"Nền tảng" ở đây là môi trường mà phần mềm chạy trên đó, như Windows, macOS, Linux, Android, iOS hay trình duyệt web. Lập trình đa nền tảng nghĩa là viết mã một lần rồi dùng lại cho nhiều nền tảng.

Cuốn Avalonia UI Succinctly của tác giả Alessandro Del Sole nhận xét rằng với ngành phần mềm hiện đại, làm ứng dụng chạy trên nhiều thiết bị gần như là điều bắt buộc nếu doanh nghiệp muốn tiếp cận nhiều người dùng nhất. Vấn đề là mỗi công cụ đa nền tảng lại bỏ sót vài nơi. Sách lấy ví dụ .NET MAUI hỗ trợ iOS, Android, Windows và macOS nhưng không chạy trong trình duyệt hay trên Linux.

Avalonia UI làm được gì?

Avalonia UI là bộ khung lập trình mã nguồn mở dành cho nền tảng .NET của Microsoft. Với một bộ mã dùng chung, nó tạo ra ứng dụng cho Windows, macOS, Linux, iOS, Android và cả WebAssembly, tức là chạy thẳng trong trình duyệt.

Bí quyết nằm ở cách Avalonia vẽ giao diện. Trang chủ của dự án có khẩu hiệu "Pixel Perfect on Every Platform", nghĩa là đẹp đến từng điểm ảnh trên mọi nền tảng. Thay vì mượn nút bấm, ô nhập liệu có sẵn của từng hệ điều hành, Avalonia tự vẽ từng điểm ảnh nhờ thư viện đồ họa SkiaSharp. Nhờ vậy, ở đâu vẽ được điểm ảnh và nhận được thao tác của người dùng thì ở đó Avalonia chạy được. Sách cho biết nó đủ nhẹ để chạy cả trên máy tính bo mạch nhỏ Raspberry Pi.

Giao diện được "viết" bằng XAML

Người lập trình Avalonia mô tả giao diện bằng XAML, một ngôn ngữ đánh dấu khá giống HTML dùng làm trang web. Mỗi thẻ XAML là một thành phần trên màn hình: cửa sổ, nút bấm, ô chọn ngày, danh sách. Phần xử lý phía sau như bấm nút thì làm gì, lưu dữ liệu ra sao được viết bằng ngôn ngữ C#.

Hình 1. Trình thiết kế giao diện trong Visual Studio: nửa trên xem trước ô chọn ngày, nửa dưới là mã XAML tạo ra nó

Môi trường làm việc khá quen thuộc. Sách hướng dẫn dùng Visual Studio 2022 bản Community miễn phí, hoặc JetBrains Rider nếu làm việc trên máy Mac. Ai từng học WPF, công nghệ làm phần mềm Windows của Microsoft, sẽ thấy Avalonia rất gần gũi vì cách tổ chức ứng dụng gần như giống nhau.

Từ nút bấm đến ứng dụng hoàn chỉnh

Cuốn sách dẫn người đọc đi từng bước: sắp xếp giao diện bằng các khung bố cục, dùng các điều khiển phổ biến như nút bấm, hộp đánh dấu, thanh trượt, lịch, rồi đến liên kết dữ liệu (data binding), kỹ thuật giúp dữ liệu tự hiện lên giao diện và tự cập nhật khi thay đổi.

Sách cũng giới thiệu mô hình MVVM, cách tách riêng phần giao diện và phần xử lý dữ liệu để dự án lớn vẫn gọn gàng, dễ sửa. Cuối cùng là một ứng dụng danh sách việc cần làm nhỏ, có cửa sổ thêm việc mới.

Hình 2. Ứng dụng danh sách việc cần làm viết bằng Avalonia UI: cửa sổ chính bên trái, hộp thoại thêm việc bên phải

Ứng dụng nhỏ như vậy lại chứa đủ những gì một phần mềm thật cần có: hiển thị danh sách, nhận dữ liệu người dùng nhập, mở hộp thoại, cập nhật màn hình.

Học xong làm được nghề gì?

Kỹ năng lập trình giao diện đa nền tảng phù hợp với vị trí lập trình viên ứng dụng desktop, lập trình viên .NET, lập trình viên ứng dụng di động. Nhiều doanh nghiệp đang có phần mềm quản lý viết cho Windows và muốn đưa sang macOS, Linux. Sách nhắc đến sản phẩm Avalonia XPF được phát triển riêng cho nhu cầu chuyển đổi các ứng dụng WPF cũ sang nhiều hệ điều hành.

Người học cũng rèn được những kỹ năng dùng chung cho mọi nghề lập trình: tư duy tách giao diện khỏi xử lý, đọc tài liệu kỹ thuật tiếng Anh, làm việc với mã nguồn mở trên GitHub. Toàn bộ mã nguồn Avalonia UI công khai trên GitHub, ai muốn tìm hiểu bên trong cũng có thể tải về đọc.

Một bộ mã, nhiều màn hình

Lập trình đa nền tảng giúp một người, hay một nhóm nhỏ, làm ra sản phẩm đến tay người dùng ở mọi thiết bị. Avalonia UI là ví dụ cho thấy chỉ với C# và XAML, sinh viên có thể tự tay làm phần mềm chạy được trên chiếc laptop của mình, trên điện thoại của bạn bè và trong trình duyệt. Nếu bạn thích nhìn thấy thành quả lập trình hiện lên trên nhiều màn hình, đây là một hướng rất đáng để bắt đầu.

Trường Cao đẳng Công nghệ thông tin TP.HCM

  • Website: itc.edu.vn - Email tuyển sinh: tuyensinh@itc.edu.vn
  • Điện thoại: (028) 386 050 03 - Hotline: 093 886 1080 / 097 500 5356
  • Địa chỉ: 12 Trịnh Đình Thảo, P. Tân Phú, TP.HCM

ThS. Trương Châu Long - Trưởng bộ môn ngành CNTT & HTTT