上期視頻我們創(chuàng)建好了BaaS服務(wù)的后端應(yīng)用。從這期視頻開始，我們將從頭開發(fā)一個互聯(lián)網(wǎng)記賬本應(yīng)用。本期視頻我們介紹一下如何使用模板快速開啟我們的應(yīng)用開發(fā)之旅。

相關(guān)代碼

本期視頻我們介紹了如何通過模板快速開始MemFire Cloud項目，簡單了解了模板代碼內(nèi)置的功能，同時演示了一下如何配置并運行我們的模板代碼。

新建應(yīng)用

注冊登錄MemFire Cloud平臺，創(chuàng)建一個應(yīng)用;

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創(chuàng)建

-- 創(chuàng)建用戶信息表
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
);
-- 創(chuàng)建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,
);
-- 創(chuàng)建實時聊天記錄表
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);

-- 聊天信息表每個人都可以查詢數(shù)據(jù)；只有用戶自己才能發(fā)送消息。

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
 * 只允許在公共表進行實時監(jiān)聽。
 */

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;

-- 創(chuàng)建存儲桶
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);

下一期視頻我們會帶領(lǐng)大家快速了解一下平臺提供的API，以及如何通過API文檔來學習SDK的用法。我們下期再見。文章來源地址http://www.zghlxwxcb.cn/news/detail-854235.html

到了這里，關(guān)于應(yīng)用實戰(zhàn)｜從頭開始開發(fā)記賬本2：基于模板快速開始的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！