스크립팅 개요

App Maker를 사용하면 코딩 없이도 상대적으로 복잡한 앱을 만들 수 있지만 위젯 및 모델 편집기만으로는 제공할 수 없는 기능이 필요한 경우도 있습니다. App Maker의 자바스크립트 스크립트 편집기가 필요한 기능을 구현하는 데 도움이 될 수 있습니다.

App Maker에는 두 가지 유형의 스크립트가 있습니다. 하나는 사용자의 브라우저에서 실행되는 클라이언트 스크립트이고 다른 하나는 App Maker 서버에서 실행되는 서버 스크립트입니다. 다음은 App Maker에서 스크립트를 사용하여 수행할 수 있는 작업에 대한 예입니다.

  • 앱별 로직 및 계산 수행
  • 외부 웹 서비스에 연결
  • 커스텀 권한 검사 만들기
  • 기타

클라이언트 및 서버 스크립트

클라이언트 스크립트와 서버 스크립트 모두 자바스크립트를 실행하지만 사용 위치와 작동 방식은 서로 다릅니다.

클라이언트 스크립트 요약 정보

  • 클라이언트 스크립트는 사용자 브라우저에서 실행됩니다. DOM, 브라우저 로컬 스토리지 등에 액세스할 수 있습니다.
  • 클라이언트 스크립트는 위젯 속성을 수정할 수 있습니다. App Maker는 위젯을 자바스크립트 객체로 노출하므로 디자인, 이벤트, 기타 속성을 프로그래매틱 방식으로 변경할 수 있습니다.
  • 클라이언트 스크립트는 브라우저를 차단합니다. 앱의 응답성을 유지하려면 클라이언트 스크립트에서 복잡한 계산 작업을 하지 않아야 합니다.

  • 클라이언트 API는 비동기식입니다. 일부 클라이언트 스크립트 호출은 순서대로 실행되지 않습니다. 세부정보는 아래의 데이터 모델 작업 모델 예를 참조하세요.

  • 클라이언트 스크립트는 보안에 취약합니다. 고급 사용자는 브라우저 도구를 사용하여 클라이언트 스크립트를 보고 변경할 수 있습니다. 데이터 보안 또는 일관성을 위해 클라이언트 스크립트를 사용하지 마세요.

서버 스크립트 요약 정보

  • 서버 스크립트는 Apps Script에서 실행됩니다. 데이터베이스에 직접 액세스할 수 있고 캘린더, 이메일 등과 같은 Apps Script API를 사용할 수 있습니다.
  • 서버 스크립트는 요청 간에 상태를 유지하지 않습니다. 분산 서버에서 실행되므로 스크립트를 호출할 때마다 전역 변수가 비어 있습니다.
  • 서버 스크립트에는 경우에 따라 할당량이 적용됩니다. Apps Script 서비스에 대한 호출은 일일 할당량에 따라 제한됩니다.
  • 서버 스크립트는 보안 설정을 할 수 있습니다. 클라이언트 스크립트와 달리 민감한 데이터에 대한 액세스를 제어하도록 서버 스크립트를 신뢰할 수 있습니다. 감사를 수행하고 데이터 일관성을 적용하려면 서버 스크립트를 사용하세요.

스크립트 예

클라이언트 스크립트와 서버 스크립트의 차이점을 이해하는 가장 쉬운 방법은 예시를 참조하는 것입니다. 아래 스크립트는 할 일 목록 앱에서 가져온 것입니다. 사용자는 이 앱에서 여러 할 일 목록과 목록 각각에 대해 여러 할 일 항목을 만들 수 있습니다.

클라이언트: 페이지 및 위젯과 상호작용

DeleteTodoListButtononClick 스크립트는 사용자가 버튼을 클릭하면 확인 페이지로 전환됩니다.

    app.showPage(app.pages.DeleteTodoListConfirmationView);
    

클라이언트: 속성 결합 구현

이 스크립트는 DeleteTodoListButtonenabled 속성에 대한 결합 표현식입니다. 버튼은 목록에 할 일 항목이 없는 경우에만 사용 설정되므로 사용자는 비어 있는 할 일 목록만 삭제할 수 있습니다.

    @datasource.item != null && @datasource.item.TodoItems.length == 0
    

클라이언트 및 서버: 데이터 모델 작업

클라이언트:

이 스크립트는 새 할 일 목록을 만들고 선택합니다. 먼저 서버 스크립트를 호출하여 새 목록 레코드를 만든 다음 TodoList 모델을 다시 로드한 후 마지막으로 새로 만든 목록을 선택합니다.

    function onCreateTodoListClick() {
      var datasource = app.datasources.TodoList;
      google.script.run.withSuccessHandler(function(newKey) {

        // When created, redisplay todo lists.
        datasource.load(function() {

          // When reloaded, select new todo list.
          datasource.selectKey(newKey);
        });
      }).createTodoListWithItem();
    }
    

코드가 위의 작업 순서와 일치하지 않는 것을 알 수 있을 것입니다. 이는 이 스크립트가 많은 클라이언트 스크립트와 마찬가지로 비동기식으로 실행되기 때문입니다. 스크립트는 createTodoListWithItem()을 실행한 다음 load()를 실행할 수 없습니다. 둘 모두 비동기식이므로 데이터 소스가 다시 로드되기 전에 새 할 일 목록이 생성된다는 보장이 없기 때문입니다.

대신 createTodoListWithItem()이 할 일 목록 항목이 성공적으로 생성된 후에만 실행되는 콜백을 사용하여 load()를 호출합니다. 비동기 스크립트 및 콜백에 대한 자세한 내용은 클라이언트 스크립트를 참조하세요.

서버:

이 서버 스크립트는 위의 클라이언트 스크립트에서 호출된 createTodoListWithItem()입니다. 이는 앱의 데이터베이스에 액세스하여 새 할 일 목록과 해당 목록에 항목을 만든 다음 목록의 Key를 반환합니다.

    function createTodoListWithItem() {
      // Automatically number todo lists for the user.
      var lock = LockService.getScriptLock();
      lock.waitLock(10000);
      var query = app.models.TodoList.newQuery();
      var allTodoLists = query.run();
      var todoList = app.models.TodoList.newRecord();
      var newListNumber = allTodoLists.length + 1;
      todoList.name = "My list " + newListNumber;
      app.saveRecords([todoList]);
      lock.releaseLock();

      // Create first todo item for user convenience.
      var todoItem = app.models.TodoItem.newRecord();
      todoItem.TodoList = todoList;
      app.saveRecords([todoItem]);
      return todoList._key;
    }
    

서버 스크립트는 데이터를 자동으로 저장하지 않으므로 스크립트에서 saveRecords()를 호출하여 변경사항을 모델에 저장합니다. 레코드를 만들거나 편집하는 스크립트를 작성할 때 같은 방식이 적용되어야 합니다.

또한 스크립트는 데이터 일관성을 보장하기 위해 잠금을 사용합니다. 잠금에 대한 자세한 내용은 서버 스크립트를 참조하세요.

서버: 보안, 감사, 데이터 일관성

서버 스크립트를 사용하면 데이터의 일관성과 보안을 유지할 수 있습니다. 위의 스크립트에서는 잠금 서비스를 사용하여 쿼리의 개별성을 실현하고 작업을 만들었습니다.

특정 모델 이벤트를 허용하지 않도록 예외를 사용하여 커스텀 권한을 구현할 수도 있습니다. 예를 들어 모델의 onDelete() 이벤트에 다음을 추가하면 레코드 삭제가 방지됩니다.

    throw "Deletions now allowed";
    

또한 onCreate() 핸들러를 사용하여 감사를 만들 수도 있습니다.

    var email = Session.getActiveUser().getEmail();
    record.setAudit("Created on " + new Date() + " by user " + email + "\n");
    

클라이언트 및 서버: 다른 URL에서 데이터 가져오기

클라이언트:

XMLHttpRequest 또는 App Maker의 HtmlArea 위젯을 사용하여 IFRAME을 삽입합니다.

서버:

Apps Script의 URL 가져오기 서비스를 사용합니다.

클라이언트: 커스텀 자바스크립트 라이브러리 통합

라이브러리에 따라 외부 자바스크립트 라이브러리를 로드하는 방법은 두 가지가 있습니다.

스크립트 검증용 JSHint

App Maker는 일부 JSHint 지시어를 지원합니다. 예를 들어 ignore 지시문을 사용하면 코드 블록에 대한 정적 검사 도구를 사용 중지할 수 있습니다.

/* jshint unused: true, eqnull: false */
    var w = 3;   // Warning: w is defined but never used.
    alert(10 == null); // Warning: use '===' to compare with 'null'.

    /* jshint ignore:start */
    var y = 4;     // No warning.
    alert(10 == null); //  No warning.
    /* jshint ignore:end */

    var a = 5;   // Warning: a is defined but never used.
    alert(10 == null); // Warning: use '===' to compare with 'null'.
    

JSHint에 대한 자세한 내용은 JSHint 문서를 참조하세요.