Todas las entradas de: admin

Gestor de Cita Previa (2)

La versión anterior de Cita Previa, trabaja bajo el concepto de cita para un evento/actividad que tiene una duración fija (sistema médico de salud, gestión administración pública, etc.), donde se estima que es un tiempo promedio fijo para la actividad con el Ciudadano/Cliente.

Esta versión que vengo a explicar y a definir unos componentes para su desarrollo, es también de cita previa, pero desde que se facilita la cita, se establece el tiempo de actividad y por lo tanto no es fijo, si no variable. Puede ser ejemplo de este tipo de actividad un despacho de Odontólogos/Dentistas, un salón de peluquería, masajes o manicura, etc., en aquellas actividades en donde se establece tiempos distintos dependiendo de la actividad que requiera el cliente.

Objetivo

Definir una propuesta técnica/desarrollo de una gestión de cita previa  para actividades que se ejecutan con tiempos distintos y que conllevan la asignación de un profesional para la realización de la actividad.

DEMO: https://fhumanes.com/citas/

Funcionamiento:

  1. – Buscar y seleccionar al Cliente. Si es nuevo, se daría de alta.
  2. – Pulsando en el calendario rojo se va a la pantalla que muestra los datos del usuario y un calendario con los horarios ocupados y asignados a los profesionales.
  3. – Por defecto saldrá el calendario del último profesional que le atendió, pero se puede cambiar en cualquier momento, si al Cliente le interesase o porque el trabajo solicitado lo ejecutase otro profesional.
  4. – Haciendo clic en el día y horario solicitado, se abre la ventana de la cita en la que ya está por defecto el nombre del Cliente y si en la selección del profesional, sólo se fijó uno, también, sale seleccionado ese profesional, Se indica la actividad y con ello, viene el tiempo que se estima para hacer dicha actividad y se actualiza la nueva cita, quedando actualizado calendario y los datos de última cita del Cliente.
  5. – Seleccionando cualquier cita existente del calendario, se podría consultar un modificar, para ajustarla a las nuevas necesidades.

Si estáis interesados en este contenido seguir leyendo el artículo.

S-019 – Añadir Tailwind y Daisy UI, a componentes de SVAR

Este ejercicio era algo que quería emprender hace mucho tiempo. Los componentes de SVAR, me gustan, me parecen bastantes completos, creo que pueden ser muy eficientes para escribir código rápidamente y que también pueden ser muy útiles para aquellos que empiezan en el desarrollo, porque hay muchas que hacen por tí y que suelen estar muy bien hechas.

Ahora bien, para mí, tiene una definición de temas que es bastante «oscuro», ya que no disponen de una documentación sencilla y completa, para que podamos ajustar estos temas a nuestra necesidades o gustos.

Al haber terminado el ejemplo de Tailwind CSS y Daisy UI, ver la facilidad que ofrecen a los desarrolladores para los ajustes de UI de las aplicaciones, pensé que una solución de ese tipo requería los componentes de SVAR.

Objetivo

Integrar Tailwind CSS + Daisy UI + SVAR, de cara a mejorar la funcionalidad de personalización del UI de los desarrollos hecho con los componentes de SVAR.

DEMO: https://fhumanes.com/movie-svar/

Si estas interesado en este tema, sigue leyendo el artículo en este enlace.

S-018 – Integración Tailwind CSS + Daisy UI + Felte + Zod en Svelte

Después de múltiples ejemplos, integrar las mismas soluciones que integré en PHPRunner (aplicaciones Web), me he cuestionado si estoy utilizando Svelte adecuadamente y sobre todo, con los productos más habituales que los programadores «nativos» de Svelte, utilizan.

De ahí surgió la utilización de estos productos:

  • Para interface de aplicación, UI.- He seleccionado Tailwind CSS, que prácticamente es un estándar y que es utilizado masivamente por todos (mucho más que Bootstrap) y se complemente con Daisy UI que facilita el uso de TailWind CSS y nos dota de Temas, componentes para la iteración con el usuario, etc. Muy, muy importante y excelente solución, que nos soluciona la escritura de los componentes de iteración con el usuario.
  • Para la lógica y validación de los formularios.- Los productos seleccionados no tienen tanta difusión, pero son un buen ejemplo del ecosistema de soluciones que hay en el entorno de Svelte.
    Felte, nos soluciona la arquitectura de los formularios y Zod, nos facilta la definición de esquemas de validación de los datos de entrada de los formularios.
Objetivo

Repetir el proyecto de Bootstrap Svelte, con este kit de productos más propio del ecosistema de Svelte y verificar las bondades de utilización de las soluciones más habituales de los componentes de Svelte.

Se mantiene la aplicación de Back-End desarrollada en PHP SLIM4.

DEMO: https://fhumanes.com/felte-svelte/

Si estás interesado en este tema, sigue leyendo el artículo en este enlace.

S-017 – Integración de PivotGrid de DevExtreme en Svelte

Este componente lo he utilizado con PHPRunner (aplicación Web) y para las aplicaciones de Gestión en una oficina es una solución muy potente, pues se asemeja a una tabla Pivot de Excel, pero con muchas ventajas:

  • Recupera los datos de la base de datos de forma inmediata y su visualización es muy potente.
  • Desde la propia visualización se puede realizar actualizaciones en los registros, de tal forma que la gestión es mucho más rápida y dinámica.

Como en otras librerías, se ha hecho 2 integraciones:

  • CDN – Utilizando la versión de librería de JavaScript.
  • NPM – Utilizando la versión de módulo de JavaScript.

Objetivo

Disponer de una solución potente de Pivot Grid para el entorno de Svelte y aprovechando el conocimiento previo, verificar que la solución de DevExpress, aunque en la web no lo indiquen, se puede utilizar perfectamente con Svelte 5.

DEMO

Si te interesa este tema, sigue leyendo el artículo en este enlace.

 

S-016 – Integración de DayPilot en Svelte 5

Quien tenga conocimiento de mis artículos del Blog, recodará que tengo algunos artículos sobre el uso del Calendario y Gestor de Recursos de DayPilot. Es un producto muy utilizado en los desarrollos Web y dispone de características muy bonitas y prácticas. Desde mi punto de vista, lo considero con mejor UI y características que FullCalendar.

Aunque dispone de una versión Open Source, esta versión es muy, muy reducida y no la he tenido en cuenta para esta integración, ya que  si necesitamos esta solución en un proyecto, creo que se puede pagar una licencia del mismo, dada la calidad que va a dar al proyecto.

Objetivo

En la web del fabricante no se indica que se puede utilizar con Svelte, pero veremos en el ejemplo que podemos utilizar la web Web JavaScript, para los desarrollos de Svelte.

Como objetivo, el ejemplo debe incorporar:

  • Funcionamiento en Svelte 5 y utilización en código reactivo.
  • Definición de calendario de día, semana y mes, disponiendo de una guía de 3 meses para poder navegar entre fechas.
  • Etiquetado y coloreado de actividades.
  • Operación de navegación para reposición de los datos (ahora son fijo, pero se dispone del ejemplo para hacer la petición de las acciones entre fechas).
  • Evento de clic en una actividad o obtención de los datos de la acción. (para operaciones CRUD de actividad).
  • Se ha personalizado para español, así se facilita la adaptación a otros idiomas.

DEMO: https://fhumanes.com/daypilot-svelte/

Si te interesa este tema, sigue leyendo el artículo completo en este enlace.