Séminaire

Objectifs

• Modifier une application Vue.js pour se connecter à une base de données Supabase.

Rendu

• GitHub Classroom : https://classroom.github.com/a/Wooy08GL
• Délai : 1 semaine

Estimation

• Créer un ficher report.md dans le dossier du dépôt.
• Estimer le temps nécessaire pour réaliser ce travail dans le rapport.
  • Découper le travail en tâches pour faciliter l'estimation.
• Une fois terminé, comparer le temps estimé avec le temps réellement passé.

Tâche	Temps estimé	Temps passé	Commentaire
Estimation	10m	15m	...
...	...	...	...
Total	2h	1h30	...

Frontend

Vue.js

• Créer un projet Vue.js depuis le répertoire du dépôt : npm create vue@latest
  • Project name: supabase
  • Use TypeScript? Yes
  • Select features to include in your project:
    • Linter (error prevention)
    • Prettier (code formatting)
  • Select experimental features to include in your project:
    • Rien sélectionner
  • Skip all example code and start with a blank Vue project? Yes
• Vérifier où se trouve le projet :

  ./
  ├── .github/
  ├── supabase/
      └── ...
  ├── README.md
  └── report.md

• Copier tous les fichiers du projet Vue.js (dossier supabase) dans le répertoire du dépôt Git, à la racine du dépôt :

  ./
  ├── .github/
  ├── .vscode/
  ├── public/
  ├── src/
  ├── .editorconfig
  ├── .gitattributes
  ├── .gitignore
  ├── .oxlintrc.json
  ├── .prettierrc.json
  ├── env.d.ts
  ├── eslint.config.ts
  ├── index.html
  ├── package.json
  ├── README.md
  ├── report.md
  ├── tsconfig.app.json
  ├── tsconfig.json
  ├── tsconfig.node.json
  └── vite.config.ts

• Pour le fichier README.md, copier le contenu du projet Vue.js dans le fichier README.md du dépôt Git, puis supprimer le fichier README.md du projet Vue.js.
• Supprimer le dossier supabase (qui devrait être vide).
• Installer les dépendances et formater le code :

  npm install
  npm run format

• Pour lancer le projet en mode développement :

  npm run dev

• Ouvrir le navigateur à l'adresse indiquée pour voir le projet.

Supabase

• Installer Supabase :

  npm install @supabase/supabase-js

• Créer ou modifier les fichiers suivants :

.env.local

.env.local

VITE_SUPABASE_URL=https://bcawugtyiublzxdbrpry.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=sb_publishable_S7SokIttUUx5URHJLkuZTA_-ppgI_-r

utils/supabase.ts

utils/supabase.ts

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

src/App.vue

src/App.vue

<script setup lang="ts">
  import { ref } from "vue";
  import { supabase } from "../utils/supabase";

  const colors = ref<{ id: string; name: string }[]>([]);

  async function getColors() {
    const { data } = await supabase.from("colors").select("id, name");
    colors.value = data ?? [];
  }
</script>

<template>
  <button @click="getColors">Get Colors</button>
  <ul>
    <li v-for="color in colors" :key="color.id">{{ color.name }}</li>
  </ul>
</template>

Colors

Pour information, voici le code SQL qui a été utilisé pour créer la table colors dans Supabase. Cela permet de mieux comprendre la structure de la table et les données qu'elle contient.

Code SQL pour créer la table colors

-- Information from Wikipedia "List of Colors"
CREATE TYPE public.color_source AS ENUM (
    '99COLORS_NET',
    'ART_PAINTS_YG07S',
    'BYRNE',
    'CRAYOLA',
    'CMYK_COLOR_MODEL',
    'COLORCODE_IS',
    'COLORHEXA',
    'COLORXS',
    'CORNELL_UNIVERSITY',
    'COLUMBIA_UNIVERSITY',
    'DUKE_UNIVERSITY',
    'ENCYCOLORPEDIA_COM',
    'ETON_COLLEGE',
    'FANTETTI_AND_PETRACCHI',
    'FINDTHEDATA_COM',
    'FERRARIO_1919',
    'FEDERAL_STANDARD_595',
    'FLAG_OF_INDIA',
    'FLAG_OF_SOUTH_AFRICA',
    'GLAZEBROOK_AND_BALDRY',
    'GOOGLE',
    'HEXCOLOR_CO',
    'ISCC_NBS',
    'KELLY_MOORE',
    'MATTEL',
    'MAERZ_AND_PAUL',
    'MILK_PAINT',
    'MUNSELL_COLOR_WHEEL',
    'NATURAL_COLOR_SYSTEM',
    'PANTONE',
    'PLOCHERE',
    'POURPRE_COM',
    'RAL',
    'RESENE',
    'RGB_COLOR_MODEL',
    'THOM_POOLE',
    'UNIVERSITY_OF_ALABAMA',
    'UNIVERSITY_OF_CALIFORNIA_DAVIS',
    'UNIVERSITY_OF_CAMBRIDGE',
    'UNIVERSITY_OF_NORTH_CAROLINA',
    'UNIVERSITY_OF_TEXAS_AT_AUSTIN',
    'X11_WEB',
    'XONA_COM'
);

