개요

Anvil는 파이톤으로 인코딩된 웹 기반의 종합 개발 환경이다.
하나의 항목은 다음과 같이 구성된다.

Anvil 프로젝트

CentCode(UI의 설계 및 코드)

Server Code(서버 측 코드)

서비스(DB 등)

이 구성을 이해하려면 DB의 기본 조작(CRUD)을 실현하는 강좌News Aggregator Tutorial를 빨리 배운다.
이 강좌의 항목을 조금 개조해 지적 문답집 응용으로 만들었기 때문에 당시 노트를 소개한다.

전제 조건

News Aggregator Tutorial라는 전제하에 설명한다(프로젝트를 제작하려면 Anvil에 서명해야 한다).
News Aggregator Tutor에서는 뉴스 데이터를 사용하지만, 이렇게 이 구조를 문답집 응용으로 사용했다.

수정점

이름 바꾸기

처리해야 할 데이터(구조가 같다)가 뉴스에서 수수께끼로 바뀌기 때문에 간단명료하게 이름을 바꿨다.

프로젝트 이름

무엇이든 좋습니다. 바로 "Quiz"입니다.

창 이름

ArticalleEdit에서 Question Edit

로 변경

ArticleView에서 QuestionView

로 변경

데이터 테이블 이름

"articles"에서 "questions"

로 변경

열 이름(및 관련 데이터 귀속)

"title"을 "question"

으로 변경

"conntent"를 "answer"

로 변경

기타 형식의 구성 요소와 이벤트 처리 프로그램 이름 등도 다음과 같이 변경되었다.

'articles' → 'questions'

'title' → 'question'

'content' → 'answer'

막힘이 없다면, 이후 데이터를 입력한 내용을'문제'와'응답'으로 설정하면 문답집 애플리케이션으로 활용할 수 있다.
그렇긴 한데, 신경 쓰이는 부분도 있어서 조금 더 개조해 봤어요.

QuestionView

QuestionView 형식이 다음과 같이 변경되었습니다.

질문 및 답안 탭 추가

'제목'과'보도본문'은'문제'와'응답'으로 사용되기 때문에'문제'와'응답'을 각각 표시하는 것이 좋겠다고 판단해 라벨을 추가했다.
방법은 Toolbox에서 Label을 끌어 놓는 것입니다.
Column Panel과 Flow Panel을 사용하여 레이아웃 디자인을 조정합니다(이상적이지는 않지만...).

답변 표시/숨기기

수수께끼지만 답은 동그랗기 때문에 답안을 표시하거나 숨기는 것을 선택했습니다.
Toolbox에서 CheckBox를 끌어 놓습니다. 이름은 answer_check입니다.
초기 상태는 오류 상태를 검사하는 것으로 change 이벤트가 추가되었습니다.

이벤트 처리 프로그램은 클릭할 때마다 답을 표시하거나 숨깁니다.
QuestionView

  def answer_check_change(self, **event_args):
    """This method is called when this checkbox is checked or unchecked"""
    self.answer_label.visible = self.answer_check.checked

응답자도 초기 상태를 숨겼다.

범주 초기값

튜토리얼만 그리면 새 기록을 만들 때 아무것도 하지 않고'SAVE'를 누르면 오류가 발생합니다.
카테고리는 외부 참조이지만 숫자 값이 없기 때문입니다.
논을 허용하는 방법과 폼을 닫기 전에 검증하는 방법을 몰라서 초기값을 주는 것(강행)으로 해결했다.
초기 값을 제공하려면 문제 단추를 만드는 이벤트 처리 프로그램 Homepage 은 다음과 같습니다.
수정 전
Homepage

  def add_question_button_click(self, **event_args):
    """This method is called when the button is clicked"""
    new_question = {}

    save_clicked = alert(
      ...

수정 후
Homepage

  def add_question_button_click(self, **event_args):
    """This method is called when the button is clicked"""
    default_category = anvil.server.call('default_category')  # 追加
    new_question = {'category': default_category}             # 変更

    save_clicked = alert(
      ...

서버 측 코드에 범주의 초기 값을 가져오는 함수를 추가합니다("Python"분류가 있을 때).
ServerModule1

@anvil.server.callable
def default_category():
  return app_tables.categories.get(name='Python')

버튼을 흐트러뜨리다

가능하다면 질문을 하나 내고 대답하면 다음 질문이 나올 거예요. 그렇게 하고 싶지만 개조의 범위를 넘어선 것 같아서 카드를 씻는 버튼으로 얼버무렸어요.
규격으로 아래와 같다.

카드 세탁 버튼을 눌렀을 때 카드 배열이 무작위입니다.

동시에 혼란 해제 버튼이 유효합니다.

스크램블 해제 버튼을 눌렀을 때 DB에서 받은 순서대로 한다.

혼란 해제 버튼이 무효가 됩니다.

편집 시 등은 DB에서 취득한 순서대로 한다.

혼란 해제 버튼이 무효가 됩니다.

버튼 추가

카드 세탁 버튼과 카드 세탁 해제 버튼이 추가돼 각각 shuffle_button과unshuffle_button였다.

코드의 추가, 변경

클릭 혼란 버튼 처리 프로그램
Homepage

  def shuffle_button_click(self, **event_args):
    questions = self.questions_panel.items
    self.questions_panel.items = random.sample(questions, len(questions))
    self.unshuffle_button.enabled = True

버튼의 클릭 처리 해제
Homepage

  def unshuffle_button_click(self, **event_args):
    self.refresh_questions()

refresh_questions() 방법(원래refresh articles()인 방법)도 변경
Homepage

  def refresh_questions(self):
    self.questions_panel.items = anvil.server.call('get_questions')
    self.unshuffle_button.enabled = False  # 追加

데모

이상의 변경에 따른 문답집 적용은 다음 URL에서 공개한다.
https://Z7NSR2ZWKFYP6CJK.anvil.app/OGKX5IPZ2SLK3TKVBPVJLZGH

감상

아직 쉽게 생각할 수 있는 느낌은 아니다.
자신의 생각대로 안빌의 UI를 설계하려면 길이 험할 것 같다.
UI를 최대한 활용하기보다는 다음 Anvil uplink 구조를 시도해 보십시오.
Anvil UPlink는 로컬에서 실행되는 모델 등을 웹을 통해 적용합니다(API 서버 느낌?).사용할 수 있는 구조인 것 같아요.

Uplink: Code outside Anvil

Turning a Jupyter notebook into a web app