Test d'un outil NoCode - Draftbit

François

Arbogast

9.7.2021

4

minutes

Draftbit

Draftbit, c'est quoi ?

Draftbit NoCode Tool

Draftbit est un outil Nocode/Lowcode qui permet le développement d'applications mobiles. Cet outil utilise React Native comme technologie. Il est d'ailleurs possible de récupérer le code source de vos applications en React Native.

L'interface et les fonctionnalités

Comme un air de famille

Effectivement, dès qu'on démarre une application Draftbit, on a l'impression d'attérir sur quelque chose de connu. En effet, l'interface globale ressemble a quelques nuances prêt a l'interface de Webflow.

Interface principale de Draftbit

Tout d'abord la barre latérale de gauche se constitue de :

Barre latérale Draftbit

  • Onglet Screens - Vos pages et leurs structures ainsi que l'accès à la bibliothèque d'éléments.
  • Onglet Theme - Vous permet de définir les couleurs principales de vos éléments.
  • Onglet Navigation - Vous permet de gérer la navigation ainsi que les headers de chaque page.
  • Onglet Data - Vous permet de vous connecter a une DB ou application externe
  • Onglet Assets - Vous permet de stocker vos images et vidéos.
  • Onglets Settings -Vous permet de gérer les paramètres globaux de l'application

Ensuite la barre du haut se décline avec :

Top Menu
  • Bouton Insert - Un autre acces a la bibliotheque d'éléments
  • Bouton Add - Vous permet d'ajouter de nouvelles pages / écrans
  • Bouton Custom - Vous permet d'ajouter du custom code dans votre application
  • Bouton Preview - Vous permet d'accéder a un QR code pour prévisualiser votre application avec Expo sur votre téléphone. Ce n'est pas le seul outil pour visualiser votre application !
  • Bouton Learn - Vous permet de chercher des ressources sur des questions précises
  • Bouton Code - Vous permet d'exporter le code en React Native de votre page
  • Share - Vous permet de visualiser via un lien votre application. Vous pouvez partager ce lien, mais les personnes devront avoir un compte Draftbit afin de pouvoir visualiser votre application.
  • Publish - Vous permet de publier et de mettre dans les Stores votre application (version payante uniquement).

Pour finir la barre de droite, tout comme webflow se décline en 4 éléments :

  1. La section Style

Barre d'outil de droite

  • La partie Layout - Vous permet comme sur Webflow de gérer la disposition des éléments selon le principe de la Flexbox.
  • La partie Margin/Paddings - Vous permet de gérer les marges et le padding de vos éléments
  • La partie Size - Pour gérer la taille des éléments
  • La partie Position - Pour fixer des éléments ou des comportements vis a vis d'autres
  • La partie border - Pour la gestion des bordures des éléments
  • La partie effect - Pour la gestions des effets comme l'opacité
  • La partie background - Pour gérer la couleur de l'arrière-plan de l'élément
  1. La section Config

Section Config

La section config permet de gérer des options supplémentaires des pages ou des éléments. Les options sont dynamiques en fonction de l'élément sélectionné

Section Config
  1. La section Data

La section Data permet de faire apparaitre les données dynamiquement sur vos éléments en fonction de votre base de données et ses conditions d'apparition.

3 onglets sont à disposition :

Section Data
  • La partie Input- Pour gérer la valeur dynamique des éléments (ici texte)
  • la partie Variable - Pour sélectionner le bon tableau de la base de données
  • La partie Conditional - Qui permet de gérer les conditions d'apparition des éléments ou non.

Dans le prochain chapitre on reviendra sur ce volet, qui pour moi est le gros point fort de Draftbit.

  1. La section Interaction
Section intéraction

La section interaction permet de gérer toute les actions possible sur les éléments (Bouton ici) .

En 2 onglets, le premier qui est le déclencheur (On tap) de l'action et le second qui est l'action en elle même (Navigation à la page 'Note page').

Gestion des données simples

Après ce petit tour d'horizon des fonctionnalités que propose l'interface de Draftbit, je voulais m'attarder sur ce qui est pour moi, après mon bref test, son grand point fort : Sa gestion simple et intuitive des données.

Tout d'abord, Draftbit permet de se connecter à une large palette d'outils externe de base de données, comme Airtable ou une API classique.

Dans ce cas, j'ai rapidement crée une DB sur Airtable que j'ai nommé Notesbit.

API & Cloud Services

NOTE : Bien lire les documentations des différents outils / API pour bien se connecter à Draftbit.

Une fois connecté, je peux créer mes Endpoints pour récupérer mes données ou poster des données. La procédure est simple a suivre, et l'onglet 'Test' de fin permet directement de voir la réponse de la DB.

REST API

Update Endpoint

Axes d'améliorations de l'outil

L'outil étant récent et toujours en développement, j'ai noté lors de mon court test quelques axes d'améliorations pour Draftbit.

  1. Les outils de render de l'application

Draftbit propose 3 outils pour pouvoir prévisualiser son application en cours de développement :

  • Le plus récent, le bouton play au dessus de l'écran, qui lance une version d'expo directement dans l'éditeur d'application
  • Le lien 'Share' qui permet sur un lien externe de visualiser l'application sur des émulateurs de téléphone Android et IOS
  • Le QR code sur le bouton play sur la barre du haut, qui permet de prévisualiser sur son téléphone via Expo l'application

Bien qu'avoir ces 3 choix a dispositions est super, ceux-ci ne donnent pas toujours le même aperçu.

Voici 3 exemples différents de la même pages avec les 2 premiers outils :

Ceci provient du fait que les comportements entre Android et iOS sont différents, mais l'outil de visualisation sur l'éditeur ne montre encore qu'une des 3 versions, ce qui rend le design compliqué. Dans l'exemple ci dessous, je ne peux pas faire apparaitre le clavier de téléphone sur l'outil de visualisation de l'éditeur, par conséquent cela m'oblige à visualiser sur les 3 outils pour debugger mon application :

  1. Le manque de ressource sur Internet

Conséquence immédiate du fait que l'outil soit nouveau, il est compliqué de trouver des ressources sur internet pour se perfectionner avec l'outil, ce qui peut rendre compliqué son utilisation.

A noter que Draftbit possède quelques très bon tutoriels sur sa chaine Youtube.

Conclusion

En conclusion, je trouve que Draftbit est un outil avec un potentiel fort qui pourrait avec le temps devenir une référence dans la construction d'application mobile en Nocode.

Je pense qu'actuellement l'outil a besoin d'encore du temps et de développement pour etre 100% stable et permettre une construction totale des applications.

Et vous qui avez testé Draftbit qu'en pensez vous ?