Tweakr : prototypage et contrôle à distance par la technique du Magicien d'Oz avec Firebase et Android

1. Introduction

Dernière mise à jour : 30/03/2022

Bibliothèque pour débogage à distance, génération automatique d'UI de préférences et prototypage par la technique du Magicien d'Oz

Vous en avez assez qu'une simple modification de valeur dans votre animation mette plusieurs minutes à être compilée et appliquée ? Vous avez toujours voulu ajuster à la volée différentes options de votre prototype qu'un utilisateur est en train de tester ? Vous croyez rêver quand on vous parle de "solution en une ligne" ? Tweakr pourrait bien être LA solution pour vous !

Tweakr est une bibliothèque Android qui vous permet d'annoter dans votre code des champs et des méthodes pour ensuite générer automatiquement une interface utilisateur afin de modifier ces éléments en local ou à distance. Elle peut utiliser Firebase et une interface utilisateur Web pour vous permettre de changer des valeurs et de modifier des paramètres de votre application à la volée. Elle peut aussi générer automatiquement un écran UI de préférences à l'aide de SharedPreferences, en local sur le téléphone.

Une seule ligne de code suffit : ajoutez simplement l'annotation "@Tweak" à l'élément que vous voulez modifier, et Tweakr se chargera du reste.

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez créer une application Android simple à plusieurs fins :

Dessiner du texte et des images à l'écran
Ajouter l'annotation "@Tweakr" à des champs et méthodes dans votre application
Se connecter à l'interface utilisateur Web de Tweakr avec Firebase (l'interface est déjà conçue pour vous et prête à l'emploi)
Utiliser Tweakr pour manipuler des affichages et les déplacer à l'écran

Points abordés

Configurer Firebase pour votre application Android
Annoter des champs et méthodes dans votre application afin que Tweakr génère une interface utilisateur pour les contrôler

Cet atelier de programmation porte sur l'utilisation de la bibliothèque Tweakr. Les concepts et les blocs de code non pertinents ne sont pas abordés, mais vous sont fournis afin que vous puissiez simplement les copier et les coller.

Ce dont vous avez besoin

Un ordinateur sur lequel est installé Android Studio
Connaissances de base sur le langage Kotlin et les affichages Android

2. Créer et configurer un projet Firebase

Tweakr crée des interfaces utilisateur qui associent automatiquement votre application Android à une interface utilisateur Web à l'aide de Firebase. Pour commencer, vous devez configurer un projet Firebase pour Android.

Créer un projet Firebase

Connectez-vous à Firebase.
Dans la console Firebase, cliquez sur Ajouter un projet (ou Créer un projet), puis nommez votre projet Firebase Tweakr-Codelab.
Cliquez sur les options souhaitées. Si vous y êtes invité, acceptez les conditions d'utilisation de Firebase. Passez l'étape de configuration d'Analytics (vous n'en aurez pas besoin pour cette application).

Pour en savoir plus sur les projets Firebase, consultez Comprendre les projets Firebase.

Configurer une application Android dans Firebase

Dans la console Firebase, ajoutez une nouvelle application Android en utilisant le nom de votre package : com.[your-domain].tweakr.sample).
Suivez les instructions pour télécharger le fichier google-services.json.
Copiez le fichier google-services.json dans le répertoire du module app de l'application Android (ex. : tweakr-codelab/app/).
Passez l'étape de confirmation de la connexion à Firebase. Vous le ferez plus tard quand vous aurez modifié l'ID application dans l'application Android.
Cliquez sur Synchronisation Gradle comme indiqué.

Activer les produits Firebase dans la console

L'application que vous êtes en train de créer utilise plusieurs produits Firebase disponibles pour les applications Web :

Firebase Authentication et l'interface utilisateur de Firebase pour permettre à vos utilisateurs de se connecter facilement à votre application
Realtime Database qui permet à Tweakr de synchroniser instantanément les données entre votre application et l'interface utilisateur Web
Règles de sécurité de Firebase pour sécuriser votre base de données

Certains de ces produits nécessitent une configuration particulière ou doivent être activés via la console Firebase.

