Bài 2. Hello Vaadin with Spring Boot: Xây dựng ứng dụng 'Hello World' kết hợp Vaadin và Spring Boot

DonnieDonnie
14 min read

1. Giới thiệu

1.1. Mục tiêu của bài hướng dẫn

Bài hướng dẫn này sẽ giúp bạn xây dựng một ứng dụng web "Hello World" đơn giản bằng cách sử dụng Vaadin và Spring Boot. Qua đó, bạn sẽ hiểu rõ cách thiết lập môi trường, tạo project và kết hợp cả frontend và backend.

1.2. Đối tượng độc giả

Bài viết này hướng đến các Java developers, đặc biệt là những người mới tiếp cận Vaadin và Spring Boot.

1.3. Các kiến thức cần trước khi bắt đầu

Bạn nên có kiến thức cơ bản về Java, cũng như hiểu biết sơ lược về Spring Framework và web development.

1.4. Công nghệ sẽ sử dụng

  • Vaadin: để xây dựng frontend

  • Spring Boot: để xây dựng backend

  • Maven: để quản lý dependencies và build project

2. Chuẩn bị môi trường

2.1. IDEs

Có thể sử dụng IntelliJ IDEA hoặc Eclipse, nhưng trong bài viết này, chúng ta sẽ sử dụng IntelliJ IDEA.

  • Installation: Đảm bảo bạn đã cài đặt phiên bản mới nhất của IntelliJ IDEA từ trang chính thức.

2.2. JDK Version

Chúng ta sẽ sử dụng JDK 11 hoặc phiên bản mới hơn.

  • Installation: Tải và cài đặt từ Oracle's official website.

  • Environment Variable: Đảm bảo JAVA_HOME environment variable được cài đặt đúng.

2.3. Maven

Maven là công cụ quản lý project và dependencies. Trong bài viết này, chúng ta sẽ sử dụng Maven để build và quản lý project.

  • Installation: Theo dõi hướng dẫn cài đặt Maven từ official website.

  • Verification: Mở terminal và gõ mvn -v để kiểm tra.

2.4. Spring Boot Initializr

Chúng ta sẽ sử dụng Spring Boot Initializr để nhanh chóng tạo ra project structure.

  • Access: Truy cập vào Spring Boot Initializr.

  • Settings: Trong mục "Dependencies", chọn "Vaadin" và "Spring Web" để tự động thêm vào pom.xml khi tải project.

Bây giờ, môi trường của bạn đã sẵn sàng để đi tiếp vào các bước thực hành kế tiếp.

3. Tạo Project thông qua Spring Boot Initializr

3.1. Các component chính trong Vaadin

Vaadin cung cấp một bộ thư viện component rất mạnh mẽ để xây dựng giao diện người dùng (UI).

  • Button: Được sử dụng để thực hiện một action khi người dùng click.

      Button button = new Button("Click Me", e -> {
      // Logic here
  });

  • TextField: Được sử dụng để nhập text từ người dùng.

      TextField textField = new TextField("Label");

  • Grid: Để hiển thị dữ liệu theo dạng bảng.

      Grid<Product> grid = new Grid<>(Product.class);
  grid.setItems(productList);

3.2. Vaadin Flow và Vaadin Fusion

  • Vaadin Flow: Phần này chủ yếu là Java-centric, phục vụ cho việc xây dựng web UIs bằng Java.

    • Data Binding: Dễ dàng bind data từ backend lên UI.

        binder.bind(nameField, Person::getName, Person::setName);

  • Vaadin Fusion: Fusion cho phép bạn sử dụng TypeScript và được thiết kế để làm việc với RESTful backend.

    • End-point: Có khả năng tạo endpoint API tự động thông qua Java.

        const result = await endpoint.getPerson();

3.3. Lifecycle của một Vaadin Application

  1. Bootstrap: Vaadin phát triển file index.html để khởi tạo ứng dụng.

  2. Routing: Dựa trên URL, Vaadin xác định component sẽ được hiển thị.

  3. UI Update: State của UI được quản lý và cập nhật thông qua server-side Java code hoặc client-side TypeScript code.

  4. Session: Vaadin quản lý state trong HTTP session.

