فلتر على AWS Amplify

AWS Amplify مع دعم Flutter

Page content

مقدمة سريعة - كيفية إنشاء مشروع Flutter كامل على منصة AWS Amplify.

topimage

متى

Amplify هي منصة مفيدة جدًا لاستضافة تطبيقات كاملة.

بينما هناك كيفيات أخرى، إليك مقدمة سريعة لتشغيل مشروع Flutter جديد سيتكامل بشكل جيد مع AWS Amplify.

التثبيت

قبل البدء، تأكد من أن لديك ما يلي مثبتًا:

Node.js v18.17 أو أحدث - (تثبيت Node.js باستخدام NVM)
npm v9 أو أحدث
git v2.14.1 أو أحدث (تثبيت بعض الأدوات الرائعة لنظام Linux)
ستحتاج أيضًا إلى إنشاء حساب AWS، إذا لم يكن لديك واحد بعد. AWS Amplify جزء من AWS Free Tier.
إصدار مستقر من Flutter - (تثبيت Flutter)
تكوين حسابك في AWS لاستخدام تعليمات Amplify. (انظر أدناه)

إذا كان لديك ملف تعريف IAM، قم بربط سياسة AmplifyBackendDeployFullAccess المدارة إلى مستخدمك في IAM. أو، انظر أدناه configure...

للحصول على معلومات محدثة، راجع https://docs.amplify.aws/flutter/start/quickstart/

تكوين حساب AWS لاستخدام تعليمات Amplify

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

إنشاء مستخدم بامتيازات Amplify

قم بتسجيل الدخول إلى واجهة AWS Console للوصول إلى صفحة IAM Identity Center واختر تمكين.

سيظهر نافذة، وتطلب منك “اختيار طريقة تكوين IAM Identity Center في بيئة AWS الخاصة بك.”

اختر تمكين باستخدام AWS Organizations واختر استمرار.

الآن، سنقوم تلقائيًا بإجراء عدد من الخطوات التي تحاكي العمليات الخاصة بإنشاء مستخدم في واجهة IAM Identity Center.

للبدء، افتح CloudShell، الموجود في قاعدة المتصفح.
لصق الأمر التالي في نافذة CloudShell وادخل عنوان بريدك الإلكتروني الذي ترغب في ربطه بهذا الحساب:

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

Enter email address: <your-email-address>

الآن، قم بتشغيل الأمر التالي

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

لتأكيد أن هذا يعمل، قم بتشغيل الأمر التالي في CloudShell. إذا

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

يجب أن ترى

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

الآن، أنشئ كلمة مرور للمستخدم الذي نحتاجه في الخطوة التالية.

في واجهة IdC، انتقل إلى المستخدمين > amplify_admin > إعادة تعيين كلمة المرور > أرسل بريدًا إلكترونيًا للمستخدم مع تعليمات لإعادة تعيين كلمة المرور.
تحقق من بريدك الإلكتروني (تأكد من أنك تتحقق أيضًا من مجلد البريد العشوائي). اضغط على رابط إعادة تعيين كلمة المرور واختر كلمة مرورك المفضلة. عند تسجيل الدخول، تأكد من استخدام amplify-admin كاسم المستخدم.
الآن، قم بإعداد ملف تعريف AWS المرتبط بالمستخدم الذي أنشأته مؤخرًا على جهازك المحلي. هناك عدة خيارات للحصول على بيانات الاعتماد الخاصة بمستخدم IAM Identity Center، ولكن سنستخدم مساعد تكوين AWS CLI.
تثبيت aws cli
افتح نافذة الطرفية، فأنت مستعد لتكوين ملف تعريف AWS يستخدم المستخدم SSO. استخدم المعلومات من CloudShell لملء المعلومات أدناه.

aws configure sso

| اسم جلسة SSO (الموصى به): amplify-admin
| رابط بدء الجلسة SSO: <START SESSION URL>
| منطقة SSO: <your-region>
| نطاقات تسجيل SSO [sso:account:access]: <اتركه فارغًا>
| محاولة فتح صفحة تفويض SSO تلقائيًا في متصفحك الافتراضي.
| إذا لم يفتح المتصفح أو كنت ترغب في استخدام جهاز مختلف لتفويض هذا الطلب، افتح الرابط التالي:
|
| https://device.sso.us-east-2.amazonaws.com/
|
| ثم أدخل الكود التالي:
|
| SOME-CODE

بعد أن تقدم هذه المعلومات، سيقوم المتصفح تلقائيًا بفتح نافذة لتسجيل الدخول باستخدام اسم المستخدم وكلمة المرور التي أنشأتها مؤخرًا وتكوين جهاز متعدد العوامل للاuthentication.
الآن عد إلى النافذة الطرفية وادخل المعلومات التالية:

الحساب AWS الوحيد المتاح لك هو: <your-aws-account-id>
استخدام معرف الحساب <your-aws-account-id>
الدور الوحيد المتاح لك هو: amplify-policy
استخدام اسم الدور "amplify-policy"
المنطقة الافتراضية للعميل CLI [us-east-1]: <your-region>
تنسيق الإخراج الافتراضي للعميل CLI [None]:

تأكد من تعيين اسم الملف الشخصي إلى الافتراضي. أو، تذكر اسم الملف الشخصي المُنشأ تلقائيًا؛ ستحتاج إليه لاحقًا.

إذا كان لديك ملف شخصي افتراضي مُكوّن بالفعل - سيعرض لك اسم ملف شخصي آخر

اسم ملف الشخصي CLI [amplify-policy-<your-aws-account-id>]: default
للاستخدام هذا الملف الشخصي، حدد اسم الملف الشخصي باستخدام --profile، كما يلي:

aws s3 ls --profile default

إذا نظرت في ~/.aws/config، يجب أن ترى الآن ملف تعريف 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

تمهيد حساب AWS الخاص بك

الآن أنت مستعد لاستخدام هذا ملف تعريف AWS مع AWS Amplify.

افتح مشروعك Amplify وابدأ Sandbox.

هذا الخطوة التالية!!! بدون مشروع لن يعمل هذا.

إذا كان لديك ملفات تعريف محلية متعددة أو سميت ملفك الشخصي بشيء آخر غير الافتراضي، يمكنك تحديد ملف شخصي باستخدام –profile.

npx ampx sandbox

أو

npx ampx sandbox --profile <profile-name>

إنشاء تطبيق Flutter Amplify

flutter create my_amplify_app
cd my_amplify_app

إنشاء خلفية Amplify

npm create amplify@latest -y

تشغيل هذا الأمر سيقوم ببناء ملفات خلفية Amplify في مشروعك الحالي مع إضافة الملفات التالية:

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

الناتج سيكون مشابهًا ل:

تثبيت الاعتمادات التطويرية:
 - @aws-amplify/backend
 - @aws-amplify/backend-cli
 - aws-cdk@^2
 - aws-cdk-lib@^2
 - constructs@^10.0.0
 - typescript@^5.0.0
 - tsx
 - esbuild

تثبيت الاعتمادات:
 - aws-amplify

✔ تم تثبيت الاعتمادات التطويرية
✔ تم تثبيت الاعتمادات
✔ تم إنشاء ملفات القوالب
تم إنشاء مشروع جديد بنجاح!

مرحباً بكم في AWS Amplify!
 - ابدأ باستخدام npx ampx sandbox.
 - ابدأ بتشغيل npx ampx help لعرض قائمة الأوامر المتاحة.

Amplify تجمع بيانات مجهولة حول الاستخدام العام لواجهة CLI. المشاركة اختيارية، ويمكنك الخروج منها باستخدام npx ampx configure telemetry disable. لمعرفة المزيد عن التيليمترية، يرجى زيارة https://docs.amplify.aws/react/reference/telemetry

هل ترى؟ يمكنك تنفيذ…

npx ampx configure telemetry disable

الآن، قم بتكوين Sandbox السحابي لكل مطور في Amplify

لنشر خلفيتك، استخدم Sandbox السحابي لكل مطور في Amplify. هذه الميزة توفر بيئة خلفية منفصلة لكل مطور في الفريق، وهي مثالية للتطوير المحلي والاختبار. لتشغيل تطبيقك مع بيئة Sandbox، يمكنك تشغيل الأمر التالي:

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

أو

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

إضافة المصادقة

الهيكل الأولي بالفعل يحتوي على خلفية مصادقة مُعدة مسبقًا مُعرفة في ملف amplify/auth/resource.ts. لقد قمنا بتكوينها لدعم تسجيل الدخول عبر البريد الإلكتروني وكلمة المرور، ولكن يمكنك توسيعها لدعم مجموعة متنوعة من آليات تسجيل الدخول، بما في ذلك Google، Amazon، Sign In With Apple، وFacebook.

أسرع طريقة للحصول على تجربة تسجيل الدخول الخاصة بك هي استخدام مكون واجهة Authenticator المتاح في مكتبة Amplify UI.

للاستخدام Authenticator، تحتاج إلى إضافة الاعتمادات التالية إلى مشروعك:

pubspec.yaml:

dependencies:
  amplify_flutter: ^2.0.0       # لربط تطبيقك بموارد Amplify.
  amplify_auth_cognito: ^2.0.0  # لربط تطبيقك بموارد Amplify Cognito.
  amplify_authenticator: ^2.0.0 # لاستخدام مكونات واجهة Amplify.

بعد إضافة الاعتمادات، تحتاج إلى تشغيل الأمر التالي لتنصيب الاعتمادات:

flutter pub get

تحديث ملفك main.dart لاستخدام مكونات واجهة 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("خطأ في تكوين Amplify: ${e.message}"));
  }
}

Future<void> _configureAmplify() async {
  try {
    await Amplify.addPlugin(AmplifyAuthCognito());
    await Amplify.configure(amplifyConfig);
    safePrint('تم التكوين بنجاح');
  } on Exception catch (e) {
    safePrint('خطأ في تكوين 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'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

و الآن راجع هذه الجمالية، صفحة المصادقة هنا:

صفحة تسجيل الدخول

و يقوم AWS Cognito بتأكيد البريد الإلكتروني بالفعل

ليس هناك الكثير داخل التطبيق، ولكن لا يزال:

صفحة التطبيق الفارغة

متى

التثبيت

تكوين حساب AWS لاستخدام تعليمات Amplify

إنشاء تطبيق Flutter Amplify

إنشاء خلفية Amplify

إضافة المصادقة

روابط مفيدة