Trang này được dịch bởi Cloud Translation API.

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

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

Lớp học lập trình này là hoạt động số 2 trong lộ trình Bắt đầu sử dụng 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. Trong phần sau của lộ trình học tập, 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

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

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. Hãy đảm bảo ứng dụng này đã được cài đặt và cập nhật đầy đủ trước khi tiếp tục.
Đối với iOS, bạn cần có Xcode. Bạn có thể tìm thấy ứng dụng 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,

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

Tại đây, hãy tìm thư mục Text1OnMobile. Trong các thư mục này, bạn sẽ thấy các thư mục phụ dành cho Android và iOS. Các thư mục này sẽ chứa các thư mục con Text1Step1 chứa ứng dụng tương ứng trên Android và iOS.

968cc631a448a8ef.png.

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

Mở Android Studio.

4542b16e14c33eed.png.

Chọn Create New Project (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ột 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 muốn nhưng đả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 quá trình này hoàn tất, Android Studio sẽ mở cùng với dự án của bạn. Có thể mất một chút thời gian để đồng bộ hoá gradle nhằm đảm bảo mọi thứ đều ổn, đặc biệt 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 của một ứng dụng Android được tạo bằng tệp XML được gọi là tệp bố cục.

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

562f935ccaa9e666.pngS

Ở trên cùng bên phải 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:

3ae858bfe4ec100f.png.

Hãy đảm bảo rằng "Code" (Mã) sẽ được chọn 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 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 với một TextView, nhắc bạn Nhập một chuỗi và một EditText có tên là txtInput có thể dùng để nhập một chuỗi. Bên dưới đó là một TextView hiển thị kết quả đầ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 chế độ đ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 (ứng dụng) > java > MainActivity.

Mở tệp MainActivity để truy cập vào trình soạn thảo mã. Thay thế mọi thứ trong tệp này ngoại trừ dòng đầu tiên bắt đầu bằng "package" (gói) bằng mã này:

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 chế độ điều khiển trên bố cục với txtInput, txtOutput và btnSendText để có thể xử lý chúng trong mã. Sau đó, hàm này thiết lập OnClickListener cho nút này để khi người dùng nhấn vào nút này, văn bản trong txtInput sẽ được đọc, chuyển đổi thành Chuỗi, sau đó 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 yêu cầu bạn phải thành thạo cách sử dụng 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ữ rồi trực tiếp mở ứng dụng. Lớp này có tên TextAnalysisStep1 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 với Xcode.

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

254c026ac66e32f9.pngS

Chọn các lựa chọn cho dự án mới của bạn. Đặ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 bạn muốn hoặc làm theo ví dụ bên dưới: (Nhưng hãy nhớ đặt giao diện thành Storyboard và Vòng đời thành Uỷ quyền UIKitApp như minh hoạ.)

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

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

Sử dụng tuỳ chọn này để đặt thành phần điều khiển TextView, thành phần điều khiển Nút và thành phần điều khiển Nhãn lên giao diện thiết kế. Hàm này có dạng như sau:

13d02aae8d8c4a13.pngS

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

Nhấn phím CONTROL và kéo thành phần điều khiển TextView đến khu vực mã. Bạn sẽ thấy một mũi tên màu xanh dương khi kéo.
Thả vào đoạn 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 về loại kết nối. Hàm này có dạng như sau:

455b8b131e5f3b3d.png.

Chọn Outlet (Đầu ra) rồi đặt tên là txtInput.
Làm tương tự với nhãn, sau đó đặt loại kết nối là Outlet (Ổ cắm) đặt tên là txtOutput.
Cuối cùng, kéo nút đó, nhưng lần này hãy chọn Thao tác làm loại kết nối. (Không sử dụng Ổ cắm làm loại kết nối.)
Đặt tên cho hành động 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 mã hoá ứng dụng iOS cơ bản

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

Bạn có thể thực hiện việc này bằng cách thay đổi nội dung khai báo lớp thành:

class ViewController: UIViewController, UITextViewDelegate {

Sau đó, trong hàm viewDidLoad, hãy đặt ủy quyền cho UITextView (mà bạn đã gọi là txtInput khi thiết lập đầu ra) vào 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 khi người dùng nhấn Enter trên bàn phím. Việc này được thực hiện thông qua phương thức uỷ quyền mà bạn vừa thiết lập. 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 không quan trọng, chúng ta sẽ chỉ truyền nội dung người dùng nhập đến kết quả. Sau đó, bạn sẽ thấy cách mô hình NLP có thể lọc văn bản này. Nhưng bây giờ, hãy kết nối để mô phỏng một đường truyền.

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

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

8. Xin chúc mừng!

Bạn hiện đã hoàn thành 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 NLP. Sau đó, bạn sẽ đưa mô hình này trở lại ứng dụng này để trang bị cho việc 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!