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

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ủa các 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 một số

i

LỜI CẢM ƠN

Để hoàn thành khóa luận này, em xin cảm ơnThầy ThS Nguyễn Quốc Bảo, đã

tận tình hướng dẫn và giúp đỡ em trong thời gian thực hiện bài báo cáo tốt nghiệp Là người đã trực tiếp hướng dẫn, chỉ bảo tận tình trong suốt thời gian làm đề tài thực tập

Đồng thời em cũng cảm ơn tới Thầy giáo Ths Đào Trần Chung cán bộ trung tâm

nghiên cứu và phát triển phần mềm di động RDCMA ICTU đã tích cực giúp giúp đỡ

em hoàn các bài toán và yêu cầu làm việc Với sự hướng dẫn của thầy cô giáo và nhu

cầu thực tế phát triển tại 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 trên nền 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ô trong Khoa Công Nghệ Thông Tin, các thầy ở trung tâm RDCMA Trường Đại Học Công Nghệ Thông Tin và Truyền thông đã tận tình và tâm huyết truyền đạt kiến thức quý báu trong những năm em học tập Với vốn kiến thức được tiếp thu trong quá trình học không chỉ

là nền tảng cho quá trình nghiên cứu học tập mà còn là hành trang quý báu để em bước

vào đời một cách vững chắc và tự tin

Em cũng xin chân thành cảm ơn đến các bạn bè đã giúp đỡ tài liệu, trao đổi học thuật mới có thể thực hiện bài thực tập tốt nghiệp này Xin gửi lời cảm ơn đến các bạn

Sau cùng, em xin kính chúc quý Thầy Cô thật dồi dào sức khỏe, niềm tin để tiếp tục thực hiện sứ mệnh cao đẹp của mình là truyền đạt kiến thức cho thế hệ mai sau Đồng kính chúc các thầy cô và các bạn trong trung tâm RDCMA luôn dồi dào sức khỏe, đạt được nhiều thành công tốt đẹp trong 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

ii

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ề vấn đề nghiên cứu 1

1.1.1 Giới thiệu đơn vị thực tập: 1

1.1.2 Mô tả bối cảnh chung của vần đề nghiên cứu .2

1.2 Lý do chọn đề tài 2

1.3 Mục tiêu nghiên cứu 3

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 5

2.1.1 Thương mại điện tử (TMĐT) 5

2.1.2 Sản phẩm thương mại điện tử 7

2.1.3 Tìm hiểu Shopify 8

2.1.3 So sánh phần mềm Shopify và một 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

iii

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 bài toán 20

3.1.2 Khảo sát các giao diện thương mại điện tử hiện nay .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ự và cộng tác 39

CHƯƠNG 4 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

iv

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 3 4: Biểu đồ trình tự cho tác vụ compare (so sánh sản phẩm) 35

Hình 3 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 năng wishlist 36

Hình 3.7: Biểu đồ cộng tác cho chức năng wishlist 36

Hình 3.8 Biểu đồ lớp cho chức năng wishlist 37

Hình 3.9 Biểu đồ Use Case Admin 38

Hình 4.1 Giao diện chính của 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 năng 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 năng Cart 48

Hình 4.8a Giao diện trang Blog 49

Hình 4.8b Giao diện chi tiết 1 Blog 50

Hình 4.9 Giao diện trang About Us 51

v

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ý bài 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

1

CHƯƠNG 1: TỔNG QUAN 1.1 Tổng quan về 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 và 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 và phát triển phần mềm ứng dụng trên nền di động

- Bộ phận đào tạo và cấp chứng chỉ về 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 năng tham mưu cho Ban giám hiệu Nhà trường tổ chức các hoạt động đào tạo và hợp tác với các doanh nghiệp, đơn vị, tổ chức nghiên cứu trong lĩnh vực công nghệ di động

- Trung tâm có chức năng tổ chức thực hiện và triển khai các nghiên cứu, phát triển

Nhiệm vụ:

- Tổ chức các hoạt động nghiên cứu, phát triển các ứng dụng trên điện thoại di động

- Liên kết với các doanh nghiệp, đơn vị, tổ chức nghiên cứu và làm việc trong lĩnh vực di động

- Tổ chức giảng dạy, quản lý các lớp học về công nghệ di động do Trung tâm mở

2

- Liên kết với các cơ quan, tổ chức đào tạo và cấp chứng chỉ về lập trình di động

- Tổ chức các hoạt động phát triển cộng đồng nghiên cứu và ứng dụng công nghệ di động tại Đại học Công nghệ thông tin & Truyền thông

- Trung tâm thực hiện các nhiệm vụ khác của Nhà trường do Hiệu trưởng phân công

1.1.2 Mô tả bối cảnh chung của vần đề nghiên cứu

