ClaudeCodeLab
Use Cases

Claude Code के साथ Efficiently Implement Email Sending कैसे करें

Claude Code का उपयोग करके efficiently implement email sending सीखें। Practical code examples और step-by-step guidance शामिल है।

メールfeaturesのimplementationにClaude Code use करनाメリット

メール送信featuresは、templateのcreate、送信ロジック、error handling、リトライprocessing आदि考慮点がज़्यादाfeatures है।Claude Codeはこれらを一括してimplementationし、testpossibleな構成を提案してくれ है।

Resendによるメール送信の基本

> Resendを使ったメール送信serviceをबनाओ。
> React Emailでtemplateをmanagementして。
> リトライprocessingとerror handlingもimplement करो。
// src/services/email-service.ts
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

interface SendEmailOptions {
  to: string | string[];
  subject: string;
  html: string;
  text?: string;
  replyTo?: string;
}

export class EmailService {
  private maxRetries = 3;

  async send(options: SendEmailOptions): Promise<{ id: string }> {
    let lastError: Error | null = null;

    for (let attempt = 1; attempt <= this.maxRetries; attempt++) {
      try {
        const { data, error } = await resend.emails.send({
          from: 'MyApp <[email protected]>',
          to: options.to,
          subject: options.subject,
          html: options.html,
          text: options.text,
          replyTo: options.replyTo,
        });

        if (error) throw new Error(error.message);
        return { id: data!.id };
      } catch (err) {
        lastError = err as Error;
        if (attempt < this.maxRetries) {
          await this.delay(1000 * attempt); // Exponential backoff
        }
      }
    }

    throw new Error(`Failed after ${this.maxRetries} attempts: ${lastError?.message}`);
  }

  private delay(ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}

React Emailでtemplatecreate

// emails/welcome.tsx
import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Link,
  Preview,
  Section,
  Text,
} from '@react-email/components';

interface WelcomeEmailProps {
  userName: string;
  loginUrl: string;
}

export function WelcomeEmail({ userName, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>{userName}さん、 तरहこそ！</Preview>
      <Body style={{ backgroundColor: '#f6f9fc', fontFamily: 'sans-serif' }}>
        <Container style={{ margin: '0 auto', padding: '40px 20px', maxWidth: '560px' }}>
          <Heading style={{ fontSize: '24px', color: '#333' }}>
             तरहこそ、{userName}さん！
          </Heading>
          <Text style={{ fontSize: '16px', color: '#555', lineHeight: '1.6' }}>
            アカウントが正常にcreateされ हुआ।निम्नलिखितのlink सेlogインしてserviceをご利用 करें।
          </Text>
          <Section style={{ textAlign: 'center', margin: '32px 0' }}>
            <Link
              href={loginUrl}
              style={{
                backgroundColor: '#2563eb',
                color: '#fff',
                padding: '12px 24px',
                borderRadius: '6px',
                textDecoration: 'none',
                fontSize: '16px',
              }}
            >
              logインする
            </Link>
          </Section>
          <Text style={{ fontSize: '14px', color: '#888' }}>
            ご不明な点がございましたらお気軽にお問い合わせ करें।
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

メール送信のintegration

// src/services/notification-service.ts
import { render } from '@react-email/render';
import { EmailService } from './email-service';
import { WelcomeEmail } from '../emails/welcome';

const emailService = new EmailService();

export class NotificationService {
  async sendWelcomeEmail(user: { email: string; name: string }) {
    const html = await render(
      WelcomeEmail({
        userName: user.name,
        loginUrl: `${process.env.APP_URL}/login`,
      })
    );

    return emailService.send({
      to: user.email,
      subject: ` तरहこそ、${user.name}さん！`,
      html,
    });
  }

  async sendPasswordReset(email: string, token: string) {
    const resetUrl = `${process.env.APP_URL}/reset-password?token=${token}`;
    const html = await render(
      PasswordResetEmail({ resetUrl })
    );

    return emailService.send({
      to: email,
      subject: 'pathワードリセットのご案内',
      html,
    });
  }
}

メールqueueのimplementation

大量のメール送信にはqueue use करके है।

// src/queues/email-queue.ts
import { Queue, Worker } from 'bullmq';
import { EmailService } from '../services/email-service';

const emailQueue = new Queue('emails', {
  connection: { host: 'localhost', port: 6379 },
});

// メールをqueueにadd
export async function enqueueEmail(options: {
  to: string;
  subject: string;
  html: string;
}) {
  await emailQueue.add('send-email', options, {
    attempts: 3,
    backoff: { type: 'exponential', delay: 2000 },
    removeOnComplete: 100,
    removeOnFail: 50,
  });
}

// workerでprocessing
const emailService = new EmailService();

new Worker('emails', async (job) => {
  await emailService.send(job.data);
  console.log(`Email sent: ${job.data.to}`);
}, {
  connection: { host: 'localhost', port: 6379 },
  concurrency: 5,
});

testのimplementation

import { vi, describe, it, expect } from 'vitest';
import { NotificationService } from './notification-service';

vi.mock('resend', () => ({
  Resend: vi.fn().mockImplementation(() => ({
    emails: {
      send: vi.fn().mockResolvedValue({ data: { id: 'test-id' }, error: null }),
    },
  })),
}));

describe('NotificationService', () => {
  it('should send welcome email', async () => {
    const service = new NotificationService();
    const result = await service.sendWelcomeEmail({
      email: '[email protected]',
      name: 'testuser',
    });
    expect(result.id).toBe('test-id');
  });
});

Summary

Claude Code का उपयोग करके、メール送信featuresをtemplatemanagement सेqueueprocessing तक一括してimplementationでき है।विशेष रूप सेReact Emailによるtemplatecreateは、Claude Codeが得意とする分野 है।メールfeaturesの設計方針をCLAUDE.mdに記述しておくと、一貫したimplementationが得られ है।test駆動でdevelopmentを進めるコツはrefactoringautomationの記事भी reference के लिए देखें。

Claude Codeके details के लिएAnthropicofficial documentationदेखें。React Emailके details के लिएReact Email公式サイトをदेखें。

#Claude Code #email #SendGrid #Resend #Node.js

Related Posts