1. Prima di iniziare
Questo codelab è l'attività 2 del percorso Inizia a utilizzare la classificazione del testo per dispositivi mobili.
In questo codelab, creerai una semplice app di messaggistica. Più avanti nel percorso, aggiorneremo questa app con un modello di machine learning che filtrerà lo spam indesiderato dai messaggi nell'app.
Prerequisiti
- Una conoscenza di base dello sviluppo Android con Kotlin e, facoltativamente, di iOS con Swift
Cosa creerai
- Una semplice app di messaggistica
Che cosa ti serve
- Per iniziare, ti serve Android Studio. Prima di continuare, assicurati che l'app sia installata e completamente aggiornata.
- Per iOS, avrai bisogno di Xcode. Puoi trovarla nell'App Store. Se desideri scrivere solo l'app per iOS, vai direttamente al passaggio 5.
Richiedi il codice
Se non vuoi seguire la procedura passo passo e vedere solo il codice finale di questo percorso, vai su
git clone https://github.com/googlecodelabs/odml-pathways
Qui, trova la directory TextClassificationOnMobile, all'interno della quale troverai le directory secondarie di Android e iOS. Queste directory conterranno le directory secondarie TextClassificationStep1, che contengono l'app rispettivamente su Android e iOS.
2. Creare un nuovo progetto in Android Studio
- Avvia Android Studio.
- Seleziona Crea nuovo progetto. Vedrai una finestra di dialogo che ti chiede di selezionare un modello di progetto.
- Seleziona Attività vuota e fai clic su Avanti. Ti verrà poi chiesto di configurare il progetto. Scegli la lingua che preferisci, ma assicurati che la lingua sia Kotlin e che l'SDK minimo sia API 23.
- Fai clic su Fine. Al termine, si aprirà Android Studio con il tuo progetto. L'esecuzione della sincronizzazione graduale per assicurarsi che tutto sia in ordine, soprattutto se è la prima volta che utilizzi Android Studio, potrebbe richiedere qualche istante.
3. Crea 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 l'Explorer in Android Studio.
Nella parte in alto a destra dello schermo, dovresti vedere una selezione con schede per Codice, Dividi e Design, come questa:
Assicurati che il comando "Code" sia selezionata prima di andare 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>
Questo ti offre un'interfaccia utente di base contenente un'area di input con una visualizzazione di testo, che ti chiede di inserire una stringa e un valore di modifica EditText denominato txtInput che può essere utilizzato per inserire una stringa. Sotto ci sono un TextView che esegue il rendering dell'output e un pulsante che l'utente deve premere per attivare la classificazione.
Il passaggio successivo consiste nello scrivere il codice che attiverà l'interfaccia utente.
4. Collega i controlli e crea l'app
Puoi modificare il codice per questa attività cercando 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 tutti i contenuti 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 gestiti nel codice. Successivamente, configura un OnClickListener per il pulsante, in modo che, quando l'utente lo tocca, il testo di txtInput venga letto e convertito in una stringa e la proprietà txtOutput.text venga impostata su quella stringa.
5. Crea l'app Basic su iOS
I passaggi seguenti richiedono una certa familiarità con Xcode e lo sviluppo di iOS con Swift.
Se non vuoi eseguire il processo 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, 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 ciò che vuoi o seguire l'esempio seguente: (ma assicurati di impostare l'interfaccia su Storyboard e il ciclo di vita su UIKitApp Delega, come mostrato).
6. Modifica lo storyboard
- Apri Main.storyboard. Viene visualizzata una superficie di progettazione su cui puoi aggiungere i controlli.
- Per aggiungere controlli, fai clic sul pulsante + nella parte superiore della finestra Xcode.
- Utilizzalo per posizionare un controllo TextView, un controllo Pulsante e un controllo Etichetta nell'area 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 entrambi aperti. L'assistente è una piccola icona in alto a destra dello schermo, come mostrato qui:
- Premi il tasto CONTROL e trascina il controllo TextView nell'area del codice. Mentre trascini dovresti vedere una freccia blu.
- Inserisci il codice appena sotto la dichiarazione del corso. Verrà visualizzato un popup in cui viene chiesto il tipo di connessione. Il sito dovrebbe avere il seguente aspetto:
- Seleziona Presa e assegnagli il nome txtInput.
- Fai lo stesso per l'etichetta, quindi imposta il tipo di connessione Outlet e assegnagli 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.
Quando hai finito, il tuo codice nella parte superiore del corso dovrebbe avere questo aspetto:
@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 vista utilizza un'entità UITextView, per poter rispondere agli eventi in questa vista, deve essere un UITextViewDelegate.
Puoi ottenerlo modificando la dichiarazione della classe in questa:
class ViewController: UIViewController, UITextViewDelegate {
Quindi, nella funzione viewDidLoad, imposta il delegato per la UITextView (che hai chiamato txtInput quando hai configurato la presa) su questa classe in questo modo:
override func viewDidLoad() {
super.viewDidLoad()
txtInput.delegate = self
}
Infine puoi gestire la rimozione della tastiera dal display dopo che l'utente preme Invio sulla tastiera. Per farlo, devi usare la delega appena impostata, che puoi implementare 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 nell'output. Più avanti vedremo come un modello NLP può filtrare questo testo. Ma per ora, 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.
Nel percorso successivo imparerai a creare un modello NLP, che in seguito riporterai in questa app per poter filtrare il testo degli utenti in cerca di commenti spam.