Comment créer une application mobile sans coder en 2022

Tout le monde a déjà eu une idée d'application mobile. Il est maintenant possible de la créer soi-même et c'est moins compliquer qu'on le pense. Voici comment.

Comment créer une application mobile sans coder en 2022

Cet article comporte les étapes de création d'une application mobile sans coder.

Pour bien expliquer, je vais prendre en exemple une application simple que j'ai fait avec Glide.

L'application mobile Sportpreneur permet aux entrepreneurs et mentors de la communauté startup de Québec de parler business en faisant du sport.

C'est une PWA accessible via l'URL https://sports.apollo13.co ou en cliquant sur ce lien 👇. Inscrivez-vous ! 🙃🏃

Sportpreneur
Connectez avec des entrepeneurs et mentors sportifs de la communauté startup de Québec.

5 étapes pour créer une application mobile sans coder

Voici les étapes essentielles dans la création d'une application mobile no code.

1. Dessiner l'application

La première étape est de sortir l'idée d'application de votre tête. Vous pouvez partir de zéro ou commencez avec un template pour vous donner des idées.

Le brouillon de votre app peut prendre plusieurs formes, dépendant des détails que vous y ajouterez.

Créer le brouillon de l'application, peu importe le niveau de détails, permet de voir si votre idée avait du sens et de voir (même quasi-tester) le parcours complet des différents utilisateurs.

Bien que toutes les applications mobiles soient différentes, il existe des étapes clés dans la création du brouillon d'une app mobile.

😇
Vous savez déjà que je ne suis pas codeur. Bien, je ne suis pas designer non plus. Je crois que la plupart de mes lecteurs-trices ne le sont pas non plus. Voici donc comment je "dessine" mon application sans être designer.

User flow

Le user flow (ou le parcours des utilisateurs) permet de trouver comment chaque utilisateur va se compoter, ce qui va l'attirer et quand il va quitter.

C'est une sorte de diagramme qui décrit les étapes pour accomplir une tâche. Il est ainsi possible de voir approximativement le nombre d'écrans de l'application mobile, les intéractions et les décisions avec les fonctionnalités.

Il existe plusieurs types de user flow, je répète, je ne suis pas designer, j'ai pris un template Figma. J'ai des cadres qui signifient les écrans, les intéractions et les décisions, reliés par des flèches. Il ne faut pas forcement que ce soit linéaire, bien que le mien le soit, car il peut y avoir plusieurs chemins pour accomplir une tâche.

User flow de Sportpreneur

Pour mon app, je n'ai pas inclus l'étape de connexion, car Glide s'occupe de tout ça. Je ne peux pas vraiment l'optimiser, sauf ajouter la possibilité de se connecter avec Google. Le début commence une fois que la personne s'inscrit sur l'application.

Wireframe, mockup et prototype (facultatif)

Le wireframe et le mockup sont des plans qui servent à clarifier et communiquer les fonctionnalités et de les relier dans un parcours cohérent entre les écrans. Vous déterminerez surement ces critères de l'app : les actions possibles des utilisateurs, la répartition de l'espace, le positionnement des éléments, les fonctionnalités de l'application, la hiérarchie du contenu et la transition entre les pages ou écrans.

Le mockup contient plus d'aspects visuels comme les couleurs de la marque, les boutons, les graphiques, les icônes et la typographie.

Je n'ai pas fait de wireframe ou mockup pour Sportpreneur, mais si j'en avait fait un, ça aurait possiblement ressembler à ça.

Wireframe de Sportpreneur

Cela reste un aperçu très global. Il n'y a pas de lien entre les écrans et ce n'est pas le vrai texte. Pour ce wireframe, j'ai aussi simplement pris un template Figma et j'ai gardé les 3 écrans principaux.

Comme Glide a son propre design unique et qu'il est très facile d'ajouter les composantes, je n'ai pas passé trop de temps à créer un design custom.

Le prototype, lui, contient l'expérience complète de l'utilisation de l'application. Cela comprend des éléments et des animations de l'interface utilisateur, ainsi que des boutons cliquables. En somme, le prototype vous permet de tester et de découvrir tout problème lié au parcours de l'utilisateur avant de passer à la phase de développement.

Avec Glide, je n'avais clairement pas besoin de faire un wireframe ou un prototype. En fait, c'est plus long en créer un sur Figma que créer l'application sur Glide.

C'est pour dire à quel point un app builder no code est efficace.

Après tout, sur le site d'Adalo, c'est écrit : "Stop Making Mockups. Start Making Real Apps."

2. Choisir la stack no code

Maintenant, vous avez à choisir si votre application mobile sera une PWA (progressive web app) ou une application native.

Ensuite, vous devrez choisir votre app builder no code.

Application native

Elle est faite pour fonctionner uniquement sur des appareils mobiles, sur iOS ou Android.

Elle est construite avec du code. Pas le choix. Par exemple, en Java, Kotlin, Python, Swift, Objective-C, C++, React, etc. C'est l'app builder qui fait cette partie pour vous, après l'avoir "non codé".

L'application native est assurément plus performante et rapide que la PWA, car elle utilise la vitesse de traitement de l'appareil mobile.

Elle peut aussi se connecter à d'autres applications (services tiers), ce qui hausse l'expérience utilisateur et permet d'ajouter plus de fonctionnalités dans l'app. Par exemple, le geofencing (ou géorepérage), lorsqu'un utilisateur se trouve à un endroit particulier, permet de recevoir une notification indiquant les endroits intéressants à proximité.

L'app native permet aussi d'avoir plus de mesures de sécurité que la PWA, par exemple en ajoutant une authentification multifactorielle (2FA).

Je vous conseille une application native si :

  • Vous avez besoin d'une app avec des fonctionnalités personnalisées
  • Vous avez besoin d'une app qui devra supporter une grande croissance (scale)

Progressive Web App (PWA)

Une PWA est une application web qui se partage à l'aide d'un lien URL. L'application n'est pas disponible sur les Stores.

Elle peut être ajoutée sur l'écran d'accueil de l'appareil mobile.

Généralement, elle comporte moins de fonctionnalités que l'application native. Elle n'a pas accès aux données des utilisateurs, telles que les contacts, la galerie, etc.

La PWA peut être disponible hors-ligne et profiter du référencement sur les moteurs de recherche.

C'est ce qui s'approche le plus d'une application native, sans les complexités de publication sur les Stores.

Je vous conseille la PWA si :

  • Vous voulez lancer un MVP
  • Vous avez un petit budget

App builder no code

Il existe des app builders no code tout-en-un et des app builders spécialisés.

Votre application mobile se divise en plusieurs couches.

Le frontend comprend l'UI (user interface), la couche visible par les utilisateurs de l'application.

Le backend comprend, entre autres, la base de données, la logique (workflow) et l'authentification.

Les app builders no code que je conseille généralement sont :

Tous ces app builders no code permettent de lier votre backend via une API REST, incluant Airtable et Google Sheet pour la plupart.

Ils permettent aussi de créer une PWA et une application native publiée sur les Stores, sauf pour Glide où il faut travailler étroitement avec l'équipe.

Ils permettent aussi de créer le frontend dans l'outil, excepté Bravo Studio qui s'occupe uniquement de la logique (workflow).

Adalo et Glide sont des app builders tout-en-un, pouvant être utilisés comme frontend et backend.

Le choix de l'app builder vous indiquera donc quel outil no code prendre pour votre base de données, qu'on voit au prochain point plus bas.

💡
Avant de choisir vos outils no code, je vous invite aussi à lire des critères à suivre pour le choix de sa stack no code.

Petit rappel, Sportpreneur est une PWA montée sur Glide.

3. Organiser les données

La base de données est la fondation de toute application mobile. C'est une couche qui fait partie du backend de votre app.

Vous devez avoir une façon d'interagir avec la base de données pour chercher l'information que vous voulez dans votre app.

Dans Sportpreneur, les sports sont stockés et sont associés à des utilisateurs. Il y aura donc une relation entre les informations des utilisateurs et les informations des sports. Cette base de données relationnelle est la base de données qui est la plus populaire.

Selon l'app builder choisit, vous devrez organiser vos données d'une certaine manière.

Les données peuvent être stockés dans un outil spécialisé à cet effet comme Google Sheet, Airtable et Xano ou directement dans un app builder tout-en-un comme Adalo.

Comme la plupart des app builders no code ont une intégration avec Airtable, je suggère de commencer votre base de données là et voir après.

Pensez tout de suite aux nombres de données que vous aurez besoin et le niveau de sécurité requis pour votre application.

Les bonnes pratiques de sécurité

Il est important de penser aux fuites de données dans votre application mobile et trouver des solutions pour l'empêcher.

Les app builders permettent par exemple de jouer avec la visibilité, mais l'information reste encore disponible en jouant avec le Javascript. Elle est simplement "caché" sous une barrière facile à franchir.

Par exemple, dans Sportpreneur, les utilisateurs doivent inscrire leur email. C'est surement l'information de base que vous devrez protéger aussi dans votre app.

Pour que les utilisateurs ne puissent pas voir les emails des autres, j'ai créé un onglet public qui sera utilisé dans l'application.

Onglet des utilisateurs avec emails

Dans Google Sheet, je me suis assuré que la colonne Email est la dernière dans mon onglet utilisateurs. Puis, j'ai créé un nouvel onglet et avec la formule =ARRAYFORMULA(Utilisateurs!A1:K), ce qui a copié toutes les données, sauf la colonne Email.

Onglet public (utilisé dans l'app Glide) des utilisateurs sans email

Ensuite, dans Glide, dans mon onglet Sports, j'ai mis en relation avec l'onglet Utilisateurs publics.

Relation entre les sports et les utilisateurs publics dans le Data Editor de Glide

Je vous invite à surveiller de près ncScale qui s'attaque de près à la sécurité des applications mobile no code.

4. Créer l'application mobile

Il est temps maintenant de construire l'application en ajoutant les fonctionnalités, la mise en page et la navigation.

Ce que vous aviez en tête au départ peut prendre enfin forme.

Vous allez surement vous rendre compte que ce que vous imaginiez est plus complexe à faire ou qu'il faut une autre façon de montrer l'information.

Il n'existe pas de manière universelle pour construire une application mobile avec un app builder no code, car ils fonctionnent tous différemment.

Vous devrez apprendre comment fonctionne l'outil.

Ce que j'aime faire quand je commence avec un nouvel outil, c'est de choisir un template et d'essayer de le comprendre. Je fais ni plus ni moins que du reverse engineering (ou rétro-ingénierie).

Abonnez-vous à ma chaine Youtube avec des vidéos tutoriels.

5. Tester, déployer et partager

Une fois votre application faite, il faut la tester pour voir si tout fonctionne sur tous les appareils.

L'étape de test s'applique surtout aux applications natives, comme elles utilisent des fonctionnalités non disponibles sur le navigateur web.

Lors de la construction de l'app, certains app builders comme Glide fonctionnent déjà sur tous les appareils, mais d'autres comme Flutterflow demandent de personnaliser sur mobile, tablette et ordinateur.

Voici justement une série de vidéos de Flutterflow pour tester et déployer sur les stores votre application native no code.

Si vous créez une PWA, vous avez simplement qu'à lier votre domaine ou utiliser celui de l'app builder et partager le lien URL à vos utilisateurs.

Et voilà !


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.