Ajouter un calculateur à votre application mobile

8 mars 2024 3 min de lecture

Pour les créateurs qui souhaitent enrichir leurs applications, un calculateur est une solution de choix. Il permet de retenir l’attention des utilisateurs avec un contenu dynamique et personnalisé.

Le store d’extension de GoodBarber propose déjà quelques outils comme un calculateur d’indice de masse corporel ou un convertisseur de devise . Pour ceux qui souhaitent aller plus loin, nous vous proposons de (re)découvrir Appizy, une solution pour transformer une feuille Excel en de puissants calculateurs pour vos applications mobiles.

Historique du projet Appizy

Le premier outil low-code du monde a plus de 40 ans

Les outils low-codes et no-codes ont explosé ces dernières années. Mais on oublie que l’outil de conception le plus plus low-code et intuitif du monde existe depuis le milieu des années 80: Excel. Impossible de dénombrer la diversité et les usages du tableur. Il est partout dans nos entreprises, nos organisations, nos associations.

Appizy voit les utilisateurs d’Excel comme des concepteurs aguerris de logiciels métiers. Son objectif est de proposer une passerelle entre la bureautique et le web. En ajoutant GoodBarber dans l'équation, une nouvelle étape est franchie en créant un pont entre la bureautique et les applications mobiles natives.

Conception du calculateur

Première version tableur de notre calculateur de prêt immobilier

Nous avions déjà présenté la solution Appizy sur le blog de GoodBarber en 2020. Nous en reparlons cette année car de nouvelles fonctionnalités sont disponibles. Nous allons vous les faire découvrir au travers de la création d’un calculateur de prêt immobilier.

Premier design
Dans un premier temps, nous concevons l'outil en 2 parties. D’un côté les données d’entrée: coût d’acquisition, taux d’intérêts, etc. De l’autre la mensualité et les détails du prêt.

Un résultat fidèle mais peu adapté à l’utilisation mobile

Une fois converties en application par Appizy, les cellules de gauche sont bien éditables et les celles de droite s’actualisent au fur et à mesure. Cependant on voit bien que l'interface obtenue fonctionne pour un affichage sur grand écran mais pas sur mobile, avec un défilement vertical.

Optimisation mobile
Appizy propose un éditeur de mise à page - Layout Builder - qui considère que chaque onglet de notre tableur de base est une section indépendante. Il est alors possible d’organiser les onglets dans différentes colonnes dont l’affichage s’adapte à la taille de l’application.

Nous commençons par séparer le contenu de notre application en 3 onglets (ou 3 sections): un pour la saisie, un second pour le résumé et un dernier pour les détails du calcul. Ensuite à l’aide du Layout Builder, nous créons une mise en page 2 colonnes: à gauche l’onglet de saisie, à droite les deux autres onglets. Le résultat s’adapte maintenant à tous les formats d’écran.

Intégration dans GoodBarber

Pour intégrer le calculateur dans une application GoodBarber, nous choisissons une section Custom Code dans l'Extensions Store. Cette extension donne accès à un éditeur de texte dédié, spécialement conçu pour ajouter du code.

Une fois l’extension installée deux options s’offrent à nous pour insérer le calculateur:

En mode embed, rapide et facile: nous récupérons le lien de l’application hébergée chez Appizy et l'insérons dans l’éditeur.
Avec le code: nous téléchargeons le code de l’application pour le ré-uploader dans l’éditeur. Le calculateur fonctionne alors de manière indépendante d’un serveur et donc en mode hors-ligne.

Il ne reste plus qu’à sauvegarder le code et ouvrir la prévisualisation. Le tour est joué!

Pour conclure

Avec Appizy, ajouter un calculateur à votre application GoodBarber devient extrêmement simple. A partir du moment où vous savez créer l’outil dans un tableur, il n’est qu’à quelques clics de votre application mobile.

Nous avons parcouru dans cet exemple les grandes étapes pour concevoir et intégrer un calculateur de prêt. Cependant les applications ne se limitent pas à l’immobilier. Coach sportif ? Créez un simulateur de programme sportif personnalisé. Enseignant ? Développez des outils pédagogiques et ludiques que vos élèves peuvent retrouver sur mobile et tablette. N’hésitez pas à visiter le site d’Appizy pour découvrir des réalisations et télécharger des tableurs pour démarrer vos propres outils.