코드 출현 기록

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


아래 복제 링크를 사용하여 앱의 사본을 만드십시오. 그런 다음 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