购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

第4章
ChatGPT助力编程效能提升

我的本职工作就是程序员,并且在研发岗位工作了10年以上,从初级小白技术岗到带着几十人的团队做项目,积累了一些一线“作战经验”。

一个很有意思的现象是,AI的快速发展,尤其是ChatGPT横空出世后,编程圈出现了截然不同的两种观点:有人认为AI将取代人工编程,发出类似“三体”降临前的悲观论调(程序员不存在了);有人则认为AI只能完成相对独立的单一功能,对于复杂的项目级开发,AI就不适用了。

务实的程序员信奉一句话:“Talk is cheap,show me the code.”意思大概就是别整那些没用的,亮出你的代码!没错,实践才是检验真理的唯一标准。

因此,我也通过ChatGPT做了不少编程方面的实践,ChatGPT给我的感觉就像一位知识储备全面、动手能力极强但有点一根筋的助手。他能发挥多大能力和你的指引方式息息相关!

本章通过一系列案例,由浅入深地向读者展示ChatGPT在编程方面的能力。

4.1 生成你的第一份代码

程序员在学习一个新的编程语言时,通常都是从“Hello World”开始的,我们也从这里开始。

案例12:10种编程语言的“Hello World”代码

提示词如下:

请用10种市面上主流的编程语言,分别实现“Hello World”的代码示例。

ChatGPT的回应如下:

当下市面上有很多主流的编程语言。以下是使用其中10种主流编程语言编写的“Hello World”代码示例。

这些示例涵盖了Python、JavaScript、Java、C、C++、C#、Ruby、Swift、Go和Rust这10种主流编程语言。每个示例都会输出“Hello,World!”的消息。

我们可以看到,ChatGPT可以飞快完成基础代码的编写,而且支持各种编程语言。当然,上面的代码只是最简单的入门例子,接下来我们让ChatGPT完成更复杂的功能级模块代码。

4.2 功能级模块代码开发

一个功能级模块通常为某一细分功能点的一个函数或多个函数的组合,或者是一个可被直接引用的代码组件。

这里我们通过两个案例来详细介绍。

案例13:实现一个Java冒泡排序算法的示例

提示词如下:

请使用Java编程语言,完成一个冒泡排序算法的示例。

ChatGPT的回应如下:

以下是使用Java编程语言实现冒泡排序算法的示例代码。

该示例中的bubbleSort方法实现了冒泡排序算法。在main方法中,首先定义了一个整型数组arr;然后调用bubbleSort方法对数组进行排序;最后使用printArray方法输出排序后的数组。执行程序将输出原始数组和排序后的数组。

案例14:实现一个Vue复选框组件

提示词如下:

请实现一个Vue复选框组件的代码示例。

ChatGPT的回应如下:

以下是一个简单的Vue复选框组件的代码示例。

在上面的示例中,我们创建了一个Vue组件,其中包含了一个用于选择多个选项的复选框组件。在模板中,我们使用v-for指令来循环遍历options数组,并为每个选项渲染一个复选框和标签。我们将选中的选项存储在selectedOptions数组中,使用v-model指令实现双向绑定。

在页面中,使用<ul>元素显示已选择的选项,并使用<div>元素显示可选的选项。当用户选择或取消选择一个选项时,selectedOptions数组将自动更新,页面上的选择结果也会相应更新。

请注意,上述代码只是一个简单的示例,用于演示Vue复选框组件的基本实现方法。在实际应用中,你可能需要根据需求进行更多的定制和样式设置。

通过案例13和案例14,我们能得到结论:对于此类功能级的片段代码或模块,只要指令清晰、明确,ChatGPT就能够快速完成目标代码的输出,同时还会给出简明的代码说明,还是比较友好的。

对于有经验的开发者,这显然提高了开发效率。有了ChatGPT的助力,你可以把更多精力放在核心业务逻辑上,对于大量庞杂的基础代码则完全可以交给ChatGPT处理;如果你是代码小白,或者是刚开始学习一个新的编程语言,ChatGPT也是一个非常得力的学习助手,可利用它快速生成你想了解的各种示例。

利用ChatGPT完成功能级模块代码的编写,通常只需要一两个指令就可以了。如果你想利用ChatGPT完成一整个项目,或是一个完整工具或游戏的开发,就没那么容易了。

比如下面这个案例,我们直接让ChatGPT开发一个完整的项目,它往往会给出“敷衍”的概括性回答。

提示词如下:

请实现一个股票盯盘系统,要求给出所有源代码,谢谢!

ChatGPT的回应如下:

对不起,我可能无法提供一个完整的股票盯盘系统的源代码,因为这需要大量的技术细节,包括后端数据库设计、前端用户界面设计、股票市场数据的获取和处理等,并且需要一个专业的团队进行维护。

然而,我可以提供一个简单的Python脚本,使用pandas_datareader库从Yahoo Finance中获取股票数据。这个脚本会每隔一段时间获取一次指定股票的当前价格。这只是一个非常基础的脚本,没有错误处理、用户界面或任何高级特性,但可能对你有所帮助。

注意:此代码在运行之前,需要在你的环境中安装pandas_datareader和yahoo_fin这两个Python库。你可以通过下面的命令来安装:

以下是Python脚本:

这个脚本会无限循环地获取指定股票的当前价格并输出。你可以根据需要,修改股票代码和间隔时间。

我们看到,ChatGPT提示我们完成该系统过于复杂,需要考虑多方面因素。它提供的简单示例或许可以运行,但这只是一个非常基础的脚本,没有错误处理、用户界面或任何高级特性,显然这不是我们想要的结果。

4.3 项目级模块代码开发

如果要用ChatGPT辅助我们快速完成项目级的开发,就需要通过科学的方法来引导了。

这里我罗列了一个基本的引导方法,主要分为如下几个步骤。

(1)人工梳理项目需求。

(2)用ChatGPT完成功能模块的拆解。

(3)根据业务逻辑优先级,人工利用ChatGPT将各个模块拆解成函数。

(4)用ChatGPT具体实现拆解出来的每一个函数。

(5)按照步骤(3)~步骤(5),逐个实现每一个模块。

(6)项目整合,人工将各模块组装起来。

(7)若中间环节遇到问题,则人工引导ChatGPT灵活解决。

基于以上步骤,我们以4.2节提到的股票盯盘系统为例,为大家拆解一个具体的项目级开发案例。

首先,梳理项目需求。需求是项目启动的先决条件,这一步需要人工根据项目实际情况进行整理。对ChatGPT“投喂”需求,要尽可能运用简单明确的语言将需求概括清楚。这里我简单梳理了一下“股票盯盘系统”的需求。

案例15:请ChatGPT梳理“股票盯盘系统”需求

提示词如下:

梳理一下我的需求列表,你不用着急实现。首先设计需要实现哪些模块,然后一个个模块逐步细化。

1.实时股票盯盘系统。

2.可同时观测美股多只股票。

3.本金为500美元,用于交易美股。

4.制定交易策略,通知我什么时候买入、卖出。

5.买入时提示股票代码、买入价格区间、买入股数、账户实时余额(包含股票的价值)。

6.卖出时提示股票代码、卖出价格区间、卖出股数、卖出收益率和收益金额、账户实时余额(包含股票的价值)。

7.交易策略需要考虑我的账户余额。

8.买入和卖出的间隔需要大于5分钟,保证我有足够的操作时间。

9.我的目的是通过你的买入和卖出建议,实现盈利。

10.不要在一只股票上花掉60%以上的本金。

ChatGPT的回应如下:

根据你的需求,我们可以将这个实时股票盯盘系统分为以下几个模块。

1.数据获取模块:从股票市场获取实时股票数据,包括港股和美股的价格、交易量等信息。

2.账户管理模块:管理你的账户,包括本金、持仓、实时余额等信息。

3.交易策略模块:制定交易策略,包括买入和卖出信号的生成。

4.交易执行模块:根据交易策略发出的信号执行买入或卖出操作,并更新账户信息。

5.通知模块:将买入和卖出建议、实时余额等信息通知给你。

以下是每个模块的具体实现思路。

1.数据获取模块:

-使用API或爬虫技术从相关网站或数据提供商处获取实时股票数据。

-可以考虑使用第三方库,如ccxt或yfinance,以简化数据获取过程。

2.账户管理模块:

-设计一个账户类,用于存储本金、持仓、实时余额等信息。

-实现账户类的相关方法,如买入、卖出、更新余额等。

3.交易策略模块:

-设计一个交易策略类,用于生成买入和卖出信号。

-根据需求实现不同的交易策略,如基于技术指标、基于大数据分析等。

-考虑账户余额和其他约束条件(如买入卖出间隔、风险管理等)。

4.交易执行模块:

-实现一个交易执行函数,根据交易策略模块发出的信号执行买入、卖出操作。

-考虑交易成本(如手续费、滑点等)。

-更新账户信息。

5.通知模块:

-设计一个通知类,将买入和卖出建议、实时余额等信息发送给你。

-可以使用电子邮件、短信、即时通信软件等方式进行通知。

在实现每个模块时,我们可以根据具体需求逐步完善代码。当所有模块完成后,将它们集成到一个完整的系统中,并进行测试和优化。

我们看得出,ChatGPT的表现很不错,项目模块拆分较为合理,而且效率非常高。

接下来,我们可以让ChatGPT选择合适的技术栈去实现各个模块,也可以人工指定自己期望的技术栈,这里假定我们指定ChatGPT利用前端语言结合第三方库来完成开发。

案例16:请ChatGPT完成“股票盯盘系统”代码开发

提示词如下:

可否仅通过HTML、JavaScript、CSS结合第三方库实现上述所有模块?

ChatGPT的回应如下:

是的,通过HTML、JavaScript、CSS,以及第三方库,你可以实现上述所有模块。以下是如何使用这些技术实现各个模块的概述。

1.数据获取模块:

-使用JavaScript第三方库(如Alpha Vantage、IEX Cloud等)获取实时股票数据。

-使用Fetch API或第三方库(如Axios)发送请求获取数据。

2.账户管理模块:

-使用JavaScript创建一个账户类,用于存储本金、持仓、实时余额等信息。

-实现账户类的相关方法,如买入、卖出、更新余额等。

3.交易策略模块:

-使用JavaScript创建一个交易策略类,用于生成买入和卖出信号。

-根据需求实现不同的交易策略,如基于技术指标、基于大数据分析等。

-考虑账户余额和其他约束条件(如买入卖出间隔、风险管理等)。

4.交易执行模块:

-使用JavaScript实现一个交易执行函数,根据交易策略模块发出的信号执行买入或卖出操作。

-考虑交易成本(如手续费、滑点等)。

-更新账户信息。

5.通知模块:

-使用JavaScript创建一个通知类,将买入和卖出建议、实时余额等信息发送给你。

-可以通过Web应用的形式展示通知,或者使用第三方服务(如Twilio、SendGrid等)发送电子邮件、短信等通知。

6.前端展示:

-使用HTML和CSS设计一个用户界面,展示股票数据、账户信息、交易建议等内容。

-利用JavaScript操作DOM,实时更新前端界面的数据。

在这个过程中,你可能需要了解跨域资源共享(CORS)策略,因为某些股票数据API可能会限制跨域请求。为了解决这个问题,你可以将请求发送到自己的服务器,然后由服务器与API进行通信。另外,你还需要注意API的访问限制(如请求频率限制、访问次数限制等),并根据需要选择合适的API。

通过上面的引导,我们明确了所选技术栈可以实现项目需求,另外也为后面的代码实现设置了上下文环境,ChatGPT会选择前端技术HTML、Javascript、CSS,以及第三方库来编写具体代码。

根据ChatGPT的反馈,我认为在众多模块中,数据获取模块的业务优先级最高。那么接下来,我们让ChatGPT先拆解该模块所用的函数。

提示词如下:

好的,我们先来设计数据获取模块,请你先设计实现这个模块需要几个函数,先不要实现。

ChatGPT的回应如下:

为了实现数据获取模块,我们可以设计以下几个函数。

1.fetchStockData(stockSymbols,interval):获取股票数据的主要函数,将股票代码列表(stockSymbols)和数据时间间隔(interval)作为参数。该函数将调用其他辅助函数来获取股票数据,并返回一个Promise,解析后包含所需的股票数据。

2.fetchSingleStockData(stockSymbol,interval):用于获取单只股票数据的函数,将股票代码(stockSymbol)和数据时间间隔(interval)作为参数。该函数将通过API请求获取该股票的实时数据。

3.parseStockData(response):从API响应中解析股票数据的函数。该函数将处理API返回的数据格式,并提取我们需要的信息,如股票价格、交易量等。

4.handleError(error):处理错误的函数。当请求失败或出现错误时,这个函数将负责处理错误,并在适当的情况下向用户反馈错误信息。

以上4个函数分别负责不同的任务,通过它们的组合,我们可以实现一个完整的数据获取模块。在实际实现时,可能还需要根据所选API的具体要求进行一些调整。

几秒钟后,此模块的函数被迅速生成,就是我们预设的JavaScript风格。接下来就是让ChatGPT实现每一个函数的具体代码。

我们优先实现其中最核心的业务逻辑函数,fetchStockData(stockSymbols,interv al)。

提示词如下:

好的,那请先实现函数fetchStockData(stockSymbols,interval)。

ChatGPT的回应如下:

为了实现fetchStockData函数,我们首先需要选择一个股票数据API。在这个示例中,我们将使用Alpha Vantage API。请注意,你需要注册一个免费API密钥才能使用该API。

以下是fetchStockData函数的实现代码:

在这个实现代码中,我们首先使用Array.prototype.map方法为每个股票代码创建一个fetchSingleStockData函数的Promise。然后使用Promise.all等待所有请求完成,并将结果组合成一个包含股票代码和对应股票数据的对象。

请注意,这里我们还没有实现fetchSingleStockData函数。你需要先实现这个函数,才能使用fetchStockData函数获取股票数据。

在使用这个函数之前,请确保在实际项目中使用了自己的API密钥。为了避免将API密钥暴露在前端代码中,建议将请求代理到你的服务器,并在服务器端存储API密钥。

我们看到,要实现该模块,逻辑上需要优先实现fetchSingleStockData函数,那么接下来,我们让ChatGPT具体实现一下。

提示词如下:

既然这样,请实现一下fetchSingleStockData函数。

ChatGPT的回应如下:

在这个示例中,我们将继续使用Alpha Vantage API获取股票数据。以下是fetchSingleStockData函数的实现代码:

fetchSingleStockData函数通过Alpha Vantage API获取单只股票的实时数据。函数首先构造API请求URL,然后使用fetch方法发送请求。收到响应后,函数将检查是否存在错误消息。如果一切正常,函数将调用parseStockData函数解析股票数据,并返回解析后的数据。

请注意,在使用这个函数之前,请确保已经实现了handleError函数,并在实际项目中使用了自己的API密钥。为了避免将API密钥暴露在前端代码中,建议将请求代理到你的服务器,并在服务器端存储API密钥。

从上述的会话中,我们看到数据源用到了Alpha Vantage的API,但我并不知道调用Alpha Vantage API的方法。

没关系,继续让ChatGPT帮我们解决。

提示词如下:

上文中,你说到我需要注册一个免费API密钥才能使用该API,请问如何注册?

ChatGPT的回应如下:

要注册Alpha Vantage API密钥,请按照以下步骤操作。

1.访问Alpha Vantage官方网站。

2.单击主页上的“Get your free API key”按钮。

3.弹出获取API密钥的页面,填写必要的信息,如你的名字、电子邮件地址等。选择适当的选项,如用途等。

4.阅读并同意Alpha Vantage的服务条款和隐私政策后,点击“Get free API key”按钮。

5.系统将为你生成一个API密钥,并显示在屏幕上。你还会收到一封包含API密钥的电子邮件。

现在,你已经成功获取了Alpha Vantage API密钥。请将其添加到你的代码中,以便访问Alpha Vantage提供的股票数据。请注意,免费API密钥可能具有一定的访问限制,例如每分钟请求数量限制和每日请求数量限制。在实际应用中,请确保遵守这些限制。

另外,请注意保护你的API密钥,不要将其公开或分享给他人。为了保护密钥,建议将API请求代理到你的服务器,并在服务器端存储和管理密钥。这样,前端代码就不需要包含API密钥了,从而降低泄露风险。

如果按照传统方式开发,这些都需要人工花费时间去做具体调研,显然ChatGPT大大提升了我们的工作效率。我们按照ChatGPT的提示,即可快速完成账号注册并获取到所需的API密钥。拿到密钥后,配置到代码中,我们继续后面的操作。

提示词如下:

请实现数据获取模块的另外两个函数。

ChatGPT的回应如下:

根据前面的讨论,我们还需要实现parseStockData和handleError函数。实际上,我们在前面实现fetchSingleStockData函数时已经实现了parseStockData函数。这里,我们将重点实现handleError函数。

以下是handleError函数的实现代码:

在这个实现代码中,我们将错误信息记录到控制台,并向用户显示一个简单的警告。在实际项目中,你可能需要根据项目需求来实现更复杂的错误处理逻辑。例如,可以根据错误类型提供不同的提示信息,或者在发生错误时触发其他操作(如重新获取数据等)。

现在,你已经实现了数据获取模块的所有函数。可以使用fetchStockData函数获取股票数据,并在前端展示数据或将数据用于其他模块(如交易策略模块等)。请注意,为了确保模块正常工作,你需要在实际项目中使用自己的API密钥,并遵守API使用限制。

至此,数据获取模块的所有函数都已实现,我们需要让ChatGPT帮我们实现一个简单的网页,用于展示数据获取模块读到的数据。

提示词如下:

请帮我实现一个简约风格的网页,并以表格形式展现在数据获取模块中获取的数据。

ChatGPT的回应如下:

为了实现一个简约风格的网页,我们将使用HTML、CSS和JavaScript来创建一个表格,展示数据获取模块中获取的股票数据。首先,我们来创建HTML和CSS结构。

现在,我们将使用JavaScript来填充表格数据。使用前面实现的fetchStockData函数获取股票数据,并将数据插入HTML表格中。

在这段代码中,首先定义了要获取数据的股票代码和时间间隔。然后,创建一个displayStockData函数,该函数使用fetchStockData函数获取股票数据,并将数据插入HTML表格中。使用document.createElement创建新的表格行(tr),并使用模板字符串填充行的内容。最后,将新创建的行添加到表格的tbody元素中。

数据响应长度超过了上下文限制,我们输入提示词“继续”可令其继续输出。

提示词如下:

继续。

ChatGPT的回应如下:

现在,你已经创建了一个简约风格的网页,该网页使用表格展示数据获取模块中获取的股票数据。你可以根据项目需求进一步调整HTML、CSS和JavaScript代码,以实现所需的功能和外观。

到这里,我们的数据获取模块已经完全实现,数据源使用了第三方库、JavaScript的几个函数获取到需要的数据,网页负责数据展示。

接下来的任务需要人工处理,即将所有零散的代码块整合为可以运行的项目代码。这个对于稍有经验的程序员来讲,门槛并不高。

我复制了ChatGPT生成的代码,在本地分别创建了对应的文件,简单调试了一下。结果如图4-1所示,这里展示了苹果和微软公司的股票信息。

图4-1

如果需要展示更多自选股,在代码中自行配置即可。

到这一步,数据获取模块全部调通,所有源代码从无到有,再到成功运行,不到半个小时。不得不说,ChatGPT真的是一个得力助手!其他模块的实现逻辑也一样,有兴趣的读者可以按这个方法实操一下,限于篇幅,这里不再继续展示了。

上述操作基本是利用ChatGPT实现复杂代码的一个通用逻辑。在这里,所有的基础代码均可由ChatGPT实现,而人工只需要负责完成提示指引、架构整合等工作,这显然大大降低了开发成本,能让开发者从繁杂的基础代码中腾出手来,从而更加专注于项目的核心业务。

4.4 零基础也能快速开发插件、游戏或小程序

ChatGPT有一个明显的好处,就是能帮你高效完成“跨界”,这点在编程领域非常明显。

比如,你是后端程序员,可以利用ChatGPT完成页面开发;你是前端程序员,可以让ChatGPT快速搭建一个模拟的后台;还有一些特定方向的开发,比如浏览器插件、小游戏等。

你想开发谷歌浏览器插件,但你之前并没有任何浏览器插件开发的经验,甚至前端开发的经验也没有,这时就该让ChatGPT出场了。

案例17:如何开发谷歌浏览器插件

提示词如下:

如何开发谷歌浏览器插件?请给出具体步骤和一个简单示例。

ChatGPT的回应如下:

开发一个谷歌浏览器插件(Chrome扩展程序)可以分为以下几个步骤。

1.创建一个新的文件夹来存放插件的所有文件。

2.在该文件夹中,创建一个名为manifest.json的文件。这个文件是必需的,它用来告诉Chrome这个插件的基本信息,如版本号、名称、需要的权限等。

下面是一个简单的manifest.json文件示例:

3.创建popup.html文件。

4.创建popup.js文件(这个例子中我们不需要任何JavaScript代码,但在真实世界中的扩展程序里,通常必须使用JavaScript代码)。

5.创建icon.png文件。这个文件是插件的图标,大小一般为128像素×128像素。注意,这个图标的文件名必须和manifest.json文件中browser_action.default_icon的值相匹配。

6.安装扩展程序:打开Chrome,点击右上角的“菜单→更多工具→扩展程序”命令,或者直接在地址栏输入chrome://extensions/。打开扩展程序页面,首先选择“开发者模式”,然后点击“加载已解压的扩展程序”,选择你创建的文件夹。

7.现在,你应该可以在浏览器的工具栏上看到你的扩展程序图标了。点击图标,就能看到popup.html页面。

以上就是创建一个最简单的Chrome扩展程序的步骤。在实际开发中,你可能需要使用更多的API和权限,可以参考“Chrome扩展程序开发文档”来获取更多信息。

ChatGPT很快给出了具体且可行的步骤及示例代码。我们在传统搜索引擎中搜索相关内容时,得到的结果往往是分散的,而通过ChatGPT可以直接看到具体的案例,这大大提升了我们的研发速度,让不同技术之间的壁垒越来越小。

案例18:如何利用Python开发2D游戏

提示词如下:

如何利用Python开发一个简单的2D游戏。

ChatGPT的回应如下:

在Python中,我们可以使用Pygame库来开发2D游戏。以下是一种基本的实现方式。请注意,这只是一个基本框架,如果需要更多特性,例如爆炸特效、音效、更复杂的敌人行为等,可能需要花更多的时间来改进和扩展这个基础版本。

上述代码需要提供player.png、bullet.png、enemy.png这3个图片文件,分别代表玩家、子弹和敌人。当子弹击中敌机时,可以添加一个爆炸特效。

请注意,如果想要创建一个更专业的游戏,可能需要考虑添加更多的特性,例如音效、更多的敌人、不同种类的子弹、等级系统等。为了处理这些复杂的特性,可能需要创建更多的类和函数,而不是将所有代码都放在主循环中。

ChatGPT提到了使用Pygame库的解决思路,并给出一个具体案例,直接复制代码,补齐对应的几个图片文件,一个可运行的示例就实现了。对于Python初学者,可在此代码的基础上进行调试或二次开发。

案例19:如何开发微信小程序

提示词如下:

我想开发一款微信小程序,通常有哪些技术方案?请列举各种方案的优缺点。

ChatGPT的回应如下:

微信小程序开发主要有以下几种技术方案。

1.原生微信小程序开发:使用微信官方提供的微信开发者工具进行开发,主要使用的语言是JavaScript,其中的WXML和WXSS分别对应Web的HTML和CSS。

优点:

-对微信平台支持最好,所有新的特性和API都会最早支持。

-性能较好,稳定性强,与微信原生API交互流畅。

-微信官方提供详细的文档和示例代码。

缺点:

-代码不能跨平台使用,比如不能直接用于开发支付宝小程序等。

-缺少一些复杂应用所需的前端工程化能力,比如组件化开发、模块化开发等。

2.使用Taro框架:Taro是一套来自京东凹凸实验室的多端统一开发框架,支持使用React、Vue、Nerv等框架编写代码,再编译成微信小程序、百度小程序、支付宝小程序等。

优点:

-可以使用React、Vue等熟悉的框架进行开发。

-一次编写,多端运行,可以大大提高开发效率。

-社区活跃,文档丰富,有很多优秀的第三方插件。

缺点:

-对一些微信小程序的特性支持可能不及时。

-为了兼容多端,可能需要做一些妥协,对性能和体验有一定影响。

3.使用WePY框架:WePY是类似于Vue的一款框架,可以让开发者使用类Vue的语法进行微信小程序开发。

优点:

-支持使用类Vue的语法进行开发,学习成本低。

-支持组件化开发,提高了开发效率。

-有很多优秀的第三方插件。

缺点:

-社区相较Taro小一些,对问题的响应速度可能不及Taro快。

-框架更新可能没有Taro频繁。

4.使用uni-app框架:uni-app是一个使用Vue开发所有前端应用的框架,它允许开发者编写Vue代码,然后发布到多个平台。

优点:

-支持使用Vue语法,支持多端运行,包括iOS、Android、微信小程序、支付宝小程序等。

-集成了很多优秀的插件,提供了很多增强功能。

提示词如下:

继续。

ChatGPT的回应如下:

优点(续):

-DCloud提供了大量的服务,包括云服务、HBuilderX编辑器、mUI框架等,一站式的服务能够显著提高开发效率。

缺点:

-对一些微信小程序的特性支持可能不及时,因为需要考虑到其他多端的兼容性。

-性能可能略逊于原生微信小程序,特别是一些复杂的小程序。

选择哪种技术方案取决于你的具体需求,比如,你是否需要跨平台,你的团队是否已经熟悉某种语言,你的项目对性能的要求,等等。以上每种方案都有其适用的场景,需要根据实际情况来选择。

ChatGPT给出了主流的几种微信小程序开发方案,如其所说,选择哪种方案要根据团队的实际情况而定。我们团队在开发一款小程序时,采用的就是上面的方案4,差不多半个月时间,小程序初版就已经上线。而团队的大部分成员,之前都没有小程序开发的相关经验。

选好技术方案后,还可以沿着思路继续追问,比如我们就选方案4。

提示词如下:

使用uni-app开发小程序,需要哪些流程?

ChatGPT的回应如下:

使用uni-app开发微信小程序,可以遵循以下步骤。

1.环境搭建:首先需要在计算机上安装Node.js和HBuilderX。HBuilderX是DCloud官方推荐的IDE,专门用于开发uni-app。

2.创建uni-app项目:打开HBuilderX,首先点击菜单栏中的“文件→新建→项目”命令,在弹出的对话框中选择“uni-app”,然后填写项目名称和其他信息。

3.编写代码:在项目中,你会看到一个类似Vue.js项目的文件结构,可以在pages文件夹中创建页面,编写.vue文件。页面的布局使用类似HTML的语法,样式使用类似CSS的语法,逻辑使用JavaScript和Vue.js的语法。你也可以使用uni-app提供的组件和API来调用微信小程序的功能。

4.预览和调试:在HBuilderX中,首先点击菜单栏的“运行→运行到小程序模拟器”命令,然后选择“微信开发者工具”,就可以在微信开发者工具中预览和调试小程序。

5.构建和发布:当小程序开发完成后,首先点击菜单栏中的“发布→发布为微信小程序包”命令,生成最终的小程序代码。然后登录微信公众平台,上传小程序代码,并提交审核。审核通过后,你的小程序就可以发布了。

在开发过程中,你可以参考“uni-app官方文档”,里面有详细的指南和API文档,可以帮助你解决开发中遇到的问题。

到这里,我们已经可以根据ChatGPT的回应,完成环境搭建及项目初始化了。如果需求明确,可以按照4.3节的内容,让ChatGPT完成整个项目的基础代码开发。

由此我们也得到一个结论,ChatGPT的助力,能帮助你在不熟悉的技术领域快速进入角色。

4.5 让ChatGPT帮你提升代码质量

如何提升代码质量,可以从两个方向优化。

一是直接修正,比如代码优化或Bug修复等;二是提前预防,比如制定代码规范、提供完备的测试用例等。

下面就从这两个方向出发,看看ChatGPT能帮我们做些什么?

4.5.1 Bug检查

这里我首先赋予ChatGPT代码审查员的身份,然后列举一个开发小白常犯的错误,看看它能给我们提供什么建议?

案例20:请ChatGPT检查代码中的问题

提示词如下:

你现在是资深代码评审专家,请检查以下这段代码。

ChatGPT的回应如下:

这段代码存在一个重大的安全问题,可能使你的网站或应用程序暴露于跨站脚本攻击(XSS)的风险之下。在这个例子中,你正在从一个元素中取得用户的输入,并将这个输入直接放入另一个元素的innerHTML中。这就意味着,如果用户输入的内容包含JavaScript代码,那么这段代码将会在浏览器中执行。

例如,一个恶意的用户可以输入<script>alert('Hacked!');</script>,当这段代码被放入innerHTML中时,浏览器就会执行这个alert脚本。

要防止这种攻击,你需要在将用户的输入放入HTML之前,对输入进行合适的转义。以下是一个可能的解决方案:

在这个例子中,我们使用textContent代替innerHTML。textContent不会解析HTML标记,因此,如果用户的输入中包含任何HTML或JavaScript代码,这些代码将会被当作纯文本对待,而不会被执行。然而,这也意味着你不能使用textContent来插入含有HTML标签的内容。

如果你需要插入含有HTML标签的内容,则应该使用一个可靠的库来进行HTML的转义,比如jQuery的text函数,或者可以编写自己的转义函数。但是,你应该尽量避免这种情况,因为即使是最小的错误也可能导致XSS攻击。

下面再列举一个Python代码中存在SQL注入风险的例子。

提示词如下:

请检查以下这段代码:

ChatGPT的回应如下:

这段代码存在一个显著的安全漏洞,它暴露于SQL注入攻击。这段代码直接接收用户输入并将其插入SQL查询中,如果用户输入的是恶意构造的数据,例如"1;DROP TABLE users",这将会导致数据库中的users表被删除。

在Python中,应该使用参数化查询来防止SQL注入。这是一个改进后的代码示例:

在这个改进的示例中,我们使用了问号“?”作为占位符,并且将参数作为元组传递给execute方法。这样,SQLite将会自动转义我们的输入,从而避免SQL注入。

此外,你还应该确保数据库连接在操作完成后被正确关闭,以避免资源泄露。这可以通过con.close()和cur.close()实现,或者可以使用Python中的with语句来确保资源在操作完成后被自动关闭。

通过以上两个案例,发现ChatGPT具备代码评审的能力。

(1)能够快速理解我们的代码。

(2)找出代码中存在的漏洞,解释了该隐患的原理。

(3)能给出一些指导性的建议。

4.5.2 代码规范

程序员在接手一些陈旧的项目时,经常会遇到一些“奇葩”代码,可能功能完好,但缺少注释、结构混乱,非常难以理解。

为了说明更多问题,下面我列举的这个案例可能稍显极端,但通过该案例我们能更好地理解ChatGPT对代码规范起到的作用。

案例21:请ChatGPT给出代码优化方案

提示词如下:

请帮我分析出下方代码的功能,并给出具体的优化方案。

ChatGPT的回应如下:

这段代码的目标是找出在数组a中存在,但在数组b中不存在的元素,并返回这个新的数组。

不过,这段代码的可读性非常差,因为它使用了不清晰的单字母变量名,并且没有任何注释。另外,实现这个目标的方式也很低效,因为它使用了双层循环,时间复杂度为O(n 2 )。

下面是优化后的版本,我们使用了更清晰的变量名,添加了注释,并使用了一种更有效的方法:

在优化后的代码中,我们首先使用Set来存储数组b的元素,因为Set具有O(1)的查找时间复杂度。然后使用Array.prototype.filter和Set.prototype.has来找出只在数组a中存在的元素。这种方法的时间复杂度为O(n),效率更高。此外,我们还使用了更有意义的变量名,并添加了必要的注释,以提高代码的可读性。

我们看到,上述代码片段的可读性非常差,让人一看就头皮发麻,已没有心情去探究背后的逻辑。

这个时候,我们利用ChatGPT对代码进行规范化处理,ChatGPT为我们解读了代码,并添加了注释,优化了算法效率。

另外,我们还可利用ChatGPT对目标代码生成测试用例,这里还以上述这段代码为例。

提示词如下:

针对上文的函数,请为其添加测试用例,要求尽可能全面测试该函数的功能。

ChatGPT的回应如下:

测试用例对于保证代码质量并找出潜在的问题至关重要。我们可以通过多种方式来创建测试用例,这里是一个简单的例子,使用了console.assert()来验证预期的输出:

这些测试用例涵盖了多种情况,包括正常的数组、包含所有元素不同的数组及空数组。这样可以帮助我们确认arrayDifference函数在各种情况下都能正常工作。如果有任何测试失败,那么console.assert将抛出一个错误,并显示相应的错误信息。

代码评审是指通过检查代码来发现和修复错误、缺陷和不良实践的过程。通过案例20和案例21,我们看到ChatGPT具备理解代码、发现Bug、解决Bug等能力,并可为代码添加注释、优化代码、生成测试用例等。这些能力,都将明显提高开发者的工作效率。

4.6 本章小结

本章通过一系列案例,展示了从入门的“Hello World”到项目级模块代码的开发过程,并介绍了代码质量、安全等内容。这里我们简单总结以下几点。

(1)ChatGPT具备理解、生成、优化代码的能力,能够显著提高开发效率。

(2)对于功能级模块的代码片段,如函数、组件等基础逻辑单元,只要描述清晰,通常只需一两个指令,ChatGPT便可快速生成相应代码。

(3)对于项目级模块的代码开发,ChatGPT也能起到很强的辅助作用,人工专注于引导+整合,ChatGPT专注于基础代码生成和优化。

(4)对于技术小白,或陌生技术领域,ChatGPT可提供快速辅导支持,如直接提供原理讲解、实操步骤、入门案例等,这些能让你快速进入新角色。

(5)ChatGPT具备发现Bug、解决Bug等能力,并可为代码添加注释、优化代码、生成测试用例等,这些能力能够帮助我们对代码质量进行有效把控。

ChatGPT不会取代程序员,但却极大可能会改变我们未来的工作方式,所以学习如何利用好AI工具,是当下非常重要的事。 wsuFYDon5uC2iAlJKqdBRuWE5jRKfpcuQCfsg1nlILzpdytwknylrWf7M5vAV4Vx

点击中间区域
呼出菜单
上一章
目录
下一章
×