SwiftでAPIを一緒に叩いてみよう！(前編)


**この記事を読んで貰えば、apiをとってくるおおまかな流れが掴めると思います**

APIを叩く練習として地球の日付を入れると、その時刻の火星探査車の画像を出力するアプリを一緒に作っていきましょう！そのためにNASAのMars rover photosのapiを叩きます

宇宙は浪漫！

# とってくるAPIの紹介

NASA Open APIsのMars rover Photosを使います
[NASA Open APIs](https://api.nasa.gov/)

Mars rover とは、火星探査車らしいですね。今回はこの画像を取得できるapiを使います

ウィキペディア↓
https://ja.wikipedia.org/wiki/マーズ・ローバー

## これから作るもの


![RPReplay_Final1712310450.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3615220/ad700fce-0f01-bf09-583d-b92c5ceeb069.gif)

<br/>

モデル
```swift
//MarsModels.swift
import Foundation
import Alamofire

struct Welcome: Codable {
    let photos: [Photo]
}

// MARK: - Photo
struct Photo: Codable {
    let id, sol: Int
    let camera: PhotoCamera
    let imgSrc: String
    let earthDate: String
    let rover: Rover

    enum CodingKeys: String, CodingKey {
        case id, sol, camera
        case imgSrc = "img_src"
        case earthDate = "earth_date"
        case rover
    }
}

// MARK: - PhotoCamera
struct PhotoCamera: Codable {
    let id: Int
    let name: String
    let roverID: Int
    let fullName: String

    enum CodingKeys: String, CodingKey {
        case id, name
        case roverID = "rover_id"
        case fullName = "full_name"
    }
}

// MARK: - Rover
struct Rover: Codable {
    let id: Int
    let name, landingDate, launchDate, status: String
    let maxSol: Int
    let maxDate: String
    let totalPhotos: Int
    let cameras: [CameraElement]

    enum CodingKeys: String, CodingKey {
        case id, name
        case landingDate = "landing_date"
        case launchDate = "launch_date"
        case status
        case maxSol = "max_sol"
        case maxDate = "max_date"
        case totalPhotos = "total_photos"
        case cameras
    }
}

// MARK: - CameraElement
struct CameraElement: Codable {
    let name, fullName: String

    enum CodingKeys: String, CodingKey {
        case name
        case fullName = "full_name"
    }
}
```
# Web APIの仕組みを学ぼう

![スクリーンショット 2024-04-04 22.17.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3615220/9a656cf0-01d6-46b8-2621-5ad8f8a2e9d3.png)


まず、アプリ側からWebサーバーにリクエストを投げます。つまり、アプリ側から https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos にアクセスします。

アプリ側からリクエストすると、WebサーバーがJSONを返してくれます。これがレスポンス

# APIキーを取得しよう

![スクリーンショット 2024-04-04 21.42.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3615220/b94f2822-189b-28f4-7d91-21db6a196321.png)
https://api.nasa.gov/
NASAのapiサイトから自分の情報を入力して、APIキーを取得しましょう。Signupの後にメールでAPIキーが送られてきます
<br/>

![スクリーンショット 2024-04-04 21.50.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3615220/fad7b67e-5129-b27e-8496-91ef60d81dfc.png)

メールはこんな感じ

NASAのapiサイトの下の方にある”Mars Rover Photos”を選択。真ん中あたりにあるQuerying by Earth dateのapiをとってきます。地球の日付を指定すると、火星探査車がその日に撮影した写真を取得できるapiです

<br/>


![スクリーンショット 2024-04-05 19.04.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3615220/70c8dda8-cbc2-73fe-8396-b1ffc258a4ff.png)

![スクリーンショット 2024-04-05 19.12.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3615220/ca15431a-8a2e-0ca4-f785-0e9423ee5c46.png)


[Web APIの仕組みを学ぼう](https://www.notion.so/Web-API-5953422fd60544c1941f14f304177ecf?pvs=21) ここでの画像を思い出してください。

アプリからURLを送り(アプリからWebサーバーにリクエストを投げる)、WebサーバーがJSONを返す(Webサーバーからアプリにレスポンスを返す)

今、NASAのサイトからリクエストを投げるためのURLが得られたので、次はサーバーから帰ってくるJSONについて調べましょう!
Example queryの`https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=2015-6-3&api_key=DEMO_KEY` は後で使います
# Talend APIからJSONを取得しよう

https://chromewebstore.google.com/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm?hl=ja

Talend APIとはChromeの拡張機能であり、apiのレスポンスを確認することができます。なんとTalendAPIを使うことでWebサーバーから返ってくるJSONを調べることができます
<br/>
[APIキーを取得しよう](https://www.notion.so/API-ca992d90362a401695b39a5e31e41920?pvs=21) のメールで送られてきたAPIキーとExample queryのURLを使います！
`DEMO_KEY`の部分をメールで送られてきた自分のAPIキーに変えてSendをクリック
すると、Responseの部分にJSONが返ってきました。それでCopyしてください。
次のquicktypeを使ってJSONから構造体に変換していきます！

`https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=2015-6-3&api_key=DEMO_KEY`

![スクリーンショット 2024-04-05 20.02.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3615220/d83d9f79-57c5-019d-6125-34d15f8ffa4c.png)


もっと詳しい記事はこちら
[Chrome拡張のTalend API TesterでAPIテスト - Qiita](https://qiita.com/ktr1211/items/c16cb4f99f91b998af46)

# quicktypeを使って構造体を作ろう！

[Instantly parse JSON in any language | quicktype](https://app.quicktype.io/)

言語選択後、さっきコピーしたやつを貼り付けてください。そしたら、モデル完成！
![スクリーンショット 2024-04-06 1.09.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3615220/6a37330b-4b6a-dc74-8f6c-bba69144e59d.png)

# Alamofireを使ってリクエスト/レスポンスを書こう！
AlamofireはHTTPネットワーキングライブラリです。つまり、リクエスト/レスポンス処理をいい感じにしてくれるツールです

インストール方法は簡単！
「File」->「Add Package Dependencies」を選択
![スクリーンショット 2024-04-06 10.27.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3615220/70ce32e8-e6ba-20be-17bc-873faf5baf6c.png)

右上の検索のところに「 https://github.com/Alamofire/Alamofire 」を入力し、「Add Package」をクリック
![スクリーンショット 2024-04-06 10.27.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3615220/40454e68-d287-ec3c-51f0-d50e7006f148.png)

その後、一回xcodeを再起動させましょう。これでAlamofireはインストールできました

後編の記事でコードを書いていきます！

# とても参考になった記事
APIをとってくる流れとか、便利ツールとかすごく参考になりました

https://qiita.com/_shu_san_/items/ae1bb06dd6e1400235bf

https://qiita.com/_shu_san_/items/07bd63e582f86a685606

https://qiita.com/_shu_san_/items/6d4a5aa178156fc45022

Alamofireについて

https://appdev-room.com/swift-alamofire