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.
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.
É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.
