Topics

試用 Google 的程式碼代理工具「Jules」

  • column

「AI 寫程式碼,那我們是不是就沒工作了?」這種玩笑話,最近已經越來越不像玩笑了。GitHub Copilot、CodeX 等工具早已能幫忙寫程式碼,而這次 Google 推出的 Jules,似乎又更上一層樓。

Jules 搭載了 Google 最新的 Gemini 2.0,而它最大的特色是 自主運作!

或許有一天,它真的能代替我們處理所有工作也說不定。讓人十分期待!我們實際測試了它能做些什麼。

Jules 能做的事

Jules 是一款 能自主執行程式設計任務的 AI 代理。它不只是產生程式碼,還能執行以下進階的自動化作業。

  • 拆解複雜任務並規劃方案:將指定的任務拆分為小步驟,並擬定實作計畫。
  • 程式碼生成與修改:可跨越多個原始檔產生程式碼,或修改既有程式碼。
  • 錯誤修正與除錯:找出程式碼中的錯誤並加以修正。
  • 撰寫與執行測試:執行既有測試或建立新測試,驗證變更是否正確運作。
  • 取得儲存庫與複製:從 GitHub 等儲存庫取得程式碼,並複製到虛擬機器中進行作業。
  • 建立 Pull Request:完成程式碼變更後,以 Pull Request 的形式提出建議。
  • 非同步作業:使用者在進行其他工作時,程式編寫任務可在背景持續進行。
  • 語音摘要(CodeCast):可產生語音內容,彙整近期的程式碼活動摘要。

ChatGPT 的新功能「Codex」有何不同?

什麼是 Codex?

Codex 搭載了 OpenAI 開發的專用大型語言模型「codex-1」。此模型以最新模型「o3」為基礎,針對軟體開發進行最佳化,是一款融合資深工程師的程式編寫風格與專業知識的智慧模型。

主要功能

  • 程式碼補全、建議與生成(即時)
  • 從註解生成程式碼
  • 現有程式碼的函式與方法建議
  • 擅長對既有程式碼庫進行修改與擴充

Codex/Copilot 主要以「輸入輔助」的形式運作,在撰寫或修改既有程式碼時即時提供協助。定位上類似 AI 結對程式設計工具(編碼輔助工具)。

另一方面,Jules 作為「代理開發者」,最大的差異在於能自主執行從專案啟動到完成為止的更廣泛任務。因此,Jules 也有可能從零開始協助建置新專案的初期階段,可以說更聚焦於「開發任務的自動化」。

  • 也能建立新專案:Jules 能依照使用者的指示(例如「建立一個基本的 Web 應用程式」),從零開始建立所需的檔案與目錄結構,並生成程式碼。
  • 與 GitHub 儲存庫深度整合:Jules 會將使用者指定的 GitHub 儲存庫複製到虛擬環境中並在其中作業。因此不僅限於單一檔案的修改,還能進行整個儲存庫的結構性變更、新增檔案、刪除既有檔案等,對整個專案進行操作。
  • 自主作業:從專案的初始設定、建立檔案、生成程式碼、執行測試,到建立 Pull Request,Jules 會自主推進整個流程。

Jules 的自主性更高,可以將整個開發任務交付給它,定位上就像一位「代理程式設計師」!

實際試用看看!

Jules 的使用方法

Jules 主要是透過聊天式 UI來下達指令。

1.存取 Jules:可透過 jules.google.com 進行存取。

2.連接 GitHub 儲存庫:選擇要作業的 GitHub 儲存庫與分支。這次為了測試,我們準備了「jules-test」儲存庫。

3.以提示詞下達指令:使用日文也沒問題!這次我們要試著用 JS 實作時鐘。

4.核准實作計畫:Jules 會先提出實作計畫,使用者審閱後予以核准。它會替我們規劃工作流程,非常容易理解!

5.執行程式碼與確認進度:計畫獲得核准後,Jules 會自動開始撰寫程式碼,並回報工作進度。
雖然需要一點時間,但已經產生 index.html、script.js、style.css 檔案了!

6.審閱並核准變更:變更完成後,Jules 會建立包含差異(diff)的 Pull Request。使用者審閱並核准後,變更即會合併至儲存庫。

你是否也覺得 commit 訊息其實很難想?Jules 會幫你自動摘要並產生!

點擊右下角的 publish branch,即可推送至 tokyo-clock 分支。

拉取分支後…編輯器中已產生檔案!

瀏覽器預覽長這樣!

以往的 AI 功能只要輸入「用 JavaScript 實作時鐘」之類的提示詞,通常只會告訴你實作步驟或程式碼內容,但這次的工具已經能從建立檔案一路做到與 git 連動,完成整串作業!

不過,像這次這種簡單的實作,全部交給它應該沒問題,但實際上能放心交付多大規模的實作,目前還不太清楚……這就是我的想法。

接著我再追加一個需求,請它「讓裝飾更華麗一點」。

它提了幾個方案,我就直接交給它決定。

它已將背景改為漸層!

只要建立一個 repository,它就能從零生成檔案、撰寫程式碼,甚至推送到 git,太厲害了!簡直就是代理程式設計師。

不過目前仍以 beta 版提供,並有使用限制(例如每天 5 個任務)。

另外,建立檔案與實作程式需要一些時間,而且輸入欄位也曾出現錯誤,導致內容無法正確套用。

此外,據說 Jules 遇到錯誤時,當下的工作不會被 commit,因此即使想取得做到一半的差異內容,也可能無法套用。

我們實際請 Jules 將這次的 JavaScript 時鐘實作改寫為 Next.js,它也順利完成轉換並建置好了開發環境,但途中遇到錯誤,導致 Next.js 的檔案始終無法拉取到本機……。雖然十分方便,但我認為其中也存在不少缺點。

總結

如果 Jules 今後持續變得更聰明,或許就能把繁瑣的例行工作交給 Jules 處理,讓您能將更多時間投入學習新技術或享受個人興趣!

Jules 或許能以工程師夥伴的身分,徹底改變開發的常規做法呢!

圖片引用:取自 Jules 官方網站

關於撰寫本文的人

主要以標記(markup)為核心,並使用 JavaScript、React 與 Next.js 進行前端開發。若我參與的網站能順利上線,我會非常開心!興趣是彈吉他。喜歡貓咪和烤地瓜🐱🍠

Hirattch

前端工程師 / 2022 年入職

查看此員工的文章

我們的優勢在於穩健的團隊體制與快速的應對能力

Liberogic 由經驗豐富的資深人員積極推動專案,因此獲得客戶的高度評價。
我們會妥善指派專案經理與總監,致力於順利推進整體專案。 我們採取依據專案需求適才適所分配資源的方式,避免因全程投入而增加不必要的成本,並且在掌握業務內容、製作與提交估價方面的速度也廣受好評。

注: 本公司不積極承接類似 SES 的駐點業務等,敬請事先諒解。

可搭配 Slack、Teams、Redmine、Backlog、Asana、Jira、Notion、Google Workspace、Zoom、Webex 等幾乎所有主要的專案管理工具與聊天工具使用。

歡迎諮詢您的 Web 相關問題。

案例分析