가이드 1: Hello App Maker!

버튼 위젯 기본 App Maker 기술

10~15분

빌드할 앱

간단한 Hello World 앱을 제작합니다. 이 앱은 이름을 입력으로 사용하고 커스텀 인사 메시지를 표시하여 버튼 클릭에 응답합니다.

학습 내용

이 가이드에서는 다음을 수행하는 방법을 교육합니다.

  • 앱 만들기 및 이름 바꾸기
  • 위젯 팔레트 및 페이지 편집기를 사용하여 텍스트 상자 및 버튼과 같은 UI 요소 추가
  • 속성 편집기를 사용하여 위젯의 속성 설정
  • 버튼을 마우스로 클릭하면 응답하는 자바스크립트 코드 추가. 자바스크립트 알림 상자를 사용한 방법과 속성 할당을 사용한 방법을 포함한 두 가지 방법을 설명합니다.
  • 앱 미리 보기 및 테스트

앱 만들기

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

페이지 이름 바꾸기

App Maker의 페이지는 앱의 페이지가 되며 기존의 웹페이지와 유사합니다. 페이지는 양식, 표, 버튼, 차트와 같은 UI 요소의 상위 컨테이너 역할을 합니다.

새로운 빈 앱에는 항상 새 페이지라는 빈 페이지가 포함되어 있습니다. 이 앱에는 한 페이지만 있으면 됩니다.

페이지 이름을 바꿉니다.

  1. 왼쪽 사이드바의 새 페이지 옆에 있는 더보기 , 이름 바꾸기를 차례로 클릭합니다.
  2. HelloPage를 입력하고 확인을 클릭합니다.

위젯 추가 및 속성 설정

위젯이란 하나의 앱을 이루는 UI 조각을 말합니다. 예를 들어 라벨 지정, 데이터 수락 및 표시, 페이지 탐색 설정 등이 있습니다.

이 단계에서는 위젯 을 사용하여 HelloPage에 위젯 두 개를 추가합니다. 위젯을 추가할 때는 편집기 를 선택하면 표시되는 속성 편집기에서 속성을 설정합니다.

다음과 같은 페이지를 만듭니다.

Hello App Maker

  1. 사용자 입력용 텍스트 상자를 추가합니다.
    1. 위젯 을 클릭하고 캔버스(페이지 편집기 중앙에 있는 영역) 왼쪽 상단 모서리 근처로 텍스트 상자 텍스트 상자 위젯를 드래그합니다. 속성 편집기의 레이아웃에서 정확한 위치를 볼 수 있습니다.
    2. 텍스트 상자의 너비를 늘리려면 오른쪽 텍스트 상자 핸들을 오른쪽으로 드래그합니다.
    3. 속성 편집기에서 name 속성을 내 이름으로 변경합니다.
    4. 앱 사용자가 수행할 작업을 알 수 있도록 label 속성에 내 이름 입력을 입력합니다.
  2. 사용자가 클릭할 수 있는 버튼을 추가합니다.
    1. 위젯 에서 새로 생성된 텍스트 상자의 오른쪽으로 버튼 버튼 위젯을 드래그합니다.
    2. 버튼과 텍스트 상자의 아래쪽 모서리를 수직으로 맞춥니다. 위젯을 드래그하면 정렬을 표시하는 파란색 선을 볼 수 있습니다.
    3. 버튼을 두 번 클릭하고 텍스트를 Say Hello로 변경합니다.
  3. 사용자가 버튼을 클릭할 때 실행할 작업을 정의합니다.
    1. Say Hello 버튼을 클릭합니다.
    2. 속성 편집기 버튼 섹션에서 onClick 속성을 클릭하고 커스텀 작업을 선택합니다.
    3. 자바스크립트를 사용하여 작업을 정의합니다. 이 경우에는 사용자가 버튼을 클릭할 때 실행할 작업을 정의합니다. 이 스크립트를 복사하여 클라이언트 스크립트 대화상자에 붙여넣습니다.
      alert("Hello " + app.pages.HelloPage.descendants.YourName.value + "!");
      자바스크립트 알림 상자가 YourName 텍스트 상자의 value 속성을 참조합니다.
    4. 완료를 클릭하여 변경사항을 저장하고 대화상자를 닫습니다.

이제 앱이 완성되어 테스트할 수 있습니다.

앱 미리보기 및 테스트

