# Créez votre première application {% hint style="success" %} ### 👍 Objectifs du tutoriel Au travers de ce tutoriel, nous allons parcourir les principales fonctionnalités de Kis. Cela vous permettra de créer et d'administrer par la suite vos propres applications métiers de manière simple et efficace ! **Qu'allons-nous créer ?** Nous allons créer une application assez simple avec 3 pages. * Une page pour **afficher une liste de chats** avec différents critères : noms, âges, couleurs et sexes ; * Une page pour **créer un nouveau chat** dans la base de données ; * Une page pour **éditer les informations sur un chat** existant. Oui, chez Kis, on adore les chats 😻 {% endhint %} ## Avant de démarrer Kis se compose d'une interface unique permettant aux administrateurs de créer des micro-applications et aux utilisateurs de profiter ce ces créations. Il suffit simplement de se connecter ici: [**app.kis.work**](https://app.kis.work/login). Sur Kis, une micro-application a besoin de différents éléments pour fonctionner : * **Une liste** : elle permet de stocker les données présentes dans l'application ; * **Un menu** : il permet de naviguer dans l'application ; * **Des pages**, comme celles d'un site internet ; * **Des utilisateurs** : et là, pas besoin d'explication. *** ## 1. Créer l'application {% embed url="" %} **1 -** Sur notre **espace de travail**, dans le cadre **"Créer une nouvelle micro-app"**, on clique sur **"Aller aux applications"**. Autre possibilité : dans le menu de gauche, on se rend directement dans **Apps.** **2 -** Une fois dans le menu **Mes Applications (Apps),** on clique sur **Créer** **une application*****.*** **3 -** On ajoute un **nom** (dans notre exemple, nous appellerons l'application **Cat power**) et la **description** de la nouvelle application. Dans notre cas, ce sera ***Le chat est comme la sauce bolognaise, il retombe toujours sur ses pâtes.*** **4 -** On ajoute également **un logo ou une image** pour illustrer notre application. **5 -** Enfin, on clique sur **Créer l'application*****.*** {% hint style="success" %} ### 👍 Bravo Vous avez posé la première pierre à l'édifice ! {% endhint %} *** ## 2. Créer la liste Sur Kis, la **liste** est primordiale : c'est elle qui va accueillir les futures données que vous renseignerez dans vos pages. Vous allez voir, elle est très simple à mettre en place. Avant de [**créer notre liste**](https://doc.kis.work/documentation/importez-vos-donnees-dans-kis/creez-et-peuplez-une-liste#creer-une-liste), il faut savoir ce qu'il va y avoir dans notre application en termes de données. Dans notre cas nous voulons des chats qui possèdent chacun un **nom**, une **couleur,** un **sexe** (mâle ou femelle) et un **âge**. {% hint style="success" %} Pour visualiser plus facilement une liste, partez du principe que ça fonctionne comme un tableau. Il y a le titre du tableau (pour nous "**chats"**) et le nom de colonnes (**nom, couleur, sexe** et **age**). Les lignes (encore vides) du tableau correspondent à vos futures données. {% endhint %}
Maintenant, mettons ça en pratique. Voici un **petit tuto** qui vous permettra de créer facilement votre première liste : {% embed url="" %} **1 -** Sur notre espace de travail, on clique sur **"Voir les listes de données"** dans le cadre **"Structurer vos listes de données"**. Ou, dans le menu latéral de gauche, on se rend dans **Listes.** **2 -** On clique sur le bouton **Ajouter une liste**, en haut de la page. **3 -** On renseigne le **nom de la liste** ("**chats"**) puis on confirme avec le bouton **Ajouter la liste.** **4 -**On clique maintenant sur la ligne **chats** qui vient d'apparaître {% hint style="info" %} ### c\_at, u\_at, ID du créateur Ces 3 champs seront toujours présents dans les listes. **c\_at** = Date de création de la donnée ; **u\_at** = Date de dernière mise à jour de la donnée ; **ID du créateur** = L'identifiant unique (ID) du compte utilisateur qui a créé cette donnée. {% endhint %} **5 -** Sur la ligne des titres de colonnes, tout à droite, on clique sur **Ajouter une colonne** et on renseigne le nom de la première colonne ("**nom"**). Dans le format de la colonne, on choisit **Texte**, puis on ajoute la colonne. Et on répète l'opération pour "**couleur"** et "**sexe"**. Pour "**age"**, le format de la colonne sera un **nombre**. Vous voyez, ce n'était pas si compliqué ! *** ## 3. Créer les pages de l'application Maintenant, il est temps de passer à la **création de nos pages**. Pour rappel, nous allons créer : * une page pour afficher une liste de chats, le nombre de chats mâles et le nombre de chats femelles ; * une page pour créer un nouveau chat ; * une page pour éditer un chat. ### 3.1 Création des pages {% embed url="" %} **1 -** Rendons-nous dans l’application **Cat Power** que nous venons de créer. Dans la colonne de gauche, on voit 3 rubriques : **Pages**, **Composants** et **Données**. Dans **Pages**, il nous suffit de cliquer sur **Ajouter**. **2 -** On renomme la page **Liste des chats.** Si on le souhaite, on peut même rajouter une petite icône pour personnaliser la page. Reproduisons ces étapes pour créer deux autres pages : **Créer un chat** et **Éditer un chat** Nous avons maintenant 3 pages dans notre application. ### **3.2 Edition de la page "Liste des chats"** {% embed url="" %} **1 -** Cliquons sur la page **Liste des chats** puis sur **Nouveau container.** **2 -** On se rend dans la rubrique **Composants** où l'on retrouve tous les éléments que l'on peut intégrer à nos pages. Dans notre exemple, on allons sélectionner un **tableau**. **3 -** Glissons-déposons le bloc **Tableau** dans dans le container vide. On voit apparaître un nouvel élément dans notre page qui se nomme pour l'instant **Liste de données**. {% hint style="warning" %} Pensez bien à **enregistrer régulièrement vos modifications** : * en haut de votre colonne de gauche, à côté du nom du composant ; * en haut à droite de votre page. {% endhint %} ### 3.3 Ajout d'une source de données {% embed url="" %} Maintenant, nous allons lier notre tableau et notre liste. **1 -** Dans la rubrique **Données**, on clique sur **Ajouter** puis on nomme notre source de données, par exemple, **Chats**. **2 -** Puis, dans le menu déroulant juste en-dessous, on **sélectionne le nom de notre liste** créée précédemment, **chats**. Nous n'allons pas ajouter de [**filtres**](https://doc.kis.work/documentation/guide-de-demarrage/donnees-dynamiques/filtres) ni d'[**actions spéciales**](https://doc.kis.work/documentation/guide-de-demarrage/donnees-dynamiques/actions-speciales) car nous souhaitons récupérer l'ensemble des données de la liste **chats**. ### 3.4 Édition du composant tableau {% embed url="" %} Retournons dans **Pages** et cliquons sur le tableau pour commencer à l'éditer. **1 -** Remplaçons le **Titre de la section** par **Liste des chats.** **2 -** Pour ajouter les colonnes de notre liste, dans le menu de gauche, on clique sur simplement sur **Ajouter** à côté de **Colonnes.** **3 -** Et on paramètre cette colonne en cliquant sur la flèche à droite. Dans **Nom de la colonne**, on précise **Nom du chat.** **4 -** Puis dans **ID des données dynamiques**, on sélectionne notre source de données**, Chats.** Enfin, dans **Colonne à afficher**, on sélectionne la colonne "**nom"** de notre liste. **5 -** Et on répète ces étapes pour ajouter les colonnes **"Couleur du chat"**, **"Sexe du chat"** et **"Age du chat"**. {% hint style="info" %} ### Ne pas confondre le composant Tableau et les listes ! Le composant **Tableau** dans l'édition d'une page permet d'afficher des données sous forme de tableau. C'est un composant graphique, il n'a aucun lien direct avec les **listes**. Les noms de colonnes du composant Tableau peuvent donc être complètement différents de ceux qui sont présents dans votre liste. {% endhint %} ### 3.5 Edition de la page "Créer un chat" {% embed url="" %} On va désormais éditer notre deuxième page, **Créer un chat**. On sélectionne donc la page en question**.** **1 -** Comme pour la page précédente, on ajoute un **nouveau container**. **2 -** Dans **Composants,** on fait glisser-déposer l'élément [**Formulaire**](https://doc.kis.work/documentation/composants/formulaire) et on clique dessus pour l'éditer. **3 -** On remplace le titre du formulaire par **Créer un nouveau chat**. **4 -** On personnalise le texte du bouton, par exemple, **Valider la création.** Évidement, vous pouvez inscrire ce que vous voulez. **5 -** Juste en-dessous, on sélectionne **Création de données**. **6 -** Puis on vient lier notre formulaire à notre source de données, **Chats**. **7 -** Maintenant, on crée des **Champs** pour le formulaire. Toujours dans la colonne de gauche, on clique sur **Ajouter** puis on édite les paramètres du champ. **8 -** Dans **Nom du champ**, on renseigne "**Nom du chat**". Le type de champ correspond à celui de notre liste, donc **Texte**. Puis, dans **Champ de la table liée**, on associe notre champ "**Nom du chat**" à la colonne correspondante dans la liste, c'est-à-dire "**nom"**. **9 -** On répète cette étape **"Couleur du chat"**, **"Sexe du chat"** et "**Age du chat"**. Attention, le champ "**age"** de votre liste est un nombre donc n'oubliez pas de mettre **nombre entier** dans type de champ. {% hint style="success" %} **Félicitations ! Vous venez de créer votre premier formulaire de création !**\ Vous êtes maintenant capable de créer un formulaire qui va venir "peupler" votre liste. Avouez que c'est hyper stylé ! {% endhint %} ### **3.6 Édition de la page Éditer un chat : Etape 1** {% embed url="" %} Pour commencer, nous allons modifier notre page **Liste des chats** (vous connaissez le chemin maintenant) pour **ajouter un bouton de redirection** dans notre tableau. **1 -** Dans la page **Liste des chats**, on clique sur tableau pour pouvoir l'éditer. **2 -** Dans **Liens vers d'autres** **pages**, on clique sur **Ajouter**. On voit apparaître une nouvelle colonne **Action** dans notre tableau. **3 -** Dans les paramètres de notre nouveau lien, on peut **remplacer le texte du bouton** par ce que l'on souhaite. Pour nous, ce sera "**Editer la boule de poils"**. Et dans **Lien vers une page**, on sélectionne **Éditer un chat.** {% hint style="warning" %} Pour pouvoir **éditer de la donnée** sur une page, il faut obligatoirement qu'un **Tableau** soit présent avec un **Bouton** qui redirige vers la page sur laquelle nous souhaitons éditer la donnée. Grâce à ce bouton que vous venez d'ajouter dans le Tableau, vous allez pouvoir interagir avec les données de la ligne cliquée sur une autre page. {% endhint %} ### **3.7 Edition de la page Éditer un chat : Etape 2** {% embed url="" %} Allons maintenant modifier le contenu de notre page **Éditer un chat** **1 -** On ajoute un **nouveau container**, on fait glisser-déposer un **composant formulaire** et on clique dessus pour l'éditer. Vous commencez à connaître la chanson. **2 -** On remplace à sa guise le **Titre du formulaire** et le **texte du bouton**. **3 -** Cette fois, on sélectionne **Édition de données**. Puis on relie notre nouveau formulaire à la source de données, **Chats.** **4 -** On ajoute tous les champs que l'on souhaite rendre éditables, de la même manière que pour le premier formulaire de création de données. {% hint style="success" %} Si vous souhaitez pouvoir éditer tous les champs du formulaire de création, pour gagner du temps, vous pouvez **dupliquer la page "Liste de chats" et la renommer "Éditer un chat"**. Mais dans cette dernière page, pensez bien à **passer en Édition de données**. {% endhint %} **5 -** Pour éditer les valeurs renseignée, on va aussi remplir le champ **Valeur par défaut. Et on va entrer une formule importante à retenir :** > **\[data\_in: nom-du-champ-dans-la-liste]** Ainsi, dans notre cas : * Pour la valeur par défaut du champ Nom : **\[data\_in: nom]** (bien prendre aussi les crochets) ; * Pour la valeur par défaut du champ Couleur : **\[data\_in: couleur]** ; * Pour la valeur par défaut du champ Sexe : **\[data\_in: sexe]** ; * Pour la valeur par défaut du champ Age : **\[data\_in: age].** On pense bien à enregistrer toutes ces modifications. **6 -** Pour finir, comme cette page ne va pas être accessible directement par le menu (on arrive dessus via la page Liste des chats), on peut **Masquer la page**, en sélectionnant l'option juste au-dessus du formulaire. {% hint style="success" %} ### Bravo ! Vous savez maintenant **lister, créer et éditer des données** ! {% endhint %} ## 4. Créer des utilisateurs et leur donner accès à l'application {% embed url="" %} On arrive à la dernière étape avant de pouvoir tester notre formulaire. Mais avant ça, il faut [**ajouter un (ou des) utilisateur**](https://doc.kis.work/documentation/gestion-des-droits-dacces/gestion-des-utilisateurs#creez-vos-utilisateurs) sur l'application. Ça se déroule en deux étapes. ### Première étape (obligatoire) On se rend dans l'onglet Utilisateurs, à gauche. Puis on clique sur **Ajouter un utilisateur**. On renseigne une adresse email et on valide avec le bouton vert **Ajouter un utilisateur.** ### Deuxième étape Une fois le nouvel utilisateur créé, il vous suffit de **cliquer sur sa ligne**, dans la **colonne Applications** et de sélectionner notre app **Cat Power**. Il existe **deux autres manières** d'effectuer la même démarche. Dans **Mes applications (Apps)**, sur la ligne de notre app Cat Power, on clique dans la colonne Utilisateurs. Il ne reste plus qu'à saisir l'email de la personne à qui l'on souhaite partager l'accès et cliquer sur **Ajouter un utilisateur**. Autre solution : vous rendre **directement dans votre app** et en cliquant sur **Partager l'accès**, en haut à droite de la page. Désormais, dans votre onglet **Utilisateurs**, vous pouvez voir et gérer les apps auxquels ont accès les utilisateurs de Kis, et mettre à jour leurs [**attributs**](https://doc.kis.work/documentation/gestion-des-droits-dacces/tags). {% hint style="success" %} ### Vous êtes génial ! **Vous avez créé votre première micro-application !** Vous êtes maintenant paré pour créer plein de nouvelles app pour vos besoins métier. N'hésitez pas à regarder les tutoriels pour vous perfectionner et aller toujours plus loin ! {% endhint %} ## 5. Tester l'application côté Utilisateur Nous allons maintenant aller voir le **rendu côté utilisateur**. {% hint style="info" %} Un utilisateur qui a été ajouté dans une application mais qui ne s'est jamais connecté, doit se rendre sur [**app.kis.work**](https://app.kis.work), cliquer sur "**J'ai été invité mais je n'ai pas encore de compte"**, inscrire son adresse email puis "**Valider mon adresse email"**. Il recevra ainsi un mot de passe temporaire par mail. {% endhint %} L'application **Cat power** est automatiquement ajoutée aux favoris de l'utilisateurs. Il peut y accéder : * **en haut du menu latéral de gauche**, sur l'icône accueil (en forme de maison) ; * **en cliquant sur l'image de l'app**, tout en haut du menu, afin de faire apparaître un menu déroulant et choisir une app en favoris. Maintenant, l'utilisateur a accès aux pages **Liste Des Chats** et **Créer Un Chat**. {% embed url="" %} Il peut ainsi remplir le formulaire avec les informations demandées. Elles apparaîtront donc dans la page **Listes Des Chats**, depuis laquelle il aura accès au bouton **Éditer la boule de poils** qui le reconduira vers la page masquée **Éditer un chat**. Et, en tant qu'administrateur, toutes les informations renseignées dans le formulaire **Créer Un Chat** seront désormais disponibles dans notre liste **chats**.
Et voilà, vous savez désormais comment **créer et utiliser votre première application sur Kis** ! Il ne vous reste plus qu'à imaginer et concevoir vos propres apps qui seront utiles à votre organisation. Mais on ne se fait aucun souci : vous êtes un vrai pro, maintenant !