Báo cáo thực tập lập trình angular và xây dựng ứng dụng quản lý quan hệ khách hàng

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 ANGULAR VÀ XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUAN HỆ
KHÁCH HÀNG

Công ty thực tập

TNHH ASSURE VIETNAM
GROUP

Người phụ trách

Trần Khánh Toàn

Thực tập sinh

Trương Thành Quang

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


LỜI MỞ ĐẦU

Ngày nay, lập trình 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 lập trì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.
Ngành lập trình web được sinh ra là do nhu cầu sử dụng Internet ngày càng phổ

biến bằng những thiết bị công nghệ mới nhất. Đồng thời Angular Framework là
framework phổ biến, được phát triển bởi Google. 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ũng như việc làm sau này 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 việc trong một mơi trường chun nghiệp, em có dự
định là sẽ thực tập vào khoảng thời gian cuối kì học thứ 5 và đầu kì học thứ 6. Vì vậy, sau
khi tham gia phỏng vấn ở một số công ty, em quyết định chọn công ty Assure Global
Group - một môi trường lý tưởng, hiện đại, chuyên nghiệp, trẻ trung - là nơi sẽ giúp em
thực hiện được dự định này.


LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty Assure Global Group đã 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 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
một ứng dụng web hoàn chỉnh. 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 hồn thành đợt thực tập này.
Đặc biệt cảm ơn anh Trần Khánh Toàn đã training về Angular Framework, 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 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 Thành Quang
TP.HCM, ngày tháng 12 năm 2022


NHẬN XÉT CỦA KHOA

………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………


Mục lục
Chương 1.

Giới thiệu công ty thực tập

1

1.1. Giới thiệu công ty TNHH ASSURE VIETNAM GROUP

1

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

1

Chương 2.

Nội dung thực tập

2

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

2

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

3

2.3. Tham gia dự án

7

2.4. Lịch làm việc

7

Chương 3.

Chi tiết về dự án

10

3.1. Giới thiệu về ứng dụng

10

3.2. Thực hiện

10

3.3. Kế hoạch và triển khai

10

Chương 4.

Tổng kết

TÀI LIỆU THAM KHẢO

14

15


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

1.1. Giới thiệu công ty TNHH ASSURE VIETNAM GROUP
Công ty TNHH Assure VietNam Group là công ty phát triển phần mềm outsourcing được
thành lập năm 2020, cơng ty có trụ sở tại Toroton, Canada. Công ty chuyên về các dự án
làm bằng Angular Framework.
1.2. Sản phẩm của công ty
Khách hàng của công ty chủ yếu đến từ Canada. Sản phẩm do công ty phát triển đa dạng
từ ứng dụng web, cho tới ứng dụng mobile, các dịch vụ kiểm thử, …


Chương 2. Nội dung thực tập
Đợt thực tập với chủ đề “Lập trình Angular Framework” 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 Angular Framework trong xây dựng
ứng dụ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 làm việc chun nghiệp.
2.1. Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty
2.1.1.1.

Thời gian

Ngày 22 tháng 08 năm 2022.
2.1.1.2.

Nội dung

Giới thiệu về công ty, cách tổ chức của công ty:
Được nghe người phụ trách 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…
2.1.1.3.

Kết quả

Hiểu thêm về công ty THNN Assure VietNam Group, 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.2. Nghiên cứu kỹ thuật
2.2.1 Các công cụ làm việc
2.2.1.1.

Thời gian

Ngày 22 tháng 08 năm 2022.
2.2.1.2.

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, 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ố phần mềm trong số đó như GIT - sử
dụng trong làm việc nhóm.

2.2.1.3.

Thực hiện

Thực hành sử dụng các phần mềm đã nêu trên.
2.2.1.4.

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,
tiếp cận với các công nghệ đang được sử dụng thực tế ở cơng ty.
2.2.2 Tìm hiểu ngơn ngữ TypeScript và các vấn đề nâng cao
2.2.2.1.

Thời gian

Từ ngày 22 tháng 08 năm 2022 đến ngày 29 tháng 08 năm 2022.
2.2.2.2.

