create-react-app 在 v4 版本的 API 有變更,建立專案時請以下述指令執行,才會開啟 Progressive Web App 的功能:
# <my-app> 請換成專案想取的名稱
npx create-react-app <my-app> --template cra-template-pwa
進一步的說明請參考 CRA 建立專案方式異動
在 emotion 11 中,將原本的套件名稱從 @emotion/core
改為 @emotion/react
,並將 emotion-theming
這個套件整併到 @emotion/react
內。因此在安裝 emotion 時,可將指令修改為:
# 安裝 emotion11
npm install @emotion/react @emotion/styled
進一步的說明請參考 emotion 安裝方式異動
由於**氣象局提供的日出日落時間資料有限(通常是兩年內),所以一旦過了這個時間就需要重新抓取。這裡已經寫好對應的指令來自動更新,使用者只需要:
- 在專案根目錄建立
.env
並且放入 API 授權碼
# .env
REACT_APP_API_AUTHORIZATION_KEY=CWB-***-***
- 接著即可透過下述指令自動更新資料:
$ npm run build:sunrise-sunset
如果想要手動更新檔案,則可以:
-
到**氣象局網站抓取「日出日落時刻」的資料,並將資料存檔到
src/scripts/generateSunriseAndSunsetData/A-B0062-001.json
-
執行
npm run build:process-sunrise-sunset
,執行完畢後,就可以在src/utils/
中有一份sunrise-sunset.json
檔案,這檔案就是我們要的日出日落時間資料。
- The magic behind 💅 styled-components:說明 styled component 如何使用 template literal 中的 tagged template 方式,來取得元件中 props 的值
- Git 安裝教學 @ Git
- Github Page @ Github
- Geolocation API @ MDN
- Progressive Web Apps @ Web.dev
- 台灣好天氣的設計畫面主要參考 imgur 上的圖片 (https://imgur.com/ZLgiOyj)
- 天氣圖示來自 IconFinder 上 The Weather is Nice Today 所提天(https://www.iconfinder.com/iconsets/the-weather-is-nice-today)