(26.7.22.)진해남중학교 워크샵 연수

지금부터 구글앱스스크립트를 이용해 웹앱을 만들 거야. 다음을 주의해 줘.

1. 파일명은 code.gs, index.html이고, 활성화된 시트의 이름은 Sheet1이야. 작업하는 동안 파일명, 시트 이름을 절대로 바꾸지 말 것

2. 시트는 특정한 id로 여는 것이 아닌, 활성 스프레드시트를 여는 방식으로 작업 내내 유지할 것

3. 너의 역할은 주로 코드를 짜 주는 것이야. 구글앱스스크립트 배포에 관해서는 이미 아니까 설명하지 말 것

4. 이 웹앱은 모바일 전용 웹앱이야. 작은 스마트폰에서 보기에 최적의 너비와 글꼴 크기로 만들어줘.

[구글 앱스 스크립트 웹앱 전용 안전 규칙]
1. 웹앱 배포 전이거나 최초 실행 시 발생할 수 있는 구글 권한(OAuth) 오류에 대비하여, 백엔드와 프론트엔드의 주요 통신부(ScriptApp 및 SpreadsheetApp 호출부)는 반드시 try-catch 예외 처리를 적용할 것.
2. google.script.run 통신 시 서버 측 에러가 발생하더라도 프론트엔드가 무한 대기(Hang) 상태에 빠지지 않도록, 반드시 .withFailureHandler()를 구현하고 사용자에게 alert()이나 텍스트로 구체적인 에러 메시지를 즉시 표시할 것.
3. 로컬 테스트나 구글 다중 계정 로그인 환경에서 브라우저 스크립트가 먹통이 되는 현상을 예방하기 위해, window.onerror 전역 오류 감지기를 HTML 상단에 포함하여 치명적 오류 발생 시 화면에 디버깅 팝업을 띄울 것.
4. 사용자가 코드 적용 후 헤매지 않도록, 최초 배포 시 필요한 설정 값(실행 주체: 나, 액세스 권한: 모든 사람)과 구글 권한 승인 단계를 안내하는 짧은 가이드를 함께 제공할 것.

이해했으면 대기해

지금부터 구글앱스스크립트를 이용해 웹앱을 만들 거야. 다음을 주의해 줘.

1. 파일명은 code.gs, index.html이고, 활성화된 시트의 이름은 Sheet1이야. 작업하는 동안 파일명, 시트 이름을 절대로 바꾸지 말 것

2. 시트는 특정한 id로 여는 것이 아닌, 활성 스프레드시트를 여는 방식으로 작업 내내 유지할 것

3. 너의 역할은 주로 코드를 짜 주는 것이야. 구글앱스스크립트 배포에 관해서는 이미 아니까 설명하지 말 것

4. 이 웹앱은 모바일 전용 웹앱이야. 작은 스마트폰에서 보기에 최적의 너비와 글꼴 크기로 만들어줘.

[구글 앱스 스크립트 웹앱 전용 안전 규칙]
1. 웹앱 배포 전이거나 최초 실행 시 발생할 수 있는 구글 권한(OAuth) 오류에 대비하여, 백엔드와 프론트엔드의 주요 통신부(ScriptApp 및 SpreadsheetApp 호출부)는 반드시 try-catch 예외 처리를 적용할 것.
2. google.script.run 통신 시 서버 측 에러가 발생하더라도 프론트엔드가 무한 대기(Hang) 상태에 빠지지 않도록, 반드시 .withFailureHandler()를 구현하고 사용자에게 alert()이나 텍스트로 구체적인 에러 메시지를 즉시 표시할 것.
3. 로컬 테스트나 구글 다중 계정 로그인 환경에서 브라우저 스크립트가 먹통이 되는 현상을 예방하기 위해, window.onerror 전역 오류 감지기를 HTML 상단에 포함하여 치명적 오류 발생 시 화면에 디버깅 팝업을 띄울 것.
4. 사용자가 코드 적용 후 헤매지 않도록, 최초 배포 시 필요한 설정 값(실행 주체: 나, 액세스 권한: 모든 사람)과 구글 권한 승인 단계를 안내하는 짧은 가이드를 함께 제공할 것.

이해했으면 대기해

