Báo cáo thực tập lập trình FRONT END với ANGULAR 2+và triển khai dự án theo SCRUM AGILE

ĐẠI HỌC QUỐC GIA TP. 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
THỰC TẬP TỐT NGHIỆP - SE501.M11

LẬP TRÌNH FRONT-END VỚI ANGULAR 2+
VÀ TRIỂN KHAI DỰ ÁN THEO SCRUM - AGILE
Building front-end with Angular 2+ and applying Scrum - Agile to project

Công ty thực tập: Công ty TNHH KMS Technology Vietnam
Người phụ trách: Lê Phạm Hoài Tâm
Võ Hồng Hải
Thực tập sinh: Lê Hồng Minh Sơn - 18520350

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


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
LỜI MỞ ĐẦU
Hiện nay, các sản phẩm của ngành Công nghệ phần mềm đang ngày càng gia tăng về
mặt số lượng và chất lượng, đòi hỏi sự đáp ứng của lĩnh vực gia công và cung cấp các giải
pháp phần mềm, đặc biệt là xây dựng và phát triển các ứng dụng web. Đây là một bộ phận
không thể thiếu của ngành công nghiệp phần mềm, đang phát triển mạnh mẽ, không ngừng
phục vụ và nâng cao chất lượng cuộc sống.
Cùng với xu thế phát triển của thế giới, các công ty công nghệ ở Việt Nam cũng đang
phát triển mạnh mẽ để hịa nhập với những cơng ty hàng đầu trên thế giới.
Phát triển ứng dụng web là một xu hướng nổi bật trong thế giới công nghệ thông tin,
với lượng nhu cầu của thị trường luôn ở mức lớn. Phát triển ứng dụng web nói chung đã
mang lại các giải pháp khác nhau, thu hút sự chú ý của nhà đầu tư cũng như các sinh viên

theo lập trình, trong đó có em. Vì lý do này, em quyết định chọn mảng xây dựng và phát triển
web làm định hướng cho việc học tập cũng như việc làm của mình.
Sau ba năm học tập trên trường với nền tảng kiến thức từ thầy cơ và bạn bè, vì mong
muốn có thêm kinh nghiệm thực tế, cũng như được tham gia 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 vào học kì này. Sau khi tìm hiểu kĩ
lưỡng giữa các cơng ty, em chọn công ty TNHH KMS Technology làm nơi để tích lũy những
trải nghiệm thực tế đầu tiên trong mơi trường doanh nghiệp. Trong suốt quá trình thực tập,
em thấy đây thực sự là nơi thích hợp để thực hiện những mong muốn trên của bản thân, với
quy trình làm việc linh hoạt, hiệu quả, với con người thân thiện, văn hóa rất tốt.

1


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
LỜI CẢM ƠN
Em trân trọng gửi lời cảm ơn đến Quý công ty TNHH KMS Technology đã tạo điều
kiện cho em có cơ hội được thực hiện q trình thực tập ở cơng ty, và nay đã là nhân viên
chính thức.
Chỉ trong một thời gian ngắn, nhờ sự chỉ dẫn nhiệt tình của nhóm mentor và các anh
chị trong cơng ty, em đã tiếp thu được những kiến thức quan trọng phục vụ quá trình làm
việc thực tế ở lĩnh vực Công nghệ phân mềm. Em xin chân thành cảm ơn các anh chị trong
dự án Levels Beyond của công ty đã bỏ ra nhiều thời gian, công sức, đưa ra góp ý chân thành
để hướng dẫn em hồn thành đợt thực tập này. Đặc biệt cảm ơn anh Lê Phạm Hoài Tâm Principal Software Engineer đã hướng dẫn cho em kĩ thuật và công nghệ, anh Võ Hồng Hải,
anh Bùi Công Khanh - Senior Software Engineer đã training, giúp đỡ cho em khi gặp những
khó khăn trong việc hồn thành nhiệm vụ, đến những việc làm quen với môi trường mới,
cảm ơn chị Hà Thị Diệu Trang - Engineering Manager đã hướng dẫn cho em về mặt quy
trình nghiệp vụ của mơ hình Scrum - Agile. Với những kiến thức được gợi ý và phân tích
trong q trình thực tập, em đã vận dụng được rất nhiều trong việc hoàn thành báo cáo này
cũng như tiếp thu kinh nghiệm thực tế.
Cũng xin cảm ơn thầy cô và bạn bè trong khoa Cơng nghệ phần mềm đã nhiệt tình hỗ

