Xây dựng sản phẩm thương mại điện tử mirano trên nền shopify

LỜI CẢM ƠN Để hoàn thành khóa luận này, 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 tốt nghiệp Là người trực tiếp hướng dẫn, bảo tận tình suốt thời gian làm đề tài thực tập Đồng thời em cảm ơn tới Thầy giáo Ths Đào Trần Chung cán trung tâm nghiên cứu phát triển phần mềm di động RDCMA ICTU tích cực giúp giúp đỡ em hoàn toán yêu cầu làm việc 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ử Mirano 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 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 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 04 tháng 03 năm 2016 Sinh viên Trần Văn Ba i MỤC LỤC LỜI CẢM ƠN i MỤC LỤC ii DANH MỤC HÌNH ẢNH iv CHƯƠNG 1: TỔNG QUAN .1 1.1 Tổng quan vấn đề nghiên cứu .1 1.1.1 Giới thiệu đơn vị thực tập: 1.1.2 Mô tả bối cảnh chung vần đề nghiên cứu .2 1.2 Lý chọn đề tài 1.3 Mục tiêu nghiên cứu 1.4 Phương pháp nghiên cứu .3 1.5 Phạm vi nghiên cứu .4 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT .5 2.1 Cơ sở lý thuyết 2.1.1 Thương mại điện tử (TMĐT) 2.1.2 Sản phẩm thương mại điện tử .7 2.1.3 Tìm hiểu Shopify 2.1.3 So sánh phần mềm Shopify số mã nguồn mở khác 11 2.2 Lập trình liquid 13 2.2.1 Giới thiệu lập trình liquid 13 2.2.2 Định danh – Alias 14 2.2.3 Toán tử - Operator .15 2.2.4 Thẻ .19 ii CHƯƠNG 3: MÔ TẢ, KHẢO SÁT HIỆN TRẠNG VÀ PHÂN TÍCH THIẾT KẾ HỆ THỐNG .20 3.1 Mô tả đối tượng nghiên cứu 20 3.1.1 Nêu toán 20 3.1.2 Khảo sát giao diện thương mại điện tử .20 3.2 Phân tích thiết kế hệ thống 24 3.2.1 Xác định tác nhân 24 3.2.2 Biểu đồ Use Case 25 3.2.3 Biểu đồ trình tự cộng tác .39 CHƯƠNG THIẾT KẾ GIAO DIỆN WEBSITE 40 4.1 Cách xây dựng sản phẩm thương mại điện tử Shopify .40 4.1.1 Chi tiết style giao diện .41 4.2 Giao diện 43 4.2.1 Giao diện người dùng 43 4.2.2 Giao diện Admin 53 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 57 TÀI LIỆU THAM KHẢO 58 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 59 iii DANH MỤC HÌNH ẢNH Hình 3.1 Sơ đồ Xmind xây dựng theme “mirano” Shopify 23 Hình 3.2 Biểu đồ Use Case khách hàng .32 Hình 3.3.a Khách hàng xem nhanh sản phẩm 33 Hình 3.3.b quickview 33 Hình 3.3.c biểu đồ lớp cho quickview 34 Hình 4: Biểu đồ trình tự cho tác vụ compare (so sánh sản phẩm) .35 Hình 5: Biểu đồ cộng tác cho tác vụ compare (so sánh sản phẩm) 35 Hình 3.6: Biểu đồ trình tự cho chức wishlist 36 Hình 3.7: Biểu đồ cộng tác cho chức wishlist .36 Hình 3.8 Biểu đồ lớp cho chức wishlist 37 Hình 3.9 Biểu đồ Use Case Admin .38 Hình 4.1 Giao diện chương trình 43 Hình 4.2a Giao diện Collection dạng Grid 44 Hình 4.2b Giao diện Collection dạng List .45 Hình 4.5 Giao diện chức Quick View 46 Hình 4.6 Giao diện xem chi tiết sản phẩm 47 Hình 4.7b Giao diện chi tiết chức Cart .48 Hình 4.8a Giao diện trang Blog 49 Hình 4.8b Giao diện chi tiết Blog .50 Hình 4.9 Giao diện trang About Us .51 iv Hình 4.10 Giao diện trang Contact Us 52 Hình 4.11 Giao diện đăng nhập vào hệ thống theme mirano .53 Hình 4.12 Giao diện quản lý viết .54 Hình 4.13 Giao diện quản lý sản phẩm 55 Hình 4.14 Giao diện quản lý Khách hàng 55 Hình 4.15 Giao diện viết Code, chỉnh sửa HTML, CSS 56 v CHƯƠNG 1: TỔNG QUAN 1.1 Tổng quan vấn đề nghiên cứu 1.1.1 Giới thiệu đơn vị thực tập: Trung tâm nghiên cứu phát triển ứng dụng di động (RDCMA) Địa điểm: Tại samsung lab Cơ cấu cổ chức: - Bộ phận nghiên cứu phát triển phần mềm ứng dụng di động - Bộ phận đào tạo cấp chứng công nghệ di động - Bộ phận phát triển ứng dụng web Chức năng: Trung tâm có chức tham mưu cho Ban giám hiệu Nhà trường tổ chức hoạt động đào tạo hợp tác với doanh nghiệp, đơn vị, tổ chức nghiên cứu lĩnh vực công nghệ di động Trung tâm có chức tổ chức thực triển khai nghiên cứu, phát triển ứng dụng di động - Trung tâm có chức đào tạo, bồi dưỡng tổ chức thi chứng nước quốc tế lập trình di động…theo nhu cầu học viên - Trung tâm có chức tổ chức hoạt động phát triển cộng đồng nghiên cứu ứng dụng công nghệ di động Đại học Công nghệ thông tin & Truyền thông, gắn kết với cộng đồng nghiên cứu ứng dụng công nghệ di động Việt nam giới Nhiệm vụ: - Tổ chức hoạt động nghiên cứu, phát triển ứng dụng điện thoại di động - Liên kết với doanh nghiệp, đơn vị, tổ chức nghiên cứu làm việc lĩnh vực di động - Tổ chức giảng dạy, quản lý lớp học công nghệ di động Trung tâm mở - Liên kết với quan, tổ chức đào tạo cấp chứng lập trình di động - Tổ chức hoạt động phát triển cộng đồng nghiên cứu ứng dụng công nghệ di động Đại học Công nghệ thông tin & Truyền thông - Trung tâm thực nhiệm vụ khác Nhà trường Hiệu trưởng phân công 1.1.2 Mô tả bối cảnh chung vần đề nghiên cứu - Xu hướng mua, đặt hàng trực tuyến dần trở thành nếp văn minh thời đại tiên tiến Với phát triển mạnh mẽ thương mại điện tử, hoạt động mua bán diễn nhanh hơn, mang lại nhiều tiện lợi cho khách hàng - Thương mại điện tử phải có đầy đủ hoạt động kinh doanh thực qua mạng (quản lý liệu khách hàng, quản lý xử lý đơn hàng, toán trực tuyến qua mạng, chữ ký điện tử ) - Giao diện đẹp, sáng tạo, đại, đồng với nhận diện thương hiệu doanh nghiệp - Các vấn đề tồn lý thuyết thực tế quan sát, trạng kỳ vọng đơn vị thực tập dựa sở quan sát thực tế quy trình nghiệp vụ, hoạt động kinh doanh hay báo cáo đơn vị thực tập liên quan đến lĩnh vực nghiên cứu 1.2 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 Với người sử dụng lựa chọn trang web để tham gia mua bán trực tuyến website có đẹp hay không, sau website có đơn giản, sử dụng đầy đủ chức hay không? Đặ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 người đầu 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ư: 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ử công ty, doanh nghiệp trên, qua khảo sát thị trường sản phẩm thương mại điện tử em nhận thấy cần bổ sung số tính cần thiết sản phẩm thương mại điện tử, sản phẩm mang thương mại giúp người dùng sử dụng sản phẩm theo nhu cầu sử dụng cửa hàng Đây lý em chọn đề tài: “Xây dựng sản phẩm thương mại điện tử sử dụng Shopify” Trong giới hạn đề tài em chuyên sâu vào để thiết kế giao diện trang web đẹp, đầy đủ chức thực tốt chức sản phẩm thương mại điện tử Shopify 1.3 Mục tiêu nghiên cứu Việc phát triển phần mềm thương mại điện tử trọng công ty Để thực thành công vấn đề thực trạng tồn để phát triển thương mại điện tử Trên sở nhận thức thực tiễn vấn đề em đưa phương hướng, giải pháp nhằm thúc đẩy phát triển thương mại điện tử Trung tâm nghiên cứu phát triển ứng dụng di động (RDCMA) Mục tiêu nghiên cứu trình thực tập em tìm hiểu sâu làm rõ khái niệm sản phẩm thương mại điện tử Biết cách phân tích cho hệ thống, tiếp cận công cụ lập trình Các kĩ thuật lập trình môi trường internet Tìm hiểu sản phẩm thương mại Shopify, xây dựng sản phẩm để đưa thương mại 1.4 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, doanh nghiệp 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.5 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 dung 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 Và thời gian có hạn, đề tài giới hạn nghiên cứu phạm vi có thể: - Tìm hiểu Shopify - Xây dựng sản phẩm thương mại điện tử “mirano” thương mại - Tập trung vào việc thiết kế, xây dựng giao diện hoàn chỉnh Căn vào yêu cầu học phần thực tập tốt nghiệp báo cáo thực tập tốt nghiệp sinh viên trình bày giới hạn phạm vi đề tài thực Trung tâm nghiên cứu phát triển ứng dụng di động (RDCMA), không gian thời gian nguồn số liệu vấn đề nghiên cứu định hướng kế hoạch phát triển thương hiệu ngày vững mạnh Đây sản phẩm thương mại đủ mạnh phép nhanh chóng xây dựng ứng dụng bán hàng Internet CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Cơ sở lý thuyết 2.1.1 Thương mại điện tử (TMĐT) 2.1.1.1 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 thong 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 2.1.1.2 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 để 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 Hình 4.2b Giao diện Collection dạng List Mô tả: Ở giao diện Collection này, khách hàng xem sản phẩm dạng Grid List để xem sản phẩm, thông tin sản phẩm, giá sản phẩm Người dùng Add to cart, wishlist, quick-view sản phẩm 45  Giao diện chức Quick View Hình 4.5 Giao diện chức Quick View Mô tả: Chức “Quick View” người dùng click vào chức Quick View Sẽ hiển thị modal với thông tin chi tiết sản phẩm, giá, hình ảnh hình ảnh liên quan, có chức để chia sẻ lên mạng xã hội 46  Giao diện chi tiết sản phẩm Hình 4.6 Giao diện xem chi tiết sản phẩm 47 Hình 4.7b Giao diện chi tiết chức Cart Mô tả: Chức Add to Cart thực người dùng muốn mua sản phẩm đưa vào giỏ hàng Và thêm sản phẩm vào giỏ hàng, xóa sản phẩm không muốn đặt mua nữa, giảm số lượng sản phẩm muốn mua 48  Giao diện Blog – tin tức website Hình 4.8a Giao diện trang Blog 49 Hình 4.8b Giao diện chi tiết Blog 50  Giao diện About Us Hình 4.9 Giao diện trang About Us 51  Giao diện Contact Us Hình 4.10 Giao diện trang Contact Us 52 4.2.2 Giao diện Admin  Giao diện đăng nhập Hình 4.11 Giao diện đăng nhập vào hệ thống theme mirano 53  Giao diện quản lý Blog Hình 4.12 Giao diện quản lý viết 54  Giao diện quản lý sản phẩm Hình 4.13 Giao diện quản lý sản phẩm Hình 4.14 Giao diện quản lý Khách hàng 55  Giao diện quản lý mã nguồn, chỉnh sửa mã nguồn Hình 4.15 Giao diện viết Code, chỉnh sửa HTML, CSS 56 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Trong suốt trình thực tập 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ử Mirano 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 Mirano 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 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 đẩy lên Themeforest sớm hoàn thành – Nâng cao chất lượng sản phẩm (các layout lại) – 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 57 TÀI LIỆU THAM KHẢO [1] Lê Minh Hoàng , Thiết kế Web với CSS– NXB Lao động xã hội., 1999 [1] Đoàn Văn Ba (1997), Phân tích thiết kế hướng đối tượng UML- NXB Thống Kê [3] Website: https://docs.shopify.com/themes/liquid [4] Website: https://shopifyvietnam.net [5] Website: https://docs.bizweb.vn/liquid-document/basics/introduction [6] Bootstrap Documentation truy cập địa http://getbootstrap.com/css [7] W3Schools truy cập địa http://www.w3schools.com/ [8] JQuery Documentation truy cập địa http://jquery.com/ 58 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Thái Nguyên, ngày 04 tháng 03 năm 2016 Giáo viên hướng dẫn Nguyễn Quốc Bảo 59 ... tâm nơi thực tập phát triển sản phẩm thương mại điện tử Shopify để tạo sản phẩm để đưa thương mại 3.1.2 Khảo sát giao diện thương mại điện tử Website thương mại điện tử có xu hướng thiết kế để... khảo sát thị trường sản phẩm thương mại điện tử em nhận thấy cần bổ sung số tính cần thiết sản phẩm thương mại điện tử, sản phẩm mang thương mại giúp người dùng sử dụng sản phẩm theo nhu cầu sử... tài: Xây dựng sản phẩm thương mại điện tử sử dụng Shopify Trong giới hạn đề tài em chuyên sâu vào để thiết kế giao diện trang web đẹp, đầy đủ chức thực tốt chức sản phẩm thương mại điện tử Shopify