Flutter di AWS Amplify

A quickstart - cara Membuat Flutter fullstack project on AWS Amplify platform.

Kapan

Amplify adalah platform yang sangat berguna untuk hosting aplikasi full stack.

Di antara howtos lainnya, berikut adalah quickstart cara membuat proyek flutter baru yang akan terintegrasi dengan AWS Amplify.

Instalasi

Sebelum Anda memulai, pastikan Anda telah menginstal hal berikut:

• Node.js v18.17 atau lebih baru - (Install Node.js with NVM)
• npm v9 atau lebih baru
• git v2.14.1 atau lebih baru (Install some lovely tools for linux)
• Anda juga akan perlu membuat akun AWS, jika Anda belum memiliki akunnya. AWS Amplify adalah bagian dari AWS Free Tier.
• Versi stabil dari Flutter - (Install Flutter)
• Konfigurasikan akun AWS Anda untuk digunakan dengan instruksi Amplify. (lihat di bawah)

Jika Anda memiliki profil IAM, lampirkan kebijakan manajemen AmplifyBackendDeployFullAccess ke pengguna IAM Anda. sebaliknya - lihat di bawah konfigurasi...

Untuk informasi terbaru lihat https://docs.amplify.aws/flutter/start/quickstart/

Konfigurasikan akun AWS Anda untuk digunakan dengan instruksi Amplify

https://docs.amplify.aws/flutter/start/account-setup/

1. Buat pengguna dengan izin Amplify

Masuk ke AWS Console untuk mengakses halaman IAM Identity Center dan pilih Enable.

Dialog akan terbuka, meminta Anda untuk “Pilih cara mengonfigurasi IAM Identity Center di lingkungan AWS Anda.”

2. Pilih Enable dengan AWS Organizations dan pilih Continue.

Selanjutnya, kita akan mengotomatisasi sejumlah langkah yang mensimulasikan operasi mengatur pengguna di console IAM Identity Center.

3. Untuk memulai, buka CloudShell, yang terletak di footer console.

4. Tempelkan perintah berikut ke terminal CloudShell dan masukkan alamat email yang ingin Anda kaitkan dengan akun AWS ini:

read -p "Enter email address: " user_email # hit enter

Enter email address: <your-email-address>

5. Sekarang, jalankan perintah berikut

response=$(aws sso-admin list-instances)
ssoId=$(echo $response | jq '.Instances[0].IdentityStoreId' -r)
ssoArn=$(echo $response | jq '.Instances[0].InstanceArn' -r)
email_json=$(jq -n --arg email "$user_email" '{"Type":"Work","Value":$email}')
response=$(aws identitystore create-user --identity-store-id $ssoId --user-name amplify-admin --display-name 'Amplify Admin' --name Formatted=string,FamilyName=Admin,GivenName=Amplify --emails "$email_json")
userId=$(echo $response | jq '.UserId' -r)
response=$(aws sso-admin create-permission-set --name amplify-policy --instance-arn=$ssoArn --session-duration PT12H)
permissionSetArn=$(echo $response | jq '.PermissionSet.PermissionSetArn' -r)
aws sso-admin attach-managed-policy-to-permission-set --instance-arn $ssoArn --permission-set-arn $permissionSetArn --managed-policy-arn arn:aws:iam::aws:policy/service-role/AmplifyBackendDeployFullAccess
accountId=$(aws sts get-caller-identity | jq '.Account' -r)
aws sso-admin create-account-assignment --instance-arn $ssoArn --target-id $accountId --target-type AWS_ACCOUNT --permission-set-arn $permissionSetArn --principal-type USER --principal-id $userId

6. Untuk memverifikasi bahwa ini berhasil, jalankan perintah berikut di CloudShell. Jika

printf "\n\nStart session url: https://$ssoId.awsapps.com/start\nRegion: $AWS_REGION\nUsername: amplify-admin\n\n"

Anda akan melihat

Start session url: https://d-XXXXXXXXXX.awsapps.com/start
Region: us-east-1
Username: amplify-admin

Sekarang buat kata sandi untuk pengguna yang diperlukan untuk langkah berikutnya.