trợ, tạo điều kiện cho em làm bài báo cáo này.
Mặc dù đã cố gắng hoàn thành báo cáo với tất cả nỗ lực song kết quả của em chắc
chắn không tránh khỏi những thiếu sót, em rất mong nhận được sự thơng cảm và góp ý chân
thành từ các thầy cô. Em xin chân thành cảm ơn ạ.
Thành phố Hồ Chí Minh, ngày 18 tháng 12 năm 2021
Lê Hồng Minh Sơn

2


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
NHẬN XÉT CỦA KHOA

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

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

3


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
MỤC LỤC

LỜI MỞ ĐẦU

1

LỜI CẢM ƠN

2

NHẬN XÉT CỦA KHOA

3

MỤC LỤC

4

CHƯƠNG 1 - GIỚI THIỆU CƠNG TY

1.1. Giới thiệu về cơng ty KMS Technology
1.1.1 Giới thiệu tổng quát
1.1.2 Văn hóa
1.1.3 Một số thành tựu
1.1.4 Các thông tin khác
1.2. Sản phẩm của cơng ty

6
6
6
7
7
8
9

CHƯƠNG 2 - NỘI DUNG THỰC TẬP
2.1. Tìm hiểu về công ty và cài đặt các kênh thông tin
2.2. Tìm hiểu các kiến thức và kỹ năng cơ bản
2.3. Tìm hiểu về quy trình nghiệp vụ trong mơ hình Scrum - Agile
2.4. Nghiên cứu công nghệ, kĩ thuật cho project
2.4.1. Angular
2.4.2. NgRx - state management framework
2.4.3. Angular Material
2.4.3.1 Virtual Scroll for large data rendering
2.4.3.2 Tree view rendering
2.4.4 Unit test với Jasmine
2.4.5 CI/CD bằng Azure DevOps và SonarCloud
2.5. Tham gia project thực tế với khách hàng

10

10
11
12
13
13
14
15
15
16
17
17
18

CHƯƠNG 3 - CHI TIẾT VỀ PROJECT
3.1 Giới thiệu về dự án
3.1.1 Tổng quát
3.1.2 Một số chức năng chính
3.1.3 Thành phần thực hiện
3.2. Thực hiện
3.2.1 Use case đảm nhiệm
3.2.1.1. Nested collections

19
19
19
19
20
20
20
21

4


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
3.2.1.2. Collection sidebar
3.2.1.3. Type division
3.2.1.4. Create/Edit smart collection
3.2.1.4. Delete Smart collection
3.2.2 Quy trình làm việc
3.3 Sản phẩm hồn thành

21
21
22
22
23
26

CHƯƠNG 4 - TỔNG KẾT
4.1. Các kết quả đạt được và ưu điểm
4.2. Một số hạn chế
4.3 Hướng phát triển và một số cảm nhận về quá trình thực tập

30
30
31
32

TÀI LIỆU THAM KHẢO

33

5


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp

CHƯƠNG 1 - GIỚI THIỆU CÔNG TY
1.1. Giới thiệu về công ty KMS Technology
1.1.1 Giới thiệu tổng quát

KMS Technology là công ty chuyên về lĩnh vực phát triển sản phẩm và gia công phần
mềm với 100% vốn đầu tư của Mỹ, có trụ sở tại Atlanta, Georgia, Mỹ. Được thành lập từ
2009, từ 4 thành viên lúc bắt đầu, đến nay KMS đã mở rộng quy mô lên tới hơn 1000 nhân
viên trong đội ngũ nhân sự của mình trên phạm vi tồn cầu. Hơn 12 năm hoạt động, cơng ty
đã được khách hàng quốc tế đặt niềm tin về chất lượng sản phẩm và trình độ chun mơn cao
của đội ngũ kỹ sư Việt Nam. KMS Technology gặt hái được những điều mà không phải
công ty nào cũng dễ dàng có được.
Ngồi việc cung cấp dịch vụ, KMS xây dựng và thành lập thành công các công ty
phần mềm của riêng mình thơng qua vườn ươm khởi nghiệp (startup incubator) nội bộ, KMS
Labs.
Công ty đã nhận được nhiều giải thưởng danh giá trong ngành và được danh hiệu là
một trong những nơi làm việc tốt nhất tại Việt Nam và Châu Á trong nhiều năm liên tiếp.

