Báo cáo thực tập ứng dụng DASHBOARD BUILDER

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

ỨNG DỤNG DASHBOARD BUILDER

Công ty thực tập:

Orange Logic

Người phụ trách:

Nguyễn Thanh Cao

Thực tập sinh:

Nguyễn Huỳnh Lợi

TP. Hồ Chí Minh, tháng 01 năm 2021

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi


2

LỜI MỞ ĐẦU

Cortex là một công cụ DAM (quản lý tài sản kỹ thuật số), một trong những sản phẩm tốt
nhất trên thị trường hiện nay. Là một ứng dụng SaaS cao cấp của Orange Logic, CORTEX |
DAM, được tạo ra để hỗ trợ các cơng ty trên tồn thế giới mở rộng quy mô hoạt động kỹ thuật
số của họ. Khách hàng của Orange Logic đến từ nhiều ngành công nghiệp và bao gồm cả 100
công ty trong danh sách Fortune.
Ngày nay, ngành công nghiệp web là một bộ phận không thể thiếu của ngành công
nghiệp phần mềm. 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.
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. Bên
cạnh đó, em chọn Orange Logic làm nơi học tập và rèn luyện, bởi vì Orange Logic là một cơng
ty có tính thử thách cơng việc cao - một môi trường lý tưởng, hiện đại, chuyên nghiệp - là nơi
sẽ giúp em thực hiện những dự định của bản thân.

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi


3

LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty Orange Logic Việt Nam đã 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 anh mentor, 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 một ứng
dụng hoàn thiện và chỉnh chu. Chân thành cảm ơn anh mentor đã bỏ ra nhiều thời gian, cơng
sức để hướng dẫn chúng em hồn thành đợt thực tập này.
Đặc biệt cảm ơn anh Nguyễn Thanh Cao, đã training, hướng dẫn, thậm chí giúp đỡ
debug cho chúng em tận tình. Từ 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 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.
Nguyễn Huỳnh Lợi
Hồ Chí Minh, ngày 14 tháng 1 năm 2021

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi


4

NHẬN XÉT CỦA KHOA

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

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

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi


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 Orange Logic Việt Nam ................................................................................................. 6

2.

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

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

Giới thiệu về công ty và setup máy .............................................................................................................. 7
Nghiên cứu kỹ thuật và yêu cầu dự án ......................................................................................................... 7
2.1.
2.2.
2.3.

Các cơng cụ làm việc .......................................................................................................................................... 7
Tìm hiểu Reactjs cơ bản và nâng cao ................................................................................................................. 8
Sản phẩm CORTEX, yêu cầu dự án Dashboard Builder .................................................................................... 9

3.

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

4.

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

Chương 3: Chi tiết về project ................................................................................................................... 12
1.

Giới thiệu về Ứng dụng dashboard builder ................................................................................................ 12

2.

Yêu cầu ....................................................................................................................................................... 12

3.

Thiết kế ....................................................................................................................................................... 13

4.

Kế hoạch & kết quả .................................................................................................................................... 15
4.1.
4.2.

4.3.

Kế hoạch ........................................................................................................................................................... 15
Thực hiện .......................................................................................................................................................... 15
Kết quả.............................................................................................................................................................. 16

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi


6

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

1. Giới thiệu công ty Orange Logic Việt Nam
Cortex là một công cụ DAM (quản lý tài sản kỹ thuật số), một trong những sản phẩm tốt
nhất trên thị trường hiện nay. Là một ứng dụng SaaS cao cấp của Orange Logic,
CORTEX | DAM, được tạo ra để hỗ trợ các công ty trên tồn thế giới mở rộng quy mơ
hoạt động kỹ thuật số của họ. Khách hàng của Orange Logic đến từ nhiều ngành công
nghiệp và bao gồm cả 100 công ty trong danh sách Fortune.

2. Sản phẩm của công ty
Sản phẩm của công ty:
 Cortex là một ứng dụng SaaS cao cấp của Orange Logic, được tạo ra để hỗ trợ các cơng
ty trên tồn thế giới mở rộng quy mô hoạt động kỹ thuật số của họ. Khách hàng của
Orange Logic đến từ nhiều ngành công nghiệp và bao gồm cả 100 công ty trong danh
sách Fortune.

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi


7

Chương 2: Nội dung thực tập
1. Giới thiệu về công ty và setup máy
Thời gian: 2 ngày
Nội dung:
Được các anh chị HR và nhân viên giới thiệu về công ty, q trình thành lập và
phát,

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. Làm quen, giao lưu với các anh chị nhân viên, theo từng bộ phận và
theo team. Các anh chị giới thiệu về các sản phẩm và những thành tựu cua công ty đã
đạt được.
Các anh kỹ thuật hướng dẫn và cấp thiết bị, sử dụng các nguồn tài ngun 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, các công
cụ làm việc. Các anh chị nhân viên chia sẻ kinh nghiệm làm việc hiệu quả đồng thời
hướng dẫn cách về tác phong, các bước làm việc của team và thơng tin liên hệ khi q
trình làm việc gặp vấn đề hoặc gặp sự cố bất ngờ. Được cấp tài khoản tham gia vào các
nhóm tương tác, thảo luận công việc.
Kết quả: Hiểu thêm công ty OL Vietnam về 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. Nghiên cứu kỹ thuật và yêu cầu dự án
Thời gian: 2 tuần
2.1.

