Einfache Messaging-App erstellen

1. Hinweis

Dieses Codelab ist Aktivität Nr. 2 im Pfad „Erste Schritte bei der mobilen Textklassifizierung“.

In diesem Codelab entwickeln Sie eine einfache Messaging-App. Später aktualisieren Sie diese App mit einem Modell für maschinelles Lernen, das unerwünschten Spam aus den Nachrichten in der App filtert.

Vorbereitung

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

Aufgaben

• Eine einfache Messaging-App

Voraussetzungen

• Für Android benötigen Sie zum Einstieg Android Studio. Sie muss installiert und vollständig aktualisiert sein, bevor Sie fortfahren.
• Für iOS benötigen Sie Xcode. Du findest 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 folgen und nur den endgültigen Code für diesen Pfad sehen möchten, finden Sie ihn

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

Hier finden Sie das Verzeichnis „TextClassificationOnMobile“. Darin befinden sich die Android- und iOS-Unterverzeichnisse. Diese Verzeichnisse enthalten TextClassificationStep1-Unterverzeichnisse, 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 erscheint ein Dialogfeld, in dem Sie aufgefordert werden, eine Projektvorlage auszuwählen.
2. Wähle Leere Aktivität aus und klicke auf Weiter. Als Nächstes werden Sie aufgefordert, Ihr Projekt zu konfigurieren. Sie können eine beliebige Sprache auswählen. Achten Sie aber darauf, dass die Sprache Kotlin und die SDK-Mindestversion API 23 ist.
3. Klicken Sie auf Fertig. Anschließend wird Android Studio mit Ihrem Projekt geöffnet. Es kann einen Moment dauern, bis eine Gradle-Synchronisierung durchgeführt wird, um sicherzustellen, dass alles in Ordnung ist, vor allem, wenn Sie Android Studio zum ersten Mal verwenden.

3. Benutzeroberfläche erstellen

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

1. Öffnen Sie die Datei. Klicken Sie auf App > res > Layout > activity_main.xml mit dem Explorer in Android Studio

Oben rechts auf dem Bildschirm sollten Sie eine Auswahl mit Registerkarten für „Code“, „Aufteilen“ und „Design“ sehen, zum Beispiel:

Stellen Sie sicher, 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 und einen EditText namens txtInput einzugeben, über den ein String eingegeben werden kann. Darunter befindet sich eine TextView, die die Ausgabe rendert, und eine Schaltfläche, über die der Nutzer die Klassifizierung auslöst.

Der nächste Schritt besteht darin, den Code zu 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 MainActivity-Codedatei suchen.

1. Klicke in Android Studio auf App > java > MainActivity:

2. Öffnen Sie die MainActivity-Datei, um den Code-Editor aufzurufen. Ersetzen Sie den gesamten Inhalt dieser Datei außer der ersten Zeile, die mit „package“ beginnt. mit diesem 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
        }
    }
}

Dieser Code verbindet die Steuerelemente im Layout mit txtInput, txtOutput und btnSendText, damit sie im Code adressiert werden können. Dann wird eine OnClickListener für die Schaltfläche eingerichtet. Wenn der Nutzer sie berührt, wird der Text aus txtInput gelesen, in einen String konvertiert und anschließend die Eigenschaft txtOutput.text auf diesen String festgelegt.

Wenn Sie dem Pfad zur Textklassifizierung für Mobilgeräte folgen, ist dies das Verhalten, das Sie in Aktivität Nr. 1 gesehen haben, dem Demovideo, in dem die App einfach alles verwendet, was der Nutzer eingibt, ohne nach Spam zu suchen.

Im nächsten Codelab erfahren Sie, wie Sie in dieser App mithilfe eines Modells für maschinelles Lernen nach Spamkommentaren filtern.

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

5. Basic App für iOS erstellen

Die folgenden Schritte erfordern etwas Erfahrung mit Xcode und der iOS-Entwicklung mit Swift.

Wenn Sie die Erstellung nicht ausführen möchten, können Sie das Repository klonen und die Anwendung direkt öffnen. Es heißt TextClassificationStep1 und befindet sich im iOS-Ordner im Repository.

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

1. Erstellen Sie mit der Basisvorlage eine neue App:

2. Wählen Sie Optionen für Ihr neues Projekt aus. Geben Sie Ihrem Produkt einen Namen und eine Organisations-ID. Sie können eingeben, was Sie möchten, oder dem folgenden Beispiel folgen: (Stellen Sie jedoch sicher, dass Sie die Schnittstelle auf Storyboard und den Lebenszyklus auf UIKitApp Delegate setzen, wie dargestellt.)

6. Storyboard bearbeiten

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

3. Verwenden Sie dies, um ein TextView-Steuerelement, ein Button-Steuerelement und ein Label-Steuerelement auf der Designoberfläche zu platzieren. Die Ausgabe sollte ungefähr so aussehen:

4. Verwenden Sie den Assistenten, um eine Side-by-Side-Ansicht zu öffnen, in der sowohl das Storyboard als auch die ViewController.swift-Dateien geöffnet sind. Der Assistent ist ein kleines Symbol oben rechts auf dem Bildschirm:

1. Drücken Sie die STRG-Taste und ziehen Sie das TextView-Steuerelement auf die Code-Oberfläche. Beim Ziehen sollte ein blauer Pfeil zu sehen sein.
2. Drop auf dem Code direkt unter der Klassendeklaration. Es erscheint ein Pop-up, 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 diesen Schritt für das Label, ändern Sie den Verbindungstyp als Outlet und geben Sie ihm den Namen „txtOutput“.
5. Ziehen Sie die Schaltfläche zum Schluss, aber wählen Sie diesmal Aktion als Verbindungstyp aus. (Verwenden Sie nicht Outlet als Verbindungstyp.)
6. Nennen Sie die Aktion btnSendText.

Wenn Sie fertig sind, sollte Ihr Code am Anfang der Klasse wie folgt aussehen:

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

7. Codierung der einfachen iOS-App abschließen

Da in dieser Ansicht UITextView verwendet wird, muss sie ein UITextViewDelegate sein, um auf Ereignisse in dieser Ansicht reagieren zu können.

Ändern Sie dazu die Klassendeklaration so:

class ViewController: UIViewController, UITextViewDelegate {

Stellen Sie dann in der Funktion view DidLoad den Delegaten für UITextView (die Sie beim Einrichten des Outlets als txtInput bezeichnet haben) wie folgt auf diese Klasse ein:

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

Schließlich möchten Sie die Tastatur aus der Anzeige entfernen, nachdem der Nutzer die Eingabetaste auf der Tastatur drückt. Dies erfolgt über die soeben eingerichtete Delegierung. Sie können diese Methode auf dem 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 einfach. Wir geben einfach an, was der Nutzer eingibt. Sie werden später sehen, wie ein NLP-Modell diesen Text filtern kann. Jetzt verkabeln wir sie, um einen Passthrough zu simulieren.

Du hast bereits die Aktion „btnSendText“ erstellt. Jetzt musst du nur noch den Code hinzufügen:

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

8. Glückwunsch!

Du hast dieses Codelab jetzt abgeschlossen.

Als Nächstes erfahren Sie, wie Sie ein NLP-Modell erstellen, das Sie später in dieser App nutzen können, um damit den Text Ihrer Nutzer nach Spamkommentaren zu filtern.