[Flutter, Supabase] supabase 연동하기

 Supabase 란?

 

 

간단하게 설명하면 백엔드 서비스 플랫폼이다.

오픈소스이며 PostgreSQL 기반의 DB 기능과 REST API 기능을 제공한다.
-> 이 부분 때문에 Firebase보다 좋다는 평이 많다

 

 

 

Supabase 연동하기

먼저 로그인 및 회원가입을 해주고 New Project를 클릭해서 새로운 프로젝트를 만들어줍시다.

 

프로젝트 이름을 적어주고 데이터베이스에 사용할 비밀번호를 입력합니다
지역은 한국에 살기 때문에 한국으로 설정해 주고
Create new project를 클릭해 줍니다

 

다음은 테스트용 테이블을 하나 만들 텐데 public 스키마 안에 만드는 것이 기본인 것 같습니다
(물론 스키마를 따로 만들으셔서 해도 무관)
저는 Todo라는 테이블을 만들어서 사용해 보겠습니다

 

여기에서 Enable Realtime을 클릭해 주셔야 이 데이터를 실시간으로 감시하니까 체크! 해주세요
postgreSQL을 기반으로 하기 때문에 dataType도 postgreSQL에서 사용하는 것을 토대로 사용할 수 있습니다
기본적으로는 id (int형, primaryKey, autoNumbering 이 설정됩니다), created_at(timestampz, now()) 가 있습니다
또한 톱니바퀴를 누르면 NULL 허용, Unique Key 설정, Array 설정이 가능하니 확인하셔서 테스트해 보세요!
필자는 todo와 check 칼럼을 만들어서 테스트해보겠습니다

 

다 만들면 이와 같은 화면이 표시될 것입니다
그렇다면 이제 Flutter와 연동을 해보겠습니다

 

Flutter에 supabase  연동하기

이제는 supabase에서 생성한 project를 flutter에 연결해 볼 텐데
그전에 project url과 proejct API Key를 확인해서 넣어줘야 합니다

 

 1. API 확인하기

project setting > API > Project URL, Project API keys의 값들을 확인하고 복사해 줍니다

 

 2. Flutter 프로젝트 안에 API 값 넣기

먼저 pub dev에서 supabase package를 설치해 줍니다
터미널 명령어는 flutter pub add supabase

supabase | Dart Package

그다음에는 flutter에서 app을 실행하기 전에 supabase 초기 설정 코드를 넣어줍니다

void main() async {
  await Supabase.initialize(
  	  //📲 project url을 넣는 부분
      url: '--- input plz ---',
      //📲 project api key를 넣는 부분
      anonKey:
          '--- input plz ---');
  runApp(const SupabaseApp());
}​

그런데 이 중요한 정보들은 그대로 써서 붙여서 github이나 실제로 배포를 하면
중요정보 유출이기 때문에 environ 처리를 해주면 보안에도 좋습니다
처리하는 부분은 아래의 포스팅을 참고해 주시면 됩니다! 

[Flutter] env(환경 변수) 설정하기

 

dotenv 패키지를 사용해서 값을 설정해 주면 supabase연결 준비는 완료입니다!
WidgetsFlutterBinding.ensureInitialized(); 이 코드에 대해서는 추후에 포스팅하겠습니다
우선은 runApp을 하기 전에 바인딩을 초기화해주는 코드라고만 알고 계시면 됩니다

void main() async {
  //📲 runApp을 수행하기전에 비동기 작업을 할 경우 추가해주는 코드입니다
  WidgetsFlutterBinding.ensureInitialized();
  
  //📲 dotenv를 가져오는 부분
  await dotenv.load();
  
  //📲 dotenv 패키지를 사용해서 민감한 정보의 값들을 가져옵니다
  await Supabase.initialize(
    url: dotenv.get("PROJECT_URL"),
    anonKey: dotenv.get("PROJECT_API_KEY"),
  );
  runApp(const SupabaseApp());
}​

 

 3. Supabase 웹 화면에서 insert

다음 화면에서 Insert를 클릭하면 만들어 놓은 칼럼에 대해서 입력하는 창이 뜨게 됩니다

 

차례대로 입력해 주면 되는데 테스트값을 넣고 Save를 누르면 아래 사진과 같이 표현이 됩니다.

 

 4. Flutter에서 값 확인하기

값을 가져오기 위해서는 연결한 supabase를 가져와서 사용하면 된다
supabase_view.dart라는 파일에서 가져오기를 해보았다

  //📲 todo 테이블의 값을 넣기위한 dataList 선언
  List<dynamic> dataList = [];
  
  //📲 이 코드로 supabase의 함수들을 사용할 수 있다
  final supabase = Supabase.instance.client;

  @override
  void initState() {
    super.initState();
    readTodo();
  }

  //📲 todo 데이터를 가져오는 함수
  void readTodo() async {
    //📲 가져오는 방식은 쿼리문을 써서 가져오는 느낌이다
    var response = await supabase.from("todo").select();
    if (response.isNotEmpty) {
      setState(() {
        //📲 데이터가 비어있지 않으면 dataList에 값을 넣는 부분
        dataList = response;
      });
    } else {
      setState(() {
        //📲 데이터가 없다면 dataList에 없다는 값을 넣는 부분
        dataList = [
          {"error": "데이터가 없습니다"}
        ];
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        ...
        //📲 나머지 코드들은 github에 있습니다
        
                child: ListView.builder(
                    padding: const EdgeInsets.all(8),
                    itemCount: dataList.length,
                    itemBuilder: (BuildContext context, int index) {
                      //📲 삼항연산자로 error라는 key가 존재하면 없다고 판단
                      //📲 error 이란 key가 없다면 데이터가 존재한다고 판단
                      return dataList[index].containsKey('error')
                          ? Center(child: Text(dataList[index]['error']))
                          //📲 값들을 보기 좋게 정렬하는 부분
                          : Table(
                              children: [
                                TableRow(children: [
                                  Text('ID: ${dataList[index]['id']}'),
                                  Text(
                                      'Created At: ${dataList[index]['created_at'].split('T')[0]}'),
                                ]),
                                TableRow(children: [
                                  Text('Todo: ${dataList[index]['todo']}'),
                                  Text('Check: ${dataList[index]['check']}'),
                                ]),
                              ],
                            );
                    }),
              ),
              ...
              //📲 나머지 코드들은 github에 있습니다
            ])));
  }

 

 5. 결괏값 확인하기

결괏값이 우리가 원하는 결과값이 나오지 않았다! select를 실패한 것인데..
왜 인지 알아보다가 supabase 웹 페이지에서 Policy라는 것을 설정해주어야 한다는 것을 알았다!

 

 6. Supabase - Policy 설정하기

우선 왼쪽에서 Authentication > Policies > New Policy를 클릭해 준다
간략하게 해석하면 todo 테이블에 대한 액세스를 허용하는 정책을 만드는 것이라고 보시면 됩니다
이 부분을 설정 안 해줬기 때문에 실시간으로 탐지한다 해도 테이블들의 값을 가져올 수 없었던 것이다

 

그다음은 Get started quickly > 여러 템플릿 중 하나( 어차피 수정 가능 ) > Use this template를 클릭해 준다
이 포스팅에서는 읽어오는 것만 허용하는 것을 예제로 하겠습니다
(나중에 policy에 대한 포스팅을 따로 하겠습니다)
이렇게 설정을 해주고 Review를 클릭해 주면 해당 정책에 쿼리를 보여줍니다

 

쿼리를 해석해 보면 To public가 보이는데
여기에서 public은 PostgreSQL에서 모든 사용자를 포함하는 기본 역할을 뜻합니다
따라서 이 정책은 모든 사용자가 "public"."todo" 테이블에서 SELECT 쿼리를 실행할 때 적용이 되는 쿼리입니다

Save policy를 누르고 정상작동하면 아래와 같은 화면이 나올 것입니다

 

 7. Policy 설정 후 결괏값 확인하기

Policy를 설정해 주면 이렇게 todo 데이터를 딱 가져올 수 있게 된다
그리고 여기까지의 코드는 개인 github에 올려두었으니 마음대로 사용하셔도 됩니다!

GitHub - Jeoungeunseok/supabase: supabase connection and postgreSQL use

---

 

이번 포스팅은 요즘 핫한 Supabase를 사용해서 Flutter에 테이블 연동까지 알아보았다
다음 포스팅은 RealTime을 설정해 두었는데 어떻게 실시간으로 가져오는지 알아보겠습니다
그럼! 연동하는 데에 조금이라도 도움이 되었길 바라면서
코딩이 쉬워지는 그날까지!!