Blog Options

Archive

<< April 2019 >>

Authors




Blog


Most Recent Post  |  Next Post  |  Previous Post  |  Index List

TMS FNC Cloud Pack is here!

Bookmarks: 

Tuesday, April 30, 2019

First release!

We are excited to announce the first release of the TMS FNC Cloud Pack!

What's included

Included in the TMS FNC Cloud Pack is the ability to create/implement your own REST service client(s). There is a small accompanying guide available after installation, that explains a few of the basics to get started. Additionally, below is a list of some of the many features that are supported in the TMS FNC Cloud Pack.

  • Create your own REST service client(s) built on top of the TMS FNC Cloud Pack core
  • One source code base to use on multiple frameworks (FMX, VCL, WEB and LCL)
  • Make GET, POST, PUT, UPDATE, DELETE and PATCH requests
  • Support for multi-part form data via a separate form data builder class
  • Built-in OAuth 2.0 authentication flow
  • Built-in URL encoding, JSON parsing, file to Base64 encoding and many more

Included in the TMS FNC Cloud Pack is a set of ready-to-use REST service client implementations that are listed below.

  • Google Tasks
  • Google Calendar
  • Google Contacts
  • Google Firebase Database
  • Google Drive
  • Google GMail
  • Google Search terms
  • Google Maps address data
  • Google Photos
  • Microsoft Onedrive
  • Outlook Calendar
  • Outlook Contacts
  • Outlook Mail
  • Apple CloudKit
  • DropBox Cloud storage
  • PayPal
  • YouTube
  • Hubic
  • myCloudData.net

How to create your own REST service client?

To illustrate how to create your own REST service client, we take the source code from accessing a Google service, such as Google Drive. Google Drive has a common layer in where the authentication flow and access token generation are handled to allow other services from Google implement the API’s on top of this layer. The first step is to generate the authentication URL.
function TTMSFNCCustomCloudGoogle.GetAuthenticationURL: string;
begin
  Result := InitializeAuthenticationURL(Self);
end;

function InitializeAuthenticationURL(const ACloudBase: TTMSFNCCloudBase): string;
var
  url, sc: string;
begin
  sc := TTMSFNCCloudBaseOpen(ACloudBase).GetScopes('+', True);
  url :=
      '?scope=' + sc
    + '&state=profile'
    + '&redirect_uri='+ TTMSFNCUtils.URLEncode(ACloudBase.Authentication.CallBackURL)
    + '&response_type=code'
    + '&client_id=' + ACloudBase.Authentication.ClientID
    + '&approval_prompt=force'
    + '&access_type=offline'
    + '&hl=en';

  url := 'https://accounts.google.com/o/oauth2/auth' + url;

  Result := url;
end;
The URL is a concatenation of The ClientID, CallBackURL, some default parameters and a set of scopes, which is crucial to allow the user to identify which services is accessing which information. For Google Drive, the scopes are added in the constructor:
  Scopes.Clear;
  Scopes.Add('https://www.googleapis.com/auth/drive');
  Scopes.Add('https://www.googleapis.com/auth/drive.file');
  Scopes.Add('https://www.googleapis.com/auth/userinfo.profile');
When calling the Connect method, and the Access Token is not yet retrieved, or no longer valid, a browser is shown which allows identifying and authorizing the application which is requesting access to your files/folders and account information. Below is a screenshot of the browser and the scopes that are requested via the authorization URL.



After Clicking on the “Allow” button, the Application is redirected back to your application which runs an HTTP Server listening to the Callback URL & Port set via Authentication.CallBackURL. As soon as the HTTP Server catches the OAuth 2.0 redirect callback URL, it parses the URL and generates an authentication token. The next step is to take the authentication token and convert it to an access token:
procedure TTMSFNCCustomCloudGoogle.RetrieveAccessToken;
begin
  InitializeRetrieveAccessTokenRequest(Self);
  ExecuteRequest({$IFDEF LCLWEBLIB}@{$ENDIF}DoRetrieveAccessToken);
end;

procedure InitializeRetrieveAccessTokenRequest(const ACloudBase: TTMSFNCCloudBase);
begin
  ACloudBase.Request.Clear;
  ACloudBase.Request.Name := 'RETRIEVE ACCESS TOKEN';
  ACloudBase.Request.Host := 'https://accounts.google.com';
  ACloudBase.Request.Path := '/o/oauth2/token';
  ACloudBase.Request.Query :=  'client_id=' + ACloudBase.Authentication.ClientID
  + '&client_secret=' + ACloudBase.Authentication.Secret
  + '&redirect_uri=' + ACloudBase.Authentication.CallBackURL
  + '&code=' + ACloudBase.Authentication.AuthenticationToken
  + '&grant_type=authorization_code';
  ACloudBase.Request.Method := rmPOST;
