Storefront là gì

Related Articles

Vue Storefront thực ra là một phức tạp nhiều giải pháp mang lại nhiều năng lực lập trình. Do đó, để học được hết những giải pháp này thường mất khá nhiều thời hạn. Trong khuôn khổ của bài viết này, chúng tôi sẽ chỉ dừng lại ở việc lý giải một cách ngắn gọn toàn bộ những tính năng quan trọng nhất mà chỉ với những vài tính năng này là cũng đủ bạn đã hoàn toàn có thể mở màn sử dụng Vue Storefront. Phần tiếp theo của bài viết sẽ giúp người đọc update 1 số ít thông tin về hướng tăng trưởng của giải pháp này trong thời hạn sắp tới .

Bạn đang xem : Storefront là gì

Vue Storefront là gì?

*Vue Storefront là một giải pháp front-end độc lập được viết dựa trên Vue. js, dùng để lập trình những dự án Bất Động Sản PWA thương mại điện tử. Do chạy độc lập không dựa trên một nền tảng back-end nào nên Vue Storefont hoàn toàn có thể được sử dụng để tạo nên giao diện PWA cho bất kể một dự án Bất Động Sản Magento, Spotify, BigCommerce, WooCommerce, vv … bất kể .

Đây là một giải pháp mã nguồn mở được phát triển bởi một cộng đồng lớn và ngày càng thu hút được sự đóng góp của đông đảo các lập trình.

Các tính năng nổi bật của Vue Storefront

Không nhờ vào nền tảng ( platform-agnostic ) Tập trung vào hiệu quảƯu tiên hiển thị trên thiết bị di động ( mobile first ) Công nghệ tân tiếnKhông bị hạn chế về theme và tùy biếnGiải pháp Mã nguồn mở và đã được cấp giấy phép MITTrải nghiệm lập trình tốtServer-Side Rendering ấn tượng ( tương hỗ can đảm và mạnh mẽ cho SEO ) Có thể lập trình ngay cả khi không liên kết Internet ( offline mode )

Đây là link của Vue Storefront landing page : https://www.vuestorefront.io/ và Vue Storefront GitHub repository : https://github.com/DivanteLtd/vue-storefront

Vue Storefront kết nối với một nền tảng back-end như thế nào?

Vue Storefront hoạt động giải trí độc lập với những nền tảng được là nhờ 2 API ( Giao diện lập trình ứng dụng ) : vue-storefront-api và API connectors riêng dành cho nền tảng back-end thương mại điện tử. Dạng thức tài liệu trong vue-storefront-api không hề bị biến hóa trên bất kể nền tảng nào, điều đó có nghĩa là dù bạn có sử dụng bất kể nền tảng back-end thương mại điện tử nào thì phần giao diện sẽ không hề bị biến hóa bất kể những kiểm soát và điều chỉnh ở phần back-end .

Điều này cực kỳ hữu dụng cho việc chuyển giao ( migration ) vì bạn hoàn toàn có thể chuyển giao phần back-end từ nền tảng này sang nền tảng khác hoặc từ phiên bản này lên phiên bản khác ( ví dụ như từ Magento 1 lên Magento 2 ) mà không hề tác động ảnh hưởng đến phần giao diện của website .

*

API kết nối làm việc qua hai giai đoạn:

Data Pump kéo những tài liệu tĩnh ( static data ) như hạng mục mẫu sản phẩm, đơn hàng … từ nền tảng back-end TMĐT tới Vue Storefront ElasticSearch và biến hóa định dạng tài liệu sang một định dạng được lao lý bởi vue-storefront-api, sau khi kéo tài liệu về, hạng mục loại sản phẩm sẽ được hiển thị trên Vue Storefront. Sau đó chuyển tài liệu vào ElasticSearch, tài liệu sẽ được đồng nhất với những biến hóa của những nền tảng back-end và update nội dung của nó. Worker pool, được cho phép đồng nhất hóa những tài liệu động ( user session hoặc pháp luật về giỏ hàng, vv ), những tài liệu này không được lưu ở database mà cần được gọi trực tiếp bởi vue-storefront-api từ nền tảng back-end. Trong quy trình quản trị đồng thời với hai quy trình tích hợp này, Vue Storefront hoàn toàn có thể thao tác với nền tảng back-end của website .

Một số những nền tảng back-end phổ cập đã được tích hợp sẵn với Vue Storefront ( Magento 2, Magento 1, CoreShop, BigCommerce, WooCommerce ) nhưng lập trình viên cũng hoàn toàn có thể tự tích hợp với một nền tảng back-end khác một cách thuận tiện nhờ integration boilerplate .