[제목] 실시간 생각 나눔 보드

[버튼] 학생 접속용 QR 코드
- 누르면 아래에 이 웹앱으로 연결되는 QR 코드가 나타나고, 다시 누르면 닫히게 해줘.

[입력 폼]
- 가로로 나란히 반반씩 배치:
  * 왼쪽: 학번 (비공개, 예: 20101) 
  * 오른쪽: 닉네임 (공개, 예: 호랑이)
- 그 아래 넓은 입력창:
  * 나누고 싶은 생각이나 질문 (엔터 쳐서 여러 줄 입력 가능하게)
- 맨 아래 제출 버튼:
  * [의견 올리기]
  * (동작 센스): 버튼을 누르면 글이 즉시 등록되고 아래 게시판이 새로고침되게 해줘. 등록하는 동안에는 버튼 글자를 "전송 중..."으로 바꾸고 여러 번 중복으로 눌리지 않게 막아줘.
  * (작성 편의): 등록이 성공적으로 끝나면 다음 글 작성이 편하도록 학번과 닉네임은 입력된 그대로 두고, '생각이나 질문' 입력창만 깨끗이 비워줘.

[게시판 헤더]
- 왼쪽에는 "실시간 우리반 게시판", 오른쪽에는 "🔄 새로고침" 버튼 배치

[게시판 영역]
- 학생들이 올린 글이 아래쪽에 예쁜 카드 형태로 쌓이게 해줘 (가장 최신 글이 맨 위로 오도록).
- 개인정보 보호를 위해 카드에는 "학번"은 절대 노출하지 말고, "익명(닉네임)"과 "입력한 내용"만 표시해줘.

[백엔드 및 저장]
- 학생이 제출하면 내 구글 스프레드시트('Sheet1')에 [등록 시간, 학번, 닉네임, 내용] 순서로 한 줄씩 차곡차곡 저장되게 해줘.
- 혹시 구글 권한이나 네트워크 문제로 등록에 실패하면, 사용자가 알 수 있도록 "어떤 에러 때문에 실패했는지" 화면에 친절하게 경고창(alert)으로 띄워줘.

[제목] 실시간 생각 나눔 보드

[버튼] 학생 접속용 QR 코드
- 누르면 아래에 이 웹앱으로 연결되는 QR 코드가 나타나고, 다시 누르면 닫히게 해줘.

[입력 폼]
- 가로로 나란히 반반씩 배치:
  * 왼쪽: 학번 (비공개, 예: 20101) 
  * 오른쪽: 닉네임 (공개, 예: 호랑이)
- 그 아래 넓은 입력창:
  * 나누고 싶은 생각이나 질문 (엔터 쳐서 여러 줄 입력 가능하게)
- 맨 아래 제출 버튼:
  * [의견 올리기]
  * (동작 센스): 버튼을 누르면 글이 즉시 등록되고 아래 게시판이 새로고침되게 해줘. 등록하는 동안에는 버튼 글자를 "전송 중..."으로 바꾸고 여러 번 중복으로 눌리지 않게 막아줘.
  * (작성 편의): 등록이 성공적으로 끝나면 다음 글 작성이 편하도록 학번과 닉네임은 입력된 그대로 두고, '생각이나 질문' 입력창만 깨끗이 비워줘.

[게시판 헤더]
- 왼쪽에는 "실시간 우리반 게시판", 오른쪽에는 "🔄 새로고침" 버튼 배치

[게시판 영역]
- 학생들이 올린 글이 아래쪽에 예쁜 카드 형태로 쌓이게 해줘 (가장 최신 글이 맨 위로 오도록).
- 개인정보 보호를 위해 카드에는 "학번"은 절대 노출하지 말고, "익명(닉네임)"과 "입력한 내용"만 표시해줘.

[백엔드 및 저장]
- 학생이 제출하면 내 구글 스프레드시트('Sheet1')에 [등록 시간, 학번, 닉네임, 내용] 순서로 한 줄씩 차곡차곡 저장되게 해줘.
- 혹시 구글 권한이나 네트워크 문제로 등록에 실패하면, 사용자가 알 수 있도록 "어떤 에러 때문에 실패했는지" 화면에 친절하게 경고창(alert)으로 띄워줘.