---
# System prepended metadata

title: Project IDX 線上IDE開發程式
tags: [TPI-TPIU]

---

type:: post
status:: doing
star:: 5
relation:: [[@Winny/Topic/Node js 與 npm 版本衝突問題討論]] [draft.gist↗](https://gist.github.com/wanyutang/940f36706068e511888a4c14b4be2db9) [sample.gist](https://gist.github.com/wanyutang/ba0b21f3090a068595e7695856a9d91b) [hackmd↗](https://hackmd.io/@VxulnppPQHuOEDANOU92EQ/ByJRfjo0R)
history:: [[2024-10-03]]start

 # Project IDX 線上IDE開發程式
 -  This article is the original draft, will published at [[TPIU 昕力大學]][↗](https://www.tpisoftware.com/tpu/).
 ## 前言
 - 本文將介紹Google IDX（Integrated Development Experience），一個基於 Visual Studio Code 的雲端開發環境，旨在提供多使用者協作和跨平台開發的便利。
 ## 簡介
 - Google IDX（Integrated Development Experience）基於 Visual Studio Code (VSCode) 的架構和設計，目的是提供一個雲端的開發環境。這使得使用者可以享受到 VSCode 的許多功能，如語法高亮、代碼自動完成以及即時預覽，同時還能利用雲端計算的優勢，進行多使用者協作和跨平台開發。因此，Google IDX 繼承了 VSCode 的許多特性，但也針對特定的雲端開發需求進行了調整和優化。
 ## 登入 Google IDX
 - 前往 Google IDX 登入頁面 https://idx.google.com
		  ![Screenshot 2024-10-03 09 04 52](https://gist.github.com/user-attachments/assets/1b60cc76-fc6b-4304-9a7f-fa6616085993)
 - 使用已註冊的 Google 帳戶電子郵件登入註冊
		  ![Screenshot 2024-10-03 09 05 16](https://gist.github.com/user-attachments/assets/aade2999-6142-4ecb-a0de-5c59449a78e1)
 - 登入成功後，進入 Google IDX 的主頁面, 點選 [Get Started] 
		  ![Screenshot 2024-10-03 09 08 13](https://gist.github.com/user-attachments/assets/c74f0da5-e843-42a3-bbc1-547b7773965d)
 ## 匯入 GitHub 專案程式
 - 點選右下角 [Import a repo] 匯入git repository
		  ![Screenshot 2024-10-03 09 09 39](https://gist.github.com/user-attachments/assets/e8341cb8-6e6a-4316-8663-f6286cb2eb6b)
 - 輸入 git 位置：https://github.com/wanyutang/demo-admin-nuxt3
		  ![Screenshot 2024-10-03 09 12 05](https://gist.github.com/user-attachments/assets/11e0e4b0-c780-48eb-adb4-178fafb70d2f)
 - 開發環境建置中.....
		  ![Screenshot 2024-10-03 09 12 25](https://gist.github.com/user-attachments/assets/aefc44a8-7d15-4ef8-a7ec-261972918c96)
 - IDX 將會要求取得 Git Hub Repository 授權
		  ![Screenshot 2024-10-03 09 15 29](https://gist.github.com/user-attachments/assets/589ee9e8-934a-4668-a700-82b6fd2f1b03)
 - 點選 [Allow] 同意後介面會出現等下會用到的一次性 code， 點選 [Copy & Continue to GitHub] 按鈕進入 GitHub 認證畫面
		  ![Screenshot 2024-10-03 09 15 49](https://gist.github.com/user-attachments/assets/13d36baa-b428-495f-85be-e142c20501bc)
 - 登入 GitHub 網站後點選 [continue] 進入下一步
		  ![Screenshot 2024-10-03 09 15 56](https://gist.github.com/user-attachments/assets/2fe35691-464a-441e-a638-5662ba7ca1c7)
 - 之前在 IDX 取得的 code 在這裡輸入， 使用 Ctrl + P 貼上
		  ![Screenshot 2024-10-03 09 16 09](https://gist.github.com/user-attachments/assets/52fae416-9893-4c28-8f46-c4d53b658265)
 - 線上 IDX 取得 GitHub 認證畫面, 點選 [Authorize Visual-Studio-Code] 進行認證
		  ![Screenshot 2024-10-03 09 17 09](https://gist.github.com/user-attachments/assets/5e708861-bcd9-4242-bbff-71a6a50fed5d)
 - 完成認證設定後回到 [[Project IDX]] 線上ID
		  ![Screenshot 2024-10-03 09 17 51](https://gist.github.com/user-attachments/assets/2a71922b-0ce7-4d5e-b5ab-65b5e543b49d)
 - Google IDX 基於 VSCode 的架構和設計,所以操作介面與 vscode 差不多
		  ![Screenshot 2024-10-03 09 18 28](https://gist.github.com/user-attachments/assets/0cbc00ea-3c45-4d45-bc1a-7ac4f9e1649f)
 ## 預覽 UI 介面
 - [[Project IDX]] 會自動檢測專案內容, 常見的程式架構在啟用 IDX 時會自動 build and deploy
		  ![Screenshot 2024-10-03 09 19 45](https://gist.github.com/user-attachments/assets/f365e588-0de0-4ce6-aaf9-336bae30d1df)
	 - 需要一些時間進行 install and run,右方會出現預覽可以方便開發檢視程式修改結果
 - View 視窗也有提供功能另開視窗檢視測試頁面
		  ![Screenshot 2024-10-03 09 20 22](https://gist.github.com/user-attachments/assets/bcb93f1d-83e9-4a0c-95db-865dae7fb228)
 - 點選 [Open] 後可以在新的 tag 測試 UI 畫面
		  ![Screenshot 2024-10-03 09 20 54](https://gist.github.com/user-attachments/assets/41e701bc-ae2c-48a4-9aae-53cc1cef5219)
 ## 設定 Docker 開發環境
 - [[Project IDX]] 雖然能自動偵側大部份的專案架構以提供適合的開發環境， 但仍有不足之處， 遇到太舊的版本可能就無法支援， 此時可以在線上 IDX 使用 docker image 來進行佈版測試
		  ![Screenshot 2024-10-03 09 55 23](https://gist.github.com/user-attachments/assets/5fbf8e4f-247a-4391-8baf-4abaaa8c08e3)
	 - dev.nix 有異動時， 右下角會出現 [Rebuild Environment] 按鈕，確認設定完成後點選該功能以使用新的環境設定進行 Rebuild 開發環境
	 - 啟用 docker 環境需要修改 dev.nix
	```yml
			   # .......... 略 ........
			   packages = [
			      # pkgs.go
			      # pkgs.python311
			      # pkgs.nodejs_20
			      pkgs.docker
			    ];
			    # .......... 略 ........
			    services.docker.enable = true;
	```
		 - packages 增加 pkgs.docker
		 - docker enable 設成 true
	 ## 安裝 vscode Docker 套件
	 - 左方套件安裝介面找到 docker 並點選安裝
			  ![Screenshot 2024-10-03 09 21 51](https://gist.github.com/user-attachments/assets/a230c4c1-e99b-4a56-9ac0-454b4d52271b){:width 300, :height 210}
	 - 安裝完成左方選單會出現 Docker 套件的工具列
			  ![Screenshot 2024-10-03 09 59 02](https://gist.github.com/user-attachments/assets/1fa80ef4-9137-4630-a78d-d420c43d48e9)
 ## Docker Complse run Nodejs 專案
 - 在專案根目錄建置 [docker-compose.yml](https://gist.github.com/wanyutang/ba0b21f3090a068595e7695856a9d91b#file-x-docker-compose-yml)
```yml
		  version: '3'
		  services:
		    app:
		      image: node:18
		      container_name: node-app
		      working_dir: /usr/src/app
		      volumes:
		        -  .:/usr/src/app
		      ports:
		        -  "3000:3000"
		      command: sh - c "yarn install && yarn dev"
		      restart: unless-stopped
		      environment:
		        -  NODE_ENV=development
```
	 - 這裡設定開發 port 3000 給 IDX 預覽佈版使用
 - 右鍵選擇 [Compose Up] 啟用 Docker
		  ![Screenshot 2024-10-03 09 31 26](https://gist.github.com/user-attachments/assets/b2245fcb-6a87-43a6-a0eb-eccb9e82a789)
 - CONTAINERS 工具視窗可以觀察 containers 的建置狀態， 右鍵可以進行基本的操作指令
		  ![Screenshot 2024-10-03 10 02 15](https://gist.github.com/user-attachments/assets/5e9cc872-974d-464f-8610-9f49f622b842)
 ## Project IDX Ports 預覽
 - 左方找到 Project IDX 工具視窗， 在最下方 [BACKEND PORTS] 可以找到 vm 3000 port 對應的 URLs
		  ![Screenshot 2024-10-03 10 00 42](https://gist.github.com/user-attachments/assets/c4d64ae2-cd08-45e8-ae1b-8c2b09bd6ed6)
 - 點選 [Open] 以新視窗開啟預覽頁面
		  ![Screenshot 2024-10-03 10 00 49](https://gist.github.com/user-attachments/assets/5494c453-b86c-4fd8-93a5-6eeaf1616140)
		  ![Screenshot 2024-10-03 09 20 54](https://gist.github.com/user-attachments/assets/41e701bc-ae2c-48a4-9aae-53cc1cef5219)
 - 
 ## Gemini in IDX
 -  透過 Project IDX 的 Gemini API以簡化開發流程，開發者可以將這些 AI 功能嵌入到應用程式中，進一步提升開發效率​
 -  Project IDX 介面右下角點選 [Gemini] 前往啟用 AI 設定後點選 [Continue] 就可以愉快的跟 AI 聊天了
	  ![Screenshot 2024-10-03 10 16 34](https://gist.github.com/user-attachments/assets/a3edfa15-d0ae-48c5-a5a2-a3453c6f67d9)
	  ![Screenshot 2024-10-03 10 16 58](https://gist.github.com/user-attachments/assets/e98a6449-2f7b-4750-bfb1-6f2d0b893f33)
 ## 總結
 -  **雲端開發環境**：Google IDX 提供雲端開發平台，讓開發者能夠隨時隨地進行開發工作。
 -  **協作功能**：IDX 支持團隊協作，允許多位開發者同時工作，提升專案的協同效率。
 -  **跨平台支持**：該平台支持多種作業系統和裝置，讓開發者能夠在不同環境下進行開發。
 -  **提升生產力**：Google IDX 的直觀介面和強大功能能夠幫助開發者更快地完成任務，提升整體工作效率。
 -  **未來趨勢**：隨著雲端技術的進步，IDX 預示著未來開發環境的趨勢，將成為開發者重要的工具。
 ## 參考來源
 -  [Docker 實戰指南](https://5xcampus.com/courses/docker.html?srsltid=AfmBOooo835EEd_759r9U4ut1zWW0U44-ofpKctUPn_Tt9ufU0sjFvQs)
 -  [Docker Documentation](https://docs.docker.com/)
 -  [npx: A Tool for Running npm Package Binaries](https://www.npmjs.com/package/npx)
 -  [Node.js Wiki](https://zh.wikipedia.org/zh-tw/Node.js)
 ## 延申閱讀
 -  [使用 Docker Compose 摻在一起做懶人包](https://ithelp.ithome.com.tw/articles/10243618)
 -  [[實作筆記] 如何更無痛更新專案中的 npm 相依套件](https://blog.marsen.me/2022/09/08/2022/how_to_npm_update_more_smoothly/)
 -  [nodejs 專案之間自動切換版本的好用工具 – volta](https://www.pigo.idv.tw/archives/3410)
 -  [nvm：安裝、切換不同 Node.js 版本的管理器](https://titangene.github.io/article/nvm.html)
 ## 外部連結
 -  [Volta Official Website](https://volta.sh/)
 -  [nvm GitHub Repository](https://github.com/nvm-sh/nvm)
 -  [[Project IDX]][↗](https://idx.dev/)[1]
 -  [[@Winny/Topic/Node js 與 npm 版本衝突問題討論]][↗](https://gist.github.com/wanyutang/f189b01142464ed421c593421cddf690)
 -  [[Winny Post]][↗](https://hackmd.io/@VxulnppPQHuOEDANOU92EQ/SymfrcyRA/%2FkHOaExJWQuufXTXSu4-slg)
 ## 註腳
  [1] [[Project IDX]][↗](https://idx.dev/) : Project IDX is an AI-assisted workspace for full-stack, multiplatform app development in the cloud. With support for a broad range of frameworks, languages, ...