Phần màu xanh blu trên biểu đồ là để lưu cache và sẽ được lý giải đơn cử hơn ở phần sau của bài này .

Vue Storefront hoạt động thế nào?

Có 3 khái niệm cần ghi nhớ khi thao tác với Vue Storefront :

Vue Storefront Core ( core thư mục ) đây là chất keo kết nối tổng thể những tính năng giúp Vue Storefront hoạt động giải trí. Nó chứa tổng thể những nguồn vào, giao thức SSR, tiến trình, in-apps thư viện và những hàm trợ giúp. Ta không nên động trực tiếp vào thư mục này khi lập trình những implementations riêng để giữ cho phần core thư mục này luôn được update tiếp tục. Vue Storefront Modules ( core / modules and src / modules ) là những tính năng TMĐT. Mỗi một module nén rất nhiều những tính năng khác nhau ví dụ như giỏ hàng, wishlist, catalog, một vài tích hợp từ bên thứ ba. Ta hoàn toàn có thể thêm, bớt, đổi khác những module nếu muốn và chỉ tích hợp quầy bán hàng trên Vue Storefront với những tính năng thiết yếu. Những tính năng này cũng hoàn toàn có thể được sử dụng cho những extension của bên thứ ba. Vue Storefront Themes ( src / themes ) thực ra là việc thiết lập quầy bán hàng. Trên những theme này, ta hoàn toàn có thể sử dụng và tăng trưởng toàn bộ những logic từ những module / core, thêm HTML markup và những style tags. Ngoài ra, Vue Storefront còn cung ứng sẵn những theme default tùy chỉnh được .

Tóm lại, quầy bán hàng về cơ bản là một theme Vue Storefront sử dụng những tính năng được phân phối bởi những module. Và vai trò của Vue Storefront ở đây như thể một chất keo gắn mọi thứ lại với nhau .

Nắm được ba khái niệm này bạn trọn vẹn tự tin để lập trình trên Vue Storefront và đã hoàn toàn có thể tự tạo ra những quầy bán hàng riêng .

Tham khảo thêm ở link sau : https://docs.vuestorefront.io/guide/basics/project-structure.html#structure-details

Cách cài đặt Vue Storefront

Nếu bạn đã muốn thử lập trình với Vue Storefront một chút ít thì có 3 cách setup sau :

*Đây là toàn bộ những gì bạn cần để cài Vue Storefront với bản demo back-end của Vue Storefront .

Cài đặt frontend liên kết với nền tảng back-end demo ( Tốt nhất là thử với Vue Storefront ) Cài đặt frontend với vue-storefront-api riêng và database kéo về từ bản demoCài đặt frontend với vue-storefront-api đã được liên kết với nền tảng backend TMĐT riêng

Với cả ba cách đặt trên, chỉ cần gõ “ yarn installer ” trên thư mục gốc của dự án Bất Động Sản và vấn đáp lần lượt hết những câu hỏi trong bảng console. Sau khi thiết lập xong, gõ “ yarn dev ” để dự án Bất Động Sản chạy ( setup sẵn vào cổng 3000 ). Dù bạn chọn cách setup nào trong 3 những trên, bạn đều hoàn toàn có thể biến hóa setup trên config file sau này .

Config file trong Vue Storefront

Tất cả những thông số kỹ thuật trong Vue Storefront ( như theme động, địa chỉ Backend API, đa quầy bán hàng, vân vân ) đều được thực thi trải qua những tập tin thông số kỹ thuật được đặt trong thư mục có tên là “ config ”. Còn file “ default.json ” chứa toàn bộ những setup default .

Trường hợp tự thiết lập những thông số kỹ thuật, tất cả chúng ta sẽ cần tạo 1 tệp local.json và thêm những trường thông tin từ tệp default.json mà bạn muốn. Hai tệp tin này sẽ được nhập vào trong cùng 1 tệp local.json trong quy trình lập trình. Nếu bạn sử dụng installer để thiết lập Vue Storefront từ xa, thì nó cũng sẽ tạo ra một config file tương thích .

Cách tạo theme trên Vue Storefront

*Trong hầu hết những trường hợp, khi tạo themes trong Vue Storefront, toàn bộ những gì bạn cần chăm sóc là tạo ra file HTML và CSS markup. Tất cả những nhu yếu về business logic đều được bộc lộ ở phần core qua những core module và thuận tiện được truyền vào bất kể theme components nào .

Xem thêm : Top 33 Khách Sạn 2 Sao Đà Lạt Gần Chợ Tốt Nhất “ Không Lo Về Giá ”

*

Cơ chế thể hiện core business logic trên theme rất đơn giản. Chúng ta sử dụng Vue.js mixins để giữ các business logic có khả năng cập nhật được trong phần core. Như vậy giả sử rằng chúng ta có một chức năng Microcart core với business logic như trên (bên trái), chúng ta có thể dễ dàng thể hiện nó qua các các chức năng trên theme (bên phải) với chỉ bằng cách import và thêm vào như một object mixin mixins:. Đây là tất cả những gì chúng ta cần làm để đảm bảo core business logic được thể hiện trên theme. Với cách làm này, bạn có thể cập nhật tất cả các core component mà không làm gián đoạn hoạt động của gian hàng.

Còn cách dễ nhất để tự tạo theme là sao chép lại một default theme, đổi tên và lưu dưới dạng tệp package.json, đổi active theme trong config / local.json và sử dụng yarn để link với Lerna ( sử dụng cho monorepos ) .

Offline mode và cache

Một ưu điểm điển hình nổi bật của Vue Storefront là nó vẫn liên tục hoạt động giải trí cả khi người dùng offline nhờ những cache trên trình duyệt .

*Với những cache của catalog và tài liệu quầy bán hàng ( store data ), tất cả chúng ta sử dụng IndexedDB và Local Storage. Các mẫu sản phẩm cũng hoàn toàn có thể truy xuất nhanh ( prefetch ) từ những category, như vậy mỗi khi loại sản phẩm được nhập vào một category, tổng thể những mẫu sản phẩm của category đấy cũng được chuyển qua trạng thái offline. Cơ chế tàng trữ offline này được lưu ở core / lin. / storage .

Một số cache data cũng được sử dụng ngay cả khi người dùng trực tuyến vì như vậy nội dung luôn được bộc lộ ra trước mắt người dùng một cách giống hệt. Chính vì vậy mà vận tốc trong Vue Storefront thường rất nhanh .

Tóm lại, những hướng dẫn trên đây là tổng thể những gì bạn cần để làm quen với Vue Storefront ! Sau khi học qua những bước cơ bản trên mà bạn thấy hứng thú với công nghệ tiên tiến này thì hãy dữ thế chủ động đọc thêm những tài liệu dưới đây và tìm hiểu và khám phá nhiều hơn về Vue Storefront .

Tương lai Vue Storefront sẽ thế nào?

Các nhà tăng trưởng giải pháp này có một cái nhìn khá rõ ràng về những tiềm năng tăng trưởng cho Vue Storefront, về trung hạn cơ bản họ xác lập 4 tiềm năng như sau :

Mục tiêu 1 : Giữ vững lợi thế đứng vị trí số 1 của bộ đôi Magento PWA trên thị thường, tương hỗ toàn bộ những thiết lập ( implementations ), bảo vệ tính không thay đổi và tương hỗ năng lực thích hợp ngược ( backwards compatibility ) ở mức độ cao nhất. Mục tiêu 2 : Cải tiến framework lập trình, cải tổ chất lượng code và cải tổ bao trùm kiểm thử ( test coverage ) Mục tiêu 3 : Mở rộng số lượng nền tảng back-end tích hợp sẵnMục tiêu 4 : Thêm nhiều tính năng business

Từ những tiềm năng này, trong năm 2020, giải pháp front-end được tăng trưởng bởi một hội đồng gồm 120 contribtors và 1200 lập trình viên này dự tính sẽ nâng cấp cải tiến những tính năng sau :

Về implementations

Cải thiện data indexer cho cả Magento1 và Magento2 – thay thế sửa chữa 1 số ít điểm của mage2vuestorefront bằng data indexer riêng ( hiện đã có sẵn để test trên Github ). Các data indexer mới sẽ hoạt động giải trí trên chính sách thời hạn thực ( real-time ) nhờ sự tương hỗ từ kiến ​ ​ trúc indexer của native MagentoMagento1 connector sẽ được xuất bản theo giấy phép MIT kèm tài liệu hướng dẫn vừa đủ hơnMagento 2.3, tương hỗ MSIHỗ trợ không thiếu cho cấu trúc URL tùy chỉnhHỗ trợ liên kết API của những nhu yếu thanh toánHỗ trợ đa bộ lọcNâng cấp ElasticSearch 6. xCải tiến External CheckoutTích hợp Prismic, Nosto, Klevu, KlarnaỔn định + sửa lỗiCải tiến Unit / Integration test coverage – tiềm năng bảo vệ 100 % test coverage so với những business logic .

Về cải thiện hiệu suất

Vue Storefront hiện đang rất tập trung chuyên sâu vào những điểm “ yếu ” sau đây đồng thời vẫn bảo vệ năng lực thích hợp ngược ( backwards compatibility ) :

Theme 2.0 sẽ được phong cách thiết kế dựa trên Design System, những thành phần UI tinh gọn tối ưu hiệu suấtBộ công cụ CLI + Bản tóm tắt dự án Bất Động Sản – một loại “ create-react-app ”, hoặc “ vue-cli ” – tích hợp CLI + Theme 2.0 là những khối thiết kế xây dựng chính của Vue Storefront 2.0 Tái cấu trúc lớp tài liệu Vuex ( Vuex data layer refactoring ) – rõ ràng hơn, dễ hiểu hơn so với người mới sử – làm RFC ngắn gọn hơn và hoàn toàn có thể thích hợp ngược ( tức là không biến hóa định dạng tài liệu, không biến hóa hành vi công khai minh bạch ) Với việc refactor Vuex, tách những lệnh gọi backend API khỏi những hoạt động giải trí của Vuex để bên thứ ba hoàn toàn có thể tích hợp thuận tiện hơn ( và để tương hỗ những mutation của Magento 2.3 graphQL trước khi chúng được xuất bản ) Refactor những phương pháp thanh toánRefactor module CheckoutRút ngắn thời hạn lập tr bằng cách sửa chữa thay thế tiến sỹ compiler bằng Babel 7R efactor Service Workers để sử dụng WorkBox .

Về tích hợp

Tích hợp EpiServer ( bằng cách sử dụng Making Waves ) Tích hợp Spree CommerceTích hợp WooCommerce, BigCommerceHoàn thiện module vue-storefront-Simple-api để làm cho việc tích hợp của toàn bộ những bên thứ 3 nói chung trở nên thuận tiện hơn .

Về tính năng

Nhìn chung, Vue Storefront Core muốn trở thành thành giải pháp tốt nhất hoàn toàn có thể cho những ứng dụng PWA, do đó những tính năng cơ bản của giải pháp này khá tốt, tương hỗ hầu hết những tính năng B2C, có năng lực lan rộng ra tiêu biểu vượt trội dựa trên những module, kèm những theme có sẵn và nhiều tính năng mới nữa đang được bổ trợ .

Tóm lại, dù là một giải pháp còn non trẻ, mới ra đời trên thị trường từ gần 2.5 năm tuy nhiên Vue Storefront lúc bấy giờ là project thương mại điện tử ( TMĐT ) đứng thứ 6 trong những project TMĐT phổ cập trên Github và ngày càng được nâng cấp cải tiến tốt hơn .

Vue Storefront thường được những lập trình viên và những công ty lập trình lựa chọn nhờ những ưu điểm điển hình nổi bật như : công nghệ tiên tiến được tăng trưởng dựa trên Vue. js, hoạt động giải trí độc lập với những nền tảng, tích hợp sẵn nhiều tính năng giúp rút ngắn thời hạn lập trình, tích hợp sẵn nền tảng TMĐT Magento can đảm và mạnh mẽ .

Mục tiêu của nhóm tăng trưởng không dừng lại ở đó mà khá tham vọng, họ mong ước biến Vue Storefront trở thành giải pháp quy chuẩn cho những giải pháp PWA dành cho thị trường TMĐT ( tiềm năng lâu dài hơn ). Đây là cam kết của nhóm những nhà tăng trưởng so với những người đã tin yêu lựa chọn Vue Storefront cho những dự án Bất Động Sản thương mại, so với những đối tác chiến lược và so với cả những lập trình viên đang làm góp phần tiếp tục trên core của Vue Storefront .

Chúng ta hãy cùng chờ xem giải pháp này sẽ có những nâng cấp cải tiến gì, và có thực sự đạt được kỳ vọng trở thành giải pháp số 1 cho những dự án Bất Động Sản PWA thương mại điện tử trong thời hạn tới không nhé .

Xem thêm: Cms WordPress Là Gì ? Danh Sách Những Cms Phổ Biến Nhất 2019

Còn bạn, bạn đã thử sử dụng Vue Storefront chưa ? Nếu chưa, hãy thử với những hướng dẫn cơ bản ở phần đầu bài viết. Nếu đã sử dụng và thao tác với Vue Storefront rồi, hãy cho Sutunam biết bạn thấy thế nào với giải pháp front-end này ở phần phản hồi dưới đây .

Thêm nữa, là một trong những công ty tiên phong ứng dụng Vue Storefront vào những dự án Bất Động Sản PWA trên thị trường, chúng tôi mong ước được liên kết nhiều hơn với những nhà lập trình đã từng làm hoặc chăm sóc đến giải pháp này, hãy cùng tìm hiểu và khám phá và gia nhập hội đồng Vue Storefront Viet Nam để trao đổi và cùng học hỏi thêm nhé !

Chuyên mục : Hỏi đáp

More on this topic

Comments

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Advertismentspot_img

Popular stories