Halo, iOS – Mulai Cepat

  • Artikel

Peringatan

Desainer iOS tidak digunakan lagi di Visual Studio 2019 versi 16.8 dan Visual Studio 2019 untuk Mac versi 8.8, dan dihapus di Visual Studio 2019 versi 16.9 dan Visual Studio untuk Mac versi 8.9. Cara yang disarankan untuk membangun antarmuka pengguna iOS adalah langsung di Mac yang menjalankan Penyusun Antarmuka Xcode. Untuk informasi selengkapnya, lihat Mendesain antarmuka pengguna dengan Xcode.

Panduan ini menjelaskan cara membuat aplikasi yang menerjemahkan nomor telepon alfanumerik yang dimasukkan oleh pengguna ke dalam nomor telepon numerik, lalu memanggil nomor tersebut. Aplikasi akhir terlihat seperti ini:

The Hello.iOS Quickstart app

Persyaratan

Pengembangan iOS dengan Xamarin memerlukan:

  • Mac yang menjalankan macOS High Sierra (10.13) atau lebih tinggi.
  • Versi terbaru Xcode dan iOS SDK yang diinstal dari App Store .

Xamarin.iOS berfungsi dengan penyiapan berikut:

  • Versi terbaru Visual Studio untuk Mac yang sesuai dengan spesifikasi di atas.

Panduan Penginstalan Mac Xamarin.iOS tersedia untuk instruksi penginstalan langkah demi langkah

Xamarin.iOS berfungsi dengan penyiapan berikut:

  • Versi terbaru Visual Studio 2019 atau Visual Studio 2017 Community, Professional, atau Enterprise di Windows 10, dipasangkan dengan host build Mac yang sesuai dengan spesifikasi di atas.

Panduan Penginstalan Windows Xamarin.iOS tersedia untuk instruksi penginstalan langkah demi langkah.

Sebelum memulai, unduh set Ikon Aplikasi Xamarin.

Panduan Visual Studio untuk Mac

Panduan ini menjelaskan cara membuat aplikasi yang disebut Telepon word yang menerjemahkan nomor telepon alfanumerik ke dalam nomor telepon numerik.

  1. Luncurkan Visual Studio untuk Mac dari folder Aplikasi atau Sorotan:

    The Launch screen

    Pada Layar Luncurkan, klik Proyek Baru... untuk membuat solusi Xamarin.iOS baru:

    iOS solution

  2. Dari dialog Solusi Baru, pilih templat Aplikasi Tampilan Tunggal Aplikasi > iOS>, memastikan bahwa C# dipilih. Klik Berikutnya:

    Choose Single View Application

  3. Mengonfigurasikan aplikasi. Berikan NamaPhoneword_iOS, dan biarkan yang lain sebagai default. Klik Berikutnya:

    Enter the app name

  4. Biarkan Nama Proyek dan Solusi apa adanya. Pilih lokasi proyek di sini, atau pertahankan sebagai default:

    Choose the location of the project

  5. Klik Buat untuk membuat Solusi.

  6. Buka file Main.storyboard dengan mengklik dua kali di Solution Pad. Pastikan Anda membuka file menggunakan Visual Studio iOS Designer (klik kanan papan cerita dan pilih Buka Dengan > Desainer iOS). Ini menyediakan cara untuk membuat UI secara visual:

    The iOS Designer

    Perhatikan bahwa kelas ukuran diaktifkan secara default. Lihat panduan Papan Cerita Terpadu untuk mempelajarinya lebih lanjut.

  7. Di Toolbox Pad, ketik "label" ke bilah pencarian dan seret Label ke permukaan desain (area di tengah):

    Drag a Label onto the design surface the area in the center

    Catatan

    Anda dapat memunculkan Properties Pad atau Toolbox kapan saja dengan menavigasi ke Lihat > Pad.

  8. Ambil handel Kontrol Seret (lingkaran di sekitar kontrol) dan buat label lebih lebar:

    Make the label wider

  9. Dengan Label yang dipilih pada permukaan desain, gunakan Properti Pad untuk mengubah properti Teks Label menjadi "Masukkan Telepon word:"

    Set the label to Enter a Phoneword

  10. Cari "bidang teks" di dalam Kotak Alat dan seret Bidang Teks dari Kotak Alat ke permukaan desain dan letakkan di bawah Label. Sesuaikan lebar hingga Bidang Teks lebarnya sama dengan Label:

    Make the Text Field the same width as the Label

  11. Dengan Bidang Teks dipilih pada permukaan desain, ubah properti Nama Bidang Teks di bagian Identitas Pad Properti menjadi PhoneNumberText, dan ubah properti Teks menjadi "1-855-XAMARIN":

    Change the Title property to 1-855-XAMARIN

  12. Seret Tombol dari Kotak Alat ke permukaan desain dan letakkan di bawah Bidang Teks. Sesuaikan lebar sehingga Tombol selebar Bidang Teks dan Label:

    Adjust the width so the Button is as wide as the Text Field and Label

  13. Dengan Tombol dipilih pada permukaan desain, ubah properti Nama di bagian Identitas dari Pad Properti menjadi TranslateButton. Ubah properti Judul menjadi "Terjemahkan":

    Change the Title property to Translate

  14. Ulangi dua langkah di atas dan seret Tombol dari Kotak Alat ke permukaan desain dan letakkan di bawah Tombol pertama. Sesuaikan lebar sehingga Tombol selebar Tombol pertama:

    Adjust the width so the Button is as wide as the first Button

  15. Dengan Tombol kedua dipilih pada permukaan desain, ubah properti Nama di bagian Identitas dari Pad Properti menjadi CallButton. Ubah properti Judul menjadi "Panggilan":

    Change the Title property to Call

    Simpan perubahan dengan menavigasi ke Simpan File > atau dengan menekan ⌘ + s.

  16. Beberapa logika perlu ditambahkan ke aplikasi untuk menerjemahkan nomor telepon dari alfanumerik ke numerik. Tambahkan file baru ke Proyek dengan mengklik kanan proyek Telepon word_iOS di Pad Solusi dan memilih Tambahkan > File Baru... atau menekan ⌘ + n:

    Add a new file to the Project

  17. Dalam dialog File Baru, pilih Kelas Kosong Umum > dan beri nama file PhoneTranslatorbaru :

    Select Empty Class and name the new file PhoneTranslator

  18. Ini menciptakan kelas C# baru yang kosong untuk kami. Hapus semua kode templat dan ganti dengan kode berikut:

    using System.Text;
using System;

namespace Phoneword_iOS
{
    public static class PhoneTranslator
    {
        public static string ToNumber(string raw)
        {
            if (string.IsNullOrWhiteSpace(raw)) {
                return "";
            } else {
                raw = raw.ToUpperInvariant();
            }

            var newNumber = new StringBuilder();
            foreach (var c in raw)
            {
                if (" -0123456789".Contains(c)) {
                    newNumber.Append(c);
                } else {
                    var result = TranslateToNumber(c);
                    if (result != null) {
                        newNumber.Append(result);
                    }
                }
                // otherwise we've skipped a non-numeric char
            }
            return newNumber.ToString();
        }

        static bool Contains (this string keyString, char c)
        {
            return keyString.IndexOf(c) >= 0;
        }

        static int? TranslateToNumber(char c)
        {
            if ("ABC".Contains(c)) {
                return 2;
            } else if ("DEF".Contains(c)) {
                return 3;
            } else if ("GHI".Contains(c)) {
                return 4;
            } else if ("JKL".Contains(c)) {
                return 5;
            } else if ("MNO".Contains(c)) {
                return 6;
            } else if ("PQRS".Contains(c)) {
                return 7;
            } else if ("TUV".Contains(c)) {
                return 8;
            } else if ("WXYZ".Contains(c)) {
                return 9;
            }
            return null;
        }
    }
}

    Simpan file Telepon Penerjemah.cs dan tutup.

  19. Tambahkan kode untuk menghubungkan antarmuka pengguna. Untuk melakukan ini klik dua kali pada ViewController.cs di Solution Pad untuk membukanya:

    Add code to wire up the user interface

  20. Mulailah dengan menghubungkan TranslateButton. Di kelas ViewController, temukan ViewDidLoad metode dan tambahkan kode berikut di bawah base.ViewDidLoad() panggilan:

    string translatedNumber = "";

TranslateButton.TouchUpInside += (object sender, EventArgs e) => {
    // Convert the phone number with text to a number
    // using PhoneTranslator.cs
    translatedNumber = PhoneTranslator.ToNumber(
        PhoneNumberText.Text);

    // Dismiss the keyboard if text field was tapped
    PhoneNumberText.ResignFirstResponder ();

    if (translatedNumber == "") {
        CallButton.SetTitle ("Call ", UIControlState.Normal);
        CallButton.Enabled = false;
    } else {
        CallButton.SetTitle ("Call " + translatedNumber,
            UIControlState.Normal);
        CallButton.Enabled = true;
    }
};

    Sertakan using Phoneword_iOS; jika namespace file berbeda.

  21. Tambahkan kode untuk merespons pengguna yang menekan tombol kedua, yang diberi nama CallButton. Letakkan kode berikut di bawah kode untuk TranslateButton dan tambahkan using Foundation; ke bagian atas file:

        CallButton.TouchUpInside += (object sender, EventArgs e) => {
        // Use URL handler with tel: prefix to invoke Apple's Phone app...
        var url = new NSUrl ("tel:" + translatedNumber);

        // ...otherwise show an alert dialog
        if (!UIApplication.SharedApplication.OpenUrl (url)) {
            var alert = UIAlertController.Create ("Not supported", "Scheme 'tel:' is not supported on this device", UIAlertControllerStyle.Alert);
            alert.AddAction (UIAlertAction.Create ("Ok", UIAlertActionStyle.Default, null));
            PresentViewController (alert, true, null);
        }
    };

  22. Simpan perubahan lalu buat aplikasi dengan memilih Build Build > All atau tekan ⌘ + B. Jika aplikasi dikompilasi, pesan sukses akan muncul di bagian atas IDE:

    A success message will appear at the top of the IDE

    Jika ada kesalahan, lakukan langkah-langkah sebelumnya dan perbaiki kesalahan apa pun hingga aplikasi berhasil dibangun.

  23. Terakhir, uji aplikasi di Simulator iOS. Di kiri atas IDE, pilih Debug dari dropdown pertama, dan i Telepon XR iOS 12.0 (atau simulator lain yang tersedia) dari dropdown kedua, dan tekan Start (tombol segitiga yang menyerupai tombol Putar):

    Select a simulator and press start

    Catatan

    Saat ini, karena persyaratan dari Apple, mungkin perlu memiliki sertifikat pengembangan atau identitas penandatanganan untuk membangun kode Anda untuk perangkat atau simulator. Ikuti langkah-langkah dalam panduan Provisi Perangkat untuk menyiapkannya.

  24. Ini akan meluncurkan aplikasi di dalam Simulator iOS:

    The application running inside the iOS Simulator

    Telepon panggilan tidak didukung di Simulator iOS; sebagai gantinya, Anda akan melihat dialog pemberitahuan saat mencoba melakukan panggilan:

    The alert dialog when trying to place a call

Panduan Visual Studio

Panduan ini menjelaskan cara membuat aplikasi yang disebut Telepon word yang menerjemahkan nomor telepon alfanumerik ke dalam nomor telepon numerik.

Catatan

Panduan ini menggunakan Visual Studio Enterprise 2017 pada Komputer Virtual Windows 10. Pengaturan Anda dapat berbeda dari ini, selama memenuhi persyaratan di atas, tetapi ketahuilah bahwa beberapa cuplikan layar mungkin terlihat berbeda dengan pengaturan Anda.

Catatan

