Xây dựng giao diện cho website bán hàng với react

TRƯỜNG ĐẠI HỌC KINH TẾ KHOA THỐNG KÊ – TIN HỌC BÁO CÁO THỰC TẬP NGHỀ NGHIỆP NGÀNH HỆ THỐNG THÔNG TIN QUẢN LÝ CHUYÊN NGÀNH QUẢN TRỊ HỆ THỐNG THÔNG TIN ĐỀ TÀI: XÂY DỰNG GIAO DIỆN CHO WEBSITE BÁN HÀNG VỚI REACTJS Đơn vị thực tập : Công ty TNHH công nghệ tin học viễn thông Quốc Thắng Giảng viên hướng dẫn : TS.Phan Đình Vấn LỜI CẢM ƠN Lời cho em xin gửi lời cảm ơn chân thành đến Công ty TNHH công nghệ tin học viễn thông Quốc Thắng , mentor Huỳnh Ngọc Kha , Thầy TS Phan Đình Vấn tất người tạo điều kiện cho tham gia vào chương trình thực tập hồn thành đề tài báo cáo “XÂY DỰNG GIAO DIỆN CHO WEBSITE BÁN HÀNG VỚI REACT” Em xin cảm ơn Ban Giám hiệu trường , phịng ban, q thầy giáo khoa Thống kê – Tin học trường Đại học Kinh Tế - Đại học Đà Nẵng tận tình giảng dạy , truyền đạt kiến thức tạo điều kiện thuận lợi cho em sinh viên khác trình thực tập Đặc biệt em xin cảm ơn Thầy TS Phan Đình Vấn trực tiếp hướng dẫn em thực đề tài tập nhận thức Thầy tận tình dẫn , nhận xét, giúp đỡ hỗ trợ em q trình thực hồn thành đề tài báo cáo Trong suốt thời gian thực tập, em có hội tiếp cận học hỏi từ đội ngũ chuyên nghiệp tận tâm Tôi muốn gửi lời cảm ơn đặc biệt đến mentor Huỳnh Ngọc Kha Thầy TS.Phan Đình Vấn người dành thời gian tận tâm hỗ trợ dẫn em q trình thực tập Nhờ có dẫn dắt thầy mentor, em học nhiều kỹ rèn luyện khả làm việc nhóm, giúp em trở thành nhân viên tương lai có giá trị Thực tập Cơng ty TNHH cơng nghệ tin học viễn thông Quốc Thắng cung cấp cho em môi trường làm việc chuyên nghiệp thử thách, giúp áp dụng kiến thức học vào thực tế Tơi biết ơn có hội làm việc anh chị đồng nghiệp tài giàu kinh nghiệm Nhờ có hỗ trợ giúp đỡ người, em trải qua trình học tập phát triển đáng giá Cuối cùng, muốn gửi lời cảm ơn sâu sắc đến Công ty TNHH công nghệ tin học viễn thơng Quốc Thắng, anh mentor Thầy TS.Phan Đình Vấn cung cấp cho em hội để khám phá thân, rèn kỹ xây dựng mạng lưới quan hệ lĩnh vực Em tin kinh nghiệm kiến thức thu từ thực tập nghề nghiệp tảng vững cho thành công em tương lai i ii LỜI CAM ĐOAN “Em xin cam đoan đề tài: “Xây dựng giao diện cho website bán hàng với react” cơng trình nghiên cứu độc lập em hướng dẫn anh chị Mentors Công ty TNHH công nghệ tin học viễn thông Quốc Thắng Ngồi khơng có chép người khác Đề tài, nội dung báo cáo thực tập sản phẩm mà em nỗ lực nghiên cứu trình học tập trường tham gia thực tập công ty.” iii MỤC LỤC LỜI CẢM ƠN .i LỜI CAM ĐOAN ii MỤC LỤC iii DANH MỤC HÌNH ẢNH v DANH MỤC CÁC TỪ VIẾT TẮT vi LỜI MỞ ĐẦU CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI VÀ CÔNG TY TNHH CÔNG NGHỆ TIN HỌC VIỄN THÔNG QUỐC THẮNG 1.1 Giới thiệu tổng quát dự án 1.1.1 Giới thiệu dự án 1.2 Tổng quan Công ty TNHH công nghệ tin học viễn thông Quốc Thắng 1.2.1 Tổng quan đơn vị thực tập 1.2.2 Tầm nhìn , sứ mệnh 1.2.3 Cơ cấu tổ chức CHƯƠNG 2: TỔNG QUAN VỀ FRONT END VÀ CƠ SỞ LÝ THUYẾT VỀ FRONT-END DEVELOPER .7 2.1 Tổng quan ngành Front-end Developer .7 2.1.1 Mô tả công việc FE 2.1.2 Các kỹ FE cần có 2.1.3 Công cụ hỗ trợ .10 2.1.4 Cơ hội làm việc .10 2.2 Cơ sở lý thuyết Front-End Developer 11 2.2.1 Javascript .11 2.2.2 Thư viện Reactjs 18 2.2.3 SCSS .19 2.2.4 HTML 21 iv CHƯƠNG 3: TRIỂN KHAI DỰ ÁN “ XÂY DỰNG GIAO DIỆN WEBSITE BÁN HÀNG BẰNG THƯ VIỆN REACT” 24 3.1 Khảo sát thông tin cần thiết 24 3.1.1 Giao diện người dùng (UI): 24 3.1.2 Trải nghiệm người dùng (UX): 24 3.1.3 Hiển thị sản phẩm: 24 3.2 Thiết kế giao diện 25 3.2.1 Mục tiêu thiết kế giao diện 25 3.2.2 Quy trình thiết kế giao diện ReactJS .25 3.3 Giao diện sản phẩm 25 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 28 TÀI LIỆU THAM KHẢO 30 CHECK LIST CỦA BÁO CÁO .31 v DANH MỤC HÌNH ẢNH Hình 1.1: Logo cơng ty .4 Hình 1.2: Cơ cấu tở chức Hình 2.1: Cơng cụ hỗ trợ .10 Hình 2.2: Ngơn ngữ Javascript 11 Hình 2.3: Tạo ứng dụng React .18 Hình 2.4: Ngơn ngữ CSS 19 Hình 2.5: Ngơn ngữ HTML 21 Hình 3.1: Giao diện trang home 25 Hình 3.2: Giao diện menu .26 Hình 3.3: Giao diện About US 26 Hình 3.4: Giao diện Contact 26 vi DANH MỤC CÁC TỪ VIẾT TẮT FE : Front-end HTML : Hypertext Markup Language CSS : Cascading Style Sheets JS : Javascript …   vii LỜI MỞ ĐẦU Lý chọn đề tài: Trong bối cảnh thị trường mua sắm trực tuyến phát triển mạnh mẽ, việc xây dựng giao diện web bán hàng phải đảm bảo yếu tố thiết kế hấp dẫn, trực quan, dễ sử dụng tối ưu hóa trải nghiệm người dùng Mục tiêu em tạo giao diện hợp lý thu hút khách hàng, từ tăng doanh số bán hàng tiềm phát triển kinh doanh Trong thời buổi cơng nghệ nay, Front-end đóng vai trị quan trọng việc tạo giao diện người dùng hấp dẫn tương tác tốt Người dùng ngày đòi hỏi trang web ứng dụng thân thiện, dễ sử dụng có trải nghiệm tốt Với việc phát triển front-end, tạo giao diện đẹp, linh hoạt tương tác mượt mà Với gia tăng thiết bị di động kích thước hình đa dạng, việc tạo trang web đáp ứng (responsive) trở thành yêu cầu cần thiết ,sự gia tăng thiết bị di động thúc đẩy nhu cầu phát triển ứng dụng di động Các ngôn ngữ công cụ front-end HTML, CSS JavaScript hỗ trợ phát triển ứng dụng di động đa tảng Bằng cách sử dụng front-end, xây dựng ứng dụng di động tương thích tảng khác cách hiệu Việc sử dụng thư viện React cho đề tài React thư viện front-end mạnh mẽ phổ biến, mang lại nhiều lợi ích cho việc xây dựng giao diện người dùng hiệu mạnh mẽ React thiết kế để tối ưu hiệu suất render giao diện người dùng (UI) cách nhanh chóng hiệu Với việc sử dụng Virtual DOM, React cập nhật thành phần cần thiết thay tồn UI, giúp tăng tốc độ tăng cường trải nghiệm người dùng React có cộng đồng lớn phong phú, điều quan trọng lập trình viên front-end Có nhiều tài liệu, tài nguyên học tập mã nguồn mở có sẵn để hỗ trợ q trình phát triển với React Đây tất lý chọn đề tài “Xây dựng giao diện cho website bán hàng với react” Mục tiêu đề tài Mục tiêu cho báo cáo xây dựng website bán hàng thư viện React: viii - Tạo trải nghiệm tốt cho người dùng : giao diện dễ sử dụng , thân thiện hấp dẫn để thu hút khách hàng - Đáp ứng đa thiết bị : Giao diện phải thiết kế để tự động điều chỉnh hiển thị thiết bị khác nhau, từ máy tính để bàn đến điện thoại di động - Tối ưu hóa hiệu : React giúp tăng tốc độ hiệu suất giao diện - Dễ dàng tùy chỉnh theo ý muốn doanh nghiệp Nhiệm vụ đề tài Tìm hiểu ngơn ngữ, mơi trường lập trình Front End vận dụng kiến thức học để xây dựng website đơn giản Phương pháp nghiên cứu - Nghiên cứu kiến thức sẵn có internet - Hướng dẫn mentor - Xây dựng demo để hiểu rõ Đối tượng phạm vi nghiên cứu - Đối tượng nghiên cứu ● Người dùng : tìm hiểu nhu cầu, ưu tiên mong đợi người dùng sử dụng giao diện web ● Doanh nghiệp : nghiên cứu phạm vi kinh doanh , khía cạnh khác để đáp ứng nhu cầu kinh doanh doanh nghiệp ● Nhà phát triển : Tập trung vào khía cạnh phát triển giao diện web bán hàng sử dụng thư viện React - Phạm vi nghiên cứu ● Thiết kế giao diện người dùng hấp dẫn thân thiện với người dùng ● Tối ưu hóa hiệu suất thời gian tải trang giao diện web ● Tận dụng tính tiện ích React để xây dựng thành phần giao diện linh hoạt tái sử dụng ix