Pour permettre aux utilisateurs de se connecter à l'application Web, vous allez définir dans cet atelier la méthode de connexion anonyme :

Dans la console Firebase, cliquez sur Authentification, sous la section Créer dans le panneau de gauche.
Cliquez sur Authentification, puis sur Commencer -> Méthode de connexion (ou cliquez ici pour accéder directement à l'onglet "Méthode de connexion").
Cliquez sur Anonyme dans la liste des fournisseurs de connexion, mettez le bouton bascule Activer en position activée, puis cliquez sur Enregistrer.

Activer Realtime Database

Tweakr utilise une base de données Realtime pour synchroniser l'état entre votre application et l'interface utilisateur Web plusieurs fois par seconde.

Activez Realtime Database :

Dans la section Créer de la console Firebase, cliquez sur Realtime Database.
Cliquez sur Créer une base de données.
Sélectionnez l'emplacement de la base de données (vous pouvez utiliser celui par défaut). Notez toutefois que vous ne pourrez pas en changer par la suite.
Sélectionnez l'option Démarrer en mode test pour être sûr de pouvoir écrire librement dans la base de données lors du développement. Lisez la clause de non-responsabilité concernant les règles de sécurité, puis cliquez sur Suivant.

Cliquez sur Activer.

3. Créer une application exemple Android

Obtenir le code

Pour ce projet, nous avons regroupé tout ce dont vous avez besoin dans un dépôt Git. Pour commencer, vous devez récupérer le code et l'ouvrir dans Android Studio.

Il est vivement recommandé d'utiliser Android Studio pour importer le dépôt

Ouvrez Android Studio, puis dans Contrôle des versions, sélectionnez Fichier > Nouveau > Projet.
Choisissez Git comme option de contrôle des versions.
Saisissez l'URL https://github.com/google/tweakr-codelab.git.
Cliquez sur Cloner.

Modifier l'ID application

Firebase exigeant un ID application unique pour votre application Android, vous devez renommer l'exemple en procédant comme suit :

Ouvrez le fichier app/build.gradle du module Tweakr_codelab.app.
Remplacez la ligne applicationId "com.yourdomain.tweakr.sample" par le nom du package que vous avez spécifié lors de la configuration dans Firebase.
Cliquez sur Synchroniser pour synchroniser les modifications que vous avez apportées dans le fichier Gradle.

Exécuter l'application

Cliquez sur Exécuter pour compiler et lancer l'application telle quelle. Si vous utilisez Android Emulator, veillez à créer une image AVD à partir des bibliothèques Google Play, qui sont nécessaires pour Firebase.

Vous devriez voir un écran simple avec du texte et un cercle dans l'application.

Cliquez sur le texte pour lancer une animation.

4. Commencer

À la fin de cette section, vous pourrez contrôler à distance les affichages dans notre application à partir du site Web de Tweakr.

Ajouter les dépendances de la bibliothèque Tweakr

Ouvrez le fichier settings.gradle et ajoutez Jitpack aux dépôts :

settings.gradle

dependencyResolutionManagement {
   repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
   repositories {
       google()
       mavenCentral()
       maven { url 'https://jitpack.io' }
   }
}

Ouvrez le fichier app/build.gradle du module Tweakr_codelab.app et ajoutez les dépendances de la bibliothèque Tweakr :

app/build.gradle

dependencies {

...

   // Required for local SharedPreferences or Firebase
   implementation 'com.github.google.tweakr:core:2.2.2'

   // Include this if you want Firebase support.
   implementation 'com.github.google.tweakr:firebase:2.2.2'
}

Cliquez sur Synchroniser pour synchroniser les modifications apportées dans le fichier Gradle.

Initialiser le dépôt Tweakr

Tout d'abord, vous devez initialiser le dépôt Tweakr dans la méthode onCreate() de l'application exemple, afin que Firebase puisse être utilisé :

Ouvrez le fichier SampleApplication.kt.
Annulez la mise en commentaire de la ligne Tweakr.setRepo(TweakrFirebaseRepo())

Cela indique à Tweakr d'utiliser TweakrFirebaseRepo pour synchroniser ses valeurs avec le cloud. TweakrFirebaseRepo utilise automatiquement l'instance Firebase par défaut, qui est définie par le fichier google-services.json que vous avez ajouté dans la première section.

Apporter quelques ajustements

Vous pouvez à présent commencer à annoter des parties de l'application afin que Tweakr puisse générer pour elles une interface utilisateur Web.

Dans le fichier MainActivity.kt, au-dessus de la ligne fun animateText(), ajoutez l'annotation @Tweak. Vous indiquez ainsi à Tweakr que vous voulez contrôler cette méthode à distance.

MainActivity.kt

@Tweak
fun animateText() {
 introText.animate()
...
}

En bas de la fonction onCreate(), ajoutez la ligne Tweakr.register(this). Cela indique à Tweakr d'analyser toutes les annotations de la classe et de synchroniser leurs valeurs avec le serveur Web.

MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 setContentView(R.layout.activity_main)

 introText = findViewById(R.id.text)
 introText.setOnClickListener { animateText() }

 Tweakr.register(this)
}

