코드 출현 기록

Advent of Code은 다양한 기술 세트와 기술 수준을 위한 작은 프로그래밍 퍼즐의 강림절 달력입니다. 매년 매우 재미있고 전 세계의 개발자들이 참여합니다. Anvil 팀은 솔루션을 시연할 수 있는 간단한 앱clone을 제공하는 것이 멋질 것이라고 생각했습니다. 그래서 Advent of Code 로그는 다음과 같습니다.


아래 복제 링크를 사용하여 앱의 사본을 만드십시오. 그런 다음 publish 선택한 URL로 연결합니다. 예를 들어 우리는 anvils-advent-of-code-solutions.anvil.app에 게시했습니다.

Clone Link

그런 다음 매일 로그인하고 솔루션을 게시할 수 있습니다.

작동 방식은 다음과 같습니다.

이 앱은 만들기, 읽기, 업데이트 및 삭제 작업의 이름을 따서 명명된 CRUD 앱의 전형적인 예입니다.

(관심이 있는 경우 Anvil에서 CRUD 앱을 빌드하는 방법에 대한 엔드투엔드 워크스루news aggregator tutorial를 참조하십시오.)

앱의 프런트 엔드는 Form ( SolutionEdit )을 사용하여 사용자가 솔루션을 저장하고 업데이트할 수 있도록 합니다.

def log_solution_button_click(self, **event_args):
    """This method is called when the button is clicked"""
    # initialise an empty dictionary which we'll use to record user inputs
    solution_dict = {}
    # Open an alert displaying the 'SolutionEdit' Form
    # set the `self.item` property of the SolutionEdit Form to new_solution
    # Only add the solution to the Data Table if the 'Save' button is clicked
    # if the 'Cancel' button is clicked, discard new_article
    if alert(
      content=SolutionEdit(item=solution_dict),
      large=True, 
      buttons=[]
    ):      
      # Add the article to the Data Table is the user clicks 'Save'
      anvil.server.call('save_solution', solution_dict)
      # Refresh articles to show the new article on the Homepage
      self.refresh_solutions()

서버 모듈에는 save_solution(...) 와 같이 앱의 data tables 에 저장된 데이터를 읽고 업데이트하거나 삭제하는 모든 기능이 포함되어 있습니다.

@anvil.server.callable(require_user=True)
def save_solution(solution_dict):
  current_user = anvil.users.get_user()
  app_tables.solutions.add_row(
    created_date=datetime.now(),
    **solution_dict
  )

다음은 스타일링입니다. Assets의 <style> 파일 상단에 있는 Homepage.html 태그는 Homepage 양식의 배경을 설정합니다.

<style type="text/css">
  body {
    background: url("_/theme/background.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
</style>

구성 요소properties를 사용하면 기존 명령줄 스타일과 일치하도록 텍스트 색상을 #00FF00로 설정할 수 있습니다.

마지막으로 팝업 모달을 반투명하게 만들고 아래 항목을 흐리게 하기 위해 background-color 클래스의 background-filter 및 modal-content가 theme.css에 설정됩니다.

.modal-content {
  background-color: rgba(0, 0, 0, .3);
  backdrop-filter: blur(2px);
  color: #00FF00;
}

그게 전부입니다! 이제 코드 솔루션의 출현을 기록할 수 있는 앱이 생겼습니다!

소스 코드를 확인하고 자신의 솔루션 로깅을 시작하십시오.

아래 복제 링크를 사용하여 앱의 복사본을 만들고 작동 방식을 확인하세요. 그런 다음 선택한 URL에 게시합니다. 게시된 앱은 자체 솔루션 포트폴리오가 될 수 있습니다!

Clone Link