2.1 Khảo sát các giao diện điện tử hiện nay
Các nền tảng thương mại điện tử miễn phí hàng đầu như Magento, OpenCart, PrestaShop, Wordpress, osCommerce,…đang rất phổ biến và được sử dụng bởi rất nhiều cửa hàng trực tuyến trên toàn thế giới. Các giải pháp thương mại điện tử Open Source giúp lập trình và quản lý website thương mại điện tử.
Nhờ vào các giải pháp này, khách hàng có thể quản lý danh mục sản phẩm, cài đặt website bán hàng trực tuyến (đồ họa và hỗ trợ tối đa người dùng), đề xuất quy trình bán hàng tối ưu (giỏ hàng, chuyển phát, thuế và các phương thức thanh toán) đồng thời đảm bảo hoạt động của website (đơn hàng, chiến dịch marketing và emailing, quan hệ khách hàng, xúc tiến thương mại…).
Đặc biệt, nhu cầu sử dụng Framework Shopify hiện tại đang là nền tảng thương mại điện tử tốt nhất trên thế giới. Khác với những đối thủ cạnh tranh khác, Shopify luôn tiên phong áp dụng những công nghệ mới nhất và tiên tiến nhất của internet để tích hợp vào website sử dụng Shopify. Cùng với đó, Shopify sở hữu đội ngũ chuyên gia nhiều năm kinh nghiệm và có những am hiểu sâu sắc về thương mại điện tử nói riêng và công nghệ internet nói chung. Việc chọn lựa các giải pháp hiệu quả nhất trên thị trường dựa trên nhiều tiêu chí đã được đề ra sau nhiều năm theo sát công nghệ, tích lũy kinh nghiệp và đóng góp vào lĩnh vực Open Source. Em tập trung vào các giải pháp bền vững, chất lượng của cộng đồng lập trình, khả năng phát triển cũng như tính bảo mật của các giải pháp này.
Qua việc khảo sát trên mạng cũng như trong quá trình làm đồ án tốt nghiệp tại Trung tâm RDCMA của trường ĐH Công nghệ thông tin và truyền thông Thái Nguyên em đã khảo sát một vài Framework cùng với Shopify và thấy được những đặc điểm như sau:
Haravan:
Shopify và Haravan là 2 nền tảng tạo website bán hàng cùng rất nhiều tính năng và tiện ích quản lý khách hàng, sản phẩm, marketing, cũng như nhiều hỗ trợ tốt cho shop bán hàng online. Về tính năng Haravan có cách thức vận hành tương tự Shopify chỉ có 1 vài điểm khác biệt sau đây:
Về giao diện và trải nghiệm người dùng của Haravan ở trong phần admin (quản trị) chưa được thông minh và mượt mà như Shopify. Và quan trọng hơn là có 1 vài tính năng vẫn thiếu sót chưa hoàn thiện, chưa có 1 hệ thống đồ sộ app hỗ trợ như Shopify.
Nhưng ngược lại về giao diện ngoài trang bán hàng thì đã được làm theo phong cách quen thuộc và thân thiện hơn với người Việt.
Hệ thống POS (Point Of Sales) tức là các công cụ hỗ trợ tại điểm bán như máy hóa đơn, máy thanh toán thẻ … chưa được hoàn thiện như Shopify.
Chưa có ứng dụng quản lý trên smartphone thuận lợi như Shopify.
Tuy nhiên, thì đây là một sản phẩm làm tại Việt Nam nên họ có thể kết nối được với Giao Hàng Nhanh, 5 Giây, Webtretho, Kiot Việt nên sẽ thêm một số tính năng về vận chuyển và Marketing phù hợp hơn với người Việt Nam.
Magento
Magento là một Thương mại điện tử ứng dụng web mã nguồn mở.
Shopify là một sản phẩm thương mại (mà bạn cần phải trả tiền) trong khi Magento cộng đồng là một phần mềm mã nguồn mở miễn phí.
Qua khảo sát một vài sản phẩm của Magento em nhận thấy rằng hầu hết các sản phẩm đã có những tính năng nổi bật như add to cart, wishlist, compare… Tuy nhiên thì giao diện chưa được mượt khi hover cũng như xử lý các action. Có hỗ trợ slider tuy nhiên không được mượt và nhiều hiệu ứng như Nivoslider.
Với Magento chức năng viết Blog được sử dụng plugin miễn phí còn với Shopify chức năng này đã được tích hợp sẵn
Woocommerce
WooCommerce là một plugin cơ bản WordPress, là một lựa chọn tốt cho phép quản trị web để tạo ra chất lượng, các trang web chức năng cao.
Shopify cung cấp thêm tính năng nhanh hơn, nâng cao hơn và với một thiết kế tốt hơn, nó là một trong những nền tảng tốt nhất hiện có. Ngoài ra, Shopify chắc chắn là dễ dàng hơn để thực hiện và an toàn hơn.
Khảo sát một vài sản phẩm của Woocommerce cho thấy các sản phẩm của nó có thiết kế và giao diện tương đối mượt, đẹp mắt và hầu hết đều sử dụng các hiệu ứng animation, transition đẹp. Các chức năng chuyển đổi tiền tệ tương đối hoàn chỉnh, hiệu ứng di chuyển text ở slide show độ mượt, kiểu chuyển đổi (animation) tương đối đẹp. Hỗ trợ nhiều Layout để người sử dụng lựa chọn. Menu Blog hiển thị ảnh của cùng tiêu đề bài viết ở trong Menu con.
Tuy nhiên, vẫn còn những sản phẩm chưa có đầy đủ các tính năng như icon menu.
Shopify hiện nay Ưu điểm:
Trên thị trường, hầu hết các sản phẩm Shopify hiện nay đã có đầy đủ các chúc năng cơ bản của một sản phẩm thương mại điện tử như add to cart, wishlist, quick view.
Giao diện đẹp, mượt mà với các hiệu ứng tương đối đẹp Nhược điểm:
Tuy nhiên, hầu hết đều chưa có tính năng icon menu và chức năng compare…
Không sử dụng search ajax để lọc sản phẩm, bài viết
Đề xuất giải pháp cho sản phẩm thương mại điện tử SOZO trên nền Shopify
Qua việc khảo sát các FrameWork trên, em đã học hỏi được một số những tính năng nổi bật của các Framework khảo sát và cũng đề xuất để bổ sung, áp dụng
những tính năng mới vào sản phẩm thương mại điện tử Shopify của mình.
Tạo những hiệu ứng đẹp mắt và chạy mượt cho các menu vertical và menu horizontal, bổ sung thêm các icon menu.
Sử dụng Search Ajax để lọc sản phẩm theo danh mục, price, color, size sản phẩm mà không cần tải lại trang;
Slider (Nivoslider) với các hình ảnh đẹp và các hiệu ứng css 3 với trải nghiệm mượt mà.
Các chức năng chuyển đổi tiền tệ tương đối hoàn chỉnh.
Elevate Zoom: Nó đặc biệt hữu ích để hiển thị phiên bản lớn của hình ảnh sản phẩm, và công cụ này là một giải pháp nổi tiếng trong các trang web thương mại điện tử;
Product Carousel & Product Ticker mở rộng cho thấy loại sản lựa chọn theo các tiêu chí khác nhau như sản phẩm đặc trưng, sản phẩm mới, sản phẩm được xem nhiều nhất, các sản phẩm khuyến mãi…
Khách hàng cũng có thể liên lạc với bạn thông qua Twitter và Blog;
Compare so sánh các thông tin về giá bán, hàng còn trong kho, mô tả để từ đó chọn mua sản phẩm một cách tốt nhất, hợp lý nhất.
Chức năng Wishlist thêm sản phẩm yêu thích
Hình 3.1 Sơ đồ Xmind xây dựng theme “SOZO” Shopify
Quá trình xây dựng sản phẩm thương mại điện tử SOZO với những tính năng vượt trội như đã trình bày ở trên, em đã đưa ra kế hoạch để xây dựng website của mình trong suốt quá trình thực tập tại trung tâm RDCMA.
Đối với giao diện người dùng để thực hiện tốt vai trò, chức năng và nhiệm vụ thì website cần:
Giao diện thân thiện, bắt mắt, thu hút người dùng, mua hàng một cách dễ dàng và cho phép khách hàng cập nhật các tin tức khuyến mãi của cửa hàng.
Giao diện responsive: ưu tiên cho giao diện ở điện thoại trước và sử
dụng điện thoại làm nền tảng ban đầu, sau đó sẽ đến các thiết bị khác như máy tính bảng, laptop, desktop, retina,…
Sản phẩm chủ yếu tập trung vào việc style navigation(menu), menu- dropdown và các hiệu ứng cho menu mượt mà. Thiết kế menu-mobile phù hợp với từng loại kích thước màn hình, thêm các icon cho các menu items…
Tạo các hiệu ứng Animation mượt cho Menu, slider, các action của thẻ a, button,…
Trang web phải đảm bảo một số yêu cầu cần thiết của người sử dụng như: giao diện tương tác đơn giản, dễ dàng làm sao để các thao tác click chuột tối thiểu nhất.
Đưa ra thông tin đầy đủ chi tiết về sản phẩm, các mặt hàng có trong từng collections
Danh sản phẩm được sắp xếp một cách tuần tự rõ ràng, tìm kiếm một cách nhanh chóng…
Cho phép người dùng mua hàng trược tiếp, so sánh các sản phẩm trước khi mua…
Tốc độ xử lý của trang web nhanh, ổn định, khả năng bảo mật cao…
Giao diện quản lý admin sẽ phải có các chức năng:
Tùy chỉnh giao diện, HTML/CSS
Đăng sản phẩm, hình ảnh, bài viết
Tạo các collections, navigation, pages…
Cài đặt ứng dụng
Quản lý đơn hàng và khách hàng
Tạo mã khuyến mãi, phiếu quà tặng
Cài đặt thanh toán, vận chuyển
Theo dõi thống kê lượt truy cập, doanh thu
Chuyển hướng tên miền, URL
Phân tích hệ thống 2.2.1 Biểu đồ UseCase
Nhận diện Tác nhân và Use Case
Hệ thống được chia làm hai phần: một phần dành cho khách mua hàng, một phần dành cho nhân viên quản trị quản lý và cập nhật thông tin cho website.
Danh sách các tác nhân và Use Case:
Tác nhân Customer(Khách hàng) với các UseCase:
Đăng ký
Đăng nhập
Cập nhật tài khoản
Khôi phục mật khẩu
Tìm kiếm sản phẩm
Tìm kiếm bài viết
Xem chi tiết sản phẩm
Thêm sản phẩm vào giỏ hàng
Xóa sản phẩm khỏi giỏ hàng
Cập nhật số lượng trong giỏ hàng
Thêm sản phẩm vào giỏ hàng giỏ hàng
Xem wishlist
Xem compare
Quick view
Đặt hàng
Xem tin tức
Bình luận
Bank System với UseCase: Order
Adminitrator(Người quản trị) với các UseCase:
Đăng nhập
Quản lý bộ sưu tập(collections)
Quản lý sản phẩm
Quản lý đơn hàng
Quản lý thanh toán
Quản lý khách hàng
Quản lý bài viết(blog)
Customize theme
Trong phần dành cho khách hàng gồm có Tác nhân Customer (khách hàng) và Bank System, 2 Tác nhân này sẽ tham gia vào các Use Case sau:
Hầu hết các use case của tác nhân khách hàng đều có ở các sản phẩm thương mại nên trong nội dung nghiên cứu em tập trung vào một số chức năng nổi bật như xem wishlist, xem so sánh, xem giỏ hàng…
Trong phần dành cho nhân viên quản trị có Tác nhân Adminitrator, Tác nhân này sẽ tham gia vào các Use Case sau:
Hình 3.3: Biểu đồ Use Case cho Tác nhân Adminitrator(quản trị)
Đặc tả các Use Case
Use Case Đăng ký:
Use Case này mô tả cách thức khách hàng đăng ký trở thành thành viên chính thức của website.
Luồng sự kiện chính:
Use Case này bắt đầu khi khách hàng chọn chức năng đăng ký.
Hệ thống hiển thị trang đăng ký.
Khách hàng nhập các thông tin tài khoản bao gồm: email, mật khẩu (không phải mật khẩu thực sự của email), họ tên.
Khách hàng nhấn vào nút đăng ký.
Hệ thống lưu thông tin vào cơ sở dữ liệu và hiển thị thông báo đăng ký thành công.
Luồng sự kiện phụ:
Đăng ký bị lỗi do trùng thông tin tài khoản hay nhập thông tin cá nhân thiếu hoặc không hợp lệ, khi đó:
Hệ thống hiển thị thông báo lỗi. Khách hàng có thể trở về đầu của dòng sự kiện chính hay hủy bỏ việc đăng ký, lúc này Use Case kết thúc.
Use Case Đăng nhập:
Use Case này mô tả cách thức khách hàng là thành viên đăng nhập vào website.
Luồng sự kiện chính:
Từ trang web, khách hàng nhập email và mật khẩu và nhấn nút đăng nhập.
Hệ thống kiểm tra việc đăng nhập và hiển thị ra trang khách hàng đã đăng nhập thành công vào hệ thống.
Luồng sự kiện phụ:
Nếu khách hàng nhập sai email hoặc mật khẩu, hệ thống sẽ hiển thị một thông báo lỗi. Khách hàng có thể chọn trở về đầu của dòng sự kiện chính hay hủy bỏ việc đăng nhập, lúc này Use Case kết thúc.
Use Case này mô tả cách thức khách hàng tìm kiếm theo tên sản phẩm.
Luồng sự kiện chính:
Từ trang web, khách hàng nhập tên sản phẩm vào Form tìm kiếm và nhấn nút tìm.
Hệ thống thực hiện tìm kiếm và hiển thị trang thông tin các sản phẩm tương ứng với tên sản phẩm người dùng đã nhập.
Luồng sự kiện phụ: không có.
Use Case xem chi tiết sản phẩm:
Use Case này mô tả cách thức khách hàng xem thông tin chi tiết về mỗi sản phẩm.
Luồng sự kiện chính:
Từ trang liệt kê danh sản phẩm các sản phẩm, khách hàng nhấn vào nút
"chi tiết".
Hệ thống hiển thị trang thông tin chi tiết về sản phẩm đó.
Luồng sự kiện phụ: không có.
Use Case thêm sản phẩm vào giỏ hàng:
Use Case này mô tả cách thức khách hàng thêm 1 sản phẩm vào giỏ mua hàng.
Luồng sự kiện chính:
Từ trang liệt kê danh sản phẩm các sản phẩm hoặc trang chi tiết về sản phẩm, khách nhấn vào nút thêm vào giỏ hàng.
Hệ thống thêm sản phẩm vào trong giỏ hàng với số lượng là 1 và hiển thị giỏ hàng.
Luồng sự kiện phụ:
Nếu số lượng sản phẩm trong kho bằng 0 thì hệ thống hiển thị thông báo là hết hàng. Khách hàng có thể chọn mua sản phẩm khác hoặc kết thúc phiên giao dịch.
Use Case xem giỏ hảng:
Use Case này mô tả cách thức người mua xem giỏ hàng của mình mỗi khi cần.
Luồng sự kiện chính:
Từ trang web khách hàng nhấn vào nút giỏ hàng.
Hệ thống hiển thị giỏ hàng của khách hàng.
Luồng sự kiện phụ: không có.
Use Case đơn hàng:
Use Case này mô tả cách thức khách hàng đặt mua hàng sau khi đã tìm được những sản phẩm mình cần và thêm chúng vào giỏ hàng.
Luồng sự kiện chính:
Từ trang thông tin về giỏ hàng khách hàng nhấn vào nút thanh toán.
Hệ thống hiển thị trang đơn hàng yêu cầu khách hàng nhập vào địa chỉ giao hàng và chọn phương thức thanh toán.
Hệ thống hiển thị thông tin hướng dẫn về phương thức thanh toán mà khách hàng lựa chọn.
Khách hàng nhấn nút đồng ý thanh toán.
Hệ thống sẽ hiển thị trang thông báo đặt hàng thành công.
Luồng sự kiện phụ:
Nếu trong dòng sự kiện chính, khách hàng chưa đăng nhập thì khi nhấn nút thanh toán, hệ thống sẽ hiển thị trang đăng ký làm thành viên.
Khách hàng đăng ký làm thành viên.
Hệ thống hiển thị trang đơn hàng.
Tiền điều kiện: Khách hàng phải đăng nhập thành công vào hệ thống.
Use Case quản lý sản phẩm:
Use Case này mô tả cách thức người quản trị quản lý sản phẩm như: thêm, xóa, cập nhật thông tin về sản phẩm.
Luồng sự kiện chính:
Từ trang admin, quản trị viên nhấn vào nút quản lý sản phẩm.
Hệ thống hiển thị trang quản lý sản phẩm. Quản trị viên chọn chức năng phù hợp.
Chọn chức năng thêm sản phẩm: quản trị viên phải nhập đầy đủ thông tin về sản phẩm và nhấn nút thêm.
Chọn chức năng xóa 1 sản phẩm: quản trị viên chọn sản phẩm cần xóa và nhấn nút xóa.
Chọn chức năng cập nhật thông tin sản phẩm: quản trị viên sửa thông tin về sản phẩm và nhấn nút cập nhật.
Hệ thống hiển thị thông báo thành công tương ứng.
Luồng sự kiện phụ:
Nếu người quản trị đưa thông tin vào không đúng thì hệ thống sẽ thông báo lỗi tương ứng. Người quản trị có thể trở về bước 2 của luồng sự kiện chính hoặc hủy bỏ quá trình thêm, xóa, cập nhật thông tin sản phẩm, lúc này Use Case kết thúc.
Tiền điều kiện: Quản trị viên phải đăng nhập thành công vào hệ thống.
Use Case quản lý người sử dụng:
Use Case này mô tả cách thức người quản trị quản lý người sử dụng như:
thêm, xóa, cập nhật thông tin User.
Luồng sự kiện chính:
Từ trang admin, quản trị viên nhấn vào nút quản lý User.
Hệ thống hiển thị trang quản lý User. Quản trị viên chọn chức năng phù hợp.
Chọn chức năng thêm User: quản trị viên phải nhập các thông tin về người sử dụng và nhấn nút thêm.
Chọn chức năng xóa User: quản trị viên chọn User cần xóa và nhấn nút xóa.
Chọn chức năng cập nhật User: quản trị viên sửa thông tin về User và nhấn nút cập nhật.
Hệ thống hiển thị thông báo thành công tương ứng.
Luồng sự kiện phụ:
Nếu người quản trị đưa thông tin vào không đúng thì hệ thống sẽ thông báo lỗi tương ứng. Người quản trị có thể trở về bước 2 của luồng sự kiện chính hoặc hủy bỏ quá trình thêm, xóa, cập nhật User, lúc này Use Case kết thúc.
Tiền điều kiện: Quản trị viên phải đăng nhập thành công vào hệ thống.
Use Case so sánh sản phẩm(compare)
Use Case này mô tả cách thức khách hàng so sánh sản phẩm với nhau.
Luồng sự kiện chính:
Từ trang liệt kê danh sản phẩm các sản phẩm hoặc trang giao diện chính home, khách nhấn vào nút compare.
Hệ thống lấy các thông tin của sản phẩm đó trong cơ sở dữ liệu và tiến hành thêm sản phẩm vào danh sách compare sản phẩm
Luồng sự kiện phụ:
Nếu số lượng sản phẩm trong danh sách compare bằng 3 thì hệ thống hiển thị thông báo đã đủ 3 sản phẩm để so sánh. Khách hàng có thể đến trang compare để xem chi tiết so sánh.
Use Case cho chức năng wishlist
Use Case này mô tả cách thức khách hàng lựa chọn wishlist của sản phẩm.
Luồng sự kiện chính:
Từ trang liệt kê danh sản phẩm các sản phẩm hoặc trang giao diện chính home, khách nhấn vào nút wishlist.
Hệ thống tiến hành thêm sản phẩm vào danh sách wishlist sản phẩm
Luồng sự kiện phụ: