NgSysV.A 年轻人人工智能时代系统开发指南

此帖子系列已在 NgateSystems.com 建立索引。您还可以在那里找到超级有用的关键字搜索工具。

最后评论：24 年 11 月

一、简介

您好，欢迎光临！我希望你能在这里找到你想要的东西。

这篇文章适合完全的初学者。它涵盖了当我第一次开始修改网站和数据库时我想了解的一切。也许您还在上学，或者年龄较大并考虑改变职业，或者可能已经退休（尽管内心仍然年轻）并且只是好奇。重要的是你有一颗年轻的头脑——对新想法持开放态度并能迅速抓住机会。你需要这个，因为你需要吸收的新想法的数量几乎是巨大的。现代信息系统实践是工具和技术的完美丛林。更糟糕的是，这片丛林正在以令人眼花缭乱的速度发展。你究竟应该从哪里开始？

本系列旨在通过提出一条穿过这片丛林的特定路线来最大程度地减少您的困难 - 这条路线不仅可以提供快速且有用的结果，而且还可以培养技能和概念，使您能够随后走自己自己的路。

令人惊讶的是（我一直对此感到惊讶），我在这里描述的大多数工具和技术都是免费。您唯一需要投资的是您的个人时间。不幸的是，这并不是一个无关紧要的因素，但正如他们所说，“没有痛苦，就没有收获！

然而，作为进一步的鼓励，我还要说，您现在有了一个巨大的免费盟友 - 通用聊天机器人。该系列包括一些冗长的帖子，其中充满了乏味的说明。然而，如果我尝试按照您的要求详细描述这些步骤，那么它们会更长。我现在可以确信，无论您在哪里觉得我把您抛在了后面，您都可以调用机器人让您回到正轨。在 2022 年 chatGPT 和其他机器人发布之前，我不会想到这会成为可能。现在，一切都变了。请参阅帖子 4.1 了解您的数字导师的介绍。目前，我建议您使用 chatGPT40 的免费套餐。

总而言之，这里是本系列的总体目标的陈述以及它建议遵循的路线的概述。

2. 目标

假设您的目标是开发一种软​​件，将一些信息读入计算机，以某种有目的的方式处理它，然后将结果显示在屏幕上。哦，此外，您希望世界上任何地方的任何人都能够使用您的作品。这肯定很容易......

在 IT 世界中，有多种方法可以完成这个简单的任务。但根据我的经验，最简单的选择是使用 Chrome 或 Safari 等互联网浏览器作为应用程序的“启动板”。你可能会说，这可能看起来很奇怪。不是每个人都在手机上使用独立的“应用程序”吗？

原因之一：您希望您的应用程序可供通过每一种可以想象的设备工作的用户使用 - 笔记本电脑、平板电脑、台式电脑等。浏览器通过使您的应用程序与差异隔离来提供一种实现此目的的绝佳方法在硬件和操作系统中。它们还为您提供了一个复杂且实用的环境来支持您的应用程序的逻辑。另一方面，应用程序与特定的硬件平台相关联，并且陷入复杂性的泥潭。

还有另一个原因：您希望世界任何地方的用户都可以使用应用程序的信息。浏览器已经定位于互联网，其全部目的就是为了促进信息共享。这就是为什么亚马逊和 Facebook 等主要运营商非常乐意使用网络浏览器作为其系统平台。

因此，我建议的路线通向现在通常所说的“网络应用程序”，这是一个只需在网络浏览器中输入网络应用程序的“地址”即可激活的软件。该网络应用程序将能够维护持久数据存储（“数据库”），并通过“登录”功能为该数据提供安全性。基于浏览器的聊天机器人提供了使用网络应用程序技术的绝佳示例。

以下是构建现代网络应用程序所需掌握的工具和技术的概述：

