我的提交概述

初步想法🤔

所以,首先,感谢 AppWrite 团队向我介绍了 AppWrite。这真的很容易。我之前用过 Firebase,所以我尝过 BaaS,但 AppWrite 抽象了很多复杂性。

最近开始深入研究 Web3 Dapps,其实已经半年了😆。肯定有很多专业人士,但一切都是有代价的(从字面上看,它被称为汽油费😂)。此外,如果你想构建一个需要大量交易、存储数据和 cron 作业的去中心化应用程序,你不能在不增加复杂性的情况下在智能合约中做到这一点(我们可以使用 ChainLink、The Graph 等来做到这一点,但会添加一个很多并发症和额外费用)。在阅读了关于您仍然需要后端服务的博客之后,我确信这是我开始使用全栈 Web3 Dapps 的最佳时机,它可以在不增加复杂性的情况下进行扩展。这需要后端服务,因此,目标是提交类别“Web3 Wunderkinds”!。

灵感😲

灵感来自这里

[](https://res.cloudinary.com/practicaldev/image/fetch/s--GLeufN-p--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/nk2nk1fko0kziyg7aih6.png)

在我的一个大学 Web3 小组中,我看到了有关将用户的 .eth 域映射到他们的 Twitter 帐户的简单而琐碎的工具的对话。事实上,为什么有人需要一个工具来这样做——这是我首先想到的。但是,如果我们可以将用户的钱包地址与他/她/他们的 Web2 社交资料(如 Twitter、Instagram、Discord、Github 等等)进行映射会怎样。有趣的是,据我所知,没有任何应用程序或工具已经这样做了。我想说一个简单而有点奇怪的构思过程!😂 但是,我已经准备好我的想法,并且还想到了一些更有趣的功能来促进 Web3 社区。该项目将被称为“LinkM3” - 发音为“Link Me”,其中 3 表示 Web3(是的,我知道我不擅长名字😔)。

介绍LinkMe(🔗M3️⃣)

功能🤩

1. LinkM3(发音为“链接我”)帮助您通过您朋友的钱包地址/ETH 域连接到 Instagram、Discord、Twitter、LinkedIn 等社交 Web2 个人资料。

2. 此外,LinkM3 还可以帮助您发现其他著名的 Web3 播放器并与他们建立联系。

3.您还可以收藏和查看您喜欢的加密货币/代币的实时订阅源,并直接打开您喜欢的Dapps的各个真实站点!

4.创作者亮点系统每周突出显示合格创作者(随机选择)的个人资料。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ag8Kw3KM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/v7aoae55pvcjy7obaeqo.png)

项目流程🖼️

[](https://res.cloudinary.com/practicaldev/image/fetch/s--iTtoQMbR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/pkoys7nwvg6fltdet49l.png)这是该项目的主页。单击“开始”将重定向到登录屏幕。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--WGz2v7lO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/8mo57ln4l9jy996kildw.png) 用户可以输入他们的电子邮件,一个神奇的登录链接将被发送到用户的电子邮件地址。我正在为此使用 AppWrite 的 Magic-Link 登录和确认功能,并通过 SendInBlue SMTP 发送邮件。单击电子邮件中的链接会在瞬间将用户重定向到/verify路由,并在验证时将他们重定向到配置文件屏幕。为了管理身份验证状态,我在反应中使用 PrivateRoute。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--HJTZq_WS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/ed6st0g0kvuadh409msc.png)这是用户登录后看到的个人资料屏幕或主屏幕。本周亮点部分每周更改一次,为此我正在使用 AppWrite 的云功能(cron ),它每周选择一个随机用户,并在顶部突出显示他们的个人资料。其他用户将在底部显示他们的个人资料的所有详细信息和相关链接。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--0UuIuy1G--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/gfyccq3nnj0niwio147o.png)您可以通过输入他们的钱包地址或 ETH 域来搜索特定用户,这通过在 AppWrite 的数据库中进行查询和索引来完成。单击个人资料图标打开选项以编辑您的个人资料、注销、查看可以通过您的钱包地址获取的 NFT。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--H-Xj9BBr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/9m7ehqjz8dy9bg9xzt71.png)单击“编辑配置文件”按钮会打开一个对话框,您可以在其中输入相关详细信息并进行更改。我正在使用 AppWrite 的存储功能来存储图像并将其 id 添加到该特定用户的文档中。连接钱包按钮可用于连接到用户的钱包并获取他们的地址,或者如果它是一个简短且令人难忘的域,他们通常可以在文本字段中输入。

工具和技术⚙️

• ReactJs + MaterialUI(前端)

• Appwrite(后端即服务)

• NodeJs(Appwrite 云函数)

• 数字海洋(部署AppWrite服务器)

• SendInBlue(SMTP 服务)

环境设置

1. 在此处克隆 repo:

(PS:真的很抱歉,如果您想快速测试它,我还没有部署它。虽然,我正在努力,并会在网站上线后立即编辑这篇文章。)

2. 部署您的 AppWrite 服务器:

我已经使用 Digital Ocean 为 AppWrite 配置了我的 droplet。您也可以使用 Docker。安装说明可以在这里找到

3. 编辑环境变量:

cd在您克隆存储库的位置。在 AppWrite 控制台中创建项目,并将您的 AppWrite 凭据从项目设置页面添加到.env.example。将.env.example重命名为.env。

4. 设置 SMTP 服务:

我为此使用了SendInBlue,但也可以使用任何其他提供程序。在 Droplet 控制台中的appwrite/.env中添加 SMTP 凭据。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--vA1izwXo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/noze1wt4veyte29disg1.png)

