Báo cáo thực tập lập trình ứng dụng WEB quản lý tổ chức sự kiện

1
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

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 ỨNG DỤNG WEB
QUẢN LÍ TỔ CHỨC SỰ KIỆN

Công ty thực tập

: KMS Technology

Người phụ trách

: Dương Văn Nhất

Thực tập sinh

: Trương Minh Sang

TP. Hồ Chí Minh, tháng 11 năm 2020

Trương Minh Sang


2

LỜI MỞ ĐẦU

Ngày nay, với tốc độ phát triển vô cùng mạnh mẽ, ngành cơng nghiệp phần mềm, trong
đó có nền tảng 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 phần mềm 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ề phần mềm trên thế giới. Trong đó, những cơng ty phần mềm trong nước (như KMS
Technology) đã và đang góp phần rất lớn vào sự phát triển tích cực của ngành cơng nghiệp phần
mềm Việt.
Ngành công nghiệp phần mềm được sinh ra là do nhu cầu giải quyết các vấn đề thực tế
bằng cách sử dụng các hệ thống phần mềm. Và những kỹ sư phần mềm, trong đó phần lớn là
người trẻ, sẽ đóng vai trị quan trọng trong cơng việc phát triển phần mềm. Vì lý do này, em
quyết định chọn lập trình phần mềm, cụ thể là ứng dụng 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 quy trình phát triển phần mềm trong một môi trường chuyên nghiệp, em
quyết định thực tập trong học kì này. Vì vậy, em quyết định chọn KMS Technology - 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 được dự định này.

Trương Minh Sang


3

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty KMS Technology đã 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 và đội ngũ
phát triển, em đã tiếp thu được những kiến thức quan trọng để có thể tham gia một qui trình

phát triển phần mềm chuyên nghiêpj. Chân thành cảm ơn các anh chị trong đội ngũ phát triển đã
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 Dương Văn Nhất, đã training ReactJs, 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 việc làm quen với mơi trường
mới; cảm ơn anh Võ Ngọc Dũng đã chỉ dẫn em về cách tham gia vào qui trình phát triển và kiến
trúc của phần mềm, cách làm việc trong team.
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.
Trương Minh Sang
Tp.HCM, ngày 2 tháng 11 năm 2020

Trương Minh Sang


4

NHẬN XÉT CỦA KHOA

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

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

Trương Minh Sang


5

Mục lục
Chương 1: Giới thiêu công ty thực tập............................................................................ 6
Giới thiệu công ty KMS Technology ............................................................................... 6
Sản phẩm của công ty ...................................................................................................... 6
Chương 2: Nội dung thực tập........................................................................................... 7
Tìm hiểu công ty và các kỹ năng cơ bản trong công ty ................................................... 7
Nghiên cứu kỹ thuật ......................................................................................................... 7
Các công cụ làm việc .................................................................................................... 7
Tìm hiểu ngơn ngữ Typescript và thư viện ReactJs ...................................................... 7
Lập trình front end ứng dụng web với ReactJs ............................................................. 8
Thực hiện project ........................................................................................................... 10
Lịch làm việc .................................................................................................................. 10
Chương 3: Chi tiết về project ......................................................................................... 13
Giới thiệu về dự án và tính năng đã thực hiện ............................................................... 13
Các chức năng và domain chính ................................................................................. 13
Chức năng đã thực hiện .............................................................................................. 16
Thực hiện........................................................................................................................ 18
Kế hoạch......................................................................................................................... 18

TÀI LIỆU THAM KHẢO .............................................................................................. 19
TỔNG KẾT ...................................................................................................................... 20

Trương Minh Sang


6

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

Giới thiệu công ty KMS Technology
KMS Technology được thành lập năm 2009, là một công ty chuyền về cung
cấp các dịch vụ phát triển sản phẩm phần mềm. Sau 11 năm hoạt động, KMS đã xây
dựng đội ngũ hơn 1000 nhân viên tại Mỹ và Việt Nam, và phát hành 3 sản phẩm
phần mềm trên thị trường thế giới.
KMS Technology có văn phịng đặt tại Mỹ và Việt Nam, phân phối phần mềm
và giải pháp outsourcing cho nhiều công ty khác nhau.

Sản phẩm của cơng ty
Ngoải giải pháp outsourcing, cơng ty cịn có 3 sản phẩm phầm mềm chính đã và
đang được phát triển: QASymphony – Giải pháp automation test dựa trên AI cho nền
tảng đám mây và devops, Katalon – Nền tảng automation testing, Kobiton – Nền
tảng testing dựa trên AI và sử dụng thiết bị thật.

