Blog


Previous  |  Next  |  Index

From Database to Web App through REST server with TMS XData and TMS WEB Core

Bookmarks: 

Monday, July 30, 2018



As you might already know, TMS WEB Core v1.0 Brescia edition has been released. A game changer in web development using Delphi IDE. From all the "magic" things it does, one of my preferred is this: the way you code with it feels very very home for Delphi users - the language, the IDE, the form designer, the object properties, the component library... Still, what it produces is totally new and different. It creates html/js Simple Page Applications! It wraps real, existing JavaScript frameworks and controls. It connects to REST servers. It's a modern architecture that is far away from what many of Delphi developers are used to..

And that is probably the reason why we are receiving this frequent question: "How do I connect to my [MySql] database from TMS Web Core?" (and you can replace [MySql] by your favorite database server).

The answer is: You have plenty of options, but the best one is: TMS XData.

Why TMS XData, even for non-TMS Web users?

TMS XData is REST/JSON server framework. You can relate it more or less with DataSnap, ASP.NET Core Web Api, NodeJS Loopback, etc. But for Delphi. And how TMS XData is different? It's hard to say in a few words, but I will try by saying this: it just works: the product, the support and the experience.

XData is stable. It's incredible how low support we have from people complaining about errors, weird behavior, bad performance, etc. Recently, one pleased XData user sent to us a screenshot of his error log report. Take a look:



The first one was the number of errors logged from using DataSnap. After so many frustrations, he migrated to another one. The second line are errors from that second middle-tier Delphi framework he used. Then third one were errors after migrating to TMS XData. Zero errors. He even did the work to check if the error logging was working by forcing an error to happen, because he was not believing it. "Finally!" was his relief words.

Also other benchmark tests were done regarding memory usage, errors, performance. This one was made by a customer who was evaluating options at that time - not a XData user yet when the test was done: https://datasnapperformance.wordpress.com. He decided to go for TMS XData after being convinced by its own tests.

XData is a pleasure to work with. It doesn't have a steep learning curve. Documentation is extensive and using it is very intuitive. You can try it yourself. You can ask XData users. And there is TMS Aurelius behind it you can optionally use. The state-of-the-art ORM framework for Delphi. As a quick example, this is a code snippet of what you can to write to hit your database, retrieve a list of customer from your database based on a specific criteria, convert them to object instances, and return it as JSON from your server:
function ICustomerService.CustomersByStatus(Status: TCustomerStatus): TList<TCustomer>;
begin
  Result := TXDataOperationContext.Current.GetManager
    .Find<TCustomer>
    .Where(Linq['Status'] = Status)
    .OrderBy('Name')
    .List;
end;
TMS XData and TMS Web Core

Being TMS Web Core a SPA application, you can't connect to a database directly from the web application. You need a middle tier that will be the bridge between the web app and database. You should create one like everyone else, using PHP, ASP.NET, NodeJS, Delphi. But with TMS XData, it's an order of magnitude easier. You don't even need to write code like the CustomersByStatus method above if you don't want to - XData does it all automatically for you.

Import database structure and create classes. Using the TMS Data Modeler tool - included together with XData - you can import your database structure and then create a unit with all TMS Aurelius classes representing the database and then, export it as a unit with Aurelius classes:



Create XData server and add the ORM entities

Now using the TMS XData Server wizard, you can create the XData server in a few clicks, and just add the unit generated by Data Modeler to the project. Your server should be up and running!



Web front end using Dataset-like approach From TMS Web Core usage, XData provides high-level RAD framework. First you have TXDataWebConnection, which you just need to configure the root URL of the server. Then assign a TXDataWebClient or TXDataWebDataset to the connection, and you can retrieve/save data with simple methods. By using the dataset, you can even go further and bind to data-aware controls using the datasource. In the example below, we have a TWebDBTableControl bound to the datasource, bound to XData dataset, bound to XData connection:



And this is what we get in the browser. Note how data was retrieved from the server: an HTTP request to our REST server, and JSON format being return. Yes, a real pure html/js web application with REST Api backend, and we code it the Delphi way!



And that's how you get your data in the web! Of course, from now on, the sky is limit. In the backend, you can add complex business logic, authentication and authorization, and all the takes to create a real application. For the frontend, you have the plenty of TMS Web Core controls available, and all the html, javascript and css power in your hands to make your UI rich, nice and responsive.

Here is a screenshot of our TMS XData Music Web Application demo, available online at https://app.devgems.com/xdata/music/app. Full source code of the demo is available when you install TMS XData.



Do you want to see all the process described in the blog post in action? Watch the video below!



Learn more about TMS XData:
and exploring the trial versions downloads available for Delphi.

Wagner R. Landgraf


Bookmarks: 

This blog post has received 6 comments.


1. Monday, July 30, 2018 at 9:46:22 PM

Is pagination possible in such a scenario?

Eli M


2. Tuesday, July 31, 2018 at 4:26:56 PM

Sure, TXDataWebDataset has a QueryString property where you can put page information like $top=10&$skip=3. Also, you can always use TXDataWebClient for more flexibility and then bind data to the dataset using XDataWebDataset1.SetJsonData(SomeJsonData). Or manipulate objects returned by the client directly.

Wagner R. Landgraf


3. Wednesday, August 01, 2018 at 12:51:23 AM

Hello
Is it possible to do URL routing with TMS WebCore?

Gilmar


4. Thursday, August 02, 2018 at 2:06:35 PM

At this moment there is not something at the level of the TMS WEB Core framework. The whole web browser API is accessible though from Pascal, so you can perform any custom routing by using these APIs.
It is on our todolist to provide tools at a higher level to facilitate this in future updates.

Bruno Fierens


5. Tuesday, September 04, 2018 at 8:40:46 PM

Hi, we develop an api with Datasnap Rest Server(ISAPI) and the amazing TMS Aurelius +TMS Data Modeler on server side. On client side, FMX and TMS FMX UI PACK. Now we want to develop a UI with Web Core, that connects to datasnap rest server api, is there a sample? should we using TDSRestConnection?
And what about Reusing FMX Client code? its possible?
One more thing, we have one server for the data base, one server for the api (IIS + ISAPI.DLL), should we have a server for the UI(Web Core)?
Thanks

ARAUJO CARLA


6. Wednesday, September 05, 2018 at 3:50:56 PM

There is at this moment no equivalent for TDSRestConnection in TMS WEB Core. I have personally not yet used the datasnap rest server, as we internally always use the TMS XData REST server, but it should be possible normally to perform requests against this REST server with a TWebHttpRequest component from TMS WEB Core.

Bruno Fierens




Add a new comment:
Author:
Email:
  You will receive a confirmation mail with a link to validate your comment, so please use a valid email address.
Comment:
 
Change Image
Fill in the characters from the image above:
 

All fields are required.
 




Previous  |  Next  |  Index