In this demonstration, I will show you how to create a cross-platform real-world weather application using WeatherStack API. Delphi FireMonkey applications can target Windows, macOS, and Linux on the desktop. Additionally, they can also target Android and iOS on mobile.
Here is what we create in today’s demonstration:
Table of Contents
What is the WeatherStack API?
The WeatherStack API is one of the market-leading weather rest api services for any application. It has real-time functionality and historical weather information and supports all major programming languages. You can retrieve accurate weather information for any location instantly.
Yes, we have been exploring and learning about WeatherStack API. Here you can see other posts which demonstrate the best features of the WeatherStack API. Moreover, flexibility over other similar web services in the market.
How to start with WeatherStack API?
It is all simple! Just head over to the WeatherStack official web page and sign up for a free subscription plan and get your API Access Key from the dashboard.
And here is a sample API request:
Be sure to check out the official documentation before starting to use the API!
How to create a cross-platform application with the same codebase that runs on Windows, macOS, iOS, Android, and Linux?
With Delphi FireMonkey, you can create a native and cross-platform application from a single code base in no time!
FireMonkey Cross-Platform framework offers you to build native applications with 5x faster productivity. With hundreds of components and libraries, you can design and create fully functional applications swiftly.
Furthermore, with the new FireMonkey App Low Code Wizard, you can build and generate a cross-platform project by selecting available options in the wizard.
FireMonkey App Low Code Wizard can create multiple screens and demonstrated coding best practices. Besides, if you need customization you can easily code it with Delphi!
How to start with Delphi FireMonkey?
Here you can start learning Delphi FireMonkey with the free Bootcamp session which covers most of the essential things you need to start developing cross-platform applications with Delphi FireMonkey!
How to create a cross-platform weather app with Delphi using WeatherStack API?
In this demonstration, I will create this app and show you how to integrate with WeatherStack API.
How to connect to RESTful web services in Delphi?
REST Debugger is a powerful environment to play with RESTful web services. You can start REST Debugger from the Tools menu of the IDE.
Here is how we can establish a connection:
And after successfully connecting to the RESTful web service, we can just copy configured REST Client components by clicking the Copy components button and paste them into our project.
Here is our application user interface structure:
The user interface is responsive and flexible. I have tried to utilize best practices in UI design.
Now, you need to paste the copied components from the REST Debugger and create an OnClick event on the Search button.
And paste this code to the OnClick event.
|
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
procedure TFormMain.BtnRequestClick(Sender: TObject); begin MultiView1.HideMaster; RESTClient1.ResetToDefaults; RESTClient1.Accept := 'application/json'; RESTClient1.AcceptCharset := 'UTF-8, *;q=0.8'; RESTClient1.BaseURL := 'http://api.weatherstack.com/current'; // give city name in the URL query RESTRequest1.Resource := Format('?access_key=1ec3dade5a2d89dc10a6aecd5b84d0b5&query=%s', [EdtCityName.Text]); RESTResponse1.ContentType := 'application/json'; // request RESTRequest1.Execute; // parse json and open the current object var JSONObject := TJSONObject.ParseJSONValue(RESTResponse1.Content) as TJSONObject; var JSONValue := JSONObject.Get('current').JSONValue; try LblTemp.Text := JSONValue.GetValue<String>('temperature') + 'º'; LblCity.Text := EdtCityName.Text; // get the first element from the weather description array var JSONArray := JSONValue.GetValue<TJSONArray>('weather_descriptions'); LblType.Text := JSONArray.Items[0].Value; // download weather icon and set to TImage component var MemoryStream := TMemoryStream.Create; var HttpClient := TNetHTTPClient.Create(nil); var HTTPReq := TNetHTTPRequest.Create(nil); HTTPReq.Client := HttpClient; try // get weather icon URL from weather_icons array JSONArray := JSONValue.GetValue<TJSONArray>('weather_icons'); var ImgURL := JSONArray.Items[0]; // download image HTTPReq.Get(ImgURL.Value, MemoryStream); MemoryStream.Seek(0, soFromBeginning); // load streamed data to TImage ImgWeatherIcon.Bitmap.LoadFromStream(MemoryStream); finally FreeAndNil(MemoryStream); FreeAndNil(HttpClient); FreeAndNil(HTTPReq); end; // little more details on the weather LstBoxItemHumidity.Text := 'Humidity: ' + JSONValue.GetValue<String>('humidity'); LstBoxItemFeelsLike.Text := 'Feels like: ' + JSONValue.GetValue<String>('feelslike') + 'º'; LstBoxItemCloudCover.Text := 'Cloud cover: ' + JSONValue.GetValue<String>('cloudcover'); LstBoxItemIsDay.Text := 'Is day: ' + JSONValue.GetValue<String>('is_day'); finally JSONValue.Free; end; end; |
As you can see, we are reconfiguring the request URL based on the input by the user.
Then we are parsing JSON and opening the current object. The current object has the main weather data, for instance: temperature, humidity, weather icon, and more.
After that, we are getting the first element from the weather description array which holds a summary of the weather info.
Then we are parsing the weather icon and downloading the image and setting it to the TImage component.
I hope everything in this code is clear. I am pretty sure you can learn so much about JSON manipulation in Delphi and creating cross-platform applications with Delphi FireMonkey.
Here is our application in action:
Head over and check out the full source code here: https://github.com/MuminjonGuru/Mastering-FireMonkey-Delphi/tree/master/WeatherAppFMXWeatherStackAPI
Are you ready to build apps using a quick and cost-effective JSON API for your weather data requirements?
Ready to get started with WeatherStack? Sign up!
