此貼文系列已在 NgateSystems.com 建立索引。您還可以在那裡找到超級(jí)有用的關(guān)鍵字搜尋工具。

最後評(píng)論：24 年 11 月

一、簡(jiǎn)介

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

這篇文章適合完全的初學(xué)者。它涵蓋了當(dāng)我第一次開始修改網(wǎng)站和資料庫(kù)時(shí)我想了解的一切。也許您還在上學(xué)，或者年齡較大並考慮改變職業(yè)，或者可能已經(jīng)退休（儘管內(nèi)心仍然年輕）並且只是好奇。重要的是你有一顆年輕的頭腦——對(duì)新想法持開放態(tài)度並能迅速抓住機(jī)會(huì)。你需要這個(gè)，因?yàn)槟阈枰盏男孪敕ǖ臄?shù)量幾乎是巨大的?，F(xiàn)代資訊系統(tǒng)實(shí)踐是工具和技術(shù)的完美叢林。更糟的是，這片叢林正以令人眼花撩亂的速度發(fā)展。你究竟該從哪裡開始？

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

令人驚訝的是（我一直對(duì)此感到驚訝），我在這裡描述的大多數(shù)工具和技術(shù)都是免費(fèi)。您唯一需要投資的是您的個(gè)人時(shí)間。不幸的是，這並不是一個(gè)無(wú)關(guān)緊要的因素，但正如他們所說(shuō)，「沒(méi)有痛苦，就沒(méi)有收穫！

然而，作為進(jìn)一步的鼓勵(lì)，我還要說(shuō)，您現(xiàn)在有了一個(gè)巨大的免費(fèi)盟友 - 通用聊天機(jī)器人。該系列包括一些冗長(zhǎng)的帖子，其中充滿了乏味的說(shuō)明。然而，如果我嘗試按照您的要求詳細(xì)描述這些步驟，那麼它們會(huì)更長(zhǎng)。我現(xiàn)在可以確信，無(wú)論您在哪裡覺(jué)得我把您拋在了後面，您都可以調(diào)用機(jī)器人讓您回到正軌。在 2022 年 chatGPT 和其他機(jī)器人發(fā)布之前，我不會(huì)想到這會(huì)成為可能?，F(xiàn)在，一切都變了。請(qǐng)參閱貼文 4.1 以了解您的數(shù)位導(dǎo)師的介紹。目前，我建議您使用 chatGPT40 的免費(fèi)套餐。

總而言之，這裡是本系列的總體目標(biāo)的陳述以及它建議遵循的路線的概述。

2. 目標(biāo)

假設(shè)您的目標(biāo)是開發(fā)一種軟體，將一些資訊讀入計(jì)算機(jī)，以某種有目的的方式處理它，然後將結(jié)果顯示在螢?zāi)簧稀Ｅ?，此外，您希望世界上任何地方的任何人都能夠使用您的作品。這肯定很容易......

在 IT 世界中，有多種方法可以完成這個(gè)簡(jiǎn)單的任務(wù)。但根據(jù)我的經(jīng)驗(yàn)，最簡(jiǎn)單的選擇是使用 Chrome 或 Safari 等網(wǎng)路瀏覽器作為應(yīng)用程式的「啟動(dòng)板」。你可能會(huì)說(shuō)，這可能看起來(lái)很奇怪。不是每個(gè)人都在手機(jī)上使用獨(dú)立的「應(yīng)用程式」嗎？

原因之一：您希望您的應(yīng)用程式可供通過(guò)每一種可以想像的設(shè)備工作的用戶使用 - 筆記型電腦、平板電腦、桌上型電腦等。瀏覽器透過(guò)使您的應(yīng)用程式與差異隔離來(lái)提供一種實(shí)現(xiàn)此目的的絕佳方法在硬體和作業(yè)系統(tǒng)中。它們還為您提供了一個(gè)複雜且實(shí)用的環(huán)境來(lái)支援您的應(yīng)用程式的邏輯。另一方面，應(yīng)用程式與特定的硬體平臺(tái)相關(guān)聯(lián)，並且陷入複雜性的泥潭。

還有另一個(gè)原因：您希望世界任何地方的使用者都可以使用應(yīng)用程式的資訊。瀏覽器已經(jīng)定位於互聯(lián)網(wǎng)，其全部目的就是為了促進(jìn)資訊共享。這就是為什麼亞馬遜和 Facebook 等主要營(yíng)運(yùn)商非常樂(lè)意使用網(wǎng)路瀏覽器作為其係統(tǒng)平臺(tái)。

因此，我建議的路線通往現(xiàn)在通常所說(shuō)的“網(wǎng)頁(yè)應(yīng)用程式”，這是一個(gè)只需在網(wǎng)頁(yè)瀏覽器中輸入網(wǎng)頁(yè)應(yīng)用程式的“位址”即可啟動(dòng)的軟體。此網(wǎng)路應(yīng)用程式將能夠維護(hù)持久性資料儲(chǔ)存（「資料庫(kù)」），並透過(guò)「登入」功能為該資料提供安全性。基於瀏覽器的聊天機(jī)器人提供了使用網(wǎng)路應(yīng)用程式技術(shù)的絕佳範(fàn)例。

以下是建立現(xiàn)代網(wǎng)路應(yīng)用程式所需掌握的工具和技術(shù)的概述：

1. HTML - 超文本標(biāo)記語(yǔ)言 - 這是用於告訴瀏覽器如何在電腦螢?zāi)簧细袷交?Web 應(yīng)用程式輸出的「語(yǔ)言」
2. IDE - 互動(dòng)式開發(fā)環(huán)境 - 這是用於建立程式碼的編輯工具 - Microsoft 的 VSCode 是我將在此處使用的 IDE。
3. 程式語(yǔ)言 - 這會(huì)將您的應(yīng)用程式的「概念」轉(zhuǎn)化為其數(shù)位實(shí)作。我將在本課程中使用的語(yǔ)言是 JavaScript
4. 瀏覽器工具 - 這些工具使您能夠在 Web 應(yīng)用程式運(yùn)行時(shí)檢查和偵錯(cuò)它。我將在 Google 的 Chrome 瀏覽器中使用該工具集。
5. 開發(fā)框架 - 最好將其理解為一個(gè)工具集，它使您能夠有效地將 JavaScript 應(yīng)用於 Web 應(yīng)用程式開發(fā)的特定要求。我將使用的框架稱為 SvelteKit。
6. A 伺服器 - 這是將您的 web 應(yīng)用程式程式碼傳遞給您的使用者的遠(yuǎn)端主機(jī)。它還將為數(shù)據(jù)提供存儲(chǔ)，並可以運(yùn)行其程式碼的選定元素。我將在 App Engine 伺服器上使用 Google 的 Firebase。其他平臺(tái)也可用，但 Google Cloud 提供特別慷慨的「免費(fèi)套餐」。

