此帖子系列已在 NgateSystems.com 建立索引。您還可以在那里找到超級有用的關鍵字搜索工具。

最后評論：24 年 11 月

一、簡介

您好，歡迎光臨！我希望你能在這里找到你想要的東西。

這篇文章適合完全的初學者。它涵蓋了當我第一次開始修改網站和數據庫時我想了解的一切。也許您還在上學，或者年齡較大并考慮改變職業(yè)，或者可能已經退休（盡管內心仍然年輕）并且只是好奇。重要的是你有一顆年輕的頭腦——對新想法持開放態(tài)度并能迅速抓住機會。你需要這個，因為你需要吸收的新想法的數量幾乎是巨大的?，F代信息系統實踐是工具和技術的完美叢林。更糟糕的是，這片叢林正在以令人眼花繚亂的速度發(fā)展。你究竟應該從哪里開始？

本系列旨在通過提出一條穿過這片叢林的特定路線來最大程度地減少您的困難 - 這條路線不僅可以提供快速且有用的結果，而且還可以培養(yǎng)技能和概念，使您能夠隨后走自己自己的路。

令人驚訝的是（我一直對此感到驚訝），我在這里描述的大多數工具和技術都是免費。您唯一需要投資的是您的個人時間。不幸的是，這并不是一個無關緊要的因素，但正如他們所說，“沒有痛苦，就沒有收獲！

然而，作為進一步的鼓勵，我還要說，您現在有了一個巨大的免費盟友 - 通用聊天機器人。該系列包括一些冗長的帖子，其中充滿了乏味的說明。然而，如果我嘗試按照您的要求詳細描述這些步驟，那么它們會更長。我現在可以確信，無論您在哪里覺得我把您拋在了后面，您都可以調用機器人讓您回到正軌。在 2022 年 chatGPT 和其他機器人發(fā)布之前，我不會想到這會成為可能?，F在，一切都變了。請參閱帖子 4.1 了解您的數字導師的介紹。目前，我建議您使用 chatGPT40 的免費套餐。

總而言之，這里是本系列的總體目標的陳述以及它建議遵循的路線的概述。

2. 目標

假設您的目標是開發(fā)一種軟??件，將一些信息讀入計算機，以某種有目的的方式處理它，然后將結果顯示在屏幕上。哦，此外，您希望世界上任何地方的任何人都能夠使用您的作品。這肯定很容易......

在 IT 世界中，有多種方法可以完成這個簡單的任務。但根據我的經驗，最簡單的選擇是使用 Chrome 或 Safari 等互聯網瀏覽器作為應用程序的“啟動板”。你可能會說，這可能看起來很奇怪。不是每個人都在手機上使用獨立的“應用程序”嗎？

原因之一：您希望您的應用程序可供通過每一種可以想象的設備工作的用戶使用 - 筆記本電腦、平板電腦、臺式電腦等。瀏覽器通過使您的應用程序與差異隔離來提供一種實現此目的的絕佳方法在硬件和操作系統中。它們還為您提供了一個復雜且實用的環(huán)境來支持您的應用程序的邏輯。另一方面，應用程序與特定的硬件平臺相關聯，并且陷入復雜性的泥潭。

還有另一個原因：您希望世界任何地方的用戶都可以使用應用程序的信息。瀏覽器已經定位于互聯網，其全部目的就是為了促進信息共享。這就是為什么亞馬遜和 Facebook 等主要運營商非常樂意使用網絡瀏覽器作為其系統平臺。

因此，我建議的路線通向現在通常所說的“網絡應用程序”，這是一個只需在網絡瀏覽器中輸入網絡應用程序的“地址”即可激活的軟件。該網絡應用程序將能夠維護持久數據存儲（“數據庫”），并通過“登錄”功能為該數據提供安全性。基于瀏覽器的聊天機器人提供了使用網絡應用程序技術的絕佳示例。

以下是構建現代網絡應用程序所需掌握的工具和技術的概述：