end;
In the access token request, you’ll notice that the secret, authentication token, and callback URL are required to identify your application request and make sure the service returns the correct access token. The request is executed and automatically handled by the core layer in TMS FNC Cloud Pack. There is no need to manually parse the access token, unless the service deviates from the default OAuth 2.0 authentication flow. After retrieving the access token, the service core layer is automatically performing a test to validate the access token and grant access to service API’s. The test needs to be handled by your service implementation. For Google Drive, the test involves calling a simple tokeninfo API endpoint to validate the tokens, but for other services, it could be retrieving the account information, or testing a retrieval of files/folders.
procedure TTMSFNCCustomCloudGoogle.TestTokens(const ATestTokensRequestResultEvent: TTMSFNCCloudBaseRequestResultEvent = nil);
begin
  InitializeTestTokensRequest(Self);
  ExecuteRequest(ATestTokensRequestResultEvent);
end;

procedure InitializeTestTokensRequest(const ACloudBase: TTMSFNCCloudBase);
begin
  ACloudBase.Request.Clear;
  ACloudBase.Request.Name := 'TEST TOKENS';
  ACloudBase.Request.Host := 'https://www.googleapis.com';
  ACloudBase.Request.Path := '/oauth2/v1/tokeninfo';
  ACloudBase.Request.Query := 'access_token=' + ACloudBase.Authentication.AccessToken;
  ACloudBase.Request.Method := rmGET;
end;
After executing the test tokens request, the service returns a JSON response which is unique for each service. For Google Drive, this is checking if the returned JSON does not have an error tag.
function TTMSFNCCustomCloudGoogle.GetTestTokensResult(
  const ARequestResult: TTMSFNCCloudBaseRequestResult): Boolean;
begin
  Result := InitializeTestTokensResult(Self, ARequestResult)
end;

function InitializeTestTokensResult(const ACloudBase: TTMSFNCCloudBase; const ARequestResult: TTMSFNCCloudBaseRequestResult): Boolean;
var
  o: TJSONValue;
  s: string;
begin
  Result := False;
  s := ARequestResult.ResultString;
  if s <> '' then
  begin
    o := TTMSFNCUtils.ParseJSON(s);
    if Assigned(o) then
    begin
      Result := not Assigned(TTMSFNCUtils.GetJSONValue(o, 'error'));
      o.Free;
    end;
  end;
end;
The result is a Boolean (true/false). When the result is a true, the service is successfully authenticated, and the application can start accessing various API’s. Below is a sample that shows how to use the access token to retrieve the account drive space info.
procedure TTMSFNCCustomCloudGoogleDrive.GetAccountInfo;
begin
  Request.Clear;
  Request.Host := Service.BaseURL;
  Request.Path := FBasePath + '/about';
  Request.Query := 'access_token=' + Authentication.AccessToken;
  Request.Method := rmGET;
  Request.Name := 'GET SPACE USAGE';
  ExecuteRequest({$IFDEF LCLWEBLIB}@{$ENDIF}DoRequestGetSpaceUsage);
end;

procedure TTMSFNCCustomCloudGoogleDrive.DoRequestGetSpaceUsage(const ARequestResult: TTMSFNCCloudBaseRequestResult);
var
  o: TJSONValue;
begin
  if ARequestResult.ResultString <> '' then
  begin
    o := TTMSFNCUtils.ParseJSON(ARequestResult.ResultString);

    if Assigned(o) then
    begin
      try
        FInfo.UserName := TTMSFNCUtils.GetJSONProp(o, 'displayName');
        FInfo.Quota := TTMSFNCUtils.GetJSONDoubleValue(o, 'quotaBytesTotal');
        FInfo.QuotaUsed := TTMSFNCUtils.GetJSONDoubleValue(o, 'quotaBytesUsed');

      finally
        o.Free;
      end;
    end;
  end;

  DoGetSpaceUsage(FInfo, ARequestResult);
  DoGetCurrentAccount(FInfo, ARequestResult);
end;

Demo

Included in the release is a demo that allows you to test out each service individually in one easy and intuïtive overview. Click on the service of your choice and fill in your Application Client-ID, Secret and the appropriate Callback URL registered to your application. click on Authenticate and start exploring. The demo is available for FMX, VCL, WEB and LCL.

We want your feedback!

In this blog post, we already asked you for which service(s) you wish to see an implementation. We already received a lot of feedback, and want to thank you for this. This allows us to continue development in future updates of TMS FNC Cloud Pack. For those that didn't yet fill in the survey, please go to https://www.survio.com/survey/d/N4J9X1C8L4V7K1U7V

We want your feedback, so we can improve the TMS FNC Cloud Pack even more, so we want to ask you for a thorough testing on TMS FNC Cloud Pack and provide us with any feedback, comments, suggestions and issues you experience. This can be done via comments on this blog, or an email to support@tmssoftware.com

Pieter Scheldeman


Bookmarks: 

This blog post has not received any comments yet. Add a comment.



Video: Add Google Charts based on a database query to web applications in Delphi Rio (1/3)

Bookmarks: 

The next videos of the School Data Series tackle the visualization of numbers using Google Charts.
Due to the amount of detail, I decided to split this topic into 3 separate videos.


The end result will look like this:



Student numbers will be grouped by zip code. Users are able to click on the bars and drill-down all the schools in that area (master-detail).

The first video covers:
  • Looking at the database
  • Build the database query for the chart
  • Convert database query into URL
  • Add service method to XData web service for charting

The next video will show you how to build the web application that consumes the data. Finally, the last video adds the user-interaction with the popup-window. Look out for these parts, they will be published soon.

The first video is available here:


Holger Flick


Bookmarks: 

This blog post has not received any comments yet. Add a comment.



The TMS WebGMaps v3.1 update includes map styles and SVG markers

Bookmarks: 

Monday, April 29, 2019

We're pleased to announce TMS WebGMaps v3.1 has been released today. TMS VCL WebGMaps is our component for VCL development that exposes a myriad of geographical functions for integration in Delphi or C++Builder Windows applications while TMS FMX WebGMaps offers the same functionality for cross-platform FireMonkey applications on Windows, Mac, iOS and Android.

In this new version we introduce the functionality to display the map in a custom style. You can use the pre-defined Night Mode style or any other custom style.



The code needed for this is just one line of code:

    WebGMaps1.MapOptions.MapStyle := mstNightMode; 



The code needed for this is just two lines of code:

  WebGMaps1.MapOptions.CustomStyle.Text := '[JSON Object]';
  WebGMaps1.MapOptions.MapStyle := mstCustom;

Use the Google Maps Platform Styling Wizard as a quick way to generate your own JSON styling object.


Another new feature are SVG Markers. This technique allows to display markers with a custom shape based on a SVG path. Several pre-defined shapes are available as well as the possibility to add your own custom SVG path.



Adding markers with a custom shape is very easy as this code snippet shows:

var
  m: TMarker;
begin
  m := WebGMaps1.Markers.Add(WebGMaps1.MapOptions.DefaultLatitude, WebGMaps1.MapOptions.DefaultLongitude);
  m.Shape := msStar;
  m.ShapeColor := clYellow;
  m.ShapeScale := 2;
  WebGMaps1.UpdateMapMarker(m);

  m := WebGMaps1.Markers.Add(WebGMaps1.MapOptions.DefaultLatitude + 0.1, WebGMaps1.MapOptions.DefaultLongitude - 0.1);
  m.Shape := msStar;
  m.ShapeColor := clYellow;
  WebGMaps1.UpdateMapMarker(m);

  m := WebGMaps1.Markers.Add(WebGMaps1.MapOptions.DefaultLatitude - 0.1, WebGMaps1.MapOptions.DefaultLongitude - 0.1);
  m.Shape := msFavorite;
  WebGMaps1.UpdateMapMarker(m);

  m := WebGMaps1.Markers.Add(WebGMaps1.MapOptions.DefaultLatitude + 0.1, WebGMaps1.MapOptions.DefaultLongitude + 0.1);
  m.Shape := msHome;
  m.ShapeColor := clSkyBlue;
  m.ShapeScale := 2;
  WebGMaps1.UpdateMapMarker(m);
end;

Today's update also includes other smaller new features and improvements.
We look forward to learn about your interesting integrations of TMS WebGMaps in your applications!

Bart Holvoet


Bookmarks: 

This blog post has not received any comments yet. Add a comment.



Adding web design with Bootstrap 4 to a TMS Web Core application

Bookmarks: 

Friday, April 26, 2019

