Aller au contenu principal

index

---
sidebar_position: 2
---

import Tooltip from '@site/src/components/Tooltip/Tooltip';
import CodeBlockWithTooltips from '@site/src/components/CodeBlockWithTooltips/';
import Badges from '@site/src/components/Badges/Badges';
import ResourceCards from '@site/src/components/ResourceCards/ResourceCards';
import FeatureCards from '@site/src/components/FeatureCards/FeatureCards';
import QuickStart from '@site/src/components/QuickStart/QuickStart';

# Commencer

<Badges />

Le SDK de la plateforme OneEntry est un SDK qui fournit un moyen facile d'interagir avec l'API de la plateforme OneEntry.

---

<QuickStart />

---

## 🌐 Ressources

<ResourceCards />

---

## ✨ Fonctionnalités Clés

<FeatureCards />

---

## 📖 Utilisation Détailée

### Tous les Modules Disponibles

Importez et déstructurez tous les modules dont vous avez besoin :

<CodeBlockWithTooltips
  code={`
    import { defineOneEntry } from 'oneentry'

    const config = {
      token: 'your-app-token',
    }
    const {
      {/* Le module <a target='_blank' href='/docs/admins/'> 'Admins' </a> est utilisé pour gérer les administrateurs. Un administrateur est un utilisateur qui peut ajouter, mettre à jour et modifier des informations sur le site web ou dans l'application mobile. */}
      Admins,
      {/* Le module <a target='_blank' href='/docs/attribute-sets/attributesets/'> 'AttributesSets' </a> est utilisé pour gérer les attributs. Les attributs sont une entité qui vous permet de configurer la structure de votre application. */}
      AttributesSets,
      {/* Le module <a target='_blank' href='/docs/auth-provider/authprovider/'> 'AuthProvider' </a> gère l'authentification et l'enregistrement des utilisateurs par divers moyens, tels que l'email. */}
      AuthProvider,
      {/* Le module <a target='_blank' href='/docs/blocks/'> 'Blocks' </a> vous permet de créer des structures contenant des ensembles d'attributs. OneEntry fournit des outils très flexibles, vous pouvez donc utiliser le module 'Blocks' selon vos besoins spécifiques. Son concept principal est de créer des entités réutilisables (blocs) qui incluent des ensembles d'attributs et du contenu supplémentaire. */}
      Blocks,
      {/* Le module <a target='_blank' href='/docs/events/'> 'Events' </a> vous permet de créer et de gérer des événements pour interagir avec les utilisateurs. Vous définissez un événement qui déclenche des réponses et des notifications du système. Par exemple, si les articles du catalogue ont des statuts 'En stock' et 'Hors stock', vous pouvez envoyer une notification lorsque le statut change de 'Hors stock' à 'En stock'. */}
      Events,
      {/* Le module <a target='_blank' href='/docs/file-uploading/fileuploading/'> 'FileUploading' </a> fournit des méthodes pour gérer des fichiers dans le stockage cloud. La méthode de téléchargement vous permet de télécharger des fichiers avec des paramètres optionnels tels que le type, l'entité, l'ID et les options d'optimisation d'image. Elle renvoie des informations sur le fichier téléchargé, y compris son nom et son lien de téléchargement. La méthode de suppression retire un fichier du stockage, tandis que la méthode getFile récupère un objet fichier basé sur des paramètres tels que l'ID, le type, l'entité et le nom de fichier. */}
      FileUploading,
      {/* Le module <a target='_blank' href='/docs/forms/'> 'Forms' </a> est un outil convivial pour créer et gérer des formulaires tels que des formulaires de contact, des enquêtes et des feuilles d'inscription. Il offre une interface intuitive pour ajouter des éléments, personnaliser des mises en page et appliquer des thèmes. Il prend également en charge l'organisation des formulaires, la définition des autorisations d'accès et le suivi des réponses en temps réel. Les fonctionnalités d'automatisation incluent des notifications lors des soumissions et l'intégration avec des applications. */}
      Forms,
      {/* Le module <a target='_blank' href='/docs/forms-data/formsdata/'> 'FormData' </a> vous permet de gérer et d'interagir avec les données de formulaire. En utilisant la fonction defineOneEntry, vous pouvez créer un objet FormData pour gérer diverses opérations. Il prend en charge plusieurs types de données tels que des chaînes, des nombres, des dates, du texte, des images, des fichiers, des listes et des entités imbriquées. Il fournit des méthodes comme getFormsData, postFormsData et getFormsDataByMarker pour récupérer, créer et rechercher des données de formulaire. Chaque méthode interagit avec l'API et renvoie des objets JSON structurés avec des informations détaillées, y compris des ID, des horodatages et des données spécifiques à la langue. */}
      FormData,
      {/* Le module <a target='_blank' href='/docs/general-types/generaltypes/'> 'GeneralTypes' </a> est utilisé pour gérer et récupérer des types généraux au sein du système. En utilisant defineOneEntry, vous pouvez créer un objet GeneralTypes et appeler getAllTypes pour récupérer tous les objets GeneralTypeEntity de l'API. Chaque entité comprend un ID et un type, couvrant des objectifs tels que les mises en page de page, les formulaires, les blocs de produits, et plus encore. */}
      GeneralTypes,
      {/* Le module <a target='_blank' href='/docs/integration-collections/integrationcollections/'> 'IntegrationCollections' </a> stocke des données utilisées pour intégrer différents services et systèmes. Pour intégrer des services tiers, vous devez d'abord créer et configurer des collections. */}
      IntegrationCollections,
      {/* Le module <a target='_blank' href='/docs/locales/'> 'Locales' </a> permet la prise en charge multilingue dans OneEntry. Vous pouvez personnaliser l'interface du tableau de bord et gérer facilement les langues du projet. */}
      Locales,
      {/* Le module <a target='_blank' href='/docs/menus/'> 'Menus' </a> définit la structure et la navigation de votre site. Il offre aux visiteurs un moyen facile de naviguer à travers les sections de votre application et de trouver les informations dont ils ont besoin. */}
      Menus,
      {/* Le module <a target='_blank' href='/docs/orders/'> 'Orders' </a> gère la création et le paiement de biens ou de services, ce qui est une partie intégrante des applications de commerce électronique. */}
      Orders,
      {/* Le module <a target='_blank' href='/docs/pages/'> 'Pages' </a> vous permet de gérer des pages dans une application web ou des écrans dans une application mobile. */}
      Pages,
      {/* Le module <a target='_blank' href='/docs/payments/'> 'Payments' </a> est une partie essentielle des applications de commerce électronique. Il fournit des méthodes pour gérer les paiements. */}
      Payments,
      {/* Le module <a target='_blank' href='/docs/product-statuses/productstatuses/'> 'ProductStatuses' </a> gère les statuts qui servent de filtres supplémentaires aux côtés des conditions définies par les attributs. */}
      ProductStatuses,
      {/* Le module <a target='_blank' href='/docs/products/'> 'Products' </a> vous permet de gérer un catalogue de produits. */}
      Products,
      {/* Le module <a target='_blank' href='/docs/settings/'> 'Settings' </a> fournit des méthodes pour gérer les paramètres généraux de l'application dans OneEntry. */}
      Settings,
      {/* Le module <a target='_blank' href='/docs/system/'> 'System' </a> fournit des méthodes pour tester les redirections de pages d'erreur (404 et 500) afin de vérifier que les mécanismes de gestion des erreurs fonctionnent correctement. */}
      System,
      {/* Le module <a target='_blank' href='/docs/templates/'> 'Templates' </a> configure l'affichage du contenu au sein de votre application. Certains modèles affectent les images stockées dans OneEntry, tandis que d'autres définissent l'apparence d'entités telles que des blocs, des pages et des produits. */}
      Templates,
      {/* Le module <a target='_blank' href='/docs/templates-preview/templatepreviews/'> 'TemplatePreviews' </a> configure les paramètres d'image utilisés dans les attributs. L'application d'un modèle à un attribut 'Image' ou 'Groupe d'Images' standardise les tailles d'image selon les spécifications du modèle d'aperçu. */}
      TemplatePreviews,
      {/* Le module <a target='_blank' href='/docs/users/'> 'Users' </a> vous permet de gérer les utilisateurs enregistrés. */}
      Users,
      {/* Vous pouvez vous abonner aux événements via le module <a target='_blank' href='/docs/web-socket/ws'> WebSocket </a> pour recevoir des notifications. */}
      WS
    } = defineOneEntry('your-url', config);
  `}
  language="js"
/>

Ou

```js
const config = {
  token: 'your-app-token',
};

const api = defineOneEntry('your-url', config);

Configuration​

Le deuxième paramètre du constructeur prend la 'config'. Elle contient les valeurs suivantes :

  • 'token' - Définissez la clé de token si votre projet sécurise le "Security API Token". Si vous utilisez une protection par certificat, ne passez pas cette variable. Vous pouvez en savoir plus sur la sécurité de votre projet ici.
  • 'langCode' - Définissez le "langCode" pour définir la langue par défaut. En spécifiant ce paramètre une fois, vous n'avez pas besoin de passer le langCode aux méthodes de l'API ONEENTRY. Si vous n'avez pas passé la langue par défaut, elle sera définie sur "en_US".
  • 'traficLimit' - Certaines méthodes utilisent plus d'une requête à OneEntry afin que les données que vous recevez soient complètes et faciles à travailler. Passez la valeur "true" pour ce paramètre afin d'économiser du trafic et de décider vous-même quelles données vous avez besoin. La valeur par défaut est "false".
  • 'auth' - Un objet avec les paramètres d'autorisation. Par défaut, le SDK est configuré pour fonctionner avec des tokens à l'intérieur de la session de l'utilisateur et ne nécessite aucun travail supplémentaire de votre part. En même temps, le SDK ne stocke pas l'état de la session entre les sessions. Si vous êtes satisfait de ces paramètres, ne passez pas la variable 'auth' du tout.

L' 'auth' contient les paramètres suivants :

  • 'refreshToken' - Le token de rafraîchissement de l'utilisateur. Transférez-le ici depuis le dépôt pour restaurer la session de l'utilisateur lors de l'initialisation.
  • 'saveFunction' - Une fonction qui travaille avec le token de rafraîchissement mis à jour. Si vous souhaitez stocker le token entre les sessions, par exemple dans le stockage local, passez ici une fonction qui le fait. La fonction doit accepter un paramètre auquel la chaîne avec le token sera passée.
  • 'customAuth' - Si vous souhaitez configurer l'autorisation et travailler vous-même avec les tokens, définissez ce drapeau sur true. Si vous souhaitez utiliser les paramètres du SDK, définissez-le sur false ou ne le transférez pas du tout.
  • 'providerMarker' - Le marqueur pour le fournisseur d'authentification. Par défaut : 'email'. Un exemple de configuration avec protection par token et authentification automatique qui stocke l'état entre les sessions
const tokenFunction = (token) => {
  localStorage.setItem('refreshToken', token);
};

const api = defineOneEntry('https://my-project.oneentry.cloud', {
  token: 'my-token',
  langCode: 'en_US',
  auth: {
    refreshToken: localStorage.getItem('refreshToken'),
    saveFunction: tokenFunction,
    providerMarker: 'email'
  },
});

Un exemple de configuration protégée par un certificat qui vous permet de configurer le système d'autorisation vous-même et de sauvegarder les données sur les requêtes.

const api = defineOneEntry('https://my-project.oneentry.cloud', {
  langCode: 'en_US',
  traficLimit: true,
  auth: {
    customAuth: true,
    refreshToken: localStorage.getItem('refreshToken'),
    providerMarker: 'email'
  },
});

Si vous avez choisi de configurer les tokens vous-même, vous pouvez passer le token à la méthode comme suit. La méthode intermédiaire vous permet de passer un token d'accès à la requête. Ensuite, appelez la méthode requise. Cette méthode (setAccessToken) ne doit pas être appelée si la méthode ne nécessite pas d'autorisation utilisateur.

const user = api.Users.setAccessToken('my.access.token').getUser();

Si vous avez choisi la protection par token pour garantir la sécurité de la connexion, passez simplement votre token à la fonction en tant que paramètre optionnel.

Vous pouvez obtenir un token comme suit​

  1. Connectez-vous à votre compte personnel
  2. Allez à l'onglet "Projets" et sélectionnez un projet
  3. Allez à l'onglet "Accès"
  4. Activez le commutateur "Security API Token"
  5. Connectez-vous au projet, allez à la section des paramètres et ouvrez l'onglet des tokens
  6. Obtenez et copiez le token de votre projet

Vous pouvez également connecter un certificat TLS pour protéger votre projet. Dans ce cas, ne passez pas du tout le "token". Lors de l'utilisation du certificat, configurez un proxy dans votre projet. Passez une chaîne vide comme paramètre d'url. En savoir plus sur la sécurité

const saveTokenFromLocalStorage = (token) => {
  localStorage.setItem('refreshToken', token);
};

const api = defineOneEntry('your-url', {
  token: 'my-token',
  langCode: 'my-langCode',
  auth: {
    customAuth: false,
    userToken: 'rerfesh.token',
    saveFunction: saveTokenFromLocalStorage,
    providerMarker: 'email'
  },
});

Erreurs​

Si vous souhaitez échapper aux erreurs à l'intérieur du SDK, laissez la propriété "errors" par défaut. Dans ce cas, vous recevrez soit les données de l'entité, soit l'objet d'erreur. Vous devez effectuer une vérification de type, par exemple, en vérifiant la propriété statusCode avec ".hasOwnProperty".

Cependant, si vous souhaitez utiliser la construction "try catch(e) ", définissez la propriété "isShell" sur la valeur "false". Dans ce cas, vous devez gérer l'erreur en utilisant "try catch(e) ".

De plus, vous pouvez passer des fonctions personnalisées qui seront appelées à l'intérieur du SDK avec le code d'erreur approprié. Ces fonctions reçoivent un objet d'erreur en tant qu'argument. Vous pouvez le traiter vous-même.

const api = defineOneEntry('your-url', {
  token: 'my-token',
  langCode: 'my-langCode',
  errors: {
    isShell: false,
    customErrors: {
      400: (error) => console.error(error.message),
      404: (error) => console.error(error.message),
      500: (error) => console.error(error.message),
    },
  },
});

📚 Prochaines Étapes​

Explorez nos guides complets pour en savoir plus :