Versiones comparadas

Versión anterior 11

changes.mady.by.user Guillermo Castillo García

Guardado el

comparado con

Nueva versión Actual

changes.mady.by.user Usuario desconocido (pedro.delgado@ticarum.es)

Guardado el

Clave

  • Se ha añadido esta línea.
  • Se ha eliminado esta línea.
  • El formato se ha cambiado.

Tabla de contenidos

...

Formación autónoma

Entre los cursos que ya se han realizado y la documentación de Confluence disponemos de suficientes recursos para poder aprender y empezar a programar en FundeWebJS. A continuación indicamos un guión orientativo de los pasos que habría que seguir.

La página de la que parte toda la documentación es la siguiente: FUNDEWEBJS - Manuales

Introducción

Info

Podemos ver más abajo el primer vídeo del último curso realizado (Curso ACADE abril 2022) para ver la introducción a FundeWebJS.

De aquí, debemos empezar por el apartado Antes de empezar a trabajar, y en concreto nos centraremos en estas dos guías:

También debemos tener en cuenta el resto de páginas para desarrollar un nuevo servicio, pero a nivel de formación esas dos son las más importantes para empezar.

Como las aplicaciones se dividen en dos proyectos, vamos a ver los recursos para cada uno de ellos.

Backend - Spring Boot

Info

Podemos consultar más abajo los vídeos 2, 3, 4 y 5 del último curso realizado (Curso ACADE abril 2022) para ver las partes de esta formación correspondientes a Spring Boot.

En la parte de backend, podemos tomar las siguientes guías como troncales:

  1. Creación y estructura de proyecto SpringBoot
  2. Confiugración del proyecto
  3. Despliegue en LOCAL de proyecto Backend
  4. Creación de Entidades JPA a partir de tabla de Base de Datos
  5. JPA: Acceso a base de datos
  6. Servicios REST con Spring Boot
  7. Manejo de Errores en FundeWebJS

Después, igual que en el caso anterior el resto de páginas también son importantes, estaría bien entrar también al menos en estas:

Frontend - Vue JS

La parte front puede ser la que más problemas nos de, pues salir de Java y entrar en un framework Javascript, es un cambio de concepto más grande. Para esta parte, tenemos un curso general para aprender Vue, y orientado al Portal de Servicios tenemos toda la documentación de Confluence y las explicaciones de cursos anteriores.

Curso Vue JS

 Este curso fue impartido por Edu Rey y hace un repaso muy completo de los aspectos principales del framework:

CURSO VUE JS DE EDU

Vue en el Portal de Servicios

Aquí, para ver la explicación del proyecto del Portal de Servicios (en el que desarrollaremos el front de nuestros servicios) y su estructura, podemos ver el vídeo 6 del Curso ACADE (abril 2022), este:

Videolink
Resolucion480p
VIDEOID146273

Además, tenemos todas las guías de Confluence que podemos consultar desde aquí: FUNDEWEBJS - Manuales. Podemos ir consultándolas a la par que vemos los vídeos del curso de Edu, para ir viendo cómo se realizará cada paso en FundeWebJS.


...

Cursos realizados

Charla EADMON (mayo 2022)

Charla complementaria a la formación del backend Spring-Boot.

Expandir

1) Buenas prácticas, documentación y otras utilidades.

Videolink
Resolucion480p
VIDEOID146350

Curso ACADE (abril 2022)

Este es el único curso que se ha impartido con la estructura del Portal de Servicios actual (frontend unificado).

Expandir

1) Introducción y arquitectura de aplicaciones FundeWebJS

Videolink
Resolucion480p
VIDEOID146265

2) Spring Boot - Creación y configuración del proyecto

Videolink
Resolucion480p
VIDEOID146266

3) Spring Boot - DTOs

Videolink
Resolucion480p
VIDEOID146267

4) Spring Boot - JPA Repository, servicios REST

Videolink
Resolucion480p
VIDEOID146268

5) Spring Boot - Autenticación back, discusión de implementación

Videolink
Resolucion480p
VIDEOID146272

6) Vue - Proyecto Portal de Servicios, descarga y explicación de su estructura

