Báo cáo thực tập lập trình front end với reactjs

1

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 FRONT END VỚI REACTJS

Cơng ty thực tập

: TISOHA – Software Solutions

Người phụ trách

: Đỗ Công Bá

Thực tập sinh

: Dương Hồi Nam

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

Đỗ Cơng Bá

Dương Hồi Nam


2

LỜI MỞ ĐẦU

Ngày nay, phát triển website là một bộ phận không thể thiếu của ngành công nghiệp phần
mềm ở trong đa số lĩnh vực. Với tốc độ phát triển vô cùng mạnh mẽ, ngành web đã và đang là
nhân tố kích thích sự phát triển của cơng nghệ thơng tin thế giới, cả về phần cứng và phần mềm.
Cùng với xu thế phát triển của thế giới, Việt Nam cũng không phải ngoại lệ. Ngành công
nghiệp web non trẻ Việt Nam đã và đang phát triển mạnh mẽ, để hịa nhập với những cơng ty
hàng đầu về web trên thế giới. Bên cạnh những công ty lớn trong nước, những công ty outsource
mới thành lập cũng gia nhập vào thị trường Việt Nam, góp phần rất lớn vào sự phát triển tích cực
của ngành web Việt.
Ngành web được sinh ra là do nhu cầu mua bán, quản lý, giới thiệu, giải trí của giới trẻ
bằng những thiết bị cơng nghệ mới nhất trên các nền tảng khác nhau ngày càng tăng. Và cũng
chính giới trẻ sẽ là nguồn nhân lực quan trọng cho việc phát triển của ngành web sau này. Vì lý
do này, em quyết định chọn lập trình web làm định hướng cho việc học tập của mình.
Sau ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế, cũng như
muốn được tham gia làm web trong một môi trường chuyên nghiệp, em có dự định là sẽ thực tập
trong hè và cả thời gian học tập tới trên trường. Vì vậy, em quyết định chọn TISOHA - một môi
trường lý tưởng, hiện đại, chuyên nghiệp, tạo điều kiện cho sinh viên - là nơi sẽ giúp em thực hiện
được dự định này.

Đỗ Cơng Bá

Dương Hồi Nam


3

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty TISOHA đã tạo điều kiện cho em có cơ hội được thực
tập tại công ty.

Trong khoảng thời thực tập, nhờ sự chỉ dẫn nhiệt tình của nhóm trainer, nhóm thực tập
chúng em đã tiếp thu được những kiến thức quan trọng để có thể làm được các giao diện website
từ các trang quản lý lớn nhỏ tới các trang theo thiết kế của khách hàng, tiếp xúc với các source
code lớn, làm việc trong môi trường chuyên nghiệp. 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 chúng em hoàn thành đợt thực tập này.
Đặc biệt cảm ơn anh Đỗ Cơng Bá đã tạo dựng văn hóa cơng ty lành mạnh, chuyên nghiệp,
năng động thúc đẩy chúng em trong quá trình thực tập, hướng dẫn, giúp đỡ cho chúng em tận tình
cả những khó khăn trong cơng việc, đến những khó khăn việc làm quen với mơi trường mới, cũng
như trong suốt thời gian qua; Cảm ơn bạn Võ Hồng Đức Khoa đã training React, Angular, hỗ
trợ chúng mình rất nhiều về các vấn đề kỹ thuật, các framework trong q trình làm web; Cảm
ơn bạn Lê Hồng Phú và Đinh Huỳnh Thái Bình đã giúp đỡ mình rất nhiều về các vấn đề kỹ thuật
liên quan đến framework trong quá trình làm web; cảm ơn tập thể các anh chị và các bạn ở công
ty TISOHA đã giúp đỡ tận tình mỗi khi mình gặp khó khăn về kĩ thuật, trao đổi với team backend,
team mobile, hướng dẫn mình sử dụng và học hỏi những cơng nghệ mới, cùng nhau tạo nên môi
trường làm việc vui vẻ cùng nhau phát triển và làm việc hiệu quả. Cảm ơn mọi người.
Cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điều
kiện em làm bài báo cáo này.
Dương Hoài Nam
Tp.HCM, ngày 20 tháng 12 năm 2022

Đỗ Cơng Bá

Dương Hồi Nam


4

NHẬN XÉT CỦA KHOA

...................................................................................................................................................

...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................

Đỗ Cơng Bá

