دليل خطوة بخطوة لإنشاء واجهة خلفية Flutter الخلفية

سيناقش هذا المقال موضوع Flutter، وهي مجموعة أدوات تطوير برمجيات واجهة مستخدم مفتوحة المصدر أنشأتها Google.

سنستكشف مزايا وعيوب استخدام Flutter وسنسلط الضوء على خيارات الواجهة الخلفية المختلفة لتطبيق Flutter الخاص بك.

وأخيرًا، ستتعلم كيفية إنشاء خلفية عاملة لتطبيق Flutter الخاص بك باستخدام ميزة Back4apps كخدمة (BaaS).

ما هي Flutter؟

Flutter هو إطار عمل تطوير متعدد المنصات يتيح لك إنشاء تطبيقات أندرويد وiOS وiOS وويب ولينكس وماك وويندوز ذات طابع أصلي بسرعة.

باستخدام Flutter، ستجد أن العديد من تعقيدات بناء التطبيقات الخاصة بالمنصة قد تم تجاوزها بالنسبة لك. تشتهر Flutter أيضًا بأدائها السريع وأدوات واجهة المستخدم الجميلة.

يعرّف فريق Flutter نفسه التقنية على النحو التالي;

إطار عمل مفتوح المصدر من Google لبناء تطبيقات جميلة ومتعددة المنصات ومتعددة المنصات من قاعدة كود واحدة.

أهم 3 مزايا ومحدودية Flutter

ما هي أنواع الواجهة الخلفية؟

يعد اختيار خيار الواجهة الخلفية المناسب للتعامل مع المهام من جانب الخادم أمرًا مهمًا للغاية عند إنشاء أي تطبيق.

كل نوع من أنواع الواجهة الخلفية له نقاط قوته، ويجب أن تكون حاجة تطبيقك الخاصة هي التي توجه اختيارك للواجهة الخلفية.

ستسلط الأقسام الفرعية التالية الضوء على خيارات الواجهة الخلفية المختلفة التي يمكنك العمل بها، وماهيتها، وكيفية عملها، وكيف يمكن أن تناسب احتياجات تطبيقك على أفضل وجه.

IaaS

يعد IaaS خيارًا خلفيًا يجب أن تفكر في توظيفه إذا كنت تتعامل مع تطبيق كبير يضم العديد من المستخدمين. IaaS هو نموذج حوسبة سحابية يرمز إلى البنية التحتية كخدمة.

الحوسبة السحابية هي نموذج يقدم فيه مزود خارجي موارد الحوسبة، مثل الخوادم والتخزين والتطبيقات، عبر الإنترنت.

يمكن الوصول إلى هذه الموارد عند الطلب، مع تسعير الدفع حسب الاستخدام. مع IaaS، سيحتفظ موفر الخدمة السحابية بالبنية التحتية الأساسية الرئيسية للحوسبة بينما سيكون لديك التحكم الكامل في تكوين بيانات تطبيقك ونظام التشغيل وجميع متطلبات الواجهة الخلفية الأخرى.

وهذا يجعلها خياراً جيداً للواجهة الخلفية للتطبيقات التي تحتاج إلى التوسع في موارد الحوسبة صعوداً أو هبوطاً.

PaaS

إن المنصة كخدمة (PaaS) والبنية التحتية كخدمة (IaaS) هما نموذجان متميزان للحوسبة السحابية يخدمان أغراضاً مختلفة. وبينما يوفر كلاهما المرونة وقابلية التوسع، إلا أنهما يلبيان احتياجات مختلفة في تطوير التطبيقات ونشرها.

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

باء باءس

تزودك الواجهة الخلفية كخدمة (BaaS) بخدمات ووظائف خلفية جاهزة للاستخدام، مما يسمح لهم بالتركيز على بناء تجربة المستخدم للتطبيق وتحسينها دون إدارة البنية التحتية للواجهة الخلفية.

باستخدام BaaS، يمكن للمطورين الوصول إلى ميزات مثل مصادقة المستخدم وقواعد البيانات والتخزين من خلال واجهات برمجة التطبيقات، مما يلغي الحاجة إلى إعداد خوادم خلفية وصيانتها.

إنه يشبه استخدام قطعة أحجية جاهزة تتناسب تمامًا مع تطبيقك، مما يوفر الوقت والجهد.

من حيث الجوهر، تبسط BaaS عملية التطوير، مما يسمح للمطورين بالتركيز على الجوانب التي تواجه المستخدم في تطبيقاتهم مع الاعتماد على خدمات الواجهة الخلفية المبنية مسبقًا للتعامل مع المهام الشاقة.

كيفية بناء واجهة خلفية Flutter باستخدام واجهة خلفية كخدمة

سيناقش هذا القسم كيف يمكنك البدء في بناء واجهة خلفية لتطبيق Flutter. تُعد منصة Back4app خيارًا رائعًا لبناء تطبيقات خلفية قابلة للتطوير وآمنة ومرنة وسهلة النشر.

نظرة عامة على تطبيق Back4app

Back4App هي منصة Backend-as-a-Service (BaaS) التي تعمل على تبسيط عملية تطوير تطبيقات الجوّال والويب من خلال توفير بنية أساسية كاملة للواجهة الخلفية.

باستخدام Back4App، ستتمكن من التركيز على بناء ميزات الواجهة الأمامية لتطبيقك.

تقدم المنصة مجموعة كبيرة من الخدمات الخلفية الجاهزة للاستخدام، بما في ذلك قواعد البيانات وواجهات برمجة التطبيقات والوظائف السحابية.

تتضمن ميزات/فوائد Back4app الرئيسية ما يلي:

• قواعد البيانات العلائقية وغير العلائقية
• واجهات برمجة تطبيقات REST و GraphQL
• استفسارات مباشرة
• مجموعة واسعة من خيارات المصادقة
• استضافة قابلة للتطوير
• إشعارات الدفع والبريد الإلكتروني

يستخدم Back4App خادم Parse، وهو مجموعة أدوات مفتوحة المصدر لتطوير مكونات التطبيق من جانب الخادم. مع دعم تقنيات متعددة. يسرد هذا الدليل المرجعي التقنيات المختلفة التي يدعمها Back4App.

مقدمة المشروع

الهدف من هذا الدليل هو إنشاء واجهة خلفية Back4app لدعم تطبيق Flutter. سيقوم التطبيق بالاتصال والتفاعل مع الواجهة الخلفية للإعداد باستخدام Parse server SDK.

التطبيق الذي ستنشئه هو تطبيق جهات اتصال بسيط يسمح للمستخدمين بإنشاء جهات اتصال وقراءتها. سيتم تخزين جهات الاتصال هذه باستخدام دعم قاعدة بيانات PostgreSQL الخاصة ب Back4app.

يمكن للمستخدمين إضافة جهات اتصال جديدة عن طريق إدخال معلومات جهة الاتصال في التطبيق.

بنهاية هذا الدليل، سيكون لديك فهم قوي لكيفية القيام بما يلي:

• إنشاء تطبيق خلفي على منصة Back4app
• الكتابة إلى قاعدة بيانات Back4app منظمة
• تعامل مع أساسيات أمان الواجهة الخلفية لـ Parse.

المتطلبات الأساسية

لمتابعة هذا الدليل، يجب عليك استيفاء هذه المتطلبات الأساسية:

• الإلمام بلغة Dart وإطار عمل Flutter
• معرفة التلاعب بالحالة في Flutter
• محاكي جهاز أو محاكي لتشغيل تطبيقك. Xcode لنظام iOS أو Android Studio لنظام Android.
• الفهم الأساسي لقواعد البيانات العلائقية وغير العلائقية

إنشاء تطبيق

ستحتاج إلى أن يكون لديك حساب Back4app لإنشاء حساب خلفي خاص بك. يمكنك إنشاء واحد إذا لم يكن لديك واحد من خلال اتباع التسجيل للحصول على حساب مجاني .

إذا كان لديك حساب بالفعل في Back4app، قم بتسجيل الدخول وإنشاء تطبيق جديد. حدد Backend كخدمة كخيار الخدمة.

سيؤدي ذلك إلى إنشاء واجهة خلفية BaaS قابلة للتطوير. لا تنس أن تعطي تطبيقك اسمًا فريدًا. بالنسبة لقاعدة البيانات المفضلة، يوفر Back4app PostgreSQL كخيار لقاعدة البيانات.

PostgreSQL هو نظام إدارة قواعد بيانات علائقية مفتوح المصدر (RDBMS) شائع. وهو معروف بقابليته للتطوير والموثوقية والأداء العالي والأمان.

يتيح لك استخدام خيار PostgreSQL التجريبي في Back4app الاستفادة من هذه الميزات والفوائد.

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

قاعدة بيانات PostgreSQL

في Back4App، يمكنك تحديد الفئات والحقول التي تمثل بيانات تطبيقك. تستخدم PostgreSQL قواعد بيانات علائقية، وهي طريقة منظمة لتخزين البيانات لمستخدمي تطبيقك.

كما ذكرنا سابقًا، سيكون تطبيق Flutter الخاص بنا عبارة عن دفتر جهات اتصال حيث يمكننا تخزين جهات اتصال متعددة. تحتفظ قواعد بيانات PostgreSQL بالعلاقات. سيكون نموذج البيانات المعقول لهذا التطبيق هو فئة جهات الاتصال والرمز البريدي لمدينة جهة الاتصال.

لنبدأ بنموذج جهات الاتصال. سيتطلب جدول جهات الاتصال الحقول المختلفة;

• معرف جهة الاتصال/معرف الكائن/معرف جهة الاتصال
• الاسم
• رقم الهاتف
• الرمز البريدي

سيبدو جدول نموذج البيانات الخاص بك على هذا النحو;

اتصل بنا

الرمز البريدي

سيقوم كائن جهة الاتصال بتخزين معلومات جهة الاتصال، مع معرف جهة الاتصال كمفتاح أساسي. حقول الاسم، ورقم الهاتف، والرمز البريدي إلزامية ليتم تعبئتها (غير فارغة),

ينشئ نموذج البيانات هذا علاقة بين جداول تطبيق جهات الاتصال، مما يتيح لك إدارة معلومات جهات الاتصال وربط حقول متعددة مع كل جهة اتصال.

لإنشاء هاتين الفئتين على تطبيق Back4app، اضغط على زر إنشاء فئة في الزاوية العلوية اليسرى من لوحة التحكم.

قم بتسمية الفئة جهة اتصال وقم بتبديل خيار “هل هو حقل مطلوب؟” تشغيل.

أنشئ الأعمدة لحقول البيانات في جهة الاتصال، ثم افعل الشيء نفسه لفئة الرمز البريدي. يسمح لك Back4app بتخصيص كل عمود تم إنشاؤه.

لوحة الإدارة

يوفر Back4App واجهة مستخدم رسومية بديهية (واجهة مستخدم رسومية) تسمى لوحة المسؤول لإدارة الواجهة الخلفية لتطبيقاتك دون عناء.

تُعد لوحة المسؤول أداة قوية لمراقبة البيانات وتعديلها وتحليلها، مما يجعلها أداة لا تقدر بثمن لإدارة التطبيق.

يمكنك الوصول إلى لوحة إدارة تطبيقك من داخل تطبيقك. في لوحة تحكم التطبيق، ستجد زرًا أو رابطًا يحمل اسم“لوحة الإدارة” تحت “المزيد“،والذي سيوجهك إلى لوحة الإدارة. هناك يمكنك تشغيل تطبيق المسؤول وتمكينه.

ستقدم اسم مستخدم وكلمة مرور للوصول إلى تطبيق المسؤول.

الخطوة الأخيرة لإعداد تطبيق المشرف هي اختيار اسم النطاق الذي ترغب في استخدامه للوصول إلى اللوحة.

بالنسبة لهذا الدليل، مثال جيد سيكون؛ flutter-backend.admin.back4app.com.

يمكنك الآن تسجيل الدخول إلى لوحة تحكم المشرف عن طريق فتح المجال المتوفر على المتصفح.

لمعرفة المزيد عن تطبيق Back4app Admin App قم بزيارة المستندات الرسمية.

تأمين التطبيق

في الوقت الحالي، يكون تطبيق الواجهة الخلفية الخاص بك ضعيفًا تمامًا، ويمكن العبث بالمعلومات الموجودة فيه من جانب العميل.

لمنع ذلك في مرحلة الإنتاج يمكنك تكوين اللوائح وأذونات الوصول.

