Báo cáo thực tập phát triển ứng dụng web với reactjs spring boot

Sau hơn 3 năm học tập tại trường, em có mong muốn được trải nghiệm các công việcthực tế, trau dồi nhiều kinh nghiệm có ích cho bản thân, và tham gia phát triển ứng dụngtrong một môi trườ

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO THỰC TẬP

PHÁT TRIỂN ỨNG DỤNG WEB VỚI

REACTJS - SPRING BOOT

Công ty thực tập: VTI Người phụ trách: Trương Minh Tuấn Thực tập sinh: Huỳnh Anh Kiệt

TP Hồ Chí Minh, tháng 06 năm 2023

LỜI MỞ ĐẦU

Ở thời điểm hiện tại, lập trình ứng dụng web với sự kết hợp của ReactJS và Spring Bootđạng là một sự lựa chọn phổ biến trong việc phát triển một cách hiệu quả ReactJS là mộtthư viện JavaScript phát triển bởi Facebook, cho phép xây dựng giao diện người dùngmột cách hiệu quả và nhanh chóng Spring Boot là một framework thuộc trong SpringEcosystem, giúp tối giản hóa các công việc lặp đi lặp lại, từ đó đẩy nhanh việc phát triểnứng dụng

Sau hơn 3 năm học tập tại trường, em có mong muốn được trải nghiệm các công việcthực tế, trau dồi nhiều kinh nghiệm có ích cho bản thân, và tham gia phát triển ứng dụngtrong một môi trường chuyên nghiệp, em đã thực hiện dự định đi thực tập của mình ở học

kì 8 Và công ty em đã chọn là VTI Mặc dù đây là một công ty còn khá mới tại Việt Namtuy nhiên đây là một công ty Nhật Bản với môi trường trẻ trung, năng động và chuyênnghiệp, có thể giúp em thực hiện được dự định này

Trong quá trình thực tập tại công ty VTI, em đã được giao nhiệm vụ tham gia vào dự ánphát triển một ứng dụng web sử dụng ReactJS và Spring Boot Mục tiêu của dự án là xâydựng một hệ thống quản lý thông tin hoặc một ứng dụng web đáp ứng nhu cầu cụ thể củakhách hàng Em đã tham gia vào quá trình phân tích yêu cầu, thiết kế giao diện, triển khaicác chức năng của ứng dụng

Em hy vọng rằng báo cáo này sẽ cung cấp một cái nhìn toàn diện về quá trình thực tậpcủa em Đồng thời, em cũng mong rằng thông qua việc chia sẻ kinh nghiệm của mình,báo cáo này có thể cung cấp được động lực và hướng dẫn cho những người quan tâm đếnlĩnh vực lập trình ứng dụng web sử dụng ReactJS và Spring Boot

Em cũng muốn bày tỏ lòng biết ơn đến các đồng nghiệp và thành viên trong nhóm thựctập của em tại công ty VTI Họ đã tạo ra môi trường làm việc chuyên nghiệp và hỗ trợ,cho phép em hòa nhập và đóng góp vào dự án một cách hiệu quả.

Cuối cùng, em muốn gửi lời cảm ơn đến những người đã đọc báo cáo này Em hy vọngrằng báo cáo của em đã truyền tải được thông tin hữu ích và có thể góp phần vào việcchia sẻ kinh nghiệm và kiến thức về lập trình ứng dụng web sử dụng ReactJS và SpringBoot

Huỳnh Anh KiệtTP.HCM, 12/06/2023

NHẬN XÉT CỦA KHOA

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

MỤC LỤC

LỜI MỞ ĐẦU 1

LỜI CẢM ƠN 2

NHẬN XÉT CỦA KHOA 3

MỤC LỤC 4

Chương 1: Giới thiệu công ty thực tập 6

1 Giới thiệu công ty VTI 6

2 Sản phẩm của công ty 6

Chương 2: Nội dung thực tập 7

1 Tìm hiểu công ty và các kỹ năng cơ bản sử dụng trong môi trường làm việc 7

2 Nghiên cứu kỹ thuật 8

2.1 Tìm hiểu và cài đặt môi trường phát triển 8

2.2 Tìm hiểu các ngôn ngữ liên quan 8

2.3 Tìm hiểu về ReactJS và các CSS Framework 9

2.4 Tìm hiểu về Spring Ecosystem và các Framework liên quan 10

2.5 Tìm hiểu về JDBC, JPA, Hibernate và Spring Data 11

3 Thực hiện project 12

4 Lịch làm việc 13

Chương 3: Chi tiết về dự án 15

1 Giới thiệu ứng dụng 15

2 Thực hiện 15

3 Một số hình ảnh của ứng dụng 16

4 Kế hoạch 20

5 Kết quả 20

Chương 4: Tổng kết quá trình thực tập 21

1 Kết quả đạt được 21

2 Những khó khăn gặp phải trong quá trình thực tập 21

3 Kinh nghiệm có được sau quá trình thực tập 21

TÀI LIỆU THAM KHẢO 22

TỔNG KẾT 23

Chương 1: Giới thiệu công ty thực tập

1 Giới thiệu công ty VTI

Được thành lập từ 2017 với mục tiêu đưa công nghệ Việt ra thế giới, VTI đãkhông ngừng phát triển trong hơn 4 năm qua Năm 2019, công ty được bình chọn

là công ty tăng trưởng nhanh nhất khu vực Hà Nội, và hiện tại VTI có hơn 700nhân sự tại Việt Nam và Nhật Bản VTI Japan cũng là một trong những công tyViệt Nam có số lượng nhân lực đông đảo nhất tại Nhật Bản, với đội ngũ nhân sựchất lượng cao được đánh giá bởi nhiều khách hàng khác nhau

2 Sản phẩm của công ty

VTI là một công ty phần mềm chuyên cung cấp dịch vụ cho các đối tác quan trọngtại Nhật Bản, Hàn Quốc, Việt Nam và các lĩnh vực chứng khoán, tài chính, bảohiểm và sản xuất lớn như Hitachi, Toyota, Samsung, LG, Vingroup và nhiều đốitác khác VTI kết hợp các công nghệ mới như Trí tuệ nhân tạo (AI), Học máy(ML), cũng như Điện toán đám mây (Cloud Computing) và Blockchain, đang pháttriển nhằm tạo ra những sản phẩm phù hợp với Cách mạng công nghiệp 4.0 và ápdụng vào thực tế trong các nhà máy, khu công nghiệp và trường học để đáp ứngnhu cầu của các đối tác và người sử dụng Ngoài ra, VTI còn sở hữu các công tycon, ví dụ như VTI Cloud chuyên cung cấp các giải pháp về điện toán đám mây vàVTI Academy chuyên đào tạo nhân sự trong lĩnh vực công nghệ thông tin

Chương 2: Nội dung thực tập

Đợt thực tập này, thực tập sinh tham gia khóa đào tạo với chủ đề “Lập trình ứng dụngweb với ReactJS - Spring Boot” nhằm mục đích giúp thực tập sinh được đào tạo toàndiện về lập trình web, đồng thời rèn luyện kỹ năng làm việc nhóm, giao tiếp, quản lýthời gian, công việc

Tại công ty, thực tập sinh có cơ hội được học tập, khám phá và làm việc trong môitrường phát triển chuyên nghiệp

1 Tìm hiểu công ty và các kỹ năng cơ bản sử dụng trong môi trường làm việc

Thời gian: 1 ngày

Nội dung:

- Giới thiệu về công ty, cách tổ chức của công ty cũng như một số thông tin cầnbiết trong quá trình thực tập như việc quản lý source code và các công cụ hỗ trợtrong quá trình phát triển phần mềm

- Ngày đầu tiên đến công ty em đã được nghe các anh chị trong ban nhân sự trìnhbày về quá trình thành lập và chặng đường phát triển của công ty (như đã trìnhbày ở phần trên), đồng thời công ty cũng giới thiệu thành viên trong teamhướng dẫn thực tập và ban lãnh đạo trong công ty, qua đó giới thiệu về quy trìnhlàm việc từ cao đến thấp trong công ty

- Thực tập sinh được giới thiệu qua về cách thức cũng như quy trình làm việc củacông ty như thời gian đi làm, các quy định công ty ban hành mà các nhân viênphải tuân thủ, cách sử dụng email trong công việc,

2 Nghiên cứu kỹ thuật

2.1 Tìm hiểu và cài đặt môi trường phát triển

Thời gian: 2 ngày

sử dụng MySQL Workbench để thao tác với cơ sở dữ liệu MySQL

2.2 Tìm hiểu các ngôn ngữ liên quan

Thời gian: 1 tuần

- Thực hiện các bài thực hành để kiểm tra về kiến thức đã được training như tạomột giao diện đơn giản trên web sử dụng HTML/CSS/JS thuần, tạo các class và

sử dụng các phần hướng đối tượng trong Java và hiện thực cơ sở dữ liệu vàotrong MySQL dựa theo sơ đồ cho trước theo yêu cầu của trainer

- Ngoài ra phải tìm hiểu thêm các tài liệu trên mạng để nắm rõ thêm các phần đãđược hướng dẫn

- Tìm hiểu về ReactJS: ReactJS là một thư viện JavaScript mạnh mẽ và linh hoạtcho phát triển giao diện người dùng Nó tận dụng Virtual DOM, JSX và quản lýtrạng thái để tạo ra các ứng dụng web hiệu suất cao và dễ bảo trì Thực tập sinhđược giới thiệu sơ qua các đặc trưng của ReactJS thường được sử dụng trong các

dự án

- Tìm hiểu về các Design Pattern: Thực tập sinh được yêu cầu tìm hiểu các DesignPattern được sử dụng trong ReactJS như: Component Pattern, Higher-OrderComponent Pattern (HOC), Qua đó hiểu rõ được tẩm quan trọng của việc cócác quy ước khi viết code cho bản thân để giúp cho thực tập sinh chủ động hoànthiện bản thân hơn và cải thiện được kỹ năng code.

Thực hiện:

- Tham gia đầy đủ các buổi training của công ty

- Thực hành, hỏi đáp mentor để làm rõ các kiến thức đã được training

- Tự tìm hiểu thêm các kiến thức liên quan

Kết quả:

- Bổ sung các kiến thức quan trọng về các design pattern

- Biết được các quy tắc viết code sao cho dễ đọc, dễ hiểu và dễ quản lý không chỉcho các developer hiện tại mà còn những người developer khác gia nhập vào dự

án sau

2.4 Tìm hiểu về Spring Ecosystem và các Framework liên quan

Thời gian: 1 tuần

- Tìm hiểu về Spring Boot Framework: Spring Boot là một dự án trong SpringEcosystem, giúp tạo ra các ứng dụng Java nhanh chóng và dễ dàng Nó cung cấpcác cấu hình mặc định tự động, giảm bớt công việc cấu hình ban đầu và giúp tập

trung vào việc phát triển ứng dụng Spring Boot cũng tích hợp sẵn công cụ nhưTomcat hoặc Jetty để triển khai ứng dụng một cách dễ dàng Thực tập sinh đượcgiới thiệu về cấu trúc project trong Spring Boot và cách tạo các Entity, Service

và Controller sao cho hợp lý và dễ nắm bắt

- Giới thiệu về Spring MVC và Spring Security: Thực tập sinh được giới thiệu sơqua các Framework này để có thể tự tìm hiểu, áp dụng kiến thức vào dự án phíasau

Kết quả:

- Bổ sung các kiến thức quan trọng về các Framework được sử dụng ở back-end

- Biết được hướng tìm hiểu tiếp theo để có thể sử dụng vào trong dự án

2.5 Tìm hiểu về JDBC, JPA, Hibernate và Spring Data

Thời gian: 1 tuần

- Tìm hiểu về JPA: JPA (Java Persistence API) là một giao diện lập trình ứng dụng(API) trong Java để tương tác với cơ sở dữ liệu quan hệ (Relational Database).JPA cung cấp một cách thuận tiện và tiêu chuẩn để thao tác với đối tượng Java

