LỜI CẢM ƠN Em xin cảm ơn Thầy ThS 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 tốt nghiệp 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ử SOZO 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 Điện Tử Truyền Thông, 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 thực tập 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 đạt nhiều thành công tốt đẹp công việc Thái Nguyên, ngày tháng năm 2016 Sinh viên Nguyễn Quang Long LỜI CAM ĐOAN Em xin cam đoan báo cáo 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 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 MỤC LỤC LỜI CẢM ƠN LỜI CAM ĐOAN MỤC LỤC DANH MỤC HÌNH ẢNH LỜI NÓI ĐẦU CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Đặt vấn đề 1.2 Tìm hiểu thương mại điện tử sản phẩm thương mại điện tử 1.2.1 Một số định nghĩa thương mại điện tử 1.2.2Vai trò, lợi ích hạn chế thương mại điện tử 1.2.3Sản phẩm thương mại điện tử 1.3Tổng quan Shopify 10 1.3.1Giới thiệu sơ lược Shopify 10 1.3.2Tính Shopify 11 1.4Lập trình Liquid 13 1.4.1Tags – Nhãn 13 1.4.2Object – Đối tượng 21 1.4.3Giới thiệu Bộ lọc Filter 24 CHƯƠNG 2: MÔ TẢ, KHẢO SÁT HIỆN TRẠNG VÀ 32 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 32 2.1 Khảo sát giao diện điện tử 32 2.2Phân tích hệ thống 37 2.2.1 Biểu đồ UseCase 37 2.2.2Biểu đồ Trình tự Cộng tác 44 CHƯƠNG 3: XÂY DỰNG SẢN PHẨM THƯƠNG MẠI ĐIỆN TỬ SOZO TRÊN NỀN SHOPIFY 47 3.1 Các bước xây dựng sản phẩm thương mại điện tử 47 3.2 Giao diện người dùng 50 3.3 Giao diện Admin 63 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 66 TÀI LIỆU THAM KHẢO 67 DANH MỤC HÌNH ẢNH Hình 3.1 Sơ đồ Xmind xây dựng theme “SOZO” Shopify 35 Hình 2: Biểu đồ Use Case cho Tác nhân Customer 38 Hình 3.3: Biểu đồ Use Case cho Tác nhân Adminitrator(quản trị) 39 Hình 4: Biểu đồ trình tự cho tác vụ compare (so sánh sản phẩm) 44 Hình 5: Biểu đồ cộng tác cho tác vụ compare (so sánh sản phẩm) 44 Hình 3.6: Biểu đồ trình tự cho chức wishlist 45 Hình 3.7: Biểu đồ cộng tác cho chức wishlist 45 Hình 3.8: Biểu đồ lớp chức tìm kiếm 46 Hình 4.1: Các khung giao diện 48 Hình 4.2: Giao diện chương trình 51 Hình 4.3a: Giao diện Collection dạng Grid 52 Hình 4.3b: Giao diện Collection dạng List 53 Hình 4.4: Giao diện trang hiển thị chi tiết sản phẩm 54 Hình 4.5: Giao diện hiển thị trang wishlist 55 Hình 4.6: Giao diện trang compare (các sản phẩm so sánh) 56 Hình 4.7a: Giao diện thực chức “Add to cart” 57 Hình 4.7b: Giao diện hiển thị tất sản phẩm giỏ hàng 58 Hình 4.8: Giao diện trang Contact Us 59 Hình 4.9: Giao diện trang About Us 60 Hình 4.10a: Giao diện trang Blog dạng Grid 61 Hình 4.10b: Giao diện Blog dạng Large Images 62 Hình 4.11: Giao diện trang Login cho khách hàng 63 Hình 4.12: Giao diện admin đăng nhập vào hệ thống 63 Hình 4.13: Giao diện viết Code, chỉnh sửa HTML, CSS 64 Hình 4.14: Giao diện quản lý sản phẩm 64 Hình 4.15: Giao diện quản lý viết 65 Hình 4.16: Giao diện quản lý khách hàng 65 LỜI NÓI ĐẦU 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 Đặc biệt phát triển đa dạng thương mại điện tử Shopify giúp cho người dễ dàng tìm kiếm thông tin Shopify đầu việc xây dựng hệ thống đối tác phát triển giao diện, ứng dụng, hỗ trợ Shop làm Marketing hùng hậu Nhu cầu giao diện sử dụng Shopify ngày lớn Website thương mại điện tử nói chung với tính mở rộng cao cấp cho phép giao dịch qua mạng như: Mega Menu đa dạng, giỏ hàng, wishlist, so sánh sản phẩm, quick view, đặt hàng, toán qua mạng, quản lý khách hàng, quản lý đơn đặt hàng,… Bên cạnh đó, đa số sản phẩm thương mại điện tử chuyên nghiệp, xây dựng dựa Bootstrap 3.0, HTML5 CSS3 để có sản phẩm thương mại điện tử đẹp mắt, dễ nhìn, thu hút khách hàng Tương thích với tất thiết bị di động (từ máy tính bảng, điện thoại di động đến máy tính xách tay…) hình độ phân giải Retina (cho hình ảnh chất lượng cao) Với nhu cầu thực tiễn từ việc sử dụng sản phẩm thương mại điện tử Shopify ngày nhiều công ty, doanh nghiệp , qua khảo sát thị trường sản phẩm thương mại điện tử Em nhận thấy môi trường tiềm đầy sức hấp dẫn Do lý em chọn đề tài: “Xây dựng sản phẩm thương mại điện tử SOZO Shopify” CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Đặt vấn đề Ngày nay, thương mại điện tử (TMĐ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 di động, máy tính bả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 công nghệ tiên tiến internet để tích hợp vào website sử dụng Shopify Có thể nói Shopify dịch vụ thương mại điện tử tiềm Từ vốn kiến thức có trình học tập áp dụng kiến thức html5/css3/js thông qua tham khảo số trang Web giới thiệu sản phẩm, quảng bá sản phẩm 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ử SOZO Shopify” mục tiêu có sản phẩm thương mại nhằm hiểu biết tình hình phát triển thương mại điện tử giới nước 1.2 Tìm hiểu thương mại điện tử sản phẩm thương mại điện tử 1.2.1 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ử (Electronic commerce – EC) từ dùng để mô tả trình mua, bán trao đổi mặt hàng, dịch vụ thông tin qua mạng máy tính bao gồm mạng internet Thương mại điện tử kênh mua sắm có vị trí quan trọng phủ nhận Thật vậy, giải pháp thương mại điện tử, E-Commerce, giúp mở rộng phạm vi người mua giúp cho công việc kinh doanh trở nên linh hoạt Mở cửa 24/7, suốt năm, thương mại điện tử có vai trò thiếu doanh nghiệp đại, giúp tăng doanh số thúc đẩy hoạt động mua bán mạng với giá cạnh tranh  Mô hình thương mại điện tử Mô hình thương mại điện tử phương thức kinh doanh công ty phát sinh lợi nhuận để trì công ty Mô hình thương mại giải thích công ty đóng vai trò dây chuyền  Một số mô hình TMĐT điển hình thành công Trên giới  Amazon.com – Sàn bán lẻ trực tuyến hàng đầu giới  Facebook.com – Kênh Marketing hiệu  Groupon.com – Mua hàng theo nhóm  Paypal.com – Giải pháp toán trực tuyến  SlideShare.net - Giải pháp lưu trữ tài liệu Tại Việt Nam  Lazada.vn - Bán lẻ trực tuyến  Muachung.vn - Mua hàng theo nhóm  Homepay.vn - Thanh toán trực tuyến  K12school.vn - Đào tạo trực tuyến  Vai trò, lợi ích hạn chế thương mại điện tử  Vai trò Thương mại điện tử hình thái hoạt động thương mại phương pháp điện tử, làm việc trao đổi thông tin thương mại thông qua phương tiện công nghệ điện tử mà nói chung không cần phải in giấy công đoạn trình giao dịch Phát triển thương mại điện tử nhu cầu tất yếu kinh tế đại, mang lại lợi ích cho doanh nghiệp khách hàng  Lợi ích  Giúp cho doanh nghiệp nắm thông tin phong phú thị trường đối tác  Giúp giảm chi phí sản xuất  Giúp giảm chi phí bán hàng tiếp thị  Thời gian chi phí giao dịch  Tạo điều kiện cho việc thiết lập củng cố mối quan hệ thành phần tham gia vào trình thương mại  Tạo điều kiện sớm tiếp cận kinh tế số hoá  Hạn chế Những hạn chế mặt kỹ thuật:  Bảo mật hệ thống, tính đáng tin cậy, tiêu chuẩn phương thức giao tiếp tiến triển  Hợp internet phần mềm EC với ứng dụng liệu có sẵn điều khó khắn  Một vài phần mềm EC không thích hợp với phần cứng trở nên không hợp với hệ điều hành thiết bị đạ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ử 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  Chất lượng thiết kế Yếu tố xem xét chất lượng thiết kế Thiết kế yếu tố thuộc thẩm mĩ, xấu hay đẹp không liên quan tới khả code hay thành thạo PSD Đơn giản cách sử dụng typography, spacing, visual hierachy, color, contrast, layout… Hiện nay, thiết kế thường theo xu hướng phẳng, đơn giản Đơn giản thiết kế đẹp, tuân thủ theo nguyên tắc thiết kế nhìn bắt mắt Tất bạn phải làm có thiết kế đẹp, bạn tập trung vào thiết kế, đẩy tất “dirty behind” gồm toán, bảo mật, mua bán… cho bên thứ ba  Độc đáo Độc đáo yếu tố quan trọng cho sản phẩm thương mại điện tử Nó thống thiết kế từ đầu đến cuối trang web từ việc sử dụng font chữ, màu sắc, tương phản hiệu ứng, bố cục…Nên có tính độc đáo riêng 10  Giao diện About Us 81 82 Hình 4.9: Giao diện trang About Us  Giao diện Blog Blog hiển thị theo kiểu full width, grid large images Khách hàng vào xem blog bình luận đánh giá viết 83 84 Hình 4.10a: Giao diện trang Blog dạng Grid 85 86 Hình 4.10b: Giao diện Blog dạng Large Images 87  Giao diện người dùng Login vào trang web Hình 4.11: Giao diện trang Login cho khách hàng 3.3 Giao diện Admin  Giao diện đăng nhập 88 Hình 4.12: 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 89 Hình 4.13: Giao diện viết Code, chỉnh sửa HTML, CSS  Giao diện quản lý sản phẩm 90 Hình 4.14: Giao diện quản lý sản phẩm 91  Giao diện quản lý Blog Hình 4.15: Giao diện quản lý viết  Giao diện trang Admin quản lý khách hàng 92 Hình 4.16: Giao diện quản lý khách hàng 93 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Trong suốt trình làm đồ án sở trung tâm RDCMA Trường Đại Học Công Nghệ Thông Tin Truyền em hoàn thành đề tài “Xây dựng sản phẩm thương mại điện tử SOZO Shopify” hướng dẫn tận tình thầy ThS Nguyễn Quốc Bảo em đạt kết quả:  Hoàn thành xây dựng sản phẩm SOZO Shopify có tính thương mại  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 Hướng phát triển tương lai:  Cố gắng đẩy lên Themeforest sớm hoàn thành  Nâng cao chất lượng sản phẩm  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  94 TÀI LIỆU THAM KHẢO  Leslie F Sikos Ph.D, Web Standards: Mastering HTML5, CSS3, and XML, November 17, 2011  Brian P Hogan, HTML5 and CSS3: Develop with Tomorrow's Standards Today (Pragmatic Programmers) 1st Edition, January 17, 2011  Jamie Phoenix, How To Start an Online Store with Shopify, April 27 2009  WallPearl, Simple Css Standard Editor, 2008  David Flanagan, JavaScript: The Definitive Guide, Since 1996  David Herman, Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript (Effective Software Development Series), December 6, 2012  Douglas Crockford, JavaScript: The Good Parts  Dustin DiazRoss Harmes, Pro JavaScript Design Patterns: The Essentials of Object-Oriented JavaScript Programming,2007  Đặng Văn Đức, Phân tích thiết kế hướng đối tượng UML, Nhà Xuất Bản Khoa học Kỹ thuật, năm 2002  Demon Warlock, Nhập môn thiết kế web  https://docs.shopify.com/ truy cập cuối 26/04/2016  http://cheat.markdunkley.com/ truy cập cuối 15/04/2016  https://docs.bizweb.vn/liquid-document/basics/introduction truy cập cuối 20/04/2016  http://www.shopifyfordesigners.com/ truy cập cuối 26/04/2016  http://www.w3schools.com/ truy cập cuối 01/05/2016 http://thachpham.com/web-development/html-css/huong-dan-su-dung-sassde-viet-css.html truy cập cuối 28/04/2016 95 [...]... 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 12 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 Được đánh giá có giao diện chuyên nghiệp cho thương mại điện tử Shopify sở hữu kho giao diện miễn phí được thiết kế dành riêng cho website thương mại điện tử Và người dùng hoàn toàn không cần... tên kể trên thì Shopify được đánh giá cao nhất Shopify là nền tảng thương mại điện tử tốt nhất 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 ngững tăng lên Một thống kê chỉ ra rằng Shopify đã mang lại doanh thu tổng cộng hơn 12 tỷ đô la trên toàn cầu Khác với những đối thủ cạnh tranh khác, Shopify. .. Tổng quan về Shopify  Giới thiệu sơ lược về Shopify Có trụ sở chính tại Ottawa – Canada và Giám đốc điều hành của công ty được đặt tên là Tobias Lütke được thành lập vào năm 2006, Shopify là một trong những công ty đi tiên phong trong cuộc cách mạng thương mại điện tử trên phạm vi toàn cầu Sau gần 10 năm đi vào hoạt động, Shopify 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... cần được chú trọng như tiêu chuẩn HTML, tiêu chuẩn CSS, tiêu chuẩn JavaScript, tiêu chuẩn PHP và tiêu chuẩn phát triển chủ đề web thương mại điện tử Việc áp dụng và tuân thủ các tiêu chuẩn này trong khi làm chủ đề của bạn sẽ là một lợi thế rất lớn Sản phẩm thương mại điện tử yêu cầu thiết kế được tích hợp đầy đủ các chức năng với mong muốn làm sao khách hàng dễ sử dụng nhất Khi thiết kế website để đạt... hàng trực tiếp tại trangg Facebook của bạn Theo đánh giá của giới chuyên môn, 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 Shopify cũng được giới thiệu bởi những 13 trang công nghệ lớn nhất thế giới như TechCrunch, Mashable, The New York Times, The Wall Street Journal,  Tính năng của Shopify Shopify có đầy đủ những tính năng căn bản tối thiểu mà bất cứ cửa hàng nào cần... về sản phẩm giúp khách hàng dễ dàng lựa chọn được sản phẩm phù hợp  Website được tải với tốc độ nhanh, có khả năng tương thích với hầu hết các trình duyệt web phổ biến nhất hiện nay  Website được cập nhật thông tin, tin tức chuyên ngành một cách hoàn toàn tự động từ các báo điện tử nổi tiếng  Shopify 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, ... dụng Shopify đều có thể dễ dàng tích hợp cổng thanh toán Paypal qua đó khách hàng có thể thanh toán tài khoản Paypal hoặc thẻ Visa, MasterCard, American Express,… Tất cả thanh toán tại Shopify đều được bảo mật tuyệt đối bằng giao thức SSL Với Shopify bạn có thể hoàn toàn kết nối và bán hàng thông qua trang Facebook của bạn vô cùng dễ dàng Tất cả những sản phẩm có trên website của bạn sẽ được hiển thị trên. .. trìn nào để có thể sử dụng Shopify Với kho ứng dụng đồ sộ và miễn phí, Shopify Apps sở hữu hơn 900 ứng dụng miễn phí dành riêng cho website sử dụng Shopify Việc tự cài đặt những ứng dụng cần thiết cho website hoàn toàn miễn phí như Live chat, pop-up, mạng xã hội, McAfee Secure… Tất cả website sử dụng Shopify đều được thiết kế để hiển thị một cách tối ưu trên mọi thiết bị Shopify sở hữu giao diện riêng... các giá trị khác nhau Case sẽ tạo hướng chuyển đổi và when sẽ so sánh các giá trị Ví dụ {% assign vendor = 'Adidas' %} {% case vendor %} {% when 'Adidas' %} Một sản phẩm của Adidas {% when 'Nike' %} Một sản phẩm của Nike {% else %} 17 Sản phẩm này không phải của Adidas hay Nike {% endcase %}  Unless: Thẻ này tương tự với if, nhưng nó sẽ thực hiện đoạn mã nếu các điều kiện cụ thể không được đáp ứng... page_description Đây là một trường có thể thay đổi tùy theo đối tượng tương ứng (danh mục sản phẩm, sản phẩm, bài viết, ) page_title {{ page_title }} Đối tượng page_title trả về tiêu đề của trang hiện tại store Đối tượng store bao gồm các thông tin liên quan đến website template {% if template contains 'product' %} Bạn đang ở trang sản phẩm {% endif %} Đối tượng template trả về cho biết template bạn đang sử dụng ... 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ử SOZO Shopify mục tiêu có sản phẩm thương mại nhằm hiểu biết tình hình phát triển thương mại điện tử giới... hiểu thương mại điện tử sản phẩm thương mại điện tử 1.2.1 Một số định nghĩa thương mại điện tử 1.2.2Vai trò, lợi ích hạn chế thương mại điện tử 1.2. 3Sản phẩm thương mại điện. .. điện tử giới nước 1.2 Tìm hiểu thương mại điện tử sản phẩm thương mại điện tử 1.2.1 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ử (Electronic commerce – EC) từ