Sebelum melanjutkan panduan ini, Anda harus sudah tersambung ke Mac dari Visual Studio. Ini karena Xamarin.iOS mengandalkan alat Apple untuk membangun dan meluncurkan aplikasi. Untuk menyiapkan, ikuti langkah-langkah dalam panduan Pasangkan ke Mac .

  1. Luncurkan Visual Studio dari menu Mulai :

    The Start screen

    Buat solusi Xamarin.iOS baru dengan memilih File > Proyek Baru>... > Visual C# > i Telepon & iPad > iOS App (Xamarin):

    Select iOS App (Xamarin) project type

    Dalam dialog berikutnya yang muncul, pilih templat Aplikasi Tampilan Tunggal dan tekan OK untuk membuat proyek:

    Select Single View project template

  2. Konfirmasikan bahwa ikon Agen Mac Xamarin di toolbar berwarna hijau.

    Confirm that the Xamarin Mac Agent icon in the toolbar is green

    Jika tidak, ini berarti bahwa tidak ada koneksi ke host build Mac Anda, ikuti langkah-langkah dalam panduan konfigurasi untuk tersambung.

  3. Buka file Main.storyboard di iOS Designer dengan mengklik dua kali di Penjelajah Solusi:

    The iOS Designer

  4. Buka tab Kotak Alat, ketik "label" ke bilah pencarian dan seret Label ke permukaan desain (area di tengah):

    Drag a Label onto the design surface the area in the center

  5. Selanjutnya, ambil handel Kontrol Seret dan buat label lebih lebar:

    Make the label wider

  6. Dengan Label yang dipilih pada permukaan desain, gunakan Properti Windows untuk mengubah properti Teks Label menjadi "Masukkan Telepon word:"

    Change the Text property of the Label to Enter a Phoneword

    Catatan

    Anda dapat memunculkan Properti atau Kotak Alat kapan saja dengan menavigasi ke menu Tampilan.

  7. Cari "bidang teks" di dalam Kotak Alat dan seret Bidang Teks dari Kotak Alat ke permukaan desain dan letakkan di bawah Label. Sesuaikan lebar hingga Bidang Teks lebarnya sama dengan Label:

    Adjust the width until the Text Field is the same width as the Label

  8. Dengan Bidang Teks dipilih pada permukaan desain, ubah properti Nama Bidang Teks di bagian Identitas Properti menjadi PhoneNumberText, dan ubah properti Teks menjadi "1-855-XAMARIN":

    Change the Text property to 1-855-XAMARIN

  9. Seret Tombol dari Kotak Alat ke permukaan desain dan letakkan di bawah Bidang Teks. Sesuaikan lebar sehingga Tombol selebar Bidang Teks dan Label:

    Adjust the width so the Button is as wide as the Text Field and Label

  10. Dengan Tombol dipilih pada permukaan desain, ubah properti Nama di bagian Identitas properti menjadi TranslateButton. Ubah properti Judul menjadi "Terjemahkan":

    Change the Title property to Translate

  11. Ulangi dua langkah sebelumnya dan seret Tombol dari Kotak Alat ke permukaan desain dan letakkan di bawah Tombol pertama. Sesuaikan lebar sehingga Tombol selebar Tombol pertama:

    Adjust the width so the Button is as wide as the first Button

  12. Dengan Tombol kedua dipilih pada permukaan desain, ubah properti Nama di bagian Identitas properti menjadi CallButton. Ubah properti Judul menjadi "Panggilan":

    Change the Title property to Call

    Simpan perubahan dengan menavigasi ke Simpan Semua File > atau dengan menekan Ctrl + s.

  13. Tambahkan beberapa kode untuk menerjemahkan nomor telepon dari alfanumerik ke numerik. Untuk melakukan ini, pertama-tama tambahkan file baru ke Proyek dengan mengklik kanan proyek Telepon word di Penjelajah Solusi dan memilih Tambahkan > Item Baru... atau menekan Ctrl + Shift + A:

    Add some code to translate phone numbers from alphanumeric to numeric

  14. Dalam dialog Tambahkan Item Baru (klik kanan pada proyek, pilih Tambahkan > Item Baru...), pilih Kelas Apple > dan beri nama file PhoneTranslatorbaru :

    Add a new class named PhoneTranslator

    Penting

    Pastikan Anda memilih templat 'kelas' yang memiliki C# di ikon . Jika tidak, Anda mungkin tidak dapat mereferensikan kelas baru ini.

  15. Ini membuat kelas C# baru. Hapus semua kode templat dan ganti dengan kode berikut:

    using System.Text;
using System;

namespace Phoneword
{
    public static class PhoneTranslator
    {
        public static string ToNumber(string raw)
        {
            if (string.IsNullOrWhiteSpace(raw)) {
                return "";
            } else {
                raw = raw.ToUpperInvariant();
            }

            var newNumber = new StringBuilder();
            foreach (var c in raw)
            {
                if (" -0123456789".Contains(c)) {
                    newNumber.Append(c);
                } else {
                    var result = TranslateToNumber(c);
                    if (result != null) {
                        newNumber.Append(result);
                    }
                }
                // otherwise we've skipped a non-numeric char
            }
            return newNumber.ToString();
        }