và cơ sở dữ liệu mà không phải viết câu lệnh truy vấn trực tiếp Thực tập sinhđược hướng dẫn viết code sử dụng JPA để đơn giản hóa những bước phức tạpkhi sử dụng trực tiếp JDBC

- Tìm hiểu về Hibernate: Hibernate là một framework ORM (Object-RelationalMapping) phổ biến trong ngôn ngữ lập trình Java, cho phép tương tác với cơ sở

dữ liệu quan hệ (Relational Database) một cách tiện lợi bằng phương pháp ánh

xạ các đối tượng Java vào bảng trong cơ sở dữ liệu và ngược lại Thực tập sinhđược giới thiệu sơ lược về Hibernate và cách cài đặt

- Tìm hiểu về Spring Data: Spring Data là một phần trong Spring Framework,cung cấp một cách thuận tiện và mạnh mẽ để làm việc với cơ sở dữ liệu trongứng dụng Java Nó giúp giảm thiểu duplicate code và cung cấp các cơ chế tựđộng hóa cho việc truy vấn và truy cập dữ liệu Spring Data hỗ trợ các loại cơ sở

dữ liệu khác nhau như cơ sở dữ liệu quan hệ (Relational Database), cơ sở dữ liệuNoSQL, Thực tập sinh được hướng dẫn cài đặt Spring Data, và cấu hình để kếtnối với cơ sở dữ liệu MySQL trong project, sau đó thực tập sinh được yêu cầugiải quyết các bài toán CRUD với Spring Data để có thể làm quen và nâng cao

kỹ năng

Thực hiện:

- Tham gia đầy đủ các buổi training của công ty

- Hoàn thành các yêu cầu mentor đưa ra

- Tìm hiểu thêm trên internet để nắm rõ hơn các kiến thức được hướng dẫn

3 Thực hiện project

Sau ba tuần được training và thực hành, thực tập sinh đã nắm được những kiến thức

cơ bản về ReactJS, Spring Boot Trong tháng thứ hai và thứ ba, trainer đã hướng dẫnthực tập sinh áp dụng những kiến thức đã học để thực hiện một project e-commerce,ngoài ra còn hướng dẫn thực tập sinh nghiên cứu các kiến thức liên quan cho đồ án.Chi tiết đồ án sẽ được nói ở phần sau

(3 tuần)

- Ôn lại các kiến thức về front-end,

back-end và tìm hiểu các công nghệ

liên quan

- Tìm hiểu yêu cầu bài toán và chỉ ra

yêu cầu phần mềm phải thực hiện

- Liệt kê các yêu cầu chức năng của

Sprint 1

(3 tuần)

- Tìm hiểu về React Bootstrap, React

MUI

- Tìm hiểu về cơ sở dữ liệu, kiến trúc

phân tầng Repo, Service,

Controller

- Thực hiện User Story

- Dựng cơ sở dữ liệu cho project

- Back-end: Viết các Entity,

Repository và Service cho API

100% - Sinh viên nhanh chóng

tiếp thu được kiến thứcliên quan

- Sinh viên hoàn thành đầy

đủ các yêu cầu và củng cốthêm các kiến thứcchuyên môn thực tiễnkhác

- Front-end: Tạo giao diện tĩnh cho

User Story và gọi API

Sprint 2

(3 tuần)

- Tìm hiểu về Route, Spring Data

- Thực hiện các User Story

- Viết User Story cho Sprint tiếp

theo

100% - Sinh viên nhanh chóng

tiếp thu các kiến thức liênliên quan

- Sinh viên biết cách nghiêncứu và ứng dụng vào thựctế

Sprint 3

(3 tuần)

- Tìm hiểu về Spring Security, JWT

- Tìm hiểu về Redux

- Thực hiện các User Story

- Hoàn thiện các chức năng đã thực

hiện

100% - Sinh viên biết cách vận

dụng các kiến thức đãhọc Nền tảng để tự họchỏi thêm sau này

