製作簡單的電影搜尋器!!

閱讀時間約 3 分鐘

目的:

  1. 利用第三方API抓取網路資料下載並呈現在APP上。
  2. 學習運用搜尋欄,並搜尋自己想找的電影。
  3. 自製表格,並讓資訊呈現在APP上。

raw-image

這次運用了search bar 和 自製表格以及分析JSON檔的部分:

raw-image

首先,要使用search bar要增加protocol : UISearchResultUpdating,然後增加一個變數為UISearchController類別,以及更新的function updateSearchResults,另外可以看到我也在方程式中放入後續會說到的function以用來解析我們要從網路上抓取什麼資料下來。

searchResultsUpdater: 更新我們所搜尋時產生的內容。

raw-image

這里就是抓取網路上的資料的方法,網站上的API提供搜尋的方法。遮住的地方是網站給的API KEY,就是在後續網址上加上搜尋的內容。這裡要注意,每個網站api抓取的方法不同,需要先去分析,再來使用!

raw-image

抓取的api比較亂時可以在以下網站幫忙分析:

JSON Editor Online - view, edit and format JSON online
JSON Editor Online is a web-based tool to view, edit, format, transform, and diff JSON documents.jsoneditoronline.org

最後卡比較久的地方,竟然上潘帥在上課就講過的地方,我自己思考好久圖片要怎麼放上去也不會跑掉,或顯示錯誤,顧著想用帶入方程式的方式,卻沒想到直接使用就能完成這麼簡單…..!

這裡簡單帶一下,後續我還有使用選用照片功能,但還沒完成:

raw-image

需要另外加上兩個protocol: UIImagePickerControllerDelegate和UINavigationControllerDelegate,這是delegate的觀念運用,最後加上dismiss可以在選完照片後跳回APP。

deblive0917/JSONDownload
Contribute to deblive0917/JSONDownload development by creating an account on GitHub.github.com

參考:

照片編輯 App 一起來修修圖吧
不管是水水 IG 網美照,還是正經八百相親照,照片編輯器始終扮演著撫慰人類心靈、美化真實世界的重要角色。這次模仿了 iOS 照片 App 的幾項基本編輯功能,一起來為維護世界和平修修圖吧~medium.com

The Movie Database (TMDb)
The Movie Database (TMDb) is a popular, user editable database for movies and TV shows.www.themoviedb.org

利用 UISearchController 實現 search 功能
我們可以在 navigation bar 裡顯示 search barmedium.com