Exécutez de nouveau l'application.

Si tout s'est bien passé, Tweakr a initialisé en arrière-plan et synchronisé nos modifications avec le serveur Firebase. Vous verrez mieux le résultat dans la section suivante.

5. Ajuster des valeurs dans l'interface utilisateur Web

Maintenant que vous avez configuré des valeurs ajustables dans votre application, vous pouvez ouvrir l'interface utilisateur Web de Tweakr pour les contrôler à distance sur Internet. Le moyen le plus simple pour commencer à les ajuster dans votre application est d'utiliser le site Web prédéfini de Tweakr appelé "Easyserver". Ce site Web, hébergé sur GitHub, se connecte à votre base de données Firebase pour synchroniser les valeurs et générer l'interface utilisateur Web à partir de votre application Android.

Configurer une application Web dans Firebase

Commencez par configurer une application Web dans Firebase et autorisez Easyserver à y accéder.

Dans la console Firebase, cliquez sur Vue d'ensemble du projet.
Cliquez sur Ajouter une application et sélectionnez Web.
Saisissez un pseudo, puis cliquez sur Enregistrer.
À l'étape Ajouter le SDK Firebase, copiez tout à partir de const firebaseConfig. Vous collerez ce contenu dans Easyserver à l'étape suivante.

Lancer Easyserver

Accédez à la page https://google.github.io/tweakr/easyserver/, puis suivez les instructions ci-dessous pour autoriser Easyserver à accéder à votre Firebase :
Collez le code firebaseConfig que vous avez copié à l'étape précédente.

Si vous avez collé le contenu correctement, vous devriez voir votre lien de connexion unique, ainsi qu'un bouton Let's get Tweakin' (Commencer).

Cliquez sur Commencer.

Vous devriez voir un bouton animateText() qui tire son nom de la fonction que vous avez annotée précédemment.

Dépannage : si un message indique qu'aucun ajustement n'a été trouvé, essayez d'actualiser la page. Si le problème persiste, exécutez de nouveau votre application Android et assurez-vous que votre émulateur/téléphone est connecté à Internet.

Si le problème n'est toujours pas résolu, consultez le fichier logcat dans Android Studio. Tweakr imprime des journaux d'erreurs chaque fois qu'il rencontre un problème de connexion à Firebase, etc. Vérifiez également ces autres points :

Avez-vous pris soin d'activer l'authentification anonyme dans Firebase ?
Avez-vous activé les règles de "test" dans Firebase pour donner un accès public en écriture ?
Votre clé de débogage adb Android Studio correspond-elle à celle dans Firebase ?
Votre ID application dans le fichier build.gradle correspond-il au nom du package dans Firebase ?

Appuyer sur le bouton

Lorsque votre application Android est ouverte, cliquez sur le bouton animateText() dans l'interface utilisateur Web de Tweakr, puis regardez l'écran du téléphone.

Waouh, c'est magique ! Le texte devrait s'afficher comme une petite animation. Comment est-ce possible ?

Vous vous demandez peut-être comment cela se passe si votre méthode inclut des paramètres et que le bouton est prévu pour une méthode sans paramètre ? Pour le savoir, passez à la section suivante.