Dương Hồi Nam


5

Mục lục
Chương 1: Giới thiêu công ty thực tập ............................................................................................... 6
1.

Giới thiệu công ty TISOHA ...................................................................................................... 6

2.

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

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

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

2.

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

Các công cụ làm việc và ơn lại cơ bản ................................................................................ 9

2.2.

Tìm hiểu ngơn ngữ TypeScript ......................................................................................... 10

2.3.

Lập trình landing page với ReactJs và NextJs vào các dự án thực tế ............................... 11

2.4.

Các task khác và hoạt động khác trên công ty .................................................................. 12

3.

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

4.

Lịch làm việc ........................................................................................................................... 14
4.1.

Dự án Mark web .............................................................................................................. 14

4.2.

Dự án Mark admin .......................................................................................................... 15

4.3.

Dự án Hiven ..................................................................................................................... 20

4.4.

Dự án Selex ....................................................................................................................... 22

4.5.

Dự án Vict ........................................................................................................................ 23

Chương 3: Chi tiết về các project...................................................................................................... 25
1.

Mark web ................................................................................................................................ 25

2.

Mark admin ............................................................................................................................ 26

3.

Hiven ....................................................................................................................................... 28

4.

Selex ......................................................................................................................................... 30

5.

Vict .......................................................................................................................................... 32

TÀI LIỆU THAM KHẢO ................................................................................................................. 34
TỔNG KẾT........................................................................................................................................ 35

Đỗ Cơng Bá

Dương Hồi Nam


6

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

1. Giới thiệu công ty TISOHA

Công ty TNHH giải pháp phần mềm TISOHA được thành lập trong những ngày
cuối năm 2020 đến nay đã hoạt động được khoảng 2 năm, là công ty outsource chun

Đỗ Cơng Bá

Dương Hồi Nam


7

tư vấn các giải pháp phần mềm, cung cấp dịch vụ thiết kế, xây dựng và phát triển phần
mềm trên các nền tảng khác nhau như: Web, ios, android
Tuy chỉ mới thành lập cách đây không lâu nhưng công ty đã có được những sản
phẩm, các đối tác lâu dài cũng như các thành tựu đáng kể trong năm vừa qua. Văn
phòng làm việc hiện tại là ở chung cư 4S Riverside Linh Đông với khoảng 17 nhân
viên.
Sản phẩm của công ty: Hana, Mark(web, admin, app, member), Hiven, Sichan,
Quay số trúng thưởng, Selex, Foster, …
Đối tác của công ty: Mark, ISB, các team thiết kế ở Hà Nội, Huế cho các dự án
landingpage và một số khách hàng khác, …

2. Sản phẩm của công ty
TISOHA đã và đang tư vấn, thiết kế nhiều phần mềm cho các mục đích và lĩnh vực
khác nhau chủ yếu trên web và điện thoại di động. Công ty mang lại cho khách hàng
dịch vụ tư vấn, phát triển, bảo trì một cách nhanh chóng, tồn diện đảm bảo sự hài
lịng của khách hàng về cả chất lượng lẫn chi phí.
Nhờ thể hiện tốt trong việc tương tác với khách hàng cũng như thành quả sản phẩm
mang lại mà cơng ty đã có những mối quan hệ hợp tác lâu dài cùng những dự án để
phát triển ổn định có thể kể đến như dự án Mark với 4 app liên quan, ISB, team thiết
kế ở Huế và Hà Nội chuyên cho các dự án landing page giới thiệu sản phẩm hay quản

bá, ...

Đỗ Công Bá

Dương Hoài Nam


8

Đỗ Cơng Bá

Dương Hồi Nam


9

