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

1. Antes de comenzar

Este codelab es la actividad n.° 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 sencilla. 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 de la app.

Requisitos previos

• Conocimientos básicos sobre el desarrollo de Android con Kotlin y (opcionalmente) el desarrollo de iOS con Swift

Qué compilarás

• Una app de mensajería sencilla

Requisitos

• Para comenzar con Android, necesitarás Android Studio. Asegúrate de que esté instalado y completamente actualizado antes de continuar.
• Para iOS, necesitarás Xcode. Puedes encontrarlo en App Store. (Si solo quieres escribir la app para iOS, ve directamente al paso 5).

Obtener el código

Si no quieres seguir paso a paso y solo quieres ver el código final de esta ruta de aprendizaje, puedes encontrarlo en

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

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

2. Crea un proyecto nuevo en Android Studio

1. Inicia Android Studio.

1. Selecciona Create New Project. Verás un diálogo que 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 que el SDK mínimo sea API 23.
3. Haz clic en Finalizar. Una vez que lo hagas, Android Studio se abrirá con tu proyecto. Es posible que tarde 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 en Android Studio.

En la parte superior derecha de la pantalla, deberías ver una selección que tiene pestañas para Code, Split y Design, como esta:

Asegúrate de que esté seleccionado “Code” antes de pasar al siguiente paso.

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 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 en 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 abordar 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, la propiedad txtOutput.text se establezca en esa cadena.

Si sigues la ruta de aprendizaje Comienza a usar la clasificación de texto en dispositivos móviles, este es el comportamiento que viste en la actividad n.° 1, el video de demostración, en el que la app solo usará lo que escriba el usuario, sin verificar si hay spam.

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

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

5. Crea la app básica en iOS

En los siguientes pasos, se requiere cierta familiaridad con Xcode y el desarrollo de iOS con Swift.

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

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

1. Crea una app nueva 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. Edita 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 + en la parte superior de la ventana de Xcode.

3. Úsalo 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 en la parte 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. Suéltalo en el código justo debajo de la declaración de 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 Action como el tipo de conexión. (No uses Outlet como el tipo de conexión).
6. Nombra la acción btnSendText.

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. Termina de codificar 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.

Para obtenerlo, cambia la declaración de clase a lo siguiente:

class ViewController: UIViewController, UITextViewDelegate {

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

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

Por último, querrás quitar el teclado de la pantalla una vez que el usuario presione Intro en el teclado. Esto se realiza 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 escriba al resultado. 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 la acción btnSendText, por lo que ahora solo debes agregar el código a eso:

@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 esta app para equiparla para filtrar el texto de tu usuario en busca de spam de comentarios.