构建基本消息传递样式应用

1. 准备工作

此 Codelab 是“移动文本分类入门”在线课程中的活动 2。

在此 Codelab 中，您将构建一个简单的即时通讯应用。在本在线课程的后面部分，您将使用机器学习模型来更新此应用，以从应用的消息中滤除不必要的垃圾内容。

前提条件

  • 了解使用 Kotlin 进行 Android 开发的基础知识，以及使用 Swift 进行 iOS 开发（可选）

构建内容

  • 一款简单的即时通讯应用

所需条件

  • 对于 Android 应用，首先需要安装 Android Studio。请确保它已安装并完全更新，然后再继续。
  • 对于 iOS，您需要使用 Xcode。您可以在 App Store 中找到该 ID。（如果您只想编写 iOS 应用，请直接跳到第 5 步。

获取代码

如果您不想按照分步说明进行操作，而只查看此在线课程的最终代码，则可以

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

在此处，找到 TextClassificationOnMobile 目录，然后在其中看到 Android 和 iOS 子目录。这些目录将包含 TextClassificationStep1 子目录，分别包含 Android 和 iOS 上的应用。

968cc631a448a8ef

2. 在 Android Studio 中创建一个新项目

  1. 启动 Android Studio。

4542b16e14c33eed

  1. 选择新建项目。您将看到一个对话框，要求您选择项目模板。
  2. 选择 Empty Activity，然后点击 Next。接下来，系统会要求您配置项目。选择您喜欢的内容，但请确保语言为 Kotlin，最低 SDK 为 API 23。
  3. 点击完成。完成此操作后，Android Studio 将打开您的项目。它可能需要一些时间来执行 Gradle 同步，以确保一切井然有序，尤其是当您首次使用 Android Studio 时。

3. 创建界面

Android 应用的界面是使用称为布局文件的 XML 文件创建的。

  1. 打开相应文件。点击应用 >res >布局 >activity_main.xml。

562f935ccaa9e666

在屏幕的右上角，您应该会看到一个选项，其中包含“Code”（代码）、“Split”（拆分）和“Design”（设计）标签页，如下所示：

3ae858bfe4ec100f

请务必选中“代码”然后才能继续下一步

  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 以及一个名为 txtInput 的 EditText，可用于输入字符串。它下面是渲染输出的 TextView，以及用户要触发分类的按钮。

下一步是编写用于激活此界面的代码。

4. 连接控件并创建应用

您可以通过找到 MainActivity 代码文件来修改此 Activity 的代码。

  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 上创建基本应用

以下步骤要求对 Xcode 和使用 Swift 进行 iOS 开发有一定的了解。

如果您不想执行创建过程，则可以克隆代码库并直接打开该应用。这称为 TextClassificationStep1，位于代码库中的 iOS 文件夹中。

若要创建基本应用，首先需要使用 Xcode。

  1. 使用基本模板创建一个新的 App：

254c026ac66e32f9

  1. 为新项目选择选项。为您的商品指定名称和组织标识符。您可以输入所需的内容，也可以按照以下示例操作：（但请务必将界面设置为 Storyboard，将生命周期设置为 UIKitApp Delegate，如下所示。）

d0bd704bfa657d5f.png

6. 修改分镜画面

  1. 打开 Main.storyboard。你会看到一个设计界面，您可以在其中添加控件。
  2. 要添加控件，请点击 Xcode 窗口顶部的 + 按钮。

a5203e9757e6b11e.png

  1. 使用此方法可将 TextView 控件、Button 控件和 Label 控件放置在设计图面上。代码应如下所示：

13d02aae8d8c4a13

  1. 使用智能助理打开一个并排视图，同时打开故事板和 ViewController.swift 文件。智能助理是屏幕右上角的一个小图标，如下所示：

d152cce014151f26.png

  1. 按下 CONTROL 键，然后将 TextView 控件拖动到代码 Surface 上。在拖动时，您应该会看到一个蓝色箭头。
  2. 拖放到类声明正下方的代码上。系统会显示一个弹出式窗口，询问您连接类型。代码应如下所示：

455b8b131e5f3b3d

  1. 选择插座，并将其命名为 txtInput。
  2. 对标签执行相同的操作，然后将连接类型设为 Outlet，并将其命名为 txtOutput。
  3. 最后，将按钮拖动到上方，但这次选择操作作为连接类型。（请勿使用插座作为连接类型。）
  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 {

然后，在 viewDidLoad 函数中，将 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 模型，稍后您会将该模型带回此应用，使其能够过滤用户的文本以检测垃圾评论！