Videolink
Resolucion480p
VIDEOID146273

7) Vue - Desarrollo del servicio

Videolink
Resolucion480p
VIDEOID146274

8) Vue - Última sesión, breves explicaciones de detalles y trabajo autónomo

Videolink
Resolucion480p
VIDEOID146275

Curso ACADE (febrero 2021)

Expandir

Para la formación inicial en FundeWebJS, se plantea ir siguiendo las guías disponibles en la documentación, e ir aplicando lo que se vaya viendo en un proyecto de prueba. Para esto, el guión a seguir sería el siguiente:

INTRODUCCIÓN

  1. Presentación y arquitectura de aplicaciones FundeWebJS
  2. Instalación de los entornos de desarrollo

SPRING BOOT

Seguimos las siguientes guías, implementando cada cosa para nuestro proyecto. La aplicación de ejemplo que tenemos es una en la que tratamos diplomas de alumnos, y para ello en el esquema PORTALFUNDEWEB tenemos las tablas CURSO_FDWJS_ALUMNO, CURSO_FDWJS_DIPLOMA y CURSO_FDWJS_TITULACION. En este proyecto tenemos un servicio REST que permite obtener un alumno por dni, la descripción de una titulación, las titulaciones con paginación, los diplomas (todos o los correspondientes a un alumno), persistir una titulación, y obtener un pdf de un diploma. Con esto, cubrimos todas las operaciones básicas y lo que se explica en las siguientes guías. El proyecto completo lo podemos descargar aquí: Proyecto Spring de ejemplo completo.

Para la formación, en función de las necesidades de cada grupo, se puede implementar este mismo ejemplo, o uno que sirva de cara a algún proyecto propio, pero en el que se cubran todos los apartados.

El guión a seguir es:

  1. Creación de proyecto
  2. Confiugración del proyecto
  3. Creación de entidades JPA
  4. Acceso a datos: añadir los JpaRepository, creación de DTOs
  5. Servicio REST

Para estos apartados, aparte de la documentación, podemos ver los vídeos del curso anterior al que se referencia en "Otros recursos", más abajo. Aunque se hayan actualizado cosas en la documentación, nos pueden servir los siguientes vídeos como explicación adicional:

VUE

En la parte Vue creamos tenemos la interfaz de lo que hemos hecho en Spring Boot. En el proyecto de ejemplo tenemos cuatro vistas, una de bienvenida, una para mostrar diplomas, una para mostrar todas las titulaciones, y otra para añadir titulaciones. Con esto cubrimos la navegación y la llamada al servicio REST, aparte de cómo desarrollar los componentes. Podemos descargar el proyecto de ejemplo aquí: Proyecto Vue de ejemplo completo. Recordad que si os descargáis este proyecto de referencia, antes de ejecutarlo tenéis que ejecutar npm i para descargar las dependencias.

Vue será más complicado en general, pues no es Java como la parte anterior, que ya conocerá mucha gente, por lo que es importante ir leyéndose las guías y entendiendo las cosas que se van haciendo. Acostumbrarse a la sintaxis de Vue, tanto en el template como en la parte JavaScript lleva tiempo, así que habrá que ir haciéndolo con las guías a mano.

De nuevo, el guión de lo que tenemos que ir viendo es el siguiente (con indicaciones sobre la implementación del proyecto de prueba para la formación):

  1. Creación del proyecto y estructura. Tenemos que crear el proyecto y dejar nuestro App.vue listo con el elemento <router-view>.
  2. Despliegue en local
  3. Funciones útiles en Visual Studio Code
  4. Cómo depurar en Vue
  5. Gestión de paquetes y dependencias
  6. Estructura de los componentes en Vue
  7. Registro de Componentes
  8. Vue Router: Navegación. Debemos añadir los componentes correspondientes a cada una de las vistas de la aplicación, aunque estén vacíos de momento, y comprobar que se hace la navegación correctamente.
  9. Axios: llamadas a servicios REST. Implementar las llamadas a los servicios REST, y construir los componentes a partir de aquí.
  10. Vuex: estado global. No se utiliza en el proyecto de referencia, pero al menos hay que leérselo y entenderlo.
  11. i18n: internacionalización. No se utiliza en el proyecto de referencia, pero al menos hay que leérselo y entenderlo.
  12. PDFs con Vue. Si queremos mostrar/descargar archivos PDFs en la aplicación, disponemos de esta guía.