5.配置AppWrite:

一个。数据库配置:

• 在数据库中创建users集合,详细信息如下:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--z85c45Gy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/pxdjykgbb5jpv3f3oa1t.png)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--w-5Sbyne--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/y4tr1wwn3hgrxouytr5u.png)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--T2BhK_RQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/z4mcvl502p5ic0wdvqog.png)

• 使用以下属性在数据库中创建weekUser集合:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--KJ-yXza8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/l0p9mbyefhhenaocettc.png)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--UpTj2oe0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/44gxowag5ctcoe7dp7az.png)

湾。存储配置:

• 使用以下设置添加photos集合:

C。云功能配置:

• 添加API Key如下:

• 在AppWrite控制台创建云函数:

将函数命名为highlight,并分配role:all的读取权限并将写入权限保留为empty。

• 更新函数设置中的环境变量:

APPWRITE_PROJECT_ID| [您的项目 ID]

APPWRITE_ENDPOINT| [您的项目端点]

APPWRITE_API_KEY| [我们刚刚创建的 API 密钥]

USERS_COLLECTION|用户

WEEKUSER_COLLECTION|周用户

• 使用appwrite-cli@15.0初始化和部署功能:

在你的项目目录中逐行运行以下代码,并按照提示进行操作——

npm i -g appwrite-cli@15.0
appwrite -v
appwrite client --endpoint "http://<API endpoint>/v1"
appwrite login
appwrite init project
appwrite init function
appwrite deploy function

进入全屏模式 退出全屏模式

PS:函数名称与 AppWrite 控制台中的函数名称相同。如需帮助,highlight功能已存在于functions目录中。

投稿类别:

Web3神童

链接到代码

https://github.com/Rishabh510/LinkM3

其他资源/信息

面临的挑战😤

这次我面临的挑战很少。老实说,AppWrite 的 SDK 与清晰的文档一起轻而易举。我很容易找出错误并在可观的时间内调试它们。虽然有一些事情我希望 AppWrite 的 SDK 能够支持。我希望看到这些事情很快得到实施。描述其中的一些:

• 单次调用 upsert:当前需要 2 个不同的调用。

• 魔术链接自动验证用户:需要再次发送邮件以验证用户,而可以使用相同的魔术链接来这样做。

• 在单个索引中搜索多个属性:它确实显示了对单个索引中多个属性的支持,但在这种情况下搜索查询似乎不起作用。

• Appwrite-cli@16.0部署功能问题:我降级到appwrite-cli@15.0部署云功能最终解决了问题。

未来范围🔮

即使在我写这篇文章的时候,我也满脑子都是想法。描述几个:

• 添加数据馈送和书签功能 - 最喜欢的令牌、最喜欢的用户、最喜欢的 dapp 等。

• 用户可选择以加密货币资助/捐赠他们到他们的钱包地址。

• 用户在不同链上添加多个钱包的选项 - Solana、Tezos 等

结束的想法🙏

我很高兴我发现了 AppWrite,将来我可能会在我的宠物项目中更频繁地使用它😅。再次感谢 dev.to 和 AppWrite 的这次黑客马拉松,得到了一个很好的项目,快速原型化,写了一个博客,是的,我现在有点累了!

谢谢阅读!