post-30-04-2024-1

Dạo gần đây mình có làm 1 ứng dụng liên quan đến Học tiếng anh cho em bé và đang muốn xử dụng 1 dạng database mà không cần cấu hình quá nhiều

vì không có nhiều thời gian để dựng BE và quản lý nên đang phân vân có nên dùng Firebase không thì lại search thấy có 1 thằng là SupperBase cũng khá ngon và dễ sử dụng nên có làm thửSau đây là 1 vài note khi sử dụng Database này với Flutter

Đăng ký ứng dụng với SuppeBase

Sau khi khởi tạo tài khoản và ứng dụng thì sẽ có key và link để connect

await Supabase.initialize(
   url: 'https://ytsepqcuprymwkcpobpr.supabase.co',
   anonKey:`'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl0c2VwcWN1cHJ5bXdrY3BvYnByIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTY2NDg3MDMsImV4cCI6MjAzMjIyNDcwM30.DWWiOGNNUOE2ErPmCrZSXgYjwuK1ttsfDkMzwPni1js',`
);

Có 2 chế độ bình thường và real time khi tạo table

Chế độ bình thường (FutureBuilder)

final _future = Supabase.instance.client.from('todos').select('*') // Khai báo ở đầu hàm 
FutureBuilder(  
    future: _future,
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return progress();
      } else {
        if (snapshot.hasError) {
          return Center(
            child: Text("Error: ${snapshot.error}"),
          );
        } else {
          return Container(
            child: Text("Data: ${snapshot.data}"),
          );
        }
      }
})

Chế độ realtime (StreamBuilder)

final _future = Supabase.instance.client.from('todos').stream(primaryKey: ['id']);
Container(
  width: 300,
  height: 200,
  child: StreamBuilder<List<Map<String, dynamic>>>(
      stream: _futu re,
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return progress();
        } else {
          final todos = snapshot.data!;
          return ListView.builder(
            itemCount: todos.length,
            itemBuilder: ((context, index) {
              final todo = todos[index];
              return ListTile(
                title: Text(todo['name']),
              );
            }),
          );
        }
      }),
  )

FutureBuilder => Để gọi 1 function trả về theo kiểu aysn/await trong flutter

StreamBuilder => Để gọi 1 function là stream bên trong flutter, thường sử dụng cho các flow realtime