5 min read

Comment créer une application de yoga avec Glide (template)

Les yogis de Youtube ont toutes leurs applications mobiles. Voici comment créer la vôtre simplement et à peu de frais.
Comment créer une application de yoga avec Glide (template)

Mes inspirations pour cette app mobile sont les populaires yogis de Youtube Yoga with Kassandra et Yoga with Adriene.

Ces deux apps mobiles utilisent VidApp, un logiciel de création d'application mobile spécialisé dans le contenu vidéos.

Mon application est créé avec Glide, un logiciel qui permet de créer une application mobile sans coder.

Comparons les fonctionnalités natives de VidApp et Glide.

👇 VidApp Glide
Push Notifications
Design personnalisé
Téléchargements des vidéos
Calendrier
Favoris
Recherche
In-app filters des vidéos
In-app purchases
Apple TV, Roku, Chromecast, etc.
Native app

Somme toute, ce n'est pas trop mal pour une application Glide gratuite comparé à $200 par mois pour VidApp.

Voyons comment créer une application de yoga comme celle-ci tout à fait gratuitement.

Créez un compte sur Glide et ensuite copiez mon template dans le Glide store.

Free Yoga with Me app • Glide
Access to exclusive yoga classes that you can do in the comfort of your own home.

Si vous ne voulez pas lire, voici le tuto vidéo !

Sources

J'essaie autant que possible de ne pas utiliser Google Sheet. Pour cette app, j'ai utilisé uniquement le data builder de Glide.

J'ai ajouté les tables Users et Classes.

Onboarding

La séquence d'onboarding est très simple à réaliser.

En vue Details, vous pouvez sélectionner n'importe quel source, cela n'a pas d'importance car aucune donnée ne sera ajouté par l'utilisateur. Dans mon cas, j'ai choisis Users.

Vous ajoutez ensuite ajouter les éléments souhaités comme les images et les textes.

Pour le bouton, vous devez utiliser l'action Link to screen. Il y a d'autres méthodes possibles pour créer une séquence d'onboarding, mais celle-ci est très simple.

Cela va faire en sorte qu'un nouvel écran va se régénérer à chaque fois que l'utilisateur clique sur Next. Vous pouvez donc y ajouter les fonctionnalités de l'app ou autres.

Séquence d'onboarding d'une Glide app de yoga

Évidemment, vous pouvez ajouter ou enlever des écrans pour créer votre propre séquence d'onboarding. À la toute fin, pensez à montrer les options de paiements, s'il y a lieu, pour pouvoir utiliser l'app.

Paiement

Afin de montrer l'app, dans ce cas-ci, je n'ai pas ajouter l'option de paiement. J'ai simplement générer l'écran Sign in.

Une fois

Pour faire payer vos utilisateurs une seule fois, il y a une action native dans Glide, le bouton d'achat. Il vous suffit de lier votre compte Stripe.

Par mois

Si vous avez un plan récurrent, tous les mois, comme les yogis sur YT, il faut alors utiliser des outils externes comme Payhere, TillyPay, Payhip, PayRequest ou Gumroad (mon préféré).

Pour garder l'utilisateur dans l'app, je vous suggère d'utiliser la composante Webview (qui requiert Glide Pro).

Visibilité

Pour montrer la séquence d'onboarding aux nouveaux et ensuite la cacher pour les membres, il faut jouer avec la fonction Visibility.

Votre critère de visibilité dépend de l'action que l'utilisateur doit prendre pour voir le contenu. Dans mon cas, c'est l'action Sign in et qui ajoute la date et l'heure dans la colonne hasProfile (User specific).

Si l'utilisateur a une donnée dans cette colonne, il verra les autres tabs et non la séquence d'onboarding.

Classes

L'écran des classes est en vue Details. La source provient d'un Sheet séparé pour ces classes.

Elle est aussi composé des éléments Inline List. Chaque Inline List a le style Tiles et correspond à une catégorie. Pour montrer seulement une catégorie, il suffit de cliquer sur Options et choisir le nom de la catégorie comme filtre.

Favoris

Il est en tout temps possible de mettre une classe en favoris et y accéder dans la section. C'est une fonctionnalité native de Glide alors cela se fait facilement aussi.

Calendrier

Le calendrier permet aux utilisateurs de programmer une classe selon une date et une heure choisie.

Commencez par créer deux colonnes Début et Fin dans la base de donnée. Celles-ci doivent être User specific.

Ensuite, créez la nouvelle tab Calendrier ayant comme source les classes.

Enfin, ajoutez l'élément Event Picker dans l'écran de la classe.

Bonus : page de vente

Une fois votre app terminé, il vous faut une belle petite landing page pour y montrer toutes les fonctionnalités.

Voici mon joli template bâti avec Dorik, le créateur de site web le plus simple et économique.

Yoga With Me
Yoga With Me is a Dorik template that makes it easier & faster for you to create your landing page for your Glide app.Live demo:https://yogawithme.dorik.io/You have a lifetime access & updates. It means if you purchase Yoga With Me at any time all future updates will be emailed straight to y…

Mot de la fin

Cette app est facile à créer et vous pourriez ajouter beaucoup d'éléments tels que le In-app filter et une tab profil avec les informations de paiement par exemple.