# 1/6 PUHub 網頁(二)

:::info
時間:2024/1/6 19:45 ~ 21:00
地點:線上會議(Discord)
參與:xiaojie4082、wei

:::

## 天氣預報功能
- 參考資料：[10/8 Discord Bot 開發(一)](https://hackmd.io/@PU-X-Discord/%E5%B0%88%E6%A1%88%E5%AF%A6%E4%BD%9C/%2FOa3RKZhCS8CzeChUQhnTfQ)
- 取得資料

    <?php
            $url = 'https://opendata.cwa.gov.tw/api/v1/rest/datastore/F-D0047-075?Authorization=CWB-771B8657-F0D3-4E63-9C3E-78D9F6E2CF49&format=JSON&locationName=沙鹿區';

            // 使用curl函數發送HTTP請求
            $ch = curl_init($url);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            $response = curl_exec($ch);

            // 檢查是否有錯誤
            if(curl_errno($ch)){
                die('Curl failed: ' . curl_error($ch));
            }

            // 關閉curl資源
            curl_close($ch);

            // 解碼JSON數據
            $data = json_decode($response, true);
            $PoP12h = $data['records']['locations'][0]['location'][0]['weatherElement'][0];
            $WS = $data['records']['locations'][0]['location'][0]['weatherElement'][4]; // 風速
            $MaxT = $data['records']['locations'][0]['location'][0]['weatherElement'][12];
            $MinT = $data['records']['locations'][0]['location'][0]['weatherElement'][8];
            $MaxAT = $data['records']['locations'][0]['location'][0]['weatherElement'][5];
            $MinAT = $data['records']['locations'][0]['location'][0]['weatherElement'][11];
            $RH = $data['records']['locations'][0]['location'][0]['weatherElement'][2]; // 濕度
            $AT = ((int)$MaxAT['time'][0]['elementValue'][0]['value'] + (int)$MinAT['time'][0]['elementValue'][0]['value'])/2;
            $WP = $data['records']['locations'][0]['location'][0]['weatherElement'][10];
    ?>

- 資料顯示

        <style>
            table {
                border-collapse: collapse;
            }

            td {
                border: none;
                padding: 5px; /* Optional: Add padding for better spacing */
            }
        </style>

        <section class="container">
            <br>
            <div class="alert alert-info" role="alert" data-mdb-color="info" data-mdb-alert-init="" data-mdb-alert-initialized="true">
                <i class="fas fa-info-circle me-3"></i><?php echo $WP['time'][0]['elementValue'][0]['value'] ?>
            </div>
            <div class="card text-center">
                <div class="card-header">沙鹿區</div>
                <div class="card-body">
                <img src="https://www.cwa.gov.tw/V8/assets/img/weather_icons/weathers/svg_icon/day/01.svg" alt="晴天" title="晴天" class="img-responsive">
                    <h5 class="card-title"><?php echo $MinT['time'][0]['elementValue'][0]['value'] . " ~ " . $MaxT['time'][0]['elementValue'][0]['value']; ?> °C</h5>
                    <table class="table">
                        <thead>
                        <tr>
                            <td class="left-panel">降雨</td>
                            <td class="value"><?php echo $PoP12h['time'][0]['elementValue'][0]['value'] . " %"; ?></td>
                            <td class="left-panel">濕度</td>
                            <td class="value"><?php echo $RH['time'][0]['elementValue'][0]['value'] . " %"; ?></td>
                        </tr>
                        <tr>
                            <td class="right-panel">體感</td>
                            <td class="value"><?php echo $AT . " °C"; ?></td>
                            <td class="right-panel">風速</td>
                            <td class="value"><?php echo $WS['time'][0]['elementValue'][0]['value'] . " m/s"; ?></td>
                        </tr>
                        </thead>
                        </table>
                </div>
            </div>
            <div>
            </div>
        </section>

- 目前進度
- 天氣狀況圖示尚未完成