Membuat aplikasi gaya pesan dasar

1. Sebelum memulai

Codelab ini adalah aktivitas nomor 2 di jalur Memulai klasifikasi teks seluler.

Dalam codelab ini, Anda akan membuat aplikasi pesan sederhana. Nanti di jalur, Anda akan mengupdate aplikasi ini dengan model machine learning yang akan memfilter spam yang tidak diinginkan dari pesan di aplikasi.

Prasyarat

• Pengetahuan dasar tentang pengembangan Android dengan Kotlin, dan (opsional) pengembangan iOS dengan Swift

Yang akan Anda buat

• Aplikasi pesan sederhana

Yang Anda butuhkan

• Untuk Android, Anda memerlukan Android Studio untuk memulai. Pastikan aplikasi telah diinstal dan diupdate sepenuhnya sebelum melanjutkan.
• Untuk iOS, Anda memerlukan Xcode. Anda dapat menemukannya di App Store. (Jika Anda hanya ingin menulis aplikasi iOS, langsung ke langkah 5.

Mendapatkan Kode

Jika Anda tidak ingin mengikuti langkah demi langkah, dan hanya melihat kode akhir untuk jalur ini,

git clone https://github.com/googlecodelabs/odml-pathways

Di sini, temukan direktori TextClassificationOnMobile, dan di dalamnya Anda akan melihat sub-direktori Android dan iOS. Direktori ini akan berisi sub-direktori TextClassificationStep1, yang masing-masing berisi aplikasi di Android dan iOS.

2. Membuat project baru di Android Studio

1. Buka Android Studio.

1. Pilih Buat Project Baru. Anda akan melihat dialog yang meminta Anda memilih Template Project.
2. Pilih Empty Activity, lalu klik Next. Selanjutnya, Anda akan diminta untuk Mengonfigurasi project. Pilih apa pun yang Anda suka, tetapi pastikan bahasa Kotlin, dan Minimum SDK adalah API 23.
3. Klik Finish. Setelah selesai, Android Studio akan terbuka dengan project Anda. Perlu waktu beberapa saat untuk menjalankan sinkronisasi gradle guna memastikan semuanya sudah siap, terutama jika ini pertama kalinya Anda menggunakan Android Studio.

3 Membuat Antarmuka Pengguna

Antarmuka pengguna untuk aplikasi Android dibuat menggunakan file XML yang disebut file tata letak.

1. Buka file. Klik app > res > layout > activity_main.xml menggunakan penjelajah di Android Studio.

Di sisi kanan atas layar, Anda akan melihat pilihan yang memiliki tab untuk Kode, Pemisahan, dan Desain, seperti ini:

Pastikan 'Kode' dipilih sebelum melanjutkan ke langkah berikutnya.

2. Ganti kode dengan XML ini:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

 <LinearLayout android:orientation="vertical"
      android:layout_height="match_parent"
      android:layout_width="match_parent">
      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="horizontal">
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Enter a string:"></TextView>
          <EditText
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/txtInput"></EditText>

      </LinearLayout>

      <TextView
          android:id="@+id/txtOutput"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Output Goes here"
          android:textSize="36sp"></TextView>
     <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:id="@+id/btnSendText"
          android:text="Send"></Button>

 </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Ini memberi Anda antarmuka pengguna dasar yang berisi area input dengan TextView, yang meminta Anda untuk Memasukkan String dan EditText yang disebut txtInput yang dapat digunakan untuk memasukkan string. Di bawahnya adalah TextView yang akan merender output, dan tombol yang akan ditekan pengguna untuk memicu klasifikasi.

Langkah selanjutnya adalah menulis kode yang akan mengaktifkan antarmuka pengguna ini.

4. Hubungkan kontrol dan buat aplikasi

Anda dapat mengedit kode untuk aktivitas ini dengan menemukan file kode MainActivity.

1. Di Android Studio, klik app > java > MainActivity.

2. Buka file MainActivity untuk membuka editor kode. Ganti semua yang ada di file ini kecuali baris pertama yang dimulai dengan 'paket' dengan kode ini:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    lateinit var txtInput: EditText
    lateinit var btnSendText: Button
    lateinit var txtOutput: TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        txtInput = findViewById(R.id.txtInput)
        txtOutput = findViewById(R.id.txtOutput)
        btnSendText = findViewById(R.id.btnSendText)
        btnSendText.setOnClickListener {
            var toSend:String = txtInput.text.toString()
            txtOutput.text = toSend
        }
    }
}

Kode ini menghubungkan kontrol pada tata letak ke txtInput, txtOutput, dan btnSendText sehingga dapat ditangani dalam kode. Kemudian, fungsi ini menyiapkan OnClickListener untuk tombol tersebut, sehingga saat pengguna menyentuhnya, teks dari txtInput akan dibaca, dikonversi menjadi String, lalu properti txtOutput.text ditetapkan ke atribut tersebut string.

