Adalo Tutoriel l'outil Nocode indispensable

Adalo est une plateforme basée sur un navigateur qui permet à chacun de créer des applications aussi facilement qu’un jeu de diapositives. Elle vous donne la possibilité de concevoir, de créer et de lancer des applications géniales par vous-même.

Je vais t’envoyer la Liste des meilleurs outils Nocode sur le marché (des pépites) Inscrit toi sur cette page ICI

Dans ce tutoriel, vous découvrirez les bases d’Adalo, sa mise en page et son fonctionnement.

1. Introduction à Adalo

Avec Adalo, il est facile de créer un super design pour votre application. Grâce au drag and drop (glisser-déposer) ou par la création de votre propre design en utilisant les outils de mise en page.

Il vous donne la possibilité d’ajouter des interactions, des actions et une configuration de base de données personnalisées sans aucun code ou, si vous avez déjà votre API, Adalo peut s’y intégrer.

Vous pouvez lancer vos applications sur les deux boutiques d’applications iOS/Android ou en tant que PWA en un seul clic depuis Adalo.

2. Comment démarrer sur Adalo ?

Dans cette section, vous allez apprendre comment démarrer avec Adalo.

1. Visitez le site web Adalo, créez un nouveau compte si vous n’en avez pas.
2. Créez une nouvelle application après avoir créé un compte sur Adalo.
3. Choisissez le type d’application que vous souhaitez créer, qu’il s’agisse d’une application mobile native ou d’une application web de bureau, sélectionnez un modèle ou un écran vierge, entrez le nom de votre application et sélectionnez les couleurs de votre marque.

Les options avancées vous permettent de définir votre entrée/source de données pour votre application en créant une nouvelle base de données/en configurant une nouvelle API.

Ou en partageant des bases de données avec une application existante disponible dans le tableau de bord de votre projet.

Ce processus ouvre l’éditeur d’application et crée automatiquement 3 écrans sur la toile contenant un flux d’inscription et un écran vide avec une barre d’application que vous pouvez supprimer pour créer le vôtre.

Si vous utilisez un template, il affichera les écrans disponibles dans le modèle que vous utilisez.

3. Navigations dans Adalo

Dans cette section, vous découvrirez toutes les navigations dans Adalo et comment il peut vous aider à accélérer votre développement.

I/ Barre d’outils

Par défaut, la barre d’outils Adalo s’affiche sur le côté gauche et en haut de l’écran.

Elle comprend les parties les plus importantes de la plate-forme, notamment la navigation dans l’application, l’expérience d’édition, l’image de marque, la base de données et les paramètres de l’application.

Considérez cela comme deux sections distinctes où la barre latérale contrôle et la barre de navigation supérieure.

II/ Commandes de la barre latérale

Ces contrôles s’ouvrent dans la barre latérale qui agit comme un commutateur à onglets entre les différentes informations qu’ils montrent et ce qu’ils sont censés faire. Elles comprennent :

• Ajouter une couche (composants et écrans)
• Marque
• Écrans
• Données
• Paramètrer
• Publier

4. Comment commencer à construire sur Adalo ?

Ajouter « Add Layer »

L’outil « Add Layer » se compose de deux onglets qui comprennent le composant d’ajout et l’écran d’ajout.

• L’onglet Ajouter un composant contient 9 sections de composant différentes qui sont les plus utilisées, navigation, listes, boutons, simple, formulaires et champ, paiement à bande, cartes et carte. Ces composants vous permettent d’utiliser les composants de l’interface utilisateur dans votre application.

• L’onglet « Ajouter un écran » vous permet d’ajouter des écrans de mise en page prédéfinis ou un écran vierge. Vous pouvez créer un nouvel écran d’application en cliquant simplement sur celui-ci, après avoir créé l’écran d’application, il affichera les propriétés de l’écran qui contient le nom de l’application, les types de navigation à l’écran, les actions, les données disponibles et les paramètres avec la possibilité de modifier les styles. Le bouton de modification du style vous permettra de manipuler la taille de l’écran, la couleur de fond, la barre d’état et les préférences de défilement.