6


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
1.1.2 Văn hóa
KMS Technology cam kết tạo ra tác động xã hội lâu dài bằng cách hợp tác với các tổ

chức phi lợi nhuận để mang lại cho sinh viên có hồn cảnh khó khăn cơ hội việc làm cơng
bằng và tốt hơn. Công ty thường xuyên hợp tác với các trường đại học thông qua các hoạt
động đào tạo CNTT, các sự kiện chuyên ngành, tài trợ học bổng.
KMS Gives là tên gọi của chuỗi sự kiện từ thiện thể hiện văn hóa cho đi vì cộng đồng
của KMS bằng một cam kết quyên góp 1% vốn chủ sở hữu, 1% lợi nhuận và 1% thời gian
cho xã hội

1.1.3 Một số thành tựu
Những chất lượng vượt trội ở dịch vụ đã giúp cho KMS Technology 10 năm liền nhận
giải thưởng Sao Khuê của VINASA cho hạng mục: Dịch vụ gia công xuất khẩu phần mềm
xuất sắc. Cùng nhiều giải thưởng lớn

7


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
1.1.4 Các thơng tin khác
+ Website: />+ Văn phịng:
Việt Nam:
• Cộng Hồ, Q Tân Bình
• Tản Viên, Q Tân Bình
• UpStar Labs, Q3
• Đà Nẵng
US:
• Atlanta
Bảng số liệu về KMS Technology

Nội dung

Con số

Years in Business

12+

Clients Served

130+

Employees

1,000+

Driven in Client Buyouts

$11.8B

Client Savings

$139M

8


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
1.2. Sản phẩm của công ty
KMS Technology cung cấp dịch vụ và giải pháp tối ưu phần mềm cho hơn 90%
khách hàng là các công ty ở Mỹ với các dịch vụ:
+ Phát triển phần mềm theo yêu cầu (software outsourcing)
+ Bảo trì hệ thống sản phẩm phần mềm (maintenance)

+ Dịch vụ quản lý ứng dụng (management service)
+ Kiểm thử và bảo đảm chất lượng phần mềm (testing and quality assurance)
+ Tư vấn giải pháp hiện đại (solution consulting)
Bên cạnh đó, KMS Labs cũng phát triển mạnh mẽ ở lĩnh vực Product với các sản
phẩm chuyên về:
+ Kiểm thử phần mềm như: Katalon, Kobiton, QASymphony,…
+ Quản lí nhân sự: Grove
+ Low-code app generator: Visily

Năm 2021, KMS Technology mở rộng hướng kinh doanh sang tập trung cung cấp
dịch vụ phần mềm trong ngành Chăm sóc sức khỏe (Healthcare), phát triển hoạt động tại
Châu Á Thái Bình Dương (APAC) với KMS Solutions bằng cách cung cấp các giải pháp
số hóa từ Úc, Singapore và Việt Nam.

9


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
CHƯƠNG 2 - NỘI DUNG THỰC TẬP
2.1. Tìm hiểu về công ty và cài đặt các kênh thông tin
● Thời gian: 1 ngày (onboarding)
● Nội dung chính:
+ Được anh chị nhân viên giới thiệu về cơng ty, q trình thành lập và phát triển, sơ đồ
tổ chức
+ Làm quen, giao lưu với các anh chị. Các anh chị giới thiệu về các sản phẩm và những
thành tựu công ty đã đạt được.
+ Được hướng dẫn cài đặt các thiết bị và phần mềm nội bộ, giới thiệu sử dụng các
nguồn tài nguyên của công ty
+ Tiếp cận và cam kết về chính sách bảo mật của cơng ty
+ Được giới thiệu về quyền và nghĩa vụ nhân viên, luật nội bộ, sổ tay công ty, với các

