Topics

Claude × 非工程師進行應用程式開發① - 製作、測試、調整。「培養」應用程式的嶄新製作方式

  • column

「使用 AI 製作應用程式」本身現在已經不是什麼罕見的話題了。

不久前,AI 還給人「優秀助手」的印象,幫助進行文章摘要和提供想法。但最近,它正逐漸轉變為「可靠的夥伴」,引領開發工作本身。

我們公司成員也越來越多機會接觸 AI,「我也想試著製作些什麼」的想法就這樣應運而生,這就是這個應用程式開發的開端。

我們本想「既然這樣,不如製作對業務有幫助的東西……」,不過最先浮現腦海的並不是工作相關的內容,而是興趣方面的話題。

最近迷上了看電影,每週都會看好幾部,把所有的觀看計畫和喜歡的作品都記在 iPhone 的備忘錄裡。

但是,清單增加的速度很快,而且很多類似的片名,經常出現「咦,這部我看過嗎?」的情況。最後,備忘錄管理最終還是崩潰了。

於是,我決定「乾脆自己製作一個專用工具」,這就是這次介紹的「電影觀看清單」。

即使是粗糙的提示詞也能製作出應用程式

說到使用 AI 進行開發,常常會有「必須寫出條件分解得很細致的提示詞」的印象。

許多人可能都認為,必須先整理好背景和規格,完整無漏地傳達需求,才能做出真正能用的東西。

當然,如果能整理好背景和規格再交給對方,那是最理想的。不過這次實際做過之後才發現,即使指示相當粗糙,對方也能夠恰當地理解我的意圖,認真地進行實現。

雖然當時的應用程式本身相當簡單,但我只是把想做的事情全部堆進提示詞裡,結果就得到了一個能正常運作的應用程式。第一個提示詞大概是這樣的。

我想製作一份電影觀看清單。
由於還是原型階段,希望只用一個HTML檔案就完成,在瀏覽器開啟後就能立即使用。
功能上,我想輸入作品的標題和在哪裡觀看(U-next、Prime Video等),進行註冊,並將註冊的作品以清單形式顯示。
還有,請讓我能標記「已觀看」的狀態。

如果是不用AI的傳統開發方式,即使是再簡單的東西,也得要「考慮UI」「選定使用的技術」「進行編程」,輕輕鬆鬆就要花好幾個小時。而Claude卻在短短幾分鐘內,理解了我想做的事情,從最佳的UI和工具選定到實現,輕鬆地全部搞定。

被那個速度驚到,我甚至感受到了一種超越佩服、近乎恐懼的感覺。

速度這麼快,我的慾望就開始不斷萌發。有了基礎框架後,我就持續不斷地提出各種要求。當時的提示詞也不夠精美,只是把注意到的地方列成要點,告訴對方「修改這裡」,程度上甚至粗糙到對著人類工程師說這樣的話,肯定會招人反感。

經過幾次這樣相當隨意的往來之後,觀看清單的大框架就輕鬆完成了。
即使加上微調,從初版應用程式完成為止,所花的時間只有大約一小時。

想到就立刻實現。邊加入邊育成

框架完成的幾天後,大家聚在一起介紹各自用AI製作的應用程式,我看到了其他成員的作品。其中有人做了一個整合了「Gemini Nano」的應用程式。

一看到這個,我想起「說起來,我自己在找想看的電影時也在用 Gemini。要是把這個功能整合進應用程式,就能基於觀看清單來搜尋電影了吧?」於是回到家後立刻重新開始開發。

如果是跟人合作的話,「開發途中擅自增加規格」會被罵得很慘,但 AI 就能輕鬆應對這種請求,這正是 AI 的厲害之處。它也在幾分鐘內為我實現了電影搜尋功能。

就這樣搜尋功能順利完成了,接下來我開始在乎的就是「精準度」了。

一開始我只是依靠觀看清單中電影的標題和類型,讓 AI 推薦幾部作品,規格相當粗糙。結果常常出現類型符合但不符合個人喜好的電影推薦。我試過改成基於收藏作品來篩選,但效果還是沒有改善。

我想純粹只用標題和類型的資訊太不足了,所以決定加入每部電影的劇情簡介。不過我絕對不想自己一個一個手動輸入劇情簡介……苦惱之後,我還是決定再次借助 AI 的力量。

我改版為「輸入列表的標題後,劇情簡介會自動註冊的機制」。為了確保簡介的精準度,我使用 Wikipedia API 根據輸入的標題取得相應資訊,然後讓 AI 基於這些資訊自動生成簡介。這段程式碼也是由 Claude 幫我撰寫的。

說實話,現在的精準度還有不足之處,最終也在考慮更新為 TMDB API 連動。不過已經達到「小錯誤也還能接受」的程度了。這一連串的微調整只花了大約 2~3 小時。

題外話,後來實際要在真機上使用時,發現 Gemini Nano 似乎無法使用,所以最後改用 Gemini API。雖然免費額度有請求次數的限制,但相比 Gemini Nano,能使用更好的模型,精準度因此大幅提升。

完成的應用程式簡介

這個應用程式是在邊想邊改的過程中「邊使用邊成長」的,沒想到已經具備這麼多功能了。

【觀看清單】

  • 電影標題、類型、串流服務、劇情簡介的註冊
  • 運用各種 API 實現「劇情簡介自動生成」
  • 「未觀看/已觀看」的切換勾選
  • 依類型、收藏、未觀看/已觀看進行篩選功能

【作品搜尋】

  • Gemini 根據收藏資訊推薦電影
  • 可指定類型、推薦數量
  • 推薦作品可一鍵新增至觀看清單
  • 已觀看的電影也可新增至清單,並標記為已觀看狀態

過去「搜尋電影」和「記錄電影」是分開進行的工作,現在全都集中在這個應用程式裡了。
以前每次搜尋時都要向 AI 說明自己的喜好,現在省去了這個麻煩,隨時都能找到喜歡的電影。

原本的目的——觀影清單功能,也能按照觀看狀態、我的最愛和類型篩選,管理的便利程度遠超過去用記事本的時代。

個人來說很高興的是,當搜尋結果中有漏掉新增到清單的作品時,能一鍵新增。
省去了逐一輸入標題登記的麻煩。

總結

讀到這裡各位或許已經發現,在這次應用程式開發中,我一行程式碼都沒有寫。我只是用語言表達「想要這樣的功能」,Claude 就把一切都實作出來了。

實際做了之後,最先想到的一點是「不需要一開始就決定完成形式」。在使用的過程中發現「哦,還想要這個」「這個有點不對」,然後再告訴 Claude。與其說是在「製作」應用程式,不如說更接近「培育」的感覺。

要是有人因為「一定要好好寫提示詞」而猶豫不決,不妨先隨便試試看。如果結果和想像不同,只需要逐步修正就行了,幾乎沒有真正意義上的失敗。只要試過一次,就能體會到「啊,意外地還不錯呢」的感覺。

誠摯邀請各位輕鬆地試試看。

本文作者

作為從新人入職以來的升進型導演,目前正奮力工作中!從設計到廣告營運,目標成為能掌握各個領域的多才多藝人才,每天都在挑戰自我。工作上追求俐落的導演手法,私生活則樂享在堡壘般的家中宅居。也喜歡看動畫。

Handa 醬

Web 導演 / 2022年入社

查看此員工的文章

信心十足的團隊體制與迅速的應對能力是我們的優勢

Liberogic 擁有經驗豐富的人員積極推進專案,因而獲得客戶的高度評價。
我們恰當地安排專案經理和總監,致力於順利推進整個專案。 我們避免不必要的全面投入而導致成本增加,而是採用適材適所配置資源的方式,因此在業務把握到估價制作與提交的速度上也備受好評。

請注意,我們不積極進行 SES 形式的駐場業務。

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

請諮詢我們解決您的網站問題。

案例分析