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 [...]... thương mại điện tử và Shopify  Tập trung xây dựng hoàn thiện chức năng 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 thương mại điện tử Vanesa 13  CHƯƠNG 1 CƠ SỞ LÝ THUYẾT  Tìm hiểu về thương mại điện tử và sản phẩm thương mại điện tử  Một số định nghĩa về thương mại điện tử  Thương mại điện tử Thương mại điện tử (Electronic... mình 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 và chức năng banner builder trên nền Shopify mục tiêu có được chức năng banner linh hoạt, áp dụng vào để cho ra sản phẩm thương mại điện tử hoàn thiện Vì khả năng và thời gian còn hạn chế và trong giới hạn đề tài em sẽ chuyên sâu vào làm sao để xây dựng hoàn thiện chức năng banner builder linh hoạt nhất và áp... cho tất cả sản phẩm phát triển, không cần xây dựng lại từ đầu khi làm một sản phẩm mới Nắm bắt được xu hướng này, em đã đi nghiên cứu tìm hiểu và xây dựng chức năng banner builder – linh hoạt, dễ tùy biến cho sản phẩm Shopify Từ vốn kiến thức có được trong quá trình học tập áp dụng các kiến thức về html5/css3/js và thông qua tham khảo một số sản phẩm thương mại điện tử trên thị trường của một vài mã nguồn... số và thúc đẩy hoạt động mua bán trên mạng với giá cả cạnh tranh  Mô hình thương mại điện tử Mô hình thương mại điện tử là phương thức kinh doanh của một công ty phát sinh ra lợi nhuận để duy trì công ty Mô hình thương mại giải thích một công ty đóng vai trò như thế nào trong một dây chuyền  Vai trò, lợi ích và hạn chế của thương mại điện tử  Vai trò Thương mại điện tử là hình thái hoạt động thươ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ó thể nói Shopify là một dịch vụ thương mại điện tử tiềm năng Hầu hết các website bán hàng trực tuyến hiện nay đều có chức năng banner, quảng bá giới thiệu sản phẩm theo giao diện mới Đồng thời, trung tâm RDCMA đang phát triển sản phẩm Shopify mà trong đó sản phẩm nào cũng cần banner Từ đó, đặt ra yêu cầu... sâu hơn và làm rõ các khái niệm về TMĐT, sản phẩm TMĐT và Framework  Khả năng phân tích cho một hệ thống  Hiểu về Shopify và lập trình liquid 11  Kĩ thuật lập trình trên môi trường internet  Tìm hiểu và áp dụng các công nghệ mới như Bootstrap, HTML5, CSS3, Javascript… Trên cơ sở đó tiến hành xây dựng chức năng banner builder và sản phẩm TMĐT toàn diện cho người dùng là doanh nghiệp, tổ chức, ... giữa internet và phần mềm EC với các ứng dụng và dữ liệu đã có sẵn là một điều khó khắn  Một vài phần mềm EC có thể không thích hợp với phần cứng hoặc nó có thể trở nên không hợp với hệ điều hành hiện tại hoặc thiết bị hiện đại  Sản phẩm thương mại điện tử Một sản phẩm thương mại điện tử là sản phẩm phải đạt được những yêu cầu hoặc tiêu chuẩn nhất định để đem đến cho khách hàng một sản phẩm TMĐT hay... ngày nay đứng vào hàng ngũ những ông lớn của thương mại điện tử thế giới bên cạnh Bigcommerce, Weebly eCommerce và Squarespace Tuy nhiên, trong những cái tên kể trên thì Shopify được đánh giá cao nhất [7] Shopify là nền tảng thương mại điện tử tốt trên thế giới hiện nay, tính đến thời điểm đầu năm 2016 có tổng cộng hơn 200.000 website đang sử dụng nền tảng Shopify trên phạm vi toàn cầu và đang không... 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. .. và đóng góp vào lĩnh vực Open Source Nhận thấy, banner là một phần không thể thiếu trong hầu hết các website bán hàng và hiện nay xu hướng giao diện đơn giản, chỉ sử dụng các ảnh banner để quảng bá sản phẩm được sử dụng rất phổ biến Do đó, em tập trung vào xây dựng chức năng này sao cho có thể áp dụng được cho tất cả các sản phẩm phát triển Shopify, độ tùy biến giao diện, hình ảnh, hiển thị ở mỗi banner ... 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