后端数据库【免费下载链接】instantInstant is the best backend for AI-coded apps. You get auth, permissions, storage, presence, and streams — everything you need to ship apps your users will love.项目地址https://gitcode.com/gh_mirrors/inst/instant点击查看免费下载导读本文基于本仓库中的examples/vite-react示例项目完整讲解如何在 Vite React 技术栈中接入 InstantDBInstant实现数据读写、实时同步与在线状态presence等能力。读完本文你将掌握 InstantDB 项目的初始化方式、数据模型schema的声明与推送、权限规则的配置以及基于 React Hooks 的完整增删改查与多人实时协作的开发流程。该示例项目由create-instant-app脚手架生成是 Instant 官方模板之一仓库中完整保留了 vite-react 模板源码包含 schema、权限、数据库初始化和一个可直接运行的实时 Todo 应用。项目概览一个开箱即用的 InstantDB 前端模板examples/vite-react 是一个标准的 Vite React TypeScript 项目其核心结构如下examples/vite-react/ ├── public/favicon.svg # 站点图标 ├── src/ │ ├── lib/db.ts # InstantDB 客户端初始化唯一出口 │ ├── instant.schema.ts # 数据模型定义entities / links / rooms │ ├── instant.perms.ts # 权限规则InstantRules │ ├── App.tsx # 实时 Todo 应用读、写、presence │ ├── main.tsx # React 入口 │ └── index.css # 全局样式Tailwind CSS v4 ├── index.html ├── vite.config.ts # Vite 配置React Tailwind 插件 ├── package.json └── tsconfig*.json从 package.json 可以看到模板的核心依赖只有三个instantdb/reactReact 侧的 InstantDB 客户端提供init、useQuery、db.transact、db.room等核心 APIinstantdb/admin服务端管理 SDK用于需要服务端管理能力的场景如沙箱中的 admin-sdk-expressreact/react-domReact 19。开发依赖则包含 Vite 8、TypeScript、ESLint 9 以及 Tailwind CSS v4通过tailwindcss/vite插件接入项目使用pnpm10.2.0作为包管理器。也就是说这个模板在前端框架和实时后端之间做了清晰的分工UI 层由 Vite React 负责而鉴权、权限、存储、实时同步等后端能力全部由 InstantDB 云服务提供。环境准备安装依赖与配置应用 ID模板本身不包含.env文件客户端初始化时通过import.meta.env.VITE_INSTANT_APP_ID读取应用 ID见 src/lib/db.ts因此首次运行前需要自行创建.env文件# 在项目根目录创建 .env内容如下 VITE_INSTANT_APP_IDyour-instant-app-idVite 会通过import.meta.env自动加载.env中以VITE_开头的变量。应用 ID 需要先在 Instant 控制台创建应用后获得或者使用instant-cli init见下文自动完成应用创建与环境变量写入。安装依赖并启动开发服务器npm install npm run devnpm run dev对应vite命令启动后即可在浏览器中打开本地开发地址看到模板自带的实时 Todo 应用。初始化客户端一行代码接入 InstantDBInstantDB 的接入入口非常精简整个模板只有一个客户端初始化文件 src/lib/db.tsimport { init } from instantdb/react; import schema from ../instant.schema; export const db init({ appId: import.meta.env.VITE_INSTANT_APP_ID, schema, useDateObjects: true, });init接受三个关键参数appIdInstant 应用的唯一标识从环境变量读取schema本地声明的数据模型下一节详解传入后 TypeScript 会自动推导出类型安全的查询与事务 APIuseDateObjects: true让客户端把时间字段解析为原生Date对象而不是字符串。模板将db作为全局单例导出所有组件共享同一个客户端实例这是useQuery、db.transact、db.room能跨组件协同工作的基础。数据模型用i.schema声明实体、关联与房间src/instant.schema.ts 是模板的数据模型定义它演示了 Instant 建模的三个核心维度实体entities、关联links和房间roomsimport { i } from instantdb/react; const _schema i.schema({ entities: { $files: i.entity({ path: i.string().unique().indexed(), url: i.string(), }), $users: i.entity({ email: i.string().unique().indexed().optional(), imageURL: i.string().optional(), type: i.string().optional(), }), todos: i.entity({ text: i.string(), done: i.boolean(), createdAt: i.number(), }), }, links: { $usersLinkedPrimaryUser: { forward: { on: $users, has: one, label: linkedPrimaryUser, onDelete: cascade, }, reverse: { on: $users, has: many, label: linkedGuestUsers, }, }, }, rooms: { todos: { presence: i.entity({}), }, }, }); type _AppSchema typeof _schema; // eslint-disable-next-line typescript-eslint/no-empty-object-type interface AppSchema extends _AppSchema {} const schema: AppSchema _schema; export type { AppSchema }; export default schema;实体entities与字段约束todos业务实体包含text字符串、done布尔、createdAt数字覆盖了 Todo 应用的全部字段$files与$users以$开头的系统级实体。$users由 Instant 的认证体系自动维护这里通过emailunique().indexed()可空、imageURL、type等字段扩展了用户资料$files用于文件上传场景path字段声明了unique().indexed()约束。字段修饰符.unique()唯一约束、.indexed()索引、.optional()可空会直接影响查询性能与数据完整性也是后续权限规则引用的依据。关联links用户之间的映射links中的$usersLinkedPrimaryUser演示了 Instant 的关联语法forward声明一个用户有一个 linkedPrimaryUserreverse声明反向一个用户有多个 linkedGuestUsers。onDelete: cascade表示主用户删除时级联清理关联。这套语法与关系型数据库的外键语义类似但通过双向标签让查询可以从任意一端出发。房间rooms与在线状态rooms.todos.presence声明了一个名为todos的实时房间presence: i.entity({})表示房间内可以广播任意的在线状态数据。这是模板中Number of users online计数器的数据来源下一节详述。最后通过interface AppSchema extends _AppSchema {}的写法把 schema 类型暴露给应用代码让App.tsx中可以写出类型安全的InstaQLEntityAppSchema, todos。权限规则声明式的访问控制src/instant.perms.ts 定义了应用的权限规则模板默认导出一份空规则import type { InstantRules } from instantdb/react; const rules { /** * posts: { * allow: { * view: true, * create: isOwner, * update: isOwner, * delete: isOwner, * }, * bind: [isOwner, auth.id ! null auth.id data.ownerId], * }, */ } satisfies InstantRules;Instant 的权限模型是规则即代码每个实体可配置view / create / update / delete四类操作通过bind绑定可在表达式中引用的布尔谓词如示例中的isOwner谓词内部使用auth当前用户与data被操作数据做判断。例如bind: [isOwner, auth.id ! null auth.id data.ownerId]就实现了只有资源所有者本人能增删改的经典场景。当前模板将规则留空意味着在补充规则之前数据访问遵循默认策略——这也是新项目落地时最需要优先补全的部分。规则文件会被instant-cli push一并推送到云端见下文。实时数据读写模板自带的 Todo 应用模板的 src/App.tsx 是一个完整的多人实时 Todo 应用集中展示了 InstantDB 的核心 API 用法。读取数据useQuery与usePresenceconst { isLoading, error, data } db.useQuery({ todos: {} }); const { peers } db.rooms.usePresence(room); const numUsers 1 Object.keys(peers).length;db.useQuery({ todos: {} })声明式查询全部todos。Instant 的查询是响应式的——数据变化时组件自动重渲染无需手动刷新或管理缓存db.rooms.usePresence(room)订阅todos房间内的在线状态。peers是当前房间内其他用户的状态集合1 peers 数量即为在线总人数room通过db.room(todos)创建与 schema 中声明的rooms.todos一一对应。加载中返回null出错时展示错误信息正常时解构出todos列表交给子组件渲染。写入数据db.transact与db.tx写入全部通过db.transact提交事务模板演示了四种典型写法// 新增id() 自动生成主键 function addTodo(text: string) { db.transact( db.tx.todos[id()].update({ text, done: false, createdAt: Date.now(), }), ); } // 删除单条 function deleteTodo(todo: Todo) { db.transact(db.tx.todos[todo.id].delete()); } // 更新单条 function toggleDone(todo: Todo) { db.transact(db.tx.todos[todo.id].update({ done: !todo.done })); } // 批量事务一次提交多个操作 function deleteCompleted(todos: Todo[]) { const completed todos.filter((todo) todo.done); const txs completed.map((todo) db.tx.todos[todo.id].delete()); db.transact(txs); } function toggleAll(todos: Todo[]) { const newVal !todos.every((todo) todo.done); db.transact( todos.map((todo) db.tx.todos[todo.id].update({ done: newVal })), ); }关键点db.tx.todos[id()]定位到具体实体id()由instantdb/react导出自动生成全局唯一主键.update({...})执行 upsert 语义.delete()删除实体db.transact接受单个事务或事务数组批量提交保证原子性——Delete Completed和Toggle All都通过数组一次性提交所有写操作对其他在线用户实时可见这正是useQuery响应式机制带来的效果。UI 层纯 React 组件App.tsx下半部分由TodoForm输入新增、TodoList勾选/删除与ActionBar统计剩余与批量删除三个组件组成均为无状态组件只接收todos并回调上面的写函数。由于数据流完全由db驱动组件不需要本地状态管理这也是AI 生成友好的后端所追求的开发体验。开发工作流schema 的推送与拉取README 中强调了两个最重要的 CLI 命令# 推送 schema 与权限变更到云端 npx instant-cli push # 从云端拉取最新的 schema 与权限 npx instant-cli pullinstant-cli是 Instant 的命令行工具其命令注册逻辑位于 client/packages/cli/src/index.ts除push、pull外还包含init初始化新项目可用-a指定已有应用 ID、--temp创建 24 小时后自动销毁的临时应用login/logout管理 CLI 登录态app list/app delete管理当前账号下的应用auth系列管理认证客户端、可信域名origin、邮件模板等webhooks系列管理 Webhook 的增删改查与事件重放。push会把本地的 instant.schema.ts 与 instant.perms.ts 同步到云端pull则反向把云端 schema 同步到本地。这两条命令构成了代码化 schema的闭环schema 以 TypeScript 文件的形式纳入版本管理与代码一起评审、一起发布避免数据库与代码漂移问题。CLI 还支持--env file指定 .env 文件、-t --token token覆盖认证 token、-y自动应答提示等全局选项见 index.ts。构建与生产预览模板同样提供了生产构建能力对应的脚本同样位于 package.jsonnpm run build # tsc -b vite build产出 dist/ 静态资源 npm run preview # 本地预览生产构建产物 npm run lint # ESLint 代码检查build先执行 TypeScript 项目引用编译tsc -b做类型检查再由 Vite 打包产物为纯静态文件可直接部署到任意静态托管平台。生产环境同样需要提供VITE_INSTANT_APP_ID环境变量构建时注入并且需要在 Instant 控制台把生产域名加入可信来源鉴权与权限规则才会对生产流量生效。小结从模板到生产可用的三个步骤综合上述内容使用该 Vite React 模板接入 InstantDB 的完整路径可以归纳为三步初始化创建应用并配置VITE_INSTANT_APP_ID运行npm install npm run dev验证实时 Todo 应用可运行建模与授权在 instant.schema.ts 中声明实体、关联与房间在 instant.perms.ts 中补齐view/create/update/delete规则然后用npx instant-cli push同步到云端接入业务沿用模板中inituseQuerydb.transactdb.rooms.usePresence的模式编写业务页面最后通过npm run build产出可部署的静态站点。模板本身examples/vite-react既是可运行的教学示例也是新项目的最佳起点——实时数据、在线状态、类型安全与代码化 schema 四件事都已开箱即用剩下的就是往todos之外添加你自己的实体了。赞分享后端数据库【免费下载链接】instantInstant is the best backend for AI-coded apps. You get auth, permissions, storage, presence, and streams — everything you need to ship apps your users will love.项目地址https://gitcode.com/gh_mirrors/inst/instant点击查看免费下载相关推荐Egg 快速入门实战指南从脚手架初始化到 HackerNews 完整应用Egg 快速入门实战指南从脚手架初始化到 HackerNews 完整应用 本篇指南基于 Egg 官方 Quick Start 文档展开面向想要在 Node.后端Web框架基于 InstantDB 与 SolidJS Vite 构建实时 Todo 应用示例项目完整解析基于 InstantDB 与 SolidJS Vite 构建实时 Todo 应用示例项目完整解析 InstantDB 是一款面向 AI 编码时代应用的后端后端数据库Relay 快速上手指南在 Vite React 应用中接入 Relay 的完整实战Relay 快速上手指南在 Vite React 应用中接入 Relay 的完整实战 导读 本指南基于 Relay 官方文档 quick start.md前端开发工具上一篇Keychain-Dumper深入探索macOS密钥链泄露工具下一篇JSON-Schema 开源项目教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考