thông tin: 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, điều phải làm, nên làm và không được làm.
+ Đượ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ệ
+ Đượ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 và nhờ trợ
giúp, được hướng dẫn cách trao đổi trong doanh nghiệp (formal communication)
→ Các kênh liên lạc: Email, Skype, Discord, Slack, Zoom
● Kết quả
+ Hiểu thêm công ty KMS Technology và tn thủ luật cơng ty
+ Có thêm các kỹ năng về việc sử dụng các kênh thông tin để trao đổi hiệu quả trong
doanh nghiệp

5 giá trị cốt lõi của công ty

10


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
2.2. Tìm hiểu các kiến thức và kỹ năng cơ bản
●
●
+
+
+

Thời gian: 4 ngày (fundamental training)
Nội dung chính:
Tham gia các khóa học nội bộ, đọc tất cả tài liệu, xem tất cả video có đưa ra
Tham gia các bài kiểm tra đánh giá của cơng ty có tên là NEXT training
Nội dung các khóa học bao gồm:

1. Source control management → chủ yếu là Git
2. Agile Software Management
3. High quality software engineering
4. Code quality awareness → clean code
5. Software design patterns
6. Web application security awareness
7. Common software errors
8. Exploratory testing

● Kết quả
+ Đạt điểm cao ở tất cả bài test để hồn thành các khóa học bắt buộc (required)

+ Biết vận dụng cách quản lí mã nguồn bằng Git, phương pháp Agile, các nguyến tắc
clean code, các mẫu thiết kế, an tồn trong ứng dụng web, khía cạnh testing đối với
developer,...

11


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
2.3. Tìm hiểu về quy trình nghiệp vụ trong mơ hình Scrum - Agile
● Thời gian: 2 ngày (business process training)
● Nội dung chính:
+ Đọc tài liệu, tìm hiểu về ngun lý Agile cũng như cách mơ hình Scrum hoạt động
trong thực tế
+ Được Project Manager giới thiệu về quy trình triển khai dự án với Scrum - Agile
+ Tìm hiểu cách sử dụng công cụ Microsoft Azure DevOps để quản lí dự án
+ Được thực hành cách nhận cơng việc và báo cáo tiến độ hàng ngày
● Kết quả
+ Hiểu được 4 giá trị cốt lõi của Agile

1. Individuals and interactions over processes and tools
2. Working software over comprehensive documentation
3. Customer collaboration over contract negotiation
4. Responding to change over following a plan
+ Hiểu được 12 nguyên tắc Agile
+ Hiểu được 3 trụ cột trong Scrum framework: Transparency (sự minh bạch),
Adaptation (sự thích nghi), Inspection (sự kiểm sốt)
+ Hiểu được khái niệm Definition of Done (DoD)
+ Hiểu được quy trình trong Scrum, được tóm tắt qua sơ đồ:

Sơ đồ lifecycle 1 sprint của Scrum
1. Hiểu được nhiệm vụ các role tham gia: Product Owner, Development team,
Scrum master
12


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
2. Hiểu được vai trò các artifact: Product Backlog, Sprint Backlog, Increment
3. Hiểu được từng công đoạn trong 1 sprint (2 tuần):
+ Daily meeting: họp 15 phút mỗi ngày để trả lời 3 câu hỏi: đã làm gì,
đang làm gì, sẽ làm gì
+ Planning: lập kế hoạch và xác định các cơng việc sẽ thực hiện trong
sprint đó, ước tính thời gian thực hiện mỗi chức năng (story point)
+ Review: đánh giá kết quả công việc trong 1 sprint, demo với client và
nhận feedback
+ Retrospective: đánh giá cách hoàn thành cơng việc trong sprint đó, trả
lời các câu hỏi: điều gì làm tốt, điều gì cần cải thiện, các action sẽ thực
hiện để project tốt hơn trong sprint kế tiếp
+ Biết cách sử dụng công cụ Microsoft Azure DevOps để nhận và quản lí tiến độ cơng
việc trong mơ hình Scrum

