Báo cáo thực tập lập trình web với reactjs
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (208.19 KB, 21 trang )
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
LẬP TRÌNH WEB VỚI REACTJS
Cơng ty thực tập : TMA Solutions
Người phụ trách : Võ Chí Tuấn
Thực tập sinh
: Nguyễn Hoàng Nam
Báo cáo thực tập
Nguyễn Hoàng Nam
TP. Hồ Chí Minh, tháng 05 năm 2023
Báo cáo thực tập
Nguyễn Hoàng Nam
LỜI MỞ ĐẦU
Ngày nay, với sự bùng nổ của internet và sự phát triển nhanh chóng của xã hội, ứng
dụng web đã trở thành một phần không thể thiếu đối với cuộc sống con người. Các ứng
dụng web đáp ứng các nhu cầu hằng ngày như đọc báo tin tức, giải trí, mạng xã hội, xem
phim, trị chuyện và đáp ứng được các nhu cầu trong công việc như bán hàng, hỗ trợ quản lý
thơng tin. Vì thế, lập trình web là một xu hướng nghề nghiệp hiện nay và có nhu cầu tuyển
dụng cao.
Sau ba năm học tập trên trường, bởi mong muốn có thêm kinh nghiệm thực tế, cũng
như muốn được tham gia phát triển trong một môi trường chuyên nghiệp, em có dự định là
sẽ thực tập. Vì vậy, em quyết định chọn cơng ty TMA Solutions – Công ty TNHH Giải pháp
Phần mềm Tường Minh, đây là một môi trường lý tưởng, hiện đại, chuyên nghiệp và là nơi
sẽ giúp em thực hiện được dự định này.
Báo cáo thực tập
Nguyễn Hoàng Nam
LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty TMA Solutions – Công ty TNHH Giải pháp Phần
mềm Tường Minh đã tạo điều kiện cho em có cơ hội được thực tập tại công ty.
Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của nhóm trainer, em
đã tiếp thu được những kiến thức quan trọng, kỹ năng làm việc chuyên nghiệp, cách giải
quyết vấn đề. Chân thành cảm ơn các anh chị trong nhóm trainer đã bỏ ra nhiều thời gian,
công sức để hướng dẫn em hoàn thành đợt thực tập này.
Đặc biệt cảm ơn anh Võ Chí Tuấn đã hướng dẫn, giúp đỡ cho em tận tình cả những
khó khăn trong cơng việc, đến những khó khăn trong việc làm quen với mơi trường mới.
Cảm ơn anh Ơn Đình Khang đã training ReactJS, hỗ trợ em rất nhiều các vấn đề về quy
trình và cách xây dựng ứng dụng web hoàn chỉnh trong thời gian qua. Cảm ơn anh Nguyễn
Nhật Hùng và anh Lưu Công Dương luôn quan tâm, giúp đỡ khi em gặp khó khăn, cung cấp
cho em những kiến thức về cơng nghệ mới và nhắc nhở những thiếu sót của em.
Em xin chân thành cảm ơn thầy cô khoa Công nghệ Phần mềm đã nhiệt tình hỗ trợ và
tạo điều kiện cho em thực hiện bài báo cáo này.
Nguyễn Hoàng Nam
TP. Hồ Chí Minh, ngày 05 tháng 05 năm 2023
Báo cáo thực tập
Nguyễn Hoàng Nam
NHẬN XÉT CỦA KHOA
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
Báo cáo thực tập
Nguyễn Hoàng Nam
MỤC LỤ
LỜI MỞ ĐẦU.............................................................................................................................. 2
LỜI CẢM ƠN.............................................................................................................................. 3
NHẬN XÉT CỦA KHOA............................................................................................................4
MỤC LỤC.................................................................................................................................... 5
CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP....................................................................6
1.1 Giới thiệu công ty TMA Solutions.....................................................................................6
1.2 Sản phẩm công ty...............................................................................................................7
CHƯƠNG 2: NỘI DUNG THỰC TẬP........................................................................................8
2.1 Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty.......................................................8
2.2 Nghiên cứu kỹ thuật...........................................................................................................8
2.2.1 Các công cụ làm việc...................................................................................................8
2.2.2 Tham gia các buổi training..........................................................................................9
2.2.3 Tìm hiểu ReactJS và framework Bootstrap.................................................................9
2.2.4 Thực hiện dự án.........................................................................................................10
2.2.5 Lịch làm việc.............................................................................................................11
CHƯƠNG 3: CHI TIẾT VỀ DỰ ÁN.........................................................................................14
3.1 Dự án tham gia.................................................................................................................14
3.2 Kế hoạch và triển khai......................................................................................................15
3.2.1 Xây dựng UI cho hệ thống tra cứu keyword..............................................................15
3.2.2 Research ChatGPT....................................................................................................15
3.2.3 Xây dựng UI cho hệ thống quản lý test......................................................................16
3.3 Kết quả đạt được............................................................................................................... 16
CHƯƠNG 4: KẾT QUẢ ĐẠT ĐƯỢC.......................................................................................18
TÀI LIỆU THAM KHẢO..........................................................................................................19
TỔNG KẾT................................................................................................................................ 20
Báo cáo thực tập
Nguyễn Hoàng Nam
CHƯƠNG 1: GIỚI THIỆU CƠNG TY THỰC TẬP
Hình 1. 1 Logo công ty
1.1 Giới thiệu công ty TMA Solutions
TMA Solutions được thành lập năm 1997 tại Việt Nam, hiện là công ty hàng đầu
Việt Nam về phát triển và gia công phần mềm. Với sự phát triển vững mạnh suốt 25 năm
qua, TMA Solutions 16 năm qua liên tiếp lọt top 10 công ty FinTech, AI và IoT. Được
nhiều tờ báo cả trong và ngoài nước thường xuyên đưa tin.
TMA Solutions hiện có 7 chi nhánh tại Việt Nam (6 tại thành phố Hồ Chí Minh và 1
tại thành phố Quy Nhơn) cùng với văn phịng ở nước ngồi (Mỹ, Canada, Pháp, Nhật, Úc,
Singapore) với đội ngũ hơn 4000 kỹ sư tài năng, nhiệt huyết.
Với hơn 10 năm đầu tư mạnh mẽ vào phát triển các công nghệ mới, TMA đã và đang
cung cấp cho khách hàng nhiều nước những sản phẩm và giải pháp tối ưu ứng dụng các
công nghệ mới như: Khoa học dữ liệu, Trí tuệ nhân tạo, Dữ liệu lớn, IoT… giúp khách hàng
ứng dụng các cơng nghệ mới một cách hiệu quả và chi phí thấp.
Báo cáo thực tập
Nguyễn Hoàng Nam
1.2 Sản phẩm công ty
TMA Solutions chuyên cung cấp các dịch vụ và giải pháp liên quan nhiều lĩnh vực
trong đời sống như tài chính – ngân hàng, thương mại điện tử, bất động sản, bảo hiểm, viễn
thông, giáo dục, …
TMA Solutions hiện là đối tác tin cậy có nhiều năm kinh nghiệm thực hiện những dự
án lớn và phức tạp với những công nghệ mới nhất với hơn 100 khách hàng đến từ 30 quốc
gia trên thế giới như các thị trường Bắc Mỹ, Châu Âu, Nhật Bản, Hàn Quốc, Ấn Độ, … Có
thể kể đến một số khách hàng truyền thống từ nhiều năm qua của TMA Solutions như
Avaya, Nokia, Mitel, …
Ngồi là đối tác gia cơng cho các cơng ty nước ngồi, TMA cịn tự mình phát triển
nhiều sản phẩm thông qua công ty thành viên TMA Innovation đã được ứng dụng rộng rãi
và thu được phản hồi tích cực cũng như đem lại lợi nhuận cao.
Báo cáo thực tập
Nguyễn Hoàng Nam
CHƯƠNG 2: NỘI DUNG THỰC TẬP
Đợt thực tập với chủ đề “Lập trình web với ReactJS” nhằm mục đích giúp sinh viên
thực tập được học hỏi, nghiên cứu thêm về ReactJS và các công nghệ mới. Đồng thời rèn
luyện những kỹ năng mềm như làm việc nhóm, thuyết trình, giao tiếp. Tại cơng ty, sinh viên
có cơ hội được học tập, khám phá và làm việc trong một môi trường phát triển chun
nghiệp.
2.1 Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty
Thời gian: 1 ngày
Nội dung:
-
Giới thiệu về công ty, cách tổ chức, giá trị cốt lõi, quy trình làm việc và xử
lý cơng việc, cải thiện các kỹ năng mềm.
-
Được nghe trainer giới thiệu về cơng ty, q trình thành lập và phát triển,
quy trình làm việc từ cao xuống thấp, cách thức tổ chức của công ty. Cách
thức xử lý các vấn đề phát sinh trong lúc làm việc từ các vấn đề về nhân
sự, pháp lý đến máy móc …
-
Ngồi ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong
công ty như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng
email trong công việc, các kỹ năng mềm.
Kết quả: Hiểu thêm về công ty, quá trình thành lập và phát triển, giá trị cốt lõi. Có
thêm các kỹ năng mềm giúp ích trong cơng việc, làm việc có kế hoạch, có kỷ luật, có
trách nhiệm hơn.
2.2 Nghiên cứu kỹ thuật
2.2.1 Các công cụ làm việc
-
Thời gian: 4 ngày
-
Nội dung: Tìm hiểu về các cơng cụ sẽ được sử dụng trong quá trình làm việc.
Báo cáo thực tập
Nguyễn Hoàng Nam
o Tìm hiểu về các cơng cụ sẽ giúp ích cho công việc sau này. Một số phần
mềm trong số đó như GIT – hệ thống quản lý phiên bản phân tán; Visual
Studio Code – một phần mềm rất hữu ích và phổ biến với lập trình viên
với các đặc điểm như đơn giản, gọn nhẹ, dễ dàng cài đặt; Skype – ứng
dụng hỗ trợ cho việc giao tiếp, chia sẻ tài liệu.
-
Thực hiện: Thực hành sử dụng các phần mềm đã nêu trên.
-
Kết quả: Lập trình sử dụng các cơng cụ miễn phí, giúp dễ dàng kết hợp các
cơng cụ với nhau.
2.2.2 Tham gia các buổi training
-
Thời gian: 4 buổi. Thời lượng khoảng 1h 30 phút mỗi buổi.
-
Nội dung: Các buổi training chia sẻ cho thực tập sinh về các chủ đề như:
o Các quy định về bảo mật.
o Cách thức giao tiếp và hình thức viết email.
o Cách làm việc nhóm.
o Quy trình phát triển.
-
Thực hiện: Tham gia đầy đủ các buổi training.
-
Kết quả:
o Nắm được các quy định của công ty.
o Học thêm các kiến thức về kỹ năng mềm.
2.2.3 Tìm hiểu ReactJS và framework Bootstrap
-
Thời gian: 4 ngày
-
Nội dung: Các kiến thức cơ bản về ReactJS để có thể tạo ra phía giao diện của
ứng dụng web. Đồng thời sử dụng framework Bootstrap để tinh chỉnh giao
diện.
o Ôn tập kiến thức ReactJS
Nắm được các kiến thức cơ bản về ReactJS (component, state,
props, react router, ...). Tìm hiểu thêm về React Hooks, State
Management (Redux), Formik và Yup (Quản lý Form).
Báo cáo thực tập
Nguyễn Hoàng Nam
Tìm hiểu kiến thức cơ bản về TypeScript.
o Tìm hiểu về Bootstrap
Bootstrap là một framework front-end miễn phí giúp người dùng
phát triển web nhanh hơn và dễ dàng hơn. Bao gồm các mẫu
thiết kế dựa trên HTML và CSS cho các kiểu chữ, biểu mẫu,
nút, bảng, điều hướng, hình ảnh...
Bootstrap giúp dễ dàng tạo các thiết kế website responsive.
Tiến hành cài đặt, sử dụng các thành phần đơn giản như
component, form, button, table…
-
Thực hiện
o Tìm hiểu theo hướng dẫn của mentor và các nội dung đã nêu trên.
o Xây dựng giao diện sử dụng ReactJS và áp dụng Bootstrap để tinh
chỉnh.
o Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.
-
Kết quả
o Hiểu được những khái niệm cơ bản trong lập trình giao diện với
ReactJS.
o Hiểu được cách áp dụng Bootstrap với ReactJS.
o Xây dựng thành cơng giao diện cho ứng dụng web đơn giản có áp dụng
các kiến thức đã tìm hiểu.
2.2.4 Thực hiện dự án
-
Được tham gia vào một số dự án như:
o Xây dựng UI cho hệ thống tra cứu keyword
o Research ChatGPT
o Xây dựng UI cho hệ thống quản lý test
-
Chi tiết dự án sẽ được nói ở phần sau.
Báo cáo thực tập
Nguyễn Hoàng Nam
2.2.5 Lịch làm việc
Mức độ
Tuầ
Cơng việc
n
2
3
hồn
thành
-
1
Người hướng dẫn
-
của người
hướng
dẫn
Tìm hiểu về cơng ty, cách tổ
chức của cơng ty.
-
Anh Võ Chí Tuấn
Làm quen với các cơng cụ
-
Anh Ơn Đình Khang
làm việc trong cơng ty.
-
Anh Nguyễn Nhật Huy
-
Anh Võ Chí Tuấn
-
Anh Ơn Đình Khang
-
Anh Nguyễn Nhật Huy
-
Ơn tập về ReactJS.
-
Tiếp tục ơn tập về ReactJS.
-
Tìm hiểu về TypeScript.
-
Tìm hiểu về dự án “Xây
-
Anh Võ Chí Tuấn
dựng UI cho hệ thống tra
-
Anh Ơn Đình Khang
cứu keyword”.
-
Anh Nguyễn Nhật Huy
-
Nhận xét
Tạo và kết nối với database
local.
-
Xây dựng các layout cho
Báo cáo thực tập
Nguyễn Hoàng Nam
History Page.
-
Tạo thông báo cho sự kiện
load, bắt lỗi cho việc load
4
dữ liệu.
-
Anh Võ Chí Tuấn
Xây dựng chức năng Delete,
-
Anh Ôn Đình Khang
link
-
Anh Nguyễn Nhật Huy
Tìm hiểu khái niệm về
-
Anh Võ Chí Tuấn
ChatGPT.
-
Anh Lưu Cơng Dương
Tiếp tục tìm hiểu cách ứng
-
Anh Võ Chí Tuấn
dụng.
-
Anh Lưu Cơng Dương
hướng dẫn.
-
Anh Võ Chí Tuấn
-
Tìm hiểu về bảo mật.
-
Anh Lưu Cơng Dương
-
Thuyết
-
Anh Võ Chí Tuấn
-
Anh Lưu Cơng Dương
-
to
Repository
API,
Show History Detail.
-
Gọi API, load dữ liệu.
-
Tìm
hiểu
về
dự
án
“Research ChatGPT”.
5
-
Tìm hiểu cách ứng dụng.
-
Tham gia buổi training.
-
Thuyết
trình
với
người
hướng dẫn.
6
-
Tìm hiểu về hạn chế.
-
Thuyết
7
8
trình
trình
hướng dẫn.
Báo cáo thực tập
với
với
người
người
Nguyễn Hồng Nam
-
Chỉnh sửa theo những đánh
giá và góp ý của người
hướng dẫn.
-
9
-
Tìm hiểu về dự án “Xây
dựng UI cho hệ thống quản
-
Anh Võ Chí Tuấn
lý test”.
-
Anh Ơn Đình Khang
Xây dựng structure và các
-
Anh Nguyễn Nhật Huy
-
Anh Võ Chí Tuấn
-
Anh Ơn Đình Khang
-
Anh Nguyễn Nhật Huy
-
Anh Võ Chí Tuấn
-
Anh Võ Chí Tuấn
layout cho dự án.
-
Xây dựng đường dẫn.
-
Xây dựng chức năng đăng
nhập.
10
-
Xây
dựng
global
component.
-
Tham gia buổi training.
-
Viết báo cáo cho kỳ thực
11
tập.
-
Chỉnh sửa và hoàn thành
báo cáo.
12
-
Kết thúc kỳ thực tập.
Báo cáo thực tập
Nguyễn Hoàng Nam
CHƯƠNG 3: CHI TIẾT VỀ DỰ ÁN
3.1 Dự án tham gia
-
Xây dựng UI cho hệ thống tra cứu keyword
o Tổng quan
Cho phép người dùng đăng nhập, đăng xuất.
Hiện kết quả tra cứu theo keyword người dùng nhập.
Hiển thị lịch sử tra cứu của người dùng.
o Nhiệm vụ được giao:
Tìm hiểu source code.
Xây dựng History Page cho dự án.
-
Research ChatGPT
o Tổng quan
Tra cứu về ChatGPT.
o Nhiệm vụ được giao:
ChatGPT là gì?
Cách áp dụng.
Giới hạn.
Bảo mật.
-
Xây dựng UI cho hệ thống quản lý test
o Tổng quan
Cho phép người dùng đăng nhập.
Load dữ liệu.
Cho phép thêm, xóa, sửa dữ liệu.
o Nhiệm vụ được giao
Xây dựng structure và các layout cho dự án.
Xây dựng đường dẫn.
Xây dựng chức năng đăng nhập.
Báo cáo thực tập
Nguyễn Hoàng Nam
Xây dựng global component.
3.2 Kế hoạch và triển khai
3.2.1 Xây dựng UI cho hệ thống tra cứu keyword
-
Giai đoạn 1: Tiếp cận dự án. Xác nhận các tính năng cần phải xây dựng
o Nghe giới thiệu về công dụng và các tính năng đã có của dự án.
o Tìm hiểu source code.
o Xây dựng History Page cho dự án.
-
Giai đoạn 2: Xây dựng tính năng
o Xây dựng History Page
Dựa vào thiết kế đã được cung cấp, xây dựng UI cho History
Page.
Xử lý sự kiện load dữ liệu, bắt và hiển thị các lỗi.
Xây dựng chức năng delete, detail of history, link to Repository
API.
Gọi API, load dữ liệu.
-
Giai đoạn 3: Báo cáo, chỉnh sửa
o Tiến hành báo cáo với người hướng dẫn.
o Chỉnh sửa và kết thúc dự án.
3.2.2 Research ChatGPT
-
Giai đoạn 1: Tìm hiểu, nghiên cứu về công nghệ. Xác nhận các nội dung cần
phải trình bày:
o Chat GPT là gì?
o Cách áp dụng.
o Giới hạn.
o Bảo mật.
-
Giai đoạn 2: Báo cáo, chỉnh sửa
o Hoàn thành báo cáo tổng hợp các kiến thức đã tìm hiểu.
Báo cáo thực tập
Nguyễn Hoàng Nam
o Thuyết trình với người hướng dẫn.
o Nghe nhận xét và sửa báo cáo.
3.2.3 Xây dựng UI cho hệ thống quản lý test
-
Giai đoạn 1:
o Được giới thiệu về dự án.
o Xác nhận nhiệm vụ cần thực hiện.
-
Giai đoạn 2:
o Xây dựng structure và layout
Xây dựng structure cho dự án.
Tạo layout cho các trang.
o Xây dựng layout và xử lý logic cho trang đăng nhập
Xây dựng UI.
Xây dựng đường dẫn cho các trang.
Xử lý sự kiện đăng nhập, bắt và hiển thị các lỗi.
o
Tạo global component
Sử dụng “mui core” tạo table component
-
Giai đoạn 3: Báo cáo, chỉnh sửa
o Tiến hành báo cáo với người hướng dẫn.
o Chỉnh sửa và kết thúc dự án.
3.3 Kết quả đạt được
-
Xây dựng UI cho hệ thống tra cứu keyword
o Hồn tất UI.
o Load dữ liệu lịch sử tìm kiếm của người dùng, hiển thị chi tiết của từng kết
quả.
o Hoàn thành chức năng delete, link to Repository API.
o Xử lý sự kiện load, bắt các trường hợp lỗi.
-
Research ChatGPT
Báo cáo thực tập
Nguyễn Hoàng Nam
o Đảm bảo đầy đủ các mục yêu cầu. Tuy nhiên nội dung vẫn chưa đầy đủ.
o Phần thuyết trình chưa tốt.
o Slide được trình bày tạm ổn.
-
Xây dựng UI cho hệ thống quản lý test
o Hoàn tất việc xây dựng structure và các layout cho dự án.
o Thực hiện logic và layout của trang đăng nhập:
Xây dựng layout.
Xây dựng đường dẫn cho các trang.
Xử lý sự kiện đăng nhập, bắt lỗi.
o Tạo global component cho table.
Báo cáo thực tập
Nguyễn Hoàng Nam
CHƯƠNG 4: KẾT QUẢ ĐẠT ĐƯỢC
-
Thao tác lập trình, tư duy, ý tưởng xử lý luồng dữ liệu hiệu quả hơn.
-
Củng cố kiến thức, nâng cao kỹ năng lập trình Web Front-end sử dụng ReactJS.
-
Nâng cao khả năng research, thuyết trình, trình bày slide.
-
Biết nhìn nhận và đánh giá bản thân thơng qua những buổi họp. Nhìn nhận rút kinh
nghiệm để cải thiện được công việc, rút ngắn thời gian làm việc.
-
Cải thiện kỹ năng làm việc nhóm.
-
Học được các kỹ năng khác như: kỹ năng giao tiếp, kỹ năng viết email, ....
Báo cáo thực tập
Nguyễn Hoàng Nam
TÀI LIỆU THAM KHẢO
[1] R. Router, "React Router," [Online]. Available: />[2] F. O. Source, "Getting Started - React," [Online]. Available:
/>[3] w3schools, "TypeScript Tutorial," [Online]. Available:
/>[4] OpenAI, "Introduction," [Online]. Available:
/>[5] Bootstrap, "Introduction," [Online]. Available:
/>[6] S. Overflow, "Stack Overflow," [Online]. Available: />
Báo cáo thực tập
Nguyễn Hoàng Nam