Nội dung

Được training về các kỹ thuật nâng cao của TypeScript, những kiến thức quan trọng
cho việc tối ưu phía front-end.
● Lập trình hướng đối tượng


Các kiến thức 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 đối tượng trong dự án.
● Dependency Injection

Thực tập sinh sẽ được hướng dẫn về lí do sử dụng, cách triển khai Dependency
Injection cũng như nguyên lí Dependency Inversion trong Angular.
● Clean Architecture
Cách xây dựng một ứng dụng dựa trên kiến trúc Clean Architecture.
2.2.2.3.

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.
2.2.2.4.

Kết quả:

● Nâng cao kỹ năng lập trình với ngơn ngữ TypeScript.
● Có được những kiến thức quan trọng cho việc lập trình ứng dụng 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.
2.2.3 Lập trình giao diện với Angular và thư viện Lightning System
Design
2.2.3.1.

Thời gian

Từ ngày 29 tháng 08 năm 2022 đến ngày 05 tháng 09 năm 2022.


2.2.3.2.

Nội dung:

Các kiến thức cơ bản về Angular để có thể tạo ra phía giao diện của ứng dụng web.
Đồng thời sử dụng thư viện Lightning System Design để tinh chỉnh giao diện.
● Các khái niệm cơ bản về RxJS, Angular
Nắm được các khái niệm cơ bản về RxJS, Angular. Angular được xem là một open
source (mã nguồn mở) hay frameworks miễn phí chun dụng cho cơng việc thiết kế
web. Angular được phát triển từ những năm 2009 và được duy trì bởi Google.
Frameworks này được xem là frameworks front end mạnh mẽ nhất chuyên dụng bởi
các lập trình viên cắt HTML cao cấp.
Thư viện Lightning Design System cung cấp một tập hợp các thành phần UIđơn
giản, dễ dàng tinh chỉnh và truy cập.
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
Angular như Angular Lifecycle Hooks, RxJS, Form (Reactive Form), …, là những khái
niệm rất cơ bản và quan trọng trong lập trình Angular.
● Angular Lifecycle Hooks
Hooks cho phép chèn thêm những tác vụ cần thiết trong những khoảnh khắc quan
trọng trong quá trình khởi tạo cho đến khi phá hủy các component. Chúng ta có thể
khai thác những khoảnh khắc quan trọng trong vịng đời đó bằng cách triển khai một
hoặc nhiều interfaces trong thư viện lõi Angular.
● RxJS
RxJS là 1 thư viện rất tiện lợi cho việc xư lý bất đồng bộ (bao gồm cả việc xư lý
dựa trên sự kiện như 1 cú click chuột). Tất nhiên thì nói 1 cách đơn giản là 1 thư viện
"rất tiện lợi" nhưng mà ko hẳn là như vậy. Nếu tìm hiểu sâu hơn 1 chút, các bạn sẽ có


cảm giác thư viện này mang màu sắc "đổi mới, cách tân" chứ chỉ ko dừng ở khía cạnh
"tiện lợi".
● Reacctive Form
Phương pháp này tránh việc sử dụng các directive như là ngModel, required... thay
vào đó tạo các Object Model ở trong Component, rồi tạo ra form từ chúng..

2.2.3.3.

Thực hiện

● Tham gia đầy đủ các buổi trainning.
● Xây dựng giao diện sử dụng Angular và áp dụng thư viện Lightning Desgin
System.
● Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.
2.2.3.4.

Kết quả

● Hiểu được những khái niệm cơ bản trong lập trình giao diện với Angular.
● Hiểu được cách áp dụng Lightning Design System với Angular.
● Xây dựng thành công giao diện cho ứng dụng web có áp dụng RxJS và Reactive
Form.
2.3. Tham gia dự án
Sau hai tuần đượ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ề TypeScript, Angular. Trong một tháng tiếp theo, thực tập sinh được tham gia
vào dự án xây dựng giao diện bằng Angular. Một tháng rưỡi cuối cùng, thực tập sinh
được tham gia xây dựng ứng dụng hỗ trợ nhân sự của công ty sử dụng Lightning
Desgin System và Angular.


2.4. Lịch làm việc
Mức
Tuần

Cơng việc

Người

độ

hướng dẫn

hồn
thành

-

Tìm hiểu về cơng ty, cách tổ

Chị Trúc

100%

Tìm hiểu ngơn ngữ lập trình

Anh Kha,

100%

TypeScript và các kiến thức

Anh Tồn

chức của cơng ty
1

-

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

-

2

nâng cao
-

Tìm hiểu ngơn ngữ Typescipt
và framework Angular

-

Làm bài test về Angular

-

Tham gia dự án sử dụng

Anh Kha,

Angular để phát triển giao

Anh Toàn

3

100%

diện
4

Tham gia dự án sử dụng

Anh Kha,

Angular để phát triển giao

Anh Toàn

100%

diện
5

Tham gia dự án sử dụng

Anh Kha,

Angular để phát triển giao

Anh Toàn

diện

100%

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


6

Tham gia dự án sử dụng

Anh Kha,

Angular để phát triển giao

Anh Tồn

100%

diện
7

Lên ý tưởng, đề xuất u cầu,

Anh Kha,

cơng nghệ để tham gia xây

Anh Toàn

100%

dựng ứng dụng quản lý quan
hệ khách hàng

8

9

-

Bản thiết kế giao diện

Anh Kha,

100%

Anh Toàn
-

Xây dựng khung giao diện

Anh Kha,

-

Triển khai các tính năng đã đề

Anh Tồn

100%

xuất
10
11
12

-

Tiếp tục triển khai các tính

Anh Kha,

năng

Anh Tồn

Tiếp tục triển khai các tính

Anh Kha,

năng

Anh Tồn

-

Sửa lỗi và chuẩn bị demo

Anh Kha,

-

Thuyết trình sản phẩm

Anh Tồn

-

90%
100%
100%


Chương 3. Chi tiết về dự án
3.1. Giới thiệu về ứng dụng
Nhận thấy rằng việc quản lý thông tin nhân viên trong cơng ty khách hàng cịn thiếu
sót và thủ công, đồng thời việc xin nghỉ phép của nhân viên cịn rườm rà, khó ghi nhớ
thời gian nghỉ phép. Ứng dụng hỗ trợ nhân sự giúp theo dõi thông tin làm việc của
nhân viên, đồng thời giúp cho nhân viên xin nghỉ phép một cách dễ dàng hơn.
3.2. Thực hiện
Nhóm thực tập bao gồm 1 thành viên:
● Trương Thành Quang
Và sự giúp đỡ tận tình của các anh chị trong công ty TNHH Assure VietNam Group.
3.3. Kế hoạch và triển khai
3.3.1 Giai đoạn lên ý tưởng và đề xuất tính năng

3.3.1.1.

Nội dung

● Đề xuất yêu cầu functional và non-functional. Yêu cầu về cơng nghệ và hình
ảnh giao diện mẫu.
● Đề xuất các tính năng cốt lõi của ứng dụng và trình bày, giải thích.
3.3.1.2.

Kết quả:

● Đưa ra danh sách các user story của ứng dụng.
● Hình dung luồng hoạt động của ứng dụng.
● Xây dựng các bản vẽ tay cho giao diện.


3.3.2 Giai đoạn xây dựng khung sườn cho ứng dụng
3.3.2.1.

Nội dung

● Xây dựng khung ứng dụng phía front-end bằng Angular và tinh chỉnh giao diện
bằng thư viện Lightning Design System.
● Xây dựng việc kết nối ứng dụng với API có sẵn.
● Hồn thiện bản thiết kế giao diện.
3.3.2.2.

Kết quả

● Có thể tinh chỉnh giao diện bằng Lightning Design System và sử dụng các thành

phần của Angular.
● Hoàn thành kết nối với API.
● Hoàn thành bản thiết kế giao diện trên Figma.
● Hoàn thành sơ bộ cơ sở dữ liệu bao gồm các bảng quan trọng.
3.3.3 Giai đoạn triển khai tính năng
3.3.3.1.
Số thứ tự
1

