Adalo - Applications Android & IOS

1 . Définition

* **Adalo** est une plateforme qui permet de créer son application mobile (**Android** & **IOS**) sans avoir besoin de coder quoi que ce soit. Il permet aussi de créer des sites internet mais nous ne verrons pas cela avec **Adalo**. * Elle utilise un système de drap & drop qui permet de visualiser en temps réel quel sera le design de votre application. * La plateforme est 100% en Anglais, une petite base d’anglais informatique est donc nécessaire 😊. * Pour l’utiliser vous devez au préalable vous créer un compte. * A la fin de ce tutoriel vous devriez être capable de créer une application sur la plateforme.

2 . Créer votre première application

Rendez-vous sur le site : [Adalo]( https://www.adalo.com/) puis, après avoir créé un compte, retournez sur la page d’accueil et vous pourrez cliquer sur le bouton « **Get started for free** ! »  Enfin, vous arriverez sur cette page :  Cliquez sur « **Add a screen** » pour créer la première page de votre application. Vous allez alors pouvoir nommer votre application puis sélectionner un template de base. Pour ce tutoriel, nous allons utiliser « **Blank Screen** » qui est un template sans rien dedans, vous allez devoir donc tout créer 😊. Après l’avoir nommé, cliquez sur « **Create Screen** »  Vous voici maintenant dans l’interface pour développer votre application. Dans ce tutoriel nous allons créer une application de mémo. Nous allons donc chercher un composant pour créer un formulaire qui va permettre d’entrer des valeurs dans une base de données (Le nom du mémo et une date de fin). Pour ajouter un composant vous pouvez cliquer sur le petit « **+** » en haut à gauche de l’interface et rechercher ce que vous voulez. Nous, nous allons chercher « **form** » pour trouver le formulaire. Une fois trouvé, vous allez pouvoir cliquer dessus et le déposé là où vous voulez sur votre application.    Vous allez maintenant cliquer sur le bouton « **database** » sur la gauche de l’interface pour créer une base de données qui va stocker nos mémos.  Une fois fait, cliquez sur « **Add Collection** »  Pour le tutoriel, nous allons appeler notre collection « **memo** ». Pour sauvegarder, cliquez sur « **Add** ».   Comme vous pouvez le voir une propriété « **name** » est déjà créée et ne peut être supprimée, nous l’utiliserons donc à notre avantage pour donner un nom à nos tâches à effectuer. Pour ajouter une date de fin à nos tâches nous allons cliquer sur « **Add** **property** » puis sélectionner « **Date** » et enfin le nommer « **date_fin** » avant de cliquer sur « **Save** ».   Notre base de données est prête, nous allons maintenant faire en sorte que le composant « **form** » que nous avons implantée ci-dessus remplisse la base de données. Pour cela, vous devez cliquer sur votre form dans l’application et un menu sur votre gauche va apparaître. Dans « Which data collection ? » vous mettez « **memo** » et dans « **What do you want the form to do ?** » vous mettez « **Create New memo **»  Comme vous pouvez le voir votre formulaire est changé pour ajouter un nouveau mémo facilement (un nom et une date de fin).  Toujours sur votre gauche, en cliquant sur « **Fields** » vous pouvez aussi changer le nom « **Name** » pour mettre « **Nom du mémo** » par exemple mais aussi le mettre en requis afin d’éviter des erreurs.  Idem pour le bouton d’envoi, vous pouvez même changer son style en cliquant sur « **Submit Button** » puis « **Edit** **Styles** ».  Pour lancer votre application vous pouvez cliquer sur « **Preview** » en haut à droite et créer un mémo de votre choix et le sauvegarder en appuyant sur le bouton d’envoi !  Vous allez pouvoir retourner dans votre base de données pour voir que vous avez « **1 record** ». Pour le voir cliquez sur « **View / Edit Records** » et vous verrez ce que vous avez entré précédemment.   Maintenant nous allons afficher les mémos dans votre application. Retournez sur le petit bouton « **+** », cherchez « **list** » puis prenez la « **Simple List** » pour la mettre dans votre application en dessous du formulaire d’envoi.  Une fois fait, vous allez cliquer sur votre liste dans votre interface et sur la gauche vous allez cliquer sur « **What is this a list of ?** » et sélectionnez « **memo** ».  Vous verrez de ce fait que les noms des mémos que vous avez entrés seront affichés. Nous allons maintenant mettre une date de fin.  Pour cela rendez-vous dans « **Subtitle** » effacez le texte déjà écrit, cliquez sur le petit « **T** » et enfin sélectionnez « **date_fin** ».    Pour retirer le rond sur la gauche allez dans « **Left Section** » et décochez le « **switch** » sur la droite :  Afin de supprimer un mémo vous devez aller dans « **Simple List** » puis cliquez sur « **Right Section** » et cochez-le pour l’activer.   Vous pouvez ensuite choisir une icône en cliquant sur « **Icon** ». Nous allons choisir une icône de poubelle (**delete**).  Enfin, cliquez sur « **Add Action** » --> « **Delete** » --> « **Current** **Memo** »  Et vous aurez la possibilité de supprimer vos mémos en cliquant sur la petite corbeille quand l’application sera lancée !  Voici le rendu final. Vous avez créé votre première application mobile no-code :  Voici un exemple d’application que vous pouvez faire : 

3 . Astuces en vrac

Voici quelques petites astuces avec Adalo :

4 . Générer un QR Code pour votre application

Pour cela vous allez devoir cliquer sur le petit « **+** » en haut à gauche puis descendre jusqu’à « **Explore Marketplace** »  En haut, recherchez « **qr** » et cliquez sur « **install** » quand vous verrez « **QR Code Generator** » et enfin, cliquez sur « **Done** »  Pour créer un QR Code, dirigez-vous vers « **Installed** » et cliquez sur l’image du QR Code pour le mettre sur votre application. 

5 . Ajouter un feed Twitter

Comme dans l’astuce précédente vous allez devoir allez dans le marketplace, recherchez « **tw** », cliquez sur « **Install** » quand vous avez trouvé « **Twitter Timeline** » et enfin cliquez sur « **Done** ».  Après l’avoir mis dans votre application vous allez pouvoir entrer le nom d’utilisateur Twitter que vous voulez puis cliquez sur « Timeline Options ».  Vous pourrez ainsi choisir le thème, le nombre de tweets qui vont apparaître et plein d’autres choses que vous pourrez découvrir 😊  Résultat avec un thème dark : 

6 . Changer le fond de l’application

Si vous souhaitez changer le fond de l’application (faire une application avec un thème dark) rendez-vous dans « **Branding** » sur votre gauche puis « **Colors** » ensuite allez sur « **Default Background Color** » et choisissez la couleur que vous voulez !  

7 . Faire des formes rectangulaires

Vous pouvez faire des formes rectangulaires en allant sur le gros « **+** » puis « **Simple** » et vous allez chercher « **Rectangle** » :  Après l’avoir déposé dans votre application vous pouvez le modifier comme vous voulez dans ses paramètres : 

8 . Créer une nouvelle fenêtre

Pour créer une nouvelle fenêtre dans votre application vous allez devoir cliquer sur le gros « **+** » en haut à droite puis allez dans « **Add Screen** » et enfin choisir si vous voulez ou non un template.  Une fois fait, vous allez devoir choisir un nom puis cliquez sur « **Create Screen** » 

9 . Changer la police de l’application

Si vous souhaitez changer la police de l’application rendez-vous dans « **Branding** » sur votre gauche puis « **Fonts** », ensuite allez sur « **Body** » et/ou « **Headings** » et choisissez la/les police que vous voulez ! 

10 . Créer une nouvelle application

Pour créer une nouvelle application vous allez devoir aller en haut d’Adalo puis cliquez sur « **Create new App** »