- Xu hướng mua, đặt hàng trực tuyến đã dần trở thành một nếp văn minh mới trong thời đại tiên tiến Với sự phát triển mạnh mẽ của thương mại điện tử, mọi hoạt động mua bán diễn ra nhanh hơn, mang lại rất nhiều sự tiện lợi cho khách hàng

- Thương mại điện tử phải có đầy đủ các hoạt động kinh doanh được thực hiện qua mạng (quản lý dữ liệu khách hàng, quản lý và xử lý đơn hàng, thanh toán trực tuyến qua mạng, chữ ký điện tử )

- Giao diện đẹp, sáng tạo, hiện đại, đồng nhất với bộ nhận diện thương hiệu của doanh nghiệp

- Các vấn đề tồn tại giữa lý thuyết và thực tế quan sát, giữa hiện trạng và kỳ vọng của đơn vị thực tập dựa trên cơ sở quan sát thực tế về các quy trình nghiệp vụ, các hoạt động kinh doanh hay các báo cáo tại đơn vị thực tập liên quan đến lĩnh vực nghiên cứu

1.2 Lý do chọn đề tài

Trong thời đại công nghiệp hóa, hiện đại hóa và sự bùng nổ về sức mạnh của công nghệ thông tin hiện nay Việc mua bán sản phẩm, đặt hàng trực tuyến đang trở thành một nếp văn minh mới trong 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 khi lựa chọn một trang web để tham gia mua bán trực tuyến thì đầu tiên website đó có đẹp hay không, sau đó là website đó có đơn giản, có dễ sử

dụng và đầy đủ chức năng hay không?

Đặc biệt sự phát triển đa dạng của thương mại điện tử trên nền Shopify đã giúp cho mọi người dễ dàng tìm kiếm thông tin Shopify là người đi đầu và cũng xây dựng

một hệ thống đối tác cùng phát triển giao diện, ứng dụng, hỗ trợ các Shop làm Marketing rất hùng hậu Nhu cầu giao diện sử dụng Shopify ngày một lớn Website thương mại điện tử nói chung với các tính năng mở rộng cao cấp cho phép giao dịch

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ủa các 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 một số tính năng cần thiết của sản phẩm thương mại điện tử, và sản phẩm đó có thể mang đi 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 cửa hàng Đây cũng là lý do 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 của em sẽ chuyên

sâu vào làm sao để thiết kế giao diện được một trang web đẹp, đầy đủ chức năng và thực hiện tốt những chức năng cơ bản nhất của một sản phẩm thương mại điện tử trên nền 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ử đang rất được chú trọng tại công

ty Để thực hiện thành công những vấn đề thực trạng tồn tại để phát triển thương mại điện tử Trên cơ sở nhận thức và thực tiễn của vấn đề đó em đưa ra phương hướng, các

giải pháp nhằm thúc đẩy phát triển thương mại điện tử tại Trung tâm nghiên cứu và

phát triển ứng dụng di động (RDCMA)

Mục tiêu của nghiên cứu này trong quá trình thực tập em đã tìm hiểu sâu hơn và làm rõ các khái niệm sản phẩm thương mại điện tử Biết cách phân tích cho một hệ thống, tiếp cận công cụ lập trình Các kĩ thuật lập trình trên môi trường internet Tìm hiểu sản phẩm thương mại trên nền Shopify, xây dựng sản phẩm để đưa đi 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 và thực tiễn Đồng thời số liệu nghiên cứu được lấy từ nguồn thứ cấp và

- Tìm hiểu về Shopify

- Xây dựng sản phẩm thương mại điện tử “mirano” và có thể đi 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 cứ vào yêu cầu của học phần thực tập tốt nghiệp và 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 của đề tài thực hiện tại Trung tâm nghiên

cứu và phát triển ứng dụng di động (RDCMA), không gian và thời gian đối với nguồn

số liệu và vấn đề nghiên cứu và định hướng kế hoạch phát triển thương hiệu ngày một

vững mạnh Đây là một sản phẩm thương mại đủ mạnh để cho phép nhanh chóng xây dựng các ứng dụng bán hàng trên Internet

5

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 là hình thức quan trọng của các hoạt động thương mại trong xã hội ở thế

kỉ XXI, bao gồm một loạt các hoạt động thương mại được thực hiện 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 và thanh toán điện tử,…Ngoài các giao dịch điện tử đối với mua bán hàng hóa, TMĐT sẽ bao gồm cả những hoạt động thương mại dịch vụ như 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á trên mạng…TMĐT vừa đề cập việc mua bán hàng hóa và cung cấp các dịch vụ, vừa có những 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 càng được biết tới như một phương thức kinh doanh hiệu quả nhất từ khi internet hình thành và phát triển Chính vì vậy, nhiều người hiểu TMĐT theo nghĩa cụ thể hơn là giao dịch thương mại, mua sắm qua internet và mạng

