使用線上 IDE Project IDX 開發 Flutter App
Google 推出了令人期待的線上 IDE Project IDX，以後只要在有網路的地方，我們可以用任何電腦打開瀏覽器寫程式，不用再花時間裝軟體準備開發環境了。
Project IDX 有著類似 VS Code 的操作介面，它可以開發許多程式，比方 Flutter、Go、Python、Node 等，而且它還搭配 Google 的 AI Gemini 輔助我們寫程式呢。
允許 third-party cookies
為了使用 IDX，我們必須先讓瀏覽器允許 third-party cookies，方法如下。
點選 Safari 的 Settings。
取消 Advanced > Block all cookies 的勾選。
取消 Privacy > Prevent cross-site tracking 的勾選。
啟用 Project IDX
連到 IDX 網站，點選右上的 Get Started 登入 Google 帳號。
登入成功後，同意相關的服務條款後按 Continue。
啟用 AI 功能，點選 Enable AI Features。
點選 Continue。
可以開始用 IDX 寫程式了 !
ps: 關於 Project IDX 的詳細操作說明，可進一步參考以下連結。
使用 Project IDX 開發 Flutter App
點選 Flutter。
設定 workspace 名稱。
成功建立 Flutter 專案，Project IDX 的介面跟 VS Code 類似，開發體驗就像使用線上版的 VS Code。
切換右邊 preview 顯示的裝置，比方點選 Android。
啊，怎麼沒有彼得潘最愛的 iOS 呢 ? 查了官方的教學，原來 IDX 拿掉了 iOS 模擬器的支援，希望它未來能加回來。
好吧，彼得潘只能勉強自己開發 App 時搭配 Android 模擬器。
使用 Project IDX 就像使用 VS Code，同樣能用快速鍵(cmd + shift + p)叫出 Command Palette 輸入指令.
同樣有方便的自動完成。
使用 trailing-commas 也會在存檔(cmd +s)時自動縮排。
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text(
'I ❤️ 🍎',
style: TextStyle(fontSize: 50),
),
),
);
}
}修改程式後也會自動 hot reload。
從下圖的選單可點選 Hot Reload、Full Reload 或 Hard Restart。
上傳檔案、圖片也很方便，可以用拖曳的方式或是從右鍵選單點選 Upload。
Run and Debug App
除了從 preview 操作 App，我們也可以另外啟動模擬器執行 App。若想從 Debug Console 查看 print 列印的訊息，記得要啟動模擬器執行 App，預設的 preview 模式將無法看到 print 列印的訊息。
- 方法 1: 點選 main.dart 後，點選 function main 上方的 Run 或 Debug。
- 方法 2: 點選 main.dart 後，點選側邊欄的三角形 button，然後點選 Run and Debug。
debugger 選擇 Dart & Flutter。
使用 Project IDX 的 AI 功能
Project IDX 的另一個強大功能是 AI 程式助手，它的操作跟 GitHub Copilot 類似，初次使用前請先點選下方的 IDX AI。(快速鍵 Cmd+Shift+Space)
同意 IDX 的 privacy policy 後才能暢快地跟 AI 聊天。
可以開始跟 AI 聊天了 !
我們可以在 IDX AI 分頁下方的框框輸入 prompt，下圖我們請它說明 Scaffold。
AI 產生的程式也可以方便地加到專案，下圖的黃色框框按鈕是在目前的游標位置 insert code ，紅色框框按鈕是 copy code。
任何程式問題都可以問它，雖然 IDX 不能開發 SwiftUI，但是它也是略懂 SwiftUI。
我們也可以按下 cmd + i 叫出 AI 聊天框框輸入 prompt。
點選 Accept 可輸入 AI 建議的程式。
我們也可以選取某段程式，然後從右鍵選單點選 IDX AI 請 AI 幫忙。
比方點選 Do anything with selected code，輸入將文字顏色改成綠色。
當我們輸入程式時，AI 也會馬上提供建議，按 tab 可輸入 AI 的建議。
相關連結。
Project IDX 的 workspace 上限
Project IDX 預設只能建立一個 workspace，建議申請 Google Developer Profile，它可將上限提高到 5 個。
One More Thing，寫寫 Python & C
我們也可以用 Project IDX 寫一些簡單的 Python & C 程式，方法如下。
建立 workspace 時選擇 Misc 的 Blank Workspace。
- Python 程式。
新增 python 檔。
請 AI 幫忙寫個計算數字 1 加到 10 的 main function。
從下方的 TERMINAL 視窗執行 python 程式。
- C 程式。
新增 c 檔，請 AI 寫一個 main function，計算數字 1 加到 10。
完整的程式如下。
#include <stdio.h>
int main() {
int sum = 0;
for (int i = 1; i <= 10; i++) {
sum += i;
}
printf("The sum of numbers from 1 to 10 is: %d\n", sum);
return 0;
}從下方的 TERMINAL 視窗用 gcc 編譯 C 程式。雖然 gcc 沒有安裝，我們還是可以從 package 清單選擇 gcc。
編譯 C 程式後將產生執行檔 a.out，輸入 ./a.out 即可執行程式。
