Tích hợp thông tin thời tiết vào website P1

Hiện nay có khá nhiều khách hàng có nhu cầu tích hợp thông tin thời tiết, giá vàng, ngoại tệ... vào website của mình. Và để thực hiện được việc này không khó, có khá nhiều kết quả tìm kiếm đưa ra để giải quyết vấn đề này. Trước đây tôi có sử dụng qua một website khác như vnexpress nhưng được một thời gian phải lập trình lại  vì bên họ thay đổi, sau này lại chuyển qua dùng widget weather của kuma...và nhận thấy một điều mình bị phụ thuộc khá nhiều và khó tùy biến. Vấn đề ở đây là phải tìm được một nguồn cung cấp ổn định...

Tích hợp thời tiết của thoitiet.kuma.vn

Bạn chỉ cần bỏ đoạn code javascript này vào vị trí mà bạn cần chèn thông tin thời tiết, có thể tùy chọn thêm một số thành phố ở tham số trên url, tuy nhiên thông tin không được phong phú và không tùy chọn được nhiều.

<div id='widgetWeather'>
<script type="text/javascript" src="http://thoitiet.kuma.vn/widget?web=thuyvk.com&n=danang,quangnam&d=c&bgcolor=FFFFF&bcolor=F3F3F3&bwidth=1px&btype=solid&type=31&v=2"></script>
</div>

Tích hợp thời tiết của yahoo

Mục đích chính của bài viết này là tìm hiểu cách lấy thông tin thời tiết của yahoo cung cấp, vì nguồn cung cấp ở đây theo tôi sẽ khá ổn định. Đầu tiên bạn vào http://weather.yahoo.com/vietnam/ để xem các tỉnh thành phố. Có thể một số tỉnh thành phố không list ra ở đây, chúng ta hãy tìm theo Zip Code.

Các bạn có thể xem Zip Code của các tỉnh thành phố ở link: http://www.vnpaypal.com/2010/07/zip-code-postal-code-cac-tinh-thanh.html. Sau khi tìm kiếm được thành phố, bạn click để xem chi tiết, ví dụ ở đây tôi xem của Vũng Tàu đường link sẽ như dưới đây.

http://weather.yahoo.com/vietnam/ba-ria-vung-tau/vung-tau-1252672/

Trên là link thông tin chi tiết của thành phố Vũng Tàu, nhưng cái chúng ta cần là file xml dữ liệu thời tiết, đường link lúc này sẽ như dưới đây, các bạn chú ý tham số màu đỏ là ID của Tỉnh cần xem dữ liệu.

http://weather.yahooapis.com/forecastrss?w=1252672

Mặc định thông tin thời tiết trong file xml của yahoo tính theo °F, muốn chuyển sang °C các bạn thêm tham số u=c vào đường dẫn trên ta sẽ được

http://weather.yahooapis.com/forecastrss?w=1252672&u=c

Tương tự như trên, các bạn có thể lấy được file xml dữ liệu thời tiết của một số tỉnh thành khác, bây giờ chúng ta hãy tiến hành xây dựng một chức năng đọc file xml này và hiện thì thông tin thời tiết từ dữ liệu xml này ra website của chúng ta.

- Đầu tiên, các bạn tạo một project mới theo cấu trúc như sau.

- File readXML.ashx có nhiệm vụ phân tích chuỗi XML trả về của yahoo và hiển thị thông tin chúng ta cần lấy, ở ví dụ này tôi chỉ lấy một số thông tin cơ bản của thời tiết ngày hiện tại, các bạn có thể phát triển thêm để lấy tất cả các ngày trong tuần từ file XML mà yahoo cung cấp

public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        ///@source: http://weather.yahoo.com/vietnam/
        ///@author: thuyvk - 21/10/2013
        string LocationId = context.Request.QueryString["id"].ToString();
        XmlDocument xdoc = new XmlDocument();
        xdoc.Load("http://weather.yahooapis.com/forecastrss?w=" + LocationId + "&u=c");
        XmlNodeList xNodelst = xdoc.DocumentElement.SelectNodes("channel");
        string ContentHTML = "";
        foreach (XmlNode xNode in xNodelst)
        {
            ContentHTML += "<div class='weatherItems'><img alt='thuyvk.com' src='" + xNode["image"].ChildNodes[4].InnerText + "'/></div>";
            ContentHTML += "<div class='weatherItems'><span class='spName'>Thành phố:</span><span class='spValue'><b style='text-transform:uppercase; color:Blue;'>" + xNode["yweather:location"].Attributes["city"].InnerText + "</b>,&nbsp;" + xNode["item"].ChildNodes[5].Attributes["text"].InnerText + "</span></div>";
            ContentHTML += "<div class='weatherItems'><span class='spName'>Mặt trời:</span><span class='spValue'>Mọc - " + xNode["yweather:astronomy"].Attributes["sunrise"].InnerText + ", Lặn - " + xNode["yweather:astronomy"].Attributes["sunset"].InnerText + "</span></div>";
            ContentHTML += "<div class='weatherItems'><span class='spName'>Nhiệt độ:</span><span class='spValue'>" + xNode["yweather:wind"].Attributes["chill"].InnerText + "&nbsp;&deg;" + xNode["yweather:units"].Attributes["temperature"].InnerText + "</span></div>";
            ContentHTML += "<div class='weatherItems'><span class='spName'>Độ ẩm:</span><span class='spValue'>" + xNode["yweather:atmosphere"].Attributes["humidity"].InnerText + "%</span></div>";
            ContentHTML += "<div class='weatherItems'><span class='spName'>Gió:</span><span class='spValue'>" + getWindDirection(Convert.ToInt32(xNode["yweather:wind"].Attributes["direction"].InnerText)) + ",&nbsp;" + xNode["yweather:wind"].Attributes["speed"].InnerText + "&nbsp;" + xNode["yweather:units"].Attributes["speed"].InnerText + "</span></div>";
        }

        context.Response.Write(ContentHTML);
    }

- Đoạn đoạn code trên chú ý có một hàm getWindDirection lấy hướng gió, vì yahoo chỉ trả về tham số, từ tham số chúng ta cần chuyển thành chữ, hàm getWindDirection bạn xem dưới đây

//Lấy hướng gió
    private string getWindDirection(int w)
    {
        try
        {
            string direct = "";
            if (w == 0)
            {
                direct = "không xác định";
            }
            else if ((w >= 355 && w < 360) || (w > 0 && w <= 5))
            {
                direct = "bắc";
            }
            else if (w > 5 && w <= 40)
            {
                direct = "bắc đông bắc";
            }
            else if (w > 40 && w <= 50)
            {
                direct = "đông bắc";
            }
            else if (w > 50 && w <= 85)
            {
                direct = "đông đông bắc";
            }
            else if (w > 85 && w <= 95)
            {
                direct = "đông";
            }
            else if (w > 95 && w <= 130)
            {
                direct = "đông đông nam";
            }
            else if (w > 130 && w <= 140)
            {
                direct = "đông nam";
            }
            else if (w > 140 && w <= 175)
            {
                direct = "nam đông nam";
            }
            else if (w > 175 && w <= 185)
            {
                direct = "nam";
            }
            else if (w > 185 && w <= 220)
            {
                direct = "nam tây nam";
            }
            else if (w > 220 && w <= 230)
            {
                direct = "tây nam";
            }
            else if (w > 230 && w <= 265)
            {
                direct = "tây tây nam";
            }
            else if (w > 265 && w <= 275)
            {
                direct = "tây";
            }
            else if (w > 275 && w <= 310)
            {
                direct = "tây tây bắc";
            }
            else if (w > 310 && w <= 320)
            {
                direct = "tây bắc";
            }
            else if (w > 320 && w < 355)
            {
                direct = "bắc tây bắc";
            }
            return direct;
        }
        catch
        {
            return "không xác định";
        }
    }

- Bây giờ chúng ta sẽ hiển thị thông tin thời tiết trả về từ file readXML.ashx chúng ta vừa tạo, ở trang weather.aspx chúng ta có code như sau

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Thuy.vk's Blog | Tích hợp thông tin thời tiết vào website</title>
    <link href="css/StyleSheet.css" rel="stylesheet" />
    <script src="js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#htmlWeather').load('readXML.ashx?id=1236594');
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="htmlWeather">
        <img alt="loading..." src="img/ajax-loader.gif" />
    </div>
       
    </form>
</body>
</html>

- Như vậy là chúng ta đã làm xong một chức năng xem thời tiết cho website, và vì tự mình làm nên các bạn có thể tùy biến theo nhu cầu của mình một cách khá dễ dàng, và nguồn dữ liệu từ yahoo ổn định sẽ đảm bảo cho bạn không phải lập trình lại trong quá trình sử dụng

Kết

Ở ví dụ trên tôi chỉ hiển thị một thành phố, với các thông tin thời tiết cơ bản, thông qua ví dụ này các bạn có thể phát triển thêm để có một ứng dụng xem thời tiết phù hợp với nhu cầu của mình hơn. Để dễ hiểu các bạn có thể download code đính kèm ở cuối bài viết

Download Source

Related Post


Thay đổi giao diện website Asp.Net với App_Themes
Wednesday, October 16, 2013
Giao diện website thân thiện với người dùng là một mục tiêu mà bất cứ nhà phát triển web nào cũng quan tâm và muốn hướng tới, tuy nhiên để đáp ứng được nhiều người dùng thì lại là một vấn đề không hề đơn giản vì mỗi người sẽ có một cách nhìn nhận và đánh giá khác nhau. Và để đáp ứng tốt hơn, chúng ta nên cân nhắc đến việc xây dựng thêm chức năng để có thể cho phép người dùng linh hoạt thay đổi được giao diện theo sở thích. Trong bài này, chúng ta sẽ tìm hiểu cách thay đổi giao diện của một website Asp.net bằng cách sử dụng App_Themes...
So sánh LINQ to SQL và ADO.NET Entity Framework
Thursday, October 10, 2013
LINQ to SQL và Entity Framework có rất nhiều điểm chung, nhưng mỗi cái có những đặc tính riêng nhắm đến những trường hợp khác nhau trong Orcas (bản VS 2008).  
Search

Đăng ký nhận bài mới


Category

Blog Archive