S-009 – Gestor de Stores y menú de App, aplicación SPA en Svelte

Al igual que hice en React, tengo intención de hacer una aplicación que contemple páginas publicas, páginas privadas, gestión de acceso, etc.

Soy consciente, que una solución completa conlleva bastante código y que esos ejemplos, para los que se inician no son prácticos, pues con tanto código no se sabe por dónde empezar, pero si que es un buen ejercicio para aquellos que desean realizar un aplicativo completo.

En este artículo se va a utilizar 2 soluciones que se requieren para ese tipo de desarrollo y así, en estos ejemplos espero que sean más sencillos para el aprendizaje de estos concepto.

Objetivo

  1. Utilización de Stores y Memoria local, para guardar datos de sesión. En esta solución nos basaremos para almacenar el TOKEN que acreditará la autorización de acceso de los usuarios. El concepto de Store es mucho más amplio que la autenticación y se puede utilizar en muchos otros aspectos.
    DEMO: https://fhumanes.com/my-store-app/
    Podéis probar con admin/admin o con fernando/1234

  2. Disponer de una solución de menú de aplicación para aplicaciones SPA (sólo una página), que sea muy simple para poderlo adaptar a nuestras necesidades.
    DEMO:     https://fhumanes.com/my-nav-app/

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

S-008 – Ejemplo de CRUD con Svelte 5 y componentes de SVAR -versión3 y Final-

Cuando estás empezando con unos nuevos componentes, tan amplios como los de SVAR , puedes estar aprendiendo nuevas cosas más de un mes, y modificando cualquier ejercicio que hayas iniciado en ese proceso de aprendizaje.

Este artículo es la última modificación que voy a presentaros y es la solución recomendada, para que la utilicéis de modelo. Esto no significa que las versiones anteriores no sirvan, que yo creo que para aprender , al ser más simples, son más sencillas para aprender cómo se utilizan los componentes de SVAR. Pero esta versión es la mejor si la tabla de datos que estás utilizando tiene algún aspecto de complejidad, además que explica nuevas funcionalidades de estos componentes.

Objetivo

Utilizar los componentes de SVAR para el ejemplo de la gestión de las Películas, pero mejorando las validaciones de las opciones ADD y EDIT, así como cambiar los botones al pie de la ventana de actualización de los datos.

Otro aspecto importante, para mejorar la lectura del código, es separar la gestión del GRID y la de FORMS de registros, para que sea muy sencillo hacer formularios todo lo complejos que se requieran.

DEMO: https://fhumanes.com/my-svar-app5/

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

S-007 – Ejemplo de CRUD con Svelte 5 y componentes de SVAR -Actualización-

He publicado la versión APP4, que no tenía prevista pero al revisar el código para cambiar interfaz de la solución he visto que el ejemplo tenía:

  • Estilos que me había dado la IA y que no se utilizaban (App.svelte).
  • El código de MovieGrid.svelte, que es el modelo, estaba desordenado, no teniendo perfectamente delimitado las secciones de: DataGrid, Editor, Filtros, Eliminación, etc. Así que lo he ordenado.
  • En principio creí que la parte de Editor era muy simple y que estaba limitado a pocas funcionalidades.
    No es así, el problema es que la IA (Copilot) conoce muy poco el componente y de ahí en código que tenía. Ahora lo he mejorado, incluyendo mensajes de Notificaciones en caso de error y controlando perfectamente las validaciones y acciones (botones). En la documentación de los componentes «está la sabiduría«.
  • He mejorado la estética del ejemplo, solamente con modificaciones de CSS. Está en App.svelte.

DEMO: https://fhumanes.com/my-svar-app4/

Si estás interesado en esto, acceder al artículo de este enlace.

S-002 – Típico CRUD con Bootstrap 5+ y Server SLIM PHP

Creo que este ejemplo os va a mostrar lo fácil o difícil, que es trabajar en esta plataforma, de acuerdo a vuestros conocimientos.

Es un ejemplo típico de LIST, ADD, EDIT, VIEW y DELETE, de una tabla «Películas», con la, también, gestión de las talas auxiliares de «Temas» y «Soportes».

El desarrollo lo ha hecho GEMINI (la IA de Google), con mi revisión. El proceso que he seguido es facilitarle el modelo de datos, que he hecho con MySQL Workbench y le he especificado que de backend quería que utilizara SLIM 4.0 y MySQL. Y como Frontend quería Svelte 5 y Sveltestrap (que utiliza internamente Bootstrap 5.3. Hay que solicitar que establezca las FASES que vamos a utilizar para construir la solución y tener mucha paciencia, pues aunque el resultado final es bueno, son muchas las confusiones y pérdidas de información que tiene, con lo que hay que recordarle continuamente las soluciones que se van adoptando, porque tiende al olvidar muchos de los detalles.

Objetivo

Obtener una aplicación CRUD completa con la arquitectura de Svelte 5 + Bootstrap 5.3 + SLIM 4.0 + MySQL.

DEMO: https://fhumanes.com/my-movie-app1

Si te interesa este tema, haz clic en este enlace.

Novedades de Svelte

Para conocer las características de Svelte, te ruego que leas este artículo.

Estoy fascinado con las posibilidades de React, pero reconozco que es muy difícil para aquellos que su mayor desarrollo en informática ha sido los lenguajes 4GL’s y/o lo desarrollos de «low_code» como PHPRunner.

Estuve preguntando a las AI y al final me nombraron esta solución como ideal para aquellos que conocen HTML, CSS y JavaScript. Las herramientas de desarrollos de UI (interfaz), en estos momentos, están copadas por soluciones de JavaScript (React, Vue, etc.) por lo que creo que es ahí donde debemos estar, pero no podemos, ni debemos, olvidar nuestros conocimientos de ahí que debemos aprovechar todo lo que conocemos. Y por eso, creo , que la solución es Svelte.

Estoy trabajando en una solución de:

  • Frontend .- Svelte, desarrollando APP de sólo una página (SPA para móvil) o multi-página, para optimizar SEO
  • Backend.- PHP, con SLIM, para los Rest Api necesarios para comunicar los datos de las bases de datos persistentes y los procesos masivos, que los sistemas requieran.

Svelte tiene una excelente documentación y tutoriales en https://svelte.dev/. Os aconsejo que estudies con el Tutorial. Te va a explicar todos los conceptos y sintaxis que requieres para empezar y te lo va a explicar y demostrar a través de ejercicios, muy prácticos.

También, utilizar las IA’s. Todas ellas te va a explicar qué es Svelte y te lo van a poder comparar con cualquier otro conocimiento que tengas para así comprenderlo mejor. Siempre recordar, que las IA’s os van a poder dar ejemplos completos o parciales, de lo que necesitéis. Yo he trabajado con ChatGPT,  DeepSeek, Gemini y Copilot.

Para los ejemplos que he estado haciendo y que próximamente publicaré, he estado trabajando con el complemento de Bootstrap (versión 5.3), para que así estos ejemplos se parezcan a los desarrollos en PHPrunner (pero con versiones actualizadas que todavía faltan años a que las incorpore XlineSoft).

Esta es la lista de artículos que he publicado: