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
- 使用已註冊的 Google 帳戶電子郵件登入註冊
- 登入成功後，進入 Google IDX 的主頁面, 點選 [Get Started]
## 匯入 GitHub 專案程式
- 點選右下角 [Import a repo] 匯入git repository
- 輸入 git 位置：https://github.com/wanyutang/demo-admin-nuxt3
- 開發環境建置中.....
- IDX 將會要求取得 Git Hub Repository 授權
- 點選 [Allow] 同意後介面會出現等下會用到的一次性 code， 點選 [Copy & Continue to GitHub] 按鈕進入 GitHub 認證畫面
- 登入 GitHub 網站後點選 [continue] 進入下一步
- 之前在 IDX 取得的 code 在這裡輸入， 使用 Ctrl + P 貼上
- 線上 IDX 取得 GitHub 認證畫面, 點選 [Authorize Visual-Studio-Code] 進行認證
- 完成認證設定後回到 [[Project IDX]] 線上ID
- Google IDX 基於 VSCode 的架構和設計,所以操作介面與 vscode 差不多
## 預覽 UI 介面
- [[Project IDX]] 會自動檢測專案內容, 常見的程式架構在啟用 IDX 時會自動 build and deploy
- 需要一些時間進行 install and run,右方會出現預覽可以方便開發檢視程式修改結果
- View 視窗也有提供功能另開視窗檢視測試頁面
- 點選 [Open] 後可以在新的 tag 測試 UI 畫面
## 設定 Docker 開發環境
- [[Project IDX]] 雖然能自動偵側大部份的專案架構以提供適合的開發環境， 但仍有不足之處， 遇到太舊的版本可能就無法支援， 此時可以在線上 IDX 使用 docker image 來進行佈版測試
- dev.nix 有異動時， 右下角會出現 [Rebuild Environment] 按鈕，確認設定完成後點選該功能以使用新的環境設定進行 Rebuild 開發環境
- 啟用 docker 環境需要修改 dev.nix

			   # .......... 略 ........
			   packages = [
			      # pkgs.go
			      # pkgs.python311
			      # pkgs.nodejs_20
			      pkgs.docker
			    ];
			    # .......... 略 ........
			    services.docker.enable = true;

- packages 增加 pkgs.docker
- docker enable 設成 true
## 安裝 vscode Docker 套件
- 左方套件安裝介面找到 docker 並點選安裝
{:width 300, :height 210}
- 安裝完成左方選單會出現 Docker 套件的工具列
## Docker Complse run Nodejs 專案
- 在專案根目錄建置 [docker-compose.yml](https://gist.github.com/wanyutang/ba0b21f3090a068595e7695856a9d91b#file-x-docker-compose-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
- CONTAINERS 工具視窗可以觀察 containers 的建置狀態， 右鍵可以進行基本的操作指令
## Project IDX Ports 預覽
- 左方找到 Project IDX 工具視窗， 在最下方 [BACKEND PORTS] 可以找到 vm 3000 port 對應的 URLs
- 點選 [Open] 以新視窗開啟預覽頁面
-
## Gemini in IDX
- 透過 Project IDX 的 Gemini API以簡化開發流程，開發者可以將這些 AI 功能嵌入到應用程式中，進一步提升開發效率​
- Project IDX 介面右下角點選 [Gemini] 前往啟用 AI 設定後點選 [Continue] 就可以愉快的跟 AI 聊天了
## 總結
- **雲端開發環境**：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, ...