1. HTML - 超文本標記語言 - 這是用于告訴瀏覽器如何在計算機屏幕上格式化 Web 應用程序輸出的“語言”
2. IDE - 交互式開發(fā)環(huán)境 - 這是用于創(chuàng)建代碼的編輯工具 - Microsoft 的 VSCode 是我將在此處使用的 IDE。
3. 編程語言 - 這會將您的應用程序的“概念”轉化為其數字實現。我將在本課程中使用的語言是 JavaScript
4. 瀏覽器工具 - 這些工具使您能夠在 Web 應用程序運行時檢查和調試它。我將在 Google 的 Chrome 瀏覽器中使用該工具集。
5. 開發(fā)框架 - 最好將其理解為一個工具集，它使您能夠有效地將 JavaScript 應用于 Web 應用程序開發(fā)的特定要求。我將使用的框架稱為 SvelteKit。
6. A 服務器 - 這是將您的 web 應用程序代碼傳遞給您的用戶的遠程主機。它還將為數據提供存儲，并可以運行其代碼的選定元素。我將在 App Engine 服務器上使用 Google 的 Firebase。其他平臺也可用，但 Google Cloud 提供特別慷慨的“免費套餐”。

好的，系好安全帶，開始吧……既然您正在網上閱讀這篇文章，我假設您已經相當習慣了網絡世界。對于本課程，您需要使用一臺臺式計算機，為簡單起見，我假設這將是一臺 Microsoft Windows 筆記本電腦。我確信，如果情況并非如此，您將能夠適當地調整我的說明。

2.1 HTML（超文本標記語言）

您正在開發(fā)在網絡瀏覽器中顯示文本的軟件。您希望此文本以各種優(yōu)雅的位置、顏色、大小等配置顯示。Web 瀏覽器使您能夠通過用“標記”代碼包圍文本內容來指定這些配置，這些“標記”代碼確定內容應如何顯示。這種簡單的安排帶來了令人驚訝的強大結果。

您可以通過在 Microsoft 記事本等簡單編輯器中將說明輸入文本文件來創(chuàng)建示例。嘗試這個簡單的練習：

在您最喜歡的文本編輯器（例如 Windows 記事本實用程序）中鍵入以下行，然后將其保存為具有 HTML 擴展名的文件（例如“my-first-app.html”）：

<h1>Hello there</h1>

當您通過“雙擊”Windows 資源管理器中的條目來“打開”該文件時，Windows 應該通過打開您的默認瀏覽器并顯示一個顯示“Hello there”字樣的屏幕來進行響應。恭喜，您已經編寫了第一個 Web 應用程序（盡管除了您之外沒有人可以看到，但我們稍后會修復該問題）。

如果事情沒有按預期進行，現在是請求 ChatGPT 幫助您解決問題的好時機。上述過程依賴于設備配置。告訴 ChatGPT 您不明白的內容或在您的特定設備上無法正常工作的內容，它會準確地告訴您需要做什么來解決問題。

;和

上例中的標記“標簽”是 HTML 指令，告訴瀏覽器它們包含的文本將顯示為標題。 Google 獲取有關

的信息您會發(fā)現大量有關學習 HTML 的教程和建議。 Mozilla.org 的網絡入門是一個很好的起點。另一個有用的網站是 W3Schools HTML 教程。 W3schools 站點是交互式的，使您能夠試驗 HTML 語法。

重要的是，在這些文檔中，您將了解到許多限定符可用于修改標簽的操作。例如，

標簽可以通過 a> 進行限定

2.2 IDE（交互式開發(fā)環(huán)境）

您可能只是感覺到編寫 Web 應用程序需要您創(chuàng)建一些相當大的文件。 Web 應用程序代碼很冗長，包含數千行的文件并不罕見。

您可以，如上面的示例所示，只需將這些行鍵入基本文本編輯器，但這將是一個壞主意。瀏覽器是無情的野獸，代碼中的任何拼寫錯誤都將導致您的意圖完全失敗。理想情況下，您需要一個專門的文本編輯器，它可以在您輸入代碼時對其進行監(jiān)控，以幫助您控制其結構的方式格式化和突出顯示它，甚至可能為您編寫代碼。

IDE 旨在滿足這些需求 - 以及更多需求。

有很多 IDE 可供使用，但我推薦 Microsoft 的 VSCode。它可以免費安裝并且使用非常廣泛。它再次代表了一個陡峭的學習曲線，但 Microsoft 提供了出色的在線文檔。

在免費的 VSCode 包中，您還會發(fā)現大量自動化幫助 - 用于格式化代碼并提供簡單的自動完成機制（例如，JavaScript 指令和變量名稱）的工具。檢查機制將發(fā)現語法錯誤，并突出顯示未定義的變量等。

IDE 提供了許多其他有用的服務。到目前為止，您的應用程序由單個 .html 文件表示。實際上，現代計算機系統可能包含數百個文件 - 我們將完整的程序集稱為“項目”。管理大型項目會帶來許多具有挑戰(zhàn)性的任務，而這些現在都成為 IDE 的責任。

例如，假設你想改變>

再次，假設您想要放棄最近對文件所做的更改，并將其重置為編輯歷史記錄中的某個先前狀態(tài)。 VSCode 維護本地文件歷史記錄，您可以使用它來清理混亂。此外，VSCode 與名為 Github 的版本管理系統無縫鏈接，為您的項目創(chuàng)建安全的基于外部 Web 的“檢查點”副本。這樣，即使您將筆記本電腦落在公交車上，您的來源及其歷史記錄也是安全的。

最后，VSCode 提供了使用直接鏈接到設備操作系統的終端會話運行項目的平臺。您可能會在 VSCode 中花費大量時間！

這可能是在您的設備上安裝 VSCode 并嘗試 Microsoft 的 Visual Studio Code 入門教程的好時機

2.3 JavaScript

JavaScript 對于初學者來說是一門很棒的語言。它很容易學習并且在許多情況下都能很好地工作。它的自然家園是瀏覽器，它可以在其中讀取和寫入由 Web 應用程序的 HTML 部分定義的數據結構。簡單來說，它可以直接在屏幕上讀寫。然而，它還獲得了從瀏覽器內部以及在服務器上遠程運行時讀取和寫入基于遠程服務器的數據存儲的能力。簡而言之，它變得如此有用，以至于它可能是您需要學習的唯一語言。

讓我們開始吧。 JavaScript 是一種“解釋型”語言。這意味著不需要特殊的預處理來準備執(zhí)行代碼。您可以將其直接啟動到“運行時引擎”中并立即查看結果。您的簡陋 Web 瀏覽器就是 JavaScript 運行時引擎的一個示例。讓我們看看如何通過添加一些 Javascript 來使之前創(chuàng)建的 my-first-app.html 文件表現得“智能”。

JavaScript 從 HTML 語法的嚴格性質中獲得了直接讀寫屏幕的能力。這使得瀏覽器能夠構建屏幕布局的“模型”——稱為“域對象模型”（或簡稱“DOM”）的樹結構。在 DOM 中，樹的各個分支和葉子都可以通過 JavaScript 單獨尋址。

這是一個例子。取出上面介紹的 my-first-app.html 文件并進行如下編輯：

<h1>



</h1><p>此代碼使代碼的輸出取決于一天中的時間。如果您在午餐時間之前（具體來說，在任意一天的中午 12 點之前）重新運行該文件，輸出將顯示為藍色。午餐后，輸出將顯示為紅色。恭喜，您已經編寫了第一個“智能”網絡應用程序。 </p><p>HTML <script> 之間的線條和 </腳本>標簽包含您的第一段 JavaScript 代碼。以 hourOfDay = 開頭的行創(chuàng)建一個“變量”，其中包含運行時間的“日期”“對象”。 Javascript 中的“對象”是一個復雜的概念，您將來會喜歡了解它。然而，現在您需要知道的是，代碼運行時創(chuàng)建的“Date”對象的實例將在其中的某個位置包含一天中時間的毫秒精確表示。此外，該對象還包含一個 .getHours“方法”，該方法從毫秒數據中提取代表“一天中的小時”的 0 到 23 之間的整數。后續(xù)代碼行中的 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') 指令的前景感到害怕之前，讓我向你保證這不是必要的。軟件工程最新發(fā)展的整個過程旨在使您能夠通過<b>有意義的</b>語言模式來控制屏幕布局。這些極大地簡化了任務。在本系列文章中，如前所述，您將使用名為 SvelteKit 的“代碼框架”來創(chuàng)建您的系統。您將在帖子 2.1 中看到這樣的示例。</em></p>

<p>現在，如何才能熟練掌握 JavaScript？這里你需要一本好書，我推薦的是 Marijn Haverbeke 的《Eloquent JavaScript》。 </p>

<p>如果需要，請在線閱讀本文（您可以在 https://JavaScript .net/ 找到最新版本），但是沒有什么比一本寫得好的、有可以在上面涂鴉的物理頁面的書更方便的了。二手（和早期版本）在這個階段就很好，并且可能是您在一段時間內需要進行的最佳（也是唯一）初始投資。哈弗貝克在解釋上面介紹的“對象”、“方法”、“功能”和“風格”概念方面將比我希望實現的任何目標做得更好。 </p><p>但是，如果您仍然決心在線學習，我認為 Mozilla 的 JavaScript 基礎教程非常好。</p>

<p>開始考慮為您的工作設計一個測試項目也是一個好主意。本系列的后續(xù)文章將提供一些人為的示例，但只有當您可以根據個人情況重新解釋它們時，事情才有意義?，F在開始考慮該項目需要什么樣的數據。這將如何表示？用戶將如何與其交互？</p>

<h4>
  
  
  2.4 瀏覽器工具
</h4>

<p>您的編碼嘗試第一次就可以正常工作的可能性很小。  也許屏幕布局并不完全符合您的預期，或者 Web 應用程序的邏輯可能存在問題。有時瀏覽器會顯示錯誤消息，但有時它只會坐著生悶氣。你如何解決這個問題？</p>

<p>好消息是，所有主流瀏覽器都有內置的“檢查工具”，使您能夠調查這些問題。 “檢查器”為您提供有關瀏覽器對屏幕布局定義的解釋的內部信息，并允許您監(jiān)視客戶端 JavaScript 指令的執(zhí)行。對于 Google Chrome，只需右鍵單擊瀏覽器屏幕并從顯示的彈出窗口中選擇“檢查”即可訪問此檢查工具。 </p>

<p>壞消息是，初次接觸時，該檢查工具會顯示出其菜單欄和可調整大小窗口的令人震驚的復雜性。但請接受我的保證，一旦您掌握了它的竅門，您就會發(fā)現這個工具使用起來很有趣，并且是跟蹤和解決問題的寶貴資源。您可以在 Google devtools 找到完整文檔。</p>

<p>關于布局問題，檢查器以圖形方式演示瀏覽器如何應用確定顯示元素位置的各種“邊距”、“填充”和“寬度”參數。除此之外，它還提供了一個工具來嘗試適當的調整。</p>

<p>關于邏輯問題，檢查器使您能夠在 JavaScript 源代碼中設置“斷點”。完成這些后，刷新 Web 應用程序將在第一個斷點處停止執(zhí)行，并讓您查看該點處程序變量的值。然后，您可以選擇逐行執(zhí)行后續(xù)代碼或跳到下一個斷點</p>

<p>如果你的程序“崩潰”，檢查員會告訴你出了什么問題。</p><p>在早期，找出導致邏輯問題的原因的通常方法是添加“日志記錄”指令。這些將跟蹤程序的“控制流”并在檢查點顯示程序變量值。正如您可能想象的那樣，這是一個繁瑣的過程?，F在，當我在瀏覽器中“檢查”一個網絡應用程序時，就好像我打開了一塊瑞士手表的后蓋，發(fā)現它所有復雜的東西都在等待檢查。調試現在變得如此令人愉快，我?guī)缀跗诖业拇a中出現錯誤！</p>

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

<p>上面第 2.3 節(jié)中介紹的 Javascript 示例使用了一個丑陋的 document.getElementById("idName") 方法來訪問 Web 應用程序的 DOM 并修改元素“idName”的屬性。像 Sveltekit 這樣的框架提供了更加友好和高效的 DOM 界面。它們使您能夠為常見任務編寫“有意義”的代碼，例如顯示和隱藏彈出窗口、顯示列表和創(chuàng)建瀏覽器選項卡歷史記錄。例如，一條 Svelte 語句表示“if popUpVisible displayPopup()”（盡管語法稍微嚴格一些），當 displayPopup 變量更改為 true 時，將使彈出窗口可見。</p>

<p>在初始開發(fā)過程中，該框架通過您在 IDE 終端會話中啟動的“本地服務器”運行。這具有神奇的效果，可以保持瀏覽器窗口在每次更改底層 Web 應用程序代碼時自動更新和刷新。 </p>

<p>該框架還允許您指定 webapp 代碼的運行位置。例如，根據具體情況，讀取和寫入遠程存儲的語句最好在用戶瀏覽器中本地運行或在服務器上遠程運行。您目前可能對此不感興趣，但一旦您編寫認真的代碼，這就會變得很重要。在瀏覽器上運行的代碼很容易調試，但是，當您必須應對效率和安全問題時，您可能會很高興有機會運行“服務器端”。 Sveltekit 可讓您以特別優(yōu)雅的方式交付此類安排。</p>

<p>當您準備好實現代碼時，框架的最后一步是“構建”應用程序的“打包”版本。這將執(zhí)行一系列步驟，將您的應用程序編譯、捆綁和優(yōu)化為準備部署的“包”。這可確保部署的 Web 應用程序盡可能小、快速且高效。</p>

<p>目前最流行的框架可能是Meta的React系統。它創(chuàng)建于 2010 年左右，旨在支持 Facebook 的發(fā)展。這個想法非常有效，以至于 Vue、Angular 和 Next.js 等競爭對手很快就出現了。 Sveltekit 是最新推出的產品之一，我在這里使用它是因為它特別容易使用。您可能有興趣注意到它在 Stack Overflow 的 2024 年開發(fā)者調查中獲得了良好的支持率</p><p><em>順便說一句，你可能會注意到我有時會談論 Svelteki，然后似乎反常地切換到其他稱為 Svelte 的東西。 Svelte 是 svelte.dev 工程師創(chuàng)建的“語言”，用于“擴展”Javascript，使編寫高效的 Web 應用程序變得更加容易。 Sveltekit 是創(chuàng)建 Svelte Web 應用程序運行環(huán)境的框架。</em></p>

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

<p>完成 Web 應用程序項目開發(fā)階段所需的一切都可以在一臺適度指定的臺式計算機上交付。但是，當您想要將項目發(fā)布到預期的世界時，您將需要專業(yè)的“后端”Web 服務器的服務。這將：</p>

• 提供一個“端點”（即網絡上的 URL），可以從該端點部署項目的可執(zhí)行文件以在瀏覽器中本地執(zhí)行。
• 為您的項目數據提供基于網絡的中央存儲。最有可能的是，這將保存在結構化數據庫中。
• 提供快速、安全的環(huán)境來運行敏感的應用程序元素。

在本課程中，您將使用：

• Google 的“Firebase”應用程序開發(fā)環(huán)境，可訪問“Firestore”工具，使您能夠使用簡單的結構化數據庫
• Google 的“App Engine”環(huán)境，用于部署 Web 應用程序代碼并托管 SvelteKit 項目的“服務器端”元素的執(zhí)行。

由于您將從一開始就使用 Firestore，因此您需要首先創(chuàng)建一個 Firebase 帳戶。

過去，您可能會尋求“互聯網服務提供商”（例如 GoDaddy 或 HostPapa）來提供您的云服務。雖然這些服務仍然可以發(fā)揮作用，并且肯定會通過其服務臺為您提供出色的個性化支持，但云平臺為您當前的目的提供了更好的全面包。

3. 現在繼續(xù)閱讀

本課程現在分兩個主要階段進行。第一個旨在讓您熟悉 HTML、Javascript、Firebase 和 Firestore 的基礎知識。如果您對這款游戲完全陌生，那么這里有很多東西需要學習，并且很可能會感到困惑。預計要花一些時間在這上面?；c時間，多用您的 chatBot 導師。

完成此步驟后，第二階段將向您介紹 Sveltekit Web 應用程序設計的一些更高級的元素。如果您成功完成此任務，您將了解開發(fā)有用的網絡應用程序所需的大部分內容。

現在，我們出發(fā)吧。第一步是在本地計算機上安裝 SvelteKit 并讓自己習慣 Web 應用程序開發(fā)技術。請參閱帖子 2.1 了解說明。

以上是NgSysV.A 年輕人人工智能時代系統開發(fā)指南的詳細內容。更多信息請關注PHP中文網其他相關文章！