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 Giải pháp phần mềm TISOHA
Người phụ trách: Võ Hoàng Đức Khoa
Thực tập sinh: Trần Hoàng Anh

Tp.HCM, tháng 6 năm 2023


1

LỜI MỞ ĐẦU
Ngày này, cùng với sự phát triển mạnh mẽ của internet, việc các tổ chức, doanh
nghiệp cũng như cá nhân sử dụng internet để làm công cụ truyền thông, cũng như sử
dụng website riêng cho tổ chức của mình
Cùng với xu hướng phát triển của thế giới, các doanh nghiệp Việt Nam cũng rất
nhanh chóng bắt kịp với đà phát triển này, làm cho thị trường phát triển ứng dụng web
cũng như ứng dụng di động phát triển vượt bậc. Theo đó, bên cạnh các ơng lớn làm về
mảng ứng dụng web, cũng có rất nhiều các cơng ty nhỏ cũng gia nhập vào cuộc đua cung
cấp dịch vụ này.
Hiện nay, ngành lập trình web là một ngành khá được ưa chuộng, là một ngành xu
thế trên thị trường. Cùng với sự phát triển chóng mặt của ngành công nghệ 4.0, nhu cầu
sử dụng website để quản bá, cũng như sử dụng website riêng cho tổ chức ngày càng lớn.
Vì thế em chọn lập trình web làm định hướng cho việc học tập của mình.
Sau 3 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ôi trường chuyên nghiệp, em đã chọn công ty

TISOHA – một môi trường lý tưởng, hiện đại, chuyên nghiệp làm nơi thực tập cho bản
thân mình

Trainer: Võ Hồng Đức Khoa

Trần Hoàng Anh


2

LỜI CẢM ƠN
Trân trọng cảm ơn công ty TISOHA đã tạo điều kiện cho em có cơ hội thực tập ở
công ty
Chỉ trong một thời gian ngắn, 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 rất nhiều kiến thức quan trọng trong q trình lập
trình web. Chân thành cảm ơn nhóm trainer đã 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 Võ Hoàng Đức Khoa, đã training Angular, hướng dẫn, giúp
đỡ em tận tình, từ những thứ nhỏ nhặt như làm quen mơi trường mới, làm quen cơng
việc. Ngồi ra, anh Khoa cũng là người đã training về html, css, js, ts, đã giúp đỡ em rất
nhiều khi gặp khó khăn trong q trình làm việc, để có thể tạo ra một sản phẩm trong thời
gian qua.
Ngoài ra, 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 cho em làm bài báo cáo này
Trần Hoàng Anh
TpHCM, ngày 25 tháng 6 năm 2023

Trainer: Võ Hoàng Đức Khoa

Trần Hoàng Anh

3

NHẬN XÉT CỦA KHOA

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

Trainer: Võ Hoàng Đức Khoa

Trần Hoàng Anh

4

MỤC LỤC

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

Giới thiệu công ty TISOHA:.................................................................................5

2.

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

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

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

2.

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

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

2.2.

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

2.3.

Tìm hiểu về scss cũng như viết css chuẩn......................................................7

3.

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

4.

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

Chương 3: Chi tiết về project.............................................................................................9
1.

Giới thiệu về trang web:.......................................................................................9
1.1.

Yêu cầu:.........................................................................................................9

2.

Thực hiện:............................................................................................................. 9

3.

Kết quả:................................................................................................................9

TÀI LIỆU THAM KHẢO................................................................................................19
TỔNG KẾT...................................................................................................................... 20

Trainer: Võ Hoàng Đức Khoa

Trần Hoàng Anh


5

Chương 1: Giới thiệu công ty thực tập
1. Giới thiệu công ty TISOHA:
Công ty TISOHA (tên đầy đủ: công ty TNHH Giải pháp phần mềm TISOHA)
được thành lập cuối năm 2020. Tuy cịn non trẻ, nhưng nhờ vào việc có lực lượng nhân
viên trẻ trung, sáng tạo, đa số đến từ các trường đại học lớn về công nghệ thông tin trong
nước như Bách Khoa, Công nghệ Thông tin, Khoa học Tự nhiên, … TISOHA nhanh
chóng khẳng định được vị thế của mình trong lĩnh vực cơng nghệ thơng tin.
2. Sản phẩm của cơng ty:
TISOHA tuy cịn non trẻ nhưng đã có các sản phẩm ghi dấu mình trên thị trường,
như trang web hiven, app hana trên di động, cũng như đang outsource cho các dự án nước
ngoài như ISB, SCEN, Knock

Trainer: Võ Hoàng Đức Khoa

Trần Hoàng Anh


6

Chương 2: Nội dung thực tập
Đợt thực tập với chủ để “Tạo trang quản lý 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 một trang web quản lý với giao diện

được thiết kế sẵn, đồ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 với khách hàng. 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 trọng một môi trường chun nghiệp
1. Tìm hiểu về cơng ty và các kỹ năng cơ bản
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, quy trình làm việc, cách
thức tổ chức, cũng như thời gian đi làm, cách thức làm việc, các quy định phải
tuân thủ, cách sử dụng các kênh liên lạc ở công ty
Kết quả: Hiểu thêm về cơng ty TISOHA, có thêm các kỹ năng về việc sử dụng
email trong công việc, cách thức làm việc cũng như 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: Test kỹ năng làm việc với Angular, cũng như 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, trainer đã hướng dẫn thực tập sinh tìm hiểu về các cơng
cụ sẽ sử dụng trong quá trình làm việc sau này như slack, redmine cũng như một
số extension hỗ trợ quá trình lập trình, cách sử dụng figma, jira. Ngoài ra, cũng tổ
chức test kỹ năng lập trình của thực tập sinh
Thực hiện: Thực hành sử dụng các công cụ, thử làm todo app bằng Angular
Kết quả: Đã biết sử dụng các công cụ nêu trên
2.2. Tìm hiểu về Angular
Thời gian: 2 ngày
Nội dung: Được training về Angular – một framework tương tự Reactjs
Trong thời gian này, trainer đã hướng dẫn thực tập sinh tìm hiểu về Angular,
biết về các tính năng chính của Angular như sử dụng RxJS, Typescript,
ReactiveForm, Guard,…

Trainer: Võ Hoàng Đức Khoa

Trần Hoàng Anh


7
Thực hiện:
-

Tham gia đầy đủ các buổi training của công ty
Tham gia các bài thực hành, kiểm tra về kiến thức đã học

Kết quả:
-

Biết được cách sử dụng Angular và các tính năng chính của nó
Biết cách triển khai code, cách viết code chuẩn

2.3. Tìm hiểu về Graphql cũng như làm quen với cách kết nối với backend bằng
Apollo-Angular
Thời gian: 3 ngày
Nội dung: Được training về Graphql, Apollo-Angular
Trong thời gian này, trainer đã hướng dẫn thực tập sinh cách sử dụng graphql,
apollo-angular để tạo ra một web app với front-end là Angular và kết nối với backend là .NET Graphql
Thực hiện:
-

Tham gia đầy đủ các buổi training của công ty
Tham gia các bài thực hành, kiểm tra về kiến thức đã học

Kết quả:
-

Biết về Graphql
Biết cách sử dụng query, mutation để thao tác với backend

3. Thực hiện project
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ề Angular, Graphql. Trong hai tháng còn lại, trainer đã hướng dẫn
thực tập sinh áp dụng kiến thức đã được học tạo một trang web quản lý bằng
Angular.

Trainer: Võ Hoàng Đức Khoa

Trần Hoàng Anh


8
4. Lịch làm việc
Tuần
Cơng việc
1
- 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
2
- Tìm hiểu kiến thức cơ bản lập trình

web và Angular
- Tìm hiểu Form, Validate, Router
- Tìm hiểu thư viện Rxjs, ApolloAngular
- Làm todo app bằng Angular
3
- Kiểm tra, sửa lỗi
- Làm quen với Graphql và kết nối
Backend graphql với project
4
- Làm lại task cũ trong dự án thực của
công ty
5
- Tham gia dự án thực của công ty
6
- Tham gia dự án thực của công ty
7
- Tham gia dự án thực của công ty
8
- Tham gia dự án thực của công ty
9
- Tham gia dự án thực của công ty
10
- Kiểm thử và sữa lỗi
- Báo cáo thực tập

Trainer: Võ Hoàng Đức Khoa

Người hướng dẫn
Anh Võ Hoàng Đức Khoa
Anh Đặng Hải Thịnh

Anh Võ Hoàng Đức Khoa

Anh Võ Hoàng Đức Khoa
Anh Võ Hoàng Đức Khoa
Anh Võ Hoàng Đức Khoa
Anh Võ Hoàng Đức Khoa
Anh Võ Hoàng Đức Khoa
Anh Võ Hoàng Đức Khoa
Anh Võ Hoàng Đức Khoa
Anh Võ Hoàng Đức Khoa

Trần Hoàng Anh


9

Chương 3: Chi tiết về project
1. Giới thiệu về trang web:
Đây là trang web được đặt làm bởi bên ISB – một trang quản lý mua bán bất động
sản
1.1.
-

Yêu cầu:
Phải hồn thành được 70% u cầu từ phía khách hàng
Về UI: sử dụng template được cho sẵn
Kết nối được với backend để trang web hoạt động trơn tru

2. Thực hiện:

- Người thực hiện: thực tập sinh Trần Hoàng Anh
- Và sự giúp đỡ tận tình của đội ngũ TISOHA
3. Kết quả:
- Đã hoàn thiện yêu cầu được giao
- Cách tổ chức project:

Trainer: Võ Hoàng Đức Khoa

Trần Hoàng Anh


10

-

Cách tổ chức một page:

-

Cách tổ chức một component

Trainer: Võ Hoàng Đức Khoa

Trần Hoàng Anh


11
-

Tổ chức các query, mutation graphql

Trainer: Võ Hoàng Đức Khoa

Trần Hoàng Anh


12
-

Một data table:

-

Reactive Form (Create)

Trainer: Võ Hoàng Đức Khoa

Trần Hoàng Anh


13
-

Reactive Form (Detail vs Update)

Trainer: Võ Hoàng Đức Khoa

Trần Hoàng Anh

14
-

Một query Graphql

Trainer: Võ Hoàng Đức Khoa

Trần Hoàng Anh


15
-

HTML

Trainer: Võ Hoàng Đức Khoa

Trần Hoàng Anh


16

-

Typescript

Trainer: Võ Hoàng Đức Khoa

Trần Hoàng Anh

17

-

Init page

-

Graphql – RxJS

Trainer: Võ Hoàng Đức Khoa

Trần Hoàng Anh


18
-

Table lazyload data

-

Init Reactive Form

Trainer: Võ Hoàng Đức Khoa

Trần Hoàng Anh

19

TÀI LIỆU THAM KHẢO
-

-

Angular: Angular - Introduction to the Angular docs, angular-vietnam/100days-of-angular: Series độc quyền cung cấp bởi thành viên của Angular
Vietnam về các chủ đề liên quan tới Angular trong vịng 100 ngày.
(github.com)
Graphql: Introduction – Angular (the-guild.dev)

Trainer: Võ Hồng Đức Khoa

Trần Hoàng Anh