Bagikan melalui

Membangun Aplikasi pertama Xamarin.Forms Anda

  • Artikel

Instruksi langkah demi langkah untuk Windows

Ikuti langkah-langkah ini bersama dengan video di atas:

  1. Pilih File > Proyek Baru > ... atau tekan tombol Buat proyek baru... .

  2. Cari "Xamarin" atau pilih Seluler dari menu Jenis proyek. Pilih jenis proyek Aplikasi Seluler (Xamarin.Forms).

  3. Pilih nama proyek - contohnya menggunakan "AwesomeApp".

  4. Klik jenis proyek Kosong dan pastikan Android dan iOS dipilih:

    Aplikasi Kosong Android dan iOS

  5. Tunggu hingga paket NuGet dipulihkan (pesan "Pemulihan selesai" akan muncul di bilah status).

  6. Penginstalan Visual Studio 2022 baru tidak akan menginstal Android SDK, Anda mungkin diminta untuk menginstal Android SDK terbaru:

    Menginstal Android SDK

  7. Penginstalan Visual Studio 2022 baru tidak akan memiliki emulator Android yang dikonfigurasi. Klik panah dropdown pada tombol Debug dan pilih Buat Emulator Android untuk meluncurkan layar pembuatan emulator:

    Membuat dropdown Android Emulator

  8. Di layar pembuatan emulator, gunakan pengaturan default dan klik tombol Buat :

    Layar pembuatan emulator Android

  9. Membuat emulator akan mengembalikan Anda ke jendela Device Manager. Klik tombol Mulai untuk meluncurkan emulator baru:

    Emulator Android di Device Manager

  10. Visual Studio 2022 sekarang harus menampilkan nama emulator baru pada tombol Debug :

    Nama emulator Android pada tombol Debug

  11. Klik tombol Debug untuk membangun dan menyebarkan aplikasi ke emulator Android:

    Emulator Android yang menampilkan aplikasi

Mengkustomisasi aplikasi

Aplikasi dapat disesuaikan untuk menambahkan fungsionalitas interaktif. Lakukan langkah-langkah berikut untuk menambahkan interaksi pengguna ke aplikasi:

  1. Edit MainPage.xaml, tambahkan XAML ini sebelum akhir </StackLayout>:

    <Button Text="Click Me" Clicked="Button_Clicked" />

  2. Edit MainPage.xaml.cs, menambahkan kode ini ke akhir kelas:

    int count = 0;
void Button_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  3. Debug aplikasi di Android:

    Aplikasi Android dengan Tombol

Membuat aplikasi iOS di Visual Studio 2022

Anda dapat membuat dan men-debug aplikasi iOS dari Visual Studio dengan komputer Mac berjaringan. Lihat instruksi penyiapan untuk informasi selengkapnya.

Instruksi langkah demi langkah untuk Windows

Ikuti langkah-langkah ini bersama dengan video di atas:

  1. Pilih File > Proyek Baru > ... atau tekan tombol Buat proyek baru... :

    Membuat proyek baru

  2. Cari "Xamarin" atau pilih Seluler dari menu Jenis proyek. Pilih jenis proyek Aplikasi Seluler (Xamarin.Forms):

    Filter untuk proyek Xamarin

  3. Pilih nama proyek - contohnya menggunakan "AwesomeApp":

    Pilih nama proyek

  4. Klik jenis proyek Kosong dan pastikan Android dan iOS dipilih:

    Android dan iOS, dengan .NET Standard

  5. Tunggu hingga paket NuGet dipulihkan (pesan "Pemulihan selesai" akan muncul di bilah status).

  6. Penginstalan Visual Studio 2019 baru tidak akan memiliki emulator Android yang dikonfigurasi. Klik panah dropdown pada tombol Debug dan pilih Buat Emulator Android untuk meluncurkan layar pembuatan emulator:

    Membuat dropdown Android Emulator

  7. Di layar pembuatan emulator, gunakan pengaturan default dan klik tombol Buat :

    Layar pembuatan emulator Android

  8. Membuat emulator akan mengembalikan Anda ke jendela Device Manager. Klik tombol Mulai untuk meluncurkan emulator baru:

    Emulator Android di Device Manager

  9. Visual Studio 2019 sekarang harus menampilkan nama emulator baru pada tombol Debug :

    Nama emulator Android pada tombol Debug

  10. Klik tombol Debug untuk membangun dan menyebarkan aplikasi ke emulator Android:

    Emulator Android yang menampilkan aplikasi

Mengkustomisasi aplikasi