Chương 2: Nội dung thực tập
Có các leader giàu kinh nghiệm kinh làm qua các dự án lớn công ty đã dẫn dắt các bạn
thực tập sinh làm quen và góp xây dựng các dự án thực tế cho cơng ty sau này góp phần giúp các
bạn nâng cao năng lực của bản thân, tiếp xúc thực tế công việc, nắm được vị trí, vai trị, các việc
cần làm của bản thân, cấu trúc phần mềm và các vấn đề quản lý, kĩ thuật cũng như các vấn đề
khác trong dự án.
Đợt thực tập với chủ đề “Lập trình front end với reactjs” nhằm mục đích giúp sinh viên
thực tập được đào tạo tồn diện về lập trình giao diện web với reactjs framework, đồ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 web chuyên nghiệp
tiếp xúc với dự án, khách hàng thực tế và các task chính trong dự án. Do diễn ra song song với
thời gian học trên trường nên các bạn đều thực tập ở vị trí partime 3 ngày/tuần. Cơng ty tạo điều
kiện để các bạn đăng kí làm việc linh hoạt không ảnh hưởng tới việc học trên trường.

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, làm việc của công ty
Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và phát triên
(như đã nhắc đến ở trê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, logwork, nhận task
trong công việc…
Kết quả: Hiểu thêm về công ty TISOHA, quá 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 phần mềm quản lý công việc như jira, readmine. Làm việc có kế
hoạch, có kỷ luật, có trách nhiệm hơn.

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

Các cơng cụ làm việc và ôn lại cơ bản
Thời gian: 6 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, supervisor đã 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ố hoạt động có thể kế đến 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 quản lý tiến độ công việc, tạo, phân chia task
- Redmine – Công cụ quản lý, theo dõi các vấn đề của dự án, thời gian làm việc
của nhân viên.

Đỗ Cơng Bá

Dương Hồi Nam

10

Sử dụng các extention giúp gia tăng tốc độ hỗ trợ cho việc lập trình front end
tiện lợi hơn trên vscode
- Học sử dụng sass và compile sass sang css khi sử dụng framework giúp cho việc
viết css có cấu trúc rõ ràng, lành mạch, dễ bảo trì phát triển và ngắn gọn hơn css
thông thường
- Học về regex ứng dụng trong validation
- Nvm và các phiên bản của node để tránh các lỗi phiên bản khi phát triển ứng
dụng
- Responsive viewer, cách chia break point, chia file để phát triển giao diện trên
các thiết bị có độ phân giải khác nhau tối ưu nhất
- Các công cụ kiểm tra api như postman, swagger để dễ dàng kiểm tra các api từ
backend trước khi tích hợp vào frontend
- Thực hiện isb test về html, css và vanilla javascript, làm các demo theo yêu cầu
của supervisor để nắm chắc căng bản.
- Ông tập các kiến thức liên quan tới front end như cách tạo các component cho
việc tái sự dụng hiệu quả, hạn chế tối đa lặp code nhằm giảm độ dài mã nguồn,
giảm tải các file ảnh, video bằng imagesmaller và định dạng webp để tăng tốc
độ tải trang
Thực hiện: Thực hành sử dụng các phần mềm đã nêu trên và hoàn thành các demo theo
yêu cầu của supervisor và thực hiện bài test.
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, nắm chắc căn bản về lập trình web.
Tìm hiểu ngơn ngữ TypeScript
Thời gian: 14 ngày
Nội dung: Được training về các kỹ thuật Javascript nâng cao, các cú pháp và điểm khác
biệt của typescript, những kiến thức quan trọng cho việc tối ưu trên lập trình front end
đối với các source code lớn.

- Javascript là ngôn ngữ kịch bản giúp tạo các trang web tương tác. Chạy trong trình
duyệt web của người dùng mà khơng cần bất kì tài nguyên nào tạo thành máy chủ
web.
- Đọc tài liệu typescript – bản nâng cao của javascript. Typescript có yêu cầu cao về
trật tự rõ ràng, bổ sung những điểm yếu của javascript như các lớp hướng đối tượng
và static structural typing (bổ sung khái niệm về kiểu và interface để mô tả dữ liệu,
phù hợp cho các dự án lớn)
- Sử dụng typescript trong react và angular do mentor cung cấp làm bài test đánh giá
lại kiến thức.
-

2.2.

Đỗ Công Bá

Dương Hoài Nam


11

Cách tạo bố cục hợp lý, thiết kế theo mẫu giao diện trên figma, làm một landing
page demo và một phần mềm todo list đơn giản.
- Học các khái niệm về Angular ở tài liệu 100 days angular
Thực hiện:
- Tham gia đầy đủ các buổi training của công ty.
- Làm các bài thực hành, kiểm tra về kiến thức đã học.
-

Kết quả:
Nâng cao kỹ năng lập trình với code thuần và typescript trong angular, reactjs,

nextjs framework
- Có được những kiến thức quan trọng cho việc lập trình web sau này.
- Ngồi ra cịn được biết thêm một số quy tắc trong việc viết code sao cho đúng
chuẩn, dễ đọc, dễ hiểu và xử lý lỗi liên quan tới node version.
Link các project:
- Todo: duonghoainam / MyTodo · GitLab
- Tisoha landing page: Do Cong Ba / Tisoha_Landing_Page · GitLab
- Sample Landingpage: duonghoainam / sampleLandingPage · GitLab
Lập trình landing page với ReactJs và NextJs vào các dự án thực tế
-

2.3.

Thời gian: 60 ngày
Nội dung: Các kiến thức cơ bản về ReactJs và NextJs để có thể làm ra một website theo
thiết kế figma của khách hàng, tối ưu SEO và xây dựng animation bắt mắt theo các
web mẫu như và
-

Khái niệm cơ bản về Angular.
Angular là một framework được xây dựng bằng typescript mã nguồn mở do Google
cung cấp. Do được viết bằng Typescript nên Angular có cú pháp rõ ràng hơn, đảm
bảo chất lượng code phù hợp cho phát triển các dự án lớn. Nhưng bên cạnh đó việc
tiếp cận với framework này sẽ khó khăn hơn Reactjs một phần là do có khá nhiều
khái niệm mới khi bắt đầu(Typescript, Structure directive, component interaction,
Dependentcy injection, RxJs,…)

-

Khái niệm cơ bản về ReactJs.

Reactjs là một thư viện javascript và được xây dựng bằng JSX do Facebook cung
cấp. Đơn giản trong viện tiếp cận, JSX cho phép pha trộn giữa code html và
javascript, các website được viết bằng reactjs cũng nổi bật với hiệu suất cao, bằng

Đỗ Cơng Bá

Dương Hồi Nam


12

việc tạo ra các DOM ảo, tùy vào thuật toán mà linh động trong việc cập nhật thay
đổi.
-

Khái niệm cơ bản về NextJs.
Năm được các khái niệm cơ bản về NextJs, là một bản nâng cấp của ReactJs (là một
open source React front-end framework được bổ sung tính năng Server-side
rendering (SSR) và Static Site Generation (SSG)), để lập trình giao diện cho website
mạnh mẽ trong việc tối ưu SEO cho trang web
Ngồi ra, trainer cịn cung cấp cho thực tập sinh những khái niệm cơ bản trong việc
xây dựng và sử dụng animation hiệu quả, giảm tải cho trang web giúp tăng tốc độ
load, tối ưu SEO và deploy.

-

Tham gia vào dự án thực tế Mark-web, Mark admin, Hiven, Selex, Vict
Sau 1 tháng trainning và làm các bài test, demo nho nhỏ thì êm chính thức được
thực hiện task của công ty với việc xây dựng landing page cho project Mark-web
và Hiven cùng sự hướng dẫn, review code của leader

Xây dựng admin page bằng các source template giúp tối ưu tốc độ phát triển bằng
Saleor, VueXY và source tự dựng trong project: Mark admin, Hiven và Vict

Thực hiện:
-

Tham gia đầy đủ các buổi trainning, họp.
Tham gia trao đổi, chỉnh sửa theo feedback của khách hàng
Cùng leader xây dựng gia diện theo thiết kế figma sát nhất có thể
Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.

Kết quả:
2.4.

Biết cách xây dựng thiết kế theo yêu cầu khách hàng từ figma giúp tối ưu thời gian
thực hiện.
Có khả năng làm việc với các source lớn và ui template phức tạp như saleor, vueXY
và project của công ty
Cải thiện tốc độ và hiệu suất làm việc, estimate thời gian chính xác hơn giúp công
ty đưa ra kế hoạch phù hợp.
Nâng cao khả năng xây dựng giao diện web với framework

Các task khác và hoạt động khác trên cơng ty

Đỗ Cơng Bá

Dương Hồi Nam


13

Nội dung: Phụ một vài task nhỏ bên mobile, tìm thêm nhân sự front end và tổ chức
team building – cắm trại cho công ty
-

Thực hiện firebase dynamic link cho mobile Flutter app (Mark App)
Deeplink là công nghệ được sử dụng trong ứng dụng di động. Khi người dùng click
vào một đường link thì deeplink sẽ mở ứng dụng và đưa người dùng đến thẳng trang
họ cần.
Firebase Dynamic Link là một liên kết hoạt động theo cách bạn muốn trên nhiều
nên tảng di động dành cho ứng dụng dù bạn đã cài ứng dụng đó hay chưa. Dynamic
Link do Fire base cung cấp cho phép bạn cài đặc các cấu hình mong muốn, tìm hiểu
tài liệu và thực hiện theo u cầu của mình

-

Tìm thêm nhân sự front end
Do cơng ty chỉ mới thành lập không lâu nên đội ngũ nhân sự những ngày mới tham
gia vẫn chưa ổn định và đa phần các bạn đều là sinh viên chỉ làm việc parttime nên
cơng ty thường có nhu cầu tuyển thêm nhân sự ở các vị trí frontend, backend và
mobile. Cho tới hiện tại vẫn đang có 1 bạn front end (Lê Hoàng Phú) và 1 bạn
backend (Trương Gia Thạch) đang làm việc tại cơng ty, cịn lại 2 bạn mobile được
giới thiệu nhưng chưa đáp ứng được yêu cầu công việc.

-

Tổ chức team building đầu tiên cho công ty
Vào trước lễ quốc khánh, em đã lên kế hoạch tổ chức một chuyến cắm trại 1 ngày
1 đêm tại hồ Dầu Tiến cho công ty bao gồm các hoạt động như: thuê lều trại và các
vật dụng liên quan cho việc cắm trại, chuẩn bị thức ăn, kế hoạch chuyến đi (kinh

phí, thời gian, địa điểm, hình thức di chuyển, kế hoạch sinh hoạt, vui chơi) với 13
thành viên

Thực hiện:
-

Nhiệt tình tìm hiểu, tham gia vào các cơng việc khơng thuộc chun mơn khi cơng
ty cần.
Tích cực trong các hoạt động của công ty, gắn kết mọi người tạo nên một mơi trường
thân thiện, tích cực, hỗ trợ lẫn nhau trong cơng việc và cuộc sống.

Kết quả:
-

Đỗ Cơng Bá

Có khả năng tham gia nhanh, linh hoạt vào các task khác khi thiếu nhân lực

Dương Hoài Nam


14

-

Có khả năng tổ chức và lên kế hoạch cho các hoạt động của công ty
Tạo được mối quan hệ tốt với các bạn cùng lĩnh vực, giúp nhau mở rộng cơ hội việc
làm

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à NextJs. Trong tháng thứ hai trở đi, trainer đã hướng dẫn thực tập sinh
áp dụng những kiến thức đã học để thực hiện 5 project thực tế của công ty và làm việc trực
tiếp với khách hàng.
Chi tiết đồ án sẽ được nói ở phần sau.
Do một số phần thuộc về hợp đồng bảo mật của công ty liên quan tới các project nên em
khơng được phép trình bày q chi tiết trong bài báo cáo này
4. Lịch làm việc
4.1.

Dự án Mark web

Đường dẫn sản phẩm: Mark Web (tisoha.com)
Đường dẫn gitlab: TISOHA / Landing Page · GitLab

Thời
gian

Công việc

Người hướng dẫn

Đọc source do Khoa
khởi tạo, nắm cấu
trúc các trang, quy
ước đặt tên, file,
biến, class, …
- Build main and
bussiness page
- Fix leader feedback

- Signup
success
page
- Login page
- Handle responsive

Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình

-

04-05/07

06-08/07

Đỗ Cơng Bá

Mức
độ
hồn
thành

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

Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình

Dương Hồi Nam


15

-

11-15/07
-

18-22/07
08/08

-

19-20/08
4.2.

Learn
hookform,
validation with yup
Learn
to
use
material ui library
Membership plan
page
Membership
upgrade checkout
page

Membership plan
upgrade
success
page
Fix
feedback,
validation, conflic
Learn
to
use
material ui library,
recoil
Fix form issue
Connect api form
admin page
Fix bug
Update regex
Update toastify for
notification
Fix some bug about
login button
Remove
default
icon from input
password
field,
change regex to
customer feedback
Add dial code for
telephone number

box
Change some field
Add static page

Võ Hoàng Đức
Khoa, Đinh Huỳnh
Thái Bình

Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình
Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình

Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình

Dự án Mark admin

Đường dẫn sản phẩm: Mark Admin (tisoha.com)
Đường dẫn gitlab: TISOHA / Mark Admin Panel · GitLab

Đỗ Cơng Bá

Dương Hồi Nam


16

Thời
gian

Công việc

Đọc mô tả yêu cầu
của hệ thống
25/07
- Đọc source admin
đã dựng trước
- Tạo bảng promotion
Promotion feature:
- Add promotion
- Load data
- Adjust sort link
26-29/07
- Apply filter
- Add date picker
- Call api login
- Login
Project management:
- Init table
23-25/08
- Load data
- Load bussiness
- Handle
delete
project
- Fix some bug

29-31/08 - Update form add
project
- Load data to all field
of add-form
- Fix view and create
05-06//09
project
- Feedback api bug
- Fix bug
- Video preview
- Edit upload image
- Time display error
fixed
08-09/09
- Tag state
- Fix auto update
after submit
- Fix validate add and
edit form
-

Đỗ Cơng Bá

Người hướng dẫn

Mức
độ
hồn
thành

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

Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình
Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình

Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình
Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình

Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình
Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình

Dương Hoài Nam


17

12-16/08

18/08

Feature:
- Sort
- Filter
- Search
Fix:
- Change
filter
category_id
- Change radio button
- Input media
- Date
component
hookform
- Posted_date bug
- Update
autocompleteField
- Time format
- Update image
- Limited tag
- Content icon
- Change input media
to
hookform
component
- Project
content
validation

- Add
and
edit
autocompletefield
- Update ui project
detail
- Fix some bug
- Read Binh’s code
and
project
requirement
-

19-20/08

-

Đỗ Cơng Bá

Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình

Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình

Change fixed to env Võ Hồng Đức
link
Khoa, Đinh Huỳnh

Handle
delete Thái Bình
access-director and
designer,
filter
deleted
accessdirector
and
designer
Fix some ui

Dương Hoài Nam


18

-

23-25/08

29-31/08

-

05-07/09
-

12-14/09

20/09

-

26/09

27/09

29-30/09

03-04/10

06-09/10

Đỗ Công Bá

Remove delete and
filter project
Load project list
Add project form
Edit project form
View detail project
Load project list
Add project form
Edit project form
View detail project
Handle
delete
function
Fix bug
Change

from
useState
to
hookform
Fix some bugs
Term and service
page
Privacy page
Static page
Designer
profile
information

Võ Hoàng Đức
Khoa, Đinh Huỳnh
Thái Bình
Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình
Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình
Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình

Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình

Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình
Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình
Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình
Võ Hồng Đức
Khoa, Đinh Huỳnh
Thái Bình
Youtube management
Võ Hồng Đức
- Adjust list and Khoa, Đinh Huỳnh
detail
Thái Bình
- Add tutorial form
Deeplink
feature
with
firebase
(dynamic link)
Read requirement
and set up youtube
management
Read requirement
and set up youtube
management
Deeplink feature

Dương Hoài Nam


19

15/10

12/11

Đỗ Cơng Bá

Youtube management
Võ Hồng Đức
- Update api on croll Khoa, Đinh Huỳnh
and on type with Thái Bình
debouch
- Fix
special
character checkbox
name
Fix:
Võ Hồng Đức
Youtube management
Khoa, Đinh Huỳnh
- Title youtube index, Thái Bình
special category
- Wrong line

Dương Hoài Nam

20

4.3.

Dự án Hiven

Đường dẫn sản phẩm: Unlocking Potential in South-East Asia (hiven.com.sg)
Đường dẫn gitlab: TISOHA / Hiven Landing Page · GitLab

Thời
gian

29/07
01/08
02/08
03/08
04/08

Công việc
-

08/08
-

09-12/08

-

-

Đỗ Công Bá

Read NextJs docs
Read Khoa source
Watch figma design
Footer
and
responsive footer
About us page

Người hướng dẫn

Mức
độ
hoàn
thành

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

Võ Hoàng Đức
Khoa

Võ Hoàng
Khoa
Võ Hoàng
Khoa
News page

Võ Hoàng
Khoa
Fix responsive and Võ Hoàng
feedback
Khoa
Update tablet and Võ Hoàng
mobile responsive Khoa
about us and news
page
Fix Morelink and
hexagon component
Finish about us page Võ Hoàng
Finish contact us Khoa
page
Finish news page
Check responsive
Header responsive
Home page swiper
Pagination
dot
swiper
businness
area
Hexagon issue
Admin form update
content

Đức
Đức
Đức

Đức
Đức

Đức

Dương Hoài Nam


21

-

-

-

-

14-17/08

-

Đỗ Công Bá

Ui admin for about
us and contact us
Fix
doulicate
CompanyInfoeEdit
data fields

Fix submit
Responsive admin
page:
home,
contact, about
Call api contact us
not
contain
sendmail
Fix contact us field
Api for about us
banner
Api for business
area
Fix about us format
Update responsive
Yup require contact
us
Fix feedback 1 4 6 7
8
Load
data
to
business
area,
company-info,
contact-us-info, add
query
params
hivenSlice

Upload multi files
Api for companyinfo
Btn scroll to top
Fix navigate
Fix footer, font
Võ Hoàng Đức
Fix
about
us Khoa
responsive
Fix feedback not
change 03 image
Replace icon logo
Fix
responsive:
Home, about us,

Dương Hoài Nam


22

22/08

4.4.

footer, about us
title, mobile ui
Apply strapi
Clean code

Fix customer update Võ Hoàng Đức
requirement,
Khoa
merger code, fix all
feedback

Dự án Selex

Đường dẫn sản phẩm: title | Selex Motors - Hệ sinh thái Xe máy điện thông minh (tisoha.com)
Đường dẫn gitlab: Võ Hoàng Đức Khoa / selex-nextjs · GitLab

Thời
gian

Cơng việc
-

13/11
16/11
21/11
23-24/11

Đỗ Cơng Bá

-

Người hướng dẫn

Mức
độ

hồn
thành

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

Change pin service Võ Hoàng Đức
page desktop ui
Khoa,
Nguyễn
Khánh Toàn
Change pin service Võ Hoàng Đức
page full responsive Khoa,
Nguyễn
Khánh Toàn
About us page Võ Hoàng Đức
desktop ui
Khoa,
Nguyễn
Khánh Toàn
About us page full Võ Hoàng Đức
responsive
Khoa,
Nguyễn
Update carousel and Khánh Toàn
font feedback

Dương Hoài Nam

23

4.5.

Dự án Vict

Đường dẫn sản phẩm: Unlocking Potential in South-East Asia (hiven.com.sg)
Đường dẫn gitlab: TISOHA / Hiven Landing Page · GitLab

Thời
gian

Công việc
-

10-11/10

-

17-18/10

20/10

24-25/10

27/10

-

-

-

31/10

01/11

Đỗ Công Bá

Người hướng dẫn

Read requirement
Try
running
database
Feedback
to
customer
Create table on
vueXY template
Read feedback
Create
mockdata
with mockaro
Create table
Try to connect api
Feature:
sort,
search,
filter,

pagination
Login
Use mark api
Resolve
unauthorize
problem
Login
Test api
User management
User management
Profile setting

Container
management
mockdata
- Container
management

Mức
độ
hoàn
thành

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

Võ Hoàng Đức
Khoa, Lê Hoàng
Phú

Võ Hoàng Đức
Khoa, Lê Hoàng
Phú

Võ Hoàng Đức
Khoa, Lê Hoàng
Phú

Võ Hoàng Đức
Khoa, Lê Hoàng
Phú
Võ Hoàng Đức
Khoa, Lê Hoàng
Phú
Võ Hoàng Đức
with Khoa, Lê Hoàng
Phú
Võ Hoàng Đức
Khoa, Lê Hoàng
Phú

Dương Hoài Nam


24

07/11

Đỗ Cơng Bá

Fix some user Võ Hồng Đức
management issue
Khoa, Lê Hoàng
Phú

Dương Hoài Nam


25

Chương 3: Chi tiết về các project

1. Mark web
1.1 Giới thiệu
1.1.1 Sơ lược về dự án
Thuộc chuỗi dự án Mark, The Mark Platform là nền tảng đánh giá và khám phá dành
cho các nhà thiết kế nội thất ở Singapore.
Mark web là một trang giới thiệu, cho phép người dùng đăng kí bussiness, tạo tài
khoản, truy cập các app liên quan khác như mark admin, mark member, mark app.

1.1.2 Danh sách màn hình

1.1.3 Cơng việc đảm nhận
Cùng Đinh Huỳnh Thái Bình hồn thành giao diện Mark-web, kết nối các api và thực hiện
hồn chỉnh các tính năng u cầu trong requirement của khách hàng

1.2 Thực hiện
Đỗ Cơng Bá

Dương Hồi Nam