认识 · Renshi

rènshi — conocer, reconocer

Vocabulario chino en contexto, hecho para enseñar en clase por videollamada.

renshi.davila.uno

---

🀄 El problema

Para enseñar vocabulario por videollamada, la profesora arma tarjetas en Quizlet y diapositivas en PowerPoint. Lleva horas, se repite igual en cada clase y no le dice si el grupo entendió. Renshi viene a reemplazar eso.

Las tarjetas de vocabulario de siempre muestran palabras sueltas: 认识 → conocer. Así no se distinguen sinónimos aparentes (房子 / 家), no se ven los distintos usos de una palabra (家 también es clasificador: 一家公司) y partículas como 了 o 过 son imposibles de entender.

Renshi enseña cada palabra dentro de frases, con lo que el chino necesita y una tarjeta normal no tiene: el orden de los trazos, de qué piezas está hecho cada carácter y cómo se usa de verdad.

Frente a Quizlet y un PPT

	Quizlet + PPT	Renshi
Preparar	Tarjeta por tarjeta, diapositiva por diapositiva	Elegir del HSK 3.0 o pegar la lista del libro: frases, pinyin y audio ya vienen
La palabra	Sola, con una foto	En frases reales, con matiz y nota cultural
El carácter	Imagen fija	Se dibuja trazo a trazo; de qué piezas está hecho
Repasar	Siempre lo mismo	Las frases rotan: primero las que el grupo no vio
¿Entendieron?	Preguntar en voz alta	Votan desde el celular, anónimos y sin cuenta

🎴 Cómo es una clase

sequenceDiagram
    actor P as Profesora
    participant R as Renshi (pantalla compartida)
    actor A as Alumnos (celular)
    P->>R: Empieza la clase con una lección
    R-->>A: Código de 6 letras en renshi.davila.uno/v
    loop Cada palabra
        R->>R: Anverso: el carácter se dibuja trazo a trazo
        R->>R: Reverso: pinyin, significado, cómo se forma y frases
        R-->>A: La palabra aparece sola en el celular
        A->>R: Votan sin cuenta: no la sé · me costó · bien · fácil
        P->>R: Valora al grupo y ve el semáforo
    end

✨ Lo que hace hoy

La tarjeta

• Anverso con la animación del orden de trazos sobre la cuadrícula 米字格.
• Reverso con pinyin, significado y cómo se forma: 知 zhī = 矢 shǐ + 口 kǒu, con el radical en verde y la parte fonética en azul.
• Frases de ejemplo con la palabra resaltada y, en cada frase, tres botones: escuchar, pinyin y traducción. Se revela solo lo que la clase necesita.
• Si una nota cita otra palabra ("para gustos cotidianos es más natural 喜欢"), al tocarla aparece su pinyin, significado y audio.
• Si una palabra todavía no tiene frases, la tarjeta propone "Inventen una frase con…": usarla enseña más que reconocerla.

La profesora

• Un inicio con sus lecciones y colecciones fijadas y lo último que editó.
• La biblioteca HSK muestra cada nivel completo en orden oficial, con búsqueda y páginas de 25, 50 o 100. Marca palabras de varias páginas y niveles y presenta la selección (o el nivel entero) sin armar una lección antes.
• Lecciones con o sin colección, que se mueven de una colección a otra.
• En el editor busca por hanzi, pinyin sin tonos (pengyou) o significado, marca varias y las añade de golpe, o pega la lista de palabras de su libro.
• Lo que ya no usa lo archiva (se restaura cuando quiera, con su historial) o lo borra definitivamente.
• Escribe sus frases propias (privadas) o hace su versión de una frase de la base. Si se la sugiere al admin y la acepta, pasa a la base de todos.
• Elige cuántas frases salen por palabra; cada clase rota y muestra primero las que ese grupo aún no vio.

Los alumnos

• Votan desde el celular sin cuenta y de forma anónima, con un código de seis casillas.
• La votación sigue a la clase: cuando la profesora pasa de palabra, el celular cambia solo. Si se pierde la conexión, el celular lo avisa.

El contenido

