Báo cáo thực tập lập trình WEB với ANGULAR

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 WEB VỚI ANGULAR

Cơng ty thực tập : Cơng ty TNHH MTV Tháng Chín
Người phụ trách :
Thực tập sinh

: Lê Minh Phúc– MSSV: 17520902

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


2

LỜI MỞ ĐẦU
Trong thời đại như hiện nay, công nghệ và Internet trở nên phổ biến và không
ngừng phát triển trong mọi lĩnh vực. Chính vì thế, phát triển Web đang trở thành một
yếu tố không thể thiếu trong chiến lược truyền thông của mọi doanh nghiệp trên thế
giới.
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át triển ứng dụng web ở Việt Nam đã và đang phát triển mạnh
mẽ trong mọi lĩnh vực về thương mại, quảng cáo, giáo dục,.. Ngành lập trình Web
được sinh ra là do nhu cầu truy cập, tìm kiếm thơng tin cũng như các nhu cầu khác.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ủ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 lập trình web trong một mơi trường chun nghiệp,

em có dự định là sẽ thực tập. Vì vậy, em quyết định chọn Tháng Chín - 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.

Lê Minh Phúc


3

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty TNHH MTV Tháng Chín đã 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 team mà em
đã có thể tiếp thu được những kiến thức quan trọng để có thể làm được một ứng dụng
web. Chân thành cảm ơn các anh chị trong team đã 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 Trần Ngọc Huy Tưởng, giám đốc công ty, đã cho em cơ
hội được thực tập tại công ty cũng như cơ hội được học hỏi và phát triển. Xin cảm ơn
anh Trần Hoài Hưng, team leader, đã giúp em làm quen với môi trường mới cũng như
phân công và hướng dẫn em trong các công việc được giao. Xin cảm ơn anh Phan
Hoàng Minh, đã trực tiếp training kiến thức lập trình giao diện website với Angular,
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 trong việc làm quen với mơi trường mới. Bên cạnh đó, em khơng qn gửi
lời cảm ơn đến tồn bộ các anh chị trong cơng ty, đã ln tận tình quan tâm giúp đỡ
em.
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.
Lê Minh Phúc
TP HCM, ngày 16 tháng 06 năm 2022

Lê Minh Phúc


4

NHẬN XÉT CỦA KHOA
………………………………………………………………………………………..
………………………………………………………………………………………..
………………………………………………………………………………………..
………………………………………………………………………………………..
………………………………………………………………………………………..
………………………………………………………………………………………..
………………………………………………………………………………………..
………………………………………………………………………………………..
………………………………………………………………………………………..
…..……………………………………………………………………………………
………..………………………………………………………………………………
……………..…………………………………………………………………………
………………..………………………………………………………………………
……………………..…………………………………………………………………
………………………..………………………………………………………………
…..……………………………………………………………………………………
…..……………………………………………………………………………………
………..………………………………………………………………………………
……………..…………………………………………………………………………
………………..………………………………………………………………………
……………………..…………………………………………………………………
………………………..………………………………………………………………
……………………………..…………………………………………………………

………………………………..………………………………………………………

Lê Minh Phúc


5

MỤC LỤC
LỜI MỞ ĐẦU ................................................................................................................. 2
Chương 1: Giới thiêu công ty thực tập......................................................................... 6
1.

Giới thiệu cơng ty Tháng chín ......................................................................................... 6

2.

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

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

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

2.

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

Các cơng cụ làm việc ................................................................................................ 7

2.2.

Tìm hiểu về Angular ................................................................................................. 8

2.3.

Tìm hiểu về project của team và quy trình làm việc .............................................. 12

3.

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

4.

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

Chương 3: Chi tiết về tham gia dự án ........................................................................ 16
1.

Giới thiệu về Web PinLearn .......................................................................................... 16

2. Chi tiết công việc và kế hoạch thực hiện .......................................................................... 16
2.1. Tạo trang User Profile................................................................................................ 16
2.2 Tạo trang My Lesson List và My Lesson Detail ........................................................ 17
2.3 Tạo trang Course create .............................................................................................. 19
2.4 Tạo trang course detail ................................................................................................ 23

