Việc biến bất kỳ cửa hàng Shopify nào thành một ứng dụng gốc dành cho thiết bị di động cực kỳ dễ dàng với mẫu React Native Shopify đẹp mắt. Trong bài viết này, chúng tôi sẽ mô tả chi tiết từng bước bắt buộc để có được mẫu ứng dụng được tích hợp với mặt tiền cửa hàng trực tuyến Shopify của riêng bạn.
Ở cấp độ cao hơn, đây là tổng quan về những gì mà các bạn cần phải làm để ứng dụng của bạn sẵn sàng xuất bản lên App Store (IOS) và Google Play Store (Android):
Các bước trên không yêu cầu kinh nghiệm viết code. Mọi thứ đều được giải thích đầy đủ và chi tiết nhằm giúp cho những người không phải là lâọ trình viên cũng có thể dễ dàng chuyển đổi cửa hàng Shopify thành ứng dụng di động.
Mục lục
Đây là bước quan trọng nhất của quá trình thiết lập ứng dụng dành cho thiết bị di động để chuyển đổi cửa hàng Shopify thành một ứng dụng di động thương mại điện tử gốc. Trong bước này, bạn cần liên kết trang web Shopify của mình với mẫu ứng dụng React Native để các danh mục và sản phẩm của bạn được hiển thị trong ứng dụng. Để đạt được điều này, bạn cần phải làm một vài điều khác nhau. Tích hợp Shopify chứa các tính năng sau:
Bạn sẽ cần mã thông báo truy cập để truy cập cửa hàng Shopify từ ứng dụng di động mới của mình. Việc tạo mã thông báo truy cập cho mặt tiền cửa hàng Shopify của bạn có thể được đơn giản hóa thành ba bước đơn giản:
Để có thể đạt được các bước đơn giản này, các bạn hãy thực hiện các bước chi tiết sau đây:
2.1.1 Từ bảng điều khiển quản trị Shopify của bạn, ở danh sách menu bên trái, chuyển đến Ứng dụng .
2.1.2 Nhấp vào Quản lý ứng dụng riêng tư ở gần cuối trang.
2.1.3 Nhấp vào Tạo ứng dụng riêng tư mới
2.1.4 Trong phần Chi tiết ứng dụng, nhập tên cho ứng dụng riêng tư và địa chỉ email liên hệ. (Shopify sử dụng địa chỉ email để liên hệ với nhà phát triển nếu có vấn đề với ứng dụng riêng tư, chẳng hạn như khi một thay đổi API có thể phá vỡ nó).
2.1.5 Trong phần API quản trị , hãy chọn các khu vực trong cửa hàng của bạn mà bạn muốn ứng dụng có thể truy cập.
2.1.6 Đảm bảo bạn chọn ứng dụng ** CHO PHÉP ** để truy cập vào dữ liệu Mặt tiền cho cửa hàng của bạn.
2.1.7 Trong phần quyền của API Storefront , hãy chọn loại dữ liệu bạn muốn hiển thị cho ứng dụng.
2.1.8 Bây giờ hãy nhấp vào Lưu và mã thông báo truy cập mặt tiền cửa hàng của bạn sẽ được tạo. Sau khi mã thông báo truy cập của bạn đã được tạo thành công, bạn sẽ được chuyển đến một trang có các phần khác nhau:
Cuộn xuống dưới cùng để xem và sao chép mã thông báo truy cập Storefront mới được tạo . Sao chép mã thông báo này vào khay nhớ tạm của bạn.
Hiện tại, bạn đã có mã thông báo mặt tiền cửa hàng, chúng tôi cần thêm mã này vào ứng dụng. Chỉ cần mở tệp src / ShopertinoConfig.js và ghi đè cấu hình Shopify bằng dữ liệu cửa hàng của riêng bạn:
shopifyConfig: {
miền: ‘your_store.myshopify.com’ ,
storefrontAccessToken: ‘accessTokencb72e4222c9b90332662fa39e93f’ ,
apiKey: ‘apiKey123121’ ,
mật khẩu: ‘your_password’ ,
} ,
Ứng dụng Shopify của chúng tôi hỗ trợ hai loại thanh toán:
Shopify Webview
Thanh toán sọc
Để chọn đúng phương pháp thanh toán mà bạn quan tâm, chỉ cần mở src / ShopertinoConfig.js và đặt giá trị của cờ isStripeCheckoutEnabled thành:
Tất cả những gì bạn cần làm để chạy các mẫu ứng dụng của chúng tôi trên Android, chỉ đơn giản là mở trình giả lập Android (hoặc cắm thiết bị) và chạy
npm install && react-native run-android
Nếu đây là lần đầu tiên bạn chạy một ứng dụng, hãy xem hướng dẫn chi tiết của chúng tôi về cách chạy ứng dụng React Native trên Android , bao gồm cả thiết lập môi trường dành cho nhà phát triển.
Cần phải đảm bảo rằng bạn đã cài đặt các gói npm trước (“ npm install “). Hầu hết các mẫu React Native của chúng tôi sử dụng các gói npm nâng cao, chẳng hạn như SDK Firebase hoặc Facebook, các gói này cần được liên kết – nghĩa là ứng dụng bị đẩy ra, có nghĩa là nó không hoạt động với Expo và cũng không thể chạy đơn giản bằng cách thực thi “ react-native run-ios “.
Để chạy ứng dụng trên iOS, bạn cần có máy tính MacOS. Thật không may, đối với người dùng Windows, bạn sẽ phải có một máy tính Apple hoặc cài đặt một máy ảo trên máy tính xách tay của mình.
Để tạo ứng dụng thương mại điện tử cho iOS, từ mẫu ứng dụng cao cấp của chúng tôi, trước tiên bạn cần cài đặt Cocoapods và Xcode .
Tiếp theo đó, mở Terminal của bạn trong thư mục của dự án và chuyển sang thư mục con ios để cài đặt các pod bằng cách thực hiện:
cd ios && pod install
Điều này sẽ cài đặt tất cả các phụ thuộc mà mẫu ứng dụng dành cho thiết bị di động iOS của chúng tôi dựa vào. Đầu ra của bạn sẽ giống như sau:
Trong thư mục ios , có một tệp tên là Shopertino.xcworkspace . Mở nó trong Xcode, sau đó chạy ứng dụng, trước tiên bằng cách chọn thiết bị hoặc trình mô phỏng bạn muốn
Thao tác này sẽ tự động mở ra một phiên bản lớn hơn. Nếu nó không khởi động, chỉ cần chạy “npm start” trong Terminal để mở nó và chỉ sau đó, chạy lại ứng dụng trong Xcode. Nếu bạn đang gặp phải bất kỳ sự cố nào khác, bạn có thể gỡ lỗi chúng bằng cách sử dụng tài liệu về React Native Errors của chúng tôi .
Những tiến bộ nhanh chóng trong công nghệ đã tác động đáng kể đến xu… Đọc thêm
Trong thế giới thương mại điện tử không ngừng phát triển, việc đi trước đón… Đọc thêm
Công ty công nghệ BEIT là một trong những doanh nghiệp tiên phong trong lĩnh… Đọc thêm
Đối với người dùng không chuyên, việc tạo hình ảnh bắt mắt từng là một… Đọc thêm
Cách cải thiện SEO cho trang web của bạn, tăng thứ hạng tìm kiếm và… Đọc thêm
1. Khám phá các tùy chọn Elementor Chúng ta sẽ sớm xem xét việc xây… Đọc thêm
This website uses cookies.