Aplikasi dapat disesuaikan untuk menambahkan fungsionalitas interaktif. Lakukan langkah-langkah berikut untuk menambahkan interaksi pengguna ke aplikasi:

  1. Edit MainPage.xaml, tambahkan XAML ini sebelum akhir </StackLayout>:

    <Button Text="Click Me" Clicked="Button_Clicked" />

  2. Edit MainPage.xaml.cs, menambahkan kode ini ke akhir kelas:

    int count = 0;
void Button_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  3. Debug aplikasi di Android:

    Aplikasi Android

Catatan

Aplikasi sampel mencakup fungsionalitas interaktif tambahan yang tidak tercakup dalam video.

Membuat aplikasi iOS di Visual Studio 2019

Anda dapat membuat dan men-debug aplikasi iOS dari Visual Studio dengan komputer Mac berjaringan. Lihat instruksi penyiapan untuk informasi selengkapnya.

Video ini mencakup proses pembuatan dan pengujian aplikasi iOS menggunakan Visual Studio 2019 di Windows:

Instruksi langkah demi langkah untuk Mac

Ikuti langkah-langkah ini bersama dengan video di atas:

  1. Pilih File > Solusi Baru... atau tekan tombol Proyek Baru... , lalu pilih Aplikasi Formulir Kosong Aplikasi > Multiplatform>:

    Aplikasi Formulir Kosong

  2. Pastikan Android dan iOS dipilih:

    Android dan iOS, dengan .NET Standard

Catatan

Hanya A-Z, a-z, '_', '.', dan angka yang didukung karakter untuk Nama Aplikasi dan Pengidentifikasi Organisasi Anda.

  1. Pulihkan paket NuGet, dengan mengklik kanan solusi:

    Cuplikan layar memperlihatkan Pulihkan Paket NuGet yang dipilih dari menu konteks untuk solusi.

  2. Luncurkan emulator Android dengan menekan tombol debug (atau Jalankan > Mulai Debugging).

  3. Edit MainPage.xaml, tambahkan XAML ini sebelum akhir </StackLayout>:

    <Button Text="Click Me" Clicked="Handle_Clicked" />

  4. Edit MainPage.xaml.cs, menambahkan kode ini ke akhir kelas:

    int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  5. Debug aplikasi di Android:

    Cuplikan layar memperlihatkan Android Emulator.

  6. Klik kanan untuk mengatur iOS ke Proyek Startup:

    Mengatur proyek startup ke iOS

  7. Debug aplikasi di iOS dengan memilih simulator iOS dari menu dropdown.

Instruksi langkah demi langkah untuk Mac

Ikuti langkah-langkah ini bersama dengan video di atas:

  1. Pilih File > Solusi Baru... atau tekan tombol Proyek Baru... , lalu pilih Aplikasi Formulir Kosong Aplikasi > Multiplatform>:

    Aplikasi Formulir Kosong

  2. Pastikan Android dan iOS dipilih, dengan berbagi kode .NET Standard :

    Android dan iOS, dengan .NET Standard

Catatan

Hanya A-Z, a-z, '_', '.', dan angka yang didukung karakter untuk Nama Aplikasi dan Pengidentifikasi Organisasi Anda.

  1. Pulihkan paket NuGet, dengan mengklik kanan solusi:

    Cuplikan layar memperlihatkan Pulihkan Paket NuGet yang dipilih dari menu konteks untuk solusi.

  2. Luncurkan emulator Android dengan menekan tombol debug (atau Jalankan > Mulai Debugging).

  3. Edit MainPage.xaml, tambahkan XAML ini sebelum akhir </StackLayout>:

    <Button Text="Click Me" Clicked="Handle_Clicked" />

  4. Edit MainPage.xaml.cs, menambahkan kode ini ke akhir kelas:

    int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  5. Debug aplikasi di Android:

    Cuplikan layar memperlihatkan Android Emulator.

  6. Klik kanan untuk mengatur iOS ke Proyek Startup:

    Mengatur proyek startup ke iOS

  7. Debug aplikasi di iOS:

    Aplikasi iOS

Anda dapat melihat kode yang telah selesai di GitHub.

Langkah berikutnya

  • Mulai Cepat Satu Halaman – Buat aplikasi yang lebih fungsional.
  • Xamarin.Forms Sampel – Unduh dan jalankan contoh kode dan aplikasi sampel.
  • Membuat ebook Mobile Apps – Bab mendalam yang mengajarkan Xamarin.Forms pengembangan, tersedia sebagai PDF dan termasuk ratusan sampel tambahan.