分享我用nextjs+cursor制作的一个中文分词工具网站

尝试用nextjs+cursor快速通过AI制作了一个中文分词工具以及工具网站,即使不会前端也可以快速上线

learnchinese.top

最近一段时间都在努力开创自己的副业,前同事给我分享他加了一个出海赚钱的社群,具体名字就不说了。看了一部分教程之后我也蠢蠢欲动,决定先做个工具类网站试试手。

这个工具非常简单,输入一段中文,点击分词按钮,然后显示分词结果以及整句翻译。还有一个AI分析按钮,可以通过AI来理解这段中文和分词方式。目前来说这个工具还是比较简陋,分词效果和翻译效果都很普通,日后还需要慢慢完善。这里先介绍下我的制作和上线过程。

演示截图

做什么工具

为什么是工具网站,因为我听取了那个教程的建议,先从工具网站做起,而且是面向英文等外国用户。至于做什么工具和关键词需要去一些seo网站确定这个关键词的seo难度和已有的网站效果,如果别人已经做的很好而且seo难度非常大就不要选了。我思来想去,工具站、英文站、竞争小,这么几个关键词一结合,再加上现在的学中文热,我就选择了做一个帮助外文用户理解中文的工具——中文分词工具。

前端制作

我是一个后端程序员,前端只能说是了解。这里选择nextjs是因为它很新很火,最重要的是seo友好,可以做静态页面也可以做SSR,虽然我还是不太了解SSR,但是不重要,我们就选它了。这里如果对一个新框架完全不了解一般有两种学习方式,一种是打开官方文档,下载各种demo,搜索各种教程,逐渐学会并且上手。还有一种就是像我一样:直接让AI生成。

我是选择了用Cursor,Cursor有自己的IDE,有点像VsCode,它不是特别好用但是我们只是用它来生成代码。我打开工程,直接删掉主页的page.tsx所有代码,然后Ctrl+K输入我的需求,回车后它就生成了一个可运行的代码。例如我输入:请帮我做一个在线衣服商店的landing页,很快它就生成了一个可以运行的页面,虽然不能保证和你想要的一样,但你描述的越详细越好,有不满意的地方或者要新加功能可以继续问Cursor或者Chatgpt等AI,基本上能完成基本代码的编写。

online demo

后端制作

后端我用Go语言的gin框架快速完成开发,这个工具只用到了三个接口,分别是分词、翻译和AI。分词可以直接搜索对应语言的分词库,找一个离线的就行。翻译可以使用谷歌、微软等API,每个月有免费额度,这里我为了省事也用了开源可部署的库,当然效果也就很一般。

AI需要用到API,可以找一些有免费额度的API,比如谷歌Gemini提供一分钟调用15次的API,我就用了这个,虽然等用户量上来了一分钟15次肯定不够用,但也许压根没人访问呢?等人多了再说。即使你不会用Go语言,但对于这个需求,你完全可以指挥AI给你写出一份可用的go代码。

前端部署

前端部署还是用老朋友Cloudflare,某种意义上的赛博菩萨,Cloudflare提供免费的Pages前端部署服务,提供免费的CDN加速,你只需要把代码上传到Github,然后在Cloudflare Pages选择从Github中并且选择储存库,选择不同框架,就可以完成部署了,这里我选择了的Nextjs静态部署,因为我完全没用到SSR。就这么简单几步,已经部署成功了,以后每次更新主分支代码,Cloudflare就会自动更新。然后你有域名的话直接在Pages上绑定你的域名即可。

后端部署

后端部署稍微麻烦一点点,最简单的方式是打包出一个对应操作系统的可执行文件,然后ssh到服务器上运行即可。我用的是docker打包和部署,在本地机器人使用docker build构建然后docker push上传,然后ssh到服务器上docker pull拉取镜像,docker run运行。这里听起来好像很简单,但还是有一些难点的比如要编写dockerfile,以及docker网络问题等,不过都能通过查资料和问AI解决。

快速上线

这个工具差不多用了一天时间从开发到上线,其实还可以更快,毕竟这个页面非常简单也谈不上美观和交互。但有了这次经验,下次一旦有好的点子和想法就可以更好更快地实现,这里不仅是分享我制作的工具,也是分享我制作的流程,如果你也想制作一个工具网站,也许在AI等生产力工具帮助下,会比你想象中更简单。

Licensed under CC BY-NC-SA 4.0
加载中...
感谢Jimmy 隐私政策