Trương Minh Sang


7

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

Đợt thực tập với dự án “Ứng dụng Web quản lí tổ chức sự kiện” nhằm mục đích giúp sinh
viên thực tập được đào tạo về lập trình ứng dụng nền tảng web, đồ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 phần mềm chun
nghiệp.

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 của công ty
Được nghe đội ngũ HR giới thiệu về cơng ty, q 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 trong công
việc…
Kết quả : Hiểu thêm về cơng ty KMS Technology, 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.

Nghiên cứu kỹ thuật
Các cơng cụ làm việc
Thời gian : 3 ngày
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.
Trong thời gian này, mentor đã 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 phát triển. Một số phần mềm trong số đó như Git và
Gitlab - sử dụng trong làm việc quản lí cấu hình của dự án, VSCode – trình soạn thảo
văn bản rất phổ biến với nhiều mơi trường phát triển tiện dụng cho lập trình viên.
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.

Tìm hiểu ngơn ngữ Typescript và thư viện ReactJs
Thời gian : 7 ngày

Trương Minh Sang


8

Nội dung : Được training về ngôn ngữ Typescript và thư viện ReactJs, những kiến
thức quan trọng cho việc phát triển front end ứng dụng web
- Lập trình hướng đối tượng
Các kiến thức cơ bản về lập trình hướng đối tượng như khái niêm, các đặc tính
như tính kế thừa, tính đóng gói, tính ảo hóa, tính đa hình. Ngồi ra, thực tập sinh
còn được hướng dẫn về cách thiết kế lớp cho các model sử dụng trong hệ thống
- Các thành phần website (HTML/CSS/JS):
Cách trình duyệt chạy một ứng dụng web trên phía front-end như thế nào. Các
khái niệm cơ bản về HTML/CSS/JS và cách chúng hoạt động trên trình duyệt.
- Thư viện ReactJs
Thực tập sinh sẽ được hướng dẫn về cách sử dụng thư viện ReactJs để lập trình
các thành phần của website về phía front-end. Được hướng dẫn về cách ReactJs
hiện thực hóa việc lập trình các thành phần cơ bản nêu trên.
- Typescript:
Được hướng dẫn về ngôn ngữ Typescript như các cú pháp cơ bản như điều khiển
luồng, vịng lặp,...; những tính chất cơ bản của Typescript như interface, kiểu
union, ép kiểu,...; và khác biệt với Javascript như thế nào để ứng dụng với qui mô
đội ngũ phát triển lớn.
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 ngơn ngữ Typescript và thư viện ReactJs.
Có được những kiến thức quan trọng cho việc lập trình front-end 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.

Lập trình front end ứng dụng web với ReactJs
Thời gian : 10 ngày
Nội dung: Các kiến thức cơ bản về ReactJs để có thể tham gia xây dựng phía front
end cho ứng dụng web sử dụng trong công ty
-

Khái niệm cơ bản về ReactJs
Năm được các khái niệm cơ bản về ReactJs, là một thư viện Javascript dùng cho
việc xây dựng các thành phần giao diện có thể tái sử dụng.
Trương Minh Sang


9

Ngồi ra, mentor cịn cung cấp cho thực tập sinh những khái niệm cơ bản trong
môi trường web như DOM, HTML, CSS, HTTPS,...
-

Mơ hình server-client:
Cách mơ hình server-client đang được sử dụng phổ biến trong lập trình ứng dụng
web hiện nay. Trong mơ hình này, React đóng vai trị quan trọng trong xây dựng
ứng dụng front end phía client. Ngồi ra việc lập trình front end sẽ phải có việc
giao tiếp, thảo luận với thành viên lập trình back end phía server để có thể thực

hiện giao tiếp giữa 2 phía bằng giao thức Https.

-

API Calls
Là các thao tác app phía front end giao tiếp với RESTful APIs ở phía server thông
qua giao thức HTTPS nhằm thực hiện các hành động để lưu xuống cơ sở dữ liệu.

-

State management
Các nguyên lí về quản lí state (trạng thái) của một ứng dụng front end. Quản lí
app state để lưu các dữ liệu liên quan đến trạng thái của một app khi người dùng
sử dụng. Thực hiện bằng các thư viện như Redux, Mobx,...