7. Di console IdC, navigasikan ke Users > amplify_admin > Reset password > Kirim email ke pengguna dengan instruksi untuk mengatur ulang kata sandi.

8. Periksa email Anda (pastikan Anda juga memeriksa folder spam). Klik tautan Reset password dan pilih kata sandi pilihan Anda. Saat masuk, pastikan untuk menggunakan amplify-admin sebagai Username.

9. Sekarang, buat profil AWS yang terkait dengan pengguna yang baru saja Anda buat di komputer lokal Anda. Ada beberapa opsi untuk mendapatkan kredensial pengguna IAM Identity Center, tetapi kita akan menggunakan wizard konfigurasi AWS CLI.

10. Install aws cli

11. Buka terminal Anda, Anda siap untuk mengkonfigurasi profil AWS yang menggunakan pengguna SSO. Gunakan informasi dari CloudShell untuk mengisi informasi di bawah ini.

aws configure sso

| SSO session name (Recommended): amplify-admin
| SSO start URL: <START SESSION URL>
| SSO region: <your-region>
| SSO registration scopes [sso:account:access]: <leave blank>
| Attempting to automatically open the SSO authorization page in your default browser.
| Jika browser tidak terbuka atau Anda ingin menggunakan perangkat lain untuk mengotorisasi permintaan ini, buka URL berikut:
|
| https://device.sso.us-east-2.amazonaws.com/
|
| Lalu masukkan kode:
|
| SOME-CODE

12. Setelah Anda memberikan informasi ini, browser akan secara otomatis terbuka meminta Anda untuk masuk dengan username dan password yang baru saja Anda buat dan mengatur perangkat multi-faktor untuk otentikasi.

13. Sekarang kembali ke terminal dan masukkan informasi berikut:

Satu-satunya akun AWS yang tersedia untuk Anda adalah: <your-aws-account-id>
Menggunakan ID akun <your-aws-account-id>
Satu-satunya peran yang tersedia untuk Anda adalah: amplify-policy
Menggunakan nama peran "amplify-policy"
Wilayah default klien CLI [us-east-1]: <your-region>
Format output default CLI [None]:

Pastikan untuk mengatur nama profil menjadi default. Alternatifnya, ingatkan nama profil yang dihasilkan secara otomatis; Anda akan membutuhkannya nanti.

Jika Anda sudah memiliki profil default yang dikonfigurasi - akan menawarkan nama profil lain

Nama profil CLI [amplify-policy-<your-aws-account-id>]: default
Untuk menggunakan profil ini, tentukan nama profil menggunakan --profile, seperti yang ditunjukkan:

aws s3 ls --profile default

14. Jika Anda memeriksa ~/.aws/config, Anda sekarang harus melihat profil SSO:

nano ~/.aws/config

[profile default]
sso_session = amplify-admin
sso_account_id = <your-aws-account-id>
sso_role_name = AdministratorAccess
region = <your-region>
[sso-session amplify-admin]
sso_start_url = https://xxxxxx.awsapps.com/start#
sso_region = <your-region>
sso_registration_scopes = sso:account:access

15. Bootstrap akun AWS Anda

Sekarang Anda siap menggunakan profil AWS ini dengan AWS Amplify.

Buka proyek Amplify Anda dan mulai sandbox.

itu adalah langkah berikutnya!!! tanpa proyek ini tidak akan berfungsi.

Jika Anda memiliki beberapa profil lokal atau menamai profil Anda sesuatu selain default, Anda dapat menentukan profil dengan –profile.

npx ampx sandbox

atau

npx ampx sandbox --profile <profile-name>

Membuat aplikasi Flutter Amplify

flutter create my_amplify_app
cd my_amplify_app

Membuat backend Amplify

npm create amplify@latest -y

Menjalankan perintah ini akan menyusun file backend Amplify di proyek saat ini dengan file berikut yang ditambahkan:

├── amplify/
│   ├── auth/
│   │   └── resource.ts
│   ├── data/
│   │   └── resource.ts
│   ├── backend.ts
│   └── package.json
├── node_modules/
├── .gitignore
├── package-lock.json
├── package.json
└── tsconfig.json

output akan terlihat seperti

Installing devDependencies:
 - @aws-amplify/backend
 - @aws-amplify/backend-cli
 - aws-cdk@^2
 - aws-cdk-lib@^2
 - constructs@^10.0.0
 - typescript@^5.0.0
 - tsx
 - esbuild

Installing dependencies:
 - aws-amplify

✔ DevDependencies installed
✔ Dependencies installed
✔ Template files created
Successfully created a new project!

Welcome to AWS Amplify!
 - Mulai dengan menjalankan npx ampx sandbox.
 - Jalankan npx ampx help untuk daftar perintah yang tersedia.

Amplify mengumpulkan data anonim tentang penggunaan umum CLI. Partisipasi bersifat opsional, dan Anda dapat mematikan dengan menggunakan npx ampx configure telemetry disable. Untuk mempelajari lebih lanjut tentang telemetry, kunjungi https://docs.amplify.aws/react/reference/telemetry

Anda lihat? Anda dapat menjalankan…

npx ampx configure telemetry disable

Sekarang konfigurasikan per-developer cloud sandbox Amplify

Untuk mendeploy backend Anda, gunakan per-developer cloud sandbox Amplify. Fitur ini menyediakan lingkungan backend terpisah untuk setiap pengembang di tim, ideal untuk pengembangan dan pengujian lokal. Untuk menjalankan aplikasi dengan lingkungan sandbox, Anda dapat menjalankan perintah berikut:

npx ampx sandbox --outputs-format dart --outputs-out-dir lib

atau

npx ampx sandbox --outputs-format dart --outputs-out-dir lib --profile <profile-name>

Menambahkan Otentikasi

Pembuatan awal sudah memiliki backend otentikasi yang dikonfigurasi sebelumnya didefinisikan dalam file amplify/auth/resource.ts. Kami telah mengkonfigurasikannya untuk mendukung login berdasarkan email dan kata sandi tetapi Anda dapat memperluasnya untuk mendukung berbagai mekanisme login, termasuk Google, Amazon, Sign In With Apple, dan Facebook.

Cara tercepat untuk memulai pengalaman login Anda adalah dengan menggunakan komponen UI Authenticator yang tersedia di perpustakaan Amplify UI.

Untuk menggunakan Authenticator, Anda perlu menambahkan dependensi berikut ke proyek Anda:

pubspec.yaml:

dependencies:
  amplify_flutter: ^2.0.0       # untuk menghubungkan aplikasi Anda dengan sumber daya Amplify.
  amplify_auth_cognito: ^2.0.0  # untuk menghubungkan aplikasi Anda dengan sumber daya Amplify Cognito.
  amplify_authenticator: ^2.0.0 # untuk menggunakan komponen UI Amplify.

Setelah menambahkan dependensi, Anda perlu menjalankan perintah berikut untuk menginstal dependensi:

flutter pub get

Perbarui file main.dart Anda untuk menggunakan komponen UI Amplify

main.dart:

import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:flutter/material.dart';

import 'amplify_outputs.dart';

Future<void> main() async {
  try {
    WidgetsFlutterBinding.ensureInitialized();
    await _configureAmplify();
    runApp(const MyApp());
  } on AmplifyException catch (e) {
    runApp(Text("Error configuring Amplify: ${e.message}"));
  }
}

Future<void> _configureAmplify() async {
  try {
    await Amplify.addPlugin(AmplifyAuthCognito());
    await Amplify.configure(amplifyConfig);
    safePrint('Successfully configured');
  } on Exception catch (e) {
    safePrint('Error configuring Amplify: $e');
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Authenticator(
      child: MaterialApp(
        builder: Authenticator.builder(),
        home: const Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SignOutButton(),
                Text('TODO Application'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Dan sekarang lihat keindahan halaman otentikasi ini:

dan AWS Cognito sudah melakukan verifikasi email

Tidak banyak di dalamnya, tetapi masih:

Tautan yang berguna

• Deploy Flutter dengan backend ke hosting AWS Amplify
• Reinstall linux
• Bash Cheat Sheet
• Install Node.js
• Install Flutter
• Flutter (Dart) Cheat Sheet
• Dockerising Flutter Web app dengan dockerised Flutter build dan Nginx