Các cơng cụ làm việc
Nội dung:
-

Tìm hiểu về các cơng cụ sẽ được sử dụng trong q trình làm việc.

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi


8

-

Trong thời gian này, mentor đã hướng dẫn thực tập sinh tìm hiểu các cơng cụ sẽ
giúp cho q trình làm việc với team. Một số tool quản lý source code như:
Gitlab. Một số công cụ giúp cộng tác như Google Chats,…

-

Tìm hiểu các nguyên tắc cơ bản, format code trong quá trình làm viêc và summit
code.

2.2.

IDE dùng triển khai code và review là Visual Studio Code.

Tìm hiểu Reactjs cơ bản và nâng cao

Nội dung:
Tự tìm hiểu, nghiên cứu Reactjs, đọc tài liệu, code và test thử các API của nó. Hiểu
được cách hoạt động và ứng dụng vào project.
Các ưu điểm của NextJs
-

Xây dựng ứng dụng web, ngay trên browser, không cần người dùng tải về.

-

Tự động update, scale.

-

Tương thích trên nhiều hệ điều hành khác nhau.

-

Là thư viện có lượng người dung lớn nhất hiện nay trên thị trường.

So sánh giữa Reactjs và Jquery.
Tính năng

Reactjs

Jquery

Backby

Facebook

Community

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi

9

Tương tác trên

DOM ảo

DOM thật

Độ nổi tiếng

Nổi tiếng nhất hiện giờ

Từng nổi tiếng

Độ khó

Medium

Easy

SPA

YES

NO

Làm được việc

Có

Có thể

Kết quả:
-

Hiểu rõ và nắm được các kiển trúc và thành phần của Reactjs.

- Có cái nhìn tổng quan về các tính năng nổi bật của Reactjs.
- Sử dụng, thực thi được các tính năng của Reactjs, hiểu rõ về cách để xây dựng sản
phẩm cần phát triển
2.3.

Sản phẩm CORTEX, yêu cầu dự án Dashboard Builder
Nội dung:
-

Hiểu về ứng dụng CORTEX và sự liên quản của nó đến ứng dụng Dashboard
Builder.

-

Nghiên cứu các API hiện tại CORTEX đang cung cấp, định nghĩa các API còn
thiếu để xây dựng được ứng dụng dashboard builder.

-

Tổng quan công nghệ sử dụng:
o Front-end: Typescript, ReactJs, Material-UI
o Back-end: Firestore.

Kết quả :
-

Ôn lại và củng cố các khái niệm cơ bản và nâng cao của ReactJs

-

Hiểu được project CORTEX hiện tại của cơng ty

-

Định nghĩa được các API cịn thiếu cần cung cấp

3. Thực hiện project
Sau 2 tuần đầu nghiên cứu, thực tập sinh đã nắm được những kiến thực cơ bản và nâng
cao về ReactJs, hiểu thêm về ứng dụng nội bộ CORTEX của công ty.

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi


10

Sprint 1 bắt đầu từ tuần thứ 3, cứ thế mỗi sprint kéo dài 3 tuần cho đến hết kì thực tập.
Nhóm thực tập sinh đã hồn thiện project theo đúng yêu cầu để ra của công ty, được
công ty dành cho những lời khen có cánh.

4. Lịch làm việc

Mức
Sprint

Cơng việc

độ

Đầu ra

hồn
thành

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

- Tìm hiểu, nghiên cứu, - Một bài thuyết trình 100%
làm rõ yêu cầu

về

cách

tiếp

cận

- Nghiên cứu hướng tiếp project và ứng dụng
0

cận tốt nhất cho project

POC: ngôn ngữ được

- Xây dựng một ứng dụng chọn, kiến trúc dự
POC để chứng minh cho án,…
hướng tiếp cận

- Chia sẻ suy nghĩ cá
nhân và góp ý

- Triển khai ứng dụng

- Một buổi demo cuối 100%

- Trao đổi với official staff sprint về những gì đã
tại cơng ty, định nghĩa và được làm
xây dựng các API còn 1

thiếu

Peer

review

về

những task đã được

- Trao đổi với user về độ hoàn thành trước buổi

hài lọng của ứng dụng

demo
- Chia sẻ suy nghĩ cá
nhân và góp ý

- Tiếp tục triển khai, sửa - Một buổi demo cuối 100%
2

chữa ứng dụng

sprint về những gì đã

- Xây dựng tiếp những tính được làm
Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi


11

năng còn thiếu

-

Peer

review

về

- Trao đổi với người dung những task đã được
về những tính năng, khó hồn thành trước buổi
khan gặp phải

demo
- Chia sẻ suy nghĩ cá
nhân và góp ý

