Эта страница переведена с помощью Cloud Translation API.

Создайте базовое приложение для обмена сообщениями

1. Прежде чем начать

Данная практическая работа является заданием №2 в рамках курса «Начало работы с мобильной классификацией текста».

В этом практическом занятии вы создадите простое приложение для обмена сообщениями. Позже, в рамках этого курса, вы обновите это приложение, добавив модель машинного обучения, которая будет фильтровать нежелательный спам из сообщений в приложении.

Предварительные требования

Базовые знания разработки под Android с использованием Kotlin и (по желанию) разработки под iOS с использованием Swift.

Что вы построите

Простое приложение для обмена сообщениями

Что вам понадобится

Для начала работы с Android вам потребуется Android Studio . Убедитесь, что она установлена и полностью обновлена, прежде чем продолжить.
Для iOS вам понадобится Xcode. Его можно найти в App Store. (Если вы хотите написать только iOS-приложение, сразу переходите к шагу 5.)

Получить код

Если вы не хотите следовать пошаговой инструкции и просто хотите увидеть окончательный код для этого сценария, он находится по адресу:

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

Здесь найдите каталог TextClassificationOnMobile, и внутри него вы увидите подкаталоги Android и iOS. Эти каталоги будут содержать подкаталоги TextClassificationStep1, в которых находятся приложения для Android и iOS соответственно.

2. Создайте новый проект в Android Studio.

Запустите Android Studio.

Выберите «Создать новый проект». Откроется диалоговое окно, в котором вам будет предложено выбрать шаблон проекта.
Выберите «Пустая активность» и нажмите «Далее». Затем вам будет предложено настроить проект. Выберите любой вариант, но убедитесь, что язык программирования — Kotlin , а минимальный SDK — API 23 .
Нажмите «Готово» . После этого откроется Android Studio с вашим проектом. Может потребоваться несколько минут для синхронизации Gradle, чтобы убедиться, что все в порядке, особенно если вы используете Android Studio впервые.

3. Создайте пользовательский интерфейс.

Пользовательский интерфейс для Android-приложения создаётся с помощью XML-файла, называемого файлом макета.

Откройте файл. В Android Studio с помощью проводника перейдите в меню app > res > layout > activity_main.xml .

В правом верхнем углу экрана вы увидите раздел с вкладками «Код», «Разделение» и «Дизайн», примерно такой:

Перед переходом к следующему шагу убедитесь, что выбран пункт «Код».

Замените код следующим 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, предлагающим ввести строку, и полем EditText с именем txtInput , которое можно использовать для ввода строки. Под ним находится элемент TextView, который будет отображать результат, и кнопка, которую пользователь нажмет, чтобы запустить классификацию.

Следующий шаг — написание кода, который активирует этот пользовательский интерфейс.

4. Подключите элементы управления и создайте приложение.

Вы можете отредактировать код для этого действия, найдя файл с кодом MainActivity.

В Android Studio перейдите в меню app > java > MainActivity .

Откройте файл 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 устанавливается в эту строку.

Если вы следите за инструкциями в разделе «Начало работы с мобильной классификацией текста», то именно такое поведение вы видели в задании №1, демонстрационном видео, где приложение просто использует то, что вводит пользователь, не проверяя на спам!

В следующем уроке Codelab вы узнаете, как использовать модель машинного обучения в этом приложении для фильтрации спам-комментариев.

Если вы хотите создать такое же приложение для iOS, пожалуйста, продолжайте выполнение этого практического задания.

5. Создайте базовое приложение для iOS.

Для выполнения следующих шагов потребуется некоторое знакомство с Xcode и разработкой под iOS на Swift.

Если вы не хотите проходить процесс создания, вы можете клонировать репозиторий и открыть приложение напрямую. Оно называется TextClassificationStep1 и находится в папке iOS в репозитории.

Для создания базового приложения вы начнете с Xcode.

Создайте новое приложение , используя базовый шаблон:

Выберите параметры для вашего нового проекта . Присвойте продукту имя и идентификатор организации . Вы можете ввести любое имя или следовать приведенному ниже примеру: (Но обязательно установите интерфейс в режим Storyboard , а жизненный цикл — в режим UIKitApp Delegate , как показано на рисунке.)

6. Отредактируйте раскадровку.

Откройте файл Main.storyboard . Вы увидите рабочую область, на которую можно добавлять элементы управления.
Чтобы добавить элементы управления, нажмите кнопку «+» в верхней части окна Xcode.

Используйте это для размещения элементов управления TextView, Button и Label на рабочей области. В итоге должно получиться примерно так:

Воспользуйтесь помощником, чтобы открыть окно, в котором одновременно будут открыты раскадровка и файл ViewController.swift . Помощник представляет собой небольшой значок в правом верхнем углу экрана, как показано здесь:

Нажмите клавишу CONTROL и перетащите элемент управления TextView на рабочую область кода. Во время перетаскивания вы увидите синюю стрелку.
Перетащите курсор на код, расположенный непосредственно под объявлением класса. Появится всплывающее окно с запросом типа подключения. Оно должно выглядеть примерно так:

Выберите Outlet и присвойте ему имя txtInput.
Сделайте то же самое для метки, затем установите тип соединения как Outlet и назовите его txtOutput.
Наконец, перетащите кнопку, но на этот раз выберите тип подключения «Действие» . (Не используйте тип подключения «Розетка ».)
Назовите действие 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
}

Для этого приложения действие кнопки тривиально: мы просто передадим введенный пользователем текст на вывод. Позже вы увидите, как модель обработки естественного языка может отфильтровать этот текст. А пока давайте просто подключим ее для имитации сквозной передачи данных.

Вы уже создали действие btnSendText, поэтому теперь вам нужно лишь добавить в него код:

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

8. Поздравляем!

Вы успешно завершили этот практический урок!

Далее вы научитесь создавать модель обработки естественного языка (NLP), которую затем сможете использовать в этом приложении для фильтрации текста пользователей на предмет спама в комментариях!