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 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

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ề 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

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 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

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 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

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ý 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

v


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
về các ứng dụng trên nền di động.
-

Trung tâm có chức năng đào tạo, bồi dưỡng và tổ chức thi các chứng chỉ trong

nước và quốc tế về lập trình di động…theo nhu cầu của học viên.
- Trung tâm có chức nă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, gắn kết
với các cộng đồng nghiên cứu và ứng dụng công nghệ di động tại Việt nam và trên thế
giới.
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ở.
1


-

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
2


qua mạng như: giỏ hàng, wishlist, so sánh sản phẩm, quick view, đặt hàng, thanh toán
qua mạng, quản lý khách hàng, quản lý đơn đặt hàng,…
Bên cạnh đó, hiện nay đa số các sản phẩm thương mại điện tử chuyên nghiệp,
được xây dựng dựa trên Bootstrap 3.0, HTML5 và 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 cả các 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…) và màn 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ủ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à

3


sơ cấp kết hợp các phương pháp tổng hợp, thống kê, phân tích, tham khảo các ý kiến
chuyên gia và các thầy cô hướng dẫn, doanh nghiệp hướng dẫn,…

Đọc tài liệu, phân tích và 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ử là sản phẩm, lĩnh vực rộng cả về 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 trong lĩnh vực
này cần đòi hỏi phải có thời gian tìm hiểu để tiếp cần và hiểu nó hơn. Và trong thời
gian rất có hạn, đề tài chỉ giới hạn nghiên cứu trong phạm vi có thể:
-

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.

4


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.
5

Đố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.

6

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
7


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.
8


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.

9


– 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.
10


–

Cung cấp đầy đủ những thông tin chi tiết 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.
– Cung cấp phương thức thanh toán đa dạng, linh hoạt một cách gián tiếp hoặc trực
tiếp bằng chức năng thanh toán trực tuyến với những đối tác uy tín.
– 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
quảng bá hình ảnh sản phẩm và doanh nghiệp.
– Khách truy cập dễ dàng tìm thấy dịch vụ, sản phẩm cần thiết chỉ bằng vài cú click
chuột nhờ hệ thống link điều hướng đến những nội dung chính được bố trí chuyên
nghiệ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.
– 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
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.
– 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ý 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
– Nền tảng chuẩn SEO với sitemap, các thẻ H1, title, meta tags được tối ưu …

11


– 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
hỗ trợ như Shopify.
– Nhưng ngược lại về giao diện ngoài trang bán hàng thì đã được làm theo phong
cách quen thuộc và thân thiện hơn với người Việt.

– Hệ thống POS (Point Of Sales) tức là các công cụ hỗ trợ tại điểm bán như máy hóa
đơn, máy thanh toán cà thẻ … chưa được hoàn thiện như Shopify.
– 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.
12


– 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.

13


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
{{ product.name }}

Bộ lọc – Filter: Bộ lọc được sử dụng để sửa đổi đầu ra của chuỗi, số, các biến,
và các đối tượng.
{{'khuyenmai'|append:'.jpg'}}<!-- Output:khuyenmai.jpg -->

2.2.2 Định danh – Alias
Đị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à : />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ụ:
{%for
product
collections[settings.home_featured_collection].products %}

in

14


{{ product.name }}
{% endfor %}

2.2.3 Toán tử - Operator
2.2.3.1 Các toán tử cơ bản
Trong Liquid có thể sử dụng được tất cả các toán tử logic cũng như so sánh,
chúng có thể được sử dụng trong các thẻ if và unless.
==

Bằng

!=

Không bằng

>

Lớn hơn

<

Nhỏ hơn

>=

Nhỏ hơn hoặc bằng

<=

Nhỏ hơn hoặc bằng

or

Điều kiện A hoặc điều kiện B

and

Điều kiện A và điều kiện B

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 %}

15


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 không thể kiểm tra sự xuất hiện của một đối tượng trong một mảng đối
tượng nếu sử dụng 'contains'. Ví dụ như sau sẽ không thể dùng được:
{% if product.collections contains 'Khuyến mại' %}

Một trong số các danh mục sản phẩm mà sản phẩm này
thuộc về là Danh mục sản phẩm Khuyến mại
{% endif %}

Bạn có thể làm như sau:
{% assign in_sale_collection = false %}
{% for collection in product.collections %}
{%
if
in_sale_collection
collection.title == 'Khuyến mại' %}

==

false

and

{% assign in_sale_collection = true %}
{% endif %}
{% endfor %}
{% if in_sale_collection %}
Một trong số các danh mục sản phẩm mà sản phẩm này
thuộc về là Danh mục sản phẩm Khuyến mại

16


{% 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' %}
{% if product_items %}
Điều này sẽ luôn luôn đúng
{% endif %}

–

Một chuỗi luôn là đúng kể cả khi nó rỗng. rong ví dụ sau, sẽ cho ra kết quả một thẻ

HTML rỗng nếu giá trị settings.homepage_heading là rỗng:
{% if settings.homepage_heading %}

{{ settings.homepage_heading }}

{% endif %}

–

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
{% if collection.image %}

{% endif %}

2.2.3.4 Kiểu – Type
Đối tượng Liquid có thể trả về một trong số 6 kiểu sau: chuỗi (string), số
(number), Boolean, Nil, mảng (array). Các biến Liquid có thể được định nghĩa bằng thẻ
assign hoặc capture.
– 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.
17


{% assign my_num = 25 %}

–

Booleans
Boolean có thể gán là đúng (TRUE) hoặc sai (FALSE). Không cần sự trích dẫn

khi tuyên bố boolean.
{% assign foo = true %}
{% assign bar = false %}

–

Nil

Nil là một giá trị rỗng được trả về khi thực thi một đoạn mã Liquid mà không

thể cho ra kết quả. Nó không phải là một chuỗi với các kí tự “nil”.

Nil được xem như là kết quả sai của các khối điều kiện {% if %} và các tags
Liquid khác khi kiểm tra tính chính xác của một tuyên bố. Trong ví dụ sau đây nếu như
không có một mã vận đơn(tracking number) được nhập vào khi giao hàng (fulfillment),
câu lệnh `if` sẽ không thể trả về văn bản nằm trong nó.
{% if fulfillment.tracking_numbers %}
Đơn hàng có mã vận đơn
{% endif %}

–

Mảng - Array

Chứa một danh sách các biến của mọi kiểu dữ liệu. Truy cập tất cả các đối
tượng trong mảng.
Để truy cập các tối tượng trong một mảng, bạn có thể liên kết các đối tượng
bằng cách sử dụng thẻ for.
Ví dụ:

{% for tag in product.tags %}
{{ tag }}

18


{% endfor %}

2.2.4 Thẻ
Thẻ Liquid là các logic lập trình dùng để thông báo cho hệ thống cần làm gì để
đưa ra ngoài giao diện. Các thẻ được bao bởi: {% %}.
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

19


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
20