25 outils no code à connaitre en 2021
👀 Lire plus

Glide est magique. À partir d'un Google Sheet, l'outil fait une application mobile en quelques secondes. Vous devez ensuite faire le reste, voyons comment.

Ceci est le guide ultime de Glide.

Dans ce guide, vous apprendrez tout ce qu'il faut savoir à propos de cet outil no code de création d'applications mobiles, incluant :

  • Fonctionnalités importantes
  • Conseils avancés
  • Démonstration de vraies applications
  • Comparaison avec d'autres outils d'apps (comme Adalo)
  • Partager l'app au grand public
  • Plus encore
Les liens dans cet article qui mène vers contournement.online et adalo.com sont des liens d’affiliation. Cela veut dire que si vous achetez un abonnement, j'aurai une commission. Merci de me soutenir sans me payer. Ce revenu versé par Contournement et Adalo sert à la recherche et l'écriture (~ 10h/article) de mes ressources no code de qualité.

Tout ce que vous apprendrez dans ce guide vous donnera une bonne base pour créer d'autres applications.

Afin de rendre l'apprentissage plus pratique, tous les exemples se baseront sur une seule application que vous pourrez créer et/ou suivre en même temps que la lecture du guide. L'application est un CRM, qui sert à regrouper toutes les informations pertinentes sur des clients et partenaires.

Commencez par créer un compte Glide. Ensuite, vous pouvez copier l'application Mon CRM pour suivre tout au long du guide ou si vous êtes prêt, vous pouvez ouvrir un nouveau Google Sheet pour créer l'app à partir de zéro.

Nouvelle formation Adalo : Mes amis cousins chez Contournement ont lancé leur formation en ligne sur Glide, ne manquez pas ça !

En résumé

Pour ✅

  • Simple et facile d'utilisation
  • Application gratuite jusqu'à 500 lignes
  • Communauté active
  • Base de donnée sur Google Sheet et/ou Glide Tables
  • Intégration avec Zapier et Stripe
  • Templates gratuits pour commencer facilement
  • Documentation d'aide complète et bons vidéos explicatifs

Contre ❌

  • Pas de drag-and-drop, ce qui limite le contrôle des éléments
  • La vue bureau qui veut imiter une web app est très limitée

Pour qui 🤓

Glide est principalement utilisé pour :

  • Tester rapidement une idée d'affaires (produit minimum viable)
  • Des besoins personnels tels que le budget, le voyage, une to-do, etc.
  • Créer une application au travail comme un CRM, un répertoire des employés, organiser une conférence, etc.
  • Une communauté (articles, podcasts, cours en ligne, etc.)
  • E-commerce (produits en ligne et physiques)

C'est quoi Glide?

Glide est un outil no code qui permet facilement de créer une application mobile. L'application est une progressive web app (PWA) qui se partage à l'aide d'un lien URL.

Au départ, vous pouvez choisir un template ou à partir de votre Google Sheet ou Glide Tables.

Si vous choisissez un template ou Google Sheet, Glide crée automatiquement l'app par défaut. Il n'y a pas de page blanche.

L'interface d'édition vous permet ensuite d'interagir avec les éléments.

Dans le cas de Glide Tables, vous devez commencer à partir de zéro.

Ce serait bien que Glide ajoute la possibilité d'ajouter des fausses données pour créer l'app.

Il n'y a pas de drag-and-drop comme Adalo, alors cela limite le contrôle sur le visuel de l'app, mais personnellement, j'aime bien le design de Glide.

Chaque semaine, l'équipe ajoute de nouvelles fonctionnalités les plus épatantes les unes que les autres (merci à leur shipping culture).

Un onglet dans Google Sheet devient un onglet (ou une page) dans Glide. Une colonne dans Google Sheet ou Glide Tables correspond à un élément dans Glide. Vous avez le contrôle sur la façon de disposer les éléments par exemple avec une carte géographique, une liste, un calendrier, etc.

Les utilisateurs peuvent interagir avec votre application. Comme Instagram, vous pouvez faire en sorte que chaque utilisateur ait sa propre application avec ses données personnelles, y compris un profil.

D'ailleurs, vous avez le choix de rendre l'app seulement accessible et visible par vous, un groupe de personnes (avec leurs courriels) et tout le monde (public).

