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 ... 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. .. 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... đ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ừ