AI个人学习
和实操指南

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用

本文于 2024-12-10 11:04 更新,部分内容具有时效性,如有失效,请留言

不要相信网络中关于“不懂编程使用Windsurf一个月赚了100万”这类新闻,他可能真不懂,但是他爹懂。真不懂一点编程甚至英文,真的很难编写出完整程序。网上都是懂编程的人教你实战中使用Windsurf,而不懂编程的人很难实战,而很多新闻又说不懂编程也可以用Windsurf写出应用,这就是罗生门嘛...既然这样,我不懂编程,可以尝试一下...

 


本文耗时2天,不低于500轮次对话,实现一套包含前后端的汇率兑换计算器应用。整个实现过程仅使用 Windsurf 对话。本文主要讲解不懂编程的人是如何真正编写出完整应用的心得,不提供完整操作流程。

实现的主要功能如下:

  • 完整前端页面(多终端适配)
  • 首页多策略获取货币汇率数值(数据库获取、备用API获取、获取最新汇率更新到数据库)
  • 读写数据库(连表查询)
  • 多个定时任务脚本,采集汇率和新闻数据写入数据库(并实现文件锁逻辑)
  • 封装汇率查询API、封装常用函数调用方法
  • 文件缓存机制
  • 本地文本文件检索
  • 详细的文件报错日志记录
  • 页面伪静态
如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

演示地址:https://huilv.aisharenet.com/

 

科普部分

什么人适合使用Windsurf ?

  • 非编程人员,如果是编程人员推荐使用 Cursor
  • 知道基础的技术名词都是干什么用的,例如:数据库、表、字段、API、缓存、类、前端、域名等...
  • 参与过完整的网站建设过程:不限于前后端技术人员、运营、产品、市场、测试等...
  • 有基本的“领域”概念,可以很好的总结所在专业领域知识,并用文字描述出来。

 

除了编写应用,Windsurf还可以用来做什么?

  1. 基于自动化读取本地多文件和Agent能力,Windsurf可以作为优秀的本地文本总结、批处理工具。
  2. 编写需要的自动化运行脚本来处理各类本地任务,例如写一个bat脚本并自动执行。
  3. 学习编程最好的指导老师,提出编程需求后告知你每一步的任务以及实现的方法。
  4. 非标准的自动化测试,不管是技术人员或测试人员,可以导入代码后让Windsurf跟踪一个功能或读取完整代码编写测试计划并半自动执行测试用例。

 

如何学习Windsurf基础操作?

Windsurf 中文使用教程,Windsurf 安装使用方法

自行搜索"vscode"相关教程,因为Windsurf就是vscode的改版,基础操作逻辑类似。

 

Windsurf和copilot最大的区别是什么?

Windsurf默认写入模式会主动且发散的执行任务,更像一位员工,老板提出基本问题后,员工会主动的寻找解决方案完整工作。当然Windsurf中的Cascade也适合能读懂代码的朋友使用,这里我们不讨论。

copilot更像是沉默且不主动的助理,你不提出明确的任务他就会一直保持沉默,但给出明确需求胡他会做的很好。

 

Windsurf是否要购买付费版使用?

要买付费版本,最近更新的免费版本计划仅允许使用基础模型,效果较差。即使购买付费版本目前也限制了使用量。

免费版本因基础模型能力有限,不适合不懂程序的朋友使用。

 

Windsurf的两种模式?

Write负责代码编写/执行;Chat负责对话,不会写入任何代码,这点很重要。

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用-1

 

适合新手的Windsurf配套编程环境

使用Windsurf编写代码时,必须要有一个配套的编程环境让Windsurf可以执行各类操作,以及让你实时预览代码实现效果。

既然是小白,必然不懂得搭建编程环境,或者跟着教程很艰难的可以搭建出来。搭建环境时最麻烦的问题是:大多数使用windows系统的人在本地搭建编程环境会遭遇更多的异常,以及无休止的调试各类依赖资源。

更可怕的是,你无法信任让Windsurf操作你的电脑——执行本地命令。这可能让你的私人电脑遭遇不可预料的问题。

 

我给出的解决方案如下:

购买一个服务器,自动化部署宝塔面板,记住连接SSH的root账号和密码。如果你明确使用PHP+MYSQL组合,那么请在宝塔面板中提前创建好(不要让Windsurf创建基础环境)。

到这里如果无法自行部署以上基础环境,建议自行百度。

 

启动Windsurf创建第一个项目

1.如果你顺利的安装Windsurf后,可以下载汉化插件:Codeium Windsurf 设置中文界面,只需一个汉化扩展插件

2.在宝塔面板中创建一个网站目录,这里我选择PHP+MYSQL的组合

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

 

3.使用SSH连接远程服务器对应的的网站目录

连接远程服务器:启动软件,选择Connetc 然后选择SHH Host..

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

4.输入SSH账号(一般都是root)和服务器地址

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

 

5.输入root账号对应的密码,按Enter确认

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

 

6.不出意外你默认链接到的“目录”并不对,这里并看不到之前创建的文件夹

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

 

7.定位文件夹位置

这里选择免费的小尺寸模型提问,避免消耗额度,得到了目录绝对位置。

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

 

7.选择:文件-使用配置文件新建窗口-新建配置文件

点击创建(在“默认”中添加目录也可以)

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

 

8.点击Add Folder,并输入得到的目录地址:www/wwwroot/huilv.haoai.us.kg,点确认

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

 

9.选择在新窗口打开(会要求你再次输入密码)

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

 

10.进入到正确的目录,接下来我们可以正式编写项目代码了

(这是已经编写过代码的目录,默认你的目录应该为空或者仅显示一个无用的配置文件,不需要删除)

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

 

 

正式编写应用前准备工作

提问

提问过程使用其他大模型对话工具也可以,这样可以避免Windsurf生成代码,但使用Windsurf进行多轮对话,可以总结出更有用的历史记录。

1.如何获取实时汇率信息

2.帮我思考如何设计一个汇率查询网站

3.根据PHP+MYSQL设计网站架构

...

 

整理文档

1.数据库账号密码整理为.md文档

2.提问中得到的可用汇率查询API和KEY以及接口说明文档整理为.md文档

3.提问中得到的网站前端架构整理为.md文档(后端架构我根本不会设计,想不清楚,所以没有创建文档)

这些文档会作文Windsurf的上下文,或指定某个文档作为Windsurf的上下文辅助编写代码

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

 

验证最小功能实现逻辑

测试1:使用API访问,获取到汇率接口的全部货币名称,存入数据库。

测试2:使用API访问,从数据库中获取一个货币名称,请求到该货币汇率,存入数据库。
测试3:...

提示词中声明:这是一个简单的测试,创建最小的功能测试用例,并执行一遍,最后验证成功的标准是查询到数据库中有验证的数据。

测试后要求总结核心功能:总结出每个最小功能测试成功后得到的核心执行代码(我并不懂每段代码的含义)

 

测试成功后,要求清空产生的所有代码和数据库。这通过对话就可以实现。Windsurf可以执行任何远程服务器操作命令是适合新手使用的重要功能。

 

说明:

实际做了很多测试,分别让最小功能跑通,因为我不懂代码,所有接口、设计的功能对我而言并不可信,到这里我并不想编写一套完整的前后端代码来可视化的验证,因为生成过多的代码让项目无法正确前进。

同时,我记录下来了最小功能中的执行逻辑(API请求的方法),以及构建的数据库表,补充整理到了我的文档中。

 

正式编写应用

一开始我没有要求Windsurf先创建整个前端甚至前端首页,即使我已经提前准备好了明确的说明文档可以提供给Windsurf,让他准确的实现。

 

心得1:从哪个功能点开始构建代码很重要

为核心功能(汇率查询API)写一个可视化的前端界面,这个界面的字段要和数据库保持一致,字段尽量详细,就算这个可视化的前端页面并不想提供给访客使用也要先做出来。

该页面如果可以正常访问,表示代码中使用的方法是正确的,数据库中数据也是正确的,可以为后续实际要做页面引用参考。整个应用构建完成后可以删除这个页面。

 

因此我得到了如下两个页面:

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

示例地址:https://huilv.aisharenet.com/currencies/

 

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

示例地址:https://huilv.aisharenet.com/AED/

 

心得2:善用“引用”文档方式提问

基于心得1,一开始并不是要构建一个完整的项目,而Windsurf主动性太强,所以问题中建议加入提示词“页面列表展示,仅展示展示字段:XX\XX\XX”

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

 

提供的@功能十分实用,可以快速引用文件夹、文件、类

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用-1

 

心得3:善于追问

这是上一步生成的页面,我有几个问题要提问

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

 

问题1:告诉我是否可以补充更多内容

问题2:告诉我代码效率问题

问题3:告诉我实现方法

问题4:告诉我根据我的需求“这是一个获取到的货币汇率展示列表”是否有优化建议?

 

心得4:高效管理代码,并减少垃圾代码产生的好方法

参考心得2的指令,增加一句:帮我单独创建一个子目录单独存放这个页面的代码。

在新建的子目录中单独测试并实现功能,最后考虑将此代码引用到其他需要的文件中。

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

 

心得5:在设计的功能较少时抽象出高可复用的能力:样式、方法、类、接口等

注意不要抽取过多可复用的文件代码,过于臃肿、数量过多的复用文件代码,在后续项目开发中,更容易让Windsurf记忆混乱。除非你记住每个复用文件的明确功能并提示Windsurf参考,实际操作中这并不现实。

该项目中复用的代码:查询汇率的API、数据连接文件、缓存规则和头部导航文件。记住,这是构建第二个页面时就抽象出来的,构建第一个页面时我并没有想的太清楚这个项目该做什么功能。

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

 

心得6:召回相关记忆然后执行任务(并让Windsurf执行服务器操作)

参考心得2,方法存在共性。这是实现复杂功能和复用现有代码的主要手段。

记得之前反复提及的“最小功能”么?当构造一个复杂的功能页面时,我往往从最小功能已正常运行代码中召回相关代码,用来实现一个复杂的功能页。

这个复杂页面我往往分块实现,先引入一个最小功能A,调试一次,再引入最小功能B,调试一次,以此类推...最后可以想堆积木一样做出很复杂的页面。

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

 

这次运气很好,没有直接进行数据库操作,就猜测到了正确的表和字段名,并构建出页面。这可能因为之前产生的上下文历史依然保留着数据库字段信息。

让我们强制执行一次数据库查询,作为近期的记忆留存,这可以更准确的完成后续任务:

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码-1

 

我要修改已经创建好的汇率定时更新脚本:ExchangeRateService.php。此时需要提前召回相关记忆:

通过阅读代码,原来ExchangeRateService.php不负责定时更新汇率,我搞错了...

好在修改前尝试阅读代码,知道这个文件并不负责定时更新汇率,真正更新脚本文件是:update_exchange_rates.php

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码(更新中...)-1

最后我提出了一个新问题让上下文记忆更加准确:“既然update_exchange_rates.php是定时获取汇率的脚本,那么ExchangeRateService.php文件是否还有用?”

在对话中最近复述出的内容,才是更准确的“记忆”。

 

心得7:把每一个实现的最小分支功能,记录在之前创建的文档中

当完整实现一个功能后,要写入文档中记录。通过对话让Windsurf更新到说明文档中的。

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码(更新中...)-1

 

最好在列一个功能开发清单,准确的记录任务进度:

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用-1

 

这么多要记录的信息,混合在一份说明文档中显然不合理,此时可以将重要说明文件分别记录,重点引用时只要在对话框输入@唤起文档即可。

 

心得8:为每一个核心功能创建“测试”模式

有些功能运行后可能会破坏代码、破坏正式数据库数据、无法检查报错信息或单次执行时间过长,代码中要求引入“测试”模式,方便调试各种问题。比如我的定时更新脚本执行一次要等很久,所以我加入了测试模式。

你信任代码设计功能正确的前提是:视觉上看到,有些视觉上无法直接看到的功能,要让Windsurf主动说出来“实际执行的结果”,此时就需要“测试模式”。

如何让不懂编程的人低门槛使用 Windsurf 编写出完整应用代码(更新中...)-1

 

心得9:多用回退

对保存后不满意的代码按Ctrl+Z回退,重新对话。这不是简单“重新抽卡”,因为保留了上一轮的对话记忆,再次生成会更加准确。

 

心得10:多轮对话无法得到符合预期功能则放弃

这里的功能指“最小功能”,删除最小功能的目录和目录下文件,尝试打开新对话窗口,删除存储的记忆,然后在指令说明:忘记之前的代码,开始重新写XXX功能。

 

心得11:常用对话词语

增删改查、建议、优化、解释、参考、忽略、依赖、相关引用、完整执行逻辑、测试、合并(如果你无法理解这些词语,向ChatGPT提问:在编程语境下中:XXX词语分别代表什么含义)

 

心得12:尽量使用环境依赖简单的成熟编程语言

因此选择宝塔面板部署PHP+MYSQL。我不会选择更现代化的前端框架和数据库,担心大模型中相关知识较少,理解的业务类型也较少。

PHP作为“古老”的编程语言,面向各类业务应该有很多成熟的解决方案成为了大模型的训练知识。

其实Pythonye不错,但缺点是依赖的“库”过于丰富,让环境依赖随着项目迭代逐步不可控,并不适合完全不懂程序的小白。

AI轻松学

普通人的AI入门指南

帮助你以低成本、零基础学会如何利用AI工具。AI就像办公软件一样,是每个人的必备技能。 掌握AI会让你在求职中占据优势,在未来的工作和学习中事半功倍。

查看详情>
未经允许不得转载:首席AI分享圈 » 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用

首席AI分享圈

首席AI分享圈专注于人工智能学习,提供全面的AI学习内容、AI工具和实操指导。我们的目标是通过高质量的内容和实践经验分享,帮助用户掌握AI技术,一起挖掘AI的无限潜能。无论您是AI初学者还是资深专家,这里都是您获取知识、提升技能、实现创新的理想之地。

联系我们
zh_CN简体中文