De l'Ontologie à l'Application

La théorie rencontre la pratique

Pendant quatre cours, on a exploré le web sémantique en profondeur : des triplets RDF à Turtle, de Prolog à OWL, de SPARQL à SHACL. On a construit des parseurs, des moteurs d'inférence, des serveurs SPARQL.

Ce cinquième cours est différent. On va prendre tous ces outils et les assembler pour construire une vraie application : un catalogue e-commerce complet, de l'ontologie à la page web.

On va utiliser Protégé pour modéliser l'ontologie (la partie qu'on faisait à la main dans les cours précédents), Fuseki comme serveur SPARQL (notre mini_fuseki.py en version professionnelle), et une page web toute simple en HTML/JavaScript pour le rendu final.

À la fin de ce cours, vous aurez une boutique en ligne fonctionnelle qui utilise le web sémantique de bout en bout. Pas un jouet pédagogique. Une vraie application, avec des vrais produits, des vraies catégories, et un vrai moteur de recherche sémantique.

Le projet : une boutique en ligne sémantique

Architecture générale

Pourquoi cette stack ?

On aurait pu utiliser un SGBD relationnel (PostgreSQL, MySQL) et faire du SQL. Mais le web sémantique apporte des avantages décisifs pour ce genre d'application :

Prérequis

Pour suivre ce cours, vous aurez besoin de :

• Protégé — téléchargement gratuit sur https://protege.stanford.edu
• Java 11+ — Protégé et Fuseki tournent sur la JVM
• Apache Jena Fuseki — https://jena.apache.org/download/
• Un navigateur web récent (Chrome, Firefox, Safari)
• Les connaissances des cours #2, #3, #4 (triplets, Turtle, SPARQL)

Protégé : le couteau suisse des ontologies

Qu'est-ce que Protégé ?

Protégé est un éditeur d'ontologies gratuit et open-source développé par l'Université de Stanford (le même endroit qui a inventé Google, mais en moins riche). C'est l'outil de référence pour créer et manipuler des ontologies OWL et RDF.

Protégé fait trois choses essentiellement :

1. Modéliser — créer des classes, des propriétés, des axiomes, des restrictions, le tout avec une interface graphique.
2. Instancier — ajouter des individus (instances) de vos classes, avec leurs propriétés.
3. Raisonner — lancer un raisonneur OWL (HermiT, Pellet, ELK) pour classifier, vérifier la cohérence, inférer.

Installation

Bash
# 1. Aller sur https://protege.stanford.edu/products.php
#    Télécharger la version "Protégé Desktop" (fichier .zip/.tar.gz)

# 2. Décompresser
tar xzf Protege-*-linux.tar.gz
# ou dézipper le .zip selon votre OS

# 3. Lancer
cd Protege-*/
./run.sh
# Sur Mac : ouvrir Protege.app
# Sur Windows : double-clic sur run.bat

Premier lancement — Interface

Quand vous lancez Protégé pour la première fois, vous voyez un écran avec plusieurs onglets (tabs) et vues (views). Voici les plus importants :

Créer une nouvelle ontologie

1. Lancer Protégé
2. File → New ou cliquer sur l'icône « Nouveau »
3. Dans le champ Ontology IRI, entrer http://example.org/vente
4. Cliquer OK. Votre ontologie est créée.

L'IRI (Internationalized Resource Identifier) est l'identifiant unique de votre ontologie. C'est ce qui permettra de la référencer depuis d'autres ontologies. Choisissez-le bien, car le changer après, c'est comme renommer un projet en cours de route : possible, mais douloureux.

Modélisation du domaine de vente

Assez de théorie. Créons notre ontologie de vente dans Protégé. On va modéliser un catalogue e-commerce avec des produits, des catégories, des marques, des clients, des commandes et des avis.

3.1 — Les classes

On commence par créer la hiérarchie des classes. Dans Protégé, allez dans l'onglet Classes. Vous voyez déjà owl:Thing (la classe racine, équivalent de ⊤ en OWL). Toutes nos classes seront des sous-classes de owl:Thing.

