Nếu các bạn theo dõi FireApps đủ lâu, chắc hẳn sẽ biết nhà chúng tớ hiện đang phát triển những ứng dụng trên nền tảng Shopify, phục vụ cho hơn 100,000 khách hàng kinh doanh dropshipping trên toàn thế giới.

Vậy bạn có hứng thú muốn tìm hiểu về cách nhà Lửa đang làm và muốn thử sức xây dựng một ứng dụng Shopify đơn giản? Nếu sẵn có ý tưởng thì ngại gì không thử phải không nào! Chuyên gia lập trình gạo cội nhà FireApps – Anh Bùi Công Đăng – FireApps Technical Manager sẵn sàng chia sẻ cùng bạn những kinh nghiệm thực tiễn, giúp bạn tự mình tạo ra 1 ứng dụng Shopify hoàn chỉnh chỉ với những bước đơn giản sau:

BẮT ĐẦU

1. Các phần mềm, tool hỗ trợ

  • IDE: Các IDE hỗ trợ tốt cho việc lập trình như PHPStorm, Visual Studio Code.
  • GIT: Sử dụng command line hoặc tool SmartGit.
  • DOCKER: Sử dụng Laradock để tạo môi trường code cho dự án.
  • NGROK: Là một tunnels để tạo public Url HTTPS đến localhost của bạn.

2. Laravel Framework

  • Tất cả dự án của công ty sẽ sử dụng Laravel Framework để xây dựng API, sử dụng swagger để làm api documents.

3. VueJS

  • Frontend chúng ta sẽ sử dụng single page để xây dựng ứng dụng, sử dụng vue-cli để init dự án.

CĂN BẢN

1. Setup môi trường code

  • Bạn sử dụng docker để setup môi trường code cho dự án của bạn (nếu bạn chưa biết về docker có thể xem thêm về docker ở trang chủ của docker hoặc bài giới thiệu ở đây)
  • Bạn download docker về tại đây  và install vào máy
  • Sử dụng laradock để tạo các image và container cho dự án của bạn, bạn xem cách cài đặt và run dự án tại đây 
  • Sử dụng Laravel để xây dựng API backend.
  • Bạn có thể xem project mẫu gồm code laravel và laradock,  và hướng dẫn cách setup môi trường tại GITHUB

2. Setup ứng dụng của bạn

Giới thiệu

  • Ứng dụng shopify sẽ cần connect đến API của Shopify để lấy thông tin của store như Product, Orders,… trước khi get được các thông tin đó Shopify cần xác thực ứng dụng của bạn. 
  • Khi xác thực, Shopify sẽ chuyển hướng đến ứng dụng của bạn. Ứng dụng của bạn cần phải có một đường link HTTPS để làm điều này. Bởi vì địa chỉ http://127.0.0.1 của bạn là địa chỉ local, bạn có thể sử dụng NGROK để tạo một tunner từ internet  đến địa chỉ http://127.0.0.1 của bạn.

Cài đặt NGROK

  • Để cài đặt Ngrok trước hết bạn cần đăng ký một tài khoản tại đây và download phần mềm ngrok về tại đây
  • Sau khi download ngrok về chúng ta cần phải auth tài khoản ngrok để xác thực user, nếu không chúng ta sẽ bị limit request khi sử dụng ngrok

./ngrok authtoken [your token]

  • Chạy ngrok bằng lệnh sau:

./ngrok http -bind-tls=true 80

  • Sau khi chạy lệnh xong bạn sẽ có màn hình giống thế này

P/S: 80 là port của local của bạn đang chạy. Sau khi chạy ngrok bạn được một link https như sau: https://13086c9a.ngrok.io

Get Shopify API key Và Shopify API secret key

  • API Key và API secret key dùng để xác thực ứng dụng Shopify. Để lấy API key và API secret key bạn cần tạo một app trên Shopify Partner, nếu bạn chưa có tài khoản Shopify Partner vui lòng đăng ký tài khoản tại đây . Để lấy được API key và secret key làm theo các bước sau
  • Từ Shopify Partner chọn menu Apps và click vào Create App
  • App name: Gõ tên app của bạn vào, bạn có thể đặt tên bất kỳ, tên này sẽ được hiển thị ở list app store của Shop. Ví dụ ở đây tôi chọn tên app là Example Fireapps.
  • App url: Copy and Paste HTTPS URL từ ngrok Terminal.
  • Whitelisted redirection URL: Copy và paste HTTPS URL từ ngrok terminal và thêm đường path /auth vào phía sau.
  • Nhấn vào button create app, sau khi create app thành công bạn sẽ có API Key và API secret key.

Thêm API Key và API secret key vào app của bạn

  • Bạn cần một nơi an toàn để lưu API key và secret key của bạn, ở LARAVEL thì bạn sẽ lưu ở file .env của project.
  • Thêm vào file .env với 2 cặp khóa như sau

SPF_API_KEY=…

SPF_SECRET_KEY=…

Auth Apps

  • Shopify cần xác thực ứng dụng trước khi cấp quyền cho app truy cập vào api của Shopify. Để xác thực ứng dụng các bạn cần làm theo các bước sau. 
  • Chuyển hướng đến đường dẫn sau

