Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Programmation réactive Kotlin pour un écran d'inscription Android

by
Difficulty:IntermediateLength:LongLanguages:

French (Français) translation by honeymmmm (you can also view the original English article)

RxJava 2.0 est une bibliothèque de programmation réactive populaire qui a aidé d’innombrables développeurs Android à créer des applications hautement réactives, en utilisant moins de code et moins de complexité, en particulier pour la gestion de plusieurs threads.

Si vous êtes l’un des nombreux développeurs à avoir opté pour Kotlin, cela ne signifie pas que vous devez abandonner RxJava!

Dans la première partie de cette série, je vous ai montré comment passer de la programmation avec RxJava 2.0 en Java à la programmation avec RxJava dans Kotlin. Nous avons également examiné la façon de bannir le passe-partout de vos projets en tirant parti des fonctions d’extension de RxKotlin et le secret pour éviter le problème de conversion SAM rencontré par de nombreux développeurs lorsqu'ils utilisent RxJava 2.0 avec Kotlin.

Dans cette seconde partie, nous allons nous concentrer sur la manière dont RxJava peut vous aider à résoudre les problèmes que vous rencontrez dans les projets Android réels, en créant une application Android réactive utilisant RxJava 2.0, RxAndroid et RxBinding.

Comment utiliser RxJava dans des projets réels?

Dans notre article Programmation réactive avec RxJava et RxKotlin, nous avons créé des simples Observables et Observers qui impriment des données dans Logcat d'Android Studio, mais ce n'est pas comme cela que vous utiliserez RxJava dans le monde réel.

Dans cet article, je vais vous montrer comment utiliser RxJava pour créer un écran utilisé dans d’innombrables applications Android: l’écran classique Sign Up.

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

Si votre application possède une expérience d’inscription, elle doit généralement respecter des règles strictes concernant le type d’informations qu’elle accepte. Par exemple, le mot de passe doit peut-être dépasser un certain nombre de caractères ou l'adresse électronique doit être au format de courrier électronique valide.

Même si vous pouvez vérifier l’entrée de l’utilisateur une fois qu’ils ont cliqué sur le bouton Sign Up, ce n’est pas la meilleure expérience utilisateur, car cela les laisse ouverts à la soumission d’informations qui ne seront clairement jamais acceptées par votre application.

Il est de loin préférable de surveiller l’utilisateur au fur et à mesure de leur saisie, puis de les avertir dès qu’il est clair qu’ils entrent des informations qui ne répondent pas aux exigences de votre application. En fournissant ce type de feedback en direct et en continu, vous donnez à l'utilisateur la possibilité de corriger ses erreurs avant de cliquer sur ce bouton Sign Up.

Bien que vous puissiez surveiller les activités des utilisateurs à l'aide de Killin à la vanille, nous pouvons fournir cette fonctionnalité en utilisant beaucoup moins de code en faisant appel à RxJava, plus quelques autres bibliothèques associées.

Création de l'interface utilisateur

Commençons par construire notre interface utilisateur. Je vais ajouter ce qui suit:

  • Deux EditTexts, où l'utilisateur peut saisir son adresse e-mail (enterEmail) et son mot de passe (enterPassword).
  • Deux wrappers TextInputLayout, qui entoureront notre EnterEmail et enterPassword EditTexts. Ces enveloppes afficheront un avertissement chaque fois que l’utilisateur saisit une adresse électronique ou un mot de passe qui ne répond pas aux exigences de notre application.
  • Un bouton de visibilité du mot de passe, qui permet à l'utilisateur de basculer entre le masquage du mot de passe et sa visualisation en texte brut.
  • Un bouton Sign up. Pour que cet exemple reste centré sur RxJava, je n’implémenterai pas cette partie de l’inscription, et je marquerai ce bouton comme étant désactivé.

Voici ma mise en page terminée:

Vous pouvez copier / coller ceci dans votre application si vous le souhaitez, ou vous pouvez simplement télécharger le code source du projet depuis notre dépôt GitHub.

Créer une expérience de connexion réactive avec Kotlin

Voyons maintenant comment utiliser RxJava, ainsi que quelques bibliothèques connexes, pour surveiller les entrées des utilisateurs et fournir des commentaires en temps réel.

Je vais aborder l’écran Sign Up en deux parties. Dans la première section, je vais vous montrer comment utiliser la bibliothèque RxBinding pour vous inscrire et répondre aux événements de modification de texte. Dans la deuxième section, nous allons créer des fonctions de transformation qui valident l’entrée de l’utilisateur, puis afficher un message d’erreur, le cas échéant.

Créez un nouveau projet avec les paramètres de votre choix, mais lorsque vous y êtes invité, assurez-vous de sélectionner la case à cocher Include Kotlin Support.

Répondre aux événements de changement de texte

Dans cette section, nous allons implémenter les fonctionnalités suivantes:

  • Détecte quand l'utilisateur tape dans le champ enterEmail.
  • Ignorez tous les événements de modification de texte qui se produisent dans un court laps de temps, car cela indique que l'utilisateur tape encore.
  • Effectuez une action lorsque l'utilisateur arrête de taper. Dans notre application terminée, c’est là que nous allons valider les entrées de l’utilisateur, mais dans cette section, je vais simplement afficher un Toast.

1. RxBinding

RxBinding est une bibliothèque qui facilite la conversion d'un large éventail d'événements d'interface utilisateur en observables. Vous pouvez alors les traiter comme n'importe quel autre flux de données RxJava.

Nous allons surveiller les événements de modification de texte en combinant le widget.RxTextView de RxBinding avec la méthode afterTextChangeEvents, par exemple:

Le problème avec le traitement des événements de changement de texte en tant que flux de données est qu’en premier lieu enterEmail et enterPassword EditTexts seront vides, et nous ne voulons pas que notre application réagisse à cet état vide comme la première émission de données dans le flux. RxBinding résout ce problème en fournissant une méthode skipInitialValue(), que nous utiliserons pour indiquer à chaque observateur d’ignorer la valeur initiale de leur flux.

Je regarde la bibliothèque RxBinding plus en détail dans mon article sur les applications RxJava 2 pour Android.

2. RxJava’s .debounce() Operator

Pour offrir la meilleure expérience utilisateur, nous devons afficher tous les avertissements de mot de passe ou de courrier électronique pertinents une fois que l'utilisateur a fini de taper, mais avant qu'ils ne cliquent sur le bouton Sign Up.

Sans RxJava, l'identification de cette fenêtre étroite nécessiterait généralement l'implémentation d'un Timer, mais dans RxJava, il suffit d'appliquer l'opérateur debounce() à notre flux de données.

Je vais utiliser l’opérateur debounce() pour filtrer tous les événements de modification de texte se succédant rapidement, c’est-à-dire lorsque l’utilisateur tape encore. Ici, nous ignorons tous les événements de modification de texte qui se produisent dans la même fenêtre de 400 millisecondes:

3. RxAndroid’s AndroidSchedulers.mainThread()

Le fichier AndroidSchedulers.mainThread de la bibliothèque RxAndroid nous permet de passer facilement au thread principal de l’interface Android.

Comme il est uniquement possible de mettre à jour l’interface utilisateur d’Android à partir du thread d’interface utilisateur principal, nous devons nous assurer que nous sommes dans cette discussion avant d’afficher des avertissements par courrier électronique ou mot de passe et avant d’afficher notre Toast.

4. Abonnez-vous

Pour recevoir les données émises par enterEmail, nous devons nous y abonner:

5. Affichez le pain grillé

À terme, nous souhaitons que notre application réponde aux événements de modification de texte en validant les entrées de l’utilisateur, mais pour simplifier les choses, je vais simplement afficher un Toast à ce stade.

Votre code devrait ressembler à ceci:

6. Mettez à jour vos dépendances

Comme nous utilisons quelques bibliothèques différentes, nous devons ouvrir le fichier build.gradle de notre projet et ajouter RxJava, RxBinding et RxAndroid en tant que dépendances de projet:

Vous pouvez tester cette partie de votre projet en l'installant sur votre smartphone ou tablette Android physique ou votre périphérique virtuel Android (AVD). Sélectionnez le EnterEmail EditText et commencez à taper; un Toast doit apparaître lorsque vous arrêtez de taper.

Test your projects enterEmail EditText

Validation de l'entrée de l'utilisateur avec des fonctions de transformation

Ensuite, nous devons définir des règles de base concernant le type d’entrée que notre application acceptera, puis vérifier l’entrée de l’utilisateur par rapport à ce critère et afficher un message d’erreur, le cas échéant.

La vérification de l’email ou du mot de passe de l’utilisateur est un processus en plusieurs étapes. Pour faciliter la lecture de notre code, je vais combiner toutes ces étapes dans leur propre fonction de transformation.

Voici le début de la fonction de transformation validateEmail:

Dans le code ci-dessus, nous utilisons l'opérateur filter() pour filtrer la sortie de l'observable selon qu'elle correspond au modèle Patterns.EMAIL_ADDRESS d'Android.

Dans la partie suivante de la fonction de transformation, vous devez spécifier ce qui se passe si l'entrée ne correspond pas au modèle EMAIL_ADDRESS. Par défaut, chaque erreur irrécupérable déclenchera un appel à onError(), qui termine le flux de données. Au lieu de terminer le flux, nous souhaitons que notre application affiche un message d'erreur. Je vais donc utiliser onErrorResumeNext, qui demande à Observable de répondre à une erreur en transmettant le contrôle à une nouvelle Observable, plutôt qu'en appelant onError(). Cela nous permet d'afficher notre message d'erreur personnalisé.

L'étape finale consiste à appliquer cette fonction de transformation au flux de données du courrier électronique, à l'aide de l'opérateur .compose(). À ce stade, votre MainActivity.kt devrait ressembler à ceci:

Installez ce projet sur votre périphérique Android ou AVD et vous constaterez que la partie email de l’écran Sign Up vérifie désormais correctement votre saisie. Essayez d’entrer autre chose qu’une adresse e-mail et l’application vous avertira qu’il ne s’agit pas d’une entrée valide.

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

Rinçage et répétition: vérification du mot de passe de l'utilisateur

À ce stade, nous avons un champ enterEmail entièrement fonctionnel - et l'implémentation de enterPassword consiste principalement à répéter les mêmes étapes.

En fait, la seule différence majeure est que notre fonction de transformation validatePassword doit vérifier différents critères. Je vais préciser que la saisie du mot de passe de l’utilisateur doit comporter au moins 7 caractères:

Après avoir répété toutes les étapes précédentes, le MainActivity.kt terminé devrait ressembler à ceci:

Installez ce projet sur votre appareil Android ou AVD et testez avec les champs enterEmail et enterPassword. Si vous entrez une valeur qui ne correspond pas aux exigences de l’application, le message d’avertissement correspondant s’affiche, sans que vous ayez à appuyer sur le bouton Sign Up.

Vous pouvez télécharger ce projet complet à partir de GitHub.

Conclusion

Dans cet article, nous avons examiné comment RxJava peut aider à résoudre les problèmes concrets que vous rencontrerez lors du développement de vos propres applications Android, en utilisant RxJava 2.0, RxBinding et RxAndroid pour créer un écran Sign Up.

Pour plus d'informations sur la bibliothèque RxJava, assurez-vous de consulter l'article Commencer avec 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.