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
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:
- Creación de proyecto
- Confiugración del proyecto
- Creación de entidades JPA
- Acceso a datos: añadir los JpaRepository, creación de DTOs
- Servicio REST
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):
- Creación del proyecto y estructura. Tenemos que crear el proyecto y dejar nuestro App.vue listo con el elemento <router-view>.
- Despliegue en local
- Funciones útiles en Visual Studio Code
- Cómo depurar en Vue
- Gestión de paquetes y dependencias
- Estructura de los componentes en Vue
- Registro de Componentes
- 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.
- Axios: llamadas a servicios REST. Implementar las llamadas a los servicios REST, y construir los componentes a partir de aquí.
- Vuex: estado global. No se utiliza en el proyecto de referencia, pero al menos hay que leérselo y entenderlo.
- i18n: internacionalización. No se utiliza en el proyecto de referencia, pero al menos hay que leérselo y entenderlo.
Otros recursos
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.
Es