CHƯƠNG 1. CƠ SỞ LÝ THUYẾT Spring Boot 1. Giới thiệu Spring Framework 1. Tìm hiểu framework Nếu một website là một ngôi nhà thì Framework như nền móng của căn nhà.
Framework là những bộ khung được tạo sẵn cung cấp các tính năng như mô hình, API, các yếu tố khác nhằm giúp đơn giản hóa việc phát triển ứng dụng web từ đó có thể dễ dàng phát triển các ứng dụng web trở nên phong phú và tốt hơn. Có hai loại framework chính: Framework cho ứng dụng web và Framework cho ứng dụng di động. - Các framework ứng dụng web là các framework phần mềm được sử dụng để sắp xếp hợp lý các ứng dụng web và phát triển trang web, các dịch vụ web và các tài nguyên web. Framework ứng dụng web phổ biến như là kiến trúc Model-View-Controller (MVC).
Mỗi ngôn ngữ lập trình backend và frontend kahcs nhau thì sẽ có những framework phù hợp khác nhau. - Framework cho ứng dụng di động giúp có thể viết code một lần và có thể chạy trên iOS và Android. Đó chính là điểm mạnh của nó để giảm thời gian phát triển sản phẩm so với native code. Báo cáo Khóa luận tốt nghiệp GVHD: Dương Hữu Thành PHẦN NỘI DUNG 7 Hình 1.1: Các framework phổ biến 1.
Spring Framework Spring là một Framework hỗ trợ phát triển các ứng dụng Java. Spring giúp tạo các ứng dụng dễ kiểm thử, có hiệu năng cao, sử dụng được lại code,… Spring có kích thước nhỏ, version cơ bản khoảng 2MB và hoạt động một cách trong suốt với lập trình viên. Ngoài ra Spring còn là một mã nguồn mở được phát triển, chia sẻ với cộng đồng người dùng rất lớn. Spring Framework được xây dựng dựa trên 2 nguyên tắc design chính là: Dependency Injection và Aspect Oriented Programming.
Mục tiêu chính của Spring là giúp phát triển các ứng dụng J2EE một cách dễ dàng hơn dựa trên mô hình sử dụng POJO. Một số project của Spring: - Spring Boot: là một framework giúp phát triển và chạy ứng dụng một cách nhanh chóng. - Spring Security: Cung cấp các cơ chế xác thực và phân quyền. - Spring MVC: hỗ trợ việc xây dựng các nền tảng web.
- Spring Social: hỗ trợ kết nối ứng dụng với các API bên thứ ba như: Facebook, Twitter, Linkedin,… (ví dụ như là đăng nhập bằng Google, Facebook,…). Báo cáo Khóa luận tốt nghiệp GVHD: Dương Hữu Thành PHẦN NỘI DUNG 8 - Spring Batch: hỗ trợ tạo các lịch trình và tiến trình cho các công việc. - Ngoài ra Spring còn có các project khác như Spring IO, Spring Cloud, Spring Mobile, Spring Session,… Ưu điểm của Spring Framework: - Spring được tổ chức theo kiểu module, vì vậy số lượng các lớp và các gói khá nhiều nhưng chỉ cần quan tâm đến những phần cần thiết và không cần quan tâm đến các phần còn lại. - Đối với Spring, module web được thiết kế theo mô hình MVC nên cung cấp đầy đủ được các tính năng có thể thay thế các web framework khác.
- Ngoài ra Spring còn hỗ trợ sử dụng nhiều công nghệ khác như ORM Framework, các thư viện tạo lịch trình (Quartz và JDK timer), các logging framework, JEE,… 1. Tổng quan quan Restful API Trước kia SOAP, WSDL từng là xu hướng thiết kế web service nhưng hiện nay đã có một phương pháp tốt hơn đó là REST, một chuẩn thiết kế phần mềm, qui định cách mà client và server tương tác với nhau. Chức năng quan trọng nhất của REST là: quy định các cách sử dụng HTTP method chẳng hạn như: Post, Get, Delete, Put,. và cách có thể định dạng các URL cho ứng dụng web để có thể quản lý được các resource.
API là tập hợp những qui tắc và cơ chế để làm chuẩn cho việc tương tác giữa một ứng dụng hoặc thành phần nào đó với một ứng dụng hoặc một số thành phần khác. Có hai kiểu trả về API phổ biến đó là JSON và XML Báo cáo Khóa luận tốt nghiệp GVHD: Dương Hữu Thành PHẦN NỘI DUNG 9 Từ đó ta có thể hiểu Restful API là tiêu chuẩn để thiết kế API cho các ứng dụng web, dễ dàng hơn trong việc quản lý các resource. Thường được trú trọng vào các tài nguyên của hệ thống như video, ảnh, âm thanh, văn bản,… Bao gồm các trạng thái tài nguyên được định sẵn và được truyền tải thông qua HTTP.2: Rest API – Giao tiếp giữa client và server 1. Controller Controller là nơi tiếp nhận request từ client và gửi về server từ đó nhận response từ server gửi lên lại cho client, do đó ta có thể hiểu controller là nơi trung gian giữa server với client.
Về mặt code, Controller chỉ đơn thuần là một bean được đánh dấu với @Controller hoặc @RestController. Trong Spring Boot, có hai dạng Controller, tương ứng hai annotation trên: - @Controller có thể trả về View qua một String hoặc JSON data trong response body (nếu được chỉ định). Thích hợp cho các controller có routing, chuyển trang các kiểu. - @RestController chỉ có thể trả về data trong response body.
Thích hợp cho các controller để cung cấp API. Báo cáo Khóa luận tốt nghiệp GVHD: Dương Hữu Thành PHẦN NỘI DUNG 10 Do đó, ta có thể nói @RestController = @Controller + @ResponseBody. Code ví dụ: Hình 1.3: Cấu trúc một controller Khi client gửi một request tới server Spring Boot của mình, thì nó sẽ đi qua thứ gọi là Front controller trước. Đây là controller có sẵn, nó có tác dụng sau: - Phân giải request, tìm coi request gọi tới method nào của controller nào để gọi đúng tới đó - Các data của request sẽ được parse ra và mapping tương ứng vào các tham số controller method (có @RequestParam, @PathVariable, @Header,.
- Đặc biệt, Spring MVC có thể parse được các data phức tạp như enum, List hay object. Ví dụ enum trong request là dạng string, vẫn sẽ được parse đúng thành enum. Báo cáo Khóa luận tốt nghiệp GVHD: Dương Hữu Thành PHẦN NỘI DUNG 11 - Nếu data không thể parse được, front controller sẽ trả về bad request (hoặc có cơ chế khác để chúng ta ghi đè lại việc này). Với chiều ngược lại cũng tương tự như vậy.
Dữ liệu trả về từ controller sẽ được build thành response và trả cho client.4: Mô tả hoạt dộng của controller 1. Model Tầng View là tầng sẽ hiển thị dữ liệu cho người dùng và nhờ vào HTML, CSS, JS cho ra một trang web hoàn chỉnh. Để dữ liệu này được Controller truyền cho View thì phải cần đến Model và đó cũng là chức năng chính của Model. Báo cáo Khóa luận tốt nghiệp GVHD: Dương Hữu Thành PHẦN NỘI DUNG 12 @Controller public class GreetingController { @RequestMapping(path = "/getWithModel", method = RequestMethod.GET) public String getWithModel(@RequestParam("name") String name, Model model) { Greeting greeting = new Greeting(name); model.addAttribute("greeting", greeting); return "greet"; } } Ở trên là ví dụ của một model GreetinController.
Model ở ví dụ này là “Greeting”. Tổng quan ReactJS React là một thư viện JavaScript mã nguồn mở và miễn phí dùng để phát triển giao diện người dùng dựa trên các thành phần UI. Nó được duy trì và phát triển bởi Facebook và một cộng đồng các nhà phát triển và các công ty. React giúp cho việc tạo giao diện người dùng trở nên dễ dàng, thiết kế các chế độ xem đơn giản cho từng trạng thái trong ứng dụng, cập nhật và hiển thị hiệu quả các thành phần phù hợp khi dữ liệu thay đổi.
Báo cáo Khóa luận tốt nghiệp GVHD: Dương Hữu Thành PHẦN NỘI DUNG 13 React hỗ trợ việc xây dựng các thành phần (components) UI có tính tương tác cao, có trạng thái và có thể tái sử dụng lại. Nó được xây dựng xung quanh các component. Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau. React sẽ so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM.
Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần ảnh hưởng đến tốc độ xử lý. Để cải thiện vấn đề này ReactJS đã đưa ra giải pháp đó là sử dụng Virtual DOM. Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật.
React sử dụng cơ chế one-way data binding - luồng dữ liệu 1 chiều. Dữ liệu được truyền từ parent đến child thông qua props từ đó tạo ra luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi Hình 1.5: Tối ưu hóa việc re-render DOM thật Báo cáo Khóa luận tốt nghiệp GVHD: Dương Hữu Thành PHẦN NỘI DUNG 14 Khi sử dụng React điểm phát triển giao diện người dùng, ta dễ dàng nhận ra các ưu và nhược điểm của ReactJS như sau: Ưu điểm - ReactJS cải thiện hiệu năng hiệu quả: Reactjs tạo ra cho chính nó DOM ảo - nơi mà các component thực sự tồn tại trên đó. Điều này sẽ giúp cải thiện hiệu suất rất nhiều. - ReactJS giúp việc viết các đoạn code JS dễ dàng hơn: Nó cung cấp cú pháp đặc biệt là JSX (Javascript mở rộng) cho phép trộn code HTML và Javascript lại với nhau.
- Nó thư viện phổ biến nhất để phát triển front-end, dễ học, dễ dàng tạo ra các ứng dụng động, cải thiện hiệu năng với Virtual DOM, các component có thể tái sử dụng. - Giao diện được tạo ra bởi React có thể truy cập bởi nhiều công cụ tìm kiếm khác nhau dẫn đến khả năng tiếp cận khách hàng lớn hơn. Nhược điểm - ReactJS chỉ phục vụ cho tầng View. React chỉ là View Library, nó không phải là một MVC framework như những framework khác và chỉ giúp render ra phần view.
Vì thế React sẽ không có phần Model và Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ không có two-way binding hay là Ajax. - Tích hợp React vào các framework MVC truyền thống, ta cần phải cấu hình lại. - React khá nặng nếu so với các framework.
React có kích thước tương đương với Angular (Khoảng 35kb so với 39kb của Angular). Trong khi đó Angular là một framework hoàn chỉnh còn React chỉ là một thư viện. Cấu trúc project React không có yêu cầu bắt buộc về cách sắp xếp các files trong các thư mục. Tuy nhiên, có một số cách cấu trúc project thông dụng mà ta nên cân nhắc để thực hiện.