很高兴见到你。我叫基吉。
这次，我们发布了面向个人开发者的互评服务[sougo-review]。
什么是搜狗评论？
正如标题所说，
“我将使用您的服务来写评论，所以请也使用我的服务！”
这就是服务。
个人开发者注册他们的服务。
然后向其他人的服务发送请求。
一旦您的请求获得批准，您就可以提交您的评论。
只有这个。
实际服务页面
但是，仅此一项就为个人开发人员带来了两件快乐的事情。
①【用户】会增加为您服务。
②您可以为您的服务获得[review]。
其他
- 通过使用其他人的服务发送评论，您可以了解您可以为自己的个人发展使用什么
- 个体开发者之间的联系诞生了
还有一些次要影响，例如
技术栈
在实现sougo-review时，我们采用了以下技术要素。
服务
前端
- nuxt.js
- Vuetify
后端
- 火力基地
- 身份验证
- 函数（复杂的处理，例如条件状态更新）
- 存储（图像保存目的地）
- 托管（发布服务）
数据库
- 火力基地
- 防火墙
分析工具
- 谷歌分析
- 清晰度
服务页面
这是我创建的服务页面。它是为了发布服务更新信息而准备的。
- 前端
- nuxt.js（使用下面Newt提供的模板）
- 无头 CMS 服务
- 托管（发布方式）
- 维塞尔
个人发展知识
我将分享我第一次介绍或花了很长时间介绍的内容。
介绍
- 如何将 Clarity 引入 nuxt.js
- 实时获取 Firebase 价格信息 → 超过指定金额时停止 Firestore
如何将 Clarity 引入 nuxt.js
明晰是一个免费的网络分析工具。有一个 [热图工具] 作为 Google Analytics 的单独使用。可视化访问官方页面的用户点击并滚动到的位置。我认为在使用 Firebase 时可以启用 Google Analytics，但通过引入 Clarity 也可以进行更高级的分析。
作为介绍方法，如果您从官方网站注册，则会显示[添加新项目]。
Name : 项目名称（免费且OK）
网站 URL ：要发布的 URL
放。如果在注册之前保存了域名，以后就不用改了，这样会更流畅。
单击 [添加新项目] 以移动到项目屏幕。转换后，选择屏幕左侧[手动安装]下的[获取跟踪代码]。
选中后，脚本标签将显示在屏幕上。复制此标签内的所有函数。也复制前导 () 字符。
最后，将脚本添加到介绍项目的 [nuxt.comfig.js] 的头部项中。将上面复制的 Clarity 脚本标签的功能粘贴为脚本的内容。
export default {
// 省略
head : {
script: [
{
innerHTML: `
// ※※※※※※※※※※※※※※※※※※※※※※※※※※※※
// ここにClarityでコピーしたfunctionの情報を貼り付けます
// ※※※※※※※※※※※※※※※※※※※※※※※※※※※※
`
}
],
__dangerouslyDisableSanitizers: ['script'],
}
// 省略
}
准备工作现已完成。确保在服务发布后开始分析。
实时获取 Firebase 价格信息 → 超过指定金额时停止 Firestore
运行服务涉及成本。
Firebase 的使用费很便宜，但像我这样的人担心费用。
因此，我希望有一种机制可以轻松掌握 Firebase 的使用费，并尽可能在使用费超过一定金额时停止服务。
最初，可以为 Firestore 设置每日使用限制，但自 2019 年 12 月以来已禁用此功能。
因此，这一次，我们将使用 Firebase 功能来创建一种机制来监控计费信息。
此外，由于该机制使用功能，因此需要从 [Spark (free)] 计划更改为 [Blaze (pay-as-you-go)]。
我使用以下页面作为参考。
最终创建的是函数的函数。这次是用js创建的。
由于我们要通过 Slack 通知价格信息，所以提前执行以下命令安装必要的库。
npm i firebase-functions
npm i firebase-admin
npm i googleapis
npm i @slack/webhook # slack通知
将 Firebase 定价信息发送到 Slack 的代码。
const functions = require('firebase-functions')
const admin = require('firebase-admin')
const {google} = require("googleapis")
const { IncomingWebhook } = require("@slack/webhook");
// URLは通知したいslackのwebhook URLを指定
const webhook = new IncomingWebhook("https://hooks.slack.com/services/...");
exports.disableAppEngine = functions
.region('asia-northeast1')
.pubsub.topic('gcp-topic') // トピック名を指定する ※1
.onPublish(async (message) => {
const data = JSON.parse(Buffer.from(message.data, 'base64').toString())
// 現在の請求額
const costAmount = data.costAmount
// Firebaseに設定した請求額の閾値
const budgetAmount = data.budgetAmount
try {
(async () => {
await webhook.send({
text: `costAmount: ${costAmount}, budgetAmount: ${budgetAmount}`,
});
})();
} catch (error) {
console.log("error send slack!")
console.log(error)
}
if (costAmount <= budgetAmount) {
// 閾値以下の場合. 処理を終了
return
}
const auth = new google.auth.GoogleAuth({
scopes: ['https://www.googleapis.com/auth/cloud-platform'],
})
const authClient = await auth.getClient()
google.options({ auth: authClient })
const appengine = google.appengine('v1')
const res = await appengine.apps.patch({
appsId: 'firebase-project-name', // FirebaseのプロジェクトIDを指定 ※2
updateMask: 'serving_status',
requestBody: { servingStatus: 'USER_DISABLED' },
})
})
赶上上面的代码。
*1 关于 Pub/Sub 主题名称
指定 Pub/Sub 名称，如参考页面上所示。指定您自己在函数中输入的主题 ID。
*2 关于 Firebase 项目 ID
Firebase 的项目设置界面中有一个项目 ID 项。指定此项目 ID。
部署此功能将通知 Slack 定价信息。
您可以定期查看价格信息。
在最后
个人发展很有趣。我永远不会忘记发布服务的兴奋。我希望通过让 [用户] 和 [评论] 感到兴奋，让服务更加令人兴奋。
我们将尽最大努力运营和改进服务，请多多关照。
参考
本文是关于奇塔活动【工程师暑假项目！ ] 是个人发展的结果。
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308624047.html