相信經過了八天，大家都對D3有了初步的了解，接下來將會直接實作一個比較完整的小專案來加深印象～

在這幾天裡，我們要做一個可以查詢過去幾小時內，台灣個城市的天氣概況的網站，為了達到實戰的目的，我這邊會提供一份設計圖，所以會從切版開始，並接上一個open的api得到真實資料，最後會利用firebase的host服務，讓網站上線。

設計稿

https://yuanchen1103.github.io/2020ironman-weather-design/

Api文件

會選用這個open api的原因主要是他使用上比較簡單，不用像yahoo或氣象局之類的要申請token那些，再來就是我覺得他的api結構設計蠻好的，先有一隻來拿到所有城市的名稱跟id，再依據這個id拿氣象資料。
https://works.ioa.tw/weather/api/doc/index.html

前端使用技術

• html/css：你可能需要有基本的切版能力才有辦法開始跟我一起實作
• d3.js：希望你可以先看完前八天的文章，做起來比較不會那麼吃力。
• vue.js：這邊選用vue是因為環境設置比較簡單，也許下一個專案會使用react也說不定

Hosting

• firebase

開始之前的準備

因為本系列文章主要是D3相關，其他基礎就不會細講（像是框架怎麼使用、css怎麼寫之類的）。
不過相信本屆鐵人賽也有其他題目是這些相關的，在這邊只提供在開始專案之前的環境要怎麼建置的簡單流程：

首先請大家先裝好vue-cli並直接使用他建置新的專案：
https://cli.vuejs.org/

vue create <專案名稱>

在問你要裝什麼套件這邊，選擇default就行了。

? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features 

裝完以後安裝最新版的d3.js

npm install d3

裝好以後啟動server看看有沒有問題

npm run serve

看到這個畫面應該就沒問題了，期待明天開始專案吧！