Tạo hệ thống notification realtime với Supabase và Flutter cực nhanh

Giới thiệu

Trong các ứng dụng hiện đại, khả năng gửi thông báo thời gian thực (real-time notification) là một tính năng gần như bắt buộc để giữ chân người dùng và nâng cao trải nghiệm. Với Flutter - một framework đa nền tảng mạnh mẽ - và Supabase - một backend-as-a-service toàn diện - việc xây dựng hệ thống notification realtime trở nên đơn giản và hiệu quả hơn bao giờ hết. Bài viết này sẽ hướng dẫn bạn từng bước xây dựng hệ thống notification realtime hoàn chỉnh, giúp ứng dụng của bạn có thể gửi và nhận thông báo tức thì.

Tại sao nên sử dụng Supabase cho hệ thống notification?

Supabase không chỉ cung cấp database và authentication, mà còn tích hợp sẵn Realtime - một tính năng cho phép ứng dụng lắng nghe và phản hồi các thay đổi dữ liệu theo thời gian thực. Điều này có nghĩa là bạn không cần phải tự xây dựng server hay lo lắng về việc quản lý WebSocket. Supabase tự động xử lý việc đẩy dữ liệu đến client khi có sự kiện xảy ra, giúp tiết kiệm thời gian và giảm thiểu lỗi.

Ngoài ra, Supabase còn hỗ trợ Authentication, cho phép bạn dễ dàng quản lý user và phân quyền truy cập. Kết hợp với Flutter, bạn có thể xây dựng một hệ thống notification hoàn chỉnh, bảo mật và mở rộng.

Chuẩn bị môi trường phát triển

Trước khi bắt đầu, bạn cần chuẩn bị:

- Flutter SDK: Cài đặt và cấu hình Flutter trên máy. - Supabase project: Tạo một project mới trên Supabase, lưu lại URL và public key. - Dependencies: Thêm các package cần thiết vào pubspec.yaml:

dependencies:
    flutter:
      sdk: flutter
    supabase_flutter: ^2.8.0
    flutter_riverpod: ^2.0.0

Chạy flutter pub get để cài đặt.

Thiết lập kết nối Supabase trong Flutter

Mở file lib/main.dart và khởi tạo Supabase:

import 'package:supabase_flutter/supabase_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Supabase.initialize(
    url: 'YOUR_SUPABASE_URL',
    anonKey: 'YOUR_SUPABASE_ANON_KEY',
  );
  runApp(MyApp());
}

Việc khởi tạo này cho phép ứng dụng kết nối với Supabase và sử dụng các dịch vụ của nó.

Tạo bảng và subscription cho notification

Để lưu trữ notification, bạn cần tạo một bảng trong Supabase:

CREATE TABLE notifications (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users NOT NULL,
  title TEXT NOT NULL,
  body TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  read BOOLEAN DEFAULT FALSE
);

Tiếp theo, tạo một subscription để lắng nghe thay đổi:

class NotificationService {
  static final SupabaseClient _supabase = Supabase.instance.client;
  static Stream<RealtimeModel> getNotificationStream(String userId) {
    return _supabase
        .channel('notifications')
        .on(
          tableName: 'notifications',
          event: EventType.Insert,
          callback: (payload) {
            if (payload['new']['user_id'] == userId) {
              return payload;
            }
            return null;
          },
        )
        .stream();
  }
}

Subscription này sẽ lắng nghe mọi insert mới vào bảng notifications và chỉ trả về notification cho user hiện tại.

Gửi notification từ Flutter

Để gửi notification, bạn có thể tạo một function đơn giản:

Future<void> sendNotification(String userId, String title, String body) async {
  final _supabase = Supabase.instance.client;
  final response = await _supabase
      .from('notifications')
      .insert([
        {
          'user_id': userId,
          'title': title,
          'body': body,
        },
      ])
      .execute();
  return response;
}

Khi gọi function này, notification sẽ được lưu vào database và tự động đẩy đến client thông qua subscription.

Hiển thị notification trong UI

Để hiển thị notification, bạn có thể sử dụng Riverpod để quản lý state:

final notificationProvider = StreamProvider.autoDispose<List<Notification>>((ref) {
  final userId = 'current_user_id'; // Lấy từ auth
  final stream = NotificationService.getNotificationStream(userId);
  return stream.map((event) {
    // Biến đổi event thành list notification
  }).handleError((error) => []);
});

Trong widget, lắng nghe stream và hiển thị danh sách notification:

class NotificationList extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final notifications = watch(notificationProvider);
    return ListView.builder(
      itemCount: notifications.length,
      itemBuilder: (context, index) {
        final notification = notifications[index];
        return ListTile(
          title: Text(notification.title),
          subtitle: Text(notification.body),
        );
      },
    );
  }
}

Xử lý notification đã đọc

Để đánh dấu notification đã đọc, bạn có thể cập nhật cột read trong database:

Future<void> markAsRead(String notificationId) async {
  final _supabase = Supabase.instance.client;
  await _supabase
      .from('notifications')
      .update({'read': true})
      .eq('id', notificationId)
      .execute();
}

Khi user tương tác với notification, gọi function này để cập nhật trạng thái.

Kết luận

Việc xây dựng hệ thống notification realtime với Supabase và Flutter không chỉ đơn giản mà còn rất mạnh mẽ. Nhờ vào Realtime của Supabase, bạn có thể dễ dàng lắng nghe và phản hồi các thay đổi dữ liệu, trong khi Flutter giúp bạn xây dựng giao diện mượt mà và thân thiện. Bằng cách kết hợp các công cụ này, bạn có thể tạo ra một hệ thống notification hoàn chỉnh, bảo mật và mở rộng, nâng cao trải nghiệm người dùng cho ứng dụng của mình.