Accéder au contenu
Développement sans code

Développez votre propre application de fitness en 5 étapes, sans coder

15 février 2021
https://storage.googleapis.com/gweb-cloudblog-publish/images/GCP_AppDev.max-2600x2600_IUzAUvR.jpg
Chris Bailey

Product Marketing Manager

Pour bien commencer l'année, je me suis fixé de nouveaux objectifs afin de mener une vie plus saine et plus heureuse. L’année dernière, à cette même période, j'avais décidé, comme beaucoup d'autres personnes, de créer un programme d'entraînement quotidien mieux organisé et de suivre mes progrès. J'ai utilisé plusieurs applications de fitness et d'entraînement, mais aucune d'elles ne me permettait de suivre mes exercices exactement comme je le voulais. J'ai donc créé ma propre application, sans avoir eu besoin de coder.

Avec AppSheet, la plate-forme de développement d'applications sans code de Google Cloud, vous pouvez créer une application de fitness personnalisée pour enregistrer vos séries d'exercices, les poids soulevé, vos entraînements, et suivre vos progrès.

https://storage.googleapis.com/gweb-cloudblog-publish/images/appsheet_workout_app.max-1400x1400.jpg

Pour commencer, copiez la version finalisée en cliquant ici. Si vous rencontrez des problèmes ou avez des questions, vous pouvez consulter ce fil de discussion sur le forum de la communauté AppSheet.

Étape 1 : Configurez vos données et créez votre application

Tout d'abord, vous devez organiser vos données et les associer à AppSheet. AppSheet est compatible avec un grand nombre de sources de données. Toutefois, il est plus simple de l'associer à Google Sheets, car ce produit propose des intégrations bien pratiques à Google Workspace. J'ai déjà configuré des exemples de données. Chaque onglet comporte un tableau : le premier présente la liste des exercices que je fais chaque semaine, et le second correspond au journal de chaque exercice effectué et de mes résultats (par exemple, le poids des haltères utilisés et le nombre de répétitions).

https://storage.googleapis.com/gweb-cloudblog-publish/images/workout_log.max-1200x1200.jpg

N'hésitez pas à copier cette feuille et à l'utiliser comme point de départ de votre application. Une fois que vous avez effectué cette opération, vous pouvez créer votre application directement dans Google Sheets. Accédez à Outils > AppSheet > Créer une application. AppSheet lit alors vos données et configure votre application. Si vous utilisez une autre source de données, vous pouvez suivre ces étapes pour l'associer à AppSheet.

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/workoutsheetstoappsheet.gif

Étape 2 : Créez un formulaire pour enregistrer vos exercices

Lorsque vous accédez à l'éditeur AppSheet, un aperçu en direct de votre application s'affiche sur la droite de l'écran. Pour l'instant, AppSheet est uniquement associé à l'un des deux tableaux de notre feuille de calcul (celui qui était ouvert lorsque nous avons créé l'application). Il faut donc l'associer à l'autre en accédant à Données > Tableaux > Ajouter un tableau pour "Workout Log".

https://storage.googleapis.com/gweb-cloudblog-publish/images/Create_a_form.max-1000x1000.jpg

Avant de créer le formulaire, nous devons indiquer à AppSheet le type de données figurant dans chaque colonne et la manière dont elles doivent être utilisées. Accédez à Données > Colonnes > Workout Log, puis définissez ces paramètres pour les colonnes suivantes, vous pouvez modifier les paramètres des colonnes en cliquant sur l'icône en forme de crayon sur la gauche :

https://storage.googleapis.com/gweb-cloudblog-publish/images/adjust_column_settings.max-1300x1300.jpg

Cette illustration présente les paramètres que j'ai définis pour "Key" (Clé), "Set 1 Weights (lbs)" (Poids (kg) série 1), "Set 1 Reps" (Répétitions série 1) et "How I Feel" (Mon ressenti).

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/datasettings.gif

Maintenant, nous allons créer une vue pour ce formulaire. Une vue est semblable à une page Web, mais pour les applications. Accédez à UX > Views (Expérience utilisateur > Vues), puis cliquez sur New View (Nouvelle vue). Saisissez "Record Exercise" (Enregistrer l'exercice) dans View name (Nom de la vue), sélectionnez "Workout Log" (Journal d'entraînement) à côté du champ For this data (Pour ces données), définissez l'option View type (Type de vue) sur "Form" (Formulaire) et indiquez "Left" (Gauche) comme "Position". Désormais, après avoir enregistré votre application, vous devez pouvoir cliquer sur "Record Exercise" (Enregistrer l'exercice) dans l'application afin d'ouvrir un formulaire pour y consigner votre exercice.

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/formview.gif

Étape 3 : Configurez votre registre numérique d'entraînement

Pendant un entraînement, j'aime pouvoir consulter rapidement ceux que j'ai faits avant pour savoir combien de séries effectuer et quels poids utiliser. Pour générer notre registre d'entraînement, nous devons créer une vue. Accédez à UX > View (Expérience utilisateur > Vues), puis cliquez sur New view (Nouvelle vue). Nommez cette vue "Log Book" (Registre), sélectionnez "Workout Log" (Journal d'entraînement) comme source des données et "Table" (Tableau) comme View Type (Type de vue). Ensuite, indiquez "Right" (Droite) comme Position.

