Open in app

Sign in

Write

Sign in

HW#46 搭配 AI 建立自己感興趣的 JSON API

 Dawei
彼得潘的 Swift iOS / Flutter App 開發教室
Published in
14 min readMar 17, 2024

以下我們請 AI 產生 5 種常見的 JSON 例子。

  • 內容是字串的 array。
  • 第一層是 object( { } )。
  • 第一層是 array( [ ] )，array 的成員是物件( { } )。
  • 多層的 JSON，比方至少 4 層的 JSON。
  • 讀取網頁內容產生 JSON。

內容是字串的 array

  • 請 AI 產生自己感興趣的 JSON 內容。

prompt:

請ChatGPT(雞鼻涕)用 JSON 寫一個iPhone的歷代型號 ，第一層是 [ ] ，從第一代的iPhone撰寫到最新的iPhone 15。

[
  "iPhone (1st generation)",
  "iPhone 3G",
  "iPhone 3GS",
  "iPhone 4",
  "iPhone 4S",
  "iPhone 5",
  "iPhone 5c",
  "iPhone 5s",
  "iPhone 6",
  "iPhone 6 Plus",
  "iPhone 6s",
  "iPhone 6s Plus",
  "iPhone SE (1st generation)",
  "iPhone 7",
  "iPhone 7 Plus",
  "iPhone 8",
  "iPhone 8 Plus",
  "iPhone X",
  "iPhone XR",
  "iPhone XS",
  "iPhone XS Max",
  "iPhone 11",
  "iPhone 11 Pro",
  "iPhone 11 Pro Max",
  "iPhone SE (2nd generation)",
  "iPhone 12",
  "iPhone 12 Mini",
  "iPhone 12 Pro",
  "iPhone 12 Pro Max",
  "iPhone 13",
  "iPhone 13 Mini",
  "iPhone 13 Pro",
  "iPhone 13 Pro Max",
  "iPhone SE (3rd generation)",
  "iPhone 14",
  "iPhone 14 Plus",
  "iPhone 14 Pro",
  "iPhone 14 Pro Max",
  "iPhone 15",
  "iPhone 15 Plus",
  "iPhone 15 Pro",
  "iPhone 15 Pro Max"
]
  • 在 GitHub 新增檔案，貼上 AI 生成的 JSON。

連到 GitHub 網站，點選左上的 New 建立 Repositories。

輸入 Repository 的名字，點選 Create Repository。

把建立好的JSON內容貼到GitHub上，並點選Commit changes…！

  • 取得 JSON API 的網址。

進入剛剛建立的 JSON 檔頁面，點選右上方的 Raw。

這時會跳出這個網頁，然後再點擊URL的地方，就是API的網址。

此時顯示的才是 JSON 內容的真正頁面，瀏覽器框框裡的網址即為我們可抓取 JSON 的 API 網址。

https://raw.githubusercontent.com/dwhao84/HW-47_JSON-API/main/IPhoneNames.json

第一層是 object( { } )

  • 練習一

Prompt：

用 JSON 定義Apple watch的相關資訊，第一層是 { }，資料以英文呈現，key 用英文。

Answer:

{
  "AppleWatchSeries": "Series 7",
  "ReleaseDate": "October 2021",
  "OperatingSystem": "watchOS 8",
  "Features": [
    "Always-On Retina display",
    "ECG app",
    "Blood Oxygen app",
    "Crack-resistant front crystal",
    "Dust resistance (IP6X)",
    "Water resistance (WR50)"
  ],
  "AvailableSizes": [
    "41mm",
    "45mm"
  ],
  "Processor": "S7 SiP with 64-bit dual-core processor",
  "Storage": "32GB",
  "Connectivity": [
    "Wi-Fi 802.11b/g/n 2.4GHz and 5GHz",
    "Bluetooth 5.0",
    "LTE and UMTS cellular"
  ],
  "BatteryLife": "Up to 18 hours",
  "ColorOptions": [
    "Midnight",
    "Starlight",
    "Green",
    "Blue",
    "(Product)RED"
  ]
}

JSON API：

https://raw.githubusercontent.com/dwhao84/HW-47_JSON-API/main/AppleWatchNames
  • 練習二

可以指定資料的類型，比方以下例子。

Prompt:

用 JSON 定義相關資訊，第一層是 { }，資料以英文呈現，key 用英文，資料的類型包含字串，整數，浮點數和 array。

Answer:

{
  "ProductName": "SmartWatch X1",
  "ModelYear": 2024,
  "Price": 299.99,
  "Features": [
    "Heart Rate Monitor",
    "GPS",
    "Water Resistant",
    "Sleep Tracking"
  ],
  "BatteryLifeHours": 48,
  "ScreenSizeInches": 1.78,
  "WaterResistanceRating": "IP68",
  "MemoryGB": 16,
  "AvailableColors": [
    "Black",
    "Silver",
    "Rose Gold"
  ],
  "Connectivity": [
    "Bluetooth 5.2",
    "Wi-Fi 6",
    "NFC"
  ],
  "Sensors": [
    "Accelerometer",
    "Gyroscope",
    "Barometer"
  ],
  "OperatingSystem": "SmartOS 3.1",
  "WeightGrams": 50
}

第一層是 array( [ ] )，array 的成員是物件( { } )

  • 範例 1

Prompt:

用 JSON 定義歷代 Mac 的相關資訊，第一層是 [ ]，array 的成員是物件( { } )，資料以台灣中文呈現，key 用英文。

Answer:

[
  {
    "Name": "Macintosh 128K",
    "ReleaseYear": 1984,
    "Features": ["第一代 Macintosh", "9英寸黑白顯示器", "128KB 記憶體"],
    "Price": "2,495美元"
  },
  {
    "Name": "iMac G3",
    "ReleaseYear": 1998,
    "Features": ["彩色透明塑料外殼", "內置 CRT 顯示器", "USB 連接"],
    "Price": "1,299美元"
  },
  {
    "Name": "MacBook Air",
    "ReleaseYear": 2008,
    "Features": ["超薄設計", "13.3英寸顯示器", "SSD 儲存"],
    "Price": "1,799美元"
  },
  {
    "Name": "Mac Pro",
    "ReleaseYear": 2019,
    "Features": ["模組化設計", "高性能", "專業級擴展性"],
    "Price": "5,999美元"
  },
  {
    "Name": "MacBook Pro 16英寸",
    "ReleaseYear": 2019,
    "Features": ["Retina 顯示器", "觸控欄", "高性能處理器"],
    "Price": "2,399美元"
  }
]

多層的 JSON，比方至少 4 層的 JSON

Prompt:

用 JSON 定義英國的相關資訊，JSON 有 4 層，資料以台灣中文呈現，key 用英文

Answer:

{
  "CountryName": "英國",
  "Capital": "倫敦",
  "Population": "約 6,660萬人",
  "Languages": ["英語"],
  "Currency": "英鎊 (GBP)",
  "Geography": {
    "Location": "歐洲",
    "Area": "243,610平方公里",
    "Climate": "溫帶海洋性氣候",
    "NotableRegions": [
      {
        "Name": "英格蘭",
        "Cities": [
          {
            "Name": "曼徹斯特",
            "Population": "約 55萬人",
            "FamousFor": ["足球", "工業革命"]
          },
          {
            "Name": "伯明翰",
            "Population": "約 109萬人",
            "FamousFor": ["金屬加工業", "音樂"]
          }
        ]
      },
      {
        "Name": "蘇格蘭",
        "Cities": [
          {
            "Name": "愛丁堡",
            "Population": "約 53萬人",
            "FamousFor": ["國際藝穗節", "歷史建築"]
          },
          {
            "Name": "格拉斯哥",
            "Population": "約 63萬人",
            "FamousFor": ["音樂", "博物館"]
          }
        ]
      }
    ]
  },
  "Economy": {
    "GDP": "2.83萬億美元",
    "MajorIndustries": ["金融服務", "製藥", "教育", "旅遊"],
    "TradePartners": ["美國", "德國", "中國"]
  },
  "Culture": {
    "Foods": ["魚與薯條", "全英早餐", "下午茶"],
    "Sports": ["足球", "板球", "橄欖球"],
    "Festivals": ["溫布頓網球錦標賽", "諾丁山嘉年華", "愛丁堡國際藝穗節"]
  }
}

讀取網頁內容產生 JSON

寫 python 程式解析 html 產生 JSON。

請 GPT 4 Advanced data analysis 寫 python 程式解析 html，將資料存成 JSON 檔 — 以 ptt 網球板，WWDC 影片清單 & wiki 為例

最近 Advanced data analysis 功能全面開放給訂閱 GPT 4 的使用者，我們現在不只能請 GPT 4 寫程式，還可以請他執行程式，實現一些方便的應用。

apppeterpan.medium.com

from bs4 import BeautifulSoup
import json

# 假设HTML内容已经被读取到变量`html_content`中
# 例如：with open("你的HTML文件路径.html", "r") as file: html_content = file.read()

soup = BeautifulSoup(html_content, 'html.parser')

videos_data = {"videos": []}

for video in soup.find_all("li", class_="collection-item"):
    title = video.find("h4", class_="video-title").get_text(strip=True) if video.find("h4", class_="video-title") else None
    url_suffix = video.find("a", class_="video-image-link")["href"] if video.find("a", class_="video-image-link") else None
    duration = video.find("span", class_="video-duration").get_text(strip=True) if video.find("span", class_="video-duration") else None
    description = video.find("p", class_="description").get_text(strip=True) if video.find("p", class_="description") else None
    image_url = video.find("img", class_="video-image")["src"] if video.find("img", class_="video-image") else None
    tags = [tag.get_text(strip=True) for tag in video.find_all("span", class_="smaller")] if video.find_all("span", class_="smaller") else []

    video_info = {
        "title": title,
        "url": f"https://developer.apple.com{url_suffix}" if url_suffix else None,
        "duration": duration,
        "description": description,
        "image_url": image_url,
        "tags": tags
    }

    videos_data["videos"].append(video_info)

# 将Python字典转换为JSON字符串并打印出来
json_data = json.dumps(videos_data, indent=4, ensure_ascii=False)
print(json_data)

# 要将这些数据保存到文件，你可以使用：
# with open("videos_data.json", "w", encoding="utf-8") as json_file:
#     json.dump(videos_data, json_file, indent=4, ensure_ascii=False)

Reference:

串接 API 不能不懂的 JSON

開發 iOS App 時，我們時常串接後台的 API，將後台回傳的 JSON 資料顯示在 App 畫面上，因此看懂 JSON 是十分重要的一件事。接下來就讓我們試著了解 JSON 跟學習快速看懂它的小技巧吧。

medium.com

請 ChatGPT 幫忙出 JSON 的練習題，作業，面試考題

萬能的 ChatGPT 大大可以幫我們做出各式各樣的 JSON，適合初學者練習 JSON 的解析，也適合老師或公司出作業和面試考題，接下來讓我們看看各種有趣的例子吧。

medium.com

#191 用 ChatGPT / Gemini 生出的 array 或 JSON 製作表格畫面

參考以下例子使用 ChatGPT / Gemini 生出的 array 或 JSON 製作表格畫面，喜歡其它主題的朋友也可以自己詢問 ChatGPT 生出有趣的 array 或 JSON。

medium.com

My GitHub:

GitHub - dwhao84/HW-47_JSON-API

Contribute to dwhao84/HW-47_JSON-API development by creating an account on GitHub.

github.com

--

--

 Dawei
彼得潘的 Swift iOS / Flutter App 開發教室

Written by  Dawei

60 Followers
Writer for

A developer who is trying to change careers as an iOS developer https://github.com/dwhao84

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams