Báo cáo thực tập lập trình front end bằng angular cho franksalt epic

1

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 FRONT-END BẰNG ANGULAR
CHO FRANKSALT EPIC

Cơng ty thực tập

: Công ty TNHH Giải pháp Phần mềm TISOHA

Người phụ trách

: Võ Hoàng Đức Khoa

Thực tập sinh

: Nguyễn Tấn Tiến

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

Phạm Văn Lượng

Phạm Xuân Bách


2

LỜI MỞ ĐẦU

Trong cuộc cách mạng công nghiệp 4.0, công nghệ thơng tin nói chung và ngành Cơng
nghệ phần mềm nói riêng ln là nhân tố đóng vai trị quan trọng trong q trình phát triển của
xã hội.
Cơng nghệ Web, hay công nghệ sản xuất các trang web đã và đang phục vụ hầu hết các
nhu cầu của con người từ bán hàng, dạy học đến thông tin liên lạc,... Hiện nay đã có đến hơn 1.7
tỷ trang web, nhưng nhu cầu tạo ra những trang web mới vẫn chưa có dấu hiệu giảm.
Do đó, một trang web muốn được nhiều người sử dụng phải đáp ứng được yếu tố hình
thức và nội dung. Làm thế nào để sản phẩm tạo ra đạt chất lượng cao ở hai yếu tố trên ln làm
bất kì một đội ngũ phát triển website nào cũng cần phải suy nghĩ đau đầu. Để thử thách bản thân
trong ngành công nghiệp web, em đã lựa chọn thực tập với vị trí Front-End là định hướng cho
việc học tập và nghiên cứu sâu hơn trong quy trình sản xuất web.
Angular là một framework do google tạo ra để xây dựng các ứng dụng một trang (SPA)
bằng javascript, html và typescript, ra đời vào nằm 2009 với phiên bản đầu tiên là AngularJS,
qua tới Angular 2 năm 2015 thì chuyển thành TypeScript, vì ra đời lâu nên angular có cộng
đồng người dùng đơng đảo, có hỗ trợ đầy đủ cũng như các tài liệu học tập rất nhiều, nhiều
người nói học angular khơng dễ, vì nó là một framework rất mạnh mẽ, nhưng khơng vì thế mà
em từ bỏ, với sự ham học hỏi, em mong mình có thể nắm được các kiến thức nâng cáo trong
angular, từ đó áp dụng được nó vào đồ án thực tế.
Bên cạnh thời gian 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 chuyên nghiệp, em có dự định là
sẽ thực tập trong kì này. Vì vậy, em quyết định chọn cơng ty TISOHA là nơi sẽ giúp em thực
hiện được dự định này.

Phạm Văn Lượng

Phạm Xuân Bách

3

Phạm Văn Lượng

Phạm Xuân Bách


4

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty TNHH Giải pháp Phần mềm TISOHA đã 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 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ể thành thạo việc lập trình
Web Front-End với Angular.
Đặc biệt cảm ơn anh Nguyễn Văn Dũng, đã training về Angular, hướng dẫn, hỗ trợ em
rất nhiều từ các vấn đề kỹ thuật đến những khó khăn trong cơng việc; cảm ơn anh Võ Hoàng
Đức Khoa, đã giúp đỡ cho em tận tình những khó khăn việc làm quen với mơi trường mới. Cảm
ơn anh Đỗ Công Bá đã tạo văn hóa cơng ty lành mạnh, chun nghiệp, đầy năng động giúp em
hồn thành thực tập và có thêm niềm đam mê, nhiệt huyết với lập trình Web.
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.
Phạm Xuân Bách
TpHCM, ngày 17 tháng 12 năm 2022

Phạm Văn Lượng

Phạm Xuân Bách

5

NHẬN XÉT CỦA KHOA

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

Phạm Văn Lượng

Phạm Xuân Bách


6

MỤC LỤC
MỤC LỤC ................................................................................................................................ 6
CHƯƠNG 1. GIỚI THIỆU CÔNG TY THỰC TẬP ............................................................. 7
1.

GIỚI THIỆU CÔNG TY TNHH GIẢI PHÁP PHẦN MỀM TISOHA ......................................... 7

2.

SẢN PHẨM CỦA CÔNG TY ................................................................................................ 7

CHƯƠNG 2. NỘI DUNG THỰC TẬP ................................................................................... 9
1.

TÌM HIỂU CƠNG TY VÀ CÁC KỸ NĂNG CƠ BẢN TRONG CÔNG TY........................................ 9

2.

NGHIÊN CỨU KỸ THUẬT .................................................................................................. 9
2.1.

Các công cụ làm việc .............................................................................................. 9

2.2.

Tìm hiểu ngơn ngữ TypeScript, HTML, CSS ......................................................... 10

2.3.

Nghiên cứu tài liệu và những kỹ thuật về Angular................................................. 11

2.4.

Nghiên cứu tài liệu và những kỹ thuật về RXJS ..................................................... 12

2.5.

Thực hành xây dựng máy chủ API cho dự án FrankSalt Epic Platform ................. 14

3.

THỰC HIỆN PROJECT ..................................................................................................... 14

4.

LỊCH LÀM VIỆC ............................................................................................................. 14

CHƯƠNG 3. CHI TIẾT VỀ PROJECT ............................................................................... 16
1.

GIỚI THIỆU VỀ PROJECT................................................................................................. 16

2.

CÁC CÔNG VIỆC ĐÃ LÀM ............................................................................................... 17

3.

2.1.

Cài đặt, chạy thử dự án ........................................................................................ 17

2.2.

Tạo trang Property-orther-detail .......................................................................... 18

2.3.

Tạo trang Agreement-search .................................... Error! Bookmark not defined.

2.4.

Một số công việc khác........................................................................................... 19

KẾT QUẢ ....................................................................................................................... 19

TÀI LIỆU THAM KHẢO ..................................................................................................... 21
TỔNG KẾT ............................................................................................................................ 22

Phạm Văn Lượng

Phạm Xuân Bách


7

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

1. Giới thiệu Công ty TNHH Giải pháp Phần mềm TISOHA

Công ty TNHH Giải pháp phần mềm TISOHA là một doanh nghiệp được thành
lập vào 10/2020 đến nay đã hoạt động được gần 2 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ỹ, Malta, Ú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.
TISOHA đ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.

Phạm Văn Lượng

Phạm Xuân Bách


8
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ề
chi phí.

Phạm Văn Lượng

Phạm Xuân Bách


9

Chương 2. Nội dung thực tập
Đợt thực tập với chủ đề “Lập trình Web Front-End bằng Angular cho FrankSalt
Platform” 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
Front-end, đồ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 web 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: 2 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, quá 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,
cách ước tính thời gian hồn thành cơng việc, sử dụng các phần mềm chuyên nghiệp cho
công việc,…
Kết quả: Hiểu thêm về cơng ty TISOHA, 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, các phần mềm 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 quá trình làm việc.
Trong thời gian này, người phụ trách đã 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ư

Phạm Văn Lượng

Phạm Xuân Bách

10
Slack – Phần mềm chat, report công việc hàng ngày của công ty, Jira – Ứng dụng
theo dõi và quản lý quy trình phát triển phần mềm, Redmine – Cơng cụ quản lý và
theo dõi, kiểm soát các vấn đề của dự án, Visual Studio Code – Trình chỉnh sửa mã
nguồn, Git – Hệ thống quản lý các phiên bản mã nguồn phân tán, Gitlab – Phần mềm
quản lý kho mã nguồn Git,…
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àm quen và sử dụng được những phần mềm đã nêu trên.
2.2. Tìm hiểu ngơn ngữ TypeScript, html và css
Thời gian: 4 ngày (1 tuần).
Nội dung: Được training về TypeScript, HTML và CSS.
-

TypeScript là một phiên bản cao hơn của JavaScript, được thiết kế để xây dựng các
ứng dụng lớn và phức tạp. Nó kế thừa nhiều khái niệm từ Java và C#, TypeScript là
ngôn ngữ tĩnh (Static typed) có nghĩa là nó nghiêm ngặt và có trật tự trái ngược với
free-type. Nó cịn được bổ sung thêm lớp hướng đối tượng mà điều này khơng có ở
Javascript.

-

HTML và CSS là 2 ngơn ngữ được dùng nhiều nhất trong lập trình web, với html là
khung sườn của 1 trang web, là nơi là ta dùng để “vẽ” ra kết cấu, layout của trang
web bằng các thẻ html, và CSS là lớp sơn, lớp tragn điểm để ta có thể tuỳ chỉnh giao
diện, màu sắc, hình ảnh bằng các class, rồi áp dụng class đó vào các thẻ của HTML

-

Kiểu dữ liệu và khai báo biến trong TypeScript.

-

Các toán tử trong TypeScript.

-

Các cấu trúc điều kiện và vịng lặp trong TypeScript.

-

Hàm, Class và Mơ-đun trong TypeScript.

-

Lập trình hướng đối tượng trong TypeScript.

-

Các thẻ cở bản trong html và cách để áp dụng thuộc tính css vào html

-

Các thuộc tính css cơ bản

Phạm Văn Lượng

Phạm Xuân Bách

11
-

Ngồi ra cịn có các case-study nâng cao để sinh viên thực tập tìm hiểu thêm như
Decorators, Error Handling, Generators, Testing,…

Thực hiện:
-

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

-

Nghiên cứu, kết hợp thực hành tài liệu mà công ty cung cấp.

Kết quả:
-

Nắm được kiến thức TypeScript, HTML và CSS cơ bản.

2.3. Nghiên cứu tài liệu và những kỹ thuật về Angular
Thời gian: 8 ngày (2 tuần).
Nội dung: Các kiến thức cơ bản về Angular framework.
-

Data Biding, flow chạy của một project Angular
Tìm hiểu về luồng chạy của một project Angular, cách data binding trong project.

-

Directive.
-

Directive là những thành phần mở rộng cho các thẻ html dùng bổ trợ các thuộc
tính nâng cao cho các thẻ html.

-

Form.
Form hay biểu mẫu là một thành phần khá quan trọng trong các hệ thống/cơng ty
hiện nay. Do đó các ứng dụng sẽ có thể có khá nhiều ứng dụng cần phải thiết lập chức
năng Forms để có thể thu thập thơng tin cần thiết của người dùng. Angular là một
full-fledged framework, nó đã cung cấp sẵn hai giải pháp cho Forms là Templatedriven Forms và Reactive Forms hay còn gọi làm Model-driven Forms.
-

Template-driven Forms: Cơ chế hoạt động của dạng forms này sẽ chủ yếu dựa vào
các directives trên template như NgForm, NgModel, required, etc; để làm việc.

Phạm Văn Lượng

Phạm Xuân Bách


12
Form dạng này sử dụng Two-way binding để update data model giữa template và
component.
-

Reactive Forms: Chúng ta sẽ xây dựng form từ các model, là các object có một số

chức năng đặc biệt để quản lý được các form input. Nó cũng sử dụng một số
(nhưng rất ít) các directives.

-

Router.
Trong Angular 2, 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. Với các ứng dụng web thông thường, việc điều hướng theo
URL thường sẽ do phía server đảm nhiệm.

Thực hiện:
-

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

-

Làm các bài tập thực hành từ hướng dẫn của tài liệu.

-

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 về Directive, Template, Form, Router.

-

Xây dựng được một trang web cơ bản với Angular.

-

Hiểu hơn về lập trình Web Front-end.

2.4. Nghiên cứu tài liệu và những kỹ thuật về RXJS
Thời gian: 5 ngày.
Nội dung: Các kiến thức cơ bản về RXJS.
-

Observable.

Phạm Văn Lượng

Phạm Xuân Bách


13
đại diện cho ý tưởng về một tập hợp các giá trị hoặc các sự kiện trong tương lai.
Khi các giá trị hoặc sự kiện phát sinh trong tương lai, Observable sẽ điều phối nó đến
Observer.

-

-

Tương tự như Promise, coi mọi thứ là các steam.

-

Có thể handle nhiều value asynchronous.

-

Có thể biến đổi value thành các dạng mong muốn ở cuối stream.

Observer.
Observer là một tập hợp các callbacks tương ứng cho việc lắng nghe các giá trị
(next, error, hay complete) được gửi đến bởi Observable.

-

Subscription.
Subscription là kết quả có được sau khi thực hiện một Observable, nó thường
dùng cho việc hủy việc tiếp tục xử lý.

-

Operator.
Operators là các pure functions cho phép lập trình functional với Observable. Các
loại operator như:
-

Creation Operator

-

Transformation Operator

-

Filtering Operator

-

Combination Operator

-

Error Handling và Conditional operator

-

Higher Order Observable và Ultility Operator

Phạm Văn Lượng

Phạm Xuân Bách


14
Thực hiện:
-

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

-

Thực hành lấy, sử lý và quản lí dữ liệu từ api.

-

Áp dụng các operator để tối ưu hoá việc lấy dữ liệu.

Kết quả:
-

Nắm được các kiến thức cơ bản về RXJS.

-

Biết cách xử lí việc lấy dữ liệu từ api.

2.5. Thực hành tạo page front-end cho dự án FrankSalt Platform
Thời gian: 1 tháng.
Nội dung: Thực hành các kiến thức đã học và tìm hiểu được để xây dụng trang Web theo
yêu cầu của người hướng dẫn.
Kết quả: Xây dựng được một trang web đáp ứng được những yêu cầu đặt ra.
3. 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ề API, Python, FastAPI, Docker. Trong tháng thứ hai, trainer đã hướng dẫn
thực tập sinh áp dụng những kiến thức đã học để tham gia thực chiến dự án mới của cơng
ty.
Chi tiết thực hiện dự án sẽ được nói ở phần sau.
4. Lịch làm việc

Tuần

Phạm Văn Lượng

Cơng việc

Người hướng dẫn

Mức
độ
hồn
thành

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

Phạm Xuân Bách


15
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,
Slack, Jira.
- Tìm hiểu ngơn ngữ
lập
trình

TypeScript, html,
css nâng cao.
- Thực
hành
TypeScript, html,
css.
- Làm ứng dụng
demo.
- Tìm
hiểu
về
Angular.
- Tìm
hiểu
về
Angular.
- Làm ứng dụng
demo với Angular.
- Tìm hiểu RXJS.
FrankSalt
Epic
Platform:
- Đọc tài liệu, đọc mã
nguồn dự án.
- Tham gia Meeting.
- Chạy thử dự án.
- Tạo trang propertyorther-detail.
FrankSalt
Epic
Platform:

- Tạo page contract-

1

2

3

4

5

6

Phạm Văn Lượng

Anh Võ Hoàng
Đức Khoa, Nguyễn
Văn Dũng.

Anh Nguyễn Văn
Dũng.

Anh Nguyễn Văn
Dũng.
Anh Nguyễn Văn
Dũng.

Anh Võ Hoàng
Đức Khoa, Nguyễn

Văn Dũng.

Anh Võ Hoàng
Đức Khoa, Nguyễn
Văn Dũng.

Phạm Xuân Bách


16

7

8

detail.
- Tạo
page
Agreement-search.
FrankSalt
Epic
Platform:
- Thêm form vào
page contract-detail.
- Tạo
page
properties-search.
FrankSalt
Epic
Platform:

- Sửa lỗi ở page
property-ortherdetail.
- Tạo
page
saleagreement.
- Báo cáo cuối đợt
thực tập.

Anh Võ Hoàng
Đức Khoa, Nguyễn
Văn Dũng.

Anh Võ Hồng
Đức Khoa, Nguyễn
Văn Dũng, Đỗ
Cơng Bá.

Chương 3. Chi tiết về project
1. Giới thiệu về project
FrankSalt Epic Platform là một nền tảng Quản lí và bn bán bất động sản.

Phạm Văn Lượng

Phạm Xuân Bách


17
2. Các công việc đã làm
2.1. Cài đặt, chạy thử dự án

Nội dung: Clone source code và chạy thử dự án.
Thực hiện:
-

Cài đặt vscode, Git và đăng nhập Gitlab.

-

Đọc tài liệu về dự án và tài liệu hướng dẫn.

-

Cài đặt pre-commit.

Phạm Văn Lượng

Phạm Xuân Bách


18
2.2. Tạo trang property-orther-detail

Nội dung: tạo trang property-orther-detail.
Thực hiện:
-

Đọc tài liệu yêu cầu của task.

-

Tạo model, router, property-orther-detail page.

-

Tạo mock data

-

Testing page.

Phạm Văn Lượng

Phạm Xuân Bách


19
2.3. Tạo trang Agreement-search

Nội dung: Tạo trang Agreement-search và filter được trên agreement-table.
Thực hiện:
-

Đọc tài liệu yêu cầu của task.

-

Tạo model, filter, filter header.

-

Testing filter

2.4. Một số công việc khác
-

Sửa lỗi trên các page.

-

Phụ thêm form vào page.

3. Kết quả
Xây dựng thành công các trang web theo yêu cầu của người hướng dẫn.

Phạm Văn Lượng

Phạm Xuân Bách


20

Phạm Văn Lượng

Phạm Xuân Bách


21

TÀI LIỆU THAM KHẢO
- Anular Tutorial – 100-days-of-angular/README.md at master · angularvietnam/100-days-of-angular (github.com) [Lần truy cập cuối: 17/12/2022].

- RXJS Guides – Angular - The RxJS library [Lần truy cập cuối: 17/12/2022].

Phạm Văn Lượng

Phạm Xuân Bách


22

TỔNG KẾT

Như vậy, sau 2 tháng thực tập tại TISOHA, em đã học được nhiều kinh nghiệm bổ
ích về lập trình front-end web với Angular và hồn thành các nhiệm vụ được giao. Nhờ
đó, em đã hiểu được quy trình phát triển của một dự án, đồng thời hiểu được trải nghiệm
làm dự án thực tế, tăng kĩ năng giao tiếp, xử lí tình huống.
Chân thành cảm ơn Cơng ty TNHH Giải pháp Phần mềm TISOHA đã tạo điều
kiện cho em được thực tập tại công ty. Đặc biệt cảm ơn sự giúp đỡ của các anh nhóm
trainer TISOHA đã giúp đỡ tận tình cho em trong thời gian thực tập tại công ty.

Phạm Văn Lượng

Phạm Xuân Bách