2.1.1.2 Lợi ích của thương mại điện tử

Đối với doanh nghiệp, lợi ích lớn nhất mà TMĐT mang lại chính là sự kết hợp chi phí vào tạo lợi nhuận cho các bên giao dịch Giao dịch bằng phương tiện điện tử nhanh hơn so với giao dịch truyền thống Các giao dịch qua internet có chi phí rất rẻ, với TMĐT các bên có thể tiến hành giao dịch khi ở cách xa nhau, giữa thành phố với nông thôn, từ nước này sang nước khác hay nói cách khác là không bị giới hạn không gian địa lý Điều này cho phép các doanh nghiệp tiết kiệm chi phí sản xuất, giao dịch Bên cạnh đó, doanh nghiệp có thể mở rộng thị trường, tìm kiếm, liên lạc với đối tác và khách hàng ở bất kì nơi đâu với chi phí thấp hơn 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ả năng lựa chọn hàng hóa, dịch vụ

và nhà cung cấp Do có nhiều lựa chọn nên khách hàng để tìm được sản phẩm có chất lượng cao hoặc giá thấp Hàng hóa như phần mềm, phim, nhạc có thể được giao ngay đến khách hàng qua internet

6

Đối với xã hội, TMĐT tạo ra một phong cách kinh doanh, làm việc mới phù hợp với cuộc sống công nghiệp, giúp các khu vực kém phát triển nhanh chóng mở rộng trao đổi TMĐT là một công cụ giúp doanh nghiệp vừa và nhỏ khắc phục những điểm kém lợi thế để cạnh tranh bằng với doanh nghiệp lớn TMĐT cũng tạo ra động lực mạnh

mẽ

2.1.1.3 Website thương mại điện tử là gì?

Theo quy định tại Nghị định số 52/2013/NĐ-CP ngày 16/5/2013 của Chính phủ

về thương mại điện tử, website thương mại điện tử là trang thông tin điện tử được thiết lập để phục vụ một phần hoặc toàn bộ quy trình của hoạt động mua bán hàng hóa hay cung ứng dịch vụ, từ trưng bày giới thiệu hàng hóa, dịch vụ đến giao kết hợp đồng, cung ứng dịch vụ, thanh toán và dịch vụ sau bán hàng

Với thời kì CNTT phát triển cực thịnh, smartphone được sử dụng bởi từng cụ già đến trẻ nhỏ Việc tìm kiếm khách hàng tiềm năng trên Internet đã quá phổ biến và trở thành một trong những chiến lược chính của một số lượng không nhỏ công ty doanh nghiệp

Thương mại điện tử lên ngôi, đồng nghĩa với việc website trở thành một điều không thể thiếu trong chiến dịch tăng doanh thu doanh số Một đơn vị hoạt động tìm kiếm doanh thu trên internet ngoài sử dụng các dịch vụ có sẵn như rao vặt, mạng xã hội, gian hàng, nhất thiết phải trang bị cho mình một website thương mại điện tử với những chức năng cũng như những trải nghiệm căn bản nhất chí ít là dành cho khách hàng của họ

Website thương mại điện tử với tính năng mở rộng nâng cao, giúp người bán có thể bán được sản phẩm qua mạng internet và người mua có thể mua được sản phẩm họ cần thông qua mạng internet Website thương mại điện tử sẽ có chức năng chính đó là hiển thị thông tin sản phẩm bao gồm giá cả, giới thiệu về sản phẩm, chức năng mua hàng,… giao dịch sẽ được thanh toán qua các cổng thanh toán trực tuyến như Ngân Lượng, Bảo Kim hoặc chuyển khoản qua ngân hàng

7

2.1.2 Sản phẩm thương mại điện tử

Để tạo ra sản phẩm thương mại điện tử có sức cạnh tranh lớn, khách hàng đang đòi hỏi chất lượng cao hơn và chức năng tốt hơn để cho các nhà phát triển tìm ra những cách thức mới để làm cho sản phẩm của trở nên nổi bật

Điều kiện để có sản phẩm thương mại mang có tính cạnh tranh lớn đòi hỏi những yêu cầu, chức năng nổi bật cần thiết như:

 Đòi hỏi thiết kế (Design) đẹp mắt

Một thiết kế tốt đòi hỏi website trong các layout với khoảng trắng, canh chỉnh, lựa chọn màu sắc và cách trình bày văn bản Cấu trúc dễ dàng chỉnh sửa để cho phù hợp với sidebar bên trái, bên phải

