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 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 😻
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.
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
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.
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, 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.
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.
Maintenant, mettons ça en pratique. Voici un petit tuto qui vous permettra de créer facilement votre première liste :
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
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.
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
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"
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.
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, 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 ni d'actions spéciales car nous souhaitons récupérer l'ensemble des données de la liste 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 liste.
5 - Et on répète ces étapes pour ajouter les colonnes "Couleur du chat", "Sexe du chat" et "Age du chat".
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.
3.5 Edition de la page "Créer un chat"
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 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.
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é !
3.6 Édition de la page Éditer un chat : Etape 1
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.
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-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.
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
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.
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 !
5. Tester l'application côté Utilisateur
Nous allons maintenant aller voir le rendu côté utilisateur.
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.
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.
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 !
Last updated