1. HTML - 超文本标记语言 - 这是用于告诉浏览器如何在计算机屏幕上格式化 Web 应用程序输出的“语言”
2. IDE - 交互式开发环境 - 这是用于创建代码的编辑工具 - Microsoft 的 VSCode 是我将在此处使用的 IDE。
3. 编程语言 - 这会将您的应用程序的“概念”转化为其数字实现。我将在本课程中使用的语言是 JavaScript
4. 浏览器工具 - 这些工具使您能够在 Web 应用程序运行时检查和调试它。我将在 Google 的 Chrome 浏览器中使用该工具集。
5. 开发框架 - 最好将其理解为一个工具集，它使您能够有效地将 JavaScript 应用于 Web 应用程序开发的特定要求。我将使用的框架称为 SvelteKit。
6. A 服务器 - 这是将您的 web 应用程序代码传递给您的用户的远程主机。它还将为数据提供存储，并可以运行其代码的选定元素。我将在 App Engine 服务器上使用 Google 的 Firebase。其他平台也可用，但 Google Cloud 提供特别慷慨的“免费套餐”。

好的，系好安全带，开始吧……既然您正在网上阅读这篇文章，我假设您已经相当习惯了网络世界。对于本课程，您需要使用一台台式计算机，为简单起见，我假设这将是一台 Microsoft Windows 笔记本电脑。我确信，如果情况并非如此，您将能够适当地调整我的说明。

2.1 HTML（超文本标记语言）

您正在开发在网络浏览器中显示文本的软件。您希望此文本以各种优雅的位置、颜色、大小等配置显示。Web 浏览器使您能够通过用“标记”代码包围文本内容来指定这些配置，这些“标记”代码确定内容应如何显示。这种简单的安排带来了令人惊讶的强大结果。

您可以通过在 Microsoft 记事本等简单编辑器中将说明输入文本文件来创建示例。尝试这个简单的练习：

在您最喜欢的文本编辑器（例如 Windows 记事本实用程序）中键入以下行，然后将其保存为具有 HTML 扩展名的文件（例如“my-first-app.html”）：

<h1>Hello there</h1>

当您通过“双击”Windows 资源管理器中的条目来“打开”该文件时，Windows 应该通过打开您的默认浏览器并显示一个显示“Hello there”字样的屏幕来进行响应。恭喜，您已经编写了第一个 Web 应用程序（尽管除了您之外没有人可以看到，但我们稍后会修复该问题）。

如果事情没有按预期进行，现在是请求 ChatGPT 帮助您解决问题的好时机。上述过程依赖于设备配置。告诉 ChatGPT 您不明白的内容或在您的特定设备上无法正常工作的内容，它会准确地告诉您需要做什么来解决问题。

;和

上例中的标记“标签”是 HTML 指令，告诉浏览器它们包含的文本将显示为标题。 Google 获取有关

的信息您会发现大量有关学习 HTML 的教程和建议。 Mozilla.org 的网络入门是一个很好的起点。另一个有用的网站是 W3Schools HTML 教程。 W3schools 站点是交互式的，使您能够试验 HTML 语法。

重要的是，在这些文档中，您将了解到许多限定符可用于修改标签的操作。例如，

标签可以通过 a> 进行限定

2.2 IDE（交互式开发环境）

您可能只是感觉到编写 Web 应用程序需要您创建一些相当大的文件。 Web 应用程序代码很冗长，包含数千行的文件并不罕见。

您可以，如上面的示例所示，只需将这些行键入基本文本编辑器，但这将是一个坏主意。浏览器是无情的野兽，代码中的任何拼写错误都将导致您的意图完全失败。理想情况下，您需要一个专门的文本编辑器，它可以在您输入代码时对其进行监控，以帮助您控制其结构的方式格式化和突出显示它，甚至可能为您编写代码。

IDE 旨在满足这些需求 - 以及更多需求。

有很多 IDE 可供使用，但我推荐 Microsoft 的 VSCode。它可以免费安装并且使用非常广泛。它再次代表了一个陡峭的学习曲线，但 Microsoft 提供了出色的在线文档。

在免费的 VSCode 包中，您还会发现大量自动化帮助 - 用于格式化代码并提供简单的自动完成机制（例如，JavaScript 指令和变量名称）的工具。检查机制将发现语法错误，并突出显示未定义的变量等。

IDE 提供了许多其他有用的服务。到目前为止，您的应用程序由单个 .html 文件表示。实际上，现代计算机系统可能包含数百个文件 - 我们将完整的程序集称为“项目”。管理大型项目会带来许多具有挑战性的任务，而这些现在都成为 IDE 的责任。

例如，假设你想改变>

再次，假设您想要放弃最近对文件所做的更改，并将其重置为编辑历史记录中的某个先前状态。 VSCode 维护本地文件历史记录，您可以使用它来清理混乱。此外，VSCode 与名为 Github 的版本管理系统无缝链接，为您的项目创建安全的基于外部 Web 的“检查点”副本。这样，即使您将笔记本电脑落在公交车上，您的来源及其历史记录也是安全的。

最后，VSCode 提供了使用直接链接到设备操作系统的终端会话运行项目的平台。您可能会在 VSCode 中花费大量时间！

这可能是在您的设备上安装 VSCode 并尝试 Microsoft 的 Visual Studio Code 入门教程的好时机

2.3 JavaScript

JavaScript 对于初学者来说是一门很棒的语言。它很容易学习并且在许多情况下都能很好地工作。它的自然家园是浏览器，它可以在其中读取和写入由 Web 应用程序的 HTML 部分定义的数据结构。简单来说，它可以直接在屏幕上读写。然而，它还获得了从浏览器内部以及在服务器上远程运行时读取和写入基于远程服务器的数据存储的能力。简而言之，它变得如此有用，以至于它可能是您需要学习的唯一语言。

让我们开始吧。 JavaScript 是一种“解释型”语言。这意味着不需要特殊的预处理来准备执行代码。您可以将其直接启动到“运行时引擎”中并立即查看结果。您的简陋 Web 浏览器就是 JavaScript 运行时引擎的一个示例。让我们看看如何通过添加一些 Javascript 来使之前创建的 my-first-app.html 文件表现得“智能”。

JavaScript 从 HTML 语法的严格性质中获得了直接读写屏幕的能力。这使得浏览器能够构建屏幕布局的“模型”——称为“域对象模型”（或简称“DOM”）的树结构。在 DOM 中，树的各个分支和叶子都可以通过 JavaScript 单独寻址。

这是一个例子。取出上面介绍的 my-first-app.html 文件并进行如下编辑：

<h1>



</h1><p>此代码使代码的输出取决于一天中的时间。如果您在午餐时间之前（具体来说，在任意一天的中午 12 点之前）重新运行该文件，输出将显示为蓝色。午餐后，输出将显示为红色。恭喜，您已经编写了第一个“智能”网络应用程序。 </p><p>HTML <script> 之间的线条和 </脚本>标签包含您的第一段 JavaScript 代码。以 hourOfDay = 开头的行创建一个“变量”，其中包含运行时间的“日期”“对象”。 Javascript 中的“对象”是一个复杂的概念，您将来会喜欢了解它。然而，现在您需要知道的是，代码运行时创建的“Date”对象的实例将在其中的某个位置包含一天中时间的毫秒精确表示。此外，该对象还包含一个 .getHours“方法”，该方法从毫秒数据中提取代表“一天中的小时”的 0 到 23 之间的整数。后续代码行中的 if 和 else Javascript 关键字提供了对它们引用的值进行适当操作的逻辑。</script></p>

<p>如果你觉得要等到午餐时间才测试变色逻辑不方便，可以尝试修改代码，在分钟为偶数时切换颜色。获取一天中的分钟的“方法”是 getMinutes()。用于测试数字 num 是偶数还是奇数的 JavaScript 是 if (num % 2 === 0)。看看是否可以更改 my-first-app.html 中的代码，以在一分钟后刷新页面时更改文本颜色。</p>

<p>您可能已经注意到 </p><h1>文件原始版本第一行中的标记已获取“id=”子句。这已经用唯一的字符串“标记”了标签（在本例中为“test”）。聪明的地方是 document.getElementById('test') 指令，它使 JavaScript 能够改变 'test' <h1> 的“样式”。标签。 

</h1>
</h1><p><em>在你对花费一生时间摆弄 document.getElementById('test') 指令的前景感到害怕之前，让我向你保证这不是必要的。软件工程最新发展的整个过程旨在使您能够通过<b>有意义的</b>语言模式来控制屏幕布局。这些极大地简化了任务。在本系列文章中，如前所述，您将使用名为 SvelteKit 的“代码框架”来创建您的系统。您将在帖子 2.1 中看到这样的示例。</em></p>

<p>现在，如何才能熟练掌握 JavaScript？这里你需要一本好书，我推荐的是 Marijn Haverbeke 的《Eloquent JavaScript》。 </p>

<p>如果需要，请在线阅读本文（您可以在 https://JavaScript .net/ 找到最新版本），但是没有什么比一本写得好的、有可以在上面涂鸦的物理页面的书更方便的了。二手（和早期版本）在这个阶段就很好，并且可能是您在一段时间内需要进行的最佳（也是唯一）初始投资。哈弗贝克在解释上面介绍的“对象”、“方法”、“功能”和“风格”概念方面将比我希望实现的任何目标做得更好。 </p><p>但是，如果您仍然决心在线学习，我认为 Mozilla 的 JavaScript 基础教程非常好。</p>

<p>开始考虑为您的工作设计一个测试项目也是一个好主意。本系列的后续文章将提供一些人为的示例，但只有当您可以根据个人情况重新解释它们时，事情才有意义。现在开始考虑该项目需要什么样的数据。这将如何表示？用户将如何与其交互？</p>

<h4>
  
  
  2.4 浏览器工具
</h4>

<p>您的编码尝试第一次就可以正常工作的可能性很小。  也许屏幕布局并不完全符合您的预期，或者 Web 应用程序的逻辑可能存在问题。有时浏览器会显示错误消息，但有时它只会坐着生闷气。你如何解决这个问题？</p>

<p>好消息是，所有主流浏览器都有内置的“检查工具”，使您能够调查这些问题。 “检查器”为您提供有关浏览器对屏幕布局定义的解释的内部信息，并允许您监视客户端 JavaScript 指令的执行。对于 Google Chrome，只需右键单击浏览器屏幕并从显示的弹出窗口中选择“检查”即可访问此检查工具。 </p>

<p>坏消息是，初次接触时，该检查工具会显示出其菜单栏和可调整大小窗口的令人震惊的复杂性。但请接受我的保证，一旦您掌握了它的窍门，您就会发现这个工具使用起来很有趣，并且是跟踪和解决问题的宝贵资源。您可以在 Google devtools 找到完整文档。</p>

<p>关于布局问题，检查器以图形方式演示浏览器如何应用确定显示元素位置的各种“边距”、“填充”和“宽度”参数。除此之外，它还提供了一个工具来尝试适当的调整。</p>

<p>关于逻辑问题，检查器使您能够在 JavaScript 源代码中设置“断点”。完成这些后，刷新 Web 应用程序将在第一个断点处停止执行，并让您查看该点处程序变量的值。然后，您可以选择逐行执行后续代码或跳到下一个断点</p>

<p>如果你的程序“崩溃”，检查员会告诉你出了什么问题。</p><p>在早期，找出导致逻辑问题的原因的通常方法是添加“日志记录”指令。这些将跟踪程序的“控制流”并在检查点显示程序变量值。正如您可能想象的那样，这是一个繁琐的过程。现在，当我在浏览器中“检查”一个网络应用程序时，就好像我打开了一块瑞士手表的后盖，发现它所有复杂的东西都在等待检查。调试现在变得如此令人愉快，我几乎期待着我的代码中出现错误！</p>

<h4>
  
  
  2.5 斯维特套件
</h4>

<p>上面第 2.3 节中介绍的 Javascript 示例使用了一个丑陋的 document.getElementById("idName") 方法来访问 Web 应用程序的 DOM 并修改元素“idName”的属性。像 Sveltekit 这样的框架提供了更加友好和高效的 DOM 界面。它们使您能够为常见任务编写“有意义”的代码，例如显示和隐藏弹出窗口、显示列表和创建浏览器选项卡历史记录。例如，一条 Svelte 语句表示“if popUpVisible displayPopup()”（尽管语法稍微严格一些），当 displayPopup 变量更改为 true 时，将使弹出窗口可见。</p>

<p>在初始开发过程中，该框架通过您在 IDE 终端会话中启动的“本地服务器”运行。这具有神奇的效果，可以保持浏览器窗口在每次更改底层 Web 应用程序代码时自动更新和刷新。 </p>

<p>该框架还允许您指定 webapp 代码的运行位置。例如，根据具体情况，读取和写入远程存储的语句最好在用户浏览器中本地运行或在服务器上远程运行。您目前可能对此不感兴趣，但一旦您编写认真的代码，这就会变得很重要。在浏览器上运行的代码很容易调试，但是，当您必须应对效率和安全问题时，您可能会很高兴有机会运行“服务器端”。 Sveltekit 可让您以特别优雅的方式交付此类安排。</p>

<p>当您准备好实现代码时，框架的最后一步是“构建”应用程序的“打包”版本。这将执行一系列步骤，将您的应用程序编译、捆绑和优化为准备部署的“包”。这可确保部署的 Web 应用程序尽可能小、快速且高效。</p>

<p>目前最流行的框架可能是Meta的React系统。它创建于 2010 年左右，旨在支持 Facebook 的发展。这个想法非常有效，以至于 Vue、Angular 和 Next.js 等竞争对手很快就出现了。 Sveltekit 是最新推出的产品之一，我在这里使用它是因为它特别容易使用。您可能有兴趣注意到它在 Stack Overflow 的 2024 年开发者调查中获得了良好的支持率</p><p><em>顺便说一句，你可能会注意到我有时会谈论 Svelteki，然后似乎反常地切换到其他称为 Svelte 的东西。 Svelte 是 svelte.dev 工程师创建的“语言”，用于“扩展”Javascript，使编写高效的 Web 应用程序变得更加容易。 Sveltekit 是创建 Svelte Web 应用程序运行环境的框架。</em></p>

<h4>
  
  
  2.6 Firebase 和应用程序引擎
</h4>

<p>完成 Web 应用程序项目开发阶段所需的一切都可以在一台适度指定的台式计算机上交付。但是，当您想要将项目发布到预期的世界时，您将需要专业的“后端”Web 服务器的服务。这将：</p>

• 提供一个“端点”（即网络上的 URL），可以从该端点部署项目的可执行文件以在浏览器中本地执行。
• 为您的项目数据提供基于网络的中央存储。最有可能的是，这将保存在结构化数据库中。
• 提供快速、安全的环境来运行敏感的应用程序元素。

在本课程中，您将使用：

• Google 的“Firebase”应用程序开发环境，可访问“Firestore”工具，使您能够使用简单的结构化数据库
• Google 的“App Engine”环境，用于部署 Web 应用程序代码并托管 SvelteKit 项目的“服务器端”元素的执行。

由于您将从一开始就使用 Firestore，因此您需要首先创建一个 Firebase 帐户。

过去，您可能会寻求“互联网服务提供商”（例如 GoDaddy 或 HostPapa）来提供您的云服务。虽然这些服务仍然可以发挥作用，并且肯定会通过其服务台为您提供出色的个性化支持，但云平台为您当前的目的提供了更好的全面包。

3. 现在继续阅读

本课程现在分两个主要阶段进行。第一个旨在让您熟悉 HTML、Javascript、Firebase 和 Firestore 的基础知识。如果您对这款游戏完全陌生，那么这里有很多东西需要学习，并且很可能会感到困惑。预计要花一些时间在这上面。花点时间，多用您的 chatBot 导师。

完成此步骤后，第二阶段将向您介绍 Sveltekit Web 应用程序设计的一些更高级的元素。如果您成功完成此任务，您将了解开发有用的网络应用程序所需的大部分内容。

现在，我们出发吧。第一步是在本地计算机上安装 SvelteKit 并让自己习惯 Web 应用程序开发技术。请参阅帖子 2.1 了解说明。

以上是NgSysV.A 年轻人人工智能时代系统开发指南的详细内容。更多信息请关注PHP中文网其他相关文章！