2

Giai đoạn 1 – Các tính năng cơ bản

Tính năng

Nội dung

Đăng nhập, dăng Cho phép nhân viên

Hồn thành
Liên kết với cơ sở dữ liệu

xuất

đăng nhập

Thông tin nhân

Hiển thị thơng tin cá

Hồn thành việc hiển thị

viên

nhân nhân viên

thơng tin nhân viên

Hiển thị thơng tin làm

Hồn thành hiển thị số

việc

ngày phép còn lại, số ngày
phép đã dùng


3

Danh sách nghỉ

Hiển thị nơi chấm công

phép, chấm công cho nhân viên

Hồn thành phương thức
chấm cơng

Hiển thị danh sách nghỉ

Hồn thành hiển thị danh

phép theo loại

sách nghỉ phép theo loại

Hiển thị chi tiết thông tin
nghỉ phép

phép hằng năm và phép
không lương
Hiển chị những thơng tin
quan trọng của đơn nghỉ
phép

4

Lưu hình ảnh và

Lưu hình ảnh và file lên

Xử lý hình ảnh, file và lưu

file

cơ sở dữ liệu

trữ trên cơ sở dữ liệu
thành cơng

3.3.3.2.

Giai đoạn 2 – Tính năng cốt lõi

Số thứ tự

Tính năng

1

Danh sách nghỉ

Hiển thị danh sách nghỉ

phép

phép theo loại, theo ngày sách các loại khác

Tạo đơn nghỉ

Tạo đơn nghỉ phép và

Tạo mới đơn nghỉ phép có

phép

gửi tới người cấp trên

đính kèm và gửi tới người

trực tiếp và phê duyệt

quản lý và phê duyệt

Cho nhân viên ký lên

Tạo và lưu trữ file pdf

file pdf

trước và sau khi kí

2

3

Ký file pdf

Nội dung

Hoàn thành
Hoàn thành hiển thị danh


3.3.4 Giai đoạn nghiệm thu kết quả và báo cáo
Dựa trên các u cầu về tính năng, cơng nghệ, kiến trúc hệ thống, … sau hơn 1
tháng thực hiện dự án, nhóm thực tập đã hồn thành sơ bộ các tính năng cốt lõi đã đề
ra:
● Thơng tin chi tiết nhân viên

● Danh sách các đơn xin nghỉ phép
● Tạo mới đơn xin nghỉ phép
● Theo dõi đơn nghỉ phép của nhân viên và xét duyệt
● Tạo tính năng ký file pdf
Ngồi ra, nhóm cũng đề xuất một vài tính năng để phù hợp với quy trình làm việc
của cơng ty để thực hiện trong tương lai. Sau quá trình thực tập 3 tháng, nhóm thực tập
có một buổi trình bày về quá trình thực tập, về dự án đã thực hiện trong quá trình thực
tập với những anh chị cấp trên.


Chương 4.Tổng kết
Như vậy, chỉ trong vòng hơn một tháng ngắn ngủi, nhóm đã kịp hồn thành một
ứng dụng chạy trên nền tảng web. Ứng dụng đã có khá đầy đủ các tính năng đã đề ra
ban đầu. Do thời gian có hạn nên giao diện ứng dụng cịn đơn giản, hình ảnh chưa
được đẹp như mong đợi. Nhưng do ứng dụng phát triển theo kiến trúc có tính kế thừa,
dễ dàng mở rộng nên sau này khi có thời gian sẽ có thể phát triển lên mức cao hơn.
Chân thành cảm ơn sự giúp đỡ của các anh chị trong công ty TNHH Assure
VietNam Group, sự nỗ lực của nhóm thực tập để có thể hồn thành dự án.


TÀI LIỆU THAM KHẢO
Tài liệu tiếng Anh
[1] Angular . [Online]. Available: Angular
[2] Lightning Desgin System . [Online]. Available: Lightning Design System
[3] RxJS , "Overview". [Online]. Available: RxJS - Introduction