Báo cáo thực tập lập trình front end và isb platform

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
VÀ ISB PLATFORM

Cơng ty thực tập

: TISOHA

Người phụ trách

: VÕ HOÀNG ĐỨC KHOA

Thực tập sinh

: NGUYỄN VĂN DŨNG

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


1

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ẽ, các ứng dụng trên 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ô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.
Lập trình web là những thứ không thể thiếu hiện nay. Bạn muốn quảng bá cơng ty của
mình để mọi người ở đâu cũng biết? Cách tiếp cận nhanh nhất là lập trình web. Vì lý do này, em
quyết định chọn vị trí front-end trong lập trình web làm định hướng cho việc học tập của mình.
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 game trong một môi trường chuyên nghiệp, em có dự định
là sẽ thực tập trong hè. Vì vậy, em quyết định chọn Tisoha - 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.


2

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty Tisoha Việt Nam đã 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 các anh chị, leader
trong team, 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 thể tự xây dựng một trang web hay một ứng dụng di động cơ bản. Chân thành cảm ơn các
anh chị trong nhóm đã 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 Đỗ Công Bá, người đã hết mình với em, đã tạo điều kiện, 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, những khó khăn việc
làm quen với mơi trường mới đến những khó khăn gặp phải trong cuộc sống; cảm ơn anh Trần
Nhật An, Nguyễn Văn Biên đã rất hòa đồng, training cho em về Flutter, hỗ trợ chúng em rất
nhiều về các vấn đề kỹ thuật và kiến trúc của ứng dụng di động; cảm ơn bạn Võ Hoàng Đức
Khoa, đã chỉ dẫn chúng em rất nhiệt tình về cơng nghệ Angular, đã lên kế hoạch, tạo nội dung
và bài tập trong lúc em học tập về Angular; Và cảm ơn tất cả mọi người trong nhóm, những
người đã đồng hành cùng mình trải qua bao nhiêu kỉ niệm, giúp cho em thay đổi một cách ngoại

mục cả về kỹ năng lẫn lối sống, giúp em học được nhiều điều 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.
Nguyễn Văn Dũng
TpHCM, ngày 20 tháng 10 năm 2022


3

NHẬN XÉT CỦA KHOA

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

4

Mục lục
Chương 1

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

1

Giới thiệu công ty Tisoha.................................................................................................................6

2

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

Chương 2

Nội dung thực tập..................................................................................................................8

1

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

2

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

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

2.2

Tìm hiểu ngơn ngữ TypeScript.................................................................................................9

2.3

Lập trình front-end với Angular...............................................................................................9

2.4

Nghiên cứu về thư viện Rxjs..................................................................................................11

2.5

Nghiên cứu về thư viện Rxjs..................................................................................................12

3

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

4

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

Chương 3

Chi tiết về dự án..................................................................................................................14

1

Giới thiệu về project.......................................................................................................................14

2

Các công việc đã thực hiện............................................................................................................14
2.1

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

2.2

Xây dựng agent card...............................................................................................................14

2.3

Xây dựng property card..........................................................................................................15

2.4

Xậy dựng single property page...............................................................................................16

Chương 4

TÀI LIỆU THAM KHẢO...................................................................................................18


5

Chương 1

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


6

1

Giới thiệu công ty 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 tồn cao, khả năng mở rộng và tiết kiệm chi phí cho khách
hàng.
Tisoha có văn phịng chính đặt tại Quận 1 thành phố Hồ Chí Minh, và một vài văn
phịng khác ở trên các quận của thành phố.
Trang web giới thiệu về công ty: tisoha.com

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 ln 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í.
Tuy mới là cơng ty start up chưa thu hút được nhiều công ty lớn tham gia nhưng
sản phẩm của cơng ty cũng đã có mặt ở một số nước như: Canada, India, Australia,
Mỹ, Malta… và hiển nhiên trong đó có Việt Nam.


7


8

Chương 2

Nội dung thực tập

Đợt thực tập đầu tiên với chủ đề “Lập trình web” 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 tạo ra một ứ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 năng động, hăng hái, tích cực..

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 anh Đỗ Công Bá 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 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 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 : 4 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.
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ư
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, GitLab – quản lý file giữa các thành viên trong nhóm và trong cơng ty.
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, giúp quản lý công việc và các file tốt hơn.


9

2.2 Tìm hiểu ngơn ngữ TypeScript
Thời gian : 2 ngày
Nội dung : Được training về ngôn ngữ Typesctript
- TypeScript là một ngơn ngữ lập trình được phát triển và duy trì bởi Microsoft. Nó
là một tập hợp siêu cú pháp nghiêm ngặt của JavaScript và thêm tính năng kiểu
tĩnh tùy chọn vào ngôn ngữ.

- 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.
- Ngồi ra cịn có các case-study nâng cao như: generic, union and intersection
type, anonymous function …
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 các tài liệu mà công ty, anh chị trong nhóm cung cấp.
Kết quả :
-

Nâng cao kỹ năng lập trình với ngơn ngữ Typescripts.
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.3 Lập trình front-end với Angular
Thời gian : 12 ngày (2 tuần)
Nội dung: Tìm hiểu về framework Angular.
-

Angular là gì
Angular là một nền tảng phát triển, được xây dựng trên TypeScript. Angular bao
gồm:
 Khung dựa trên thành phần để xây dựng các ứng dụng web có thể mở rộng
 Các thư viện được tích hợp tốt bao gồm nhiều tính năng khác nhau, bao gồm
routing, quản lý form, giao tiếp client-server, v.v.
 Một bộ công cụ dành cho nhà phát triển để giúp bạn phát triển, xây dựng, thử
nghiệm và cập nhật code của mình.

-

Component:


10

Là thành phần cấu tạo chính xây dựng nên một ứng dụng Angular. Nó bao gồm (1
HTML template, 1 typescript class và 1 CSS selector.
Component có thể là các trang trong trang web, có thể là các thành phần con trong
trang web đó. (Nó gần giống như Widget trong flutter).
-

Template
Ta có thể hiểu đơn giản đó là một bản thiết kế UI. Template được viết bằng
HTML với cú pháp sẵn có hoặc đặc biệt do Angular cung cấp.
Vì vậy HTML template hiển thị chế độ xem hoặc giao diện người dùng trong trình
duyệt giống như HTML thơng thường, nhưng có nhiều chức năng hơn.

-

Directive
Là một lớp bổ sung các hành vi cho các thành phần trong một ứng dụng Angular.
Sử dụng directive để: quản lý form, danh sách, style và những gì người dùng nhìn
thấy.
Có 2 loại directive: attribute directives và structural directives.

-

Dependency injection
Phần này khá là triều tượng, nhờ có mấy anh chị hướng dẫn nên em mới có thể
hiểu sơ sơ rằng, nó giúp cho Angular tạo ra các phụ thuộc mà Components,
Directives, Pipes, and Injectables cần, sau đó “injector” chúng ở đâu, tùy thuộc
vào yêu cầu của người code.

-

Form
Quản lý các nội dung người dùng nhập liệu một cách dễ dàng khi sử dụng form.

-

Routing
Một phần khá quan trọng trong Angular, nó giúp navigation và gửi dữ liệu giữa
các trang (page) với nhua.

-

Thư viện Rxjs
Là một thư viện cực kỳ quan trọng trong Angular.
Nó cung cấp các chức năng giúp chúng ta xử lý dữ liệu bất động bộ ( từ API,
Form hay từ các nguồn bất động bộ khác).
Nó áp dụng Obsever pattern.


11

Thực hiện :
-

Tham gia đầy đủ các buổi trainning.
Làm các bài tập thực hành như tạo ứng dụng todo web đơn giản.
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, nội dung cơ bản trong angular.
Tạo được ứng dụng cơ bản bằng Angular.

2.4 Nghiên cứu về thư viện Rxjs
Thời gian: 7 ngày (1 tuần)
Nội dung : Các tính năng trong thư viện Rxjs
-

Các đối tượng trong rxjs
Observable : Đạ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.
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 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ý.

-

Rxjs creation:
Khởi tạo một Observable. Chúng ta có các hàm như (of, from, interval,..)

-

RxJS Filtering:
Đúng với nghĩa của từ filter, những hàm này sẽ giúp chúng ta lọc các giá trị được
emit từ Observable gốc (filter, first, last, take…).

-

RxJS Combination:
Kết hợp nhiều Observable lại với nhau để xứ lý một số trường hợp như:
 Muốn cùng lúc trả về 2 API.
 Đợi API này trả về xong API mới thực hiện.


12

 Đợi 2 API cùng trả về mới emit.
-

RxJS Error Handling:
Bắt error khi có lỗi phát sinh.

-

Một số khái niệm nâng cao khác
RxJS Higher Order Observables, Rxjs Subject, Muticast,...

Thực hiện :
-

Tham gia đầy đủ các buổi training.
Tìm kiếm thêm các tài liệu trên mạng.
Nâng cấp todo web có sử dụng Rxjs.

Kết quả:
-

Nâng cấp thanh cơng todo web có sử dụng rxjs

2.5 Nghiên cứu về thư viện Rxjs
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 một những
component trong một trang web (ISB) theo yêu cầu của người hướng dẫn.
Kết quả: Hoàn thành đượ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ề TypeScript, Angular, thư viện Rxjs. 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 để thực chiến một dự án của công ty.
Chi tiết đồ án sẽ được nói ở phần sau.

4

Lịch làm việc
Tuần
1

Cơng việc

-

Người hướng
dẫn

Tìm hiểu về cơng ty, Anh Trần Nhật
cách tổ chức của An, Đỗ Cơng Bá,
cơng ty.
bạn Lê Thành

Mức
độ
hồn
thành

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


13

-

2

3
4

5

6

7

8

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
- Thực hành typescript
- Tìm
hiểu
về
Angular
- Tìm
hiểu
về
Angular.
- Xây dựng to do web
- Tìm hiểu về Rxjs
- Gắn rxjs vào todo
web
ISB platform, giai đoạn
1:
- Đọc tài liệu, đọc mã

nguồn dự án.
- Tham gia Meeting.
- Chạy thử dự án.
- Tạo các component
nhỏ.
ISB platform, giai đoạn
2:
- Viết
component
property card.
ISB platform, giai đoạn
3:
- Viết component agent
card
- Xây dựng single
property page.
ISB platform, giai đoạn
4:
- Hoàn thành single
property page.
- Testing gửi email.
- Báo cáo cuối đợt
thực tập.

Luân.

Bạn Võ Hoàng
Đức Khoa.

Bạn Võ Hoàng

Đức Khoa.
Bạn Võ Hoàng
Đức Khoa.
Bạn Võ Hoàng
Đức Khoa.

Bạn Võ Hoàng
Đức Khoa.
Bạn Võ Hoàng
Đức
Khoa,
Nguyễn Văn Đức.

Bạn Võ Hoàng
Đức Khoa.


14

Chương 3
1

Chi tiết về dự án

Giới thiệu về project
ISB platform là một dự án về thương mại điện tử dùng để giới thiệu quảng bá, bán
những ngôi nhà, biệt thự thông qua liên hệ các phân quyền. Giữa những chủ sở hữu,
những nhà mô giới và những đại lý với nhau. ISB platform được xây dựng trên công
nghệ Angular và .NET.

2

Các công việc đã thực hiện
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 đúng phiên bản Node (12.16.3)
- Đọc tài liệu về dự án và tài liệu hướng dẫn.
- Cài đặt angular, angular-cli. Và cài đặt node-module (npm install).
2.2

Xây dựng agent card

Nội dung: Xây dựng thẻ hiển thị thông tin của đại lý
Thực hiện:
- Đọc tài liệu, tham khảo giao diện, style css của ứng dụng.
- Tạo model, tạo component, viết query API.
- Đưa dữ liệu vào thẻ HTML.
- Kiểm tra dữ liệu có hiển thị đúng khơng, debug nếu có.
Kết quả:


15

2.3

Xây dựng property card

Nội dung: Xây dựng thẻ hiển thị nội dung của sản phẩm
Thực hiện:
- Đọc tài liệu, tham khảo giao diện, style css của ứng dụng.
- Tạo model, tạo component, viết query API.
- Đưa dữ liệu vào thẻ HTML.
- Kiểm tra dữ liệu có hiển thị đúng khơng, debug nếu có.
Kết quả:


16

2.4

Xậy dựng single property page

Nội dung: Xây dựng trang hiển thị nội dung chi tiết của sản phẩm
Thực hiện:
- Đọc tài liệu, tham khảo giao diện, style css của ứng dụng, tìm kiếm thêm
trên mạng.
- Tạo model, tạo cái component con, truyền dữ liệu từ component cha sang
con và ngược lại, viết query API.
- Đưa dữ liệu vào thẻ HTML.
- Kiểm tra dữ liệu có hiển thị đúng khơng, debug nếu có.
Kết quả:


17

18

Chương 4

TÀI LIỆU THAM KHẢO

For Typescript
/> />For Angular
100 day of Angular
Angular docs
For HTML, CSS
/> /> />

19

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 cùng typescript 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 Đỗ Cơng Bá và bạn Võ
Hồng Đức Khoa đã giúp đỡ tận tình cho em trong thời gian thực tập tại công ty.