Another video in the School Data Series adds professional modern web design to the web application that was built in the previous video. It is a common misconception that the form designer restricts the design capabilities of web frameworks built with Delphi. Giving a practical example will make it very easy for you to build your own projects with web design. You will also know how to include web designers into the development process of your web applications.

You will see how to transform this form…

…into this form:


To sum up the complete contents of the video:

  • Review of what has been developed so far
  • Replace Google Maps API marker with custom icon
  • Build a mockup for the design in Adobe Photoshop
  • Transfer the design into HTML with Adobe Dreamweaver
  • Add the web design to your existing project
  • Link TMS Web Core components to the new web design

You can find the video right here:



Holger Flick


Bookmarks: 

This blog post has not received any comments yet. Add a comment.



Video: Creating a database-driven, interactive Google Maps web application with Delphi Rio

Bookmarks: 

Thursday, April 25, 2019

Part 2 of the School Data Video Series shows you how to write a web application that offers an interactive Google Map with data that is taken from a database. In order to access the database it uses the REST web service that was built in part 1.

The video shows by giving easy to follow step-by-step instructions:

  • Getting to know the data in the database
  • Build REST queries in the web browser
  • Implement a TMS Web Core application
    • Access the REST web service
    • Request data
    • Add markers to the Google Map component
    • Use a special, pre-defined icon for the marker


Here’s a little teaser what the app will look like in the end:

The video is part of the playlist, but here’s a direct link to part 2:



Holger Flick


Bookmarks: 

This blog post has not received any comments yet. Add a comment.



Video: Developing a Database-driven Web Application with Delphi Rio and TMS Web Core

Bookmarks: 

Wednesday, April 24, 2019

Delphi is the number one tool for developing Desktop applications on and for Windows. There is little opposition to this statement. A couple of years ago, the compiler for 64-Bit Windows was also released. Having the VCL at your mercy and extensive database connectivity included in the product, Delphi is also at the top whenever databases come into the mix. However, Delphi never has become known as the front-runner for Web Application development. Even though components to access the web and a web framework come with the product, for many Delphi and Web Development are never mentioned in the same train of thought.

Winter Change is here


TMS Software changed the game plan in 2017 by introducing TMS Web Core as their new framework to develop web applications. You can find a lot of information about this framework on the internet. Simply start your journey at the following web page and you will find videos, articles and event dates to learn more about it:



Since its introduction in 2017, TMS has added many features and components to the framework. At this time it is even possible to develop Progressive Web Apps (PWA) and multi-platform desktop (!) applications using the Electron framework.

Practical examples


Some developers say that practical and realistic examples are more important than marketing material. This is where I came in to produce videos that show how to use TMS Web Core for certain development tasks.

I wanted to build a tutorial series that abides by the following guidelines:
  • Data taken from a real, active data source/database that is still being maintained
  • Demos should be reproducible and easily accessible, including the data that is being used
  • Build it all from scratch and start with a very simple example
  • Further, more complicated tutorials will be based on the foundation

Today, I would like to introduce the so-called ‘School Data Series’ – School Series in short. It follows those guidelines exactly. I used a database published by the administration of Lee County, Florida in the US. The data lists all the schools (e.g. public elementary, middle and high-schools) in the county with many attributes:



As you can see in the screenshot, it is possible to download the data and import it into a database.

This will be the starting point for the tutorial.

Video 1: Connect to database, access from Web App


The first video introduces the content and will also give a brief overview where the series will be going in later parts. However, the focus is on the question how to connect to the data from a web application. Delphi developers usually can use a connection, query and a grid to display data from a database. To the surprise of most people that do not know about TMS Web Core, this is exactly how it works in TMS Web Core. The only hurdle you will have to tackle is the fact that the connection requires another layer between the application and the database server. This layer consists of a web service that provides REST access to the database. The tutorial will give you all the arguments why this approach makes sense and the approach without a web service is not to be considered.


This will be covered:
  • Introduction to the video series
  • Get to know the data
  • Build a REST web service with JSON support using TMS XData
  • Build a TMS Web Core application with
    • connecting to the web service
    • using database connections and datasets during design-time
    • display all data in a grid
  • Outlook on other parts of the series
    • adding data from the database to Google Maps
    • display charts based on the info from the database with Google Charts
    • add professional web design using Bootstrap

I will follow up with further blog posts about all the parts of the series.

The complete series will always be available in a handy playlist on YouTube here:



Holger Flick


Bookmarks: 

This blog post has not received any comments yet. Add a comment.




Most Recent Post  |  Next Post  |  Previous Post  |  Index List