اتصال به AWS AppSync با استفاده از Amplify for Flutter برای مرکز مسابقات فوتبال ما

در هفته‌های گذشته – یا ماه‌های گذشته – من با کریستین، همچنین یک جامعه ساز AWS، روی پروژه خود به نام «مرکز مسابقات فوتبال» کار کرده‌ام. کریستین قبلاً در مورد پروژه ما در لینکدین مطالب زیادی نوشته است:

1. اعلام پروژه

2. نظرسنجی

3. انتخاب API ما

امروز، می‌خواهم به چارچوب انتخابی خود برای رابط کاربری و روشی که از UI به باطن متصل می‌شویم توجه کنم. باطن ما در این پروژه یک نقطه پایانی GraphQL API است که در AWS AppSync میزبانی شده است.

از سال گذشته، Amplify Flutter شامل پشتیبانی از وب و دسکتاپ است. از آنجایی که ما به دنبال دسترسی به کاربران هم در موبایل و هم روی دسکتاپ هستیم، انتخاب یک ابزار توسعه بین پلتفرمی مانند Flutter یک انتخاب واضح به نظر می رسید. من و کریستین یک تیم کوچک هستیم و می‌خواهیم روی ساختن یک رابط کاربری ساده به سرعت و بدون نیاز به پیاده‌سازی برای پلتفرم‌های متعدد تمرکز کنیم و Flutter دقیقاً این اجازه را می‌دهد.

Flutter ویجت هایی را به راحتی قابل گسترش است که می تواند در تمام پلتفرم های اصلی استفاده شود.

اتصال به باطن GraphQL ما

پروژه ما بر اساس یک باطن Amplify نیست، بلکه بر اساس زیرساخت AWS نوشته شده در AWS CDK است. این کار استفاده از Amplify Flutter SDK را بسیار دشوار می‌کند، زیرا اکثر اسناد و پست‌های وبلاگ از شما انتظار دارند که Amplify SDK را با یک پشتیبان Amplify (که سپس می‌تواند شامل یک API GraphQL باشد) متصل کنید.

اما این تنها چیزی نیست که کار را دشوار کرده است – من همچنین هنگام شروع به کار بر روی اتصال، تجربه بسیار کمی با Amplify یا Amplify SDK داشتم.

با استفاده از Flutter SDK برای Amplify، ما به نمونه Cognito خود برای احراز هویت و به نقطه پایانی GraphQL موجود متصل خواهیم شد. در این پست قصد دارم به اتصال GraphQL و نه ادغام Cognito به عنوان نقطه پایانی احراز هویت نگاه کنم.

در صورتی که پروژه جدیدی را شروع می کنید، تنظیم Amplify SDK برای Flutter را می توان از طریق amplify cli انجام داد.

سپس amplifyconfiguration.dart مورد نیاز و چند کد نمونه را نیز از طریق amplify init ایجاد می کند.

سپس می توانید Amplify SDK for Flutter را از داخل ویجت اصلی خود با استفاده از این کد تنظیم کنید:

import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:amplify_api/amplify_api.dart';
import 'amplifyconfiguration.dart';
import 'models/ModelProvider.dart';

….

 Future<void> _configureAmplify() async {
    final api = AmplifyAPI(modelProvider: ModelProvider.instance);
    await Amplify.addPlugin(api);
    await Amplify.configure(amplifyconfig);
    try {
      await Amplify.configure(amplifyconfig);
    } on AmplifyAlreadyConfiguredException {
      safePrint(
          'Tried to reconfigure Amplify; this can occur when your app restarts on Android.');
    }
  }

در حالی که این کار هنگام خواندن مستندات (و بسیاری از پست های وبلاگ بسیار خوب) آسان به نظر می رسد، این برای من بسیار سخت بود زیرا قادر به استفاده از دستور amplify init نبودم. پیدا کردن ساختار “amplifyconfiguration.dart” و پیاده سازی برای “ModelProvider” چالش های اصلی من بودند.