Tùy chỉnh nhiều layout (home) khác nhau với các header phù hợp với các nội dung khác nhau Kích thước của logo có thể thay đổi mà không ảnh hưởng tới layout, theme cho phép cấu trúc nhiều cột Các layout có thể tùy biến theo ý người dùng Được xây dựng trên khung Bootstrap một trong những khung tốt nhất linh hoạt sạch sẽ, tương thích với mobile và các thiết bị cầm tay Và đi kèm với nhiều tùy chọn để có thể quản lý từng chi tiết nhỏ bên trong nó để tạo ra phong cách riêng của doanh nghiệp, công ty bạn

Thiết kế cần phải nổi bật, có thể đơn giản giống như là một khung hình ảnh độc nhất, một slide show trên trang chủ, menu với tính năng animation đa dạng, các nút button, hover qua hình ảnh đòi hỏi độ mượt Tạo nên sự riêng biệt website của bạn so với các website khác

 Chi tiết

Tất cả đều chi tiết, website thương mại điện tử với những đường kẻ sắc nét, những hiệu ứng chuyển màu mượt mà, canh chỉnh phù hợp và sử dụng khoảng trắng tốt Các chức năng dễ dàng sử dụng, khả năng chỉnh sửa một cách dễ dàng

 Tạo cho người dùng những thao tác tùy chọn dễ dàng nhất

Để có được sản phẩm thương mại điện tử cung cấp các thiết lập có thể chỉnh sửa mọi thứ Sản phẩm phải tạo cho người dùng những điều khiển đơn giản nhất, dễ thao tác Ví dụ, nếu thiết kế có menu chính trong phần footer, hãy chắc rằng bạn có thêm

8

một tuỳ chọn để chuyển nó lên phần header Giao diện hỗ trợ thay đổi màu sắc của rất nhiều thành phần như: hình nền, liên kết, text, menu …

 Chế độ tùy chọn layout khác nhau

Sản phẩm có nhiều layout(home) để lựa chọn, đa dạng màu sắc, hình ảnh, đa dạng chế độ hiển thị banner Người dùng muốn hiển thị layout màu sáng hay tối một sản phẩm thương mại phải đáp ứng được nhu cầu đó của người dùng

2.1.3 Tìm hiểu Shopify

2.1.3.1 Giới thiệu sơ lược về Shopify

Shopify – Một công ty của Canada hoạt động từ năm 2006: Thực sự thì đây là

một giải pháp toàn diện cho các cửa hàng, cửa hiệu về cả mặt Online và Offline Là dịch vụ thương mại điện tử

Giải pháp bán hàng này đã và đang nhận được sự quan tâm của hơn 90.000 người dùng chính thức trên toàn thế giới Đây là Shopping Cart nổi tiếng nhất khi có số lượng người dùng đông đảo nhất, với đầy đủ các thành phần như người dùng cá nhân, các doanh nghiệp với quy mô bé đến lớn…Điều này phần nào nói lên được về mức độ

“nổi tiếng” của Shopify

Các gian hàng mà Shopify cung cấp với đa dạng các lĩnh vực, ngành nghề và có giao diện bắt mắt và chuyên nghiệp

Thêm vào đó, chúng ta còn có thể bổ sung thêm các tiện ích dạng Application (Ứng dụng) cho gian hàng ảo hiện tại để nó trở lên phong phú, tiện dụng hơn với khách hàng ghé thăm

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 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 luôn tiên phong áp dụ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ùng với đó, Shopify sở hữu đội ngũ chuyên gia nhiều năm kinh 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

9

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 trang công nghệ lớn nhất thế giới như TechCrunch, Mashable, The New York Times, The Wall Street Journal,

Shopify là một trong 4 nhà cung cấp nền tảng thương mại điện tử trực tuyến lớn

nhất thế giới bên cạnh Bigcommerce, Weebly eCommerce và Squarespace eCommerce Tuy nhiên, trong những cái tên kể tên thì Shopify được đánh giá cao nhất với hơn 245.000 cửa hàng trực tuyến và đang không ngừng tăng lên Với Shopify, bạn

sẽ được những thứ sau đây:

– Hệ thống hàng trăm giao diện chuyên nghiệp với phần lớn là giao diện miễn phí – Kho ứng dụng đồ sộ với hàng trăm ứng dụng miễn phí thuộc nhiều lĩnh vực khác nhau như: Marketing, Sales, Mạng xã hội, Quản lý đơn hàng, Chăm sóc khách hàng, – Miễn phí Hosting chất lượng cao với tính năng bảo mật được đảm bảo tuyệt đối

và băng thông không giới hạn Cho dù trang của bạn có 100 hay 100.000 người cùng truy cập cùng một lúc thì tốc độ luôn được đảm bảo ở mức nhanh nhất

– Bạn có thể gọi điện hoặc Chat với Shopify để được hỗ trợ vào bất cứ thời điểm nào trong ngày

– Tích hợp thanh toán PayPal, Visa, MasterCard

– Hệ thống admin quản lý đặt hàng, đăng sản phẩm chuyên nghiệp Có hệ thống tạo tài khoản cho khách hàng

