Utwórz aplikację z podstawowym stylem przekazu

1. Zanim zaczniesz

To ćwiczenie w Codelabs to 2. część ścieżki klasyfikacji tekstu Pierwsze kroki z materiałami mobilnymi.

W ramach tego ćwiczenia w Codelabs utworzysz prostą aplikację do obsługi wiadomości. W dalszej części ścieżki zaktualizujesz tę aplikację za pomocą modelu systemów uczących się, który będzie odfiltrowywał niechciany spam z wiadomości w aplikacji.

Wymagania wstępne

• Podstawowa wiedza z zakresu programowania na Androida w aplikacji Kotlin i (opcjonalnie) programowanie w systemie iOS przy użyciu technologii Swift.

Co utworzysz

• Prosta aplikacja do obsługi wiadomości

Czego potrzebujesz

• W przypadku Androida potrzebujesz Android Studio. Zanim przejdziesz dalej, upewnij się, że jest zainstalowana i w pełni zaktualizowana.
• W iOS potrzebujesz Xcode. Znajdziesz ją w App Store. Jeśli chcesz napisać tylko aplikację na iOS, przejdź od razu do kroku 5.

Pobierz kod

Jeśli nie chcesz podążać krok po kroku i widzisz ostateczny kod tej ścieżki, jest on dostępny na stronie

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

Znajdziesz w nim katalog TextClassificationOnMobile, w którym znajdują się podkatalogi na Androida i iOS. Katalogi te będą zawierać podkatalogi TextClassificationStep1, zawierające odpowiednio aplikację na Androida i iOS.

2. Tworzenie nowego projektu w Android Studio

1. Uruchom Android Studio.

1. Wybierz Create New Project (Utwórz nowy projekt). Pojawi się okno z prośbą o wybranie szablonu projektu.
2. Wybierz Empty Activity (Pusta aktywność) i kliknij Dalej. Pojawi się prośba o skonfigurowanie projektu. Możesz wybrać dowolny język, pamiętaj jednak, aby ustawić język Kotlin, a minimalny pakiet SDK to API 23.
3. Kliknij Zakończ. Gdy to zrobisz, w projekcie otworzy się Android Studio. Wykonanie synchronizacji przy użyciu Gradle może chwilę potrwać, zwłaszcza jeśli używasz Android Studio po raz pierwszy.

3. Tworzenie interfejsu użytkownika

Interfejs aplikacji na Androida jest tworzony za pomocą pliku XML nazywanego plikiem układu.

1. Otwórz plik. Kliknij aplikacja > res > układ > activity_main.xml za pomocą eksploratora w Android Studio.

W prawym górnym rogu ekranu powinny być widoczne karty Kod, Podział i Projektowanie:

Upewnij się, że sekcja „Kod” przed przejściem do następnego kroku.

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

Udostępniamy podstawowy interfejs użytkownika zawierający obszar do wprowadzania danych z elementem TextView. Wyświetli się prośba o wpisanie ciągu znaków i element EditText o nazwie txtInput, którego można użyć do wpisania ciągu znaków. Poniżej znajduje się obiekt TextView, który renderuje dane wyjściowe, oraz przycisk, który użytkownik może nacisnąć, aby aktywować klasyfikację.

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

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

Możesz edytować kod tej aktywności, znajdując plik kodu MainActivity.

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

2. Otwórz plik MainActivity, aby otworzyć edytor kodu. Zastąp wszystko w tym pliku oprócz 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 układu z elementami txtInput, txtOutput i btnSendText, dzięki czemu można je zaadresować w kodzie. Następnie konfiguruje OnClickListener dla przycisku, dzięki czemu gdy użytkownik go dotknie, tekst z pola txtInput zostanie odczytany, przekonwertowany na ciąg znaków, a właściwość txtOutput.text zostanie ustawiona na ten ciąg.

Jeśli podążasz ścieżką klasyfikacji tekstu Pierwsze kroki z klasyfikacją tekstu na urządzeniach mobilnych, jest to opisane w ćwiczeniu nr 1 – filmie demonstracyjnym, w którym aplikacja będzie używać tego, co wpisze użytkownik, bez sprawdzania spamu.

Z następnego ćwiczenia w Codelabs dowiesz się, jak używać w tej aplikacji modelu systemów uczących się do filtrowania spamu w komentarzach.

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

5. Tworzenie aplikacji podstawowej na iOS

Kolejne kroki wymagają pewnej znajomości Xcode oraz programowania na iOS w Swift.

Jeśli nie chcesz przechodzić przez proces tworzenia, możesz skopiować repozytorium i od razu otworzyć aplikację. Nosi on nazwę TextClassificationStep1 i znajduje się w folderze iOS w repozytorium.

Tworzenie podstawowej aplikacji będzie możliwe od Xcode.

1. Utwórz nową aplikację, korzystając z szablonu podstawowego:

2. Wybierz opcje dla nowego projektu. Podaj nazwę i identyfikator organizacji produktu. Możesz wpisać, co chcesz, lub skorzystać z poniższego przykładu: (pamiętaj jednak, aby ustawić w interfejsie opcję Storyboard, a cykl życia na UIKitApp Delegate, jak pokazano na ilustracji).

6. Edytuj scenorys

1. Otwórz Main.storyboard. Pojawi się okienko, w którym możesz dodać elementy sterujące.
2. Aby dodać elementy sterujące, kliknij przycisk + u góry okna Xcode.

3. Służy do umieszczenia kontrolek TextView, przycisków Przycisk i Etykieta na powierzchni projektowej. Powinna wyglądać mniej więcej tak:

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

1. Naciśnij klawisz Ctrl i przeciągnij element sterujący TextView na panel kodu. Podczas przeciągania powinna być widoczna niebieska strzałka.
2. Umieść kod 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 z etykietą, a następnie ustaw typ połączenia na Outlet i nadaj mu nazwę txtOutput.
5. Na koniec przeciągnij przycisk, ale tym razem jako typ połączenia wybierz Działanie. (Nie używaj Outlet jako typu połączenia).
6. Nazwij działanie btnSendText.

Gdy skończysz, Twój kod na początku zajęć powinien wyglądać tak:

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

7. Ukończ kodowanie podstawowej aplikacji na iOS

Ten widok korzysta z interfejsu UITextView, więc aby odpowiadać na zdarzenia w tym widoku, musi być obiekt UITextViewDelegate.

Aby to zrobić, zmień deklarację klasy na tę:

class ViewController: UIViewController, UITextViewDelegate {

Następnie w funkcji view DidLoad ustaw przekazywanie dostępu dla UITextView (nazywanego txtInput podczas konfigurowania gniazdka) na tę klasę w ten sposób:

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

Ostatnim elementem jest usunięcie klawiatury z wyświetlacza, gdy użytkownik naciśnie na niej Enter. Odbywa się to przez właśnie skonfigurowane przekazanie dostępu, które możesz wdrożyć w kontrolerze ViewController, aby to obsługiwać.

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

Działanie przycisku w tej aplikacji jest proste. Omówimy po prostu, co użytkownik wpisuje w wynikach. Później zobaczysz, jak model NLP może filtrować ten tekst. Na razie podłączmy go, by przeprowadzić symulację przechodzenia.

Masz już utworzone działanie btnSendText, 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 modułu dowiesz się, jak utworzyć model NLP, który będzie można później przywrócić do tej aplikacji, aby wyposażyć go w filtrowanie tekstu użytkowników pod kątem spamu w komentarzach.