L'application que vous créez avec Glide est une progressive web app (PWA). Pour l'utilisateur, cela ressemble en tout point à une application native sur l'App Store et Google Play, mais la PWA se partage avec un lien URL, disponible sur iOS et Android.

Enfin, il y a une bonne documentation remplie de tutoriels et la communauté est toujours là pour t'aider (je n'ai jamais vu un forum aussi actif 💪).

Commencer avec Glide

Pour créer une application mobile avec Glide, voici un bref aperçu des étapes clés.

Étape 1: Créer un compte

Vous devez connecter votre compte Google, soit un compte personnel Gmail ou un compte professionnel Gsuite. La raison est que Glide connecte avec votre Google Sheet. Ensuite, créez un compte sur Glide qui permettra de créer vos applications.

Étape 2 (facultatif): Créer le Google Sheet

Pour votre première app, je conseille de choisir un modèle, par exemple Mon CRM, afin de bien comprendre.

Étape 3: Créer et modifier l'application dans Glide

Si vous avez choisis votre Google Sheet, Glide crée automatiquement une app par défaut afin de vous donner un point de départ. C'est toujours différent. C'est la même chose pour un template. Si vous choisissez Glide Tables, vous aurez une page blanche.

Étape 4: Partager votre application mobile

Pour l'instant, une app Glide n'est partageable qu'avec un lien URL. Ce n'est pas accessible dans les stores, à moins d'une entente avec Glide.

Lorsque vous êtes prêt•e, vous choisissez votre sous-domaine (.glideapp.io) et voilà. Pour avoir votre domaine, vous devez avoir une app Pro.

Vous pouvez scanner le code QR ou copier l'URL et coller sur la barre de recherche sur le navigateur de votre mobile.

Si vous ne voyez pas cela, cliquez sur Share en haut à droite de l'interface.

Enfin, il est possible d'ajouter l'app avec les autres apps (télécharger depuis les stores) sur l'écran d'accueil.

Tarification de Glide

Glide a une tarification qui s'accommode à tous les besoins, bien que ça peut sembler compliqué à comprendre au départ.

👇 Personal Pro Private Pro
Prix ($/an) Gratuit $24/mo $30/mo + $1,50/ user/mo
Prix ($/mo) Gratuit $32/mo $40/mo + $2/ user/mo
Nombre de lignes 500 25 000 25 000
Stockage de fichiers 100MB 10GB 10GB
Frais de transaction 10% 2% 2%
Appareils Mobile Mobile, Tablet et Web Mobile, Tablet et Web
Domaine glideapp.io Le vôtre Le vôtre
Branding Glide Le vôtre Le vôtre
Sheet updates 1000 Illimité Illimité
Lieux sur la carte 10 1000 1000
Signatures 10 Illimité Illimité
Actions Zapier 100 Illimité Illimité
Google Analytics
Nombre d'utilisateurs Illimité Illimité Min. 20

Personal : La grosse particularité du plan gratuit est qu'il permet de créer jusqu'à 500 lignes dans votre Google Sheet et d'atteindre 100 MB de stockage de fichiers et d'images. J'ai testé une vingtaine d'apps avec le temps et je peux vous dire que c'est suffisant pour créer des apps personnels et pour tester un MVP.

Par contre, pour l'utiliser professionnellement, le bémol est que vous devez consentir à partager aux utilisateurs que cet app est "réalisé avec glideapps.com à partir d'une Google Sheet". Même que Glide ajoute un pop-up pour indiquer la marque. À mon avis, c'est de trop, mais je les comprends...

Pro : Le plan pro est à $24US/mois (payable annuellement) ou $32US/mois (payable mensuellement). Cela vous donne droit jusqu'à 25 000 lignes et 10GB de stockage de fichiers et d'images. Et enfin, Glide n'affiche plus sa marque dans le domaine et nulle part ailleurs.

Private Pro : Le plan private est à $30US/mois + $1,50US/utilisateur actif/mois (payable annuellement) ou $40US/mois + $2US/utilisateur actif/mois (payable mensuellement). Vous avez toutes les fonctionnalités de Pro ainsi que d'autres fonctionnalités reliés aux rôles et vous devez avoir au moins 20 utilisateurs.

