Utwórz aplikację z podstawowym stylem przekazu

1. Zanim zaczniesz

Te warsztaty to drugie ćwiczenie na ścieżce szkoleniowej Pierwsze kroki z klasyfikacją tekstu na urządzeniach mobilnych.

W tym ćwiczeniu utworzysz prostą aplikację do obsługi wiadomości. Później w ramach tego szkolenia zaktualizujesz ją o model uczenia maszynowego, który będzie filtrować niechciany spam z wiadomości w aplikacji.

Wymagania wstępne

• Podstawowa wiedza na temat tworzenia aplikacji na Androida w języku Kotlin i (opcjonalnie) na iOS w języku Swift.

Co utworzysz

• Prosta aplikacja do obsługi wiadomości

Czego potrzebujesz

• Aby rozpocząć pracę z Androidem, potrzebujesz Androida Studio. Zanim przejdziesz dalej, upewnij się, że jest zainstalowana i w pełni zaktualizowana.
• W przypadku iOS będziesz potrzebować Xcode. Znajdziesz go w App Store. (Jeśli chcesz napisać tylko aplikację na iOS, przejdź od razu do kroku 5.

Pobierz kod

Jeśli nie chcesz postępować zgodnie z instrukcjami krok po kroku i chcesz tylko zobaczyć końcowy kod tej ścieżki, znajdziesz go na stronie

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

W tym miejscu znajdź katalog TextClassificationOnMobile, a w nim podkatalogi Android i iOS. Te katalogi będą zawierać podkatalogi TextClassificationStep1, w których znajdują się odpowiednio aplikacje na Androida i iOS.

2. Tworzenie nowego projektu w Android Studio

1. Uruchom Android Studio.

1. Kliknij Utwórz nowy projekt. Pojawi się okno dialogowe z prośbą o wybranie szablonu projektu.
2. Wybierz Puste działanie i kliknij Dalej. Następnie pojawi się prośba o skonfigurowanie projektu. Wybierz dowolną opcję, ale upewnij się, że język to Kotlin, a minimalna wersja pakietu SDK to API 23.
3. Kliknij Zakończ. Po zakończeniu tych czynności otworzy się Android Studio z Twoim projektem. Synchronizacja Gradle może potrwać kilka minut, aby upewnić się, że wszystko jest w porządku, zwłaszcza jeśli używasz Androida Studio po raz pierwszy.

3. Tworzenie interfejsu użytkownika

Interfejs użytkownika aplikacji na Androida jest tworzony za pomocą pliku XML o nazwie plik układu.

1. Otwórz plik. W eksploratorze w Android Studio kliknij app > res > layout > activity_main.xml.

W prawym górnym rogu ekranu powinna być widoczna sekcja z kartami Kod, Podziel i Projekt, jak na tym obrazie:

Zanim przejdziesz do następnego kroku, upewnij się, że wybrano opcję „Kod”.

2. Zastąp kod tym kodem 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>

Otrzymasz podstawowy interfejs użytkownika zawierający obszar wprowadzania z elementem TextView, w którym wyświetla się komunikat Enter a String (Wpisz ciąg znaków), oraz element EditText o nazwie txtInput, który umożliwia wpisywanie ciągu znaków. Poniżej znajduje się element TextView, który będzie renderować dane wyjściowe, oraz przycisk, który użytkownik naciśnie, aby uruchomić klasyfikację.

Następnym krokiem jest napisanie kodu, który aktywuje ten interfejs.

4. Połącz elementy sterujące i utwórz aplikację

Kod tej aktywności możesz edytować, wyszukując plik kodu MainActivity.

1. W Android Studio kliknij app > java > MainActivity.

2. Otwórz plik MainActivity, aby przejść do edytora kodu. Zastąp wszystko w tym pliku z wyjątkiem pierwszego wiersza zaczynającego się od „package” tym kodem:

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
        }
    }
}

Ten kod łączy elementy sterujące w układzie z txtInput, txtOutput i btnSendText, dzięki czemu można się do nich odwoływać w kodzie. Następnie konfiguruje OnClickListener dla przycisku, aby po dotknięciu go przez użytkownika tekst z txtInput został odczytany, przekonwertowany na ciąg znaków, a następnie właściwość txtOutput.text została ustawiona na ten ciąg.

Jeśli korzystasz ze ścieżki rozpoczęcia pracy z klasyfikacją tekstu na urządzeniach mobilnych, to zachowanie, które widzisz w aktywności 1, czyli w filmie demonstracyjnym, gdzie aplikacja używa wszystkiego, co wpisze użytkownik, bez sprawdzania, czy nie jest to spam.