I/ Les plus utilisés sur Adalo

Cet outil contient 6 composants différents qui comprennent l’outil texte, les boutons, la liste simple, la barre d’application, l’image et le formulaire.

II/ Navigation

Cela permet d’obtenir de riches composants matériels tels que la barre d’application et la barre d’onglets.

Lorsque vous choisissez l’un des composants de la barre d’outils, cela vous donne la possibilité de personnaliser la couleur de remplissage, l’onglet actif, la couleur du texte/de l’icône, la visibilité et les actions qui se produisent chaque fois qu’un utilisateur visite l’écran.

III/ Formulaires et champs

Il existe plusieurs variétés d’options de formulaire dans Adalo. Allant du formulaire normal, de la saisie de texte, de la sélection d’images pour le téléchargement d’images et du chargement des fichiers.

Pour utiliser le formulaire, vous devrez créer une base de données d’utilisateurs dans la section Données qui sera traitée plus loin dans ce tutoriel.

IV/ Composant Stripe

Stripe est un de paiements en ligne qui permet aux particuliers et aux entreprises d’effectuer des paiements sur Internet.

Le composant Stripe dans Adalo peut être utilisé pour intégrer le système de paiement dans votre application. Il vous permet de vous connecter à l’API Stripe pour obtenir:

• votre identifiant d’application,
• définir le montant du paiement,
• définir la description de vos frais,
• la configuration de l’email des acheteurs
• la personnalisation du bouton d’envoi où vous pouvez modifier le texte: lorsque le paiement est réussi la couleur de remplissage et la couleur du texte.

Il y a 4 composants de paiement Stripe disponibles dans Adalo qui sont le paiement Stripe, l’abonnement Stripe, le paiement ACH et Stripe connect.

V/ Composant de la carte

Le composant de carte dans Adalo permet d’ajouter Google Maps dans votre application en utilisant la clé API Google Maps. Vous pouvez également modifier le style de la carte en fonction de vos préférences.

VI/ Simple

Outil Rectangle et Ellipse: permet de créer des formes qui peuvent être utilisées comme boutons ou pour d’autres composants.

Lorsqu’elle a été placée, la barre d’outils des formes apparaît à gauche, près de la barre latérale.

Elle peut être utilisée pour définir les interactions, la connexion à la base de données et ses propriétés telles que le positionnement, la taille (hauteur et largeur), l’arrière-plan, la bordure (couleur et taille), le rayon de la bordure, l’opacité et les ombres.

Outil texte: Il peut être utilisé pour créer/placer du texte comme son nom l’indique. Pour l’utiliser, il suffit de sélectionner l’outil texte dans la couche ajoutée dans la barre latérale et de le placer sur l’écran de l’application.

Lorsqu’il a été placé, la barre d’outils textuels apparaîtra à gauche, près de la barre latérale.

Elle peut être utilisée pour définir les interactions, la connexion à la base de données et ses propriétés telles que le positionnement, la taille, le caractère de remplissage, la couleur, la taille de la police, le poids de la police, le statut, l’opacité, l’alignement et sa largeur.

Outil d’image: Cet outil peut être utilisé pour télécharger et utiliser une image dans votre application.

Outil Vecteur: Les outils vectoriels fonctionnent comme l’outil stylo dans la plupart des outils de conception qui peuvent être utilisés pour dessiner des lignes/formes libres en faisant glisser le curseur sur l’écran de votre application.

Lorsque vous avez terminé de dessiner, la barre d’outils de forme apparaîtra à gauche, près de la barre latérale, qui peut être utilisée pour définir les interactions, la connexion à la base de données et les propriétés.

WebView: Les composants Webview peuvent être utilisés pour afficher du contenu en ligne dans des applications. Si vous souhaitez intégrer une page web dans votre application, vous pouvez le faire en utilisant le composant web-view.

5. Les différentes Fonctions

I/ Marque

La fonction de marquage dans Adalo vous permet de définir les couleurs primaires et secondaires de votre application, qui peuvent être définies comme primaires, secondaires, de fond par défaut et de couleur de texte par défaut.

