Menyimpan Resep Nenek Dengan Xamarin.Forms

Diterbitkan: 2022-03-10

Ringkasan cepat Saat membuat aplikasi seluler, Anda harus membuat dan memelihara antarmuka pengguna dan logika aplikasi untuk iOS dan Android secara terpisah: Objective-C/Swift dengan XCode dan Java dengan Android Studio. Itu bisa dengan cepat berubah menjadi rasa sakit. Namun, dengan Xamarin.Forms, UI dan logika aplikasi untuk aplikasi Anda berada dalam satu basis kode dan Anda dapat menggunakan satu IDE untuk mempertahankan semuanya — menghemat waktu dan sakit kepala. Dalam artikel ini, lihatlah Xamarin.Forms untuk melihat apa yang dapat dilakukannya untuk Anda.

Nenek saya membuat roti yang paling empuk, paling empuk, dan empuk yang pernah dicicipi siapa pun. Masalahnya adalah, ada banyak bahan rahasia (dan saya tidak hanya berbicara cinta) yang masuk ke dalam roti itu, dan bahan-bahan serta petunjuk itu semua tersimpan di kepala nenek saya.

Kita semua memiliki resep keluarga seperti itu, dan daripada melupakannya, dalam artikel ini kita akan membuat aplikasi seluler untuk iOS dan Android menggunakan Xamarin.Form yang akan menyimpannya untuk saya dan generasi mendatang dari keluarga saya!

Menggambar roti dengan uap naik — Roti hangat yang lezat (Pratinjau besar)

Jadi, jika Anda tertarik untuk menulis aplikasi seluler, tetapi tidak punya waktu untuk menulis aplikasi yang sama berulang-ulang untuk setiap platform, artikel ini cocok untuk Anda! Jangan khawatir jika Anda tidak tahu C# dari Salad Pretzel Strawberry; Saya telah menulis aplikasi Xamarin selama lebih dari 8 tahun, dan artikel ini adalah tur melalui Xamarin.Forms yang bermaksud memberi Anda informasi yang cukup untuk mulai belajar sendiri.

Apa Barang Xamarin Ini?

Lebih dari sekadar kata yang menyenangkan untuk diucapkan, Xamarin memungkinkan pengembang untuk membuat aplikasi iOS dan Android asli menggunakan SDK dan kontrol UI yang sama persis seperti yang tersedia di Swift dan XCode untuk iOS atau Java dan Android Studio untuk Android.

Lebih banyak setelah melompat! Lanjutkan membaca di bawah ini

Menggambar sosok tongkat bertanya-tanya apakah mereka harus mengembangkan untuk iOS atau Android — Platform mana yang harus saya kembangkan? (Pratinjau besar)

Perbedaannya adalah bahwa aplikasi dikembangkan dengan C# menggunakan .NET Framework dan Visual Studio atau Visual Studio untuk Mac. Aplikasi yang dihasilkan, bagaimanapun, adalah persis sama. Mereka terlihat, merasakan, dan berperilaku seperti aplikasi asli yang ditulis dalam Objective-C, Swift, atau Java.

Xamarin bersinar dalam hal berbagi kode. Pengembang dapat membuat dan menyesuaikan UI mereka untuk setiap platform menggunakan kontrol asli dan SDK, tetapi kemudian menulis pustaka logika aplikasi bersama yang dibagikan di seluruh platform.

Menggambar stick figure dengan ide untuk mengembangkan kedua platform sekaligus menggunakan Xamarin — Ah! Saya akan memilih Xamarin! (Pratinjau besar)

Ini adalah berbagi kode di mana penghematan waktu yang luar biasa dapat diwujudkan.

Dan seperti roti lezat yang dipanggang nenek saya, setelah diberi rasa kode berbagi — sulit untuk tidak menginginkan lebih — dan di situlah Xamarin.Forms masuk.

Xamarin.Forms

Xamarin.Forms mengambil konsep pengembangan Xamarin tradisional dan menambahkan lapisan abstraksi ke dalamnya.

Alih-alih mengembangkan antarmuka pengguna untuk iOS dan Android secara terpisah, Xamarin.Forms memperkenalkan toolkit UI yang memungkinkan Anda untuk menulis aplikasi seluler asli dari satu basis kode.

