윅스 (Wix) 코딩 예제 - 양식 제출시 전자 메일 보내기 (Wix Code Tutorial: Sending an Email on Form Submission)

윅스 (Wix) 코딩 예제 - 양식 제출시 전자 메일 보내기 (Wix Code Tutorial: Sending an Email on Form Submission)

 

 

 

설명)

 

양식을 제출할 때마다 이메일을 보내려는 경우가 많습니다. 이 글에서는 전자 메일을 보내는 두 가지 유형의 양식을 작성하는 방법을 보여줍니다. 먼저 양식이 성공적으로 제출될 때마다 특정 주소로 전자 메일을 보내는 양식을 설정합니다. 그런 다음 양식을 성공적으로 제출한 후 양식을 작성한 사용자에게 이메일 확인을 보내도록 코드를 수정합니다.

 

양식을 제출할 때 이메일을 보내기 (To send an email when a form is submitted we use) :

- 표준 윅스 코드(Wix Code) 형식

- 전자 메일을 보내기 위해 타사 서비스를 호출하는 두 개의 백엔드 기능

- 데이터세트가 새 항목을 저장하고 백엔드 함수를 호출할 때 실행되는 이벤트 핸들러

 

 

 

전제 조건 (Prerequisites)

이 글은 사용자가 입력 양식, 웹 모듈 및 백엔드 기능을 사용하여 타사 서비스를 호출하는 것에 익숙하다고 가정합니다.

 

타사 이메일 전송 서비스가 있는 계정이 필요합니다. 여기 제공된 예제에서 SendGrid를 이메일 배달 서비스로 사용할 것입니다. 원하는 이메일 전송 서비스를 사용할 수 있습니다. 동일한 전체 개념이 적용됩니다. 그러나 전자 메일 배달 서비스의 API에 맞게 코드를 수정해야합니다.

 

 

 

양식 (Form)

먼저 제출 버튼을 사용하여 입력 양식을 작성합니다. 기존 양식을 사용하거나 새 양식을 만들 수 있습니다. 어느 쪽이든 특별한 설치가 필요없는 일반 입력 양식입니다. 각 입력 요소는 데이터세트의 입력란(필드)에 연결되고 버튼은 제출 작업과 함께 동일한 데이터세트에 연결됩니다.

 

이 예제에서는 다음 입력 요소가 있는 간단한 양식을 사용합니다.

 

 

 

 

 

 

유형 (Type)	ID	사용(Usage)
입력(Input)	nameInput	이름 입력하기
입력(Input)	emailInput	이메일 주소 입력하기
드롭다운(Dropdown)	sportDropdown	선호하는 스포츠 입력하기
텍스트 상자(Text Box)	commentsInput	주석 입력하기
버튼(Button)	submitButton	데이터 제출하기
데이터세트(Dataset)	sportDataset	요소 연결하기

 

 

 

백엔드 함수 (Backend Functions)

다음으로 두 개의 백엔드 파일에서 우리는 타사 전자 메일 전송 서비스를 호출하는 두 가지 함수를 만듭니다. 첫 번째 함수는 수신한 원시 이메일 데이터에 API 키, 발신자 주소 및 수신자 주소를 추가하고 두 번째 백엔드 함수를 호출합니다.

 

//email.jsw

import {sendWithService} from 'backend/sendGrid';

export function sendEmail(subject, body) {
  const key = "QL.cFH5YHZQQ2_fG0z_KuQ.6WPTYEyjN1C3_7Wt9Hb3jGfkJNAyzJhz3ddhM";
  const sender = "from.email@domain.com";
  const recipient = "to.email@domain.com";
  return sendWithService(key, sender, recipient, subject, body);
}

 

 

 

중요 :

API 키, 보낼 전자 메일 주소 및 보낼 전자 메일 주소가 포함되도록 이 함수를 수정해야합니다.

 

 

 

sendGrid라는 파일에서 sendWithService 함수를 가져옵니다. 이것은 두 번째 백엔드 파일에 있습니다. sendWithService 함수는 수신한 모든 데이터를 전자 메일 배달 서비스의 API에서 예상하는 형식으로 패키지화한 다음 API를 호출합니다.

 

//sendGrid.js

import {fetch} from 'wix-fetch';  

export function sendWithService(key, sender, recipient, subject, body) {
  const url = "https://api.sendgrid.com/api/mail.send.json";
 
  const headers = {
    "Authorization": "Bearer " + key,
    "Content-Type": "application/x-www-form-urlencoded"
  };

  const data = `from=${sender}&to=${recipient}&subject=${subject}&text=${body}`;
 
  const request = {
    "method": "post", 
    "headers": headers, 
    "body": data
  };
 
  return fetch(url, request)
   .then(response => response.json());
}

 

 

 

조언 :

이 예에서는 제 3자 전자 메일 전송 서비스로 SendGrid를 사용합니다. SendGrid를 사용하는 경우 이 모듈을 수정하지 않고 복사하여 붙여 넣을 수 있습니다. 다른 서비스를 사용하는 경우 이 모듈을 있는 그대로 사용할 수 없습니다. 비슷한 모듈을 작성하여 서비스 API에서 기대하는 형식을 충족시키고 email.jsw 모듈에서 해당 모듈을 가져와야합니다.

 

 

 

 

이벤트 핸들러 (Event Handler)

