가이드 4: 스크립트 호출

버튼 위젯 중급 App Maker 기술

약 10분

빌드할 앱

사용자가 서식 있는 텍스트(HTML) 이메일 메시지를 작성하고 보내는 데 사용할 수 있는 앱을 제작해 봅니다. 이 앱은 클라이언트 스크립트와 서버 스크립트를 모두 사용합니다.

학습 내용

이 가이드는 다음과 같은 교육 내용을 포함합니다.

  • 클라이언트 스크립트 작성 및 호출
  • 서버 스크립트 작성 및 호출
  • 텍스트 편집기 위젯의 값을 사용하고 HTML 본문이 포함된 이메일 메시지 전송

앱 만들기

  1. 직장 또는 학교에서 제공한 G Suite 계정으로 로그인합니다.
  2. App Maker를 엽니다.
  3. 빈 앱을 만듭니다.
    • App Maker에 시작 대화상자가 표시되는 경우에는 새 앱 만들기를 클릭합니다.
    • 그렇지 않으면 메뉴 새로 만들기 빈 애플리케이션을 클릭합니다.
  4. 앱의 이름을 바꿉니다. 기본 이름인 제목 없는 앱을 삭제하고 보낸 사람를 입력합니다.

UI 만들기

다음과 같은 양식을 만듭니다.

Email Sender

이 UI를 만들려면 다음 안내를 따르세요.

  1. 페이지 이름을 바꿉니다.

    1. 왼쪽 사이드바에서 새 페이지 위로 마우스를 가져가서 더보기 이름 바꾸기를 클릭합니다.

    2. 이메일을 입력하고 확인을 클릭합니다.

  2. 수신자를 입력할 수 있는 텍스트 상자를 추가합니다.

    1. 위젯 을 클릭하고 캔버스 왼쪽 상단 모서리 근처로 텍스트 상자 텍스트 상자 위젯를 드래그합니다.

    2. 텍스트 상자의 길이를 늘리려면 오른쪽 핸들을 드래그합니다.

    3. 속성 편집기에서 텍스트 상자의 name 속성을 받는 사람으로 변경하고 label 속성에 받는 사람:을 입력합니다.

  3. 제목을 입력할 수 있는 텍스트 상자를 추가합니다.

    1. 위젯 을 클릭하고 받는 사람 텍스트 상자 아래로 텍스트 상자 텍스트 상자 위젯를 드래그합니다.

    2. 텍스트 상자의 길이를 늘리려면 오른쪽 핸들을 드래그합니다.

    3. 속성 편집기에서 텍스트 상자의 name 속성을 제목으로 변경하고 label 속성에 제목:을 입력합니다.

  4. 이메일 메시지 본문을 입력할 수 있는 텍스트 편집기를 추가합니다.

    1. 위젯 을 클릭하고 제목 텍스트 상자 아래로 텍스트 편집기 를 드래그합니다.

    2. 속성 편집기에서 텍스트 편집기의 name 속성을 메시지로 변경합니다.

  5. 사용자가 이메일 메시지를 보낼 때 클릭하는 버튼을 추가합니다.

    1. 위젯 에서 받는 사람 텍스트 상자 오른쪽에 있는 캔버스 위로 버튼 버튼 위젯을 드래그합니다. 버튼을 두 번 클릭하고 이메일 보내기로 이름을 바꿉니다.
  6. 사용자가 이메일 보내기 버튼을 클릭할 때 실행할 작업을 정의합니다.

    1. 이메일 보내기를 클릭합니다.

    2. 속성 편집기 버튼 섹션에서 onClick 속성을 클릭하고 커스텀 작업을 선택합니다.

    3. 자바스크립트를 사용하여 작업을 정의합니다. 클라이언트 스크립트 대화상자에서 다음 스크립트를 복사하여 붙여넣습니다.

          var widgets = widget.parent.descendants;
          var to = widgets.To.value;
          var subject = widgets.Subject.value;
          var msg = widgets.Msg.value;
          widgets.EmailStatus.text = 'Sending email...';
          sendMessage(to, subject, msg); 
      action에서 App Maker 객체 및 속성에 대한 다음 참조를 참고합니다.

      • widget.parent.descendants—이메일 보내기 버튼의 상위 위젯이 페이지의 최상위 패널입니다. 해당 패널의 하위 항목에는 페이지의 모든 위젯이 포함됩니다.
      • widgets.To.value, widgets.Subject.value, widgets.Msg.value, widgets.EmailStatus.text—3개 위젯의 value 속성과 4번째 위젯의 text 속성입니다.
    4. Esc 키를 눌러 대화상자를 닫습니다.

  7. 사용자가 양식의 모든 필드를 지울 때 클릭하는 버튼을 추가합니다.

    1. 위젯 에서 텍스트 편집기 아래에 있는 캔버스 위로 버튼 버튼 위젯을 드래그합니다. 버튼을 두 번 클릭하고 양식 지우기로 이름을 바꿉니다.
  8. 사용자가 양식 지우기 버튼을 클릭할 때 실행할 작업을 정의합니다.

    1. Clear Form을 클릭합니다.

    2. 속성 편집기 버튼 섹션에서 onClick 속성을 클릭하고 커스텀 작업을 선택합니다.

    3. 자바스크립트를 사용하여 작업을 정의합니다. 클라이언트 스크립트 대화상자에서 다음 스크립트를 복사하여 붙여넣습니다.

      clearEmailForm();

  9. 상태 라벨을 추가합니다.

    1. 위젯 에서 텍스트 상자 아래에 있는 캔버스 위로 라벨 라벨 위젯을 드래그합니다.

    2. 속성 편집기에서 name 속성을 이메일 상태로 설정합니다. text 속성을 삭제합니다.

  10. 닫기 를 클릭하여 위젯을 닫습니다.