Chương 3: Chi tiết về dự án

1 Giới thiệu ứng dụng

Đề tài ứng dụng thực tập là xây dựng ứng dụng bán hàng online ASRV Đây là mộtứng dụng mua quần áo phụ kiện thể thao Ứng dụng cung cấp một giao diện thânthiện và dễ sử dụng, giúp bạn duyệt qua hàng ngàn sản phẩm Bạn có thể tìm kiếmsản phẩm theo danh mục, từ khóa

2 Thực hiện

Thành viên thực hiện:

- Huỳnh Anh Kiệt

- Phan Quang Minh Long

Và có sự giúp đỡ của anh Trương Minh Tuấn

3 Một số hình ảnh của ứng dụng

● Xây dựng giao diện (UI) theo một trang web có sẵn trên internet.

● Phát triển API để lấy thông tin và hiển thị thông tin tương ứng

○ API dùng để search các loại sản phẩm

○ API dùng cho đặt hàng sản phẩm

○ API dùng để đăng nhập, đăng ký

○ API dùng cho việc quản lý kho của admin

5 Kết quả

- Đã hoàn thành được UI theo như yêu cầu

- Hoàn thiện API cho ứng dụng

- Hiểu được mô hình Agile - Scrum khi phát triển một dự án

Chương 4: Tổng kết quá trình thực tập

1 Kết quả đạt được

- Hoàn thiện cơ bản các chức năng của một trang web bán hàng online

- Hiểu thêm các kiến thức chuyên sâu hơn về React và Spring Boot

- Hoàn thành tốt khóa thực tập của công ty VTI

2 Những khó khăn gặp phải trong quá trình thực tập

- Khó khăn về mặt di chuyển khi công ty có vị trí địa lý xa nhà

- Khó khăn trong những ngày đầu làm quen với quy trình làm việc do sinh viênchưa được trải nghiệm môi trường thực tế trước đây

- Khó khăn về mặt giao tiếp, trao đổi công việc vào những ngày đầu do chưa quenbiết được toàn bộ các thành viên của team

- Khó khăn trong những ngày đầu về việc quản lý dự án trên JIRA

3 Kinh nghiệm có được sau quá trình thực tập

Sau quá trình thực tập thì tôi đã rút ra được cho bản thân những kinh nghiệm quý báucho bản thân về đề tài thực tập, cũng như các kinh nghiệm quan trọng cho công việcsau này:

- Học hỏi được quy trình làm việc cũng như tổ chức của một công ty thực tế

- Học hỏi được thêm các kiến thức mới về React và Spring Framework trong pháttriển ứng dụng web

- Học được cách sử dụng các công cụ để trao đổi và giao tiếp, hỏi đáp về công việcmỗi khi có thắc mắc

- Học hỏi quy trình làm việc theo Scrum, quản lý task công việc theo các Sprint

TÀI LIỆU THAM KHẢO

[1] Bootstrap 5.3 Documentations, truy cập vào 24/03/2023 từ

TỔNG KẾT

Như vậy trong thời gian thực tập ở công ty trong 3 tháng, em đã có thể hoàn thành mộtứng dụng web Ứng dụng có đầy đủ các tính năng để ra ban đầu cũng như có tính moduletrong source code khi có thể tái sử dụng lại ở bất kì các dự án nào khác Do số lượngthành viên khá ít nên ứng dụng có giao diện không được bắt mắt nhưng vẫn đảm bảođược các tính năng được thực hiện một cách khá đầy đủ Và với việc source code của ứngdụng có tính module hóa nên việc bảo trì, tái sử dụng hoặc phát triển thêm hoàn toàn cóthể thực hiện được nếu có thêm thời gian

Em xin chân thành cảm ơn các anh Trương Minh Tuấn của công ty VTI đã hỗ trợ, chỉ dẫncũng như sửa các lỗi sai trong quá trình hoàn thành ứng dụng của em để ứng dụng của em

có thể được hoàn thiện và giúp em học được rất nhiều kiến thức chuyên môn lẫn đức tính

và phong cách làm việc