一天时间，我做出了一款前端答疑助手小程序！

Sunshine_Lin
783 阅读9分钟

🤔 在做知识输出的道路上，很感激各位前端同行们的支持，我也会在空闲的时候对大家进行答疑解惑，但是今年以来由于工作以及一些事情，导致个人的空闲时间越来越少，自然而然答疑解惑的时间也就大幅降低 🤔

所以今年以来我一直有一个想法：做一款前端知识AI小助理 💻💻

这个前端知识AI小助理需要做的就一件事：回答前端问题，于是我就开始了这个小工具的构思~ 💻💻

1、我该考虑啥？🤔

其实我的诉求就是：做一款能回答用户前端问题的AI工具，最好是小程序，并且最好能快速完成这个工具

其实无非就是几个关键词：

  • AI ✅
  • 小程序 ✅
  • 快速完成 ✅

所以我总结一下我的技术需求：我需要一款集成AI功能的低代码平台，最好支持设计小程序

✨✨ 于是经过我的一次次搜索筛选，我最终选择了 Zion，它是一款国内超火的低代码平台，支持设计PC端、手机端、小程序等等，并且它集成了 AI 功能！！！ ✨✨

从官网的封面可以看出标语：AI应用开发，从未如此简单 😎

image.png

继续往下滑，又看到了 没有代码，极尽应用 😎

image-1.png

从这两句标语可以看出，使用者并不需要写任何代码，就可以利用 Zion + AI 设计并发布一款应用，那我可要试试真假哦~于是我开始了我的小程序的设计开发 😎😎

2、设计界面 🙌

进入 Zion 的官网并且创建一个名为 “前端之神AI小助理” 项目之后，我就开始了基本页面的设计，我的界面元素包括了：

  • 一个图片 Logo【图片】 ✅
  • 一个提示标语【文字】 ✅
  • 一个输入框【文字输入】 ✅
  • 一个按钮【按钮】 ✅
  • 一个答案显示区域【文字输入】 ✅

这对于 Zion 这个低代码平台来说，设计一个这样的页面可太简单了，Zion 提供了丰富的组件物料库，只需通过拖拽，并设置一下位置，即可设计出一个页面来，不用写任何代码！🚀

  • 左边：组件物料库 + 层级设计
  • 中间：设计的视图
  • 右边：设置每个视图中组件的参数，比如宽高、位置

image-23.png

其实下面还有一个输入框，但是被我设置成透明了，他的作用就是充当一个答案显示区域，待会做到后面我会把输出的答案放到这个框里面去

image-24.png

当你设计好一个或部分页面时，你可以点击右上角的按钮进行页面预览

image-25.png

这里可能有人会问了，这个当前日期：2024/09/04 是怎么显示出来的，也就是如何展示当前的时间的呢？ 其实这个不难，Zion 为我们提供了很多常用的常量，我们只需要选择，在预览的时候就可以显示出这个常量的真实值了~

image-26.png

3、谁来回答问题呢？🤖

现在界面有了，那么问题来了：到底谁来回复用户的问题呢？，或者换句话说：到底谁来当这个小助理呢？

其实我们一开始也说了，这个小助理，全名是前端知识AI小助理，从全名中我们可以提取两个要素：

  • 前端
  • AI

Zion 这个低代码平台，它设计界面这么快也就算了，用不着我写一句代码也就算了，它居然还给我们集成了 AI 功能！只需要点击左上角的按钮，就可以进入 AI 设计界面

image-7.png

为什么要设计 AI 呢？你可以把 AI 想象成是一个包罗万象的知识库，但是其实我们需要用到的也就是前端知识 而已，所以我们需要：

  • 界定 AI 的回答范围
  • 定制 AI 的回答方式

而这两件事，在 Zion 中都能很快地去做完，但是在讲如何用 Zion 设计 AI 之前，我先给大家讲一下，我想怎么去设置这个 AI~

我会设计三个 AI Agent（在这里指智能回复机器人），分别是：

  • 🤖 JavaScript基础专家： 它依赖的知识仅限于我提供的JavaScript基础.pdf
  • 🤖 Vue高级专家： 它依赖的知识仅限于我提供的Vue高级教程.pdf
  • 🤖 前端答疑： 它依赖的知识包括 ChatGPT4、JavaScript基础专家、Vue高级专家

image-22.png

image-9.png

当用户提问问题的时候，会先走前端答疑，它回去通过 ChatGPT4、JavaScript基础专家、Vue高级专家 这三个来源去寻找更加合适的答案

有人就会问我了，为啥要单独设计 JavaScript基础专家、Vue高级专家 呢？直接把这两个的内容放进前端答疑不就行了吗？

我回答一下这个疑问吧，其实这就跟前端写页面一样，组件的封装粒度越小，那么整个项目的逻辑就会越灵活，我之所以单独封装JavaScript基础专家、Vue高级专家，就是为了让 AI 设计的粒度小，这样我这个项目就会很灵活，我可以随意组合我的 AI 了~

🤖 JavaScript基础专家

image-10.png

这个 AI 依赖的知识来源于我上传的 PDF 文件，这个 PDF 文件里是我多年来总结的一些 JavaScript 的知识点，所以在设计的时候需要做好这几点：

  • 1、填写好任务角色、任务详情、任务限制、输入变量（右边加号）
  • 2、将目标 PDF 文件上传
  • 3、自定义输出的格式，因为默认是流输出格式，但是我们常用的是JSON格式，所以我是切换了一下格式

image-12.png

  • 4、在右边区域进行调试

image-13.png

  • 5、点击上方的发布

image-11.png

在进行调试的时候，我们可以发现，获取到的答案，跟我的 PDF 文件里的内容是一致的！！！那说明我们配置无误了！

Alt text转存失败，建议直接上传图片文件

🤖 Vue高级专家

Vue高级专家 的设计跟 JavaScript基础专家 大差不差，区别就是一些细节，比如：

  • 填写好任务角色、任务详情、任务限制
  • 目标 PDF 上传

image-14.png

🤖 前端答疑

前端答疑 需要依赖 ChatGPT4，以及 JavaScript基础专家、Vue高级专家所以记得需要在工具这一栏把这两个给加上

image-16.png

并填写好各个信息，当我们进行调试的时候，发现当匹配到 PDF 中的关键字时会给出对应的答案，当匹配不到的时候，会使用 ChatGPT4 进行答疑

image-18.png

4、展示答案给提问者看 🤓

现在就差最后一步了，如何将提问者提出的问题发给 AI ，并且将 AI 的答案给到用户看呢？

思路是这样的：用户输入问题之后，点击按钮，触发事件，将问题提交给 AI，AI 进行回答之后把答案返回，并且将答案回显到底部的答案框中

image-27.png

所以我们需要给按钮绑定事件，并设置事件触发 AI 的输入和输出的回显

image-29.png

现在进行预览，即可看到，完成了我们想要的功能了~ 🤓

image-36.png

5、拓展 AI，管理数据 🔥

其实 Zion 能做的事情还有很多很多，Zion 的 AI 还支持集成第三方 API、使用应用内的数据等实用功能来拓展我们的 AI 的知识范围，比如我这里添加了一个获取当前 IP 的 第三方API，在这个界面你也可以调试这个第三方 API，非常方便！

image-32.png

调试无误后，你可以将这个第三方 API 绑定到 AI 的工具中

image-33.png

这样就可以拓展我们 AI 的知识范围了，当我查当前 IP 的时候，AI 可以给我答案！！！

image-35.png

刚刚的所有对话信息，都会存放在 Zion 为我们提供的数据库中，方便我们去管理

image-30.png

6、发布 💻

最后发布，只需要点击右上角发布按钮，并绑定小程序，按照引导进行发布即可

image-37.png

Zion 无限可能 🎉🎉

在这一次的开发中，我真的一行代码都没敲，就完成了我预期中的小程序开发，这不止提高了我的开发效率，也加快了前端同学们获取知识的速度~

放在以前，我想要搭建这么一个看似简单的小AI应用，那我得兼顾前端页面、后端接口、AI对接、数据库、部署等工作，怎么也得花几个月的时间去开发，但是使用 Zion 仅需要一天，因为 Zion = 前端 + 后端 + AI + 数据库 + 部署

  • 前端： Zion 提供多种组件以及模板 ✅
  • 后端、AI、数据库： Zion 提供界面让我们配置，我们无需过多操心 ✅
  • 部署： Zion 支持一键部署 ✅

时间就是金钱，像我们平时想快速搭建应用、接单，都可以使用 Zion 这种高效率、高智能的低代码平台，当你新建项目的时候，Zion 会为你提供多种项目页面模板

image-38.png

Zion 在为我们提供这么多项目页面模板的同时，也为我们提供了很多配套的功能，彻底解放你的双手，包括：

  • 多端部署 ✅
  • 一键接入微信支付宝支付 ✅
  • 构建账号体系 ✅

image-40.png

image-41.png

有了这些配套的功能，每个人都可以是全栈，点点鼠标就能打造出一整套应用系统，这放在以前，想都不敢想，但是 Zion 做到了！！！ 🎉🎉

现在互联网最火的当属电商 和 AI，而 Zion 把这两项都包含了，如果你不止想搭建一个 AI 应用，你还想搭建一套成熟的电商平台，你也可以选择 Zion 为你搭建~

image-42.png

真的是没话说了，值得我给它一个大拇指！ 🎉🎉

449f11aba56c127080c3dbfdab35725.jpg

尽情使用 Zion 吧！ 🎉🎉

尽情使用 Zion 吧！快速 省心 就从此刻开始！ 🎉🎉

通过这个链接：go.functorz.com/1xqc96Gc

avatar
文章
阅读
粉丝