Membangun aplikasi gaya pesan dasar

1. Sebelum memulai

Codelab ini adalah aktivitas #2 di jalur Mulai menggunakan klasifikasi teks seluler.

Dalam codelab ini, Anda akan mem-build aplikasi pesan sederhana. Nantinya 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 build

• Aplikasi pesan sederhana

Yang Anda butuhkan

• Untuk Android, Anda memerlukan Android Studio untuk memulai. Pastikan aplikasi sudah 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.

Dapatkan 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 subdirektori TextClassificationStep1, yang masing-masing berisi aplikasi di Android dan iOS.

2. Membuat project baru di Android Studio

1. Luncurkan Android Studio.

1. Pilih Create New Project. Anda akan melihat dialog yang meminta Anda untuk memilih Template Project.
2. Pilih Empty Activity, lalu klik Next. Selanjutnya Anda akan diminta untuk Mengonfigurasi project Anda. Pilih apa pun yang Anda inginkan, tetapi pastikan bahasanya adalah Kotlin, dan SDK Minimum adalah API 23.
3. Klik Selesai. Setelah selesai, Android Studio akan terbuka dengan project Anda. Perlu waktu beberapa saat untuk melakukan sinkronisasi gradle untuk memastikan semuanya berfungsi dengan baik, 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 > tata letak > activity_main.xml menggunakan penjelajah di Android Studio.

Di sisi kanan atas layar, Anda akan melihat pilihan yang memiliki tab untuk Code, Split and Design, 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>

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

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

4. Menghubungkan kontrol dan membuat aplikasi

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

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

2. Buka file MainActivity untuk membuka editor kode. Ganti semua yang ada dalam file ini, kecuali baris pertama yang diawali dengan 'package' 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, tindakan ini menyiapkan OnClickListener untuk tombol tersebut, sehingga saat pengguna menyentuhnya, teks dari txtInput akan dibaca, dikonversi menjadi String, lalu properti txtOutput.text disetel ke string tersebut.

Jika Anda mengikuti jalur Mulai menggunakan klasifikasi teks seluler, ini adalah perilaku yang Anda lihat di aktivitas #1, video demo, saat aplikasi 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 membangun aplikasi yang sama di iOS, lanjutkan dengan codelab ini.

5. Membuat aplikasi Basic di iOS

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

Jika tidak ingin melalui proses pembuatan, Anda dapat meng-clone repo dan membuka aplikasi secara langsung. Nama ini adalah TextClassificationStep1, dan ada di 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 Anda. Beri produk Anda Nama dan ID Organisasi. Anda dapat mengetik apa saja yang Anda inginkan, atau mengikuti contoh di bawah ini: (Namun, pastikan untuk menyetel antarmuka ke Storyboard dan Siklus Hidup ke UIKitApp Delegate, seperti yang ditunjukkan.)

6. Edit {i>Storyboard<i}

1. Buka Main.storyboard. Anda akan melihat permukaan desain tempat Anda dapat 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 platform desain. Ini akan terlihat seperti berikut:

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

1. Tekan tombol CONTROL, dan seret kontrol TextView ke permukaan kode. Anda akan melihat panah biru saat menarik.
2. Letakkan kode tepat di bawah deklarasi class. Anda akan melihat 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, lalu buat jenis koneksi sebagai Outlet, dan beri nama txtOutput.
5. Terakhir, tarik tombol, 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 tampilan ini menggunakan UITextView, agar merespons peristiwa pada tampilan ini, tampilan tersebut harus berupa UITextViewDelegate.

Anda bisa mendapatkannya dengan mengubah deklarasi class menjadi ini:

class ViewController: UIViewController, UITextViewDelegate {

Kemudian, dalam fungsi viewDidLoad, tetapkan delegasi untuk UITextView (yang Anda sebut txtInput saat menyiapkan stopkontak) 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 mudah, kita hanya akan meneruskan apa yang diketik pengguna ke output. Nanti Anda akan melihat bagaimana model NLP memfilter teks ini. Tapi untuk saat ini, mari kita menghubungkannya untuk menyimulasikan {i>passthrough<i}.

Anda sudah membuat tindakan btnSendText, jadi sekarang Anda hanya perlu menambahkan kode ke tindakan tersebut:

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

8. Selamat!

Anda telah menyelesaikan codelab ini.

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