Glide vs Adalo

Je vais bientôt faire un article plus en profondeur sur la comparaison.

Rapidement, je veux spécifier que je préfère Glide. La raison la plus importante est que je n'ai pas à me préoccuper du design. Ça me permet de focuser sur l'essentiel, les fonctionnalités pour répondre aux besoins des utilisateurs.

En attendant la revue détaillée, voici un aperçu des différences entre les deux outils.

👇 Glide Adalo
Prix annuel (commence à) $24/mois $50/mois
Nombre de lignes (version gratuite) 500 50
App Progressive Web App (PWA) PWA & Native
Interaction CRUD Drag & Drop
Courbe d'apprentissage Bas Moyen
E-commerce
Intégration Zapier

En termes de fonctionnalités, les deux outils sont assez comparables.

Ce qu'il faut savoir

Toutes les applications Glide sont uniques, mais il y a une base qu'il faut connaitre pour bien faire n'importe quelle app.

La terminologie de Glide

Bien que Glide soit facile pour les débutants, il faut se creuser un peu la tête lorsqu'on veut faire des trucs plus complexes.

Alors, même si vous voulez créer l'application la plus simple au monde, il faut quand même connaitre la base de la terminologie de l'outil Glide.

Record ou List item : Une ligne dans un tableau qui apparaît comme un élément unique dans une liste. Par exemple, la liste ci-dessous présente deux éléments de liste.

Spreadsheet : Aussi appelé Spreadsheet Document ou Google Sheet, c'est le document initial qui contient la base de donnée. Il contient toutes les sheets.

Glide Tables : C'est comme un Google Sheet, mais la base de donnée dans Glide.

Sheet : Aussi appelée Tab ou Table, une Sheet est une "page" dans un Google Sheet.

Screen : Il y a plusieurs types d'écrans, tels que :

  • List screens est une type de liste montrant des éléments dans une mise en page que vous choisissez.
  • Details screens est une des composantes qui permet de montrer toutes les données dans une colonne de votre sheet.
  • Form screen est la vue d'un formulaire.
  • Add screens permet aux utilisateurs d'ajouter quelque chose.
  • Edit screens permet aux utilisateurs de modifier quelque chose.

Un Spreadsheet en ordre

Il y a une certaine structure à garder lorsqu'il vient le temps de créer sa base de données avec Google Sheet.

Structure d'un spreadsheet dans Glide
Structure d'un spreadsheet

Dans cet exemple, chaque entreprise est une ligne où on y voit toutes leurs données.

Chaque colonne est un objet pour Glide. Et dans l'app, par exemple pour la première entreprise St-Hubert, Glide détecte son téléphone, email, adresse, etc.

La première ligne, celle plus blanche dans l'image ci-haut, détermine ce que les données veulent dire. Pour Glide, chaque donnée est une composante (voir le chapitre 5).

Si la ligne n'a pas de donnée, par exemple Chocolat Favoris n'aurait pas de site web, il n'y aurait pas de problème de laisser la case vide. Par contre, ne laissez pas de colonne entièrement vide.

Publier, partager et installer

Par défaut, toutes les applications Glide sont en mode Brouillon. Pour la rendre publique, il suffit de cliquer sur Share et ensuite sur Publish.

Avant de la partager, je vous conseille de modifier l'URL par défaut. Pour les apps Pro, vous pouvez lier votre domaine acheté par exemple chez Namecheap. Pour la partager, cliquez sur Partager l'application (si ce n'est pas déjà fait, publiez-la en cliquant sur Publish) et ensuite modifier le lien URL.

Pour permettre aux gens de copier votre app, il faut cocher la case qui permet cette fonctionnalité. Une fois sur la page sur l'ordinateur (pas sur mobile), on peut voir Copier cette application au lieu de Partager l'application.

Pour installer l'app sur votre iPhone et Android, il suffit de cliquer sur Ajouter sur l'écran d'accueil.

Installer une Glide app sur iOS
Installer une app sur iOS
Installer une app Glide sur Android
Installer une app sur Android

Images

Les images doivent être des liens URL et être hébergées quelque part. Si c'est à l'extérieur, cela peut-être dans votre Google Drive (assurez-vous de permettre que Anyone with the link can view) ou un site tel que Unsplash. Par exemple :

https://noncodeur.com/content/images/size /w1140/2020/12/Glide-guide.png

Comme toutes les composantes de Glide, les images peuvent avoir plusieurs mises en page. Je vous laisse les découvrir, l'interface est assez simple à comprendre.

Données uniques à l'utilisateur

Si vous créez une app seulement pour vous, par exemple pour votre budget, vous n'avez pas besoin de données uniques. Mais si vous voulez que plusieurs personnes utilisent l'app et que chaque utilisateur ait leurs données à eux, il faut savoir quoi faire.

Peu importe la fonction que nous verrons plus bas, vous pouvez prévisualiser les données uniques en cliquant sur Preview as.

Glide preview as
Prévisualisation des utilisateurs

User Profiles

Pour permettre aux utilisateurs de votre app d'avoir un profil utilisateur (comme Instagram, Facebook, Twitter, etc.), vous devez :

  • mettre l'app à Public with Email ou Allowed Email List
  • créer une sheet Utilisateurs et la lier au profil utilisateur dans Glide.

Les informations de base sont le Nom, Courriel et Photo.

Pour éviter l'inscription par courriel dès l'ouverture de l'app, vous devez faire les deux étapes ci-haut, mais ensuite, vous devez :

  • remettre l'app à Public
  • ajouter un bouton avec l'action Sign in à quelque part dans votre app

Row Owners

Dans une app où vous avez des lignes qui correspondent chacun à un utilisateur, il serait préférable d'utiliser la fonction Make Row Owner.

Dans cet exemple, on permet de montrer seulement les entreprises associées à chaque chargé de comptes. En fin de compte, c'est une manière de filtrer les données uniques à un type d'utilisateur.

Il est important de sélectionner une colonne avec les courriels des utilisateurs.

User-specific columns

Pour avoir cette fonction, vous devez utiliser une app Sign in with email et la Row ID column.

Cette fonction permet à chaque utilisateur d'avoir une donnée unique dans "sa" ligne. Dans cet exemple, vous pouvez prendre des notes personnelles sur chaque entreprise. Toutes les informations de l'entreprise sont visibles par tout le monde, mais chaque note est unique à chaque utilisateur.

Conditions

Cette fonction est utile pour cacher toute sorte de composantes à certains utilisateurs précis. Par exemple, vous pouvez faire une séquence d'onboarding de votre app où vous voulez que l'utilisateur voit seulement un écran et rien d'autre. Les autres écrans seront visibles une fois qu'une condition sera atteinte, soit celle de la séquence d'onboarding terminée.

Presque tout ce qui se retrouve dans Glide peut être visible et invisible selon les conditions que vous choisissez. Voici un exemple d'app (vous pouvez copier pour voir l'admin) réalisé par Glide qui montre certaines données en fonction de vos réponses aux formulaires.

Cela m'amène à parler des formulaires, une composante essentielle d'une app.

Formulaire

Le formulaire est une différente page qui s'ouvre lorsqu'un utilisateur clique sur un bouton.

Dans l'app de CRM, chaque entreprise, contact et activité ajouté se fait à l'aide d'un formulaire.

Formulaire dans une application Glide
Ajouter/modifier un contact

Une chose que j'aime vraiment est que Glide permet de répertorier des données automatiquement sans que l'utilisateur ait à les rentrer dans le formulaire, comme par exemple son email et la date à laquelle il/elle complète le formulaire.

Pour les dates et le courriel de l'utilisateur, utilisez les Special Values. Pour toutes les autres informations présentes dans la ligne, utilisez les Screen Columns.

J'ai fait une autre app qui illustre bien le concept. Dans mon app de callisthénie, je permets aux gens de rentrer leurs nombres de répétitions à chaque séance d'entrainement.

Bien que l'utilisateur voit le nombre de répétitions (3), il y a en réalité d'autres données récoltées dans le formulaire. Au-delà de la date et du courriel, il n'est pas nécessaire que l'utilisateur retape le nom de l'exercice, car le formulaire se retrouve déjà dans la page de l'exercice. Pour tous les types de données, référez-vous à ce guide.

