建立資料夾

先打開終端機，用 cd Projects 進到昨天建立的 projects 資料夾裡。

接著用 mkdir little_pocket新建一個 little_pocket 資料夾。

接著繼續切換到little_pocket 資料夾中，也就是輸 cd little_pocket

小技巧: [Tab]補完

在終端機中，輸入 cd P 之後按下鍵盤上的 [Tab]，終端機會試著幫你找到可能的選項，如果目前的資料夾中只有一個"P"開頭的資料夾，那麼就會直接幫你補全所有的字母。

1. 輸入 cd P然後按 [Tab]
2. 再按 [Enter] 就進入 ~/Project 資料夾中了。
3. 當然在建好 little_pocket 資料夾後，也可以用 cd l 然後按 [Tab]補完。

在資料夾中開啟 Gemini Cli

繼續在終端機中，輸入 gemini

這時應該看得到 Gemini Cli 的畫面。

我們昨天說過 HTML, CSS 及 JavaScript 的功能。另外為了要把每一筆帳目存下來，我們還會用到瀏覽器內建的 LocalStorage 這個功能。先知道這個字就好，之後會更加詳細的解釋。

輸入或複製貼上以下文字，再按下鍵盤上的[Enter]:

我想要製作一個零用錢記帳程式，請使用 HTML, CSS, JavaScript 製作，並用瀏覽器的 LocalStorage 儲存，寫在同一個檔案上。

請先跟我討論畫面的組成，確認後再開始寫程式。

我們想要的畫面，應該要有以下項目：

1. 目前的餘額
2. 新增交易的區域，需要能夠選擇「收入」或是「支出」，填金額用的數字欄位、說明的文字欄位及送出按鈕。
3. 最後要有記錄的區塊，能顯示一筆筆的記錄
4. 每筆記錄要有時間，名稱及金額

如果缺了什麼的話，就跟 AI 討論吧！如果覺得 OK 了，可以跟 AI 說「確認」，就會開始生成程式了。

AI 會運作一段時間，每次需要變更檔案內容時，Gemini Cli 會顯示一段程式碼，並提示「Apply this change?」，這時用鍵盤的[上][下]選擇「1. Yes, allow once」就會將程式碼寫入檔案中了。

用 Finder 打開同一個資料夾裡找到這個檔案，用滑鼠點兩下，就會用 Google Chrome 瀏覽器開啟這個檔案。

接下來就可以試玩一下我們寫好的記帳程式了。

回顧

今天實際操作了 Gemini Cli 生成一個單網頁的應用程式。我們練習了上一章提到的 cd、mkdir 等命令。也知道怎麼跟 Gemini Cli 互動了。下一章要來研究一下我們生成的程式碼，以及怎麼修改程式。