Configurer le site externe

Cette page decrit le pattern de configuration utilise par les sites externes ZodBack (z-blog, z-portefolio). Vous pouvez l'adapter a votre stack.

1. Fichier de configuration (config.js)

Creez un fichier js/config.js (ou equivalent) :

// config.js
export const CONFIG = {
  API_URL: 'https://api.zoddev.site/api/blog/v1/public',
  API_TOKEN: 'zb_votre_token_ici',
  PROJECT_ID: '1',
  CACHE_DURATION: 300000, // 5 minutes (en ms)
  SITE_TITLE: 'Mon Blog',
};

Adaptez API_URL selon le module : remplacez blog par portfolio, docs, etc.

2. Client fetch (api.js)

Creez un client API reutilisable avec cache en memoire :

// api.js
import { CONFIG } from './config.js';

const cache = new Map();

async function request(endpoint) {
  const url = `${CONFIG.API_URL}/${endpoint}`;
  const now = Date.now();

  // Cache en memoire
  const cached = cache.get(url);
  if (cached && now - cached.timestamp < CONFIG.CACHE_DURATION) {
    return cached.data;
  }

  const res = await fetch(url, {
    headers: {
      'x-api-key': CONFIG.API_TOKEN,
      'X-Project-Id': CONFIG.PROJECT_ID,
    },
  });

  if (!res.ok) {
    const err = await res.json().catch(() => ({}));
    throw new Error(err.message || `HTTP ${res.status}`);
  }

  const json = await res.json();
  const data = json.data ?? json;

  cache.set(url, { data, timestamp: now });
  return data;
}

// Fonctions publiques
export const getPosts = () => request('posts');
export const getPostBySlug = (slug) => request(`posts/${slug}`);
export const getCategories = () => request('categories');
// ... ajoutez selon vos besoins

3. Headers requis

Chaque requete vers l'API doit inclure :

Note : En production, le navigateur envoie automatiquement le header Origin. Le backend l'utilise pour la validation CORS.

4. Structure de projet recommandee

mon-site/
  index.html
  js/
    config.js       # Configuration (token, URL)
    api.js          # Client fetch
    app.js          # Logique principale
    views/          # Vues/pages
      home.js
      detail.js
  css/
    style.css
  wrangler.toml     # Si Cloudflare Workers

5. Gestion des erreurs

Gerez les erreurs API dans votre UI :

try {
  const posts = await getPosts();
  renderPosts(posts);
} catch (err) {
  console.error('Erreur API:', err.message);
  showError('Impossible de charger les donnees. Reessayez plus tard.');
}

Les codes d'erreur courants sont documentes dans la page "Tests et verification".