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ừ 0 với JavaScript để lấy dữ liệu từ API của OpenWeatherMap Show
OpenWeatherMap APIOpenWeatherMap 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óaSau 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ốiLệ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 1 của bạn và thêm nó vào 2 dưới dạng tham số 3 được hiển thị bên dướitheo 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 4 rõ ràng. Một danh sách các thành phố có sẵn ở đâytheo 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 đó 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 3166theo 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 HTMLKhá đơ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 6 trong trình chỉnh sửa yêu thích của bạn và bắt đầu với HTML sau
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ếtFetch API rất đơn giản. Nó hoạt động với một chức năng gọi là 0 lấy 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 9 để trả về phản hồi 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
Đặt cái này bên trong thẻ 1 và mở 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)
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 3 mới, thêm hàm này vào dưới hàm 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í
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 drawWeatherTấ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 4. Thay vì bảng điều khiển. nhật ký, cuộc gọi 3
Trang của bạn bây giờ trông như thế này
Làm cho nó đẹpChú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à 7 sau vào thẻ 8 trong html của bạn
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à 9 tức là 0 chiều cao của khung nhìn
Chức năng 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ì
bầu trời quang đãng phía trướcBâ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 |