الفصل العاشر – Data & backend : دليل شامل لاستخدام Supabase Dart SDK

إذا كنت مطورًا تستخدم Dart (لغة البرمجة المستخدمة في تطوير تطبيقات Flutter)، فستجد أن Supabase هو منصة قوية تتيح لك بناء تطبيقات ويب وجوال بسرعة دون الحاجة إلى إنشاء خوادم خلفية معقدة. يُعد Supabase Dart SDK أداة أساسية لربط تطبيقات Dart بالمنصة، مما يتيح لك الوصول إلى قاعدة البيانات، ونظام المصادقة، وخدمات التخزين، وغيرها من الميزات بسهولة.

في هذا المقال، سنغطي كل ما تحتاج إلى معرفته عن Supabase Dart SDK، من التثبيت إلى الاستخدام العملي، مع أمثلة توضيحية وشرح لكل جانب.

ما هو Supabase؟

Supabase هو منصة مفتوحة المصدر تُعد “نسخة بديلة ان صح التعبير مفتوحة المصدر من Firebase”، حيث توفر مجموعة كاملة من الخدمات مثل:

• PostgreSQL كقاعدة بيانات.
• Authentication (المصادقة).
• Realtime (التحديثات الفورية).
• Storage (تخزين الملفات).
• Functions (وظائف خلفية).
• Database (قاعدة البيانات).

كل هذه الخدمات تُدار عبر واجهة برمجة التطبيقات (API)، ويمكنك الوصول إليها من خلال Dart SDK.

ما هو Supabase Dart SDK؟

Supabase Dart SDK هو حزمة برمجية (package) مكتوبة بلغة Dart تُستخدم لربط تطبيقات Dart بمنصة Supabase. يُعد هذا SDK وسيلة سهلة وفعالة للتفاعل مع قاعدة البيانات، والمصادقة، وتخزين الملفات، وغيرها من الخدمات.

مميزات Supabase Dart SDK:

1. دعم كامل لـ PostgreSQL: يمكنك تنفيذ جميع عمليات SQL مثل SELECT, INSERT, UPDATE, DELETE.
2. مصادقة سهلة: دعم للمصادقة عبر البريد الإلكتروني، كلمات المرور، Google، GitHub، وغيرها.
3. تحديثات فورية (Realtime): تتبع التغييرات في البيانات في الوقت الفعلي.
4. تخزين الملفات: إدارة الملفات مثل الصور والمستندات.
5. وظائف خلفية (Functions): تنفيذ وظائف مخصصة باستخدام JavaScript أو Rust.
6. متوافق مع Flutter: يُستخدم بشكل شائع في تطبيقات Flutter.

التثبيت

قبل البدء، يجب تثبيت حزمة supabase_flutter أو supabase_dart في مشروعك.

1. إضافة الحزمة إلى pubspec.yaml

افتح ملف pubspec.yaml في مشروعك وقم بإضافة الحزمة كالتالي:

dependencies:
  supabase_flutter: ^2.0.0

أو إذا كنت تستخدم supabase_dart مباشرة:

dependencies:
  supabase_dart: ^2.0.0

ثم قم بتشغيل:

flutter pub get

الاتصال بـ Supabase

بعد التثبيت، يجب تهيئة الاتصال بـ Supabase باستخدام Supabase Client.

Future<void> main() async {
  await Supabase.initialize(
    url: 'https://xyzcompany.supabase.co',
    anonKey: 'publishable-or-anon-key',
  );

  runApp(MyApp());
}

// Get a reference your Supabase client
final supabase = Supabase.instance.client;

1. الحصول على بيانات الاتصال

في لوحة تحكم Supabase، انتقل إلى Project Settings > API، وستجد:

• URL: عنوان API الخاص بمشروعك.
• Anon Key: مفتاح للوصول العام.
• Service Role Key: مفتاح للوصول إلى الخدمات (هذا المفتاح سري و يجب عدم مشاركته مع أحد ولا يجب وضعه في الكود بشل مباشر لان من يمتلك هذا المفتاح يستطيع تخطي كل وسائل الحماية والوصول لكل خواص خدمة Suoa.

2. إنشاء مثيل Supabase Client

في ملف Dart، قم بإنشاء مثيل للـ SupabaseClient:

import 'package:supabase_flutter/supabase_flutter.dart';

  final client = Supabase.instance.client;

المصادقة (Authentication)

يُعد نظام المصادقة من أهم الميزات في Supabase. يدعم المصادقة عبر:

• البريد الإلكتروني ورقم الهاتف.
• خدمات اجتماعية مثل Google وGitHub.

1. تسجيل الدخول بالبريد الإلكتروني

final response = await supabase.auth.signInWithPassword(
  email: 'user@example.com',
  password: 'password123',
);

2. تسجيل حساب جديد

final response = await supabase.auth.signUp(
  email: 'user@example.com',
  password: 'password123',
);

3. تسجيل الدخول عبر Google

final response = await supabase.auth.signInWithOAuth(
  provider: 'google',
);

4. إدارة الجلسة (Session)

يمكنك التحقق من حالة تسجيل الدخول:

final session = supabase.auth.session;
if (session != null) {
  print('User is logged in');
} else {
  print('User is not logged in');
}

5. تسجيل الخروج

await supabase.auth.signOut();

قاعدة البيانات (Database)

Supabase تستخدم PostgreSQL كقاعدة بيانات، وتوفر واجهة برمجة تطبيقات (API) لتنفيذ عمليات SQL.

1. إدراج بيانات (INSERT)

افترض أن لديك جدول اسمه todos:

final response = await supabase.from('todos').insert({
  'title': 'Learn Supabase',
  'completed': false,
});

2. استرجاع بيانات (SELECT)

final response = await supabase.from('todos').select('*');
final todos = response.data;

3. تحديث بيانات (UPDATE)

await supabase.from('todos').update({
  'completed': true,
}).eq('id', 1);

4. حذف بيانات (DELETE)

await supabase.from('todos').delete().eq('id', 1);

5. استعلام مع شروط (Query)

final response = await supabase.from('todos')
  .select('*')
  .eq('completed', false)
  .order('created_at', ascending: false);

التحديثات الفورية (Realtime)

Supabase يدعم التحديثات الفورية عبر WebSockets، مما يسمح بتحديث واجهة المستخدم تلقائيًا عند تغيير البيانات.

1. إعداد Realtime

final subscription = supabase
  .from('todos')
  .on(SupabaseEventTypes.insert, (payload) {
    print('New todo: ${payload.newData}');
  })
  .subscribe();

2. إغلاق الاتصال

subscription.cancel();

تخزين الملفات (Storage)

يمكنك تخزين الملفات مثل الصور والمستندات باستخدام Supabase Storage.

1. رفع ملف

final response = await supabase.storage
  .from('avatars')
  .upload('user1/avatar.png', File('path/to/avatar.png'));

2. الحصول على رابط الملف

final url = supabase.storage
  .from('avatars')
  .getPublicUrl('user1/avatar.png');

3. تنزيل ملف

final file = await supabase.storage
  .from('avatars')
  .download('user1/avatar.png');

4. حذف ملف

await supabase.storage
  .from('avatars')
  .remove(['user1/avatar.png']);

وظائف خلفية (Functions)

يمكنك إنشاء وظائف خلفية باستخدام JavaScript أو Rust، ثم استدعاءها من Dart.

1. استدعاء وظيفة

final response = await supabase.functions.invoke('hello-world');
print(response.data);

إدارة الأخطاء (Error Handling)

من المهم التعامل مع الأخطاء بشكل صحيح:

try {
  final response = await supabase.from('todos').insert({'title': 'Test'});
} on SupabaseException catch (e) {
  print('Supabase error: ${e.message}');
} catch (e) {
  print('Other error: $e');
}

مثال كامل: تطبيق Todo

لنفترض أننا نبني تطبيق Todo بسيط:

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo App',
      home: const TodoList(),
    );
  }
}

class TodoList extends StatefulWidget {
  const TodoList({super.key});

  @override
  State<TodoList> createState() => _TodoListState();
}

class _TodoListState extends State<TodoList> {
  late SupabaseClient supabase;
  List<Map<String, dynamic>> todos = [];

  @override
  void initState() {
    super.initState();
    supabase = SupabaseClient(
      'https://your-project.supabase.co',
      'your-anon-key',
    );
    fetchTodos();
  }

  Future<void> fetchTodos() async {
    final response = await supabase.from('todos').select('*');
    setState(() {
      todos = response.data as List<Map<String, dynamic>>;
    });
  }

  Future<void> addTodo(String title) async {
    await supabase.from('todos').insert({'title': title, 'completed': false});
    fetchTodos();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Todo App')),
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) {
          final todo = todos[index];
          return ListTile(
            title: Text(todo['title']),
            trailing: Checkbox(
              value: todo['completed'],
              onChanged: (value) async {
                await supabase.from('todos').update({
                  'completed': value,
                }).eq('id', todo['id']);
                fetchTodos();
              },
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          final title = 'New Todo';
          addTodo(title);
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

نصائح وحيل

1. استخدم SupabaseClient كمثيل واحد فقط في التطبيق.
2. لا تُدرج مفاتيح الحماية في الكود المصدري، استخدم متغيرات البيئة.
3. استخدم Realtime فقط عند الحاجة، لأنه يستهلك موارد.
4. استخدم Supabase Functions لعمليات معقدة بدلاً من تنفيذها في العميل.
5. راقب أداء الاستعلامات وقم بتحسينها باستخدام الفهرسات.

الخاتمة

Supabase Dart SDK هو أداة قوية تُسهل تطوير تطبيقات Flutter وDart بسرعة وفعالية. من خلال دعمه الكامل لـ PostgreSQL، المصادقة، التخزين، التحديثات الفورية، ووظائف الخلفية، يُعد خيارًا مثاليًا لبناء تطبيقات قوية ومستقرة.

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