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中文網其他相關文章！