此貼文系列已在 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)簧稀E?,此外,您希望世界上任何地方的任何人都能夠使用您的作品。這肯定很容易......
在 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ù)的概述:
- HTML - 超文本標(biāo)記語(yǔ)言 - 這是用於告訴瀏覽器如何在電腦螢?zāi)簧细袷交?Web 應(yīng)用程式輸出的「語(yǔ)言」
- IDE - 互動(dòng)式開發(fā)環(huán)境 - 這是用於建立程式碼的編輯工具 - Microsoft 的 VSCode 是我將在此處使用的 IDE。
- 程式語(yǔ)言 - 這會(huì)將您的應(yīng)用程式的「概念」轉(zhuǎn)化為其數(shù)位實(shí)作。我將在本課程中使用的語(yǔ)言是 JavaScript
- 瀏覽器工具 - 這些工具使您能夠在 Web 應(yīng)用程式運(yùn)行時(shí)檢查和偵錯(cuò)它。我將在 Google 的 Chrome 瀏覽器中使用該工具集。
- 開發(fā)框架 - 最好將其理解為一個(gè)工具集,它使您能夠有效地將 JavaScript 應(yīng)用於 Web 應(yīng)用程式開發(fā)的特定要求。我將使用的框架稱為 SvelteKit。
- 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)粊丫值摹改P汀梗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)槌R?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)文章!

熱AI工具

Undress AI Tool
免費(fèi)脫衣圖片

Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費(fèi)的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開發(fā)工具

SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)

熱門話題

javascriptisidealforwebdevelogment,whilejavasuitslarge-scaleapplicationsandandandroiddevelopment.1)javascriptexceleatingingingingingingingbeatingwebexperienceswebexperienceswebexperiencesandfull-stackdeevermentwithnode.js.2)

在JavaScript中,選擇單行註釋(//)還是多行註釋(//)取決於註釋的目的和項(xiàng)目需求:1.使用單行註釋進(jìn)行快速、內(nèi)聯(lián)的解釋;2.使用多行註釋進(jìn)行詳細(xì)的文檔說(shuō)明;3.保持註釋風(fēng)格的一致性;4.避免過(guò)度註釋;5.確保註釋與代碼同步更新。選擇合適的註釋風(fēng)格有助於提高代碼的可讀性和可維護(hù)性。

是的,javascriptcommentsarenectary和shouldshouldshouldseffectional.1)他們通過(guò)codeLogicAndIntentsgudedepleders,2)asevitalincomplexprojects,和3)handhanceClaritywithOutClutteringClutteringThecode。

Java和JavaScript是不同的編程語(yǔ)言,各自適用於不同的應(yīng)用場(chǎng)景。 Java用於大型企業(yè)和移動(dòng)應(yīng)用開發(fā),而JavaScript主要用於網(wǎng)頁(yè)開發(fā)。

JavascriptconcommentsenceenceEncorenceEnterential gransimenting,reading and guidingCodeeXecution.1)單inecommentsareusedforquickexplanations.2)多l(xiāng)inecommentsexplaincomplexlogicorprovideDocumentation.3)

評(píng)論arecrucialinjavascriptformaintainingclarityclarityandfosteringCollaboration.1)heelpindebugging,登機(jī),andOnderStandingCodeeVolution.2)使用林格forquickexexplanations andmentmentsmmentsmmentsmments andmmentsfordeffordEffordEffordEffordEffordEffordEffordEffordEddeScriptions.3)bestcractices.3)bestcracticesincracticesinclud

JavaScripthasseveralprimitivedatatypes:Number,String,Boolean,Undefined,Null,Symbol,andBigInt,andnon-primitivetypeslikeObjectandArray.Understandingtheseiscrucialforwritingefficient,bug-freecode:1)Numberusesa64-bitformat,leadingtofloating-pointissuesli

JavaScriptIspreferredforredforwebdevelverment,而Javaisbetterforlarge-ScalebackendsystystemsandSandAndRoidApps.1)JavascriptexcelcelsincreatingInteractiveWebexperienceswebexperienceswithitswithitsdynamicnnamicnnamicnnamicnnamicnemicnemicnemicnemicnemicnemicnemicnemicnddommanipulation.2)
