Cómo compilar una app básica con estilo de mensajería

1. Antes de comenzar

Este codelab es la actividad 2 de la ruta de aprendizaje Comienza a usar la clasificación de texto en dispositivos móviles.

En este codelab, compilarás una app de mensajería simple. Más adelante en la ruta de aprendizaje, actualizarás esta app con un modelo de aprendizaje automático que filtrará el spam no deseado de los mensajes en la app.

Requisitos previos

• Conocimientos básicos sobre el desarrollo de Android con Kotlin y, de manera opcional, sobre el desarrollo de iOS con Swift

Qué compilarás

• Una app de mensajería simple

Requisitos

• En el caso de Android, para comenzar, necesitarás Android Studio. Antes de continuar, asegúrate de que esté instalado y completamente actualizado.
• En iOS, necesitarás Xcode. Puedes encontrarla en App Store. (Si solo quieres escribir la app para iOS, ve directamente al paso 5.

Obtener el código

Si no quieres seguir los pasos uno por uno y solo quieres ver el código final de esta ruta, puedes encontrarlo en

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

Allí, busca el directorio TextClassificationOnMobile y, dentro de él, verás los subdirectorios de Android y iOS. Estos directorios contendrán subdirectorios de TextClassificationStep1, que contienen la app en Android y iOS, respectivamente.

2. Crea un proyecto nuevo en Android Studio

1. Inicia Android Studio.

1. Selecciona Crear proyecto nuevo. Verás un diálogo en el que se te pedirá que selecciones una plantilla de proyecto.
2. Selecciona Empty Activity y haz clic en Next. A continuación, se te pedirá que configures tu proyecto. Elige lo que quieras, pero asegúrate de que el lenguaje sea Kotlin y el SDK mínimo sea API 23.
3. Haz clic en Finalizar. Una vez que se complete este paso, se abrirá Android Studio con tu proyecto. Puede tardar unos minutos en realizar una sincronización de Gradle para asegurarse de que todo esté en orden, en especial si es la primera vez que usas Android Studio.

3. Crea la interfaz de usuario

La interfaz de usuario de una app para Android se crea con un archivo XML llamado archivo de diseño.

1. Abre el archivo. Haz clic en app > res > layout > activity_main.xml con el explorador de Android Studio.

En la parte superior derecha de la pantalla, deberías ver una selección con pestañas para Código, División y Diseño, como esta:

Antes de continuar con el siguiente paso, asegúrate de que esté seleccionada la opción "Código".

2. Reemplaza el código con este 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>

Esto te proporciona una interfaz de usuario básica que contiene un área de entrada con un TextView, que te solicita que ingreses una cadena y un EditText llamado txtInput que se puede usar para ingresar una cadena. Debajo, hay un TextView que renderizará el resultado y un botón que el usuario presionará para activar la clasificación.

El siguiente paso es escribir el código que activará esta interfaz de usuario.

4. Conecta los controles y crea la app

Para editar el código de esta actividad, busca el archivo de código de MainActivity.

1. En Android Studio, haz clic en app > java > MainActivity.

2. Abre el archivo MainActivity para acceder al editor de código. Reemplaza todo el contenido de este archivo excepto la primera línea que comienza con "package" por este código:

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

Este código conecta los controles del diseño a txtInput, txtOutput y btnSendText para que se puedan direccionar en el código. Luego, configura un OnClickListener para el botón, de modo que, cuando el usuario lo toque, se lea el texto de txtInput, se convierta en una cadena y, luego, se establezca la propiedad txtOutput.text en esa cadena.

Si estás siguiendo la ruta de aprendizaje de Introducción a la clasificación de texto para dispositivos móviles, este es el comportamiento que viste en la actividad 1, el video de demostración, en el que la app solo usará lo que escriba el usuario, sin verificar si se trata de spam.

En el siguiente codelab, verás cómo usar un modelo de aprendizaje automático en esta app para filtrar los comentarios spam.

Si quieres compilar la misma app en iOS, continúa con este codelab.

5. Crea la app básica en iOS

Los siguientes pasos requieren cierta familiaridad con Xcode y el desarrollo para iOS con Swift.

Si no quieres realizar el proceso de creación, puedes clonar el repo y abrir la app directamente. Se llama TextClassificationStep1 y se encuentra en la carpeta iOS del repo.

Para crear la app básica, comenzarás con Xcode.

1. Crea una nueva App con la plantilla básica:

2. Elige opciones para tu proyecto nuevo. Asigna un Nombre y un Identificador de organización a tu producto. Puedes escribir lo que quieras o seguir el ejemplo que se muestra a continuación (pero asegúrate de configurar la interfaz en Storyboard y el ciclo de vida en UIKitApp Delegate, como se muestra).

6. Cómo editar el guion gráfico

1. Abre Main.storyboard. Verás una superficie de diseño en la que puedes agregar controles.
2. Para agregar controles, haz clic en el botón + que se encuentra en la parte superior de la ventana de Xcode.

3. Usa esto para colocar un control TextView, un control Button y un control Label en la superficie de diseño. Debería verse algo similar a esto:

4. Usa el asistente para abrir una vista en paralelo con el guion gráfico y los archivos ViewController.swift abiertos. El asistente es un ícono pequeño que se encuentra en la esquina superior derecha de la pantalla, como se muestra aquí:

1. Presiona la tecla CONTROL y arrastra el control TextView a la superficie de código. Deberías ver una flecha azul mientras arrastras.
2. Suelta el código justo debajo de la declaración de la clase. Aparecerá una ventana emergente en la que se te preguntará el tipo de conexión. Debería verse algo similar a esto:

3. Selecciona Outlet y asígnale el nombre txtInput.
4. Haz lo mismo con la etiqueta, luego establece el tipo de conexión como Outlet y asígnale el nombre txtOutput.
5. Por último, arrastra el botón, pero esta vez selecciona Acción como el tipo de conexión. (No uses Outlet como el tipo de conexión).
6. Asigna el nombre btnSendText a la acción.

Cuando termines, el código en la parte superior de la clase debería verse así:

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

7. Finaliza la codificación de la app básica para iOS

Como esta vista usa un UITextView, para que responda a los eventos en esta vista, debe ser un UITextViewDelegate.

Puedes obtenerlo cambiando la declaración de la clase a lo siguiente:

class ViewController: UIViewController, UITextViewDelegate {

Luego, en la función viewDidLoad, configura el delegado para el UITextView (al que llamaste txtInput cuando configuraste la salida) en esta clase de la siguiente manera:

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

Por último, querrás controlar la eliminación del teclado de la pantalla una vez que el usuario presione Intro en el teclado. Esto se hace a través de la delegación que acabas de configurar, y puedes implementar este método en el ViewController para controlarlo.

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

En esta app, la acción del botón es trivial. Solo pasaremos lo que el usuario escribe a la salida. Más adelante, verás cómo un modelo de PNL puede filtrar este texto. Pero, por ahora, conectémoslo para simular un paso directo.

Ya creaste el botón de acción btnSendText, por lo que ahora solo debes agregarle el código:

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

8. ¡Felicitaciones!

Completaste este codelab.

A continuación, en la ruta de aprendizaje, aprenderás a crear un modelo de PNL, que luego volverás a usar en esta app para equiparla y filtrar el texto de los usuarios en busca de spam en los comentarios.