1. Antes de comenzar
Este codelab es la actividad n° 2 de la ruta de aprendizaje Comienza a usar la 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 filtrará el spam no deseado de los mensajes en 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
- En el caso de Android, necesitas Android Studio para comenzar. Asegúrate de que esté instalada y actualizada por completo antes de continuar.
- Para iOS, necesitarás Xcode. Puedes encontrarla en la App Store. (Si solo quieres escribir solo para la app para iOS, ve directamente al paso 5.
Obtener el código
Si no quieres seguir paso a paso y solo ver el código final de esta ruta de aprendizaje, se encuentra en
git clone https://github.com/googlecodelabs/odml-pathways
Aquí, busca el directorio TextClassificationOnMobile, y dentro de ellos, verás los subdirectorios Android y iOS. 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
- Inicia Android Studio.
- Selecciona Crear proyecto nuevo. Verás un diálogo que te pedirá que selecciones una plantilla del proyecto.
- 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 el nivel de API 23.
- Haz clic en Finalizar. Cuando termines, se abrirá Android Studio con tu proyecto. Es posible que la sincronización de Gradle tarde unos minutos en garantizar que todo esté en orden, especialmente si es la primera vez que usas Android Studio.
3. Cómo crear la interfaz de usuario
La interfaz de usuario de una app para Android se crea con un archivo en formato XML llamado archivo de diseño.
- 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 con las pestañas Código, División y Diseño, como esta:
Asegúrate de que la opción "Code" antes de continuar con el paso siguiente.
- 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>
De esta manera, obtendrás una interfaz de usuario básica que contiene un área de entrada con un TextView, y se te pedirá que escribas Enter a String y un EditText llamado txtInput que se puede usar para ingresar una cadena. Debajo, hay una 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
Puedes editar el código de esta actividad si buscas el archivo de código MainActivity.
- En Android Studio, haz clic en app > java > MainActivity.
- 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 puedan abordarse en el código. Luego, configura un OnClickListener para el botón de modo que, cuando el usuario lo toque, el texto de txtInput se lea, se convierta en una cadena y, luego, se establezca la propiedad txtOutput.text en esa cadena.
5. Crea la app de Basic en iOS
Para los siguientes pasos, debes estar familiarizado con el desarrollo de Xcode y 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 repositorio.
Para crear la app básica, comenzarás con Xcode.
- Crea una App nueva con la plantilla básica:
- Elige opciones para tu proyecto nuevo. Asígnale 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 (sin embargo, asegúrate de configurar la interfaz en Storyboard y el ciclo de vida en UIKitApp Delegate, como se muestra).
6. Editar el guión gráfico
- Abre Main.storyboard. Verás una superficie de diseño en la que puedes agregar controles.
- Para agregar controles, haz clic en el botón + de la parte superior de la ventana de Xcode.
- Ú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:
- Usa el asistente para abrir una vista en paralelo con el guion gráfico y los archivos ViewController.swift abiertos. El asistente es un pequeño ícono que se encuentra en la esquina superior derecha de la pantalla, como se muestra a continuación:
- Presiona la tecla CONTROL y arrastra el control TextView hasta la superficie de código. Deberías ver una flecha azul a medida que arrastras.
- Coloca 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:
- Selecciona Salida y asígnale el nombre txtInput.
- Haz lo mismo con la etiqueta, luego establece el tipo de conexión como Outlet y asígnale el nombre txtOutput.
- Finalmente, arrastra el botón, pero esta vez selecciona Action como el tipo de conexión. (no uses Outlet como el tipo de conexión).
- Asigna el nombre btnSendText a la acción.
Cuando termines, tu código en la parte superior de la clase debería verse de la siguiente manera:
@IBOutlet weak var txtInput: UITextView!
@IBOutlet weak var txtOutput: UILabel!
@IBAction func btnSendText(_ sender: Any) {
}
7. Termina de programar la app básica para iOS
Como esta vista usa un objeto UITextView, para que responda a eventos en esta vista, debe ser un elemento UITextViewDelegate.
Para obtener esto, cambia la declaración de clase a lo siguiente:
class ViewController: UIViewController, UITextViewDelegate {
Luego, en la función viewReadyLoad, establece el delegado para la UITextView (al que llamaste txtInput cuando configuraste el tomacorriente) a esta clase de la siguiente manera:
override func viewDidLoad() {
super.viewDidLoad()
txtInput.delegate = self
}
Por último, debes controlar la eliminación del teclado de la pantalla una vez que el usuario presione Intro en el teclado. Esto se hace mediante 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
}
Para esta app, la acción del botón es trivial, solo pasaremos lo que el usuario escriba en el resultado. Más adelante, verás cómo un modelo de PLN puede filtrar este texto. Sin embargo, por ahora, cableémoslo para simular una transferencia.
Ya creaste la acción btnSendText, así 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 PLN, que luego llevarás a esta app para que la equipe y filtre el texto de tu usuario en busca de comentarios spam.