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

2 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM

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 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 LỜI MỞ ĐẦU Ngày này, với phát triển mạnh mẽ internet, việc tổ chức, doanh nghiệp cá nhân sử dụng internet để làm công cụ truyền thông, sử dụng website riêng cho tổ chức Cùng với xu hướng phát triển giới, doanh nghiệp Việt Nam 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 ứng dụng di động phát triển vượt bậc Theo đó, bên cạnh ông lớn làm mảng ứng dụng web, có nhiều công ty nhỏ gia nhập vào đua cung cấp dịch vụ Hiện nay, ngành lập trình web ngành ưa chuộng, ngành xu thị trường Cùng với phát triển chóng mặt ngành cơng nghệ 4.0, nhu cầu sử dụng website để quản bá, sử dụng website riêng cho tổ chức ngày lớn Vì em chọn lập trình web làm định hướng cho việc học tập Sau năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia làm việc môi trường chuyên nghiệp, em chọn công ty TISOHA – môi trường lý tưởng, đại, chuyên nghiệp làm nơi thực tập cho thân Trainer: Võ Hoàng Đức Khoa Nguyễn Khánh Toàn 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ó hội thực tập công ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình nhóm trainer, nhóm thực tập chúng em tiếp thu nhiều kiến thức quan trọng trình lập trình web Chân thành cảm ơn nhóm trainer bỏ nhiều thời gian, cơng sức để hướng dẫn em hồn thành đợt thực tập Đặ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ừ thứ nhỏ nhặt làm quen mơi trường mới, làm quen cơng việc Ngồi ra, anh Khoa người training html, css, js, giúp đỡ em nhiều gặp khó khăn q trình làm animation, để tạo sản phẩm thời gian qua Ngoài ra, xin cảm ơn thầy cô 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áo cáo 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 NHẬN XÉT CỦA KHOA ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… Trainer: Võ Hoàng Đức Khoa Nguyễn Khánh Tồn MỤC LỤC Nợi dung Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty TISOHA: Sản phẩm công ty: Chương 2: Nội dung thực tập Tìm hiểu cơng ty kỹ 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 Next.js .6 2.3 Tìm hiểu scss viết css chuẩn .7 2.4 web Tìm hiểu thư viện GreenSock – thư viện hỗ trợ làm animation cho trang Thực project Lịch làm việc Chương 3: Chi tiết project .9 Giới thiệu trang web: .9 1.1 Yêu cầu: Thực hiện: Kết quả: 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 Chương 1: Giới thiệu công ty thực tập 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) thành lập cuối năm 2020 Tuy non trẻ, nhờ vào việc có lực lượng nhân viên trẻ trung, sáng tạo, đa số đến từ trường đại học lớn công nghệ thông tin nước Bách Khoa, Công nghệ Thông tin, Khoa học Tự nhiên, … TISOHA nhanh chóng khẳng định vị lĩnh vực công nghệ thông tin Sản phẩm công ty: TISOHA cịn non trẻ có sản phẩm ghi dấu thị trường, trang web hiven, app hana di động, outsource cho dự án nước ISB, SCEN, Knock Trainer: Võ Hoàng Đức Khoa Nguyễn Khánh Toàn Chương 2: Nội dung thực tập Đợt thực tập với chủ để “Tạo landing page Next.js” nhằm mục đích giúp sinh viên thực tập đào tạo toàn diện lập trình trang web tĩnh với giao diện thiết kế sẵn với animation, swiper, …, đồng thời rèn luyện kỹ mềm 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ó hội học tập, khám phá làm việc trọng môi trường chuyên nghiệp Tìm hiểu cơng ty kỹ Thời gian: ngày Nội dung: Giới thiệu công ty, cách tổ chức công ty Được nghe người phụ trách giới thiệu công ty, quy trình làm việc, cách thức tổ chức, thời gian làm, cách thức làm việc, quy định phải tuân thủ, cách sử dụng kênh liên lạc công ty Kết quả: Hiểu thêm công ty TISOHA, có thêm kỹ việc sử dụng email công việc, cách thức làm việc làm việc có kế hoạch, có kỷ luật, có trách nhiệm Nghiên cứu kỹ thuật 2.1 Các công cụ làm việc Thời gian: ngày: Nội dung: Test kỹ làm việc với Reactjs, tìm hiểu công cụ sử dụng 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 cơng cụ sử dụng trình làm việc sau slack, redmine số extension hỗ trợ q trình lập trình, cách sử dụng figma, jira Ngồi ra, tổ chức test kỹ lập trình thực tập sinh Thực hiện: Thực hành sử dụng công cụ, thử làm todo app reactjs Kết quả: Đã biết sử dụng công cụ nêu 2.2 Tìm hiểu Next.js Thời gian: ngày Nội dung: Được training Next.js – framework Reactjs Trong thời gian này, trainer hướng dẫn thực tập sinh tìm hiểu Next.js, biết tính Next.js sử dụng tag , tag , cách thức quản lý Server-side rendering Next.js Thực hiện: Trainer: Võ Hoàng Đức Khoa Nguyễn Khánh Toàn - Tham gia đầy đủ buổi training công ty Tham gia thực hành, kiểm tra kiến thức học Kết quả: - Biết cách sử dụng Next.js tính Biết cách triển khai code, cách viết code chuẩn 2.3 Tìm hiểu scss viết css chuẩn Thời gian: ngày Nội dung: Được training 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 chuẩn, cách lấy font cách làm responsive cho website Thực hiện: - Tham gia đầy đủ buổi training công ty Tham gia thực hành, kiểm tra kiến thức học Kết quả: - Biết cách viết css, cách tổ chức code scss Biết cách làm responsive hiệu 2.4 Tìm hiểu thư viện GreenSock – thư viện hỗ trợ làm animation cho trang web Thời gian: ngày Nội dung: Được training 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 animation khó cho trang web Thực hiện: - Tham gia đầy đủ buổi training công ty Tham gia thực hành, kiểm tra kiến thức học Kết quả: - Biết cách dùng Greensock gsap để làm animation cho trang web Thực project Sau hai tuần training thực hành, thực tập sinh nắm kiến thức Next.js, css, scss làm animation Trong hai tháng cịn lại, Trainer: Võ Hồng Đức Khoa Nguyễn Khánh Toàn trainer hướng dẫn thực tập sinh áp dụng kiến thức học làm lại trang web cũ theo dạng landing page Next.js Lịch làm việc Tuần Cơng việc - Tìm hiểu công ty, cách tổ chức công ty - Làm quen với công cụ làm việc công ty - Học cách trao đổi qua email, slack - Tìm hiểu Next.js - Học cách code css hiệu - Thực hành làm test - Tìm hiểu Greensock gsap - Thực hành làm animation đơn giản - Làm test - Bắt đầu xem file thiết kế figma - Chuẩn bị resource - Chuẩn bị triển khai code - Bắt đầu làm header, footer - Hoàn thiện hai phần đầu: hero banner phần - Hoàn thiện phần ui phần lại - Bắt đầu làm phần swiper animation - Làm animation hover, cuộn chuột swiper - Hoàn thiện ứng dụng - Điều chỉnh animation lần cuối 10 - Sửa lỗi trainer - 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 Chương 3: Chi tiết project Giới thiệu trang web: Đây trang web đặt làm bên Selex – trang bán xe máy điện Hà Nội 1.1 - Yêu cầu: Phải hoàn thành 70% số animation có thiết kế Về ui: phải thực “pixel perfect”, phải thực hoàn toàn ui thiết kế figma Phải tối ưu thời gian load cho trang web, tránh tình trạng trang web nặng Thực hiện: - Người thực hiện: thực tập sinh Nguyễn Khánh Toàn - Và giúp đỡ tận tình đội ngũ TISOHA Kết quả: - Thành quả: https://selex-nextjs.vercel.app/ - Đã hoàn thiện yêu cầu 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: 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 Trainer: Võ Hoàng Đức Khoa Nguyễn Khánh Toàn 13 TỔNG KẾT Như vậy, chưa đầy hai tháng, em kịp hoàn thành trang web dạng landing page Trang web đánh giá đáp ứng đủ nhu cầu khách đặt xưa Tuy nhiên, số hạn chế tốc độ tải trang chưa thực tốt, chưa đáp ứng đủ SEO animation chưa mượt mà Chân thành cảm ơn giúp đỡ team TISOHA để hồn thành dự án này, cảm ơn bạn team thực tập giúp em hoàn thành báo cáo Trainer: Võ Hoàng Đức Khoa Nguyễn Khánh Toàn ... Đức Khoa Nguyễn Khánh Toàn Chương 2: Nội dung thực tập Đợt thực tập với chủ để ? ?Tạo landing page Next. js? ?? nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình trang web tĩnh với giao... framework Reactjs Trong thời gian này, trainer hướng dẫn thực tập sinh tìm hiểu Next. js, biết tính Next. js sử dụng tag , tag , cách thức quản lý Server-side rendering Next. js Thực hiện:... trình thực tập sinh Thực hiện: Thực hành sử dụng công cụ, thử làm todo app reactjs Kết quả: Đã biết sử dụng công cụ nêu 2.2 Tìm hiểu Next. js Thời gian: ngày Nội dung: Được training Next. js – framework