Xây dựng sản phẩm thương mại điện tử vanesa và chức năng banner builder trên nền shopify

LỜI CẢM ƠN Để hoàn thành đồ án này, em xin cảm ơn Thầy T.S Bùi Ngọc Tuấn, thầy Th.S Nguyễn Quốc Bảo tận tình hướng dẫn giúp đỡ em thời gian thực báo cáo đồ án Đồng thời, em xin chân thành cảm ơn thầy Th.S Đào Trần Chung toàn thể bạn 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 tập tiếp cận với môi trường làm thực tế Trong suốt thời gian từ bắt đầu học tập giảng đường đại học đến nay, em nhận nhiều quan tâm, giúp đỡ thầy cô, gia đình bạn bè Với hướng dẫn thầy cô giáo nhu cầu thực tế phát triển trung tâm RDCMA em lựa chọn đề tài: “Xây dựng sản phẩm thương mại điện tử Vanesa chức banner builder Shopify” Với lòng biết ơn sâu sắc nhất, em chân thành cảm ơn quý Thầy, Cô Khoa Công Nghệ Thông Tin, thầy trung tâm RDCMA Trường Đại Học Công Nghệ Thông Tin Truyền thông tận tình tâm huyết truyền đạt kiến thức quý báu năm em học tập Với vốn kiến thức tiếp thu trình học không tảng cho trình nghiên cứu học tập mà hành trang quý báu để em bước vào đời cách vững tự tin Em xin chân thành cảm ơn đến bạn bè giúp đỡ tài liệu, trao đổi học thuật thực đồ án tốt nghiệp Xin gửi lời cảm ơn đến bạn Sau cùng, em xin kính chúc quý Thầy Cô thật dồi sức khỏe, niềm tin để tiếp tục thực sứ mệnh cao đẹp truyền đạt kiến thức cho hệ mai sau Đồng kính chúc thầy cô bạn trung tâm RDCMA dồi sức khỏe, đạt nhiều thành công tốt đẹp công việc Thái Nguyên, ngày 26 tháng 05 năm 2016 Sinh viên Phạm Thị Hà LỜI CAM ĐOAN Em xin cam đoan báo cáo đồ án tốt nghiệp công trình tổng hợp nghiên cứu cá nhân em, thực sở nghiên cứu lý thuyết, kiến thức hướng dẫn tận tình thầy giáo T.S Bùi Ngọc Tuấn thầy 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 Thái Nguyên Trong báo cáo có sử dụng tài liệu tham khảo trích dẫn rõ ràng tên tác giả, thời gian công bố danh mục 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ệ Thái Nguyên, ngày 26 tháng 05 năm 2016 Sinh viên Phạm Thị Hà MỤC LỤC LỜI CẢM ƠN1 LỜI CAM ĐOAN MỤC LỤC DANH MỤC BẢNG VÀ HÌNH ẢNH LỜI NÓI ĐẦU CHƯƠNG CƠ SỞ LÝ THUYẾT 10 1.1 Tìm hiểu thương mại điện tử sản phẩm thương mại điện tử 10 1.1.1 Một số định nghĩa thương mại điện tử 10 1.1.2 Vai trò, lợi ích hạn chế thương mại điện tử 1.1.3 Sản phẩm thương mại điện tử 1.2 Tổng quan Shopify 11 12 1.2.1 Giới thiệu sơ lược Shopify 1.2.2 Tính Shopify 12 14 1.2.3 So sánh Shopify với số mã nguồn 1.3 Lập trình Liquid 10 15 17 1.3.1 Tags – Nhãn 17 1.3.2 Object – Đối tượng 22 1.3.3 Giới thiệu Bộ lọc - Filter 25 CHƯƠNG KHẢO SÁT HIỆN TRẠNG VÀ PHÂN TÍCH THIẾT KẾ HỆ THỐNG 34 2.1 Mô tả đối tượng nghiên cứu 34 2.1.1 Nêu toán 34 2.1.2 Khảo sát xu hướng sử dụng banner 35 2.1.3 Đề xuất giải pháp cho sản phẩm Vanesa Shopify 2.1.4 Kế hoạch xây dựng sản phẩm Vanesa Shopify 40 2.2 Yêu cầu sản phẩm đề xuất 41 38 2.3 Phân tích thiết kế hệ thống 42 2.3.1 Biểu đồ UseCase 42 2.3.2 Biểu đồ Trình tự Cộng tác 2.3.3 Biểu đồ lớp 49 53 CHƯƠNG XÂY DỰNG SẢN PHẨM VÀ CHỨC NĂNG BANNER BUILDER 56 3.1 Xây dựng sản phẩm thương mại điện tử Shopify56 3.1.1 Phần Header 58 3.1.2 Phần Menu 58 3.1.3 Slider 59 3.1.4 Main content(Shortcode products) 59 3.1.5 Banner builder 61 3.1.6 Brand 62 3.1.7 Phần Footer 63 3.2 Giao diện người dùng 3.3 Giao diện Admin 64 75 KẾT LUẬN 78 TÀI LIỆU THAM KHẢO 80 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 81 DANH MỤC BẢNG VÀ HÌNH ẢNH Bảng 1.1 Bảng đối tượng tổng quát Liquid Bảng 1.2 Bảng tham số kích thước ảnh Hình 1.1 Giao diện Customize theme 25 31 33 Hình 2.1 Các module Visual Composer Wordpress 36 Hình 2.2 Banner sử dụng hình ảnh đơn giản 37 Hình 2.3 Banner sử dụng làm giao diện website 38 Hình 2.4 Giải pháp xây dựng chức banner builder 40 Hình 2.5 Sơ đồ Xmind xây dựng theme “Vanesa” Shopify Hình 2.6 Biểu đồ Use Case cho Tác nhân Customer 40 43 Hình 2.7 Biểu đồ Use Case cho Tác nhân Adminitrator(quản trị) 44 Hình 2.8 Biểu đồ trình tự cho chức banner builer 50 Hình 2.9 Biểu đồ cộng tác cho chức banner builer50 Hình 2.10 Biểu đồ trình tự cho tác vụ compare (so sánh sản phẩm) 50 Hình 2.11 Biểu đồ cộng tác cho tác vụ compare (so sánh sản phẩm) 51 Hình 2.12 Biểu đồ trình tự cho chức wishlist 51 Hình 2.13 Biểu đồ cộng tác cho chức wishlist 51 Hình 2.14 Biểu đồ trình tự cho chức thêm sản phẩm vào giỏ hàng(cart)52 Hình 2.15 Biểu đồ cộng tác cho chức thêm sản phẩm vào giỏ hàng(cart) 52 Hình 2.16 Biểu đồ trình tự cho chức quick view 52 Hình 2.17 Biểu đồ cộng tác chức quick view 53 Hình 2.18 Biểu đồ lớp cho chức wishlist 53 Hình 2.19 Biểu đồ lớp cho chức compare 54 Hình 2.20 Biểu đồ lớp cho chức quickview54 Hình 2.21 Biểu đồ lớp cho chức thêm sản phẩm vào giỏ hàng 54 Hình 2.22 Biểu đồ lớp cho chức banner builder 55 Hình 3.1 Các khung giao diện 57 Hình 3.2 Settings phần header cho theme 58 Hình 3.3 Giao diện sử dụng shortcode “tab product” 59 Hình 3.4 Giao diện sử dụng shortcode “tabs product” 60 Hình 3.5 Giao diện sử dụng shortcode “tab vertical” 60 Hình 3.6a Giao diện cho chức banner builder 61 Hình 3.6b Giao diện modal hiển thị code HTML62 Hình 3.6c Giao diện banner sau paste code HTML 62 Hình 3.7 Giao diện sử dụng shortcode “brand” 63 Hình 3.8 Giao diện phần Footer 63 Hình 3.9 Giao diện chương trình 64 Hình 3.10a Giao diện Collection dạng Grid 65 Hình 3.10b Giao diện Collection dạng List 65 Hình 3.11 Giao diện trang hiển thị chi tiết sản phẩm Hình 3.12 Giao diện hiển thị trang wishlist 66 67 Hình 3.13 Giao diện trang compare (các sản phẩm so sánh) 68 Hình 3.14a Giao diện thực chức “Add to cart” 69 Hình 3.14b Giao diện hiển thị tất sản phẩm giỏ hàng Hình 3.15 Giao diện trang Contact Us 70 Hình 3.16 Giao diện trang About Us 71 Hình 3.17a Giao diện trang Blog dạng Grid 72 Hình 3.17b Giao diện viết Blog 73 Hình 3.18 Giao diện trang Login cho khách hàng 74 Hình 3.19 Giao diện admin đăng nhập vào hệ thống 75 Hình 3.20 Giao diện viết Code, chỉnh sửa HTML, CSS 75 Hình 3.21 Giao diện quản lý sản phẩm 76 Hình 3.22 Giao diện quản lý viết 77 69 Hình 3.23 Giao diện quản lý khách hàng 77 DANH MỤC CÁC TỪ VIẾT TẮT Chữ viết tắt/ký hiệu Cụm từ đầy đủ TMĐT Thương mại điện tử EC Electronic commerce CMS Content Management System HTML HyperText Markup Language CSS Cascading Style Sheets SEO Search Engine Optimization API Application Programming Interface LỜI NÓI ĐẦU Ngày nay, thương mại điện tử trở thành công cụ phổ biến giới mà Việt Nam Với phát triển mạnh mẽ ngày nay, với nhu cầu mua bán online nên việc phát triển website bán hàng thực cần thiết Các giải pháp tạo website bán hàng có nhiều Hiện nay, số công ty có xu hướng tiếp cận TMĐT theo hướng khác, họ tạo dịch vụ khác dịch vụ Tức trang TMĐT không dừng lại công ty, doanh nghiệp, tổ chức cá nhân mà tiến hành liên kết tất công ty, doanh nghiệp cá nhân lại với từ doanh nghiệp ta tổ chức thành nhiều doanh nghiệp nhỏ chung lĩnh vực hoạt động tạo thành hệ thống TMĐT linh động hơn, chuyên nghiệp Đặc biệt, sản phẩm thương mại điện tử ngày có nhiều yêu cầu cao từ khâu thiết lập trình Một sản phẩm thương mại điện tử thường có nhiều layout, giao diện mượt đẹp mắt, có đầy đủ chức wishlist, compare hiển thị hoàn hảo trình duyệt thiết bị – từ máy tính bàn, laptop đến máy tính bảng, di động… Lựa chọn tảng thương mại điện tử thích hợp cho việc tạo, quản lý trì cửa hàng trực tuyến quan trọng, yếu tố chịu trách nhiệm cho thành công hay thất bại doanh nghiệp bạn Là kế hoạch để tạo cửa hàng trực tuyến hay di chuyển cửa hàng sang tảng khác tương lai gần với nhu cầu tạo trang bán hàng đơn giản, nhiều tính phức tạp toán trực tuyến có việc sử dụng dịch vụ tạo gian hàng điện tử Shopify tiếng nước Shopify tảng thương mại điện tử tốt giới Khác với đối thủ cạnh tranh khác, Shopify tiên phong áp dụng 10 Hình 3.17b Giao diện viết Blog 105  Giao diện người dùng Login vào trang web 106 107 Hình 3.18 Giao diện trang Login cho khách hàng 108  Giao diện Admin  Giao diện đăng nhập Hình 3.19 Giao diện admin đăng nhập vào hệ thống  Giao diện quản lý mã nguồn, chỉnh sửa mã nguồn 109 Hình 3.20 Giao diện viết Code, chỉnh sửa HTML, CSS Giao diện chỉnh sửa HTML style Css hình 3.20 gồm thư mục layout, templates, snippets, assets, config, locales Các tài nguyên assets gọi file jquery, css, image… Theme layouts: file layout quan trọng theme file template hiển thị toàn bên layout active File theme.liquid layout default active người dùng cài đặt theme Nó điều hướng nội dung phần header content, footer content, navigation, số phần khác Có thể tạo thêm layout khác mục layout Thư mục Configs thư mục quản trị Nó bao gồm hai tập tin settings_schema.json tập tin settings_data.json 110  Giao diện quản lý sản phẩm Hình 3.21 Giao diện quản lý sản phẩm 111  Giao diện quản lý Blog Tất viết blog hiển thị đây, người quản trị tùy chỉnh lại viết tắt mở việc khách hàng comment Hình 3.22 Giao diện quản lý viết  Giao diện trang Admin quản lý khách hàng 112 Hình 3.23 Giao diện quản lý khách hàng KẾT LUẬN Trong suốt trình 10 tuần làm đồ án em hoàn thành đề tài “Xây dựng sản phẩm thương mại điển tử Vanesa chức banner builder Shopify” hướng dẫn tận tình thầy T.S Bùi Ngọc Tuấn ThS Nguyễn Quốc Bảo 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  Hoàn thành đề tài tiến độ giao  Hoàn thành 10 Layouts với đầy đủ chức website 113 thương mại điện tử hoàn thiện chức banner builder Shopify có tính thương mại  Khả tùy biến cao với nhiều layout dễ dàng mở rộng theo yêu cầu người dùng  Nâng cao khả lập trình HTML5, CSS3, Responsive, Javascript…  Trang giao diện tối ưu hóa chạy nhanh, ổn định, bảo mật cao thân thiện với người dùng Ngoài thực đề tài tồn số hạn chế như:  Chức banner builder hoàn thiện mức bản, nhiên phát triển + hoàn thiện thêm nhiều chức cho apps Hướng phát triển tương lai:  Nâng cao chất lượng chức banner  Bổ sung thêm nhiều chức nhằm thỏa mãn yêu cầu người dùng  Khả phân tích thiết kế hệ thống hạn chế Không có thành công mà không gắn liền với hỗ trợ, giúp đỡ dù hay nhiều, dù trực tiếp hay gián tiếp người khác Trong suốt thời gian năm học tập mái trường Đại học Công nghệ thông tin truyền thông Thái Nguyên đến nay, em thầy cô cung cấp truyền đạt kiến thức chuyên môn sâu sắc quý giá Đồng thời nhận nhiều quan tâm, giúp đỡ thầy cô, gia đình bạn bè Nơi môi trường học tập, tu dưỡng đạo đức, rèn luyện thân, nơi phát huy sáng tạo tuổi trẻ, hành trang để chúng em vững bước đường nghề nghiệp tương lai Em xin chân thành cảm ơn ban giám hiệu trường, ban chủ nhiệm khoa thầy cô giáo môn Công nghệ phần mềm hưỡng dẫn chúng em suốt thời gian học tập trường, đặc biệt em xin cảm ơn thầy TS Bùi Ngọc Tuấn, thầy ThS Nguyễn Quốc Bảo tận tình hướng dẫn giúp đỡ em 114 nhiều để hoàn thành đồ án 115 TÀI LIỆU THAM KHẢO Tiếng Việt: [1] Đoàn Văn Ba (1997), Phân tích thiết kế hướng đối tượng UML- NXB Thống Kê [2] Lê Minh Hoàng (2004), Thiết kế Web với CSS– NXB Lao động xã hội Tiếng Anh: [3] Brian P Hogan (2008), HTML5 and CSS3 Develop with Tomorrow's [4] Brian P Hogan, HTML5 and CSS3: Develop with Tomorrow's Standards [5] David Flanagan, JavaScript: The Definitive Guide [6] Dustin DiazRoss Harmes, Pro JavaScript Design Patterns: The Essentials of Object-Oriented JavaScript Programming [7] Eric T FreemanElisabeth Robson, Head First JavaScript Programming Jamie Phoenix, How To Start an Online Store with Shopify [8] John ResigBear Bibeault, Secrets of the JavaScript Ninja WallPearl, Simple Css Standard Editor [9] Leslie F Sikos Ph.D (2009), Web Standards Mastering HTML5, CSS3, and XML [10] Sai Srinivas Sriparasa, JavaScript and JSON Essentials Paperback Website: [11] Website: https://shopifyvietnam.net truy cập lần cuối ngày 29/04/2016 [12] Website: https://docs.bizweb.vn/liquid-document/basics/introduction truy cập lần cuối ngày 29/04/2016 [13] Website: https://docs.shopify.com/themes/liquid truy cập lần cuối ngày 02/05/2016 [14] JQuery Documentation truy cập địa http://jquery.com/ truy cập lần cuối ngày 24/05/2016 [15] Bootstrap Documentation truy cập địa http://getbootstrap.com/css truy cập lần cuối ngày 20/05/2016 116 [16] W3Schools truy cập địa http://www.w3schools.com/ truy cập lần cuối ngày 20/05/2016 117 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Thái Nguyên, ngày … tháng năm 2016 GIÁO VIÊN HƯỚNG DẪN GIÁO VIÊN HƯỚNG DẪN 118 (Ký, ghi rõ họ tên) (Ký, ghi rõ họ tên) 119 ... phẩm thương mại điện tử Vanesa 13  CHƯƠNG CƠ SỞ LÝ THUYẾT  Tìm hiểu thương mại điện tử sản phẩm thương mại điện tử  Một số định nghĩa thương mại điện tử  Thương mại điện tử 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 sản phẩm thương mại điện tử Vanesa chức banner builder Shopify mục tiêu có chức banner linh... sản phẩm thương mại điện tử Shopify  Tập trung xây dựng hoàn thiện chức banner builder  Tập trung vào việc thiết kế giao diện, xây dựng giao diện hoàn thiện  Xây dựng hoàn chỉnh sản phẩm