Tiện ích phản hồi cho Ứng dụng Next.js

Phản hồi của người dùng rất quan trọng để hướng dẫn các quyết định về sản phẩm. Chúng tôi đã xây dựng một tiện ích để giúp bạn nhận được phản hồi từ người dùng của mình. Nó là một thành phần React gọi API Next.js làm phụ trợ của nó. API phụ trợ chỉ cần gửi dữ liệu phản hồi đến cơ sở dữ liệu của Upstash Redis. Ngoài ra, bạn sẽ có thể xem và quản lý dữ liệu đã gửi trong Trang tích hợp bảng điều khiển Upstash

Khi bạn thêm thành phần vào trang Next.js của mình, một biểu tượng sẽ được hiển thị ở góc dưới cùng bên phải. Khi nhấp vào, biểu mẫu phản hồi sẽ hiển thị. Kiểm tra bản trình diễn để xem nó hoạt động như thế nào.

Xem repo Github để kiểm tra mã. Hiện tại, tiện ích con được thiết kế để sử dụng trong ứng dụng Next.js. Chúng tôi hoan nghênh những đóng góp của bạn để hỗ trợ những người khác như Nuxt, SvelteKit hoặc Remix

Cài đặt

Cài đặt phần phụ thuộc:

npm install @upstash/feedback @upstash/redis

Thành phần và kiểu dáng:

// pages/_app.js

import "@upstash/feedback/dist/style.css";
import FeedbackWidget from "@upstash/feedback";

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <FeedbackWidget type="full" />
      <Component {...pageProps} />
    </>
  );
}

Sao chép / dán mã API bên dưới vào pages/api/feedback.js

// pages/api/feedback.js

import { Redis } from "@upstash/redis";

const redis = new Redis({
  url: "UPSTASH_REDIS_REST_URL",
  token: "UPSTASH_REDIS_REST_TOKEN",
});

export default async function FeedbackWidgetAPI(req, res) {
  try {
    await redis.hset("feedback", { [Date.now().toString()]: req.body });

    return res.status(200).json({ message: "success" });
  } catch (err) {
    return res.status(400).json({ message: err });
  }
}

Bạn cần tạo cơ sở dữ liệu Redis tại Upstash, sau đó thay thế UPSTASH_REDIS_REST_URL và UPSTASH_REDIS_REST_TOKEN có thể tìm thấy tại trang chi tiết cơ sở dữ liệu trong Upstash Console.

Trang tổng quan dành cho quản trị viên

Upstash Console có một trang trong Integrations> Feedback Widget để bạn có thể xem và quản lý phản hồi đã gửi.

Cấu hình

người dùng :Sử dụng user để chuyển id hoặc email của người dùng dưới dạng tham số, vì vậy người dùng sẽ không phải nhập email của họ.

<FeedbackWidget type="full" user={currentUser.email} />

Để cho phép gửi ẩn danh, hãy đặt bất kỳ chuỗi nào làm id người dùng chỉ để ẩn thông tin nhập email.

<FeedbackWidget type="full" user="anything" />

siêu dữ liệu :Bạn có thể đính kèm thông tin bổ sung bằng trường siêu dữ liệu.

showOnInitial :Đặt true, nếu bạn muốn hộp thoại nhập được hiển thị lúc đầu.

Các từ đóng

Tùy thuộc vào sự quan tâm của bạn, chúng tôi đang lên kế hoạch xây dựng các thành phần mới. Bạn có thể đóng góp vào repo Github của chúng tôi và các vấn đề đang mở cũng như yêu cầu tính năng. Theo dõi chúng tôi tại Twitter và Discord.