[Adalo] 오늘의 할일 (TO-DO) 만들기

너무나도 어려운 Appgyver는 잠시 뒤로 하고 Adalo를 살펴보고 기초적인 App 하나를 만들려합니다.

Adalo의 장점은 보시면 아시겠지만 쉽고 직관적입니다.

진정한 No-Code Builder 같습니다.

그러면 만들어 보겠습니다.

참고로 처음 하는 내용이라 상세히 설명하느냐 이미지가 많고 내용이 길지만 실제 작업하면 10분도 안되서 끝나는 쉬운 작업입니다.

 

처음 만드는 App이다 보니 아주아주 간단하게 제작하려 합니다.

오늘의 할일 (TO-DO)로 페이지는 한페이지 입니다.

로그인이니 뭐니 다 생략하겠습니다.

우선 화면은 아래와 같이 구성하겠습니다.

 

상단에 할일을 등록하는 input과 button, 진행중인 일과 완료된 일을 표시하고 진행중인 일을 Tap하면 완료로 처리하며 우측 삭제 버튼을 Tap하면 삭제하도록 하겠습니다.

이제 Adalo 홈페이지를 들어가 로그인 후 프로젝트를 생성하겠습니다. 종류는 Native Mobile App을 선택하고 다음을 클릭합니다.

 

간단한 한페이지 App이기 때문에 Blank를 선택하고 다음을 클릭합니다.

 

App 이름을 입력하고 원하는 색상을 선택한 후 만들기 버튼을 클릭합니다.

 

빈 템플릿을 선택해도 기본적인 화면이 몇 개 나옵니다. 이중 Signup, Login 페이지는 삭제하겠습니다.

 

HOME로 되어 있는 상단 타이틀을 변경하겠습니다. 이전 글에서 설명 했듯이 직접 입력하는 한글은 안됩니다. 클립보드에서 붙여넣기 해야 들어갑니다.

 

그리고 원래는 데이터베이스 먼저 구성하는데 처음이다보니 화면부터 그리겠습니다.

모바일의 바탕화면을 클릭하고 좌측 + 아이콘을 클릭하여 좌측 컴포넌트 화면에서 Text Input을 끌어와 원하는 위치에 놓습니다.

 

Text Input 우측에 버튼을 추가해야하기 때문에 크기를 적당히 줄이고 좌측 컴포넌트 창에서 Button을 끌어와 Text Input 옆에 위치시키고 크기를 조정합니다.

 

Text Input를 클릭하고 좌측 메뉴 Placeholder에 기본값을 입력합니다.

 

다음으로 버튼을 클릭하여 Text를 변경하고 아이콘은 삭제합니다.

 

이제 아래 이미지와 같이 Text와 Simple List를 차례로 끌어와 위치 시키고 Text의 타이틀을 변경합니다.

 

화면의 Simple List를 선택하고 Subtitle은 disabled, Left Section은 icon을 선택한 다음 check를 검색하여 체크박스를 선택합니다.

 

Right Section도 icon으로 선택 후 delete를 검색하여 휴지통 모양의 아이콘을 선택합니다.

 

하단 Completed도 Left Section만 disabled하고 나머지는 동일하게 설정합니다.

 

화면 디자인이 끝났습니다.

만약 Appgyver로 만든다면 Row/Cell 만들어서 나누고 컨테이너 만들어서 집어 넣고 이미지 영역 만들고 padding, margin 조정하고 등등 할일이 태산였을텐데 Adalo는 클릭 몇번으로 끝납니다.

이제 데이터베이스를 정의합니다. 간단한 프로그램이다보니 데이터 정의도 간단합니다.

좌측 Database를 클릭하고 ADD COLLECTION을 클릭합니다.

 

테이블명을 정의하고 할일이 들어갈 content는 Text, 완료 여부에 대한 iscomplete는 Boolean으로 선택합니다.

 

데이터베이스도 끝났습니다.

이제 화면의 각 액션마다 처리하는 로직을 추가하겠습니다.

우선 등록 버튼을 선택하고 ADD ACTION > Create > TB_TODO를 선택합니다.

 

다음으로 content의 우측 T 모양 아이콘을 클릭하여 Form Inputs > Input을 선택합니다.

 

다음으로 isComplete을 선택하여 False를 선택합니다.

 

등록 버튼에 대해서 3가지 정의를 하였는데 첫번째는 어떤 테이블에, 두번째는 content필드에 Text Input 내용을, 세번째는 isComplete에 False를 정의하는 내용입니다.

이제 테스트를 해보겠습니다. 화면 우측 상단의 PREVIEW을 버튼을 클릭하여 값을 입력한 후 입력 버튼을 클릭합니다.

 

입력한 정보가 데이터베이스에 들어갔는지 확인합니다. 좌측 Database를 클릭하고 TB_TODO 테이블에 1 Records 버튼을 클릭하면 아래와 같이 잘 들어갔음을 확인할 수 있습니다.

 

테스트를 위해 추가 데이터를 입력하여 완료합니다.

이제 리스트 화면을 구현하겠습니다. Working의 Simple List를 선택, What is this a list of?에서 TB_TODO를 선택합니다.

다음으로 Custom Filter에서 isComplete 선택, False를 선택합니다. 이는 완료되지 않은 할일만 표시하는 조건입니다.

 

다음으로는 할일을 Tap하여 완료 처리 하겠습니다. 좌측 메뉴에서 ADD ACTION > Update > Current TB_TODO를 선택합니다. 그리고 isComplete를 True로 변경합니다.

원래는 좌측 체크박스를 클릭하여 완료 처리 하려 했는데 Left Section에 대한 Action이 없어 content를 Tap 했을 경우 완료 처리 되는것으로 구현되었습니다.

 

PREVIEW를 통해 테스트 합니다.

 

하단 Completed의 리스트는 isComplete가 True로 동일하게 처리합니다.

 

이제 삭제를 처리하겠습니다. Working 리스트 부분을 선택하여 좌측 메뉴 중 Right Section을 선택합니다. 다음으로 ADD ACTION을 선택하고 Delete > Current TB_TODO를 선택합니다.

 

하단 Completed의 delete도 동일하게 처리합니다.

이제 끝났습니다.

최종 화면은 아래와 같습니다.

 

 

각각의 항목에 대해 쉽게 접근이 가능하여 처음 접하는 분들도 어렵지 않게 하실 수 있을 듯 합니다.

다음에는 조금 복잡한 내용으로 프로젝트를 하나 하겠습니다.

 

위 내용은 아래 영상을 참고하여 만들었습니다.

https://www.youtube.com/watch?v=OwUeMAWpDac