Jika Anda mengikuti jalur Memulai klasifikasi teks seluler, berikut adalah perilaku yang Anda lihat di aktivitas nomor 1, yaitu video demo. Aplikasi ini hanya akan menggunakan apa pun yang diketik pengguna tanpa memeriksa spam.

Dalam Codelab berikutnya, Anda akan melihat cara menggunakan model Machine Learning di aplikasi ini untuk memfilter spam komentar.

Jika Anda ingin membuat aplikasi yang sama di iOS, lanjutkan dengan codelab ini.

5. Membuat aplikasi Dasar di iOS

Langkah-langkah berikut memerlukan pemahaman tentang pengembangan Xcode dan iOS dengan Swift.

Jika tidak ingin melakukan proses pembuatan, Anda dapat meng-clone repo dan membuka aplikasi secara langsung. Namanya adalah TextClassificationStep1, dan ada dalam folder iOS di repo.

Untuk membuat aplikasi dasar, Anda akan memulai dengan Xcode.

1. Buat Aplikasi baru menggunakan template dasar:

2. Pilih opsi untuk project baru. Beri Nama dan ID Organisasi untuk produk Anda. Anda dapat mengetik apa yang diinginkan, atau mengikuti contoh di bawah: (Tetapi pastikan untuk menyetel antarmuka ke Storyboard dan Life Cycle ke UIKitApp Delegate, sebagai ditampilkan.)

6. Mengedit Papan Cerita

1. Buka Main.storyboard. Anda akan melihat permukaan desain untuk menambahkan kontrol.
2. Untuk menambahkan kontrol, klik tombol + di bagian atas jendela Xcode.

3. Gunakan ini untuk menempatkan kontrol TextView, kontrol Tombol, dan kontrol Label ke permukaan desain. Ini akan terlihat seperti berikut:

4. Gunakan asisten untuk membuka tampilan berdampingan dengan storyboard dan file ViewController.swift yang terbuka. Asisten adalah ikon kecil di kanan atas layar, seperti yang ditunjukkan di sini:

1. Tekan tombol Control, dan seret kontrol TextView ke permukaan kode. Anda akan melihat panah biru saat ditarik.
2. Letakkan ke kode tepat di bawah deklarasi class. Anda akan mendapatkan pop-up yang menanyakan jenis koneksi. Ini akan terlihat seperti berikut:

3. Pilih Outlet dan beri nama txtInput.
4. Lakukan hal yang sama untuk label tersebut, lalu buat jenis koneksi sebagai Outlet, dan beri nama txtOutput.
5. Terakhir, tarik tombol ke atas, tetapi kali ini pilih Action sebagai jenis koneksi. (Jangan gunakan Outlet sebagai jenis koneksi.)
6. Beri nama tindakan btnSendText.

Setelah selesai, kode Anda di bagian atas class akan terlihat seperti ini:

@IBOutlet weak var txtInput: UITextView!
@IBOutlet weak var txtOutput: UILabel!
@IBAction func btnSendText(_ sender: Any) {
}

7. Menyelesaikan coding Aplikasi iOS dasar

Karena menggunakan UITextView, tampilan ini harus merespons UI pada peristiwa ini sehingga harus berupa UITextViewDelegate.

Anda bisa mendapatkan ini dengan mengubah deklarasi class ke:

class ViewController: UIViewController, UITextViewDelegate {

Kemudian, di fungsi viewDidLoad, tetapkan delegasi untuk UITextView (yang Anda panggil txtInput saat menyiapkan outlet) ke class ini seperti ini:

override func viewDidLoad() {
    super.viewDidLoad()
    txtInput.delegate = self
}

Terakhir, Anda ingin menangani penghapusan keyboard dari layar setelah pengguna menekan Enter pada keyboard. Hal ini dilakukan melalui delegasi yang baru saja Anda siapkan, dan Anda dapat menerapkan metode ini pada ViewController untuk menanganinya.

func textView(_ textView: UITextView, shouldChangeTextIn range:
              NSRange, replacementText text: String) -> Bool {
    if (text == "\n") {
        textView.resignFirstResponder()
        return false
    }
    return true
}

Untuk aplikasi ini, tindakan tombolnya adalah trivia, kita hanya akan meneruskan apa yang diketik pengguna ke output. Kemudian, Anda akan melihat cara model NLP dapat memfilter teks ini. Namun untuk saat ini, mari kita sambungkan untuk mensimulasikan passthrough.

Anda sudah membuat tindakan btnSendText, jadi yang perlu Anda lakukan hanyalah menambahkan kode ke dalamnya:

@IBAction func btnSendText(_ sender: Any) {
    txtOutput.text = "Sent :" + txtInput.text
}

8 Selamat!

Anda telah menyelesaikan codelab ini.

Selanjutnya dalam jalur ini, Anda akan mempelajari cara membuat model NLP, yang nantinya akan Anda gunakan kembali ke aplikasi ini untuk melengkapinya guna memfilter teks pengguna dari spam komentar.