للتحكم في كيفية إنشاء الأصناف وعدم السماح بإنشاء الأصناف من جانب العميل، انتقل إلى لوحة التحكم > إعدادات التطبيق وحدد موقع إنشاء أصناف العميل. قم بإيقاف تشغيل هذا الخيار، حيث أن تطبيقك لا يتطلب حاليًا سوى الفئتين اللتين قمت بإنشائهما.

ستظهر نافذة منبثقة عندما تقوم بإيقاف التشغيل. هذا لتأكيد تغييرات تطبيقك وحفظها.

اختبار CRUD API باستخدام Flutter

في هذا القسم، ستختبر وظائف واجهة برمجة التطبيقات الخلفية لتطبيقك وقاعدة البيانات مع تطبيق Flutter الذي ستقوم ببنائه. ستبدأ ببناء واجهة المستخدم لتطبيق Flutter.

يجب عليك تثبيت Flutter SDK على حاسوبك لتهيئة تطبيق Flutter.

اتبع مستنداتالبدء الرسمية الخاصة ب Flutter لتثبيت مجموعة أدوات Flutter SDK والأدوات اللازمة لإنشاء تطبيق Flutter على جهازك الذي يعمل بنظام ويندوز أو ماك.

لتهيئة تطبيق Flutter، قم بتشغيل الأوامر التالية في جهازك الطرفي:

#Initialize your Flutter app
flutter create my_flutter_app

#Run your Flutter app
flutter run

ستعمل هذه الأوامر على سقالة وبدء تشغيل تطبيق Flutter بسيط لتبني عليه.

من أجل الحفاظ على بساطة هذا الدليل، سيحتوي ملف main.dart على معظم الشيفرة البرمجية لتشغيل تطبيق Flutter الخاص بك. لن نناقش شيفرة Flutter هنا لأن هذا ليس الهدف من الدليل.

استبدل كل التعليمات البرمجية في main.dart بما يلي:

import 'dart:ffi';

import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final keyApplicationId = 'appID';
  final keyClientKey = 'clientKey';
  final keyParseServerUrl = '<https://parseapi.back4app.com>';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);

  runApp(MaterialApp(
    title: 'Contacts',
    theme: ThemeData(
      primaryColor: Colors.white,
    ),
    home: ContactsApp(),
  ));
}

class ContactsApp extends StatefulWidget {
  const ContactsApp({Key? key}) : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _ContactsAppState createState() => _ContactsAppState();
}

class _ContactsAppState extends State<ContactsApp> {
  List<Contact> contacts = [];
  String? selectedZipCode; // Initialize with a default value

  @override
  void initState() {
    super.initState();
    selectedZipCode = '1234'; // Initialize with a default value
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Contacts'),
      ),
      body: ListView.builder(
        itemCount: contacts.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(contacts[index].name),
            subtitle: Text(contacts[index].phoneNumber),
            trailing: IconButton(
              icon: const Icon(Icons.delete),
              onPressed: () {
                setState(() {
                  contacts.removeAt(index);
                });
              },
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _showAddContactDialog();
        },
        child: const Icon(Icons.add),
      ),
    );
  }

  void _showAddContactDialog() async {
    showDialog(
      context: context,
      builder: (context) {
        String name = '';
        String phoneNumber = '';

        return AlertDialog(
          title: const Text('Add Contact'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                decoration: const InputDecoration(labelText: 'Name'),
                onChanged: (value) {
                  name = value;
                },
              ),
              TextField(
                decoration: const InputDecoration(labelText: 'Phone Number'),
                onChanged: (value) {
                  phoneNumber = value;
                },
              ),
              // Checkbox for Zip Code
              ListTile(
                title: const Text('Select Zip Code'),
                subtitle: Column(
                  children: [
                    RadioListTile(
                      title: const Text('1234'),
                      value: '1234',
                      groupValue: selectedZipCode,
                      onChanged: (value) {
                        setState(() {
                          selectedZipCode = value;
                        });
                        print(selectedZipCode);
                      },
                    ),
                    RadioListTile(
                      title: const Text('4321'),
                      value: '4321',
                      groupValue: selectedZipCode,
                      onChanged: (value) {
                        setState(() {
                          selectedZipCode = value;
                        });
                        print(selectedZipCode);
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('Cancel'),
            ),
            ElevatedButton(
              onPressed: () async {
                setState(() {
                  contacts.add(Contact(
                    name: name,
                    phoneNumber: phoneNumber,
                    zipCode: selectedZipCode as String,
                  ));
                });

                // Save the contact to Back4App
                final contact = ParseObject('Contact');
                contact.set('name', name);
                contact.set('phoneNumber', phoneNumber);
                contact.set(
                    'zipCode',
                    (ParseObject('ZipCode')..objectId = selectedZipCode.objectId)
                        .toPointer());

                await contact.save();

                // ignore: use_build_context_synchronously
                Navigator.of(context).pop();
              },
              child: const Text('Save'),
            ),
          ],
        );
      },
    );
  }
}

class Contact {
  final String name;
  final String phoneNumber;
  final String zipCode;

  Contact({
    required this.name,
    required this.phoneNumber,
    required this.zipCode,
  });
}

class ZipCode {
  final String zipCode;

  ZipCode({
    required this.zipCode,
  });
}

بهذا، ستحصل على واجهة المستخدم الأساسية لتطبيق Flutter الخاص بك.

يمكنك الآن بدء تطبيق Back4app. يستخدم Back4app مجموعة Parse Flutter SDK لدمج Parse Server في تطبيق Flutter.

Parse Server عبارة عن منصة خلفية مفتوحة المصدر توفر بنية تحتية جاهزة للاستخدام لإدارة بيانات التطبيق.

باستخدام SDK، يمكنك التواصل مع Parse Server API من تطبيق Flutter الخاص بك، مما يسهل تنفيذ عمليات CRUD (إنشاء، قراءة، تحديث، حذف) على البيانات، وإدارة جلسات المستخدم، والتعامل مع وظائف أخرى من جانب الخادم.

لاستخدام Parse SDK، قم بتثبيته كتبعية في ملف pubspec.yaml الخاص بمشروع Flutter الخاص بك.

حدد خادم Parse:

dependencies:
	# Parse SDK
  parse_server_sdk_flutter: ^5.1.1

  flutter:
    sdk: flutter

تأكد من دقة المسافة البادئة. ملفات .yaml حساسة جدًا لحالة الأحرف والمسافة البادئة.

قم بتشغيل الأمر لتثبيت التبعية المحددة:

flutter pub get

توجه إلى main.dart واستورد مجموعة Parse SDK المضافة:

import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async{
  WidgetsFlutterBinding.ensureInitialized();
	// code for runApp()

  const keyApplicationId = 'YOUR_APPLICATION_ID_HERE';
  const keyClientKey = 'YOUR_CLIENT_KEY_HERE';
  const keyParseServerUrl = '<https://parseapi.back4app.com>';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);
}

هنا تقوم باستيراد ParseSDk إلى ملف main.dart الخاص بك. يمكنك أيضًا تهيئة Parse داخل main() عن طريق استدعاء Parse().initialize(). بما أن هذا برنامج غير متزامن، قم بتمييز main() بالكلمة الرئيسية async.

يجب استبدال العناصر النائبة لـ Application_Id ومفتاح العميل بالقيم الفعلية. هذه هي بيانات اعتماد التطبيق للتواصل مع الواجهة الخلفية الخاصة بك.

للحصول على هذه المفاتيح، انتقل إلى إعدادات التطبيق > الأمان والمفاتيح من لوحة تحكم Back4app. ثم استبدل العناصر النائبة بالمفاتيح المعنية.

عند تشغيل التطبيق الخاص بك، يتم تشغيل key() الرئيسي، وستتم تهيئة Parse مع تطبيقك، وسيتم توصيل تطبيق Flutter الخاص بك بالواجهة الخلفية لـ Back4app.

الكتابة إلى فئة جهة الاتصال والرمز البريدي

ستتعلم هنا كيفية إنشاء الفئات في قاعدة البيانات والكتابة إليها من جانب العميل في تطبيقك. لإنشاء فئتي جهات الاتصال وأعياد الميلاد، ستقوم بتعديل main.dart.

داخل أسلوب onPressed() الخاص بأداة الزر المرتفع، ستستخدم ParseObject() لإنشاء مثيل جديد من فئة جهات الاتصال :

final contact = ParseObject('Contact');
contact.set('name', name);
contact.set('phoneNumber', phoneNumber);

final ParseResponse parseResponse = await contact.save();

if (parseResponse.success) {
   final contactId = (parseResponse.results!.first as ParseObject).objectId!;
		print('Object created: $contactId');

	} else {
      print('Object created with failed: ${parseResponse.error.toString()}');
    }

تستخدم مجموعة Parse Flutter SDK ParseObject() لإنشاء مثيل جديد لأي اسم صنف تمرره كوسيطة. سيؤدي استدعاء Contact.set() مع اسم حقل الكائن وقيمه إلى كتابة تلك الحقول وتحديثها.

يمكنك إنشاء كائن ParseResResponse للاحتفاظ بنتائج عملية الحفظ. سيحتوي ParseResponse على خاصية نجاح التي ستكون صحيحة إذا كانت عملية الحفظ ناجحة وكاذبة إذا فشلت عملية الحفظ.

يقوم الرمز بعد ذلك بتهيئة المتغير contactId إلى لا شيء. سيُستخدم هذا المتغير لتخزين معرف الكائن الذي تم إنشاؤه تلقائيًا لكائن جهة الاتصال المحفوظة. ثم اتبع ذلك ببعض معالجة الأخطاء.

تحت الرمز أعلاه

final zipCodeObject = ParseObject('ZipCode')
    ..objectId = selectedZipCode as String;
zipCodeObject.set('zipCode', selectedZipCode);
contact.set('zipCode', zipCodeObject.toPointer());

await contact.save();
await zipCodeObject.save();

هنا تقوم بإنشاء كائن الرمز البريدي ParseObject. عند إضافة جهة اتصال جديدة من خلال مربع الحوار، سيقوم الرمز بإنشاء كائن الرمز البريدي بشكل صحيح وربطه بحقل الرمز البريدي لكائن جهة الاتصال.

يستخدم معرف الكائن للرمز البريدي المحدد لإنشاء الارتباط كمؤشر. استخدم طريقة .save() لحفظ كلا الكائنين في الواجهة الخلفية.

الاستعلام/قراءة البيانات من قاعدة البيانات

سنناقش هنا كيف يمكنك إرسال استعلام إلى قاعدة البيانات من تطبيق Flutter الخاص بك. يمكنك إجراء استعلام لاسترداد جميع جهات الاتصال التي تحمل الرمز البريدي نفسه. سيكون تحقيق ذلك معقدًا إلى حد ما في نظام قاعدة بيانات غير علائقية.

إذا نجحت عملية الاسترجاع، يمكنك عرض قائمة بجميع جهات الاتصال في تطبيق Flutter الخاص بك.

لاسترداد قائمة جهات الاتصال التي تحمل الرمز البريدي نفسه:

Future<void> _loadContacts() async {
  final queryBuilder = QueryBuilder<ParseObject>(ParseObject('Contact'))
    ..whereEqualTo('zipCode', selectedZipCode) // Filter by zip code
    ..orderByAscending('name');

  final response = await queryBuilder.query();

  if (response.success && response.results != null) {
    final List<Contact> loadedContacts = response.results!.map((parseObject) {
      return Contact(
        name: parseObject.get('name'),
        phoneNumber: parseObject.get('phoneNumber'),
        zipCode: parseObject.get('zipCode')!.objectId,
      );
    }).toList();

    setState(() {
      //set your contacts to loadedContacts
    });
  }
}

@override
  void initState() {
    super.initState();
   
    _loadContacts(); // Load contacts when the app starts
  }

ينشئ الأسلوب _loadContacts استعلامًا لفئة جهات الاتصال، بحثًا عن كائنات جهات الاتصال ذات الرمز البريدي المحدد.

تقوم الطريقة بعد ذلك بإرجاع جهات الاتصال في قائمة مع ترتيبها حسب الاسم بترتيب تصاعدي بناءً على حقل “الاسم”.

عند بدء تشغيل التطبيق(initState)، يتم استدعاء طريقة _loadContacts لاسترداد جهات الاتصال ذات الرمز البريدي المحدد.

الخاتمة

من الضروري للغاية وجود خلفية محكومة حيث يمكنك هيكلة تدفق البيانات في تطبيقك بشكل صحيح. مع Back4app، يمكنك بناء الواجهة الخلفية لتطبيقك على الهاتف المحمول أثناء التنقل.

يمكنك أيضًا استخدام نظام Back4app الأساسي لتنفيذ مصادقة المستخدم مع قاعدة بيانات نموذج المستخدم المُعدّ.