마지막으로 양식과 동일한 페이지의 페이지 코드에 새 항목이 성공적으로 제출될 때마다 실행되는 이벤트 핸들러를 추가합니다. 이벤트 핸들러는 전자 메일의 제목과 본문을 만들기 위해 양식의 값을 사용합니다. 그 정보는 위에서 작성한 백엔드 함수에 전달됩니다.

 

import {sendEmail} from 'backend/email';

$w.onReady(function () {
  $w("#sportDataset").onAfterSave(sendFormData);
});

function sendFormData() {
  const subject = `New Submission from ${$w("#nameInput").value}`;
  const body = `Name: ${$w("#nameInput").value}
    \rEmail: ${$w("#emailInput").value}
    \rSport: ${$w("#sportDropdown").value}
    \rComments: ${$w("#commentsInput").value}`;
 
  sendEmail(subject, body)
    .then(response => console.log(response)); 
}

 

노트 :

우리의 import문은 백엔드 웹 모듈의 이름이 email.jsw라고 가정합니다. 백엔드 웹 모듈의 이름을 반영하도록 import문을 수정합니다.

 

 

 

 

코드 수정 (Modifying the Code)

위에서 작성한 코드는 양식을 제출할 때마다 동일한 주소로 전자 메일을 보냅니다. 다른 일반적인 상황의 기초로 쉽게 사용할 수 있습니다. 예를 들어 양식을 제출하는 사용자가 확인 이메일을 받을 수 있도록 코드를 수정합니다.

 

 

양식 (Form)

양식을 수정하지 않아도 됩니다.

 

 

백엔드 함수 (Backend Functions)

같은 주소의 sendWithService 함수를 항상 호출하지는 않는 또 다른 수정된 버전의 sendEmail 함수를 추가할 것입니다. 대신, 우리는 새로운 함수가 양식으로부터 받는 사람의 주소를 얻길 바랍니다.

새로운 기능에서는 수신자 주소에 매개 변수를 추가해야합니다. 이 주소는 sendWithService 함수에 전달되므로 이전에 사용했던 하드 코드된 주소를 선언한 행은 더 이상 필요하지 않습니다.

 

따라서 새로운 함수가 추가되면서 파일은 다음과 같이 보입니다.

 

//email.jsw

import {sendWithService} from 'backend/sendGrid';

export function sendEmail(subject, body) {
  const key = "QL.cFH5YHZQQ2_fG0z_KuQ.6WPTYEyjN1C3_7Wt9Hb3jGfkJNAyzJhz3ddhM";
  const sender = "from.email@domain.com";
  const recipient = "to.email@domain.com";
  return sendWithService(key, sender, recipient, subject, body);
}

export function sendEmailWithRecipient(subject, body, recipient) {
  const key = "QL.cFH5YHZQQ2_fG0z_KuQ.6WPTYEyjN1C3_7Wt9Hb3jGfkJNAyzJhz3ddhM";
  const sender = "from.email@domain.com";
  return sendWithService(key, sender, recipient, subject, body);
}

 

 

이벤트 핸들러 (Event Handler)

프론트엔드 코드를 수정하여 새 기능을 가져 와서 전자 메일을 보내고받는 사람을 지정합니다.

 

import {sendEmail, sendEmailWithRecipient} from 'backend/email';

$w.onReady(function () {
  $w("#sportDataset").onAfterSave(sendFormData);
});

function sendFormData() {
  const subject = `New Submission from ${$w("#nameInput").value}`;
  const body = `Name: ${$w("#nameInput").value}
    \rEmail: ${$w("#emailInput").value}
    \rSport: ${$w("#sportDropdown").value}
    \rComments: ${$w("#commentsInput").value}`;
  const recipient = $w("#emailInput").value;
 
  sendEmailWithRecipient(subject, body, recipient)
    .then(response => console.log(response)); 
}

 

 

API 목록

다음 API는 이 글의 코드에서 사용됩니다. 자세한 내용은 API 참조 문서를 참조합니다.

$w.Dropdown

- $ w.Dropdown.value - 드롭다운의 값을 설정하거나 가져옵니다.

$w.TextBox

- $w.TextBox.value - 텍스트 상자의 값을 설정하거나 가져옵니다.

$w.TextInput

- $ w.TextInput.value - 텍스트 입력 값을 설정하거나 가져옵니다.

wix-dataset

- wix-dataset.onAfterSave( ) - 데이터세트 저장 직후에 실행되는 이벤트 핸들러를 추가합니다.

wix-fetch

- wix-fetch.fetch( ) - HTTP/HTTPS를 사용하여 네트워크에서 지정된 자원을 검색합니다.

 

 

 

 

연관된 토픽)

윅스 (Wix) 코딩 - Fetch API를 사용하여 제 3자 서비스에 액세스하기 (Wix Code: Accessing 3rd-Party Services with the Fetch API)

윅스 (Wix) 코딩 - 웹 모듈을 사용하여 프론트엔드에서 서버 측 코드 호출하기 (Wix Code: Calling Server-Side Code from the Front-End with Web Modules)

윅스 (Wix) 코딩 예제 - 데이터베이스 컬렉션에 사용자 입력 저장 양식 만들기 (Wix Code Tutorial: Creating a Form to Store User Input in a Database Collection)

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-sending-an-email-on-form-submission