Les framework JavaScript
Plusieurs frameworks peuvent être utilisés avec Supabase, notamment React, Flutter, Vue.js, Angular et bien d'autres. Dans ce chapitre, Vue.js sera utilisé, car c’est le framework de JavaScript utilisé dans le projet Progression développé par Patrick Lafrance. Cela me donnera l'opportunité d'approfondir ma connaissance de cet outil, en complément de Supabase.
Explication du projet
Dans le cadre de ce projet, il sera question de créer une application web dynamique développée en utilisant Vue.js et Supabase. Son objectif principal est de fournir une plateforme interactive pour répondre à une variété de quiz. Grâce à son intégration avec Supabase, SupaQuiz offre une expérience utilisateur fluide et sécurisée. Les utilisateurs peuvent parcourir différents quiz, sélectionner ceux qui les intéressent et répondre aux questions associées pour obtenir des points.
Installation de Supabase et Vue.JS
Commençant par accomplir la tâche la plus basique en mettant en place Supabase. Pour intégrer Supabase dans Vue.js, il suffit d’installer la plus récente version de Node.js « npm init vue@latest my-app » et installer les librairies de Supabase en lançant cette commande : « cd my-app && npm install @supabase/supabase-js ».
Créer la table Utilisateur dans Supabase
Une fois les deux technologies installées, il faut créer la table Utilisateur qui servira plus tard à afficher tous les utilisateurs depuis Supabase dans une application créée avec Vue.js.
-- Create the table
create table
Utilisateur (
id bigint primary key generated always as identity,
nom text,
prenom text,
email text,
avatar text,
mdp text,
creation timestamp with time zone,
points bigint
);
-- Insert some sample data into the table
INSERT INTO public."Utilisateur" (nom, prenom, email, mdp, avatar, creation)
VALUES
('Fring', 'Gus', 'gus@example.com', 'password123', 'avatar_gus.jpg', CURRENT_TIMESTAMP),
('White', 'Walter', 'walter@example.com', 'password123', 'avatar_walter.jpg', CURRENT_TIMESTAMP),
('Pinkman', 'Jesse', 'jesse@example.com', 'password123', 'avatar_jesse.jpg', CURRENT_TIMESTAMP),
('Ehrmantraut', 'Mike', 'mike@example.com', 'password123', 'avatar_mike.jpg', CURRENT_TIMESTAMP),
('Goodman', 'Saul', 'saul@example.com', 'password123', 'avatar_saul.jpg', CURRENT_TIMESTAMP),
('White', 'Skyler', 'skyler@example.com', 'password123', 'avatar_skyler.jpg', CURRENT_TIMESTAMP),
('White', 'Walter Jr.', 'walterjr@example.com', 'password123', 'avatar_walterjr.jpg', CURRENT_TIMESTAMP);
Créer le fichier client
Il est nécessaire de créer un fichier client JavaScripts «supabaseClient » qui contient l'URL du projet de Supabase et son Anon Key. Grâce à ces deux éléments, il sera possible d’établir une connexion avec la base de données SupaQuiz qui a été développée sur le net.
import { createClient } from '@supabase/supabase-js'
export const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
Afficher les données
Utilisation des filtres de Supabase
Pour récupérer des données à l’aide de Supabase dans une application JavaScript. Supabase suis le même principe que les languages SQL typique. Par exemple, dans MySQl pour récupérer la liste des utilisateurs c’est : « SELECT * FROM Utilisateur; ». C’est la même chose pour Supabase sous forme de fonction : const { data, error } = await supabase.from('countries').select().
Schéma des tables
La page Utilisateur
- Template (Modèle) :
- La section <template> contient la structure HTML de la page. Dans ce cas, il y a une barre de recherche avec un champ texte et un bouton Search, ainsi qu'un tableau pour afficher les utilisateurs.
- Le tableau affiche les détails des utilisateurs comme leur avatar, pseudo, nom, prénom et points, grâce à la directive de v-for de Vue.js.
- Script setup (Configuration du script) :
- Dans la section <script setup>, le code est écrit de manière compacte à l'aide du système de script setup de Vue 3. Il importe ref et onMounted de Vue, ainsi que Supabase et router (le routeur de l'application).
- Il initialise deux variables réactives (utilisateurs et loading) à l'aide de ref(). Loading est utilisé pour afficher une animation de chargement lorsque les données sont récupérées.
- Il définit une fonction goToUtilisateurQuizs(utilisateurId) qui est utilisée pour naviguer vers une page contenant les quizs d'un utilisateur spécifique.
- Il définit également une fonction asynchrone getUtilisateurs() pour récupérer les utilisateurs depuis la base de données Supabase avec la commande : supabase.from('Utilisateur').select() . En cas d'erreur lors de la récupération des données, un message d'erreur est affiché dans la console.
- Code :
<template>
<div class="">
<div class="container d-flex justify-content-center">
<div class="input-group my-3 w-50">
<input type="text" class="form-control" placeholder="Search Utilisateur" aria-label="Rechercher un utilisateur"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-dark" type="button">Search</button>
</div>
</div>
</div>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Avatar</th>
<th scope="col">Pseudo</th>
<th scope="col">Nom</th>
<th scope="col">Prénom</th>
<th scope="col">Point</th>
</tr>
</thead>
<div class="d-flex justify-content-center align-items-center" v-if="loading">
<div class="spinner-border text-dark" role="status">
</div>
</div>
<tbody v-else>
<tr class="utilisateurs" v-for="utilisateur in utilisateurs" :key="utilisateur.id" @click="goToUtilisateurQuizs(utilisateur.id)">
<th scope="row">{{ utilisateur.id }}</th>
<td><img class="rounded-circle utilisateurs-img" :alt="'Image de ' + utilisateur.nom" :src="utilisateur.avatar" /></td>
<td>{{ utilisateur.pseudo }}</td>
<td>{{ utilisateur.nom }}</td>
<td>{{ utilisateur.prenom }}</td>
<td>{{ utilisateur.points }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { supabase } from '../../lib/supabaseClient.js'
import router from "@/router";
const utilisateurs = ref([])
const loading = ref(true)
// Fonction qui permet d'aller dans une page qui contient les quizs
const goToUtilisateurQuizs = (utilisateurId) => {
router.push({ name: 'utilisateurQuizsDetails', params: { utilisateurId } })
}
//Obtenir les utilisateurs
async function getUtilisateurs() {
try {
const { data } = await supabase.from('Utilisateur').select()
utilisateurs.value = data
} catch (error) {
console.error('Error fetching data:', error.message)
} finally {
loading.value = false
}
}
onMounted(() => {
getUtilisateurs()
})
</script>
<style src="./utilisateur.css"></style>
La page Quiz
Le code de la page Quiz est similaire à celui de la page utilisateur. La particularité réside dans le fait que lorsque l'on clique sur un quiz, on affiche les questions qui sont associées à ce quiz.
La page Question
La page Question suis exactement le même principe que la page Utilisateur et Quiz pour afficher les données, mais la particularité de cette page est l’utilisation du jsonb (Données JSON binaire, décomposé) qui permet d’ajouter des réponses dans un fichier JSON. Cela permet de réduire considérablement le nombre de tables, car cela ne vaut pas la peine de créer une table spécifiquement pour les réponses.
Commentaires