TÀI LIỆU THAM KHẢO ........................................................................................... 26
TỔNG KẾT................................................................................................................... 27

Lê Minh Phúc


6

Chương 1: Giới thiêu công ty thực tập
1. Giới thiệu cơng ty Tháng chín
Cơng ty TNHH MTV Tháng chín được thành lập vào 09/2016 đến nay đã hoạt
động được gần 5 năm. Trong thời gian hoạt động, công ty đã nhận cung cấp dịch
vụ cho nhiều khách hàng tại Mỹ, Châu Âu, Úc và Singapore...nơi tập trung phát
triển ứng dụng trên nền web và lập trình ứng dụng cho điện thoại thơng minh.
Tháng Chín đem lại cho khách hàng những dịch vụ lập trình, gia cơng phần mềm
uy tín chất lượng với độ an toàn cao, khả năng mở rộng và tiết kiệm chi phí cho
khách hàng.
2. Sản phẩm của công ty
Sản phẩm của công ty chủ yếu là các dự án outsource về giáo dục, giải trí, thương
mại.
Cơng ty luôn mang đến cho khách hàng dịch vụ phát triển, gia cơng phần mềm
hồn hảo từ hỗ trợ, tư vấn, bảo trì đến phát triển các ứng dụng, phần mềm một cách
toàn diện. Các sản phẩm và giải pháp do cơng ty triển khai được đảm bảo mức độ
an tồn cao, có khả năng mở rộng, mang lại sự hài lòng về chất lượng và thỏa mãn
về tiết kiệm chi phí.

Lê Minh Phúc


7

Chương 2: Nội dung thực tập
Đợt thực tập với chủ đề “Lập trình web với Angular” nhằm mục đích giúp sinh

viên thực tập được đào tạo toàn diện về lập trình ứng dụng web với framework
Angular, đồ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 game chun nghiệp.
1. 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 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…
Kết quả : Hiểu thêm về công ty Tháng Chín, 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
2.1.

Các công cụ làm việc
Thời gian : 2 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.

Lê Minh Phúc


8

Trong thời gian này, team leader đã 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ư Trello - sử dụng trong quản lý cơng việc và làm việc nhóm,
Freshdesk – Phần mềm giao tiếp với khách hang, BitBucket và sourcetree –
quản lý source code.
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, so với việc dung các IDE.
2.2.

Tìm hiểu về Angular

Thời gian: 5 ngày (1 tuần)
Nội dung: Được training về framework angular, các kỹ thuật sử dụng trong
angular.
-

Tìm hiểu cơ bản về 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.
Angular được ứng dụng rộng rãi với mục đích xây dựng project Single Page
Application (SPA). Hiện tại, Version stable của Angular là Angular 9
(released on February 7, 2020) với TypeScript 3.6 và 3.7.
Lợi ích khi sử dụng Angular:
•

Angular giúp nâng cao năng suất của các lập trình viên.

•

Cấu trúc phát triển rõ rang

Lê Minh Phúc


9

•

Extension Binding

•

Hỗ trợ đầy đủ tính năng điều hướng (routing)

•

Angular giúp giảm tối đa kích thước và tăng tối đa hiệu suất của ứng
dụng

•
-

Document và cộng đồng (community)

Ngơn ngữ Typescript:
Tìm hiểu về các kiến thức lập trình cơ bản vói Typescript như kiểu dữ liệu,
khái báo biến, vòng lặp, huớng đối tượng, bất đồng bộ…

-

Component trong Angular:
Component là một lớp nó thường hiểu như là controller tương tác giao diện
người dùng. Một component thường có 3 thành phần chính là code
TypeScript, template HTML và CSS.

• Selector: Định nghĩa một CSS selector mà Component sẽ chèn nội
dung vào HTML. Nếu đặt tên như trên, thì sẽ chèn nội dung
Component nếu gặp thẻ <your-selector></your-selector>, nếu
muốn chỉ định như là một lớp CSS thì đặt tên ví dụ .your-selector thì

Lê Minh Phúc


10

nó có thể tìm đến phần tử <div class="your-selector"></div> để
chèn nội dung Component
• templateUrl: Chỉ ra file HTML làm template cho Component, nội
dung File HTML này như là view của Component, nó chứa các phần
tử HTML để hiện thị, nhập xuất dữ liệu ...
• styleUrls: Chỉ ra file css cho template của component
-

