EP1. Supabase / Flutter 프로젝트 추가 및 기본 셋팅
1. Supabase 프로젝트 추가
•
Database Password는 어딘가에 잘 저장해둡시다
•
Region은 Northeast Asia(Seoul)로 선택합니다
•
프로젝트 이름은 {프로젝트 이름}-Staging 로 만들어 줍니다. 나중에 운영/개발환경 분리를 진행할 예정입니다.
2. Flutter Project 추가
Android Studio + Flutter Plugin
Android Studio > Flutter Project 추가 선택
Project Name/location, Organization은 적당하게 선택합니다.
Project type은 `Package`로 선택합니다
Platforms에서는 개발을 원하는 플랫폼을 선택하면 되는데.. Android, iOS만 하는 것을 추천합니다.
3. Package 샘플앱 추가
우리가 최종 목표로 하는것은 Flutter Package(이하 패키지)입니다. 하지만 패키지는 그 자체로 실행할 수 없기때문에 패키지를 개발하면서 디버깅을 할 수 없습니다.
따라서 패키지를 사용하는 샘플앱을 만들고, 샘플앱을 통해 패키지를 디버깅/개발하게 됩니다.
example이라는 이름의 디렉토리를 추가합니다.
example 디렉토리에 Flutter Project를 추가합니다.
추가하는 샘플앱의 Project type은 Application입니다.
example 내에 Flutter 프로젝트를 추가하고 실행시켜 정상적으로 돌아가는지 확인합니다.
4. Flutter Supabase Dependency 설치
해당 위치의 pubspec.yaml (example이 아닌 패키지 프로젝트)에 supabase_flutter pub을 추가하고 설치까지 진행합니다.
flutter pub add supabase_flutter
flutter pub get
Bash
복사
5. Package 초기 구현
패키지 프로젝트의 ./lib 디렉토리에는 패키지명.dart 파일이 생성되어 있습니다.
기본적으로 Calculator 예제 코드가 있습니다. 기본 내용을 지우고 아래 내용을 입력합니다.
저는 KSKit이라는 이름으로 만들었는데, 원하는 이름으로 클래스명을 사용하시면 됩니다.
코드 내에서 Supabase 키워드를 입력하면 자동완성을 통해 import 코드는 자동으로 추가됩니다.
library kyulabs_supabase_package;
import 'package:supabase_flutter/supabase_flutter.dart';
class KSKit {
static Supabase? _supabase;
static Future initialize({required String url, required String anonKey}) async {
_supabase = await Supabase.initialize(
url: url,
anonKey: anonKey,
);
}
}
Dart
복사
6. 샘플에서 패키지 사용하기
이번엔 샘플앱의 pubspec.yaml 파일에 패키지를 추가합니다.
dependencies:
flutter:
sdk: flutter
kyulabs_supabase_package: // 👈 추가되는 부분
path: ../ // 👈 추가되는 부분
Dart
복사
해당 위치에 코드 두줄을 추가해주세요.
flutter pub get
Dart
복사
그리고 pub을 가져옵니다.
샘플의 ./lib.main.dart 코드에서 main 부분을 수정합니다.
void main() async {
await KSKit.initialize(url: '{URL}', anonKey: '{anonKey}');
runApp(const MyApp());
}
Dart
복사
URL과 anonKey는 아래 Flow에서 확인할 수 있습니다.
Supabase Proejct > Home에 들어가면 `connect`라는 버튼이 있습니다.
Flutter Framework로 드랍박스 메뉴를 변경하면 Flutter에서 Supabase를 사용하려면 어떻게 해야하는지, url과 anonKey를 보여줍니다.
anonKey는 외부로 노출되지 않게 주의하세요. (특히. Public Github에 올라가지 않도록 주의해주세요.)
7. Supabase - Flutter 연결 확인
위 연결과정을 완료 후 Flutter 앱을 실행시킵니다.
Android Studio 콘솔 로그
Supabase 콘솔 로그
•
Flutter에서 Supabase를 활용할 준비
•
Flutter에서 패키지를 개발할 준비
이렇게 위 두가지 작업을 완료했습니다.
8. 환경변수의 사용
void main() async {
await KSKit.initialize(url: '{URL}', anonKey: '{anonKey}');
runApp(const MyApp());
}
Dart
복사
Supabase를 초기화하기 위한 url, anonKey를 하드코딩했었습니다. 이렇게 되면 이 코드는 Public Github에 올릴수도 없고, 다른 키로 변경하는 것도 어렵습니다.
그래서 우리는 환경변수를 사용하도록 변경할겁니다.
flutter pub add flutter_dotenv
flutter pub get
Dart
복사
샘플앱 pubspec에 flutter_dotenv pub을 설치합니다.
샘플앱 경로에 아래 내용의 .env.staging 파일을 추가합니다.
샘플앱 pubspec.yaml에 .env.staging파일도 프로젝트에서 사용할 것임을 선언합니다.
flutter:
uses-material-design: true
assets: // 👈 추가되는 부분
- ./.env.staging // 👈 추가되는 부분
Dart
복사
.gitignore 파일마지막에 아래 문장을 추가하여 .env.staging 파일은 버전관리 되지 않도록 합니다.
.env.*
YAML
복사
위 작업이 완료되면 Flutter 코드 내에서 보안에 민감한 정보들을 하드코딩하지 않고 사용할 수 있게 됩니다.
void main() async {
await dotenv.load(fileName: ".env.staging");
await KSKit.initialize(
url: dotenv.env['SUPABASE_URL']!,
anonKey: dotenv.env['SUPABASE_ANONKEY']!
);
runApp(const MyApp());
}
Dart
복사
끝.