应用实战｜从头开始开发记账本2：基于模板快速开始

上期视频我们创建好了BaaS服务的后端应用。从这期视频开始，我们将从头开发一个互联网记账本应用。本期视频我们介绍一下如何使用模板快速开启我们的应用开发之旅。

相关代码

本期视频我们介绍了如何通过模板快速开始MemFire Cloud项目，简单了解了模板代码内置的功能，同时演示了一下如何配置并运行我们的模板代码。

新建应用

注册登录MemFire Cloud平台，创建一个应用;
在这里插入图片描述

React

npx create-react-app --template memfire-react-template <your_project_name>

Vue

vue create --preset memfire-cloud/memfire-vue-tempalte <your_project_name>

SQL创建

-- 创建用户信息表
CREATE TABLE "public"."profile" ( 
  "id" uuid default uuid_generate_v4() primary key,
  "created_at" timestamp default now() ,
  "email" TEXT,
  "user_name" TEXT,
  "avatar" VARCHAR,
  "introduction" VARCHAR
);
-- 创建todo表
CREATE TABLE "public"."todo_list" ( 
  "id" SERIAL,
  "created_at" timestamp default now() ,
  "user_id" uuid references public.profile not null,
  "todo" VARCHAR NOT NULL
  "completed" BOOLEAN NOT NULL,
);
-- 创建实时聊天记录表
CREATE TABLE "public"."messages" ( 
  "id" SERIAL,
  "user_id" uuid references public.profile not null,
  "created_at" timestamp default now() ,
  "message" TEXT NOT NULL,
  "user_name" TEXT NOT NULL,
  "avatar" VARCHAR NOT NULL
);
-- Set up Row Level Security (RLS)
alter table todo_list enable row level security;

-- 用户只能删改查自己的todo
create policy "Users can select their own todo_list."
  on todo_list for select
  using ( auth.uid() = user_id );

create policy "Users can insert their own todo_list."
  on todo_list for insert
  with check ( auth.uid() = user_id );

create policy "Users can update own todo_list."
  on todo_list for update
  using ( auth.uid() = user_id );

  create policy "Users can delete own todo_list."
  on todo_list for delete
  using ( auth.uid() = user_id );

-- 人员信息列表每个人都可以访问
alter table account
  enable row level security;

create policy "Public account are viewable by everyone." on account
  for select using (true);

create policy "Users can insert their own account." on account
  for insert with check (true);

create policy "Users can select their own account." on account
  for update using (true);

create policy "Users can delete their own account." on account
  for delete using (true);

-- 聊天信息表每个人都可以查询数据；只有用户自己才能发送消息。

alter table messages
  enable row level security;

create policy "Public messages are viewable by everyone." on messages
  for select using (true);

create policy "Users can insert their own messages." on messages
  for insert with check (auth.uid() = user_id);

/**
 * REALTIME SUBSCRIPTIONS
 * 只允许在公共表进行实时监听。
 */

begin;
  -- remove the realtime publication
  drop publication if exists supabase_realtime;

  -- re-create the publication but don't enable it for any tables
  create publication supabase_realtime;
commit;

-- add tables to the publication
alter publication supabase_realtime add table public.messages;

-- 创建存储桶
insert into storage.buckets (id, name)
  values ('avatars', 'avatars');

insert into storage.buckets (id, name)
values ('files', 'files');

-- Set up access controls for storage.
create policy "files images are publicly accessible." on storage.objects
  for select using ( true );

create policy "Own can upload an files." on storage.objects
  for insert with check (true);

create policy "Own can update their own files." on storage.objects
  for update using ( true );

create policy "Own can delete their own files." on storage.objects
  for delete using ( true);