先上作品: https://spacex.it-monk.com/
2020 年的 5 月 29 日，是人類太空史的重要里程碑。 spaceX 的飛龍號（Crew Dragon）經過 19 小時飛行後，成功抵達國際太空站。
身為一個網站開發者，看待太空發射的角度也有所不同。 SpaceX 身為一個太空事業體的改變先驅，也開放了好幾支 API 讓粉絲參與開發。
完整的 API 文件 : https://docs.spacexdata.com/?version=latest
內容非常豐富，包含任務計畫、發射計畫、歷史、太空膠囊…等。真是令人興奮 !
其中，最主打的就是這支 :
https://github.com/r-spacex/SpaceX-API
這支 API 記錄了 SpaceX 的發射計畫，包含已經發射過和即將發射的計畫。
官方範例的 API 回傳結果如下：
GET https://api.spacexdata.com/v3/launches/latest{
"flight_number": 95,
"mission_name": "Starlink 7",
"mission_id": [
],
"launch_year": "2020",
"launch_date_unix": 1591233900,
"launch_date_utc": "2020-06-04T01:25:00.000Z",
"launch_date_local": "2020-06-03T21:25:00-04:00",
"is_tentative": false,
"tentative_max_precision": "hour",
"tbd": false,
"launch_window": null,
"rocket": {
"rocket_id": "falcon9",
"rocket_name": "Falcon 9",
"rocket_type": "FT",
"first_stage": {
"cores": [
{
"core_serial": "B1049",
"flight": 5,
"block": 5,
"gridfins": true,
"legs": true,
"reused": true,
"land_success": true,
"landing_intent": true,
"landing_type": "ASDS",
"landing_vehicle": "JRTI"
}
]
},
"second_stage": {
"block": 5,
"payloads": [
{
"payload_id": "Starlink 7",
"norad_id": [
],
"reused": false,
"customers": [
"SpaceX"
],
"nationality": "United States",
"manufacturer": "SpaceX",
"payload_type": "Satellite",
"payload_mass_kg": 15400,
"payload_mass_lbs": 33951.2,
"orbit": "VLEO",
"orbit_params": {
"reference_system": "geocentric",
"regime": "very-low-earth",
"longitude": null,
"semi_major_axis_km": null,
"eccentricity": null,
"periapsis_km": null,
"apoapsis_km": null,
"inclination_deg": null,
"period_min": null,
"lifespan_years": null,
"epoch": null,
"mean_motion": null,
"raan": null,
"arg_of_pericenter": null,
"mean_anomaly": null
}
}
]
},
"fairings": {
"reused": false,
"recovery_attempt": true,
"recovered": null,
"ship": "GOMSTREE"
}
},
"ships": [
],
"telemetry": {
"flight_club": null
},
"launch_site": {
"site_id": "ccafs_slc_40",
"site_name": "CCAFS SLC 40",
"site_name_long": "Cape Canaveral Air Force Station Space Launch Complex 40"
},
"launch_success": true,
"links": {
"mission_patch": "https://images2.imgbox.com/d2/3b/bQaWiil0_o.png",
"mission_patch_small": "https://images2.imgbox.com/9a/96/nLppz9HW_o.png",
"reddit_campaign": "https://www.reddit.com/r/spacex/comments/gamcbr/starlink7_launch_campaign_thread/",
"reddit_launch": "https://www.reddit.com/r/spacex/comments/gkfe30/rspacex_starlink_7_official_launch_discussion/",
"reddit_recovery": null,
"reddit_media": null,
"presskit": "https://spacextimemachine.com/assets/press_kits/185.pdf",
"article_link": null,
"wikipedia": null,
"video_link": "https://youtu.be/y4xBFHjkUvw",
"youtube_id": "y4xBFHjkUvw",
"flickr_images": [
"https://live.staticflickr.com/65535/49971196871_a0462d0084_o.jpg",
"https://live.staticflickr.com/65535/49970682603_e6333945ee_o.jpg"
]
},
"details": "This mission will launch the seventh batch of operational Starlink satellites, which are expected to be version 1.0, from SLC-40, Cape Canaveral AFS. It is the eighth Starlink launch overall. The satellites will be delivered to low Earth orbit and will spend a few weeks maneuvering to their operational altitude of 550 km. The booster for this mission is expected to land on JRTI on its first mission since arriving at Port Canaveral.",
"upcoming": false,
"static_fire_date_utc": "2020-05-13T11:11:00.000Z",
"static_fire_date_unix": 1589368260,
"timeline": null,
"crew": null,
"last_date_update": "2020-06-03T15:45:37.000Z",
"last_ll_launch_date": "2020-06-04T01:25:00.000Z",
"last_ll_update": "2020-06-03T15:45:37.000Z",
"last_wiki_launch_date": "2020-06-04T01:25:00.000Z",
"last_wiki_revision": "f7d37887-a36e-11ea-8ba2-0e4dda687887",
"last_wiki_update": "2020-05-31T18:45:59.000Z",
"launch_date_source": "launch_library"
}資料相當完整。除了發射日期，還有發射基地、發射結果、裝載物品。最重要的是在 “links” 裡面，有大量的圖片和 youtube 的影片。非常適合做成一個視覺豐富的頁面。
這邊公佈一下我用到的幾個套件。
- parceljs – 用來打包 js ，類似 Webpack 的功能。
- BootStrap Vue – 如果想使用 BoosStrap 又不想安裝 jQuery ，就裝這個吧。
- Vue Timeline – Vue 的時間軸套件，可以產生漂亮的時間軸視覺。
- axios – 用來取得 SpaceX 的 API 資料。
package.json 的內容：
"dependencies": {
"@growthbunker/vuetimeline": "^0.1.16",
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
"bootstrap-vue": "^2.15.0",
"vue": "^2.6.11"
},
"devDependencies": {
"sass": "^1.26.8"
}
因為是使用瀏覽器呼叫 API，所以會有等待載入的時間。所以我自己寫了一個輕量的打字機效果的 Vue component，當作載入效果，使用方法有空再開一篇介紹吧。
