Einfache Messaging-App erstellen

1. Hinweis

Dieses Codelab ist Aktivität 2 im Lernpfad „Erste Schritte mit der mobilen Textklassifizierung“.

In diesem Codelab erstellen Sie eine einfache Messaging-App. Später im Lernpfad aktualisieren Sie diese App mit einem Machine-Learning-Modell, das unerwünschten Spam aus den Nachrichten in der App herausfiltert.

Vorbereitung

• Grundkenntnisse der Android-Entwicklung mit Kotlin und (optional) der iOS-Entwicklung mit Swift

Aufgaben

• Eine einfache Messaging-App

Voraussetzungen

• Für Android benötigen Sie Android Studio. Prüfen Sie, ob es installiert und vollständig aktualisiert ist, bevor Sie fortfahren.
• Für iOS benötigen Sie Xcode. Sie finden sie im App Store. Wenn Sie nur die iOS-App schreiben möchten, fahren Sie direkt mit Schritt 5 fort.

Code abrufen

Wenn Sie nicht Schritt für Schritt vorgehen möchten, sondern nur den endgültigen Code für diesen Lernpfad sehen möchten, finden Sie ihn unter

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

Suchen Sie hier nach dem Verzeichnis „TextClassificationOnMobile“ und darin nach den Unterverzeichnissen „Android“ und „iOS“. Diese Verzeichnisse enthalten die Unterverzeichnisse „TextClassificationStep1“, die die App für Android bzw. iOS enthalten.

2. Neues Projekt in Android Studio erstellen

1. Starten Sie Android Studio.

1. Wählen Sie Neues Projekt erstellen aus. Es wird ein Dialogfeld angezeigt, in dem Sie aufgefordert werden, eine Projektvorlage auszuwählen.
2. Wählen Sie Empty Activity (Leere Aktivität) aus und klicken Sie auf Next (Weiter). Als Nächstes werden Sie aufgefordert, Ihr Projekt zu konfigurieren. Wählen Sie eine beliebige Option aus, achten Sie aber darauf, dass die Sprache Kotlin und das Mindest-SDK API 23 ist.
3. Klicken Sie auf Fertig. Anschließend wird Android Studio mit Ihrem Projekt geöffnet. Es kann einige Momente dauern, bis eine Gradle-Synchronisierung durchgeführt wird, um sicherzustellen, dass alles in Ordnung ist. Das gilt insbesondere, wenn Sie Android Studio zum ersten Mal verwenden.

3. Benutzeroberfläche erstellen

Die Benutzeroberfläche einer Android-App wird mit einer XML-Datei erstellt, die als Layoutdatei bezeichnet wird.

1. Öffnen Sie die Datei. Klicken Sie in Android Studio im Explorer auf app > res > layout > activity_main.xml.

Rechts oben auf dem Bildschirm sollten Sie eine Auswahl mit den Tabs „Code“, „Split“ und „Design“ sehen:

Achten Sie darauf, dass „Code“ ausgewählt ist, bevor Sie mit dem nächsten Schritt fortfahren.

2. Ersetzen Sie den Code durch diesen XML-Code:

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

Dadurch erhalten Sie eine einfache Benutzeroberfläche mit einem Eingabebereich mit einer TextView, in der Sie aufgefordert werden, Enter a String (Geben Sie einen String ein) einzugeben, und einem EditText namens txtInput, in das Sie einen String eingeben können. Darunter befindet sich ein TextView-Element, in dem die Ausgabe gerendert wird, und ein Button, den der Nutzer drückt, um die Klassifizierung auszulösen.

Als Nächstes müssen Sie den Code schreiben, mit dem diese Benutzeroberfläche aktiviert wird.

4. Steuerelemente verbinden und App erstellen

Sie können den Code für diese Aktivität bearbeiten, indem Sie die Code-Datei „MainActivity“ suchen.

1. Klicken Sie in Android Studio auf app > java > MainActivity.

2. Öffnen Sie die Datei „MainActivity“, um zum Code-Editor zu gelangen. Ersetzen Sie alles in dieser Datei mit Ausnahme der ersten Zeile, die mit „package“ beginnt, durch diesen Code:

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

Mit diesem Code werden die Steuerelemente im Layout mit txtInput, txtOutput und btnSendText verbunden, damit sie im Code angesprochen werden können. Anschließend wird ein OnClickListener für die Schaltfläche eingerichtet. Wenn der Nutzer sie berührt, wird der Text aus txtInput gelesen, in einen String umgewandelt und die txtOutput.text-Eigenschaft wird auf diesen String gesetzt.

Wenn Sie dem Lernpfad „Erste Schritte mit der mobilen Textklassifizierung“ folgen, haben Sie dieses Verhalten in Aktivität 1, dem Demovideo, gesehen. Dort verwendet die App einfach alles, was der Nutzer eingibt, ohne auf Spam zu prüfen.

Im nächsten Codelab erfahren Sie, wie Sie ein Machine-Learning-Modell in dieser App verwenden, um Kommentar-Spam herauszufiltern.

Wenn Sie dieselbe App für iOS erstellen möchten, fahren Sie mit diesem Codelab fort.

5. Einfache App auf iOS-Geräten erstellen

Für die folgenden Schritte sind einige Kenntnisse von Xcode und der iOS-Entwicklung mit Swift erforderlich.

Wenn Sie den Erstellungsprozess nicht durchlaufen möchten, können Sie das Repository klonen und die App direkt öffnen. Sie heißt „TextClassificationStep1“ und befindet sich im Ordner „iOS“ im Repository.

Um die einfache App zu erstellen, beginnen Sie mit Xcode.

1. Erstellen Sie eine neue App mit der einfachen Vorlage:

2. Optionen für das neue Projekt auswählen Geben Sie einen Namen und eine Organisations-ID für Ihr Produkt ein. Sie können eingeben, was Sie möchten, oder dem Beispiel unten folgen. Achten Sie aber darauf, dass die Benutzeroberfläche auf Storyboard und der Lebenszyklus auf UIKitApp Delegate eingestellt ist, wie unten gezeigt.

6. Storyboard bearbeiten

1. Öffnen Sie Main.storyboard. Es wird eine Designoberfläche angezeigt, auf der Sie Steuerelemente hinzufügen können.
2. Klicken Sie oben im Xcode-Fenster auf die Schaltfläche +, um Steuerelemente hinzuzufügen.

3. Damit können Sie ein TextView-Steuerelement, ein Button-Steuerelement und ein Label-Steuerelement auf der Designoberfläche platzieren. Die Ausgabe sollte ungefähr so aussehen:

4. Öffnen Sie mit dem Assistenten eine nebeneinander angeordnete Ansicht, in der sowohl das Storyboard als auch die Datei ViewController.swift geöffnet sind. Der Assistent wird als kleines Symbol oben rechts auf dem Bildschirm angezeigt, wie hier zu sehen:

1. Drücken Sie die STRG-Taste und ziehen Sie das TextView-Steuerelement auf die Codeoberfläche. Beim Ziehen sollte ein blauer Pfeil angezeigt werden.
2. Fügen Sie den Code direkt unter der Klassendeklaration ein. Sie erhalten ein Pop-up-Fenster, in dem Sie nach dem Verbindungstyp gefragt werden. Die Ausgabe sollte ungefähr so aussehen:

3. Wählen Sie Outlet aus und geben Sie ihm den Namen „txtInput“.
4. Wiederholen Sie den Vorgang für das Label, legen Sie den Verbindungstyp auf Outlet fest und geben Sie ihm den Namen „txtOutput“.
5. Ziehen Sie die Schaltfläche noch einmal herüber, wählen Sie diesmal aber Aktion als Verbindungstyp aus. Verwenden Sie nicht Steckdose als Verbindungstyp.
6. Geben Sie der Aktion den Namen btnSendText.

Wenn Sie fertig sind, sollte der Code oben in der Klasse so aussehen:

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

7. Grundlegende iOS-App fertig programmieren

Da in dieser Ansicht eine UITextView verwendet wird, muss sie ein UITextViewDelegate sein, damit sie auf Ereignisse in dieser Ansicht reagieren kann.

Sie können dies erreichen, indem Sie die Klassendeklaration so ändern:

class ViewController: UIViewController, UITextViewDelegate {

Legen Sie dann in der Funktion „viewDidLoad“ den Delegaten für die UITextView (die Sie beim Einrichten des Outlets „txtInput“ genannt haben) auf diese Klasse fest:

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

Schließlich möchten Sie das Entfernen der Tastatur aus der Anzeige verarbeiten, sobald der Nutzer die Eingabetaste auf der Tastatur drückt. Dies erfolgt über die Delegierung, die Sie gerade eingerichtet haben. Sie können diese Methode im ViewController implementieren, um sie zu verarbeiten.

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

Für diese App ist die Schaltflächenaktion trivial. Wir geben einfach das, was der Nutzer eingibt, an die Ausgabe weiter. Später sehen Sie, wie ein NLP-Modell diesen Text filtern kann. Für den Moment verbinden wir es aber einfach, um einen Passthrough zu simulieren.

Sie haben die Aktion „btnSendText“ bereits erstellt. Jetzt müssen Sie nur noch den Code dafür hinzufügen:

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

8. Glückwunsch!

Sie haben dieses Codelab abgeschlossen.

Als Nächstes erfahren Sie, wie Sie ein NLP-Modell erstellen, das Sie später in diese App einbinden können, um den Text Ihrer Nutzer auf Kommentar-Spam zu filtern.