认识您的开发人员

我是：

• 一个非常非常业余的 Python 开发者。安装库的时候我还是会感到困惑。我最常听到的 ChatGPT 提示是：“这段代码有什么问题？”
• 一个更业余的 JavaScript 开发者。实际上，除了从 Medium 教程里复制粘贴的内容外，我对 JavaScript 一窍不通。
• 一位拥有 28 年经验的数字营销人员，大脑可塑性正在下降

另外，我不懂开发者的语言。对我来说，代币就像我在 1990 年代乘坐地铁一样。所以，如果我偶尔会说“那个 API 玩意儿”，请原谅我。我会举例说明，希望您能理解。

我建造了什么

我考虑做一些基本的事情，或者有益健康的事情，或者既基本又有益健康的事情。

不。

见识一下“侮辱测量仪”。只需 0.01 PiCoin，即可获得三种创意十足的侮辱语，随时准备奉上：

相信我，这是品牌标志。

我使用的工具

我用过：

• Python3
• 这些 Python3 库
  • 烧瓶
  • flask_bootstrap（可选）
  • pipenv
  • 随机的
  • 请求
  • simplejson
• Pi SDK（区块链平台）

所有这些都在我的可靠 Macbook Pro 上运行，运行 Sonoma。

关于 Pi SDK

Pi SDK 将您的应用连接到所有 Pi 货币。真正的加密货币爱好者可能会因为这个比喻而打我的脸，但 SDK 就像您商店里的信用卡终端一样。

工作原理如下：

1. 当有人访问你的页面时，Pi 会启动一切。SDK 会连接到你的应用，确认用户已授权访问他们的 Pi 钱包等等。如果你的应用是实体商店，这时你就会打开灯并解锁门。
2. 检查未完成的付款。这没什么好比的。别忘了这一步。我忘了，而且为此吃过不少苦头。
3. 耐心等待用户采取行动。你在柜台后面或四处走动，在顾客浏览时整理货架上的物品
4. 创建付款。Pi 设置交易的方式与你要求客户提供信用卡的方式相同
5. 然后，在后台进行一系列操作。您刷了信用卡。付款信息将发送给支付提供商，支付提供商会确认信用卡号，检查资金，如果资金充足，则会将客户的货币转给您
6. 返回状态。最后，Pi 说：“好了，全部完成。你拿到金币了！”

设置Python环境

如果你不是像我一样的 Python 专家（咳嗽），下面是我设置环境的方法：

1. 打开终端
2. 运行 pipenv shell。这会创建一个封闭的环境，让我可以安全地在隔离的环境中中断操作。如果你还没用过，可以在这里查看。市面上还有其他虚拟环境工具，但这个对我来说没什么难度。
3. 安装上面列出的库

就是这样。

构建 Python 应用程序

我就不多说细节了。我用 Flask 后端搭建了一个简单的网页。这个应用会从文本文件中读取辱骂内容，抓取随机内容，然后使用一些基本的 JavaScript 代码将其传递到网页上。

目前，我们只是在构建不带 SDK 连接的应用。这意味着三种途径：

• /get_quote从文本文件中随机抓取一条引言。它不连接到 Pi，而是连接到一些 JavaScript，用于统计请求的引言数量。如果用户请求的引言超过三条，JavaScript 会显示一个带有按钮的模态框，该按钮连接到“批准”路由。
• /back很无聊

相当简单。你可以做得更花哨。

请务必记下应用程序 URL：

在 Pi 上设置应用程序时您将需要它。

在 Pi 上注册你的新应用

如果你有步骤说明，这很容易。我是个乐于助人的人，所以步骤如下：

注意：您将使用两个应用程序：Pi 浏览器（基于 Pi 平台构建的 Web 浏览器）和 Pi 挖矿应用程序（用于生成所有 Pi 功能）。您需要来回切换。这可能会让您有点抓狂，但从长远来看，这确实很有意义。一旦您习惯了，它会让工作流程更轻松。相信我，我不会误导您。

1. 获取 Pi 挖矿应用程序

在进行其他操作之前，你需要安装 Pi Mining App。这是一个可以在 iPhone 或 Android 设备上运行的小程序。获取方式：

Google Play 商店：https://play.google.com/store/apps/details ?id= com.blockchainvault，或

App Store：https://itunes.apple.com/us/app/pi-network/id1445472541

它还可以让你挖掘 Pi 货币。无需 GPU。

去吧，我等你。

都准备好了吗？进入下一步。

2. 获取 Pi 浏览器

