Tutorial .NET MAUI untuk Android dan iOS – Beragampengetahuan
Jika Anda ingin membuat aplikasi lintas platform yang berjalan secara native di platform seluler dan desktop, ada banyak kerangka kerja yang bagus untuk dipilih.
Salah satunya adalah .NET Multiplatform Application User Interface (MAUI), open source Microsoft, kerangka kerja lintas platform untuk membuat aplikasi seluler dan desktop menggunakan C# dan XAML. .NET MAUI memungkinkan Anda mengembangkan aplikasi yang berjalan di iOS, macOS, Android, dan Windows, semuanya dari basis kode bersama. .NET MAUI adalah peningkatan dari Xamarin.Forms, yang sekarang menyertakan kontrol UI yang didesain ulang dan dioptimalkan untuk kinerja dan skalabilitas yang lebih baik.
.NET MAUI dilengkapi dengan XAML hot reloading, yang dapat memperbarui UI aplikasi Anda saat Anda memodifikasi kode XAML tanpa mengkompilasi ulang. Demikian pula, ini mendukung .NET Hot Reload, yang menerapkan perubahan kode C# ke aplikasi yang sedang berjalan tanpa mengkompilasi ulang seluruh program.
Pada artikel ini, kita akan menjelajahi .NET MAUI, meninjau arsitekturnya, membandingkan fitur-fiturnya dengan React Native dan Flutter, dan terakhir menggunakannya dalam sebuah proyek. Ayo mulai!
Lompat ke depan:
Contents
Ikhtisar Arsitektur .NET MAUI
.NET MAUI menyediakan pengalaman tulis sekali, jalankan di mana saja sambil tetap memungkinkan Anda untuk mengakses API asli khusus platform. Di belakang layar, .NET MAUI menggunakan kerangka kerja khusus platform untuk membuat aplikasi pada perangkat target yang berbeda:
- .NET untuk Android → Perangkat Android
- Antarmuka Pengguna Windows 3 (WinUI 3) → Perangkat Windows
- .NET untuk iOS → Perangkat iOS
- .NET untuk macOS → perangkat macOS
Diagram di bawah menjelaskan hal ini secara lebih rinci:
Untuk pemahaman mendalam tentang arsitektur .NET MAUI, Anda juga dapat merujuk ke dokumentasi resmi.
.NET MAUI vs. Flutter vs. Bereaksi Asli
Meskipun ada banyak framework lintas platform, Flutter dan React Native adalah yang paling populer dan digunakan oleh developer di seluruh dunia.
Jika kami membandingkannya berdasarkan ukuran komunitas dan kompatibilitas perpustakaan pihak ketiga, .NET MAUI adalah opsi yang kurang matang, dirilis pada Mei 2022. Jadi jika Anda buntu, mendapatkan bantuan dari komunitas bisa jadi sulit. Juga, Visual Studio untuk Mac mungkin memiliki beberapa masalah dan kinerja yang lebih rendah dibandingkan dengan OS Windows.
.NET MAUI terutama menggunakan kode C# dan XAML, jadi jika Anda sudah terbiasa dengan ekosistem .NET, MAUI dapat dengan mudah menjadi kerangka kerja pilihan Anda. Flutter, di sisi lain, menggunakan Dart, bahasa pemrograman dari Google yang memiliki kurva belajar yang jauh lebih tinggi. Terakhir, kami memiliki React Native; React Native adalah kerangka kerja pengembangan aplikasi lintas platform yang dikembangkan oleh Facebook dan dibangun di atas JavaScript.
Meskipun semua kerangka kerja ini dapat diterapkan ke Android, iOS, macOS, dan Windows, beberapa memerlukan penyesuaian tambahan untuk melakukannya, seperti React Native, yang menggunakan react-native-windows Dan react-native-macos Untuk dukungan Windows dan macOS. Di sisi lain, .NET MAUI menyediakan dukungan untuk ini di luar kotak.
Namun, tidak seperti Flutter dan React Native, Anda tidak dapat menerapkan aplikasi .NET MAUI secara langsung di web. Sebagai manfaat tambahan dari Flutter, aplikasi Flutter juga dapat didistribusikan dan dijalankan di sistem operasi berbasis Linux. Pada akhirnya, terserah Anda untuk memutuskan framework mana yang terbaik untuk Anda. Namun, jika Anda membutuhkan ekosistem .NET, .NET MAUI jelas merupakan framework pilihan Anda.
Penginstalan dan penyiapan .NET MAUI
Sebelum menulis aplikasi .NET MAUI kami, pertama-tama kami harus menginstal dan mengatur .NET MAUI dengan benar di sistem kami. Karena saya menggunakan macOS, saya akan memandu Anda melalui langkah-langkah instalasi macOS. Jika Anda menggunakan Windows, Anda dapat merujuk ke dokumentasi.
Pertama, kita akan mendownload Visual Studio 2022 for Mac.Anda akan diminta untuk menambahkan konfigurasi untuk instalasi; pilih .bersih → .NET Maui → iOS → android. Itu dia! Anda sekarang dapat menjalankan Visual Studio 2022 untuk Mac di sistem Anda.
Buat proyek .NET MAUI baru
Saat Anda membuka VS 2022, Anda akan melihat munculan di bawah ini.Untuk membuat proyek baru, klik baru:
Anda kemudian akan diminta untuk memilih jenis proyek.memilih aplikasi multi platform Dan Aplikasi .NET MAUIlalu klik melanjutkan:
memilih .NET 7.0 sebagai frame target dan klik melanjutkan:
Masukkan nama proyek dan hapus centang Put project in a subfolder kotak centang.klik membuat Buat aplikasi Anda:
Proyek Anda sekarang harus dibuat dan VS 22 harus terbuka.Setelah memilih perangkat debug atau emulator pilihan Anda dari daftar, gerakkan kursor mouse ke sudut kiri atas aplikasi dan klik Bermain ikon:
Anda akan melihat bahwa waktu build untuk Android dan iOS sangat cepat. Emulator Anda akan membuka aplikasi dengan teks dummy yang telah ditentukan sebelumnya di layar:
Dengan cara ini, Anda telah membuat aplikasi .NET MAUI pertama Anda untuk Android dan iOS. Sebelum kita masuk ke kode, pertama, mari kita pahami apa yang akan kita bangun.
Contoh aplikasi .NET MAUI
Aplikasi sampel kami akan cukup sederhana, menampilkan hanya dua layar, termasuk layar daftar yang akan menampilkan daftar vertikal produk dengan gambar.Ketika kita mengklik gambar, kita akan menavigasi ke Product Detail layar, itu akan menampilkan semua informasi tentang produk. Kami juga akan mengambil daftar produk dari REST API menggunakan layanan HTTP.
UI aplikasi terakhir kita akan terlihat seperti gambar di bawah ini:
Anda dapat menemukan kode untuk tutorial ini di repositori GitHub ini.
merancang daftar CollectionView
XAML adalah blok penyusun dasar untuk membuat UI di .NET MAUI; mari buat UI yang merender daftar produk. Sebelum kita mulai, kita perlu mengatur file kode kita sehingga semua blok kode milik kita berada di folder tertentu:
Views: elemen dan layar UIModels: Struktur dan Jenis DataServices: penangan API dan logika bisnis
menghapus MainPage.xaml file dan file di belakang kodenya, atau .cs File yang terkait dengan file ini.Dalam hal ini MainPage.xaml.cs.
Buat folder baru di dalamnya Project Dengan mengklik kanan pada proyek Solution Explorer jendela dan nama Views.Pada langkah selanjutnya kita akan menambahkan ProductList File di dalam folder ini:
klik kanan dibuat Views folder dan pilih Tambahkan → kelas baru:
Anda akan diminta untuk memilih jenis file yang akan dibuat.memilih .Net Maui → Halaman konten .NET MAUI (XAML).Ubah nama file menjadi ProductList dan tekan membuat:
Ini akan membuat dua file, ProductList.xaml dan file di balik kodenya, ProductList.xaml.csyang akan berisi semua logika kodenya.
sebelum menulis kode apapun ProductList.xamlpertama-tama kita perlu memperbarui AppShell.xaml file, yang merupakan root dari UI kami dan, seperti namanya, adalah Shell Atau struktur UI aplikasi kita:
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="MAUIPostFeed.AppShell"
xmlns="
xmlns:x="
// Added views to refer to Views folder inside project
xmlns:views="clr-namespace:MAUIPostFeed.Views"
Shell.FlyoutBehavior="Disabled">
<ShellContent
Title="Products"
// Using views to access Views.ProductList file
ContentTemplate="{DataTemplate views:ProductList}"
/>
</Shell>
Sekarang halaman kami sudah diatur dengan benar AppShellMari kita tulis kodenya ProductList.xaml dokumen:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="
xmlns:x="
x:Class="MAUIPostFeed.Views.ProductList"
>
<CollectionView x:Name="productsCollection"
ItemsSource="{Binding Products}"
Margin="10"
SelectionMode="Single"
>
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="20" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<VerticalStackLayout>
<Image HeightRequest="180" Aspect="AspectFill" >
<Image.Source>
<UriImageSource
Uri="{Binding thumbnail}"
CacheValidity="00:12:00:00"
/>
</Image.Source>
</Image>
<HorizontalStackLayout>
<Label Text="{Binding title}" FontSize="Title" FontAttributes="Bold" />
<Label Text="{Binding discountPercentage}" FontSize="Default" Margin="40,4,0,0" FontAttributes="Italic" FontFamily="Open-Sans" />
<Label Text=" % OFF" FontSize="Default"
Margin="0,4,0,0" FontAttributes="Italic"
FontFamily="Open-Sans" />
</HorizontalStackLayout>
<Label Text="{Binding description}" MaxLines="2"
FontSize="Subtitle" TextColor="Gray" />
</VerticalStackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ContentPage>
Dalam kode di atas, kami menambahkan x:Class="MAUIPostFeed.Views.ProductList" beri nama kelas ContentPage agar kita bisa mengaksesnya Controls Atribut dalam file di belakang kode.
Kemudian kita membuat CollectionView Dan ItemSource = Productsyang berasal dari BindingBinding adalah mekanisme dalam XAML yang dengannya kelas XAML dan kode di belakang dapat berkomunikasi.kita belum menciptakan Products; Kami akan melakukan ini pada langkah berikutnya.Akhirnya, kami menggunakan CollectionView.ItemTemplate Menentukan bagaimana item daftar harus dirender.
Dengan ini, bagian UI dari halaman daftar sudah selesai.Sekarang, mari kita siapkan layanan HTTP untuk mengambil produk dari REST API dan menyimpannya ObservableCollection.
Mari kita mulai dengan file di belakang kode ProductList.Paste kode berikut ke dalam ProductList.xaml.cs dokumen:
using MAUIPostFeed.Models;
namespace MAUIPostFeed.Views;
public partial class ProductList : ContentPage
{
public ProductList()
{
InitializeComponent();
// Initializing the BindingContext with Products
BindingContext = new Models.AllProducts();
}
}
Pada kode di atas, kita atur BindingContext tiba Models.AllProductsNamun, kami belum membuat model apa pun, jadi mari kita lakukan sekarang.
Layanan HTTP terintegrasi
Tambahkan folder baru ke Models.Internal, buat file bernama AllProducts.csModel akan berisi daftar berikut Products Kami ingin menunjukkan.Rekatkan kode berikut ke AllProducts.cs dokumen:
using System.Collections.ObjectModel;
using MAUIPostFeed.Services;
namespace MAUIPostFeed.Models
{
public class AllProducts
{
public ObservableCollection<Product> Products { get; set; } = new ObservableCollection<Product>();
readonly IProductsRepository ProductsRepository = new ProductsService();
public AllProducts() =>
LoadProducts();
public async void LoadProducts()
{
ObservableCollection<Product> temp = await ProductsRepository.LoadProducts();
for (int i = 0; i < temp.Count; i++)
{
Products.Add(temp[i]);
}
}
}
}
Dalam kode di atas, kami membuat file bernama AllProducts dan menambahkan a Products properti, yaitu a ObservableCollection dari Product. Kami akan membuat Product Kelas nanti.
Selanjutnya, kami menambahkan a ProductsRepository jenis atribut IProductsRepositorydicontohkan sebagai ProductService. Kami akan membuat kelas-kelas ini di langkah berikutnya.
Di konstruktor kelas, kami memanggil LoadProducts metode, yang didapat Product daftar dari ProductsRepository.Kami kemudian mendorong setiap produk ke atribut kelas kami Products.
kita membutuhkan satu lagi Model Dalam kode kami itu akan berisi struktur berikut Products. Tambahkan kelas baru Models dan bernama Products.csKemudian, tambahkan kode berikut ke kelas baru:
using System;
using System.Collections.ObjectModel;
namespace MAUIPostFeed.Models;
public class Product
{
public int id { get; set; }
public string title { get; set; }
public string description { get; set; }
public int price { get; set; }
public double discountPercentage { get; set; }
public double rating { get; set; }
public int stock { get; set; }
public string brand { get; set; }
public string category { get; set; }
public string thumbnail { get; set; }
public List<string> images { get; set; }
}
public class Products
{
public ObservableCollection<Product> products { get; set; }
public int total { get; set; }
public int skip { get; set; }
public int limit { get; set; }
}
Dalam file di atas, kami telah membuat dua kelas. Pertama, Productmemegang satu struktur Product. Kedua, Productsberisi a Product list dan beberapa data lain yang kami dapatkan dari API.
Dengan itu, kita sudah selesai Models. Sekarang, mari kita buat Servicesyang akan berinteraksi dengan jaringan dan mengambil produk.
Di proyek, tambahkan file bernama ServicesDi dalamnya, buat file bernama IProductsRepository dan tambahkan kode berikut ke file:
using System;
using System.Collections.ObjectModel;
using MAUIPostFeed.Models;
namespace MAUIPostFeed.Services
{
public interface IProductsRepository
{
Task<ObservableCollection<Product>> LoadProducts();
}
}
Pada kode di atas, kita membuat a IProductsRepository antarmuka, yang memiliki LoadProducts properti, atau Task kembali ObservableCollection dari Product.
Selanjutnya, kita perlu membuat ProductsService kelas, itu akan menerapkan IProductsRepository kelas dan dapatkan Products menggunakan HTTPClient.Buat kelas baru bernama 'ProductsService.cs dan tambahkan kode berikut ke dalamnya:
using System;
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.Text.Json;
using MAUIPostFeed.Models;
namespace MAUIPostFeed.Services;
public class ProductsService: IProductsRepository
{
HttpClient client;
JsonSerializerOptions serializerOptions;
public ObservableCollection<Product> Products { get; set; }
private static string BASE_URL { get; set; } = "
public ProductsService()
{
client = new HttpClient();
serializerOptions = new JsonSerializerOptions
{
PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
WriteIndented = true
};
}
public async Task<ObservableCollection<Product>> LoadProducts()
{
Products = new ObservableCollection<Product>();
Uri uri = new Uri(string.Format($"{BASE_URL}products?limit=10", string.Empty));
try
{
HttpResponseMessage response = await client.GetAsync(uri);
if (response.IsSuccessStatusCode)
{
string content = await response.Content.ReadAsStringAsync();
Products temp = JsonSerializer.Deserialize<Products>(content, serializerOptions);
Products = temp.products;
}
}
catch (Exception ex)
{
Debug.WriteLine(@"\tERROR {0}", ex.Message);
}
return Products;
}
}
Seperti yang mungkin telah Anda perhatikan, kami menggunakan dummyjson Dapatkan daftar titik akhir Products.Kami menggunakan GetAsync metode dari HttpClient panggilan GET Permintaan pada titik akhir API yang ditentukan.lalu kita Deserialized itu menggunakan kami Products kelas dan hanya menetapkan products Diterima dari respons API.
Itu dia. Buat ulang aplikasi Anda dan Anda akan melihat daftar 10 produk di layar:
Pada titik ini, kita dapat melihat daftar produk Products Halaman.Ketika pengguna mengklik produk apa pun, mereka harus dinavigasi ProductDetails halaman; semua informasi produk yang relevan harus terlihat di sana.
Untuk mencapai fungsi ini, kami akan melewati a Product sebagai NavigationParam tiba ProductDetails Halaman.
ada Views folder dan beri nama ProductDetails.Paste kode berikut di dalamnya ProductDetails.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="
xmlns:x="
x:Class="MAUIPostFeed.Views.ProductDetails"
Title="Product Details"
>
<ScrollView BackgroundColor="#eee" >
<VerticalStackLayout>
<CarouselView Loop="False"
ItemsSource="{Binding product.images}"
VerticalOptions="Start"
HeightRequest="300"
HorizontalScrollBarVisibility="Never" >
<CarouselView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}"
Aspect="AspectFit"
HeightRequest="300" />
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<VerticalStackLayout Margin="24, 10" Spacing="10" >
<Label Text="{Binding product.title}" FontSize="Title" FontFamily="OpenSansSemibold" />
<Label Text="{Binding product.description}" FontSize="Body" FontFamily="OpenSansRegular" />
<Grid ColumnDefinitions="*,*" ColumnSpacing="30" Margin="0, 10" >
<HorizontalStackLayout>
<Label Text="💵 $" FontSize="30" VerticalTextAlignment="Center" FontFamily="OpenSansRegular" />
<Label Text="{Binding product.price}" FontSize="40" FontFamily="OpenSansRegular" />
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="1">
<Label Text="⭐️ " FontSize="30" VerticalTextAlignment="Center" FontFamily="OpenSansRegular" />
<Label Text="{Binding product.rating}" FontSize="40" FontFamily="OpenSansRegular" />
</HorizontalStackLayout>
</Grid>
<HorizontalStackLayout>
<Label Text="Stocks left: " FontSize="20" VerticalTextAlignment="Center" FontFamily="OpenSansRegular" />
<Label Text="{Binding product.stock}" FontSize="30" FontFamily="OpenSansRegular" />
</HorizontalStackLayout>
<HorizontalStackLayout>
<Label Text="Brand: " FontSize="20" VerticalTextAlignment="Center" FontFamily="OpenSansRegular" />
<Label Text="{Binding product.brand}" FontSize="30" FontFamily="OpenSansRegular" />
</HorizontalStackLayout>
<HorizontalStackLayout>
<Label Text="Category: " FontSize="20" VerticalTextAlignment="Center" FontFamily="OpenSansRegular" />
<Label Text="{Binding product.category}" TextTransform="Uppercase" FontSize="30" FontFamily="OpenSansRegular" />
</HorizontalStackLayout>
</VerticalStackLayout>
</VerticalStackLayout>
</ScrollView>
</ContentPage>
Dalam kode di atas, kami membungkus UI lengkap dalam file a ScrollView dan menggunakan CarouselView tampilkan daftar images dari ProductKemudian kami menggunakan a VerticalStackLayout Tampilkan semua informasi yang relevan tentang suatu produk Label.
Namun, karena kami belum memetakannya Navigation Dan BindingContext, ini tidak akan berhasil.Untuk melakukannya, silakan masukkan ProductDetails.xaml.cs:
using System.ComponentModel;
using MAUIPostFeed.Models;
namespace MAUIPostFeed.Views;
[QueryProperty(nameof(Product), "product")]
public partial class ProductDetails : ContentPage, IQueryAttributable, INotifyPropertyChanged
{
public Product product { get; private set; }
public void ApplyQueryAttributes(IDictionary<string, object> query)
{
product = query["product"] as Product;
OnPropertyChanged("product");
}
public ProductDetails()
{
InitializeComponent();
BindingContext = this;
}
}
Dalam kode di atas, kami menggunakan IQueryAttributable Dan ApplyQueryAttributes mempersiapkan product atribut untuk nilai yang kita dapatkan dari QueryProperty.
Terakhir, tambahkan logika navigasi di dalamnya ProductList Halaman.Tambahkan SelectionChanged pengendali acara di CollectionView dari products:
<CollectionView x:Name="productsCollection"
ItemsSource="{Binding Products}"
Margin="10"
// Add below lines
SelectionMode="Single"
SelectionChanged="productsCollection_SelectionChanged"
>
sekarang kita telah berlalu eventHandlermari berkreasi eventHandler dalam file di belakang kode.Tambahkan metode di bawah ini ProductList.xaml.cs:
async void productsCollection_SelectionChanged(System.Object sender, Microsoft.Maui.Controls.SelectionChangedEventArgs e)
{
if (e.CurrentSelection.Count != 0)
{
Product product = e.CurrentSelection.FirstOrDefault() as Product;
var navigationParams = new Dictionary<string, object>
{
{ "product", product }
};
await Shell.Current.GoToAsync("ProductDetails", navigationParams);
productsCollection.SelectedItem = null;
}
}
Pada kode di atas, kita arahkan ke ProductDetails item apa pun di halaman CollectionView Terpilih.Kemudian, kami mengatur selectedItem dari productsCollection daftar nullSetel ulang antarmuka pengguna.
Jika Anda menjalankan kode ini sekarang, itu tidak akan berfungsi karena kami belum terdaftar ProductDetails Balik halaman Router1Untuk melakukannya, rekatkan kode berikut ke dalam AppShell.xaml.cs:
using MAUIPostFeed.Views;
namespace MAUIPostFeed;
public partial class AppShell : Shell
{
public AppShell()
{
InitializeComponent();
// Registering the Page into Routes
Routing.RegisterRoute("ProductDetails", typeof(ProductDetails));
}
}
Dengan ini, aplikasi kita selesai. Sekarang, jika Anda membangun dan menjalankan proyek, hasilnya akan terlihat seperti ini:
Kesimpulannya
Pada artikel ini, kita telah melihat cara menggunakan .NET MAUI untuk membuat aplikasi lintas platform untuk iOS dan Android. Namun, .NET MAUI tidak terbatas pada iOS dan Android; kami juga dapat menggunakan aplikasi kami di macOS dan Windows menggunakan basis kode yang sama.
.NET MAUI adalah kerangka kerja berkinerja tinggi yang ideal untuk membangun aplikasi lintas platform, terutama jika Anda ingin tetap berada di ekosistem .NET tanpa harus mempelajari kerangka kerja baru. Saya harap Anda menikmati artikel ini, terima kasih telah membaca!
beragampengetahuan: Reproduksi masalah secara instan di aplikasi Android Anda.
beragampengetahuan adalah solusi pemantauan Android yang membantu Anda mereproduksi masalah secara instan, memprioritaskan bug, dan memahami kinerja aplikasi Android.
beragampengetahuan juga dapat membantu Anda meningkatkan konversi dan penggunaan produk dengan menunjukkan dengan tepat bagaimana pengguna berinteraksi dengan aplikasi Anda. Analitik produk beragampengetahuan mengungkapkan mengapa pengguna tidak menyelesaikan proses tertentu atau mengadopsi fitur baru.
Mulailah memantau aplikasi Android Anda secara proaktif – coba beragampengetahuan secara gratis.
rencana pengembangan website
metode pengembangan website
jelaskan beberapa rencana untuk pengembangan website, proses pengembangan website, kekuatan dan kelemahan bisnis pengembangan website
, jasa pengembangan website, tahap pengembangan website, biaya pengembangan website
#Tutorial #.NET #MAUI #untuk #Android #dan #iOS
