Cara Build a Notification System dengan Claude Code

notifikasisistemのpembangunan dengan Claude Code: efisiensi

Webaplikasi おけるnotifikasi 、toasttampilan dari プッシュnotifikasi、リアルタイムpembaruanま 多岐 わたり.Claude Code 使えば、これら integrasi notifikasifondasi waktu singkat pembangunan bisa dilakukan.

implementasi toastnotifikasikomponen

Pertama-tama aplikasi内 使うtoastnotifikasi 作り.

> library 使わず toastnotifikasikomponen React buatkan.
> success/error/warning/info 4種類。自動 dengan 消える。スタックtampilandukungan。

import { createContext, useContext, useState, useCallback, type ReactNode } from "react";

type ToastType = "success" | "error" | "warning" | "info";

interface Toast {
  id: string;
  type: ToastType;
  message: string;
}

interface ToastContextType {
  addToast: (type: ToastType, message: string) => void;
}

const ToastContext = createContext<ToastContextType | null>(null);

const TOAST_STYLES: Record<ToastType, string> = {
  success: "bg-green-500 text-white",
  error: "bg-red-500 text-white",
  warning: "bg-yellow-500 text-black",
  info: "bg-blue-500 text-white",
};

const TOAST_ICONS: Record<ToastType, string> = {
  success: "✓",
  error: "✕",
  warning: "⚠",
  info: "ℹ",
};

export function ToastProvider({ children }: { children: ReactNode }) {
  const [toasts, setToasts] = useState<Toast[]>([]);

  const addToast = useCallback((type: ToastType, message: string) => {
    const id = crypto.randomUUID();
    setToasts((prev) => [...prev, { id, type, message }]);

    setTimeout(() => {
      setToasts((prev) => prev.filter((t) => t.id !== id));
    }, 4000);
  }, []);

  return (
    <ToastContext.Provider value={{ addToast }}>
      {children}
      <div className="fixed bottom-4 right-4 flex flex-col gap-2 z-50">
        {toasts.map((toast) => (
          <div
            key={toast.id}
            className={`px-4 py-3 rounded-lg shadow-lg flex items-center gap-2 animate-slide-in ${TOAST_STYLES[toast.type]}`}
          >
            <span>{TOAST_ICONS[toast.type]}</span>
            <span>{toast.message}</span>
            <button
              onClick={() => setToasts((prev) => prev.filter((t) => t.id !== toast.id))}
              className="ml-2 opacity-70 hover:opacity-100"
            >
              ✕
            </button>
          </div>
        ))}
      </div>
    </ToastContext.Provider>
  );
}

export function useToast() {
  const context = useContext(ToastContext);
  if (!context) throw new Error("useToast must be used within ToastProvider");
  return context;
}

WebSocketによるリアルタイムnotifikasi

server dari リアルタイムnotifikasi 受け取るmekanisme juga pembangunan bisa dilakukan.

// Server side（Node.js + ws）
import { WebSocketServer, WebSocket } from "ws";

interface Client {
  ws: WebSocket;
  userId: string;
}

const clients: Client[] = [];

const wss = new WebSocketServer({ port: 8080 });

wss.on("connection", (ws, req) => {
  const userId = new URL(req.url!, `http://${req.headers.host}`).searchParams.get("userId");
  if (!userId) return ws.close();

  clients.push({ ws, userId });

  ws.on("close", () => {
    const index = clients.findIndex((c) => c.ws === ws);
    if (index !== -1) clients.splice(index, 1);
  });
});

// 特定penggunaへ notifikasipengiriman
export function sendNotification(userId: string, notification: object) {
  clients
    .filter((c) => c.userId === userId)
    .forEach((c) => c.ws.send(JSON.stringify(notification)));
}

// Client side フック
import { useEffect, useRef, useCallback } from "react";

interface Notification {
  id: string;
  type: string;
  title: string;
  body: string;
}

export function useNotifications(userId: string, onNotification: (n: Notification) => void) {
  const wsRef = useRef<WebSocket | null>(null);

  const connect = useCallback(() => {
    const ws = new WebSocket(`ws://localhost:8080?userId=${userId}`);

    ws.onmessage = (event) => {
      const notification = JSON.parse(event.data);
      onNotification(notification);
    };

    ws.onclose = () => {
      setTimeout(connect, 3000); // Reconnect
    };

    wsRef.current = ws;
  }, [userId, onNotification]);

  useEffect(() => {
    connect();
    return () => wsRef.current?.close();
  }, [connect]);
}

persistensiと既読manajemen notifikasi

notifikasi DB penyimpanan 既読manajemen 機能 juga penambahan bisa dilakukan.

// Prismaスキーマから自動 APIgenerate 依頼
// schema.prisma 内容 Claude Code 読み取ってimplementasi
import { db } from "@/lib/database";

export async function getNotifications(userId: string) {
  return db.notification.findMany({
    where: { userId },
    orderBy: { createdAt: "desc" },
    take: 50,
  });
}

export async function markAsRead(notificationId: string) {
  return db.notification.update({
    where: { id: notificationId },
    data: { readAt: new Date() },
  });
}

export async function getUnreadCount(userId: string) {
  return db.notification.count({
    where: { userId, readAt: null },
  });
}

Claude Code pengembangan効率 上げる 生産性 3倍 10 Tips 参考 .form dan integrasi mengenai formvalidasi設計 juga 併せてご覧.

Summary

Dengan Claude Code, toastnotifikasi、リアルタイムnotifikasi、persistensiま 含めたnotifikasisistem全体 efisien pembangunan bisa dilakukan.自然言語 要件 伝え、段階的 機能 penambahan いく おすすめ.

公式dokumen Claude Code dari konfirmasi bisa dilakukan.