2 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM
Trang 1KHOA 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
Trang 2LỜ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
Trang 3LỜ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 quá 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 Ngoà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 quá 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
Trang 4NHẬN XÉT CỦA KHOA
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
Trang 5MỤ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 Tìm hiểu về thư viện GreenSock – thư viện hỗ trợ làm animation cho trang web 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
Trang 6Chươ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
Trang 7Chươ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 chuyên 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 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 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:
Trang 8- 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,
Trang 9trainer đã 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
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
Anh Võ Hoàng Đức Khoa Anh Đặng Hải Thịnh
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
Anh Võ Hoàng Đức Khoa
3 - Tìm hiểu về Greensock gsap
- Thực hành làm animation đơn giản
- Làm bài test
Anh Võ Hoàng Đức Khoa
4 - Bắt đầu xem file thiết kế trên figma
- Chuẩn bị resource
- Chuẩn bị triển khai code
Anh Võ Hoàng Đức Khoa
5 - Bắt đầu làm header, footer
- Hoàn thiện hai phần đầu: hero banner
và phần kế tiếp
Anh Võ Hoàng Đức Khoa
6 - Hoàn thiện phần ui các phần còn lại Anh Võ Hoàng Đức Khoa
7 - Bắt đầu làm phần swiper và
8 - Làm animation hover, cuộn chuột
cũng như swiper Anh Võ Hoàng Đức Khoa
9 - Hoàn thiện ứng dụng
- Điều chỉnh các animation lần cuối Anh Võ Hoàng Đức Khoa
10 - Sửa các lỗi do trainer chỉ ra
- Làm báo cáo cuối đợt thực tập Anh Võ Hoàng Đức Khoa
Trang 10Chươ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 hoà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 Toàn
- Và sự giúp đỡ tận tình của đội ngũ TISOHA
3 Kết quả:
- Thành quả: https://selex-nextjs.vercel.app/
- Đã hoàn thiện yêu cầu được giao
- Cách tổ chức code html (js):
- Cách tổ chức scss:
Trang 13TÀI LIỆU THAM KHẢO
- Next.js: https://nextjs.org/docs
- Greensock gsap:
o Docs: https://greensock.com/docs/
o Demo: https://greensock.com/showcase/
- Swiper:
o API: https://swiperjs.com/swiper-api
o Demo: https://swiperjs.com/demos
- Font: https://fonts.google.com/specimen/Archivo
Trang 14TỔ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ể hoà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