앱에서 사용하는 스크립트에 대해 알아보기

이 단계에서는 앱이 이메일을 보내고 양식을 지우는 데 필요한 자바스크립트 함수를 복사하여 앱의 스크립트로 붙여넣습니다. 스크립트는 App Maker에서 스크립트 파일과 비슷한 컨테이너입니다.

  • 클라이언트 스크립트 - 브라우저의 자바스크립트 엔진이 실행하는 자바스크립트를 포함합니다.
  • 서버 스크립트 - App Maker 서버의 자바스크립트 엔진이 실행하는 자바스크립트를 포함합니다.

클라이언트 스크립트 함수

clearEmailForm

clearEmailForm 함수는 전체 이메일 양식을 지웁니다.

sendMessage

sendMessage 함수는 다음을 수행합니다.

  • sendEmailMessage 서버 스크립트를 호출하여 이메일 메시지를 보냅니다.
  • clearEmailForm 클라이언트 스크립트를 호출하여 이메일 양식을 지웁니다.

서버 스크립트 함수

sendEmailMessage

sendEmailMessage 서버 스크립트 함수는 MailApp.sendEmail 함수를 호출하여 이메일 메시지를 보냅니다. MailApp.sendEmailhtmlBody 옵션은 메시지 본문이 HTML임을 나타냅니다.

클라이언트 스크립트 만들기

  1. 클라이언트가 실행할 함수를 포함하는 클라이언트 스크립트를 만듭니다.

    1. 스크립트 위로 마우스를 가져가서 를 클릭하여 스크립트를 추가합니다.

    2. 스크립트 만들기 대화상자가 나타나면 클라이언트를 선택하고 샘플 코드 생성을 선택 해제한 후 만들기를 클릭합니다.

  2. 클라이언트 스크립트의 이름을 바꿉니다.

    1. 왼쪽 사이드바에서 새 스크립트 위로 마우스를 가져가서 더보기 이름 바꾸기를 클릭합니다.

    2. 클라이언트 스크립트를 입력하고 확인을 클릭합니다.

  3. 이 자바스크립트를 복사하여 클라이언트 스크립트에 붙여넣습니다.

    /**
        * Clears the entire email form
        */
        function clearEmailForm(){
          var formWidgets = app.pages.Email.descendants;
          formWidgets.EmailStatus.text = "";
          formWidgets.To.value = "";
          formWidgets.Subject.value = "";
          formWidgets.Msg.value = "";
        }
        /**
        * Sends an email message.
        * @param {string} to - Message recipient
        * @param {string} subject - Message subject
        * @param {string} msg - Body of message (HTML from Text Editor)
        */
        function sendMessage(to, subject, msg){
          var status = app.pages.Email.descendants.EmailStatus;
          google.script.run
           .withFailureHandler(function(error) {
              // An error occurred, so display an error message.
              status.text = error.message;
            })
          .withSuccessHandler(function(result) {
             // Report that the email was sent.
             status.text = 'Email sent...';
          clearEmailForm();
           })
         .sendEmailMessage(to, subject, msg);
        }
        

