[Android Compose] Supabase를 활용한 CRUD 구현 - 1 -

이 포스팅에선 Supabase를 활용한 CRUD를 간단하게 구현한 예시를 확인한다.

이름, 가격 TextField의 값과 카메라로 촬영하거나 갤러리에서 photo picker로 가져온 사진을 같이 supabase에 업로드하고 리스트 형태로 표시하는 예제를 구현할 것이다.

 

supabase를 안드로이드에 연동하려면 크게 아래와 같은 작업들을 해야 한다.

 

• supabase 프로젝트 생성, 테이블 정의
• supabase, ktor, hilt 라이브러리 추가
• CRUD 기능 구현 + UI 구현

 

supabase에 새 프로젝트를 만드는 것부터 시작한다. 이 포스팅에선 구글 클라우드 콘솔 설정까지 한 후 다음 포스팅에서 코드들을 확인한다.

 

https://supabase.com/dashboard/projects

Dashboard | Supabase

 

계정을 만들고 대시보드로 이동하면 아래와 비슷한 화면이 보일 것이다. 난 프로젝트를 만들어 둔 게 있어서 하나가 표시되지만 처음엔 아무것도 없을 것이다.

 

 

New project 버튼을 누르고 organization을 선택하면 아래 화면이 표시된다.

 

 

Region은 West US 클릭 후 밑으로 스크롤하면 한국이 있다. 그 외에 프로젝트 이름이나 비밀번호를 적당히 선택한 후 Create new project를 누른다. 그럼 아래 화면으로 이동할 것이다.

 

 

이 중 URL, anon, service_role은 어딘가에 복붙해둔다. 실수로 이 화면을 벗어나더라도 다시 대시보드로 들어가면 아래 화면이 보인다.

 

 

프로젝트 이름 오른쪽의 nano를 클릭하면 설정 화면으로 이동한다. 이 때 왼쪽 메뉴 중 API를 선택하면 필요한 값들을 다시 확인할 수 있다.

 

 

대시보드 홈으로 돌아간 다음 왼쪽 메뉴에서 Table Editor를 눌러서 새 테이블을 만든다.

 

SQL문에 익숙하다면 SQL Editor를 눌러서 테이블을 생성해도 상관없다.

최종적으로 아래와 같은 테이블을 만들면 된다. 이름은 products로 지었다.

 

 

프로젝트 설정은 여기까지고 다음 포스팅에선 코드를 확인한다.

supabase와 구글 로그인 연동, CRUD를 구현하는 예시는 아래 깃허브에서 확인할 수 있다. 조금 복잡한데 어떻게 작동하는지 미리 확인하려면 훑어보는 것도 좋다.

 

https://github.com/hieuwu/product-sample-supabase-kt

GitHub - hieuwu/product-sample-supabase-kt: Android sample built with Jetpack Compose including best practices of how to use Sup