– Hệ thống email tự động gửi cho khách hàng để xác nhận đặt hàng, tạo tài khoản, lấy lại mật khẩu

– Được thiết kế tối ưu cho SEO

2.1.3.2 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 như:

– Giao diện website chuẩn cho các cửa hàng Online (có tất cả hơn 100 giao diện) và tất nhiên là phải có Domain + Hosting để website đó có thể hoạt động

10

– Mobile – Friendly

– Quản lý admin chuyên nghiệp

– Shopify Facebook Store

– Giỏ hàng kết nối hơn 70 cổng thanh toán với các tính năng về thuế, phí vận chuyển – Tính năng quản lý khách hàng, chăm sóc khách hàng, các mẫu email tự động trả lời cho khách hàng

– Quản lý đơn hàng, tồn kho, tùy biến các lựa chọn cho sản phẩm chuyên nghiệp, tiện lợi

– Hệ thống Marketing chuyên nghiệp với các tính năng cung cấp mã giảm giá, thẻ quà tặng, tab cửa hàng trên Facebook, hệ thống email marketing, tính năng review sản phẩm

– Công cụ báo cáo, phân tích dữ liệu về traffic, đơn hàng, khách hàng, insights người dùng … toàn diện và hữu ích

– Và đặc biệt là họ có các đối tác phát triển ứng dụng tới hơn 900 Apps hỗ trợ như: live chat, email, popup, tích hợp vận chuyển, quyết toán, báo cáo và vô vàn các ứng dụng hữu ích khác …

– Tích hợp những tính năng tự động như: Đặt hàng, thanh toán, báo cáo, quản lý quy trình (tuỳ theo yêu cầu của quý khách và tính chất ngành nghề), tài khoản log-in cho khách hàng

– Tích hợp sẵn các tính năng quảng bá website trên Internet, cho phép tối ưu hóa việc quảng bá hình ảnh sản phẩm và doanh nghiệp

– Hoạt động ổn định, tính bảo mật cao Dễ dàng nâng cấp theo yêu cầu

– Chế độ chăm sóc và hỗ trợ khách hàng 24/7

– Thông thường các chức năng: đăng và quản lý sản phẩm, giỏ hàng, thanh toán trực tuyến, đăng nhập và đăng ký, quản lý đơn hàng… sẽ được tích hợp vào trong website thương mại điện tử Và để bạn dễ hình dung hơn nữa thì bạn chỉ cần hiểu về website thương mại điện tử đó là buôn bán, giao dịch thông qua website, trang web này hoạt động bằng mạng internet

– 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

– Hệ thống quản trị web thương mại điện tử hiện đại, đơn giản, giúp quý doanh nghiệp quản lý web, cập nhật sản phẩm, dịch vụ một cách dễ dàng, nhanh chóng

– 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

2.1.3 So sánh phần mềm Shopify và một số mã nguồn mở khác

2.1.3.1 Đánh giá 2 hệ thống Shopify và Haravan

* 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

– Quản lý đơn hàng, tồn kho, tùy biến các lựa chọn cho sản phẩm chuyên nghiệp, tiện lợi

– Nền tảng chuẩn SEO với sitemap, các thẻ H1, title, meta tags được tối ưu …

12

– Hệ thống Marketing chuyên nghiệp với các tính năng cung cấp mã giảm giá, thẻ quà tặng, tab cửa hàng trên Facebook, hệ thống email marketing, tính năng review sản phẩm

– Công cụ báo cáo, phân tích dữ liệu về traffic, đơn hàng, khách hàng, insights người dùng … toàn diện và hữu ích

– Có ứng dụng quản lý trên smartphone rất tiện lợi, có POS để kết hợp bán hàng Offline

– Và đặc biệt là họ có các đối tác phát triển ứng dụng tới hơn 900 Apps hỗ trợ như: live chat, email, popup, tích hợp vận chuyển, quyết toán, báo cáo và vô vàn các ứng dụng hữu ích khác …

– Ưu điểm của Shopify là còn thỉnh thoảng tặng bạn coupon Google Adwords hoặc Facebook Ads nữa nếu bạn dùng gói dịch vụ của họ

– Nhược điểm là Shopify tính thêm phí % trên một sản phẩm bán thành công, nhưng nếu bạn bán được hàng thì điều đó cũng không là vấn đề

* Haravan thì tính năng cũng y như vậy do Haravan copy lại y nguyên hệ thống và

cách thức vận hành của Shopify, chỉ có 1 vài điểm khác biệt sau đây:

– Về UX và UI tức là giao diện và trải nghiệm của người dùng củ Haravan ở trong phần admin (quản trị) chưa được thông minh và mượt mà như Shopify Và quan trọng hơn là có 1 vài tính năng vẫn thiếu sót chưa hoàn thiện, chưa có 1 hệ thống đồ sộ app

