Latihan: Membuat aplikasi penerjemah nomor telepon

  • 10 menit

Dalam latihan ini, Anda membuat UI untuk aplikasi dialer telepon dan mengimplementasikan logika di balik UI ini.

Anda membangun UI yang memanfaatkan kemampuan UI .NET MAUI (Antarmuka Pengguna Aplikasi Multi-platform) dan paket .NET MAUI Essentials untuk menghubungi telepon.

Aplikasi ini memungkinkan pengguna mengetik teks ke dalam bidang input, dan menerjemahkan teks tersebut ke digit numerik. Ini menggunakan huruf yang muncul di keypad telepon sebagai dasar untuk terjemahan. Misalnya, huruf kabin diterjemahkan ke 222 karena digit 2 memiliki ketiga huruf a, b, dan c.

Anda melanjutkan dengan solusi Phoneword yang Anda buat di latihan sebelumnya.

Menambahkan file sumber C# baru ke aplikasi

  1. Buka solusi Phoneword di Visual Studio jika Anda belum membukanya.

  2. Di jendela Penjelajah Solusi, klik kanan proyek Phoneword, pilih Tambahkan, dan pilih Kelas.

  3. Dalam kotak dialog Tambahkan Item Baru, beri nama file kelas PhonewordTranslator.cs, lalu pilih Tambahkan.

    Cuplikan layar kotak dialog Tambahkan item baru. Pengguna bernama file kelas PhonewordTranslator.cs

Tambahkan logika terjemahan

Ganti konten file kelas dengan kode berikut dan simpan file. Metode statis ToNumber di PhonewordTranslator kelas menerjemahkan nomor dari teks alfanumerik ke dalam nomor telepon numerik biasa.

using System.Text;

namespace Core;

public static class PhonewordTranslator
{
    public static string ToNumber(string raw)
    {
        if (string.IsNullOrWhiteSpace(raw))
            return null;

        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);
                // Bad character?
                else
                    return null;
            }
        }
        return newNumber.ToString();
    }

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

    static readonly string[] digits = {
        "ABC", "DEF", "GHI", "JKL", "MNO", "PQRS", "TUV", "WXYZ"
    };

    static int? TranslateToNumber(char c)
    {
        for (int i = 0; i < digits.Length; i++)
        {
            if (digits[i].Contains(c))
                return 2 + i;
        }
        return null;
    }
}

Buat antarmuka pengguna

  1. Buka file MainPage.xaml dalam proyek Phoneword.

  2. Hapus kontrol ScrollView dan kontennya, hanya menyisakan kontrol ContentPage:

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="Phoneword.MainPage">

</ContentPage>

  3. Tambahkan kontrol VerticalStackLayout dengan orientasi vertikal dan jarak 15 unit dan pengisi 20 unit ke ContentPage:

    <ContentPage ... >
    <VerticalStackLayout Spacing="15" Padding="20">

    </VerticalStackLayout>
</ContentPage>

  4. Tambahkan kontrol Label ke StackLayout:

    <ContentPage ... >
    <VerticalStackLayout ...>
        <Label Text = "Enter a Phoneword"
               FontSize ="20"/>
    </VerticalStackLayout>
</ContentPage>

  5. Tambahkan kontrol Entry ke StackLayout, di bawah label. Kontrol Entry menyediakan kotak teks tempat pengguna dapat memasukkan data. Dalam kode ini, properti x:Name memberi nama kontrol. Anda mereferensikan kontrol ini dalam kode untuk aplikasi nanti:

    <ContentPage ... >
    <VerticalStackLayout ...>
        <Label .../>
        <Entry x:Name = "PhoneNumberText"
               Text = "1-555-NETMAUI" />
    </VerticalStackLayout>
</ContentPage>

  6. Tambahkan dua kontrol Button ke VerticalStackLayout, setelah kontrol Entry. Kedua tombol saat ini tidak melakukan apa-apa, dan tombol kedua pada awalnya dinonaktifkan. Anda menambahkan kode untuk menangani Clicked peristiwa untuk dua tombol ini di tugas berikutnya:

    <ContentPage ... >
    <VerticalStackLayout ...>
        <Label .../>
        <Entry ... />
        <Button x:Name = "TranslateButton"
                Text = "Translate"
                Clicked = "OnTranslate"/>
        <Button x:Name = "CallButton"
                Text = "Call"
                IsEnabled = "False"
                Clicked = "OnCall"/>
    </VerticalStackLayout>
</ContentPage>

Tanggapi ketukan tombol TranslateButton

  1. Di jendela Penjelajah Solusi, perluas entri MainPage.xaml dan buka file code-behind MainPage.xaml.cs.

  2. Di kelas MainPage, hapus variabel count dan metode OnCounterClicked. Kelas akan terlihat seperti berikut:

    namespace Phoneword;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}

  3. Tambahkan variabel string translatedNumber dan metode OnTranslate berikut ke kelas MainPage, setelah konstruktor. Metode ini OnTranslate mengambil nomor telepon dari Text properti Entry kontrol dan meneruskannya ke metode PhonewordTranslator statis ToNumber kelas yang Anda buat sebelumnya.

    public partial class MainPage : ContentPage
{
    ...
    string translatedNumber;

    private void OnTranslate(object sender, EventArgs e)
    {
        string enteredNumber = PhoneNumberText.Text;
        translatedNumber = Core.PhonewordTranslator.ToNumber(enteredNumber);

        if (!string.IsNullOrEmpty(translatedNumber))
        {
            // TODO:
        }
        else
        {
            // TODO:
        }
    }
}

    Catatan

    Anda mengisi bit TODO yang hilang dari kode ini di langkah berikutnya.

  4. Dalam metode , OnTranslate tambahkan kode untuk mengubah Text properti tombol Panggil untuk menambahkan nomor telepon yang berhasil diterjemahkan. Anda dapat menggunakan nilai yang Anda simpan di bidang translationNumber. Juga, aktifkan dan nonaktifkan tombol berdasarkan terjemahan yang berhasil. Misalnya, jika TranslateNumber mengembalikan nol, nonaktifkan tombol, tetapi jika berhasil, aktifkan.

    private void OnTranslate(object sender, EventArgs e)
{
    string enteredNumber = PhoneNumberText.Text;
    translatedNumber = Core.PhonewordTranslator.ToNumber(enteredNumber);

    if (!string.IsNullOrEmpty(translatedNumber))
    {
        CallButton.IsEnabled = true;
        CallButton.Text = "Call " + translatedNumber;
    }
    else
    {
        CallButton.IsEnabled = false;
        CallButton.Text = "Call";
    }
}

Buat metode acara untuk tombol CallButton

  1. Tambahkan metode penanganan peristiwa OnCall ke akhir kelas MainPage. Metode ini menggunakan operasi asinkron, jadi tandai sebagai async:

    public partial class MainPage : ContentPage
{

    ...
    async void OnCall(object sender, System.EventArgs e)
    {

    }
}

  2. Dalam metode , OnCall minta pengguna, dengan menggunakan metode Page.DisplayAlert , untuk menanyakan apakah mereka ingin memanggil nomor.

    Parameter untuk DisplayAlert adalah judul, pesan, dan dua string yang digunakan untuk teks tombol Terima dan Batal. Ini mengembalikan Boolean yang menunjukkan apakah tombol Terima ditekan untuk mengabaikan kotak dialog.

    async void OnCall(object sender, System.EventArgs e)
{
    if (await this.DisplayAlert(
        "Dial a Number",
        "Would you like to call " + translatedNumber + "?",
        "Yes",
        "No"))
    {
        // TODO: dial the phone
    }
}

Uji aplikasi

  1. Di bar alat Visual Studio, pilih profil Windows Machine dan mulai penelusuran kesalahan.

  2. Ketuk tombol Terjemahkan untuk mengonversi teks default menjadi nomor telepon yang valid. Keterangan pada tombol Panggil harus berubah menjadi Memanggil 1-555-6386284:

    Cuplikan layar UI Phoneword. Pengguna menerjemahkan teks ke nomor telepon yang valid.

  3. Ketuk tombol Panggil. Verifikasi bahwa muncul perintah yang meminta Anda untuk mengonfirmasi operasi. Pilih Tidak.

    Cuplikan layar perintah Putar Nomor antarmuka pengguna PhoneWord.

  4. Kembali ke Visual Studio dan hentikan proses penelusuran kesalahan.

Tekan nomor telepon

  1. Dalam file MainPage.xaml.cs code-behind, edit metode OnCall dan ganti komentar TODO dengan blok berikuttry/catch:

    async void OnCall(object sender, System.EventArgs e)
{
    if (await this.DisplayAlert(
        "Dial a Number",
        "Would you like to call " + translatedNumber + "?",
        "Yes",
        "No"))
    {
        try
        {
            if (PhoneDialer.Default.IsSupported)
                PhoneDialer.Default.Open(translatedNumber);
        }
        catch (ArgumentNullException)
        {
            await DisplayAlert("Unable to dial", "Phone number was not valid.", "OK");
        }
        catch (Exception)
        {
            // Other error has occurred.
            await DisplayAlert("Unable to dial", "Phone dialing failed.", "OK");
        }
    }
}

    Kelas PhoneDialer di namespace Microsoft.Maui.ApplicationModel.Communication menyediakan abstraksi fungsionalitas panggilan telepon (dan lainnya) untuk platform Windows, Android, iOS (dan iPadOS), dan macOS. Metode Open statis mencoba menggunakan dialer telepon untuk memanggil nomor yang disediakan sebagai parameter.

    Langkah-langkah berikut menunjukkan cara memperbarui manifes aplikasi Android agar Android dapat menggunakan dialer telepon. Windows, iOS, dan MacCatalyst, aplikasi mengikuti prinsip umum yang sama, kecuali Anda menentukan kemampuan yang berbeda dalam manifes tergantung pada sistem operasi.

  2. Di jendela Penjelajah Solusi, perluas folder Platform, perluas folder Android, klik kanan file AndroidManifest.xml, dan pilih Buka dengan>Pemilih Editor Otomatis (XML). Pilih OK.

  3. Tambahkan cuplikan XML berikut di dalam simpul manifes, setelah konten yang ada untuk simpul ini.

    <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    ...
    <queries>
        <intent>
            <action android:name="android.intent.action.DIAL" />
            <data android:scheme="tel"/>
        </intent>
    </queries>
</manifest>

  4. Simpan file.

  5. Di bar alat Visual Studio, pilih profil Android Emulators/Pixel 3a - API 30 (atau serupa) dan mulai penelusuran kesalahan.

  6. Saat aplikasi muncul di emulator (perlu waktu beberapa menit), masukkan nomor telepon (atau terima default) pilih Terjemahkan, lalu pilih Panggil.

  7. Di pemberitahuan Panggil Nomor, pilih Ya. Verifikasi bahwa dialer ponsel Android muncul dengan nomor yang Anda sediakan di aplikasi.

    Dialer ponsel Android yang berisi nomor yang disediakan oleh aplikasi.

  8. Kembali ke Visual Studio dan hentikan proses penelusuran kesalahan.

Ringkasan

Dalam latihan ini, Anda menambahkan UI kustom ke aplikasi Anda dengan menggunakan halaman dan tampilan. Anda juga menambahkan dukungan untuk melakukan panggilan dengan menggunakan API khusus platform yang tersedia di Android.