Turtle (ce qu'on va obtenir)
# Hiérarchie des classes
:Produit       rdfs:subClassOf  owl:Thing .
:Categorie     rdfs:subClassOf  owl:Thing .
:Marque        rdfs:subClassOf  owl:Thing .
:Client        rdfs:subClassOf  owl:Thing .
:Commande      rdfs:subClassOf  owl:Thing .
:Avis          rdfs:subClassOf  owl:Thing .

# Sous-classes de Produit
:Smartphone    rdfs:subClassOf  :Produit .
:Livre         rdfs:subClassOf  :Produit .
:CasqueAudio   rdfs:subClassOf  :Produit .
:JeuVideo      rdfs:subClassOf  :Produit .
:Accessoire    rdfs:subClassOf  :Produit .

Dans Protégé, pour chaque classe :

1. Clic droit sur owl:Thing → Add subclass
2. Entrer le nom (ex: Produit)
3. Répéter pour Categorie, Marque, Client, Commande, Avis
4. Pour les sous-classes de Produit, clic droit sur Produit → Add subclass → Smartphone, etc.

3.2 — Les propriétés

Maintenant, les propriétés. On distingue deux types :

• Object Properties : relient deux individus (ex: un Produit appartient à une Catégorie)
• Data Properties : relient un individu à une valeur littérale (ex: un Produit a un prix de 29.99€)

Object Properties

Dans Protégé : onglet Object Properties → Add. Remplir le nom, puis dans l'onglet Description, définir Domains (intersection) et Ranges (intersection).

Data Properties

3.3 — Les instances

Maintenant, ajoutons des individus (instances). Dans l'onglet Individuals, créez :

Catégories

Turtle
:smartphones  a  :Categorie ;  :nom  "Smartphones"@fr .
:livres       a  :Categorie ;  :nom  "Livres"@fr .
:casques      a  :Categorie ;  :nom  "Casques Audio"@fr .
:jeux         a  :Categorie ;  :nom  "Jeux Vidéo"@fr .
:accessoires  a  :Categorie ;  :nom  "Accessoires"@fr .

Marques

Turtle
:apple     a  :Marque ;  :nom  "Apple"@fr .
:samsung   a  :Marque ;  :nom  "Samsung"@fr .
:sony      a  :Marque ;  :nom  "Sony"@fr .
:gallimard a  :Marque ;  :nom  "Gallimard"@fr .
:nintendo  a  :Marque ;  :nom  "Nintendo"@fr .

Produits

Turtle
:iphone15  a  :Smartphone ;
    :nom  "iPhone 15 Pro"@fr ;
    :prix  1299.00 ;
    :stock  42 ;
    :description  "Le dernier smartphone Apple avec puce A17 Pro"@fr ;
    :urlImage  "https://picsum.photos/seed/iphone15/400/400" ;
    :aPourCategorie  :smartphones ;
    :estFabriquePar  :apple .

:galaxyS24  a  :Smartphone ;
    :nom  "Galaxy S24 Ultra"@fr ;
    :prix  1149.00 ;
    :stock  38 ;
    :description  "Le flagship Samsung avec IA intégrée"@fr ;
    :urlImage  "https://picsum.photos/seed/galaxys24/400/400" ;
    :aPourCategorie  :smartphones ;
    :estFabriquePar  :samsung .

:lepetitprince  a  :Livre ;
    :nom  "Le Petit Prince"@fr ;
    :prix  7.50 ;
    :stock  150 ;
    :description  "L'essentiel est invisible pour les yeux"@fr ;
    :urlImage  "https://picsum.photos/seed/petitprince/400/400" ;
    :aPourCategorie  :livres ;
    :estFabriquePar  :gallimard .

:zelda  a  :JeuVideo ;
    :nom  "The Legend of Zelda: Tears of the Kingdom"@fr ;
    :prix  69.99 ;
    :stock  25 ;
    :description  "L'aventure épique dans un monde ouvert"@fr ;
    :urlImage  "https://picsum.photos/seed/zelda/400/400" ;
    :aPourCategorie  :jeux ;
    :estFabriquePar  :nintendo .

:wh1000xm5  a  :CasqueAudio ;
    :nom  "WH-1000XM5"@fr ;
    :prix  399.00 ;
    :stock  17 ;
    :description  "Casque sans fil à réduction de bruit active"@fr ;
    :urlImage  "https://picsum.photos/seed/wh1000xm5/400/400" ;
    :aPourCategorie  :casques ;
    :estFabriquePar  :sony .

Avis clients

Turtle
:avis1  a  :Avis ;
    :note  5 ;
    :commentaire  "Excellent produit, je recommande !"@fr .

:avis2  a  :Avis ;
    :note  4 ;
    :commentaire  "Très bon, mais un peu cher"@fr .

:avis3  a  :Avis ;
    :note  5 ;
    :commentaire  "Indispensable pour les fans de la saga"@fr .

# Lier les avis aux produits
:iphone15  :aPourAvis  :avis1 .
:wh1000xm5  :aPourAvis  :avis2 .
:zelda  :aPourAvis  :avis3 .

Exporter l'ontologie et la charger dans Fuseki

Notre ontologie est prête dans Protégé. Il est temps de la sortir du laboratoire et de la mettre dans un serveur SPARQL qui pourra être interrogé par notre future application web.

4.1 — Exporter depuis Protégé

1. Dans Protégé : File → Export Inferred Ontology As...
2. Choisir le format : Turtle (extension .ttl)
3. Nommer le fichier : vente.ttl
4. Cliquer OK

Vous obtenez un fichier Turtle. Ouvrez-le, il doit ressembler à ce qu'on a écrit dans le chapitre précédent, mais avec les préfixes et les annotations OWL en plus. Protégé ajoute automatiquement les déclarations rdfs:label, rdfs:comment et les métadonnées d'ontologie.

4.2 — Installer et lancer Fuseki

Apache Jena Fuseki est le serveur SPARQL de référence. C'est une version professionnelle de notre mini_fuseki.py du cours #3. Il gère les transactions, les inférences, la persistence, et il a une interface web intégrée.

Bash
# 1. Télécharger Fuseki (dernière version)
wget https://dlcdn.apache.org/jena/binaries/apache-jena-fuseki-5.4.0.tar.gz

# 2. Décompresser
tar xzf apache-jena-fuseki-*.tar.gz
cd apache-jena-fuseki-*/

# 3. Lancer Fuseki (mode mémoire, avec mise à jour)
./fuseki-server --update --mem /ds

# Variante : mode fichier (données persistantes)
./fuseki-server --update --loc=data /ds
# Les données sont sauvegardées dans le dossier data/

Fuseki démarre sur http://localhost:3030. Ouvrez cette URL dans votre navigateur. Vous voyez l'interface d'administration de Fuseki.

4.3 — Charger l'ontologie

Deux façons de charger votre fichier Turtle dans Fuseki :

Bash
# Méthode 1 : via l'interface web (recommandée pour commencer)
#   1. Aller sur http://localhost:3030
#   2. Cliquer sur "dataset /ds"
#   3. Aller dans l'onglet "Upload"
#   4. Sélectionner vente.ttl
#   5. Cliquer "Upload"
#   → Les triplets sont chargés

# Méthode 2 : en ligne de commande (pour les scripts)
curl -X POST \
  -H "Content-Type: text/turtle" \
  --data-binary '@vente.ttl' \
  'http://localhost:3030/ds/data'

# Méthode 3 : au démarrage (mode fichier)
# Copier vente.ttl dans data/ avant de lancer Fuseki
cp vente.ttl apache-jena-fuseki-*/data/
./fuseki-server --update --loc=data /ds

4.4 — Vérifier le chargement

Une fois l'ontologie chargée, on peut vérifier que tout est bien présent. Dans l'interface Fuseki, allez dans l'onglet Query :

SPARQL
-- Combien de triplets avons-nous ?
SELECT (COUNT(*) AS ?total) WHERE { ?s ?p ?o }

-- Lister tous les produits
SELECT ?produit ?nom ?prix WHERE {
  ?produit  a  :Produit .
  ?produit  :nom  ?nom .
  ?produit  :prix  ?prix .
}

Si ces requêtes retournent des résultats, félicitations ! Vous avez une ontologie e-commerce opérationnelle accessible via SPARQL sur HTTP. Votre backend sémantique est prêt.

SPARQL en action : interroger le catalogue

Maintenant que nos données sont dans Fuseki, on peut les interroger avec SPARQL. Ce chapitre est une boîte à outils de requêtes prêtes à l'emploi pour notre boutique.

Pour chaque requête, ouvrez l'onglet Query de Fuseki (ou utilisez curl) et exécutez-la.

5.1 — Requêtes de base

SPARQL
-- Tous les produits (nom, prix, stock)
PREFIX : <http://example.org/vente#>
SELECT ?nom ?prix ?stock WHERE {
  ?p  a  :Produit .
  ?p  :nom  ?nom .
  ?p  :prix  ?prix .
  ?p  :stock  ?stock .
}
ORDER BY DESC(?prix)

-- Résultat :
-- "iPhone 15 Pro"   1299.00  42
-- "Galaxy S24 Ultra"  1149.00  38
-- "WH-1000XM5"      399.00   17
-- "Zelda TOTK"       69.99   25
-- "Le Petit Prince"   7.50   150

5.2 — Filtres

SPARQL
-- Produits entre 50 et 500 €, en stock
PREFIX : <http://example.org/vente#>
SELECT ?nom ?prix ?stock WHERE {
  ?p  a  :Produit .
  ?p  :nom  ?nom .
  ?p  :prix  ?prix .
  ?p  :stock  ?stock .
  FILTER(?prix >= 50 && ?prix <= 500)
  FILTER(?stock > 0)
}
ORDER BY ?prix

-- Résultat : "WH-1000XM5" 399.00 17
--           "Zelda TOTK"  69.99 25

SPARQL
-- Produits d'une catégorie spécifique
PREFIX : <http://example.org/vente#>
SELECT ?nom ?prix ?marque WHERE {
  ?p  a  :Produit .
  ?p  :nom  ?nom .
  ?p  :prix  ?prix .
  ?p  :aPourCategorie  ?cat .
  ?p  :estFabriquePar  ?m .
  ?m  :nom  ?marque .
  ?cat  :nom  "Smartphones"@fr .
}
ORDER BY ?prix

5.3 — Recherche textuelle

SPARQL
-- Recherche par mot-clé (dans le nom ou la description)
PREFIX : <http://example.org/vente#>
SELECT ?nom ?prix WHERE {
  ?p  a  :Produit .
  ?p  :nom  ?nom .
  ?p  :prix  ?prix .
  ?p  :description  ?desc .
  FILTER(
    CONTAINS(LCASE(?nom), "zelda") ||
    CONTAINS(LCASE(?desc), "zelda")
  )
}

5.4 — Agrégegations

SPARQL
-- Note moyenne par catégorie
PREFIX : <http://example.org/vente#>
SELECT ?cat (AVG(?note) AS ?moyenne) (COUNT(?avis) AS ?nbAvis) WHERE {
  ?p  a  :Produit .
  ?p  :aPourCategorie  ?c .
  ?c  :nom  ?cat .
  ?p  :aPourAvis  ?a .
  ?a  :note  ?note .
}
GROUP BY ?cat
ORDER BY DESC(?moyenne)

SPARQL
-- Statistiques : nombre de produits par catégorie
PREFIX : <http://example.org/vente#>
SELECT ?cat (COUNT(?p) AS ?nbProduits) WHERE {
  ?p  a  :Produit .
  ?p  :aPourCategorie  ?c .
  ?c  :nom  ?cat .
}
GROUP BY ?cat
ORDER BY DESC(?nbProduits)

5.5 — Requêtes avec OPTIONAL

SPARQL
-- Tous les produits avec leur note moyenne (si notés)
PREFIX : <http://example.org/vente#>
SELECT ?nom ?prix (ROUND(AVG(?note)) AS ?moyenne) WHERE {
  ?p  a  :Produit .
  ?p  :nom  ?nom .
  ?p  :prix  ?prix .
  OPTIONAL {
    ?p  :aPourAvis  ?a .
    ?a  :note  ?note .
  }
}
GROUP BY ?nom ?prix
ORDER BY ?nom

5.6 — Requête CONSTRUCT (créer un graphe)

SPARQL
-- Créer un sous-graphe avec uniquement les produits en promotion
-- (prix < 100€, considérés comme "petits prix")
PREFIX : <http://example.org/vente#>
CONSTRUCT {
  ?p  rdf:type  :PetitPrix .
  ?p  :nom  ?nom .
  ?p  :prix  ?prix .
} WHERE {
  ?p  a  :Produit .
  ?p  :nom  ?nom .
  ?p  :prix  ?prix .
  FILTER(?prix < 100)
}

Frontend : la boutique qui parle SPARQL

On a l'ontologie, on a Fuseki, on a SPARQL. Maintenant, on va connecter le tout à une page web qui servira de vitrine commerciale.

Architecture frontend

Pas de framework. Pas de React, pas de Vue, pas d'Angular. Juste du HTML, du CSS, et du JavaScript pur. Pourquoi ?

• Zéro dépendance — ça marche dans n'importe quel navigateur
• Zéro backend — le frontend parle directement à Fuseki
• Transparence — on voit exactement ce qui se passe

Le principe : notre page envoie des requêtes SPARQL à Fuseki via fetch(), reçoit du JSON, et affiche les résultats dans le DOM.

6.1 — Structure HTML

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Ma Boutique Sémantique</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Inter', sans-serif;
           background: #0c0c0c; color: #e0e0e0;
           line-height: 1.6; }
    header { background: #1a1a2e; padding: 1rem 2rem;
             display: flex; justify-content: space-between;
             align-items: center; }
    header h1 { color: #f43f5e; font-size: 1.3rem; }
    .search { padding: .6rem 1rem; width: 300px;
              border-radius: 8px; border: 1px solid #333;
              background: #1a1a1a; color: #fff; }
    .container { max-width: 1200px; margin: 2rem auto;
                 padding: 0 1.5rem; }
    .filters { display: flex; gap: .5rem; margin-bottom: 2rem;
               flex-wrap: wrap; }
    .filters button { padding: .5rem 1rem; border-radius: 20px;
                       border: 1px solid #333; background: #1a1a1a;
                       color: #ccc; cursor: pointer; }
    .filters button.active { background: #f43f5e; color: #fff;
                              border-color: #f43f5e; }
    .products { display: grid; grid-template-columns:
                repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
    .product { background: #1a1a2e; border-radius: 12px;
               padding: 1.2rem; border: 1px solid #2a2a44; }
    .product img { width: 100%; height: 200px; object-fit: cover;
                   border-radius: 8px; margin-bottom: .8rem; }
    .product h3 { color: #fff; font-size: 1rem; margin-bottom: .3rem; }
    .product .price { color: #34d399; font-weight: 700;
                       font-size: 1.2rem; }
    .product .meta { color: #888; font-size: .8rem;
                     margin-top: .4rem; }
    .product .stock { display: inline-block; padding: .15rem .5rem;
                       border-radius: 10px; font-size: .75rem;
                       margin-top: .5rem; }
    .stock.oui { background: #065f46; color: #34d399; }
    .stock.non { background: #5f0a1a; color: #f87171; }
    .avis { font-size: .8rem; color: #fbbf24; margin-top: .4rem; }
    .loading { text-align: center; padding: 3rem; color: #888; }
    .error { text-align: center; padding: 2rem; color: #f87171; }
  </style>
</head>
<body>
  <header>
    <h1>🛍️ Boutique Sémantique</h1>
    <div>
      <input id="search" class="search"
             placeholder="Rechercher un produit..."
             oninput="rechercher()">
    </div>
  </header>

  <div class="container">
    <div id="filtres" class="filters"></div>
    <div id="products" class="products">
      <div class="loading">⏳ Chargement...</div>
    </div>
  </div>

  <script>
    /* — Le JavaScript arrive ci-dessous — */
  </script>
</body>
</html>

6.2 — Le JavaScript : interroger Fuseki

Le cœur de l'application, c'est la fonction sparql() qui envoie une requête SPARQL à Fuseki et retourne les résultats en JSON :

JavaScript
// URL du serveur Fuseki
const FUSEKI = 'http://localhost:3030/ds';

// Préfixes SPARQL (pour alléger les requêtes)
const PREFIXES = `
  PREFIX : <http://example.org/vente#>
  PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
  PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
`;

// Envoie une requête SPARQL et retourne les bindings
async function sparql(query) {
  const url = `${FUSEKI}/query`;
  const body = `query=${encodeURIComponent(PREFIXES + query)}`;

  const res = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Accept': 'application/sparql-results+json'
    },
    body: body
  });

  if (!res.ok) {
    throw new Error(`Erreur SPARQL: ${res.status}`);
  }

  const data = await res.json();
  return data.results.bindings;
}

6.3 — Afficher les produits

JavaScript
// Charge tous les produits (ou filtre par catégorie + recherche)
async function chargerProduits(categorie = null, recherche = '') {
  const div = document.getElementById('products');
  div.innerHTML = '<div class="loading">⏳ Chargement...</div>';

  try {
    // Construction de la requête SPARQL
    let filtreCategorie = '';
    let filtreRecherche = '';

    if (categorie) {
      filtreCategorie =
        `?cat :nom "${categorie}"@fr .
         ?p :aPourCategorie ?cat .`;
    }

    if (recherche) {
      filtreRecherche =
        `FILTER(CONTAINS(LCASE(?nom), "${recherche.toLowerCase()}") ||
                CONTAINS(LCASE(?desc), "${recherche.toLowerCase()}"))`;
    }

    const query = `
      SELECT ?nom ?prix ?stock ?image ?marque
             (GROUP_CONCAT(DISTINCT ?catNom; SEPARATOR=", ") AS ?categories)
             (AVG(?n) AS ?noteMoy) WHERE {
        ?p  a  :Produit .
        ?p  :nom  ?nom .
        ?p  :prix  ?prix .
        ?p  :stock  ?stock .
        ?p  :urlImage  ?image .
        ?p  :estFabriquePar  ?m .
        ?m  :nom  ?marque .
        ${filtreCategorie}
        OPTIONAL { ?p  :aPourCategorie  ?cat .
                   ?cat  :nom  ?catNom . }
        OPTIONAL { ?p  :aPourAvis  ?a .
                   ?a  :note  ?n . }
        ${filtreRecherche}
      }
      GROUP BY ?nom ?prix ?stock ?image ?marque
      ORDER BY ?nom
    `;

    const produits = await sparql(query);
    afficherProduits(produits);

  } catch (err) {
    div.innerHTML =
      `<div class="error">❌ Erreur : ${err.message}</div>`;
  }
}

// Affiche les produits dans la grille
function afficherProduits(produits) {
  const div = document.getElementById('products');

  if (produits.length === 0) {
    div.innerHTML = '<div class="loading">Aucun produit trouvé.</div>';
    return;
  }

  div.innerHTML = produits.map(p => {
    const stock = parseInt(p.stock.value);
    const note = p.noteMoy ? Math.round(p.noteMoy.value) : '—';
    const etoiles = '★'.repeat(note) + '☆'.repeat(5 - note);

    return `
      <div class="product">
        <img src="${p.image.value}" alt="${p.nom.value}"
             loading="lazy" onerror="this.src='https://picsum.photos/400/400?random'">
        <h3>${p.nom.value}</h3>
        <div class="price">${p.prix.value} €</div>
        <div class="meta">${p.marque.value}</div>
        <div class="avis">${etoiles}</div>
        <span class="stock ${stock > 0 ? 'oui' : 'non'}">
          ${stock > 0 ? '✓ En stock (' + stock + ')' : '✗ Rupture'}
        </span>
      </div>
    `;
  }).join('');
}

6.4 — Filtres et recherche

JavaScript
// Charge les catégories pour les boutons de filtre
async function chargerCategories() {
  const query = `
    SELECT ?nom (COUNT(?p) AS ?nb) WHERE {
      ?c  a  :Categorie .
      ?c  :nom  ?nom .
      ?p  :aPourCategorie  ?c .
    }
    GROUP BY ?nom
    ORDER BY ?nom
  `;

  const cats = await sparql(query);
  const div = document.getElementById('filtres');

  div.innerHTML = `
    <button onclick="filtrer('')" class="active" id="btn_all">
      🏷️ Tous
    </button>
    ${cats.map(c => `
      <button onclick="filtrer('${c.nom.value}')"
              id="btn_${c.nom.value}">
        ${c.nom.value} (${c.nb.value})
      </button>
    `).join('')}
  `;
}

// Variable globale pour la catégorie active
let categorieActive = '';

// Filtre par catégorie
function filtrer(cat) {
  categorieActive = cat;

  // Met à jour l'état actif des boutons
  document.querySelectorAll('#filtres button').forEach(b =>
    b.classList.remove('active'));
  const btnId = cat ? `btn_${cat}` : 'btn_all';
  const btn = document.getElementById(btnId);
  if (btn) btn.classList.add('active');

  // Recharge les produits avec le filtre
  const recherche = document.getElementById('search').value;
  chargerProduits(cat, recherche);
}

// Recherche textuelle
function rechercher() {
  const recherche = document.getElementById('search').value;
  chargerProduits(categorieActive, recherche);
}

// Initialisation
chargerCategories();
chargerProduits();

6.5 — Le fichier complet

Le fichier complet de la boutique est disponible dans le dossier exemples/boutique.html. Il contient tout le code ci-dessus assemblé, avec un design soigné et des fonctionnalités supplémentaires comme l'affichage des catégories et la gestion des erreurs. Ouvrez-le dans votre navigateur après avoir lancé Fuseki, et vous aurez une boutique en ligne fonctionnelle basée sur le web sémantique.

Déploiement : mettre l'application en production

Notre application marche en local. Maintenant, on veut la mettre en ligne. Voici comment faire avec un VPS (ou un Raspberry Pi, comme dans les déploiements précédents).

7.1 — Architecture de production

┌─────────────┐     ┌──────────────┐     ┌─────────────┐
│  Navigateur │────▶│   Nginx      │────▶│   Fuseki    │
│  (frontend) │     │  (proxy)     │     │  (SPARQL)   │
└─────────────┘     └──────────────┘     └─────────────┘
                         │
                         ▼
                    ┌──────────────┐
                    │  boutique.html│
                    │ (fichier stat.)│
                    └──────────────┘
  

7.2 — Configuration Nginx

Nginx
# /etc/nginx/sites-available/boutique
server {
    listen 80;
    server_name boutique.example.com;

    # Fichiers statiques (la page HTML)
    root /var/www/boutique;
    index boutique.html;

    # Proxy inverse vers Fuseki
    location /sparql/ {
        proxy_pass http://127.0.0.1:3030/ds/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;

        # Nécessaire pour les requêtes POST SPARQL
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # Interface Fuseki (protégée par mot de passe)
    location /fuseki/ {
        proxy_pass http://127.0.0.1:3030/;
        auth_basic "Accès restreint";
        auth_basic_user_file /etc/nginx/.fuseki_passwd;
    }
}

Avec cette configuration, le frontend utilise l'URL :

JavaScript
// Au lieu de http://localhost:3030/ds
const FUSEKI = '/sparql';
// Nginx fait la translation vers Fuseki

7.3 — Fuseki en service systemd

Bash
# /etc/systemd/system/fuseki.service
[Unit]
Description=Apache Jena Fuseki SPARQL Server
After=network.target

[Service]
Type=simple
User=pi
ExecStart=/home/pi/fuseki/fuseki-server \
    --update \
    --loc=/home/pi/fuseki/data \
    /ds
Restart=on-failure
RestartSec=5

[Install]
WantedBy=multi-user.target

7.4 — Script de déploiement complet

Bash
#!/usr/bin/env bash
# deploy-boutique.sh — Déploie la boutique sémantique
set -euo pipefail

HOST="${1:-pi@192.168.0.40}"

echo ":: 1. Envoi de l'ontologie..."
scp vente.ttl ${HOST}:/home/pi/fuseki/data/

echo ":: 2. Envoi de la page frontend..."
scp boutique.html ${HOST}:/var/www/boutique/

echo ":: 3. Rechargement de Fuseki..."
ssh ${HOST} "sudo systemctl restart fuseki"

echo ":: 4. Rechargement de Nginx..."
ssh ${HOST} "sudo systemctl reload nginx"

echo "✅ Boutique déployée sur http://boutique.example.com"

Et après ? Votre boutique sémantique est en ligne

Ce cours vous a montré comment aller de l'ontologie à l'application en utilisant Protégé, Fuseki, SPARQL et une page web. Vous avez construit un catalogue e-commerce fonctionnel basé sur le web sémantique.

Ce que vous avez appris

1. Protégé — créer une ontologie, définir classes, propriétés et instances
2. Modélisation — structurer un domaine e-commerce en OWL
3. Fuseki — déployer un serveur SPARQL, charger des données, l'administrer
4. SPARQL avancé — filtres, agrégations, recherche textuelle, OPTIONAL
5. Frontend SPARQL — connecter une page web à un endpoint SPARQL sans backend
6. Déploiement — mettre l'application en production avec Nginx et systemd

Directions pour la suite