Créez votre première application
Vous venez d'arriver sur Kis et vous êtes un peu perdu ? Pas d'inquiétude, c'est normal. Mais ça tombe bien : vous êtes au bon endroit découvrir comment démarrer sur Kis !
👍 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, 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
Oui, la team KIS adore les chats 😻
Avant de démarrer
KIS se divise en deux interfaces : une interface administrateur pour la gestion et la création, cloud.kis.work , et une interface utilisateur pour l'affichage et l'édition, app.kis.work.
Une application a besoin de différents éléments pour fonctionner :
Une table de données : 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
1 - Sur l'interface administrateur, rendons-nous dans Mes applications puis cliquons sur Créer une application.
2 - Ajoutons le nom (dans notre exemple nous appellerons l'application Cat power) et la description de la nouvelle application (pour nous ce sera Le chat est comme la sauce bolognaise, il retombe toujours sur ses pâtes.)
3 - Cliquons sur Créer l'application.
2. Créer la table de données de l'application
Sur Kis, la table de données 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 table, 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 et un sexe (mâle ou femelle) et un âge.
Pour visualiser plus facilement une table de données, 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.
chats
nom
couleur
sexe
age
-
-
-
Mettons ça en pratique :
1 - Rendons-nous dans Tables de données puis Ajouter une table, renseignons le nom de la table (chats) puis cliquons sur créer la table de données.
2 -Cliquons maintenant sur le lien chats qui vient d'apparaître
c_at, u_at, ID du créateur
Ces 3 champs seront toujours présents dans les tables de données. 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
3 - On cloque sur Ajouter une colonne, 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
1 - Rendons-nous dans Apps puis 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 petit 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"
1 - Cliquons sur la page Liste des chats puis sur Nouveau container.
3 - 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.
4 - Glissons-déposons le bloc Tableau dans dans le container vide. On voit apparaître un nouvel élément dans notre page, dans l'espace du container, qui se nomme pour l'instant Liste de données.
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.
3.3 Ajout d'une source de données
Maintenant, on va lier notre tableau et notre table de données.
1 - Dans la rubrique Données, 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 table de données créée précédemment, chats.
Nous n'allons pas ajouter de filtres car nous souhaitons récupérer l'ensemble des données de la table de données chats.
3.4 Édition du composant tableau
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 table de données.
5 - Et on répète ces étapes pour ajouter les colonnes "Couleur du chat", "Sexe du chat" & "Age du chat".
Ne pas confondre le composant Tableau et les tables de données
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 tables de données. Les noms de colonnes du composant Tableau peuvent donc être complètement différents de ceux qui sont présents dans votre table de données.
3.5 Edition de la page Créer un chat
On va désormais éditer notre deuxième page, Créer un chat. On retourne donc dans notre rubrique Pages puis on sélectionne 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 Formulaire de saisie et on clique dessus pour l'éditer.
3 - Remplaçons le titre du formulaire par Créer un nouveau chat.
4 - On peut personnaliser 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 votre table de données, donc Texte. Puis, dans Champ de la table liée, on associe notre champ "Nom du chat" à la colonne correspondante dans la table de données, 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 table de données est un nombre donc n'oubliez pas de mettre nombre entier dans type de champ.
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 table de données. Avouez que c'est hyper stylé !
3.6 Édition de la page Éditer un chat : Etape 1
Nous allons donc aller modifier le contenu de notre page Liste des chats (vous connaissez le chemin maintenant) pour ajouter un bouton de redirection dans notre tableau.
1 - Dans la page Liste de 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.
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.
3.7 Edition de la page Éditer un chat : Etape 2
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.
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.
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-table-de-donnée]
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.
4. Créer des utilisateurs et leur donner accès à l'application
On arrive à la dernière étape avant de pouvoir tester notre formulaire. Mais avant ça, il faut ajouter un (ou des) utilisateur 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
Retournons dans Mes applications. Sur la ligne de notre app Cat Power, on clique sur le symbole de partage. Il ne reste plus qu'à saisir l'email de l'utilisateur à qui l'on souhaite partager l'accès et cliquer sur Ajouter.
Vous pouvez effectuer la même démarche, en vous rendant 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.
Vous êtes génial !
Vous avez créé votre première application, et être maintenant paré pour créer des applications pour vos besoins métier. N'hésitez pas à regarder les tutoriels pour vous perfectionner et aller toujours plus loin !
5. Tester l'application côté Utilisateur
C'est parti, on se met en mode utilisateur : rendez-vous sur app.kis.work.
Un utilisateur qui a été ajouté dans une application mais qui ne s'est jamais connecté, doit se rendre sur 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.
Si vous ne l'avez pas fait avec l'utilisateur précédemment créé, vous pouvez le faire et allez vous connecter avec votre email et mot de passe temporaire.
Maintenant, l'utilisateur a accès aux pages Liste Des Chats et Créer Un Chat.
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 table de données 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 !
Last updated