2.4. Nghiên cứu công nghệ, kĩ thuật cho project
● Thời gian: 3 tuần (technical training)
● Nội dung chính: nghiên cứu các công nghệ, kĩ thuật để tham gia project thực tế
Ngoài các kiến thức nền tảng của frontend là HTML, CSS, JS mà em đã biết, em được
giao tìm hiểu các công nghệ, kĩ thuật sau đây:
2.4.1. Angular
Angular là một open-source framework chuyên dụng cho công việc thiết kế web site.
Angular được phát triển và duy trì thường xuyên bởi Google. Đây là một trong những
frameworks front end mạnh mẽ nhất, thích hợp cho việc build nhanh các website dạng Single
Page Application (SPA). Phiên bản em được hướng dẫn nghiên cứu trong kì thực tập này là
Angular 2+, tức là loại hiện đại hơn và thân thiện hơn so với phiên bản trước đó là
AngularJS.

Các khái niệm em được tìm hiểu về Angular bao gồm:

13


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
1. TypeScript: là ngơn ngữ lập trình phát triển từ Javascript bởi việc bổ sung các
kiểu dữ liệu (static-type) và xử lí hướng đối tượng (OOP)
2. Basic concepts: component, modules, HTML template, style, selector
3. Data binding and Event binding: string interpolation, property binding,
two-way binding với ngModel
4. Directives: bộ phận mở rộng để thao tác, cập nhật, thêm, xóa các thành phần
giao diện HTML
+ Components directives: <component-name></component-name>
+ Structural directives: ngIf, ngFor, ngSwitch...
+ Attribute directives: ngStyle, ngClass,...
5. Lifecycle: ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit,

ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked
6. Services và Dependency Injection
7. Routing
8. Observables: làm việc với thư viện RxJs
9. Forms: Template driven vs Reactive Form
10. Pipe: built-in và custom pipe
11. Interceptor và Lazy loading
2.4.2. NgRx - state management framework
NgRx là 1 framework để quản lí trạng thái trong ứng dụng Angular một cách hiệu quả
vì cung cấp cho chúng ta các tác vụ như isolation of side effects, entity collection
management...Với NgRx chúng ta có thể xây dựng 1 Angular app với khả năng duy trì và
mở rộng rất cao.
NgRx được truyền cảm hứng dựa trên Redux (một state management library cực kỳ
phổ biến trong cộng đồng React cho việc quản lý state theo Flux Architect) để giải quyết vấn
đề tương tự cho Angular.
Khác với Redux, để sử dụng tốt NgRx thì phải có một sự hiểu biết tương đối về
Reactive Programming vì state trong NgRx là Reactive State - Everything is stream
Các thành phần của NgRx là:
+ Store: nơi chứa các State.
+ Action: thể hiện các hành động ,thao tác khi muốn thay đổi State
+ Reducer: thực việc chuyển đổi State từ trạng thái này sang trạng thái khác.
+ Selector: thể hiện vùng chọn của các State được lưu trữ trong Store
+ Effect: nơi thực hiện các side effect khi thay đổi state như call API
Quy trình hoạt động của nó được thể hiện bằng sơ đồ dưới đây
14


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp

+

+
+
+
+

Sơ đồ hoạt động của việc quản lí state trong Angular với NgRx
Từ Component chúng ta tương tác với Reducer thông qua Action
Từ Action, Reducer sẽ làm 1 công việc tương ứng với Action đó
Từ Reducer, State sẽ được đẩy vào Store
Từ Store, Component có thể lấy ra State thơng qua Selector
Các thao tác liên quan đến service như call API được thực hiện ở Effects

Trong dự án em tham gia sẽ sử dụng công cụ này để giải quyết bài tốn quản lí state
của Angular
2.4.3. Angular Material
Đây là một trong những thư viên UI cho Angular phổ biến nhất vì được tạo ra bởi
chính Google, với phong cách tiêu biểu Material Design.
Ngoài việc đơn thuần sử dụng các UI component để render, em được nhận nhiệm vụ
là tìm hiểu hai bài tốn sau để xử lí trong dự án:
2.4.3.1 Virtual Scroll for large data rendering
Đây là bài toán kinh điển trong việc xử lí render lượng lớn data trong 1 list. Mục tiêu
là làm sao để chỉ render những HTML element cần thiết được hiển thị khi người dùng scroll
chuột từ trên xuống dưới (hoặc từ trái sang phải) và ngược lại. Có nghĩa là nó sẽ tự động
thêm và hủy các phần tử, dẫn đến chỉ tạo ra các phần tử DOM hiển thị cho người dùng Điều
này giúp tăng hiệu suất và trải nghiệm người dùng khi thao tác với website.

15


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp

Hoạt động của Virtual Scroll
Có nhiều cách để xử lí bài tốn này, trong Angular Material có 1 CDK phục vụ nhu
cầu này tên là
<cdk-virtual-scroll-viewport>

/>Nhiệm vụ của em là nghiên cứu những cách sử dụng khác nhau của CDK này, tối ưu
điểm mạnh và cải thiện điểm yếu của nó, từ đó áp dụng vào project một cách hiệu quả
2.4.3.2 Tree view rendering
Đây là bài toán render một cấu trúc dạng cây ra UI với 2 loại là flat tree và nested tree

Vì u cầu project có liên quan đến chức năng đó, em nghiên cứu CDK <cdk-tree>
của Material, từ đó tìm ra giải pháp tốt khi thiết kế
/>16


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
2.4.4 Unit test với Jasmine
Để phục vụ bảo trì và mở rộng sau này, project yêu cầu phải viết Unit test. Công cụ sử
dụng là Jasmine.

2.4.5 CI/CD bằng Azure DevOps và SonarCloud
Project có áp dụng workflow CI/CD nên địi hỏi em phải biết cách quan sát kết quả
khi auto build và deploy
+ Azure DevOps: mỗi pull request sẽ lần lượt build trên 3 môi trường: Dev
environment, QA environment, staging environment
+ SonarCloud: dị bug, code smell để hiện thực hóa clean code → sản phẩm đáp ứng
tiêu chuẩn thị trường
Bất cứ lỗi nào phát sinh đều phải sửa mới có thể merge vào nhánh main

Check được khởi động sau khi có một pull request
17


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp

2.5. Tham gia project thực tế với khách hàng
●
●
+
+

+
+
+
+
+
●
+
+
+

Thời gian: 8 tuần (take part in real project with client)
Nội dung chính:
Được cấp tài khoản truy cập vào các trang làm việc: Github, Azure DevOps, Slack
Được tiếp cận với source code của dự án, nghiên cứu structure và code convention
(khoảng 1 tuần), được assign các chức năng phụ (1 tuần), trực tiếp nhận các chức
năng chính (những tuần sau đó)
Được cung cấp các tài liệu về sản phẩm: SRS document, Design document (Adobe),...
sau đó nghiên cứu, phân tích u cầu và thiết kế tương ứng

Tham gia daily meeting, dev meeting
Tham gia vào các sự kiện trong mỗi sprint: Planning, Grooming, Review. Retro
Chủ động lấy task và cập nhật tiến độ công việc trên Microsoft Azure DevOps
Trực tiếp trao đổi và demo chức năng với khách hàng nước ngoài
Kết quả
Hoàn thành các task đúng thời gian, đúng yêu cầu
Hiểu được thực sự cách làm việc trong thực tế của quy trình phát triển phần mềm theo
mơ hình Scrum - Agile
Tiếp thu được rất nhiều kinh nghiệm từ kĩ thuật đến quy trình và cách giao tiếp
Chi tiết project sẽ được giải thích rõ hơn ở phần sau
18


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp

CHƯƠNG 3 - CHI TIẾT VỀ PROJECT

3.1 Giới thiệu về dự án
3.1.1 Tổng quát
Tên dự án: Levels Beyond
Mục tiêu: xây dựng một ứng dụng website nhằm giúp người dùng có thể dễ dàng
quản lý và lưu trữ các item (thường là media như ảnh, nhạc, phim) thành các bộ sưu tập
(collections) có cấu trúc phân cấp (hierarchical structure). Một số ứng dụng tương tự có thể
kể đến như Google Drive.
Đối tượng hướng tới: các cơng ty hoạt động giải trí (media companies), người sáng
tạo nội dung (creative user) hay bất cứ ai sử dụng cấu trúc cây thư mục để quản lý lưu trữ.

