Données et CMS

Le panneau Données regroupe le contenu et les données de votre site. Ouvrez-le avec l’icône Données dans la barre latérale gauche. Il comporte deux onglets :

• Contenu : des collections stockées dans le code de votre site. Chaque site en dispose, sans configuration. Utilisez-les pour le contenu que vous modifiez vous-même, comme les menus, les membres de l’équipe, les FAQ ou les articles de blog.
• Source de données : les tables d’une base de données ou d’une feuille de calcul que vous connectez. Utilisez-en une lorsque votre site doit enregistrer ce que les visiteurs envoient, comme des inscriptions, des commandes, des réservations ou des comptes utilisateur. Une fois la connexion établie, l’onglet affiche le nom de la source.

Conseil

Si votre contenu est écrit directement dans une page, demandez à l’IA de le déplacer dans une collection : « déplace mon menu dans une collection pour que je puisse le modifier moi-même ».

Collections de contenu

Chaque collection est un fichier dans le dossier src/data de votre site. Les modifications apparaissent immédiatement dans l’aperçu et sur votre site en ligne lorsque vous publiez.

Créer une collection

Cliquez sur + en haut du panneau, saisissez un nom et cliquez sur Créer. La fenêtre affiche le fichier qui sera créé, par exemple /src/data/blog.ts.

Une nouvelle collection est vide. Cliquez sur Ajouter un champ pour définir ce qu’elle contient (voir Champs et colonnes).

Renommer, dupliquer ou supprimer

Survolez une collection et cliquez sur ⋯, ou faites un clic droit dessus, puis choisissez Renommer, Dupliquer ou Supprimer. Vous pouvez aussi double-cliquer sur un nom pour le modifier. Renommer une collection met à jour tous les fichiers de votre site qui l’utilisent. La suppression est irréversible.

Lorsque vous avez plus de cinq collections, un champ Filtrer les collections apparaît au-dessus de la liste.

Connecter une source de données

Un site utilise une seule source de données à la fois. Cliquez sur l’onglet Source de données et choisissez-en une.

Source	Adaptée pour
WebTwizz Cloud (recommandé)	Une base de données avec authentification et stockage de fichiers, ajoutée pour vous. Aucun compte nécessaire
Supabase	Une base de données, l’authentification et le stockage de fichiers, dans votre propre compte Supabase
Postgres	Railway, RDS ou toute instance Postgres que vous utilisez déjà
MySQL	Railway, RDS ou toute base de données MySQL que vous utilisez déjà
MongoDB	Un cluster Atlas ou tout déploiement MongoDB
Google Sheets	Menus, listes de prix, plannings ou tout tableau que vous tenez déjà dans une feuille de calcul

Chaque source enregistre ses informations de connexion sous forme de secrets dans Paramètres > Secrets, sous Services connectés.

Supabase et Google Sheets sont aussi des connecteurs. Une fois la connexion établie, votre compte est enregistré pour vos autres projets, et Paramètres > Connecteurs affiche les tables du projet, les paramètres d’authentification ou les onglets de la feuille de calcul. Consultez Supabase et Google Sheets.

WebTwizz Cloud

Choisissez WebTwizz Cloud et cliquez sur Ajouter une base de données. Pour partager des données avec un autre de vos sites, sélectionnez plutôt dans la liste la base de données utilisée par ce site. Consultez WebTwizz Cloud pour en savoir plus sur les limites, le partage et le changement de base de données.

La plupart du temps, vous n’avez pas besoin de le faire : l’IA ajoute WebTwizz Cloud dès que votre site en a besoin.

Supabase

1. Choisissez Supabase et cliquez sur Se connecter avec Supabase.
2. Connectez-vous à Supabase et autorisez l’accès. Vous revenez à la même fenêtre.
3. Sélectionnez un projet dans la liste ou choisissez + Créer un projet.
4. Cliquez sur Connecter.

• Si votre compte Supabase est déjà associé, vous accédez directement à la liste des projets.
• + Créer un projet crée un projet dans votre première organisation Supabase et le connecte. Cette action nécessite une connexion via Se connecter avec Supabase et prend environ deux minutes. Gardez donc la fenêtre ouverte.
• Un projet en pause ne peut pas être connecté. Restaurez-le d’abord dans votre tableau de bord Supabase.
• Vous préférez utiliser un jeton ? Cliquez sur Coller plutôt un jeton d'accès, générez-en un sur supabase.com/dashboard/account/tokens, collez-le et cliquez sur Suivant.
• Déconnecter le compte Supabase, sous la liste des projets, dissocie votre compte Supabase de WebTwizz pour vous permettre de vous connecter avec un autre compte.

Supabase ajoute NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, SUPABASE_SERVICE_ROLE_KEY et SUPABASE_ACCESS_TOKEN.

Postgres et MySQL

1. Choisissez Postgres ou MySQL.
2. Collez votre Chaîne de connexion. Elle commence par postgres:// ou postgresql:// pour Postgres, et par mysql:// pour MySQL.
3. WebTwizz teste la connexion pendant la saisie et affiche Connecté si elle fonctionne, ou la raison de l’échec.
4. Cliquez sur Connecter.

Vous n’avez pas de chaîne de connexion ? Cliquez sur Pas de chaîne de connexion ? Saisir l’hôte, l’utilisateur et le mot de passe séparément et renseignez Hôte, Base de données, Port, Utilisateur et Mot de passe.

• Postgres : utilisez une chaîne de connexion avec pool si votre fournisseur en propose une.
• MySQL : utilisez un utilisateur autorisé à créer et à modifier des tables. WebTwizz nécessite MySQL 8.0.13 ou une version ultérieure.

La connexion est enregistrée dans DATABASE_URL.

MongoDB

Choisissez MongoDB et collez votre Chaîne de connexion (mongodb:// ou mongodb+srv://). WebTwizz la teste pendant la saisie, comme pour Postgres. Lorsque Connecté apparaît, cliquez sur Connecter. Dans Atlas, vous trouverez la chaîne sous Base de données > Connecter > Pilotes.

La chaîne doit inclure le nom de votre base de données, par exemple mongodb+srv://user:pass@cluster.mongodb.net/mydb. Elle est enregistrée dans MONGODB_URI.

Google Sheets

1. Choisissez Google Sheets et cliquez sur Continuer avec Google.
2. Connectez-vous et autorisez l’accès.
3. Sélectionnez une feuille de calcul.

Seule la feuille de calcul que vous sélectionnez est partagée avec WebTwizz, et elle reste privée. Chaque onglet apparaît comme une table, et la première ligne de l’onglet contient les noms des colonnes.

Depuis le chat

Lorsque vous demandez à l’IA une fonctionnalité qui enregistre des données, elle ajoute WebTwizz Cloud et poursuit la création. Elle affiche à la place une carte Connecter une source de données si votre site utilise déjà une autre source ou si vous avez utilisé toutes les bases de données de votre forfait. Cliquez sur la carte pour ouvrir la même fenêtre directement dans le chat, avec WebTwizz Cloud sélectionné. Cliquez sur Toutes les sources pour en choisir une autre. Cliquez sur Commencer avec des données d’exemple (ou Pas maintenant) pour vous connecter plus tard.

Changer de source ou la déconnecter

Cliquez sur ⋯ dans l’onglet de la source de données, ou faites un clic droit sur l’onglet. Le menu affiche la source connectée, ainsi que Changer de source de données, Ouvrir le tableau de bord Supabase (Supabase uniquement) et Déconnecter.

• Connecter une autre source remplace la source actuelle. Vos données restent là où elles sont, mais votre site cesse de les utiliser. Si le site a des utilisateurs, la fenêtre indique combien devront se réinscrire.
• Après un changement, le panneau Données propose Mettre à jour mon site pour l’utiliser, qui demande à l’IA d’adapter vos pages à la nouvelle source.
• Déconnecter vous demande de confirmer. Votre site cesse de lire et d’écrire via cette source. Rien n’est supprimé chez le fournisseur.
• Il n’y a pas de bouton de reconnexion. Si une source cesse de fonctionner, par exemple après un changement de mot de passe, déconnectez-la puis connectez-la à nouveau.

Tables, collections et onglets

Une fois une source connectée, la liste à gauche affiche ses tables. MongoDB les appelle des collections et Google Sheets des onglets. Le panneau reprend ces termes.

• Cliquez sur + pour en créer une. La fenêtre affiche le nom final avant la création.
• Survolez un élément et cliquez sur ⋯, ou faites un clic droit dessus, pour accéder à Renommer, Dupliquer et Supprimer. La suppression retire la table et toutes ses données de la source. Elle est irréversible.
• Les noms Supabase, Postgres et MySQL sont convertis en minuscules avec des traits de soulignement : « Blog posts » devient blog_posts. MongoDB et Google Sheets conservent le nom tel que vous le saisissez.

Avec Supabase ou WebTwizz Cloud, la liste affiche aussi Utilisateurs : toutes les personnes inscrites via la page de connexion de votre site. Avec Supabase, ces données sont en lecture seule ici. Avec WebTwizz Cloud, vous pouvez aussi envoyer un lien de réinitialisation du mot de passe, bloquer ou supprimer une personne, ou exporter la liste.

Avec WebTwizz Cloud, la liste affiche aussi Fichiers : les buckets et dossiers contenant les fichiers importés par les utilisateurs sur votre site. Vous pouvez y importer, prévisualiser, déplacer, renommer et supprimer des fichiers, copier leurs liens et créer des buckets et des dossiers. Consultez Fichiers.

Interroger vos données

Avec WebTwizz Cloud, Supabase, Postgres, MySQL ou MongoDB, cliquez sur Requête au-dessus de la grille. Un panneau s’ouvre depuis le bas, déjà rempli avec une requête pour la table affichée.

• Poser une question sur vos données : saisissez une question, comme « les parents qui ont choisi Splash ce mois-ci », puis cliquez sur Demander. L’IA écrit la requête, l’exécute et affiche la réponse, avec la requête au-dessus.
• Écrire une requête : saisissez du SQL et cliquez sur Exécuter, ou appuyez sur Cmd+Enter. Avec MongoDB, écrivez-la en JSON, par exemple {"collection": "orders", "filter": {"status": "paid"}}, ou utilisez "pipeline" pour une agrégation.
• Jusqu’à 500 résultats en 10 secondes. Parcourez les pages avec les commandes en bas, ou cliquez sur Exporter pour télécharger les résultats en CSV ou JSON. Les requêtes que vous écrivez pour lire ou ajouter des données s’exécutent immédiatement. Toute action qui supprime ou modifie des lignes, supprime une table ou renomme une colonne vous demande d’abord de confirmer. Lorsque vous utilisez Demander, la requête de l’IA demande aussi confirmation avant d’ajouter des lignes. Sur WebTwizz Cloud, Restaurer les données permet de récupérer vos données si une modification se passe mal. Avec les autres sources, l’action est irréversible.
• Ajuster l’espace : faites glisser la barre en haut du panneau pour l’agrandir ou le réduire, ou double-cliquez dessus pour remplir l’écran. Faites glisser la ligne sous la requête pour lui donner plus de lignes. Appuyez sur Esc ou faites glisser le panneau tout en bas pour le fermer.

Travailler dans la grille

Les deux onglets utilisent la même grille :

• Saisissez du texte dans le champ de recherche pour filtrer les lignes.
• Cliquez sur l’en-tête d’une colonne pour trier par ordre croissant, une deuxième fois pour l’ordre décroissant et une troisième fois pour annuler le tri.
• Utilisez les commandes en bas pour changer de page ou le nombre de lignes par page.
• Cliquez sur une ligne pour la modifier. Cliquez sur ⋯ à la fin d’une ligne, ou faites un clic droit dessus, pour accéder à Modifier, Dupliquer et Supprimer.
• Cliquez sur Nouvel élément, ou sur + sous la dernière ligne, pour en ajouter un.

Les grilles des sources de données ont aussi un bouton d’actualisation. La grille s’actualise automatiquement lorsque l’IA modifie vos données.

Champs et colonnes

Champs de contenu

Cliquez sur Ajouter un champ, renseignez Nom du champ, choisissez un Type, cochez éventuellement Obligatoire et définissez une Valeur par défaut, puis cliquez sur Créer le champ.

Types de champs : Texte, Zone de texte, Nombre, Date, Date et heure, Booléen, Couleur, Lien, E-mail, Téléphone, Image, Audio et Vidéo.

Faites un clic droit sur l’en-tête d’une colonne pour Modifier, Dupliquer ou Supprimer le champ. Supprimer un champ retire sa valeur de chaque élément.

Colonnes des sources de données

Cliquez sur Ajouter une colonne, renseignez Nom de la colonne, choisissez un Type, définissez une Valeur par défaut si vous le souhaitez, puis cliquez sur Créer la colonne.

• Supabase, Postgres et MySQL : les types sont Texte, Petit entier, Entier, Grand entier, Numérique (décimal), Nombre flottant, Date, Heure, Horodatage, Booléen, UUID et JSON. Cochez Obligatoire (NOT NULL) pour rendre une valeur obligatoire. Les noms utilisent des lettres minuscules, des chiffres et des traits de soulignement, et commencent par une lettre. Les colonnes Date et Horodatage peuvent avoir pour valeur par défaut Utiliser la date actuelle ou Utiliser l’heure actuelle.
• Google Sheets : une colonne est une cellule d’en-tête dans la première ligne de l’onglet. Les types sont Texte, Nombre, Date, Date et heure et Case à cocher. Les noms peuvent contenir des espaces et des majuscules.
• MongoDB : il n’y a pas de bouton Ajouter une colonne. Les documents peuvent contenir des champs différents, et un champ ajouté à un document apparaît comme une colonne.

Faites un clic droit sur l’en-tête d’une colonne pour la Modifier (renommer), la Dupliquer ou la Supprimer. La colonne id ne peut pas être modifiée.

Modifier une ligne

Cliquez sur une ligne ou sur Nouvel élément. Le panneau Modifier l’élément ou Nouvel élément s’ouvre sur le côté, avec un champ pour chaque colonne. Les champs obligatoires sont marqués d’un *.

• Cliquez sur Enregistrer ou appuyez sur Enter pour enregistrer. Appuyez sur Escape ou cliquez sur Annuler pour fermer sans enregistrer.
• Dans les champs de texte d’une source de données, Shift+Enter ajoute une nouvelle ligne.
• Dans les collections de contenu, les champs d’image ouvrent le sélecteur d’images utilisé partout ailleurs dans l’éditeur.
• Pour supprimer la ligne, cliquez sur Supprimer en bas du panneau et confirmez.
• Si votre base de données refuse une modification, le panneau en explique la raison en termes simples.
• MongoDB : utilisez les deux icônes en haut du panneau, Champs et JSON brut, pour passer à la modification du document entier en JSON. Dans une collection vide, cliquez sur Rédiger en JSON pour ajouter votre premier document.

Les lignes que vous enregistrez dans une source de données sont écrites directement dans votre base de données.

Sélectionner plusieurs lignes et agir dessus

Cochez les cases à côté des lignes pour les sélectionner. La case dans l’en-tête sélectionne toutes les lignes de la page. Lorsqu’une page entière est sélectionnée et que d’autres lignes correspondent, cliquez sur Tout sélectionner (le nombre de lignes correspondantes est affiché) pour les sélectionner sur toutes les pages, ou sur Effacer pour annuler la sélection.

La barre de sélection contient les boutons Dupliquer et Supprimer.

• Les actions ne concernent que les lignes correspondant à votre recherche. Recherchez « latte », sélectionnez tout et supprimez : seules les lignes correspondant à « latte » seront supprimées. La confirmation le précise.
• Modifier la recherche efface votre sélection.
• La suppression demande toujours confirmation. Dans une source de données, la duplication de toutes les lignes demande aussi confirmation.
• Certaines tables de base de données ne peuvent pas être dupliquées, par exemple une table dont l’id doit correspondre à une ligne d’une autre table, comme un compte utilisateur. La duplication y est désactivée. Survolez le bouton pour en connaître la raison.

Exporter

Cliquez sur Exporter au-dessus de la grille et choisissez Exporter en CSV ou Exporter en JSON pour télécharger tout le contenu de la collection ou de la table, jusqu’à 50 000 lignes. Cela fonctionne avec toutes les sources de données.

Laisser l’IA travailler avec vos données

Une fois une source de données connectée, l’IA crée votre site en s’appuyant sur elle et peut la modifier pour vous. Demandez-le avec vos propres mots : « ajoute une table de réservations avec un nom, un e-mail et une date » ou « ajoute ces 20 produits à ma table de produits ».

Chaque modification apparaît sous forme de carte dans le chat, comme Table créée ou Données ajoutées, et la grille se met à jour. Avant toute action qui supprime définitivement des données, comme la suppression de lignes ou d’une table, l’IA s’arrête et vous demande confirmation. Cliquez sur Accepter pour continuer ou sur Refuser pour annuler.

Différences entre les sources

	Supabase	Postgres et MySQL	MongoDB	Google Sheets
Affichées comme	Tables	Tables	Collections	Onglets
Noms	minuscules_avec_traits_de_soulignement	minuscules_avec_traits_de_soulignement	Tels que saisis	Tels que saisis
Ajout de colonnes	Oui	Oui	Non, les champs proviennent des documents	Oui, sous forme de cellules d’en-tête
Aussi disponible	Utilisateurs, Ouvrir le tableau de bord Supabase		Modification en JSON brut
Enregistré dans	Quatre secrets SUPABASE	DATABASE_URL	MONGODB_URI	GOOGLE_SHEETS_REFRESH_TOKEN