安裝 Python
我們使用 Homebrew 安裝 python，還沒有安裝 Homebrew 可以看 macOS 開發環境太亂？5 分鐘學會 Homebrew 套件管理
brew install pythonHomebrew 會自動安裝最新版的 Python。
Flask 是什麼？
Flask 是一個輕量級、靈活的 Python 框架，讓我們可以輕鬆上手做出自己的小專案！從個人部落格、API，到小型的網頁應用，只要掌握要領都可以製作。
這篇文章我會教你如何 ChatGPT 製作 JSON 格式化工具，只要你會「 一點 」Flask，就可以完成喔！
Flask 特點
- 輕量靈活，只要幾行程式碼就可以架設簡單的網站
- 彈性的路由設定
- 支援 RESTful API 開發
- 支援資料庫 ORM ( SQLAlchemy ) 和 Jinja2 模板
Json 是什麼？
JSON（JavaScript Object Notation）是一種輕量級的資料交換格式，它以易於讀寫的文字格式表示結構化的資料。JSON 的設計目標是提供一個簡單且易於解析的資料交換標準，適用於不同程式語言和平台間的資料交流。
JSON 使用「鍵-值對」（key-value pairs）的方式組織資料。每個 JSON 物件由一個或多個鍵-值對組成，鍵表示資料的名稱，而值則是對應的資料內容。值可以是字串、數字、布林值、陣列。
Json 應用
JSON 的靈活性和易用性使得它在各種應用中得到廣泛應用。以下是一些常見的 JSON 應用場景：
- API 設計：JSON 常用於網路通信和 Web API 的設計。現代的 Web API 往往使用 JSON 格式作為請求和回應的資料格式，便於瀏覽器、手機應用程式等各種客戶端解析和使用。
- 資料存儲：JSON 在資料存儲方面有廣泛的應用。許多 NoSQL 資料庫支援使用 JSON 來儲存結構化資料，這使得應用程式能夠靈活地存儲和查詢資料。
- 配置文件：許多應用程式使用 JSON 作為配置文件的格式。這使得配置信息可以輕鬆地進行編輯和分享，同時保持良好的可讀性。
- 前端與後端的資料交換：JSON 在前端和後端之間的資料交換中非常普遍。前端的 JavaScript 可以使用 JSON 資料與後端進行通信，將資料以 JSON 格式傳遞給後端處理。
以下是一個簡單的 JSON 範例！
{ “name”: “Amy”, “gender”: “Female”, “age”: 23, “email”: “abc@gmail.com” }
可以看到每個 Key 都會對應一個 Value，不過也會有資料較複雜的情況。
{ “id”: 1, “product”: [“a”,”b”,”c”], “sales”:[350, 2500, 500] }
這個時候我們可以將它格式化，是不是更容易閱讀了呢。
{
"id": "1",
"product": ["a","b","c"],
"sales": [350, 2500, 500]
}第一步：產生 HTML 程式碼
使用 Chatgpt 產生一個簡單的 HTML，不用看懂也沒關係。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON 格式化工具</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">
</head>
<body class="bg-light">
<div class="container my-5 p-4 bg-white rounded shadow-lg">
<h1 class="h2 mb-4 fw-bold">JSON 格式化工具</h1>
<div class="row">
<div class="col-md-6 mb-4">
<label for="input" class="form-label fw-bold">輸入 JSON 資料：</label>
<textarea id="json" class="form-control rounded shadow-sm" rows="10" placeholder="請在此處貼上 JSON 資料"></textarea>
<div class="d-flex justify-content-between mt-4">
<button id="clear-btn" class="btn btn-secondary">
清空
</button>
<button id="format-btn" class="btn btn-primary">
格式化 Json
</button>
</div>
</div>
<div class="col-md-6">
<label for="output" class="form-label fw-bold">格式化後的 JSON 資料：</label>
<textarea id="result" class="form-control rounded shadow-sm" rows="10" ></textarea>
<div class="mt-4">
<button id="copy-btn" class="btn btn-primary">
複製
</button>
<span id="copy-success" class="ml-2 text-success d-none">已複製！</span>
</div>
</div>
</div>
</div>
<!-- <script src="/app.js"></script> -->
<script>
const formatBtn = document.getElementById("format-btn");
const clearBtn = document.getElementById("clear-btn");
const copyBtn = document.getElementById("copy-btn");
function parseJSON() {
var jsonStr = document.getElementById("json").value;
try {
var jsonObj = JSON.parse(jsonStr);
var prettyJson = JSON.stringify(jsonObj, null, 4);
document.getElementById("result").innerHTML = prettyJson;
} catch (e) {
document.getElementById("result").innerHTML = e.message;
}
}
function clearJSON() {
document.getElementById("json").value = "";
}
function copyJSON() {
var resultElem = document.getElementById("result");
try {
// 使用 Clipboard API 將選定的文本複製到剪貼板
navigator.clipboard.writeText(resultElem.value);
// alert("JSON Copied!");
} catch (err) {
console.error('Failed to copy: ', err);
alert('Copy failed. Please try again.');
}
}
formatBtn.addEventListener('click', parseJSON);
clearBtn.addEventListener('click', clearJSON);
copyBtn.addEventListener('click', copyJSON);
</script>
</body>
</html>
第二步：寫個簡單的 Flask！
真的就只是一點，對吧！
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/', methods=['GET'])
def index():
return render_template("index1.html")
if __name__ == "__main__":
app.run()最後輸入指令！
flask run完成啦！
更多程式碼可到 這裡 查看！
