สร้างแอปรูปแบบการรับส่งข้อความพื้นฐาน

1. ก่อนเริ่มต้น

Codelab นี้เป็นกิจกรรม #2 ในเส้นทาง "เริ่มต้นใช้งานการแยกประเภทข้อความบนอุปกรณ์เคลื่อนที่"

ในโค้ดแล็บนี้ คุณจะได้สร้างแอปส่งข้อความอย่างง่าย ต่อมาในเส้นทางนี้ คุณจะอัปเดตแอปนี้ด้วยโมเดลแมชชีนเลิร์นนิงที่จะกรองจดหมายขยะที่ไม่ต้องการออกจากข้อความในแอป

ข้อกำหนดเบื้องต้น

• ความรู้พื้นฐานเกี่ยวกับการพัฒนาแอป Android โดยใช้ Kotlin และ (ไม่บังคับ) การพัฒนาแอป iOS โดยใช้ Swift

สิ่งที่คุณจะสร้าง

• แอปรับส่งข้อความที่เรียบง่าย

สิ่งที่คุณต้องมี

• สำหรับ Android คุณจะต้องมี Android Studio เพื่อเริ่มต้นใช้งาน โปรดตรวจสอบว่ามีการติดตั้งและอัปเดตอย่างสมบูรณ์แล้วก่อนดำเนินการต่อ
• สำหรับ iOS คุณจะต้องใช้ Xcode คุณดูได้ใน App Store (หากต้องการเขียนแอป iOS เท่านั้น ให้ข้ามไปยังขั้นตอนที่ 5 โดยตรง

รับโค้ด

หากไม่ต้องการทำตามทีละขั้นตอนและต้องการดูโค้ดสุดท้ายสำหรับเส้นทางนี้ ให้ไปที่

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

ในนี้ ให้ค้นหาไดเรกทอรี TextClassificationOnMobile แล้วคุณจะเห็นไดเรกทอรีย่อย Android และ iOS ไดเรกทอรีเหล่านี้จะมีไดเรกทอรีย่อย TextClassificationStep1 ซึ่งมีแอปใน Android และ iOS ตามลำดับ

2. สร้างโปรเจ็กต์ใหม่ใน Android Studio

1. เปิด Android Studio

1. เลือกสร้างโปรเจ็กต์ใหม่ คุณจะเห็นกล่องโต้ตอบที่ขอให้เลือกเทมเพลตโปรเจ็กต์
2. เลือกกิจกรรมว่าง แล้วคลิกถัดไป จากนั้นระบบจะขอให้คุณกำหนดค่าโปรเจ็กต์ เลือกอะไรก็ได้ตามที่ต้องการ แต่ต้องตรวจสอบว่าภาษาเป็น Kotlin และ SDK ขั้นต่ำคือ API 23
3. คลิกเสร็จสิ้น เมื่อทำเสร็จแล้ว Android Studio จะเปิดขึ้นพร้อมกับโปรเจ็กต์ของคุณ อาจใช้เวลาสักครู่ในการซิงค์ Gradle เพื่อให้ทุกอย่างเป็นไปตามลำดับ โดยเฉพาะอย่างยิ่งหากคุณใช้ Android Studio เป็นครั้งแรก

3. สร้างอินเทอร์เฟซผู้ใช้

อินเทอร์เฟซผู้ใช้สำหรับแอป Android สร้างขึ้นโดยใช้ไฟล์ XML ที่เรียกว่าไฟล์เลย์เอาต์

1. เปิดไฟล์ คลิก app > res > layout > activity_main.xml โดยใช้ Explorer ใน Android Studio

ที่ด้านขวาบนของหน้าจอ คุณควรเห็นตัวเลือกที่มีแท็บสำหรับโค้ด แยก และออกแบบ ดังนี้

ตรวจสอบว่าได้เลือก "โค้ด" แล้วก่อนไปยังขั้นตอนถัดไป

2. แทนที่โค้ดด้วย XML นี้

<?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>

ซึ่งจะทำให้คุณมีอินเทอร์เฟซผู้ใช้พื้นฐานที่มีพื้นที่ป้อนข้อมูลพร้อม TextView ซึ่งจะแจ้งให้คุณป้อนสตริง และ EditText ที่ชื่อ txtInput ซึ่งใช้ป้อนสตริงได้ ด้านล่างเป็น TextView ที่จะแสดงผลลัพธ์ และปุ่มที่ผู้ใช้จะกดเพื่อเรียกใช้การจัดประเภท

ขั้นตอนถัดไปคือการเขียนโค้ดที่จะเปิดใช้งานอินเทอร์เฟซผู้ใช้นี้

4. เชื่อมต่อตัวควบคุมและสร้างแอป

คุณแก้ไขโค้ดสำหรับกิจกรรมนี้ได้โดยค้นหาไฟล์โค้ด MainActivity

1. ใน Android Studio ให้คลิก app > java > MainActivity

2. เปิดไฟล์ MainActivity เพื่อไปยังเครื่องมือแก้ไขโค้ด แทนที่ทุกอย่างในไฟล์นี้ยกเว้นบรรทัดแรกที่ขึ้นต้นด้วย "package" ด้วยโค้ดนี้

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
        }
    }
}

