从零搭建基于 AI 问答平台(7) 定义Quiz 数据模型

从零搭建

添加模型定义

修改 prisma/schema.prisma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
enum GameType {
  mcq
  open_ended
}

model Game {
  id          String     @id @default(cuid())
  userId      String
  questions   Question[]
  timeStarted DateTime
  topic       String
  timeEnded   DateTime?
  gameType    GameType

  @@index([userId])
}

model topic_count {
  id    String @id @default(cuid())
  topic String @unique
  count Int
}

model Question {
  id                String   @id @default(cuid())
  question          String
  answer            String
  gameId            String
  options           Json? // for mcq questions
  percentageCorrect Float? // for open_ended questions
  isCorrect         Boolean? // for mcq questions
  questionType      GameType
  userAnswer        String?

  game Game @relation(fields: [gameId], references: [id])

  @@index([gameId])
}

执行：

1
bunx prisma db push
More...

从零搭建基于 AI 问答平台(3) 编写Navbar/暗黑模式

从零搭建

我们需要导航栏里添加Logo/暗黑模式/用户按钮，按下面步骤：

添加 Navbar

添加文件 ``:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { UserButton } from '@clerk/nextjs';
import Link from 'next/link';
import React from 'react'
import { ThemeToggle } from './ThemeToggle';

type Props = {}

function Navbar({}: Props) {
  return (
    <div className="fixed inset-x-0 top-0 bg-white dark:bg-gray-950 z-[10] h-fit border-b border-zinc-300  py-2 ">
      <div className="flex items-center justify-between h-full gap-2 px-8 mx-auto max-w-7xl">
        {/* Logo */}
        <Link href={"/"} className="flex items-center gap-2">
          <p className="rounded-lg border-2 border-b-4 border-r-4 border-black px-2 py-1 text-xl font-bold transition-all hover:-translate-y-[2px] md:block dark:border-white">
            SmartQuiz
          </p>
        </Link>
        <div className="flex items-center">
          <ThemeToggle className='mr-4' />
          <UserButton />
        </div>
      </div>
    </div>
  );
}

export default Navbar
More...

如何配置多个ssh密钥对，解决 github 多用户上传问题

当日所学

背景

当我需要在同一个客户端push代码到不同的github账号时，碰到了问题，添加私钥时出错：“key is already in use”，这是因为同一个key只能对应一个github账号。下面我们需要进行配置，将key分开。

生成单独密钥

1
ssh-keygen -t rsa -C 'bearalise@gmail.com' -f ~/.ssh/id_rsa_bearalise_github

配置不同密钥

编辑 ~/.ssh/config:

1
2
3
4
5
6
7
8
9
10
# 个人的GitHub公钥
Host github.com
HostName github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_ed25519

Host github_b.com
HostName github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_rsa_bearalise_github
More...

从零搭建基于 AI 问答平台(2) 安装 Clerk

从零搭建

注册 Clerk

Clerk 是一个以开发者为中心的身份验证和用户管理系统，提供了预构建的React组件和挂钩，用于登录、注册、用户个人资料以及组织管理。 这个模板专为Clerk和Next.js（App Router）设计，让你能够在几分钟内快速启动并运行一个功能齐全的认证流程应用，按下面步骤操作：

  1. 注册 Clerk 账号
  2. 点击 Create application 创建一个应用，也就是我们现在开发的这个项目。
  3. 配置鉴权选项，例如第三方登录提供商。这里需要事先声明的是，第三方登录提供商在开发环境是可以随意增加的，但是在生产环境每一个都需要额外的配置，一般选常用的就可以了。
  4. 进入 Clerk 控制台 找到 API keys，分别是一个公钥和私钥，将这个配置复制到我们项目中的环境变量里。

安装 Clerk

命令行：

1
bun add @clerk/nextjs

修改.env, 添加环境变量：

1
2
3
4
5
6
7
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=xxxx
CLERK_SECRET_KEY=sk_test_xxxx

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
More...

请我喝杯咖啡吧~

支付宝
微信