{"author":{"address":null,"user":"https://learnblockchain.cn/people/5018"},"content":{"body":"# 1. Demo 演示\r\nPi Network项目提供了代码开源的Pi Demo App，它的代码可以通过下面的网址下载\r\nhttps://github.com/pi-apps/demo\r\n\r\n项目目录结构：\r\n\r\n![image.png](https://img.learnblockchain.cn/attachments/2024/12/h1AP3tmx67517f11cbbee.png)\r\n\r\n主目录下包含4个子目录：\r\n1）backend：后端代码\r\n2）doc：文档\r\n3）frontend：前端代码\r\n4）reverse-proxy：反向代理代码\r\n\r\n主目录下包含主要文件：\r\n1）.env.example\r\n配置环境变量的配置文件\r\n2）docker-compose.yml\r\ndocker配置文件\r\n\r\n\r\n\r\nPi Network项目已经在他们的服务器上部署了这个Pi Demo App，你需要先注册一个Pi账号，注册教程可以参考www.618.win，然后在Pi浏览器里创建好钱包后，在Pi浏览器地址栏里输入demo.pi，就可以看到Pi Demo App的主界面，如下图：\r\n\r\n![image.png](https://img.learnblockchain.cn/attachments/2024/12/DUrIsOVZ67517f237df7e.png)\r\n\r\n这是一个售卖披萨商店的演示app，商店里售卖2款不同价格的披萨。\r\n点击“Sign in”按钮，就会自动使用你的Pi账号进行登录。点击上面的第一个“order”按钮，就会出现下面的页面：\r\n\r\n![image.png](https://img.learnblockchain.cn/attachments/2024/12/ms20SYKJ67517f3047965.png)\r\n\r\n\r\n输入你的钱包的密码助记词或指纹，就能使用Pi测试链上的测试币进行支付。注意，Pi测试链上的测试币不是真正的Pi币，只是用于测试的测试币。我的手机不知道指纹上出了什么问题，所以只能通过输入钱包的密码助记词进行支付。\r\n\r\n\r\n\r\n# 2. 代码分析\r\n主要的代码就是前端代码和后端代码。前端代码主要用于页面展示，后端代码主要用于实现业务逻辑。前端代码使用Typescript编写，开发环境是React。后端代码使用Typescript编写。后台数据库是使用MongoDB。\r\n## 2.1 前端代码\r\n\r\n\r\n前端代码在src这个目录里\r\n\r\n\r\n\r\n代码入口文件在https://github.com/pi-apps/demo/blob/main/frontend/src/Shop/index.tsx。\r\n\r\n\r\n\r\n## 2.2 后端代码\r\n后端代码在src这个目录里\r\n\r\n\r\n\r\n代码入口文件在https://github.com/pi-apps/demo/blob/main/backend/src/handlers/users.ts\r\n\r\n\r\n基于这些开源的代码，我在此基础上开发了一个线上版的公园相亲角：派之爱，在手机上的Pi浏览器或电脑的浏览器的地址栏输入\"lovepi.vip\"就可以使用，具体使用方法参考公告栏。\r\n\r\n----------------------------------------------------------------------------------\r\n我是powervip，区块链程序员\r\n我的知乎：https://www.zhihu.com/people/powervip\r\n我的公众号：区块链战斗机\r\nqq群：1003771218\r\n我的学习笔记：www.0101.vip\r\n\r\n如果你觉得这篇文章写得还可以，请帮忙点个赞，谢谢！著作权归作者所有。如需转载，请注明原文出处并保留原文链接。\r\n​\r\n你的鼓励，我的动力！","title":"Pi Demo App 学习笔记"},"history":null,"timestamp":1733394385,"version":1}