create table public.colors (
  id bigint generated by default as identity primary key,
  name text,
  hex text not null,
  red int2,
  green int2,
  blue int2,
  hue int2,
  sat_hsl int2,
  light_hsl int2,
  sat_hsv int2,
  val_hsv int2,
  source color_source
);

comment on table colors is 'Full list of colors (based on various sources)';
comment on column colors.name is 'Name of the color';
comment on column colors.hex is 'Hex tripliets of the color for HTML web colors';
comment on column colors.red is 'Red in RGB (%)';
comment on column colors.green is 'Green in RGB (%)';
comment on column colors.blue is 'Blue in RGB (%)';
comment on column colors.hue is 'Hue in HSL (°)';
comment on column colors.sat_hsl is 'Saturation in HSL (%)';
comment on column colors.light_hsl is 'Light in HSL (%)';
comment on column colors.sat_hsv is 'Saturation in HSV (%)';
comment on column colors.val_hsv is 'Value in HSV (%)';
comment on column colors.source is 'Source of information on the color';

La colonne source est un type énuméré. Ce qui signifie que les valeurs possibles pour cette colonne sont limitées à celles définies dans le type color_source.

DSL

Se référer à la documentation de Supabase pour utiliser son DSL pour interagir avec la base de données.

Afficher les colonnes hex et source des couleurs.

Solution

src/App.vue

<script setup lang="ts">
  import { ref } from "vue";
  import { supabase } from "../utils/supabase";

  const colors = ref<
    { id: string; name: string; hex: string; source: string }[]
  >([]);

  async function getColors() {
    const { data } = await supabase
      .from("colors")
      .select("id, name, hex, source");
    colors.value = data ?? [];
  }
</script>

<template>
  <button @click="getColors">Get Colors</button>
  <ul>
    <li v-for="color in colors" :key="color.id">
      {{ color.name }} ({{ color.hex }}) from {{ color.source }}
    </li>
  </ul>
</template>

Afficher le texte de chaque couleur dans sa couleur (en utilisant la valeur hexadécimale).

Solution

src/App.vue

<script setup lang="ts">
  import { ref } from "vue";
  import { supabase } from "../utils/supabase";

  const colors = ref<
    { id: string; name: string; hex: string; source: string }[]
  >([]);

  async function getColors() {
    const { data } = await supabase
      .from("colors")
      .select("id, name, hex, source");
    colors.value = data ?? [];
  }
</script>

<template>
  <button @click="getColors">Get Colors</button>
  <ul>
    <li v-for="color in colors" :key="color.id" :style="{ color: color.hex }">
      {{ color.name }} from {{ color.source }}
    </li>
  </ul>
</template>

Afficher uniquement les couleurs dont la source est PANTONE.

Solution

src/App.vue

<script setup lang="ts">
  import { ref } from "vue";
  import { supabase } from "../utils/supabase";

  const colors = ref<
    { id: string; name: string; hex: string; source: string }[]
  >([]);

  async function getColors() {
    const { data } = await supabase
      .from("colors")
      .select("id, name, hex, source")
      .eq("source", "PANTONE");
    colors.value = data ?? [];
  }
</script>

<template>
  <button @click="getColors">Get Colors</button>
  <ul>
    <li v-for="color in colors" :key="color.id" :style="{ color: color.hex }">
      {{ color.name }} from {{ color.source }}
    </li>
  </ul>
</template>

Ordonner les couleurs par ordre leur luminosité (light_hsl), du plus clair au plus sombre.

Solution

src/App.vue

<script setup lang="ts">
  import { ref } from "vue";
  import { supabase } from "../utils/supabase";

  const colors = ref<
    { id: string; name: string; hex: string; source: string }[]
  >([]);

  async function getColors() {
    const { data } = await supabase
      .from("colors")
      .select("id, name, hex, source")
      .eq("source", "PANTONE")
      .order("light_hsl", { ascending: false });
    colors.value = data ?? [];
  }
</script>