이제 앱을 미리 볼 수 있습니다. 미리보기는 사용자만 액세스할 수 있는 완전한 기능의 앱입니다.

  1. 오른쪽 상단 모서리에서 미리보기를 클릭합니다. 앱이 새 브라우저 탭에서 열립니다.
  2. 허용을 클릭하여 앱이 사용자의 정보를 사용하도록 허용합니다.

    앱을 처음으로 미리볼 때, 그리고 나중에 앱의 기능을 변경할 때 앱이 특정 정보를 사용하도록 허용할지 묻는 메시지가 표시됩니다.

    앱 위(화면 상단)에는 앱 페이지를 탐색할 수 있는 페이지 메뉴가 있습니다. 기본적으로 게시된 앱에는 페이지 메뉴가 없습니다.

    앱 아래에는 런타임 메시지를 보고 링크를 클릭하여 서버 로그를 볼 수 있는 콘솔이 있습니다.

  3. 내 이름 입력 텍스트 상자에 자신의 이름을 입력하고 Say Hello를 클릭합니다.

  4. 알림 상자가 나타나면 확인을 클릭하여 닫습니다.

수고하셨습니다. 이제 App Maker 앱이 완성되었습니다.

출력에 속성 할당 사용(선택사항)

이 단계에서는 자바스크립트 알림 상자를 사용하는 대신 앱 UI에 출력을 표시하여 앱을 수정합니다. 출력에는 라벨 위젯을 사용하고, 입력을 참조할 때는 자바스크립트의 속성 할당을 사용합니다.

  1. Hello App Maker 출력의 라벨을 추가합니다.
    1. 위젯 에서 텍스트 상자 아래로 라벨 버튼 위젯을 드래그합니다. 라벨과 텍스트 상자의 왼쪽 가장자리를 수평으로 맞춥니다.
    2. 속성 편집기에서 name 속성을 출력으로 변경합니다.
    3. text 속성에서 라벨을 삭제합니다.
  2. 사용자의 입력을 받아 라벨을 통해 출력하도록 Say Hello 버튼의 onClick 작업을 수정합니다.
    1. Say Hello를 클릭합니다.
    2. onClick 속성을 클릭하고 커스텀 작업을 선택합니다. 클라이언트 스크립트 대화상자가 나타나면 현재 작업을 삭제하고 다음 코드 스니펫 중 하나로 바꿉니다.
      • 가장 간단한 방법 - 단일 자바스크립트 할당 문을 사용하여 출력 위젯의 text 속성에 입력 위젯의 value 속성을 할당합니다.
            widget.root.descendants.Output.text = "Hello, " +
            widget.root.descendants.YourName.value + "!";
      • 좀 더 복잡한 방법(null 사례 처리용) - 변수에서 입력 및 출력 위젯을 참조하고 null 사례를 테스트한 후 출력 위젯의 text 속성을 할당합니다.
            // Define variables for the input and output widgets
            var nameWidget = app.pages.HelloPage.descendants.YourName;
            var outputWidget = app.pages.HelloPage.descendants.Output;
            // If a name is supplied, say hello to it.
            // Otherwise, just say 'Hello!'
            if (nameWidget.value) {
            outputWidget.text = 'Hello, ' + nameWidget.value + '!';
            } else {
            outputWidget.text = 'Hello!';
            } 
      • 완료를 클릭하여 변경사항을 저장하고 대화상자를 닫습니다.
  3. 수정된 앱을 미리보고 테스트합니다.
    1. App Maker의 오른쪽 상단 모서리에서 미리보기를 클릭합니다.
    2. 텍스트 상자에 자신의 이름을 입력하고 Say Hello를 클릭합니다. 라벨 위젯이 인사 메시지를 표시합니다.
  4. Hello App Maker 앱이 실행되고 있는 탭을 닫습니다. App Maker가 있는 탭을 열어 둡니다.

다음 단계

  1. 가이드 2 진행 - 간단한 직원 데이터베이스 앱을 제작하고 데이터 모델, 양식, 테이블에 대해 알아봅니다.
  2. 샘플 앱 연구 - Hello App Maker! 샘플은 이 가이드와 동일한 작업 과정을 거치지만 카드가 캔버스에 배치된 후 다른 위젯을 배치한다는 한 가지 차이점이 있습니다. 이 카드를 사용하여 UI 스타일을 지정할 수 있습니다.