Một số khách hàng sử dụng
Dự án được phân thành nhiều giai đoạn (hay là SOW). Em tham gia SOW 2, tập trung
vào việc quản lí các bộ sưu tập, hay còn gọi là collection và thao tác với chúng.

3.1.2 Một số chức năng chính
+ Nested collections: collection được tổ chức theo cấu trúc phân cấp lồng nhau, người
dùng có thể tạo collection B ngang hàng với collection A (same level collection) hoặc
là con của collection A (sub-collection)
+ Navigate between collections: người dùng thực hiện nhấn vào collection để xem các
item chứa trong nó
+ Collection sidebar: hiển thị toàn bộ cây thư mục thành 1 sidebar để dễ dàng thao tác
(giống Windows Explorer)

19


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
+ Type division: các collection được phân loại đa dạng để dễ dàng trong việc quan sát.
Mỗi loại có những quy luật cụ thể dựa trên tài liệu đặc tả
+ Take actions: tương tác với collection như: tạo bộ sưu tập con, chỉnh sửa thơng tin,
chia sẻ, xóa, đánh dấu (star)
+ Create/Edit Smart collection: tạo và chỉnh sửa một collection thành kiểu Smart (1
loại collection đặc biệt được định nghĩa trong business rule)
+ Move collections: di chuyển collection này ra khỏi/ vào trong collection kia
+ Search collection: tìm kiếm trong hệ thống
Và còn nhiều chức năng khác nữa
3.1.3 Thành phần thực hiện
Nhóm dự án bao gồm 12 thành viên, gồm các chức vụ như sau:
+ 1 Project Manager, kiêm Scrum master
+ 1 Business Analyst, kiêm Product Owner
+ Development team gồm: 1 Tech Lead, 2 Senior Developer, 3 Junior Developer (em
thuộc role này), 2 QA/QC, 2 Intern Developer
3.2. Thực hiện
3.2.1 Use case đảm nhiệm

+ Nested collections
+ Collection sidebar
+ Type division
+ Create Smart collection
+ Edit Smart collection
+ Delete Smart collection

20


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
3.2.1.1. Nested collections
Mô tả: Cho phép người dùng tổ chức mọi collection theo cấu trúc phân cấp lồng nhau, người
dùng có thể tạo collection B ngang hàng với collection A (same level collection) hoặc là con
của collection A (sub-collection)
Thực hiện: áp dụng các kiến thức đã nghiên cứu về Angular, đặc biệt là tree view
rendering đã nêu ở phần 2.4.3.2 để hiện thực hóa cấu trúc dạng cây đúng yêu cầu đề ra
Kết quả:
+ Hoàn thành use case đúng với requirement và design
+ Viết unit test
+ Demo với QA và client
3.2.1.2. Collection sidebar
Mơ tả: Cho phép hiển thị tồn bộ cây thư mục thành 1 sidebar để dễ dàng thao tác với lượng
dữ liệu lớn
Thực hiện: áp dụng các kiến thức đã nghiên cứu về Angular, đặc biệt là virtual scroll đã
nêu ở phần 2.4.3.1 để tối ưu việc render 1 list collection, tăng UX cho người dùng
Kết quả:
+ Hoàn thành use case đúng với requirement và design
+ Viết unit test
+ Demo với QA và client

3.2.1.3. Type division
Mô tả: Cho phép người dùng phân loại đa dạng thành All, Private, Smart, Starred để dễ
dàng trong việc quan sát. Mỗi loại có những quy luật cụ thể dựa trên tài liệu đặc tả
Thực hiện: áp dụng các kiến thức đã nghiên cứu về Angular cùng với phân tích rõ ràng yêu
cầu mỗi loại collection trong đặc tả nhằm đưa ra cách hiện thực hóa tốt nhất
Kết quả:

