Báo Cáo - Thực Tập Nghề Nghiệp - Hệ Thống Thông Tin Quản Lý - Đề Tài - Thiết Kế Giao Diện Web Bán Trang Sức Vị Trí Front-End Developer Công Ty Tma Solutions Bình Định

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 3 LỜI CAM ĐOAN 4 MỤC LỤC 5 DANH MỤC HÌNH ẢNH 8 LỜI MỞ ĐẦU 10 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ủa 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 những 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 là gì? 14 2.1.2 Tại sao 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 5 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 của 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 bằng ReactJS : 22 3.2.3 Thiết kế giao diện : 23 3.2.3.1 Thiết kế màn hình : 23 3.2.3.2 Giao diện màn hình : 23 6 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 ngay (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 7 DANH MỤC HÌNH ẢNH Hình 1: Logo công ty TMA Solutions Bình Định 11 Hình 2: Giao diện trang chủ 1 23 Hình 3: Giao diện trang chủ 2 24 Hình 4: Giao diện trang chủ 3 24 Hình 5: Giao diện trang chủ 4 25 Hình 6: Giao diện trang chủ 5 25 Hình 7: Giao diện trang chủ 6 26 Hình 8: Giao diện trang chủ 7 26 Hình 9: Giao diện trang chủ 8 27 Hình 10: Giao diện trang chủ 9 27 Hình 11: Giao diện sản phẩm 1 28 Hình 12: Giao diện sản phẩm 2 28 Hình 13: Giao diện sản phẩm 3 29 Hình 14: Giao diện chi tiết sản phẩm 1 29 Hình 15: Giao diện chi tiết sản phẩm 2 30 Hình 16: Giao diện chi tiết sản phẩm 3 30 Hình 17: Giao diện chi tiết sản phẩm 4 31 Hình 18: Giao diện mua ngay 1 31 Hình 19: Giao diện mua ngay 2 32 Hình 20: Giao diện mua ngay 3 32 Hình 21: Giao diện mua ngay 4 33 Hình 22: Giao diện thông tin 1 33 Hình 23: Giao diện thông tin 2 34 Hình 24: Giao diện thông tin 3 34 Hình 25: Giao diện liên hệ 1 35 Hình 26: Giao diện liên hệ 2 35 8 Hình 27: Giao diện liên hệ 3 36 Hình 28: Giao diện đăng nhập 36 Hình 29: Giao diện đăng nhập khi nhập email và mật khẩu 37 Hình 30: Giao diện đăng nhập khi nhấn icon hiện mật khẩu 37 Hình 31: Giao diện đăng nhập khi bỏ trống tài khoản và mật khẩu 38 Hình 32: Giao diện khi nhập Email không đúng dịnh dạng và mật khẩu thiếu kí tự 38 Hình 33: Giao diện khi nhập Email hoặc mật khẩu sai 39 Hình 34: Giao diện đăng ký 39 Hình 35: Giao diện đăng ký khi để trống thông tin 40 Hình 36: Giao diện đăng ký khi nhập sai điều kiện các ô 40 9 LỜI MỞ ĐẦU 1 Mục tiêu của đề tài - Tên đề tài : Trang web bán trang sức (Front-End) - Tạo ra một giao diện trực tuyến hấp dẫn và chuyên nghiệp để thu hút khách hàng và tăng cường trải nghiệm mua sắm của họ 2 Đối tượng và phạm vi nghiên cứu - Đối tượng nghiên cứu : Thư viện ReactJS, Javascript cơ bản - Phạm vi nghiên cứu : Nghiên cứu về lập trình giao diện cho một trang web 3 Kết cấu của đề tài Đề tài được tổ chức gồm phần mở đầu, 4 chương nội dung và phần kết luận - Mở đầu - Chương 1: Tổng quan công ty TMA Solutions Bình Định và nghề Developer - Chương 2: Cơ sở lý thuyết - Chương 3: Triển khai - Chương 4: Kết quả - Kết luận và hướng phát triển 10 CHƯƠNG 1 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ập 1.1.1 Tổng quan về công ty • TMA Bình Định là dự án đầu tư quy mô lớn của TMA Solutions Với bề dày 24 năm phát triển vững mạnh của TMA Solutions thì TMA Bình Định đang dần khẳng định vị thế của mình đối với nền CNTT tỉnh Bình Định, góp sức cùng 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 tại miền Trung • Năm 2017: TMA quyết định đầu tư xây dựng Công viên sáng tạo TMA Bình Định (TMA Innovation Park) tại 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ệ tại Đ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ừ 6 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 11 1.1.2 Tầm nhìn sứ mệnh của công ty TMA Solutions Bình Định Tầm nhìn: Trở thành một trong những công ty công nghệ hàng đầu trong ngành phần mềm và dịch vụ công nghệ thông tin tại khu vực Bình Định Xây dựng một môi trường làm việc đáng tin cậy và chuyên nghiệp để thu hút và phát triển những tài năng xuất sắc trong lĩnh vực công nghệ thông tin Sứ mệnh: • Cung cấp các giải pháp phần mềm chất lượng cao, sáng tạo và phù hợp với nhu cầu của khách hàng • Đồng hành cùng khách hàng trong quá trình chuyển đổi số và tối ưu hóa quy trình kinh doanh, đem lại giá trị và thành công bền vững cho họ • Tạo ra một môi trường làm việc đáng sống và đáng làm việc, nơi mà nhân viên được khuyến khích và hỗ trợ phát triển cá nhân, đóng góp ý tưởng và mang lại sự sáng tạo và đột phá cho công ty 1.2 Tổng quan về nghề Developer 1.2.1 Định nghĩa Developer Developer (dev) là 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 ra 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 và đóng vai trò quan trọng trong quá trình tạo ra phần mềm Developer còn được gọi là 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 hoặc kỹ sư phần mềm 1.2.2 Developer làm những công việc gì? - Phân tích nhu cầu, vấn đề, nỗi trăn trở của 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 trên yêu cầu của doanh nghiệp, khách hàng 12 - Nâng cấp các tính năng mới cho ứng dụng hoặc phần mềm dựa trên nhu cầu phát sinh của 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 và 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 nhất - Liên tục tìm tòi, nghiên cứu và cải tiến các công nghệ, tính năng mới cho sản phẩm của mình - Ngoài ra, có nhiều vai trò khác trong ngành phát triển phần mềm như kiến trúc sư phần mềm, quản lý dự án, chuyên gia UX/UI, và chuyên gia an ninh mạng Mỗi vai trò này có nhiệm vụ và trách nhiệm riêng trong 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 và ứng dụng web • Frontend Engineer: Thiết kế và phát triển giao diện người dùng hấp dẫn và tương tác • UI/UX Designer: Tập trung vào thiết kế giao diện người dùng và 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ử hoặc tham gia vào việc phát triển phần giao diện của trò chơi • Mức lương: Mức lương của nhà phát triển frontend cũng có sự biến đổi tùy theo nhiều yếu tố khác nhau Một số ví dụ về mức lương trung bình cho các vị trí frontend developer tại Hoa Kỳ dựa trên dữ liệu trước khi ngưỡng kiến thức được cập nhật vào tháng 9 năm 2021: • Junior Frontend Developer (Nhà phát triển frontend tân binh): Mức lương trung bình có thể dao động từ khoảng $50,000 - $70,000 USD một năm • Mid-Level Frontend Developer (Nhà phát triển frontend trung cấp): Mức lương trung bình có thể dao động từ khoảng $70,000 - $100,000 USD một năm • Senior Frontend Developer (Nhà phát triển frontend cấp cao): Mức lương trung bình có thể vượt qua $100,000 USD một năm, và có thể lên đến vài trăm nghìn đô la tùy thuộc vào kinh nghiệm và địa điểm 13