Caractéristiques des badges de découverte dans les applications Flutter | de Julien Duribreux | janvier 2023

Invitez les utilisateurs à explorer les possibilités offertes par votre application

En supposant que vous possédiez une application avec un certain nombre de fonctionnalités, vous souhaiterez peut-être fournir à vos utilisateurs un moyen discret d’explorer de nouveaux ajouts. Bien sûr, il y a le journal des modifications du magasin mais soyons honnêtes, la plupart des gens ne prennent pas le temps de le lire. Donc nous en sommes là. Je vais partager avec vous ce que je pense être un moyen simple et élégant d’implémenter des badges de découverte de fonctionnalités.

Gardez à l’esprit que ce n’est pas une façon d’expliquer « comment utiliser » une fonctionnalité, juste pour montrer où les trouver. Si c’est ce que vous cherchez, vous pouvez jeter un œil à ce paquet.

Je vais utiliser l’injection de dépendance et le singleton, ce n’est évidemment pas obligatoire. Tout est disponible en mon référentiel avec un échantillon ou un démo en direct de celui-ci. N’hésitez pas à jeter un œil pour mieux comprendre ou à poser des questions dans la section des commentaires.

Commençons par un bref aperçu de ce que nous essayons de réaliser. Afin de gérer correctement la visibilité des badges, nous devons :

• Créer une arborescence représentant la hiérarchie des fonctionnalités de l’application
• Stocker chaque fois qu’un widget a été cliqué dans le SharedPreferences
• Créez un gestionnaire pour mettre à jour et notifier chaque fois qu’un widget est cliqué
• Enveloppez les icônes sur lesquelles nous voulons un badge avec un widget personnalisé – en écoutant les changements potentiels dans la visibilité du badge.

Arborescence de navigation

Pour créer l’arbre de navigation, nous devons créer une classe représentant un nœud, chaque nœud étant une fonctionnalité. Appelons cette classe Feature.

En raison de l’objectif pédagogique de cet article, j’ai ajouté quelques attributs supplémentaires, mais en fin de compte, vous avez juste besoin FeatureId id et List<Feature> children . id être un simple enum pour identifier la caractéristique correspondante et children n’importe quelle fonctionnalité plus loin dans l’arborescence de navigation de l’application.

À ce stade, nous pouvons créer l’arbre de navigation, c’est assez simple.

Préférences partagées

Cette partie est assez simple, nous avons juste besoin de deux méthodes, une pour enregistrer chaque fois qu’un badge est cliqué et l’autre pour obtenir cette information.

L’exemple ci-dessous utilise Injectable forfait et crée un singleton exemple de mon SharedPreferencesManager vous pouvez faire la même chose à la main.

• visiteFeature enregistre un booléen dans true chaque fois qu’un badge est cliqué. Chaque key construit avec le FeatureId Nom.
• featureAlreadyVisited Retour true si visité… false sinon (non présent dans les SharedPreferences)

Couche logique métier

Tout d’abord, c’est le code pour afficher un badge. Il n’y a à peu près rien d’autre que le ValueListenableBuilder regarder. Il existe plusieurs façons d’implémenter un observateur de valeur – j’aime celui-ci, mais n’hésitez pas à partager quelque chose de plus élégant dans les commentaires, et je mettrai à jour en conséquence !

Quoi qu’il en soit… La logique est assez simple. Chaque fois que le valueListenable changements, le builder le rappel sera déclenché et, ce faisant, nous actualiserons la visibilité du badge via showFeatureDiscoveryBadge méthode.

Nous avons presque terminé (c’est promis). Il est maintenant temps d’être intelligent. Chaque fois qu’un badge est cliqué, nous devons mettre à jour le stockage local afin de sauvegarder son état et notifier à tous les badges de mettre à jour le leur.

En effet si on visite toutes les fonctionnalités cachées derrière un bouton de menu de navigation, il faut aussi mettre à jour son badge, pas seulement l’état du badge actuel.

N’ayez pas peur, je vais vous expliquer.

Tout d’abord, vous devriez remarquer le extends ChangeNotifier. Chaque fois qu’un badge est cliqué, j’appellerai la méthode de rejet provoquant le SharedPreferences à mettre à jour, suivie d’une évolution de la valeur constatée par les badges. Comme décrit précédemment, le changement sera propagé à tous les écouteurs (alias : badges), ce qui les obligera à mettre à jour leur état.

Enfin et surtout, nous devons vérifier si nous devons montrer les badges ou non. C’est le showFeatureDiscoveryBadge travail. Comment ça marche?

1. Trouvez le Feature dans l’arborescence des fonctionnalités décrite au début de l’article. Visitez récursivement l’arbre jusqu’à ce que nous le trouvions. Il doit toujours être non nul, mais personne n’est parfait, si vous créez un FeatureId et ne pas mettre à jour l’arbre, alors la méthode retourne null causant la showFeature… méthode pour retourner false
2. Si trouvé, nous devons vérifier si all ses sous-fonctionnalités ont été visitées. Si tel est le cas, nous pouvons supprimer le badge, sinon, il reste. S’il n’y a pas d’enfants (c’est-à-dire la feuille de l’arbre des caractéristiques), nous renvoyons la valeur stockée. Sinon, on vérifie que every l’enfant a été visité. Seulement si c’est le cas, nous pouvons désactiver le badge.

Comment l’utiliser?

C’est simple, enveloppez simplement votre icône (ou ce que vous voulez) avec le FeatureBadge widget, et vous êtes prêt à partir !

Vous pourriez rapidement réaliser qu’après un certain temps, votre application pourrait ressembler à un arbre de Noël pour vos utilisateurs les plus récents. Par nature, ils n’ont jamais vu aucune de vos fonctionnalités… C’est pourquoi je recommanderais d’ajouter un expiration: DateTime à ton Feature classe.

Et au lieu de simplement vérifier si la fonctionnalité a été visitée, comparez les expiration date à la date actuelle, voir si cela fait plus d’un mois par exemple. Dans le showFeature… méthode, juste après avoir obtenu le Feature associé à la FeatureId faites quelque chose comme…

if (feature.expiration.difference(DateTime.now()) ≥ 31) { return false; }

Aussi, vous pourriez ne pas aimer les badges, c’est à vous d’être créatif, peut-être d’ajouter une animation de rire pour attirer l’attention de votre utilisateur, ou de changer votre palette de couleurs… Comme d’habitude, votre imagination est la limite !

Merci d’avoir lu.