340 lines
12 KiB
Vue
340 lines
12 KiB
Vue
<script setup lang="ts">
|
|
useSeoMeta({
|
|
title: 'API Services - Intégration Programmable | Wibx Tour',
|
|
description: 'Automatisez vos connexions réseau avec nos APIs REST complètes. Documentation, SDK et exemples de code inclus.'
|
|
})
|
|
|
|
const apiEndpoints = [
|
|
{
|
|
title: 'Locations API',
|
|
description: 'Récupérez la liste des data centers et points de présence disponibles',
|
|
endpoint: 'GET /api/v1/locations',
|
|
icon: 'i-lucide-map-pin',
|
|
category: 'Infrastructure'
|
|
},
|
|
{
|
|
title: 'Cloud Providers API',
|
|
description: 'Accédez aux informations des fournisseurs cloud et leurs régions',
|
|
endpoint: 'GET /api/v1/cloud-providers',
|
|
icon: 'i-lucide-cloud',
|
|
category: 'Cloud'
|
|
},
|
|
{
|
|
title: 'Layer 2 Links API',
|
|
description: 'Créez, modifiez et gérez vos connexions Layer 2',
|
|
endpoint: 'POST /api/v1/l2-links',
|
|
icon: 'i-lucide-link',
|
|
category: 'Connectivity'
|
|
},
|
|
{
|
|
title: 'Access Ports API',
|
|
description: 'Demandez et gérez vos ports d\'accès dans les data centers',
|
|
endpoint: 'POST /api/v1/access-ports',
|
|
icon: 'i-lucide-plug',
|
|
category: 'Infrastructure'
|
|
},
|
|
{
|
|
title: 'Quotes API',
|
|
description: 'Obtenez des devis instantanés pour vos connexions',
|
|
endpoint: 'POST /api/v1/quotes',
|
|
icon: 'i-lucide-calculator',
|
|
category: 'Billing'
|
|
},
|
|
{
|
|
title: 'Monitoring API',
|
|
description: 'Surveillez vos connexions et récupérez les métriques',
|
|
endpoint: 'GET /api/v1/monitoring',
|
|
icon: 'i-lucide-activity',
|
|
category: 'Monitoring'
|
|
}
|
|
]
|
|
|
|
const rateInformation = [
|
|
{
|
|
title: 'Limites de Taux',
|
|
content: 'Les APIs Wibx Tour sont limitées à 1000 requêtes par heure par clé API pour les comptes gratuits, et 10000 requêtes par heure pour les comptes premium. Les en-têtes de réponse incluent les informations de limite et de consommation.'
|
|
},
|
|
{
|
|
title: 'Unités de Facturation',
|
|
content: 'Les appels API sont facturés par tranche de 1000 requêtes. Les premiers 10000 appels par mois sont gratuits. Au-delà, le tarif est de €0.01 par tranche de 1000 requêtes pour les endpoints de consultation et €0.05 pour les endpoints de provisionnement.'
|
|
},
|
|
{
|
|
title: 'Authentification',
|
|
content: 'Toutes les requêtes API doivent inclure une clé API valide dans l\'en-tête Authorization: Bearer YOUR_API_KEY. Les clés API peuvent être générées depuis votre tableau de bord utilisateur.'
|
|
},
|
|
{
|
|
title: 'Versioning',
|
|
content: 'L\'API utilise un versioning basé sur l\'URL (/api/v1/). Les versions majeures sont maintenues pendant au moins 12 mois après la sortie d\'une nouvelle version. Les changements non-breaking sont déployés sans notification.'
|
|
}
|
|
]
|
|
|
|
const exampleCode = `// Exemple d'utilisation de l'API Wibx Tour
|
|
const wibxApi = new WibxTourAPI({
|
|
apiKey: 'your_api_key_here',
|
|
baseURL: 'https://api.wibx-tour.com/v1'
|
|
});
|
|
|
|
// Récupérer les locations disponibles
|
|
const locations = await wibxApi.locations.list();
|
|
console.log('Locations disponibles:', locations);
|
|
|
|
// Créer une connexion Layer 2
|
|
const l2Link = await wibxApi.l2Links.create({
|
|
name: 'Ma première connexion',
|
|
sourceLocation: 'paris-dc1',
|
|
destinationLocation: 'london-dc2',
|
|
bandwidth: '1000', // 1 Gbps
|
|
vlan: 100
|
|
});
|
|
|
|
console.log('Connexion créée:', l2Link);
|
|
|
|
// Surveiller la connexion
|
|
const metrics = await wibxApi.monitoring.getMetrics(l2Link.id, {
|
|
period: '1h',
|
|
metrics: ['bandwidth', 'latency', 'packet_loss']
|
|
});
|
|
|
|
console.log('Métriques:', metrics);`
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardPanel id="api-services">
|
|
<template #header>
|
|
<UDashboardNavbar title="API Services">
|
|
<template #leading>
|
|
<UDashboardSidebarCollapse />
|
|
</template>
|
|
|
|
<template #right>
|
|
<UButton size="sm" class="mr-2">
|
|
Obtenir une Clé API
|
|
</UButton>
|
|
<UButton to="#documentation" variant="outline" size="sm">
|
|
Voir la Documentation
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UDashboardToolbar>
|
|
<template #left>
|
|
<UBadge variant="subtle" size="lg">
|
|
APIs REST Complètes - Pour Développeurs
|
|
</UBadge>
|
|
</template>
|
|
</UDashboardToolbar>
|
|
</template>
|
|
|
|
<template #body>
|
|
<div class="space-y-12">
|
|
<!-- Hero Description -->
|
|
<div>
|
|
<p class="text-lg text-gray-600 dark:text-gray-400">
|
|
Automatisez la gestion de vos connexions réseau avec nos APIs REST puissantes et faciles à utiliser.
|
|
SDK, documentation complète et exemples de code inclus.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- API Endpoints Grid -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold mb-2">Endpoints Principaux</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-8">
|
|
Explorez nos APIs pour intégrer Wibx Tour dans vos applications
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<UCard
|
|
v-for="api in apiEndpoints"
|
|
:key="api.title"
|
|
class="hover:shadow-lg transition-shadow duration-300"
|
|
>
|
|
<template #header>
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
|
|
<UIcon :name="api.icon" size="24" class="text-primary" />
|
|
</div>
|
|
<div>
|
|
<UBadge variant="soft" size="sm" class="mb-1">
|
|
{{ api.category }}
|
|
</UBadge>
|
|
<h3 class="font-semibold">{{ api.title }}</h3>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<p class="text-gray-600 dark:text-gray-300 mb-4">
|
|
{{ api.description }}
|
|
</p>
|
|
|
|
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 text-sm font-mono">
|
|
{{ api.endpoint }}
|
|
</div>
|
|
|
|
<template #footer>
|
|
<UButton variant="outline" block class="mt-4">
|
|
Voir la Doc
|
|
</UButton>
|
|
</template>
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Code Example -->
|
|
<div id="documentation" class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-8">
|
|
<h2 class="text-2xl font-bold mb-2">Exemple d'Utilisation</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-8">
|
|
Commencez rapidement avec notre SDK JavaScript
|
|
</p>
|
|
|
|
<div class="bg-gray-900 rounded-lg p-6 overflow-x-auto">
|
|
<pre class="text-green-400 text-sm"><code>{{ exampleCode }}</code></pre>
|
|
</div>
|
|
|
|
<div class="flex justify-center mt-8">
|
|
<div class="flex gap-4">
|
|
<UButton variant="outline">
|
|
<UIcon name="i-simple-icons-npm" class="mr-2" />
|
|
npm install wibx-tour-sdk
|
|
</UButton>
|
|
<UButton variant="outline">
|
|
<UIcon name="i-simple-icons-github" class="mr-2" />
|
|
Voir sur GitHub
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rate Limits and Billing -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold mb-2">Tarification et Limites</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-8">
|
|
Informations sur les limites d'utilisation et la facturation des APIs
|
|
</p>
|
|
<UAccordion :items="rateInformation" />
|
|
</div>
|
|
|
|
<!-- SDK and Tools -->
|
|
<div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-8">
|
|
<h2 class="text-2xl font-bold mb-2">SDKs et Outils</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-8">
|
|
Bibliothèques officielles pour accélérer votre développement
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<UCard class="text-center">
|
|
<template #header>
|
|
<div class="flex justify-center">
|
|
<UIcon name="i-simple-icons-javascript" size="48" class="text-yellow-500" />
|
|
</div>
|
|
</template>
|
|
<h3 class="font-semibold mb-2">JavaScript/Node.js</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
|
|
SDK officiel pour Node.js et navigateurs
|
|
</p>
|
|
<UButton variant="outline" size="sm" block>
|
|
Installer
|
|
</UButton>
|
|
</UCard>
|
|
|
|
<UCard class="text-center">
|
|
<template #header>
|
|
<div class="flex justify-center">
|
|
<UIcon name="i-simple-icons-python" size="48" class="text-blue-500" />
|
|
</div>
|
|
</template>
|
|
<h3 class="font-semibold mb-2">Python</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
|
|
Bibliothèque Python pour intégration facile
|
|
</p>
|
|
<UButton variant="outline" size="sm" block>
|
|
Installer
|
|
</UButton>
|
|
</UCard>
|
|
|
|
<UCard class="text-center">
|
|
<template #header>
|
|
<div class="flex justify-center">
|
|
<UIcon name="i-simple-icons-go" size="48" class="text-cyan-500" />
|
|
</div>
|
|
</template>
|
|
<h3 class="font-semibold mb-2">Go</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
|
|
Module Go pour applications haute performance
|
|
</p>
|
|
<UButton variant="outline" size="sm" block>
|
|
Installer
|
|
</UButton>
|
|
</UCard>
|
|
|
|
<UCard class="text-center">
|
|
<template #header>
|
|
<div class="flex justify-center">
|
|
<UIcon name="i-lucide-terminal" size="48" class="text-gray-500" />
|
|
</div>
|
|
</template>
|
|
<h3 class="font-semibold mb-2">CLI Tool</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
|
|
Outil en ligne de commande pour administration
|
|
</p>
|
|
<UButton variant="outline" size="sm" block>
|
|
Télécharger
|
|
</UButton>
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Support -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold mb-8 text-center">Support Développeurs</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<UCard class="text-center">
|
|
<template #header>
|
|
<div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center mx-auto">
|
|
<UIcon name="i-lucide-book" size="24" class="text-blue-600 dark:text-blue-400" />
|
|
</div>
|
|
</template>
|
|
<h3 class="font-semibold mb-2">Documentation</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
|
|
Documentation complète avec exemples et guides
|
|
</p>
|
|
<UButton variant="outline" block>
|
|
Consulter
|
|
</UButton>
|
|
</UCard>
|
|
|
|
<UCard class="text-center">
|
|
<template #header>
|
|
<div class="w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center mx-auto">
|
|
<UIcon name="i-lucide-message-circle" size="24" class="text-green-600 dark:text-green-400" />
|
|
</div>
|
|
</template>
|
|
<h3 class="font-semibold mb-2">Support Technique</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
|
|
Équipe dédiée pour les intégrations complexes
|
|
</p>
|
|
<UButton variant="outline" block>
|
|
Contacter
|
|
</UButton>
|
|
</UCard>
|
|
|
|
<UCard class="text-center">
|
|
<template #header>
|
|
<div class="w-16 h-16 bg-purple-100 dark:bg-purple-900/20 rounded-full flex items-center justify-center mx-auto">
|
|
<UIcon name="i-lucide-users" size="24" class="text-purple-600 dark:text-purple-400" />
|
|
</div>
|
|
</template>
|
|
<h3 class="font-semibold mb-2">Communauté</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
|
|
Rejoignez notre communauté de développeurs
|
|
</p>
|
|
<UButton variant="outline" block>
|
|
Rejoindre
|
|
</UButton>
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UDashboardPanel>
|
|
</template> |