Cómo crear una app básica de estilo de mensajes

1. Antes de comenzar

Este codelab es la actividad n.o 2 de la ruta de clasificación de texto para 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 filtra 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, desarrollo de iOS con Swift

Qué crearás

• Una app de mensajería sencilla

Requisitos

• Para comenzar, necesitarás Android Studio. Asegúrate de que se haya instalado y actualizado por completo 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.

Obtén el código

Si no quieres seguir la guía paso a paso y ver el código final de esta ruta, puedes hacerlo en

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

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

2. Cómo crear un proyecto nuevo en Android Studio

1. Inicia Android Studio.

1. Selecciona Create New Project. Verá un diálogo que le solicitará que seleccione 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 la versión mínima del SDK sea API 23.
3. Haz clic en Finish. Una vez que lo hagas, Android Studio se abrirá con tu proyecto. La sincronización de Gradle puede tardar unos minutos en garantizar que todo esté en orden, sobre todo 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 en formato XML denominado archivo de diseño.

1. Abra el archivo. En Android Studio, haz clic en app > res > layout > activity_main.xml.

En la parte superior derecha de la pantalla, deberías ver una selección con pestañas para Code, Split y Design de la siguiente manera:

Asegúrate de que esté seleccionada la opción "Código" antes de continuar con el 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 le proporciona una interfaz de usuario básica que contiene un área de entrada con una TextView, en la que se le solicita que ingrese una string y un EditText llamado txtInput que se puede usar a fin de ingresar una string. Debajo, hay un elemento 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. Reemplace todo en este archivo, excepto la primera línea que comienza con "package" por el siguiente 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 a fin de que se pueda abordar en ellos. Luego, configura un elemento OnClickListener para el botón a fin de que, cuando el usuario lo toque, se lea el texto de txtInput, se lo convierta en una string y, luego, se configure la propiedad txtOutput.text en ese elemento. string.

Si estás siguiendo la ruta de introducción a la clasificación de texto móvil, este es el comportamiento que viste en la actividad n.o 1, el video de demostración en el que la app solo usa lo que el usuario escribe, sin comprobar si es 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 deseas compilar la misma app en iOS, continúa con este codelab.

5. Crea la app de Basic en iOS

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

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

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

1. Cree una nueva aplicación con la plantilla básica:

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

6. Edita el guion

1. Abre Main.storyboard. Verás una superficie de diseño en la que podrás 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 a la superficie de diseño. Debería verse algo similar a esto:

4. Usa el asistente para abrir una vista en paralelo con el storyboard y los archivos ViewController.swift. Asistente es un ícono pequeño ubicado en la parte superior derecha de la pantalla, como se muestra a continuación:

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. Coloca el código en la parte inferior 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. Haga lo mismo para la etiqueta, elija el tipo de conexión Outlet y asígnele el nombre txtOutput.
5. Por último, arrastra el botón sobre él, pero esta vez selecciona Action como el tipo de conexión. (No uses Outlet como tipo de conexión).
6. Asígnele 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. Termina de codificar la app para iOS básica

Como esta vista usa un elemento UITextView, para que pueda responder a eventos de esta vista, debe ser un UITextViewDelegate.

Para ello, cambia la declaración de clase de la siguiente manera:

class ViewController: UIViewController, UITextViewDelegate {

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

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

Por último, quieres eliminar el teclado de la pantalla una vez que el usuario presiona Intro. Esto se hace mediante la delegación que acaba de configurar y puede 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
}

Para 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 PLN puede filtrar este texto. Por ahora, solo hagamos la conexión con el dispositivo a fin de simular la transferencia.

Ya creó la acción btnSendText, por lo que ahora solo debe agregar el siguiente código:

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

8. ¡Felicitaciones!

¡Ya completaste este codelab!

A continuación, aprenderás a crear un modelo de PLN, que luego volverás a esta app para equiparlo a fin de filtrar el texto del usuario y detectar comentarios spam.