接下来，您需要下载 Pi 浏览器，这是一个移动网络浏览器，可让您访问使用 Pi SDK 构建的所有应用程序。

Google Play商店：https://play.google.com/store/apps/details?  id=pi.browser

苹果应用商店：https://apps.apple.com/us/app/pi-browser/id1560911608 

一切就绪。

输入你的应用名称和描述。我使用的App Network是Pi Testnet 。我绝对不会在现实世界中尝试运行这个东西。而且，Testnet 的交易是 100% 纯 Pi 交易，所以你不会因为一个有缺陷的应用而向任何人收费。我建议你也这样做。

您应该会看到这个方便的屏幕：

该清单显示了您在主网上启动应用程序的进程。

现在，我们需要设置一个钱包。

我返回并重置为http://127.0.0.1:3000 ，一切正常。

将 Python 应用程序与 Pi 集成

这真的非常非常困难。

我开玩笑的。开玩笑的。很简单。只需将以下内容添加到你的 Python 应用的 HTML 代码中：

注意：仅在 Pi 沙盒中运行应用程序时 沙盒标志才为“true” 。

然后添加以下代码，用于验证用户身份：

 Javascript
<script> 
    // Authenticate the user, and get permission to request payments from them:
    const scopes = ['payments'];

    // Read more about this callback in the SDK reference:
    function onIncompletePaymentFound(payment) { 
        paymentId = payment.identifier
        txid = payment.transaction.txid
        $.post('/payment/complete',
                {
                    paymentId: paymentId,
                    txid: txid,
                    debug: 'cancel'
                }
            )
    };

    Pi.authenticate(scopes, onIncompletePaymentFound).then(function(auth) {
console.log('woot!');
    }).catch(function(error) {
      console.error(error);
    });
</script>

最后，将其添加到你的 Flask app.py 中：

Python
header = {
    'Authorization': "Key YOUR-API-KEY"
}

这会将您的 API 密钥提供给 SDK。请练习安全变量包含。

注意：这假设你有一个 Pi 帐户，里面有一点 Pi，这是你应该有的。毕竟，你已经安装了 Pi Mining 应用程序和 Pi 浏览器。

迄今为止的时间：< 2 小时，包括宠物护理

不算构建 Python 应用程序，我只是：

1. 设置 Pi 钱包
2. 开始挖掘 Pi（为什么不呢？）
3. 设置应用程序
4. 喂了我的猫。这时她真的不耐烦了。
5. 已获得与 Pi 区块链集成所需的所有必要内容
6. 遛狗的时候，它像个正在接受如厕训练的小孩一样蹦蹦跳跳。
7. 在我家狗狗把泥巴弄得到处都是之前，把它的脚擦干
8. 阻止我的狗把我的猫逼到卧室角落，否则猫会活活剥掉它的皮
9. 让我的应用程序在 Pi 沙盒中启动并运行

写出这些步骤花费了更多时间。

你可能比这个X世代的程序员还快。如果你说你花了不到1个小时，我就说你装逼了。

设置付款处理

这才是“真正的”工作。之所以用引号，是因为一旦你知道怎么做，它就很简单了。我一会儿会一步一步讲解。现在，只需粘贴以下内容：

1. 将此代码添加到您的 HTML 页面

将其粘贴到 Pi.init 代码后面：

 Javascript
<script>
    // we're doing payments
    const Pi = window.Pi;
    // main payments function
    function createPayment() {
        const paymentData = {
            amount: .01,
            memo: "This buys you three more insults! What a deal!!!",
            metadata: { insultid: 123456 }
        };
        // the SDK does all this like magic
        const paymentCallbacks = {
            onReadyForServerApproval: (paymentDTO) => {
                paymentId = paymentDTO
                $.post('/payment/approve', {
                    paymentId: paymentId,
                    accessToken: accessToken
                })
            },
            onReadyForServerCompletion: (paymentDTO, txid) => {
                paymentId = paymentDTO
                txid = txid
                $.post('/payment/complete',
                        {
                            paymentId: paymentId,
                            txid: txid,
                            debug: 'complete'
                        }
                    )
            },
            onCancel: (paymentDTO) => {
                paymentId = paymentDTO.identifier
                $.post('/payment/complete',
                        {
                            paymentId: paymentId,
                            debug: 'cancel'
                        }
                    )
            },
            onError: (paymentDTO) => {
                console.log('There was an error ', paymentDTO)
                paymentId = paymentDTO.identifier
                $.post('/payment/error',
                        {
                            paymentDTO: paymentDTO,
                            paymentId: paymentId,
                            debug: 'error'
                        }
                    )
            },
            onIncompletePaymentFound: function(paymentDTO)
            {
                paymentId = paymentDTO.identifier
                console.log('onIncompletePaymentFound', paymentId)
                $.post('/payment/complete',
                        {
                            paymentId: paymentId,
                            txid: paymentDTO.transaction.txid
                        }
                    )
             }
        };
        Pi.createPayment(paymentData, paymentCallbacks);
    }
