Pourquoi des composants ?
Les composants personnalisés inclus dans l'outil no-code Adalo permettent d'ajouter des fonctions que l'éditeur drag-and-drop de la plateforme ne propose pas encore (animations, intégration d'APIs natives, widgets interactifs, etc.). Une fois publiés, vous pouvez les réutiliser dans tous vos projets, les partager à votre équipe... ou même les vendre sur le Marketplace d'Adalo pour générer un revenu passif !
Prérequis express
| Outil | Version conseillée | Rôle |
|---|---|---|
| Node.js | ≥ v18 (v10.2 min) | Environnement JavaScript |
| Compte Adalo | Gratuit ou payant | Activez « Developer Mode » pour voir vos composants en dev |
| create-adalo-component | Accessible via npx |
Génère le squelette de bibliothèque |
| Git + GitHub (optionnel) | — | Versionner et collaborer |
Astuce : Sur macOS ou Windows, utilisez nvm pour jongler entre versions Node sans casser d'autres projets.
Étape 1 : Bootstraper votre composant
Ouvrez un terminal à l'emplacement voulu et tapez :
npx create-adalo-component step-counter
cd step-counter
Connectez-vous :
npx adalo login
Lancez le serveur local :
npx adalo dev
L'outil crée aussitôt :
- un
manifest.jsonminimal - une composant minimal React (web + mobile)
Étape 2 : Tester dans l'éditeur
- Dans Adalo, ouvrez n'importe quel écran puis Add › Development : votre composant apparaît déjà.
- Glissez-déposez-le, paramétrez les props dans le panneau de droite et lancez Preview pour tester côté web.
- Mobile : scannez le QR code du preview ou construisez un APK/IPA ad hoc ; cela évite les surprises de dépendances « web-only ».
Étape 3 : Personnaliser votre composant
src/index.js: cœur du rendu React/React-Native.adalo.json: déclare les contrôles (texte, couleur, data, actions) ainsi que les informations du composant (description, prix, etc...).package.json: remplissez le bloc"adalo"(label, author, icon, etc.). Les champs essentiels sont obligatoires avant la publication. developers.adalo.com
Keep it simple : commencez par une seule plateforme puis factorisez le code (hooks natifs ou libs cross-platform) avant d'ajouter la version web/iOS/Android.
Étape 4: Valider qualité & accessibilité
- Vérifiez le redimensionnement automatique (layout responsive).
- Testez Actions (navigate, update data) et Permissions (write/read).
- Utilisez adb (Android) et Xcode (iOS) pour inspecter les logs si besoin.
Étape 5 : Publier en un clic
Afin de publier votre composant sur le marketplace d'Adalo, vous pouvez utiliser le cli (command line interface) d'Adalo. Il permet de publier votre composant en une commande. Quand tout est stable vous pouvez entrer dans le terminal :
npx adalo publish
Le CLI compile, empaquète et pousse votre librairie sur le registry Adalo. Choisissez :
- Public : visible sur le Marketplace (monétisable).
- Private : réservé à vos apps ou à des clients précis. developers.adalo.com
Bonus : quatres bonnes pratiques « simplicité »
- Un composant = un objectif: séparez Slider, Progress Bar, etc.
- Zéro config complexe: préférez des valeurs par défaut parlantes, suivez les guidelines de la plateforme concernant la mise en place de la configuration des composants.
- Design system Adalo: reprenez les couleurs primaires/secondaires automatiques (
Colors and Brandingdans la doc). - Pas d'API bloquante: encapsulez vos appels réseau par un état « loading » pour éviter d'immobiliser l'écran.
Ressources rapides
- Docs officielles : developers.adalo.com (
Creating a Component,Testing,Publishing). - Forum : tag Component Developers pour demander de l'aide (ex. discussion du 1 juillet 2025). Adalo
- GPT personalisé permettant d'accélerer la création de composants (génération du manifest et du code associé) : Adalo Component GPT
Conclusion
Grâce au CLI et au Developer Mode, créer un composant Adalo n'exige plus qu'une poignée de commandes : npx create-adalo-component → npx adalo dev → npx adalo publish. Concentrez-vous sur la logique métier, laissez Adalo se charger du packaging, et libérez votre créativité... simplement !
