Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Android SDK
Code

Programación reactiva de Kotlin para una pantalla de registro de Android

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Programación reactiva de Kotlin para una pantalla de registro de AndroidRxJava 2.0 es una popular biblioteca de programación reactiva que ha ayudado a innumerables desarrolladores de Android a crear aplicaciones altamente receptivas, utilizando menos código y menos complejidad, especialmente cuando se trata de administrar múltiples hilos.

Si es uno de los muchos desarrolladores que han hecho el cambio a Kotlin, ¡no significa que deba renunciar a RxJava!

En la primera parte de esta serie, le mostré cómo pasar de la programación con RxJava 2.0 en Java a la programación con RxJava en Kotlin. También vimos cómo desterrar los estándares de sus proyectos al aprovechar las funciones de extensión de RxKotlin y el secreto para evitar el problema de conversión de SAM que muchos desarrolladores encuentran cuando comienzan a utilizar RxJava 2.0 con Kotlin.

En esta segunda entrega, nos concentraremos en cómo RxJava puede ayudar a resolver los problemas que encontrará en los proyectos reales de Android, mediante la creación de una aplicación reactiva de Android utilizando RxJava 2.0, RxAndroid y RxBinding.

¿Cómo puedo usar RxJava en proyectos del mundo real?

En nuestro artículo Programacion Reactiva con RxJava y RxKotlin, creamos algunos Observables y Observers simples que imprimen datos en el Logcat de Android Studio, pero esta no es la forma en que utilizará RxJava en el mundo real.

En este artículo, voy a mostrarte cómo usar RxJava para crear una pantalla que se usa en innumerables aplicaciones de Android: la clásica pantalla de registro.

A typical Sign Up screen that youll find in countless Android applications

Si su aplicación tiene algún tipo de experiencia de suscripción, normalmente tendrá reglas estrictas sobre el tipo de información que acepta. Por ejemplo, tal vez la contraseña deba exceder una cierta cantidad de caracteres, o la dirección de correo electrónico debe estar en un formato de correo electrónico válido.

Si bien puede verificar la entrada del usuario una vez que presiona el botón Sign Up, esta no es la mejor experiencia de usuario, ya que los deja abiertos para enviar información que claramente nunca será aceptada por su aplicación.

Es mucho mejor monitorear al usuario a medida que escribe, y luego avisarle tan pronto como quede claro que está ingresando información que no cumple con los requisitos de su aplicación. Al proporcionar este tipo de comentarios en vivo y en curso, le da al usuario la oportunidad de corregir sus errores antes de presionar ese botón Sign Up.

Si bien puede monitorear la actividad de los usuarios utilizando vanot Kotlin, podemos ofrecer esta funcionalidad utilizando mucho menos código al contar con la ayuda de RxJava, además de algunas otras bibliotecas relacionadas.

Creando la interfaz de usuario

Comencemos construyendo nuestra interfaz de usuario. Voy a agregar lo siguiente:

  • Dos EditTexts, donde el usuario puede ingresar su dirección de correo electrónico (enterEmail) y contraseña (enterPassword).
  • Dos contenedores TextInputLayout, que rodearán nuestro enterEmail y enterPassword EditTexts. Estos contenedores mostrarán una advertencia cada vez que el usuario ingrese una dirección de correo electrónico o una contraseña que no cumpla con los requisitos de nuestra aplicación.
  • Un botón de visibilidad de contraseña, que permite al usuario alternar entre enmascarar la contraseña y verla como texto sin formato.
  • Un botón Sign up. Para ayudar a mantener este ejemplo centrado en RxJava, no implementaré esta parte de la experiencia de registro, por lo que marcaré este botón como deshabilitado.

Aquí está mi diseño terminado:

Si lo desea, puede copiar / pegar esto en su aplicación, o simplemente puede descargar el código fuente del proyecto desde nuestro repositorio de GitHub.

Creación de una experiencia de inicio de sesión reactiva con Kotlin

Ahora veamos cómo podemos usar RxJava, más algunas bibliotecas relacionadas, para monitorear las opiniones de los usuarios y proporcionar comentarios en tiempo real.

Abordaré la pantalla Sign Up en dos partes. En la primera sección, te mostraré cómo usar la biblioteca RxBinding para registrarte y responder a eventos de cambio de texto. En la segunda sección, crearemos algunas funciones de transformación que validan la entrada del usuario y luego mostraremos un mensaje de error cuando corresponda.

Cree un nuevo proyecto con la configuración de su elección, pero cuando se le solicite, asegúrese de seleccionar la casilla de verificación Include Kotlin Support.

Respondiendo a eventos de cambio de texto

En esta sección, implementaremos la siguiente funcionalidad:

  • Detectar cuando el usuario está escribiendo en el campo enterEmail.
  • Ignore todos los eventos de cambio de texto que ocurren dentro de un corto espacio de tiempo, ya que esto indica que el usuario todavía está escribiendo.
  • Realice una acción cuando el usuario deje de escribir. En nuestra aplicación terminada, aquí es donde validaremos la entrada del usuario, pero en esta sección solo mostraré un Toast.

1. RxBinding

RxBinding es una biblioteca que facilita la conversión de una amplia gama de eventos de IU en Observables, en cuyo punto puede tratarlos como cualquier otro flujo de datos RxJava.

Vamos a monitorear los eventos de cambio de texto, combinando el widget.RxTextView con el método afterTextChangeEvents, por ejemplo:

El problema con tratar los eventos de cambio de texto como flujos de datos es que inicialmente tanto enterEmail como enterPassword EditTexts estarán vacíos, y no queremos que nuestra aplicación reaccione a este estado vacío como si fuera la primera emisión de datos en el flujo. RxBinding resuelve este problema al proporcionar un método skipInitialValue(), que usaremos para indicar a cada observador que ignore el valor inicial de su flujo.

Miro la biblioteca RxBinding con mayor detalle en mi artículo de RxJava 2 para aplicaciones de Android.

2. Operador de .debounce() de RxJava

Para ofrecer la mejor experiencia al usuario, debemos mostrar cualquier contraseña o advertencia de correo electrónico relevante después de que el usuario haya terminado de escribir, pero antes de que presionen el botón Sign Up.

Sin RxJava, la identificación de esta estrecha ventana de tiempo normalmente nos requeriría implementar un Timer, pero en RxJava solo necesitamos aplicar el operador debounce() a nuestro flujo de datos.

Voy a utilizar el operador debounce() para filtrar todos los eventos de cambio de texto que ocurren en sucesión rápida, es decir, cuando el usuario aún está escribiendo. Aquí, ignoramos todos los eventos de cambio de texto que ocurren dentro de la misma ventana de 400 milisegundos:

3. AndroidSchedulers.mainThread() de RxAndroid ()

El archivo AndroidSchedulers.mainThread de la biblioteca RxAndroid nos brinda una manera fácil de cambiar a la principal hebra de interfaz de usuario principal de Android.

Dado que solo es posible actualizar la interfaz de usuario de Android desde el hilo principal de la IU, debemos asegurarnos de estar en este hilo antes de intentar mostrar cualquier advertencia de correo electrónico o contraseña, y antes de mostrar nuestro Toast.

4. Suscribir

Para recibir los datos que emite enterEmail, debemos suscribirnos a ellos:

5. Mostrar Toast

Eventualmente, queremos que nuestra aplicación responda a los eventos de cambio de texto validando la entrada del usuario, pero para ayudar a mantener las cosas claras, en este punto simplemente voy a mostrar un Toast.

Su código debe verse algo como esto:

6. Actualice sus dependencias

Dado que estamos utilizando algunas bibliotecas diferentes, debemos abrir el archivo build.gradle de nuestro proyecto y agregar RxJava, RxBinding y RxAndroid como dependencias de proyectos:

Puede probar esta parte de su proyecto instalándola en su teléfono o tableta física Android o dispositivo virtual Android (AVD). Seleccione enterEmail EditText y comience a escribir; Debe aparecer Toast cuando dejes de escribir.

Test your projects enterEmail EditText

Validación de la entrada del usuario con funciones de transformación

A continuación, debemos establecer algunas reglas básicas sobre el tipo de entrada que nuestra aplicación aceptará, y luego verificar la entrada del usuario con este criterio y mostrar un mensaje de error cuando corresponda.

Verificar el correo electrónico o la contraseña del usuario es un proceso de varios pasos, de modo que para que nuestro código sea más fácil de leer, voy a combinar todos estos pasos en su propia función de transformación.

Aquí está el inicio de la función de transformación validateEmail:

En el código anterior, estamos usando el operador de filter() para filtrar la salida del Observable en función de si coincide con el patrón de Patterns.EMAIL_ADDRESS de Android.

En la siguiente parte de la función de transformación, debemos especificar qué sucede si la entrada no coincide con el patrón EMAIL_ADDRESS. De forma predeterminada, cada error irrecuperable activará una llamada a onError(), que termina la secuencia de datos. En lugar de finalizar la transmisión, queremos que nuestra aplicación muestre un mensaje de error, así que usaré onErrorResumeNext, que indica al observable que responda a un error al pasar el control a un nuevo observable, en lugar de invocar a onError(). Esto nos permite mostrar nuestro mensaje de error personalizado.

El último paso es aplicar esta función de transformación al flujo de datos de correo electrónico, utilizando el operador .compose(). En este punto, su MainActivity.kt debería verse así:

Instale este proyecto en su dispositivo Android o AVD, y verá que la porción de correo electrónico de la pantalla de Sign Up ahora está verificando su entrada con éxito. Intenta ingresar cualquier cosa que no sea una dirección de correo electrónico, y la aplicación te advertirá que esta no es una entrada válida.

Enter anything other than a valid email address and the app will display a warning message

Enjuagar y repetir: verificar la contraseña del usuario

En este punto, tenemos un campo enterEmail en pleno funcionamiento, y la implementación de enterPassword es solo un caso de repetir los mismos pasos.

De hecho, la única diferencia importante es que nuestra función transformation validatePassword necesita verificar diferentes criterios. Voy a especificar que la entrada de contraseña del usuario debe tener al menos 7 caracteres de longitud:

Después de repetir todos los pasos anteriores, el MainActivity.kt completo debe verse más o menos así:

Instale este proyecto en su dispositivo Android o AVD, y experimente con tipear en los campos enterEmail y enterPassword. Si ingresa un valor que no cumple con los requisitos de la aplicación, entonces se mostrará el mensaje de advertencia correspondiente, sin que tenga que tocar el botón Sign Up.

Puede descargar este proyecto completo de GitHub.

Conclusión

En este artículo, analizamos cómo RxJava puede ayudar a resolver los problemas del mundo real que encontrará al desarrollar sus propias aplicaciones de Android, utilizando RxJava 2.0, RxBinding y RxAndroid para crear una pantalla Sign Up.

Para obtener más información general sobre la biblioteca RxJava, asegúrese de revisar nuestro artículo Comenzar con RxJava 2.0.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.