TRƯỜNG ĐẠI HỌC KINH TẾ ĐẠI HỌC ĐÀ NẴNG 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 TIN HỌC QUẢN LÝ TÊN ĐỀ TÀI THIẾT KẾ GIAO DIỆN WEB BÁN TRANG SỨ[.]
TRƯỜNG ĐẠI HỌC KINH TẾ ĐẠI HỌC ĐÀ NẴNG 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 TIN HỌC QUẢN LÝ TÊN ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEB BÁN TRANG SỨC Vị trí: FRONT-END DEVELOPER MỤC LỤC LỜI CẢM ƠN LỜI CAM ĐOAN MỤC LỤC DANH MỤC HÌNH ẢNH LỜI MỞ ĐẦU 1.1 Giới thiệu tổng quát về doanh nghiệp thực tập 11 1.1.1 Tổng quan về công ty 11 1.1.2 Tầm nhìn sứ mệnh cơng ty TMA Solutions Bình Định 12 1.2 Tổng quan về nghề Developer 12 1.2.1 Định nghĩa Developer 12 1.2.2 Developer làm công việc gì? 12 1.2.3 Cơ hội nghề nghiệp (FrontEnd) 13 2.1 JavaScript 14 2.1.1 JavaScript gì? 14 2.1.2 Tại nên học JavaScript 14 2.1.3 JavaScript tutorial 14 2.1.4 JavaScript Functions 14 2.1.5 JavaScript HTML DOM 15 2.1.6 JavaScript oop 16 2.2 ReactJS 16 2.2.1 Introducing JSX 16 2.2.2 Rendering Elements 16 2.2.3 Components and Props 17 2.2.4 State and Lifecycle 17 2.2.5 Handling Events 17 2.2.6 List and Keys 17 2.2.7 Forms 18 2.3 Hooks 18 2.3.1 Introducing Hooks 18 2.3.2 Hooks at a Glance 18 2.3.3 Using the State Hook 18 2.3.4 Using the Effect Hook 18 2.3.5 Hooks API Reference 18 2.4 Redux-Toolkit 19 2.4.1 ConfigureStore 19 2.4.2 CreateSlice 19 2.4.3 CreateReducer 19 2.5 React Router 19 3.1 Phân tích yêu cầu hệ thống 21 3.1.1 Mục tiêu đề tài : 21 3.1.2 Khảo sát hệ thống : 21 3.2 Thiết kế dự án 22 3.2.1 Mục tiêu thiết kế giao diện : 22 3.2.2 Quy trình thiết kế giao diện web ReactJS : 22 3.2.3 Thiết kế giao diện : 23 3.2.3.1 Thiết kế hình : 23 3.2.3.2 Giao diện hình : 23 a Giao diện trang chủ 23 b Giao diện trang sản phẩm 28 c Giao diện trang chi tiết sản phẩm 29 d Giao diện trang mua (thanh toán) 31 e Giao diện trang thông tin 33 f Giao diện trang liên hệ 35 g Giao diện trang đăng nhập 36 h Giao diện trang đăng ký 39 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 41 DANH MỤC HÌNH ẢNH Hình 1: Logo cơng ty TMA Solutions Bình Định 10 Hình 2: Giao diện trang chủ 22 Hình 3: Giao diện trang chủ 23 Hình 4: Giao diện trang chủ 23 Hình 5: Giao diện trang chủ 24 Hình 6: Giao diện trang chủ 24 Hình 7: Giao diện trang chủ 25 Hình 8: Giao diện trang chủ 25 Hình 9: Giao diện trang chủ 26 Hình 10: Giao diện trang chủ 26 Hình 11: Giao diện sản phẩm 27 Hình 12: Giao diện sản phẩm 27 Hình 13: Giao diện sản phẩm 28 Hình 14: Giao diện chi tiết sản phẩm 28 Hình 15: Giao diện chi tiết sản phẩm 29 Hình 16: Giao diện chi tiết sản phẩm 29 Hình 17: Giao diện chi tiết sản phẩm 30 Hình 18: Giao diện mua 30 Hình 19: Giao diện mua 31 Hình 20: Giao diện mua 31 Hình 21: Giao diện mua 32 Hình 22: Giao diện thơng tin 32 Hình 23: Giao diện thơng tin 33 Hình 24: Giao diện thơng tin 33 Hình 25: Giao diện liên hệ 34 Hình 26: Giao diện liên hệ 34 Hình 27: Giao diện liên hệ 35 Hình 28: Giao diện đăng nhập 35 Hình 29: Giao diện đăng nhập nhập email mật 36 Hình 30: Giao diện đăng nhập nhấn icon mật 36 Hình 31: Giao diện đăng nhập bỏ trống tài khoản mật 37 Hình 32: Giao diện nhập Email không dịnh dạng mật thiếu kí tự 37 Hình 33: Giao diện nhập Email mật sai 38 Hình 34: Giao diện đăng ký 38 Hình 35: Giao diện đăng ký để trống thơng tin 39 Hình 36: Giao diện đăng ký nhập sai điều kiện ô 39 LỜI MỞ ĐẦU Mục tiêu đề tài - Tên đề tài : Trang web bán trang sức (Front-End) - Tạo giao diện trực tuyến hấp dẫn chuyên nghiệp để thu hút khách hàng tăng cường trải nghiệm mua sắm họ Đối tượng phạm vi nghiên cứu - Đối tượng nghiên cứu : Thư viện ReactJS, Javascript - Phạm vi nghiên cứu : Nghiên cứu lập trình giao diện cho trang web Kết cấu đề tài Đề tài tổ chức gồm phần mở đầu, chương nội dung phần kết luận - Mở đầu - Chương 1: Tổng quan cơng ty TMA Solutions Bình Định nghề Developer - Chương 2: Cơ sở lý thuyết - Chương 3: Triển khai - Chương 4: Kết - Kết luận hướng phát triển CHƯƠNG TỔNG QUAN VỀ CƠNG TY TMA SOLUTIONS BÌNH ĐỊNH 1.1 Giới thiệu tổng quát về doanh nghiệp thực tậpu tổng quát doanh nghiệu tổng quát về doanh nghiệp thực tậpp thực tậpp 1.1.1 Tổng quan công ty ● ● ● TMA Bình Định dự án đầu tư quy mô lớn TMA Solutions Với bề dày 24 năm phát triển vững mạnh TMA Solutions TMA Bình Định dần khẳng định vị CNTT tỉnh Bình Định, góp sức với tỉnh xây dựng Thung Lũng Sáng tạo Quy Nhơn trở thành trung tâm khoa học, công nghệ cao miền Trung Năm 2017: TMA định đầu tư xây dựng Cơng viên sáng tạo TMA Bình Định (TMA Innovation Park) Thung Lũng Sáng Tạo Quy Nhơn Năm 2018: ● Thành lập TMA Bình Định Khởi cơng xây dựng Cơng viên Sáng tạo TMA Bình Định (TMA Innovation Park - TIP) Năm 2019: ● ● ● ● Đạt 70 kỹ sư ● Thành lập Nhóm Data Science Group ● Tổ chức Ngày hội Công nghệ ĐH Quy Nhơn Năm 2020: ● Khai trương Cơng viên Sáng tạo TMA Bình Định ● Đạt 140 kỹ sư ● Khách hàng từ nước (Mỹ, Úc, Pháp, Nhật Bản, Hàn Quốc, Singapore) Hình 1: Logo cơng ty TMA Solutions Bình Định 1.1.2 Tầm nhìn sứ mệnh cơng ty TMA Solutions Bình Định Tầm nhìn: Trở thành cơng ty công nghệ hàng đầu ngành phần mềm dịch vụ cơng nghệ thơng tin khu vực Bình Định Xây dựng môi trường làm việc đáng tin cậy chuyên nghiệp để thu hút phát triển tài xuất sắc lĩnh vực công nghệ thông tin Sứ mệnh: ● Cung cấp giải pháp phần mềm chất lượng cao, sáng tạo phù hợp với nhu cầu khách hàng ● Đồng hành khách hàng trình chuyển đổi số tối ưu hóa quy trình kinh doanh, đem lại giá trị thành công bền vững cho họ ● Tạo môi trường làm việc đáng sống đáng làm việc, nơi mà nhân viên khuyến khích hỗ trợ phát triển cá nhân, đóng góp ý tưởng mang lại sáng tạo đột phá cho công ty 1.2 Tổng quan nghề Developer 1.2.1 Định nghĩa Developer Developer (dev) tên gọi khá chung cho các kỹ sư phần mềm, họ dùng ngơn ngữ lập trình để xây dựng, sáng tạo các chương trình, phần mềm hay ứng dụng cho laptop, điện thoại, Dev sử dụng thành thạo các ngơn ngữ lập trình đóng vai trị quan trọng quá trình tạo phần mềm Developer gọi nhà phát triển phần mềm, nhà lập trình máy tính, người viết mã phần mềm kỹ sư phần mềm - 1.2.2 Developer làm cơng việc gì? Phân tích nhu cầu, vấn đề, nỗi trăn trở người dùng - Dùng ngôn ngữ lập trình để tạo nên các chương trình, phần mềm, ứng dụng dựa yêu cầu doanh nghiệp, khách hàng - Nâng cấp các tính mới cho ứng dụng phần mềm dựa nhu cầu phát sinh người dùng - Sửa chữa các lỗi để đảm bảo ứng dụng, phần mềm hoạt động trơn tru - Kiểm thử phần mềm cộng tác với các các chuyên gia máy tính để đảm bảo phần mềm đạt chất lượng cao - Liên tục tìm tịi, nghiên cứu cải tiến các cơng nghệ, tính mới cho sản phẩm - Ngồi ra, có nhiều vai trò khác ngành phát triển phần mềm kiến trúc sư phần mềm, quản lý dự án, chuyên gia UX/UI, chuyên gia an ninh mạng Mỗi vai trị có nhiệm vụ trách nhiệm riêng quá trình phát triển phần mềm 1.2.3 Cơ hội nghề nghiệp (FrontEnd) ● Web Developer: Làm việc trực tiếp phát triển các trang web ứng dụng web ● Frontend Engineer: Thiết kế phát triển giao diện người dùng hấp dẫn tương tác ● UI/UX Designer: Tập trung vào thiết kế giao diện người dùng trải nghiệm người dùng ● Game Developer: Phát triển giao diện người dùng cho trò chơi điện tử tham gia vào việc phát triển phần giao diện trò chơi ● Mức lương: Mức lương nhà phát triển frontend có sự biến đởi tùy theo nhiều yếu tố khác Một số ví dụ về mức lương trung bình cho các vị trí frontend developer Hoa Kỳ dựa liệu trước ngưỡng kiến thức cập nhật vào tháng năm 2021: ● Junior Frontend Developer (Nhà phát triển frontend tân binh): Mức lương trung bình dao động từ khoảng $50,000 - $70,000 USD năm ● Mid-Level Frontend Developer (Nhà phát triển frontend trung cấp): Mức lương trung bình dao động từ khoảng $70,000 - $100,000 USD năm ● Senior Frontend Developer (Nhà phát triển frontend cấp cao): Mức lương trung bình vượt qua $100,000 USD năm, lên đến vài trăm nghìn la tùy thuộc vào kinh nghiệm địa điểm