Skip to content

Latest commit

 

History

History
151 lines (110 loc) · 5.12 KB

README-PL.md

File metadata and controls

151 lines (110 loc) · 5.12 KB

Usługa API E-mail dla Formularzy Kontaktowych (Resend + Vercel)

🌐 Dostępne w innych językach: English | Bahasa Indonesia | Français | Deutsch | 日本語 | 中文 | Español | Русский | Português | 한국어

To prosty projekt backendowy, który służy jako usługa wysyłania e-maili z formularzy kontaktowych. Został zbudowany przy użyciu Node.js i usługi e-mail Resend, zaprojektowany do wdrożenia jako Funkcja Bezserwerowa na Vercel.

To rozwiązanie jest prostszą i nowocześniejszą alternatywą для Gmaila z OAuth2, wymagającą jedynie klucza API do uwierzytelnienia.

✨ Funkcje

  • Pojedynczy punkt końcowy API: Akceptuje żądania POST zawierające dane formularza (name, email, message).
  • Niezawodne dostarczanie e-maili: Wykorzystuje Resend do wysyłania e-maili transakcyjnych.
  • Gotowy do wdrożenia на Vercel: Skonfigurowany jako funkcja bezserwerowa dla skalowalności i łatwości wdrożenia.
  • Obsługa CORS: Zawiera wbudowaną konfigurację CORS, aby zezwalać na żądania z Twojej domeny frontowej.
  • Odpowiedź JSON: Zapewnia jasne odpowiedzi o statusie (success lub error) dla bezproblemowej integracji z frontendem.

📦 Użyte Technologie

  • Node.js (Moduły ES)
  • Resend
  • Funkcja Bezserwerowa Vercel

🚀 Przewodnik po Konfiguracji i Wdrożeniu

Postępuj zgodnie z tymi krokami, aby uruchomić swoją usługę e-mail.

1. Zdobądź swoje dane uwierzytelniające Resend

Przed wdrożeniem będziesz potrzebować Klucza API i Zweryfikowanej Domeny z Resend.

  1. Utwórz Konto: Zarejestruj darmowe konto na resend.com.
  2. Zweryfikuj swoją Domenę:
    • W panelu Resend przejdź do "Domains".
    • Dodaj domenę, której będziesz używać do wysyłania e-maili (np. domena Twojego portfolio).
    • Postępuj zgodnie z instrukcjami, aby dodać rekordy DNS (zazwyczaj MX i TXT) u swojego dostawcy domeny lub w menedżerze DNS (jak Netlify czy Cloudflare).
  3. Utwórz Klucz API:
    • Przejdź do "API Keys".
    • Kliknij "Create API Key", nadaj mu nazwę i ustaw Uprawnienia na "Full Access".
    • Skopiuj i zapisz Klucz API — zostanie on pokazany tylko raz.

2. Wdróż Projekt na Vercel

  1. Sklonuj lub Sforkuj to Repozytorium: Uzyskaj kopię tego projektu na swoim koncie GitHub.
  2. Zaimportuj do Vercel:
    • Zaloguj się do Vercel i kliknij "Add New... > Project".
    • Wybierz swoje repozytorium GitHub. Vercel automatycznie wykryje je jako projekt Node.js.
  3. Ustaw Zmienne Środowiskowe:
    • W ustawieniach projektu Vercel przejdź do "Environment Variables".
    • Dodaj następującą zmienną:
      • Name: RESEND_API_KEY
      • Value: (Wklej swój klucz API Resend, zaczynający się od re_...)
  4. Wdróż: Kliknij "Deploy", aby uruchomić projekt.

Po zakończeniu wdrażania Vercel udostępni adres URL projektu (np. https://twoja-nazwa-projektu.vercel.app).

📨 Dokumentacja API

Twój punkt końcowy API będzie dostępny pod adresem URL wdrożenia Vercel, po którym następuje ścieżka API.

  • URL: https://twoja-nazwa-projektu.vercel.app/api/handle-form
  • Metoda: POST
  • Nagłówki: Content-Type: application/json

Przykładowa treść żądania (JSON)

{
  "name": "John Doe",
  "email": "john@example.com",
  "message": "Cześć! Jestem zainteresowany współpracą z Tobą."
}

Przykładowa odpowiedź

Sukces (Status 200)

{
  "status": "success",
  "message": "Wiadomość wysłana pomyślnie!"
}

Błąd (Status 400/500)

{
  "status": "error",
  "message": "Wszystkie pola są wymagane."
}

🔌 Przykład integracji z frontendem

Użyj fetch w swoim kodzie JavaScript na frontendzie, aby wysłać dane formularza do wdrożonego punktu końcowego API.

// Przykładowa implementacja na frontendzie
const form = document.getElementById("contactForm");

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  const apiUrl = "[https://twoja-nazwa-projektu.vercel.app/api/handle-form](https://twoja-nazwa-projektu.vercel.app/api/handle-form)";
  const formData = {
    name: form.name.value,
    email: form.email.value,
    message: form.message.value,
  };

  try {
    const response = await fetch(apiUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
    });

    const data = await response.json();

    if (data.status === "success") {
      alert("Wiadomość wysłana pomyślnie!");
      form.reset();
    } else {
      alert("Błąd: " + data.message);
    }
  } catch (error) {
    console.error("Błąd:", error);
    alert("Nie udało się wysłać wiadomości. Spróbuj ponownie później.");
  }
});

📄 Licencja

Ten projekt jest objęty licencją Licencja MIT.