Comment intégrer le lecteur d’IA conversationnelle Linguineo dans votre environnement d’apprentissage ?

🎓 Comment intégrer le lecteur d’IA conversationnelle Linguineo dans votre environnement d’apprentissage ?

Le lecteur d’IA conversationnelle de Linguineo permet aux apprenants de s’entraîner à parler dans des scénarios du monde réel directement à partir de votre plateforme. Dans ce tutoriel, nous vous aiderons à intégrer le lecteur dans votre LMS ou votre environnement d’apprentissage personnalisé.

🔐 1. Configuration du fournisseur d’identité et obtention du jeton d’accès

Note importante : Dans les déploiements réels, vous devez utiliser votre propre fournisseur d’identité. Vous devrez partager votre URL JWKS avec Linguineo. Notre équipe configurera ceci sur nos APIs – vousne pouvez pas faire cette étape vous-même. Pour ce tutoriel, nous allons démontrer l’intégration en utilisant le fournisseur d’identité Keycloak de Linguineo pour plus de simplicité.

Tout d’abord, authentifiez vos utilisateurs et obtenez un jeton d’accès pour le lecteur.

Utilisez le fournisseur d’identité de Linguineo (uniquement pour les tests/démonstrations) :

Flux de connexion JavaScript de base :

Ajoutez le bouton suivant à votre page html :

<button id="login">Login with OAuth</button>

Ajoutez ensuite le script Javascript suivant. Ce code attribue le jeton d’accès récupéré à l’élément avec l’id linguineo-conversation de votre page (que nous ajouterons dans les sections suivantes) : 

const clientId = 'moodle';
const authorizationUrl = 'https://keycloak.linguineo.com/auth/realms/moodle/protocol/openid-connect/auth';
const tokenUrl = 'https://keycloak.linguineo.com/auth/realms/moodle/protocol/openid-connect/token';

document.getElementById('login').onclick = () => {
  const authUrl = `${authorizationUrl}?response_type=code&client_id=${clientId}&redirect_uri=${encodeURIComponent(window.location.href)}&scope=openid`;
  window.location.href = authUrl;
};

const params = new URLSearchParams(window.location.search);
if (params.has('code')) {
  const code = params.get('code');
  fetch(tokenUrl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      grant_type: 'authorization_code',
      code,
      redirect_uri: window.location.href,
      client_id: clientId,
    }),
  })
  .then(res => res.json())
  .then(data => {
    const accessToken = data.access_token;
    document.getElementById('linguineo-conversation').setAttribute('access-token', accessToken);
  });
}

Pour tester la connexion avec le fournisseur d’identité Linguineo, vous pouvez essayer avec l’utilisateur tester01 et le mot de passe tester2025.

🧩 2. Importez le JavaScript et les styles nécessaires

Pour utiliser le composant linguineo-conversation, ajoutez les balises de script suivantes à votre page (généralement au bas de celle-ci) :

<script src="https://uploads.linguineo.com/js/production-1.0.0/conversation-webcomponents-es5.js" nomodule></script>
<script src="https://uploads.linguineo.com/js/production-1.0.0/conversation-webcomponents-es2015.js" type="module"></script>

Dans l’idéal, ajoutez également les styles par défaut du composant :

<link rel="stylesheet" href="https://uploads.linguineo.com/js/production-1.0.0/styles.css">

Si vous préférez ne pas référencer d’url Linguineo, n’hésitez pas à copier ces fichiers js et css dans votre propre environnement.

🧱 3. Ajoutez le composant <linguineo-conversation> à la page

Créez un conteneur pour le lecteur et intégrez le composant avec votre configuration. La configuration du composant linguineo-conversation est décrite en détail ici.

<style>
  .linguineo-conversation-container {
    height: 100vh;
    width: 100vw;
  }
</style>

<div class="linguineo-conversation-container">
  <linguineo-conversation
    id="linguineo-conversation"
    access-token=""
    auth-method="bearer"
    bot-name="Bot"
    connection-config='{
      "basePath":"https://open-api.linguineo.com/api/v1",
      "resourcesBasePath":"https://open-api.linguineo.com/api/v1",
      "linguineoBasePath":"https://open-api.linguineo.com/api",
      "directCallsToLinguineoBackend":true
    }'
    application="TEST_APP"
    language="fr"
    translate-into-language="nl"
    scenario-id="503"
    answer-type="SPEAKING_WITH_INTERMEDIATE_WRITING"
    show-pronunciation-feedback="false"
    show-simple-corrective-feedback="false"
    sound-effects-enabled="false"
    additional-corrective-feedback="false"
    always-wait-for-bot-to-finish-speaking="false"
    enable-contextualized-grammar-corrections="false"
    do-additional-pronunciation-analysis="false"
  ></linguineo-conversation>
</div>

Veillez à mettre à jour dynamiquement le site access-token via JavaScript après la connexion.

🛎️ 4. À l « écoute de l » événement linguineo:end

Vous pouvez écouter lorsqu’un utilisateur termine une conversation :

window.addEventListener('linguineo:end', (e) => {
  console.log('Conversation finished', e.detail);
  // Handle end-of-conversation logic here
});

🧪 Optionnel : Intégration de React et Angular

Le lecteur Linguineo s’intègre parfaitement aux frameworks modernes tels que React et Angular. Vous pouvez transmettre l’adresse access-token en tant que propriété (React) ou entrée (Angular), et attacher des récepteurs d’événements tels que linguineo:end dans la logique de votre composant.

Pour des exemples de travail complets – y compris la gestion des jetons et la logique de rafraîchissement – visitez notre dépôt GitHub :
👉 Linguineo Conversation Client Usage Example
Il comprend des configurations complètes pour JavaScript, React et Angular.

✅ Conclusion

Vous avez maintenant un composant d’IA conversationnelle entièrement fonctionnel intégré dans votre LMS ! En production, n’oubliez pas de :

Vous avez des questions ou besoin d’aide pour l’installation ? Contactez notre équipe technique – nous sommes là pour vous aider.