--- title: "Développement d'applications mobiles : une étude de cas" date: "2021-05-21" categories: - "app-development" - "mobile-development" - "mobiletogether" tags: - "app-design" - "app-development" - "mobile-development-tools" - "user-stories" description: Explorez le développement d'une application mobile pour le suivi de la production d'énergie solaire, en mettant l'accent sur les besoins des utilisateurs, la gestion des données et les techniques de visualisation efficaces. --- Status: #blog Tags: #app-design #app-development #mobile-development-tools #user-stories Categories: [mobile-development](/blog/fr/category/mobile-development.md) | [mobile-development](/blog/fr/category/mobile-development.md) | [mobile-development](/blog/fr/category/mobile-development.md) # Développement d'applications mobiles : une étude de cas Ah, le printemps ! Les oiseaux chantent, les fleurs éclosent, et le soleil se lève plus tôt et se couche plus tard. Cette lumière du jour supplémentaire permet aux systèmes de production d'énergie solaire de fonctionner plus longtemps et de produire plus d'électricité. À l'approche du solstice d'été, les systèmes de production solaire entrent dans leur période de fonctionnement la plus productive de l'année. Les propriétaires de systèmes solaires installés sur les toits peuvent être très attachés au suivi de leur rendement. L'acteur et humoriste John Hodgman a même [modéré une discussion](https://maximumfun.org/transcripts/judge-john-hodgman/transcript-judge-john-hodgman-ep-443-daylight-savings-crime/) concernant le suivi obsessionnel de la production d'énergie solaire. Mon amie Kasey est également très enthousiaste à propos de l'énergie solaire. Chaque fois que je vois Kasey, elle me communique ses dernières statistiques en termes de kilowattheures. La maison de Kasey se trouve dans une région chaude et ensoleillée, où la climatisation représente sa plus grande consommation d'électricité. Elle a installé des panneaux solaires sur le toit de sa maison à la fin du mois de juin, et son système a rapidement produit suffisamment d'énergie pendant les longues journées d'été pour compenser la consommation de sa climatisation. Après avoir reçu sa facture d'électricité pour le mois d'août, Kasey a contacté son installateur de panneaux solaires pour lui annoncer une bonne nouvelle : la consommation d'électricité de sa maison pour ce mois-là était nulle. "Je dois avouer que je lis mes compteurs tous les jours pour vérifier le fonctionnement du système", a confié Kasey à l'installateur. "Tout le monde fait ça", a répondu l'installateur. "Certains utilisateurs me disent même qu'ils vérifient les compteurs trois fois par jour !" Kasey m'a demandé si une application mobile développée avec MobileTogether pourrait être un outil de reporting efficace pour son système d'énergie solaire. "Je pourrais saisir les relevés du compteur directement sur mon téléphone", a-t-elle dit. "Je pourrais le faire chaque jour, lorsque je promène le chien avant le petit-déjeuner." C'est ainsi que notre collaboration en matière de développement d'applications mobiles a débuté. Le résultat est l'application MobileTogether que nous appelons "Solar Power Tool". ![](/blog/images/mt_darktheme_blog_1-1.jpg) Le système solaire de Kasey comprend un logiciel qui permet de suivre la quantité d'électricité produite, mais cela ne représente que la moitié de l'équation. Comme de nombreux systèmes de production d'énergie solaire résidentiels, la maison de Kasey est connectée au réseau électrique public grâce à un système de [facturation avec compteur bidirectionnel](https://en.wikipedia.org/wiki/Net_metering). Les panneaux solaires fournissent de l'électricité à la maison uniquement lorsque le soleil brille. L'électricité est fournie par le réseau électrique la nuit ou chaque fois que la demande dépasse la production. Lorsque les panneaux solaires produisent plus d'électricité que ce que la maison consomme, l'excédent est réinjecté dans le réseau pour compléter la capacité de production de l'entreprise d'électricité. La facture mensuelle de la compagnie d'électricité indique la quantité d'électricité produite et consommée par le foyer chaque mois. Le titulaire du compte paie la consommation excédentaire, ainsi qu'une petite redevance de connexion. L'électricité produite en surplus est créditée sur la facture du mois suivant. Ces logements sont équipés de deux compteurs : l'un enregistre l'électricité produite, et l'autre enregistre l'électricité consommée. Kasey souhaitait une application qui surveillerait le solde tout au long du mois, plutôt que d'attendre la facture de la compagnie d'électricité. Nous avons établi une liste de spécifications pour le développement de cette application mobile : - proposer un formulaire de saisie de données très simple pour enregistrer les relevés de compteurs - calculer automatiquement le solde du compte à partir des relevés - afficher quotidiennement les performances et le solde mensuel, tant sous forme numérique que graphique - Suivez l'évolution de ce surplus au fil du temps pour montrer les variations mois après mois. MobileTogether possède toutes les fonctionnalités dont nous avions besoin pour mettre en œuvre les exigences de l'application de manière élégante. Nous avons commencé par définir des structures de données XML pour les enregistrements quotidiens et mensuels. Voici une représentation des données mensuelles sous forme de tableau dans XMLSpy : [![Données de rapports mensuels pour suivre la production d'énergie solaire.](/blog/images/monthly-grid-view.png)](monthly-grid-view.png) La lecture des données, au-delà de la date et des valeurs du compteur, ainsi que les colonnes 4 à 7 concernant les kilowatts produits et consommés, le surplus mensuel et le solde total, sont tous des calculs numériques simples. Par exemple, en regardant la ligne 5, les kilowatts produits (kWhGen) correspondent simplement à la lecture du compteur solaire pour le mois de septembre moins la lecture du mois d'août. Le compteur solaire ne fonctionne que dans un sens, mais le compteur de consommation peut fonctionner dans les deux sens, en fonction de l'ensoleillement et de la consommation d'énergie d'une heure à l'autre. Pour notre prochaine étape dans le développement de l'application mobile, nous avons conçu la structure générale de l'application. Nous avons décidé de créer deux pages principales : une pour les performances quotidiennes et une pour l'historique mensuel. Les formulaires de saisie de données seraient des sous-pages accessibles depuis chaque page principale. Voici la fenêtre d'aide "MobileTogether Pages" qui illustre la structure des pages : [![Structure des pages définie lors du développement de l'application mobile ](/blog/images/pages-helper.png)](pages-helper.png) Les boutons présents sur chaque page permettent d'utiliser les actions de MobileTogether pour naviguer entre les différentes vues. Ensuite, nous avons réfléchi à la manière de représenter graphiquement les données sous forme de graphiques. MobileTogether permet aux développeurs de créer des graphiques en plusieurs couches, et même de combiner différents types de graphiques. Nous avons décidé de combiner des graphiques en aires et des graphiques en barres. Nous avons choisi un graphique en aires en arrière-plan pour représenter la consommation d'électricité, par jour et par mois, et un graphique en barres superposé pour afficher la production solaire. Notre raisonnement est que la maison consomme de l'électricité en continu, même pendant la nuit pour le réfrigérateur, les horloges électriques, les chargeurs de téléphone, etc. La production solaire, en revanche, est intermittente, débutant au lever du soleil et se terminant au coucher du soleil. Le simulateur est une fonctionnalité de MobileTogether Designer qui permet d'exécuter instantanément la solution pendant le développement d'applications mobiles, afin de tester la logique, de visualiser l'interface utilisateur telle qu'elle apparaîtra sur différents appareils iOS, Android ou Windows, et d'examiner les modifications des données de flux de travail. Voici une vue de la page principale du rapport quotidien, telle que visible dans le simulateur : [![Des graphiques pour afficher la production quotidienne, tels que visualisés dans le simulateur MobileTogether, pendant le développement d'applications mobiles.](/blog/images/daily-sim-view.png)](daily-sim-view.png) Cette page présente les données de production sur 14 jours, à partir du 18 avril. La production solaire varie considérablement d'un jour à l'autre en fonction de la couverture nuageuse, comme on peut le constater dans le graphique supérieur. Le graphique inférieur indique le solde positif ou négatif de chaque jour. Le 18 avril, une quantité d'électricité supérieure à celle produite a été consommée, tandis que le 29 avril, le solde était nul. Le bouton "Afficher" situé sous le premier graphique ouvre un tableau numérique contenant les données : ![Un bouton "Afficher/Masquer" permet de contrôler l'affichage des statistiques de performance quotidiennes.](/blog/images/daily-data-table.png) Le bouton "Afficher" modifie la propriété de visibilité "MobileTogether" de la table de données. La table elle-même est défilante dans la page et contient les données du mois précédent. Le bouton "Ajouter une nouvelle lecture" ouvre la sous-page de saisie des données pour un nouvel ensemble de lectures : [![La sous-page de saisie de données permet à l'utilisateur d'entrer de nouvelles données quotidiennes.](/blog/images/enter-daily.png)](enter-daily.png) La définition de l'action de contrôle pour le bouton nous permet d'ouvrir la page sous forme de boîte de dialogue modale, ce qui signifie que la page d'origine reste visible en arrière-plan. [![Paramètres permettant de définir la mise en page des sous-pages lors du développement d'applications mobiles](/blog/images/modal-subpage.png)](modal-subpage.png) MobileTogether nous permet d'ajouter du texte d'aide aux champs de saisie pour les relevés de compteurs. Nous avons également utilisé la propriété "Clavier" de MobileTogether. Lorsque Kasey appuie sur le champ de saisie pour entrer une nouvelle valeur, seuls les caractères numériques sont affichés. [![Début d'une nouvelle lecture quotidienne.](/blog/images/enter-daily-2.png)](enter-daily-2.png) Après avoir saisi les relevés des deux compteurs, la prochaine étape pour Kasey est de cliquer sur le bouton "Calculer la production" : [![Calcul du rendement de la journée à partir des nouvelles données.](/blog/images/enter-daily-3.png)](enter-daily-3.png) Cela effectue des calculs XQuery pour générer les données de production quotidiennes, qui seront affichées en aperçu. Ensuite, Kasey pourra soit ajouter les nouvelles données, soit annuler l'opération. L'ajout du nouveau enregistrement quotidien met également automatiquement à jour les graphiques sur la page du rapport quotidien [![L'ajout de cette nouvelle donnée met automatiquement à jour les tableaux de production quotidiens.](/blog/images/enter-daily-4.png)](enter-daily-4.png) La page du rapport mensuel est structurée de manière similaire à la page du rapport quotidien. Ci-dessous, vous trouverez deux exemples de l'apparence de la page mensuelle sur un téléphone Android, en mode [sombre](https://www.altova.com/blog/mobile-apps-that-automatically-support-dark-theme/) et en mode [clair](https://www.altova.com/blog/mobile-apps-that-automatically-support-dark-theme/) : [![Une vue de la page du rapport mensuel affichée sur un téléphone Android, en mode sombre et en mode clair](/blog/images/monthly-report.png)](monthly-report.png) Le tableau de données de cette page affiche des statistiques mensuelles. Les 12 premières lignes sont basées sur les relevés de compteur figurant sur les factures d'énergie de Kasey, et les valeurs des colonnes 4 à 7 sont calculées par l'application. La ligne 13 est basée sur le dernier relevé quotidien enregistré. Chaque fois que Kasey ajoute un nouveau relevé quotidien, l'application met à jour le tableau des données quotidiennes et les graphiques quotidiens, et calcule automatiquement les totaux mensuels, remplace la ligne 13 dans le tableau mensuel, et met à jour les graphiques mensuels. Cela répond à l'exigence principale de cette application mobile : surveiller le surplus cumulé depuis la dernière facture d'énergie. Le surplus cumulé est indiqué dans la ligne 13 du tableau de données mensuelles, dans la légende située sous le premier graphique mensuel, et dans les dernières colonnes de chaque graphique mensuel. L'icône en forme d'engrenage, située en haut à droite de chaque page, est un bouton créé à l'aide de l'image de bouton intégrée à MobileTogether, et qui permet d'accéder aux paramètres. Cela ouvre une page de paramètres, illustrée ici sur un iPhone : [![La page des paramètres, telle qu'elle s'affiche sur un iPhone.](/blog/images/settings-1.png)](settings-1.png) Les quatre premiers boutons de la page des paramètres nous permettaient de manipuler et d'échanger des ensembles de données pendant le développement ou pour l'analyse. Le dernier paramètre est une liste déroulante qui permettait à Kasey de réinitialiser les graphiques sur la page des rapports quotidiens pour afficher les données sur une période de 7, 14, 21 ou 30 jours. [![L'affichage du graphique du solde quotidien sur une période de 21 jours.](/blog/images/daily-balance-21.png)](daily-balance-21.png) Après le développement initial de l'application mobile, Kasey était ravie des résultats. Chaque jour, elle promenait son chien le matin et enregistrait les relevés de son compteur. Lorsqu'elle recevait ses factures d'énergie par courrier, elle mettait à jour le tableau mensuel avec les valeurs enregistrées par le releveur. Un jour, elle m'a appelée. "Vous savez, je suis restée cloîtrée chez moi pendant presque un an, et maintenant, je suis prête à voyager à nouveau", a-t-elle dit. "Que va-t-il se passer avec l'application si je ne fais pas mes mises à jour pendant quelques jours ?" J'ai dû y réfléchir et j'ai créé un ensemble de données de test pour le vérifier. En fin de compte, j'ai constaté que le rapport mensuel serait tout à fait correct. Que l'utilisateur ait oublié d'enregistrer les relevés de compteur pendant une journée ou une semaine, l'application calcule toujours le surplus cumulé à partir de la dernière facture et du dernier relevé quotidien. Le rapport quotidien comportait quelques petits problèmes. Le champ de date pour les relevés quotidiens était un sélecteur de date, qui se chargeait automatiquement avec la date actuelle, mais l'utilisateur pouvait choisir une autre date si des valeurs de relevé étaient disponibles. Cependant, si quelques relevés de données étaient manquants, les données de production quotidiennes et les valeurs affichées sur le graphique pour le dernier jour étaient inexactes : toute la production et toute la consommation seraient alors imputées au dernier jour. La solution était simple. Nous avons décidé d'ajouter une certaine logique au calcul des statistiques quotidiennes en utilisant une structure conditionnelle "si...alors" et une boucle : - Si la date de la nouvelle lecture était postérieure de plus d'un jour par rapport à la dernière lecture, alors il faut compter le nombre de jours manquants - divisez la production totale et la consommation totale par le nombre total de jours entre les relevés. - Utilisez une boucle pour attribuer la production moyenne et la consommation moyenne à chaque jour où une lecture n'a pas été effectuée. J'ai implémenté cette logique dans un groupe d'actions MobileTogether, et j'ai ajouté ce nouveau groupe d'actions aux étapes exécutées lorsque Kasey cliquait sur le bouton "Ajouter une lecture quotidienne". Le 2 mai, Kasey est partie avec enthousiasme pour un voyage de 3 jours en camping et en randonnée. Le 6 mai, le lendemain de son retour, elle a enregistré les relevés quotidiens du compteur, comme d'habitude. Voici des extraits de son rapport quotidien et de son rapport mensuel, avec des valeurs moyennes pour les relevés quotidiens manquants, tels qu'ils apparaissent sur un iPhone : [![Résultats de la stratégie mise en place pour compenser les jours d'absence de lecture, affichés sur un iPhone.](/blog/images/monthly-report-2.png)](monthly-report-2.png) Les valeurs nulles enregistrées pour les relevés quotidiens des compteurs les 3, 4 et 5 mai indiquent des valeurs moyennes. Si vous développez des applications mobiles multiplateformes, vous avez besoin d'un outil doté de capacités de programmation visuelle complètes et d'un débogueur intégré ! Découvrez notre solution MobileTogether [Démonstrations vidéo](https://www.altova.com/fr/mobiletogether/demos#video_Demos), plus [applications de démonstration](https://www.altova.com/fr/mobiletogether/demos), ou même le [manuel en ligne](https://www.altova.com/manual/MobileTogether/mobiletogetherdesigner/) pour une exploration approfondie de toutes les informations. Lorsque vous êtes prêt à vous lancer et à développer vos propres applications mobiles multiplateformes le plus rapidement possible, [Téléchargez le logiciel MobileTogether Designer](https://www.altova.com/fr/mobiletogether/download) pour commencer.