Dans la section View Options (Options d'affichage), pour Sort by (Trier par), sélectionnez "Date" et "Ascending" (Ordre croissant), et sélectionnez les mêmes options pour Group by (Grouper par).

https://storage.googleapis.com/gweb-cloudblog-publish/images/View_Options.max-1300x1300.jpg

Étape 4 : Créez un tableau de bord de vos statistiques

À cette étape, notre application fonctionne, et nous permet d'enregistrer et de consulter nos entraînements. Cependant, comme j'adore les données, je crée des graphiques et des diagrammes pour suivre mes progrès. Nous allons donc créer un tableau de bord interactif avec des graphiques présentant les statistiques des exercices sélectionnés. Comme cette étape est un peu plus complexe, vous pouvez l'ignorer si vous le souhaitez. Il s'agit après tout de votre application.

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/dashboardpreview2.gif

Avant de créer notre tableau de bord, nous devons choisir les statistiques que nous voulons y afficher. Je souhaite connaître le nombre de répétitions par série, ainsi que le poids des haltères que j'ai soulevés pendant la première série. Nous avons déjà une colonne pour les poids ("Set 1 Weights (lbs)"), mais nous devons ajouter une colonne virtuelle pour calculer le nombre total de répétitions. Pour cela, sélectionnez Data > Columns > Workout Log > Add Virtual Column (Données > Colonnes > Journal d'entraînement > Ajouter une colonne virtuelle).

https://storage.googleapis.com/gweb-cloudblog-publish/images/Dashboard_view.max-1000x1000.jpg

Pour les fonctionnalités de logique avancées, comme ces calculs, AppSheet se sert d'expressions semblables à celles utilisées dans Google Sheets. Nommez la colonne virtuelle "Total Reps" (Nombre total de répétitions) et ajoutez cette formule dans la fenêtre pop-up pour calculer le nombre total de répétitions :

[Set 1 reps] + [Set 2 reps] + [Set 3 reps] + [Set 4 reps] + [Set 5 reps]

Nous pouvons maintenant passer à la création de notre tableau de bord. Dans AppSheet, un tableau de bord correspond à une vue contenant plusieurs autres vues. Avant de créer notre tableau de bord, nous devons donc créer les vues ci-dessous.

https://storage.googleapis.com/gweb-cloudblog-publish/images/create_the_following_views.max-900x900.jpg

Passons maintenant à la création de la vue qui constitue le tableau de bord. Attribuez le nom "Stats" (Statistiques) à la Vue, définissez View type (Type de vue) sur "Dashboard" (Tableau de bord), et sélectionnez "Center" (Centre) comme "Position". Pour l'option "View Entries" (Entrées de la vue), nous sélectionnons "Exercise" (Exercice) (attention, pas "Exercises"), ainsi que "Total Reps" (Nombre total de répétitions), "Set 1 Weights (lbs)" (Poids (kg) série 1), "Sentiment" (Sensations) et "Calendar" (Programme). Activez l'option Interactive Mode (Mode interactif) et sous Display > Icon (Affichage > Icône), saisissez "chart" (graphique) et sélectionnez l'icône de votre choix. Cliquez sur Save (Enregistrer). Vous devez désormais avoir un tableau de bord bien organisé, qui affiche des graphiques personnalisés selon l'exercice sélectionné.

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/dashboardhowto.gif

Étape 5 : Personnalisez votre application et envoyez-la vers votre téléphone

Maintenant que vous avez créé votre application, vous pouvez la personnaliser en modifiant son apparence ou en y ajoutant des fonctionnalités. N'hésitez pas à parcourir l'éditeur AppSheet et à tester certaines fonctionnalités. Voici comment j'ai personnalisé mon application.

● J'ai défini la couleur principale de mon application sur "Bleu" en accédant à UX > Brand (Expérience utilisateur > Marque).

● J'ai activé "Offline Use" (Utilisation hors connexion) dans Behavior > Offline/Sync (Comportement > Hors connexion/Synchronisation) afin de pouvoir utiliser mon application même sans connexion Internet.

● J'ai changé la position de ma vue "Exercises" (Exercices) en "Menu", afin qu'elle apparaisse uniquement dans le menu en haut à gauche de mon application.

Une fois que vous avez configuré votre application comme vous le souhaitez, vous pouvez l'envoyer à votre téléphone. Accédez à Users > Users > Share App (Utilisateurs > Utilisateurs > Partager l'application), saisissez votre adresse e-mail dans le champ User emails (Adresses e-mail des utilisateurs), cochez la case "Je ne suis pas un robot", puis sélectionnez "Add users + send invite" (Ajouter des utilisateurs + Envoyer une invitation). Consultez l'e-mail sur votre téléphone et suivez les étapes pour télécharger votre application.

AppSheet vous offre diverses options pour développer des applications vous simplifiant la vie. Découvrez les autres applications que vous pouvez créer. Bon développement !

Publié dans