</script>

2.将此代码添加到app.py

这样就设置好了之前提到的 Flask 路由。这些只是 Pi 的路由。你需要设置一些应用特定的路由。对我来说，这些是get_quote和back 。或者直接下载整个仓库。

Python
@app.route('/payment/approve', methods=['POST'])
def approve():
    # Build the header for user authentication
    accessToken = request.form.get('accessToken')
    userheader = {
        'Authorization': f"Bearer {accessToken}"
    }
    paymentId = request.form.get('paymentId')
    approveurl = f"https://api.minepi.com/v2/payments/{paymentId}/approve"
    response = requests.post(approveurl, headers=header)
    userurl = "https://api.minepi.com/v2/me"
    userresponse = requests.get(userurl, headers=userheader)
    userjson = json.loads(userresponse.text)
    return(response.text)

@app.route('/payment/complete', methods=['POST'])
def complete():   
    # Build the header for user authentication
    accessToken = request.form.get('accessToken')
    userheader = {
        'Authorization': f"Bearer {accessToken}"
    }
    paymentId = request.form.get('paymentId')
    txid = request.form.get('txid')
    userurl = "https://api.minepi.com/v2/me"
    userresponse = requests.get(userurl, headers=userheader)
    data = {'txid': txid}
    approveurl = f"https://api.minepi.com/v2/payments/{paymentId}/complete"
    response = requests.post(approveurl, headers=header, data=data)
    return(response.text)

@app.route('/payment/cancel', methods=['POST'])
def cancel():    
    paymentId = request.form.get('paymentId')
    approveurl = f"https://api.minepi.com/v2/payments/{paymentId}/cancel"
    response = requests.post(approveurl, headers=header)
    return(response.text)

@app.route('/payment/error', methods=['POST'])
def error():    
    paymentId = request.form.get('paymentId')
    approveurl = f"https://api.minepi.com/v2/payments/{paymentId}/cancel"
    response = requests.post(approveurl, headers=header)
    return(response.text)

@app.route('/me', methods=['POST'])
def getme():
    userurl = "https://api.minepi.com/v2/me"
    response = requests.post(userurl, headers=header)
    return(response.text)

这些新路线具有以下功能：

• /payment/approve连接到 Pi SDK，并启动整个支付/审批流程。当用户点击“支付”时，JavaScript createPayment 函数会触发该函数。此时，Pi 平台上会发生各种神奇的事情。如果付款获得批准，SDK 会调用完整的路由
• /payment/complete获取交易 ID（唯一交易字符串），并触发 me 路由
• /payment/cancel和error听起来就是这样，只是我比较懒，所以两个路由都会向 SDK 的取消 URL 发送请求

3.确保它们连接

要将你的应用连接到 Pi SDK，你只需要调用 createPayment 函数即可。对我来说，就是“支付”按钮：

 Javascript
<a href="#" id="resetBtn" class="btn btn-primary mt-3" OnClick='javascript:createPayment();'>Pay</a>

当有人点击“支付”时，会调用createPayment，后者会调用 Flask 路由 /payments/approve。然后，奇迹发生了。

到目前为止的时间：< 4 小时，减去愚蠢的时间

至此，我的应用已经可以正常运行了。它能显示辱骂内容，给 Pi 充值，还能处理所有相关的操作。

这花了大约 4 个小时，还有一些额外的时间用于：

1. 括号不匹配，因为我就是那个开发人员
2. 我的猫和狗之间发生了一场持久战，其中一只猫在咖啡桌上，在阿尔弗雷德面前晃着尾巴，然后阿尔弗雷德疯狂地试图抓住它的尾巴
3. 我完全没理解这个 SDK 到底在做什么。如果我当时稍微考虑一下，就能更快地完成。

我会帮你省去这些麻烦。阅读下一部分，了解这一切是如何运作的：

这一切在做什么

看到这里，你可能已经晕了。这需要大量的剪切粘贴，或者（希望如此）查看代码库。但却无法深入了解它的实际工作原理。以下是分步演示：