21


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
+ Hoàn thành use case đúng với requirement và design
+ Viết unit test
+ Demo với QA và client
3.2.1.4. Create/Edit smart collection
Mô tả: Cho phép người dùng tạo và chỉnh sửa một collection thành kiểu Smart (1 loại
collection đặc biệt được định nghĩa trong business rule). Smart collection là loại collection
bao gồm thêm 2 trường là kiểu search và kiểu workflow. Sau khi tạo, tất cả item nội dung
trong hệ thống khớp với kiểu search thì sẽ tự động đưa vào collection này, sau đó workflow
tương ứng sẽ được khởi chạy (như export thành PDF, download file,...)
Thực hiện: áp dụng các kiến thức đã nghiên cứu về Angular cùng với phân tích rõ ràng yêu
cầu của trong đặc tả nhằm đưa ra cách hiện thực hóa tốt nhất. Cách thức phát triển tính năng
Smart collection tương đối phức tạp và liên quan đến nhiều chức năng khác nên được team
đánh giá là khó. Tuy nhiên, em đã thành cơng xây dựng tính năng này.
Kết quả:
+ Hồn thành use case đúng với requirement và design
+ Viết unit test
+ Demo với QA và client
3.2.1.4. Delete Smart collection
Mơ tả: Cho phép người dùng xóa collection kiểu Smart (kiểu collection đã giải thích ở trên)

Thực hiện: áp dụng các kiến thức đã nghiên cứu về Angular cùng với phân tích rõ ràng yêu
cầu của trong đặc tả nhằm đưa ra cách hiện thực hóa tốt nhất.
Kết quả:
+ Hoàn thành use case đúng với requirement và design
+ Viết unit test
+ Demo với QA và client

22


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
3.2.2 Quy trình làm việc
Project được triển khai theo mơ hình Scrum - Agile nên được phân theo nhiều sprint,
mỗi sprint đều trải qua các sự kiện đã nêu ở phần 2.3
Cụ thể:
● Làm việc với team
+ Mỗi buổi sáng 10h15 sẽ tiến hành daily meeting, mỗi người sẽ trả lời 3 câu hỏi: đã
làm gì, đang làm gì, sẽ làm gì, đồng thời ý kiến thắc mắc khó khăn (nếu có)
+ Mỗi ngày, tùy vào tiến độ dự án sẽ có Dev meeting nhằm trao đổi các vấn đề kĩ thuật
+ Trong ngày, nếu có thắc mắc liên quan requirement sẽ liên hệ BA hoặc trực tiếp
clarify với khách hàng qua Slack
+ Đầu mỗi sprint, PM tiến hành họp Planning để xác định các story sẽ làm và estimate
các point (1,3,5,8,12)
+ Tùy tình hình sẽ có Grooming trong sprint nhằm làm rõ lại 1 số vấn đề trong
requirement với team
+ Kết thúc 1 sprint sẽ có Review nhằm đánh giá lại tiến độ cũng như kết quả đã làm
+ Trước khi demo với client sẽ có 1 buổi internal demo giữa team với nhau
+ Thứ 5 cách 2 tuần (buổi tối) sẽ tiến hành báo cáo Demo với khách hàng, sử dụng ngôn
ngữ tiếng Anh, và nhận feedback để cải thiện chức năng
● Làm việc cá nhân:

+ Chủ động lấy task hoặc nhận task từ PM
+ Quản lí và cập nhật công việc, tiến độ bằng Azure DevOp
To do: task được assign chưa làm
Kickoff: Task đã trao đổi với BA và QA
Doing: Task đang làm
Pending: Task đang thiếu API hoặc phải trao đổi thêm requirement
Integration: Task đang tích hợp với task khác

23


Lê Hoàng Minh Sơn - 18520350 - Thực tập tốt nghiệp
Ready for delivery: Task đã sẵn sàng để test
Done: Task đã được QA test và khơng có bug

Bảng tiến độ công việc bằng Azure Devops
+ Sau khi nhận task, thực hiện đọc requirement và trao đổi với QA, BA
+ Phân tích design trên Microsoft Adobe

Một design cần phải thực hiện
24