吓坏了DIY互动创作,胆小勿入?

93 阅读4分钟

最近在研究MemFire Cloud,正好改编了一个小项目。虽然投稿活动没有通过审核,但是官方认为我这个例子还不错,所以受邀写了这篇文章分享。本人是一个前端开发出身的程序媛,在使用MemFire Cloud过程中却出奇的顺畅,主要是数据库方面的操作对前端或者说数据库不太熟悉的人比较友好。接下来讲讲我的项目。Spooked(吓坏了)是一个可以讲恐怖故事的小应用,包括你的噩梦或者一些恐怖小故事。别人也可以接着你的故事继续写,根据提示写出自己的创意结局的DIY互动创作平台。胆小勿入哦~ img

下载代码

项目最终代码(代码不需要做修改,只需要提供supabaseUrl和supabaseKey和创建数据表初始化即可运行)

github.com/LucaRao/Spo…

创建应用

我们就是通过在这里创建的应用来获得数据库、云存储等一系列资源,并获得该应用专属的API访问链接和访问密钥,就可以轻松的与以上资源进行交互。

登录MemFire Cloud创建应用,并获取服务地址以及token信息

img

img

Anon public是客户端API密钥。它允许“匿名访问”我们的数据库,直到用户登录。登录后,密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。 注意:service_role secret可以绕过任何安全策略完全访问我们的数据。这些密钥必须保密,并且要在服务器环境中使用,决不能在客户端或浏览器上使用。 在后续示例代码中,需要提供supabaseUrl和supabaseKey。

配置访问秘钥

将上一步中获取的anon public和网址分别设置到supabaseUrl和supabaseKey中

在根目录.env文件里

img

创建数据表

account表:用户表

名称类型描述
iduuid主键,自增,每条评论的唯一标识ID
joined_attimestampt创建时间
emailtext用户名

posts表:故事列表

名称类型描述
idint8主键,自增,每条评论的唯一标识ID
created_attimestampt创建时间
updated_attimestampt用户名
titletext标题
bodytext内容
authoriduuid与auth.users id关联

replies表:评论表

名称类型描述
idint8主键,自增,每条评论的唯一标识ID
created_attimestampt创建时间
postidint8文章id
authoriduuid与auth.users id关联
bodytext内容

reports表:回复评论表

名称类型描述
idint8主键,自增,每条评论的唯一标识ID
created_attimestampt创建时间
created_byUUID回复人员
reported_postint8被留言的post的id
reported_userUUID留言人员
descriptiontext回复内容

(1)创建表

视图化表结构编辑器创建表形式:

img

img

img

img

sql语句创建表形式:

img

 CREATE TABLE "public"."account" ( 
  "id" UUID NOT NULL,
  "joined_at" TIMESTAMP,
  "email" TEXT NOT NULL,
  CONSTRAINT "account_pkey" PRIMARY KEY ("id")
);
​
CREATE TABLE "public"."posts" ( 
  "id" SERIAL,
  "created_at" TIMESTAMP,
  "updated_at" TIMESTAMP,
  "title" TEXT NOT NULL,
  "body" TEXT NOT NULL,
  "authorid" UUID NOT NULL,
  CONSTRAINT "posts_pkey" PRIMARY KEY ("id"),
  CONSTRAINT "posts_authorid_fkey" FOREIGN KEY ("authorid") REFERENCES "auth"."users" ("id") ON DELETE NO ACTION ON UPDATE NO ACTION
);
​
CREATE TABLE "public"."replies" ( 
  "id" SERIAL,
  "created_at" TIMESTAMP,
  "postid" BIGINT NOT NULL,
  "authorid" UUID NOT NULL,
  "body" TEXT NOT NULL,
  CONSTRAINT "replies_pkey" PRIMARY KEY ("id"),
  CONSTRAINT "replies_authorid_fkey" FOREIGN KEY ("authorid") REFERENCES "auth"."users" ("id") ON DELETE NO ACTION ON UPDATE NO ACTION,
  CONSTRAINT "replies_postid_fkey" FOREIGN KEY ("postid") REFERENCES "public"."posts" ("id") ON DELETE NO ACTION ON UPDATE NO ACTION
);
​
CREATE TABLE "public"."reports" ( 
  "id" SERIAL,
  "created_at" TIMESTAMP,
  "created_by" UUID NOT NULL,
  "reported_post" BIGINT NOT NULL,
  "reported_user" UUID NOT NULL,
  "description" TEXT NOT NULL,
  CONSTRAINT "reports_pkey" PRIMARY KEY ("id")
);

(2)创建触发器

创建完表后,在相应的数据库sql编辑器里面创建触发器

-- Updates a row in public.posts
create or replace function public.handle_updated_at() 
returns trigger as $$
begin
  update posts 
     set updated_at = new.created_at 
   where id = new.postid;
  return new;
end;
$$ language plpgsql security definer;
​
-- Trigger the function every time a user is created
create trigger on_new_reply
  after insert on public.replies
  for each row execute procedure public.handle_updated_at();
​
-- Inserts a row into public.account
create or replace function public.handle_new_user() 
returns trigger as $$
begin
  insert into public.account (id, email)
  values (new.id, new.email);
​
  return new;
end;
$$ language plpgsql security definer;
​
-- Trigger the function every time a user is created
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

img

运行程序

node -v # v14.16.0
npm install
npm run dev -- --open

认证设置

认证设置,使用本地的IP地址来替换认证设置中的网站地址和其他重定向URL。

img

点击登录页面,如下图所示,输入注册邮箱,应用会发送确认注册邮件。登录注册邮箱后,打开最新收到的确认注册邮件,点击链接,完成注册操作,即可登录论坛。

img

程序界面如下图

img

小结

以上就是Spooked(吓坏了)项目开发的全部步骤,可以看到,除了我自己开发代码的过程以外,在MemFire Cloud上的操作还是挺简单的,没有复杂的界面操作,也没有复杂的需要学习的语法之类的技术,而且还是免费的。唯一我觉得不够便捷的可能就是文档不太完善,不太能容易找到自己想要的模块的介绍,这一点希望官方可以进一步完善,总体来说,我觉得MemFire Cloud还是可以充当我们开发小应用的头号标选。