Báo cáo thực tập lập trình react js và xây dựng ứng dụng quản lý chiến dịch doanh nghiệp

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 REACT.JS VÀ XÂY DỰNG ỨNG DỤNG QUẢN LÝ
CHIẾN DỊCH DOANH NGHIỆP

Công ty thực tập : Tisoha Software Solutions
Người phụ trách : Đỗ Công Bá
Thực tập sinh

: Lê Hồng Phú

Đỗ Cơng Bá
Lê Hồng Phú - 19520216


TP. Hồ Chí Minh, tháng 12 năm 2022

Đỗ Cơng Bá
Lê Hoàng Phú - 19520216


LỜI MỞ ĐẦU
Ngày nay, với sự phát triển nhanh chóng của xã hội, công nghệ thông tin trở thành
một phần không thể thiếu đối với cuộc sống của mỗi con người và lập trình web là một
trong số đó.
Lập trình web là một trong những lựa chọn nghề nghiệp xu hướng, phổ biến với
các bạn học khoa học máy tính hoặc kỹ thuật phần mềm, cơng nghệ thơng tin nói chung.
Lập trình viên web được coi là một vị trí việc làm nhiều triển vọng do nhu cầu tuyển

dụng được dự đoán sẽ tiếp tục tăng lên trong tương lai. Và đây cũng chính là lý do để em
đưa ra quyết định đầu tiên cố gắng học chuyên sâu lập trình web và biến nó thành một
cái nghề của mình.
Trải qua quá trình học tập trên trường, em đã hiểu rõ hơn về quá trình phát triển
phần mềm, tư duy thuật toán và giải quyết vấn đề. Tuy những kiến thức ấy là quý báu,
nhưng để nó thực tế hơn thì bản thân em cần phải trải nghiệm và ứng dụng được chúng.
Chính quyết định ấy, em đã bắt đầu tìm kiếm cơng ty để mình bắt đầu hành trình thực tập
đầu tiên và TISOHA SOFTWARE SOLUTIONS chính là lựa chọn tốt nhất đối với em,
là nơi sẽ giúp em có những trải nghiệm đầy thú vị trong mơi trường làm việc thực tế.

Đỗ Cơng Bá
Lê Hồng Phú - 19520216


LỜI CẢM ƠN
Đầu tiên, em xin trân trọng gửi lời cảm ơn đến Công ty TNHH Giải pháp Phần mềm
TISOHA đã tạo điều kiện để em được bắt đầu hành trình thực tập của mình tại đây.
Trong quá trình trải nghiệm môi trường làm việc tại công ty, em đã học được nhiều thứ
hay như là cách làm việc, tiếp cận một kiến thức mới, cách mọi người giải quyết vấn đề và đặc
biệt là văn hóa của cơng ty. Trong khoảng thời gian ấy, kiến thức mà em học được trong lần đầu
tiên “thực chiến” này có thể nói là rất quý báu. Những kiến thức ấy đã giúp em hiểu rõ hơn về
việc xây dựng khung của một ứng dụng web hoàn chỉnh, cũng như cách thức để giao tiếp giữa
những lập trình viên Front-end và Back-end.
Đặc biệt, em xin chân thành gửi lời cảm ơn đến anh Đỗ Cơng Bá đã hướng dẫn cho em
quy trình và cách thức để chúng ta có thể xây dựng nên một ứng dụng web hoàn chỉnh, cũng
như là người truyền cảm hứng để em có thể biết mình đang ở đâu và nên làm gì trên con đường
phía trước. Ngồi ra, em xin gửi lời cảm ơn đến các anh, cũng như các bạn đồng nghiệp đã nhiệt
tình hướng dẫn giải quyết những vấn đề mà em gặp trong quá trình hồn thiện dự án.
Em xin trân thành cảm ơn quý thầy cô khoa Công Nghệ Phần Mềm đã tạo điều kiện mơn
học để em có thể trải nghiệm thực tế với doanh nghiệp, cũng như đã dành thời gian quý báo của

mình để lắng nghe em báo cáo về q trình thực tập của mình.

TP. Hồ Chí Minh, ngày 24 tháng 12 năm 2022
Lê Hồng Phú

Đỗ Cơng Bá
Lê Hồng Phú - 19520216


NHẬN XÉT CỦA KHOA
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................

Đỗ Cơng Bá

Lê Hồng Phú - 19520216


MỤC LỤC
Chương 1.

GIỚI THIỆU CƠNG TY THỰC TẬP...............................................................1

1.1.

Giới thiệu Cơng ty TNHH Giải pháp Phần mềm TISOHA....................................1

1.2.

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

Chương 2.

NỘI DUNG THỰC TẬP......................................................................................3

2.1.

Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty..........................................3

2.2.

Nghiên cứu kỹ thuật...............................................................................................3

2.2.1.

Các cơng cụ làm việc..............................................................................................3

2.2.2.

Tìm hiểu Framework React.js................................................................................4

2.2.3.

Tìm hiểu về VueXY Admin Template – React Admin Template..........................5

2.3.

Thực hiện project....................................................................................................6

2.4.

Lịch làm việc..........................................................................................................6

Chương 3.

CHI TIẾT VỀ PROJECT....................................................................................9

3.1.

Giới thiệu về ứng dụng...........................................................................................9

3.2.

Thực hiện................................................................................................................9

3.2.1.

Giai đoạn lên ý tưởng, đề xuất tính năng và so sánh với u cầu từ khách hàng...9

Đỗ Cơng Bá
Lê Hồng Phú - 19520216


3.2.2.

Giai đoạn xây dựng khung sườn cho ứng dụng web..............................................9

3.2.3.

Giai đoạn triển khai ứng dụng web......................................................................10

TÀI LIỆU THAM KHẢO.........................................................................................................14
TỔNG KẾT ..............................................................................................................................16

Đỗ Cơng Bá
Lê Hồng Phú - 19520216


1
Chương 1. GIỚI THIỆU CÔNG TY THỰC TẬP
1.1. Giới thiệu Công ty TNHH Giải pháp Phần mềm TISOHA

Công ty TNHH Giải pháp phần mềm TISOHA là một doanh nghiệp được thành lập vào
10/2020 đến nay đã hoạt động được gần 2 năm. Trong thời gian hoạt động, công ty đã nhận
cung cấp dịch vụ cho nhiều khách hàng tại Mỹ, Malta, Úc và Singapore...nơi tập trung phát

triển ứng dụng trên nền web và lập trình ứng dụng cho điện thoại thông minh.
TISOHA đem lại cho khách hàng những dịch vụ lập trình, gia cơng phần mềm uy tín chất
lượng với độ an toàn cao, khả năng mở rộng và tiết kiệm chi phí cho khách hàng.
1.2. Sản phẩm của cơng ty
Sản phẩm của công ty chủ yếu là các dự án outsource về giáo dục, giải trí, thương mại.
Cơng ty luôn mang đến cho khách hàng dịch vụ phát triển, gia cơng phần mềm hồn hảo
từ hỗ trợ, tư vấn, bảo trì đến phát triển các ứng dụng, phần mềm một cách toàn diện. Các sản
phẩm và giải pháp do công ty triển khai được đảm bảo mức độ an tồn cao, có khả năng mở
rộng, mang lại sự hài lịng về chất lượng và thỏa mãn về chi phí.

Đỗ Cơng Bá
Lê Hồng Phú - 19520216


2

Đỗ Cơng Bá
Lê Hồng Phú - 19520216


3
Chương 2. NỘI DUNG THỰC TẬP
Thực tập với chủ đề “Lập trình React.js và xây dựng ứng dụng quản lý chiến dịch doanh
nghiệp” nhằm giúp sinh viên thực tập tiếp cận được với dự án thực tế, đặc biệt là trao dồi kỹ
năng lập trình Front-end, ngồi ra giúp sinh viên rèn luyện các kỹ năng khác như kỹ năng làm
việc nhóm, kỹ năng thuyết trình trước đám đơng và kỹ năng đề xuất kế hoạch phát triển cho dự
án. Khi làm việc tại cơng ty, sinh viên sẽ có cơ hội học tập, khám phá và làm việc trong một
mơi trường phát triển web 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: 2 ngày.

Nội dung: Giới thiệu về công ty, cách tổ chức của công ty.
Được nghe người phụ trách 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.
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ách
báo cáo tiến độ dự án, cách theo dõi kênh thông tin từ dự án,…
Kết quả: Giúp sinh viên hiểu thêm về cơng ty Tisoha Software Solutions, q trình thành
lập và phát triển. Có thêm các kỹ năng về việc sử dụng email 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: 2 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.
Trong thời gian này, người phụ trách đã hướng dẫn thực tập sinh tìm hiểu về các cơng
cụ sẽ giúp ích cho trong cơng việc sau này. Một số phần mềm trong số đó như Slack –
Phần mềm chat, report công việc hàng ngày của công ty, Jira – Ứng dụng theo dõi và