Exemple de données dans un formulaire d'une app Glide
Exemple de données dans un formulaire

Google Sheet est très bien pour entrer ses données. C'est un terrain de jeu que tout le monde connait et c'est pour ça que Glide l'a choisi pour commencer.

Mais lorsqu'on veut faire des trucs plus complexes, il faut utiliser des fonctions et des scripts. Et là, ça peut devenir rapidement complexe.

Comme Glide veut simplifier le travail pour tout le monde, ils ont créé le Data Editor.

On peut y créer deux types de colonnes, soient une colonne calculée (Computed Column) et une colonne de base (Basic Column).

En gros, la colonne de base est celle qui permet de remplir les mêmes données que dans un Spreadsheet, comme une date, une image (lien URL), un nombre, du texte, etc. Je ne vais donc pas trop m'attarder à ces données dans ce guide.

Computed Columns

C'est vraiment les colonnes calculées qui font la merveille de Glide. En voici quelques-unes bien utiles.

Template

Ce type de donnée est utile pour créer du texte personnalisé pour chaque utilisateur.

Vous devez créer un modèle de texte et indiquer les valeurs à remplacer.

Par exemple, j'ai une colonne avec la fonction de l'employé et une colonne avec le nom de l'entreprise. Je peux créer une colonne Poste chez Entreprise en remplaçant Poste et Entreprise par leur colonne respective.

Relations

Les relations sont très utiles et je suis convaincu que vous les utiliserez sur toutes vos apps. Il est donc important de bien comprendre comment les utiliser et ce qu'il est possible de faire.

Par exemple, chaque entreprise a un chargé de comptes. Les chargés de comptes sont dans une sheet et les entreprises sont dans une autre sheet.

Pour pouvoir voir les chargés de compte pour chaque entreprise, il faut créer une nouvelle colonne Relations dans Glide.

Pour ce faire, vous devez choisir les deux colonnes dans chaque sheet qui ont les chargés de comptes. Alors, Glide saura par exemple que l'entreprise St-Hubert appartient à Marie Rao. S'il y a plusieurs entreprises par chargés de compte, vous pouvez cocher Match multiple.

Glide Relations
Relations

Pensez à n'importe quelle app, les relations sont partout. Par exemple, cette Glide app qui copie les fonctionnalités de base d'Instagram où chaque utilisateur a ses photos.

Lookup

Une fois la relation créée, vous pouvez aller chercher une donnée précise dans la ligne de cette relation.

Par exemple, je peux aller chercher seulement le courriel du chargé de comptes et toute autre donnée qui se retrouve sur la ligne du chargé de comptes.

If → Then → Else

Cette colonne permet de créer une donnée selon certaines conditions.

  • If, signifie la condition
  • Then, signifie le résultat si la condition est vraie
  • Else, signifie le résultat si la condition est fausse

Dans cet exemple, s'il y a une signature, inscrire la note Complété, sinon À compléter.

Array

Si par exemple, chaque employé avait plusieurs photos, il suffit d'indiquer Photo 1, Photo 2, Photo 3, etc. Il est important de respecter la structure suivante : mot avec un espace 1, 2, 3, etc.

Glide regroupera les 3 colonnes en 1 colonne (une Array Column), ce qui rend Glide un peu plus magique que Google Sheet.

Il sera alors possible d'utiliser le Carousel.

Autres colonnes

Il existe d'autres fonctions utiles qui s'ajoutent au fil du temps chez Glide comme Math, Rollup, Row ID, Distance to Location, Joined List, Split Text, etc.

Ils sont bien utiles dans des cas précis alors je n'en parlerai pas (encore) dans ce guide. Je vous invite à jouer avec ces fonctions et pour plus d'informations, référez-vous toujours à leur documentation.

Peu importe la Glide app que vous allez créer, vous allez utiliser les composantes. C'est la façon qu'ont vos utilisateurs d'interagir avec votre application.

Composantes

Une composante est un bloc que vous pouvez ajouter et modifier sur n'importe quelle page en mode Détails.

Text

Glide a trois styles de texte :

  • Action Text
  • Rich Text
  • Text component

Le Action Text est utile pour permettre une action lors de l'utilisation de l'app. Par exemple, ouvrir Google Map, copier un texte, téléphoner, etc. Ces actions peuvent aussi se faire avec un Button. Alors, utilisez le Action Text est seulement une question de design.

Le Rich Text est quant à lui utile pour écrire plusieurs formes de texte en utilisant Markdown. Vous pouvez alors écrire en gras et italique avec des grosseurs différentes et bien plus. Par exemple, en écrivant ce texte dans la composante :

Le guide sur **Glide** de Non Codeur est _awesome_ !

C'est ce que vous verrez dans l'app :

Le guide sur Glide de Non Codeur est awesome !

Glide Rich Text
Rich Text

Et la crème de la crème, c'est la composante Text qui permet plusieurs formats à même l'interface Glide.

Vous pouvez couper un long texte en quelques lignes et y ajouter le Plus pour faire apparaître tout le texte. Vous pouvez centrer et le rendre très petit. Bref, je suis sûr que vous allez l'utiliser.

Button

Un Button dans Glide permet de faire plusieurs actions telles que: Add row, Compose email, Compose text message, Copy to clipboard, Dial phone number, Go back, Increment, Link to screen, Navigate to tab, Open link, Open web view, Play sound, Reshuffle, Set columns, Show form, Show notification, Show sharing options, Sign in, View address on map et Zapier.

Action d'un button dans Glide
Action d'un button

Quant aux différentes formes, il existe le Button et le Floating button.

Chaque action d'un Button nécessite une donne précise. Par exemple, envoyer un courriel nécessite une adresse courriel, un appel téléphonique nécessite un numéro de téléphone et ainsi de suite.

Pour différentes actions, telles que Email, Link et Phone, vous pouvez utiliser soit le Action Text ou le Button.

Switch et Checkbox sont uniques, car ils permettent uniquement d'insérer les valeurs TRUE/FALSE, c'est-à-dire le crochet ✅ dans Google Sheet.

Une fois votre application mobile Glide terminée, il faut maintenant la partager.

Partager l'app

Ce qui est bien avec les PWA, c'est que vous pouvez la partager à l'aide d'un lien URL. Rien de bien compliqué, pas besoin de téléchargement sur les Stores.

Direct

Vous pouvez partager le lien directement en message texte, par courriel ou autres.

Google

Si vos utilisateurs sont le grand public, vous voulez que des inconnus trouvent votre app. Il faut alors avoir une présence en ligne.

Google peut être votre ami. Pour qu'il réfère votre app, vous devez créer une landing page (page de vente).

Par défaut, Glide donne une landing page lorsque l'utilisateur est sur l'ordinateur et tablet. Sur son téléphone, il est redirigé directement vers l'application.

Cependant, cette landing page n'est presque pas vu par Google. Glide indexe seulement le nom et l'URL de votre app.

Comment faire pour que Google voit votre application Glide et présente toutes ses fonctionnalités à tout le monde ? Créez une landing page avec votre propre domaine.

Si ce n'est pas déjà fait, achetez un nom de domaine chez Namecheap.

Ensuite, vous pouvez créer votre landing page vous-mêmes ou si vous voulez sauver beaucoup de temps, vous pouvez vous procurer un de mes templates. J'ai lancé Flanders pour les débutant-es en tech et design.

Voyez la différence entre la landing page classique de Glide et une landing page personnalisé.

Flanders - Exemples et templates de landing pages
Flanders répertorie les meilleures exemples et templates de landing pages et sites one page conçus avec des pages builders no code.

Maintenant, c'est à votre tour 🥸

Voilà, j'espère que vous avez aimé ce guide.

Comme Glide ajoute de nouvelles fonctionnalités chaque semaine ou presque, je compte mettre à jour ce guide sur une base régulière.

Et vous, quel est votre projet d'application ?

Un marketplace, un autre réseau social ou une app pour aider les plombiers ?

Faites-le moi savoir en laissant un commentaire en bas.

Frank
Frank
Je test tous les outils no code et je documente ici.

Rejoindre la conversation

Table des matières
Génial! 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.
Votre lien a expiré.
Succès! Vérifiez votre e-mail pour le lien magique pour vous connecter.
Succès! Vos informations de facturation ont été mises à jour.
Votre facturation n'a pas été mise à jour.