Gestion des clients
Une liste de clients et une fiche avec champs obligatoires et validation d'e-mail, sans écrire une ligne de code.
Type : BERKIOS Studio · Niveau : débutant · Fichier : gestion-clients.berkios.json
Ce que vous allez apprendre
- Importer un projet dans le Studio.
- Reconnaître les composants d'une application : texte, champ, tableau, bouton.
- Tester un formulaire avec validation dans l'aperçu.
Avant de commencer
Téléchargez et installez le Studio.
Étape 1 : importer l'exemple
- Téléchargez l'exemple et décompressez-le.
- Lancez le Studio.
- Fichier → Importer, puis choisissez
gestion-clients.berkios.json.
Étape 2 : explorer l'écran
L'application contient une seule interface, Accueil, avec dix composants :
| Composant | Type | Rôle |
|---|---|---|
title | Étiquette | Le titre « Gestion des clients » |
search | Champ | Recherche d'un client |
clients | Tableau | Quatre clients de démonstration : référence, nom, e-mail, statut |
detail-title | Étiquette | Le titre « Fiche client » |
name | Champ | Nom complet, obligatoire |
email | Champ | Adresse e-mail, obligatoire et au bon format |
phone | Champ | Téléphone (facultatif) |
save | Bouton | « Valider le formulaire » : lance la validation |
reset | Bouton | « Effacer » : vide le formulaire |
note | Étiquette | Rappel : validation locale uniquement |
Sélectionnez un composant pour voir et modifier ses propriétés dans le panneau des propriétés.
Étape 3 : tester dans l'aperçu
Passez en mode Aperçu et essayez :
- Cliquez sur Valider le formulaire sans rien saisir : le nom et l'e-mail sont signalés comme obligatoires.
- Saisissez un nom et l'e-mail
amina@exemple: le message « Adresse e-mail invalide. » s'affiche. - Corrigez l'e-mail en
amina@exemple.com: le formulaire est valide. - Cliquez sur Effacer : tous les champs sont vidés.
Comment la validation fonctionne
Résumé des règles du champ e-mail :
obligatoire : oui
format : ^[^@\s]+@[^@\s]+\.[^@\s]+$
message : Adresse e-mail invalide.Le format est une expression régulière : du texte, puis @, puis du texte, puis un point, puis du texte, sans espace. Les deux boutons utilisent des actions toutes faites : « envoyer le formulaire » (submit-form) et « vider le formulaire » (reset-form).
Limites
Cet exemple est autonome : la validation se fait dans l'aperçu, sans sauvegarde sur un serveur. Pour enregistrer les données, voir Actions SQLite.
À vous de jouer
Dans le Studio, ajoutez une règle d'obligation sur le champ Téléphone, puis testez dans l'aperçu.
Pour aller plus loin
- Exemple suivant : Messages et dialogues
- Leçon : Démarrer avec le Studio
Cette page en Markdown · llms.txt · documentation complète pour les IA