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

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 tại, lập trình ứng dụng web với kết hợp ReactJS Spring Boot đạng lựa chọn phổ biến việc phát triển cách hiệu ReactJS thư viện JavaScript phát triển Facebook, cho phép xây dựng giao diện người dùng cách hiệu nhanh chóng Spring Boot framework thuộc Spring Ecosystem, giúp tối giản hóa cơng việc lặp lặp lại, từ đẩy nhanh việc phát triển ứng dụng Sau năm học tập trường, em có mong muốn trải nghiệm cơng việc thực tế, trau dồi nhiều kinh nghiệm có ích cho thân, tham gia phát triển ứng dụng môi trường chuyên nghiệp, em thực dự định thực tập học kì Và công ty em chọn VTI Mặc dù cơng ty cịn Việt Nam nhiên công ty Nhật Bản với môi trường trẻ trung, động chuyên nghiệp, giúp em thực dự định Trong q trình thực tập cơng ty VTI, em giao nhiệm vụ tham gia vào dự án phát triển ứng dụng web sử dụng ReactJS Spring Boot Mục tiêu dự án xây dựng hệ thống quản lý thông tin ứng dụng web đáp ứng nhu cầu cụ thể khách hàng Em tham gia vào trình phân tích yêu cầu, thiết kế giao diện, triển khai chức ứng dụng Em hy vọng báo cáo cung cấp nhìn tồn diện trình thực tập em Đồng thời, em mong thông qua việc chia sẻ kinh nghiệm mình, báo cáo cung cấp động lực hướng dẫn cho người quan tâm đến lĩnh vực lập trình ứng dụng web sử dụng ReactJS Spring Boot LỜI CẢM ƠN Em xin gửi lời cảm ơn chân thành đến tất người đóng góp vào q trình thực tập em báo cáo Đầu tiên, em xin gửi lời cảm ơn đến cơng ty VTI cho em hội tham gia vào chương trình thực tập doanh nghiệp công ty Em trân trọng hỗ trợ định hướng tận tâm từ thành viên công ty, đặc biệt người trực tiếp hướng dẫn em suốt thời gian thực tập Em muốn bày tỏ lòng biết ơn đến đồng nghiệp thành viên nhóm thực tập em công ty VTI Họ tạo môi trường làm việc chuyên nghiệp hỗ trợ, cho phép em hịa nhập đóng góp vào dự án cách hiệu Cuối cùng, em muốn gửi lời cảm ơn đến người đọc báo cáo Em hy vọng báo cáo em truyền tải thơng tin hữu ích góp phần vào việc chia sẻ kinh nghiệm kiến thức lập trình ứng dụng web sử dụng ReactJS Spring Boot Huỳnh Anh Kiệt TP.HCM, 12/06/2023 NHẬN XÉT CỦA KHOA ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… MỤC LỤC LỜI MỞ ĐẦU LỜI CẢM ƠN NHẬN XÉT CỦA KHOA MỤC LỤC Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty VTI Sản phẩm công ty .6 Chương 2: Nội dung thực tập Tìm hiểu công ty kỹ sử dụng môi trường làm việc Nghiên cứu kỹ thuật 2.1 Tìm hiểu cài đặt môi trường phát triển 2.2 Tìm hiểu ngơn ngữ liên quan .8 2.3 Tìm hiểu ReactJS CSS Framework 2.4 Tìm hiểu Spring Ecosystem Framework liên quan 10 2.5 Tìm hiểu JDBC, JPA, Hibernate Spring Data 11 Thực project 12 Lịch làm việc 13 Chương 3: Chi tiết dự án 15 Giới thiệu ứng dụng 15 Thực 15 Một số hình ảnh ứng dụng 16 Kế hoạch 20 Kết 20 Chương 4: Tổng kết trình thực tập .21 Kết đạt .21 Những khó khăn gặp phải q trình thực tập 21 Kinh nghiệm có sau q 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 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 giới, VTI không ngừng phát triển năm qua Năm 2019, cơng ty bình chọn công ty tăng trưởng nhanh khu vực Hà Nội, VTI có 700 nhân Việt Nam Nhật Bản VTI Japan cơng ty Việt Nam có số lượng nhân lực đông đảo Nhật Bản, với đội ngũ nhân chất lượng cao đánh giá nhiều khách hàng khác Sản phẩm công ty VTI công ty phần mềm chuyên cung cấp dịch vụ cho đối tác quan trọng Nhật Bản, Hàn Quốc, Việt Nam lĩnh vực chứng khốn, tài chính, bảo hiểm sản xuất lớn Hitachi, Toyota, Samsung, LG, Vingroup nhiều đối tác khác VTI kết hợp cơng nghệ Trí tuệ nhân tạo (AI), Học máy (ML), Điện toán đám mây (Cloud Computing) Blockchain, phát triển nhằm tạo sản phẩm phù hợp với Cách mạng công nghiệp 4.0 áp dụng vào thực tế nhà máy, khu công nghiệp trường học để đáp ứng nhu cầu đối tác người sử dụng Ngồi ra, VTI cịn sở hữu cơng ty con, ví dụ VTI Cloud chuyên cung cấp giải pháp điện toán đám mây VTI Academy chuyên đào tạo nhân 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ụng web với ReactJS - Spring Boot” nhằm mục đích giúp thực tập sinh đào tạo tồn diện lập trình web, đồng thời rèn luyện kỹ 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ó hội học tập, khám phá làm việc môi trường phát triển chun nghiệp Tìm hiểu cơng ty kỹ sử dụng môi trường làm việc Thời gian: ngày Nội dung: - Giới thiệu công ty, cách tổ chức công ty số thơng tin cần biết q trình thực tập việc quản lý source code công cụ hỗ trợ trình phát triển phần mềm - Ngày đến công ty em nghe anh chị ban nhân trình bày trình thành lập chặng đường phát triển cơng ty (như trình bày phần trên), đồng thời công ty giới thiệu thành viên team hướng dẫn thực tập ban lãnh đạo cơng ty, qua giới thiệu quy trình làm việc từ cao đến thấp công ty - Thực tập sinh giới thiệu qua cách thức quy trình làm việc cơng ty thời gian làm, quy định công ty ban hành mà nhân viên phải tuân thủ, cách sử dụng email công việc, Nghiên cứu kỹ thuật 2.1 Tìm hiểu cài đặt mơi trường phát triển Thời gian: ngày Nội dung: - Tìm hiểu công cụ cần thiết sử dụng trình làm việc Trong thời gian làm quen đầu mentor hướng dẫn cho thực tập sinh tìm hiểu cơng cụ giúp ích cho cơng việc khơng mà cịn sau Một số phần mềm JIRA– dùng để quản lý project, Visual Studio Code IntelliJ IDEA Community Edition - cơng cụ lập trình vơ phổ biến dành cho lập trình front-end lập trình Java plugin Ngồi cịn sử dụng MySQL Workbench để thao tác với sở liệu MySQL Thực hiện: - Thực hành việc cài đặt môi trường, IDE sử dụng phần mềm nêu Kết quả: - Thực tập sinh thực cơng việc lập trình vơ tiện lợi với cơng cụ chuyên dụng, so sánh IDE để qua chọn IDE thích hợp làm việc lâu dài tùy vào hoàn cảnh yêu cầu cơng việc 2.2 Tìm hiểu ngơn ngữ liên quan Thời gian: tuần Nội dung: - Thực tập sinh training nhắc lại HTML/CSS/JS, Java, SQL kiến thức quan trọng để lập trình front-end back-end - Lập trình hướng đối tượng: trainer nhắc lại củng cố kiến thức lập trình hướng đối tượng tính đóng gói, trừu tượng, kế thừa, đa hình Thực hiện: - Tham gia đầy đủ buổi training công ty - Thực thực hành để kiểm tra kiến thức training tạo giao diện đơn giản web sử dụng HTML/CSS/JS thuần, tạo class sử dụng phần hướng đối tượng Java thực sở liệu vào MySQL dựa theo sơ đồ cho trước theo u cầu trainer - Ngồi phải tìm hiểu thêm tài liệu mạng để nắm rõ thêm phần hướng dẫn Kết quả: - Ôn lại kiến thức cũ nâng cao kỹ làm tiền đề để sử dụng framework sau - Có kiến thức quan trọng cho việc lập trình front-end back-end 2.3 Tìm hiểu ReactJS CSS Framework Thời gian: tuần Nội dung: - Thực tập sinh training Framework sử dụng để lập trình front-end, tìm hiểu số design pattern sử dụng công ty - Tìm hiểu CSS Framework: Bootstrap framework CSS (Cascading Style Sheets) phổ biến sử dụng để phát triển trang web responsive tương thích với nhiều thiết bị khác Nó cung cấp công cụ CSS template JavaScript giúp giảm thiểu thời gian công sức cần thiết để thiết kế giao diện web Ngồi thực tập sinh cịn giới thiệu Framework khác (cũ mới) hướng chuyển dịch công ty Framework - Tìm hiểu ReactJS: ReactJS thư viện JavaScript mạnh mẽ linh hoạt cho phát triển giao diện người dùng Nó tận dụng Virtual DOM, JSX quản lý trạng thái để tạo ứng dụng web hiệu suất cao dễ bảo trì Thực tập sinh giới thiệu sơ qua đặc trưng ReactJS thường sử dụng dự án - Tìm hiểu Design Pattern: Thực tập sinh yêu cầu tìm hiểu Design Pattern sử dụng ReactJS như: Component Pattern, Higher-Order Component Pattern (HOC), Qua hiểu rõ tẩm quan trọng việc có quy ước viết code cho thân để giúp cho thực tập sinh chủ động hoàn thiện thân cải thiện kỹ code Thực hiện: - Tham gia đầy đủ buổi training công ty - Thực hành, hỏi đáp mentor để làm rõ kiến thức training - Tự tìm hiểu thêm kiến thức liên quan Kết quả: - Bổ sung kiến thức quan trọng design pattern - Biết quy tắc viết code cho dễ đọc, dễ hiểu dễ quản lý khơng cho developer mà cịn người developer khác gia nhập vào dự án sau 2.4 Tìm hiểu Spring Ecosystem Framework liên quan Thời gian: tuần Nội dung: - Thực tập sinh training Framework sử dụng để lập trình back-end sử dụng cơng ty - Tìm hiểu Spring Ecosystem: Spring Ecosystem công cụ phát triển ứng dụng Java phổ biến mạnh mẽ Nó xây dựng sở Spring Framework, framework ứng dụng doanh nghiệp (Enterprise Application) phổ biến cho phát triển ứng dụng Java Thực tập sinh giới thiệu cách hoạt động Framework hệ sinh thái Spring - Tìm hiểu Spring Boot Framework: Spring Boot dự án Spring Ecosystem, giúp tạo ứng dụng Java nhanh chóng dễ dàng Nó cung cấp cấu hình mặc định tự động, giảm bớt cơng việc cấu hình ban đầu giúp tập 10 trung vào việc phát triển ứng dụng Spring Boot tích hợp sẵn cơng cụ Tomcat Jetty để triển khai ứng dụng cách dễ dàng Thực tập sinh giới thiệu cấu trúc project Spring Boot cách tạo Entity, Service Controller cho hợp lý dễ nắm bắt - Giới thiệu Spring MVC Spring Security: Thực tập sinh giới thiệu sơ qua Framework để tự tìm hiểu, áp dụng kiến thức vào dự án phía sau Kết quả: - Bổ sung kiến thức quan trọng Framework sử dụng back-end - Biết hướng tìm hiểu để sử dụng vào dự án 2.5 Tìm hiểu JDBC, JPA, Hibernate Spring Data Thời gian: tuần Nội dung: - Thực tập sinh training công cụ Framework sử dụng việc lưu trữ liệu quan hệ - Tìm hiểu JDBC: JDBC (Java Database Connectivity) giao diện lập trình ứng dụng (API) Java cho phép truy cập tương tác với sở liệu quan hệ (Relational Database) thông qua ngôn ngữ truy vấn SQL (Structured Query Language) Thực tập sinh hướng dẫn sử dụng JDBC dự án để hiểu rõ API - Tìm hiểu JPA: JPA (Java Persistence API) giao diện lập trình ứng dụng (API) Java để tương tác với sở liệu quan hệ (Relational Database) JPA cung cấp cách thuận tiện tiêu chuẩn để thao tác với đối tượng Java sở liệu mà viết câu lệnh truy vấn trực tiếp Thực tập sinh hướng dẫn viết code sử dụng JPA để đơn giản hóa bước phức tạp sử dụng trực tiếp JDBC 11 - Tìm hiểu Hibernate: Hibernate framework ORM (Object-Relational Mapping) phổ biến ngơn ngữ lập trình Java, cho phép tương tác với sở liệu quan hệ (Relational Database) cách tiện lợi phương pháp ánh xạ đối tượng Java vào bảng sở liệu ngược lại Thực tập sinh giới thiệu sơ lược Hibernate cách cài đặt - Tìm hiểu Spring Data: Spring Data phần Spring Framework, cung cấp cách thuận tiện mạnh mẽ để làm việc với sở liệu ứng dụng Java Nó giúp giảm thiểu duplicate code cung cấp chế tự động hóa cho việc truy vấn truy cập liệu Spring Data hỗ trợ loại sở liệu khác sở liệu quan hệ (Relational Database), sở liệu NoSQL, Thực tập sinh hướng dẫn cài đặt Spring Data, cấu hình để kết nối với sở liệu MySQL project, sau thực tập sinh yêu cầu giải tốn CRUD với Spring Data để làm quen nâng cao kỹ Thực hiện: - Tham gia đầy đủ buổi training cơng ty - Hồn thành yêu cầu mentor đưa - Tìm hiểu thêm internet để nắm rõ kiến thức hướng dẫn Thực project Sau ba tuần training thực hành, thực tập sinh nắm kiến thức ReactJS, Spring Boot Trong tháng thứ hai thứ ba, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực project e-commerce, ngồi cịn hướng dẫn thực tập sinh nghiên cứu kiến thức liên quan cho đồ án Chi tiết đồ án nói phần sau 12 Lịch làm việc - Người hướng dẫn: Trương Minh Tuấn STT Công việc Sprint - Ôn lại kiến thức front-end, (3 tuần) Mức độ Nhận xét người hướng hoàn thành dẫn 100% - Nắm đủ kiến thức back-end tìm hiểu cơng nghệ Sinh viên thực hành liên quan lại kiến thức có, - Tìm hiểu u cầu tốn góp ý để cải yêu cầu phần mềm phải thực thiện cách làm tốt - Liệt kê yêu cầu chức phần mềm - Liệt kê yêu cầu phi chức phần mềm - Tổ chức dự án JIRA, Github, Google Docs - Viết User Story cho công việc Sprint Sprint - Tìm hiểu React Bootstrap, React (3 tuần) 100% - MUI tiếp thu kiến thức - Tìm hiểu sở liệu, kiến trúc phân tầng Repo, Service, Controller Sinh viên nhanh chóng liên quan - Sinh viên hoàn thành đầy đủ yêu cầu củng cố - Thực User Story thêm kiến - Dựng sở liệu cho project chuyên môn thực tiễn - Back-end: Viết Entity, khác Repository Service cho API 13 thức - Front-end: Tạo giao diện tĩnh cho User Story gọi API Sprint - Tìm hiểu Route, Spring Data 100% - (3 tuần) - Thực User Story Sinh viên nhanh chóng tiếp thu kiến thức liên - Viết User Story cho Sprint tiếp liên quan theo - Sinh viên biết cách nghiên cứu ứng dụng vào thực tế Sprint - Tìm hiểu Spring Security, JWT (3 tuần) - Tìm hiểu Redux 100% - Sinh viên biết cách vận dụng kiến thức - Thực User Story học Nền tảng để tự học - Hoàn thiện chức thực hỏi thêm sau 14 Chương 3: Chi tiết dự án Giới thiệu ứng dụng Đề tài ứng dụng thực tập xây dựng ứng dụng bán hàng online ASRV Đây ứng dụng mua quần áo phụ kiện thể thao Ứng dụng cung cấp giao diện thân thiện dễ sử dụng, giúp bạn duyệt qua hàng ngàn sản phẩm Bạn tìm kiếm sản phẩm theo danh mục, từ khóa Thực Thành viên thực hiện: - Huỳnh Anh Kiệt - Phan Quang Minh Long Và có giúp đỡ anh Trương Minh Tuấn 15 Một số hình ảnh ứng dụng 16 17 18 19 Kế hoạch Thời gian: tháng Nội dung: Vận dụng kiến thức học, kết hợp với kiến thức mentor hướng dẫn vòng tuần vừa qua để phát triển ứng dụng bán quần áo phụ kiện thể thao ● Xây dựng giao diện (UI) theo trang web có sẵn internet ● Phát triển API để lấy thông tin hiển thị thông tin tương ứng ○ API dùng để search 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 admin Kết - Đã hoàn thành UI theo yêu cầu - Hoàn thiện API cho ứng dụng - Hiểu mơ hình Agile - Scrum phát triển dự án 20 Chương 4: Tổng kết trình thực tập Kết đạt - Hoàn thiện chức trang web bán hàng online - Hiểu thêm kiến thức chuyên sâu React Spring Boot - Hồn thành tốt khóa thực tập cơng ty VTI Những khó khăn gặp phải trình thực tập - Khó khăn mặt di chuyển cơng ty có vị trí địa lý xa nhà - Khó khăn ngày đầu làm quen với quy trình làm việc sinh viên chưa trải nghiệm mơi trường thực tế trước - Khó khăn mặt giao tiếp, trao đổi công việc vào ngày đầu chưa quen biết toàn thành viên team - Khó khăn ngày đầu việc quản lý dự án JIRA Kinh nghiệm có sau q trình thực tập Sau q trình thực tập tơi rút cho thân kinh nghiệm quý báu cho thân đề tài thực tập, kinh nghiệm quan trọng cho công việc sau này: - Học hỏi quy trình làm việc tổ chức công ty thực tế - Học hỏi thêm kiến thức React Spring Framework phát triển ứng dụng web - Học cách sử dụng công cụ để trao đổi giao tiếp, hỏi đáp cơng việc 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 Sprint 21 TÀI LIỆU THAM KHẢO [1] Bootstrap 5.3 Documentations, truy cập vào 24/03/2023 từ https://getbootstrap.com/docs/5.3/getting-started/introduction/ [2] ReactJS Documentations, truy cập vào 24/03/2023 từ https://react.dev/reference/react [3] Lydia Hallie, Javascript & React Patterns, truy cập vào 24/03/2023 từ https://javascriptpatterns.vercel.app/patterns [4] Spring Framework Documentations, truy cập vào 01/04/2023 từ https://spring.io/projects/spring-boot 22 TỔNG KẾT Như thời gian thực tập công ty tháng, em hồn thành ứng dụng web Ứng dụng có đầy đủ tính để ban đầu có tính module source code tái sử dụng lại dự án khác Do số lượng thành viên nên ứng dụng có giao diện khơng bắt mắt đảm bảo tính thực cách đầy đủ Và với việc source code ứng dụng có tính module hóa nên việc bảo trì, tái sử dụng phát triển thêm hồn tồn thực có thêm thời gian Em xin chân thành cảm ơn anh Trương Minh Tuấn công ty VTI hỗ trợ, dẫn sửa lỗi sai q trình hồn thành ứng dụng em để ứng dụng em hồn thiện giúp em học nhiều kiến thức chuyên môn lẫn đức tính phong cách làm việc 23