Non Codeur

Comment créer une app de yoga sans coder avec Glide

Les yogis de Youtube ont toutes leurs applications mobiles. Voici comment créer la vôtre simplement et à peu de frais avec Glide apps.
Comment créer une app de yoga sans coder avec Glide
Photo by kike vega / Unsplash

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éo.

Mon application est créé avec Glide, un outil 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ée à $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.

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ée par l'utilisateur. Dans mon cas, j'ai choisi 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éré 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ée 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.

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.


Vous aimez cet article ? Partagez-le à un•e ami•e. Ça ne prend que 10 secondes. L'écrire me prend 10 heures. Vous pouvez aussi m'offrir un (ou plusieurs) Latte glacé 🥤, ça m'aide à écrire plus !


Des liens dans cet article sont des liens d’affiliation. Si vous achetez un abonnement, il ne vous coûtera pas plus cher, mais je recevrai une petite commission qui non seulement soutient mon travail (~ 10h/article de recherche & écriture), mais m'aide aussi à faire de Non Codeur un side project durable.

L'art de programmer visuellement

Apprenez à créer des applications, sites web et automatisations sans coder.

Non Codeur

Super ! Vous vous êtes inscrit avec succès.

Bienvenue à nouveau! Vous vous êtes connecté avec succès.

Vous vous êtes abonné avec succès à Non Codeur.

Succès ! Vérifiez dans votre e-mail le lien magique pour vous connecter.

Succès! Vos informations de facturation ont été mises à jour.

Votre facturation n'a pas été mise à jour.