Xây dựng chức năng slider cho sản phẩm thương mại điển tự shopify

LỜI CẢM ƠN Trong thời gian thực đồ án với giúp đỡ tạo điều kiện Trường Đại Học Công nghệ Thông Tin Truyền Thông - ĐH Thái Nguyên, góp ý bạn đặc biệt hướng dẫn trực tiếp, bảo tận tình thầy TS Bùi Ngọc Tuấn thầy TH.S Nguyễn Quốc Bảo em hoàn thành đề tài với báo cáo thời gian quy định Em xin chân thành cảm ơn thầy ThS Nguyễn Quốc Bảo thầy ThS Đào Trần Chung toàn thể anh chị em trung tâm nghiên cứu phát triển phần mềm (RDCMA) tạo điều kiện thuận lợi, dẫn tận tình để em nghiên cứu, học hỏi ngôn ngữ lập trình tiếp cận với môi trường làm thực tế Và kinh nghiệm quý báu để em học tập, trang bị kiến thức chuyên môn ngày hoàn thiện Bài báo cáo đồ án tốt nghiệp em thực 10 tuần, bước đầu em gặp nhiều khó khăn, bỡ ngỡ vốn kiến thức hạn chế nên nội dung đề tài tránh khỏi sai sót, em mong nhận đóng góp ý kiến, phê bình thầy cô Một lần nữa, em xin chân thành cảm ơn tất thầy, cô giáo, tổ chức liên kết dạy dỗ, bảo em suốt thời gian học trường Em xin kính chúc thầy cô giáo trường Đại học Công Nghệ Thông Tin Truyền Thông Thái Nguyên, toàn thể anh chị em trung tâm RDCMA sức khỏe dồi dào, công tác tốt, đạt nhiều thành công công việc Thái Nguyên, tháng 06 năm 2016 Sinh viên thực Nguyễn Hào Quang LỜI CAM ĐOAN Em xin cam đoan báo cáo công trình tổng hợp thực sở nghiên cứu lý thuyết, kiến thức hướng dẫn tận tình trực tiếp thầy giáo TS Bùi Ngọc Tuấn thầy giáo Th.s Nguyễn Quốc Bảo thầy bạn trung tâm RDCMA trường Đại học Công nghệ thông tin Truyền thông Trong báo cáo có sử dụng số tài liệu tham khảo nêu phần tài liệu tham khảo Nếu có phát gian trá đồ án, em xin chịu hoàn toàn trách nhiệm trước Hội đồng bảo vệ DANH MỤC BẢNG VÀ HÌNH ẢNH Hình 1: Bảng đối tượng tổng quát Liquid 20 Hình 2: Bảng tham số kích thước ảnh 27 Hình 1: website ‘the retailer’……………………………………………………30 Hình 2: website ‘Qaween’ 30 Hình 3: website ‘ChurcHope’ .31 Hình 4: Trang web ‘jewelry’ 32 Hình 5: Trang chủ website ‘PURO’ 33 Hình 6: Trang chủ website ‘ap michael’ 34 Hình 7: Trang chủ website ‘hosoren’ 34 Hình 8: Biểu đồ Use Case Admin 38 Hình Biểu đồ Use Case Customize your slider 39 Hình 10 Biểu đồ use case Add Slider Template 40 Hình 11 Biểu đồ use case Import slider 41 Hình 12: Trình tự người dùng customize your slider 42 Hình 13: Trình tự người dùng add slider template 42 Hình 14: Biểu đồ người dùng import slider 43 Hình 15: Biểu đồ lớp chức slider 43 Hình 16 Biểu đồ lớp chức add slider 44 Hình 17 Biểu đồ lớp chức import slider 44 Hình 1: Giao diện chương trình………………………………………45 Hình 2: Giao diện customsize 46 Hình 3: Giao diện phần add slider 46 Hình 4: Khung dialog để import file 47 Hình 5: Trang bắt đầu để tạo kết nối từ server đến shopify 48 Hình 6: Giao diện để cài đặt tạo liên kết server với sản phẩm TMĐT shopify qua API 48 Hình 7: Giao diện sau cài đặt app 49 Hình 8: Giao diện app .49 Hình 9: Giao diện Customize your slider 50 Hình 10: Phần bắt buộc phải có 50 Hình 11: Các tùy chọn slider .51 Hình 12 Danh sách slider lựa chọn 52 Hình 13 Cài đặt slider mong muốn qua lựa chọn 52 Hình 14: Giao diện chức Add slider 53 Hình 15 Chức xem trước Add Slider 54 Hình 16 Chức cài đặt thông qua nút lệnh 54 Hình 17: Dialog thị chọn file import 55 Hình 18 Cửa sổ chọn file cần lựa chọn 55 Hình 19: trang web ‘Rubbez’ 56 Hình 20 Trang web ‘Allen’ 57 Hình 21 Trang web ‘Vanesa’ .57 Hình 22 Trang web ‘Mandala’ 58 MỤC LỤC LỜI CẢM ƠN .i LỜI CAM ĐOAN ii DANH MỤC BẢNG VÀ HÌNH ẢNH iii MỤC LỤC v CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI 1.1 Lý chọn đề tài 1.2 Mục tiêu nghiên cứu .2 1.3 Phương pháp nghiên cứu .2 1.4 Phạm vi nghiên cứu 1.5 Tìm hiểu thương mại điện tử sản phẩm thương mại điện tử 1.5.1 Tìm hiểu thương mại điện tử 1.5.2 Sản phẩm thương mại điện tử 1.6 Giới thiệu sơ lược Shopify 1.7 Tính Shopify 1.8 So sánh Shopify với số mã nguồn 1.9 Lập trình Liquid 10 1.9.1 Giới thiệu lập trình liquid 11 1.9.2 Tags – Nhãn .11 1.9.3 Object – Đối tượng 17 1.9.4 Giới thiệu Bộ lọc - Filter .20 CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 28 2.1 Mô tả đối tượng nghiên cứu 28 2.1.1 Nếu toán 28 2.1.2 Khảo sát xu hướng sử dụng Slider 29 2.1.3 Đặc trưng số loại slider 31 2.1.4 Đề xuất ý tưởng xây dựng chức slider cho Shopify 32 2.1.5 Khảo sát số sản phẩm thương mại điện tử Shopify 32 2.1.6 Đề xuất giải pháp xây dựng chức slider .34 2.2 Phân tích thiết kế hệ thống 35 2.3.1 Xác định tác nhân .37 2.2.2 Biểu đồ Use Case 38 2.2.3 Biểu đồ Trình tự chức Slider 41 2.2.4 Biểu đồ lớp 43 CHƯƠNG 3: CÀI ĐẶT HỆ THỐNG .45 3.1 Xây dựng chức 45 3.1.1 Phần customize layout slider .45 3.1.2 Phần add layout slider 46 3.1.3 Phần import slider 47 3.2 Cài đặt chương trình 47 3.2.1 Khi bắt đầu cài đặt 47 3.2.2 Giao diện chức slider 49 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 59 TÀI LIỆU THAM KHẢO 60 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 61 CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI 1.1 Lý chọn đề tài Trong thời đại công nghiệp hóa, đại hóa bùng nổ sức mạnh công nghệ thông tin Việc mua bán sản phẩm, đặt hàng trực tuyến trở thành nếp văn minh thời đại tiên tiến, người tiêu dùng quen dần với thói quen mua sắm trực tuyến Shopify nhà cung cấp tảng thương mại điện tử trực tuyến lớn giới bên cạnh Bigcommerce, Weebly eCommerce Squarespace eCommerce Tuy nhiên, tên kể tên Shopify đánh giá cao với 245.000 cửa hàng trực tuyến không ngừng tăng lên Khác với đối thủ cạnh tranh khác, Shopify tiên phong áp dụng công nghệ tiên tiến 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 có am hiểu sâu sắc thương mại điện tử nói riêng công nghệ internet nói chung Shopify tảng tạo website bán hàng nhiều tính tiện ích quản lý khách hàng, sản phẩm, marketing, nhiều hỗ trợ tốt cho shop bán hàng online Khi phát triển sản phẩm TMĐT shopify hầu hết sản phẩm có chức slider để giới thiệu số thông tin hay chuyển mục trang web quảng bá hay có chương trình khuyển sản phẩm TMĐT shopify Tại trung tâm RDCMA nơi em học tập làm việc phát triển sản phẩm shopify mà sản phẩm cần có chức slider từ em chọn đề tài hoàn thành áp dụng cho tất sản phẩm mà trung tâm phát triển với tính dễ dàng tùy biến sản phẩm TMĐT shopify Từ vốn kiến thức có trình học tập trường áp dụng kiến thức html5/css3/js thông qua tham khảo số sản phẩm thương mại điện tử thị trường vài mã nguồn CMS Em hoàn thành cho sản phẩm thương mại điện tử với đề tài : “Xây dựng chức slider cho sản phẩm thương mại điển tự Shopify” mục tiêu có chức slider linh hoạt, áp dụng vào sản phẩm thương mại điện tử hoàn thiện 1.2 Mục tiêu nghiên cứu Xây dựng chức Slider đáp ứng cho toàn theme thương mại điện tử Shopify trung tâm RDCMA Slider có khả tùy biến cao, dễ dàng sử dụng, tính năng, hiệu ứng đa dạng, phù hợp với nhu cầu sử dụng slider theme khác Nhằm tổng hợp kiến thức học suốt trình học tập trường kiến thức có trình làm đồ án trung tâm RDCMA để: – Tìm hiểu rõ hơn, sâu làm rõ khái niệm TMĐT, sản phẩm TMĐT Framework – Khả phân tích cho hệ thống – Hiểu Shopify lập trình liquid – Kĩ thuật lập trình môi trường internet – Tìm hiểu áp dụng công nghệ Bootstrap, HTML5, CSS3, Javascript… Việc xây dựng chức slider toàn diện cho người dùng doanh nghiệp, tổ chức, cá nhân người tiêu dùng Việc xây dựng hệ thống cần phải thỏa mãn tiêu chí như: – Chức slider builder linh hoạt, áp dụng hệ thống Shopify – Giao diện đẹp mắt, dễ quản lý đơn giản sử dụng, thiết kế để thị tối ưu thiết bị – Dễ dàng đặt thao tác với chức – Nhiều tùy biến, thị đẹp 1.3 Phương pháp nghiên cứu Phương pháp nghiên cứu chủ yếu dựa vào phương pháp chuẩn tắc để đánh giá giá trị lý luận thực tiễn Đồng thời số liệu nghiên cứu lấy từ nguồn thứ cấp sơ cấp kết hợp phương pháp tổng hợp, thống kê, phân tích, tham khảo ý kiến chuyên gia thầy cô hướng dẫn Đọc tài liệu, phân tích tổng hợp tài liệu để nghiên cứu 1.4 Phạm vi nghiên cứu Sản phẩm thương mại điện tử sản phẩm, lĩnh vực rộng nghiệp vụ lẫn lý thuyết ứng dụng Doanh nghiệp, tổ chức hay cá nhân muốn hoạt động lĩnh vực cần đòi hỏi phải có thời gian tìm hiểu để tiếp cần hiểu Đề tài nghiên cứu phạm vi: - Tìm hiểu Shopify - Xây dựng chức “Slider” - Tập trung vào việc thiết kế, xây dựng nhiều layout, đầy đủ hiệu ứng slider sản phẩm thương mại điện tử, giao diện hoàn chỉnh 1.5 Tìm hiểu thương mại điện tử sản phẩm thương mại điện tử 1.5.1 Tìm hiểu thương mại điện tử  Khái niệm thương mại điện tử TMĐT hình thức quan trọng hoạt động thương mại xã hội kỉ XXI, bao gồm loạt hoạt động thương mại thực thông qua mạng, từ tìm nguồn nguyên liệu, thu mua, trưng bày sản phẩm, đặt hàng đến giao hàng, vận chuyển toán điện tử,…Ngoài giao dịch điện tử mua bán hàng hóa, TMĐT bao gồm hoạt động thương mại dịch vụ việc truyền tin trực tuyến, chuyển tiền điện tử, giao dịch cổ phiếu điện tử, vận đơn điện tử, tiến hành đấu giá mạng…TMĐT vừa đề cập việc mua bán hàng hóa cung cấp dịch vụ, vừa có nội dung hoạt động xã hội mới(cửa hàng ảo, kinh doanh qua mạng,…) Tuy nhiên, TMĐT biết tới phương thức kinh doanh hiệu từ internet hình thành phát triển Chính vậy, nhiều người hiểu TMĐT theo nghĩa cụ thể giao dịch thương mại, mua sắm qua internet mạng  Lợi ích thương mại điển tự Đối với doanh nghiệp, lợi ích lớn mà TMĐT mang lại kết hợp chi phí vào tạo lợi nhuận cho bên giao dịch Giao dịch phương tiện điện tử nhanh so với giao dịch truyền thống Các giao dịch qua internet có chi phí rẻ, với TMĐT bên tiến hành giao dịch cách xa nhau, thành phố với nông thôn, từ nước sang nước khác hay nói cách khác không bị giới hạn không gian địa lý Điều cho phép doanh nghiệp tiết kiệm chi phí sản xuất, giao dịch Bên cạnh đó, doanh nghiệp mở rộng thị trường, tìm kiếm, liên lạc với đối tác khách hàng nơi đâu với chi phí thấp phương thức tiếp cận thị trường truyền thống Đối với người tiêu dùng, TMĐT mở rộng khả lựa chọn hàng hóa, dịch vụ nhà cung cấp Do có nhiều lựa chọn nên khách hàng dễ tìm sản phẩm có chất lượng cao giá thấp Hàng hóa phần mềm, phim, nhạc giao đến khách hàng qua internet Đối với xã hội, TMĐT tạo phong cách kinh doanh, làm việc phù hợp với sống công nghiệp, giúp khu vực phát triển nhanh chóng mở rộng trao đổi TMĐT công cụ giúp doanh nghiệp vừa nhỏ khắc phục điểm lợi để cạnh tranh với doanh nghiệp lớn TMĐT tạo động lực mạnh mẽ 1.5.2 Sản phẩm thương mại điện tử Một sản phẩm thương mại điện tử sản phẩm phải đạt yêu cầu tiêu chuẩn định để đem đến cho khách hàng sản phẩm TMĐT hay website không ấn tượng giao diện mà hoàn hảo chức trải nghiệm người dùng 3.1.3 Phần import slider Thiết kế đơn giản có bảng dialog để import file, người dùng tải tạo file với thư viện slider có sẵn sau import vào dạng slider mong muốn Hình ảnh minh họa cho khung dialog để import file Hình 4: Khung dialog để import file 3.2 Cài đặt chương trình 3.2.1 Khi bắt đầu cài đặt – Truy cập vào đường dẫn https://slider.flexible-theme.com để đến với server kết nối 47 Hình 5: Trang bắt đầu để tạo kết nối từ server đến shopify  Sau điền link vào ông điền link ấn Login chương trình tự động link đến tài khoản cài đặt app Hình 6: Giao diện để cài đặt tạo liên kết server với sản phẩm TMĐT shopify qua API  Sau install app vào giao diện chức slider(app) 48 Hình 7: Giao diện sau cài đặt app 3.2.2 Giao diện chức slider  Sau vào Getting install chuyển sang thị khung chức Hình 8: Giao diện app  Tạo người tùy chọn cho chức phù hợp Customize your slider hay Add slider template import slider  Người dùng chọn mục Customize để tạo cho slider tùy thích 49 Hình 9: Giao diện Customize your slider  Tại mục có hai phần chinh phần bắt buộc có bên trái tùy chọn bên phải Hình 10: Phần bắt buộc phải có  Mục để tùy chọn hiệu ứng để slider thêm phần sinh động 50 Hình 11: Các tùy chọn slider – Sau người dùng xây dựng slider mong muốn giao diện chức thị slider mà người dùng tùy chọn hiệu ứng hay hình ảnh có 51 Hình 12 Danh sách slider lựa chọn – Tại trang chức người dùng chọn slider phù hợp cho trang web thông qua nút cài đặt Hình 13 Cài đặt slider mong muốn qua lựa chọn  Người dùng sử dụng loại slider có sẵn thông qua chức Add slider 52 Hình 14: Giao diện chức Add slider – Tại chức Add slider người dùng chọn lựa slider thấy phù hợp với – Người dùng xem thử( preview) chọn mục priview 53 Hình 15 Chức xem trước Add Slider – Người dùng cài đặt trực tiếp thông qua nút lệnh cài đặt Hình 16 Chức cài đặt thông qua nút lệnh  Chức cài đặt thông qua thư viện có sẵn (import) – Nếu người dùng có thư viện slider có săn import vào chương trình để sử dụng nó, người dùng chọn mục import slider khung giao diện chương trình 54 Hình 17: Dialog thị chọn file import – Khi người dùng chọn vào mục import slider thị dialog, người dùng chọn vào mục choose file để import Hình 18 Cửa sổ chọn file cần lựa chọn Lưu ý với người dùng import file thư viện cần định dạng dạng file zip 55 3.3 Kết – Sau tùy chọn tự chỉnh cho slider để thêm vào trang web kết đạt tạo đoạn mã code dạng tạo slider mong muốn – Khi mã code chương trình thi lên slider theo mong muốn  Một số sản phẩm áp dụng chức slider – Website : https://demo-rubbez.myshopify.com/ Hình 19: trang web ‘Rubbez’ 56 – Website : http://allen-19.myshopify.com/ Hình 20 Trang web ‘Allen’ – Website : https://demo-vanesa-2.myshopify.com/ Hình 21 Trang web ‘Vanesa’ 57 – Website : https://mandala-11.myshopify.com/ Hình 22 Trang web ‘Mandala’ 58 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Trong suốt trình làm đồ án tốt em hoàn thành đề tài “ Xây dựng chức slider cho sản phẩm thương mại điện tử shopify ” hướng dẫn tận tình thầy ThS Nguyễn Quốc Bảo thầy Bùi Ngọc Tuấn em đạt kết quả: – Nâng cao thêm kĩ lập trình, tổng hợp vấn đề giải vấn đề, kỹ đọc nghiên cứu tài liệu – Hiểu biết thêm số ngôn ngữ hay framework trình làm theme – Hiểu cách tổng quan Shopify Ngoài thực đề tài tồn số hạn chế như: – Mới hoàn thành layout, nhiên phát triển layout lại có kế thừa vài khối layout hoàn thành Hướng phát triển tương lai: – Cố gắng hoàn thiện thêm để người dễ dàng việc phát triển – Nâng cao chất lượng chức – Bổ sung thêm nhiều chức nhằm thỏa mãn yêu cầu người dùng – Tối ưu hóa trang giao diện giúp chạy nhanh, ổn định thân thiện với người dùng 59 TÀI LIỆU THAM KHẢO [1] Web Standards: Mastering HTML5, CSS3, and XML by Leslie F Sikos Ph.D [2] HTML5 and CSS3: Develop with Tomorrow's Standards Today (Pragmatic Programmers) 1st Edition by Brian P Hogan [4] Lê Minh Hoàng , Thiết kế Web với CSS– NXB Lao động xã hội [5] Đoàn Văn Ba (1997), Phân tích thiết kế hướng đối tượng UML- NXB Thống Kê [6] Website: https://docs.shopify.com/themes/liquid [7] Website: https://shopifyvietnam.net [8] Website: https://docs.bizweb.vn/liquid-document/basics/introduction [9] Bootstrap Documentation truy cập địa http://getbootstrap.com/css [10] W3Schools truy cập địa http://www.w3schools.com/ [11] JQuery Documentation truy cập địa http://jquery.com/ 60 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… Thái Nguyên, ngày 09 tháng 06 năm 2016 Giáo viên hướng dẫn Bùi Ngọc Tuấn Giáo viên hướng dẫn Nguyễn Quốc Bảo 61 ... hoàn thành cho sản phẩm thương mại điện tử với đề tài : Xây dựng chức slider cho sản phẩm thương mại điển tự Shopify mục tiêu có chức slider linh hoạt, áp dụng vào sản phẩm thương mại điện tử... hiểu thương mại điện tử sản phẩm thương mại điện tử 1.5.1 Tìm hiểu thương mại điện tử 1.5.2 Sản phẩm thương mại điện tử 1.6 Giới thiệu sơ lược Shopify 1.7 Tính Shopify. .. hiểu Shopify - Xây dựng chức Slider - Tập trung vào việc thiết kế, xây dựng nhiều layout, đầy đủ hiệu ứng slider sản phẩm thương mại điện tử, giao diện hoàn chỉnh 1.5 Tìm hiểu thương mại điện