اخیراً اسناد مربوطه به روز شده است و اکنون کار با منابع موجود آسانتر شده است.

فایل Amplify Configuration

Amplify Configuration (amplifyconfiguration.dart) تمام پلاگین های مورد نیاز Amplify را پیکربندی می کند. در پیاده سازی خود ما با Backend GraphQL شروع کردیم:

const amplifyconfig = """{
"UserAgent": "aws-amplify-cli/2.0",
    "Version": "1.0",
    "api": {
        "plugins": {
            "awsAPIPlugin": {
                "matchcenter": {
                    "endpointType": "GraphQL",
                    "endpoint": "https://xxxx.appsync-api.eu-central-1.amazonaws.com/graphql",
                    "region": "eu-central-1",
                    "authorizationType": "API_KEY",
                    "apiKey": "xx0-3425ddregsGDE42dfw"
                }
            }
        }
    }
}""";

این به Amplify SDK می‌گوید که وقتی «Amplify.API» فراخوانی می‌شود، با یک نقطه پایانی API خاص صحبت کند. تا آنجا که من متوجه این مشکل Github هستم، در حال حاضر فقط یک API را می توان از یک نمونه خاص Amplify جستجو کرد.

هنگامی که از apiKey برای انجام احراز هویت با API استفاده می کنیم، باید به طور منظم برنامه Flutter را به روز کنیم زیرا API پیش فرض پس از 7 روز منقضی می شود.

این مستندات زمانی که ما شروع به کار روی پروژه کردیم در دسترس نبود و من مشکوک هستم که صالح این اتفاق را انجام داده است 🙂 (اگر نه، باز هم از کمکی که به من کردید متشکرم! 🙂)

ارائه دهنده مدل

ModelProvider باید یک فایل تولید شده باشد که می توانید آن را از یک API GraphQL موجود ایجاد کنید. اگر از طرحی استفاده می کنید که توسط Amplify مدیریت نمی شود، باید از “تقویت کدژن” بر اساس یک فایل طرحواره موجود استفاده کنید.

این فرمان انتظار دارد که یک schema.graphql در پوشه “root” پروژه Amplify Flutter موجود باشد. اگر «تقویت مدل‌های کدژن» را اجرا کنید، فایل‌های Dart مورد نیاز در فهرست «lib/models» تولید می‌شوند.

نتیجه باید فایلی شبیه به این باشد:

import 'package:amplify_core/amplify_core.dart';
import 'Match.dart';
import 'PaginatedMatches.dart';
import 'PaginatedTeams.dart';
import 'Team.dart';
export 'Match.dart';
export 'PaginatedMatches.dart';
export 'PaginatedTeams.dart';
export 'Team.dart';

class ModelProvider implements ModelProviderInterface {
  @override
  String version = "4ba35f5f4a47ee16223f0e1f4adace8d";
  @override
  List<ModelSchema> modelSchemas = [Match.schema, PaginatedMatches.schema, PaginatedTeams.schema, Team.schema];
  static final ModelProvider _instance = ModelProvider();
  @override
  List<ModelSchema> customTypeSchemas = [];
  static ModelProvider get instance => _instance;
  ModelType getModelTypeByModelName(String modelName) {
    switch(modelName) {
      case "Match":
        return Match.classType;
      case "PaginatedMatches":
        return PaginatedMatches.classType;
      case "PaginatedTeams":
        return PaginatedTeams.classType;
      case "Team":
        return Team.classType;
      default:
        throw Exception("Failed to find model in model provider for model name: " + modelName);
    }
  }
}

جستجوی GraphQL API ما

اکنون که توانستیم به نقطه پایانی GraphQL AWS AppSync خود وصل شویم، می‌توانیم جستجوی داده‌ها را آغاز کنیم.

خوشبختانه، آماده‌سازی‌هایی که انجام دادیم و Amplify for Flutter SDK روش‌های آسانی را ارائه می‌کنند که ساختارهای داده‌ای تایپ‌شده را برمی‌گرداند که می‌توانیم مستقیماً با آنها تعامل یا کار کنیم.