Cơ bản về lifecycle:

@Route("")
public class MainView extends VerticalLayout {
    public MainView() {
        // UI logic here
    }
}

Qua phần này, bạn đã có cái nhìn tổng quan về các component và khái niệm chính của Vaadin. Trong các phần tiếp theo, chúng ta sẽ đi sâu vào việc làm thế nào để kết hợp Vaadin với Spring Boot.

4. Cấu trúc Project

4.1. Spring Framework vs Spring Boot

  • Spring Framework: Là một framework Java nền tảng để xây dựng ứng dụng enterprise. Nó bao gồm một loạt các module như Spring MVC, Spring Data, Spring Security, etc.

      @Controller
  public class MyController {
    // Logic here
  }

  • Spring Boot: Là một dự án con của Spring, giúp đơn giản hóa việc setup và phát triển ứng dụng Spring. Spring Boot là "opinionated", tức là nó có các giả định về cách bạn sẽ muốn sử dụng nó.

      @SpringBootApplication
  public class MyApp {
    public static void main(String[] args) {
      SpringApplication.run(MyApp.class, args);
    }
  }

4.2. Convention over Configuration

  • Spring Boot áp dụng nguyên tắc này để giảm thiểu số lượng code cấu hình cần phải viết.

    Auto-configuration: Spring Boot tự động cấu hình các bean dựa trên các dependency trong classpath.

    •   // No need to manually configure a DataSource bean; Spring Boot does it for you

4.3. Starter Dependencies

  • Các starter dependencies trong Spring Boot giúp bạn nhanh chóng thêm các dependency cần thiết cho ứng dụng của mình.

      <!-- Spring Boot Starter Web -->
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
  </dependency>

4.4. SpringApplication Class

  • Là điểm khởi đầu của mọi ứng dụng Spring Boot. Chịu trách nhiệm khởi tạo ApplicationContext và kick off code.

      public static void main(String[] args) {
    SpringApplication.run(MyApp.class, args);
  }

4.5. Properties và YAML Configurations

  • Cung cấp khả năng tùy chỉnh ứng dụng thông qua application.properties hoặc application.yml.

      server.port=8081

4.6. Embedded Servers

  • Spring Boot cung cấp các embedded server như Tomcat, Jetty để phát triển và kiểm tra ứng dụng một cách nhanh chóng.

Qua phần này, hy vọng bạn đã hiểu rõ hơn về cấu trúc và nguyên tắc hoạt động của Spring Boot, một công nghệ mạnh mẽ và linh hoạt, đặc biệt khi kết hợp với Vaadin để xây dựng các ứng dụng web phức tạp.

5. Coding: Backend với Spring Boot

5.1. Frontend-Backend Communication

  • Cách Vaadin gọi API từ Spring Boot

    • Vaadin Endpoint: Đây là cách độc quyền mà Vaadin gọi API. Vaadin Endpoint tạo một interface giữa client và server, giúp bạn có thể gọi phương thức Java từ JavaScript.

        @Endpoint
  public class MyEndpoint {
    public String getData() {
      return "Hello from backend!";
    }
  }

      Trên frontend, bạn sẽ gọi endpoint này như sau:

        const data = await MyEndpoint.getData();

  • Cách Spring Boot cung cấp API cho Vaadin

    • Spring Data Repositories: Spring Boot có thể cung cấp API cho Vaadin thông qua JPA Repositories.

        @Repository
  public interface MyRepository extends JpaRepository<MyEntity, Long> {
    // Custom queries here
  }

      Trong Vaadin, bạn có thể autowire repository này để tương tác với database.

        @Autowired
  MyRepository myRepository;

5.2. Dependency Injection trong Spring Boot và Vaadin

  • Spring Boot và Vaadin đều hỗ trợ Dependency Injection (DI), giúp cho việc tách biệt các component trở nên dễ dàng và modular.

      @SpringComponent
  public class MyVaadinService {
    // Spring Boot DI works seamlessly
  }

5.3. Data Management thông qua Spring Data JPA và Vaadin

  • CrudRepository và JpaRepository: Đây là các interfaces mà Spring Data JPA cung cấp. Bạn có thể sử dụng chúng để thao tác CRUD cơ bản mà không cần viết code.

      public interface MyEntityRepository extends JpaRepository<MyEntity, Long> {}

  • Data Binding trong Vaadin: Vaadin cung cấp các thành phần như Binder để liên kết dữ liệu giữa UI và object models.

      Binder<MyEntity> binder = new Binder<>(MyEntity.class);
  binder.bindInstanceFields(this); // this refers to the layout with fields

5.4. Transaction Management

  • Spring Boot cung cấp annotation @Transactional để quản lý các giao dịch trong ứng dụng.

      @Transactional
  public void updateEntity(MyEntity entity) {
    // code to update entity
  }

    Trong Vaadin, bạn có thể sử dụng Vaadin Service để tạo các hook vào lifecycle của giao dịch.

      UI.getCurrent().addBeforeEnterListener(event -> {
    // start transaction
  });

Phần này cung cấp cái nhìn chi tiết về cách Vaadin và Spring Boot tương tác và làm việc cùng nhau để xây dựng ứng dụng web phức tạp và hiệu quả. Chúng được thiết kế để làm việc cùng nhau một cách seamless, và kết hợp chúng giúp bạn tận dụng được sức mạnh của cả hai.

6. Coding: Frontend với Vaadin

6.1. IntelliJ IDEA và/hoặc Eclipse

  • IntelliJ IDEA

    • Installation: Đầu tiên, cài đặt IntelliJ IDEA từ website chính thức. Chọn phiên bản Community nếu bạn không cần các tính năng chuyên sâu như Spring Boot support.

    • Spring Boot Plugin: Đảm bảo rằng plugin Spring Boot đã được cài đặt. Điều này giúp IDE hiểu và giúp bạn làm việc với Spring Boot một cách hiệu quả hơn.

    • Vaadin Plugin: Cài đặt plugin Vaadin để có thêm tính năng autocomplete và thông tin hữu ích khác khi làm việc với Vaadin.

  • Eclipse

    • Installation: Tải và cài đặt Eclipse IDE for Enterprise Java and Web Developers.

    • Spring Boot Tools: Thêm Spring Tools 4 vào Eclipse thông qua Eclipse Marketplace.

    • Vaadin Plugin: Tương tự như IntelliJ, cài đặt plugin Vaadin từ Eclipse Marketplace.

6.2. Maven hoặc Gradle

  • Maven

    • pom.xml: Đây là file cấu hình Maven, nơi bạn định nghĩa các dependencies và plugins.

    • Lifecycle Phases: Hiểu rõ các phases như clean, install, package trong Maven. Điều này giúp bạn có thể build và quản lý project một cách hiệu quả.

    • Custom Profiles: Học cách tạo các profiles trong Maven để handle các environment khác nhau.

  • Gradle

    • build.gradle: Tương tự như pom.xml trong Maven, đây là nơi bạn định nghĩa các dependencies và tasks.

    • Daemon: Sử dụng Gradle Daemon để tăng tốc quá trình build.

6.3. Spring Boot Initializr với Vaadin Starter

  • Spring Boot Initializr: Truy cập web interface và chọn các options cần thiết. Đảm bảo rằng bạn đã chọn Vaadin trong phần Dependencies.

  • Downloading and Importing: Tải file .zip về và giải nén, sau đó import vào IDE của bạn.

  • Understand Auto-generated Code: Xem xét các file và cấu trúc thư mục được tạo tự động. Điều này giúp bạn hiểu rõ cấu trúc của một project Spring Boot - Vaadin.

6.4. Verify Environment Setup

  • Run the Application: Sử dụng mvn spring-boot:run hoặc tương đương trong IDE để khởi chạy ứng dụng.

  • Check Logs: Kiểm tra console logs để đảm bảo rằng không có lỗi xảy ra trong quá trình khởi chạy.

  • Open in Browser: Mở ứng dụng trong trình duyệt tại localhost:8080 để xác nhận rằng mọi thứ đang hoạt động như mong đợi.

Mục này giúp bạn cài đặt và cấu hình môi trường phát triển để bạn có thể bắt đầu xây dựng ứng dụng với Vaadin và Spring Boot. Qua đó, bạn cũng đã được làm quen với các công cụ và tiện ích quan trọng sẽ được sử dụng trong quá trình phát triển.kend