1. 首次访问。页面打开后，SDK 会加载Pi.init
2. 应用程序会调用Pi.authenticate来检查我们是否已通过身份验证。如果没有，Pi 会显示安全警告，并请求用户允许继续操作。
3. 假设一切顺利，并且用户授予权限，Pi.authenticate将获取user.username并将其写入页面，以获得良好、个性化的感觉
4. 用户点击了几次“Gimme an Insult”。每次点击都会调用/get_quote路由
5. 如果用户点击超过三次，应用程序就会显示一个带有付款请求的模式（是的，这很可悲，而且很容易用弹出窗口阻止程序来规避——这是为了科学，好吗？）
6. 用户对侮辱的质量感到非常兴奋，他们点击“支付”同意付款
7. 当他们这样做时，模态框会调用createPayment
8. createPayment调用onReadyForServerApproval ，这会触发Flask 应用中的/payment/approve路由，并向 Flask 发送paymentId和accessToken
9. /payment/approve路由向 API 发送包含付款 ID 和访问令牌的请求
10. 作为回应，API（希望）说，“好的，一切顺利”，此时 SDK 调用onReadyForServerCompletion
11. 这会调用/payment/complete Flask 路由，并向其传递paymentId 以及最重要的txid （交易 ID）
12. / payment /complete Flask 路由处理付款

关于 onIncompletePaymentFound

这个小函数差点把我逼疯了。它是个很棒的工具，可以检查未完成的交易，还能调用其他函数。我一开始没明白这个道理。

有几次我把系统搞坏了，交易提交了却没完成。这导致我陷入了错误百出的死循环：我尝试调试，尝试提交另一笔付款，失败了，又尝试调试……结果很糟糕。

为了达到我的目的，我让 onIncompletePaymentFound 调用 /payment/complete。这样一来，只要交易进行到一半，用户下次加载应用时，系统就会完成交易，让他们继续辱骂。

这些都是小额交易，而且是测试，所以我宁愿先完成交易，然后继续测试。另外，我想确保全球经济能持续受到冲击。

在生产中，您可能想要取消交易或做一些更花哨的事情。

使用身份验证：题外话

提供的代码已经完成了所有这些操作。这里仅作解释。

光是构建应用还不够。不行！我还想在几个地方显示用户名。为此，我必须使用身份验证。通常，我听到“身份验证”，就会想到噩梦般的 OAUTH。不过，在这里，SDK 完成了大部分工作。

更改身份验证 Javascript 并添加 <span>

我将验证用户身份的代码块更改为：

 Javascript
// Authenticate the user, and get permission to request payments from them (added 'username' to provide username to API):
const scopes = ['payments','username'];
var accessToken
var username


// Read more about this callback in the SDK reference:
function onIncompletePaymentFound(payment) { 
    paymentId = payment.identifier
    txid = payment.transaction.txid
    $.post('/payment/complete',
            {
                paymentId: paymentId,
                txid: txid,
                debug: 'cancel'
            }
        )
};

Pi.authenticate(scopes, onIncompletePaymentFound).then(function(auth) {
  accessToken = auth.accessToken
  username = auth.user.username
  $('#username').text(username); // writes username to the page
}).catch(function(error) {
  console.error(error);
});

accessToken = auth.accessToken
username = auth.user.username
$('#username').text(username); // writes username to the page
}).catch(function(error) {
  console.error(error);
});

我还添加了一个id 为#username 的<span> 元素。这就是用户账户名在页面上显示的位置。

将 /me 添加到我的 Flask 路由

在 app.py 中，我添加了“/me”路由：

Python
@app.route('/me', methods=['POST'])
def getme():
    userurl = "https://api.minepi.com/v2/me"
    response = requests.post(userurl, headers=header)
    return(response.text)

这将调用 API 并检索用户的帐户名。

我还在/payments/complete路由中添加了几行代码。不过因为我比较懒，所以上面的复制粘贴代码块里已经包含了这些代码。如果你下载了整个应用仓库，一切就都搞定了。

完毕！

就这样！我现在有了一个完整的应用。它提供了一些侮辱性的内容，并进行了个性化设置，甚至还能自动复制预先写好的信息（包括侮辱性的内容），方便您发送电子邮件、发布帖子或其他任何用途：

伊恩风格的调试

我经常使用 console.log。如果你和我一样是初学者，可以在这里了解更多信息。

任务完成

我升级了吗？我不确定。但我从来没想过我能把区块链技术融入到我构建的任何东西中。我没想到这就像加点 JavaScript 那么简单，或者我可以用我的老朋友 Python 来完成这项工作。

所以是平局：区块链 1，Ian 1

猫和狗都因表现良好而得到了奖励，因此它们每人获得 2 分。