Xây dựng trang thương mại điện tử bán giày sneakers

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 TRANG THƯƠNG MẠI ĐIỆN TỬ BÁN GIÀY SNEAKERS Đơn vị thực tập : TMA Solutions Bình Định Giảng viên hướng dẫn : ThS Nguyễn Văn Chức LỜI CẢM ƠN Trong suốt thời gian thực tập học tập, em thu thập nhiều kiến thức quý báu kinh nghiệm thực tiễn Bước qua chặng đường, em khơng thể khơng tỏ lịng biết ơn đến người đồng hành hỗ trợ em vượt qua thách thức Đầu tiên,em muốn gửi lời cảm ơn chân thành đến Thầy Nguyễn Văn Chức Em muốn bày tỏ lòng biết ơn đặc biệt đến Trường Đại học Kinh Tế - Đại học Đà Nẵng thầy cô Khoa Thống Kê – Tin Học Sự hỗ trợ dạy bảo thầy giúp em có kiến thức tảng phương pháp làm việc hiệu Không thể không nhắc đến ủng hộ tạo điều kiện thuận lợi từ ban lãnh đạo Mentor Phạm Quốc Khánh TMA Solutions Bình Định.Sự chia sẻ kinh nghiệm lời khuyên từ mentor Khánh nguồn động viên hỗ trợ quý báu giúp em vượt qua khó khăn tiến xa hơn.Điều giúp em có mơi trường thực tập tích cực, nơi em học hỏi phát triển kỹ thực tế Lời tri ân thể đủ lòng biết ơn sâu sắc em người đóng góp vào thành cơng em Cuối cùng, em kính chúc q thầy dồi sức khỏe thành công nghiệp giảng dạy cao quý Em xin chân thành cảm ơn! LỜI CAM ĐOAN Em xin cam đoan đề tài "Xây dựng trang web bán giày" thực em , dựa hướng dẫn Thạc sĩ Nguyễn Văn Chức Mentor Phạm Quốc Khánh Đây kết trình nghiên cứu thực tự tạo, không chép từ nguồn khác Ngoài ra, báo cáo em, em tham khảo số nguồn tài liệu để bổ sung kiến thức thông tin cần thiết Tất nguồn em trích nguồn thích cách rõ ràng, tuân thủ nguyên tắc tôn trọng quyền tác giả nguồn thông tin Em cam kết hoàn toàn chịu trách nhiệm sẵn sàng chấp nhận kiểm tra kiểm định từ phía mơn, khoa nhà trường, trường hợp có vấn đề sai trái xảy Em hiểu việc trì tính trung thực, đạo đức chất lượng nghiên cứu thực dự án trách nhiệm em MỤC LỤC LỜI CẢM ƠN iv LỜI CAM ĐOAN v MỤC LỤC vi DANH MỤC HÌNH ẢNH ix DANH MỤC BẢNG BIỂU xi DANH MỤC CÁC TỪ VIẾT TẮT xii LỜI MỞ ĐẦU CHƯƠNG TỔNG QUAN VỀ CÔNG TY 1.1 Tổng quan cơng ty TMA Solutions Bình Định 1.1.1 Thông tin chung 1.1.2 Giới thiệu thông ty 1.2 Giải pháp Sáng kiến Công nghệ 1.3 Chương trình đào tạo TMA Solutions Bình Định CHƯƠNG CƠ SỞ LÍ THUYẾT 2.1 Khái niệm Web 2.2 Web developer 2.3 Giới thiệu FrontEnd 2.3.1 HTML-CSS 2.3.2 Javascript 2.3.3 ReactJS 2.3.4 Redux - Redux Toolkit 10 2.3.5 Ant Design 12 2.4 Công cụ sử dụng 13 2.4.1 Visual Studio Code 13 2.4.2 Git – Github 13 2.4.3 Strapi 15 2.4.4 Stripe 17 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 17 3.1 Tác nhân 17 3.2 Usecase 18 3.3 Mô tả chi tiết Usecase 18 3.3.1 Đăng kí 18 3.3.2 Đăng nhập 19 3.3.3 Quản lý tài khoản khách hàng 20 3.3.4 Thống kê 21 3.3.5 Quán lý sản phẩm 21 3.3.6 Đăng xuất 22 3.3.7 Quản lý giỏ hàng 23 3.3.8 Thanh toán 24 3.3.9 Đặt hàng 24 CHƯƠNG TRIỂN KHAI VÀ XÂY DỰNG WEBSITE 25 4.1 Môi trường xây dựng website 25 4.2 Xây dựng project 26 4.2.1 Quản lý source code tảng GitHub 26 4.2.2 Cài đặt môi trường 26 4.2.3 Back End 26 4.2.4 Front End 30 4.3 Giao diện 31 4.3.1 Giao diện đăng kí / đăng nhập / đổi mật / quên mật 31 4.3.1.1 Trang đăng ký 32 4.3.1.3 Đăng nhập thành công 33 4.3.2 Giao diện website 33 4.3.2.1 Trang chủ 33 4.3.2.2 Trang sản phẩm 34 4.3.2.3 Trang about 34 4.3.2.4 Trang liên hệ 35 4.3.2.5 Giỏ hàng 35 4.3.2.6 Trang toán 36 4.3.3 Giao diện trang Admin 36 4.3.3.1 Trang quản lý sản phẩm 36 4.3.3.2 Trang thống kê 37 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 37 TÀI LIỆU THAM KHẢO 40 DANH MỤC HÌNH ẢNH Hình Logo cơng ty TMA Solutions Bình Định Hình HTML-CSS Hình JavaScript Hình ReactJS Hình Redux 11 Hình Ant Design 12 Hình Visual Studio Code 13 Hình Git 13 Hình Github 15 Hình 10 Strapi 16 Hình 11 Stripe 17 Hình 12 Usecase 18 Hình 13 Kết sau chạy dự án tạo Strapi 27 Hình 14 Strapi DashBoard 27 Hình 15 Tạo Collections Types 28 Hình 16 Tạo Fields 28 Hình 17 Create new entry 29 Hình 18 Cấp quyền Roles 29 Hình 19 Mở quyền truy cập 30 Hình 20 Test API Postman 30 Hình 21 File package.json 31 Hình 22 Trang đăng ký 32 Hình 23 Trang đăng nhập 32 Hình 24 Đăng nhập thành cơng 33 Hình 25 Trang chủ 33 Hình 26 Trang sản phẩm 34 Hình 27 Trang About 34 Hình 28 Trang liên hệ 35 Hình 29 Giỏ hàng 35 Hình 30 Trang tốn 36 Hình 31 Trang quản lý sản phẩm 36 Hình 32 Trang thống kê 37 DANH MỤC BẢNG BIỂU Bảng Bảng mô tả chi tiết Usecase Đăng ký 19 Bảng Bảng mô tả chi tiết Usecase Đăng nhập 20 Bảng Bảng mô tả chi tiết Usecase quản lý tài khoản khách hàng 21 Bảng Bảng mô tả chi tiết Usecase thống kê 21 Bảng Bảng mô tả chi tiết Usecase quản lý sản phẩm 22 Bảng Bảng mô tả chi tiết Usecase Đăng xuất 23 Bảng Bảng mô tả chi tiết Usecase quản lý giỏ hàng 24 Bảng Bảng mô tả chi tiết Usecase toán 24 Bảng Bảng mô tả chi tiết Usecase đăt hàng 25 DANH MỤC CÁC TỪ VIẾT TẮT HTML : HyperText Markup Language CSS : Cascading Style Sheets JS : JavaScript BE : BackEnd FE : FrontEnd UI : User Interface VS : Visual Studio … - Cài đặt ứng dụng liên quan:  Cài đặt Visual Studio Code 2019  Cài đặt Node Module  Cài đặt Git - Quản lý dự án:  Quản lý source code dự án tảng GitHub  Trao đổi ứng dụng Skype - Cơng cụ tìm kiếm hỗ trợ khác  Trình duyệt web: Chrome 4.2 Xây dựng project 4.2.1 Quản lý source code tảng GitHub Link GitHub dự án: https://github.com/NTKN2205/SigourNeyssss 4.2.2 Cài đặt môi trường Trước bắt đầu, đảm bảo máy tính cài đặt Node.js npm Nếu chưa có Node.js, tải cài đặt Node.js từ trang web thức Node.js 4.2.3 Back End  Bước 1: Tạo thư mục Back-End  Bước 2: Vào visual studio code, mở Terminal chạy câu lệnh: cd thư mục Back-end BE npx create-strapi-app@latest  Bước 3: Tiếp tục chạy câu lệnh: npm run develop 26 Hình 13 Kết sau chạy dự án tạo Strapi  Bước 4:Sau chạy câu lệnh ta Click chuột vào http://localhost:1337/admin mở trang web quản trị Strapi Tại đây, bạn yêu cầu tạo tài khoản,sau đăng kí tài khoản thành cơng,bạn đăng nhập vào trang quản trị Strapi Hình 14 Strapi DashBoard  Bước 5:Sau đăng nhập, bạn tạo bảng liệu khác cách tạo "Collections Types" với Content-type Builder Chúng đại diện cho loại liệu mà ứng dụng bạn quản lý 27 Hình 15 Tạo Collections Types  Bước 6:Bây bạn định nghĩa trường (fields) cho collection bạn Nhấp vào "Add another field" để thêm trường Đối với trường, bạn cần xác định kiểu liệu (ví dụ: Text, Number, Date, Boolean, v.v.) cài đặt khác (ví dụ: required, unique) Hình 16 Tạo Fields  Bước 7: Bạn thêm liệu cho "Collections Types" với Content Manager Click vào Content Manager -> chọn Collection Type bạn muốn thêm liệu -> Click Create new entry 28 Hình 17 Create new entry  Bước 8: Cấp quyền truy cập thao tác liệu API cách vào Settings -> Users & Permissions Plugin -> Roles -> Authenticated mở quyền truy cập thao tác với liệu Collection Types Hình 18 Cấp quyền Roles  Bước 9:Mở quyền truy cập thao tác liệu Collection Types Authenticated 29 Hình 19 Mở quyền truy cập  Bước 10:Dùng Postman để test Api Hình 20 Test API Postman 4.2.4 Front End  Bước 1: Tạo thư mục Front End  Bước 2: Vào visual studio code, mở Terminal chạy câu lệnh: cd thư mục Front End FE npx create-react-app FE  Bước 3: Tiếp tục chạy câu lệnh: 30 npm start  Bước 4: Thêm thư viện hỗ trợ cho việc xây dựng front end: Các thư viện sau cài đặt hiển thị bên file package.json Hình 21 File package.json 4.3 Giao diện 4.3.1 Giao diện đăng kí / đăng nhập / đổi mật / quên mật 31 4.3.1.1 Trang đăng ký Hình 22 Trang đăng ký 4.3.1.2 Trang đăng nhập Hình 23 Trang đăng nhập 32 4.3.1.3 Đăng nhập thành cơng Hình 24 Đăng nhập thành cơng 4.3.2 Giao diện website 4.3.2.1 Trang chủ Hình 25 Trang chủ 33 4.3.2.2 Trang sản phẩm Hình 26 Trang sản phẩm 4.3.2.3 Trang about Hình 27 Trang About 34 4.3.2.4 Trang liên hệ Hình 28 Trang liên hệ 4.3.2.5 Giỏ hàng Hình 29 Giỏ hàng 35 4.3.2.6 Trang tốn Hình 30 Trang tốn 4.3.3 Giao diện trang Admin 4.3.3.1 Trang quản lý sản phẩm Hình 31 Trang quản lý sản phẩm 36 4.3.3.2 Trang thống kê Hình 32 Trang thống kê KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN  Đạt được: Trong trình thực tập, em có hội học hỏi phát triển nhiều kỹ kiến thức quan trọng Dưới tóm tắt điều em học đạt được: - Áp dụng kiến thức kỹ năng: Thực tập cho em hội thực hành kiến thức mà em học trường đại học môi trường thực tế Em tiếp xúc với công nghệ công cụ mới, học cách làm việc theo quy trình phát triển kỹ lập trình, quản lý dự án, phân tích giải vấn đề - Học hỏi từ đồng nghiệp: Trong trình thực tập, em có hội làm việc với đồng nghiệp có kinh nghiệm ngành Điều giúp em học hỏi tư làm việc chuyên nghiệp, cách làm việc hiệu xây dựng hội phát triển tương lai - Kỹ giao tiếp thuyết trình: Thực tập giúp em phát triển kỹ giao tiếp hiệu hơn, không việc làm việc với đồng nghiệp mà cịn việc 37 trình bày ý kiến thơng tin cách rõ ràng Em có hội thuyết trình trình bày cơng việc trước đối tượng lớn - Giải vấn đề: Trong suốt trình thực tập, em phải đối mặt với nhiều vấn đề thách thức khác Việc giúp em nâng cao kỹ tự giải học cách quản lý áp lực công việc - Xác định hướng nghiệp nghiệp: Thực tập giúp em khám phá xác định hướng nghiệp nghiệp Em có hội trải nghiệm lĩnh vực chuyên môn khác ngành cơng nghệ đánh giá xem liệu có phù hợp với ngành hay không - Thực dự án thành tựu cá nhân: Trong suốt thời gian thực tập, em tự hoàn thành dự án cá nhân đóng góp vào dự án nhóm Điều giúp em xây dựng thêm thành tựu cá nhân bổ sung vào hồ sơ chun mơn  Hạn chế: Mặc dù nỗ lực dự án mặt hạn chế sau: - Thiếu kinh nghiệm:Em cịn thiếu kinh nghiệm cơng việc môi trường thực tế - Thiếu kiến thức chuyên mơn:Em cịn thiếu kiến thức chun sâu cơng nghệ công cụ cụ thể sử dụng tập đồn - Áp lực:Thường mơi trường làm việc cơng ty cơng nghệ thường nhanh chóng áp lực công việc cao Nên em thể gặp khó khăn việc quản lý thời gian, đảm bảo chất lượng công việc  Hướng phát triển: Kỳ thực tập giúp em nhận thức quan trọng việc liên tục học hỏi phát triển kiến thức kỹ mình.Ngồi em muốn tìm hiểu thêm mảng Backend học công nghệ liên quan: - Frontend: Hiểu sâu sử dụng thành thạo ReactJS,Redux Toolkit 38 - Backend: Tìm hiểu thêm Nodejs framework liên quan - Kĩ mềm: Tiếp tục trau dồi phát triển 39 TÀI LIỆU THAM KHẢO Trang web: https://react.dev/ Trang web: https://redux-toolkit.js.org/ Trang web: https://ant.design/ Trang web: https://stripe.com/ Trang web: https://strapi.io/ Trang web: https://stackoverflow.com/ 40