<template>
  <button @click="getColors">Get Colors</button>
  <ul>
    <li v-for="color in colors" :key="color.id" :style="{ color: color.hex }">
      {{ color.name }} from {{ color.source }}
    </li>
  </ul>
</template>

Afficher le résultat sous forme de tableau avec les colonnes name, hex et source.

Solution

src/App.vue

<script setup lang="ts">
  import { ref } from "vue";
  import { supabase } from "../utils/supabase";

  const colors = ref<
    { id: string; name: string; hex: string; source: string }[]
  >([]);

  async function getColors() {
    const { data } = await supabase
      .from("colors")
      .select("id, name, hex, source");
    colors.value = data ?? [];
  }
</script>

<template>
  <button @click="getColors">Get Colors</button>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Hex</th>
        <th>Source</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="color in colors" :key="color.id" :style="{ color: color.hex }">
        <td>{{ color.name }}</td>
        <td>{{ color.hex }}</td>
        <td>{{ color.source }}</td>
      </tr>
    </tbody>
  </table>
</template>

Ajouter un champ de recherche pour filtrer les couleurs par nom.

Solution

src/App.vue

<script setup lang="ts">
  import { ref } from "vue";
  import { supabase } from "../utils/supabase";

  const colors = ref<
    { id: string; name: string; hex: string; source: string }[]
  >([]);
  const search = ref("");

  async function getColors() {
    const { data } = await supabase
      .from("colors")
      .select("id, name, hex, source")
      .ilike("name", `%${search.value}%`);
    colors.value = data ?? [];
  }
</script>

<template>
  <input type="text" v-model="search" placeholder="Search colors by name" />
  <button @click="getColors">Get Colors</button>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Hex</th>
        <th>Source</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="color in colors" :key="color.id" :style="{ color: color.hex }">
        <td>{{ color.name }}</td>
        <td>{{ color.hex }}</td>
        <td>{{ color.source }}</td>
      </tr>
    </tbody>
  </table>
</template>

Personnaliser la page, voici quelques idées :

• Filter les couleurs par source avec une liste déroulante.
• Afficher les autres propriétés des couleurs (RGB, HSL, HSV, etc.).
• Choisir l'ordre d'affichage (par nom, par source, par luminosité, etc.).
• Mettre la couleur dans une colonne séparée du nom pour que le texte soit toujours lisible.
• Afficher que les 10 premières couleurs, avec une pagination pour voir les autres.
• Grouper les couleurs par source et afficher le nombre de couleurs pour chaque source.

Database

Alternative

Beekeeper Studio est une alternative à DBeaver pour se connecter aux bases de données. L'interface est plus moderne et plus facile à utiliser que DBeaver, mais elle est moins complète en termes de fonctionnalités.

• Créer un compte sur Supabase.
  • Utiliser une adresse e-mail privée pour garder le compte après le cours.
• S'il n'y a pas d'organisation, en créer une avec le plan tarifaire gratuit.
• Créer un nouveau projet Supabase.
  • Choisir une organisation gratuite.
  • Nom du projet : hepl-inf5-sem11
  • Générer ou choisir un mot de passe pour la base de données (à ne pas oublier).
  • Région : Central Europe (Zurich)
  • Cocher Enable Data API
  • Cocher Automatically expose new tables
  • Décocher Enable automatic RLS
• Créer une première table sur Supabase.
  • Aller dans l'onglet SQL Editor du projet Supabase.
  • Cliquer sur Quickstarts.
  • Cliquer sur Colors.
  • Cliquer sur Run pour exécuter la requête SQL qui crée la table colors et insère des données.
  • Choisir se lancer sans le RLS (Row Level Security) pour éviter les problèmes de permissions.
• Vérifier la table colors.
  • Aller dans l'onglet Table Editor du projet Supabase.
  • Cliquer sur la table colors pour voir les données.
• Connecter DBeaver à la base de données Supabase.
  • Ouvrir DBeaver.
  • Cliquer sur Database > New Database Connection.
  • Sélectionner PostgreSQL et cliquer sur Next.
  • Remplir les champs de connexion avec les informations de la base de données Supabase :
    • Cliquer sur Connect en haut dans Supabase.
    • Sélectionner Direct - Connection string.
    • Sélectionner Session pooler.
    • Reporter les informations de connexion dans DBeaver.
  • Cliquer sur Test Connection pour vérifier la connexion.
  • Cliquer sur Finish pour enregistrer la connexion.
  • Vérifier que la table colors est visible dans DBeaver et que les données sont correctes.