        static bool Contains (this string keyString, char c)
        {
            return keyString.IndexOf(c) >= 0;
        }

        static int? TranslateToNumber(char c)
        {
            if ("ABC".Contains(c)) {
                return 2;
            } else if ("DEF".Contains(c)) {
                return 3;
            } else if ("GHI".Contains(c)) {
                return 4;
            } else if ("JKL".Contains(c)) {
                return 5;
            } else if ("MNO".Contains(c)) {
                return 6;
            } else if ("PQRS".Contains(c)) {
                return 7;
            } else if ("TUV".Contains(c)) {
                return 8;
            } else if ("WXYZ".Contains(c)) {
                return 9;
            }
            return null;
        }
    }
}

    Simpan file Telepon Penerjemah.cs dan tutup.

  16. Klik dua kali pada ViewController.cs di Penjelajah Solusi untuk membukanya, sehingga logika dapat ditambahkan untuk menangani interaksi dengan tombol:

    Logic added to handle interactions with the buttons

  17. Mulailah dengan menghubungkan TranslateButton. Di kelas ViewController, temukan metode .ViewDidLoad Tambahkan kode tombol berikut di dalam ViewDidLoad, di bawah base.ViewDidLoad() panggilan:

    string translatedNumber = "";

TranslateButton.TouchUpInside += (object sender, EventArgs e) => {

    // Convert the phone number with text to a number
    // using PhoneTranslator.cs
    translatedNumber = PhoneTranslator.ToNumber(PhoneNumberText.Text);

    // Dismiss the keyboard if text field was tapped
    PhoneNumberText.ResignFirstResponder ();

    if (translatedNumber == "") {
        CallButton.SetTitle ("Call", UIControlState.Normal);
        CallButton.Enabled = false;
        }
    else {
        CallButton.SetTitle ("Call " + translatedNumber, UIControlState.Normal);
        CallButton.Enabled = true;
        }
};

    Sertakan using Phoneword; jika namespace file berbeda.

  18. Tambahkan kode untuk merespons pengguna yang menekan tombol kedua, yang diberi nama CallButton. Letakkan kode berikut di bawah kode untuk TranslateButton dan tambahkan using Foundation; ke bagian atas file:

    CallButton.TouchUpInside += (object sender, EventArgs e) => {
    var url = new NSUrl ("tel:" + translatedNumber);

        // Use URL handler with tel: prefix to invoke Apple's Phone app,
        // otherwise show an alert dialog

    if (!UIApplication.SharedApplication.OpenUrl (url)) {
                    var alert = UIAlertController.Create ("Not supported", "Scheme 'tel:' is not supported on this device", UIAlertControllerStyle.Alert);
                    alert.AddAction (UIAlertAction.Create ("Ok", UIAlertActionStyle.Default, null));
                    PresentViewController (alert, true, null);
                }
};

  19. Simpan perubahan, lalu buat aplikasi dengan memilih Build Build Solution atau tekan Ctrl + Shift + B>. Jika aplikasi dikompilasi, pesan sukses akan muncul di bagian bawah IDE:

    A success message will appear at the bottom of the IDE

    Jika ada kesalahan, lakukan langkah-langkah sebelumnya dan perbaiki kesalahan apa pun hingga aplikasi berhasil dibangun.

  20. Terakhir, uji aplikasi di Simulator iOS Jarak Jauh. Di toolbar IDE, pilih Debug dan i Telepon 8 Plus iOS x.x dari menu drop-down, dan tekan Mulai (segitiga hijau yang menyerupai tombol Putar):

    Press Start

  21. Ini akan meluncurkan aplikasi di dalam Simulator iOS:

    The application running inside the iOS Simulator

    Telepon panggilan tidak didukung di Simulator iOS; sebagai gantinya, dialog pemberitahuan akan ditampilkan saat mencoba melakukan panggilan:

    An alert dialog will display when trying to place a call

Selamat atas penyelesaian aplikasi Xamarin.iOS pertama Anda!

Sekarang saatnya untuk membedah alat dan keterampilan yang ditunjukkan dalam panduan ini di Hello, iOS Deep Dive.