feat/update javascript tutorial

docs/javascript/commands/index.md

@@ -0,0 +1,7 @@
+<script setup>
+import CodeGroup from '../../components/CodeGroup.vue'
+</script>
+
+# 指令
+
+## 待補充

docs/javascript/events/index.md

@@ -0,0 +1,7 @@
+<script setup>
+import CodeGroup from '../../components/CodeGroup.vue'
+</script>
+
+# 事件
+
+## 待補充

docs/javascript/getting-started/index.md

@@ -1,89 +1,224 @@
 <script setup>
+import Block from '../../components/Block.vue'
 import CodeGroup from '../../components/CodeGroup.vue'
 </script>
 
 # 入門
 
-## 下載 node js
+[本教程參考 Discord.js 官方教學](https://discordjs.guide/)
 
-您需要安裝 [Node.js](https://nodejs.org/zh-tw/)。
+## 設定檔
 
-::: tip 提示
-`discord.js v13` 需要 `Node v16.6.0` 或更高版本。
-<br />
-如果要檢查您的設備是否安裝了 Node，請於終端機中運行 `node -v` 如果他輸出 `v16.0.0` 或更高，那麼就表示你就已成功安裝拉!!
-:::
-
-![how install node js](/imgs/javascript/getting-started/nodejs-install-page.jpg)
-
-<!-- TODO: 添加安裝細項 -->
-
-## 初始化專案
-
-創建一個文件夾，並在該文件夾中執行終端機。
-
-::: tip 提示
-
-如果您使用 [Visual Studio Code](https://code.visualstudio.com/)，您可以按 <code>Ctrl + `</code> 打開其集成終端。
-
-:::
-
-在 Windows 上，可以:
+本教學使用 `.env` 檔作為機器人的設定檔，請先安裝 [dotenv](https://www.npmjs.com/package/dotenv) 並建立 `.env` 檔。
 
-- 在專案目錄下按下 `Shift + 右鍵` 並選擇 `在終端中開啟` 及可開啟終端機。
-- 按下 `win + R` 運行 `cmd` ，然後於終端機中運行 `cd 你的專案目錄`。
+### 安裝 dotenv
 
 <CodeGroup>
 <div title="npm" active>
 
 ```bash
-npm init -y
+npm install dotenv
 ```
 
 </div>
 <div title="yarn">
 
 ```bash
-yarn init -y
+yarn add dotenv
 ```
 
 </div>
 <div title="pnpm">
 
 ```bash
-pnpm init -y
+pnpm add dotenv
 ```
 
 </div>
 </CodeGroup>
 
-## 安裝 discord.js 函數庫
-
-於 [初始化專案](./#初始化專案) 中的終端機中輸入以下指令:
+### 建立 `.env` 檔
 
-<CodeGroup>
-<div title="npm" active>
+在根目錄下建立 `.env` 檔並寫入以下內容。
 
 ```bash
-npm install discord.js
+TOKEN=你的機器人的token
 ```
 
-</div>
-<div title="yarn">
+<Block type="danger" title="警告">
 
-```bash
-yarn add discord.js
+如果您使用 Git 管理程式碼，請記得將 `.env` 檔加入到 `.gitignore` 檔中，以避免你的機器人的 token 被洩露。
+
+若機器人的 token 不慎洩露，請立即到 [Discord 開發者中心](https://discord.com/developers/applications) 重新產生一個新的 token。
+
+</Block>
+
+## 建立主檔案
+
+請在根目錄下建立 `index.js` 檔並寫入以下內容。
+
+### 在程式中設定 `.env` 檔
+
+請在程式開頭添加以下程式碼。
+
+```js
+// 設定環境變數
+require('dotenv').config()
 ```
 
-</div>
-<div title="pnpm">
+### 建立網關意圖（Gateway Intents）
 
-```bash
-pnpm add discord.js
+從 `discord.js` 中引入 `GatewayIntentBits` 並使用 `intents` 陣列來設定網關意圖。
+
+::: tip 提示
+`GatewayIntentBits.Guilds` 代表機器人會收到伺服器的資訊，例如伺服器名稱、成員、頻道等等。
+<br>
+`GatewayIntentBits.GuildMessages` 代表機器人會收到伺服器的訊息。
+
+更多網關意圖請參考 [網關意圖](/javascript/intents/)。
+:::
+
+
+```js
+const { GatewayIntentBits } = require('discord.js')
+
+// 設定網關意圖
+const intents = [
+    GatewayIntentBits.Guilds,
+    GatewayIntentBits.GuildMessages
+]
 ```
 
-</div>
+---
 
-</CodeGroup>
+### 建立機器人
+
+從 `discord.js` 中引入 `Client` 並使用 `intents` 陣列來設定網關意圖。
 
-就是這樣！完成所有步驟後，您就可以開始編寫機器人代碼了!! :blush:
+::: tip 提示
+`{intents}` 在javascript中代表 `{intents: intents}`，意思是將 `intents` 值設定給 `intents` 的鍵。
+:::
+
+```js
+const { Client } = require('discord.js')
+
+// 創造一個新的機器人實例
+const client = new Client({intents})
+```
+
+---
+
+### 設定機器人事件
+
+::: tip 提示
+使用 `client.once()` 代表只會觸發一次。
+
+使用 `client.on()` 代表會觸發多次。
+:::
+
+#### 機器人準備好時觸發
+
+當機器人準備好時觸發 `ClientReady` 事件。
+
+```js
+// 使用client.once()代表只會觸發一次
+// 當機器人準備好時觸發
+client.once(Events.ClientReady, async(client) => {
+	console.log(`上線！我是 ${client.user.tag}`)
+})
+```
+
+#### 機器人收到訊息時觸發
+
+當機器人收到訊息時觸發 `MessageCreate` 事件。
+
+```js
+// 使用client.on()代表會觸發多次
+// 當機器人收到訊息時觸發
+client.on(Events.MessageCreate, async(message) => {
+    // 如果訊息是機器人自己發出的，則不做任何事
+    if (message.author === client.user) return
+
+    /*
+     * 注意因為 message.channel.send() 方法是異步的，需要加上await
+     * 這是一種好習慣，不加也能正常運作
+     * 但是在功能複雜的機器人中，可能會因為多個異步函數的呼叫時序不同而導致錯誤
+     */
+    // 回傳相同訊息
+    await message.channel.send(message.content)
+})
+```
+
+---
+
+### 登入機器人
+
+使用 `client.login()` 來登入機器人。
+
+```js
+// 從環境變數中讀取token
+const token = process.env.TOKEN
+
+// 登入機器人
+client.login(token)
+```
+
+---
+
+### 完整程式碼
+
+```js
+// 設定環境變數
+require('dotenv').config()
+
+// 引入discord.js
+const { Client, Events, GatewayIntentBits } = require('discord.js')
+
+// 設定網關意圖
+const intents = [
+    GatewayIntentBits.Guilds,
+    GatewayIntentBits.GuildMessages
+]
+
+// 創造一個新的機器人實例
+const client = new Client({intents})
+
+// 使用client.once()代表只會觸發一次
+// 當機器人準備好時觸發
+client.once(Events.ClientReady, async(client) => {
+	console.log(`上線！我是 ${client.user.tag}`)
+})
+
+// 使用client.on()代表會觸發多次
+// 當機器人收到訊息時觸發
+client.on(Events.MessageCreate, async(message) => {
+    // 如果訊息是機器人自己發出的，則不做任何事
+    if (message.author === client.user) return
+
+    /*
+     * 注意因為 message.channel.send() 方法是異步的，需要加上await
+     * 這是一種好習慣，不加也能正常運作
+     * 但是在功能複雜的機器人中，可能會因為多個異步函數的呼叫時序不同而導致錯誤
+     */
+    // 回傳相同訊息
+    await message.channel.send(message.content)
+})
+
+// 從環境變數中讀取token
+const token = process.env.TOKEN
+
+// 登入機器人
+client.login(token)
+```
+
+### 最後檔案結構
+
+![file-structure](/imgs/javascript/getting-started/file-structure.png)
+
+## 執行機器人
+
+開啟終端機，使用 `node` 執行機器人。
+
+```bash
+node index.js
+```

docs/javascript/installing-nodejs/index.md

@@ -0,0 +1,71 @@
+# 安裝Node.js
+
+## 下載 Node js
+
+訪問 [Node.js](https://nodejs.org/zh-tw/) 頁面，選擇 `18.12.1 長期維護版` ，等待下載完成後，點選 `node-v18.12.1-x64.msi` 進行安裝。
+
+![how install nodejs](/imgs/javascript/installing-nodejs/nodejs-install-page.png)
+
+## 安裝 Node js
+
+### 步驟一
+
+這應該是開啟安裝程式後你會看到的第一個畫面，點選 `Next` 進行下一步。
+
+![how install nodejs step 1](/imgs/javascript/installing-nodejs/nodejs-install-step-1.png)
+
+### 步驟二
+
+點選同意協議，然後點選 `Next` 進行下一步。
+
+![how install nodejs step 2](/imgs/javascript/installing-nodejs/nodejs-install-step-2.png)
+
+### 步驟三
+
+選擇安裝路徑，然後點選 `Next` 進行下一步。
+
+::: tip 提示
+若不清楚操作系統如何處理路徑，請不要更改預設路徑，直接點選 `Next` 進行下一步。
+:::
+
+![how install nodejs step 3](/imgs/javascript/installing-nodejs/nodejs-install-step-3.png)
+
+### 步驟四
+
+選擇安裝選項，然後點選 `Next` 進行下一步。
+
+::: tip 提示
+若不清楚如何選擇安裝選項，請不要更改預設選項，直接點選 `Next` 進行下一步。
+:::
+
+![how install nodejs step 4](/imgs/javascript/installing-nodejs/nodejs-install-step-4.png)
+
+### 步驟五
+
+選擇是否安裝 Build Tools，然後點選 `Next` 進行下一步。
+
+::: tip 提示
+若安裝 Build Tools 選項被選中，安裝程式會在Node.js安裝完成後，自動安裝 C/C++ 編譯器，需要事先安裝 Visual Studio Build Tools 與 Python。
+<br>
+此選項是讓node能夠編譯原生C/C++模組，如果你不需要編譯原生模組，可以不選擇這個選項。
+
+這會花費非常多時間，且會佔用大量的硬碟空間，若你對此選項不瞭解，請不要選取該選項，直接點選 `Next` 進行下一步。
+:::
+
+![how install nodejs step 5](/imgs/javascript/installing-nodejs/nodejs-install-step-5.png)
+
+### 步驟六
+
+若前面步驟都沒有問題，點選 `Install` 進行安裝。
+
+![how install nodejs step 6](/imgs/javascript/installing-nodejs/nodejs-install-step-6.png)
+
+### 步驟七
+
+安裝完成後，點選 `Finish` 關閉安裝程式。
+
+::: tip 提示
+如果要檢查您的設備是否成功安裝 Node.js，請於終端機中運行 `node -v` ，若輸出 `v18.12.1`，即表示已成功安裝。
+:::
+
+![how install nodejs step 7](/imgs/javascript/installing-nodejs/nodejs-install-step-7.png)