我构建了一个 Solana 小费罐

Source: Dev.to

说实话。当我开始这个项目时，我根本不知道自己在干什么。

我了解一些 Solana 的基础知识。我读过文档，看过几段 YouTube 视频，点头表示自己好像都懂了。但真正动手构建东西？那是完全不同的故事。

于是我给自己设定了一个挑战：构建一个真实的 dApp，部署它，并让它运行——不依赖任何一步步指导的教程。

我选择了一个 tip jar。概念很简单：连接你的钱包，输入金额，向某人发送 SOL。会有多难呢？

事实证明非常难。但我还是做到了。

Source: …

为什么要设立小费罐？

因为我想构建一个真实的项目，但又不想让它过于庞大。

很多面向初学者的 Solana 教程会让你构建的东西要么过于简单，缺乏亮点，要么过于复杂，难以完成。小费罐恰好位于两者之间。它涉及：

• 真正的钱包连接
• 真正的交易
• 在真实区块链上移动真实的资金

…但其逻辑足够简单，你可以理解自己编写的每一行代码。

规则： 如果你无法解释你的代码在做什么，那你其实并不真正了解它。

我使用的技术栈

• Solana + Anchor – 用于智能合约
• React + Vite – 用于前端
• Phantom wallet – 用于连接和签名
• Vercel – 用于部署

我选择 Vite 而不是 Create React App，因为 CRA 在现在看来已经很陈旧。Vite 速度快、现代，开发体验也更好。

应用实际工作原理

1. 打开应用 → 看到一个 Connect Wallet 按钮。
2. 点击它 → Phantom 弹出窗口，您批准连接。
3. 应用此时获取您的公钥、余额等信息。
4. 输入要发送的 SOL 数量并点击 Send。

幕后（≈2 秒）：

• 前端构建一笔交易——可以把它看作一张已签名的支票，标明谁在发送、谁在接收、多少以及您的签名。
• 交易被发送到 Solana devnet。验证节点检查交易是否合法、确认后执行。
• SOL 转移，区块链永久记录这笔交易。

完成。没有人可以撤销或篡改这笔交易。正是这种永久性让我对区块链感兴趣——不是炒作，也不是价格，而是代码可以在没有中间人的情况下强制执行规则。

几乎把我逼疯的部分

Vite 和 Solana 并不是天生相容的。Solana 的 @solana/web3.js 库是在 Webpack 主导一切的时代构建的；它依赖于 Node.js 的内置模块（如 buffer），而 Vite 为了浏览器兼容性会刻意排除这些模块。

我一直收到这个错误：

Module "buffer" has been externalized for browser compatibility

解决办法只有 两行：

npm install buffer

// main.tsx
import { Buffer } from "buffer";

window.Buffer = Buffer;

两行代码。就这么简单。有时最痛苦的 bug 竟有如此平淡的解决方案。

Anchor 实际做了什么

在这个项目之前，我认为 Anchor 是可选的——可有可无的好东西。但它不是可选的。

用纯 Rust 编写 Solana 程序而不使用 Anchor，就像在没有工具的情况下制作家具：技术上可以做到，但你为什么要这么折磨自己？

Anchor 处理所有会让你想放弃的样板代码：账户验证、错误处理、序列化等。它让你专注于程序真正要做的事。

核心程序逻辑

pub fn send_tip(ctx: Context, amount: u64) -> Result {
    anchor_lang::system_program::transfer(
        CpiContext::new(
            ctx.accounts.system_program.to_account_info(),
            anchor_lang::system_program::Transfer {
                from: ctx.accounts.sender.to_account_info(),
                to:   ctx.accounts.receiver.to_account_info(),
            },
        ),
        amount,
    )?;

    msg!("Tip sent! 💰");
    Ok(())
}

那行结尾的 CPI（跨程序调用）基本上是我的程序在说：“嘿，Solana 的系统程序，请帮我转移这笔 SOL。”Solana 上的程序不会直接转移 SOL；它们会请求系统程序来完成。一旦明白了这一点，所有东西就更有意义了。

Devnet 与 Mainnet

我构建的所有内容都运行在 devnet —— Solana 的测试环境。技术相同，速度相同，但 SOL 是假的且免费。

这有什么关系？在 mainnet 上的错误会花真金白银。在 devnet 上，你可以弄坏东西，修复它们，再次弄坏，而且不花一分钱。

当我准备测试时，我给自己空投了一些 devnet SOL：

solana airdrop 2

免费资金。仅在 devnet 上。趁还能用时好好享受吧。

部署它

我使用了 Vercel，耗时约 3 分钟。

1. 连接 GitHub，导入仓库。
2. 将根目录设置为 app。
3. 点击 Deploy。

就这么简单。Vercel 检测到 Vite 项目并完成了其余工作。

• 线上应用: (link omitted in original)
• 源代码: (link omitted in original)

我会做的不同之处

1. 首先设置缓冲区 polyfill。 不要等到中途才发现错误。
2. 从第一天起就使用 devnet，并确保在连接前将 Phantom 切换到 devnet。网络不匹配会导致令人困惑的错误。
3. 更早编写测试。 Anchor 的 TypeScript 测试设置非常优秀。我为了快速推进而跳过了它，结果在调试时付出了代价。

接下来

这是第一版。以下是我想添加的内容：

• A transa… (帖子在此截断)

交易历史

• 一个历史视图，您可以查看所有曾经发送的打赏。
• 一个消息字段，发送者可以在打赏时留下备注。
• 当我对使用真实 SOL 足够有信心时，最终会在主网部署。

如果你刚刚起步

构建点东西。任何东西。

文档不错。教程也很有帮助。但没有什么能像在午夜盯着错误信息并最终解决它那样教会你。

1. 从小做起。
2. 完成它。
3. 部署它。

然后再构建下一个东西。

这就是全部策略。