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

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINKHOA 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 - AGILEBuildi

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 - AGILEBuilding 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ê Hoàng Minh Sơn - 18520350

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

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ảiphá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ậnkhô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ừngphụ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 đangphá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êntheo 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ểnweb 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ì mongmuố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ộtmô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ữngtrả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ớiquy 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

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ềukiện cho em có cơ hội được thực hiện quá trình thực tập ở công ty, và nay đã là nhân viênchí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 anhchị 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àmviệ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 hoà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 hoà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íchtrong quá 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àycũ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ắcchắ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ânthà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ê Hoàng Minh Sơn

NHẬN XÉT CỦA KHOA

1.1.4 Các thông tin khác 8 1.2 Sản phẩm của công ty 9 CHƯƠNG 2 - NỘI DUNG THỰC TẬP 10 2.1 Tìm hiểu về công ty và cài đặt các kênh thông tin 10 2.2 Tìm hiểu các kiến thức và kỹ năng cơ bản 11 2.3 Tìm hiểu về quy trình nghiệp vụ trong mô hình Scrum - Agile 12 2.4 Nghiên cứu công nghệ, kĩ thuật cho project 13

2.4.2 NgRx - state management framework 14 2.4.3 Angular Material 15 2.4.3.1 Virtual Scroll for large data rendering 15 2.4.3.2 Tree view rendering 16 2.4.4 Unit test với Jasmine 17 2.4.5 CI/CD bằng Azure DevOps và SonarCloud 17 2.5 Tham gia project thực tế với khách hàng 18 CHƯƠNG 3 - CHI TIẾT VỀ PROJECT 19

3.1.2 Một số chức năng chính 19 3.1.3 Thành phần thực hiện 20

3.2.1 Use case đảm nhiệm 20 3.2.1.1 Nested collections 21

3.2.1.2 Collection sidebar 21 3.2.1.3 Type division 21 3.2.1.4 Create/Edit smart collection 22 3.2.1.4 Delete Smart collection 22 3.2.2 Quy trình làm việc 23

4.1 Các kết quả đạt được và ưu điểm 30

4.3 Hướng phát triển và một số cảm nhận về quá trình thực tập 32

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ânviên trong đội ngũ nhân sự của mình trên phạm vi toà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 độ chuyên 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

Ngoà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 typhần mềm của riêng mình thông qua vườn ươm khởi nghiệp (startup incubator) nội bộ, KMSLabs

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.

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ó hoàn cảnh khó khăn cơ hội việc làm côngbằ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 đồngcủ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 giancho 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ậngiả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ềmxuất sắc Cùng nhiều giải thưởng lớn

+ 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ảnphẩ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

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)

+ 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ácthô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áccô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ẫncá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à tuân 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ả trongdoanh nghiệp

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

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 để hoà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ắcclean code, các mẫu thiết kế, an toàn trong ứng dụng web, khía cạnh testing đối vớideveloper,

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)

+ 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 soá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

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ựchiệ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ôngviệ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 đượcgiao 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ữngframeworks front end mạnh mẽ nhất, thích hợp cho việc build nhanh các website dạng SinglePage 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:

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 collectionmanagement 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

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 toán quản lí statecủ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ởichí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 toá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 scrollchuộ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ự độngthê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ềunà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

Hoạt động của Virtual Scroll

Có nhiều cách để xử lí bài toán này, trong Angular Material có 1 CDK phục vụ nhucầu này tên là

<cdk-virtual-scroll-viewport>

https://material.angular.io/cdk/scrolling/overview

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ì yê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ế

https://material.angular.io/cdk/tree/overview