โค้ดนี้เชื่อมต่อตัวควบคุมในเลย์เอาต์กับ txtInput, txtOutput และ btnSendText เพื่อให้สามารถระบุในโค้ดได้ จากนั้นจะตั้งค่า OnClickListener สำหรับปุ่ม เพื่อให้เมื่อผู้ใช้แตะปุ่ม ระบบจะอ่านข้อความจาก txtInput แปลงเป็นสตริง แล้วตั้งค่าพร็อพเพอร์ตี้ txtOutput.text เป็นสตริงนั้น

หากคุณกำลังทำตามเส้นทางการเริ่มต้นใช้งานการจัดประเภทข้อความบนอุปกรณ์เคลื่อนที่ นี่คือลักษณะการทำงานที่คุณเห็นในกิจกรรม #1 ซึ่งเป็นวิดีโอเดโม โดยแอปจะใช้ข้อความที่ผู้ใช้พิมพ์โดยไม่ต้องตรวจสอบสแปม

ใน Codelab ถัดไป คุณจะได้เห็นวิธีใช้โมเดลแมชชีนเลิร์นนิงในแอปนี้เพื่อกรองความคิดเห็นที่เป็นสแปม

หากต้องการสร้างแอปเดียวกันใน iOS โปรดทำตาม Codelab นี้ต่อไป

5. สร้างแอป Basic ใน iOS

ขั้นตอนต่อไปนี้ต้องมีความคุ้นเคยกับ Xcode และการพัฒนา iOS ด้วย Swift

หากไม่ต้องการผ่านกระบวนการสร้าง คุณสามารถโคลนที่เก็บและเปิดแอปได้โดยตรง โดยมีชื่อว่า TextClassificationStep1 และอยู่ในโฟลเดอร์ iOS ในที่เก็บ

หากต้องการสร้างแอปพื้นฐาน คุณจะต้องเริ่มต้นด้วย Xcode

1. สร้างแอปใหม่โดยใช้เทมเพลตพื้นฐาน

2. เลือกตัวเลือกสำหรับโปรเจ็กต์ใหม่ ตั้งชื่อและตัวระบุองค์กรให้ผลิตภัณฑ์ คุณสามารถพิมพ์สิ่งที่ต้องการหรือทำตามตัวอย่างด้านล่างได้ (แต่ต้องตั้งค่าอินเทอร์เฟซเป็นสตอรีบอร์ดและวงจรเป็นตัวแทน UIKitApp ตามที่แสดง)

6. แก้ไขสตอรีบอร์ด

1. เปิด Main.storyboard คุณจะเห็นพื้นที่ออกแบบที่เพิ่มตัวควบคุมได้
2. หากต้องการเพิ่มการควบคุม ให้คลิกปุ่ม + ที่ด้านบนของหน้าต่าง Xcode

3. ใช้เพื่อวางตัวควบคุม TextView, ตัวควบคุมปุ่ม และตัวควบคุมป้ายกำกับลงในพื้นผิวการออกแบบ ซึ่งควรมีหน้าตาเช่นนี้

4. ใช้ผู้ช่วยเพื่อเปิดมุมมองแบบเทียบเคียงข้างกันโดยให้ทั้งสตอรี่บอร์ดและไฟล์ ViewController.swift เปิดอยู่ ผู้ช่วยคือไอคอนขนาดเล็กที่ด้านขวาบนของหน้าจอ ดังที่แสดงที่นี่

1. กดปุ่ม CONTROL แล้วลากตัวควบคุม TextView ไปยังพื้นผิวโค้ด คุณควรเห็นลูกศรสีน้ำเงินขณะลาก
2. วางลงในโค้ดที่อยู่ใต้การประกาศคลาส คุณจะได้รับป๊อปอัปที่ถามประเภทการเชื่อมต่อ ซึ่งควรมีหน้าตาเช่นนี้

3. เลือก Outlet แล้วตั้งชื่อเป็น txtInput
4. ทำเช่นเดียวกันกับป้ายกำกับ จากนั้นตั้งค่าประเภทการเชื่อมต่อเป็น Outlet และตั้งชื่อเป็น txtOutput
5. สุดท้าย ให้ลากปุ่มไป แต่คราวนี้ให้เลือกการดำเนินการเป็นประเภทการเชื่อมต่อ (อย่าใช้เต้ารับเป็นประเภทการเชื่อมต่อ)
6. ตั้งชื่อการดำเนินการว่า btnSendText

เมื่อเสร็จแล้ว โค้ดที่ด้านบนของคลาสควรมีลักษณะดังนี้

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

7. เขียนโค้ดแอป iOS พื้นฐานให้เสร็จ

เนื่องจากมุมมองนี้ใช้ UITextView หากต้องการให้มุมมองนี้ตอบสนองต่อเหตุการณ์ในมุมมองนี้ มุมมองนี้จะต้องเป็น UITextViewDelegate

คุณสามารถรับค่านี้ได้โดยเปลี่ยนการประกาศคลาสเป็นดังนี้

class ViewController: UIViewController, UITextViewDelegate {

จากนั้นในฟังก์ชัน viewDidLoad ให้ตั้งค่า delegate สำหรับ UITextView (ซึ่งคุณตั้งชื่อว่า txtInput เมื่อตั้งค่า Outlet) เป็นคลาสนี้ดังนี้

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

สุดท้าย คุณจะต้องจัดการการนำแป้นพิมพ์ออกจากจอแสดงผลเมื่อผู้ใช้กด Enter บนแป้นพิมพ์ ซึ่งทำได้ผ่านการมอบสิทธิ์ที่คุณเพิ่งตั้งค่า และคุณสามารถใช้วิธีนี้ใน ViewController เพื่อจัดการได้

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

สำหรับแอปนี้ การดำเนินการของปุ่มนั้นไม่ซับซ้อน เราจะส่งต่อสิ่งที่ผู้ใช้พิมพ์ไปยังเอาต์พุต ในภายหลัง คุณจะเห็นว่าโมเดล NLP สามารถกรองข้อความนี้ได้อย่างไร แต่ตอนนี้เราจะต่อสายเพื่อจำลองการส่งผ่าน

คุณสร้างการดำเนินการ btnSendText ไปแล้ว ตอนนี้สิ่งที่คุณต้องทำคือเพิ่มโค้ดลงในปุ่มนั้น

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

8. ยินดีด้วย

ตอนนี้คุณได้ทำ Codelab นี้เสร็จแล้ว

ในเส้นทางนี้ คุณจะได้เรียนรู้วิธีสร้างโมเดล NLP ซึ่งคุณจะนำกลับมาใช้ในแอปนี้ในภายหลังเพื่อติดตั้งให้กรองข้อความของผู้ใช้สำหรับสแปมความคิดเห็น