Hướng dẫn biến cửa hàng Shopify trở thành ứng dụng di động

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

• Liên kết cửa hàng Shopify của bạn với mẫu ứng dụng đã tải xuống (bằng cách thay đổi hai Khóa API)
• Chọn phương thức thanh toán của bạn (Tùy chọn)
• Tạo và liên kết tài khoản Stripe của riêng bạn (được sử dụng cho thanh toán di động, bao gồm Thẻ tín dụng, Apple Pay và Android Pay), nếu bạn chọn phương thức thanh toán gốc
• Chạy ứng dụng trên Android
• Chạy ứng dụng trên iOS

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.

Liên kết cửa hàng Shopify

Đâ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:

• Khách hàng được đăng ký trực tiếp với trang web Shopify của bạn. Điều này có nghĩa là, bất kỳ khách hàng trang web nào cũng có thể dễ dàng đăng nhập vào ứng dụng dành cho thiết bị di động bằng cùng một thông tin đăng nhập tài khoản
• Tất cả các sản phẩm và danh mục được hiển thị trong ứng dụng dành cho thiết bị di động được tự động đồng bộ hóa với trang web của bạn
• Tất cả các đơn hàng được đặt qua ứng dụng đều hiển thị trong bảng điều khiển Shopify của bạn
• Tất cả các đơn đặt hàng được đặt qua trang web sẽ hiển thị cho khách hàng nếu họ đăng nhập vào trang web và Viceversa.

Tạo mã thông báo truy cập cho tiền mặt của cửa hàng Shopify

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:

1. Đăng nhập vào bảng điều khiển quản trị Shopify của cửa hàng bạn muốn kết nối.
2. Tạo một Ứng dụng trong Shopify để phục vụ như một phần mềm trung gian bằng cách điền vào một biểu mẫu ngắn đơn giản.
3. Sao chép mã thông báo truy cập mặt tiền cửa hàng đã tạo sau khi tạo Ứng dụng thành công.

Để 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:

• Chi tiết về ứng dụng
• API quản trị
• API mặt tiền cửa hàng

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.

Cập nhật mã cửa hàng và URL của cửa hàng Shopify trong mã React Native

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

} ,

Chọn phương thức thanh toán của bạn

Ứng dụng Shopify của chúng tôi hỗ trợ hai loại thanh toán:

Shopify Webview

• Trong trường hợp này, khi khách hàng muốn đặt hàng, ứng dụng sẽ mở trang web thanh toán Shopify của bạn ở chế độ xem web. Sau đó, họ có thể thực hiện thanh toán và đặt hàng giống như họ làm trên trang web của bạn. Khoản thanh toán được chuyển trực tiếp vào cửa hàng Shopify trên web của bạn, giống như thanh toán đối với thanh toán trên trang web, là một luồng xem web.
• Các đơn đặt hàng bằng một cú nhấp chuột với Apple Pay và Android Pay không khả dụng cho phương thức này, vì việc thanh toán được thực hiện qua chế độ xem web chứ không phải tự nhiên.

Thanh toán sọc

• Điều này sử dụng Stripe để xử lý các khoản thanh toán và nó được thực hiện nguyên bản, trực tiếp trong ứng dụng React Native (không có chế độ xem web)
• Điều này hỗ trợ các đơn đặt hàng bằng một cú nhấp chuột với Apple Pay và Android Pay, vì mọi thứ được thực hiện hoàn toàn tự nhiên.
• Tiền sẽ được chuyển vào tài khoản Stripe của bạn và các đơn đặt hàng cũng sẽ hiển thị trong bảng điều khiển Shopify của bạn.

Để 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:

• true – điều này cho phép Thanh toán Sọc gốc. Để điều này hoạt động, trước tiên bạn cũng cần thiết lập Stripe, bằng cách làm theo tất cả các bước về cách thiết lập Stripe .
• false – điều này cho phép Shopify Webview, trì hoãn việc xử lý thanh toán cho trang web của bạn

Chạy trên Android

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.

Chạy trên iOS

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 .