-

Routing
Việc quản lí đường dẫn của app để đưa người dùng đến các tài nguyên phù hợp và
đưa đến trang lỗi nếu có xảy ra. Sử dụng React Router.

-

Forms
Các vấn đề liên quan đến form để lấy input của người dùng. Là một trong những
thành phần quan trọng trong ứng dụng web để nhận input và tương tác từ người
dùng. Việc quản lí form với state của form, validation và submit.

Thực hiện :
-

Tham gia đầy đủ các buổi trainning.
Làm các bài tập thực hành để làm quen với các khái niệm, …
Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.

Kết quả :
-

Hiểu được những khái niệm cơ bản trong lập trình front end ứng dụng web.
HIểu được cách làm việc của lập trình viên front end với back end như thế nào.

Trương Minh Sang


10

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, Typescript và lập trình front end web. Trong hai tháng tiếp theo,
mentor đã hướng dẫn thực tập sinh áp dụng những kiến thức đã học để tham gia đội ngũ
phát triển một dự án ứng dụng web.
Chi tiết dự án sẽ được nói ở phần sau.

Lịch làm việc
Cơng việc

Tuần

Tìm hiểu về cơng
ty, 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,
làm việc qua email.
- Tìm hiểu ngơn ngữ
lập trình Typescript
- Thực
hành
Typescript cơ bản
- Làm quen ReactJs
- Tìm hiểu ReactJs
nâng cao
- Thực hành ReactJs
cơ bản và nâng cao
- Ứng dụng ReactJs
vào một kiến trúc
ứng dụng web.
- Phát triển các khái
niệm cơ bản trong
một ứng dụng front
end cơ bản
Bắt đầu Sprint:
- Lên kế hoạch Sprint
-

1

2

3

4

5

Người hướng dẫn

Mức
độ
hoàn
thành

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

Chị Ánh Trần

Anh Nhất Dương

Anh Nhất Dương
và anh Dũng Võ
Anh Nhất Dương
và anh Dũng Võ

Anh Dũng Võ và
toàn bộ đội ngũ

Trương Minh Sang

11

Planning
Làm
quen
với
source code của dự
án đang phát triển
- Làm quen với các
APIs back end để sử
dụng.
- Tìm hiểu sitemap
của ứng dụng.
Giai đoạn trong Sprint:
- Viết một phần của
trang landing page
của một sự kiện
trong công ty
- Kết hợp phần đã viết
vào trang landing
page để nhân viên
cơng ty có thể đăng
kí tham gia sự kiện
Giai đoạn trong Sprint:
- Viết một field của
một forms để in ra
kết quả JSON của
cài đặt của người

dùng trong phía
admin
- Fix một số bug UI.
Giao đoạn cuối sprint
- Fix các bug được
QC báo cáo.
- Sprint Review và
Sprint Retrospective
Bắt đầu sprint tiếp theo:
- Lên kế hoạch Sprint
Planning
- Nghiên cứu về cách
thực hiện dynamic
forms.
- Lên ý tưởng thiết kế
cấu
trúc
của
dynamic forms
Giai đoạn trong Sprint:
-

6

7

8

9

10

Anh Nhất Dương

Anh Nhất Dương

Anh Nhất Dương
và đội ngũ phát
triển
Anh Nhất Dương
và toàn bộ đội ngũ

Anh Nhất Dương

Trương Minh Sang


12

Viết các thành phần
giao diện mockup
cho
màn
hình
dynamic form bên
phía admin.
- Nghiên cứu các
APIs cần thiết và
làm việc với back
end

Giai đoạn trong Sprint:
- Viết chức năng của
dynamic forms
- Chức năng có thể
tạo form động cho
các loại form trong
sự kiện.
Giai đoạn cuối sprint và
giai đoạn kết thúc, báo
cáo :
- Hoàn thành chức
năng
dynamic
forms.
- Fix bug.
- Sprint Review và
Sprint Retrospective
- Báo cáo cuối đợt
thực tập.
-

11

12

và anh Dũng Võ

Anh Nhất Dương

Anh Nhất Dương

và toàn bộ đội ngũ

Trương Minh Sang


13

