API 應用程式介面 


API
應用程式介面的意思，可以設定一個工具製作網站

endpoint, path, query
運用這個 JokeAPI 網站 https://sv443.net/jokeapi/v2/
URL 例:https://v2.jokeapi.dev/joke/Any 就把它叫做一個 endpoint 來從 API 資料庫來獲取一些笑話
https://v2.jokeapi.dev/joke/Any 這個網址為例 Any 為 path 的改變
https://v2.jokeapi.dev/joke/Any?blacklistFlags=political 再來 最尾巴就是一段  query

如何用 js 拿到 joke api 要先到 新方法較好用 Fetch API 這個 https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API

async function getJoke() {
  let data = await fetch("https://v2.jokeapi.dev/joke/Any?type=single"); // 要連接的api 網址(URL)
  let parseData = await data.json(); // 要經過這個步驟 才能獲得你想要的 data
  console.log(parseData);
}

getJoke();

---------------------------------------
---------------------------------------
跟以上分開


再來要有一把鑰匙才能使用這個 api 去找 Weather API  https://openweathermap.org/api
這個提供了 免費的 提供20萬個地區天氣是甚麼 如果你傳送 requset 他就會回傳給你這個地區天氣如何
一定要登入才能拿到 api key 註冊完 可以點到 自己的api 他就會有個 key 這樣
再到網站的 api 可以獲得很多的資訊 要使用的話 例如: 找到要用的 名稱: Current Weather Data
然後點他的 API doc 點進去之後他就會說有好幾種使用方式 假設我們要用他的  API call
之後把下面那串指令碼複製起來再貼上 {state code} 等這邊不用複製造下面的程式碼使用 要用 ` ` 當字串數字左上方 1 鍵左邊
把?後面的改掉 叫  q = ${}  他是放一個 city name 後面的 移除 API key 一樣一個 ${} 裡面就要放我們得鑰匙碼 原本長 http://api.openweathermap.org/geo/1.0/direct?q={city name},{state code},{country code}&limit={limit}&appid={API key}


let myKey = "c418a85ade31afc0e64116bb5d9faca1";
let city = prompt("請輸入地區看你的天氣"); // 讓他出現一個可以輸入的值也可以
// let city = "Taipei"; // 創一個變數 放到下面 看有沒有甚麼地區的天氣
let url = `http://api.openweathermap.org/data/2.5/weather?q=${city},&appid=${myKey}`;

// 再來獲得這個天氣
async function getWeather() {
  let d = await fetch(url);
  let dj = await d.json();
  console.log(dj);
}

getWeather();

// 以上連接也可以把它放入你的 html 裡面

 

 

app_api_sever 重點

 

打開 CMD 終端機 先用指令 cd Desktop 移到桌面
再來 cd API 到這個資料夾裡面
然後填入指令 npm init
描述的話 description: This is a weather website 這樣打
package.json 裡面的 author: "" 裡面填入自己的英文名
再來到終端機下載要用到的模組 填入 npm install express ejs nodemon
在 API 資料夾裡面 在創建一個 public 的資料夾 還有 views 的資料夾
再到 public 資料夾裡面創建一個資料夾叫 styles 然後再 styles裡面 創建 style.scss 的檔案  


//////////////////////////////


開一個 index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body></body>
<script src="./app.js"></script>
</html>

/////////////////////////////////
/////////////////////////////////

在style.scss 裡面 做一個簡單的程式碼 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

之後再 Watch Sass 要記得唷

 

//////////////////////////////////
//////////////////////////////////


有這些之後 再到 views 資料夾裡面 創建一個 inedx.ejs 的檔案 還有一個 weather.ejs 的檔案
再來就到 app.js 裡面開始填入程式碼
之後再打開 index.ejs 填入程式碼

//////////////////////////////////////////
//////////////////////////////////////////

app.js 程式碼部分起初先打

// let myKey = "c418a85ade31afc0e64116bb5d9faca1";
// let url = `http://api.openweathermap.org/data/2.5/weather?q=${city},&appid=${myKey}`;
// 主要執行這個檔案 然後再去看網頁 http://localhost:3000/ (網址)
// 記得在創建 views 資料夾  一定要打對加 s 不然會有問題

const express = require("express");
const app = express();
const ejs = require("ejs");

app.use(express.static("public"));
app.set("view engine", "ejs");

// 創建一個首頁
app.get("/", (req, res) => {
  res.render("index.ejs");
});

app.listen(3000, () => {
  console.log("Server is running on port 3000.");
});

 

index.ejs 的部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homepage</title>
    <link rel="stylesheet" href="/styles/style.css"> <!-- 前面的 views 的路徑要移除掉不要寫進來 記得在創建 views 資料夾 一定要打對加 s 不然會有問題 -->
</head>
<body>
    <h1>This is the homepage.</h1>
</body>
</html>


依照順序看下來唷 --------------------
---------------------------------------
---------------------------------------

之後回到 app.js 再繼續打程式碼
把這邊程式碼 套用到可以用天氣 

// 主要執行這個檔案 然後再去看網頁 http://localhost:3000/ (網址)
// 記得在創建 views 資料夾  一定要打對加 s 不然會有問題

const express = require("express");
const app = express();
const ejs = require("ejs");
const https = require("https"); // 導入 https 記得 不能用 http 要加 s

// 天氣 api key
const myKey = "c418a85ade31afc0e64116bb5d9faca1";

// h to cel 溫度函式
function ktoC(k) {
  return (k - 273.15).toFixed(2); // 改成小數點後兩位數
}

// middleware
app.use(express.static("public"));
app.set("view engine", "ejs");

// 創建一個首頁
app.get("/", (req, res) => {
  res.render("index.ejs");
});

// 記得連到網站  https 一定要打 https 加 s 不然會有錯誤
// 導用天氣的 api 先到 Postman 將 URL 的網址貼上去 Get 把 city 跟 key 都複製貼到 Postman 之後 Send 就可看清楚資料是什麼哪些
// 使用這些資料來做虛擬網頁
app.get("/:city", (req, res) => {
  let { city } = req.params; // 放入物件 因為 params 是個 {}
  let url = `https://api.openweathermap.org/data/2.5/weather?q=${city},&appid=${myKey}`;

  // get request mode by node.js
  https
    .get(url, (response) => {
      console.log("statusCode:", response.statusCode); // 出現 200 的碼 就是沒問題 400 就是有問題
      console.log("headers:", response.headers); // 裡面有很多資訊

      response.on("data", (d) => {
        let djs = JSON.parse(d); // 這個 JSON 原本就是一個 async function 所以不用多加
        // 再來有了天氣的資訊 就來使用 weather.ejs 導裡面做設定
        let { temp } = djs.main; // 導入網站天氣
        let newTemp = ktoC(temp); // 把上面函式帶進來
        res.render("weather.ejs", { djs, newTemp }); // 在把新用的 newTeap 用進來
      });
    })
    .on("error", (e) => {
      console.log(e);
    });
});

// 在 node.js 這個 fetch 是不存在的喔
// 那如何解決這個問題 到網址 node.js https://nodejs.org/dist/latest-v20.x/docs/api/https.html
// 在文件-HTTPS-https.get(url[, options][, callback]) 這個可以使用 以下有方法教你使用

app.listen(3000, () => {
  console.log("Server is running on port 3000.");
});

//////////////////////////////////
//////////////////////////////////

這個指令我在 3000 後面 打 /Taipei cmd 會出現 { city: 'Taipei' }

再到 weather.ejs 裡面編寫程式碼


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 以網頁 用 Postman send 處理的資訊 來使用 城市名字 國家名字 網頁名字出現 Taipei TW  -->
    <title> <%= djs.name %> <%= djs.sys.country %> </title>
    <link rel="stylesheet" href="/styles/style.css">
</head>
<body>
    <h1><%= djs.name %> Weather Now</h1> <!-- 網頁出現 Taipei Weather Now -->
    <table>
        <tr>
            <td>Main Weather</td> <!-- 天氣-->
            <td><%= djs.weather[0].main %> </td> <!-- 他是一個 array 裡面還有個 object 所以要這樣使用 [0] 去抓裡面的物件 -->
        </tr>
        <tr>
            <td>Weather Description</td> <!-- 天氣描述 -->
            <td><%= djs.weather[0].description %></td>
        </tr>
        <tr>
            <td>Temperature</td>
            <td><%= newTemp %></td> <!-- 在把 app.js 的設定套用過來 顯示溫度 -->
        </tr>
        <tr>
            <td>Wind</td>
            <td><%= djs.wind.speed %></td> <!-- 設定他的風速 -->
        </tr>
    </table>
</body>
</html>


////////////////////////////////
////////////////////////////////
////////////////////////////////

再來加一下樣式 改 scss


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: rgba(49, 45, 45, 0.555);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;

    table,
    tr,
    td {
        border: 1px solid white;
        border-collapse: collapse; // 將表格欄位邊框合併，讓表格變得更美化
    }

    td {
        padding: 0.25rem 0.5rem;
    }
    table {
        font-size: 1.25rem;
    }

}

 

以上分享就到這邊囉 感謝大家的觀賞^^
 

文章標籤
全站熱搜
創作者介紹
創作者 Jie Jing 的頭像
Jie Jing

Jie Jing的部落格

Jie Jing 發表在 痞客邦 留言(40) 人氣(99)