보통 웹 앱을 만드는 건 프론트엔드, 백엔드의 개발을 요구하는데 이때 각 파트에서 필요한 개발 능력 및 언어상황이 다른 경우가 많아서 1인 개발의 난이도를 높이게 된다.
Anvil(링크)은 이러한 문제점을 극복하고 웹 앱의 개발 난이도를 대폭 낮출 수 있을 것으로 보이는 개발 툴인데, 온라인 drag-and-drop 디자인 에디터에서부터 이벤트 핸들링, DB연동, 웹 페이지 배포에 이르는 방대한 범위를 모조리 파이썬으로 묶어버리는 변태 같은 툴이다.
오늘은 이러한 Anvil 의 Tutorial(링크)중 하나를 따라가면서 사용자 설문을 제출받아서 DB에 저장하는 간단한 웹 애플리케이션을 만들어보고, 해당 프레임워크의 사용 편의성을 체험해 본다.
Anvil - Make a feedback submission page
가장 먼저, 튜토리얼의 사용을 위해서는 https://anvil.works/ 의 링크에 접속해서 상단의 "Start Building" 버튼을 클릭하고, 회원가입을 진행해 준다.
Anvil에서 제공하는 드래그-앤-드롭 방식의 개발 UI를 사용하려면 회원가입 및 웹 접속이 필요하지만, Anvil은 Open-Source 프로젝트(링크)로 UI를 제외하고 나머지 웹앱 제작 기능들은 전부 공개되어 있다. 따라서 숙련된 개발자의 경우 차후 독자적인 개발도 용이한 형태라고 할 수 있겠다.
0. Start Project
회원가입을 완료했다면, https://anvil.works/build로 이동해서, 아래의 그림과 같이 프로젝트 관리페이지에 접속하자.
그런 다음, Blank App을 클릭하고, 위의 Material Design 3 템플릿을 선택해 준다. 템플릿은 무엇으로 하나 무방할 것으로 생각하지만, 본 포스팅에서 하고자 하는 기능과 달라질 수 있는 점은 주의.
1. Anvil Web Developer UI - 프론트엔드
1 - 1. 화면 구성하기
프로젝트를 생성한 이후 가장 먼저 아래와 같은 빈 화면을 볼 수 있다.
사용자가 피드백을 작성하여 제출할 수 있도록 하는 게 본 프로젝트의 목적이므로, 글 작성 인터페이스가 자리할 수 있는 공간을 먼저 추가해 준다.
이제 해당 카드에 타이틀이 될 레이블 컴포넌트를 넣고, 텍스트를 할당해 준 다음, 역할을 헤드라인으로 바꿔서 제목을 만들어준다.
1 - 2. 사용자 정보 및 설문 작성란 Element 추가하기
위의 과정까지 해서 타이틀과 배경을 만들었으니, 이제 제출받을 정보란의 양식을 작성한다. 위의 제목과 같이 먼저 레이블들을 추가해서 양식 항목에 대한 설명을 만들고, 그다음 그 옆에 텍스트박스를 추가해서 글을 쓸 수 있도록 해주겠다.
위의 실행 예시에서 볼 수 있듯이, 각 텍스트 레이블과 입력 텍스트 박스는 직관적으로 드래그 방식의 크기 조절등이 가능하다.
마지막으로, 작성이 끝나면 이걸 서버로 제출하도록 하는 제출 버튼을 추가해 준다.
2. DB 연결하기
2-1. Anvil에서 제공하는 DB 테이블 만들기
Anvil은 무료 사용자에게도 일정 크기의 클라우드 DB를 제공해 준다. 물론 한계가 있기 때문에 제대로 사용할 예정이면 Uplink 튜토리얼(링크)을 통해서 외부에 구축된 별도의 DB를 연동시키는 것이 좋겠다.
Anvil에서 DB를 만들기는 엑셀 시트 한장 추가하는 정도의 난이도로, 아래와 같이 몇번의 클릭을 통해 간단히 새로운 DB 테이블을 만든 다음
아까 서식에 지정해둔, Name, Mail, Feedback 및 설문 생성 타임스탬프가 들어갈 스키마를 짜준다.
3. 백엔드 서버 기능 정의하기
이제 데이터를 입력할 UI와 그 데이터가 저장 될 DB를 마련했으니 그 다음은 UI로부터 DB로 이어지는 데이터의 흐름을 백엔드에 정의해줄 차례다.
Anvil은 자체적으로 backend python 인터프리터도 지원하는데, 마찬가지로 이 부분은 차후 외부 프로세스와 연동시킬 수 있다. 만약 Anvil의 빌트인 서버에 커스텀 모듈이 설치된 파이썬 환경을 사용하고 싶다면 유료 결제를 수행해야한다.
위의 코드블럭은 anvil의 데코레이터로 server.callable 래핑하여 함수로 넘어오는 name, email, feedback 인자들을 이전 단계에서 정의한 "feedbacks" DB 테이블에 추가시켜주는 함수다. (데코레이터란? - 2023.03.05 - [잡지식 저장고/Python] - 데코레이터란 : Python Decorator 예시집 - 1)
from datetime import datetime
@anvil.server.callable
def add_feedback(name, email, feedback):
app_tables.feedbacks.add_row(
Name=name,
Mail=email,
Feedback=feedback,
Created=datetime.now()
)위의 코드블럭을 server code 모듈에 아래와 같이 간단히 추가시키면
서버측의 백엔드 준비도 완료되었다.
4. 프론트엔드-백엔드 연동하기
이제 재료들은 다 준비가 되었으니, 프론트엔드 UI에 백엔드 연동을 위한 버튼 함수를 구성해주면 웹앱의 개발이 마무리 된다.
버튼에 함수를 할당하는것도 간단하다. 아래와 같이 버튼의 properties란에 click에 해당하는 메소드를 추가해주면, 클릭 이벤트에 대해 핸들링 함수를 추가할 수 있다.
자 이제 이 버튼을 클릭하면 아까 정의해둔 백엔드 함수에 현재 UI 입력값을 넘겨준 다음 UI를 초기화하는 코드를 작성해보자. 아래와 같이 코드 블럭을 변형하면 되는데,
이렇게 생긴 부분을
...
def submit_button_click(self, **event_args):
"""This method is called when the button is clicked"""
pass
...↓
...
def clear_inputs(self):
# Clear our three text boxes
self.text_box_1.text = ""
self.text_box_2.text = ""
self.text_area_1.text = ""
def submit_button_click(self, **event_args):
name = self.text_box_1.text
email = self.text_box_2.text
feedback = self.text_area_1.text
anvil.server.call('add_feedback', name, email, feedback)
Notification("Feedback submitted!").show()
# Call your 'clear_inputs' method to clear the boxes
self.clear_inputs()
...위와 같이 변형하면 된다. 위의 self.text_box_1 ~ self_text_area_1 등은 아까 UI에 추가한 입력 박스들의 name인데 properties 수정을 통해서 더욱 직관적인 이름으로 바꿔주면 좋다.
5. 서버 실행하기
이제 모든게 준비되었으니 서버를 실행해보자. 상단에 항상 떠있는 Run 버튼을 눌러주기만 하면 바로 서버가 실행된다.
실행된 서버에 이름과 메일, 피드백 내용을 채워넣고 submit 버튼을 누르면
DB에 성공적으로 내가 기입한 내용이 기록된 것을 확인할 수 있다! 아마추어 웹 앱 개발을 해본 사람이라면 이 블로그 글 한 페이지 만에 풀 스택이(간단한 어플리케이션이더라도) 완성된게 얼마나 대단한지 알 것이다.
6. 배포하기
Anvil은 자체적으로 도메인을 할당해서 서비스의 배포도 도와준다. Run 옆에 있던 Publish 버튼을 누르면
위와 같이 URL을 만들어 주는데, 상기 URL에 접속해보면 아까 실행으로 확인했던 어플리케이션의 기능이 정확하게 공개 URL 상에서 배포되고 있는걸 확인할 수 있다.
DB와의 연동도 정상적으로 작동해서, 다시 DB 페이지로 돌아가 새로고침을 해보면
배포판 어플리케이션에서 기입한 피드백 정보가 성공적으로 DB에 등록된 걸 확인할 수 있다.
이 앱을 사용하면 앞으로 웹 앱을 개발하는데에 드는 수고를 매우매우매우*100 줄일 수 있을 것 같다. 일단 파이썬 원툴 개발자로서, 앞단 디자인이 정말 귀찮은 작업이었는데 그게 해결이 되니....
+ 추가 기능 : 메일
원본 튜토리얼에서는 원래 이 이후에 메일을 보내는 기능을 테스트하는데, 기입된 메일로 실제 메일을 작성해서 보낼 수 있는 메일 엔진을 제공하는 것 같다. 관심있는 사람은 링크를 확인하면 좋겠다.
'파이썬으로 웹 App 작성하기' 카테고리의 다른 글
| Anvil 로 웹 앱 만들어서 배포하기 (기능편) - <3> UI에 주제별 탭(Tab) 만들기 (1) | 2023.05.23 |
|---|---|
| Anvil 로 웹 앱 만들어서 배포하기 (기능편) - <2> Timer 로 주기적 Background 작업 생성하기 (4) | 2023.05.09 |
| Anvil 로 웹 앱 만들어서 배포하기 (기능편) - <1> 서버랑 파일 주고 받기(Uplink 및 서드파티 사용법) (11) | 2023.05.05 |
댓글