7. Kết hợp Vaadin và Spring Boot

7.1. Tạo project sử dụng Spring Boot Initializr

  • Access Initializr: Truy cập Spring Boot Initializr.

  • Project Metadata: Đặt Group là com.example và Artifact là vaadin-helloworld.

  • Packaging and Java Version: Chọn Jar và Java 11 (hoặc cao hơn).

  • Dependencies: Tìm và chọn Vaadin trong danh sách. Nó sẽ tự động thêm các dependencies liên quan đến Spring Boot và Vaadin.

7.1.1 Download and Unzip

  • Generate Project: Click Generate để tải về file .zip chứa project.

  • Unzip and Import: Giải nén và import project vào IDE bằng cách chọn Open Project và điều hướng đến thư mục giải nén.

7.1.2 Verify Project Structure

  • Review Project: Mở thư mục project, kiểm tra các thư mục và file quan trọng như pom.xml, src/main/java, và src/main/resources.

7.2. Thêm các dependency cần thiết

Mở file pom.xml và kiểm tra các dependency. Spring Boot và Vaadin sẽ đã được thêm sẵn:

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-spring-boot-starter</artifactId>
</dependency>

7.2.1 Manually Adding Dependencies

Nếu muốn thêm dependencies thủ công, hãy sử dụng Maven Central để tìm version phù hợp và thêm vào pom.xml.

7.3. Xây dựng ứng dụng "Hello World" sử dụng Vaadin UI và Spring Boot backend

  • Main Application Class: Mở class được tạo tự động có annotation @SpringBootApplication. Đây là entry point của ứng dụng.
@SpringBootApplication
public class VaadinHelloWorldApplication {
    public static void main(String[] args) {
        SpringApplication.run(VaadinHelloWorldApplication.class, args);
    }
}

7.3.1 Create Vaadin View

Tạo một class mới, ví dụ MainView, kế thừa từ VerticalLayout và annotate nó với @Route.

@Route
public class MainView extends VerticalLayout {

    public MainView() {
        add(new Text("Hello World"));
    }
}

7.3.2 Run and Test

  • Run Application: Sử dụng terminal và run lệnh mvn spring-boot:run hoặc sử dụng tính năng run của IDE.

  • Testing: Truy cập http://localhost:8080 trên trình duyệt và xem nội dung "Hello World" được hiển thị.

7.3.3 Debugging

  • Check Logs: Mở terminal hoặc view log trong IDE để kiểm tra xem có thông báo lỗi hay không.

  • Breakpoints: Đặt các điểm dừng (breakpoints) trong code để theo dõi logic và debug nếu cần.

7.3.4 Advanced Configuration

  • Application Properties: Sử dụng application.properties trong src/main/resources để custom cấu hình như port, database settings, v.v.

  • Custom Beans: Tạo các Spring Beans nếu bạn muốn inject các services vào Vaadin views của mình.

Phần này giúp bạn step-by-step để xây dựng ứng dụng "Hello World" kết hợp Vaadin và Spring Boot, từ việc set up project đến chạy và kiểm tra ứng dụng. Điều này không chỉ giúp bạn nắm bắt cách sử dụng cả hai công nghệ, nhưng còn hiểu rõ cách họ có thể làm việc cùng nhau trong một ứng dụng web thực tế.

8. Chạy và kiểm tra ứng dụng

8.1. Performance Optimization

  • Lazy Loading: Sử dụng các phương pháp lazy loading để tải dữ liệu một cách hiệu quả trong Vaadin Grid.

  • Caching: Cài đặt cơ chế caching cho API trên Spring Boot, ví dụ sử dụng Spring Cache với Redis để giảm tải cho database.

8.1.1 Database Indexing

  • Why It Matters: Cần chú ý đến việc indexing các columns trong database để cải thiện thời gian truy vấn.

  • JPA Hints: Sử dụng @QueryHints để tối ưu hóa các truy vấn JPA.

8.1.2 State Management in Vaadin

  • Client-Side: Vaadin tự quản lý state trên client, nhưng hãy hạn chế việc sử dụng quá nhiều memory.

  • Server-Side: Spring Session cung cấp các giải pháp quản lý session người dùng hiệu quả.

8.2. Security Considerations

  • OAuth 2.0: Hướng dẫn cách tích hợp OAuth2 với Spring Security và Vaadin.

  • CSRF Protection: Kích hoạt chế độ CSRF protection trong cả Vaadin và Spring Boot.

8.2.1 API Security

  • Role-Based Access Control: Áp dụng RBAC vào việc phân quyền API.

  • JWT Tokens: Sử dụng JSON Web Tokens để xác thực và ủy quyền người dùng.

8.3. Scalability và High Availability

  • Load Balancing: Cách sử dụng các load balancer như NGINX để phân phối tải cho ứng dụng Spring Boot.

  • Horizontal Scaling: Hướng dẫn cách sử dụng Kubernetes để mở rộng ứng dụng (horizontal scaling).

8.3.1 Vaadin Limitations

  • Server-side Components: Vaadin cung cấp nhiều component sử dụng server-side rendering, điều này có thể gây ra tình trạng bottleneck khi ứng dụng phải mở rộng lớn.

8.3.2 Database Sharding and Replication

  • Why It's Important: Đối với các ứng dụng cần xử lý dữ liệu lớn, việc sử dụng database sharding và replication là cần thiết.

  • How-To: Giới thiệu cách áp dụng sharding và replication với Spring Data JPA.

Mục này cung cấp các best practices và chiến lược cụ thể để tối ưu hóa performance, đảm bảo bảo mật, và mở rộng ứng dụng của bạn. Thông qua việc đi sâu vào từng chủ đề, ta có thể hiểu rõ hơn về cách làm cho ứng dụng kết hợp giữa Vaadin và Spring Boot trở nên mạnh mẽ và bền vững.

9. Phân tích mã nguồn

9.1. Best Practices
9.2. Common Pitfalls và cách tránh

10. Tiến xa hơn

10.1. Thêm tính năng mới: Form Validation, CRUD Operations
10.2. Unit Testing và Integration Testing
10.3. Deployment Options

11. Tài liệu và tài nguyên học thêm

9.1. Official Documentation

  • Vaadin: Mô tả tầm quan trọng của việc đọc và theo dõi official documentation của Vaadin, đặc biệt là API documentation và Getting Started Guide.

  • Spring Boot: Đề cập đến Spring Boot's official documentation như là nguồn thông tin đáng tin cậy và được cập nhật liên tục.

9.2. Community Resources

  • GitHub Repos: Liệt kê một số repositories trên GitHub có code sample, tutorials, và best practices.

  • Stack Overflow: Giới thiệu cách sử dụng tag Vaadin và Spring Boot trên Stack Overflow để tìm câu trả lời và giải pháp.

9.3. Online Courses và Tutorials

  • Udemy, Coursera, etc.: Đánh giá các khóa học online có chất lượng, từ beginner đến advanced levels.

  • YouTube: Đề xuất các kênh YouTube về Vaadin và Spring Boot có nội dung chất lượng và được cộng đồng công nghệ đánh giá cao.

12. Kết luận

10.1. Tóm tắt nội dung đã thảo luận

  • Summarize các key points và insights đã giới thiệu trong bài viết. Điểm lại mục tiêu đã đặt ra và đánh giá xem đã đạt được chúng hay chưa.

10.2. Khuyến nghị các bước tiếp theo để đọc giả có thể học hỏi thêm

  • Project-based Learning: Khuyến khích đọc giả áp dụng kiến thức vào việc xây dựng một dự án cụ thể.

  • Deep Dive: Gợi ý các chủ đề có thể deep dive, như "WebSockets with Spring Boot and Vaadin", "Microservices Architecture with Vaadin and Spring Boot", etc.

Chúc bạn may mắn và hạnh phúc trong hành trình tìm hiểu Vaadin và Spring Boot. Đừng ngần ngại đào sâu và thực hành - đó là cách tốt nhất để học.

0
Subscribe to my newsletter

Read articles from Donnie directly inside your inbox. Subscribe to the newsletter, and don't miss out.

vaadin

Written by

Donnie
Donnie