Membangun aplikasi gaya pesan dasar

1. Sebelum memulai

Codelab ini adalah aktivitas #2 dalam jalur pembelajaran Memulai klasifikasi teks seluler.

Dalam codelab ini, Anda akan membuat aplikasi pesan sederhana. Selanjutnya dalam jalur pembelajaran, Anda akan memperbarui 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 terinstal dan diupdate sepenuhnya sebelum melanjutkan.
• Untuk iOS, Anda memerlukan Xcode. Anda dapat menemukannya di App Store. (Jika Anda hanya ingin menulis aplikasi iOS, langsung buka langkah 5.

Dapatkan Kode

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

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

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

2. Buat project baru di Android Studio

1. Luncurkan 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 Anda. Pilih apa pun yang Anda suka, tetapi pastikan bahasanya adalah Kotlin, dan SDK Minimumnya adalah API 23.
3. Klik Selesai. Setelah selesai, Android Studio akan terbuka dengan project Anda. Mungkin perlu beberapa saat untuk melakukan sinkronisasi gradle guna memastikan semuanya beres, terutama jika ini adalah 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 Code, Split, dan 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>

Hal ini memberi Anda antarmuka pengguna dasar yang berisi area input dengan TextView, yang meminta Anda untuk Enter a String dan EditText bernama txtInput yang dapat digunakan untuk memasukkan string. Di bawahnya ada 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. Menghubungkan kontrol dan membuat 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 dalam file ini kecuali baris pertama yang dimulai 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, kode ini menyiapkan OnClickListener untuk tombol, sehingga saat pengguna menyentuhnya, teks dari txtInput akan dibaca, dikonversi menjadi String, lalu properti txtOutput.text ditetapkan ke string tersebut.

Jika Anda mengikuti jalur pembelajaran Mulai menggunakan klasifikasi teks seluler, inilah perilaku yang Anda lihat dalam aktivitas #1, video demo, tempat 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 membuat aplikasi yang sama di iOS, lanjutkan 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. File ini bernama TextClassificationStep1, dan berada 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 yang Anda inginkan, atau mengikuti contoh di bawah: (Namun, pastikan untuk menyetel antarmuka ke Storyboard dan Siklus Proses ke UIKitApp Delegate, seperti yang ditunjukkan.)

6. Mengedit Storyboard

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 Button, 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, lalu tarik kontrol TextView ke permukaan kode. Anda akan melihat panah biru saat menarik.
2. Lepaskan ke 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 jadikan jenis koneksi Outlet, dan beri nama txtOutput.
5. Terakhir, tarik tombol, tetapi kali ini pilih Tindakan 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 pengodean Aplikasi iOS dasar

Karena tampilan ini menggunakan UITextView, agar dapat merespons peristiwa pada tampilan ini, tampilan tersebut harus berupa UITextViewDelegate.

Anda bisa mendapatkan ini dengan mengubah deklarasi class menjadi:

class ViewController: UIViewController, UITextViewDelegate {

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

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

Terakhir, Anda ingin menangani penghapusan keyboard dari tampilan setelah pengguna menekan Enter di keyboard. Hal ini dilakukan melalui delegasi yang baru saja Anda siapkan, dan Anda dapat menerapkan metode ini di 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 tidak penting, kita hanya akan meneruskan apa yang diketik pengguna ke output. Nanti, Anda akan melihat cara model NLP dapat memfilter teks ini. Namun untuk saat ini, mari kita hubungkan saja untuk menyimulasikan penerusan.

Anda telah membuat btnSendText tindakan, jadi sekarang yang perlu Anda lakukan adalah menambahkan kode ke tindakan tersebut:

@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 bawa kembali ke aplikasi ini untuk melengkapinya agar dapat memfilter teks pengguna Anda untuk spam komentar.