구현

• Amplify CLI 개발자 프리뷰 설치

  AWS Amplify CLI를 사용하려면 Node.js가 설치되어 있어야 합니다. Node.js는 여기에서 받을 수 있습니다.

  Amplify-Flutter 개발자 프리뷰 버전의 CLI를 다운로드하려면 다음을 실행하십시오.
  

  npm install -g @aws-amplify/cli@flutter-preview

  $ amplify --version을 실행하여 Flutter 프리뷰 버전의 CLI를 실행 중인지 확인합니다. 다음과 같은 메시지가 표시되어야 합니다.
  

  photo_gallery git:(master) ✗ amplify --version
  Scanning for plugins...
  Plugin scan successful
  4.26.1-flutter-preview.0

  Amplify CLI를 아직 구성하지 않은 경우 다음을 실행합니다.
  

  amplify configure

  구성 프로세스가 안내됩니다. CLI를 구성하는 데 대한 자세한 내용은 여기를 참조하십시오.
  

• Amplify 초기화

  Amplify 프로젝트를 생성하려면 프로젝트의 루트 디렉터리에서 프로젝트를 초기화하고 구성해야 합니다.

  프로젝트의 루트로 이동합니다.
  

  cd path/to/your/project

  $ ls -al을 실행하여 올바른 디렉터리에 있는지 확인합니다. 다음과 같은 출력이 표시되어야 합니다.
  

  ➜  photo_gallery git:(master) ✗ ls -al
  total 80
  drwxr-xr-x  18 kiloloco  staff   576 Oct 19 18:07 .
  drwxr-xr-x   3 kiloloco  staff    96 Oct 18 21:10 ..
  drwxr-xr-x   4 kiloloco  staff   128 Oct 18 22:15 .dart_tool
  -rw-r--r--   1 kiloloco  staff   536 Oct 19 19:43 .flutter-plugins
  -rw-r--r--   1 kiloloco  staff  1422 Oct 19 19:43 .flutter-plugins-dependencies
  -rw-r--r--   1 kiloloco  staff   621 Oct 18 21:10 .gitignore
  drwxr-xr-x   6 kiloloco  staff   192 Oct 18 21:10 .idea
  -rw-r--r--   1 kiloloco  staff   305 Oct 18 21:10 .metadata
  -rw-r--r--   1 kiloloco  staff  3648 Oct 19 18:07 .packages
  -rw-r--r--   1 kiloloco  staff   543 Oct 18 21:10 README.md
  drwxr-xr-x  12 kiloloco  staff   384 Oct 18 21:10 android
  drwxr-xr-x   5 kiloloco  staff   160 Oct 18 22:20 build
  drwxr-xr-x  11 kiloloco  staff   352 Oct 19 19:04 ios
  drwxr-xr-x  11 kiloloco  staff   352 Oct 19 18:08 lib
  -rw-r--r--   1 kiloloco  staff   896 Oct 18 21:10 photo_gallery.iml
  -rw-r--r--   1 kiloloco  staff  6047 Oct 19 18:07 pubspec.lock
  -rw-r--r--   1 kiloloco  staff  2926 Oct 19 18:07 pubspec.yaml
  drwxr-xr-x   3 kiloloco  staff    96 Oct 18 21:10 test

  이제 Amplify 프로젝트를 초기화합니다.
  

  amplify init

  이제 프로젝트 구성 방법을 묻는 질문이 몇 개 제시됩니다. 각 질문에 대해 Enter 키를 누르면 질문의 기본 답이 제공되므로 출력은 다음과 비슷합니다.
  

  ➜  photo_gallery git:(master) ✗ amplify init
  Note: It is recommended to run this command from the root of your app directory
  ? Enter a name for the project photogallery
  ? Enter a name for the environment dev
  ? Choose your default editor: Visual Studio Code
  ? Choose the type of app that you're building flutter
  Please tell us about your project
  ⚠️  Flutter project support in the Amplify CLI is in DEVELOPER PREVIEW.
  Only the following categories are supported:
   * Auth
   * Analytics
   * Storage
  ? Where do you want to store your configuration file? ./lib/
  Using default provider  awscloudformation
  
  For more information on AWS Profiles, see:
  https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
  
  ? Do you want to use an AWS profile? Yes
  ? Please choose the profile you want to use default

  CLI가 클라우드에서 프로젝트를 크래이팅하고 난 후 표시되는 출력은 다음과 같습니다.
  

  ✔ 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!

  프로젝트의 루트 디렉터리에서 $ ls를 실행하면 amplify.json이라는 새 파일과 amplify 폴더가 프로젝트에 추가된 것을 확인할 수 있습니다. $ ls lib를 실행하면 amplifyconfiguration.dart라는 파일이 새로 추가된 것도 확인할 수 있습니다.
  

• 프로젝트에 종속성 추가

  다음 단계로, 라이브러리와 인터페이스할 수 있도록 Aremplify를 종속 구성 요소로서 프로젝트에 설치합니다.

  Visual Studio 코드로 돌아가 pubspec.yaml을 열고 다음 종속성을 추가합니다.
  

  ... # path:
  
  amplify_core: '<1.0.0'
  
  ... # dev_dependencies

  파일을 저장하거나 터미널을 통해 앱의 루트 디렉터리에서 $ flutter pub get을 실행합니다.
  

  프로세스가 완료되면 다음 출력이 표시됩니다.
  

  exit code 0

  iOS의 경우 Podfile(ios > Podfile)을 열고 플랫폼을 11.0 이상으로 업데이트합니다.
  

  ... # Uncomment this line to define a global platform for your project
  
  platform :ios, '11.0'
  
  ... # CocoaPods analytics sends network stats synchronously affecting flutter build latency.

• 앱에 통합

  Amplify Flutter Library를 사용하려면 범주를 사용하기 전에 먼저 Amplify를 구성해야 합니다.

  main.dart를 열고 _MyAppState에 Amplify의 인스턴스를 추가합니다.
  

  ... // class _MyAppState extends State<MyApp> {
  
  final _amplify = Amplify();
  
  ... // final _authService = AuthService();

  이제 Amplify를 구성하는 함수를 생성합니다.
  

  ... // build closing }
  
  void _configureAmplify() async {
    try {
      await _amplify.configure(amplifyconfig);
      print('Successfully configured Amplify 🎉');
    } catch (e) {
      print('Could not configure Amplify ☠️');
    }
  }
  
  ... // _MyAppState closing }

  이 함수는 생성된 /lib/amplifyconfiguration.dart 파일에서 제공되는 amplifyconfig를 전달하고, 사용해야 할 모든 플러그인을 사용하여 Amplify 객체 구성을 시도합니다. 다음 모듈에 플러그인을 추가하기 시작합니다.

  이제 _MyAppState의 initState()에 있는 _configureAmplify()를 호출합니다.
  

  ... // super.initState();
  
  _configureAmplify();
  
  ... // _authService.showLogin();

  이제 앱을 실행하면 로그에 다음 메시지가 인쇄됩니다.
  

  flutter: Successfully configured Amplify 🎉