Puede sernos de utilidad este vídeo, parte de la sesión en la que se explica Vue, del curso anterior, el que se referencia en "Otros recursos", más abajo. Puede ser también un buen complemento a la documentación:

Otros recursos

...

Sesión 1 (01/03): Spring Boot

En esta sesión vamos a empezar con el back-end del servicio Baja de matrícula. Podemos ver documentación en estos enlaces:

Vamos a hacer las siguientes tareas:

  1. Creación de proyecto
  2. Configuración
  3. Servicio Rest con llamada a funciónes de base de datos

Además, es importante controlar el acceso a datos y los JPA Repository, pero como en esta aplicación no son necesarios, podemos utilizar este proyecto como base: Formación-acceso-datos. Es el proyecto de los cursos anteriores, que contiene las entidades y los DTOs ya creados, y con el que para ver cómo hacer el acceso a datos podemos implementar, al menos, los siguientes métodos:

  • /diplomas: obtener los diplomas correspondientes a un alumno, pasando su dni como parámetro.
  • /titulacionespg: titulaciones con paginación, y con reordenación.
  • /titulaciones/{codigo}/descripcion: obtener la descripción de una titulación.
  • /nuevaTitulacion: persistir una nueva titulación.

Vídeo de la sesión:

Videolink
Resolucion480p
VIDEOID144006

Sesión 2 (04/03): Vue

En esta sesión empezamos a desarrollar el front-end de Baja de matrícula. Para ello voy a utilizar este backend: baja-matricula-api. Tiene pasos simulados, el proceso real conllevará alguna llamada más a base de datos, y pasar por pasarela de firmas, pero para centrarnos en el desarrollo con Vue y utilizarlo como ejemplo nos vale.

Vídeo de la sesión

Videolink
Resolucion480p
VIDEOID144042

Sesión 3 (05/03):

...

trabajo autónomo y continuar servicios

Para esta sesión dejo los dos proyectos de los que voy a partir:

La parte Vue contiene todo lo que hemos ido haciendo en la sesión 2, incluida la última página, que aunque no la hemos llegado a hacer, sólo contiene un enlace con el que descargar un pdf.

Las tareas de hoy son completar el servicio, cambiando las llamadas simuladas por el proceso real, que aunque haya que hacer alguna cosa intermedia más, los pasos principales son:

  1. Obtener el pdf de la solicitud con la llamada a pq_control_eacade_proc.f_resguardo_tramite.
  2. Subir el pdf al archivo electrónico.
  3. Ir a pasarela de firmas con el pid de ese archivo, firmar, y volver a nuestra aplicación con el documento firmado.

Además, también adaptaremos la parte vue para persistir el estado de la aplicación sólo si volvemos atrás en el formulario y si volvemos de la pasarela de firmas.

Como necesitaremos consumir servicios SOAP, este enlace nos puede guiar para hacerlo en Spring Boot: https://www.baeldung.com/spring-soap-web-service

Vídeo de la sesión

Ha habido errores en la grabación y sólo se ha grabado mi voz, el sonido de los alumnos no.

Videolink
Resolucion480p
VIDEOID144057

Sesión 4 (17/03): completar servicios

Proyectos:

Vídeo de la sesión

Videolink
Resolucion480p
VIDEOID144247

Sesión 5 (18/03): completar servicios (2)

Vídeo de la sesión

Videolink
Resolucion480p
VIDEOID144248

Primer curso realizado (desactualizado)

Expandir


Advertencia

Se han cambiado muchas cosas desde que se realizó este curso, no se debe tomar de referencia.


Página de la primera formación FundeWebJS, que se impartió al grupo CURIE. En este curso se utilizan recursos desactualizados, hay partes que se han revisado y se hacen mejor en la documentación actual, al igual que los proyectos de referencia. Aún así, por si puede ser de interés, se incluyen los vídeos de las sesiones y las presentaciones utilizadas.