Comment créer une application mobile sans coder en 2023

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.

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

{{h3-1}}

La première étape est de sortir l'idée d'application de votre tête. Vous pouvez partir de zéro ou commencer 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.

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.

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.

{{h3-2}}

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

{{resources-1}}

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.

{{h3-3}}

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.

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.

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

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

{{h3-4}}

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

{{h3-5}}

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, avec Glide, vous avez simplement qu'à lier votre domaine ou utiliser celui de l'app builder et partager le lien URL à vos utilisateurs.

Et voilà !