app.pages.Email.descendants라는 객체 참조를 확인하세요. 이는 Email 페이지의 하위 항목, 즉 모든 위젯에 해당하는 모든 객체를 참조합니다. 이 앱에서 이 참조는 Send Email 버튼의 onClick 작업에서 사용되는 것과 동일한 참조(widget.parent.descendants) 대신 사용할 수 있습니다. (이러한 참조의 동일 여부는 객체 계층구조에 따라 다릅니다.)

서버 스크립트 만들기

  1. 서버가 실행할 함수를 포함하는 서버 스크립트를 만듭니다.

    1. 스크립트 위로 마우스를 가져가서 를 클릭하여 스크립트를 추가합니다.

    2. 스크립트 만들기 대화상자가 나타나면 서버를 클릭하고 샘플 코드 생성을 선택 해제한 후 만들기를 클릭합니다.

  2. 서버 스크립트의 이름을 바꿉니다.

    1. 왼쪽 사이드바에서 새 스크립트 위로 마우스를 가져가서 더보기 이름 바꾸기를 클릭합니다.

    2. 서버 스크립트를 입력하고 확인을 클릭합니다.

  3. 이 자바스크립트를 복사하여 서버 스크립트에 붙여넣습니다.

     /**
          * Sends an email message.
          * @param {string} to - Message recipient
          * @param {string} subject - Message subject
          * @param {string} msg - Body of message (HTML from Text Editor)
          * The body of the message is not a complete HTML document. It
          * doesn't need to be. When calling MailApp.sendEmail, you do
          * need to specify the option htmlBody for the message body, so that
          * MailApp.sendEmail will include the correct Content-Type header.
          */
         function sendEmailMessage(to, subject, msg){
           MailApp.sendEmail(to, subject, msg, {htmlBody: msg});
         }
        

    수신자, 제목, 메시지가 실제로 이메일을 보내는 함수에 어떻게 전달되는지 확인하세요. 이메일 보내기 버튼의 onClick 속성에 정의된 작업이 클라이언트 스크립트에서 SendMessage 함수를 호출하여 수신자, 제목, 메시지를 함수에 전달합니다. SendMessage 함수가 이와 동일한 인수를 서버 스크립트의 sendEmailMessage 함수에 전달하여 MailApp.SendMail 함수에 인수를 전달합니다. MailApp.SendMail 함수가 이메일을 보냅니다.

앱 미리보기 및 테스트

이메일 보내기 앱이 작동하는 모습을 미리봅니다.

  1. 오른쪽 상단 모서리에서 미리보기를 클릭하여 새 브라우저 탭에서 앱을 실행합니다.
  2. 허용을 클릭하여 앱이 특정 정보를 사용하도록 허용합니다.
  3. 이메일 주소와 제목을 입력합니다.
  4. 텍스트 편집기에 간단한 메시지를 입력합니다.
  5. Clear Form을 클릭합니다. 이제 이전 단계를 반복해야 합니다.
  6. 이메일 주소와 제목을 입력합니다.
  7. 텍스트 편집기에 간단한 메시지를 입력합니다.
  8. 텍스트 편집기의 도구를 사용하여 메시지의 스타일을 지정합니다.
  9. 이메일 보내기를 클릭합니다. 이메일 보내기 앱이 이메일을 보내고 양식을 지웁니다.

수고하셨습니다. 이제 클라이언트 스크립트와 서버 스크립트를 사용하여 이메일을 보내는 App Maker 앱이 완성되었습니다.

다음 단계

  1. 가이드 5를 진행하여 관계에 대해 알아봅니다.
  2. App Maker 스크립트에 대해 자세히 알아봅니다.
  3. App Maker 샘플 목록의 다른 애플리케이션을 살펴봅니다.
  4. 이 가이드의 주요 개념에 대해 자세히 알아봅니다. 예를 들면 다음과 같습니다.

    • Apps Script에 대해 자세히 알아보기

    • 다양한 유형의 콜백에 대해 자세히 읽어보기