Aller au contenu principal

Première app pas à pas

Cette page vous guide d'une installation vide à une app fonctionnelle — une entrée de menu latéral qui ouvre une grille adossée à une requête SQL, avec une boîte de dialogue de modification. Tout se fait depuis l'UI Paramètres in-app ; rien n'est édité à la main en TOML. La séquence complète prend moins de cinq minutes une fois le framework installé.

Vous toucherez quatre types de configuration dans l'ordre — pool → connecteur → écran → menu — chacun enregistré à chaud et rechargé par le framework dans le même onglet du navigateur.


Vue d'ensemble

D'une installation vide à une entrée de menu utilisable — quatre étapes1 · POOLconnexion base de données2 · CONNECTEURrequête SQL nommée3 · ÉCRANgrille + boîte de modification4 · MENUentrée du menu latéral

L'exemple utilise le pool SQLite intégré (default) et une petite table tasks — aucune base externe nécessaire.


Étape 1 — Vérifier que le pool default existe

Ouvrez Paramètres → Pools. Sur une installation neuve, le pool default pointe déjà vers le fichier SQLite local (liberty.db). C'est suffisant pour ce parcours — aucune modification requise.

Pools
default
sqlite+aiosqlite:///liberty.db
connecté
✏️

Pour une installation réelle, basculez vers une URL PostgreSQL ou Oracle — tous les formats de chaîne de connexion et les options sont documentés dans Configuration → Variables d'environnement.

Créez ensuite la table d'exemple une seule fois via le shell SQLite :

CREATE TABLE tasks (
id INTEGER PRIMARY KEY AUTOINCREMENT,
title TEXT NOT NULL,
status TEXT NOT NULL DEFAULT 'open',
due_date DATE,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
INSERT INTO tasks(title, status, due_date) VALUES
('Draft sprint plan', 'open', '2026-06-10'),
('Review pull request 42', 'done', '2026-06-05'),
('Customer follow-up', 'open', '2026-06-12');

Étape 2 — Définir un connecteur SQL

Un connecteur est une requête nommée contre un pool. Ouvrez Paramètres → Connecteurs → ➕ Nouveau connecteur et remplissez :

ChampValeur
Nomtasks
Pooldefault
Typesql
Requête de lectureSELECT id, title, status, due_date FROM tasks ORDER BY due_date
Écriture — insertINSERT INTO tasks(title, status, due_date) VALUES (:title, :status, :due_date)
Écriture — updateUPDATE tasks SET title = :title, status = :status, due_date = :due_date WHERE id = :id
Écriture — deleteDELETE FROM tasks WHERE id = :id

Le schéma de la requête de lecture est découvert à l'exécution — le framework demande à la base de données « quelles colonnes renvoie cette requête ? » la première fois que le connecteur est utilisé. Inutile de le déclarer à l'avance.

Cliquez sur Enregistrer. Le connecteur apparaît dans la page catalogue (ouvrez / dans un autre onglet pour le voir). Connecteurs couvre toutes les options et les types de connecteurs HTTP / API.


Étape 3 — Construire un écran sur le connecteur

Un écran enveloppe un connecteur dans une grille + boîte de dialogue de modification. Ouvrez Paramètres → Écrans → ➕ Nouvel écran :

ChampValeur
Apptutorial
Identifiant d'écrantasks
TitreTasks
Connecteurtasks
Colonnes clésid
Modifiable✓ (active les actions Ajouter / Modifier / Supprimer)

Les colonnes de la grille et la boîte de dialogue de modification sont dérivées automatiquement des colonnes de la requête de lecture. Pour ajouter des libellés localisés, des règles de validation ou des badges booléens, la prochaine étape est la page Dictionnaire.

Cliquez sur Enregistrer, puis ouvrez l'URL http://127.0.0.1:8000/screens/tutorial/tasks — la grille est déjà active.

Tasks
↻ Rafraîchir+ Ajouter
ID
Titre
Statut
Échéance
1
Draft sprint plan
open
10/06/2026
2
Review pull request 42
done
05/06/2026
3
Customer follow-up
open
12/06/2026

Cliquez sur n'importe quelle ligne — la boîte de dialogue de modification s'ouvre avec les quatre champs, Enregistrer déclenche la requête de mise à jour, Supprimer déclenche la requête de suppression, + Ajouter ouvre un formulaire vide lié à la requête d'insertion.

Écrans couvre les onglets, les conditions par champ, les lectures/écritures inter-connecteurs et l'ensemble complet des options de boîte de dialogue.


Étape 4 — Le brancher dans le menu latéral

Ouvrez Paramètres → Menus → ➕ Nouvelle feuille (ou étendez une arborescence existante) :

ChampValeur
ParentNiveau racine
LibelléTasks
Typequery
Connecteurtasks
Écrantutorial/tasks
Icônelist-todo (n'importe quelle icône Lucide)

Enregistrez. Le menu latéral se rafraîchit automatiquement — l'entrée Tasks apparaît avec l'icône et ouvre l'écran au clic. Le pipeline de rechargement à chaud du framework a propagé la nouvelle arborescence de menu sans redémarrage ; il en va de même pour toute édition dans Paramètres. Voir Rechargement à chaud pour la mécanique exacte.


Ce que vous avez maintenant

Une app fonctionnelle avec :

  • Un pool qui détient la connexion à la base de données.
  • Un connecteur qui porte les requêtes de lecture + écriture.
  • Un écran qui transforme le connecteur en grille + boîte de dialogue de modification.
  • Une entrée de menu qui présente l'écran dans le menu latéral.

Quatre blocs TOML en coulisses — les quatre fichiers ont été mis à jour sur place sous liberty-apps/config/, aucun redémarrage nécessaire. Regardez-les avec git diff pour voir à quoi ressemble une édition typique.


Pour aller plus loin