Đề tài xây dựng ứng dụng đa nền tảng về thương mại điện tử sản phẩm handmade

ĐẠI HỌC ĐÀ NẴNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT-HÀN ĐỒ ÁN CHUYÊN NGÀNH ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG ĐA NỀN TẢNG VỀ THƯƠNG MẠI ĐIỆN TỬ SẢN PHẨM HANDMADE Giáo viên hướng dẫn: Sinh viên thực hiện: Lớp: Khóa: TS Nguyễn Thanh Nguyễn Phạm Tuấn Vũ Nguyễn Minh Trị 19IT5 2019 - 2024 Đà nẵng, tháng 12 năm 2022 ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT - HÀN ĐỒ ÁN CHUYÊN NGÀNH XÂY DỰNG ỨNG DỤNG ĐA NỀN TẢNG VỀ THƯƠNG MẠI ĐIỆN TỬ SẢN PHẨM HANDMADE Đà Nẵng, ngày tháng 12 năm 2022 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… Chữ kí giảng viên hướng dẫn LỜI CẢM ƠN Lời đầu tiên, chúng em xin gửi lời cảm ơn chân thành đến Trường Đại Học Công nghệ Thông tin Truyền thông Việt - Hàn tạo hội cho chúng em học tập ngơi trường có sở vật chất hàng đầu, với chất lượng giảng dạy vô chuyên nghiệp Trong suốt thời gian học tập rèn luyện Trường Đại Học Công nghệ Thông tin Truyền thông Việt - Hàn nay, chúng em nhận nhiều quan tâm, giúp đỡ quý Thầy cô bạn bè Chúng em gửi lời cảm ơn đặc biệt đến thầy Nguyễn Thanh, giảng viên hướng dẫn đề tài đồ án chuyên ngành chúng em trình làm đồ án chuyên ngành Nhờ giúp đỡ nhiệt tình, nhẫn nại dành thời gian hướng dẫn, bảo, trả lời thắc mắc suốt q trình để chúng em có kết tốt Với điều kiện thời gian kinh nghiệm hạn chế, báo cáo khơng thể tránh thiếu sót Chúng em mong nhận bảo, đóng góp ý kiến q thầy để chúng em có điều kiện bổ sung, nâng cao ý thức mình, phục vụ tốt công tác thực tế sau Chúng em xin chân thành cảm ơn! Đà Nẵng, ngày tháng 12 năm 2022 Sinh viên thực MỤC LỤC MỞ ĐẦU Lý chọn đề tài Một doanh nghiệp lựa chọn sử dụng ứng dụng ln nhắm đến nhiều mục tiêu Trong có thu hút nhiều khách hàng tốt gia tăng trải nghiệm cho khách hàng Tất phục vụ cho việc nâng cao chất lượng sản phẩm/dịch vụ mà doanh nghiệp cung cấp Mà nay, phần lớn khách hàng sử dụng tảng khác Vì việc lựa chọn lập trình ứng dụng đa tảng trở nên cần thiết Chính ưu điểm lập trình ứng dụng đa tảng nên chúng em lựa chọn để thực đồ án chuyên ngành lần Xây dựng ứng dụng đa tảng thương mại điện tử sản phẩm handmade có giao diện bắt mắt, đơn giản, dễ sử dụng khách hàng, phù hợp với xu động, phát triển Mục tiêu nhiệm vụ nghiên cứu • Vận dụng tất kiến thức học suốt thời gian qua nhà trường đồng thời nghiên cứu kiến thức để đáp ứng nhu cầu cho việc thực dự án • Nghiên cứu react-native, firebase, react-redux • Tạo ứng dụng android website, thao tác với chức ứng dụng Đối tượng nghiên cứu • • • • React Native Firebase React Redux Tìm hiểu thao tác lập trình, quản lí code, xử lí lỗi Kết Xây dựng ứng dụng Android, IOS Website theo lập trình ứng dụng đa tảng, với gần gũi với người, dễ sử dụng, giao diện bắt mắt thao tác với chức cần thiết ứng dụng CHƯƠNG I: CƠ SỞ LÝ THUYẾT 1.1 React Native 1.1.1 Giới thiệu React Native framework mã nguồn mở sáng tạo Facebook Nó sử dụng để phát triển ứng dụng di động Android, iOS, Web UWP cách cho phép nhà phát triển sử dụng React với môi trường ứng dụng gốc (native) Trên phiên hệ điều hành Windows trang bị sẵn tính Remote Desktop Tuy nhiên để sử dụng tính bạn phải kích hoạt chúng trước tiên • Native App tên gọi ứng dụng xây dựng phát triển cơng cụ nhà phát triển cung cấp cho lập trình viên Hai nhà phát triển App hàng đầu Android iOs • Hybrid App kết hợp ứng dụng Web ứng dụng mobile Người dùng cài đặt lên điện thoại giống ứng dụng Native bình thường, vừa tìm thấy kho ứng dụng trả phí 1.1.2 Nguyên lý hoạt động React Native viết kết hợp JavaScript JXL, mã đánh dấu đặc biệt giống với XML Framework có khả thao tác với hai thread main thread JS thread Mỗi thread có vai trị riêng biệt • Main thread: Đảm nhiệm vai trị cập nhật giao diện người dùng xử lý tương tác người dùng • JS thread: Đảm bảo hệ thống hoạt động hiệu thông qua việc thực thi xử lý code JavaScript Nguyên lý hoạt động RN gần tương tự với React React Native không sử dụng thao tác với DOM HTML mà chạy trình xử lý với tảng gốc React Native sử dụng Bridge (cầu nối) Mặc dù thread JavaScript native viết ngơn ngữ hồn tồn khác nhau, Bridge tính cầu nối giúp thao tác hai chiều thực dễ dàng 1.1.3 Ưu điểm • Có khả tái sử dụng code • Sở hữu cộng đồng hỗ trợ lớn mạnh • Có tính ổn định khả tối ưu cao • Thời gian học khơng q dài 1.1.4 Nhược điểm • Vẫn cịn thiếu nhiều component quan trọng • Khơng sử dụng để tạo game có đồ họa cao luật chơi phức tạp • Hiệu so với sử dụng native app • Khơng thích hợp ứng dụng vào app cần khả tính tốn cao • Vì sử dụng JavaScript nên chưa có bảo mật an tồn • Khả tùy biến số module chưa thật tốt • Khơng thích hợp ứng dụng vào app cần khả tính toán cao 1.2 React Redux 1.2.1 Giới thiệu Redux thư viện Javascript giúp tạo thành lớp quản lý trạng thái ứng dụng Được dựa tảng tư tưởng kiến trúc Flux Facebook giới thiệu, Redux thường đôi kết hợp hoàn hảo với React (React Js React Native) 1.2.2 Nguyên lý hoạt động • Nguyên lý thứ 1: tất thứ mà thay đổi ứng dụng, bao gồm liệu trạng thái giao diên – UI state, lưu đối tượng gọi state state tree.Ttrong trình hoạt động ứng dụng, bị phụ thuộc nhiều yếu tố: liệu từ máy chủ ban đầu, thao tác người dùng (nhập liệu, click menu, button ), liệu cập nhật từ máy chủ, liệu tính tốn ứng dụng (Ví dụ: tính tốn số dư tài khoản dựa biến động tỉ giá) yếu tố gọi nguồn liệu Những nguồn liệu đến từ nơi khác nhau, nào, khiến cho ứng dụng khó kiểm soát, chúng tác động đến thành phần đơn lẻ, nhiều thành phần ứng dụng, hiệu ứng dây chuyền Chính phức tạp đó, vấn đề mà Redux muốn giải quyết, tất nguồn liệu cần phải quản lý tạo thành nguồn nhất, tin cậy • Nguyên lý thứ 2: state phép đọc, Cách để thay đổi State ứng dụng phát Action (là object mơ tả xảy ra).Trạng thái ứng dụng không phép thay đổi “trực tiếp”, trạng thái đối tượng mà thôi, nên việc thay đổi Tuy nhiên, với Redux hay Flux trạng thái thay đổi có kiện xảy ra, giống trận phép nghe lời từ huy, tin tức tình báo gởi tới huy, khơng có lệnh từ huy tất khơng phép manh động • Nguyên lý thứ 3: sử dụng pure function nhận tham số state trước action trả state Hàm gọi reducer, (pure function hàm trả giá trị phụ thuộc vào giá trị tham số, pure function có tập tham số giá trị trả tập tương tự thế) Việc thay đổi trạng thái ứng dụng, thực thông qua hàm tuý Đưa vào giá trị kiện, trạng thái hàm trả trạng thái Dù tương lai ứng dụng bạn lớn, hàm reducer cần nhỏ gọn thay đổi trạng thái, chúng hồn tồn kết hợp với tạo thành chuỗi kiện Ví dụ: người click vào menu (một kiện => thay đổi trạng thái), sau router cần thay đổi để phù hợp với ngữ cảnh 1.2.3 Kết hợp với React Redux dùng với thư viện Angular, Ember, jQuery thích hợp với React, React Redux cho phép quản lý UI giống hàm state Redux cập nhật state tương ứng với action • Async Actions: action không đồng bộ, gọi tới API không đồng quan tâm đến thời điểm: thời điểm bắt đầu gọi API, thời điểm nhận trả lời (timeout) dẫn đến có loại action: Action thông báo tới reducer request bắt đầu: reducer xử lý action cách chuyển cờ isFetching state Do UI biết thời gian để thay đổi Action thông báo reducer request kết thúc thành công: reducer kết hợp liệu với state mà quản lý, chuyển cờ isFetching UI thị liệu sau lấy Action thông báo với reducer request thất bại: chuyển cờ isFetching, số reducer có thơng báo chứa lỗi, UI thị lỗi • Async Flow: không đồng thực nhờ middleware: reduxthunk, redux promise cho phép gửi nhiều action, hàm promise Middleware: Đặt gửi action reducer, sử dụng để ghi log, báo lỗi, nhận API không đồng bộ, routing • Sử dụng react-router: routing ứng dụng Redux Redux tài nguyên cho liệu, react-router tài nguyên cho URL Redux có ứng dụng quan trọng nhất: Quản lý trạng thái: replay undo/redo trạng thái ứng dụng, phải nói “Khơng thể tin được” Tăng tốc phát triển: với webpack có Hot Module Replacement, kết hợp với Redux, tạo thành kết hợp ăn ý, bạn viết code debug dễ dàng Ứng dụng offline: tất thao tác người dùng lưu vào trạng thái, có kết nối Internet, đồng lên server loạt kiện 1.3 Firebase 1.3.1 Giới thiệu Firebase dịch vụ sở liệu hoạt động tảng đám mây – cloud Kèm theo hệ thống máy chủ mạnh mẽ Google Chức giúp người dùng lập trình ứng dụng cách đơn giản hóa thao tác với sở liệu Cụ thể giao diện lập trình ứng dụng API đơn giản Mục đích nhằm tăng số lượng người dùng thu lại nhiều lợi nhuận Đặc biệt, dịch vụ đa bảo mật cực tốt Firebase hỗ trợ hai tảng Android IOS Khơng có khó hiểu nhiều lập trình viên chọn Firebase làm tảng để xây dựng ứng dụng cho hàng triệu người dùng toàn giới 1.3.2 Cách thức hoạt động Sau Google mua lại tiến hành phát triển, Firebase thực nhiều hoạt động hỗ trợ Dưới cách thức hoạt động bật Firebase • Firebase Realtime Database: Đầu tiên, để sử dụng tảng tạo ứng dụng, lập trình viên cần đăng ký tài khoản Firebase Đăng ký xong, bạn sở hữu Realtime Database có dạng JSON đồng thời gian đến tất kết nối client Dữ liệu database tự động cập nhật liên tục lập trình viên tiến hành phát triển ứng dụng Sau cập nhật, liệu truyền tải thơng qua kết nối SSL có chứng nhận 2048 bit Tại ứng dụng đa tảng toàn máy khách dùng chung database Trong trường hợp kết nối Internet bị gián đoạn, liệu lưu trữ local cập nhật đường truyền ổn định • Freebase Authentication: Hoạt động Firebase tạo lập quy trình xác thực người dùng thông qua phương tiện Goolge, Email, GitHub, Facebook, Twitter xác thực nặc danh ứng dụng Việc xác thực giúp bảo vệ an tồn liệu thơng tin cá nhân người dùng mạng • Firebase Hosting: Các thức hoạt động tiêu biểu cuối cùng, không nhắc đến Firebase cung cấp hosting Firebase hosting thông qua hỗ trợ SSL đến từ mạng CDN Nhờ mà lập trình viên tiết kiệm nhiều thời gian thiết kế phát triển ứng dụng Hình 16: Biểu đồ hiển thị thơng sản phẩm Hình 17: Biểu đồ tốn 21 Hình 18: Biểu đồ hoạt động quản lí thơng tin cá nhân Hình 19: Biểu đồ hoạt đơng quản lí khách hàng 22 Hình 20: Biểu đồ hoạt động quản lí danh mục sản phẩm Hình 21: Biểu đồ hoạt động quản lí nhân viên 23 2.6 Biểu đồ giao tiếp Hình 22: Biểu đồ giao tiếp đăng ký Hình 23: Biểu đồ giao tiếp đăng nhập Hình 24: Biểu đồ giao tiếp quản lý thơng tin cá nhân 24 Hình 25: Biểu đồ giao tiếp quản lí nhân viên Hình 26: Biểu đồ giao tiếp quản lí khách hàng Hình 27: Biểu đồ giao tiếp mua hàng (cập nhật giỏ hàng, toán) 25 2.7 Biểu đồ Hình 29: Biểu đồ UC sửa thơng tin cá nhân Hình 30: Biểu đồ UC quản lí danh sách thành viên 26 Hình 31: Biểu đồ UC mua hàng (cập nhật giỏ hàng, toán) 2.8 Cơ sở liệu Hình 33: Các mối quan hệ sở liệu 27 Từ điển sở liệu • Chia sản phẩm theo loại (tên bảng: chia sp_loai) Tên Kiểu Id_Loai int Ten_Loai varchar Khóa ngoại khóa Khóa Mơ tả Mã loại Tên loại • Sản phẩm (tên bảng: sanpham) Kiểu Tên Khóa ngoại khóa Mã sản phẩm IdSP int Ten_SP varchar DonGia decimal MoTa text Id_Loai int Hinh1 varchar Hình sản phẩm Hinh2 varchar Hình sản phẩm Hinh3 varchar Hình sản phẩm • Khóa Mơ tả Tên sản phẩm Khóa Đơn giá Giới thiệu sản phẩm Khóa ngoại Mã loại Phân quyền (tên bảng: phanquuyen) Tên Kiểu Khóa ngoại khóa Khóa Mơ tả Ma_Quyen int Mã khách hàng Ten_Quyen varchar Tên quyền(admin, khách hàng, nhân viên) MoTa varchar Mơ tả chức quyền 28 • Tài khoản (tên bảng: taikhoan) Tên Kiểu Khóa ngoại khóa Khóa Mơ tả idKH int Mã khách hàng Ten_KH varchar Ma_Quyen int TenTaiKhoan varchar Tên tài khoản đăng nhập Password varchar Mật Email varchar Email Sdt int Số điện thoại GioiTinh varchar Giới tính Add1 varchar Địa Add2 varchar Địa Tên khách hàng Khóa ngoại Mã quyền • Giỏ hàng (tên bảng: giohang) Tên Kiểu Khóa ngoại khóa Khóa Mơ tả Mã giỏ hàng Id_GH int idKH varchar Mã khách hàng idSP varchar Mã sản phẩm Tên_SP varchar Tên sản phẩm SoLuong int Số lượng định mua khách hàng DonGia decimal Đơn giá sản phẩm cẩn mua khách hàng TongTien decimal Tổng tiền 29 • Hóa đơn (tên bảng: hoadon) Tên Kiểu Khóa ngoại khóa Mơ tả id_HD int Khóa Mã hóa đơn idKH int Khóa phụ Mã khách hàng Date_create date Ngày tạo hóa đơn Note text Chú thích khách hàng • Chi tiết hóa đơn (tên bảng: chitiet_hd) Tên Kiểu Khóa ngoại khóa Mơ tả id_HD int Khóa phụ Mã hóa đơn idSP int Khóa phụ Mã khách hàng SoLuong int Số lượng sản phẩm cần mua khách hàng DonGia decimal Đơn giá thay đổi theo số lượng sản phẩm (nếu khách hàng mua nhiều giảm) 30 CHƯƠNG KẾT QUẢ THỰC HIỆN Trang giới thiệu: Trang đăng nhập, đăng k 31 Trang chủ Giỏ hàng, toán 32 Trang cá nhân Lịch sử mua 33 KẾT LUẬN Kết đạt - Bản thân tích lũy kinh nghiệm việc làm việc nhóm dựa án - Xây dựng ứng dụng đa tảng thương mại điện tử sản phẩm Handmade - Hiểu nguyên lý hoạt động đa tảng - Ứng dụng thao tác với chức cần thiết ứng dụng thương mại điện tử Thuận lợi khó khăn a) Thuận lợi - Nhiều nguồn tài liệu tham khảo - Nắm vững kiến thức học trường để vận dụng vào dự án - Kỹ làm việc nhóm dự án tích lũy q trình thực dự án b) Khó khăn - Áp lực thời gian - Ứng dụng gặp số lỗi nhiều thời gian để sửa - Một số chức chưa sử dụng Hướng phát triển - Cải thiện mặt giao diện người dùng Hoàn thiện nâng cấp chức Nâng cao tính bảo mật cho ứng dụng Thanh tốn trực tuyến mã QR, ví điện tử, Tài liệu tham khảo [1] https://www.npmjs.com/ [2] https://www.npmjs.com/package/firebase [3] https://firebase.google.com/docs/auth [4] https://firebase.google.com/docs/firestore [5] https://reactnative.dev/docs/components-and-apis [6] https://www.youtube.com/playlist?list=PLaEe_zCZhg7sdpLeEo8J8jRZ2r9XCHTH [7] https://docs.expo.dev/ [8] https://docs.expo.dev/get-started/create-a-new-app/ [9] https://docs.expo.dev/get-started/create-a-new-app/ [10] https://stackoverflow.com/questions 34 35