Tutorials

Better Stack 是什么？ Better Stack 是一个综合平台，旨在增强开发者和工程团队的可观测性和事件管理。它结合了多个功能，帮助高效监控、调试和解决技术栈中的问题。 Better Stack 能做什么？ 日志管理：Better Stack可以高速集中存储和搜索日志，将日志转化为结构化数据，并使用SQL查询。 正常运行时间监控：平台可以监控从网站到服务器的一切，确保任何停机时间都能迅速检测和解决。用户可以设置轮班值班，接收可操作的警报，并有效管理事件。 可观测性仪表板：Better Stack提供精美设计的仪表板，汇总来自各种来源的指标。这些仪表板可以通过不同的图表类型进行定制，并可以使用SQL查询进行调整。 Better Stack 监控使用教程 我主要用来做网站监控，使用方式非常简单。 首先注册 Better Stack，https://uptime.betterstack.com/users/sign-up 填入网站域名和自己的邮箱。 注册成功后，进入到配置页面。 告警功能只有邮箱是免费的，短信、推送、Call 都需要收费。 手机上装一个邮箱客户端就能白嫖告警功能。 配置检查间隔。 检查间隔、恢复后检查间隔、检查区域、超时时间这些都有对应的配置，可以自行配置。 查看报表。 有了监控数据后，后台会生成报表方便查看。 邮件通知。 当网站返回非 2xx 状态码时，会出发邮件推送，推送消息如下。

Clarity 是什么？ 微软的 Clarity 是一款免费的用户行为分析工具，旨在帮助网站所有者了解用户如何与他们的网站互动，完全免费。 Clarity 有什么用？ 微软 Clarity 是一个强大的工具，可以帮助网站所有者和开发人员深入了解用户行为，优化用户体验，从而提升网站的性能和效果。 Clarity 最为强大的功能是将用户在网站上的行为进行录制，可以通过视频查看用户在网站上的操作和轨迹。 Clarity 详细教程 首先到官网注册，https://clarity.microsoft.com/ 新建项目输入自己的网站名称和域名。 通过三方平台安装。 选择 Google Tag Manager，Google tag manager 能帮助网站和移动应用的管理员简化和管理各种分析和营销标签的部署。 有了 Google tag manger 网站想要安装分析代码就不再需要上传脚本分析代码。 如果没有账号需要注册，https://tagmanager.google.com/#/home 选择立即链接。 授予权限。 选择账户。 等待数据同步，完成连接后需要等待一段时间才能有数据，同步完成后仪表盘如下。 查看录制视频，可以针对具体的页面查看用户的操作视频，这个功能真的太强大了，可以清晰的看到用户的操作轨迹。 可以查看用户中断、退出的界面，更好地分析用户的行为。

Cloudflare R2 是 Cloudflare 推出的兼容亚马逊 S3 的存储服务。 每月 10GB 免费存储，读取数据：1000万次/月免费，操作数据：100万次/月免费。 R2 可以用来做什么？ 最大的用处就是作为个人开发者刚起步时免费的图片存储应用。 如果你正在做图片存储的应用，那么 R2 非常适合。 注册 填写信用卡基本信息，带有 Visa 或者万事达标识的卡都行，提交成功后会发生一笔 0 元的交易信息，以确认信用卡的可用性。 创建 Bucket 点击 Create Bucket。 输入 Bucket name。 根据自己的业务选择对应的地区，美国、欧洲、中国。 上传文件 控制台直接上传图片。 创建 API Token Token 主要用来做 API 调用。 权限选择读写权限。 选择刚才创建的 Bucket，TTL 选择永久。 域名配置 配置域名可以公开访问图片，不配置使用 Cloudflare 的私有域名访问速度会被限制。 SDK 调用 Cloudflare 其实是对亚马逊 S3 的封装，SDK 的使用方法和亚马逊的 S3 是一样的。

Supbase 是什么？ Supabase 是一个开源的 Firebase 替代品，它提供了一系列后端服务，帮助开发者快速构建应用程序，包括以下功能。 基于 PostgreSQL 数据库：Supabase 使用 PostgreSQL 数据库作为其数据存储的基础。 认证和授权：提供用户认证和数据访问控制功能。 即时 API 和实时同步：自动生成 RESTful API，并支持数据库变更的实时订阅。 文件存储和边缘函数：允许存储文件和在边缘位置运行代码。 向量嵌入和 AI 工具：提供向量处理和 AI 功能的工具。 Supbase 能解决什么问题？ 数据库方案一般有两种方案，第一种方案是购买云服务器自建数据库，第二种方式是购买云服务的数据库服务。 无论哪种方案对于刚起步的独立开发者来说，成本都比较高昂。 Subbase 则是提供了 500 MB 的免费存储空间，每月 50,000 的活跃用户的访问量。 详情可以查看 https://supabase.com/pricing 如何使用 Supbase？ 注册账号后，创建 Project。 填入名称、密码，选择业务的物理区域。 创建表，以用户表为例。 连接数据库，点击创建后的 Project，左侧选择 database 菜单。 右侧界面就是连接数据库的账号和密码。

Tally 是什么？ Tally 是一个可以在自己的应用或者网站上自助集成的表单系统。 不用编写任何代码就能集成，简单方便。 基础功能免费，且不限数量。 Tally 有什么用？ Tally 可以在自己的应用里收集用户的建议反馈、bug report 等。 Tally 使用教程 首先到官网注册，https://tally.so/signup 注册成功后，创建自己的表单，下面以创建一个 Feedback form 为例。 点击创建表单，输入标题。 Tally 提供了很多 html 组件，可以任意搭配组合。 最终的 Feedback 表单如下。 完成之后点击右上角的发布，发布后会生成一个唯一的可以公开访问的 URL。 将生成的链接放到自己的应用中，就可以收集用户的反馈。 当用户填写反馈后，登录 Tally 的后台就能看到用户反馈的内容。

Vercel 是一个云平台，它为开发人员提供构建和部署 Web 应用程序的工具和基础设施。 简而言之有两大优点。 第一：不需要自己搭建环境。 第二：不需要自己购买服务器，可以直接在它的平台上创建应用，直接提供服务。 下面说下详细的步骤。 Vercel 上有很多免费的模板，打开：https://vercel.com/templates。 选择一个模板，这里我挑选了：https://vercel.com/templates/next.js/ai-code-translator 这个应用的主要作用是将不同的代码进行翻译转换。 Java 转 Go、Python 转 JavaScript 等等。 这个功能在人工智能出现之前极其难实现，如今有了人工智能变得非常简单。 点击部署 授权 Github 账号的权限 点击进入新页面后，授予 Vercel 自己 Github 的账号权限。 在 Github 上创建项目 在 Vercel 的页面上点击 Create 创建项目，Vercel 会自动在 Github 上创建一个私有项目，相当于 Clone 了一份代码到自己的仓库。 配置 openAI key 等待部署 部署完成 部署完成有撒花效果。 查看效果 点击预览，查看效果。 部署域名 如果想要用自己的域名，直接在 setting 中进行设置即可。 整个过程不到 3 分钟，这就是 Vercel 的优势。 Vercel 最大的优势在于有大量的模板，且免费部署。 在此之前，个人开发者如果有一个想法，想要快速上线，需要写代码、购买服务器、搭建环境等等，最快也得一两周。 而 Vercel 可以将整个周期直接缩短到分钟级别，且免费。 ...

到目前为止我已经上线了几个海外工具站点，对其中的技术栈选型也有所了解，梳理下用到的技术栈。 Vercel 关于 Vercel 已经在此前的文章中介绍过。 如果你会 js 技术栈那么 Vercel 是最优选择。 Vercel 提供了免费的容器部署，可以直接和 github 仓库连接。 不需要额外购买云服务，此外 Vercel 提供一定免费额度的数据存储服务。 Vercel 的最大优势在于可以快速、免费、大量地发布网站，以量取胜。 哪个网站起来了就继续投入精力优化，没有流量的直接抛弃。 如果不会 Js 技术栈就选择自己熟悉的技术栈和 SAAS 服务，千万不要去为了省服务器成本而去学一门编程语言，因为时间成本太高。 我因为不会 js 技术栈，而选择了自己熟悉的 Java 技术栈和 Amazon 的 lightsail 服务。 域名服务 我用的服务主要有两个 Namesilo 和 CloudFlare。 Namesilo 的后台比较难用，CloudFlare 能够和自家 CDN 服务无缝集成。 新域名注册现在基本使用 CloudFlare。 数据库 此前介绍过 Subbase 服务。 提供一定量的免费额度，数据库是 PostgreSql。 用户服务 网站需要接入支付就一定需要用户服务，我当时用 Sqlite 自己开发了一套简易的用户服务。 应用一旦接入用户服务就会非常耗费时间，包括数据存储、登录、注册、接口权限校验等等。 其实已经有很多现成的服务能够直接提供用户管理服务，比如 Auth0 https://auth0.com/docs/quickstarts Auth0 提供了各种技术栈的无缝接入，Js、.Net、Java、Apache、Spring Boot、Android、iOS、Flutter 等等。 甚至各类流行的技术框架也可以直接支持，所以根本没有必要自己开发。 用户登录服务不建议使用用户名、密码登录功能，直接使用三方联合登录即可。 再来看下 Auth0 的价格，https://auth0.com/pricing 每月 7500 个活跃用户免费，支持 Google、Facebook 三方联合登录。 ...

今天介绍下用 blot 人工智能开发网站。 工作中经常遇到海外一线和我反馈线上问题，排查问题一个关键的线索是用户 ID 和时间。 运营反馈的是当地的时间，而服务器存储的是 GMT 时间，我每次都要进行换算，实在麻烦。 所以我便想到了根据不同时区换算时间的功能。 打开 https://bolt.new/ 输入提示词，我的提示词如下： 技术栈：用 HTML + TailwindCSS + Jquery 实现，不需要 node 打包 核心功能：我要开发一个根据世界各城市换算时间的英文网站，界面上首先会展示当前用户所在城市的时间以及时区。 在下方有输入时间的输入框，根据 jquery 时间插件选择，输入框的下方有两个下拉框，左侧是原时区，右侧是目标时区。 下拉框支持模糊搜索功能，选择好城市之后程序自动算出对应的时间，时间显示在下拉框的下方并居中显示。 在页面的下方区域罗列出世界上最主要的 6 个世界大城市当前的时间。 功能区域：需要有常见的各种 Section，最终全部 Section 组成了 SEO 友好的 Headings。 网站文案：需要符合 seo 友好，围绕着不同时区时间转换去编写页面的内容，内容为英文文案。 网站风格：网站配色和风格需要现代化、高级，类似于苹果官网的风格，网站需要自适应各种屏幕尺寸。 生成之后经过了几次调整，最终效果如下： bolt 的优势是按照项目生成，而不是单一的文件。 其它人工智能生成代码都是单一的文件，无法将代码整合成一个项目，包括文件拆分、文件夹拆分、函数拆分等等。 生成后自带预览和交互功能，可以直接在 Preview 界面直接运行。 生成完成后点击右上角的 download，在本地浏览器中打开 index.html 直接运行无任何错误。 有了代码后就可以部署到 Vercel 中，Vercel 的部署过程此前已经介绍过，详见如何使用 Vercel 免费创建应用？。 部署完成后可以直接线上体验：https://world-time-converter.vercel.app/