Tạo ứng dụng nhắn tin cơ bản

1. Trước khi bắt đầu

Đây là lớp học lập trình thứ 2 trong lộ trình Bắt đầu phân loại văn bản trên thiết bị di động.

Trong lớp học lập trình này, bạn sẽ tạo một ứng dụng nhắn tin đơn giản. Sau đó, trong lộ trình này, bạn sẽ cập nhật ứng dụng này bằng một mô hình học máy để lọc thư rác không mong muốn khỏi các tin nhắn trên ứng dụng.

Điều kiện tiên quyết

Có kiến thức cơ bản về phát triển Android bằng Kotlin và (không bắt buộc) phát triển iOS bằng Swift

Sản phẩm bạn sẽ tạo ra

Một ứng dụng nhắn tin đơn giản

Bạn cần có

Đối với Android, để bắt đầu, bạn cần có Android Studio. Vui lòng đảm bảo bạn đã cài đặt và cập nhật đầy đủ trước khi tiếp tục.
Đối với iOS, bạn sẽ cần Xcode. Bạn có thể tìm thấy thông tin này trong App Store. (Nếu bạn chỉ muốn viết ứng dụng iOS, hãy chuyển thẳng đến bước 5.

Nhận mã

Nếu bạn không muốn làm theo từng bước và chỉ muốn xem mã cuối cùng cho lộ trình này, hãy truy cập vào

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

Trong thư mục này, hãy tìm thư mục TextClassificationOnMobile. Trong thư mục này, bạn sẽ thấy các thư mục con Android và iOS. Các thư mục này sẽ chứa các thư mục con TextClassificationStep1, trong đó chứa ứng dụng tương ứng trên Android và iOS.

2. Tạo một dự án mới trong Android Studio

Mở Android Studio.

Chọn Tạo dự án mới. Bạn sẽ thấy một hộp thoại yêu cầu bạn chọn Mẫu dự án.
Chọn Empty Activity (Hoạt động trống) rồi nhấp vào Next (Tiếp theo). Tiếp theo, bạn sẽ được yêu cầu Định cấu hình dự án. Chọn bất cứ thứ gì bạn thích, nhưng hãy đảm bảo rằng ngôn ngữ là Kotlin và SDK tối thiểu là API 23.
Nhấp vào Hoàn tất. Sau khi hoàn tất, Android Studio sẽ mở dự án của bạn. Có thể mất vài phút để quá trình đồng bộ hoá gradle diễn ra nhằm đảm bảo mọi thứ đều ổn, đặc biệt là nếu đây là lần đầu tiên bạn sử dụng Android Studio.

3. Tạo giao diện người dùng

Giao diện người dùng cho một ứng dụng Android được tạo bằng một tệp XML có tên là tệp bố cục.

Mở tệp. Nhấp vào app > res > layout > activity_main.xml bằng trình khám phá trong Android Studio.

Ở phía trên cùng bên phải của màn hình, bạn sẽ thấy một lựa chọn có các thẻ cho Code (Mã), Split (Phân tách) và Design (Thiết kế), như sau:

Hãy nhớ chọn "Mã" trước khi chuyển sang bước tiếp theo.

Thay thế mã bằng XML sau:

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

Thao tác này sẽ cung cấp cho bạn một giao diện người dùng cơ bản chứa một vùng nhập dữ liệu có TextView, nhắc bạn Nhập một chuỗi và một EditText có tên là txtInput mà bạn có thể dùng để nhập một chuỗi. Bên dưới là một TextView sẽ hiển thị đầu ra và một nút mà người dùng sẽ nhấn để kích hoạt quá trình phân loại.

Bước tiếp theo là viết mã sẽ kích hoạt giao diện người dùng này.

4. Kết nối các nút điều khiển và tạo ứng dụng

Bạn có thể chỉnh sửa mã cho hoạt động này bằng cách tìm tệp mã MainActivity.

Trong Android Studio, hãy nhấp vào app > java > MainActivity.

Mở tệp MainActivity để chuyển đến trình soạn thảo mã. Thay thế mọi nội dung trong tệp này ngoại trừ dòng đầu tiên bắt đầu bằng "package" bằng đoạn mã sau:

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

Mã này kết nối các nút điều khiển trên bố cục với txtInput, txtOutput và btnSendText để có thể giải quyết chúng trong mã. Sau đó, nó thiết lập một OnClickListener cho nút, để khi người dùng chạm vào nút, văn bản từ txtInput sẽ được đọc, chuyển đổi thành một chuỗi, rồi thuộc tính txtOutput.text được đặt thành chuỗi đó.

5. Tạo ứng dụng Cơ bản trên iOS

Các bước sau đây đòi hỏi bạn phải có kiến thức cơ bản về Xcode và phát triển iOS bằng Swift.

Nếu không muốn thực hiện quy trình tạo, bạn có thể sao chép kho lưu trữ và mở ứng dụng trực tiếp. Tệp này có tên là TextClassificationStep1 và nằm trong thư mục iOS trong kho lưu trữ.

Để tạo ứng dụng cơ bản, bạn sẽ bắt đầu bằng Xcode.

Tạo một Ứng dụng mới bằng mẫu cơ bản:

Chọn các lựa chọn cho dự án mới. Đặt Tên và Mã nhận dạng tổ chức cho sản phẩm của bạn. Bạn có thể nhập nội dung mình muốn hoặc làm theo ví dụ bên dưới: (Nhưng nhớ đặt giao diện thành Storyboard và Vòng đời thành UIKitApp Delegate, như minh hoạ.)

6. Chỉnh sửa bảng phân cảnh

Mở Main.storyboard. Bạn sẽ thấy một bề mặt thiết kế mà bạn có thể thêm các chế độ kiểm soát.
Để thêm các nút điều khiển, hãy nhấp vào nút + ở đầu cửa sổ Xcode.

Sử dụng công cụ này để đặt một chế độ điều khiển TextView, một chế độ điều khiển Button và một chế độ điều khiển Label lên bề mặt thiết kế. Đoạn mã sẽ trông giống như sau:

Sử dụng trợ lý để mở chế độ xem song song với cả tệp storyboard và ViewController.swift. Trợ lý là một biểu tượng nhỏ ở phía trên bên phải màn hình, như minh hoạ ở đây:

Nhấn phím CONTROL rồi kéo chế độ điều khiển TextView sang bề mặt mã. Bạn sẽ thấy một mũi tên màu xanh dương khi kéo.
Thả vào mã ngay bên dưới phần khai báo lớp. Bạn sẽ thấy một cửa sổ bật lên hỏi bạn về loại kết nối. Đoạn mã sẽ trông giống như sau:

Chọn Outlet (Đầu ra) và đặt tên là txtInput.
Làm tương tự cho nhãn, sau đó đặt loại kết nối thành Outlet và đặt tên là txtOutput.
Cuối cùng, hãy kéo nút này, nhưng lần này chọn Hành động làm loại kết nối. (Không dùng Ổ cắm làm loại kết nối.)
Đặt tên cho thao tác này là btnSendText.

Khi bạn hoàn tất, mã ở đầu lớp sẽ có dạng như sau:

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

7. Hoàn tất việc mã hoá Ứng dụng iOS cơ bản

Vì khung hiển thị này sử dụng UITextView, nên để phản hồi các sự kiện trên khung hiển thị này, khung hiển thị cần phải là UITextViewDelegate.

Bạn có thể nhận được thông tin này bằng cách thay đổi khai báo lớp thành:

class ViewController: UIViewController, UITextViewDelegate {

Sau đó, trong hàm viewDidLoad, hãy đặt uỷ quyền cho UITextView (mà bạn gọi là txtInput khi thiết lập outlet) thành lớp này như sau:

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

Cuối cùng, bạn muốn xử lý việc xoá bàn phím khỏi màn hình sau khi người dùng nhấn phím Enter trên bàn phím. Việc này được thực hiện thông qua việc uỷ quyền mà bạn vừa thiết lập và bạn có thể triển khai phương thức này trên ViewController để xử lý.

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

Đối với ứng dụng này, thao tác của nút là không đáng kể, chúng ta chỉ cần truyền những gì người dùng nhập vào đầu ra. Sau đó, bạn sẽ thấy cách mô hình NLP có thể lọc văn bản này. Nhưng hiện tại, hãy kết nối nó để mô phỏng một đường truyền.

Bạn đã tạo btnSendText hành động, vì vậy, giờ đây, tất cả những gì bạn cần làm là thêm mã vào hành động đó:

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

8. Xin chúc mừng!

Bạn đã hoàn tất lớp học lập trình này!

Tiếp theo trong lộ trình này, bạn sẽ tìm hiểu cách tạo một mô hình xử lý ngôn ngữ tự nhiên (NLP). Sau đó, bạn sẽ đưa mô hình này trở lại ứng dụng này để trang bị cho ứng dụng khả năng lọc văn bản của người dùng nhằm phát hiện bình luận không liên quan!