Đỗ Cơng Bá
Lê Hồng Phú - 19520216


4
quản lý quy trình phát triển phần mềm, Redmine – Cơng cụ quản lý và theo dõi, kiểm sốt
các vấn đề của dự án, Visual Studio Code – Trình chỉnh sửa mã nguồn, Git – Hệ thống
quản lý các phiên bản mã nguồn phân tán, Gitlab – Phần mềm quản lý kho mã nguồn Git,
…
Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.
Kết quả: Sử dụng tốt trong q trình phục vụ cho cơng việc.
2.2.2. Tìm hiểu Framework React.js
Thời gian: 10 ngày (2 tuần)

Nội dung: Được training về React.js.

-

Tìm hiểu lại các kiến thức về HTML, CSS và Javascript.

-

Tìm hiểu về các tính năng của Javascript ES6.

-

Tìm hiểu về Nodejs.

-

Tìm hiểu các kiến thức cơ bản của React.js.

-

Tìm hiểu về React Router – Bộ định tuyến React.

-

Tìm hiểu về Redux và Redux Toolkit.

-

Tìm hiểu về Validate – Yup library.

-

Tìm hiểu về cách cấu hình Axios.
Thực hiện:

-

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

-

Nghiên cứu tài liệu, làm các bài thực hành.
Kết quả:

-

Nắm được các kiến thức cơ bản của React.js.

-

Có thể tạo ra một ứng dụng nhỏ bằng React.js.

Đỗ Cơng Bá
Lê Hồng Phú - 19520216


5
2.2.3. Tìm hiểu về VueXY Admin Template – React Admin Template
Nội dung: Tìm hiểu về kiến trúc có trong template, cách thức vận hành, định dạng lại các
thành phần có sẵn, cách phân quyền, xác thực dữ liệu trước khi gửi lên, cách tổ chức

source code, redux toolkit, các service, thiết lập ban đầu,…

-

Khái niệm cơ bản về VueXY.
Vuexy là mẫu bảng điều khiển quản trị kết hợp của Vuejs, React, Angular, HTML
& Laravel. Đây là Mẫu bảng điều khiển dành cho quản trị viên thân thiện với nhà
phát triển nhất và có thể tùy chỉnh cao dựa trên Bootstrap 4, Bootstrap Vue &
Reactstrap.

-

Khái niệm cơ bản về Redux toolkit.
Redux-toolkit là một package được sinh ra nhằm giải quyết phần lớn những vấn

đề kể trên, được phát triển bởi chính chủ reduxjs team, giúp chúng ta viết code redux
nhanh gọn, hoàn chỉnh theo một quy chuẩn thống nhất.

-

Khái niệm về ACL.
Access Control List (ACL) là danh sách tuần tự các câu lệnh dùng để quản lý lưu

lượng truy cập đến hoặc đi, xác định cách chuyển tiếp hoặc ngăn chặn một gói tin
(packet) trên một thiết bị, được áp dụng trên một Interface nào đó, và trên bộ đệm vào
hoặc ra, điều khiển Router thực hiện các hành động tương ứng là cho phép (allow)
hoặc từ chối (deny).
ACL giống như loại Tường lửa Stateless, chỉ hạn chế, chặn hoặc cho phép các gói
tin đang truyền từ nguồn đến đích.

-

Khái niệm về Yup.

Đỗ Cơng Bá
Lê Hồng Phú - 19520216


6
Yup là một Javascript object schema validator. Cùng lấy một ví dụ đơn giản để
hiểu hơn về yup nhé. Cùng hướng tới một form đăng nhập bao gồm các trường
'username' và 'password'. Trước khi gửi request chúng ta cần kiểm tra xem end-user
đã nhập đầy đủ thông tin và đúng kiểu dữ liệu hay không.
Thực hiện:

-

Tham gia đầy đủ các buổi trainning.

-

Làm các bài tập thực hành như thiết kế trang quản lý thơng tin nhân sự với Fake API.

-

Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.
Kết quả:

-

Hiểu được kiến trúc có trong VueXY Template.

-

Nắm rõ hơn về kiến thức React.js, xây dựng thành công trang quản lý nhân sự với Fake

API.
2.3. Thực hiện project
Sau một tháng đượ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 và các package liên quan thì trong tháng thứ hai, người hướng dẫn
đã hướng dẫn thực tập sinh áp dụng những kiến thức đã học để tham gia thực chiến dự án
mới của công ty.
Chi tiết thực hiện dự án sẽ được nói ở phần sau.
2.4. Lịch làm việc
Tuần
1