6. Méthodes avec paramètres

Tweakr fonctionne également avec des méthodes à un seul paramètre (celles avec plusieurs paramètres ne sont pas encore prises en charge). Faisons un test.

Dans la classe MainActivity, ajoutez une méthode qui change le texte dans TextView :

MainActivity.kt

class MainActivity : Activity() {
...

 @Tweak
 fun setMessage(text: String) {
   introText.text = text
 }

...

Veillez à ajouter l'annotation @Tweak à votre nouvelle méthode.
Exécutez de nouveau l'application et regardez le site Web Easyserver de Tweakr se mettre à jour automatiquement avec un champ de texte pour appeler votre méthode.
Saisissez du texte dans ce champ et observez la mise à jour de votre application en temps réel.

C'est très bien de contrôler à distance des méthodes, mais la vraie force de Tweakr est de pouvoir changer les valeurs des champs dans votre code. Pour en savoir plus, consultez la section suivante.

7. (Facultatif) Ajuster les valeurs des champs

Dans Android Studio, ouvrez le fichier CircleView.kt. Apparemment, certains champs en haut de la page contrôlent la taille et la position du cercle. Ajustons-les.

Ajouter les annotations

Ajoutez l'annotation @Tweak au-dessus des champs centerX, centerY et radius.
Vous devez également appeler Tweakr.register() lorsque l'objet est initialisé, et ajouter ainsi une méthode init(). Au final, voici comment devrait se présenter votre code :

CircleView.kt

/** A View that draws a circle **/
class CircleView @JvmOverloads constructor(
 context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

 @Tweak
 var centerX = 180f

 @Tweak
 var centerY = 180f

 @Tweak
 var radius = 50f

 init {
  Tweakr.register(this)
 }

...

Tweakr peut ainsi modifier les champs. Toutefois, vous n'avez pas encore terminé. Comme il s'agit d'un affichage personnalisé qui se dessine directement sur le canevas, lorsque Tweakr modifie les valeurs des champs, l'affichage n'est pas redessiné automatiquement avec les nouvelles valeurs. Vous devez indiquer à l'affichage de se redessiner chaque fois que Tweakr synchronise les modifications.

Enregistrez un écouteur avec Tweakr pour être informé dès qu'une valeur d'un champ est modifiée à distance.

Pour éviter les fuites de mémoire, vous devez également supprimer l'écouteur quand l'affichage ne l'utilise pas, à l'aide d'événements attachedToWindow :

Écouter les modifications de valeurs de Tweakr

Remplacez la méthode onAttachedToWindow() par un appel à Tweakr.addListener(this), puis supprimez l'écouteur dans onDetachedFromWindow() :

CircleView.kt

/** A View that draws a circle **/
class CircleView @JvmOverloads constructor(
 context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr), TweakrRepo.OnChangeListener
 {

...

  override fun onAttachedToWindow() {
   super.onAttachedToWindow()

   // Register onFieldChanged() to redraw when any value changes.
   Tweakr.addListener(this)
  }

  override fun onDetachedFromWindow() {
   Tweakr.removeListener(this)

   super.onDetachedFromWindow()
  }

  override fun onFieldChanged(name: String?, value: Any?) {
   // This is called whenever a field's value is changed in Tweakr's UI.
   // We could be granular here and check the name to match only the fields
   // we care about, but for this demo it's simple enough to just redraw
   // whenever *any* value changes.
   invalidate()
  }

...

(Étant donné que vous définissez this en tant qu'écouteur, vous devez également veiller à ce que notre classe étende ou implémente l'interface TweakrRepo.OnChangeListener.)

Essayer

Vous êtes maintenant prêt à faire un essai. Exécutez l'application et regardez le site Web Easyserver de Tweakr se mettre automatiquement à jour avec les nouveaux champs à ajuster.

8. Félicitations

Bravo ! Vous venez de créer votre première application avec Tweakr.

Vous avez appris à annoter des méthodes et des champs avec l'annotation @Tweak, en appelant Tweakr.register() sur l'objet contenant ces champs, puis dans un contexte plus avancé, à écouter des modifications de Tweakr afin que vous puissiez redessiner votre affichage manuellement.

Vous pouvez mettre à profit ces compétences pour accélérer votre processus de prototypage, par exemple, en modifiant les valeurs des animations à la volée, en contrôlant à distance les prototypes par la technique du Magicien d'Oz lors d'études sur l'expérience utilisateur, d'enquêtes utilisateur, etc. De notre côté, notre équipe a pris l'habitude de partager un APK de prototype d'animation avec notre concepteur. Elle lui envoie le lien vers l'interface utilisateur Web de Tweakr et le laisse ajuster les valeurs de l'animation comme il le souhaite. (Les concepteurs d'animation attachent une grande importance à ces valeurs.)

Notre équipe a également créé des prototypes pour les micro-interactions, les gestes et le retour haptique. Elle a aussi partagé le lien Tweakr avec diverses configurations et options de conception entre lesquelles elle peut permuter. Nous avons créé un document partagé et permis aux utilisateurs de saisir les valeurs Tweakr de leur choix pour aboutir à un vrai consensus sur la conception avant de les appliquer en production.

Et maintenant ?

Consultez la documentation de Tweakr.
Vidéo de démonstration et exemple de code avec sélecteurs de couleur, méthodes enfants, etc.

Autres suggestions

Contrôle à distance par la technique du Magicien d'Oz : essayez de créer une méthode dans votre activité qui utilise une énumération de noms d'écran dans votre application. Lorsque Tweakr appelle cette méthode, chargez un nouveau fragment qui correspond au nom de l'écran. De cette façon, il vous suffit de cliquer sur l'écran souhaité dans l'interface utilisateur Web de Tweakr pour que le nouveau fragment soit visible par tous ceux qui consultent l'application sur leur téléphone. Idéal pour les enquêtes utilisateur !
Utilisateurs multiples : par défaut, l'interface utilisateur Web de Tweakr synchronise simultanément les modifications pour chaque utilisateur de l'application. Toutefois, si vous avez parfois plusieurs utilisateurs simultanés, vous pouvez souhaiter que chaque utilisateur ait sa propre session de sorte que tous les ajustements effectués dans l'interface utilisateur n'affectent que leur propre téléphone, et non celui des autres. Pour voir comment créer plusieurs sessions avec getUserKey()., consultez la documentation TweakrFirebaseRepoMultiuser.
Écran de préférence local : Tweakr n'a pas besoin d'utiliser Firebase. Il peut également générer automatiquement une interface utilisateur de préférences Android afin que vous puissiez modifier les paramètres localement sur votre téléphone. Consultez l'exemple de code et la documentation.

Tweakr : prototypage et contrôle à distance par la technique du Magicien d'Oz avec Firebase et Android

1. Introduction

Bibliothèque pour débogage à distance, génération automatique d'UI de préférences et prototypage par la technique du Magicien d'Oz

Objectifs de l'atelier

Points abordés

Ce dont vous avez besoin

2. Créer et configurer un projet Firebase

Créer un projet Firebase

Configurer une application Android dans Firebase

Activer les produits Firebase dans la console

Activer la connexion anonyme (Firebase Authentication)

Activer Realtime Database

3. Créer une application exemple Android

Obtenir le code

Il est vivement recommandé d'utiliser Android Studio pour importer le dépôt

Modifier l'ID application

Exécuter l'application

4. Commencer

Ajouter les dépendances de la bibliothèque Tweakr

settings.gradle

app/build.gradle

Initialiser le dépôt Tweakr

Apporter quelques ajustements

MainActivity.kt

MainActivity.kt

5. Ajuster des valeurs dans l'interface utilisateur Web

Configurer une application Web dans Firebase

Lancer Easyserver

Appuyer sur le bouton

6. Méthodes avec paramètres

MainActivity.kt

7. (Facultatif) Ajuster les valeurs des champs

Ajouter les annotations

CircleView.kt

Écouter les modifications de valeurs de Tweakr

CircleView.kt

Essayer

8. Félicitations

Et maintenant ?

Autres suggestions