https://{shop}.myshopify.com/admin/oauth/authorize?client_id={api_key}&scope={scopes}&redirect_uri={redirect_uri}

  • Shop: tên của shop myshopify
  • Client_id: Chính là API KEY khi tạo app ở partner
  • Scope: Quyền truy cập vào ứng dụng, ví dụ scope=write_orders,read_customers chỉ định quyền create/edit order và quyền read customers. Xem chi tiết các scope ở đây
  • Redirect_uri: url được chuyển hướng đến khi có được sự đồng ý xác thực của người dùng. URL này phải được thêm vào Whitelisted redirection URL trong shopify partner khi bạn tạo ứng dụng. (xem lại phần Get Shopify API key Và Shopify API secret key)
  • Sau khi chuyển hướng đến URL trên USER nhấn vào button Install unlisted app và sẽ được chuyển hướng đến đường dẫn sau

https://xxx.ngrok.io/auth?code={authorization_code}&hmac=da9d83c171400a41f8db91a950508985&timestamp=1409617544&state={nonce}&shop={hostname}

  • Authorization_code: code để lấy access token
  • Hmac & timestamp: dùng để verify request
  • Shop: Địa chỉ myshopify của store
  • Bạn BẮT BUỘC phải  verify request này để đảm bảo request này đến từ shopify: Xem cách verify ở đây
  • Sau khi bạn verify request thì bạn có thể lấy access token thông qua api 

POST https://{shop}.myshopify.com/admin/oauth/access_token

Với param như sau

  • client_id: The API key for the app, as defined in the Partner Dashboard.
  • client_secret: The API secret key for the app, as defined in the Partner Dashboard.
  • code: The authorization code provided in the redirect.
  • Sau khi request đến API đó, Shopify sẽ trả lại cho bạn một access token tương ứng. Bạn có thể sử dụng access token đó để truy cập lên API của Shopify

Test request REST API

  • Ở step trên chúng ta đã lấy được access token, access token này là một khóa giúp chúng ta truy cập được vào API của store, ở mỗi request khi gọi lên API của Shopify bạn bắt buộc phải truyền thêm Header: X-Shopify-Access-Token: access_token để xác thực 
  • Để truy cập vào API của Shopify bạn sử dụng một trong các tool/ library sau đây: 
  • Dùng Postman: Bạn có thể download postman về tại đây
  • GuzzleHttp: Guzzle là một thư viện PHP giúp chúng ta làm việc với các request Http một cách đơn giản hơn. Trong Laravel để sử dụng GuzzleHttp bạn sử dụng composer để cài đặt gói đó vào project Laravel của bạn. 
  • Curl: Bạn cũng có thể dùng terminal để call API của bạn. 

curl -H “X-Shopify-Access-Token:11b1752fe37a47ad3a11baa48933b4b1” https://ds-seller31.myshopify.com/admin/products.json

Các lưu ý

  • Ở URL auth được chuyển hướng khi người dùng sau khi bấm vào nút INSTALL. Ở link này sẽ chỉ có hiệu lực lần đầu tiên, nếu reload thì sẽ không thể verify được.
  • Scope: Scope quy định quyền khi user cấp cho app để truy cập vào api. Bạn chỉ có thể truy cập được vào các API mà scope liên kê quyền
  • Whitelisted auth: URL auth được chuyển hướng khi người dùng bấm vào nút INSTALL, bắt buộc url chuyển hướng của bạn phải có HTTPS và được liệt kê trong Whitelisted redirection URL trong Shopify Partner App
  • Bạn có thể tham khảo thêm về tài liệu Auth của Shopify ở đây
  • Danh sách RestAPI của Shopify ở đây 

CHI TIẾT

1. Webhook

  • Bạn có thể sử dụng webhook để đăng ký nhận thông báo khi có một sự kiện xảy ra trên store của user, thay vì bạn phải call API liên tục để kiểm tra xem thông tin trên store có thay đổi hay không thì webhook sẽ giúp thông báo cho bạn biết khi có một hành động xảy ra trên store của khách. Ví dụ: Bạn đăng ký nhận thông báo khi một sản phẩm thay đổi; Thì khi user thay đổi sản phẩm trên store thì sẽ có một sự kiện được gửi đến cho bạn biết thông báo rằng sản phẩm đó đã được thay đổi.
  • Để sử dụng được Webhook bạn cần phải đăng ký webhook như sau

POST /admin/api/#{api_version}/webhooks.json

{

  “webhook”: {

    “topic”: “orders/create”,

    “address”: “https://whatever.hostname.com/”,

    “format”: “json”

  }

}

  • Topic: là sự kiện bạn muốn đăng ký, ví dụ sự kiện orders/create tương ứng khi có một orders được tạo, products/create tương ứng với có một product được tạo,…
  • Address: Địa chỉ nhận thông báo của webhook khi có sự kiện xảy ra. Địa chỉ này bắt buộc phải là HTTPS
  • Xem chi tiết Webhook ở đây https://help.shopify.com/en/api/reference/events/webhook

2. Limit request API

3. Charge API

4. RestfulAPI

  • Shopify cung cấp hầu hết các API để bạn tương tác được với các thành phần trên Shopify như products, orders, customers,… các API này đều có docs đầy đủ ở đây https://help.shopify.com/en/api/reference

Đó là tất cả những hướng dẫn để các bạn có thể tự mình xây dựng nên một ứng dụng Shopify cơ bản. Nào! Bắt tay vào thực hiện thôi. Đừng quên chia sẻ với bạn bè của mình để cùng thực hành, và nhớ theo dõi FireApps để gom góp những bài học thực tiễn “chất chơi” được chia sẻ từ những “Dev gạo cội” nhà FireApps nhé!

FireApps

Leave a Reply

avatar
  Subscribe  
Notify of