Chương 3: Chi tiết về project
Giới thiệu về dự án và tính năng đã thực hiện
Eventify là một dự án ứng dụng web được xây dựng bằng Java và Typescript (ReactJs)
nhằm để quản lí tốt hơn các sự kiện đã, đang và sẽ được tổ chức trong công ty. Ứng
dụng có 2 domain chính là client – dùng cho người dùng chung là các nhân viên trong
công ty để đăng kí tham gia sự kiện – và admin – là nhân viên thuộc bộ phận Admin của
công ty sử dụng để quản lí các thơng tin sự kiện.
Các chức năng và domain chính
Client:
Ứng dụng được sử dụng ở phía client để hỗ trợ nhân viên trong cơng ty KMS tìm kiếm
thông tin về các sự kiện đang diễn ra trong cơng ty. Khi đó có thể đăng kí tham gia sự
kiện đó.
Các sự kiện được viết thành các landing page riêng và được hiện dynamic với từng
đường dẫn khác nhau. Do đó mỗi event vẫn mang tính đặc trưng riêng.

Trương Minh Sang


14

Trương Minh Sang

15

Admin:
Ứng dụng được sử dụng ở phía admin để hỗ trợ bộ phận Admin trong cơng ty KMS
quản lí thơng tin về các sự kiện đang diễn ra trong công ty. Các admin có thể thêm, xóa,
sửa các event cơng ty, sửa các form đăng kí và lấy thơng tin đăng kí của các nhân
viên,...
Các thơng tin đăng kí khi đó được sử dụng cho các process về sự kiện trong công ty.

Trương Minh Sang


16

Chức năng đã thực hiện
Một phần landing page sự kiện Flashatch:
Mô tả:
Flashatch là một sự kiện của KMS vào khoảng tháng 10 nhằm vận động các nhân viên
sử dụng sáng tạo của mình trong lập trình bằng một trị chơi lập trình AI được diễn ra
trên web.
Kết quả thực hiện:
Cài đặt được banner, các thông tin sự kiện và nút đăng kí sự kiện

Chức năng Dynamic Forms:
Mơ tả
Chức năng Dynamic Forms giúp admin có thể tạo ra các form một cách flexible trong
sự kiện đang được chọn (như Google Forms). Admin có thể thêm các trường, các
validation của trường đó, preview form và thêm các thông tin phụ (như Group sử dụng
form),...
Kết quả thực hiện:

Trương Minh Sang


17

Cài đặt được màn hình chính. Có các control để người dùng nhập các meta data
của form đang được tạo. Có nút preview, save và discard. Có thể thay đổi tên
form, loại form, thông tin phụ,...

Trương Minh Sang


18

Thực hiện
-

Trương Minh Sang

Và sự giúp đỡ tận tình của đội ngũ phát triển CoE thuộc KMS Technology.

Kế hoạch
Giai đoạn Sprint đầu:
-

Hoàn thành các thành phần giao diện cơ bản cho Flashatch
Lấy thông tin động từ server như thời gian, các topic, các trường đăng kí
Thanh nav bar
Nút đăng kí

Kết quả :
-

Thực hiện toàn bộ các chức năng được .

Giai đoạn Sprint tiếp theo:
- Hoàn thành UI cho chức năng.
- Hoàn thành các state cho input người dùng để gửi về server
- Validate các input của người dùng trước gửi về server
- Tên, loại và các thông tin thêm của form
- Nút preview form
Kết quả : Đã hoàn thành toàn bộ những tính năng trên.

Trương Minh Sang


19

TÀI LIỆU THAM KHẢO

For ReactJs
Getting Started – React (reactjs.org)
For Typescript
TypeScript: Typed JavaScript at Any Scale. (typescriptlang.org)
For npm, webpack
npm | build amazing things (npmjs.com)
webpack
For Redux, Formik, React Router, RxJs
Redux - A predictable state container for JavaScript apps. | Redux

Formik: Build forms in React, without the tears
React Router: Declarative Routing for React.js
RxJS - BLACK LIVES MATTER (rxjs-dev.firebaseapp.com)

Trương Minh Sang


20

TỔNG KẾT
Như vậy, chỉ trong vòng mộ tháng training và hai tháng tham gia phát triển, thực tập sinh
đã kịp hoàn thành một số chức năng của ứng dụng web quản lí sự kiện. Các chức năng đã được
các mentor và đội ngũ QC review. Các bug đã được fix và giảm thiểu đến mức tối đa và đã
được deploy thành sản phẩm trong công ty.
Chân thành cảm ơn sự giúp đỡ của các anh chị team CoE KMS Technology đã giúp đỡ
em có thể hồn thành các chức năng này.

Trương Minh Sang