Overview
해당 포스트는 AWS Amplify 와 Flutter 를 서로 연동하는 방법에 대해 다룰 것이며 그 중 두 번째로 Flutter app에서 Amplify 서비스를 올리는 과정에 대해 알아보도록 하겠습니다.
1. Flutter project를 생성합니다.
2. Flutter 의 pubspec.yaml에 Amplify 관련 라이브러리 종속성을 추가
dependencies:
...
amplify_flutter: <1.0.0
amplify_core: <1.0.0
amplify_analytics_pinpoint: <1.0.0
amplify_auth_cognito: <1.0.0
...
3. Amplify 초기화
Flutter 프로젝트 경로에서 터미널을 실행한 후 아래 명령어를 입력하여 적절한 값을 입력합니다.
amplify init
다음 터미널 창에서 몇몇 질문을 하게 되며 적절한 값을 입력합니다.
초기화가 성공적으로 수행되었마면 아래의 결과 화면을 보게 됩니다.
✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.
Your project has been successfully initialized and connected to the cloud!
초기화가 완료되면 프로젝트 폴더에 amplify 와 ./lib/amplifyconfiguration.dart 파일이 생성된 것을 확인할 수 있습니다.
4. Amplify 서비스 생성
Amplify 의 서비스를 생성해 보도록 하겠습니다. 생성할 서비스는 auth 와 analytics 입니다.
아래 명령어를 실행하여 auth 와 analytics 를 추가합니다.
amplify add auth
amplify add analytics
서비스를 추가가 완료되면 아래 명령어를 수행하여 AWS 에 서비스를 등록합니다.
amplify push
5. Amplify 서비스 생성 확인
아래 명령어를 입력하면 웹브라우저가 실행이 되면서 내가 생성한 Amplify console 이 열리게 됩니다.
amplify console
콘솔 창을 통해서 내가 생성한 amplify 에 Authentication 와 Analytics 두 개의 서비스가 생성이 되었음을 확인 할 수 있습니다.
6. Flutter app 에서 Amplify 서비스 연동
Flutter에서 가장 먼저 실행되는 Widget에 아래 메소드를 추가합니다.
import 'amplifyconfiguration.dart'; // 1. 해당 파일 import
class XXXXX extends StatefulWidget {
@override
_XXXXXState createState() => _XXXXXState();
}
class _XXXXXState extends State<XXXXX> {
@override
void initState() {
super.initState();
_configureAmplify();
}
void _configureAmplify() async {
final auth = AmplifyAuthCognito(); // 2. Auth 서비스 생성
final analytics = AmplifyAnalyticsPinpoint(); // 3. Analytics 서비스 생성
try {
Amplify.addPlugins([auth, analytics]); // 4. 플러그인 추가
await Amplify.configure(amplifyconfig);
configured = true;
} catch (e) {
print(e);
}
if (configured) {
print('Successfully configured Amplify 🎉');
}
}
Flutter app을 실행하면 정상적으로 아래 로그가 출력되는 지 확인해봅시다.
I/flutter ( 6920): Successfully configured Amplify 🎉
정리
지금까지 Amplify 서비스를 초기화하는 방법에 대해 알아보았습니다. 다음 포스트에서는 Flutter에서 생성된 Amplify 서비스를 사용하는 방법에 대해 알아보도록 하겠습니다.
댓글남기기