https://odontograma-clinica.vercel.app/
Recientemente, un odontólogo nos contactó con la necesidad de modernizar su flujo de trabajo digital para el registro de odontogramas. Su software anterior era rígido, poco intuitivo y no se integraba con su sistema de gestión de pacientes basado en Airtable. El desafío era claro: crear una solución robusta, amigable y extensible, que respetara sus hábitos y se integrara perfectamente con sus herramientas actuales, incluyendo Softr.io.
Entendiendo el desafío
Nuestro cliente, un odontólogo en ejercicio, dependía de los odontogramas digitales para su práctica diaria, pero estaba frustrado por las limitaciones de su software anterior. Sus requerimientos principales eran:
- Una interfaz familiar e intuitiva
- Registro dental preciso a nivel de superficie (basado en FDI)
- Notas por pieza dental y doble capa de anotación (existente y requerida)
- Exportación sencilla e integración directa con Airtable y Softr.io
Tuvimos varias reuniones para observar su flujo de trabajo, identificar puntos críticos y asegurar que la nueva app se adaptara a su rutina diaria sin curva de aprendizaje.
Alcance y contexto de integración
Cabe destacar que la integración con Softr.io (plataforma no-code para construir frontends sobre Airtable) ya estaba planificada y gestionada por el propio cliente. Nuestra responsabilidad fue exclusivamente diseñar e implementar la aplicación web de odontograma, asegurando que pudiera exportar y subir tanto imágenes como datos estructurados a Airtable, donde Softr.io se encargaría de la visualización y gestión de los registros.
¿Qué es FDI y por qué es importante?
FDI significa Fédération Dentaire Internationale (Federación Dental Internacional). Es un sistema universal de numeración dental de dos dígitos que identifica cada diente y su cuadrante. Este estándar permite registrar y comunicar hallazgos dentales de manera precisa y reconocida internacionalmente, facilitando la interoperabilidad entre profesionales y sistemas.
Tecnologías utilizadas
Este proyecto reunió un stack web completo y moderno:
- JavaScript (ES6+): Lógica principal de la aplicación, manejo de eventos y procesamiento de datos.
- jQuery: Manipulación del DOM, delegación de eventos e integración del plugin odontograma.
- HTML5 Canvas: Renderizado del odontograma y generación de reportes PNG de alta resolución.
- CSS3: Estilos responsivos y diseño clínico profesional.
- Plugin jQuery Odontogram: Motor interactivo de odontogramas (Adhiana46/jquery-odontogram), extendido para nuestras necesidades.
- JSON: Estructura de datos para exportación e integración backend.
- Node.js & Express: API backend para recibir y almacenar archivos PNG/JSON.
- Cloudinary API: Subida y almacenamiento seguro/escalable de imágenes odontograma.
- Airtable API: Adjuntar imágenes y datos estructurados a los registros de pacientes.
- Softr.io: Plataforma no-code utilizada por el cliente para construir el frontend sobre Airtable y gestionar los datos de pacientes.
- APIs del navegador: Para manejo de archivos, generación de imágenes y procesamiento en el cliente.
Mapeo anatómico FDI: precisión clínica
Uno de los mayores retos técnicos fue implementar el mapeo anatómico basado en FDI. En odontología, la misma posición en el canvas (por ejemplo, "izquierda") puede significar "mesial" o "distal" según el cuadrante del diente. Desarrollamos un sistema que traduce posiciones del canvas (superior, inferior, izquierda, derecha, centro) a superficies anatómicas reales (vestibular, palatina/lingual, mesial, distal, oclusal/incisal) según el cuadrante FDI, garantizando precisión clínica y comunicación clara.
Doble capa de anotación: reflejando la práctica real
La aplicación soporta dos capas de anotación:
- Pre-existente (rojo): Condiciones o tratamientos ya presentes
- Requerido (azul): Tratamientos que deben realizarse
El profesional puede alternar entre capas con un solo clic, y todas las anotaciones están codificadas por color para reconocimiento inmediato, replicando el flujo de trabajo real en consultorio.
Notas por pieza dental: documentación clínica sencilla
Cada diente permite registrar notas específicas, con guardado automático y opciones de guardado/borrado manual. Estas notas se incluyen tanto en la exportación JSON como en el reporte PNG, asegurando una documentación clínica completa.
Exportación de datos: JSON y reportes PNG profesionales
- Exportación JSON: La app exporta todos los datos del odontograma en formato estructurado, incluyendo fecha, nombre del paciente, piezas anotadas, condiciones, tratamientos y notas.
- Exportación PNG: Genera un reporte profesional en formato A4 con el odontograma, tratamientos, notas, nombre del paciente y timestamp. El layout está optimizado para claridad y uso clínico.
Integración con Cloudinary y Airtable: flujo de trabajo sin fricciones
Un aspecto clave fue la integración con Cloudinary y Airtable:
- Al generar un reporte PNG, la imagen se sube a Cloudinary mediante su API, asegurando almacenamiento seguro y escalable.
- El backend (Node.js/Express) adjunta la URL de la imagen en Cloudinary y los datos estructurados JSON al registro de paciente correspondiente en Airtable, usando la API de Airtable.
- Así, todas las imágenes y notas del odontograma quedan disponibles instantáneamente en el registro del paciente.
Softr.io: frontend no-code para el profesional
El cliente ya utilizaba Softr.io para construir un frontend no-code sobre Airtable. Esto le permite gestionar datos de pacientes, visualizar imágenes y notas del odontograma, e interactuar con el sistema sin barreras técnicas. Nuestra app se integra perfectamente a este flujo, asegurando que todo aparezca automáticamente en su dashboard de Softr.io.
Manteniendo la familiaridad: respetando los hábitos del usuario
Durante el desarrollo, mostramos avances frecuentes al odontólogo, asegurando que la app se mantuviera familiar y fácil de usar. Conservamos el flujo de selección y anotación de tratamientos, pero sumamos mejoras modernas como guardado automático de notas, capas codificadas por color y generación de documentos profesionales.
Lecciones aprendidas
- El diseño centrado en el usuario es esencial: El feedback frecuente del odontólogo mantuvo el proyecto alineado y garantizó su adopción.
- Innovar sin perder familiaridad: Las nuevas funciones son valiosas, pero nunca a costa de la usabilidad para usuarios no técnicos.
- La integración es clave: Adaptarnos a las herramientas ya usadas por el cliente (Airtable + Softr.io) hizo que la app realmente potenciara su productividad.
- El open source acelera el desarrollo: Partir de una base open source sólida nos permitió enfocarnos en las necesidades reales del cliente.
Conclusión
El resultado es una aplicación web de odontograma moderna y ligera, potente y accesible. Escuchando al cliente y aprovechando un stack tecnológico completo—JavaScript, jQuery, HTML5 Canvas, CSS3, Node.js, Express, Cloudinary API, Airtable API, Softr.io—entregamos una herramienta que se integra perfectamente en el flujo de trabajo diario del odontólogo, haciendo la documentación clínica más rápida, precisa y fácil de gestionar.
Código fuente
Repositorio del proyecto:
https://github.com/zendev2112/odontograma
Base open source:
https://github.com/Adhiana46/jquery-odontogram
Tecnologías utilizadas:
JavaScript (ES6+), jQuery, HTML5 Canvas, CSS3, Plugin jQuery Odontogram, JSON, Node.js, Express, Cloudinary API, Airtable API, Softr.io, APIs del navegador.
Si vas a construir para usuarios reales, recuerda: ¡primero escucha, después programa!
Top comments (0)