Что такое API и для чего они используются. Как создать сервер с помощью стороннего API. Отображение данных на сервере и клиенте.
API (интерфейс прикладного программирования) — это набор правил и протоколов, которые определяют, как две программные системы могут взаимодействовать друг с другом. Это позволяет одной системе получать доступ к функциям другой системы контролируемым и предсказуемым образом.
API можно использовать для самых разных целей, таких как доступ к данным или службам с сервера, обеспечение интеграции между различными программными системами или предоставление разработчикам возможности создавать приложения, взаимодействующие с определенной платформой или службой.
В целом, API-интерфейсы позволяют разработчикам создавать более мощные и гибкие приложения, позволяя им получать доступ и использовать функциональные возможности других систем и платформ в своем собственном коде.
В этом руководстве мы узнаем, как использовать API для запроса данных со стороннего сервера и как отображать данные на нашем сервере и клиенте. Мы также рассмотрим концепции конечных точек API, путей, параметров и аутентификации.
Если вам интересно, как создать сервер, вот ссылка:https://medium.com/@zabinskas.paulius.professional/how-to-create-a-server-running- html-and-js-file-using-restful-apis-b616a86425d9
При использовании API мы должны думать о:
- Конечная точка. Это URL-адрес, используемый для доступа к ресурсам или функциям, предоставляемым API.
- Пути. Когда нам предоставляются дополнительные параметры, мы можем сделать конкретный запрос, где находится ресурс или функциональность. В этом случае у нас есть более одного варианта пути.
API -> [https://v2.jokeapi.dev/joke]+[/Programming] <- path Path and API [https://v2.jokeapi.dev/joke/Programming] Path 2 and API [https://v2.jokeapi.dev/joke/Any]
- Параметры. После объявления API и пути мы можем указать параметры. Увеличение параметра отмечено знаком «?».
API and path [https://v2.jokeapi.dev/joke/Programming] +[?contains=a string] <- one parameter
Если у нас есть несколько параметров, мы можем разделить их с помощью «&».
API and path [https://v2.jokeapi.dev/joke/Programming] +[?contains=a string&type=single] <- two parameters
API, путь и параметры:
https://v2.jokeapi.dev/joke/Programming?contains=string&type=single
Пути и параметры, а также API можно найти в документации сайта для разработчиков.
- Аутентификация. Это способ для поставщика API конечной точки отслеживать количество запросов, отправленных разработчиком.
Это известно как ключ API. Ключ может быть сгенерирован для каждого пользователя.
Пример:
https://api.openweathermap.org/geo/1.0/direct?q=Dublin&limit=5&appid=GENERATED_APY_KEY_FOR_A_USER
Это подводит итог структуре API, назначению конечной точки, пути, параметрам и аутентификации.
Далее я объясню, как получить одну точку данных из API древовидной структуры и отобразить ее на сервере и клиенте.
- Чтобы упростить задачу, найдите минутку и установите «JSON Viewer Awesome» из расширений Chrome. Это расширение преобразует наш файл JSON в структуру или график. Создает путь к целевой точке данных. Этот инструмент не является обязательным.
This path will be important when we will be creating our own website.
Теперь мы пройдем через процесс создания сервера, который будет запрашивать данные API:
APY я буду использовать:
https://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=[YOUR APIKEY]
Во-первых, давайте создадим серверные файлы и зависимости. В командной строке запустите:
- Заполните короткую форму после выполнения команды.
npm init
2. Файл app.js будет нашим серверным файлом.
touch app.js
3. Установите экспресс, добавив экспресс-зависимость.
npm install express
4. Устанавливаем тело-парсер.
npm install body-Parser
5. Запустите сервер.
nodemon app.js
Во-вторых, нам нужно активировать наш сервер. Итак, давайте сделаем это:
- Откройте app.js в редакторе кода.
- Нам нужно инициализировать наши зависимости: и добавить body-parser в app.
const express = require('express');
const https = require('https');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true})) // use syntax
3. Нам нужно запустить наш сервер: выберем порт 3000.
app.listen(3000, function(req, res){
console.log("Server is running on port 3000.")
})
4. Вот как сторонний API предоставит нам нужные нам данные.
app.get("/", function(req, res) {
https.get("https://api.openweathermap.org/data/1.0/direct?q=London&limit=5&appid=YOUR API", function(response) {
console.log(response);
})
res.send("Server is running");
})
Пока мы используем функцию app.get(). При загрузке браузера наш сервер отправит все данные, содержащиеся в этой функции. Позже мы изменим его на событие «отправить».
Вот полный код:
// We need to initialize our dependencies: and add body-parser to app.
const express = require('express');
const https = require('https');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({}))
// Here is how data from 3rd party API will give us data we want.
app.get("/", function(req, res) {
https.get("https://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=YOUR API", function(response) {
console.log(response); // JSON file
console.log(responce.statusCode); // get a status code of the server responce
})
res.send("Server is running");
})
// We need to run our server: lets chose port 3000.
app.listen(3000, function(req, res){
console.log("Server is running on port 3000.")
})
Мы можем лучше видеть, что происходит, открыв приложение браузера, в строке поиска введите:
localhost:3000
Вы получите ответ — наш сервер работает. В терминале ответ будет содержать файл JSON, который еще не хвалили.
Хороший! Теперь мы знаем, как запросить полный файл данных из стороннего API.
Давайте посмотрим, как получить доступ к одному типу данных и сохранить их в переменной.
Мы хотим получить в нашем терминале ту же информацию, что и в приложении браузера, в файле JSON. Давайте копать.
- Нам нужно внести изменения в нашу функцию https.get().
app.get("/", function(req, res) {
https.get("https://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=YOUR API", function(response) {
console.log(response.statusCode);
// new
response.on('data', function(data){
const weatherData = JSON.parse(data);
console.log(weatherData);
})
})// continue
res.send("Server is running");
})
Теперь мы собираем данные JSON на нашем сервере, и это похвально!
2. Теперь давайте поработаем, чтобы получить температуру погоды в Голуэе. Мы можем сделать это с помощью переменной temp. Структура дерева переменных weatherData может быть доступна с помощью weatherData.main.temp
app.get("/", function(req, res) {
https.get("https://api.openweathermap.org/data/2.5/weather?q=Galway&units=metric&appid=YOUR API", function(response) {
console.log(response.statusCode);
// new
response.on('data', function(data){
const weatherData = JSON.parse(data)
console.log(weatherData);
const temp = weatherData.main.temp; // temp
const description = weatherData.weather[0].description; // weather description
console.log(temp, description);
})
})// continue
Теперь мы можем собрать одно значение из файла JSON и отобразить точку данных на нашем сервере.
3. Как мы отображаем в приложении браузера информацию, которую получает наш сервер.
pp.get("/", function(req, res) {
https.get("https://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=YOUR API", function(response) {
console.log(response.statusCode);
// new
response.on('data', function(data){
const weatherData = JSON.parse(data)
console.log(weatherData);
const temp = weatherData.main.temp;
const description = weatherData.weather[0].description;
// new
// we can have multiple res.write()
res.write("The weather description is "+ description);
res.write("\n The temperature is"+temp);
res.send();
})
})// continue
// res.send("Server is running");
// we can have only 1 res.send() methods.
})
Мы можем использовать функцию res.send() для отправки нашему клиенту всего, что было написано в методе res.write().
4. Что делать, если мы хотим показать погоду для разных городов?
app.get("/", function(req, res) {
res.sendFile(__dirname + "/index.html");
})
// we can use app.post to catch post request sent by the button in HTML file.
app.post("/", function (req, res) {
const query = req.body.cityName;
const units = "metric";
const apiKey = "YOUR API";
const api = "https://api.openweathermap.org/data/2.5/weather";
https.get(api+"?q="+query+"&units="+units+"&appid="+apiKey, function(response) {
console.log(response.statusCode);
// new
response.on('data', function(data){
const weatherData = JSON.parse(data);
console.log(weatherData.main.temp);
const temp = weatherData.main.temp;
// to get an icon API dose not work
// const icon = weatherData.weather[0].icon;
// const imageURL = "https://api.openweathermap.org/img/wn/"+icon+"@2x.png" ;
const description = weatherData.weather[0].description;
// we can have multiple res.write()
res.write("The weather description in "+query+ " is "+ description);
res.write("\nThe temperature in "+query+" is "+temp);
// res.write("\n<img src="+imageURL+">"); // show imageURL as an .png
res.send();
})
})// continue
})
В этом случае мы можем токенизировать запрос API и использовать пакет body-parser для получения входных данных, отправленных нам клиентом.
- Сначала давайте создадим app.post(“/”, function(req, res){ и переместим сюда нашу функциональность});
- В app.get("/", function(req, res){}); Отправим HTML-файл.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weather app</title>
</head>
<body>
<form action="" method="post">
<label for="cityInput">City Name: </label>
<input
type="text" id="cityInput"
placeholder="City Input" name="cityName"/>
<button type="submit">Submit</button>
</form>
</body>
</html>
И вот оно у нас! Когда мы вводим имя города, наш сервер поймает название города с помощью body-parser и передаст его в виде строки в наш запрос API. В функции app.post() у нас есть функция https.get («запрос API»). Наконец, предоставленный нам ответ должен быть проанализирован с помощью функции JSON.parse(data[не хвалят]). Мы можем использовать синтаксис JSON, чтобы получить точку данных, которую мы хотим иметь. Все, что осталось сделать, это решить, как мы должны отправлять данные нашему клиенту.
Полный код:
app.js
// We need to initialize our dependencies: and add body-parser to app.
const express = require('express');
const https = require('https');
const app = express();
const bodyParser = require('body-parser');
const { response } = require('express');
app.use(bodyParser.urlencoded({extended: true}));
// Here is how data from 3rd party API will give us data we want.
app.get("/", function(req, res) {
res.sendFile(__dirname + "/index.html");
})
// we can use app.post to catch post request sent by the button in HTML file.
app.post("/", function (req, res) {
const query = req.body.cityName;
const units = "metric";
const apiKey = "9fba3b41abef0396dd0c46b6408925f1";
const api = "https://api.openweathermap.org/data/2.5/weather";
https.get(api+"?q="+query+"&units="+units+"&appid="+apiKey, function(response) {
response.on('data', function(data){
const weatherData = JSON.parse(data);
console.log(weatherData.main.temp);
const temp = weatherData.main.temp;
// to get an icon
// const icon = weatherData.weather[0].icon;
// const imageURL = "https://api.openweathermap.org/img/wn/"+icon+"@2x.png" ;
const description = weatherData.weather[0].description;
// we can have multiple res.write()
res.write("The weather description in "+query+ " is "+ description);
res.write("\nThe temperature in "+query+" is "+temp);
// res.write("\n<img src="+imageURL+">"); // show imageURL as an .png
res.send();
})
})
})
// We need to run our server: lets chose port 3000.
app.listen(3000, function(req, res){
console.log("Server is running on port 3000.")
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weather app</title>
</head>
<body>
<form action="" method="post">
<label for="cityInput">City Name: </label>
<input
type="text"
placeholder=""
id="cityInput"
placeholder="City Input"
name="cityName"
/>
<button type="submit">Submit</button>
</form>
</body>
</html>
