Crea un'app con stile di messaggistica base

1. Prima di iniziare

Questo codelab è l'attività n. 2 del percorso Inizia a utilizzare la classificazione del testo mobile.

In questo codelab creerai una semplice app di messaggistica. Più avanti nel percorso, aggiornerai questa app con un modello di machine learning che filtrerà lo spam indesiderato dai messaggi dell'app.

Prerequisiti

Una conoscenza di base dello sviluppo per Android con Kotlin e (facoltativamente) dello sviluppo per iOS con Swift

Cosa creerai

Un'app di messaggistica semplice

Che cosa ti serve

Per iniziare con Android, avrai bisogno di Android Studio. Prima di continuare, assicurati che sia installato e completamente aggiornato.
Per iOS, è necessario Xcode. Puoi trovarlo nell'App Store. Se vuoi scrivere solo l'app per iOS, vai direttamente al passaggio 5.

Richiedi il codice

Se non vuoi seguire i passaggi uno per uno e vuoi solo vedere il codice finale per questo percorso, lo trovi qui:

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

Qui, trova la directory TextClassificationOnMobile e al suo interno vedrai le sottodirectory Android e iOS. Queste directory conterranno sottodirectory TextClassificationStep1, che contengono l'app su Android e iOS rispettivamente.

2. Creare un nuovo progetto in Android Studio

Avvia Android Studio.

Seleziona Crea nuovo progetto. Viene visualizzata una finestra di dialogo che ti chiede di selezionare un modello di progetto.
Seleziona Attività vuota e fai clic su Avanti. Ti verrà quindi chiesto di configurare il progetto. Scegli quello che preferisci, ma assicurati che il linguaggio sia Kotlin e che l'SDK minima sia API 23.
Fai clic su Fine. Al termine, Android Studio si aprirà con il tuo progetto. Potrebbe essere necessario qualche istante per eseguire la sincronizzazione di Gradle e assicurarsi che tutto sia in ordine, soprattutto se è la prima volta che utilizzi Android Studio.

3. Creare l'interfaccia utente

L'interfaccia utente di un'app per Android viene creata utilizzando un file XML chiamato file di layout.

Apri il file. Fai clic su app > res > layout > activity_main.xml utilizzando Explorer in Android Studio.

Nella parte in alto a destra dello schermo, dovresti vedere una selezione con le schede Codice, Divisione e Progettazione, come questa:

Assicurati che sia selezionato "Codice" prima di passare al passaggio successivo.

Sostituisci il codice con questo 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>

In questo modo, viene visualizzata un'interfaccia utente di base contenente un'area di input con un TextView, che ti chiede di inserire una stringa e un EditText chiamato txtInput che può essere utilizzato per inserire una stringa. Sotto si trova un TextView che visualizzerà l'output e un pulsante che l'utente premerà per attivare la classificazione.

Il passaggio successivo consiste nello scrivere il codice che attiverà questa interfaccia utente.

4. Collega i controlli e crea l'app

Puoi modificare il codice di questa attività trovando il file di codice MainActivity.

In Android Studio, fai clic su app > java > MainActivity.

Apri il file MainActivity per accedere all'editor di codice. Sostituisci tutto il contenuto di questo file tranne la prima riga che inizia con "package" con questo codice:

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

Questo codice collega i controlli nel layout a txtInput, txtOutput e btnSendText in modo che possano essere indirizzati nel codice. Poi, configura un OnClickListener per il pulsante, in modo che quando l'utente lo tocca, il testo di txtInput venga letto, convertito in una stringa e poi la proprietà txtOutput.text venga impostata su quella stringa.

5. Creare l'app di base su iOS

I passaggi seguenti richiedono una certa familiarità con Xcode e lo sviluppo iOS con Swift.

Se non vuoi eseguire la procedura di creazione, puoi clonare il repository e aprire l'app direttamente. Si chiama TextClassificationStep1 e si trova nella cartella iOS del repository.

Per creare l'app di base, inizierai con Xcode.

Crea una nuova app utilizzando il modello di base:

Scegli le opzioni per il nuovo progetto. Assegna al prodotto un nome e un identificatore dell'organizzazione. Puoi digitare quello che vuoi o seguire l'esempio riportato di seguito. Assicurati però di impostare l'interfaccia su Storyboard e il ciclo di vita su Delegato di UIKitApp, come mostrato.

6. Modificare lo storyboard

Apri Main.storyboard. Verrà visualizzata una superficie di progettazione su cui puoi aggiungere controlli.
Per aggiungere controlli, fai clic sul pulsante + nella parte superiore della finestra di Xcode.

Utilizza questo controllo per posizionare un controllo TextView, un controllo Button e un controllo Label sulla superficie di progettazione. Il sito dovrebbe avere il seguente aspetto:

Utilizza l'assistente per aprire una visualizzazione affiancata con lo storyboard e i file ViewController.swift aperti. L'assistente è una piccola icona in alto a destra dello schermo, come mostrato qui:

Premi il tasto CTRL e trascina il controllo TextView sulla superficie del codice. Dovresti vedere una freccia blu mentre trascini.
Trascina il codice appena sotto la dichiarazione della classe. Verrà visualizzato un popup che ti chiede il tipo di connessione. Il sito dovrebbe avere il seguente aspetto:

Seleziona Uscita e assegnagli il nome txtInput.
Fai lo stesso per l'etichetta, quindi imposta il tipo di connessione su Uscita e assegnale il nome txtOutput.
Infine, trascina il pulsante, ma questa volta seleziona Azione come tipo di connessione. Non utilizzare Presa come tipo di connessione.
Assegna all'azione il nome btnSendText.

Al termine, il codice nella parte superiore della classe dovrebbe essere simile al seguente:

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

7. Completa la programmazione dell'app per iOS di base

Poiché questa visualizzazione utilizza un UITextView, per rispondere agli eventi in questa visualizzazione, deve essere un UITextViewDelegate.

Puoi ottenerlo modificando la dichiarazione della classe in questo modo:

class ViewController: UIViewController, UITextViewDelegate {

Quindi, nella funzione viewDidLoad, imposta il delegato per UITextView (che hai chiamato txtInput quando hai configurato l'outlet) su questa classe nel seguente modo:

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

Infine, devi gestire la rimozione della tastiera dalla visualizzazione quando l'utente preme Invio sulla tastiera. Questa operazione viene eseguita tramite la delega appena configurata e puoi implementare questo metodo nel ViewController per gestirlo.

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

Per questa app, l'azione del pulsante è banale: trasmetteremo semplicemente ciò che l'utente digita all'output. Più avanti vedrai come un modello NLP può filtrare questo testo. Per ora, però, colleghiamolo per simulare un passthrough.

Hai già creato l'azione btnSendText, quindi ora devi solo aggiungere il codice:

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

8. Complimenti!

Hai completato questo codelab.

Nella fase successiva del percorso, imparerai a creare un modello NLP, che in seguito riporterai in questa app per dotarla della capacità di filtrare il testo degli utenti alla ricerca di commenti spam.