构建基本的消息样式应用

1. 准备工作

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

在此 Codelab 中，您将构建一个简单的即时通讯应用。在本衔接课程的后面部分，您将通过一个机器学习模型更新此应用，以从该应用中的邮件中滤除不受欢迎的垃圾邮件。

前提条件

  • 对使用 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. 打开文件。使用 Android Studio 中的资源管理器依次点击 app > res > layout > 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 代码文件来修改此 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 上创建基本应用

以下步骤要求您熟悉如何使用 Swift 进行 Xcode 和 iOS 开发。

如果您不想完成创建过程，可以克隆代码库并直接打开应用。名为 TextClassificationStep1，它位于代码库的 iOS 文件夹中。

要创建基本应用，请从 Xcode 开始。

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

254c026ac66e32f9.png

  1. 为新项目选择选项。为您的商品提供名称和组织标识符。您可以输入想要的内容，或者按照以下示例操作（但务必要将界面设置为故事板，并将生命周期设置为 UIKitApp Delegate，如下所示： 。）

d0bd704bfa657d5f.png

6.修改故事板

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

a5203e9757e6b11e.png

  1. 使用此参数可将 TextView 控件、按钮控件和标签控件放置在设计图面上。代码应如下所示：

13d02aae8d8c4a13.png

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

d152cce014151f26.png

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

455b8b131e5f3b3d.png

  1. 选择 Outlet（输出），并将其命名为 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 模型。稍后，您将重新使用以下模型，让它以过滤用户文本作为垃圾评论文本！