利用 JSONDecoder 和 Codable 解析 JSON 和生成自訂型別資料
抓取網路上的 JSON 資料並不是太困難的事,但是如果想要解析它,甚至是把它變成方便 App 使用的自訂型別,卻需要寫許多程式碼才能實現。因此從前一些解析 JSON 和將 JSON 變成自訂型別的第三方套件大受歡迎,不過在 Swift…medium.com

    avatar-img
    1會員
    37內容數
    留言0
    查看全部
    avatar-img
    發表第一個留言支持創作者!
    dab戴伯的沙龍 的其他內容
    目的: 熟悉collection view的使用 這次運用了collection view製作了行事曆的概念,主要是想結合電影,讓他可以顯示出你每天看過的電影,但執行上真的難好多啊!!所以先上來把目前為止做出來的內容說明一下: collection view 使用上與table view很像,
    目的: Timer倒數計時。 熟練基本的 Swift 程式語法。 熟悉 iOS App 畫面的製作。 製作多頁面 App & 頁面間傳資料的能力。 使用 UIAlertController。 透過 present 顯示以下連結提到的某一種 controller。(不包含 UIAlertC
    目的: 熟練資料傳遞的技巧。 建立日期: 這次試著多用function的方式進行,會讓程式簡潔很多。這裡可以注意到,使用到calendar function去製造出年月日的效果,這樣就可以從datepicker中取.date值放入function進行換算成生日的星座。 2. 傳資料到下個頁面
    目的: 在 viewDidLoad 裡寫程式。 2. 利用 AVPlayer 播放音樂。 3. 包含播放鍵,暫停鍵,下一首,上一首。 4. 使用 IBOutlet 和 IBAction 實現 App 的功能。 5. 畫面上至少需包含以下元件,而且程式也有使用這些元件。 text fiel
    目的: 做出漸層的背景。 mask遮罩。 做出漸層的背景 運用CAGradientLayer()建立實現漸層功能的實例。 然後UIView建立一個確切位置的框框。 根據.colors 的array可設定由哪兩個顏色形成漸層。 gradientLayer.startPoint = CGP
    這次使用UIBezierPath的功能在SwiftUI去畫一張圖,雖然我的藝術天份蠻差的,但藉由程式之手至少是可以畫出稍微相似的圖出來哈哈~ 主要運用到兩種功能畫圖: let body = UIBezierPath(arcCenter: CGPoint(x: 213, y: 213), radi
    目的: 熟悉collection view的使用 這次運用了collection view製作了行事曆的概念,主要是想結合電影,讓他可以顯示出你每天看過的電影,但執行上真的難好多啊!!所以先上來把目前為止做出來的內容說明一下: collection view 使用上與table view很像,
    目的: Timer倒數計時。 熟練基本的 Swift 程式語法。 熟悉 iOS App 畫面的製作。 製作多頁面 App & 頁面間傳資料的能力。 使用 UIAlertController。 透過 present 顯示以下連結提到的某一種 controller。(不包含 UIAlertC
    目的: 熟練資料傳遞的技巧。 建立日期: 這次試著多用function的方式進行,會讓程式簡潔很多。這裡可以注意到,使用到calendar function去製造出年月日的效果,這樣就可以從datepicker中取.date值放入function進行換算成生日的星座。 2. 傳資料到下個頁面
    目的: 在 viewDidLoad 裡寫程式。 2. 利用 AVPlayer 播放音樂。 3. 包含播放鍵,暫停鍵,下一首,上一首。 4. 使用 IBOutlet 和 IBAction 實現 App 的功能。 5. 畫面上至少需包含以下元件,而且程式也有使用這些元件。 text fiel
    目的: 做出漸層的背景。 mask遮罩。 做出漸層的背景 運用CAGradientLayer()建立實現漸層功能的實例。 然後UIView建立一個確切位置的框框。 根據.colors 的array可設定由哪兩個顏色形成漸層。 gradientLayer.startPoint = CGP
    這次使用UIBezierPath的功能在SwiftUI去畫一張圖,雖然我的藝術天份蠻差的,但藉由程式之手至少是可以畫出稍微相似的圖出來哈哈~ 主要運用到兩種功能畫圖: let body = UIBezierPath(arcCenter: CGPoint(x: 213, y: 213), radi
    你可能也想看
    Google News 追蹤
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
    Thumbnail
    Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
    Thumbnail
    最近在練習使用 CSS 來製作一些簡單的動畫,以下是我收集資料與實作的成果。製作一張可以水平翻轉的卡片,這邊會使用 Vue.js 來簡化邏輯,主要是解釋 CSS 的部分。
    Thumbnail
    Gamma是可以使用AI在幾秒鐘內創建精美的文件,簡報和網頁。他可以快速幫你針對主題生成簡報大綱並且幫你快速產生排版美麗的簡報。
    Thumbnail
    讓「Gamma」幫你做簡報,還可以幫你整理簡報大綱,簡報排版美化!靈感激盪跟簡報製作就靠它了!
    Thumbnail
    昨晚有人問我台積電展望,也問我有沒有看他的法說會,我只能說~
    Thumbnail
    這篇文章我想要參加Chat gpt的主題徵文 主要是讓chat gpt自行生成成語接龍遊戲的遊戲代碼
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
    Thumbnail
    Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
    Thumbnail
    最近在練習使用 CSS 來製作一些簡單的動畫,以下是我收集資料與實作的成果。製作一張可以水平翻轉的卡片,這邊會使用 Vue.js 來簡化邏輯,主要是解釋 CSS 的部分。
    Thumbnail
    Gamma是可以使用AI在幾秒鐘內創建精美的文件,簡報和網頁。他可以快速幫你針對主題生成簡報大綱並且幫你快速產生排版美麗的簡報。
    Thumbnail
    讓「Gamma」幫你做簡報,還可以幫你整理簡報大綱,簡報排版美化!靈感激盪跟簡報製作就靠它了!
    Thumbnail
    昨晚有人問我台積電展望,也問我有沒有看他的法說會,我只能說~
    Thumbnail
    這篇文章我想要參加Chat gpt的主題徵文 主要是讓chat gpt自行生成成語接龍遊戲的遊戲代碼