23.04.04(Flutter)

MH S·2023년 4월 4일

Flutter

목록 보기
13/17

IaaS PaaS Saas BaaS 란?
firebase / supabase 란?
pull 통신과 push 통신의 차이
RDBMS와 NOSQL의 차이
서버리스(serverless)란?
온프레미스 / 오프프레미스의 의미

supabase

https://supabase.com/

들어가서 로그인


비밀번호 : 정보처리기사


프로젝트 생성시 나오는 화면

db 클릭



셋팅에 들어가서 db 셋팅을 보고 DBeaver 를 통해 db 생성하기


생성시 db가 정상적으로 생성됨

아까 만든 테이블도 보임.



flutter_supabase_1

main.dart

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

Future<void> main() async {
  await Supabase.initialize(
      url: "https://lvjvquhxuyuwspdbiypj.supabase.co",
      anonKey: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imx2anZxdWh4dXl1d3NwZGJpeXBqIiwicm9sZSI6ImFub24iLCJpYXQiOjE2ODA1NzIyNjUsImV4cCI6MTk5NjE0ODI2NX0.n1YJi28BrNygdgX66d5OU8t3sDM36xP3mLdq1nWl9_4"
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    // Supabase.instance.client.from("todo").select().then((value){
    //   print(value);
    // });

    Supabase.instance.client.from("todo").stream(primaryKey: ["idx"]).listen((event) {
      print(event);
    });
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
            child: StreamBuilder<List<Map<String, dynamic>>>(
              stream: Supabase.instance.client.from("todo").stream(primaryKey: ["idx"]),
              builder: (context, snapshot) {
                return ListView(
                  children: snapshot.data?.map((e) => Text(e["content"])).toList()??[],
                );
              }
            ),
        ),
      ),
    );
  }
}

결과 화면


db에 저장된 데이터가 웹상에 나타나며 실시간으로 db 데이터를 추가시 자동 추가 된다.

0개의 댓글