- Fix bug, xem xét những - Bản demo cuối cùng
tính năng nào

100%

cần hồn - Chia sẻ về những

thành, những tính năng điều đã học được
3

nào có thể bỏ qua

trong kỳ thực tập

- Kiểm thử, deploy, viết
document, tạo hướng dẫn
sử dụng cho người dùng

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi

12

Chương 3: Chi tiết về project
1. Giới thiệu về Ứng dụng dashboard builder
Mục đích: Có một dashboard hiển thị tiến trình làm việc của team ở mỗi sprint để tạo động
lực cho mọi người làm việc. Dashboard này sẽ được config bởi admin, và được chiếu lên mfan
hình 55 inch giữa công ty nơi mà tất cả các developer khác đều có thể nhìn thấy.
Hiện tại: Cơng ty hiện tại đã có một ứng dụng dashboard ở mức đơn sơ sử dụng Google
Sheets và HTML cơ bản, các cây query được cập nhật thủ công bởi admin, rất tốn công sức mặc
dù công việc rất lặp đi lặp lại.
Mong muốn: Có một ứng dụng tự động hố q trình lấy query, update lên dashboard mà
không cần người admin thủ công update mỗi 5 phút nữa. Bên cạnh đó, làm cho ứng dụng có
tính mở động, tái sử dụng cao nhất có thể, để tái sử dụng cho team bên Mỹ, Pháp.

2. Yêu cầu
Chung: Hiển thị dashboard trên màn hình 55 inch, trên hệ điều hành Windows.
Phía người dùng khan giả:
-

Dashboard cần rõ rang, dễ nhìn, thơng tin dễ nắm bắt

-

Thơng tin, dữ liệu được update real-time, giúp cho những lập trình viên có thể cập
nhật tiến độ làm việc của họ ngay lập tức

-

Tự động hiển thị dashboard phù hợp vào đúng ngày cụ thể (Ví dụ dashboard
Enhancements sẽ vào thứ 2, 3, 5, Defects sẽ vào thứ 2, 4, 6). Timeslot có thể tuỳ
chỉnh được theo ý admin chứ khơng cố định như trên ví dụ.

-

Có màn hình cho một số sự kiện đặc biệt chẳn hạn như Code Review, Bounty
Day,…

Phía admin:
-

Các câu query lấy dữ liệu được cập nhật dễ dàng, ngay cả khi admin khơng rành
cơng nghệ

-

Có những filter nhất định nếu cần

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi


13

-

Có thể config UI cho các dashboard dễ dàng

3. Thiết kế

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi


14

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi


15

4. Kế hoạch & kết quả
4.1.

Kế hoạch
-

Có một dashboard thể hiện được các thông tin cần thiết, với dữ liệu chính xác, và
được lấy về một cách tự động

-

Timeslots có thể được config một cách dễ dàng

-

Hỗ trợ hiển thị các sự kiện đặc biệt

-

Xác thực dựa trên tài khoản nội bộ hiện có của cơng ty

-

Ít nhất phải có một UI cố định giống như design có sẵn cho người dung nếu không
thể làm UI configurable được.

4.2.

Sử dụng MERN Stack

Thực hiện
-

Thực hiện theo kế hoạch, tuy nhiên sử dụng React + Firestore thay vì MERN
stack để bắt kịp thời gian.

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi


16

4.3.

Kết quả
-

Tất cả các chức năng đã hoàn thành theo yêu cầu. Một số chức năng thêm ngoài
mong đợi của phía người dùng.

-

Củng cố kiến thức đã biết về ReactJs, Firestore.

-

Học cách giao tiếp với thành viên trong nhóm để làm rõ yêu cầu, lên kế hoạch
thực hiện các tính năng.

-

Video final demo

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi


17

TÀI LIỆU THAM KHẢO
Kiến thức cơ bản và nâng cao về ReactJs:
/>

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi


18

TỔNG KẾT
Như vậy, trong thời gian 12 tuần thực tập ở công ty em đã học được nhiều kiến thức,
và kinh nghiệm trong quá trình thực hiện dự án. Bổ sung kiến thức về lập trình bằng framework
ReactJs. Tích lũy cho bản thân được tính kỷ luật trong quy trình làm việc, cũng như thực hiện
kiểm thử và rà soát lỗi sau khi hồn thành task của mình, đồng thời sau khi được trải nghiệm
và làm việc em đã thay đổi được tư duy về cách lập trình, nắm bắt được cách xây dựng - phát
triển một chức năng, từ đó có định hình được kiến trúc và xây dựng của một hệ thống phần
mềm hoàn chỉnh.
Em xin chân thành cảm ơn sự giúp đỡ của các anh chị đặc biệt là anh Nguyễn Thanh Cao đã
giúp em học hỏi rất nhiều phát huy năng lực của bản thân trong mơi trường làm việc chun
nghiệp. Đồng thời có cơ hội tiếp xúc với những kiến thức, kinh nghiệm để giúp em hoàn thành
ứng dụng web này.

Nguyễn Thanh Cao

Nguyễn Huỳnh Lợi