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Ứ[.]
Trang 1TRƯỜ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
Trang 21.1 Giới thiệu tổng quát về doanh nghiệp thực tập 11
1.1.2 Tầm nhìn sứ mệnh của công ty TMA Solutions Bình Định 12
Trang 32.2.4 State and Lifecycle 17
3.2.2 Quy trình thiết kế giao diện web bằng ReactJS : 22
Trang 4b Giao diện trang sản phẩm 28
Trang 5DANH MỤC HÌNH ẢNH
Trang 6Hình 28: Giao diện đăng nhập 35
Hình 29: Giao diện đăng nhập khi nhập email và mật khẩu 36
Hình 30: Giao diện đăng nhập khi nhấn icon hiện mật khẩu 36
Hình 31: Giao diện đăng nhập khi bỏ trống tài khoản và mật khẩu 37
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ự 37
Hình 33: Giao diện khi nhập Email hoặc mật khẩu sai 38
Hình 36: Giao diện đăng ký khi nhập sai điều kiện các ô 39
LỜI MỞ ĐẦU
1 Mục tiêu của đề tài
Trang 7- 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
Trang 8CHƯƠ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 ệu tổng quát về doanh nghiệp thực tập ệu tổng quát về doanh nghiệp thực tập ậ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
● 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
Trang 91.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
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 ứngdụ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ụngdựa trên yêu cầu của doanh nghiệp, khách hàng
Trang 10- 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 nhucầ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 để đảmbả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 chosả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ếntrúc sư phần mềm, quản lý dự án, chuyên gia UX/UI, và chuyên gia an ninhmạng Mỗi vai trò này có nhiệm vụ và trách nhiệm riêng trong quá trìnhphá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ụngweb
● 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ảinghiệ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ặctham 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ếnthứ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ươngtrung 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ứclương trung bình có thể dao động từ khoảng $70,000 - $100,000 USD mộtnăm
● Senior Frontend Developer (Nhà phát triển frontend cấp cao): Mức lươngtrung bình có thể vượt qua $100,000 USD một năm, và có thể lên đến vàitrăm nghìn đô la tùy thuộc vào kinh nghiệm và địa điểm
Trang 12CHƯƠNG 2. CƠ SỞ LÝ THUYẾT2.1. JavaScript
2.1.1 JavaScript là gì?
JavaScript là ngôn ngữ lập trình được nhà phát triển sử dụng để tạo trang webtương tác Từ làm mới bảng tin trên trang mạng xã hội đến hiển thị hình ảnh động vàbản đồ tương tác, các chức năng của JavaScript có thể cải thiện trải nghiệm người dùngcủa trang web Là ngôn ngữ kịch bản phía máy khách, JavaScript là một trong nhữngcông nghệ cốt lõi của World Wide Web
2.1.2 Tại sao nên học JavaScript
+ Web Development: Cần để xây dựng ứng dụng web động và tương tác
+ Phổ biến: Ngôn ngữ rộng rãi, nhiều cơ hội việc làm
+ Dễ học: Cú pháp dễ tiếp cận, linh hoạt
+ Cộng đồng lớn: Hỗ trợ tài liệu và giải quyết vấn đề
+ Phát triển sự nghiệp: Mở cửa cho nhiều lĩnh vực khác nhau
+ Frameworks và thư viện: Dùng để xây dựng ứng dụng phức tạp
+ Tương lai sáng: Đóng góp vào tiến hóa của web và công nghệ mới
2.1.3 JavaScript tutorial
+ Biến và kiểu dữ liệu: var, let, const, number, string, boolean
+ Câu lệnh điều kiện: if, else if, else
+ Vòng lặp: for, while, do-while
+ Hàm: function, tham số, return
+ Mảng và đối tượng: Array, Object
2.1.4 JavaScript Functions
- Hàm JavaScript là một khối mã được thiết kế để thực hiện một tác vụ cụ thể
- Một hàm JavaScript được thực thi khi "cái gì đó" gọi nó (calls it)
- Function Invocation:
Trang 13● Function Invocation (Gọi hàm) là quá trình thực hiện một hàm bằng cách gọi têncủa hàm kèm theo các đối số cần thiết (nếu có) Kết quả sẽ được trả về khi:
+ Khi một sự kiện xảy ra (khi người dùng nhấp vào nút)
+ Khi nó được gọi (được gọi) từ mã JavaScript
+ Tự động (tự gọi)
- Function Return:
● Function Return (Giá trị trả về của hàm) là kết quả mà một hàm trả về sau khithực hiện các lệnh và tính toán bên trong nó Khi một hàm được gọi và thực thi,
nó có thể sẽ sản sinh ra một giá trị và trả về cho người gọi hàm.Và:
+ Khi JavaScript đạt đến câu lệnh trả về, hàm sẽ ngừng thực thi
+ Nếu hàm được gọi từ một câu lệnh, JavaScript sẽ “quay lại” để thực thi mã saucâu lệnh gọi
+ Các hàm thường tính toán một giá trị trả về Giá trị trả về được "trả lại" cho
"người gọi"
2.1.5 JavaScript HTML DOM
• JavaScript HTML DOM (Document Object Model) là một cách để truy cập, thayđổi và tương tác với các phần tử HTML trên trang web DOM biểu diễn cấu trúc củatrang web dưới dạng một cây phân cấp, trong đó mỗi phần tử HTML được coi như mộtđối tượng mà bạn có thể thao tác bằng JavaScript
• Với các chức năng như:
Trang 142.1.6 JavaScript oop
• JavaScript OOP (Object-Oriented Programming) là một phương pháp lập trìnhdựa trên các đối tượng Trong OOP, chúng ta tạo các đối tượng có thuộc tính(properties) và phương thức (methods) để thực hiện các nhiệm vụ cụ thể JavaScript hỗtrợ OOP thông qua các khái niệm:
+ Cập nhật phần tử
+ Các thành phần React
+ Thành phần và Class
Trang 152.2.3 Components and Props
● Components (Thành phần): Là các khối xây dựng độc lập trong React, giúp tạo vàquản lý giao diện người dùng Chúng có thể là hàm hoặc lớp, cho phép tái sửdụng và tổ chức mã Mỗi thành phần có thể chứa nhiều thành phần con
● Props (Thuộc tính): Là dữ liệu được truyền từ cha đến con thông qua các thànhphần Props giúp tùy chỉnh hành vi và nội dung của các thành phần khác nhau.Thay đổi props thường dẫn đến việc cập nhật giao diện
2.2.4 State and Lifecycle
● State (Trạng thái): Là dữ liệu động được lưu trữ bên trong một thành phần React.Khi state thay đổi, thành phần sẽ cập nhật lại giao diện để hiển thị dữ liệu mới
● Lifecycle (Vòng đời): Là chuỗi các pha mà một thành phần React trải qua, từ khiđược tạo ra cho đến khi bị hủy bỏ Điều này cho phép bạn thực hiện các hànhđộng như khởi tạo dữ liệu, cập nhật giao diện, và giải phóng tài nguyên
2.2.5 Handling Events
● Handling Events trong React là việc xử lý các sự kiện tương tác của người dùng,như nhấn nút, click chuột, hoặc nhập liệu Bằng cách sử dụng các trình xử lý sựkiện, có thể gắn kết các hành động cụ thể với các thành phần React
2.2.6 List and Keys
● Lists (Danh sách): Là cách bạn hiển thị nhiều thành phần tương tự trong React,thường thông qua việc lặp qua mảng dữ liệu và render mỗi phần tử thành cácthành phần riêng biệt
● Keys (Khóa): Là thuộc tính đặc biệt được sử dụng để xác định mỗi phần tử trongdanh sách một cách duy nhất Các khóa giúp React theo dõi sự thay đổi và tối ưuhóa việc cập nhật giao diện
Trang 162.2.7 Forms
● Trong React, Forms là cách để xử lý và thu thập dữ liệu nhập liệu từ người dùng,chẳng hạn như nhập văn bản, chọn tùy chọn, hay gửi dữ liệu lên máy chủ Bằngcách sử dụng Forms, có thể tạo các giao diện tương tác cho người dùng
2.3. Hooks
2.3.1 Introducing Hooks
● Hooks cho phép sử dụng các tính năng React khác nhau từ các components củamình Có thể sử dụng các Hooks có sẵn hoặc kết hợp chúng để tạo Hooks củariêng mình
2.3.2 Hooks at a Glance
● Hooks cho phép sử dụng state và các tính năng React khác trong các hàm củaReact function components, thay vì chỉ trong các class Các hooks giúp tạo vàquản lý state, xử lý sự kiện, và thực hiện các tác vụ khác một cách dễ dàng vàhiệu quả
2.3.3 Using the State Hook
● State cho phép một components “ghi nhớ” thông tin như đầu vào của ngườidùng Ví dụ: components biểu mẫu có thể sử dụng State để lưu trữ giá trị đầuvào, trong khi components thư viện hình ảnh có thể sử dụng State để lưu trữ chỉmục hình ảnh đã chọn
2.3.4 Using the Effect Hook
● Trong React là cách sử dụng hook useEffect để thực hiện các tác vụ liên quan đếnside Effects trong các function components Side effects có thể là việc gọi API,thay đổi DOM, hoặc thực hiện bất kỳ hành động nào không liên quan trực tiếpđến việc render giao diện
2.3.5 Hooks API Reference
● Là tài liệu cung cấp thông tin chi tiết về các hooks, bao gồm các hooks được xâydựng sẵn như useState, useEffect, useContext, và nhiều hooks khác Trang này
Trang 17giúp hiểu cách sử dụng và tùy chỉnh các hooks để quản lý trạng thái, xử lý tác vụphụ, và thực hiện các chức năng khác trong function components.
- Điều hướng: React Router cho phép bạn xác định các tuyến đường và quản lýviệc hiển thị các trang tương ứng với mỗi tuyến đường
+ Tuyến đường như các thành phần: Có thể gắn các component React với cáctuyến đường, làm cho việc quản lý trang dễ dàng hơn
+ Tuyến đường lồng nhau: React Router hỗ trợ tuyến đường lồng nhau, cho phéptạo các tuyến đường con cho các thành phần con
+ Các tham số đường dẫn: Có thể định nghĩa các tham số đường dẫn để trích xuất
dữ liệu từ URL
Các chế độ điều hướng: React Router hỗ trợ nhiều chế độ điều hướng như
BrowserRouter, HashRouter, và MemoryRouter để phù hợp với yêu cầu cụ thể của ứngdụng
Trang 19CHƯƠNG 3. TRIỂN KHAI THỰC NGHIỆM3.1. Phân tích yêu cầu của hệ thống
3.1.1 Mục tiêu đề tài :
Mục tiêu chính của dự án là xây dựng một nền tảng kinh doanh trực tuyến choviệc bán trang sức Thể hiện sản phẩm trang sức một cách chuyên nghiệp và hấp dẫn.Cải thiện trải nghiệm mua sắm trực tuyến, từ quy trình thanh toán đến lựa chọn sảnphẩm Giúp mở rộng phạm vi khách hàng và thuận tiện hơn trong việc quản lý đơn hàng
+ Tần suất mua sắm: Người dùng thường mua sắm trực tuyến hàng tháng, đặcbiệt vào dịp lễ, kỷ niệm và sinh nhật Họ mong đợi có nhiều tùy chọn để lựa chọn dựatrên sự kiện cụ thể
+ Trải nghiệm người dùng: Người dùng đề cao trải nghiệm mua sắm thuận tiện vànhanh chóng trên trang web Họ muốn giao diện đơn giản, dễ sử dụng và có tính thẩm
mỹ cao
Khảo sát Đối thủ Cạnh tranh:
+ Trang web A: Đối thủ này nổi bật với thiết kế độc đáo và sự tập trung vào việckết nối với người dùng qua các chương trình thưởng và sự kiện độc quyền
+ Trang web B: Đối thủ này tập trung vào việc cung cấp trải nghiệm mua sắm cánhân thông qua công cụ tùy chỉnh sản phẩm và tư vấn từ chuyên gia trang sức
Trang web C: Đối thủ này đặc biệt chú trọng đến việc kể câu chuyện và giới thiệu
về nguồn gốc của từng món trang sức, tạo nên sự kết nối tinh thần với người dùng
Trang 20KẾT HỢP KHẢO SÁT:
Dựa trên thông tin thu thập từ khảo sát người dùng và đối thủ cạnh tranh, chúng
em sẽ phát triển trang web "D-Luxury" với mục tiêu tạo ra các mẫu trang sức đẹp mắt,tối giản và dễ phối hợp Chúng em sẽ cung cấp trải nghiệm mua sắm trực tuyến thuậntiện và nhanh chóng, kết hợp với các dịch vụ tùy chỉnh để đáp ứng mọi nhu cầu củakhách hàng Đồng thời, chúng em sẽ kể câu chuyện độc đáo về mỗi sản phẩm để tạo sựkết nối và tạo nên sự khác biệt cho thương hiệu "D-Luxury"
3.2. Thiết kế dự án
3.2.1 Mục tiêu thiết kế giao diện :
Mục tiêu chính của thiết kế giao diện web bán trang sức là tạo ra một trải nghiệmtrực quan và hấp dẫn cho khách hàng Giao diện cần thể hiện tính chuyên nghiệp củathương hiệu và sự đẳng cấp của các sản phẩm trang sức Từ việc hiển thị sản phẩm mộtcách rõ ràng và chi tiết, đến việc tối ưu hóa quy trình mua sắm và tạo giao diện dễ sửdụng trên mọi thiết bị, mục tiêu là đảm bảo khách hàng có trải nghiệm mua sắm trựctuyến tốt nhất Đồng thời, giao diện cũng nên thúc đẩy tương tác, chia sẻ và tạo sự kếtnối giữa khách hàng và thương hiệu, từ đó góp phần tăng cường doanh số bán hàng vàxây dựng mối quan hệ bền vững trong thời gian dài
3.2.2 Quy trình thiết kế giao diện web bằng ReactJS :
Bước 1: Tạo môi trường để phát triển React Tiền hành cài đặt NodeJS cho dự án.Bước 2: Thực hiện các bước khởi tạo Project React ( creact-react-app) chạy trênmôi trường NodeJs để bắt đầu thực hiện chuyển giao website mới
Bước 3: Cài đặt các thư viện
Bước 4: Tạo Component theo tiêu chuẩn files structure Mỗi Component là mộtphần của website chúng có chức năng đặc biệt và được gọi ra từ các chươngtrình khác
Bước 5: Thiết kế trực quan
Bước 6: Hoàn thiện giao diện và các xử lý logic website