Preamble
Hello everyone, I am new to a free weather forecast api with 60 calls per minute or 1 million calls per month, it has weather data for more than 200,000 cities and is collected and processed. managed in a variety of ways from satellites, radars or weather stations. It also has a lot of return formats like JSON, XML, HTML. So I try to make an application to see the weather from the api.
Conduct
First, if you want to have an API, you need to access the page OpenWheather, If you do not have an account, please register an account, next you choose Pricing then choose Get API key then choose next API keys Here there will be a default key you can use always or you can create a new key according to you. Female key This will be passed in when we call the api to get weather information. A note is that when registering for an account, it will send a verification email to your account registration email, so you need to verify to be able to use this key (when you have registered but have not verified your email). it still has a default key but when calling the api using that key, it will get a 401 error). Next is about Api, you choose API then choose API doc of “Current Weather Data” because this is free. We will have an api URL of the type https://api.openweathermap.org/data/2.5/weather?q={cityname}&appid={APIkey}. With 2 Params is the cityname APi key corresponding to the city name you want to see the weather and the key that we just created above. There are also some other Parameters such as:
- mode: Specifies the return type. There are xml and html values. If you don’t use it, the default is json
- units: Units of measurement include
standard, metric, imperial. If you don’t use it, the default will be standard. For unit imperial will return the temperature in degrees F, metric then it will return the temperature in degrees Celsius, and by default, the temperature will return in degrees Kelvin. - lang: Data return language
You can see details about API return fields at this. Because it is quite long and the above doc has also explained in detail, I will not include it in the post. OK now let’s test to see if the api works, I will use 2 more Parameters that are units = metric and lang=vi so that the returned result has the temperature in degrees Celsius and the language is Vietnamese. Here is the result
So we already have an API, next we need to build an interface to display data from the api. My interface will look like this
When the user enters the city name, it will make an api call to return the result. First of all, you have to create a Vue project first, and remember to install them all axios with momentjs because I will need to use it later. The interface style you can see in the source code, I will leave the github link below, Here I will focus on how to process and display data. When the user enters the city, he will make an api call to get the data, so I have an event in the search tag getAPI when the data changes as follows
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"city"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"search-input"</span> placeholder<span class="token operator">=</span><span class="token string">"Tìm kiếm"</span> @change<span class="token operator">=</span><span class="token string">"getAPI"</span> <span class="token operator">/</span><span class="token operator">></span> methods<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">async</span> <span class="token function">getAPI</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">{</span> q<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>city<span class="token punctuation">,</span> appid<span class="token operator">:</span> <span class="token string">"c34d0b30de706ed953190741dcd852f2"</span><span class="token punctuation">,</span> units<span class="token operator">:</span> <span class="token string">"metric"</span><span class="token punctuation">,</span> lang<span class="token operator">:</span> <span class="token string">"vi"</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> data<span class="token operator">:</span> response<span class="token punctuation">.</span>data<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data <span class="token operator">=</span> data<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
OKi so got the data. Next is the date and time part and now this I will take the current time and format according to the style I want to display + language.
| <span class="token operator"><</span>span<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> time <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> computed<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">time</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token function">moment</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> date<span class="token punctuation">.</span><span class="token function">locale</span><span class="token punctuation">(</span><span class="token string">"vi"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">"dddd, Do MMMM"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> |
The location part, I will get it from the name field in the data returned by the api. At first, if you don’t call the api, it will be - -
| <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>data.data<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>address<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ data.data.name }}<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">v-else</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>address<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>- -<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> |
Next is the weather icon part OpenWheather give us the icon URL of the form http://openweathermap.org/img/wn/10d@2x.png. In data returns the part weather[0].icon will return the corresponding icon of the weather so we just need to change 10d with icon return that is okay. I have an icon like this
| <span class="token operator"><</span>img <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"image"</span> <span class="token operator">:</span>src<span class="token operator">=</span><span class="token string">"srcImage"</span> <span class="token operator">/</span><span class="token operator">></span> computed<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">srcImage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">http://openweathermap.org/img/wn/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>data<span class="token punctuation">.</span>weather<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>icon<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">@2x.png</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token string">"http://openweathermap.org/img/wn/10d@2x.png"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> |
If there is no data, I also display an icon for beauty.
The temperature part is just taken out from the magnetic field temp of data and then display it. If you don’t have data, you can also display a value in it
| <span class="token operator"><</span>p <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"temperature"</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token function">temperature</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> methods<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">temperature</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">.</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> temperature <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>value<span class="token punctuation">.</span>data<span class="token punctuation">.</span>main<span class="token punctuation">.</span>temp<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> temperature<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token number">23</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> |
The sunrise and sunset parts are located at the school, respectively sunrise and sunset need to reformat before displaying, do the following:
| <span class="token operator"><</span>p <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"font-bold"</span><span class="token operator">></span> <span class="token constant">MT</span> <span class="token constant">M</span>ọc<span class="token operator">:</span> <span class="token operator"><</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"font-nomal"</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token punctuation">{</span> sunrise <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> computed<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">sundown</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> sundown <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>data<span class="token punctuation">.</span>sys<span class="token punctuation">.</span>sunset<span class="token punctuation">;</span> <span class="token keyword">return</span> moment<span class="token punctuation">.</span><span class="token function">unix</span><span class="token punctuation">(</span>sundown<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">"H:mm"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token string">"6:00"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> |
Finally, the humidity and wind speed are located in the field humidity and speed cWe just need to display it, the default wind speed is m/s you can change it back to km/h by multiplying by 3.6.
That’s it this is the result
Conclude
So, I have introduced to you a weather API so that you can make your own weather viewing application, you can go to the homepage of the website. OpenWheather to find out more details. My article ends here, thank you for watching, if you find the article useful, please give me an upvote, click follow to update the latest posts from me. Thank you
Source code: https://github.com/hoangbh-0986/open-weather