Pikirkan seperti ini: Anda memiliki aplikasi yang membutuhkan tombol. Setiap platform memiliki konsep tombol. Mengapa Anda harus menulis antarmuka pengguna beberapa kali ketika Anda tahu bahwa semua pengguna aplikasi Anda hanya perlu mengetuk tombol?

Itulah salah satu masalah yang dipecahkan Xamarin.Forms.

Ini menyediakan toolkit dari kontrol yang paling umum digunakan dan peristiwa interaksi pengguna untuk mereka, jadi kita hanya perlu menulis antarmuka pengguna untuk aplikasi kita sekali. Perlu dicatat bahwa Anda tidak terbatas pada kontrol yang disediakan Xamarin.Forms — Anda masih dapat menggunakan kontrol yang hanya ditemukan di satu platform dalam aplikasi Xamarin.Forms. Selain itu, kita dapat berbagi logika aplikasi antar platform seperti sebelumnya.

Statistik berbagi kode untuk aplikasi yang dikembangkan dengan Xamarin.Forms dapat diabaikan. Aplikasi penyelenggara konferensi memiliki 93% kode yang dibagikan di iOS dan 91% di Android. Aplikasi ini bersumber terbuka. Intip kodenya.

Xamarin.Forms menyediakan lebih dari kontrol UI. Ini juga berisi kerangka kerja MVVM, layanan perpesanan pub/sub, API animasi, dan layanan ketergantungan, plus lainnya.

Tapi hari ini, kita akan fokus pada kemampuan UI untuk membangun aplikasi pengelola resep kita.

Aplikasi yang Akan Kami Bangun

Aplikasi pengelola resep akan memiliki antarmuka pengguna yang langsung. Kami akan bekerja di dapur, jadi harus mudah digunakan!

Ini akan terdiri dari 3 layar . Yang pertama akan menampilkan daftar semua resep yang saat ini dimuat di aplikasi.

Tangkapan layar layar daftar resep di iOS — (Pratinjau besar)

Kemudian, dengan mengetuk salah satu resep tersebut, Anda akan dapat melihat detailnya di layar kedua:

Tangkapan layar layar detail resep di iOS — Layar detail resep di iOS (Pratinjau besar)

Dari sana Anda dapat mengetuk tombol edit untuk membuat perubahan pada resep di layar ketiga:

Tangkapan layar layar edit resep di iOS — Layar edit resep di iOS (Pratinjau besar)

Anda juga dapat membuka layar ini dengan mengetuk tombol tambah dari layar daftar resep.

Lingkungan Pengembangan

Aplikasi Xamarin dibuat dengan C# dan .NET, menggunakan Visual Studio di Windows atau Visual Studio untuk Mac di Mac, tetapi Anda juga harus menginstal iOS atau Android SDK dan perkakas. Menginstal semuanya, dalam urutan yang benar bisa menjadi sedikit masalah, namun, penginstal Visual Studio akan mengurus catatan hanya untuk menginstal IDE, tetapi juga perkakas platform.

Meskipun Mac selalu diperlukan untuk membuat aplikasi iOS, dengan Xamarin Anda masih dapat mengembangkan dan men-debug aplikasi tersebut dari Visual Studio di Windows! Jadi jika Windows adalah kemacetan Anda, tidak perlu mengubah lingkungan Anda sama sekali.

Sekarang mari kita lihat bagaimana Xamarin.Forms dapat membantu kita menyimpan beberapa resep keluarga dari satu basis kode!

Halaman Daftar Resep: Meletakkan UI

Mari kita mulai dengan berbicara tentang bagaimana kita akan mengatur tata letak UI untuk aplikasi penyimpanan resep kita!

Secara keseluruhan setiap layar di Xamarin.Forms terdiri dari 3 elemen. Sebuah Page . Setidaknya satu elemen yang disebut Layout . Dan setidaknya satu Control .

Halaman

Halaman adalah hal yang menampung semua yang ditampilkan di layar pada satu waktu. Page juga menjadi pusat navigasi dalam aplikasi.

Kami memberi tahu Xamarin.Forms Page mana yang akan ditampilkan melalui Layanan Navigasi . Layanan itu kemudian akan mengurus menampilkan halaman apa pun dengan cara yang sesuai dan asli untuk sistem operasi.

Dengan kata lain, kode untuk menavigasi antar layar telah diabstraksikan juga!

