S-012 – Actualización de aplicación Shopping – Svelte

He corregido y ampliado la funcionalidad de este desarrollo.

Corrección:

He modificado CSS de la página «Login.svelte» para que se ajuste mejor esta página en los dispositivos móviles. Además del tamaño de los campos, que el vea la imagen de la página.

Ampliación:

En la página «Producto.svelte» he añadido un botón para obtener un informe PDF de los productos que están pendientes de comprar. El desarrollo se ha hecho con PdfMake y está descrito en esta guía.

A través de este enlace tienes acceso al artículo completo y los fuentes del desarrollo.

S-013 – Generar documentos PDF con PdfMake

Como he indicado en otros artículos, la necesidad de generar informes, principalmente en formato PDF, es una función básica y como he hecho en otros entornos de desarrollo (React y PHPRunner ), he escogido la solución de PdfMake.

Esta solución es sencilla, muy rápida y especialmente indicada a documentos tipo factura, albarán, o como en este caso, a la lista de la compra (todos documentos de pocas hojas). Para saber cómo podéis construir los documentos (dispone de una herramienta de diseño básica) debéis consultar el artículo de PHPRunner.

El documento se genera en el navegador y se define en JavaScript, alimentado de los datos en formato JSON.

Objetivo

Ofrecer una solución muy sencilla y práctica para ofrecer informes en PDF, desde Svelte.

DEMO: https://fhumanes.com/informe-pdf/

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

S-012 – Desarrollo COMPLETO de aplicación Shopping

Llevo mucho tiempo sin publicar ningún artículo nuevo. Creo que este os va a gustar mucho, eso espero, porque estoy muy contento con el resultado.

Es una aplicación completa, Front-End en Svelte 5 y Back-End en PHP SLIM 4. He mejorado en mi codificación, en ambas plataformas, y el resultado es más legible, mantenible  y sencillo.

La APP es la misma que hice en PHPRunner, después la hice en REACT y ahora está hecha en Svelte 5.
Me gusta utilizar este ejemplo por:

  • Está orientada a que funcione en el Móvil y en el PC.
  • Tiene gestión de usuarios y de roles.
  • Maneja ficheros (imágenes), texto, password, números, fechas, check, etc. Gestiona GRID y FORMS.
  • Controla las sesiones en el server y estas sesiones tienen un tiempo de caducidad, por no utilización de la aplicación.
  • El modelo de datos es sencillo.
  • Y la gestión de la aplicación, que no es relevante en el ejercicio, es muy simple y facilita la compresión rápida para su uso.

Objetivo

Disponer de un ejemplo completo en Svelte 5 y PHP SLIM, con la utilización de las guías publicadas, que sirva como base para las personas que deseen incorporarse al desarrollo de aplicaciones en Svelte 5.

DEMOhttps://fhumanes.com/my-shopping/

Están los usuarios admin/admin y usuario/usuario. Ruego que no destruyáis los ejemplos para que otros puedan utilizarlos y os propongo que os registréis para tener un «ambiente» particular para vosotros. En el email, podéis utilizar el vuestro o poner uno ficticio. Si es el vuestro recibiréis un email, para que veáis que se puede hacer «TODO», desde la parte del server.

Si estás interesado en este artículo sigue leyéndolo en este enlace.

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.