好的，繫好安全帶，開始吧…既然您正在網(wǎng)上閱讀這篇文章，我假設(shè)您已經(jīng)相當(dāng)習(xí)慣了網(wǎng)絡(luò)世界。對(duì)於本課程，您需要使用一臺(tái)桌上型計(jì)算機(jī)，為簡(jiǎn)單起見(jiàn)，我假設(shè)這將是一臺(tái) Microsoft Windows 筆記型電腦。我確信，如果情況並非如此，您將能夠適當(dāng)?shù)卣{(diào)整我的說(shuō)明。

2.1 HTML（超文本標(biāo)記語(yǔ)言）

您正在開發(fā)在網(wǎng)頁(yè)瀏覽器中顯示文字的軟體。您希望此文字以各種優(yōu)雅的位置、顏色、大小等配置顯示。 Web 瀏覽器可讓您透過(guò)以「標(biāo)記」程式碼包圍文字內(nèi)容來(lái)指定這些配置，這些「標(biāo)記」程式碼決定內(nèi)容應(yīng)如何顯示。這種簡(jiǎn)單的安排帶來(lái)了令人驚訝的強(qiáng)大結(jié)果。

您可以透過(guò)在 Microsoft 記事本等簡(jiǎn)單編輯器中將說(shuō)明輸入文字檔案來(lái)建立範(fàn)例。試試這個(gè)簡(jiǎn)單的練習(xí)：

在您最喜歡的文字編輯器（例如Windows 記事本實(shí)用程式）中鍵入以下行，然後將其儲(chǔ)存為具有HTML 副檔名的檔案（例如「my-first-app.html」）：

<h1>Hello there</h1>

當(dāng)您透過(guò)「雙擊」Windows 資源管理器中的項(xiàng)目來(lái)「開啟」該檔案時(shí)，Windows 應(yīng)該會(huì)透過(guò)開啟您的預(yù)設(shè)瀏覽器並顯示顯示「Hello there」字樣的畫面來(lái)回應(yīng)。恭喜，您已經(jīng)編寫了第一個(gè) Web 應(yīng)用程式（儘管除了您之外沒(méi)有人可以看到，但我們稍後會(huì)修復(fù)該問(wèn)題）。

如果事情沒(méi)有如預(yù)期進(jìn)行，現(xiàn)在是請(qǐng)求 ChatGPT 幫助您解決問(wèn)題的好時(shí)機(jī)。上述過(guò)程依賴設(shè)備配置。告訴 ChatGPT 您不明白的內(nèi)容或在您的特定裝置上無(wú)法正常工作的內(nèi)容，它會(huì)準(zhǔn)確地告訴您需要做什麼來(lái)解決問(wèn)題。

;和

上例中的標(biāo)記「標(biāo)籤」是 HTML 指令，告訴瀏覽器它們包含的文字將顯示為標(biāo)題。 Google 取得有關(guān)

的資訊您會(huì)發(fā)現(xiàn)大量有關(guān)學(xué)習(xí) HTML 的教學(xué)和建議。 Mozilla.org 的網(wǎng)路入門是一個(gè)很好的起點(diǎn)。另一個(gè)有用的網(wǎng)站是 W3Schools HTML 教學(xué)。 W3schools 網(wǎng)站是互動(dòng)的，使您能夠試驗(yàn) HTML 語(yǔ)法。

重要的是，在這些文件中，您將了解到許多限定符可用於修改標(biāo)籤的操作。例如，

標(biāo)籤可以透過(guò) a> 進(jìn)行限定

2.2 IDE（互動(dòng)式開發(fā)環(huán)境）

您可能只是感覺(jué)到編寫 Web 應(yīng)用程式需要您創(chuàng)建一些相當(dāng)大的檔案。 Web 應(yīng)用程式程式碼很冗長(zhǎng)，包含數(shù)千行的檔案並不罕見(jiàn)。

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

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

有許多 IDE 可供使用，但我推薦 Microsoft 的 VSCode。它可以免費(fèi)安裝並且使用非常廣泛。它再次代表了一個(gè)陡峭的學(xué)習(xí)曲線，但 Microsoft 提供了出色的線上文件。

在免費(fèi)的 VSCode 套件中，您還會(huì)發(fā)現(xiàn)大量自動(dòng)化幫助 - 用於格式化程式碼並提供簡(jiǎn)單的自動(dòng)完成機(jī)制（例如，JavaScript 指令和變數(shù)名稱）的工具。檢查機(jī)制將發(fā)現(xiàn)語(yǔ)法錯(cuò)誤，並突出顯示未定義的變數(shù)等。

IDE 提供了許多其他有用的服務(wù)。到目前為止，您的應(yīng)用程式由單一 .html 檔案表示。實(shí)際上，現(xiàn)代電腦系統(tǒng)可能包含數(shù)百個(gè)檔案 - 我們將完整的程式集稱為「專案」。管理大型專案會(huì)帶來(lái)許多具有挑戰(zhàn)性的任務(wù)，而這些現(xiàn)在都變成 IDE 的責(zé)任。

例如，假設(shè)你想改變>

再次，假設(shè)您想要放棄最近對(duì)文件所做的更改，並將其重置為編輯歷史記錄中的某個(gè)先前狀態(tài)。 VSCode 會(huì)維護(hù)本機(jī)檔案歷史記錄，您可以使用它來(lái)清理混亂。此外，VSCode 與名為 Github 的版本管理系統(tǒng)無(wú)縫鏈接，為您的專案建立安全的基於外部 Web 的「檢查點(diǎn)」副本。這樣，即使您將筆記型電腦落在公車上，您的來(lái)源及其歷史記錄也是安全的。

最後，VSCode 提供了使用直接連結(jié)到裝置作業(yè)系統(tǒng)的終端會(huì)話運(yùn)行專案的平臺(tái)。您可能會(huì)在 VSCode 中花費(fèi)大量時(shí)間！

這可能是在您的裝置上安裝 VSCode 並嘗試 Microsoft 的 Visual Studio Code 入門教學(xué)的好時(shí)機(jī)

2.3 JavaScript

JavaScript 對(duì)於初學(xué)者來(lái)說(shuō)是一門很棒的語(yǔ)言。它很容易學(xué)習(xí)並且在許多情況下都能很好地工作。它的自然家園是瀏覽器，它可以在其中讀取和寫入由 Web 應(yīng)用程式的 HTML 部分定義的資料結(jié)構(gòu)。簡(jiǎn)單來(lái)說(shuō)，它可以直接在螢?zāi)簧献x寫。然而，它還獲得了從瀏覽器內(nèi)部以及在伺服器上遠(yuǎn)端運(yùn)行時(shí)讀取和寫入基於遠(yuǎn)端伺服器的資料儲(chǔ)存的能力。簡(jiǎn)而言之，它變得如此有用，以至於它可能是您需要學(xué)習(xí)的唯一語(yǔ)言。

讓我們開始吧。 JavaScript 是一種「解釋型」語(yǔ)言。這意味著不需要特殊的預(yù)處理來(lái)準(zhǔn)備執(zhí)行程式碼。您可以將其直接啟動(dòng)到“運(yùn)行時(shí)引擎”並立即查看結(jié)果。您的簡(jiǎn)陋 Web 瀏覽器就是 JavaScript 執(zhí)行時(shí)間引擎的一個(gè)範(fàn)例。讓我們看看如何透過(guò)添加一些 Javascript 來(lái)讓先前建立的 my-first-app.html 檔案表現(xiàn)得「智慧」。

JavaScript 從 HTML 語(yǔ)法的嚴(yán)格性質(zhì)中獲得了直接讀寫螢?zāi)坏哪芰?。這使得瀏覽器能夠建構(gòu)螢?zāi)粊丫值摹改Ｐ汀梗Q為「域物件模型」（或簡(jiǎn)稱「DOM」）的樹狀結(jié)構(gòu)。在 DOM 中，樹的各個(gè)分支和葉子都可以透過(guò) JavaScript 單獨(dú)尋址。

這是一個(gè)例子。取出上面介紹的 my-first-app.html 檔案並進(jìn)行如下編輯：

<h1>



</h1><p>此程式碼使程式碼的輸出取決於一天中的時(shí)間。如果您在午餐時(shí)間之前（具體來(lái)說(shuō)，在任何一天的中午 12 點(diǎn)之前）重新運(yùn)行該文件，輸出將顯示為藍(lán)色。午餐後，輸出將顯示為紅色。恭喜，您已經(jīng)編寫了第一個(gè)「智慧型」網(wǎng)頁(yè)應(yīng)用程式。 </p><p>HTML <script> 之間的線條和 </腳本>標(biāo)籤包含您的第一段 JavaScript 程式碼。以 hourOfDay = 開頭的行建立一個(gè)“變數(shù)”，其中包含運(yùn)行時(shí)間的“日期”“物件”。 Javascript 中的「物件」是一個(gè)複雜的概念，您將來(lái)會(huì)喜歡了解它。然而，現(xiàn)在您需要知道的是，程式碼運(yùn)行時(shí)創(chuàng)建的「Date」物件的實(shí)例將在其中的某個(gè)位置包含一天中時(shí)間的毫秒精確表示。此外，該物件還包含一個(gè) .getHours“方法”，該方法從毫秒資料中提取代表“一天中的小時(shí)”的 0 到 23 之間的整數(shù)。後續(xù)程式碼行中的 if 和 else Javascript 關(guān)鍵字提供了對(duì)它們所引用的值進(jìn)行適當(dāng)操作的邏輯。 </script></p>

<p>如果你覺(jué)得要等到午餐時(shí)間才測(cè)試變色邏輯不方便，可以嘗試修改程式碼，在分鐘為偶數(shù)時(shí)切換顏色。取得一天中的分鐘的「方法」是 getMinutes()。用來(lái)測(cè)試數(shù)字 num 是偶數(shù)還是奇數(shù)的 JavaScript 是 if (num % 2 === 0)。看看是否可以更改 my-first-app.html 中的程式碼，以在一分鐘後刷新頁(yè)面時(shí)更改文字顏色。 </p>

<p>您可能已經(jīng)注意到 </p><h1>檔案原始版本第一行中的標(biāo)記已取得「id=」子句。這已經(jīng)用唯一的字串「標(biāo)記」了標(biāo)籤（在本例中為「test」）。聰明的地方是 document.getElementById('test') 指令，它使 JavaScript 能夠改變 'test' <h1> 的「樣式」。標(biāo)籤。 

</h1>
</h1><p><em>在你對(duì)花費(fèi)一生時(shí)間擺弄 document.getElementById('test') 指令的前景感到害怕之前，讓我向你保證這不是必要的。軟體工程最新發(fā)展的整個(gè)過(guò)程旨在使您能夠透過(guò)<b>有意義的</b>語(yǔ)言模式來(lái)控制螢?zāi)粊丫?。這些極大地簡(jiǎn)化了任務(wù)。在本系列文章中，如前所述，您將使用名為 SvelteKit 的「程式碼框架」來(lái)建立您的系統(tǒng)。您將在帖子 2.1 中看到這樣的範(fàn)例。 </em></p>

<p>現(xiàn)在，如何才能熟練 JavaScript？這裡你需要一本好書，我推薦的是 Marijn Haverbeke 的《Eloquent JavaScript》。 </p>

<p>如果需要，請(qǐng)?jiān)诰€閱讀本文（您可以在https://JavaScript .net/ 找到最新版本），但是沒(méi)有什麼比一本寫得好的、有可以在上面塗鴉的物理頁(yè)面的書更方便的了。二手（和早期版本）在這個(gè)階段就很好，並且可能是您在一段時(shí)間內(nèi)需要進(jìn)行的最佳（也是唯一）初始投資。哈弗貝克在解釋上面介紹的「物件」、「方法」、「功能」和「風(fēng)格」概念方面將比我希望實(shí)現(xiàn)的任何目標(biāo)做得更好。 </p><p>但是，如果您仍然決心在線學(xué)習(xí)，我認(rèn)為 Mozilla 的 JavaScript 基礎(chǔ)教程非常好。 </p>

<p>開始考慮為您的工作設(shè)計(jì)一個(gè)測(cè)試項(xiàng)目也是一個(gè)好主意。本系列的後續(xù)文章將提供一些人為的範(fàn)例，但只有當(dāng)您可以根據(jù)個(gè)人情況重新解釋它們時(shí)，事情才有意義?，F(xiàn)在開始考慮該專案需要什麼樣的數(shù)據(jù)。這將如何表示？使用者將如何與其互動(dòng)？ </p>

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

<p>您的編碼嘗試第一次就可以正常工作的可能性很小。  也許螢?zāi)粊丫謥K不完全符合您的預(yù)期，或者 Web 應(yīng)用程式的邏輯可能有問(wèn)題。有時(shí)瀏覽器會(huì)顯示錯(cuò)誤訊息，但有時(shí)它只會(huì)坐著生悶氣。你如何解決這個(gè)問(wèn)題？ </p>

<p>好消息是，所有主流瀏覽器都有內(nèi)建的“檢查工具”，使您能夠調(diào)查這些問(wèn)題。 「檢查器」為您提供有關(guān)瀏覽器對(duì)螢?zāi)粊丫侄x的解釋的內(nèi)部信息，並允許您監(jiān)視客戶端 JavaScript 指令的執(zhí)行。對(duì)於 Google Chrome，只需右鍵單擊瀏覽器螢?zāi)粊K從顯示的彈出視窗中選擇「檢查」即可存取此檢查工具。 </p>

<p>壞消息是，初次接觸時(shí)，該檢查工具會(huì)顯示出其功能表列和可調(diào)整大小視窗的令人震驚的複雜性。但請(qǐng)接受我的保證，一旦您掌握了它的竅??門，您就會(huì)發(fā)現(xiàn)這個(gè)工具使用起來(lái)很有趣，並且是追蹤和解決問(wèn)題的寶貴資源。您可以在 Google devtools 找到完整文件。 </p>

<p>關(guān)於佈局問(wèn)題，檢查器以圖形方式示範(fàn)瀏覽器如何套用決定顯示元素位置的各種「邊距」、「填滿」和「寬度」參數(shù)。除此之外，它還提供了一個(gè)工具來(lái)嘗試適當(dāng)?shù)恼{(diào)整。 </p>

<p>關(guān)於邏輯問(wèn)題，檢查器使您能夠在 JavaScript 原始程式碼中設(shè)定「斷點(diǎn)」。完成這些後，刷新 Web 應(yīng)用程式將在第一個(gè)斷點(diǎn)處停止執(zhí)行，並讓您查看該點(diǎn)處程式變數(shù)的值。然後，您可以選擇逐行執(zhí)行後續(xù)程式碼或跳到下一個(gè)斷點(diǎn)</p>

<p>如果你的程式“崩潰”，檢查員會(huì)告訴你出了什麼問(wèn)題。 </p><p>在早期，找出導(dǎo)致邏輯問(wèn)題的原因的常見(jiàn)方法是新增「日誌記錄」指令。這些將追蹤程式的「控制流程」並在檢查點(diǎn)顯示程式變數(shù)值。正如您可能想像的那樣，這是一個(gè)繁瑣的過(guò)程?，F(xiàn)在，當(dāng)我在瀏覽器中「檢查」一個(gè)網(wǎng)頁(yè)應(yīng)用程式時(shí)，就好像我打開了一塊瑞士手錶的後蓋，發(fā)現(xiàn)它所有複雜的東西都在等待檢查?，F(xiàn)在調(diào)試變得如此令人愉快，我?guī)缀跗诖业某淌酱a中出現(xiàn)錯(cuò)誤！ </p>

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

<p>上面第 2.3 節(jié)中介紹的 Javascript 範(fàn)例使用了一個(gè)醜陋的 document.getElementById("idName") 方法來(lái)存取 Web 應(yīng)用程式的 DOM 並修改元素「idName」的屬性。像 Sveltekit 這樣的框架提供了更友善和高效的 DOM 介面。它們使您能夠?yàn)槌Ｒ?jiàn)任務(wù)編寫「有意義」的程式碼，例如顯示和隱藏彈出視窗、顯示清單和建立瀏覽器標(biāo)籤歷史記錄。例如，一個(gè) Svelte 語(yǔ)句表示「if popUpVisible displayPopup()」（雖然文法稍微嚴(yán)格一些），當(dāng) displayPopup 變數(shù)改為 true 時(shí)，將使彈出視窗可見(jiàn)。 </p>

<p>在初始開發(fā)過(guò)程中，該框架透過(guò)您在 IDE 終端會(huì)話中啟動(dòng)的「本機(jī)伺服器」運(yùn)作。這具有神奇的效果，可以保持瀏覽器視窗在每次更改底層 Web 應(yīng)用程式程式碼時(shí)自動(dòng)更新和刷新。 </p>

<p>框架還允許您指定 webapp 程式碼的運(yùn)作位置。例如，根據(jù)具體情況，讀取和寫入遠(yuǎn)端儲(chǔ)存的語(yǔ)句最好在使用者瀏覽器中本地運(yùn)行或在伺服器上遠(yuǎn)端運(yùn)行。您目前可能對(duì)此不感興趣，但一旦您編寫認(rèn)真的程式碼，這就會(huì)變得很重要。在瀏覽器上運(yùn)行的程式碼很容易調(diào)試，但是，當(dāng)您必須應(yīng)對(duì)效率和安全問(wèn)題時(shí)，您可能會(huì)很高興有機(jī)會(huì)運(yùn)行「伺服器端」。 Sveltekit 讓您以特別優(yōu)雅的方式交付此類安排。 </p>

<p>當(dāng)您準(zhǔn)備好實(shí)作程式碼時(shí)，框架的最後一步是「建置」應(yīng)用程式的「打包」版本。這將執(zhí)行一系列步驟，將您的應(yīng)用程式編譯、捆綁和最佳化為準(zhǔn)備部署的「套件」。這可確保部署的 Web 應(yīng)用程式盡可能小、快速且有效率。 </p>

<p>目前最受歡迎的框架可能是Meta的React系統(tǒng)。它創(chuàng)建於 2010 年左右，旨在支持 Facebook 的發(fā)展。這個(gè)想法非常有效，以至於 Vue、Angular 和 Next.js 等競(jìng)爭(zhēng)對(duì)手很快就出現(xiàn)了。 Sveltekit 是最新推出的產(chǎn)品之一，我在這裡使用它是因?yàn)樗貏e容易使用。您可能有興趣注意到它在 Stack Overflow 的 2024 年開發(fā)者調(diào)查中獲得了良好的支援率</p><p><em>順便說(shuō)一句，你可能會(huì)注意到我有時(shí)會(huì)談?wù)?Svelteki，然後似乎反常地切換到其他稱為 Svelte 的東西。 Svelte 是由 svelte.dev 工程師創(chuàng)建的“語(yǔ)言”，用於“擴(kuò)展”Javascript，使編寫高效的 Web 應(yīng)用程式變得更加容易。 Sveltekit 是建立 Svelte Web 應(yīng)用程式運(yùn)作環(huán)境的框架。 </em></p>

<h4>
  
  
  2.6 Firebase 和應(yīng)用程式引擎
</h4>

<p>完成 Web 應(yīng)用程式專案開發(fā)階段所需的一切都可以在一臺(tái)適度指定的桌上型電腦上交付。但是，當(dāng)您想要將專案發(fā)佈到預(yù)期的世界時(shí)，您將需要專業(yè)的「後端」Web 伺服器的服務(wù)。這將：</p>

• 提供一個(gè)「端點(diǎn)」（即網(wǎng)路上的 URL），可以從該端點(diǎn)部署專案的可執(zhí)行檔以在瀏覽器中本機(jī)執(zhí)行。
• 為您的專案資料提供基於網(wǎng)路的中央儲(chǔ)存。最有可能的是，這將保存在結(jié)構(gòu)化資料庫(kù)中。
• 提供快速、安全的環(huán)境來(lái)運(yùn)行敏感的應(yīng)用程式元素。

在本課程中，您將使用：

• Google 的「Firebase」應(yīng)用程式開發(fā)環(huán)境，可存取「Firestore」工具，讓您能夠使用簡(jiǎn)單的結(jié)構(gòu)化資料庫(kù)
• Google 的「App Engine」環(huán)境，用於部署 Web 應(yīng)用程式程式碼並託管 SvelteKit 專案的「伺服器端」元素的執(zhí)行。

由於您將從一開始就使用 Firestore，因此您需要先建立一個(gè) Firebase 帳戶。

過(guò)去，您可能會(huì)尋求「網(wǎng)路服務(wù)供應(yīng)商」（例如 GoDaddy 或 HostPapa）來(lái)提供您的雲(yún)端服務(wù)。雖然這些服務(wù)仍然可以發(fā)揮作用，並且肯定會(huì)透過(guò)其服務(wù)臺(tái)為您提供出色的個(gè)人化支持，但雲(yún)端平臺(tái)為您當(dāng)前的目的提供了更好的全麵包。

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

本課程現(xiàn)在分兩個(gè)主要階段進(jìn)行。第一個(gè)旨在讓您熟悉 HTML、Javascript、Firebase 和 Firestore 的基礎(chǔ)知識(shí)。如果您對(duì)這款遊戲完全陌生，那麼這裡有很多東西需要學(xué)習(xí)，並且很可能會(huì)感到困惑。預(yù)計(jì)要花一些時(shí)間在這上面?；c(diǎn)時(shí)間，多用您的 chatBot 導(dǎo)師。

完成此步驟後，第二階段將向您介紹 Sveltekit Web 應(yīng)用程式設(shè)計(jì)的一些更高級(jí)的元素。如果您成功完成此任務(wù)，您將了解開發(fā)有用的網(wǎng)頁(yè)應(yīng)用程式所需的大部分內(nèi)容。

現(xiàn)在，我們出發(fā)吧。第一步是在本機(jī)電腦上安裝 SvelteKit 並讓自己習(xí)慣 Web 應(yīng)用程式開發(fā)技術(shù)。請(qǐng)參閱帖子 2.1 以了解說(shuō)明。

以上是NgSysV.A 年輕人人工智慧時(shí)代系統(tǒng)開髮指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！