1
00:00:00,150 --> 00:00:04,790
在本视频中, 我们将探索聊天GPT和代码生成的作用 

2
00:00:04,800 --> 00:00:10,650
所以让我们想想如何在生成代码时使用聊天GPT, 因为有时作为程序员,

3
00:00:10,650 --> 00:00:16,950
我们发现自己编写的代码有点冗余或重复, 这几乎就是我们所说的样板代码,

4
00:00:17,070 --> 00:00:24,590
基本上是重复出现的, 它是一种总是存在的结构

5
00:00:24,600 --> 00:00:33,960
它本身并不需要脑力, 但它肯定有助于自动化这个过程, 这绝对是聊天机器人可以帮助的事情

6
00:00:34,200 --> 00:00:39,330
所以让我们请查德为我们写一个简单的网站 

7
00:00:41,270 --> 00:00:43,910
你给我写一个简单的网站 

8
00:00:44,780 --> 00:00:52,820
现在, 这可能是一个非常复杂的问题, 所以它可能会要求我澄清这个网站的限制

9
00:00:52,820 --> 00:00:54,590
那我到底想要什么

10
00:00:54,620 --> 00:00:56,740
我想在这个网站上看到什么样的功能？

11
00:00:56,750 --> 00:00:59,360
所以这就是它的结果 

12
00:00:59,360 --> 00:01:01,430
它无法从头开始创建一个 

13
00:01:02,130 --> 00:01:04,730
您决定您的网站的目的和内容 

14
00:01:04,730 --> 00:01:14,240
所以现在它实际上给了我一种方式, 我可以去建立一个网站, 它几乎是一种回避问题

15
00:01:14,240 --> 00:01:20,300
但是我们会看到, 如果我实际上改变这个问题的措辞, 我实际上可以让它向我报告我想要的

16
00:01:20,750 --> 00:01:27,610
有一点值得注意的是, 有时候你确实需要一点领域知识来知道要问什么

17
00:01:27,620 --> 00:01:30,230
这就是我在这门课上要讲的 

18
00:01:30,230 --> 00:01:37,640
因此, 当涉及到网站建设时, 有一件事非常重要, 那就是有这些称为HTML文件的文件,

19
00:01:37,880 --> 00:01:41,060
它们实际上可以创建非常简单的网站

20
00:01:41,060 --> 00:01:48,560
所以, 也许我想要一个简单的投资组合网站写在HTML 

21
00:01:49,870 --> 00:01:51,460
所以如果我们说这样的话 

22
00:01:52,330 --> 00:01:54,070
Cha GP果然说肯定 

23
00:01:54,070 --> 00:01:55,990
我很乐意为你提供 

24
00:01:56,020 --> 00:01:58,440
这是一个基本的例子 

25
00:01:58,450 --> 00:02:00,710
您可以修改它以满足您的特定需求 

26
00:02:00,730 --> 00:02:06,160
所以如果我们继续看这里, 我们看到它现在正在写美国代码 

27
00:02:06,160 --> 00:02:11,650
有一件事有点奇怪, 它说, 我不知道你们是否熟悉代码片段,

28
00:02:11,650 --> 00:02:20,320
但通常当它出现在这个文本块中, 用不同的字体, 这是什么样的代码片段

29
00:02:20,320 --> 00:02:26,800
在某些时候, 用来表达文本的语言类型, 他们以这种方式将其风格化

30
00:02:27,610 --> 00:02:34,300
有点奇怪的是, 上面写着PHP, 这恰好是另一种语言, 而不是这里显示的

31
00:02:34,300 --> 00:02:36,400
这显然是一个HTML文件 

32
00:02:37,330 --> 00:02:41,720
所以这就是我们要使用作为我们的网站的基础 

33
00:02:41,740 --> 00:02:47,770
现在, 它不会被部署在某个域名或URL上, 所以我们将无法在互联网上访问

34
00:02:47,770 --> 00:02:51,340
但可以肯定的是, 它是一个网站的布局 

35
00:02:51,340 --> 00:02:54,280
所以它也在告诉我们它的作用 

36
00:02:54,280 --> 00:03:01,330
所以它说它包括一个投资组合网站的基本结构和它为我们提供的几乎免费的东西

37
00:03:01,330 --> 00:03:05,320
所以我们可以继续复制这段代码, 转到Visual Studio Code 

38
00:03:05,890 --> 00:03:13,140
现在, 我刚刚在桌面上创建了一个文件夹, 基本上就是要保存一个名为网站HTML的文件

39
00:03:13,150 --> 00:03:14,860
它不必被称为网站HTML 

40
00:03:14,860 --> 00:03:16,090
我就是这么叫的 

41
00:03:16,090 --> 00:03:20,950
但是它必须有这个文件扩展名HTML, 因为这暗示着你的操作系统,

42
00:03:20,950 --> 00:03:24,040
你想用你的网络浏览器打开它

43
00:03:24,040 --> 00:03:28,900
所以继续这样做, 我们粘贴它, 并保存它, 只是使用控制 

44
00:03:28,900 --> 00:03:30,160
那是条捷径 

45
00:03:30,410 --> 00:03:35,500
我会在文件浏览器中打开它 

46
00:03:35,500 --> 00:03:41,080
正如你所看到的, 这是谷歌Chrome浏览器, 这是我选择的网络浏览器 

47
00:03:41,080 --> 00:03:45,340
现在我们可以看到这个本地文件正在被引用并且已经被打开 

48
00:03:45,340 --> 00:03:48,070
果然, 这就是我们的网站 

49
00:03:48,070 --> 00:03:56,050
如果我们想浏览和替换这些东西, 我的作品集, 我的名字, 这有点像一个网站的模板

50
00:03:56,050 --> 00:04:00,520
这有点像网站模板的骨架结构, 如果你愿意的话 

51
00:04:00,520 --> 00:04:05,830
所以如果我继续修改并刷新文件, 你会看到我的名字实际上出现在那里 

52
00:04:05,830 --> 00:04:10,870
所以如果你之前对此一无所知, 这是一个非常有用的工具, 可以用来制作一个基本的网站,

53
00:04:10,870 --> 00:04:17,899
还有一些方法可以让它看起来更好, 这就是CSS

54
00:04:17,920 --> 00:04:20,350
所以, 它实际上在这里提到了 

55
00:04:20,350 --> 00:04:25,630
请记住, 您需要创建一个样式CSS文件来为您的网站添加样式, 并使其看起来具有视觉吸引力

56
00:04:25,630 --> 00:04:31,990
所以这是你可以继续探索的东西, 并要求它为你生成样式 

57
00:04:32,440 --> 00:04:43,780
现在这是一个非常基本的东西, 所以我们将实际上尝试向前迈出一步, 并尝试让它使用一个称为React的框架来构建网站

58
00:04:43,780 --> 00:04:45,970
那我怎么知道 

59
00:04:46,870 --> 00:04:52,630
使用React框架创建Web应用程序 

60
00:04:53,510 --> 00:04:59,210
让我们看看它告诉我们什么, 因为这些问题实际上在网上有很好的记录 

61
00:04:59,330 --> 00:05:03,360
这是一个程序员可以使用的框架 

62
00:05:03,380 --> 00:05:06,220
它本质上是程序员在其他人的代码之上构建 

63
00:05:06,230 --> 00:05:14,870
所以Facebook实际上创建了这个叫做React的框架, 人们用它来帮助创建他们的Web应用程序

64
00:05:14,870 --> 00:05:19,220
这里说的是使用React框架创建Web Web应用程序涉及几个步骤 

65
00:05:19,790 --> 00:05:22,640
它基本上告诉我们如何做到这一点 

66
00:05:22,640 --> 00:05:26,720
我们需要安装Node  js, node包管理器 

67
00:05:26,720 --> 00:05:29,810
这基本上是JavaScript的运行时 

68
00:05:30,140 --> 00:05:38,780
然后这是一种安装包的方法, 或者基本上是一种你需要安装到你的项目中的组件或模块

69
00:05:38,780 --> 00:05:44,860
所以网上有很多关于你如何去做的说明, 或者你甚至可以问你如何去做

70
00:05:44,870 --> 00:05:50,390
幸运的是, 我已经安装了这些东西, 所以我不打算继续这样做

71
00:05:51,050 --> 00:05:56,240
那么, 让我们来问一下如何创建一个React应用程序？

72
00:05:57,390 --> 00:06:02,490
因此, 要创建一个新的React应用程序, 您可以使用名为Create React App的命令行工具,

73
00:06:02,490 --> 00:06:05,460
这是启动新的单页面React应用程序的官方方式

74
00:06:05,460 --> 00:06:07,530
实际上, 这正是我要找的 

75
00:06:07,530 --> 00:06:13,290
所以它实际上能够根据它合成的互联网数据告诉我这个 

76
00:06:13,290 --> 00:06:19,770
这里它实际上给了我确切的答案, 或者说我需要遵循的步骤

77
00:06:20,500 --> 00:06:25,540
现在, 有一件事值得注意的是, 也许在前面的问题中, 我问你如何为我写一个简单的网站,

78
00:06:25,540 --> 00:06:31,320
基本上它不知道我们的规格是什么, 对吧？

79
00:06:31,330 --> 00:06:39,580
就像聊天不是那种全能的存在, 它将能够成为一个无限的创造力池, 就像你作为一个人一样

80
00:06:39,670 --> 00:06:46,160
这种独特的人与技术的互动是可以非常富有成效的 

81
00:06:46,180 --> 00:06:53,380
它不像一个魔法咒语, 我们可以突然只是使用, 它会是治愈一切, 对不对？

82
00:06:53,380 --> 00:06:58,870
所以确实需要一点领域知识来知道该问什么 

83
00:06:58,870 --> 00:07:03,190
但是一旦你知道很多门是开着的, 可以这么说 

84
00:07:03,870 --> 00:07:10,140
所以一旦你安装了这个, 在你有了节点包管理器之后, 我们就可以运行这个命令了

85
00:07:10,590 --> 00:07:15,030
有趣的是, 这些代码片段也被标记为Lua, 因为这是一种脚本语言,

86
00:07:15,030 --> 00:07:17,940
在这里肯定没有使用

87
00:07:18,510 --> 00:07:20,330
恰恰相反 

88
00:07:20,340 --> 00:07:27,030
我们实际上要运行这个命令NPC的Create React应用程序, 我的应用程序在命令行中 

89
00:07:27,030 --> 00:07:27,960
所以 

90
00:07:29,050 --> 00:07:36,690
如果你继续运行它, 它会在一个名为My App的应用程序上运行这个命令, 它还会为我们创建一个目录

91
00:07:36,700 --> 00:07:39,070
正如我们在这里看到的, 已经创建了一个目录 

92
00:07:40,140 --> 00:07:43,650
我们可以看到里面已经创建了一个文件 

93
00:07:43,950 --> 00:07:50,580
这里显示的进度条也代表了我们所说的正在生成的应用程序 

94
00:07:50,850 --> 00:07:54,530
是的, 所以我们要给它一点时间来运行 

95
00:07:54,540 --> 00:08:01,670
但与此同时, 我们可以继续看看它为我们规定了什么 

96
00:08:01,680 --> 00:08:07,110
所以我们可以看到, 一旦你生成了这个, 我们要改变目录 

97
00:08:07,110 --> 00:08:08,500
这就是裁谈会的含义 

98
00:08:08,520 --> 00:08:09,870
所以这里很有意思 

99
00:08:09,870 --> 00:08:14,580
它实际上有正确的代码片段细节排序在这里 

100
00:08:14,580 --> 00:08:15,780
所以它实际上是bash 

101
00:08:16,020 --> 00:08:21,720
我没有使用Bash, 因为我在Windows上, 但我在这里使用PowerShell窗口 

102
00:08:21,720 --> 00:08:25,170
你可以看到PS, 它本质上是Windows中命令行的等价物 

103
00:08:25,560 --> 00:08:32,490
基本上我们要把目录改成这个目录, 这是计算机科学对文件的另一种说法

104
00:08:32,490 --> 00:08:37,980
因此, 一旦我们在该目录中, 我们基本上可以运行这个NPM重新开始 

105
00:08:37,980 --> 00:08:48,210
这段代码有点脱离SQL或者说标准查询语言, 是一种方式, 一种我们可以用来操作数据库或者与数据库交互的语言

106
00:08:48,210 --> 00:08:51,180
很明显这里不该是这样的 

107
00:08:51,180 --> 00:08:59,580
所以有时候你必须有点超越聊天, 从某种意义上说, 你必须知道它想说什么

108
00:08:59,580 --> 00:09:04,380
因为这里肯定不是SQL命令, 但我们还是要继续运行这些命令