Xây dựng website adam store

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 XÂY DỰNG WEBSITE ADAM STORE Đơn vị thực tập : TMA Bình Định Solutions Giảng viên hướng dẫn : TS Phan Đình Vấn LỜI CẢM ƠN Để hoàn thành báo cáo thực tập trước hết em xin gửi đến quý thầy,cô giáo khoa Thống Kê – Tin Học trường Đại học Kinh Tế Đà Nẵng lời cảm ơn chân thành Đặc biệt, em xin gửi đến thầy Phan Đình Vấn người tận tình hướng dẫn, giúp đỡ em hoàn thành chuyên đề báo cáo thực tập lời cảm ơn sâu sắc Em xin chân thành cảm ơn Ban Lãnh Đạo, phòng ban, anh chị Mentors cơng ty TMA Bình Định Solutions, tạo điều kiện thuận lợi cho em tìm hiểu thực tiễn giúp đỡ em nhiều suốt q trình thực tập với cơng ty Đồng thời nhà trường tạo cho em có hội thực tập nơi mà em yêu thích, cho em bước đời sống thực tế để áp dụng kiến thức mà thầy cô giáo giảng dạy Qua công việc thực tập em nhận nhiều điều mẻ bổ ích việc trở thành Developer để giúp ích cho cơng việc sau thân Vì kiến thức thân cịn hạn chế, q trình thực tập, hồn thiện chun đề em khơng tránh khỏi sai sót, kính mong nhận ý kiến đóng góp từ thầy quý công ty LỜI CAM ĐOAN Em xin cam đoan báo cáo thực tập nghề nghiệp “Xây dựng website Adam Store” kết nghiên cứu độc lập em sở nghiên cứu lý thuyết học, khảo sát thực tiễn hướng dẫn TS Phan Đình Vấn mentor Phạm Quốc Khánh Ngoài báo cáo thực tập nghề nghiệp sử dụng số nhận xét, đánh số liệu tác giả khác, quan tổ chức khác có trích dẫn thích nguồn gốc Nếu phát có gian lận nào, em xin chịu hoàn toàn trách nhiệm nội dung báo cáo MỤC LỤC LỜI CẢM ƠN iii LỜI CAM ĐOAN iv MỤC LỤC v DANH MỤC HÌNH ẢNH vii DANH MỤC CÁC TỪ VIẾT TẮT ix LỜI MỞ ĐẦU CHƯƠNG 1: TỔNG QUAN VỀ CƠNG TY TMA BÌNH ĐỊNH SOLUTIONS VÀ CƠ SỞ LÝ THUYẾT VỀ FRONT – END DEVELOPER 1.1 Giới thiệu tởng quan về cơng ty TMA Bình Định Solutions 1.2 Tởng quan về vị trí Front – End Developer 1.3 Cơ sở lý thuyết về Front – End Developer 1.3.1 JavaScript 1.3.2 React JS 10 CHƯƠNG 2: TỔNG QUAN DỰ ÁN XÂY DỰNG WEBSITE ADAM STORE 11 2.1 Tổng quan về dự án xây dựng website Adam Store 11 2.1.1 Giới thiệu về trang web 11 2.1.2 Giới thiệu về chức dự án 11 2.1.3 Source Code 11 2.2 Nội dung dự án 11 2.2.1 Cách tạo Project app 11 2.2.2 Quy trình triển khai dự án 12 2.2.3 Database 17 2.2.4 Ứng dụng hỗ trợ toán Stripe 19 CHƯƠNG 3: TRIỂN KHAI DỰ ÁN XÂY DỰNG WEBSITE ADAM STORE 23 3.1 Giao diện trang web 23 3.2 Các chức trang web 25 3.2.1 Chức đăng ký 25 3.2.2 Chức đăng nhập 28 3.2.3 Chức đăng xuất 28 3.2.4 Chức xem địa shop 29 3.2.5 Chức xem sản phẩm 29 3.2.6 Chức lọc sản phẩm 30 3.2.7 Chức đặt hàng 30 3.2.8 Quản lý mục sản phẩm ở trang admin 31 3.2.9 Quản lý sản phẩm ở trang admin 33 3.2.10 Quản lý User 35 3.2.11 Thống kê bán hàng 37 CHƯƠNG 4: KẾT QUẢ ĐẠT ĐƯỢC SAU KHI THỰC TẬP 39 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 40 TÀI LIỆU THAM KHẢO 42 CHECK LIST CỦA BÁO CÁO 43 DANH MỤC HÌNH ẢNH Hình 2.1 Trang chủ 13 Hình 2.2 Tạo trường danh mục sản phẩm 13 Hình 2.3 Tạo trường sản phẩm 14 Hình 2.4 Tạo trường đặt hàng 14 Hình 2.5 Tạo trường người dùng 15 Hình 2.6 Tạo danh mục sản phẩm 15 Hình 2.7 Truy cập vào quyền truy cập liệu 16 Hình 2.8 Mở quyền truy cập liệu 16 Hình 2.9 Tạo API Tokens 17 Hình 2.10 Đưa đường dẫn API vào dự án 17 Hình 2.11 Dữ liệu danh mục sản phẩm 18 Hình 2.12 Dữ liệu sản phẩm 18 Hình 2.13 Dữ liệu đặt hàng 19 Hình 2.14 Dữ liệu người dùng 19 Hình 2.15 API keys 20 Hình 2.16 Nhập API keys vào máy chủ (API Strapi) 20 Hình 2.17 Nhập API keys vào front-end 20 Hình 2.18 Tạo bảng đặt hàng 21 Hình 2.19 Giao diện tốn đơn hàng 22 Hình 3.1 Giao diện hình trang chủ 24 Hình 3.2 Giao diện hình trang chủ admin 25 Hình 3.3 Giao diện hình đăng nhập 25 Hình 3.4 Giao diện hình đăng nhập Strapi 26 Hình 3.5 Tạo mục người dùng 26 Hình 3.6 Tạo trường thích hợp cho mục người dùng 27 Hình 3.7 Tạo người dùng 27 Hình 3.8 Lưu thơng tin người dùng 28 Hình 3.9 Giao diện hình đăng nhập 28 Hình 3.10 Giao diện hình đăng xuất 29 Hình 3.11 Giao diện hình địa 29 Hình 3.12 Giao diện hình thơng tin sản phẩm 30 Hình 3.13 Giao diện hình tìm kiếm lọc sản phẩm 30 Hình 3.14 Giao diện hình đặt hàng 31 Hình 3.15 Giao diện hình tốn 31 Hình 3.16 Giao diện hình thêm danh mục sản phẩm 32 Hình 3.17 Giao diện hình xem danh mục sản phẩm 32 Hình 3.18 Giao diện hình xố danh mục sản phẩm 33 Hình 3.19 Giao diện hình sửa danh mục sản phẩm 33 Hình 3.20 Giao diện hình thêm sản phẩm 34 Hình 3.21 Giao diện hình xem sản phẩm 34 Hình 3.22 Giao diện hình xố sản phẩm 35 Hình 3.23 Giao diện hình sửa sản phẩm 35 Hình 3.24 Giao diện hình thêm thơng tin người dùng 36 Hình 3.25 Giao diện hình xem thơng tin người dùng 36 Hình 3.26 Giao diện hình xố thơng tin người dùng 37 Hình 3.27 Giao diện hình sửa thơng tin người dùng 37 Hình 3.28 Giao diện hình thống kê bán hàng 38 DANH MỤC CÁC TỪ VIẾT TẮT Dev : Developer FE : Front - end … LỜI MỞ ĐẦU Lý chọn đề tài - Thương mại điện tử ngày trở thành phần quan trọng hoạt động kinh doanh Việc có website Adam Store giúp tiếp cận lượng khách hàng lớn mở rộng thị trường bán hàng - Một website Adam Store cho phép khách hàng mua sắm giao dịch lúc đâu có kết nối internet Điều giúp tăng cường trải nghiệm mua sắm thu hút nhiều khách hàng tiềm - Tiết kiệm chi phí thời gian: So với việc mở cửa hàng vật lý, việc thiết kế website Adam Store giúp tiết kiệm chi phí th mặt bằng, nhân viên, quảng cáo Ngoài ra, việc quản lý cập nhật sản phẩm dễ dàng tiết kiệm thời gian - Một website Adam Store giúp tiếp cận khách hàng không địa phương mà cịn tồn quốc quốc tế Điều mở nhiều hội kinh doanh giúp xây dựng thương hiệu phạm vi rộng - Trong giới kinh doanh cạnh tranh gay gắt nay, việc có website Adam Store giúp tồn phát triển thị trường số ngày phát triển ⇨ Thiết kế website Adam Store không xu hướng mà yếu tố quan trọng giúp doanh nghiệp tiếp cận khách hàng, mở rộng thị trường nâng cao hiệu suất kinh doanh Mục tiêu đề tài - Tạo trải nghiệm mua sắm tốt cho khách hàng: Trang web Adam Store cần thiết kế cho dễ sử dụng, thân thiện với người dùng, tối ưu hóa trải nghiệm mua sắm Mục tiêu làm cho khách hàng cảm thấy thoải mái tìm kiếm sản phẩm, xem thơng tin chi tiết, hồn tất q trình mua hàng - Mở rộng thị trường tiếp cận khách hàng mới: Thiết kế website Adam Store giúp doanh nghiệp mở rộng thị trường không khu vực địa lý mà quy mơ quốc gia tồn cầu Mục tiêu tiếp cận nhiều khách hàng thu hút quan tâm đối tượng mục tiêu 10 - Cải thiện tương tác hỗ trợ khách hàng: Trang web Adam Store nên hỗ trợ tương tác nhanh chóng với khách hàng thông qua chat trực tuyến, hỗ trợ qua điện thoại email Mục tiêu tăng cường hài lòng trung thành khách hàng ⇨ Mục tiêu đề tài "Thiết kế website Adam Store" xây dựng tảng trực tuyến mạnh mẽ, đáp ứng nhu cầu khách hàng góp phần nâng cao hiệu kinh doanh doanh nghiệp lĩnh vực thương mại điện tử Đối tượng phạm vi nghiên cứu a) Đối tượng: - Người dùng: Đối tượng nghiên cứu người dùng website Adam Store Là khách hàng tiềm có nhu cầu mua sắm thời trang trực tuyến - Nhà quản lý website: Những người quản lý điều hành website Adam Store, bao gồm người có trách nhiệm thiết kế giao diện, quản lý nội dung, hoạt động liên quan đến bán hàng website b) Phạm vi nghiên cứu: Nghiên cứu tập trung vào sàn thương mại điện tử tàng trực tuyến xem xét cách thiết kế giao diện website để tạo trải nghiệm mua sắm trực tuyến thuận tiện hấp dẫn cho khách hàng 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 hướng phát triển - Mở đầu - Chương 1: Tổng quan cơng ty TMA Bình Định Solutions sở lý thuyết Front – End Developer - Chương 2: Triển khai dự án xây dựng website Adam Store - Chương 3: Kết đạt sau thực tập - Kết luận hướng phát triển 11