建構基本的訊息樣式應用程式

1. 事前準備

本程式碼研究室是「開始使用行動裝置文字分類」課程中的活動 #2。

在本程式碼研究室中，您將建構簡單的訊息應用程式。在本課程的後續部分中，您將使用機器學習模型更新這個應用程式，從應用程式訊息中過濾掉不必要的垃圾訊息。

必要條件

  • 具備使用 Kotlin 進行 Android 開發作業的基本知識，以及 (選用) 使用 Swift 進行 iOS 開發作業

建構項目

  • 簡單的訊息應用程式

軟硬體需求

  • 如果是 Android，您需要 Android Studio 才能開始使用。請先確認已安裝且完全更新，再繼續操作。
  • 若是 iOS，則需要使用 Xcode。您可在 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. 選取「Create New Project」(建立新專案)。系統會顯示對話方塊，要求您選取專案範本。
  2. 選取「Empty Activity」，然後點選「Next」。接著，系統會請您設定專案。請選擇您想要的內容，但務必確認語言為 Kotlin，且最低 SDK 為 API 23。
  3. 按一下「完成」。完成後，Android Studio 就會開啟您的專案。執行 Gradle 同步處理作業可能需要一點時間，才能確保一切都正確，尤其是這是第一次使用 Android Studio 的情況。

3. 建立使用者介面

Android 應用程式的使用者介面是使用名為版面配置檔案的 XML 檔案建立。

  1. 開啟檔案。按一下 app (應用程式) >解析度 >版面配置 >activity_main.xml。

562f935ccaa9e666.png

畫面右上方會顯示有「程式碼」、「分割」和「設計」分頁的選取選項，如下所示：

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 的輸入區域，提示您輸入字串和名為 txtInput 的 EditText，可用於輸入字串。這個區塊下方是轉譯輸出內容的 TextView，以及使用者可以按下並觸發分類的按鈕。

接下來，請編寫程式碼，以啟用這個使用者介面。

4. 連結控制項並建立應用程式

找出 MainActivity 程式碼檔案，即可修改這項活動的程式碼。

  1. 在 Android Studio 中，按一下「app」(應用程式) >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 上建立基本應用程式

完成下列步驟，需要熟悉 Swift 的 Xcode 和 iOS 開發知識。

如果您不想執行建立程序，可以複製存放區並直接開啟應用程式。它的名稱為 TextClassificationStep1，位於存放區的 iOS 資料夾中。

如要建立基本應用程式，請先使用 Xcode。

  1. 使用基本範本建立新的應用程式：

254c026ac66e32f9.png

  1. 選擇新專案的選項。設定產品的名稱和機構 ID。你可以輸入所需內容，也可以依照以下範例執行：(但請務必將介面設為「Storyboard」，並將「生命週期」設為「UIKitApp Delegate」，如圖所示)。

d0bd704bfa657d5f.png

6. 編輯分鏡腳本

  1. 開啟 Main.storyboard。您會看到可以新增控制項的設計介面。
  2. 如要新增控制項，請按一下 Xcode 視窗頂端的 + 按鈕。

a5203e9757e6b11e.png

  1. 請使用此方法在設計介面放置 TextView 控制項、按鈕控制項和標籤控制項。如下所示：

13d02aae8d8c4a13.png

  1. 使用助理開啟並排顯示分鏡腳本和 ViewController.swift 檔案。小幫手是畫面右上方的小圖示，如下所示：

d152cce014151f26.png

  1. 按下 CONTROL 鍵，然後將 TextView 控制項拖曳至程式碼介面。拖曳時應會看到藍色箭頭。
  2. 拖放至類別宣告正下方的程式碼。系統會顯示彈出式視窗，詢問你要使用的連線類型。如下所示：

455b8b131e5f3b3d.png

  1. 選取「Outlet」，然後為其命名 txtInput。
  2. 對標籤執行相同操作，然後將連線類型設為 Outlet，並將其命名為 txtOutput。
  3. 最後，將按鈕拖曳到上方，但這次請選取「動作」做為連線類型。(請勿使用「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 {

然後在 viewOnceLoad 函式中，將 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
}

在這個應用程式中，按鈕動作是簡易做法，我們直接傳遞使用者輸入內容到輸出內容。您稍後會來看看自然語言處理模型如何篩選這段文字。但我們現在要將其連接在一起，以模擬直通式。

您已建立動作 btnSendText，因此現在只需新增程式碼至該動作即可：

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

8. 恭喜！

您已完成本程式碼研究室！

在本課程中，我們將說明如何建立自然語言處理模型。這個模型稍後會返回這個應用程式，透過應用程式篩選使用者的文字，確認是否含有垃圾內容！