Hướng Dẫn Tích Hợp Dữ Liệu Thời Tiết Vào Website Bằng API Miễn Phí
Hiển thị thời tiết ngay trên website là một tính năng nhỏ nhưng mang lại giá trị lớn: nó giúp trang của bạn hữu ích hơn, giữ chân người dùng lâu hơn và tạo cảm giác nội dung luôn được cập nhật. Với các trang du lịch, tin tức, bất động sản hay website của cửa hàng địa phương, một widget thời tiết đúng khu vực có thể tăng đáng kể trải nghiệm người dùng.
Tin vui là bạn hoàn toàn có thể làm điều này miễn phí, không cần thuê dịch vụ đắt đỏ. Trong bài viết này, chúng ta sẽ đi qua cách chọn nguồn dữ liệu, lấy dữ liệu bằng API, hiển thị lên website và những lưu ý quan trọng về hiệu năng để tính năng này không làm chậm trang của bạn.
Vì sao nên tích hợp thời tiết vào website?
Trước khi bắt tay vào code, hãy hiểu rõ lợi ích để triển khai đúng chỗ:
- Tăng thời gian ở lại trang: thông tin hữu ích, cập nhật theo thời gian thực khiến người dùng nán lại lâu hơn.
- Phù hợp nhiều lĩnh vực: trang du lịch (gợi ý thời điểm đi), thương mại điện tử (giao hàng), nông nghiệp, sự kiện ngoài trời, bất động sản nghỉ dưỡng…
- Tạo cảm giác nội dung "sống": một trang có dữ liệu tự cập nhật luôn tạo thiện cảm hơn trang tĩnh.
- Tận dụng cho SEO nội dung địa phương: kết hợp thời tiết với nội dung theo từng khu vực giúp trang giàu thông tin hơn.
Chọn nguồn dữ liệu: API miễn phí hay trả phí?
Có khá nhiều dịch vụ cung cấp dữ liệu thời tiết, phổ biến nhất là:
- Open-Meteo: miễn phí cho mục đích phi thương mại, không cần API key, dữ liệu theo giấy phép CC-BY 4.0. Rất phù hợp để bắt đầu.
- OpenWeatherMap: có gói miễn phí giới hạn số lượt gọi, cần đăng ký API key.
- WeatherAPI, Tomorrow.io…: nhiều tính năng, nhưng thường tính phí khi dùng nhiều.
Với đa số website vừa và nhỏ, Open-Meteo là lựa chọn hợp lý nhất vì đơn giản, ổn định và không tốn chi phí. Vì vậy phần hướng dẫn dưới đây sẽ dùng Open-Meteo.
Một lưu ý quan trọng về độ chi tiết dữ liệu: các API thời tiết toàn cầu (bao gồm Open-Meteo) trả về dữ liệu theo toạ độ (kinh độ – vĩ độ) dựa trên lưới mô hình dự báo, độ phân giải với khu vực Việt Nam thường vào khoảng 9–11 km. Nghĩa là hai điểm gần nhau vài km (ví dụ hai quận nội thành) có thể cho kết quả gần như giống nhau. Khi thiết kế, bạn nên hiển thị thời tiết ở cấp tỉnh/thành hoặc khu vực, thay vì cố tách quá chi tiết theo từng phường/quận.
Bước 1: Lấy dữ liệu từ Open-Meteo
Open-Meteo dùng một request HTTP GET đơn giản. Bạn chỉ cần truyền toạ độ và các thông số muốn lấy. Ví dụ lấy thời tiết hiện tại cho TP.HCM (vĩ độ 10.82, kinh độ 106.63):
https://api.open-meteo.com/v1/forecast?latitude=10.82&longitude=106.63¤t=temperature_2m,relative_humidity_2m,weather_code&timezone=autoDùng JavaScript để gọi và xử lý kết quả:
async function getWeather(lat, lon) {
const url = `https://api.open-meteo.com/v1/forecast` +
`?latitude=${lat}&longitude=${lon}` +
`¤t=temperature_2m,relative_humidity_2m,weather_code` +
`&timezone=auto`;
const res = await fetch(url);
if (!res.ok
data res
data
Nếu muốn lấy dự báo theo giờ hoặc theo ngày, chỉ cần thêm tham số hourly hoặc daily, ví dụ &daily=temperature_2m_max,temperature_2m_min,precipitation_sum.
Bước 2: Hiển thị widget thời tiết trên website
Sau khi có dữ liệu, bạn hiển thị lên giao diện. Open-Meteo trả về weather_code theo chuẩn WMO — bạn cần ánh xạ mã này sang mô tả và icon tương ứng.
function moTaThoiTiet(code) {
if (code === 0) return "Trời quang";
if (code <= 3) return "Có mây";
if (code >= 45 && code <= 48) return "Sương mù";
if (code >= 51 && code <= 67) return "Mưa nhỏ đến mưa vừa";
if (code >= 80 && code <= 82)
code
w lat lon
elementId
e
e
Sau đó chỉ cần một thẻ <div id="weather"></div> trên trang và gọi renderWeather(10.82, 106.63, "weather"). Bạn có thể tự do trang trí widget bằng CSS cho phù hợp giao diện.
Bước 3: Lưu ý về hiệu năng và hosting
Đây là phần nhiều người bỏ qua nhưng lại quyết định việc tính năng thời tiết giúp ích hay làm chậm website:
- Cache lại kết quả: đừng gọi API mỗi lần tải trang. Thời tiết không đổi theo từng phút, nên hãy lưu cache 15–60 phút (ở phía server hoặc dùng cache của trình duyệt). Cách này giảm tải, tăng tốc và tránh chạm giới hạn request.
- Ưu tiên xử lý phía server (SSR): nếu quan tâm SEO, hãy render dữ liệu vào HTML từ server thay vì để JavaScript đổ dữ liệu sau khi tải. Bot của Google sẽ đọc nội dung chắc chắn hơn.
- Đặt trang trên hạ tầng đủ nhanh: với website gọi API và cập nhật thường xuyên, một VPS hoặc hosting tốc độ cao kết hợp CDN sẽ giúp phản hồi nhanh và ổn định, nhất là khi lượng truy cập tăng vào mùa mưa bão.
- Tôn trọng giấy phép dữ liệu: Open-Meteo dùng giấy phép CC-BY 4.0, nên ghi nguồn khi hiển thị công khai.
Ví dụ thực tế
Để hình dung một sản phẩm hoàn chỉnh, bạn có thể xem cách một trang thời tiết hôm nay tổng hợp dữ liệu và hiển thị theo từng địa phương ở Việt Nam. Trang này có các trang riêng cho từng tỉnh thành, ví dụ thời tiết Hồ Chí Minh, với đầy đủ dự báo theo giờ, theo ngày cùng các chỉ số như độ ẩm, gió, tia UV và chất lượng không khí. Đây là một mô hình tốt để tham khảo cách trình bày dữ liệu thời tiết sao cho dễ đọc và hữu ích cho người dùng.
Kết luận
Tích hợp thời tiết vào website không hề khó: chọn nguồn dữ liệu phù hợp (Open-Meteo là điểm khởi đầu lý tưởng), gọi API, hiển thị bằng một widget gọn gàng và đừng quên cache lại để tối ưu hiệu năng. Chỉ với vài chục dòng code, bạn đã có một tính năng vừa hữu ích cho người dùng vừa giúp trang trông "sống động" hơn.
Nếu website của bạn hướng đến nội dung địa phương hoặc du lịch, đây là một bổ sung rất đáng cân nhắc. Quan trọng nhất, hãy triển khai gọn nhẹ và đặt trên một nền tảng hosting đủ nhanh để trải nghiệm luôn mượt mà.