W następnym ćwiczeniu w Codelabs zobaczysz, jak używać w tej aplikacji modelu uczenia maszynowego do filtrowania spamu w komentarzach.

Jeśli chcesz utworzyć tę samą aplikację na iOS, przejdź do tego laboratorium.

5. Tworzenie podstawowej aplikacji na iOS

Poniższe czynności wymagają pewnej znajomości Xcode i tworzenia aplikacji na iOS w języku Swift.

Jeśli nie chcesz przechodzić przez proces tworzenia, możesz sklonować repozytorium i bezpośrednio otworzyć aplikację. Nazywa się TextClassificationStep1 i znajduje się w folderze iOS w repozytorium.

Aby utworzyć podstawową aplikację, zacznij od Xcode.

1. Utwórz nową aplikację za pomocą szablonu podstawowego:

2. Wybierz opcje nowego projektu. Nadaj produktowi nazwę i identyfikator organizacji. Możesz wpisać dowolny tekst lub skorzystać z poniższego przykładu (pamiętaj jednak, aby ustawić interfejs na Storyboard, a cykl życia na UIKitApp Delegate, jak pokazano).

6. Edytowanie scenorysu

1. Otwórz plik Main.storyboard. Wyświetli się obszar projektowania, w którym możesz dodawać elementy sterujące.
2. Aby dodać elementy sterujące, kliknij przycisk + u góry okna Xcode.

3. Użyj tej opcji, aby umieścić na powierzchni projektowej elementy sterujące TextView, Button i Label. Powinna wyglądać mniej więcej tak:

4. Użyj asystenta, aby otworzyć widok obok siebie z otwartymi plikami storyboard i ViewController.swift. Asystent to mała ikona w prawym górnym rogu ekranu, jak pokazano tutaj:

1. Naciśnij klawisz CONTROL i przeciągnij element TextView na powierzchnię kodu. Podczas przeciągania powinna być widoczna niebieska strzałka.
2. Upuść go na kod znajdujący się tuż pod deklaracją klasy. Pojawi się wyskakujące okienko z pytaniem o typ połączenia. Powinna wyglądać mniej więcej tak:

3. Wybierz Outlet i nadaj mu nazwę txtInput.
4. Zrób to samo w przypadku etykiety, a następnie ustaw typ połączenia na Gniazdo i nadaj mu nazwę txtOutput.
5. Na koniec przeciągnij przycisk, ale tym razem jako typ połączenia wybierz Działanie. (Nie używaj typu połączenia Gniazdo).
6. Nazwij działanie btnSendText.

Gdy skończysz, kod u góry klasy powinien wyglądać tak:

@IBOutlet weak var txtInput: UITextView!
@IBOutlet weak var txtOutput: UILabel!
@IBAction func btnSendText(_ sender: Any) {
}

7. Zakończ kodowanie podstawowej aplikacji na iOS

Ponieważ ten widok korzysta z klasy UITextView, aby reagował na zdarzenia, musi być delegatem UITextViewDelegate.

Możesz to zrobić, zmieniając deklarację klasy w ten sposób:

class ViewController: UIViewController, UITextViewDelegate {

Następnie w funkcji viewDidLoad ustaw delegata dla UITextView (który podczas konfigurowania gniazda został nazwany txtInput) na tę klasę w ten sposób:

override func viewDidLoad() {
    super.viewDidLoad()
    txtInput.delegate = self
}

Na koniec musisz zadbać o to, aby klawiatura znikała po naciśnięciu przez użytkownika klawisza Enter. Odbywa się to za pomocą przekazywania dostępu, które właśnie skonfigurowano. Możesz wdrożyć tę metodę w obiekcie ViewController, aby ją obsługiwać.

func textView(_ textView: UITextView, shouldChangeTextIn range: 
              NSRange, replacementText text: String) -> Bool {
    if (text == "\n") {
        textView.resignFirstResponder()
        return false
    }
    return true
}

W przypadku tej aplikacji działanie przycisku jest proste – po prostu przekazujemy to, co wpisuje użytkownik, do danych wyjściowych. Później zobaczysz, jak model NLP może filtrować ten tekst. Na razie połączmy go, aby symulować przekazywanie sygnału.

Działanie btnSendText zostało już utworzone, więc wystarczy, że dodasz do niego kod:

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

8. Gratulacje!

To już koniec tego ćwiczenia z programowania.

W dalszej części ścieżki dowiesz się, jak utworzyć model NLP, który później wykorzystasz w tej aplikacji, aby filtrować tekst użytkownika pod kątem spamu w komentarzach.