Akhirnya, meskipun bukan satu-satunya cara untuk melakukannya, saya mengkodekan UI Page saya di XAML. (Cara lain adalah dengan menggunakan C#.) XAML adalah bahasa markup yang menjelaskan tampilan halaman. Dan untuk saat ini, cukup untuk mengatakan, ini agak mirip dengan HTML.

Tata Letak

Semua kontrol pada halaman diatur oleh sesuatu yang disebut Layout.

Satu atau lebih tata letak dapat ditambahkan ke halaman.

Menggambar bagaimana tata letak berinteraksi dengan halaman — Tata letak pada halaman (Pratinjau besar)

Ada beberapa jenis Tata Letak dalam Formulir. Beberapa yang paling umum termasuk tata letak Stack, Absolute, Relative, Grid, Scroll, dan Flex.

Menggambar beberapa layout Xamarin.Forms dan bagaimana mereka mengatur elemen anak mereka. — Tata letak Xamarin.Forms umum (Pratinjau besar)

Kontrol

Lalu akhirnya ada kontrol. Ini adalah widget aplikasi Anda yang berinteraksi dengan pengguna.

Formulir hadir dengan banyak kontrol yang akan digunakan apa pun jenis aplikasi yang Anda buat. Hal-hal seperti label, tombol, kotak entri, gambar, dan tentu saja, tampilan daftar.

Saat menambahkan kontrol ke layar, Anda menambahkannya ke tata letak. Tata letak yang menangani mencari di mana tepatnya di layar kontrol akan muncul.

Gambar halaman yang menampung 2 tata letak, dan tata letak tersebut mengatur kontrol menurut tipe tata letak. — Semuanya cocok! (Pratinjau besar)

Jadi untuk menghasilkan layar berikut di iOS dan Android masing-masing:

Tangkapan layar layar daftar resep di iOS dan Android — Daftar resep di iOS (kiri) dan Android (kanan) (Pratinjau besar)

Saya menggunakan XAML ini:

 <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="https://xamarin.com/schemas/2014/forms" xmlns:x="https://schemas.microsoft.com/winfx/2009/xaml" x:Class="SmashingRecipe.RecipeListPage" Title="Recipes"> <ContentPage.Content> <StackLayout> <ListView x:Name="recipesList"> <ListView.ItemTemplate> <DataTemplate> <TextCell Text="{Binding Name}"/> </DataTemplate> </ListView.ItemTemplate> </ListView> </StackLayout> </ContentPage.Content> <ContentPage.ToolbarItems> <ToolbarItem Text="Add" /> </ContentPage.ToolbarItems> </ContentPage>

Ada beberapa hal penting yang terjadi di sini.

Yang pertama adalah <StackLayout> . Ini memberitahu Formulir untuk mengatur semua kontrol yang mengikuti dalam tumpukan.

Kebetulan hanya ada satu kontrol dalam tata letak, dan itu adalah <ListView> , dan kami akan memberinya nama sehingga kami dapat merujuknya nanti.

Lalu ada sedikit upacara boilerplate ke ListView sebelum kita mendapatkan apa yang kita cari: <TextCell> . Ini memberitahu Formulir untuk menampilkan teks sederhana di setiap sel daftar.

Kami memberi tahu <TextCell> teks yang kami inginkan untuk ditampilkan melalui teknik yang disebut Data Binding . Sintaksnya terlihat seperti Text="{Binding Name}" . Dimana Name adalah properti dari kelas Recipe yang memodelkan… yah, Recipes.

Jadi bagaimana resep bisa ditambahkan ke daftar?

Seiring dengan setiap file XAML, ada file "di belakang kode". Kode di belakang ini memungkinkan kita untuk melakukan hal-hal seperti menangani peristiwa interaksi pengguna, atau melakukan penyiapan, atau melakukan logika aplikasi lainnya.

Ada fungsi yang bisa diganti di setiap Page yang disebut OnAppearing — yang seperti yang saya yakin Anda tebak — dipanggil saat Page muncul.

 protected override void OnAppearing() { base.OnAppearing(); recipesList.ItemsSource = null; recipesList.ItemsSource = App.AllRecipes; }

Perhatikan recipesList.ItemsSource = AllRecipes;

Ini memberi tahu ListView - “Hei! Semua data Anda ditemukan di App.AllRecipes enumerable (variabel seluruh aplikasi) dan Anda dapat menggunakan properti objek turunannya untuk diikat!”.

Daftar resep semuanya baik-baik saja — tetapi Anda tidak dapat memanggang apa pun tanpa terlebih dahulu melihat detail resep — dan kami akan mengurusnya selanjutnya.

Penanganan Acara

Tanpa menanggapi sentuhan pengguna, aplikasi kami tidak lebih dari daftar resep yang terdengar lezat. Kedengarannya bagus, tetapi tanpa mengetahui cara memasaknya, itu tidak banyak berguna!

Mari buat setiap sel di ListView merespons ketukan sehingga kita bisa melihat cara membuat resepnya!

Dalam file code-behind RecipeListPage , kita dapat menambahkan event handler ke kontrol untuk mendengarkan dan bereaksi terhadap event interaksi pengguna.

Menangani peristiwa ketuk pada tampilan daftar lalu:

 recipesList.ItemSelected += async (sender, eventArgs) => { if (eventArgs.SelectedItem != null) { var detailPage = new RecipeDetailPage(eventArgs.SelectedItem as Recipe); await Navigation.PushAsync(detailPage); recipesList.SelectedItem = null; } };

Ada beberapa hal rapi yang terjadi di sana.

Setiap kali seseorang memilih baris, ItemSelected diaktifkan pada ListView .

Dari argumen yang diteruskan ke handler, objek eventArgs memiliki properti SelectedItem yang kebetulan terikat ke ListView dari sebelumnya.

Dalam kasus kami, itu adalah kelas Recipe . (Jadi kita tidak perlu mencari objek di sumber master - objek itu akan diteruskan ke kita.)

Halaman Detail Resep

Tentu saja, ada halaman yang menunjukkan kepada kita bahan-bahan rahasia dan petunjuk cara membuat setiap resep, tetapi bagaimana halaman itu ditampilkan?

Menggambar sosok tongkat berpakaian sebagai koki yang siap untuk mulai memanggang. — Ayo memasak! (Pratinjau besar)

Perhatikan await Navigation.PushAsync(detailPage); garis dari atas. Objek Navigation adalah objek platform-independen yang menangani transisi halaman dengan cara asli untuk setiap platform.

Sekarang mari kita intip halaman detail resepnya:

Tangkapan layar layar detail resep di iOS dan Android — Layar detail resep di iOS (kiri) dan Android (kanan) (Pratinjau besar)

Halaman ini dibangun dengan XAML juga. Namun, Layout yang digunakan (FlexLayout) cukup keren karena terinspirasi dari CSS Flexbox.

 <ContentPage.Content> <ScrollView> <FlexLayout AlignItems="Start" AlignContent="Start" Wrap="Wrap"> <Image Source="buns.png" FlexLayout.Basis="100%" /> <Label Text="{Binding Name}" HorizontalTextAlignment="Center" TextColor="#01487E" FontAttributes="Bold" FontSize="Large" Margin="10, 10" /> <BoxView FlexLayout.Basis="100%" HeightRequest="0" /> <Label Text="Ingredients" FontAttributes="Bold" FontSize="Medium" TextColor="#EE3F60" Margin="10,10" HorizontalOptions="FillAndExpand" /> <BoxView FlexLayout.Basis="100%" HeightRequest="0" /> <Label Text="{Binding Ingredients}" Margin="10,10" FontSize="Small" /> <BoxView FlexLayout.Basis="100%" HeightRequest="0" /> <Label Text="Directions" FontAttributes="Bold" FontSize="Medium" TextColor="#EE3F60" Margin="10,10" HorizontalOptions="FillAndExpand" /> <BoxView FlexLayout.Basis="100%" HeightRequest="0" /> <Label Text="{Binding Directions}" Margin="10,10" FontSize="Small" /> </FlexLayout> </ScrollView> </ContentPage.Content>

FlexLayout akan mengatur kontrolnya dalam baris atau kolom. Manfaat besar datang meskipun dengan fakta bahwa ia dapat secara otomatis mendeteksi berapa banyak ruang yang tersisa di layar untuk menempatkan kontrol, dan jika tidak cukup, maka secara otomatis dapat membuat baris atau kolom baru untuk menampungnya!

Ini sangat membantu ketika berhadapan dengan berbagai ukuran layar, yang ada banyak dalam pengembangan seluler.

Nah, dengan FlexLayout yang membantu kita menjaga agar layar detail tetap terlihat bagus, kita masih perlu mengedit resep-resep itu, bukan?

Anda mungkin memperhatikan ini:

 <ToolbarItem Text="Edit" Clicked="Edit_Clicked" />

Baris itu bertanggung jawab untuk meletakkan tombol di bilah alat aplikasi. Clicked="Edit_Clicked" memberi tahu tombol bahwa ketika diklik, lihat kode di belakang untuk fungsi dari nama itu, lalu jalankan kodenya.

Yang dalam hal ini, akan membuat Instansiasi Halaman Edit Resep, dan mendorongnya ke tumpukan navigasi kita menggunakan objek Navigation yang disebutkan sebelumnya.

Halaman Edit Resep

Halaman dengan daftar resep: periksa! Halaman dengan semua detail untuk membuat resep: periksa! Yang tersisa sekarang adalah membuat halaman yang kita gunakan untuk memasukkan atau mengubah resep sambil menonton nenek mengerjakan sihirnya!

Pertama, periksa layar:

Tangkapan layar layar edit resep di iOS dan Android — Layar edit resep di iOS (kiri) dan Android (kanan) (Pratinjau besar)

Dan sekarang kodenya:

 <ContentPage.Content> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <TableView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Intent="Form" HasUnevenRows="true"> <TableSection Title="General"> <EntryCell x:Name="recipeNameCell" Label="Name" /> </TableSection> <TableSection Title="Ingredients"> <ViewCell> <StackLayout Padding="15"> <Editor x:Name="ingredientsCell" /> </StackLayout> </ViewCell> </TableSection> <TableSection Title="Directions"> <ViewCell> <StackLayout Padding="15"> <Editor x:Name="directionsCell" /> </StackLayout> </ViewCell> </TableSection> </TableView> <Button Text="Save" Grid.Row="1" Grid.Column="0" BackgroundColor="#EE3F60" TextColor="White" x:Name="saveButton" /> <Button Text="Cancel" Grid.Row="1" Grid.Column="1" BackgroundColor="#4CC7F2" TextColor="White" x:Name="cancelButton" /> </Grid> </ContentPage.Content>

Ada sedikit lebih banyak kode di sini, dan itu karena saya menggunakan tata letak Grid untuk menentukan bagaimana semuanya harus ditata dalam pola 2-Dimensi.

Dan juga perhatikan tidak ada pengikatan data di sini. Karena saya ingin memberikan contoh bagaimana seseorang akan mengisi kontrol murni dari kode di belakang file:

 void InitializePage() { Title = TheRecipe.Name ?? "New Recipe"; recipeNameCell.Text = TheRecipe.Name; ingredientsCell.Text = TheRecipe.Ingredients; directionsCell.Text = TheRecipe.Directions; saveButton.Clicked += async (sender, args) => { SaveRecipe(); await CloseWindow(); }; cancelButton.Clicked += async (sender, args) => { await CloseWindow(); }; }

Lihat properti TheRecipe itu? Ini adalah tingkat halaman, menampung semua data untuk resep tertentu, dan diatur dalam konstruktor halaman.

Kedua, event handler Clicked untuk saveButton dan cancelButton benar-benar .NET-ified (dan ya, saya cukup sering membuat kata-kata saya sendiri.)

Saya katakan mereka .NET-ified karena sintaks untuk menangani acara itu bukan asli Java atau Objective-C. Saat aplikasi berjalan di Android atau iOS, perilakunya akan persis seperti Android Click atau iOS TouchUpInside.

Dan seperti yang Anda lihat, masing-masing event handler klik tersebut menjalankan fungsi yang sesuai yang menyimpan resep dan menutup halaman, atau hanya mengabaikan halaman.

Itu dia — kami memiliki UI untuk menyimpan resep dari sekarang hingga akhir waktu!

CSS Apa?!? Atau Membuat Aplikasinya Cantik

Menyimpan yang terbaik untuk yang terakhir: Xamarin.Forms 3.0 memberi kita — antara lain — kemampuan untuk mengatur gaya kontrol menggunakan CSS!

CSS Xamarin.Forms tidak 100% seperti yang biasa Anda gunakan dari pengembangan web. Tapi itu cukup dekat sehingga siapa pun yang akrab dengan CSS akan merasa seperti di rumah sendiri. Sama seperti saya di rumah nenek!

Jadi mari kita ambil halaman Detail Resep dan refactor, jadi ini menggunakan Cascading Style Sheets untuk mengatur elemen visual alih-alih mengatur semuanya langsung inline di XAML.

Langkah pertama adalah membuat dokumen CSS! Dalam hal ini akan terlihat seperti berikut:

 .flexContent { align-items: flex-start; align-content: flex-start; flex-wrap: wrap; } image { flex-basis: 100%; } .spacer { flex-basis: 100%; height: 0; } .foodHeader { font-size: large; font-weight: bold; color: #01487E; margin: 10 10; } .dataLabel { font-size: medium; font-weight: bold; color: #EE3F60; margin: 10 10; } .data { font-size: small; margin: 10 10; }

Untuk sebagian besar, itu terlihat seperti CSS. Ada kelas di sana. Ada satu pemilih untuk tipe kelas, Image . Dan kemudian sekelompok setter properti.

Beberapa setter properti tersebut, seperti flex-wrap atau flex-basis khusus untuk Xamarin.Forms. Ke depan, tim akan memberi awalan xf- untuk mengikuti praktik standar.

Selanjutnya adalah menerapkannya ke kontrol XAML.

 <ContentPage.Resources> <StyleSheet Source="../Styles/RecipeDetailStyle.css" /> </ContentPage.Resources> <ContentPage.Content> <ScrollView> <FlexLayout StyleClass="flexContent"> <Image Source="buns.png" /> <Label Text="{Binding Name}" StyleClass="foodHeader" /> <BoxView StyleClass="spacer" /> <Label Text="Ingredients" StyleClass="dataLabel" HorizontalOptions="FillAndExpand" /> <BoxView StyleClass="spacer" /> <Label Text="{Binding Ingredients}" StyleClass="data" /> <BoxView StyleClass="spacer" /> <Label Text="Directions" StyleClass="dataLabel" HorizontalOptions="FillAndExpand" /> <BoxView StyleClass="spacer" /> <Label Text="{Binding Directions}" StyleClass="data" /> </FlexLayout> </ScrollView> </ContentPage.Content>

Berikut tampilannya sebelumnya.

Di Xamarin.Forms, untuk mereferensikan dokumen CSS, tambahkan <StyleSheet Source="YOUR DOC PATH" /> . Kemudian Anda dapat mereferensikan kelas di setiap kontrol melalui properti StyleClass .

Itu pasti membersihkan XAML, dan itu membuat niat kontrol juga lebih jelas. Misalnya, sekarang cukup jelas apa yang <BoxView StyleClass="spacer" /> lakukan!

Dan Image mendapatkan gayanya sendiri karena ini adalah Image dan cara kami mendefinisikan pemilih di CSS.

Yang pasti, CSS di Xamarin.Forms tidak sepenuhnya diimplementasikan seperti sepupu webnya, tetapi masih cukup keren. Anda memiliki penyeleksi, kelas, dapat mengatur properti dan, tentu saja, semua hal yang mengalir itu terjadi!

Ringkasan

Tiga layar, dua platform, satu artikel, dan resep tanpa akhir disimpan! Dan Anda tahu apa lagi? Anda dapat membangun aplikasi dengan Xamarin.Forms untuk lebih dari Android dan iOS. Anda dapat membangun platform UWP, macOS, dan bahkan Samsung Tizen!

Xamarin.Forms adalah toolkit UI yang memungkinkan Anda membuat aplikasi dengan menulis antarmuka pengguna sekali dan membuat UI dirender secara native di seluruh platform utama.

Ini dilakukan dengan menyediakan SDK yang merupakan abstraksi dari kontrol yang paling umum digunakan di seluruh platform. Selain kebaikan UI, Xamarin.Forms juga menyediakan kerangka kerja MVVM berfitur lengkap, layanan perpesanan pub/sub, API animasi, dan layanan ketergantungan.

Xamarin.Forms juga memberi Anda semua manfaat kode yang sama dengan pengembangan Xamarin tradisional. Logika aplikasi apa pun dibagikan di semua platform. Dan Anda dapat mengembangkan semua aplikasi Anda dengan satu IDE menggunakan satu bahasa — itu sangat keren!

Ke mana selanjutnya? Unduh kode sumber untuk aplikasi Xamarin.Forms ini untuk mencobanya sendiri. Kemudian untuk mempelajari lebih lanjut tentang Xamarin.Forms, termasuk kemampuan untuk membuat aplikasi semua dalam browser Anda, lihat tutorial online ini!