Chương 1. Giới thiệu về công nghệ 1.1 Cấu trúc của dự án sử dụng Spring boot, Angular, Hibernate Hình 1 Mô hình dự án Spring boot, Angular, Hibernate 5 1.2 Giới thiệu về Spring Boot 1.1 Spring Boot là gì? Spring Boot được phát hành từ giữa năm 2014, đây là một module nằm trong Spring Framework – một framework đã quá quen thuộc của Java , nó cung cấp giao diện và khả năng phát triển các ứng dụng độc lập với rất ít các bước cấu hình rườm rà hoặc gần như bằng không. Spring Boot được đóng gói với rất nhiều thư viện phụ thuộc các module nền tảng của Spring Framework nhưng được giảm thiểu đi các mã nguồn dài dòng, phức tạp nhằm cung cấp sự thuận tiện và phù hợp với từng mục đích khi phát triển ứng dụng. Spring boot cung cấp tính năng RAD(Rapid Application Development) - có nghĩa là phát triển ứng dụng một cách nhanh chóng, giúp tăng cao năng suất cho lập trình viên.
Spring Boot Framework được sử dụng rộng rãi để phát triển các REST APIs. Hình 2 Spring boot trong kiến trúc Spring 6 1.2 Ưu điểm của Spring boot Spring boot ra đời nhằm khắc phục điểm hạn chế của Spring là các bước cấu hình rất phức tạp, mất rất nhiều thời gian để ứng dụng có thể chạy được. Do đó, Spring boot có những ưu điểm sau: Có các tính năng của Spring Framework. Tạo ứng dụng độc lập, có thể chạy bằng java -jar (cho cả java web) Nhúng trực tiếp các ứng dụng server (Tomcat, Jetty…) do đó không cần phải triển khai file WAR, không cần cấu hình server.
Cấu hình ít, tự động cậu hình bất kì khi nào có thể (Giảm thời gian viết code, tăng năng suất) Không yêu cầu cầu hình XML, xây dựng các bean dự trên annotation Cung cấp nhiều plugin Chuẩn cho Microservices (Cloud support; giảm việc setup, config; các thư viện hỗ trợ…) Ví dụ ưu điểm của dự án sử dụng cấu hình của Spring boot Cấu hình một model tương ứng với một bảng trong cơ sở dữ liệu + Với Spring MVC thông thường: cần cấu hình file xml phức tạp khi muốn khai báo một package chứa các model. + Với Spring boot: sử dụng anotation @Entity, @Table ngắn gọn đơn giản, Spring boot sẽ xác định đây là một class tương ứng với bảng bang_luong trong cơ sở dữ liệu.3 Tạo dự án Spring boot Trên website của Spring có một công cụ giúp chúng ta nhanh chóng khởi tạo project Spring boot gọi là Spring Initializr. Spring Initializr có thể truy cập trên website tại địa chỉ http://start. Hình 3 Giao diện công cụ Spring initializr Mô tả về các thành phần của công cụ: Project: Chọn loại chương trình dùng để quản lý, build dự án.
Language: Chọn loại ngôn ngữ để viết code dự án. Dependencies: Thêm các thư viện vào dự án để sử dụng. Spring boot: Chọn phiên bản Spring boot cho dự án. 8 Project Metadata: Gồm các thông tin về tên các package của dự án và phiên bản của ngôn ngữ được sử dụng.
Các bước tạo dự án Spring boot với Spring initializr: Bước1. Khai báo thông tin dự án Loại project: là chọn loại package manager nào, Maven hoặc Gradle. Language: chọn ngôn ngữ code, chọn Java. Phiên bản Spring Boot: Các version có SNAPSHOT là bản chưa ổn định, không nên chọn.
Loại file build ra: với Spring Boot thì nên chọn JAR để đỡ cấu hình Tomcat server. Phiên bản Java: chọn phiên bản java theo phiên bản đã được cấu hình trong máy tính của mình. Chọn dependency Click vào Add Dependencies. Chọn dependencies cần thiết cho dự án 9 Đây là một số dependencies cơ bản để tạo một dự án web spring boot 10 Bước 3: Chọn GENERATE để tạo và download dự án về máy 11 Bước 4: Giải nén file vừa tải về Đây là thư mục dự án Spring boot 12 1.4 Chạy dự án Spring boot đơn giản trên Eclipse Bước 1: Cài đặt Spring tool Để chạy được dự án Spring boot trên Eclipse, trước tiên chúng ta cần cài đặt Spring tool.
Tại giao diện Eclipse. Chọn Help -> Eclipse MarketPlace. Tìm kiếm Spring tool -> chọn install, nếu màn hiển hiển thị Installed có nghĩa là Spring tool đã được cài đặt. 13 Bước 2: Import dự án Spring boot Chọn file -> Import 14 Chọn Maven -> Existing Maven Projects Chọn Next Chọn Browse và tìm đến folder dự án 15 Chọn Select Folder -> Chọn Finish Đây là cấu trúc thư mục của dự án Bước 3: Chạy dự án Spring boot Spring boot cung cấp một ApplicationClass để khởi động ứng dụng từ hàm main() sử dụng phương thức static SpringApplication.run, anotation @SpringBootApplication giúp chương trình hiểu rằng đây là nơi khởi chạy ứng dụng.
16 Để chạy dự án Spring boot, click chuột phải vào dự án -> chọn Run as -> Chọn Spring boot app 17 Build thành công, dự án chạy tại cổng 8080 Truy cập http://localhost:8080/ , đây là kết quả 18 1.5 Các thành phần trong một dự án Spring boot thực tế Cấu trúc dự án Hình 4 Cấu trúc thư mục một sự án Spring thực tế Src/main/java là nơi chứa các package viết các class mã nguồn java + Src/main/resources là nơi chứa các file html, css, javascript để hiển thị lên giao diện website, trong đồ án này em sử dụng Angular.properties: Nơi cấu hình dự án, trong đó có cấu hình để kết nối với cơ sở dữ liệu. 19 + Các mục JRE System Library và Maven Dependencies là nơi chứa các file thư viện, dependencies cần thiết của dự án.xml là nơi chứa thông tin của dự án và các plugin, thư viện bên ngoài được thêm vào dự án. Các package chính: Controller: nơi viết các api xử lý, điều khiển luồn hoạt động của chương trình Ví dụ: Đây là lớp sẽ sử lý những request từ client mà có uri bắt đầu bằng “/api”, + @RestController và @RequestMapping là anotation của Spring boot giúp cho chương trình nhận biết đây là lớp xử lý khi có bất cứ request nào từ Client mà có URI bắt đầu là “/api”. + Trong lớp NhanVienController còn có nhiều phương thức để xử lý từng request có URI cụ thể hơn, ví dụ như: 20 + Đây là 2 phương thức để xử lý request tới 2 URI là “/api/nhan-vien” và “api/nhan-vien/{id}”, bên trong là các hàm xử lý và trả về giá trị với từng request cụ thể của client.
+ @RequestBody là anotation giúp cho chương trình hiểu đây là dữ liệu từ client gửi về phía server. Model: chứa các class tương ứng với từng bảng trong cơ sở dữ liệu, sử dụng Hibernate để mapping Object trong java với Table trong cơ sở dữ liệu. Ví dụ: Tạo class NhanVien mapping với bảng nhan_vien trong sơ sở dữ liệu. + @Id: Anotation quy định thuộc tính này là khóa chính + @GeneratedValue: Anotation quy định giá trị của cột này trong cơ sở dữ liệu sẽ được tạo tự động khi thêm bản ghi mới.
+ @Column: Anotation quy định thuộc tính này được map tương ứng với cột nào của bảng. Service: chứa các class service để truy xuất, thao tác với dữ liệu trong cơ sở dữ liệu. Ví dụ: tạo class NhanVienService để thao tác với bảng nhân viên trong cơ sở dữ liệu. 21 + @Service: Anotation quy định đây là một class service của spring boot 22 1.3 Giới thiệu về Angular 1.1 Angular là gì? Angular được xem là một open source (mã nguồn mở) hay frameworks miễn phí chuyên dụng cho công việc thiết kế web.
Angular được phát triển từ những năm 2009 và được duy trì bởi Google. Frameworks này được xem là frameworks front end mạnh mẽ nhất chuyên dụng bởi các lập trình viên cắt HTML cao cấp. Angular được ứng dụng rộng rãi với mục đích xây dựng project Single Page Application (SPA). Hiện tại, phiên bản ổn định của Angular là Angular 9 (được phát hành vào tháng 2, 2020) với TypeScript 3.
2 tính năng nổi bật của Angular là Data binding và Dependency injection có thể loại bỏ phần lớn code mà người lập trình thường xuyên phải viết. Điều này xảy ra trong mọi trình duyệt và giúp nó trở thành đối tác lý tưởng của mọi công nghệ Server. Ưu điểm: Angular được đánh giá là giải pháp dành cho các Single Page Application làm việc dễ dàng. Code Front end thường rất thân thiện nhờ khả năng Binding data lên trên các nền tảng HTML để có thể tạo ra mọi thao tác rất tuyệt.
Có thể dễ dàng Unit test Có thể tái sử dụng component dễ dàng hơn Hỗ trợ cho các lập trình viên có thể viết code được ít hơn với nhiều chức năng hơn. Có thể chạy Angular trên nhiều loại trình duyệt khác nhau lẫn PC hoặc mobile. Nhược điểm: Bảo mật kém: Thông thường, bản chất của Angular là một trong những các Front End, mà front end này thường vốn không thể bảo mật bằng Back End. 23 Chính vì vậy, khi sử dụng API thì cần xây dựng cho một hệ thống kiểm tra dữ liệu sao cho việc trả về được tốt nhất.
Với một số trình duyệt sở hữu tính năng Disable Javascript nên có nghĩa là website sẽ không hoàn toàn có thể sử dụng được dựa trên những trình duyệt đó nữa.2 Kiến trúc của Angular Hình 5 Kiến trúc cơ bản của angular Module Angular chia sự phát triển ứng dụng thành các Module khác nhau. Tất cả các ứng dụng của Angular đều có 1 module gốc, module gốc được gọi là AppModule và có ít nhất một lớp NgModule. Tùy theo quy mô của ứng dụng, với ứng dụng nhỏ chỉ cần một module là đủ. Tuy nhiên với các ứng dụng lớn có thể có chứa rất nhiều các Module khác nhau.
Trong một Module có thể chứa nhiều các Module con khác. Các module con được gọi là các SubModule. Components Components chứa đựng các chức năng tương tác phía giao diện với người dùng. Component có chứa Html, css hoặc scss, và các đoạn mã được viết bằng ngôn ngữ Typescrip nhằm thực hiện gắn kết (Tương tác) giữa giao diện ứng dụng và các dịch vụ (service ) ở phía Server.
25 Component sử dụng Dịch vụ (Service) để lấy dữ liệu hoặc thao tác với dữ liệu và hiển thị chúng thông qua các đoạn mã chương trình được viết bằng TypeScript. Component có thể sử dụng các đối tượng là thể hiện của dịch vụ thông qua cơ chế Dependency Injection (Thể hiện của Dependency Injecttion - DI là rất dễ hiểu, lập trình viên chỉ cần khai báo đối tượng thông qua hàm khởi tạo của lớp). Directive được sử dụng trong template của Component nhằm để mở rộng các hành vi của Html. Databinding Dữ liệu có thể được hiển thị tương ứng với các file html trong component.
Angular cung cấp cơ chế gắn kết dữ dữ liệu với giao diện (template) của component cơ chế đó được gọi là databinding.