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 sui dispositivi mobili.

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 di Android con Kotlin e (facoltativamente) dello sviluppo di iOS con Swift

Che cosa creerai

• Una semplice app di messaggistica

Che cosa ti serve

• Per iniziare con Android, avrai bisogno di Android Studio. Assicurati che sia installato e completamente aggiornato prima di continuare.
• Per iOS, avrai bisogno di 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 passo passo 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 troverai le sottodirectory Android e iOS. Queste directory conterranno le sottodirectory TextClassificationStep1, che contengono rispettivamente l'app su Android e iOS.

2. Crea un nuovo progetto in Android Studio

1. Avvia Android Studio.

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

3. Crea l'interfaccia utente

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

1. Apri il file. Fai clic su app > res > layout > activity_main.xml utilizzando l'explorer in Android Studio.

In alto a destra nella schermata, dovresti vedere una selezione con le schede Codice, Dividi e Progetta, come questa:

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

2. 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, avrai 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 è presente un TextView che eseguirà il rendering dell'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 per questa attività trovando il file di codice MainActivity.

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

2. 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 del 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.

Se stai seguendo il percorso Inizia a utilizzare la classificazione del testo sui dispositivi mobili, questo è il comportamento che hai visto nell'attività n. 1, il video demo, in cui l'app utilizzerà semplicemente ciò che l'utente digita, senza verificare la presenza di spam.

Nel prossimo codelab, vedrai come utilizzare un modello di machine learning in questa app per filtrare i commenti spam.

Se vuoi creare la stessa app su iOS, continua con questo codelab.

5. Crea l'app di base su iOS

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

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

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

1. Crea una nuova app utilizzando il modello di base:

2. Scegli le opzioni per il nuovo progetto. Assegna al prodotto un nome e un identificatore dell'organizzazione. Puoi digitare quello che preferisci o seguire l'esempio riportato di seguito: (ma assicurati di impostare l'interfaccia su Storyboard e il ciclo di vita su UIKitApp Delegate, come mostrato).

6. Modifica lo storyboard

1. Apri Main.storyboard. Vedrai una superficie di progettazione su cui puoi aggiungere i controlli.
2. Per aggiungere i controlli, fai clic sul pulsante + nella parte superiore della finestra di Xcode.

3. Utilizzalo per inserire un controllo TextView, un controllo Button e un controllo Label sulla superficie di progettazione. Il sito dovrebbe avere il seguente aspetto:

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

1. Premi il tasto CTRL e trascina il controllo TextView sulla superficie del codice. Durante il trascinamento, dovresti vedere una freccia blu.
2. Rilascia 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:

3. Seleziona Outlet e assegnagli il nome txtInput.
4. Fai la stessa cosa per l'etichetta, poi imposta il tipo di connessione su Outlet e assegnagli il nome txtOutput.
5. Infine, trascina il pulsante, ma questa volta seleziona Azione come tipo di connessione. (Non utilizzare Outlet come tipo di connessione.)
6. Assegna all'azione il nome btnSendText.

Al termine, il codice nella parte superiore della classe dovrebbe avere il seguente aspetto:

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

7. Completa la codifica dell'app iOS di base

Poiché questa visualizzazione utilizza un UITextView, per far sì che risponda agli eventi in questa visualizzazione, deve essere un UITextViewDelegate.

Puoi ottenere questo risultato modificando la dichiarazione della classe in questo modo:

class ViewController: UIViewController, UITextViewDelegate {

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

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

Infine, vuoi 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 in 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, passeremo 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 correttamente questo codelab.

Nel passaggio successivo del percorso, imparerai a creare un modello NLP, che in seguito riporterai in questa app per dotarla della funzionalità di filtro del testo dell'utente per i commenti spam.