Comment intégrer le lecteur de conversation Linguineo dans votre environnement d’apprentissage

🎓 Comment intégrer le lecteur de conversation Linguineo dans votre environnement d’apprentissage

Le lecteur d’IA conversationnelle de Linguineo permet aux apprenants de s’entraîner à parler dans des situations réelles, directement depuis votre plateforme. Dans ce tutoriel, nous vous expliquons pas à pas comment intégrer le lecteur dans votre LMS ou votre environnement d’apprentissage.

🔐 1. Configurer le fournisseur d’identité et obtenir le jeton d’accès

Important : en production, vous devez utiliser votre propre fournisseur d’identité. Vous devrez nous communiquer, chez Linguineo, l’URL de votre ensemble JWKS. Notre équipe la configurera sur nos API : vous ne pouvez pas effectuer cette étape vous-même. Pour simplifier, ce tutoriel montre l’intégration avec le fournisseur d’identité Keycloak de Linguineo.

Commencez par authentifier vos utilisateurs et obtenir un jeton d’accès pour le lecteur.

Utilisez le fournisseur d’identité de Linguineo (uniquement pour des tests ou une démo) :

Flux de connexion de base en JavaScript :

Ajoutez le bouton suivant à votre page HTML :

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

Ajoutez ensuite le script JavaScript suivant. Ce code transmet le jeton d’accès obtenu à l’élément portant l’id linguineo-conversation de votre page (que nous ajouterons dans les étapes 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é de Linguineo, vous pouvez utiliser l’utilisateur tester01 et le mot de passe testing2025

🧩 2. Importer les fichiers JavaScript nécessaires

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

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

Si vous préférez ne pas faire référence à des URL de Linguineo, vous pouvez copier ces fichiers js et css dans votre propre environnement. Vous pouvez les télécharger ici.

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

Prévoyez un conteneur pour le lecteur et intégrez-y 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"
    application="TEST_APP"
    language="fr"
    tutor-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 l’access-token via JavaScript après la connexion (voir l’exemple de la première étape).

🛎️ 4. Écouter l’événement linguineo:end

Vous pouvez détecter le moment où un utilisateur termine une conversation :

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

L’objet exerciseResult possède les propriétés suivantes :

percentage: number;
needsManualEvaluation: boolean;
pointsAwarded: number;
durationInMs?: number;
taskResultInfos?: TaskResultInfo[];
purpose: string;
conversationId?: number;
exerciseSessionId?: string;

🧪 Optionnel : intégration avec React et Angular

Le lecteur Linguineo s’intègre facilement aux frameworks modernes comme React et Angular. Vous pouvez transmettre l’access-token comme prop (React) ou comme input (Angular), et associer des écouteurs d’événements comme linguineo:end dans la logique de votre composant.

Pour des exemples complets et fonctionnels, y compris la gestion et le renouvellement des jetons, consultez notre dépôt GitHub :
👉 Linguineo Conversation Client Usage Example
Il contient des configurations complètes pour JavaScript pur, React et Angular.

✅ Conclusion

Vous disposez maintenant d’un composant d’IA conversationnelle entièrement fonctionnel dans votre LMS ! En production, pensez à :

Des questions ou besoin d’aide pour la mise en place ? Contactez notre équipe technique : nous sommes là pour vous aider.