Data binding: Angular hỗ trợ 2 kiểu data binding:
• One way binding thì dữ liệu được truyền 1 chiều. Có thể từ view
sang component hoặc ngược lại từ component sang view.
• Two way binding có nghĩa là thay đổi dữ liệu từ component qua

view và ngược lại từ view chúng ta thay đổi dữ liệu.

-

Xử lí sự kiện
• Xử lí thao tác người dùng
• Xử lí sự kiện binding 2 chiều

-

Sử dụng NgModel: ngModel là một Directive dùng để liên kết dữ liệu với
client, nghĩa là nó thường được dùng để cho người dùng nhập liệu nên ta hay
sử dụng trong form html. Nhiệm vụ của ngModel: Liên kết View trong
model và một số directives khác như input, textarea hoặc select; cung cấp
các thao thác validate dữ liệu như kiểm tra kiểu dữ liệu có phải là số, là
email, ..;Kiểm sốt thơng tin từ client nhập vào có hợp lệ hay không và xuất
thông báo lỗi.

-

NgModule: Module là một khái niệm rộng nhất của Angular. Một module
có thể bao gồm chứa các components, directives, pipes, v.v. Các thuộc tính
của module được định nghĩa như sau:
•

imports: Định nghĩa sự phụ thuộc (Dependency) của module này,
module phụ thuộc sẽ được load trước rồi module này mới load.

Lê Minh Phúc

11

-

•

declarations: Định nghĩa tất cả các component sẽ được dùng trong
module này. Nếu chưa định nghĩa thì các component trong module
sẽ khơng thể gọi nhau vì khơng tìm thấy nhao.

•

bootstrap: Mỗi ứng dụng Angular đều cần một module gốc, module
này sẽ có một component gốc chứa layout gốc sẽ được render ra ở
file index.html.

Services: Một service là một đoạn code trong ứng dụng Angular mà phục vụ
cho tác vụ gì đó, xử lý code logic gì đó. Ví dụ handle (xử lý) data gửi nhận
từ/đến một API, hoặc cung cấp hàm authenticate...

-

Directives: Directives có thể hiểu như là các đoạn mã typescript (hoặc
javascript) kèm theo cả html và khi gọi thì gọi như là html ln. Các loại
directives:
• Components: Khơng có nghi ngờ gì khi gọi component là directive
cũng được, vì rõ ràng là component cho phép định nghĩa selector và
gọi ra như một thẻ html tag (<component-name>• Structural directives: Là directive cấu trúc, dùng để vẽ html, hiển thị

data lên giao diện html. Ví dụ ngFor, ngIf
• Attribute directives: Thêm các thuộc tính động cho element html, ví
dụ ngStyle

-

Router: Router là một module được đặt tại @angular/router, cung cấp cho
ứng dụng Angluar của chúng ta khả năng điều hướng và hiển thị nội dung
phù hợp với địa chỉ URL. Tìm hiểu về Router:
• Định nghĩa và load các routes vào app dùng Routes và
RouterModule
• Setting Route trong view sử dụng RouterLink, RouterLinkActive
• Load dữ liệu từ url thơng qua ActivatedRoute
• Chuyển trang (navigate) thơng qua Router.

Thực hiện :
-

Tham gia đầy đủ các buổi training của công ty.

Lê Minh Phúc


12

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

-

Có được những kiến thức quan trọng cho việc lập trình 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.
Tìm hiểu về project của team và quy trình làm việc

2.3.

Thời gian: 3 ngày
Nội dung : Tìm hiểu về project hiện tại của team bao gồm thông tin vể
project, source code và cài đặt mơi trường. Tìm hiểu về quy trình và phân
cơng cơng việc.
-

Project tham gia: Website dạy và học online PinLearn, sử dụng Angular
cho frontend và express.js cho backend.

-

Source code: Tìm hiểu về cấu trúc thư mục, thao tác với git và sourcetree

-

Cài đặt môi trường: Cài đặt các thư viện, IDE cần thiết.

-

Quy trình làm việc:
Làm việc theo mơ hình Agile Scrum: Là phương pháp phát triển phần
mềm linh hoạt dể làm sao đưa sản phẩm đến tay người dùng càng nhành
càng tốt càng sớm càng tố. Scrum là 1 dạng của mơ hình Agile và là
Framework phổ biến nhất khi thực hiện mô hình agile. Scrum là mơ hình
phát triển phần mềm lặp đi lặp lại. Những khoảng lặp cố định thường kéo
dài 1,2 tuần được gọi lại Sprint hoặc Iteration.

Lê Minh Phúc


13

Mỗi sprint sẽ kéo dài 2 tuần, mỗi sprint team leader sẽ phân công các task
cho các thành viên trong team, sau đó ước lượng thời gian, mỗi ngày sẽ
có buổi họp 30 phút để báo cáo những gì đã làm được, những gì có vấn đề
và những gì sẽ được làm.
Thực hiện :
-

Tham gia đầy đủ các buổi training.

-

Tạo ra những ứng dụng cơ bản, lập trình OpenGL ES trên Windows rồi

nhúng nó vào Android.

Kết quả:
-

Hiểu được cách bố trí trong một project cho một dự án lớn. Trình tự thực
hiện công việc trong một sprint.

-

Nâng cao kiến thức trong sử dụng Git để quản lý mã nguồn.

3. Thực hiện project
Sau 2 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ề Angular, project cần tham gia cũng như quy trình làm việc.
Trong thời gian còn lại, thực tập sinh được tham gia dự án đã tìm hiểu với tư
cách một lập trình viên frontend.
Chi tiết đồ án sẽ được nói ở phần sau.

Lê Minh Phúc


14

4. Lịch làm việc
Mức
Người hướng

Cơng việc

Tuần

dẫn

độ

Nhận xét của

hồn

người hướng dẫn

thành
-

Tìm hiểu về cơng Anh Trần Hồi
ty, cách tổ chức Hưng
của công ty.

-

Làm quen với các
công cụ làm việc

1

trong công ty.
-

Học

cách

trao

đổi, làm việc qua
email.
-

Tìm hiểu về lập Anh Trần Hồi
trình Angular

2

-

Hưng

Tìm hiểu về dự
án tham gia và
quy

trình

làm

việc
Tham gia dự án với Anh Phan
3

task cơng việc: Tạo Hồng Minh
trang user Profile
Tham gia dự án với Anh Phan

4, 5

task cơng việc: tạo Hồng Minh
trang

My

Lesson

Lisst và My Lesson

Lê Minh Phúc


15

Detail
Tham gia dự án với Anh Phan
6

task công việc: Tạo Hoàng Minh
trang Course create
Tham gia dự án với Anh Phan

7, 8

task cơng việc: Tạo Hồng Minh
trang course Detail

Lê Minh Phúc


16

Chương 3: Chi tiết về tham gia dự án
1. Giới thiệu về Web PinLearn
Pinlearn là website cho phép dạy và học online với 2 loại người dùng là Giáo viên và
Học sinh, gồm các chức năng chính:
-

Tạo hội thảo (webinar)

-

Đăng ký tham gia hội thảo

-

Tạo lớp học gia sư ( 1 on 1 class)

-

Đăng ký lớp học gia sư

-

Tạo khóa học (course)

-

Mua khóa học

-

Quản lý lớp học, khóa học, giao dịch,…

2. Chi tiết công việc và kế hoạch thực hiện
2.1. Tạo trang User Profile
-

Nội dung công việc: Sau khi người dùng tạo tài khoản thành công, mọi
thông tin của người dùng sẽ được hiển thị ở trang Profile. Người dùng có thể
chỉnh sửa thơng tin cá nhận ở đây

-

Thực hiện:

-

Thiết kế giao diện theo yêu cầu

-

Show thông tin cá nhân user

Lê Minh Phúc


17

-

Cập nhật thông tin

-

Kiểm thử lại

-

Push code và báo cáo hồn thành

-

Kết quả: Tạo trang thành cơng, thay đổi cập nhật thơng tin thành cơng

Hình 1 Trang user profile
2.2 Tạo trang My Lesson List và My Lesson Detail
• Nội dung công việc: Sau khi học sinh đăng ký lớp học, học sinh sẽ được
danh sách các lớp học mình đã đăng ký ở trang My Lesson list và xem chi
tiết ở trang My Lesson Detail.
-

My Lesson List: Các nội dung hiển thị bao gồm: Tên Giáo viên (Tutor
name), Tên lớp học (Subject / Group class), Kiểu đăng ký (Enroll Type),

Kiểu lớp học(Lesson Type), Đã thanh toán (Paid), Thời gian bắt đầu
(Start Time), Thời gian kết thúc (To Time), Ngày đăng ký (Created At),
Trạng thái lớp học (Status). Ngoài ra học sinh cịn có thể tìm kiếm theo

Lê Minh Phúc


18

tên giáo viên, tên lớp học và sort các thuộc tính được show trên danh
sách bảng.
-

.My Lesson Detail: Các nội dung hiển thị bao gồm: Tên Giáo viên (Tutor
name), Tên lớp học (Subject / Group class), Kiểu đăng ký (Enroll Type),
Kiểu lớp học(Lesson Type), Đã thanh toán (Paayment), Thời gian bắt đầu
(Start Time), Thời gian kết thúc (To Time), Giá (Price), Trạng thái lớp
học (Status)

• Thực hiện
-

Thiết kế giao diện theo yêu cầu

-

Show thông tin theo yêu cầu

-

Thực hiện phân trang

-

Tìm kiếm

-

Kiểm thử lại

-

Push code và báo cáo hồn thành

• Kết quả: Tạo trang thành công

Lê Minh Phúc


19

Hình 2 Trang My Lessons List

Hình 3 Trang My Lesson Detail
2.3 Tạo trang Course create
• Nội dung cơng việc: Giáo viên có thể tạo khóa học mới ở trang tạo mới
khóa học (Course create). Một khóa học bao gồm Thơng tin cơ bản
(Basic Info), Mục tiêu khóa học (Course Goals), Nội dung khóa học
(Course Lecture) và Khuyến mãi (Coupon).

Lê Minh Phúc


20

• Thực hiện
-

Thiết kế giao diện theo yêu cầu

-

Tạo tab Thông tin cơ bản: Bao gồm các thông tin như tên, giá tiền, thể
loại, lớp, video giới thiệu, ảnh đại diện, mơ tả,…

-

Tạo tab Mục tiêu khóa học

-

Tạo tab Nội dung khóa học: Bao gồm các session, mỗi session bao
gồm nhiều lecture, giáo viên có thể đăng tải video, file mp3 hoặc file
pdf lên lecture.

-

Tạo tab coupon: Cho phép giáo viên có thể tạo mã khuyến mãi cho
khóa học của mình

-

Kiểm thử lại

-

Push code và báo cáo hồn thành

• Kết quả: Tạo trang thành công

Lê Minh Phúc


21

Hình 4 Tạo thơng tin cơ bản cho khóa học

Hình 5 Tạo mục tiêu khóa học

Lê Minh Phúc


22

Hình 6 Tạo nội dung khóa học

Hình 7 Tạo mã khuyến mãi cho khóa học

Lê Minh Phúc

23

2.4 Tạo trang course detail
• Nội dung cơng việc: Hiển thị thơng tin các khóa học đã được quản trị
viên phê duyệt, bao gồm Thông tin cơ bản, Nội dung khóa học, Mục tiêu
khóa học, hoặc Khuyến mãi nếu có. Cho phép người dùng mua khóa học,
tặng khóa học và sử dụng mã khuyến mãi nếu có.
• Thực hiện
-

Thiết kế giao diện theo yêu cầu

-

Hiển thị thông tin theo yêu cầu

-

Hiển thị thơng tin nội dung khóa học: Chỉ học sinh đã mua khóa học
mới có thể xem nội dung các bài học của khóa học

-

Mua/Tặng khóa học

-

Sử dụng mã khuyến mãi

-

Kiểm thử lại

-

Push code và báo cáo hồn thành

• Kết quả: Tạo trang thành công, book thành công

Lê Minh Phúc


24

Hình 8 Trang course detail

Hình 9 Trang course detail

Lê Minh Phúc


25

Hình 10 Trang course detail

Lê Minh Phúc