Báo cáo thực tập lập trình FRONT END VIDOLE

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 VIDOLE

Cơng ty thực tập: Ant-Tech Company
Người phụ trách: Nguyễn Xuân Huy - Nguyễn Hồng Qn
Thực tập sinh: Phan Thanh Hồng

TP. Hồ Chí Minh, 20 tháng 1 năm 2021

Phan Thanh Hoàng


LỜI MỞ ĐẦU

Trong thời đại 4.0, khi gần như mọi thông tin đều được đưa lên các trang web, mảng phát
triển và thiết kế web đóng vai trị là một trong những ngành quan trọng công nghệ thông
tin. Do nhu cầu người dùng ngày càng cao nên việc phát triển web có tốc độ phát triển vơ
cùng mạnh mẽ, liên tục thúc đẩy ngành công nghệ thông tin.
Việt Nam không phải ngoại lệ. Các công ty web ở nước ta khơng ngừng phát triển để theo
kịp, hịa nhập và cạnh tranh với các thị trường quốc tế.
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ư
tham gia vào môi trường làm việc chuyên nghiệp nên em đã quyết định đi thực tập kì này.
Vì vậy, em quyết định chọn Ant-Tech company- 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.

Phan Thanh Hoàng

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty Ant-tech company đã 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 website.
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 hoàn thành đợt thực tập này.
Đặc biệt cảm ơn anh Nguyễn Xuân Huy và anh Nguyễn Hồng Quân đã hướng dẫn, hỗ trợ
em trong lúc tìm hiểu và làm việc với framework Angular 2+, giải đáp thắc mắc về restful api,
TypeScript, và các vấn đề khác liên quan đến http và OOP trong JavaScript
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.
Phan Thanh Hoàng
TpHCM, ngày 15 tháng 1 năm 2021

Phan Thanh Hoàng


NHẬN XÉT CỦA KHOA

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

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

Phan Thanh Hoàng


MỤC LỤC

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

Giới thiệu công ty Ant-tech Company ...................................................................................... 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 ngơn ngữ Javascript, Typescript, framework Angular 2+ .................................. 7

2.3.

Lập trình website trên framework Angular 2+ .................................................................... 8

3.

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

4.

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

Chương 3: Chi tiết về project ................................................................................................................ 10
1.1.
2.

Home page .......................................................................................................................... 10
Kế hoạch .................................................................................................................................... 10

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

Phan Thanh Hoàng


Chương 1: Giới thiêu công ty thực tập
1. Giới thiệu công ty Ant-tech Company
Ant-tech Company là công ty out-souce, công ty hiện đang có 2 trụ sở, 1 ở bên Pháp
và 1 ở Việt Nam, Cơng ty đã có nhiều dự án lớn như Polymate, Joynit, Yoggy. Riêng
dự án joynit có cả 2 bản là mobile và web
Năm 2020 cơng ty quyết định thực hiện một dự án nữa mang tên Vidole với mục
tiêu là giúp đặt sách online kể về các câu chuyện ở vùng Châu Phi và Ấn độ.

2. Sản phẩm của công ty
- App, Web Joynit trên nền tảng mobile được phát hành năm 2020. Là một web
kiểu mạng xã hội sự kiện, nơi mọi người có thể tạo sự kiện, mời người tham
gia và lưu lại hình ảnh của sự kiện nhất định.
- Trong Năm 2020 công ty nhận được 1 dự án khác của một khách hàng ở Pháp
một dự án khác về kinh doanh sách online.

Phan Thanh Hoàng


Chương 2: Nội dung thực tập
Khi tham gia thực tập cùng với công ty, em được tham gia vào dự án Vidole với vai trò là
front-end của dự án. Đây là một sản phẩm về mảng kinh doanh

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, 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 Ant-tech, 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.

2.2.

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 quá 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, Postman– một phần mềm test api, Vscode và các extension
hỗ trợ
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.
Tìm hiểu ngơn ngữ Javascript, Typescript, framework Angular 2+
Thời gian : 7 ngày (1 tuần)
Nội dung : Được training về các kỹ thuật Javascript nâng cao, những kiến thức quan
trọng cho việc tối ưu trên browser
- Lập trình hướng đối tượng
Các kiến thức cơ bản 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..
- Quản lý bộ nhớ
Thực tập sinh sẽ được hướng dẫn về cách cấp phát, quản lý bộ nhớ sao cho tối ưu,
tránh rị rỉ bộ nhớ.

Phan Thanh Hồng


Hiệu suất
Thực tập sinh được hướng dẫn cách code tối ưu để cải thiện suất chương trình
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.
-

Kết quả :
-

2.3.

Nâng cao kỹ năng lập trình với ngơn ngữ Javascript
Có được những kiến thức quan trọng cho việc lập trình front-end 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ổng hợp các qui tắc clean code trong js

Lập trình website trên framework Angular 2+
Nội dung : Lập trình với framework.
-

Định nghĩa về Angular 2+:
Angular2+ là một framework linh động dùng để thiết kế giao diện người dùng.
Được hỗ trợ bởi google và được tích hợp sẵn những phương thức để có thể làm việc
với website dễ dàng hơn như http client, rxjs, angular router, ...

-

Tạo website:
Được hướng dẫn tạo một website tĩnh bằng Angular2+, các kỹ thuật lập trình cùng
với cách quản lý data, chia thư mục.

3. Thực hiện project
Sau 2 tuần, thực tập sinh được training các kỹ năng lập trình để thực hiện project cùng với
các anh chị trong công ty. Tháng thứ 2, thực tập sinh được chia sẻ công việc cùng với anh
chị trong công ty để cùng làm.
Chi tiết đồ án sẽ được nói ở phần sau.
4. Lịch làm việc

Phan Thanh Hoàng


Tuần
-

1

-

2

-

3
4
5

-

6
7

Phan Thanh Hồng

-

Mức độ
Cơng việc
Người hướng dẫn
hồn
thành
Tìm hiểu về cơng ty, Anh Nguyễn Xn Hồn
cách tổ chức của Huy
thành
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.
Tìm hiểu ngơn ngữ Anh Nguyễn Hồng Hồn

lập trình nâng cao
Qn
thành
Thực hành Js và
Angular 2+
Thiết kế trang chủ Anh Nguyễn Hồng Hồn
Qn
thành
Responsive
cho Anh Nguyễn Hồng Hồn
trang web
Qn
thành
Tích hợp api
Anh Nguyễn Hồng Hoàn
Quân
thành
Thực hiện chức năng Anh Nguyễn Hồng Hồn
Chọn quẩn áo cho Qn
thành
nhân vật
Tích hợp api
Anh Nguyễn Hồng Hoàn
Quân
thành

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

Chương 3: Chi tiết về project
1. Giới thiệu về project Vidole
1.1.
-

1.2.
-

Home page
Trang login là phần để user thực hiện đăng nhập

Responsive design
Mơ tả: giúp giao diện trang web thích ứng với mỗi màn hình điện thoại, máy tính
cụ thể

2. Kế hoạch
Giai đoạn 1:

Phan Thanh Hoàng


-

Hồn thành Trang home page, chỉnh sửa các trang cịn lại của trang web đúng
design của khách hàng
Reponsive website cho mọi loại máy.

Kết quả :
-

Mục tiêu hoàn thành.

Giai đoạn 2:
- Hồn thành Chọn đồ, màu da, tóc cho nhân vật.
Kết quả :
-

Mục tiêu hoàn thành.

Phan Thanh Hoàng


TÀI LIỆU THAM KHẢO

For framework
/>For languages
/>
For package
/> />
Phan Thanh Hoàng


TỔNG KẾT

Như vậy, chỉ trong vòng 10 tuần ngắn ngủi, em được tham gia vào dự án cùng với các anh
chị trong công ty để thực hiện vài chức năng của dự án. Những yêu cầu mà anh chị đưa ra trong
thời gian thực tập em đều hoàn thành.
Chân thành cảm ơn sự giúp đỡ của các anh chị trong cơng ty đã giúp em để có thể hồn
thành website này.

Phan Thanh Hoàng