– Chưa có ứng dụng quản lý trên smartphone thuận lợi như Shopify

– Nhưng bù lại 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 1 số tính năng về vận chuyển và Marketing phù hợp hơn với người Việt Nam

13

– Giá của Haravan rẻ hơn nhiều so với Shopify Điều này cũng là dễ hiểu khi so sánh giữa 1 bên là nguyên bản và 1 bên là copy lại

2.1.3.3 Đánh giá 2 hệ thống Shopify và Woocommerce

Woocommerce là một plugin miễn phí được sử dụng để tạo một trang thương mại điện tử cỡ nhỏ tốt nhất hiện nay trong WordPress Nó cũng như bao plugin khác là

bổ sung chức năng vào website nhưng nó sẽ bổ sung gần như toàn diện các chức năng

mà một trang bán hàng đơn giản cần có

Woocommerce sẽ có các chức năng chính như:

– Tạo sản phẩm với định dạng thông thường, sản phẩm có thuộc tính, sản phẩm affiliate và sản phẩm kỹ thuật số (có thể tải về)

– Hỗ trợ một số hình thức thanh toán online như PayPal, Credit Card, CoD, Cash và

sẽ càng nhiều hơn khi cài thêm plugin hỗ trợ cho riêng nó

– Hỗ trợ tự tính thuế sản phẩm hoặc thuế theo đơn hàng

– Hỗ trợ tự tính giá chuyển phát, có rất nhiều loại tính giá chuyển phát và sẽ đa dạng hơn khi cài thêm plugin như có thể tính giá chuyển phát dựa theo cân nặng, kích thước, tỉnh thành,…

– Trang quản lý đơn hàng chuyên nghiệp, lọc đơn hàng thông qua từng trạng thái – Hỗ trợ template hiển thị riêng để có thể tự cấu hình lại template hiển thị phần shop

và sản phẩm, cái này rất có lợi cho lập trình viên

– Có sẵn nhiều theme và extension (plugin mở rộng) để biến thành trang shop chuyên nghiệp

2.2 Lập trình liquid

2.2.1 Giới thiệu lập trình liquid

Liquid là một mã nguồn mở dựa trên ngôn ngữ nền tảng là Ruby Đây là bộ khung để các giao diện của bizweb có thể lấy được nội dung từ cơ sở dữ liệu và đưa ra phía giao diện Liquid kết hợp giữa các thẻ tags, đối tượng objects, và bộ lọc filters để tải các nội dung động

14

Thẻ - Tag: Thẻ dùng để tạo nên các logic lập trình để thông báo cho template

cần phải làm gì

{% if user.name == 'Nguyễn Văn A' %}

Xin chào Nguyễn Văn A

{% endif %}

Đối tượng – Object: Đối tượng chứa các thuộc tính được sử dụng để hiển thị

nội dung trên trang

Định danh dùng để truy cập các thuộc tính của đối tượng trong Liquid, mặc định

đó là tên của các đối tượng, trong đó các dấu cách và kí tự đặc biệt được thay thế bởi dấu nối (-) Mỗi đối tượng trong Liquid như sản phẩm, danh mục sản phẩm, blog, menu, đều có một định danh

Trong định danh, dấu cách (khoảng trắng), ký tự đặc biệt hoặc chữ tiếng Việt có dấu trong tên sẽ được thay thế bởi dấu nối (-)

Định danh cũng sẽ xác định đường dẫn (URL) của một đối tượng Ví dụ, một trang có định danh dẫn tới sản phẩm sẽ có đường dẫn là : https://alibaba-24.myshopify.com/products/habitasse-dictumst-1

Truy cập các thuộc tính của đối tượng thông qua định danh:

Trong rất nhiều trường hợp bạn sẽ cần định danh của đối tượng mà bạn muốn truy cập các thuộc tính cần thiết Bạn có thể truy cập thuộc tính bằng cách gọi ra tên của đối tượng và sử dụng các cú pháp đúng (sử dụng [] hoặc )

Có thể dùng định danh trong thiết lập giao diện với cách gọi phù hợp Ví dụ:

collections[settings.home_featured_collection].products %}

Ví dụ:

{% if product.name == "Giày Converse" %}

Một đôi giày phù hợp cho bạn đi hàng ngày {% endif %}

Các toán tử cũng có thể sử dụng chung với nhau:

{% if product.type == "Giày" and product.vendor ==

"Converse" %}

Đây là một đôi giày đi hàng ngày của Converse {% endif %}

16

2.2.3.2 Toán tử bao hàm (contains)

– “contains” sẽ kiểm tra xem có sự xuất hiện của một chuỗi con trong một chuỗi

lớn hay không

{% if product.name contains 'Converse' %}

