Introduction
Dans le chapitre précédent, il est expliqué comment installer la bibliothèque Supabase avec le Framework Vue.js. Dans un premier temps, il a été montrer comment récupérer les données depuis le serveur et les affichers avec les composants de Vue.js. Maintenant, il sera question de pouvoir les rechercher, les ajouter, les modifier et les supprimer. Pour illustrer cela, nous utiliserons exclusivement les données de la table Quiz et Question.
Recherche
Utilisation de la fonction select()
Il existe deux façons de rechercher des données avec Supabase, la première façon est tout simplement d’utiliser la fonction select(). Ce code crée un formulaire qui permet à l'utilisateur de rechercher des quizs. Lorsque l'utilisateur soumet le formulaire en cliquant sur le bouton Search, la fonction rechercherQuiz() est déclenchée. Cette fonction effectue une requête asynchrone pour récupérer les quiz correspondant au terme de recherche saisi par l'utilisateur. Si aucun identifiant utilisateur n'est défini, la recherche est effectuée sur tous les quiz. Sinon, la recherche est limitée aux quiz de l'utilisateur actuel. Les résultats de la recherche sont stockés dans la variable quizs.value. Comme dans les bases données populaire la fonction select() de Supabase possède plusieurs sous fonction qui pertmettent de chercher des éléments qui contiennent certains charactère avec like() ou eq() qui permet de chercher un élément forcément égale avec la valeur passer en paramètre.
Code Template Vue.js
<form class="input-group my-3 w-50" @submit.prevent="rechercherQuiz">
<input v-model.trim="champRecherhcheQuiz" type="text" class="form-control" placeholder="Search Quiz"
aria-label="Search Quiz" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-dark" type="submit">Search</button>
</div>
<div class="input-group-append mx-3">
<RouterLink class="btn btn-light" type="button" to="/ajouterQuiz">Ajouter+</RouterLink>
</div>
</form>
Code JavaScript Supabase
<script setup>
import { ref, onMounted } from 'vue'
import { supabase } from '../../lib/supabaseClient.js'
import router from "@/router";
import { useRoute } from "vue-router";
const quizs = ref([])
const loading = ref(true)
const paramUtilisateurId = useRoute().params.utilisateurId
const champRecherhcheQuiz = ref('');
…Autre code…
// Fonction qui permet de chercher un Quiz
async function rechercherQuiz() {
try {
loading.value = true;
let data = null;
if (paramUtilisateurId == null) {
({ data } = await supabase.from('Quiz').select().ilike('titre', `%${champRecherhcheQuiz.value}%`));
} else {
({ data } = await supabase.from('Quiz').select().eq('id_utilisateur', paramUtilisateurId).ilike('titre', `%${champRecherhcheQuiz.value}%`));
}
quizs.value = data;
} catch (error) {
console.error('Error fetching data:', error.message)
} finally {
loading.value = false
}
}
…Autre code…
onMounted(() => {
getQuizs()
})
</script>
Vidéo
Recherche - lien de démonstration
Utilisation de la fonction textSearch()
Il est possible d’également d’utiliser la fonction textSearch() qui permet de faire des recherches beaucoup plus poussé. Cette fonction prend en charge la recherche de texte plein et utilise un index de recherche préalablement créé pour améliorer les performances des recherches. Elle est souvent utilisée pour rechercher des valeurs textuelles dans une colonne spécifique d'une table.
Exemple :
const { data, error } = await supabase
.from('products')
.select()
.textSearch('name', 'shirt');
Ajouter
Ajouter un Quiz
Ce code montre un formulaire qui permet à l'utilisateur d'ajouter un nouveau quiz. Lorsque l'utilisateur soumet le formulaire en cliquant sur le bouton Ajouter+, la fonction submitFormQuiz() est déclenchée. Cette fonction récupère les valeurs des champs de texte Titre et Description à partir des modèles quizTitre et quizDescription, respectivement. Ensuite, elle utilise la fonction insererQuiz() pour insérer les données du nouveau quiz dans la table Quiz. La fonction insererQuiz() est une fonction asynchrone qui prend en paramètres le titre et la description du quiz à insérer. À l'intérieur de cette fonction, une requête d'insertion est effectuée pour ajouter les données du quiz dans la table Quiz.
Code template Vue.js
<form @submit.prevent="submitFormQuiz">
<div class="form-group my-2">
<input v-model.trim="quizTitre" type="text" class="form-control" placeholder="Titre" />
</div>
<div class="form-group my-2">
<input v-model.trim="quizDescription" type="text" class="form-control" placeholder="Description" />
</div>
<div class="form-group">
<input type="submit" class="btnSubmit" value="Ajouter+" />
</div>
</form>
Code JavaScript Supabase
async function insererQuiz(titre, description) {
try {
const { data, error } = await supabase
.from('Quiz')
.insert([{ titre, description, creation, image: null, id_utilisateur: 9 }]);
if (error) {
throw error;
}
return data;
} catch (error) {
console.error('Erreur Quiz :', error.message);
throw error;
}
}
// Fonction pour soumettre le formulaire Quiz
async function submitFormQuiz() {
try {
const data = await insererQuiz(quizTitre.value, quizDescription.value);
} catch (error) {
}
}
Vidéo
Ajouter Quiz - lien de démonstration
Ajouter une Question
Ce code présente un formulaire permettant à l'utilisateur d'ajouter une nouvelle question à un quiz existant. Lorsque l'utilisateur soumet le formulaire en cliquant sur le bouton Ajouter+, la fonction submitFormQuestion() est appelée. Cette fonction récupère les valeurs des champs de texte Titre et Quiz à partir des modèles questionTitre et selectedQuiz, respectivement. Elle récupère également les valeurs des réponses à partir du modèle reponses. Ensuite, la fonction parcourt chaque réponse pour mettre à jour la propriété correcte en fonction de l'état de la case à cocher correspondante. Les réponses sont ensuite formatées dans le format JSON requis pour l'insertion dans la base de données. La fonction insererQuestion() est utilisée pour insérer les données de la nouvelle question dans la table Question de la base de données Supabase.
Code template Vue.js
<form @submit.prevent="submitFormQuestion">
<div class="form-group my-2">
<input v-model.trim="questionTitre" type="text" class="form-control" placeholder="Titre" />
</div>
<div class="form-group my-2">
<select v-model="selectedQuiz" class="form-control">
<option disabled value="">Sélectionner un Quiz</option>
<option v-for="quiz in quizs" :key="quiz.id" :value="quiz.id">{{ quiz.titre }}</option>
</select>
</div>
<div class="form-group my-2">
<div class="row">
<div class="col-4">
<input v-model.trim="reponses[0].titre" type="text" class="form-control"
placeholder="Réponse 1" />
</div>
<div class="form-check form-switch col">
<input class="form-check-input" type="checkbox" id="checkbox_0">
</div>
<div class="col-4">
<input v-model.trim="reponses[1].titre" type="text" class="form-control"
placeholder="Réponse 2" />
</div>
<div class="form-check form-switch col">
<input class="form-check-input" type="checkbox" id="checkbox_1">
</div>
</div>
</div>
<div class="form-group my-2">
<div class="row">
<div class="col-4">
<input v-model.trim="reponses[2].titre" type="text" class="form-control"
placeholder="Réponse 3" />
</div>
<div class="form-check form-switch col">
<input class="form-check-input" type="checkbox" id="checkbox_2">
</div>
<div class="col-4">
<input v-model.trim="reponses[3].titre" type="text" class="form-control"
placeholder="Réponse 4" />
</div>
<div class="form-check form-switch col">
<input class="form-check-input" type="checkbox" id="checkbox_3">
</div>
</div>
</div>
<div class="form-group">
<input type="submit" class="btnSubmit" value="Ajouter+" />
</div>
</form>
Code JavaScript Supabase
// Fonction pour insérer un enregistrement de Question
async function insererQuestion(titre, id_quiz, reponses) {
try {
const { data, error } = await supabase
.from('Question')
.insert([{ titre, id_quiz, reponses }]);
if (error) {
throw error;
}
return data;
} catch (error) {
console.error('Erreur Question :', error.message);
throw error;
}
}
// Fonction pour soumettre le formulaire Question
async function submitFormQuestion() {
try {
// Pour chaque réponse, mettez à jour la propriété 'correct' en fonction de l'état de la case à cocher
reponses.value.forEach((reponse, index) => {
reponse.correct = document.getElementById(`checkbox_${index}`).checked;
});
// Formater les réponses dans le format JSON requis
const formattedReponses = reponses.value.map(reponse => {
return {
titre: reponse.titre,
correct: reponse.correct
};
});
const data = await insererQuestion(questionTitre.value, selectedQuiz.value, formattedReponses);
} catch (error) {
}
}
Vidéo
Ajouter Question - lien de démonstration
Modifier
Ce code permet à l'utilisateur de modifier les détails d'un quiz existant. Le formulaire présenté comporte deux champs de texte pour le titre et la description du quiz. Lorsque l'utilisateur soumet le formulaire en cliquant sur le bouton Modifier, la fonction modifierQuiz() est appelée. Cette fonction récupère l'identifiant du quiz à modifier à partir des paramètres de la route route.params.quizId. Ensuite, elle utilise la méthode update() pour mettre à jour les informations du quiz dans la table Quiz, la condition eq('id', quizId) indique que seule la ligne ayant un identifiant égal à quizId doit être modifiée. Les nouvelles valeurs pour le titre et la description sont récupérées à partir des modèles titre et description.
Code template Vue.js
<form @submit.prevent="modifierQuiz">
<div class="form-group my-2">
<input v-model="titre" type="text" class="form-control" placeholder="Titre" />
</div>
<div class="form-group my-2">
<input v-model="description" type="text" class="form-control" placeholder="Description" />
</div>
<div class="form-group">
<input type="submit" class="btnSubmit" value="Modifier" />
</div>
</form>
Code JavaScript Supabase
// Fonction pour modifier le quiz
async function modifierQuiz() {
try {
const quizId = route.params.quizId;
await supabase
.from('Quiz')
.update({
titre: titre.value,
description: description.value,
})
.eq('id', quizId);
// Rediriger vers la page des quizs après la modification
router.push('/quizs');
} catch (error) {
console.error('Erreur lors de la modification du quiz:', error.message);
throw error;
}
}
Vidéo
Modifier Question - lien de démonstration
Supprimer
Ce code permet à l'utilisateur de supprimer un quiz en cliquant sur un bouton supprimer. Lorsque l'utilisateur clique sur ce bouton, la fonction supprimerQuiz() est déclenchée avec l'identifiant du quiz à supprimer comme paramètre. À l'intérieur de la fonction supprimerQuiz(), une requête asynchrone est effectuée à l'aide de Supabase pour supprimer l'enregistrement correspondant dans la table Quiz où l'identifiant est égal à celui fourni. La méthode delete() est utilisée pour spécifier l'opération de suppression, et la condition eq('id', quizId) indique que seule la ligne ayant un identifiant égal à quizId doit être supprimée. Après avoir supprimé avec succès le quiz, la fonction getQuizs() est appelée pour actualiser la liste des quizs. Cela garantit que la liste affichée à l'utilisateur est mise à jour pour refléter les changements effectués.
Code template Vue.js
<button class="btn btn-danger" @click="supprimerQuiz(quiz.id)">supprimer</button>
Code JavaScript Supabase
// Fonction qui permet de supprimer un quiz
async function supprimerQuiz(quizId) {
try {
await supabase.from('Quiz').delete().eq('id', quizId);
// Actualiser la liste des quizs après la suppression
getQuizs();
} catch (error) {
console.error('Error deleting quiz:', error.message)
}
}
Vidéo
Supprimer Question - lien de démonstration
Source
Fetch Data. https://supabase.com/docs/reference/javascript/select (consulté le 19 février 2024)
Insert Data. https://supabase.com/docs/reference/javascript/insert (consulté le 19 février 2024)
Update Data. https://supabase.com/docs/reference/javascript/update (consulté le 19 février 2024)
Delete Data. https://supabase.com/docs/reference/javascript/delete (consulté le 19 février 2024)
Supabase. (15 Juillet, 2022). How to use textSearch to perform full text search - SupabaseTips [Vidéo]. YouTube. https://youtu.be/b-mgca_2Oe4 (consulté le 20 février 2024)
Commentaires1
Approfondissement et Perspectives sur la Gestion des Données
Bonjour Olivier,
Votre article offre une vue d'ensemble très complète et pratique sur l'utilisation de Supabase avec Vue.js pour gérer les données dans des applications web. La progression logique, de l'installation à la manipulation avancée des données (recherche, ajout, modification, et suppression), rend le contenu accessible et particulièrement utile pour les développeurs à tous niveaux. L'inclusion des exemples de code pour chaque fonctionnalité clé est un atout majeur, facilitant la compréhension et l'application directe des concepts abordés.
J'apprécie particulièrement la façon dont vous avez expliqué l'utilisation des fonctions spécifiques de Supabase, comme select(), textSearch(), insert(), update(), et delete(), qui sont cruciales pour la gestion des données. Cela montre non seulement la puissance et la flexibilité de Supabase mais aussi comment ces opérations s'intègrent dans une application Vue.js.
La section sur l'ajout de questions à un quiz existant m'a semblé particulièrement intéressante, montrant une application concrète et complexe de Supabase pour gérer des relations entre les données.
Cependant, je suis curieux de savoir si vous avez des recommandations ou des meilleures pratiques spécifiques à suivre pour optimiser les performances des applications Vue.js utilisant Supabase, surtout en ce qui concerne la gestion des états d'application complexes et la synchronisation des données en temps réel.
Merci pour ce partage enrichissant et impatients de lire vos prochains articles.