Glitch是一個非常棒的平台，可以用來學習和實驗程式碼。本文將向您介紹Glitch，並讓您從零到一成為Glitch的高手。
Glitch是一個很好的學習編程的平台。
我在許多教程中使用Glitch，我認為它是一個展示概念並允許人們使用您的項目並在其基礎上建立的很棒的工具。
以下是我在Glitch上使用React和React Router創建的示例項目：https://glitch.com/edit/#!/flaviocopes-react-router-v4-2
使用Glitch，您可以輕鬆地創建JavaScript編寫的應用程序的演示和原型，從簡單的網頁到React或Vue等高級框架，以及支持服務器端的Node.js應用程序。
它基於Node.js構建，您可以安裝任何 npm包，運行webpack等等。
它是由一些非常成功的產品開發人員共同打造的，包括Trello和Stack Overflow，所以它在這方面具有很高的可信度。
我為什麼認為Glitch很棒呢？
Glitch在如何呈現自己的方面“打動了”我，它介面有趣，但又不簡化。
您可以訪問日誌，控制台和許多內部內容。
此外，接口中非常突出的重新混音的概念使我更有可能在那裡創建許多項目，因為我永遠不需要從一個空白項目開始。
您可以開始直接進入代碼，而無需花時間設置環境、版本控制等等，並專注於您的想法，並獲得自動HTTPS URL和用於媒體資源的CDN。
此外，它完全沒有鎖定，只需使用Node.js（或者如果您不使用服務器端Javascript，只需使用HTML，JS和CSS）。
它是免費的嗎？
是的，它是免費的，將來他們可能會在付費計劃上添加更多功能，但他們聲明目前的Glitch將永遠免費。
有合理的限制，例如：
- 您有128MB的空間（不包括npm包），此外還有512MB的媒體資源空間。
- 您每小時可以處理4000個請求。
- 如果5分鐘內不訪問應用程序且應用程序不接收任何HTTP請求，則應用程序將停止，長時間運行的應用程序將在12小時後停止運行。只要有HTTP請求進來，它們就會重新啟動。
Glitch概述
這是Glitch的主頁，它顯示了一些因為很酷而被認為值得展示的項目，以及一些入門項目：
創建帳戶非常簡單，只需點擊“登錄”並選擇Facebook或GitHub作為您的“進入點”（我建議選擇GitHub）：
您將被重定向到GitHub以進行授權：
登錄後，主頁也會顯示您的項目：
點擊“您的項目”將帶您轉到您的個人資料頁面，URL中包含您的姓名。我的是https://glitch.com/@flaviocopes。
您可以將項目設為“固定”，以便在有很多項目時更容易找到它們。
重新混音的概念
當您剛開始時，當然沒有自己的項目。
Glitch使得非常容易開始，您從不需要從空白項目開始。您始終是從另一個項目重新混音。
您可以重新混音您喜歡的項目，也可以重新混音您在Twitter上找到的項目或在Glitch主頁上展示的項目，或者您可以從一個作為啟動項目的項目開始：
這些合集中還有許多其他啟動項目：
如果您現在正在學習編碼，那麼Learn to Code Glitch合集非常不錯。
我創建了一些作為我的演示和測試組態應用的啟動應用，它們是：
Glitch使創建自己的構建塊變得非常容易，通過將它們固定在個人資料中，您可以始終將它們保持在頂部，以便更容易找到。
重新混音一個項目
一旦您要開始對一個項目進行修改，您只需點擊它，然後出現一個窗口：
有3個按鈕：
- 預覽：項目是代碼，代碼應該做一些事情。這將顯示項目的結果。
- 編輯項目：顯示項目的源代碼，並且您可以開始編輯它
- 重新混音：將項目克隆為一個新項目
每次重新混音一個項目時，都會創建一個新的項目，並隨機生成一個名稱。
以下是剛創建和重新混音另一個項目後的項目示例：
Glitch將其命名為guttural-noodle。點擊名字可以更改它：
您還可以更改描述。
從這裡，您還可以從零開始創建一個新的項目，重新混音當前的項目，或者前往另一個項目。
GitHub的導入/導出
Glitch提供了便捷的從/到GitHub的導入/導出功能：
使您的項目保持私密
單擊鎖定可以使項目變成私密的：
創建一個新項目
單擊“新項目”會顯示3個選項：
- node-app：Node應用程序
- node-sqlite：使用SQLite的Node應用程序
- webpage：網頁
這是一個進入找到那些啟動項目並將它們重新混音的捷徑。在實質上，點擊這些選項之一相當於重新混音現有的項目。
在任何項目中，單擊“展示”將打開一個新的選項卡，其中運行應用程序：
應用URL
請注意URL，它是：
https://flavio-my-nice-project.glitch.me
它反映了應用程序的名稱。
編輯URL有一點不同：
https://glitch.com/edit/#!/flavio-my-nice-project
預覽在glitch.me的子域上運行，而編輯則在glitch.com上完成。
注意到頁面右邊的魚嗎？這是一些Javascript，Glitch建議在項目中添加它，以讓其他人重新混音該項目或查看源代碼：
運行應用程序
每次對源代碼進行更改時，應用程序都會重新構建，並且實時視圖會刷新。
這非常方便，實時應用更改可以立即獲得反饋，這在開發時非常有幫助。
密鑰
您不希望任何API密鑰或密碼被所有人看到。這些密碼必須放在特殊的.env文件中，該文件旁邊有一個鍵。
如果您邀請了共同協作者，他們將能夠查看內容，因為他們是項目的一部分。
但是，重新混音它的人或您邀請的人不會看到文件內容。
管理文件
很容易向項目中添加新文件。
您可以從本地計算機上拖放文件和文件夾，或者單擊文件列表上方的“新文件”按鈕。
重命名、複製或刪除文件的方式也很直觀：
一鍵設置許可證和行為準則
在範例項目中，許可證是一個常被忽視的項目之一，但它決定了他人對您的項目可以做什麼或不可以做什麼。沒有許可證，項目不是開源的，所有權利都被保留，因此代碼無法再分發，其他人也不能對其進行任何操作（注意：這是我理解的，我不是律師）。
Glitch使添加許可證變得非常容易，在“新文件”面板上：
您也可以輕鬆更改它：
行為準則是任何項目和社區的另一個非常重要的部分。它使貢獻者在參與社區時感到受到歡迎和保護。
點擊“添加行為準則”按鈕，即可為開源項目添加範例行為準則。
添加npm包
單擊package.json文件，如果還沒有該文件，請創建一個空的。
單擊頂部出現的添加npm包按鈕，即可添加新的npm包。
此外，如果有需要更新的包，Glitch將顯示需要更新的包數量，您可以通過點擊簡單的按鈕將它們更新為最新的版本：
使用自定義版本的Node.js
您可以在package.json中設置Node.js的版本為這些之一。使用.x將使用主版本的最新發布版本，這是最有用的，例如：
{
//...
"engines": {
"node": "8.x"
}
}
存儲
Glitch擁有持久的文件系統。即使您的應用程序停止運行，或者您長時間不使用它，文件也被保存在磁盤上。
這使您可以將數據存儲在磁盤上，使用本地數據庫或基於文件的存儲（平面文件）。
如果您將數據放在.data文件夾中，這個特殊名稱表示該內容在重新混音時不會被復製到新項目。
在頁面中嵌入一個項目
使用Glitch創建教程的關鍵是能夠在頁面中嵌入代碼和演示視圖。
單擊分享，然後單擊嵌入項目，打開嵌入項目視圖。您可以選擇僅嵌入代碼、應用程序或自定義小部件的高度，並獲取將其放在您的網站上的HTML代碼：
在項目上進行協作
從分享面板中，邀請協作者進行編輯鏈接可以讓您邀請任何人實時與您一起編輯項目。您可以看到他們進行的更改。這非常酷！
尋求幫助
與此協作功能相關聯，有一個很棒的功能：您可以向世界上的任何人尋求幫助，只需在頁面中選擇一些文字，然後點擊舉手圖標：
這會打開一個面板，您可以在其中添加語言標籤和對您需要的內容進行簡要描述：
完成後，您的請求將顯示在Glitch主頁中，供任何人選擇。
當有人加入幫助時，他們將看到您突出顯示的行，並且我發現評論是一種很好的以聊天方式進行溝通的方式：
查看日誌
單擊日誌以訪問應用程序的所有日誌：
訪問控制台
從“日誌”面板，有一個控制台按鈕。點擊它以在瀏覽器中的另一個新標籤中打開交互式控制台：
調試器
在“日誌”面板中點擊調試器按鈕，可以在另一個標籤中打開Chrome DevTools的實例，該實例附帶調試器URL的鏈接。
更改歷史記錄
一個很棒的功能是能夠檢查項目歷史中的所有更改。
這非常類似於Git的工作方式 - 實際上，在這個非常易於使用的界面下，它就是由Git驅動的，點擊⏪按鈕即可打開：
Glitch與Codepen或JSFiddle有什麼不同？
Glitch與其他工具的一個重大區別是可以運行服務器端代碼。
Codepen和JSFiddle只能運行前端代碼，而Glitch甚至可以用作您的應用程序的輕量級服務器 - 在此記住使用限制。
例如，我已經設置了一個Express.js服務器，該服務器在一天的特定時間按照Webhook觸發，執行一些任務。我不需要擔心它在另一台服務器上運行，我只需在Glitch上編寫並直接運行即可。
就是這樣！
希望你喜歡我對使用Glitch的小教程，並且希望我解釋了它的多數主要功能。
還有更多問題嗎？
我建議只是嘗試一下，看看它是否適合您。
Glitch FAQ是一個很好的開始。
玩得開心！