Đây là một sản phẩm của Converse {% endif %}

– “contains” cũng có thể kiểm tra sự xuất hiện của một chuỗi trong một mảng

{% if product.tags contains 'giảm giá' %}

Sản phẩm này được gắn nhãn "giảm giá"

{% endif %}

Bạn có thể làm như sau:

{% assign in_sale_collection = false %}

{% for collection in product.collections %}

collection.title == 'Khuyến mại' %}

{% assign in_sale_collection = true %}

17

{% endif %}

2.2.3.3 Logic True - False trong Liquid

– Tất cả mọi giá trị trong Liquid đều là "true", ngoại trừ null và false

{% assign product_items = 'dress' %}

– Trong Liquid, null và false là 2 giá trị duy nhất sai

“null” là kết quả trả về khi đối tượng Liquid không có gì để trả về Ví dụ, nếu danh sách sản phẩm không có ảnh đại diện, “collection.image” sẽ được đặt là null, vì

nó là sai nên bạn có thể làm được điều sau

– Chuỗi – String: Chuỗi được gán bằng cách cho giá trị của biến vào trong ngoặc đơn ('') hoặc ngoặc kép (""):

{% assign my_string = "Xin chào!" %}

– Số - Number: Bao gốm số thực và số nguyên

{% assign foo = true %}

{% assign bar = false %}

{% if fulfillment.tracking_numbers %}

Đơn hàng có mã vận đơn {% endif %}

Một số thẻ như for và cycle có thể đi kèm theo một số tham số, các tham số này

có thể xem chi tiết tại thông tin về thẻ đó

Các thẻ có thể được chia làm 4 loại chính sau:

Thẻ điều khiển luồng - Control Flow Tag Thẻ lặp - Iteration Tag

Thẻ biến số - Variable Tag Thẻ giao diện - Theme Tag

20

CHƯƠNG 3: MÔ TẢ, KHẢO SÁT HIỆN TRẠNG VÀ PHÂN TÍCH

THIẾT KẾ HỆ THỐNG 3.1 Mô tả đối tượng nghiên cứu

3.1.1 Nêu bài toán

Với những tính năng vượt trội được nêu ở phần 2.1.2 cùng với nhu cầu mua sản phẩm thương mại được rất đông đảo người dùng mua với mục đích website đó bán các sản phẩm thương mại điện tử nó giúp cho:

Các doanh nghiệp vừa tiết kiệm được chi phí, mang lại giá trị về thương hiệu cũng như việc trao đổi với khách hàng được nhanh chóng, mở rộng thị trường

Đối với khách hàng, việc mua sản phẩm trên mạng tiết kiệm được thời gian, xem được chi tiết các sản phẩm, so sánh sản phẩm yêu thích với các sản phẩm cùng loại một cách chi tiết nhất Khách hàng có thể lựa chọn mặt hàng để mua Khác với mua trực tiếp tại cửa hàng thì khách hàng tự thao tác thông qua từng bước cụ thể để có thể mua hàng trên mạng, các mặt hàng được sắp xếp theo thứ tự dễ tìm kiếm, thao tác nhanh gọn

Đặc biệt, nhu cầu hiện nay sử dụng Framework 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 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 Shopify luôn tiên phong áp dụ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ác Website bán hàng trọn gói được cung cấp có thể sử dụng để bán hàng được ngay Chính vì nhu cầu sử dụng, cùng với các tính năng vượt trội của

Shopify hơn một số sản phẩm thương mại điện tử khác mà em kết hợp cùng trung tâm

tại nơi thực tập đã phát triển sản phẩm thương mại điện tử trên nền Shopify để tạo ra sản phẩm để đưa đi thương mại

3.1.2 Khảo sát các giao diện thương mại điện tử hiện nay

Website thương mại điện tử có xu hướng thiết kế để kết hợp giữa tính thẩm mỹ

và khả năng sử dụng, đó là sự độc đáo và bắt mắt

Giao diện theo xu hướng flat (phẳng) cho hiện đại, UX tốt, hỗ trợ responsive

Bố cục rõ ràng, các thành phần trên trang chủ cần có: đặc điểm dịch vụ, bảng giá, đối

21

tác, FAQ, đánh giá của khách hàng, thông tin liên hệ rõ ràng ở các vị trí thích hợp Giao diện Shop đẹp, mượt, hover qua hình ảnh sản phẩm mượt mà, trang quản trị Theme Panel chi tiết

Đa số các giao diện thương mại điện tử hiện nay đều bắt mắt, dễ sử dụng, đầy

– Tích hợp thanh toán trực tuyến

– Hệ thống thống kê thương mại

– Chức năng FAQ (Những câu hỏi thường gặp)

– Chức năng tìm kiếm

– Form liên hệ trực tuyến