شما فقط باید کوئری GraphQL را بنویسید که به آن علاقه دارید و می توانید مستقیماً داده ها را از نقطه پایانی بخوانید. در مثال زیر من یک ویجت Flutter از عناصر برگشتی ایجاد می کنم و سپس آنها را به لیستی از ابزارک هایی که می توانم در یک ویجت ستونی نمایش دهم اضافه می کنم:

Future<List<TeamWidget>> _getMatchesByCountry(String country) async {
    List<TeamWidget> teamsWidgetList = [];
    try {
      String graphQLDocument=""'query ListTeams {
        getTeamsByCountry(country: "${country}") {
            nextToken
            teams {
              PK
              PrimaryColor
              SK
              SecondaryColor
              TeamName
            }
          }
        }''';
      var operation = Amplify.API
          .query(request: GraphQLRequest<String>(document: graphQLDocument));
      var response = await operation.response;
      var data = response.data;
      if (data != null) {
        Map<String, dynamic> userMap = jsonDecode(data);
        List<dynamic> matches = userMap["getTeamsByCountry"]["teams"];
        matches.forEach((element) {
          if (element != null) {
            if (element["id"] == null) {
              element["id"] = "rnd-id";
            }
            var match = Team.fromJson(element);
            teamsWidgetList.add(TeamWidget(match));
          }
        });
      }
    } on ApiException catch (e) {
      print('Query failed: $e');
    }
    return teamsWidgetList;
  }

البته امکان ایجاد، به روز رسانی یا حذف داده ها نیز وجود دارد.

همین امروز، ما یک ویژگی را ادغام کرده‌ایم که یک «اشتراک» را به نقطه پایانی AppSync ما اضافه می‌کند – به عنوان گام بعدی قصد داریم آن را در Amplify Flutter Application ادغام کنیم که سپس به ما امکان می‌دهد اعلان‌ها را برای کاربران نهایی پیاده‌سازی کنیم. متأسفانه، Amplify SDK for Flutter هنوز مانند جاوا اسکریپت از پیام رسانی درون برنامه ای پشتیبانی نمی کند.

از طریق این پست وبلاگ شما یاد گرفتید که چگونه یک برنامه Flutter را با Amplify با استفاده از Flutter SDK for Amplify متصل کنید. شما همچنین با پروژه ما، “مرکز مسابقات فوتبال” آشنا شده اید – و کدهایی را مشاهده کرده اید که هنگام صحبت با یک GraphQL (AppSync) شروع را آسان تر می کند.

من یاد گرفته ام که با Amplify for Flutter SDK کار کنم و همچنین چگونه مولدهای کد می توانند به شما در سرعت بخشیدن به پیاده سازی کمک کنند. من همچنین تجربیاتی در دسترسی به داده ها از AppSync و کار با داده های برگشتی در Flutter به دست آورده ام.

متأسفانه، من همچنین متوجه شده‌ام که با استفاده از Flutter SDK برای Amplify نمی‌توانم در حال حاضر اعلان‌های درون‌برنامه‌ای را که کریستین و من می‌خواستیم برای مرکز مسابقات فوتبال خود بسازیم تا کاربران را در مورد بازی‌های آتی یا اخیراً تکمیل شده بسازیم، اجرا نکنم.

ما باید راه حلی برای آن پیدا کنیم و برای تقویت به Flutter SDK تکیه نکنیم – بلکه اعلان ها را با استفاده از افزونه flutter_local_notifications یا با استفاده از امکان Firebase برای اعلان پیاده سازی کنیم.

اگر ایده ای در مورد چگونگی تحقق این امر دارید، منتظر شنیدن بازخورد شما هستیم!

در پست بعدی در مورد این پروژه به نحوه راه اندازی خط لوله CI/CD خود در Amazon CodeCatalyst برای این پروژه نگاه خواهم کرد!

بازدید: 0