II/ Écrans

L’onglet écrans met en évidence tous les écrans de l’application disponibles dans votre projet et leurs composants respectifs.

Ce qui vous permet de naviguer dans leurs composants racine pour une personnalisation adéquate ou de désactiver leur visibilité.

III/ Données et Base de données

Cela sert de saisie de données sur votre application qui crée une base de données aussi simple que l’installation d’un tableur.

Vous pouvez créer des tableaux, ajouter des colonnes et définir le type de nom de la colonne.

Le gestionnaire de données est particulièrement utile lorsque vous créez une application avec un flux d’inscription ou toute personne pouvant collecter et stocker des données dans une base de données.

La première colonne que vous créez peut servir de clé primaire de vos bases de données.

Après avoir créé les titres de vos colonnes, vous remarquerez un bouton d’action sur le côté gauche vers le bas, cela vous permet de créer des valeurs pour les lignes de la colonne.

IV/ Paramètres

L’onglet « Paramètres » comprend quatre sections, qui sont

Paramétrage de l’application

L’onglet des paramètres de l’application vous permet de modifier le nom de votre application, sa description, d’ajouter une icône d’application avec une recommandation de 1024 par 1024 tailles.

Il vous permet également d’intégrer Mixpanel afin de pouvoir suivre l’utilisation de votre application.

Paramètres d’affichage

Cela vous permet de montrer comment un écran est lié à l’autre lorsqu’on l’allume.

Accès à l’application

L’accès à l’application  permet d’ajouter des contributeurs ainsi que des membres de l’équipe dans votre application. L’objectif est de pouvoir collaborer à un projet d’application via leur adresse email.

Copier / Supprimer

Le bouton copier l’application vous permet de dupliquer l’ensemble de l’application avec sa base de données et permet également de partager la base de données avec une autre application.

Tandis que le bouton supprimer l’application vous permet de supprimer définitivement votre application et sa base de données.

6. Comment Publier sur Adalo ?

Dans Adalo, la publication de votre application est facile à mettre en place dans les boutiques d’applications iOS/Android ou en Web progressive (PWA). Elle est disponible gratuitement et comporte également des abonnements premium qui peuvent être mis à jour à tout moment.

I/ Barre de navigation supérieure

La barre de navigation supérieure comprend le nom de l’application, le bouton de prévisualisation, le lien de partage et le compte utilisateur.

Aperçu : La fonction de prévisualisation vous permet de visualiser le flux de votre application de manière à ce que les écrans soient reliés entre eux.

Partager : Cela vous permet d’obtenir un lien qui vous permet de partager votre application. Ainsi que d’envoyer le lien à un numéro de téléphone par SMS pour qu’il puisse le visualiser.

Compte d’utilisateur : Il comprend les paramètres, l’aide et la documentation, ainsi que la déconnexion. Les paramètres vous permettent de contrôler votre compte sur Adalo grâce à la mise à jour de votre profil, l’équipe et la facturation, et les domaines.

II/ Utilisation de WebView dans Adalo

Dans cette section, vous apprendrez comment utiliser le composant webview dans Adalo. Pour utiliser web-view, il vous suffit de connaître l’URL du site web que vous souhaitez utiliser.

III/ Création de l’application

Les étapes suivantes constituent le processus de base de la création d’une application avec un composant de visualisation web dans Adalo ;

Étape 1: Créez une nouvelle application sur Adalo, choisissez la plateforme ou vous souhaitez créer votre application

Étape 2: Faites glisser et déposez le composant web-view dans l’écran de l’application.

Étape 3: Collez l’URL du site web dans le champ de saisie de l’URL dans Adalo.

Étape 4: Prévisualisez votre application.

7. Conclusion 

Dans ce tutoriel, vous avez pu vous familiariser avec le fonctionnement d’Adalo.

Construire des applications dans Adalo est facile dans la prise en main de l’outil. Vous avez vu les mises en page et les étapes nécessaires pour créer une application géniale avec Adalo;

Pour allez plus loin vous pouvez lire l’article sur le Nocode