最近在試著學習寫程式，沒想到搭配Google Gemini一下子就成功了，這篇就想來紀錄一下我寫的程式。
第一步驟：確認需求
最近在學著做甜點，但是常常因為某項材料份量跟網路食譜不一樣，所以要換算比例很麻煩，所以想來做一個可以自動貼上食譜，並且幫助我依照我有的材料換算全套食譜的程式。第二步驟：下prompt
我逐一跟Google Gemini下指示，以下是我歷次下的prompt，也一一修正了我的需求。
- 我想要可以自動輸入某個食譜的比例，然後再跟它說我其中一項材料有多少，就可以幫我換算出整份食譜有的比例。
- 我想要一口氣貼上所有的食譜比例，我不想要一個一個輸入每一個單項食譜比例。
- 我可以用下拉式選單選其中一項材料，然後我只要輸入數字就好了。
- 我是mac電腦，請告訴我怎麼做。
第三步驟：長出程式碼
下完prompt後，Gemini就幫我寫了一個HTML的程式碼如下：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>烘焙比例自動換算器</title>
<style>
body { font-family: sans-serif; padding: 20px; max-width: 600px; margin: auto; background-color: #f4f4f9; }
.card { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
textarea { width: 100%; height: 120px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; padding: 8px; box-sizing: border-box; }
.row { display: flex; gap: 10px; margin-bottom: 15px; align-items: center; }
select, input { padding: 10px; border: 1px solid #ddd; border-radius: 4px; flex: 1; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border-bottom: 1px solid #eee; padding: 12px; text-align: left; }
th { background-color: #f8f8f8; }
.highlight { font-weight: bold; color: #e67e22; }
</style>
</head>
<body>
<div class="card">
<h2>🍞 烘焙比例換算器</h2>
<label>1. 貼上原始食譜內容：</label>
<textarea id="rawRecipe" placeholder="例如： 高筋麵粉 500g 水 350ml 酵母 5g 鹽 10"></textarea>
<div id="controlPanel" style="display:none;">
<label>2. 選擇基準材料與輸入重量：</label>
<div class="row">
<select id="ingredientSelect"></select>
<input type="number" id="inputAmount" placeholder="現有重量">
</div>
</div>
<div id="resultTable"></div>
</div>
<script>
const rawRecipe = document.getElementById('rawRecipe');
const ingredientSelect = document.getElementById('ingredientSelect');
const inputAmount = document.getElementById('inputAmount');
const resultTable = document.getElementById('resultTable');
let parsedRecipe = {};
// 解析文字食譜
rawRecipe.addEventListener('input', () => {
const text = rawRecipe.value;
const regex = /([^\d\s\w\n,，。]+)\s*(\d+\.?\d*)/g;
let match;
parsedRecipe = {};
ingredientSelect.innerHTML = '<option value="">-- 請選擇材料 --</option>';
while ((match = regex.exec(text)) !== null) {
const name = match[1].trim();
const amount = parseFloat(match[2]);
parsedRecipe[name] = amount;
let opt = document.createElement('option');
opt.value = name;
opt.textContent = name;
ingredientSelect.appendChild(opt);
}
if (Object.keys(parsedRecipe).length > 0) {
document.getElementById('controlPanel').style.display = 'block';
}
});
// 進行計算
function calculate() {
const target = ingredientSelect.value;
const currentVal = parseFloat(inputAmount.value);
if (!target || !currentVal || !parsedRecipe[target]) return;
const ratio = currentVal / parsedRecipe[target];
let html = `<table><tr><th>材料</th><th>換算後重量</th></tr>`;
for (let name in parsedRecipe) {
const newWeight = (parsedRecipe[name] * ratio).toFixed(1);
const isTarget = name === target ? 'class="highlight"' : '';
html += `<tr><td>${name}</td><td ${isTarget}>${newWeight}</td></tr>`;
}
html += `</table>`;
resultTable.innerHTML = html;
}
ingredientSelect.addEventListener('change', calculate);
inputAmount.addEventListener('input', calculate);
</script>
</body>
</html>
第四步驟：安裝到電腦
以下是Gemini教我的步驟：
第一步：建立檔案
- 在 Mac 上按下
Command (⌘) + 空白鍵，搜尋 「文字編輯器」 (TextEdit) 並開啟它。 - 開啟後，在上方選單點選 「格式」 > 「製作純文字」 (如果你看到的是「製作 RTF 格式」，表示已經是純文字了，不需更改)。
- 重要：一定要確保它是「純文字」模式，否則程式會失效。
- 將剛剛的程式碼 貼上 到編輯器中。
第二步：儲存為網頁檔
- 按下
Command (⌘) + S儲存檔案。 - 檔案名稱： 輸入
烘焙計算.html(重點在於字尾一定要是 .html)。 - 位置： 選擇「桌面」。
- 儲存時如果跳出視窗問你「要使用 .txt 還是 .html？」，請選擇 「使用 .html」。
第三步：開啟並使用
- 回到桌面，會看到一個網頁圖示的檔案。
- 點兩下開啟，程式就會用你的瀏覽器（Safari 或 Chrome）打開。
第五步驟：正式使用！
打開後就會看到這個美美的介面～完全都是Gemini寫的。
接下來就來正式測試吧！
首先上網找一個食譜，然後貼上（這次找的是巧克力餅乾食譜）。
貼上後就可以看到程式自動把裡面的食材做成下拉式選單了，接著再選取其中一樣食材。
這次選擇了巧克力粉。
輸入巧克力粉的數量為80，就會自動跑出以下畫面：
這樣就換算完成！而且會把換算的基準食材（巧克力粉）的數字標出來，非常方便呦！
這次測試的感覺是寫程式現在靠著AI已經不難了，重點是要找出自己的需求，並知道如何轉換給AI執行～
下次再嘗試看看別的有趣的專案，然後分享上來囉！