• Connecter l'application Vue.js à la base de données Supabase.
  • Cliquer sur Connect en haut dans Supabase.
  • Sélectionner Framework - Use a client library.
  • Sélectionner le framework Vue.JS.
  • Mettre à jour les variables d'environnement dans le fichier .env.local de l'application Vue.js avec les informations de connexion de Supabase.
    • Commenter les variables d'environnement existantes avec #.
    • Copier les valeurs de VITE_SUPABASE_URL et VITE_SUPABASE_PUBLISHABLE_KEY depuis Supabase.
  • Vérifier que l'application Vue.js affiche les données de la table colors.
    • L'application doit fonctionner comme avant, mais cette fois, les données proviennent de sa base de données.
    • Si les données ne s'affichent pas, vérifier que le RLS est désactivé pour la table colors dans Supabase.
      • Aller dans Authentication > Policies dans Supabase.
      • Sur la table colors, cliquer sur Disable RLS si ce n'est pas déjà fait.

As a Service

Pour chacun de ces services, visiter leur site et identifier si c'est un service de type DBaaS, IaaS, PaaS, et/ou SaaS, et expliquer pourquoi.

• Amazon Web Services (AWS)
• Exoscale
• GitHub
• GitHub Pages
• Google Cloud
• Google Workspace
• Infomaniak
• Microsoft 365
• Microsoft Azure
• neon
• Supabase

Réponses possibles

• AWS : Service Cloud qui propose de tout.
  • DBaaS : Amazon RDS, Amazon Aurora, Amazon DynamoDB, etc.
  • IaaS : Amazon EC2, Amazon S3, etc.
  • PaaS : AWS Elastic Beanstalk, AWS Lambda, etc.
  • SaaS : Amazon WorkSpaces, Amazon Chime, etc.
• Exoscale : DBaaS et IaaS. Orienté vers les infrastructures cloud.
• GitHub : SaaS. On utilise GitHub pour héberger du code, collaborer, etc.
• GitHub Pages : PaaS. On doit coder l'application, mais GitHub Pages s'occupe de l'hébergement et de la mise en ligne du site web.
• Google Cloud : Service Cloud qui propose de tout.
  • DBaaS : Cloud SQL, Cloud Spanner, etc.
  • IaaS : Compute Engine, Cloud Storage, etc.
  • PaaS : App Engine, Cloud Functions, etc.
• Google Workspace : SaaS. Pour les outils de productivité (Gmail, Docs, Drive, etc.).
• Infomaniak : DBaaS, IaaS et PaaS. Propose de la location de serveurs à gérer soi-même (IaaS), des services managés (DBaaS) et des services d'hébergement de sites web (PaaS).
• Microsoft 365 : SaaS. Pour les outils de productivité (Outlook, Word, Excel, etc.).
• Microsoft Azure : Service Cloud qui propose de tout.
  • DBaaS : Azure SQL Database, Azure Cosmos DB, etc.
  • IaaS : Azure Virtual Machines, Azure Blob Storage, etc.
  • PaaS : Azure App Service, Azure Functions, etc.
• neon : DBaaS. Propose une base de données PostgreSQL managée.
• Supabase : DBaaS. Propose une base de données PostgreSQL managée.

Pagila (avancé)

Pagila est une base de données d'exemple pour PostgreSQL. Elle contient des données fictives sur une entreprise de location de films, avec des tables pour les clients, les films, les locations, etc.

• Observer le modèle entité-association de la base de données Pagila.
• Les tables de Pagila sont présentes dans le Supabase du cours.
• Utiliser le DSL de Supabase pour afficher les données de Pagila dans l'application Vue.js.
• Importer Pagila dans son propre projet Supabase.
  • Télécharger les données de Pagila.
  • Depuis DBeaver, clic droit sur la database postgres > Tools > Restore
  • Sélectionner le fichier pagila.sql téléchargé et cliquer sur Start.

Déploiement

• Enlever .env.local du .gitignore pour pouvoir pousser les variables d'environnement sur GitHub.
  • Ajouter la ligne suivante dans le fichier .gitignore :

    # Ajouter les variables d'environnement
    !.env.local

• Publier l'application Vue.js sur Github Pages comme pour le sem07-app.
• Ajouter le lien du site dans le rapport.

Rapport

• Compléter les estimations.
• Pousser tous les changements sur GitHub.

Références

• https://supabase.com/docs/reference/javascript/start
• Base de données d'exemple pour PostgreSQL :
  • https://github.com/neondatabase/postgres-sample-dbs
  • https://wiki.postgresql.org/wiki/Sample_Databases
  • https://www.w3schools.com/postgresql/postgresql_create_demodatabase.php
  • https://neon.com/postgresql/getting-started/sample-database