@jussef/lms-sdk

SDK React para integrar cualquier app con el sistema LMS centralizado. Proporciona hooks y un componente listo para reproducir cursos SCORM.

Instalacion

npm install @jussef/lms-sdk
# o
yarn add @jussef/lms-sdk

Peer dependencies requeridas:

npm install react react-dom

Inicio rapido

1. Envolver la app con LMSProvider

import { LMSProvider } from '@jussef/lms-sdk';

// token lo obtienes con useAuth (ver abajo)
<LMSProvider
  apiUrl="https://lms-api.tudominio.com"
  playerUrl="https://player.tudominio.com"
  token={token}
  tenantId="nombre-de-tu-tenant"
>
  <App />
</LMSProvider>

2. Login

useAuth funciona fuera del provider porque aun no tienes token.

import { useAuth } from '@jussef/lms-sdk';

function LoginScreen({ onLogin }) {
  const { login, loading, error } = useAuth('https://lms-api.tudominio.com');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const { token, user } = await login({
      email: '[email protected]',
      password: '123456',
      tenantId: 'nombre-de-tu-tenant',
    });
    onLogin(token, user);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* tus inputs */}
      {error && <p>{error}</p>}
    </form>
  );
}

3. Reproducir un curso SCORM

import { ScormPlayer } from '@jussef/lms-sdk';

<ScormPlayer
  courseId="id-del-curso"
  userId="id-del-usuario"
  style={{ width: '100%', height: '100vh' }}
  onComplete={(data) => console.log('Completado', data)}
  onProgress={(data) => console.log('Progreso', data.status, data.score)}
  onExit={() => console.log('Salio del curso')}
/>

Hooks disponibles

useCourses

Gestiona los cursos del tenant.

import { useCourses } from '@jussef/lms-sdk';

function MisCursos() {
  const { courses, loading, upload, assign, remove } = useCourses();

  // Subir un .zip SCORM
  const handleFile = async (e) => {
    const course = await upload(e.target.files[0], 'Nombre del curso');
    console.log('Subido:', course);
  };

  // Asignar curso a un grupo
  await assign({ courseId: 'abc', groupId: 'grupo1' });

  // Asignar curso a un usuario especifico
  await assign({ courseId: 'abc', userId: 'user1' });

  // Eliminar curso
  await remove('id-del-curso');

  if (loading) return <p>Cargando...</p>;
  return courses.map(c => <div key={c.id}>{c.name}</div>);
}

useUsers

import { useUsers } from '@jussef/lms-sdk';

const { users, loading, createUser, createBulk, updateUser, deleteUser } = useUsers();

// Crear un usuario
await createUser({ email: '[email protected]', password: '123456', role: 'student' });

// Crear varios a la vez (ej: importar CSV)
const results = await createBulk([
  { email: '[email protected]', password: '123456' },
  { email: '[email protected]', password: '123456' },
]);
console.log(results.created.length, 'creados');
console.log(results.errors);  // los que fallaron

// Actualizar
await updateUser('userId', { role: 'admin' });

// Eliminar
await deleteUser('userId');

useGroups

import { useGroups } from '@jussef/lms-sdk';

const { groups, createGroup, addUser, addCourse, deleteGroup } = useGroups();

const grupo = await createGroup('Grupo A');
await addUser(grupo.id, 'userId');
await addCourse(grupo.id, 'courseId');

useProgress

import { useProgress, useGroupReport, useCourseReport } from '@jussef/lms-sdk';

// Progreso de un usuario en un curso
const { progress } = useProgress('courseId', 'userId');
// progress = { status, score, location, data, updatedAt }

// Todos los progresos de un grupo
const { records } = useGroupReport('groupId');

// Todos los progresos de un curso
const { records } = useCourseReport('courseId');

Referencia de ScormPlayer

| Prop | Tipo | Requerido | Descripcion | |------|------|-----------|-------------| | courseId | string | Si | ID del curso en lms-api | | userId | string | Si | ID del usuario | | style | object | No | Estilos CSS del contenedor | | className | string | No | Clase CSS del contenedor | | onComplete | function | No | Llamado cuando el curso se completa | | onProgress | function | No | Llamado en cada commit de progreso SCORM | | onExit | function | No | Llamado al desmontar el componente |

Referencia de LMSProvider

| Prop | Tipo | Requerido | Descripcion | |------|------|-----------|-------------| | apiUrl | string | Si | URL de lms-api | | playerUrl | string | Si | URL de scorm-player | | token | string | Si | JWT obtenido con useAuth | | tenantId | string | Si | ID del tenant |

Arquitectura del sistema

App React (tu frontend)
  usa @jussef/lms-sdk
       │
       ├── REST calls ──► lms-api (puerto 3001)
       │                    guarda progreso, usuarios, cursos
       │
       └── iframe ────────► scorm-player (puerto 3002)
                              sirve archivos SCORM
                              inyecta API SCORM 1.2/2004
                              reporta progreso a lms-api

Compatibilidad

• SCORM 1.2
• SCORM 2004
• React 18+
• Node.js 18+ (para lms-api y scorm-player)