Cơng việc

Người hướng dẫn

Tìm hiểu về cơng ty, Anh Võ Hồng

Mức độ
hồn thành

Nhận xét của
người hướng
dẫn

100%

Đỗ Cơng Bá
Lê Hồng Phú - 19520216


7
cách tổ chức của công ty.
Làm quen với các
công cụ làm việc trong
công ty.
Học cách trao đổi,

Đức Khoa, Đỗ
Công Bá

làm việc qua email, Slack,
Jira.
Tìm hiểu các kiến
2

thức cơ bản trong lập trình
web

và

Framework

ReactJs.

Anh Võ Hồng
Đức Khoa, Đỗ

100%

Cơng Bá

Tìm hiểu các kiến Anh Võ Hoàng
3

thức cơ bản về các package Đức Khoa, Đỗ
như Yup, React Toolkit.

100%

Cơng Bá

Thiết kế UI hai màn
hình đăng nhập, đăng ký,
màn hình đại lý (danh sách,
4

thêm, xóa, sửa).

Anh Đỗ Công Bá

100%

năng, thiết lập API, các Anh Đỗ Công Bá

100%

Thiết kế UI màn
hình quản lý chiến dịch
(danh sách, thêm, xóa, sửa).
Xây dựng các store
lưu trữ dữ liệu cho các tính
5

dịch vụ cho tính năng quản
lý đại lý.

Đỗ Cơng Bá
Lê Hoàng Phú - 19520216


8
Xây dựng các store
lưu trữ dữ liệu cho các tính
6

năng, thiết lập API, các Anh Đỗ Công Bá

100%

dịch vụ cho tính năng quản
lý chiến dịch.
7

Anh Đỗ Cơng Bá

100%

khách hàng, chỉnh sửa và Anh Đỗ Công Bá

100%

Kiểm thử sản phẩm
Nhận phản hồi từ

8

cập nhật.

Đỗ Cơng Bá
Lê Hồng Phú - 19520216


9
Chương 3. CHI TIẾT VỀ PROJECT
3.1. Giới thiệu về ứng dụng
Trong giai đoạn cuối năm vào các tháng 11 và 12, các doanh nghiệp thường sẽ
tranh nhau triển khai các chiến dịch giảm giá, quay thưởng,… Nhằm đáp ứng yêu cầu từ
doanh nghiệp, Công ty TNHH Giải pháp Phần mềm Tisoha đã triển khai dự án “Ứng dụng
quản lý chiến dịch doanh nghiệp”.
3.2. Thực hiện
3.2.1. Giai đoạn lên ý tưởng, đề xuất tính năng và so sánh với yêu cầu từ khách hàng

-

Nội dung:
 Đề xuất thơng tin cần có ở các tính năng.
 Đề xuất thiết kế ở các màn hình.
 Trao đổi với Back-end về các tính năng từ khách hàng và thông qua sự chấp thuận
của Leader.

-

Kết quả:
 Thống nhất được quy trình xử lý các nghiệp vụ từ khách hàng.
 Thống nhất đươc các tính năng và giao diện.

3.2.2. Giai đoạn xây dựng khung sườn cho ứng dụng web

-

Nội dung:
 Xây dựng các router cho trang web.
 Xây dựng layout chung cho các tính năng.

Đỗ Cơng Bá
Lê Hoàng Phú - 19520216


10
 Xây dựng thanh điều hướng cho trang web.
 Cấu hình axios và các end point.

-

Kết quả:
 Xây dựng đầy đủ các router cho một trang web.
 Xây dựng được các khung giao diện chung, màu sắc và thanh điều hướng cho
trang.

3.2.3. Giai đoạn triển khai ứng dụng web

-

Nội dung:
 Xây dựng tính năng đăng nhập, đăng ký.
 Xây dựng tính năng quản lý đại lý.
 Xây dựng tính năng quản lý chiến dịch.
 Xây dựng tính năng quản lý nhà phân phối.

-

Kết quả:
 Tính năng đăng nhập, đăng ký

Đỗ Cơng Bá
Lê Hồng Phú - 19520216


11

 Tính năng quản lý nhà phân phối

Đỗ Cơng Bá
Lê Hoàng Phú - 19520216

12

 Tính năng quản lý đại lý

Đỗ Cơng Bá
Lê Hồng Phú - 19520216


13

Đỗ Cơng Bá
Lê Hồng Phú - 19520216