Full-Stack Web Development with Spring Boot and Vue.js

Pengembangan aplikasi web modern sering menghadapi kendala ketika sisi frontend dan backend dibangun tanpa arsitektur yang selaras. Banyak tim mengalami masalah seperti antarmuka yang sulit diskalakan, pengelolaan state yang tidak konsisten, API yang tumbuh tanpa standar yang jelas, serta proses konfigurasi dan deployment yang rumit. Kondisi ini diperparah ketika aplikasi mulai berkembang menjadi single-page application (SPA) atau progressive web application (PWA), di mana kompleksitas alur data, autentikasi, dan pengujian meningkat secara signifikan.

Di sisi backend, Spring Boot telah menjadi pilihan utama untuk membangun layanan web berbasis Java karena kemudahan konfigurasi dan ekosistemnya yang matang. Namun, banyak pengembang masih menghadapi kesulitan dalam memahami bagaimana autoconfiguration, manajemen properti, dan integrasi Spring Data bekerja secara menyeluruh dalam satu aplikasi yang siap dirilis. Tantangan lain yang sering muncul adalah kurangnya pengujian terintegrasi dan strategi rilis yang aman, terutama ketika aplikasi mulai dijalankan dalam lingkungan berbasis container. Penelitian terbaru menunjukkan bahwa praktik pengembangan full-stack yang terintegrasi dengan pengujian dan deployment sejak awal dapat meningkatkan kualitas perangkat lunak dan menurunkan risiko kegagalan di tahap produksi (Pahl, Jamshidi, & Zimmermann, 2021).

Course Full-Stack Web Development with Spring Boot and Vue.js dirancang untuk membantu peserta memahami keterkaitan antara frontend dan backend secara utuh. Course ini membahas pembangunan antarmuka berbasis Vue 3, pengelolaan komponen dan state, serta pengembangan SPA dan PWA secara terstruktur. Selain itu, peserta akan mempelajari pembangunan aplikasi web dan REST API menggunakan Spring Boot, termasuk pengelolaan konfigurasi, akses data dengan Spring Data, hingga pengujian dan deployment berbasis container.

OBJECTIVES

1. Mampu mengotomatisasi web browser dengan Selenium WebDriver untuk menguji aplikasi web
2. Mampu mengatur Java Environment untuk menggunakan Selenium WebDriver
3. Mampu membuat pola desain yang baik untuk pengujian aplikasi web

AUDIENCE

1.Software Tester
2.Programmer

PREREQUISITES

Mempunyai pemahaman tentang bahasa pemrograman

CONTENT

1. The Vue 3 Framework

1.1 The Progressive Framework
1.2 Using Vue in your Web Application
1.3 Understanding Single-file Components
1.4 Different Strokes–options, Composition, and Script Setup API
1.5 Exploring Built-in Directives in Vue 3

2. Setting Up a Working Project

2.1 Project Setup and Tools
2.2 Folder Structure and Modifications
2.3 Vite Configuration Options

3. User Interface Composition with Components

3.1 Page Composition with Components
3.2 Components in Depth
3.3 Special Components
3.4 A Real-World Example – a Modals Plugin
3.5 Creating page, layout, user form with Buefy
3.6 Creating page, layout, user form with Vuetify
3.7 Creating page, layout, user form with Ant-Design
3.8 Creating page, layout, user form with PrimeVue

4. Single-Page Applications

4.1 Understanding SPA
4.2 The Vue 3 Router
4.3 Exploring Authentication Patterns

5. Progressive Web Applications

5.1 PWAs or Installable SPAs
5.2 Upscaling a SPA into a PWA
5.3 Vite-PWA Plugin

6. Data Flow Management

6.1 Components’ Basic Communication
6.2 Implementing an Event Bus with the Singleton and Observer patterns
6.3 Implementing a Basic Reactive State
6.4 Implementing a Powerful Reactive Store with Pinia
6.5 Browser Data Stores – Session, Local, and IndexedDB
6.6 Managing the Application State with Vuex

7. Core Features of Spring Boot

7.1 Autoconfiguring Spring Beans
7.2 Adding Portfolio Components using Spring Boot starters
7.3 Customizing the Setup with Configuration Properties
7.4 Managing Application Dependencies

8. Creating a Web Application with Spring Boot

8.1 Using Start.Spring.Io to Build Apps
8.2 Creating a Spring MVC Web Controller
8.3 Using Start.Spring.Io to Augment an Existing Project
8.4 Leveraging Templates to Create Content
8.5 Creating JSON-based APIs
8.6 Hooking in Node.js to a Spring Boot Web App

9. Configuring an Application with Spring Boot

9.1 Creating Custom Properties
9.2 Creating Profile-Based Property Files
9.3 Switching to YAML
9.4 Setting Properties with Environment Variables
9.5 Ordering Property Overrides

10. Querying for Data with Spring Boot

10.1 Adding Spring Data to an Existing Spring Boot Application
10.2 DTOs, Entities, and POJOs
10.3 Creating a Spring Data Repository Using Custom Finders
10.4 Creating Applications Using Spring MVC
10.5 Using custom JPA
10.6 Creating Spring Boot REST API

11. Releasing and Testing an Application with Spring Boot

11.1 Creating Spring Boot Executable JAR
11.2 Deploying Spring Boot Application to Containers
11.3 Utilities for Examining Spring Boot Application Container Images
11.4 Testing Web Controllers with MockMVC
11.5 Adding Testcontainers to the Application
11.6 Testing Data Repositories with Testcontainers
11.7 Testing Security Policies with Spring Security Test