– Chức năng quảng cáo trực tuyến trên website

– Chức năng đặt hàng

Để xây dựng được sản phẩm thương mại có tính năng vượt trội, em đã khảo sát các giao diện thương mại điện tử đang được bán trên thị trường theme, qua quá trình khảo sát em nhận thấy:

 Qua khảo sát trên thị trường themeforest:

 Điểm mạnh

– Các chức năng chuyển đổi tiền tệ tương đối hoàn chỉnh

– Hiệu ứng di chuyển text ở slide show độ mượt, kiểu chuyển đổi(animation) tương đối đẹp

– Hỗ trợ nhiều Layout để người sử dụng lựa chọn

– Menu Blog hiển thị ảnh của cùng tiêu đề bài viết ở trong Menu con

22

 Điểm yếu

– Hover qua menu chưa có độ mượt

– Nhiều theme không có chức năng quick view

– Chức năng Compare sản phẩm còn thiếu

– Hover qua hình ảnh chưa hiển thị tất cả chức năng cần thiết của sản phẩm: wishlist, compare, quick view, rating

– Menu chưa có icons

– Chức năng wishlist khi người dùng thích sản phẩm nào đó và lưu lại để sau

xem lại chưa có

 Đề xuất giải pháp cho sản phẩm thương mại “mirano” dựa trên Shopify

Từ việc khảo sát trên em sẽ học hỏi các chức năng của các Framework trước đó, cùng tích hợp và bổ sung một số tính năng mới để cho sản phẩm thương mại Shopify trở nên nổi bật và được ưa chuộng hiện nay trên thị trường theme

Các tính năng mạnh mẽ nhất và hợp thời trang bao gồm:

– Product Carousel & Product Ticker mở rộng cho thấy loại sản phẩm trong băng chuyền phản ứng như các sản phẩm đặc trưng, sản phẩm mới, sản phẩm được xem nhiều nhất, các sản phẩm giảm giá;

– Khách hàng cũng có thể liên lạc với bạn thông qua Twitter và Blog;

– Quick View để xem sản phẩm một chi tiết hơn;

Hình 3.1 Sơ đồ Xmind xây dựng theme “mirano” Shopify

Để xây dựng được sản phẩm thương mại với những tính năng vượt trội như đã trình bày ở trên, em đã nêu ra kế hoạch để xây dựng website trong suốt quá trình thực tập tại trung tâm RDCMA Với bố cục giao diện 8 Layout, nhưng trong báo cáo thực tập tốt nghiệp do điều kiện cũng như thời gian có giới hạn em chỉ tập trung vào việc thiết kế đầy đủ tính năng của 1 Layout, các Layout còn lại sẽ được kế thừa một số phần

24

của Layout đầu tiên, vì thế em sẽ hoàn thiện sau đợt báo cáo này để hoàn thiện sản phẩm mang đi thương mại Và tiếp tục phát triển thêm các tính năng mới, tham gia vào viết shortcode để phát triển lên đồ án tốt nghiệp

 Tìm kiếm tên blog

 Xóa sản phẩm trong giỏ hàng

 Đăng nhập, đăng xuất

 Tìm kiếm, xem, bình luận sản phẩm

26

 Mua hàng

 Xem, sửa thông tin cá nhân

 Xem, sửa, xóa thông tin giỏ hàng

 Thanh toán

 Tác nhân người quản trị

 Thêm, sửa, xóa thông tin tài khoản nhân viên

 Tác nhân bộ phận kinh doanh

 Kiểm tra đơn hàng

 Xác nhận thông tin đơn hàng

3.3.2.2 Đặc tả các Use Case

27

 Use Case Đăng ký:

Use Case này mô tả cách thức khách hàng đăng ký trở thành thành viên chính thức của website

 Luồng sự kiện chính:

- Use Case này bắt đầu khi khách hàng chọn chức năng đăng ký

- Hệ thống hiển thị trang đăng ký

- Khách hàng nhập các thông tin tài khoản bao gồm: email, mật khẩu (không phải mật khẩu thực sự của email), họ tên

 Use Case Đăng nhập:

Use Case này mô tả cách thức khách hàng là thành viên đăng nhập vào website

 Luồng sự kiện chính:

- Từ trang web, khách hàng nhập email và mật khẩu và nhấn nút đăng nhập

- Hệ thống kiểm tra việc đăng nhập và hiển thị ra trang khách hàng đã đăng nhập thành công vào hệ thống

 Luồng sự kiện phụ:

- Nếu khách hàng nhập sai email hoặc mật khẩu, hệ thống sẽ hiển thị một thông báo lỗi Khách hàng có thể chọn trở về đầu của dòng sự kiện chính hay hủy bỏ việc đăng nhập, lúc này Use Case kết thúc

 Use Case Tìm kiếm theo tên sản phẩm: