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

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

เกี่ยวกับ Codelab นี้

subjectอัปเดตล่าสุดเมื่อ พ.ค. 17, 2021
account_circleเขียนโดย Googler

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

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

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

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

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

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

สิ่งที่ต้องมี

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

รับโค้ด

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

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

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

968cc631a448a8ef.png

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

  1. เปิด Android Studio

4542b16e14c33eed.png

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

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

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

  1. เปิดไฟล์ คลิกแอป > ความละเอียด > เลย์เอาต์ > activity_main.xml โดยใช้ตัวสำรวจใน Android Studio

562f935ccaa9e666.png

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

3ae858bfe4ec100f.png

ดูให้แน่ใจว่า "รหัส" ก่อนที่จะไปยังขั้นตอนถัดไป

  1. แทนที่โค้ดด้วย 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 ซึ่งขอให้คุณ Enter a String และ EditText ชื่อ txtInput ซึ่งสามารถใช้ป้อนสตริงได้ ส่วนด้านล่างคือ TextView ที่จะแสดงผลเอาต์พุตและมีปุ่มที่ให้ผู้ใช้กดเพื่อทริกเกอร์การแยกประเภท

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

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

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

  1. ใน Android Studio คลิกแอป > java > MainActivity

c633c2293d0835b8.png

  1. เปิดไฟล์ 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 เป็นสตริงนั้น

5 สร้างแอปพื้นฐานบน iOS

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

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

โดยต้องเริ่มต้นด้วย Xcode

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

254c026ac66e32f9.png

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

d0bd704bfa657d5f.png

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

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

a5203e9757e6b11e.png

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

13d02aae8d8c4a13.png

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

d152cce014151f26.png

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

455b8b131e5f3b3d.png

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

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

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

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

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

ซึ่งทำได้โดยเปลี่ยนการประกาศของชั้นเรียนเป็น

class ViewController: UIViewController, UITextViewDelegate {

จากนั้น ในฟังก์ชัน view DidLoad ให้ตั้งค่าผู้มอบสิทธิ์สำหรับ UITextView (ซึ่งคุณเรียกว่า txtInput เมื่อคุณตั้งค่าเต้ารับ) เป็นคลาสนี้ ดังนี้

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 ซึ่งคุณจะต้องนำกลับมายังแอปนี้อีกเพื่อใช้ในการกรองข้อความของผู้ใช้เพื่อหาสแปมความคิดเห็น

bug_report รายงานความผิดพลาด