• Las 10 896 palabras de HSK 3.0 (niveles 1–6 y la banda avanzada 7–9), con significado en español.
• Unas 2700 frases de ejemplo (HSK 1–3 y temas), traducidas en español neutro latinoamericano (un validador impide que vuelvan vosotros o coche), más trazos y descomposición para los caracteres de todos los niveles.
• El admin cura la base común; las docentes nunca la editan directamente.

🧭 Lo que viene

Para no prometer lo que no existe, esto todavía no está:

• Guardar como lección lo que se presentó desde el catálogo.
• Frases de ejemplo para HSK 4–9 (hoy salen con la consigna).
• Palabras propias de la docente, para lo que no está en el temario (拜拜).
• Práctica de escritura: calcar o de memoria, con la tolerancia ajustable por nivel (prototipo en /lab/escritura, falta probarla con el dedo).
• Probar la votación con una clase real y muchos celulares a la vez.

🛠️ Stack

App	Next.js 16 (Cache Components) · React 19 · TypeScript
Interfaz	Tailwind v4 · shadcn/ui · next-intl (中文 / español / English) · next-themes
Datos y login	Supabase: Postgres con RLS en cada tabla; los alumnos votan por dos funciones públicas, sin clave secreta en el servidor
Despliegue	Vercel en São Paulo (gru1), junto a la base
Chino	Hanzi Writer · Make Me a Hanzi · temario oficial HSK 3.0

🚀 Correrlo en local

npm ci
cp .env.example .env.local   # y rellenarlo con los datos de Supabase
npm run dev                  # http://localhost:3000

Sin cuenta se puede abrir la lección de demo en /present. Para todo lo demás hace falta una base de Supabase con las migraciones de supabase/migrations (npm run db:migrate).

Base de desarrollo. Toda migración se prueba primero en una base aparte (hanzi-dev), nunca directo en producción:

npm run dev:base-dev         # servidor contra la base de desarrollo, puerto 3001

Pruebas

Comando	Qué comprueba
npm run test:unit	Rotación de frases, semáforo, categorías y estado de conexión
npm run test:db	Migraciones y permisos (RLS) en una base local con PGlite
npm run test:visual	La tarjeta en 4 tamaños de pantalla, claro y oscuro, con contraste y foco de teclado
npm run test:recorridos:dev	Recorridos con sesión real: docente, alumno anónimo y admin

Las sesiones para los recorridos se guardan con npm run test:sesion:dev admin (y laoshi): abre el login y la contraseña la escribe una persona, nunca un script.

📚 Datos y licencias

Datos	Fuente	Licencia
Temario y niveles	HSK 3.0 oficial (2025/2026)	lista oficial
Glosas en español	Gushi	CC BY-SA 4.0
Frases de ejemplo abiertas	Gushi y Tatoeba	CC BY-SA 4.0 · CC BY 2.0 FR
Descomposición de caracteres	Make Me a Hanzi	LGPL v3 o posterior
Trazos	hanzi-writer-data	Arphic Public License

El detalle por archivo está en data/README.md y la política editorial en contenido/POLITICA-DE-CONTENIDO.md.

🗂️ Documentación

Archivo	Contenido
HOJA-DE-RUTA.md	Prioridades vigentes
IDEA.md	De dónde salió la idea, argumentos y referencias
ARQUITECTURA.md	Modelo de datos, pantallas y fases
AGENTS.md	Reglas breves compartidas por los agentes de IA
ESTADO-ACTUAL.md	Estado operativo vigente
docs/especificacion-2026-10-15/	Especificación de referencia (fotografía del 15-oct, no se actualiza)
DECISIONES.md	Decisiones de producto y arquitectura
BITACORA.md	Registro técnico día a día: qué cambió, por qué y qué quedó sin probar
IDEAS-POR-CONTRASTAR.md	Ideas y hallazgos todavía sin decidir
docs/prioridades-renshi.html	Prioridades con costo, tiempo y cuadrante (copia del artifact de Claude del 25-oct; ábrelo en el navegador)

---

Hecho por Ever Dávila para su clase de chino, con Claude Code, Codex y Cline como compañeros de trabajo.

认识一个字，不如认识一句话。 · Mejor conocer una frase que un carácter.