> 웹 프론트엔드 > CSS 튜토리얼 > 개념 API로 이메일 가입

개념 API로 이메일 가입

William Shakespeare
풀어 주다: 2025-03-19 10:12:11
원래의
569명이 탐색했습니다.

이 튜토리얼은 Jamstack 아키텍처를 사용하여 뉴스 레터 가입 시스템을 구축하고 Netlify 기능, 개념 API 및 Mailgun을 통합하는 것을 보여줍니다. 전자 메일 가입자를 직접 수집하는 방법을 살펴보고 기존 뉴스 레터 플랫폼에 대한 무료 자조 대안을 제공합니다.

개념 API로 이메일 가입

많은 사람들이 오늘날 뉴스 레터를 만듭니다. Substack, MailChimp, Revue (Twitter) 및 Facebook과 같은 서비스를 활용합니다. 다른 사람들은 MailPoet과 같은 자체 관리 WordPress 솔루션을 선택합니다. 이 튜토리얼은 다른 접근 방식을 제시합니다. HTML 양식, 서버리스 기능 및 데이터베이스를 사용하여 이메일 주소를 수집하기위한 사용자 정의 시스템. 이 방법은 많은 기존 플랫폼과 관련된 비용을 피합니다.

이 튜토리얼은 NetLify 기능, 개념 데이터베이스 및 MailGun을 사용하여 시스템을 구축합니다 (API 지원 이메일 서비스를 대체 할 수 있지만). 모든 서비스는 무료 계층을 제공합니다 (제한 사항). 전체 코드는 Github에서 사용할 수 있습니다.

개념 : 데이터베이스 솔루션

개념은 데이터베이스 역할을합니다. 메모 작성, 프로젝트 관리 등을위한 다재다능한 작업 공간입니다. 사용자 친화적 인 인터페이스를 통해 액세스 할 수있는 데이터베이스 기능은 이메일 구독을 저장하는 데 이상적입니다. 간단한 "이메일"열 및 개념의 "생성 된 시간"속성으로 "뉴스 레터 이메일"이라는 테이블 (데이터베이스)을 만들어 볼게요.

개념 API 토큰 및 통합

개념 데이터베이스에 연결하려면 개념 통합을 만듭니다 (개념 계정이 아니라 로그인하는 동안 개념 웹 사이트에서). "뉴스 레터 가입"의 이름을 지정하고 내부 통합 토큰 (API 토큰)을 얻으십시오. 결정적으로 "뉴스 레터 이메일"데이터베이스를이 통합과 공유하여 액세스 권한을 부여하십시오.

Netlify 함수 : 서버리스 전원

Netlify 함수는 서버리스 API 엔드 포인트를 제공합니다. Netlify 양식을 사용할 수 있지만, 자유 계층 제한은 한 달에 100으로 제출됩니다. 그러나 Netlify 기능은 훨씬 더 높은 호출 한도 (무료 계획에서 월 125,000)를 제공하여 더 많은 양의 이메일 가입을 처리하는 데 적합합니다.

NetLify 프로젝트 설정

NetLify CLI ( npm install netlify-cli -g )를 설치하고 프로젝트 디렉토리를 작성하고 NPM ( npm init )을 초기화하고 NetLify로 인증하십시오. 함수 디렉토리 ( functions = "functions" )를 지정하려면 netlify.toml 파일이 필요합니다.

Netlify 함수 (index.js)

이 함수는 양식 제출을 처리합니다. @notionhq/client 패키지를 설치하십시오 ( npm install @notionhq/client --save ). 개념 API 토큰 ( NOTION_API_TOKEN ) 및 데이터베이스 ID ( NOTION_DATABASE_ID )로 .env 파일을 만듭니다. 데이터베이스 ID는 데이터베이스의 개념 URL에 있습니다.

index.js 함수는 이메일 주소를 확인하고 개념 API를 사용하여 데이터베이스에 이메일을 추가하고 성공 또는 오류 응답을 반환합니다.

HTML 양식 (index.html)

이메일 입력과 제출 버튼이있는 간단한 HTML 양식이 생성됩니다. JavaScript 코드는 이메일을 확인하고 NetLify 함수 ( /.netlify/functions/index )에 게시물 요청을 보냅니다. 부트 스트랩 5는 스타일링에 사용됩니다.

Mailgun Integration (Welcome.js)

확인 이메일을 보내려면 MailGun (또는 유사한 서비스)을 통합하십시오. Mailgun 대시 보드에서 Mailgun API 키와 도메인을 얻어 MAILGUN_API_KEYMAILGUN_DOMAIN 으로 .env 파일에 추가하십시오.

mailgun-js 패키지 ( npm install mailgun-js --save )를 설치하십시오. welcome.js Netlify 기능을 작성하여 개념에서 새로운 가입을 가져 오기 위해 (마지막 30 분 이내) Mailgun API를 사용하여 확인 이메일을 보냅니다.

테스트 및 다음 단계

양식을 테스트하고 데이터베이스 항목을 확인하고 Postman과 같은 도구를 사용하여 welcome 기능에 게시물 요청을 보냅니다. 확인 이메일이 있는지 스팸 폴더를 확인하십시오.

향후 개선 사항에는 정기적으로 환영 이메일을 보내기 위해 예정된 작업 (예 : GitHub 조치 사용)을 구현하고 welcome 엔드 포인트에 보안 조치를 추가하는 것이 포함됩니다.

이 튜토리얼은 뉴스 레터 가입 시스템 구축에 대한 강력하고 비용 효율적이며 교육적 접근 방식을 제공합니다. 이 프로세스는 다양한 서비스와 API를 결합하여 기능적 애플리케이션을 생성하는 힘을 보여줍니다.

위 내용은 개념 API로 이메일 가입의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