Saturday, 20 May 2017

Inside refactoring with Delphi

In this article I will show you two common techniques that I use in my C# projects that they are quite relevant for any other programming language out there. In this case Delphi as I'm sure many developers out there can refer to the same principles. The following code has been tested under Delphi 10.2 Tokyo version.

The first technique is quite used in Functional Programming but it can be related to OOP and it's called Imperative Refactoring. The second technique helps reducing common code and eliminates inconsistencies and it's called Inline Refactoring. See the examples below for guidance.

Imperative Refactoring

This technique is quite easy to understand and I'm sure you've applied this many times in your projects.

In this case, we have a method or function that has some code that we would like to reuse. The principle says that this code needs to be extracted and placed externally onto another function and then add the call where the previous code was. This technique is very simple and very easy to embrace for code reusability.

Here you can see a typical example:

Before Refactoring:
As you can see this is a very simple  example where I request a web page and then I do some parsing to get the list of urls that are part of the html document. Let's see how to refactor it to make it more reusable.

After Refactoring:
Notice that I've extracted the parsing functionality and I've created a parseHTML function that gets the response and parses it and returns the list of urls. Now I can reuse my parsing functionality should I have any other page where this functionality is required. No-brainer here.

Inline Refactoring

This one is a bit different and it relates to the outer code as a reusable code. Imagine that we would like to refactor the inline functionality: In this example, I'm repeating quite a lot the functionality to fetch an item from the internet but I would like to reuse it so I can a) replace the http component at any time without impacting the rest of the code and b) replace the parsing part so it can return any kind of object:

The idea behind this refactoring is to be able to reuse the external call also using anonymous methods and generics.

Here is the after refactoring code:

After Refactoring:
As you can see the idea is to use anonymous methods and generics heavily to be able to reuse most of the functionality and allow the developer to separate the concerns of downloading the page and parsing it. It also allows you to rebuild the component in a different way e.g. in this case I'm using Indy components to request the page but you might like to use another component. Using this approach everything is quite modular and it gives room for testing. Notice that no functionality has changed here.

You can find the full source code of this example in my personal repository on Github.

Embarcadero MVP.

Sunday, 26 February 2017

Delphi Firemonkey (FMX) rendering TCanvas for Android

I'm currently working on a new game for Android using Delphi Berlin 10.1 and one of the issues I faced so far is regarding canvas rendering. I like painting my own stuff using the canvas (here is proof of it). So imagine how I felt when I deployed the game to my Android device and noticed that nothing was being displayed while the game works perfectly under Windows.

The reason behind this change is that the component TImage renders differently now and you have to paint everything on a TBitmap.canvas component and then assign it to the original TImage component so it gets displayed correctly so it requires few tweaks. 

The idea of the game is to find and match one of the 6 images shown with the image displayed below. Once you have identified the exact match you just need to tap to it to go to the next game. The game increases difficulty when you score certain number of points. You have just 10 seconds to complete the task.

The way I've built this is by using 6 TImage components and then I render there a matrix of zeros and ones that get represented into an image so the first image on the left is actually the matrix:

The numbers get randomly generated and I make sure that no duplicates are found during the randomisation.

If you see the image below, by level 20 and 50 things get complicated:

If you look at the source code below, this code tries to paint the main core of the application and it will work perfectly well on Windows but it won't work under Android (you will just get a black screen).

To overcome this issue, we need to do the rendering a bit different. Now we need to create a custom bitmap, paint in there and then assign it to the original TImage. Here is a different version of the code above that works under Windows and Android and everything gets rendered correctly.

Here is the game running on Android (just be aware that it's still under beta testing and that there are still many things to fix):

Once finished I'll place it in google play for your amusement and share the source code. Let me know if you have any questions.

I'm still using the same concepts to my Delphi Physics Engine so I can render correctly my models on Android. I'm rewriting the library so it supports FMX and from there I'll be able to render on Android without problems!.

To load bespoke fonts for Android I had to use the following article which did the treat:

Delphi MVP.

Friday, 27 January 2017

Firebase Cloud Messaging with Delphi 10.1 Berlin update 2.

A comprehensive step by step guide, covering everything you need to know to receive push notifications to your Android device using Firebase Cloud Messaging and the latest Delphi 10.1 Berlin update 2.

Push notifications let your application notify a user of new messages or events even when the user is not actively using the application (downstream messaging) ( On Android devices, when a device receives a push notification, the application's icon and a message appear in the status bar. When the user taps the notification, they are sent to the application. Notifications can be broadcast to all users, such as for a marketing campaign, or sent to just a subset of users, to give personalised information. To provide this functionality I will rely on Firebase Cloud Messaging which is the new version of GCM (Google cloud messaging) and Delphi to develop the Android application.

1. Create your Firebase project

Create your Firebase project by visiting the console if you still don't have one and in this project create an Android App.

I already have one project so I will use this one for my demo. Once in the project, go to Overview -> Add another app -> Android:

And give it a sensible name. In my case I called the package com.embarcadero.FirebaseCloudMessaging. This package name is important as it will be referenced later on. Once you click Add App, you will receive a google-services.json file which contain information that we will use later.

The package name is defined in your Delphi project:

So make sure that everything matches with the name you give to your Firebase application as the manifest file will contain this information.

2 Request your FCM Token

Now that we have our project configured, we need to request Firebase a unique token for our Android device. You can see the description here as to how to get the FCM token via Android Studio, but I will show the necessary steps to get the same value from our Delphi application.

Basically we are trying to get the same value from FirebaseInstanceId.getInstance().getToken(). We will achieve the same behaviour by using TPushServiceManager which is the unit responsible for handling push notifications.

The following code snippet tries to request the FCM token via TPushServiceManager:

Now, to allow this code to work correctly, we will have to configure few things.

a) Enter the Sender Id.

In the source code snippet above, I'm mentioning the SENDER ID. This sender id, can be found under Firebase -> Project Settings -> Cloud Messaging:

This is the value you have to put here:

PushService.AppProps[TPushService.TAppPropNames.GCMAppID] := 'SENDER ID';

Knowing that the GCMAppId is actually the Sender Id has been a quite a struggle for some users and you can see my answer on Stack overflow.

b) Configure the project to receive push notifications.

In the Delphi IDE, go to your project options -> Entitlement List and set the property Receive push notifications to true.

c) Configure the AndroidManifest.template.xml file.

Before we try to run the code above, we'll have to configure the manifest file to grant our device permissions to connect to Firebase. If you don't configure the permissions, you might run into an exception like the one below:

Error message: EJNIException with message 'java.lang.SecurityException: Not allowed to start service Intent { (has extras) } without permission'.

See the code snipped below for reference:

The full source code of the solution can be found here for reference where you can find the manifest files.

Once everything is configured, we can now test if we can receive the FCM token. Here is a screenshot of my project so you can see that there are two buttons, one to receive the token and the other one to store this token somewhere so the system that sends the notification knows the receiver.

Let's see the project in action here:

As you can see in the image above, I get the DeviceID and the FCM Token. The one we are interested in is the FCM Token. This token is quite large so it does not appear completely on the screen.

Now we need to configure what to do when we receive a notification and how this notification is built.

3 Receive your first FCM Push notification

The following code snipped will configure the OnReceiveNotification event and will display a notification using the TNotificationCenter class.

Notice that the ServiceNotification variable contains a DataKey member which contains a JSON envelope. This object will contain all the information of our push notification. Here you can see how this notification looks like:

Notice that the message is part of the gcm.notification.body property and this one is the one that we will use for our DataObject.GetValue method.

Let's see the application in action:

Here you can see side by side my Android device and Firebase Notification testing system. Once the application is ready to receive notifications, you just need to send the notification using the configured app or the token if you want to target a single device.

Next step is to store these tokens on the cloud and use your own system to deliver those messages.

Please, do not hesitate to contact me if you have any further questions.

Related links:

Embarcadero MVP.

Sunday, 18 December 2016

Creating a publicly accessible REST Web API on a Raspberry Pi3

One of the easiest ways to expose your Raspberry Pi publicly is by using ngrok. Ngrok is a lightweight alternative to VPN that creates introspected tunnels to localhost. If you have been following my articles, you will know that I managed to built a REST Web API to check the status of my Raspberry Pi Grid. The project works on my local network and I also have an Android app also that checks if the Grid is alive or not. But the point of building all this is that I should be able to check the status of it anywhere just to make sure that the system is up and running. The easiest way I could find without having to forward ports on my router is by just running Ngrok. 

Why do you need to expose your Raspberry Pi?

Get the latest version of Ngrok for ARM here and unzip the content of it on your local computer (in my case a Windows 10 machine). Then transfer the unzipped file to your Raspberry Pi using your preferred method (in my case I use WinSCP).

Now that the file is in the Raspberry Pi, we need to give it running permissions using the chmod command (I assume here that you know how to SSH to your RPi using putty):

Now we just need to run the ngrok command: ./ngrok http 3000 and all our http traffic on port 3000 will be automatically forwarded:

Notice that now, Ngrok is giving you a public URL that points to your local Raspberry Pi. This means that Ngrok is providing you with a publicly accessible IP address and domain name to your localhost:

Now that Ngrok is running, I need to run my Web API Service on that port 3000. To do that, I will just launch another session to my Raspberry Pi and start my node.js:

Notice that now I can browse that URL (http:/ and check the status of my Raspberri Pis over the internet:
Notice that every time your stop/start ngrok, a new URL is being generated. As you are exposing your data over the internet you need to make sure that this URL is just known by yourself and that you add extra security on your API if required (Now the Raspberry Pi is able to take requests from anyone on the web!).

Using this approach you can publish your applications easily so other can see them while developing them and you can even set up a home server to share data, etc. Possibilities are endless here.

If you check my mobile application (created with my Delphi 10.1 Berlin update 2) you will see that I just need to point the RestClient component to the exposed URL and voila! we'll be able to access that service over the internet:

All the source code is available here:
  • Mobile application (Delphi 10.1 Berlin update 2).
  • Node.js server (Web Api).
Here is the application in action:

Let me know if you have any questions.

Sunday, 11 December 2016

“Could not load SSL library” Error message on Android 6 Marshmallow with TidHTTP

I have recently upgraded from Android 4.4 KitKat to Android 6 Marshmallow and to my surprise I found out that the some of my applications stopped working. The main issue is related to HTTPS communications using Indy components. As you might know Indy does not implement SSL natively. What the component does is to implement a flexible IOHandler architecture that allows for any SSL implementation to be plugged into Indy. Indy itself implements its own IOHandler class that is based on OpenSSL
The problem is that for Android 6, Google decided not to support OpenSSL anymore. Google replaced OpenSLL with a custom fork called BoringSSL to meet it's needs. BoringSSL includes additional changes and patches to the OpenSSL API and it's not backwards-compatible with OpenSSL. Android 6.0 will use the pre-loaded BoringSSL binaries when any application tries to load the OpenSSL library and it will throw an error (the reason why is because BoringSSL and OpenSSL share the same file names).

If you try to debug your Android application, you will see the following message when trying to use the TIdSSLIOHandlerSocketOpenSSL handler:

How to fix this error?

I found few comments in different forums and in the end the solution was not clear at all and I had to spend few hours fixing the issue myself. The best way to solve this is by deploying a recompiled version of the OpenSSL libraries with your Android application and then tell Indy to use those files. Indy operates at the NDK level so to make Indy avoid BoringSSL you will have to do that.

Get a precompiled version of OpenSSL here:

Place these files in your project and reference them in the deployment section. Go to Project -> Deployment and add the two files that are inside of that zip file and specify the destination folder in your Android device as .\assets\internal.

Now the last thing to do is to tell Indy where to look for these files. To do this, you will have to call the IdOpenSSLSetLibPath method with the TPath.GetDocumentsPath during startup (FormCreate for example). Here is an example:

Once completed, your applications should be able to use the correct version of Indy. You can review my solution and test it here: