In this post, I will demonstrate how to create a news application with Delphi FireMonkey. We will integrate one of the market-leading news RESTful web services into our Delphi cross-platform application.
MediaStack API – is a free and simple REST API for live news and blog articles. This service is platform agnostic and can be utilized with any Windows App Development tools quickly. In this demonstration, we will integrate MediaStack API into our Delphi FireMonkey application.
Table of Contents
We’re going to create a cross-platform news reading app with Delphi
This is what we create in this tutorial. It fetches data from RESTful web service, and then downloads images and puts them in the news card that we create dynamically.
Let me first talk MediaStack API a little bit.
What is MediaStack API and why do I need to use it?
You can tap into a world of live news data feeds and access breaking news events around the globe. There is a massive set of sources which is more than 7,500+ and 50 countries included. Furthermore, MediaStack API is one of the scalable platforms that deliver news results quickly.
How do I get API Access Key for MediaStack API?
Just head over to the MediaStack official web page and sign up with the Free subscription plan. It is easy to test it out and start using the API access key in seconds.
How to use MediaStack API?
The MediaStack API is a scalable and yet easy-to-use REST API interface delivering worldwide live news and historical data in handy JSON format. The API response is lightweight and fast.
To get started right away, you just need to get your API access key and start using the HTTP GET endpoint with different parameters.
Here is a sample API request:
And its response:
Besides, by providing different parameters, you can get various news. For instance, historical news with date parameter within the URL.
How to build a cross-platform application with Delphi FireMonkey?
With RAD Studio, you can build high-performance applications 5x faster for Windows, Android, iOS, macOS, and Linux with the same codebase.
With hundreds of components, you can build cloud-aware modern applications in seconds. Moreover, the extensive Form designer provides swift UI designing with the FireMonkey UI framework.
With the latest updates, we, Delphi developers got new features and new tools for the FireMonkey framework. One of them is FireMonkey App Low Code Wizard.
FireMonkey App Low Code Wizard – is a low code development wizard that creates a fully functional Delphi cross-platform application with multiple screens and all the functionalities are configured.
Head over to the Embarcadero website and download the latest community edition of Delphi – if you don’t meet the requirements of the Community Edition license you can use the link at the bottom of this page to download a free trial of the full RAD Studio package. Start using FireMonkey App Low Code Wizard by installing it from the GetIt Package Manager.
How to connect to RESTful web service in Delphi?
Well, to be honest, you don’t see anything like this in other development environments. RAD Studio has been offering hundreds of solid components and development tools. One of them is the REST Debugger.
With the REST Debugger, you can connect any type of web service in seconds. Moreover, you can copy already configured components after connecting to the web service. And by pasting the components to your project, you just need to send requests to get results.
How to create a news app with Delphi FireMonkey?
We have been exploring different APIs and learning how to integrate with Delphi apps. In this demonstration, we again try to integrate the news API, MediaStack API into our Delphi FireMonkey Application.
Create a new project using the FireMonkey App Low Code Wizard and apply all those features in the wizard except the data access part.
Then open the View.NewForm and paste the REST components from the REST Debugger to the project.
Make sure to create your project like this structure! As you can see, there are only two components TButton and TVertScrollBox added to the user interface. And we will create news cards into the vertical scroll box. Moreover, you can turn off scroll bars by changing the ShowScrollBars property to False
Create an OnClick event on the button that you have dropped and write this code.
|
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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
procedure TNewFormFrame.BtnRefreshClick(Sender: TObject); begin inherited; RESTRequest1.Execute; // send request to endpoint var JSONValue: TJSONValue; var JSONArray: TJSONArray; var ArrayElement: TJSONValue; // after using object we just free them within the Lists RctList := TList<TRectangle>.Create; ImgList := TList<TImage>.Create; LblTitleList := TList<TLabel>.Create; LblDescpList := TList<TLabel>.Create; try JSONValue := TJSONObject.ParseJSONValue(RESTResponse1.Content); JSONArray := JSONValue.GetValue<TJSONArray>('data'); // articles are stored in the data array in the JSON response for ArrayElement in JSONArray do begin {$region 'Create news card' } RctNewsCard := TRectangle.Create(vrtscrlbx1); RctNewsCard.Parent := vrtscrlbx1; RctNewscard.HitTest := False; RctNewsCard.Fill.Color := TAlphaColorRec.Ghostwhite; RctNewsCard.Fill.Kind := TBrushKind.Solid; RctNewsCard.Stroke.Thickness := 0; RctNewsCard.Align := TAlignLayout.Top; RctNewsCard.Height := 400; RctNewsCard.Width := 389; RctNewsCard.XRadius := 15; RctNewsCard.YRadius := 15; RctNewsCard.Margins.Top := 5; RctNewsCard.Margins.Bottom := 5; RctNewsCard.Margins.Left := 5; RctNewsCard.Margins.Right := 5; RctList.Add(RctNewsCard); // add to the TList instance {$endregion} {$region 'create image and load image from the url' } NewsImage := TImage.Create(RctNewsCard); NewsImage.Parent := RctNewsCard; NewsImage.HitTest := False; NewsImage.Align := TAlignLayout.Top; NewsImage.Height := 225; NewsImage.Width := 389; NewsImage.Margins.Top := 5; NewsImage.Margins.Left := 15; NewsImage.Margins.Right := 15; NewsImage.Margins.Bottom := 5; NewsImage.HitTest := False; NewsImage.MarginWrapMode := TImageWrapMode.Stretch; NewsImage.WrapMode := TImageWrapMode.Fit; ImgList.Add(NewsImage); // load images to the newly created TImage component var MemoryStream := TMemoryStream.Create; var HTTPClient := TNetHTTPClient.Create(nil); var HTTPRequest := TNetHTTPRequest.Create(nil); HTTPRequest.Client := HTTPClient; try var ImageURL := ArrayElement.GetValue<String>('image'); HTTPRequest.Get(ImageURL, MemoryStream); MemoryStream.Seek(0, soFromBeginning); NewsImage.Bitmap.LoadFromStream(MemoryStream); finally FreeAndNil(MemoryStream); FreeAndNil(HTTPClient); FreeAndNil(HTTPRequest); end; {$endregion} {$region 'create title and summary texts in the News Card' } LabelTitle := TLabel.Create(RctNewsCard); LabelTitle.Parent := RctNewsCard; LabelTitle.Align := TAlignLayout.Top; LabelTitle.Height := 27; LabelTitle.Width := 359; LabelTitle.HitTest := False; LabelTitle.AutoSize := True; LabelTitle.Font.Size := 22; LabelTitle.Margins.Left := 15; LabelTitle.Margins.Right := 15; LabelTitle.Margins.Top := 5; LabelTitle.Margins.Bottom := 5; LabelTitle.Text := 'Title: ' + ArrayElement.GetValue<String>('title'); LblTitleList.Add(LabelTitle); LabelDescription := TLabel.Create(RctNewsCard); LabelDescription.Parent := RctNewsCard; LabelDescription.Align := TAlignLayout.Client; LabelDescription.Height := 131; LabelDescription.Width := 359; LabelDescription.HitTest := False; LabelDescription.AutoSize := True; LabelDescription.Font.Size := 15; LabelDescription.Margins.Left := 15; LabelDescription.Margins.Right := 15; LabelDescription.Margins.Top := 5; LabelDescription.Margins.Bottom := 5; LabelDescription.Text := 'Summary: ' + ArrayElement.GetValue<String>('description'); LblDescpList.Add(LabelDescription); {$endregion} end; finally RctList.Free; ImgList.Free; LblTitleList.Free; LblDescpList.Free; end; end; |
I hope the source code is well explained. As you can see all the components are created in the runtime. If you have problems with the project demo, please share it in the comments!
As you can see, connecting and integrating web services and creating fully functional cross-platform applications is easy and really fast to do with Delphi FireMonkey.
Depending on how much you want customization, you can code it quickly with Delphi. For an alternate take on using the MediaStack API with Delphi, click here.
You can get the full source code for this example here: https://github.com/checkdigits/How_to_Create_a_News_App_with_Delphi_Firemonkey_example
Did you know you can download a free trial of RAD Studio and try out the above example for FREE? Click here to find out more details.
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition
