KUNGFU TECH

0
0
Lập trình
Sơn Tùng Lê
Sơn Tùng Lê103931498422911686980

Hướng Dẫn Thiết Lập Ứng Dụng Shopify và Backend NestJS

Đăng vào 8 tháng trước

• 6 phút đọc

Chủ đề:

KungFuTech

Hướng Dẫn Thiết Lập Ứng Dụng Shopify và Backend NestJS: Hướng Dẫn Phát Triển Địa Phương Từng Bước

Bạn đã bao giờ muốn kết nối ứng dụng Shopify với backend của riêng mình chưa? Hãy cùng tìm hiểu cách thiết lập cả hai máy chủ hoạt động trên máy tính của bạn và giao tiếp với nhau.

Nội Dung Chúng Ta Xây Dựng 🎯

  • Ứng Dụng Shopify: Xử lý webhook từ các cửa hàng Shopify.
  • Backend NestJS: Xử lý dữ liệu webhook và xử lý logic kinh doanh.
  • Kết Nối: Ứng dụng Shopify chuyển tiếp dữ liệu đơn hàng đến API của NestJS.

Hãy cùng khởi động cả hai máy chủ!

Phần 1: Thiết Lập Ứng Dụng Shopify 🏪

Bước 1: Tạo Ứng Dụng Shopify

Mở terminal của bạn và chạy:

Copy 
npm init @shopify/app@latest

Trả lời các câu hỏi:

  • Tên ứng dụng: bridge-app (hoặc tên bạn thích)
  • Loại: Công khai: Ứng dụng dành cho nhiều đối tượng thương gia
  • Mẫu: Remix (TypeScript)
  • Trình quản lý gói: npm

Bước 2: Điều Hướng Đến Ứng Dụng Của Bạn

Copy 
cd bridge-app

Bước 3: Cấu Hình Quyền và Webhook

Chỉnh sửa tệp shopify.app.toml:

Copy 
nano shopify.app.toml

Tìm dòng này:

Copy 
scopes = "write_products"

Thay thế bằng:

Copy 
scopes = "write_products,read_orders,write_orders"

Sau đó tìm phần này:

Copy 
[[webhooks.subscriptions]]
  topics = [ "app/scopes_update" ]
  uri = "/webhooks/app/scopes_update"

Thêm sau nó:

Copy 
[[webhooks.subscriptions]]
  topics = [ "orders/create" ]
  uri = "/webhooks/orders/create"

Lưu và thoát: Ctrl + X, sau đó Y, rồi Enter

Bước 4: Khởi Động Ứng Dụng Shopify

Copy 
shopify app dev

Theo dõi các hướng dẫn:

  • Tạo hoặc chọn cửa hàng phát triển.
  • Cho phép cập nhật URL tự động (Y).
  • Ứng dụng sẽ khởi động và cung cấp cho bạn một URL xem trước.

Giữ terminal này mở - ứng dụng Shopify của bạn hiện đang chạy!

Phần 2: Thiết Lập Backend NestJS 🔧

Bước 1: Mở Một Terminal Mới

Quan trọng: Giữ terminal Shopify đang chạy và mở một cửa sổ terminal mới.

Bước 2: Tạo Dự Án NestJS

Copy 
# Cài đặt NestJS CLI toàn cục
npm i -g @nestjs/cli

# Tạo dự án mới
nest new bridgeapp-api

# Điều hướng đến dự án
cd bridgeapp-api

Bước 3: Tạo Bộ Điều Khiển Webhook

Tạo một thư mục mới:

Copy 
mkdir src/webhook

Tạo tệp bộ điều khiển:

Copy 
touch src/webhook/webhook.controller.ts

Chỉnh sửa tệp:

Copy 
nano src/webhook/webhook.controller.ts

Thêm mã này:

Copy 
import { Controller, Post, Body, Headers, Logger } from '@nestjs/common';

@Controller('webhook')
export class WebhookController {
  private readonly logger = new Logger(WebhookController.name);

  @Post('shopify/order')
  handleShopifyOrder(
    @Body() body: any,
    @Headers() headers: any,
  ) {
    this.logger.log('🔔 WEBHOOK ĐÃ NHẬN!');
    this.logger.log('📦 Headers:', JSON.stringify(headers, null, 2));
    this.logger.log('📊 Body:', JSON.stringify(body, null, 2));

    return { status: 'OK', message: 'Webhook đã nhận!' };
  }
}

Lưu và thoát: Ctrl + X, sau đó Y, rồi Enter

Bước 4: Cập Nhật Mô-đun Ứng Dụng

Chỉnh sửa mô-đun ứng dụng chính:

Copy 
nano src/app.module.ts

Thay thế nội dung bằng:

Copy 
import { Module } from '@nestjs/common';
import { WebhookController } from './webhook/webhook.controller';

@Module({
  controllers: [WebhookController],
})
export class AppModule {}

Lưu và thoát: Ctrl + X, sau đó Y, rồi Enter

Bước 5: Khởi Động NestJS

Copy 
npm run start:dev

Giữ terminal này mở - API NestJS của bạn hiện đang chạy trên http://localhost:3000!

Phần 3: Kết Nối Shopify với NestJS 🔗

Bước 1: Tạo Cầu Nối

Trong terminal ứng dụng Shopify (terminal đầu tiên), tạo một tệp webhook mới:

Copy 
touch app/routes/webhooks.orders.create.tsx

Chỉnh sửa tệp này:

Copy 
nano app/routes/webhooks.orders.create.tsx

Thêm mã này:

Copy 
import type { ActionFunctionArgs } from "@remix-run/node";
import { authenticate } from "../shopify.server";

export const action = async ({ request }: ActionFunctionArgs) => {
  const { topic, shop, session, admin, payload } = await authenticate.webhook(request);

  console.log("🔔 WEBHOOK SHOPIFY ĐÃ NHẬN!");
  console.log("📊 Chủ đề:", topic);
  console.log("🏪 Cửa hàng:", shop);
  console.log("📦 Đơn hàng:", JSON.stringify(payload, null, 2));

  try {
    console.log("➡️ Gửi đến NestJS...");

    const response = await fetch('http://localhost:3000/webhook/shopify/order', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        shop: shop,
        order: payload
      })
    });

    if (response.ok) {
      console.log("✅ Gửi thành công đến NestJS");
    } else {
      console.log("❌ Lỗi khi gửi đến NestJS:", response.status);
    }
  } catch (error) {
    console.log("❌ Lỗi kết nối:", error);
  }

  return new Response("OK", { status: 200 });
};

Lưu và thoát: Ctrl + X, sau đó Y, rồi Enter

Phần 4: Kiểm Tra Kết Nối 🧪

Bước 1: Cài Đặt Ứng Dụng Của Bạn

Trong trình duyệt, truy cập URL xem trước được hiển thị trong terminal Shopify của bạn. Cài đặt ứng dụng trên cửa hàng phát triển của bạn.

Bước 2: Kiểm Tra Gọi API Trực Tiếp

Trong một terminal thứ ba, kiểm tra API NestJS của bạn trực tiếp:

Copy 
curl -X POST http://localhost:3000/webhook/shopify/order \
  -H "Content-Type: application/json" \
  -d '{
    "shop": "test-shop.myshopify.com",
    "order": {
      "id": 123,
      "name": "#1001",
      "customer": {
        "first_name": "John",
        "phone": "+1234567890"
      }
    }
  }'

Bạn nên thấy các nhật ký trong terminal NestJS của bạn!

Bước 3: Kiểm Tra Từ Đầu Đến Cuối

  1. Truy cập vào quản trị Shopify của bạn.
  2. Điều hướng đến Đơn hàng → Tạo đơn hàng.
  3. Thêm một sản phẩm và khách hàng.
  4. Tạo đơn hàng.
  5. Theo dõi cả hai terminal để xem nhật ký!

Những Gì Bạn Nên Thấy 👀

Terminal 1 (Ứng Dụng Shopify):

Copy 
🔔 WEBHOOK SHOPIFY ĐÃ NHẬN!
📊 Chủ đề: orders/create
🏪 Cửa hàng: your-store.myshopify.com
➡️ Gửi đến NestJS...
✅ Gửi thành công đến NestJS

Terminal 2 (API NestJS):

Copy 
[WebhookController] 🔔 WEBHOOK ĐÃ NHẬN!
[WebhookController] 📦 Headers: {...}
[WebhookController] 📊 Body: {"shop": "...", "order": {...}}

Khắc Phục Sự Cố Thường Gặp 🔧

Lỗi "Kết Nối Bị Từ Chối"

  • Kiểm tra: NestJS có đang chạy trên cổng 3000 không?
  • Thử: curl http://localhost:3000/webhook/shopify/order

Không Nhận Được Webhook

  • Kiểm tra: Bạn đã lưu tệp webhook đúng cách chưa?
  • Thử: Khởi động lại ứng dụng Shopify của bạn (Ctrl+C sau đó shopify app dev)

Cổng Đã Được Sử Dụng

  • NestJS: Thay đổi cổng trong main.ts thành 3001.
  • Cập nhật: URL webhook của Shopify thành localhost:3001

Thiết Lập Phát Triển Địa Phương Của Bạn ✅

Chúc mừng! Bạn hiện có:

  • ✅ Ứng dụng Shopify đang chạy và nhận webhook.
  • ✅ Backend NestJS xử lý dữ liệu webhook.
  • ✅ Giao tiếp giữa cả hai máy chủ.
  • ✅ Môi trường phát triển địa phương sẵn sàng để xây dựng các tính năng.

Bước Tiếp Theo 🚀

Bây giờ cả hai máy chủ đã giao tiếp, bạn có thể:

  1. Thêm logic kinh doanh vào bộ xử lý webhook của NestJS.
  2. Tích hợp các API bên ngoài (WhatsApp, email, SMS).
  3. Thêm cơ sở dữ liệu để lưu trữ và xử lý dữ liệu.
  4. Xây dựng các thành phần frontend cho ứng dụng Shopify của bạn.
  5. Triển khai lên môi trường sản xuất khi đã sẵn sàng.

Giữ Mọi Thứ Đang Chạy 💡

Quản lý Terminal:

  • Terminal 1: shopify app dev (giữ cho nó chạy)
  • Terminal 2: npm run start:dev trong thư mục NestJS (giữ cho nó chạy)
  • Terminal 3: Có sẵn để kiểm tra các lệnh.

Khi bạn khởi động lại:

  1. Khởi động NestJS trước (npm run start:dev)
  2. Khởi động ứng dụng Shopify sau (shopify app dev)
  3. Cả hai sẽ tự động kết nối lại.

Đó là tất cả! Bạn đã có một thiết lập phát triển địa phương hoàn chỉnh với Shopify và NestJS giao tiếp với nhau. Chúc bạn lập trình vui vẻ! 🎉

Có câu hỏi nào về thiết lập không? Hãy để lại câu hỏi của bạn dưới đây!

Nội dung bài viết

Gợi ý câu hỏi phỏng vấn
Không có dữ liệu

Không có dữ liệu

Bài viết được đề xuất
Bài viết cùng tác giả

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào