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

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.

1. Запустите Android-студию.

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

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

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

1. Откройте файл. Нажмите «Приложение» > «Res » > « Макет» > «Activity_main.xml» с помощью проводника в Android Studio.

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

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

2. Замените код на этот 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.

1. В Android Studio выберите приложение > Java > MainActivity .

2. Откройте файл MainActivity, чтобы перейти к редактору кода. Замените все в этом файле, кроме первой строки, которая начинается с «пакета», этим кодом:

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, демонстрационном видеоролике, где приложение будет просто использовать все, что вводит пользователь, без проверки на спам!

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

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

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

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

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

Чтобы создать базовое приложение, вы начнете с Xcode.

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

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

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

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

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

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

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

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

Вы завершили эту кодовую работу!

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