‍

Créer une application mobile sans code, vous en rêviez ? 🤔

Une douce utopie qui devient enfin réalité grâce à Bubble.io. Mais attention, le passage du rêve à la réalité ne sera pas tâche facile.

Et il faudra avant tout créer une app sur Bubble puis la convertir en app mobile.

C’est pourquoi dans cet article, nous ne traiterons que la partie « transformation » en application mobile.

Pourquoi utiliser Bubble.io ?

Bubble est sans doute un des meilleurs et des plus populaires outils Nocode. Lancé en 2012, l’outil ne rencontre pas le succès escompté avant 2019 où il explose en termes d’utilisateurs avec plus de 1,6 million d’inscrits en 2022. 🚀

Loin de rendre le code obsolète, l’application permet à tout un chacun de créer à partir d’une idée, une web app fonctionnelle à moindre coût. 

Les communautés Nocode sur Bubble.io sont très actives et de nombreux templates, plugins, intégrations d’API et fonctionnalités sont ajoutés au catalogue de l’outil chaque jour.

Créer une web app sur Bubble est fantastique, mais créer une app mobile pour son projet, c’est encore mieux. 😇

Car n’oublions pas que plus de 55 % des utilisateurs web sont sur mobile, d’après une étude Statistica 2020. Proposer son app sur App Store ou Google Play Store, vous permettra donc de toucher une audience plus large.

De plus, il vous sera possible de communiquer avec vos clients via les notifications « push ». De quoi améliorer la scalabilité de son projet et faire grandir sa communauté rapidement.

Bubble et app mobile : pas de conversion instantanée

Même si Bubble permet de produire une palette impressionnante de projets de webapp, il n’existe pas à l’heure actuelle de fonctions natives permettant de créer des apps mobiles natives pour iOS et Android. 

Une fonctionnalité le permettant est en chantier. Mais la tâche est de taille, puisque les deux systèmes d’exploitation sont en réalité des écosystèmes complètement différents.

Mais pas de panique, il existe des solutions. 💡

App responsive : préparer son app. au format smartphone

Avant d’aborder les différents systèmes permettant de transformer sa webapp en app, il faut préparer le terrain du mobile. Et donc rendre son application responsive. Même si toutes les webapps Bubble sont compatibles avec l’utilisation sur smartphone, il est nécessaire d’adapter le format de sa page web aux écrans de nos téléphones.

⭐️ Tips : il est conseillé de faire faire un site sur une seule page. Pourquoi ? Car la conversion mobile est plus adaptée au type de format mobile et les performances seront meilleures à condition de ne pas surcharger sa page d’éléments graphiques trop gourmands en ressource. Auquel cas, le choix de pages multiples sera plus adapté.

Étape 1 : Choisir le format téléphone. ☎️

‍
Ajustez le format de votre app en cliquant sur design, sur la barre latérale gauche. Puis sur Responsive dans le menu déroulant. Et pour finir de changer la vue de son app selon les formats : tablette, smartphone, ordinateur de bureau, etc.

Ici, nous sélectionnons la vue “smartphone”. 

Étape 2 : Masquer les éléments inutiles ou dérangeants sur mobile. 🙈

‍
Pour que l’expérience utilisateur soit la plus agréable possible, nous vous conseillons d’utiliser la fonction « Hide elements & animations ». Afin de masquer les éléments graphiques qui ne correspondent pas à une utilisation sur smartphone. C’est aussi le moment de redimensionner ses assets , afin qu’ils soient plus lisibles pour une lecture verticale.

Étape 3 : Ajouter des éléments conçus pour les smartphones. 📱

‍
Ajoutez des éléments ionic. Puisque vous avez masqué des transitions et des parties graphiques de votre web app, vous allez devoir ajouter des éléments ionic, conçus spécialement pour une utilisation mobile.

Étape 4 : Améliorer l’apparence de son app sur iOS. 👍

‍
Rendez-vous dans la partie « Settings »située dans le bandeau latéral situé à gauche, puis dans l’onglet général et pour finir, dans la section ”iOS appearance”. C’est ici que se trouvent les réglages de customisation visuelle sur iOS. À vous de vous amuser avec.

Une fois ces étapes de préparations terminées, il est temps de choisir la méthode de « Mobile Wrapper »qui correspond le mieux à vos besoins.

Mobile Wrapper ou comment transformer un site internet en application mobile

Le « mobile Wrapping » est une technique qui consiste à enrober votre webapp avec une couche de gestion d’interface mobile pour la transformer en app pour smartphone. 📲

Concrètement, ce type de manipulation permet à un administrateur de gestion de l’application de définir les niveaux de sécurité des fonctionnalités de votre app ainsi que les permissions d’accès aux différents systèmes d’un smartphone : Demande d’accès au carnet de contact, à votre boîte email, l’appareil photo etc. 🤳

Ainsi, d’une simple page web, vous obtenez une app iOS ou Android qu’il est possible de proposer sur leur store correspondant, ou dans un catalogue interne d’app au service de votre entreprise.

Les deux méthodes de « wrapping » les plus connues et les plus efficaces sont les suivantes :

A - Le wrapping dans une PWA (application web progressive). 🤖/🍏

Les PWA, initialement développées par Google en 2010 ont pour principal avantage de pouvoir fonctionner en offline et sur tous les supports (Android, iOS, etc.). Ainsi que d’un niveau de sécurité élevé.

B - Le wrapping dans une application native. ⚡️

Une méthode permettant d’obtenir une solution comparable à une application native.

Les applications natives ont pour avantage d’offrir une plus grande palette de fonctionnalités et d’intégration UX/UI.

Quelle est la meilleure plateforme de mobile wrapping pour créer son app en Nocode ?

- BDK

BDK est une plateforme de mobile wrapping dans une app native destinée à iOS ou Android.
Aucune ligne de code n’est exigée et ne permet de nombreuses fonctionnalités comme : les achats In-App, l’accès au GPS, au gyroscope, aux notifications push et même au Face-ID. 📸

Au niveau tarification, un seul bundle est proposé, regroupant l’accès à toutes les features proposées. Impossible de payer uniquement les fonctionnalités qui vous intéressent.

- Codeless Academy

Il s’agit ici d’une plateforme de wrapping d’app native et qui offre donc la possibilité de publier son app sur l’App Store, mais aussi sur le Google Play Store.

De nombreuses fonctionnalités sont disponibles comme la possibilité d’utiliser le Touch ID et le Face-ID, d’accéder au stockage interne de l’appareil, d’envoyer des notifications Push et même d’ajouter un lecteur automatique de QR code ou de carte bancaire. 💳

Codeless Academy a pour avantage de pouvoir visualiser une preview de votre app avant de demander un paiement.

‍