programming javascript

Api thời tiết được triển khai như thế nào trong javascript?

Là một nhà phát triển web, lấy dữ liệu từ API là điều bạn sẽ làm thường xuyên. Tìm nạp dữ liệu thời tiết là một cách hoàn hảo để khiến bạn bị ướt chân. Trong bài viết này, chúng tôi sẽ sử dụng các trình duyệt được xây dựng trong 

function weatherBalloon[ cityID ] {
  var key = '{yourkey}';
  fetch['//api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key]  
  .then[function[resp] { return resp.json[] }] // Convert data to json
  .then[function[data] {
    console.log[data];
  }]
  .catch[function[] {
    // catch any errors
  }];
}

window.onload = function[] {
  weatherBalloon[ 6167865 ];
}
0 với JavaScript để lấy dữ liệu từ API của OpenWeatherMap

OpenWeatherMap API

OpenWeatherMap có API rất tốt. Họ cung cấp một cấp miễn phí cho phép thực hiện tối đa 60 cuộc gọi mỗi phút cùng với dự báo 5 ngày và 3 giờ

Tạo tài khoản OpenWeather

Để bắt đầu, chúng tôi cần một tài khoản. Truy cập Open Weather để đăng ký

Tạo khóa

Sau khi đăng ký, một khóa sẽ tự động được tạo cho bạn. Các khóa API được truy cập trong cài đặt tài khoản của bạn. Khóa này sẽ được sử dụng khi chúng tôi tìm nạp thông tin thời tiết, hoạt động như một mã định danh để OpenWeatherMap biết ai đang yêu cầu dữ liệu

điểm cuối

Lệnh gọi API mà chúng ta sẽ sử dụng có một vài tùy chọn khác nhau để nhận thông tin thời tiết. Để kiểm tra các cuộc gọi này trong trình duyệt của bạn, hãy lấy 

function weatherBalloon[ cityID ] {
  var key = '{yourkey}';
  fetch['//api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key]  
  .then[function[resp] { return resp.json[] }] // Convert data to json
  .then[function[data] {
    console.log[data];
  }]
  .catch[function[] {
    // catch any errors
  }];
}

window.onload = function[] {
  weatherBalloon[ 6167865 ];
}
1 của bạn và thêm nó vào 
function weatherBalloon[ cityID ] {
  var key = '{yourkey}';
  fetch['//api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key]  
  .then[function[resp] { return resp.json[] }] // Convert data to json
  .then[function[data] {
    console.log[data];
  }]
  .catch[function[] {
    // catch any errors
  }];
}

window.onload = function[] {
  weatherBalloon[ 6167865 ];
}
2 dưới dạng tham số 
function weatherBalloon[ cityID ] {
  var key = '{yourkey}';
  fetch['//api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key]  
  .then[function[resp] { return resp.json[] }] // Convert data to json
  .then[function[data] {
    console.log[data];
  }]
  .catch[function[] {
    // catch any errors
  }];
}

window.onload = function[] {
  weatherBalloon[ 6167865 ];
}
3 được hiển thị bên dưới

theo ID thành phố [Được khuyến nghị]

https. //api. bản đồ thời tiết mở. tổ chức/dữ liệu/2. 5/weather?id=6167865&appid={yourkey}

Lấy thông tin thời tiết hiện tại bằng cách sử dụng 

function weatherBalloon[ cityID ] {
  var key = '{yourkey}';
  fetch['//api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key]  
  .then[function[resp] { return resp.json[] }] // Convert data to json
  .then[function[data] {
    console.log[data];
  }]
  .catch[function[] {
    // catch any errors
  }];
}

window.onload = function[] {
  weatherBalloon[ 6167865 ];
}
4 rõ ràng. Một danh sách các thành phố có sẵn ở đây

theo tên thành phố

https. //api. bản đồ thời tiết mở. tổ chức/dữ liệu/2. 5/thời tiết?q=Toronto,CA&appid={yourkey}

Trong đó 

function weatherBalloon[ cityID ] {
  var key = '{yourkey}';
  fetch['//api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key]  
  .then[function[resp] { return resp.json[] }] // Convert data to json
  .then[function[data] {
    console.log[data];
  }]
  .catch[function[] {
    // catch any errors
  }];
}

window.onload = function[] {
  weatherBalloon[ 6167865 ];
}
5 là thành phố mong muốn của chúng tôi, cùng với mã quốc gia tùy chọn ở định dạng ISO 3166

theo Vĩ độ, Kinh độ

https. //api. bản đồ thời tiết mở. tổ chức/dữ liệu/2. 5/thời tiết?lat=43. 700111&lon=-79. 416298&appid={keykey}

Có thêm tài liệu trên trang tài liệu của OpenWeatherMap

HTML

Khá đơn giản cho đến nay, bây giờ chúng ta hãy bắt tay vào một số mã. Tạo một tệp mới có tên 

function weatherBalloon[ cityID ] {
  var key = '{yourkey}';
  fetch['//api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key]  
  .then[function[resp] { return resp.json[] }] // Convert data to json
  .then[function[data] {
    console.log[data];
  }]
  .catch[function[] {
    // catch any errors
  }];
}

window.onload = function[] {
  weatherBalloon[ 6167865 ];
}
6 trong trình chỉnh sửa yêu thích của bạn và bắt đầu với HTML sau




  
  Current Weather


  
    
    
    
  
  
    // future javascript

API tìm nạp

Để có được dữ liệu thực tế, chúng tôi sẽ sử dụng Fetch API. Nếu bạn chưa sử dụng tìm nạp trước đây thì đó là một cách để thực hiện các yêu cầu nhận dữ liệu đơn giản như API. Nó có hỗ trợ trình duyệt tốt với Chrome, Firefox và Edge tuy nhiên nó không hoạt động với Internet Explorer

Tham khảo thêm thông tin chi tiết về

Tìm thời tiết

Fetch API rất đơn giản. Nó hoạt động với một chức năng gọi là 

function weatherBalloon[ cityID ] {
  var key = '{yourkey}';
  fetch['//api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key]  
  .then[function[resp] { return resp.json[] }] // Convert data to json
  .then[function[data] {
    console.log[data];
  }]
  .catch[function[] {
    // catch any errors
  }];
}

window.onload = function[] {
  weatherBalloon[ 6167865 ];
}
0 lấy 
function weatherBalloon[ cityID ] {
  var key = '{yourkey}';
  fetch['//api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key]  
  .then[function[resp] { return resp.json[] }] // Convert data to json
  .then[function[data] {
    console.log[data];
  }]
  .catch[function[] {
    // catch any errors
  }];
}

window.onload = function[] {
  weatherBalloon[ 6167865 ];
}
2 của bạn làm tham số duy nhất. Phản hồi ban đầu về mặt kỹ thuật là một luồng nội dung, vì vậy, để chuyển đổi nó, chúng tôi gọi sử dụng một 
function weatherBalloon[ cityID ] {
  var key = '{yourkey}';
  fetch['//api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key]  
  .then[function[resp] { return resp.json[] }] // Convert data to json
  .then[function[data] {
    console.log[data];
  }]
  .catch[function[] {
    // catch any errors
  }];
}

window.onload = function[] {
  weatherBalloon[ 6167865 ];
}
9 để trả về phản hồi 
{  
   "coord":{  
      "lon":-79.42,
      "lat":43.7
   },
   "weather":[  
      {  
         "id":804,
         "main":"Clouds",
         "description":"overcast clouds",
         "icon":"04n"
      }
   ],
   "base":"stations",
   "main":{  
      "temp":292.15,
      "pressure":1023,
      "humidity":72,
      "temp_min":291.15,
      "temp_max":293.15
   },
   "visibility":14484,
   "wind":{  
      "speed":5.7,
      "deg":130
   },
   "clouds":{  
      "all":90
   },
   "dt":1537837200,
   "sys":{  
      "type":1,
      "id":3721,
      "message":0.0039,
      "country":"CA",
      "sunrise":1537873704,
      "sunset":1537916966
   },
   "id":6167865,
   "name":"Toronto",
   "cod":200
}
0. Bọc nó trong một chức năng và bạn có quả bóng thời tiết của riêng mình

function weatherBalloon[ cityID ] {
  var key = '{yourkey}';
  fetch['//api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key]  
  .then[function[resp] { return resp.json[] }] // Convert data to json
  .then[function[data] {
    console.log[data];
  }]
  .catch[function[] {
    // catch any errors
  }];
}

window.onload = function[] {
  weatherBalloon[ 6167865 ];
}

Đặt cái này bên trong thẻ 

{  
   "coord":{  
      "lon":-79.42,
      "lat":43.7
   },
   "weather":[  
      {  
         "id":804,
         "main":"Clouds",
         "description":"overcast clouds",
         "icon":"04n"
      }
   ],
   "base":"stations",
   "main":{  
      "temp":292.15,
      "pressure":1023,
      "humidity":72,
      "temp_min":291.15,
      "temp_max":293.15
   },
   "visibility":14484,
   "wind":{  
      "speed":5.7,
      "deg":130
   },
   "clouds":{  
      "all":90
   },
   "dt":1537837200,
   "sys":{  
      "type":1,
      "id":3721,
      "message":0.0039,
      "country":"CA",
      "sunrise":1537873704,
      "sunset":1537916966
   },
   "id":6167865,
   "name":"Toronto",
   "cod":200
}
1 và mở 
{  
   "coord":{  
      "lon":-79.42,
      "lat":43.7
   },
   "weather":[  
      {  
         "id":804,
         "main":"Clouds",
         "description":"overcast clouds",
         "icon":"04n"
      }
   ],
   "base":"stations",
   "main":{  
      "temp":292.15,
      "pressure":1023,
      "humidity":72,
      "temp_min":291.15,
      "temp_max":293.15
   },
   "visibility":14484,
   "wind":{  
      "speed":5.7,
      "deg":130
   },
   "clouds":{  
      "all":90
   },
   "dt":1537837200,
   "sys":{  
      "type":1,
      "id":3721,
      "message":0.0039,
      "country":"CA",
      "sunrise":1537873704,
      "sunset":1537916966
   },
   "id":6167865,
   "name":"Toronto",
   "cod":200
}
2 của bạn và bạn nếu bạn thấy phản hồi sau đây bạn có thời tiết

[Nhấn F12 trong Chrome/Firefox/Edge để mở bảng điều khiển dành cho nhà phát triển]

{  
   "coord":{  
      "lon":-79.42,
      "lat":43.7
   },
   "weather":[  
      {  
         "id":804,
         "main":"Clouds",
         "description":"overcast clouds",
         "icon":"04n"
      }
   ],
   "base":"stations",
   "main":{  
      "temp":292.15,
      "pressure":1023,
      "humidity":72,
      "temp_min":291.15,
      "temp_max":293.15
   },
   "visibility":14484,
   "wind":{  
      "speed":5.7,
      "deg":130
   },
   "clouds":{  
      "all":90
   },
   "dt":1537837200,
   "sys":{  
      "type":1,
      "id":3721,
      "message":0.0039,
      "country":"CA",
      "sunrise":1537873704,
      "sunset":1537916966
   },
   "id":6167865,
   "name":"Toronto",
   "cod":200
}

Hiển thị thời tiết

Đối với một lập trình viên, một cấu trúc JSON được tổ chức độc đáo có vẻ đẹp riêng của nó, nhưng những người khác có thể không đồng ý. Chúng tôi thực sự cần đưa dữ liệu này lên trang theo cách có ý nghĩa

Đánh dấu thời tiết

Đã đến lúc thêm một vài thẻ html vào trang sẽ chèn dữ liệu vào. Trong cơ thể của bạn thêm trình giữ chỗ sau

Bây giờ đánh dấu của chúng tôi đã sẵn sàng, chúng tôi cần chèn dữ liệu thời tiết mà chúng tôi đã tìm nạp ở trên vào trình giữ chỗ

vẽThời tiết

Để làm điều này, chúng ta sẽ tạo một hàm 

{  
   "coord":{  
      "lon":-79.42,
      "lat":43.7
   },
   "weather":[  
      {  
         "id":804,
         "main":"Clouds",
         "description":"overcast clouds",
         "icon":"04n"
      }
   ],
   "base":"stations",
   "main":{  
      "temp":292.15,
      "pressure":1023,
      "humidity":72,
      "temp_min":291.15,
      "temp_max":293.15
   },
   "visibility":14484,
   "wind":{  
      "speed":5.7,
      "deg":130
   },
   "clouds":{  
      "all":90
   },
   "dt":1537837200,
   "sys":{  
      "type":1,
      "id":3721,
      "message":0.0039,
      "country":"CA",
      "sunrise":1537873704,
      "sunset":1537916966
   },
   "id":6167865,
   "name":"Toronto",
   "cod":200
}
3 mới, thêm hàm này vào dưới hàm 
{  
   "coord":{  
      "lon":-79.42,
      "lat":43.7
   },
   "weather":[  
      {  
         "id":804,
         "main":"Clouds",
         "description":"overcast clouds",
         "icon":"04n"
      }
   ],
   "base":"stations",
   "main":{  
      "temp":292.15,
      "pressure":1023,
      "humidity":72,
      "temp_min":291.15,
      "temp_max":293.15
   },
   "visibility":14484,
   "wind":{  
      "speed":5.7,
      "deg":130
   },
   "clouds":{  
      "all":90
   },
   "dt":1537837200,
   "sys":{  
      "type":1,
      "id":3721,
      "message":0.0039,
      "country":"CA",
      "sunrise":1537873704,
      "sunset":1537916966
   },
   "id":6167865,
   "name":"Toronto",
   "cod":200
}
4 của bạn. Điều này sẽ lấy dữ liệu thời tiết làm tham số và chèn nó vào các phần tử div mô tả, tạm thời và vị trí

function drawWeather[ d ] {
	var celcius = Math.round[parseFloat[d.main.temp]-273.15];
	var fahrenheit = Math.round[[[parseFloat[d.main.temp]-273.15]*1.8]+32]; 
	
	document.getElementById['description'].innerHTML = d.weather[0].description;
	document.getElementById['temp'].innerHTML = celcius + '°';
	document.getElementById['location'].innerHTML = d.name;
}

Hầu hết dữ liệu là thay thế trực tiếp, ngoại trừ nhiệt độ. OpenWeatherMap cung cấp cho chúng tôi nhiệt độ theo Kelvin, vì chúng không lộn xộn, vì vậy chúng tôi có hai chuyển đổi khác nhau đang diễn ra

sử dụng drawWeather

Tất nhiên chức năng là một nửa trận chiến. Chúng ta chưa gọi nó từ hàm 

{  
   "coord":{  
      "lon":-79.42,
      "lat":43.7
   },
   "weather":[  
      {  
         "id":804,
         "main":"Clouds",
         "description":"overcast clouds",
         "icon":"04n"
      }
   ],
   "base":"stations",
   "main":{  
      "temp":292.15,
      "pressure":1023,
      "humidity":72,
      "temp_min":291.15,
      "temp_max":293.15
   },
   "visibility":14484,
   "wind":{  
      "speed":5.7,
      "deg":130
   },
   "clouds":{  
      "all":90
   },
   "dt":1537837200,
   "sys":{  
      "type":1,
      "id":3721,
      "message":0.0039,
      "country":"CA",
      "sunrise":1537873704,
      "sunset":1537916966
   },
   "id":6167865,
   "name":"Toronto",
   "cod":200
}
4. Thay vì bảng điều khiển. nhật ký, cuộc gọi 
{  
   "coord":{  
      "lon":-79.42,
      "lat":43.7
   },
   "weather":[  
      {  
         "id":804,
         "main":"Clouds",
         "description":"overcast clouds",
         "icon":"04n"
      }
   ],
   "base":"stations",
   "main":{  
      "temp":292.15,
      "pressure":1023,
      "humidity":72,
      "temp_min":291.15,
      "temp_max":293.15
   },
   "visibility":14484,
   "wind":{  
      "speed":5.7,
      "deg":130
   },
   "clouds":{  
      "all":90
   },
   "dt":1537837200,
   "sys":{  
      "type":1,
      "id":3721,
      "message":0.0039,
      "country":"CA",
      "sunrise":1537873704,
      "sunset":1537916966
   },
   "id":6167865,
   "name":"Toronto",
   "cod":200
}
3

function weatherBalloon[ cityID ] {
	var key = '{yourkey}';
	fetch['//api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key]  
	.then[function[resp] { return resp.json[] }] // Convert data to json
	.then[function[data] {
		drawWeather[data]; // Call drawWeather
	}]
	.catch[function[] {
		// catch any errors
	}];
}

Trang của bạn bây giờ trông như thế này

few clouds
9°
Toronto

Làm cho nó đẹp

Chúng ta có thể dừng lại ở đây nhưng điều đó sẽ thú vị biết bao. Chúng tôi cần nâng cấp trò chơi phông chữ của mình và thay đổi nền một chút tùy thuộc vào mô tả thời tiết. Thêm thẻ Google Font và 

{  
   "coord":{  
      "lon":-79.42,
      "lat":43.7
   },
   "weather":[  
      {  
         "id":804,
         "main":"Clouds",
         "description":"overcast clouds",
         "icon":"04n"
      }
   ],
   "base":"stations",
   "main":{  
      "temp":292.15,
      "pressure":1023,
      "humidity":72,
      "temp_min":291.15,
      "temp_max":293.15
   },
   "visibility":14484,
   "wind":{  
      "speed":5.7,
      "deg":130
   },
   "clouds":{  
      "all":90
   },
   "dt":1537837200,
   "sys":{  
      "type":1,
      "id":3721,
      "message":0.0039,
      "country":"CA",
      "sunrise":1537873704,
      "sunset":1537916966
   },
   "id":6167865,
   "name":"Toronto",
   "cod":200
}
7 sau vào thẻ 
{  
   "coord":{  
      "lon":-79.42,
      "lat":43.7
   },
   "weather":[  
      {  
         "id":804,
         "main":"Clouds",
         "description":"overcast clouds",
         "icon":"04n"
      }
   ],
   "base":"stations",
   "main":{  
      "temp":292.15,
      "pressure":1023,
      "humidity":72,
      "temp_min":291.15,
      "temp_max":293.15
   },
   "visibility":14484,
   "wind":{  
      "speed":5.7,
      "deg":130
   },
   "clouds":{  
      "all":90
   },
   "dt":1537837200,
   "sys":{  
      "type":1,
      "id":3721,
      "message":0.0039,
      "country":"CA",
      "sunrise":1537873704,
      "sunset":1537916966
   },
   "id":6167865,
   "name":"Toronto",
   "cod":200
}
8 trong html của bạn




body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1.3em;
    color: #fff;
    text-shadow: .1em .1em 0 rgba[0,0,0,0.3];
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient[to right top, #99bbcb, #a5c7d7, #b1d4e2, #bde0ee, #c9edfa];
}
h1 {
    margin: 0 auto;
    font-size: 2.2em;
    text-align: center;
    color: #fff;
    font-size: 5em;
}
body.sunny {
    background-image: linear-gradient[to right top, #ff4e50, #ff713e, #ff932b, #ffb41d, #f9d423];
}
body.cloudy {
    background-image: linear-gradient[to right top, #63747c, #71858e, #7f96a0, #8da8b2, #9bbac5];
}
body.rainy {
    background-image: linear-gradient[to right top, #637c7b, #718e8c, #7ea09e, #8db2b0, #9bc5c3];
}

Chúng tôi đang sử dụng flexbox để căn giữa nội dung của chúng tôi theo chiều dọc và chiều ngang trên trang, nhưng chúng tôi cũng cần thêm chiều cao cho nội dung. Theo mặc định, phần thân chỉ lớn bằng nội dung của nó, vì vậy chúng tôi sẽ đảm bảo rằng nó là 

{  
   "coord":{  
      "lon":-79.42,
      "lat":43.7
   },
   "weather":[  
      {  
         "id":804,
         "main":"Clouds",
         "description":"overcast clouds",
         "icon":"04n"
      }
   ],
   "base":"stations",
   "main":{  
      "temp":292.15,
      "pressure":1023,
      "humidity":72,
      "temp_min":291.15,
      "temp_max":293.15
   },
   "visibility":14484,
   "wind":{  
      "speed":5.7,
      "deg":130
   },
   "clouds":{  
      "all":90
   },
   "dt":1537837200,
   "sys":{  
      "type":1,
      "id":3721,
      "message":0.0039,
      "country":"CA",
      "sunrise":1537873704,
      "sunset":1537916966
   },
   "id":6167865,
   "name":"Toronto",
   "cod":200
}
9 tức là
0 chiều cao của khung nhìn
1 đổi lớp

Chức năng 

{  
   "coord":{  
      "lon":-79.42,
      "lat":43.7
   },
   "weather":[  
      {  
         "id":804,
         "main":"Clouds",
         "description":"overcast clouds",
         "icon":"04n"
      }
   ],
   "base":"stations",
   "main":{  
      "temp":292.15,
      "pressure":1023,
      "humidity":72,
      "temp_min":291.15,
      "temp_max":293.15
   },
   "visibility":14484,
   "wind":{  
      "speed":5.7,
      "deg":130
   },
   "clouds":{  
      "all":90
   },
   "dt":1537837200,
   "sys":{  
      "type":1,
      "id":3721,
      "message":0.0039,
      "country":"CA",
      "sunrise":1537873704,
      "sunset":1537916966
   },
   "id":6167865,
   "name":"Toronto",
   "cod":200
}
3 của chúng tôi bây giờ sẽ cần cập nhật để thay đổi hoán đổi lớp cơ thể giữa
3,
4 và
5. Chúng ta sẽ xem mô tả thời tiết được cung cấp bởi API để tìm kiếm một vài từ khóa và chỉ cần điều chỉnh lớp học nếu chúng ta tìm thấy bất cứ điều gì

function drawWeather[ d ] {
	var celcius = Math.round[parseFloat[d.main.temp]-273.15];
	var fahrenheit = Math.round[[[parseFloat[d.main.temp]-273.15]*1.8]+32]; 
	var description = d.weather[0].description;
	
	document.getElementById['description'].innerHTML = description;
	document.getElementById['temp'].innerHTML = celcius + '°';
	document.getElementById['location'].innerHTML = d.name;
	
	if[ description.indexOf['rain'] > 0 ] {
  	document.body.className = 'rainy';
  } else if[ description.indexOf['cloud'] > 0 ] {
  	document.body.className = 'cloudy';
  } else if[ description.indexOf['sunny'] > 0 ] {
  	document.body.className = 'sunny';
  }
}

bầu trời quang đãng phía trước

Bây giờ bạn có một trang thời tiết đang hoạt động. Chúng tôi chỉ làm trầy xước bề mặt trên dữ liệu có sẵn được cung cấp cho chúng tôi. Chúng tôi cũng nhận được thông tin về gió, mặt trời mọc/múi trời, độ ẩm, v.v. Nếu bạn thích mạo hiểm, hãy thêm một vài div nữa và bắt đầu thử với phần còn lại của dữ liệu. Nếu bạn chỉ muốn chơi xung quanh, hãy xem phiên bản hoàn chỉnh trên CodePen

Làm cách nào để tích hợp API thời tiết?

Có nhiều khả năng về cách tích hợp dữ liệu API thời tiết vào trang web của bạn. Một vài ví dụ bao gồm. hiển thị thời tiết hiện tại cho một khu vực cụ thể. .
Tìm API thời tiết. .
Đăng ký tài khoản RapidAPI miễn phí. .
Đăng ký một kế hoạch. .
Kiểm tra các điểm cuối. .
Sao chép đoạn mã

Làm cách nào để tạo một ứng dụng thời tiết bằng JavaScript?

Bước 1. Bây giờ hãy truy cập https. //bản đồ thời tiết mở. org/ và tạo một tài khoản và lấy API KEY của bạn. Bước 2. Sau đó, bạn có thể tạo một thư mục và thêm một tệp, ví dụ: chỉ mục. html và tập lệnh. tệp js .

API thời tiết hoạt động như thế nào?

API thời tiết tương tự như API bản đồ về khả năng tích hợp và tính linh hoạt của nguồn dữ liệu. Mỗi nhà cung cấp dịch vụ thu thập, tổng hợp và xử lý dữ liệu khí tượng và thời tiết có liên quan khác, sau đó cung cấp quyền truy cập vào dữ liệu đó qua API . Điều này bao gồm dữ liệu như. Nhiệt độ.

Làm cách nào để sử dụng API thời tiết trong React js?

Sử dụng React và API để xây dựng ứng dụng thời tiết .
Cách lấy khóa API
Tạo ứng dụng và cài đặt các gói
Xây dựng thành phần tìm kiếm thành phố
Xây dựng thành phần thời tiết hiện tại
Tìm nạp và ánh xạ dữ liệu từ API thời tiết
Xây dựng thành phần dự báo thời tiết

Bài Viết Liên Quan

Bảng chữ cái truy cập css
Tour de France sẽ kết thúc ở đâu vào năm 2024?
Khi nào chúng ta nên sử dụng bản đồ trong JavaScript?
1ppm bằng bao nhiêu mg kg
Php là gì nó được sử dụng ở đâu?
Nodejs MySQL đồng bộ
Cách xóa toàn bộ công thức trong Excel
Tìm kiếm Python trong nhiều tệp PDF
Một từ điển python có thể có một danh sách các giá trị không?
Liệu nó có tuyết ở Vancouver vào tháng 1 năm 2023?
4mb bằng bao nhiêu byte
Thuật toán băm tốt nhất PHP
Excel định dạng số 2 chữ số công thức
Cách bật đồ họa nền trong css in
Phân tách Python và gán cho nhiều biến
Cài đặt tiện ích mở rộng phpstorm
Bàn phím đợi python
Ngày 18 tháng 3 năm 2024 Megawati
Thẻ HTML5 nào sau đây được sử dụng trong hiển thị video đa phương tiện abcd không có ở trên
Javascript xóa tên tệp khỏi đường dẫn

Toplist mới

#1
Top 7 tết mậu thân năm 1968 đã diễn ra sự kiện gì ở miền nam nước ta 2023
6 tháng trước
#2
Top 13 luyện từ và câu: dấu gạch ngang lớp 4 trang 45 2023
6 tháng trước
#3
Top 6 trong mặt phẳng oxy ảnh của đường thẳng d 3x y 4=0 2023
6 tháng trước
#4
Top 6 thử thách thần chết thuyết minh phần 2 2023
6 tháng trước
#5
Top 4 vở bài tập tiếng việt lớp 3 tập 2 chính tả trang 15 2023
6 tháng trước
#6
Top 5 áo khoác nam quảng châu cao cấp 2023
6 tháng trước
#7
Top 4 nội dung nào sau đây không phải là trách nhiệm của đơn vị đầu mối cung cấp thông tin 2023
6 tháng trước
#8
Top 9 mẫu đồng phục công sở đẹp 2022 2023
6 tháng trước
#9
Top 5 ốp lưng iphone 13 pro bảo vệ camera 2023
6 tháng trước

Bài mới nhất

Trưởng ban dân vận tỉnh ủy tiếng anh là gì năm 2024
31 10 11 đến chơi nào eunhyuk donghae full năm 2024
Chữ c trên công tơ điện là gì năm 2024
Cua sốt trứng muối tiếng anh là gì năm 2024
Cải làm dưa chua là cải gì năm 2024
Giải vở bài tập toán lớp 5 bài 168 năm 2024
Tập làm văn kiểm tra viết trang 45 năm 2024
Hùng vương tên thật là gì năm 2024
Bài tập tiếng việt cuối tuần 11 lớp 1 năm 2024
Cách khắc phục lỗi máy tính bị màn hình xanh năm 2024

Chủ Đề

programming Hỏi Đáp Là gì Mẹo Hay Toplist Địa Điểm Hay Học Tốt mẹo hay Công Nghệ Nghĩa của từ Bao nhiêu Khỏe Đẹp đánh giá Tiếng anh Top List bao nhieu bao nhiêu hướng dẫn Món Ngon So Sánh Bài tập So sánh Xây Đựng Sản phẩm tốt Ngôn ngữ Bài Tập javascript Ở đâu Thế nào Hướng dẫn Dịch Tại sao Máy tính Đại học