Báo cáo thực tập tạo landing page bằng next js

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

Tạo landing page bằng Next.js
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 Khánh Toàn

Tp.HCM, tháng 12 năm 2022


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

Nguyễn Khánh Toàn


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 Reactjs, 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, đã giúp đỡ em rất
nhiều khi gặp khó khăn trong q trình làm animation, để 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
Nguyễn Khánh Toàn
TpHCM, ngày 25 tháng 12 năm 2022

Trainer: Võ Hoàng Đức Khoa

Nguyễn Khánh Toàn

3

NHẬN XÉT CỦA KHOA

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

Trainer: Võ Hoàng Đức Khoa

Nguyễn Khánh Toàn

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ề Next.js.........................................................................................6

2.3.

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

2.4.
web

Tìm hiểu về thư viện GreenSock – thư viện hỗ trợ làm animation cho trang
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.................................................................................................12
TỔNG KẾT.......................................................................................................................13

Trainer: Võ Hoàng Đức Khoa

Nguyễn Khánh Toàn


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

Nguyễn Khánh Toàn

6

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

Đợt thực tập với chủ để “Tạo landing page bằng Next.js” 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 tĩnh với giao diện được
thiết kế sẵn cùng với animation, swiper, …, đồ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 Reactjs, cũng như 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, 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. Ngồ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 reactjs

Kết quả: Đã biết sử dụng các cơng cụ nêu trên
2.2. Tìm hiểu về Next.js
Thời gian: 2 ngày
Nội dung: Được training về Next.js – một framework của Reactjs
Trong thời gian này, trainer đã hướng dẫn thực tập sinh tìm hiểu về Next.js,
biết về các tính năng chính của Next.js như sử dụng tag <Link/>, tag <Image/>,
cách thức quản lý Server-side rendering của Next.js
Thực hiện:
Trainer: Võ Hoàng Đức Khoa

Nguyễn Khánh Toàn


7
-

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 Next.js 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ề scss cũng như viết css chuẩn
Thời gian: 3 ngày
Nội dung: Được training về css, scss
Trong thời gian này, trainer đã hướng dẫn thực tập sinh cách tổ chức code cho
scss, cách viết css cho đúng chuẩn, cách lấy font cũng như cách làm responsive

cho một website
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 viết css, cách tổ chức code scss
Biết cách làm responsive hiệu quả

2.4. Tìm hiểu về thư viện GreenSock – thư viện hỗ trợ làm animation cho trang web
Thời gian: 5 ngày
Nội dung: Được training về cách sử dụng greensock gsap để làm animation cho
trang web
Trong thời gian này, trainer đã hướng dẫn thực tập sinh sử dụng gsap để làm
các animation khó cho trang web
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 dùng Greensock gsap để làm animation cho trang web

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ề Next.js, css, scss cũng như làm animation. Trong hai tháng còn lại,

Trainer: Võ Hoàng Đức Khoa

Nguyễn Khánh Toàn


8
trainer đã hướng dẫn thực tập sinh áp dụng kiến thức đã được học làm lại một
trang web cũ theo dạng landing page bằng Next.js
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 qua email, slack
2
- Tìm hiểu về Next.js
- Học cách code css hiệu quả
- Thực hành và làm bài test
3
- Tìm hiểu về Greensock gsap
- Thực hành làm animation đơn giản
- Làm bài test
4

- Bắt đầu xem file thiết kế trên figma
- Chuẩn bị resource
- Chuẩn bị triển khai code
5
- Bắt đầu làm header, footer
- Hoàn thiện hai phần đầu: hero banner
và phần kế tiếp
6
- Hoàn thiện phần ui các phần còn lại
7
- Bắt đầu làm phần swiper và
animation
8
- Làm animation hover, cuộn chuột
cũng như swiper
9
- Hoàn thiện ứng dụng
- Điều chỉnh các animation lần cuối
10
- Sửa các lỗi do trainer chỉ ra
- Làm báo cáo cuối đợt 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

Nguyễn Khánh Toàn


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 Selex – một trang bán xe máy điện ở Hà
Nội
1.1.
-

Yêu cầu:
Phải hồn thành được 70% số animation có trong bản thiết kế
Về ui: phải thực hiện được “pixel perfect”, phải thực hiện hoàn toàn ui được
thiết kế trên figma
Phải tối ưu thời gian load cho trang web, tránh tình trạng trang web quá nặng

2. Thực hiện:
- Người thực hiện: thực tập sinh Nguyễn Khánh Tồn
- Và sự giúp đỡ tận tình của đội ngũ TISOHA
3. Kết quả:

- Thành quả: />- Đã hoàn thiện yêu cầu được giao
- Cách tổ chức code html (js):

-

Cách tổ chức scss:

Trainer: Võ Hoàng Đức Khoa

Nguyễn Khánh Toàn


10

Trainer: Võ Hoàng Đức Khoa

Nguyễn Khánh Toàn


11

Trainer: Võ Hoàng Đức Khoa

Nguyễn Khánh Toàn


12

-

-

-

TÀI LIỆU THAM KHẢO

Next.js: />Greensock gsap:
o Docs: />o Demo: />Swiper:
o API: />o Demo: />Font: />
Trainer: Võ Hoàng Đức Khoa

Nguyễn Khánh Toàn


13

TỔNG KẾT

Như vậy, chỉ trong chưa đầy hai tháng, em đã kịp hoàn thành trang web dạng
landing page đầu tiên. Trang web được đánh giá là đáp ứng đủ nhu cầu của khách đặt ra
khi xưa. Tuy nhiên, vẫn còn một số hạn chế như tốc độ tải trang chưa thực sự tốt, chưa
đáp ứng đủ SEO cũng như animation chưa được mượt mà
Chân thành cảm ơn sự giúp đỡ của team TISOHA để có thể hồn thành dự án này,
cũng như cảm ơn các bạn trong team thực tập đã giúp em hoàn thành báo cáo này

Trainer: Võ Hoàng Đức Khoa

Nguyễn Khánh Toàn