Tutorials

Two weeks ago I was doing the EMS demo session for Delphi developers in London. That was good fun! Would you like to do it yourself?

In this post you will find detailed steps of my demo. Enjoy!

The source code of this demo can be downloaded from Embarcadero Code Central.

Do-Say-See Steps

Enterprise Mobility Services (EMS) is a new turnkey solution for today’s interconnected, distributed apps, offering an easy to deploy middleware server that hosts loadable custom API and data access modules. Based on open and standard technologies, including REST HTTP calls and JSON data formats, and providing major SQL database drivers along with an encrypted embedded and server SQL database. With its user management and authentication with user and API analytics, Enterprise Mobility Services is ideal for enabling secure access from mobile apps to Enterprise Databases. EMS is a middleware solution that is stateless, restful, scalable, and secure.

This step-by-step tutorial will walk you through the process of building an email checker app using Enterprise Mobility Services and Delphi XE8. The mobile app is going to be very simple. It will just contain an edit and a button. When the end user presses the button, the contents of the edit will be sent to the EMS service REST API that will validate if a given string is a valid email address usingregular expressions.

First we need to create an EMS service and then we are going to create a multi-device app project for it.

Start Delphi XE8. From the “File” menu select “New” and then “Other”. In the “New Items” dialog click on the “Delphi Projects -> EMS”. Double-click on the “EMS Package” icon. That should display “EMS Package Wizard” window.

Each EMS package can contain zero or more resources with endpoints that extend the REST API of the EMS server.

On the “Package” tab of the wizard select the second option “Create package with resource”. Click on “Next” button.

In the second step of the wizard we need to give a new EMS resource a name and decide what file type to use for a class that is going to implement this resource. If we plan to use any non-visual components in the implementation of our resource it is handy to choose for a data module.

In the “Resource name” field enter “EmailChecker”. Keep “Data module” as selected file type. Click on “Next” button.

In the last step of the wizard we need to decide which endpoints to add to our resource. Each endpoint handles a different kind of HTTP request. We are going to keep the default selection: a generic HTTP GET request plus an HTTP GET request for a specific “item” in the resource. In case of our server we are going to use “Get” endpoint to return just the name of the service and the “GetItem” to perform the actual check if a given string is a valid email address.

In the “Endpoints” tab of the resource keep the default selection of “Get” and “GetItem”. Click on “Finish” button. That should generate a new EMS package project.

Now we need to save the project generated by the wizard in a location that makes sense to us and to give the unit and the project meaningful names. Notice that the project has the “bpl” extension, which means that this is a Delphi package that can be loaded into the executable and cannot be run standalone.

Click on the “File” and “Save All” menu option. Create “C:\demos\XE8\EMS\EmailChecker” directory on your hard drive. Save the resource unit as “uEmailCheckerRes” and the package project as “EmailChecker”.

The EMS package is loaded by the “EMS Development Server” that is located in the “bin” directory of our Delphi XE8 installation. We can verify this by going to “Debugger” tab in “Project Options”.

From the “Project” menu select the last item “Options”. Click on the “Debugger” node and highlight “Host application” option. Verify that it points to “EMSDevServer.exe”.

The actual code to check if a given string is a valid email address has already been written. We need to add the “RegExpressionsUtil” unit to our EMS server project.

Download the “RegExpressionsUtil.pas” file from the following URL:

https://s3-eu-west-1.amazonaws.com/dosaysee/RegExpressionsUtil.pas.

Copy this file to the directory where you have saved the EMS package project (C:\demos\XE8\EMS\EmailChecker). Right click on the “EMailChecker.bpl” node in the Project Manager at the top right corner of the IDE. Select “Add…” from the context menu to add “RegExpressionsUtil.pas” file to the project.

In order to be able to use methods of the “TRegularExpressionsEngine” type in our EMS resource code, the first thing is to add “RegExpressionsUtil” unit to the “uses” clause. We could write this manually in the editor, but it is much faster and more fun to it with the wizard.

Make sure that the “uEmailCheckerRes” unit is open in the editor. In the “File” menu select “Use Unit…” to add to the “uses” clause of the EMS resource unit. Select “RegExpressionsUtil” and click on “OK”.

sWe need to modify the implementation of the “GetItem” method in our EMS resource to take the parameter “item” from the HTTP request sent by a client application and pass it to “TRegularExpressionEngine.IsValidEmail” method. If the method returns true, then we are returning “TJSONTrue” or “TJSONFalse” in the HTTP response body otherwise.

Replace the body of the “TEmailCheckerResource1.GetItem” method with the following code:

procedure TEmailCheckerResource1.GetItem(const AContext: TEndpointContext; const ARequest: TEndpointRequest; const AResponse: TEndpointResponse);
var LItem: string;
begin
  LItem := ARequest.Params.Values['item'];

if TRegularExpressionEngine.IsValidEmail(LItem) then
  AResponse.Body.SetValue(TJSONTrue.Create, True)
else
  AResponse.Body.SetValue(TJSONFalse.Create, True);
end;

Select “Save All” from “File” menu.

Now our EMS resource is ready and we can start creating a client for it. Before we do it let’s see if it works as expected. Let’s run it without debugging.

Click on the green arrow to run the project without debugging.

EMS Development Server has started and in the log window we can see useful information about loaded resources.

Verify that the EMS Development Server has been started.

We are going to test our EMS. If just click on the “Open Browser” button, the default web browser would start and invoke the built-in “version” resource. Any application that knows how to make an HTTP request can be a client for the EMS server. In our case this is a web browser. Later on we are going to build a mobile client app for the service.

Click on the “Open Browser” button in the EMS Development Server window. Verify that the web browser displays JSON text with EMS version information.

Let’s test our “EmailChecker” endpoint. First we are going to pass to it a string that is not a valid email address. For example “hello”. The server should return “false”.

In the web browser replace “version” with “EmailChecker/hello” and press enter. Verify that the web browser displays “false” string.

Let’s try again, but this time we are going to pass to our “EmailChecker” resource a string that looks like a valid email address. For example This email address is being protected from spambots. You need JavaScript enabled to view it.. This time we should see “true”.

Replace “hello” with This email address is being protected from spambots. You need JavaScript enabled to view it. and press enter. Verify that the web browser displays “true” string.

Now we are going to build a client application for our EmailChecker EMS resource. We do not need to stop the server. Let’s keep it running. Just right-click on the “Project Group” and select “Add New Project”.

Right-click on the “Project Group” icon in the Project Manager in the top right corner of the Delphi IDE and select “Add New Project” from the context menu.

We are going to create a new Delphi multi-device application that can be compiled for iOS, Android, Windows and Mac from the same code.

In the “New Items” dialog select “Multi-device Application” in the “Delphi Projects” category. Click on OK.

We are going to use an empty application template for our client app.

Select “Blank Application” template in the new “Multi-device Application” wizard and click OK.

It is always a good idea to save your work. We are going to save the new project in the same directory as our EMS service to keep things simple.

Click on “Save All…” in “File” menu. Save the main unit of the new project as “uFormClient”, the project as “EmailCheckerApp” and the project group as “EmailCheckerGrp”.

Don’t forget about giving meaningful names to forms in your application! The name of the form will be “FormClient” and the caption “Email Checker”.

Click on the form to select it in the Object Inspector. Change the “Name” property of the form to “FormClient” and the “Caption” property to “Email Checker”.

We need an edit and a button in our application, so the end user can enter text into an edit and click on the button to verify if it is a valid email address or not. The fastest way of adding components to the form is via “IDE Insight”. I just need to press “Ctrl” and “.” keys at the same time to move focus to the IDE Insight and I can just start typing the name of the component I want to add.

Press “Control” and “.” on the keyboard to switch focus to the “IDE Insight” and start typing “TEdit”. Double click on the “TEdit” in the drop down list to add an edit control to the form. Move the control towards to the top left corner of the form.

In the same way we are going to add a button to the form.

Click on the red cross in the “IDE Insight” edit and type “TBut”. Double click on the “TButton” component to add it to the form.

The user interface of our application is going to be super simple. Just an edit and a button. We need to give a proper caption to the button.

Move the button under the edit control on the form, make it a bit wider and change its “Text” property to “Verify e-mail address”. Make the whole form a little bit smaller.

It is always a good practice to give controls meaningful names. Our user interface is ready. Now it is time to add some code to invoke the EMS EmailChecker resource.

Change the “Name” property of the edit control to “edtEmail”. Change the “Name” property of the button to “btnVerify”.

Let’s keep the structure of our client application clean. It is typically not a good idea to add non-visual components and data access logic directly to a form. It is better to put them in a separate data module. In this way the code is more maintainable. Let’s add a data module to our project for the components and code that is going to access our EMS resource.

In the “File” menu click on “New” and “Other”. In the “New Items” dialog select “Delphi Files” node in the tree view at then “Data Module”. Click OK to add it to the project.

We need to give proper names to the data module unit and to the data module itself. What about “DMEmailChecker”?

In the “File” menu click on “Save All”. Save the data module as “uDMEmailChecker”. In the Object Inspector change the “Name” property of the date module to “DMEmailChecker”.

The key component that provides access to the EMS server is “TEMSProvider”. Let’s add it to the data module.

Drop on the data module a “TEMSProvider” component.

We need to specify in the EMS provider component the host name and the port of our EMS server. In our simple demo the server is running locally, so we are going to enter “127.0.0.1” as host and “8080” as the port number. In a real situation that would be the actual IP address of the machine which hosts the EMS server.

Change the “URLHost” property of the “EMSProvider” component to “127.0.0.1” and the “URLPort” property to “8080”.

Now we can check if the EMS Provider component can connect to EMS server. We can just right-click on the provider and select “Test Connection”. Alternatively we can click at the “Test Connection” option at the bottom of the Object Inspector.

Right-click on the “EMSProvider1” component and select “Test Connection” from the context menu.

If we can connect to the EMS server, we should see a message with the EMS version information.

Verify that the connection is working. You should see the message with JSON-formatted EMS server version.

In order to invoke a resource in the EMS, we need to have a “backend endpoint” component. Let’s add it to the data module. In the “Resource” property we need to specify the URL resource we want to access. We also need to specify the “ResourceSuffix”, because we want to execute the GET endpoint that takes the “(item}” parameter. We can even check at design time if the resource is accessible right-clicking on the backend and selecting “Execute”.

Drop on the data module “TBackendEndpoint” component. Change the “Resource” property of the backend endpoint component to “EmailChecker”. Change the “ResourceSuffix” property to “{item}”. Right-click on the backend endpoint component and select “Execute”.

If we have not misspelled the resource name, we should get HTTP response code “200”, which means “OK”.

Verify that the endpoint can be executed. There should be a message “Response 200 – OK” displayed.

We need one last component in our data module – “REST Response”. This component needs to be connected to the endpoint backend and is used to store the response received from our backend. In our case that would be “true” or “false”.

Add to the data module “TRESTResponse” component. Change the “Response” property of the “BackendEndpoint1” component to “RESTResponse1”.

We also need to define the parameter that our “EmailChecker” endpoint expects. That’s why need to add an item to “Params” property of the endpoint component.

Select “BackendEndpoint1” component and click on the ellipsis button next to the “Params” property.

Let’s define a parameter. The “Value” property of the parameter is what is going to be sent to the email checker for validation. Let’s put here a string that looks like a valid email. We also need to set the “Name” property to “item”.

Click on the “Add New” button in the params editor window to add a new parameter to the collection. Set its “Name” property to “item”. Set its “Value” property to This email address is being protected from spambots. You need JavaScript enabled to view it..

We can test execute our email checker at design-time. If we execute the endpoint again, we should see what was sent back from the EMS service in the “Content” property of the response component. Yes. “This email address is being protected from spambots. You need JavaScript enabled to view it.” appears to be a valid email address.

Right-click on the “BackendEndpoint1” component and select “Execute” from the context menu. There should be a message “Response 200 – OK”. Click on the “RESTResponse1” component. Click on the ellipsis button next to the “Content” property. Verify that it contains text “true”.

Our components are all setup for invoking the email checker endpoint. Before starting with writing some code let’s remove the parameter value and the response data. Clearing the response data can be done very easily from the context menu of the REST response component.

Right-click on the “RESTResponse1” component and select “Clear Response Data” from the context menu.

REST response needs to be really sure that you really want to clear the response data. Yes. We want to clear it.

Click on OK to confirm that you want to clear the response data.

In the moment we are going to write code that will provide the “Value” of the parameter from the edit control.

In the “Structure” view click on the parameter “item” to select it in the Object Inspector. Clear the contents of the “Value” property.

Now we are going to implement public method “IsValidEmail” in our data module that will execute the “EmailChecker” endpoint. This is the method we are going to call from the user interface of our EmailCheckerApp.

Switch to code editor by pressing F12. In the “public” section of the data module type declaration of the “IsValidEmail” method as follows:

function IsValidEmail(s: string): boolean;

Press “Ctrl+Shift+C”. In the generated skeleton of the implementation of the method type the following three lines of code:

BackendEndpoint1.Params[0].Value := s;
BackendEndpoint1.Execute;
Result := RESTResponse1.Content = 'true';

Save All.

Before we can use the data module in the code of the application form, we need to add it to its “uses” clause. The fastest way to do so is with the “Use unit” wizard.

Make sure that the “uFormClient” unit is active in the code editor. In the “File” menu click on “Use unit…”. Select the “uDMEmailChecker” unit and click on OK.

The last step is to add code to the form that will be executed when button will is pressed. The contents of the edit will be passed to “IsValidEmail” method of the data module and depending of the result appropriate message is displayed.

Double-click on the button component on the form and type in the following code in the generated “OnClick” event handler:

if DMEmailChecker.IsValidEmail(edtEmail.Text) then
  ShowMessage('"' + edtEmail.Text + '" is a valid email address')
else
  ShowMessage('"' + edtEmail.Text + '" is NOT a valid email address');

Save All.

The client application is now complete! Let’s run and verify that it works as expected.

Press the green arrow icon to run the client app without debugging. Enter This email address is being protected from spambots. You need JavaScript enabled to view it. to the edit control. Press on the button and verify that the message that the email is valid is dislayed.

That’s it! We have managed to create the complete system made of the EMS email checking service and a multi-device client app.

The source code of this demo can be downloaded from Embarcadero Code Central.

This tutorial outlines how to leverage the cloud based password reset email functionality that many BaaS providers offer. This tutorial uses Kinvey and assumes that you have signed up for an account on Kinvey.com.

The demo used in this tutorial shows you how to derive from the existing Kinvey API class for the Kinvey component and add a new method for executing Kinvey’s password reset.

Step 1: Set up your Email Template

Inside your Kinvey.com account, go to AddOns->Messaging->Email Templates. Next, select the ‘Password Reset‘ email template. There you can define Sender and Reply To information, the Subject line and the HTML for the body of your email. The App Name referenced in the email is the name of your application you defined inside your Kinvey.com account.

Step 2: Build the C++ Multi-Device Application

Your application consists of a toolbar with a title, several buttons and 4 edit controls parented to 4 TListBox items.TListBox has GroupingKind set to Grouped and StyleLookUp set to ‘transparentlistboxstyle’.

Step 3: Add your KinveyProvider component and account credentials

Add the KinveyProvider1 component to your form and enter the AppKey, AppSecret and MasterSecret that is displayed inside your Kinvey.com account under ‘AppName’->Manage Environments. In order to extend the functionality, you will need to add a new method for triggering a password reset email notification which you can see in the code samples below.

Shown: Mobile app running on Windows with Mobile Preview style.

Step 4: Extend the KinveyProvider API and write your application code

Here is the code for my ExtendKinveytemplate.h file:

//---------------------------------------------------------------------------
#ifndef ExtendApiTemplate_h
#define ExtendApiTemplate_h

#include <System.Classes.hpp>
#include <memory>
//---------------------------------------------------------------------------
template<typename T, typename L>
class TExtendApi : public T
{
public:
    __fastcall TExtendApi(TComponent* AOwner): T(AOwner, NULL){}
    void __fastcall SignupUser(const String & AUserName, const String & APassword,
        const String & AEmail, L & ALogin);

    void __fastcall PasswordReset(const String &AEmail);
};

template<typename T, typename L>
void __fastcall TExtendApi<T,L>::SignupUser(const String & AUserName, const String & APassword,
    const String & AEmail, L & ALogin)
{
    std::auto_ptr<TJSONObject> jsonEmail(new TJSONObject());
    jsonEmail->AddPair("email", AEmail);
    T::SignupUser(AUserName, APassword, jsonEmail.get(), ALogin);
}

template<typename T, typename L>
void __fastcall TExtendApi<T,L>::PasswordReset(const String &AEmail)
{
#ifdef _KINVEY_
    Request->ResetToDefaults();
    // Basic Auth
    ConnectionInfo = this->ConnectionInfo;
    ConnectionInfo.UserName = AEmail;
    T::AddAuthParameter(TAuthentication::UserName);
    // App credentials
    T::AddAuthParameter(TAuthentication::AppSecret);
    Request->Method = TRESTRequestMethod::rmPOST;
    Request->Resource = "rpc/{appkey}/{email}/user-password-reset-initiate";
    Request->AddParameter("email", AEmail, TRESTRequestParameterKind::pkURLSEGMENT);
#else
    Request->ResetToDefaults();
    T::AddAuthParameters();
    Request->Method = TRESTRequestMethod::rmPOST;
    Request->Resource = "requestPasswordReset";
    std::auto_ptr<TJSONObject> jsonEmail(new TJSONObject());
    jsonEmail->AddPair("email", AEmail);
    Request->AddBody(jsonEmail.get());
#endif
    Request->Execute();
    int validCodes[] = {201};
    T::CheckForResponseError(validCodes, 1);
}

#endif

Here is the code for my mobile client:

//---------------------------------------------------------------------------

#include <fmx.h>
#pragma hdrstop

#define _KINVEY_

#include "KinveyFormUnit.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.fmx"
TKinveyForm *KinveyForm;
//---------------------------------------------------------------------------
__fastcall TKinveyForm::TKinveyForm(TComponent* Owner)
	: TForm(Owner)
{
}
//---------------------------------------------------------------------------
void __fastcall TKinveyForm::FormCreate(TObject *Sender)
{
	fApi = new TExtendApi<TKinveyApi, TKinveyApi::TLogin>(this);
	KinveyProvider1->UpdateApi(fApi);
}
//---------------------------------------------------------------------------

void __fastcall TKinveyForm::ButtonSignupClick(TObject *Sender)
{
	TKinveyApi::TLogin lLogin;
	EditUserName->Text = "";
	fApi->SignupUser(EditUserName->Text, EditPassword->Text, EditEmail->Text, lLogin);
	fApi->Login(lLogin);

	EditSessionToken->Text = lLogin.AuthToken;
	ShowMessage("Welcome" + lLogin.User.UserName);
}
//---------------------------------------------------------------------------

void __fastcall TKinveyForm::ButtonPasswordResetClick(TObject *Sender)
{
  fApi->PasswordReset(EditEmail->Text);
  ShowMessage("Message sent to " + EditEmail->Text);
}
//---------------------------------------------------------------------------

Below you see a screenshot of the email that I received after clicking on the ‘Reset Password via Email’ button inside my app:

After clicking on the automatically generated reset URL, you see a web based form where you can reset your password:

In RAD Studio, we integrate with leading Backend as a Service (BaaS) providers to add functionality and platform services to your applications. With BaaS, you get easy access to common services in the cloud without having to build or maintain the backend services yourself. This includes support for being able to upload images to your BaaS account using RAD Studio.

This demo consists of the following functionality:

1. Load an image from the gallery
2. Upload the image to your Parse.com or Kinvey.com account (you will need to sign up for an account)
3. Display the image URL in an Edit control
4. Download the uploaded image and display it in your app

Drop the following BaaS components onto your form:

• TBackendFiles
• TParseProvider or TKinveyProvider, connected to TBackendFiles

Here is the C++ for the application:

//---------------------------------------------------------------------------

#include <fmx.h>
#pragma hdrstop

#include "ImageUploadBaaS_C.h"
#include <memory>
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.fmx"
TForm6 *Form6;
//---------------------------------------------------------------------------
__fastcall TForm6::TForm6(TComponent* Owner)
	: TForm(Owner)
{
}
//---------------------------------------------------------------------------
TStream * __fastcall TForm6::SaveImage(void)
{
	TMemoryStream  * _return = new TMemoryStream();
	try
    {
		Image1->Bitmap->SaveToStream(_return);
	}
	 catch(...)
	{
		delete _return;
		_return = NULL;
		throw;
	}
	return _return;
}
//---------------------------------------------------------------------------
void __fastcall TForm6::DownloadImage(const String &AUrl)
{
	std::auto_ptr<TMemoryStream> lStream(new TMemoryStream());
	Rest::Client::TDownloadURL::DownloadRawBytes(AUrl, lStream.get());
	Image2->Bitmap->LoadFromStream(lStream.get());

}
//---------------------------------------------------------------------------
void __fastcall TForm6::btnUploadImageClick(TObject *Sender)
{
	std::auto_ptr<TStream> lStream(this->SaveImage());
	TBackendEntityValue AFile;
	BackendFiles1->Files->UploadFile("mypicture3.png", lStream.get(), "image/png" , AFile);
	ShowMessage("Image has been uploaded");
	Edit1->Text = AFile.DownloadURL;
}
//---------------------------------------------------------------------------
void __fastcall TForm6::Image1Click(TObject *Sender)
{
	TakePhotoFromLibraryAction1->ExecuteTarget(btnAccessGallery);
}
//---------------------------------------------------------------------------

void __fastcall TForm6::Image2Click(TObject *Sender)
{
	DownloadImage(Edit1->Text);
}
//---------------------------------------------------------------------------

void __fastcall TForm6::btnDownloadImageClick(TObject *Sender)
{
	DownloadImage(Edit1->Text);
}
//---------------------------------------------------------------------------
void __fastcall TForm6::TakePhotoFromLibraryAction1DidFinishTaking(TBitmap *Image)

{
	Image1->Bitmap->Assign(Image);
}
//---------------------------------------------------------------------------

I recently covered how to add user account creation to your BaaS enabled apps. Our BaaS support in Appmethod allows you to integrate with leading Backend as a Service providers to add functionality and platform services to your mobile applications.

Many applications today include account creation functionality, allowing the user to sign up for an account by providing their name, email, username, password etc.

In my recent article, I used the following C++ code:

1 2 3 4 5 6

void __fastcall TForm1::btnCreateAccountClick(TObject *Sender) {  TBackendEntityValue entity;  BackendUsers1->Users->SignupUser(Username->Text, Password->Text, NULL, entity);  ShowMessage("Account created"); }

The third parameter was not defined in my previous demo since the only sign-up info I required was a username and password. The third parameter to SignupUser is a TJSONObject with name value pairs.  You can pass a TJSONValue with email, zip code etc..

Step 1:  BaaS Provider Account Signup and UI Design

You can use either Kinvey or Parse as your BaaS provider. The code and steps are the same for both providers. In my sample application, I am first using Parse and then Kinvey as my BaaS provider. You will need to sign up for an account on Parse.com and/or Kinvey.com . In your IDE, go to File->New->Mobile Application, and select a blank form. Add a toolbar with a parented label to add a title to your form. Then drop a number of TEdit controls onto your form and change their ‘Name’ to something easily identifiable, i.e. EditUsername, EditZipCode etc. In the TextPrompt field for each TEdit, instruct the user what you want them to type in. For the EditPassword control, set the ‘Password’ property in the Object Inspector to ‘True’.

Step 2:  Adding BaaS Components

You will also need to drop a BaaS provider component onto your form. If you are using Parse, you will need to use TParseProvider and define your ApplicationID, MasterKey and RESTAPI Key. If you are using Kinvey, you will need to put the TKinveyProvider component onto your form and enter your AppKey, AppSecret and MasterSecret. Then drop a TBackendUsers component onto your form and connect it to your provider of choice.

Step 3:  Setting up the Event Handler

The Sign Up button has the following on-click event defined:

C++:

void __fastcall TForm1::Button1Click(TObject *Sender)
{
		TJSONObject *LJSON = new TJSONObject();
		TBackendEntityValue LLogin;
		LJSON->AddPair("email", EditEmail->Text);
		LJSON->AddPair("first_name", EditFirstName->Text);
		LJSON->AddPair("last_name", EditLastName->Text);
		LJSON->AddPair("age", EditAge->Text);
		BackendUsers1->Users->SignupUser(EditUsername->Text, EditPassword->Text, LJSON, LLogin);
		ShowMessage("You are now signed up");
}
//---------------------------------------------------------------------------

Object Pascal:

procedure TSignUpForm.BtnSignUpClick(Sender: TObject);

var

  LJSON: TJSONObject;

  LLogin: TBackendEntityValue;

begin

  LJSON := TJSONObject.Create;

try

  LJSON.AddPair(’email’, EditEmail.Text);

  LJSON.AddPair(’first_name’, EditFirstName.Text);

  LJSON.AddPair(’last_name’, EditLastName.Text);

  LJSON.AddPair(’age’, EditAge.Text);

  BackendUsers1.Users.SignUpUser(EditUserName.Text, EditPassword.Text, LJSON, LLogin );

  ShowMessage(’You are now signed up’);

finally

  LJSON.Free;

end;

end;

Step 4:  Deploying the Application and viewing User Account Data

After this, you should see email, first_name, last_name and age as column headers in your Users section inside your BaaS console. For Kinvey, you can access users via AddOns > Core > Users and for Parse, user management is located under Data Browser > User.  This is in addition to defining a username and password.

Here is my app running on Windows with the Windows Preview style:

Here is what I see inside my Parse account after signing up via my sample application:

Here is what I see inside your Kinvey Account:

BaaS Tip: You can put whatever you want in the JSON object. For example, I could put another Edit control onto my form, change its name to EditCountry and addLJSON.AddPair(’country’, EditCountry.Text); to my code. This would allow the user of my application to also enter the name of the country they reside in and would result in another column being added in my BaaS console with ‘country’ as its column header title.

You can use BackendUsers.Users.FindUser to retrieve the JSON object and BackendUsers.Users.UpdateUser to change the values in the JSON object.

UI Tip: Some of the input controls will likely be covered by the keyboard once the user clicks on a field, especially on a phone form factor. In that case, you should automatically shift the form up to show the user what field they are typing in. We have a great demo that shows you how to auto-scroll the form and implement this functionality.

Our BaaS support in Appmethod includes components for both Kinvey and Parse. Part of our component pack is the TBackendUsers component which is designed to be hooked into either the ParseProvider or KinveyProvider component.

My sample application that I am building as part of this tutorial will allow me to create a user account on either Kinvey.com or Parse.com, with a defined username and password. If the account creation was successful, a message dialog will be shown. If the username already exists inside my BaaS account, it will automatically return a message, telling me to choose a different username. 

UI specs:

I placed a TToolbar onto my form, with a TLabel parented to it that is aligned to Center with a Stylelookup property of ‘toollabel’.

I also placed a TListbox onto my form with one Listboxitem that contains 2 TEdits (one for the username, one for the password) and a TSpeedbutton (you can also use a TButton).

For the Password edit, you can check the ‘Password’ property, but I am leaving it unchecked for demo purposes.

The Listbox Groupingkind property is set to Grouped and the Stylelookup property is set to ‘transparentlistboxstyle’. The Listbox is aligned to Center with a Bottom Margin of 100, and a Top Margin of 30.

The Stylebook that I dropped onto my form has the AndroidJet style assigned to it. I also changed the font color to green in the TextSettings property.

BaaS components:

Place either a TParseProvider or TKinveyProvider component onto your form and enter your credentials. You will need to go to Parse.com or Kinvey.com to sign up for an account.

Next, add a TBackendUsers component and set the provider to ParseProvider1 or KinveyProvider1, depending on the BaaS provider that you have selected for your project.

My last step was to setup the on-click event that is fired when the user clicks on ‘Create’ to sign up for the account.

C++ Code:

void __fastcall TForm1::btnCreateAccountClick(TObject *Sender)
{
 TBackendEntityValue entity;
 BackendUsers1->Users->SignupUser(Username->Text, Password->Text, NULL, entity);
 ShowMessage("Account created");
}

Object Pascal Code:

procedure TAccountSignup.btnCreateAcctClick(Sender: TObject);

var

ACreatedObject: TBackendEntityValue;

begin

BackEndUsers1.Users.SignupUser(Username.Text, Password.Text, nil, ACreatedObject);

ShowMessage(’Account created’);

end;

Below are some screenshots of my app in action:

In Appmethod, we provide support for remote push notifications via our BaaS (Backend as a Service) integration.

We include components for Kinvey and Parse, two popular BaaS providers, right out of the box.

In this tutorial, I am going to show you how to setup and enable push notifications in your applications using Appmethod. The code is the same across iOS and Android, but the steps for setting up notifications are different on Android than on iOS, since you are connecting with Google Cloud Messaging (GCM) on Android and with Apple Push Notification (APN) on iOS.

In order to receive push notifications, you need to set up the messaging service (APS or GCM), the device, the cloud service (Kinvey), and your Appmethod application. We have a great step-by-step tutorial on our docwiki that I recommend you look at since it walks you through all the steps.

My demo consists of a single form with a top aligned Toolbar and Label (to indicate the application name), and a client aligned ListView. The ListView will display each notification as a new item in the list. When the app is running in the background or is closed, you will see the notification displayed in the notification center on your device. On Android, you can access the notification center by swiping down from the top of your screen.

On my form, I placed 2 components:

• TPushEvent, connected to my KinveyProvider component, with the following event setup:

    void __fastcall TForm3::PushEvents1PushReceived(TObject *Sender, const TPushData *AData)

    {

    ListView1->Items->Add()->Text = AData->Message;

    }

 

Object Pascal

procedure TForm1.PushEvents1PushReceived(Sender: TObject;
  const AData: TPushData);
begin
    ListView1.Items.Add.Text = AData.Message;
end;

Next, you will need to setup the Messaging service. Please see this tutorial on how to register with Google and setup your push notification project. As part of that setup, you will be assigned a Project Number that you will need to enter on your Kinvey component, along with your Kinvey account info that you were provided when you signed up on Kinvey.com and setup the project.

BaaS uses OpenSSL, but for Android, those files already exist on the file system, so you don’t need to add or link in any ssl library files. To send push notifications, you will need to login to your Kinvey.com account, go to  Addons > Messaging > Push and connect your Kinvey account to your Google Cloud Messaging account:

1. Copy:
   • the Project ID from your Google Cloud Messaging Setup
   • the API Key from your Google Cloud Messaging Setup

   

One of the Appmethod features I wanted to highlight is our BaaS support. BaaS stands for Backend as a Service, and in Appmethod, we integrate with leading Backend as a Service providers to add functionality and platform services to your mobile applications. This includes out of the box support for Kinvey and Parse. With BaaS, you get easy access to common services in the cloud without having to build or maintain the backend services yourself.

Here is a quick summary of the features you get with our BaaS integration:

• Use push notifications to engage your users on any device or platform
• Access data and object storage in the cloud
• User authentication
• Builds on the REST client support introduced in XE5
• Built-in support for Kinvey and Parse with a common API component set

This tutorial show you how to use the KinveyProvider component for querying data that lives in a data collection in the cloud using our BackendQuery component.

First, I signed up for an account on Kinvey.com. While this demo uses Kinvey, you could also use the ParseProvider component. Once you sign up for the account, you will get an app key, master secret and app secret that you will need to enter for the KinveyProvider component. You will also need a BackendQuery, RestResponseDataSetAdapter and FDMemTable component.  BaaS requires Open SSL which means that you will need to get the necessary library files onto your file system before deploying your application.

Before hooking the RestResponseDataSetAdapter component into FDMemTable and BackendQuery, you will need to setup a new data collection since this demo consumes existing data that lives in the cloud. After you have created a new data collection, you will need to add rows and columns and add some data.

Next, set your properties as shown in the two screenshots below, then execute your BackendQuery request, by right-clicking the component.

My application consists of a TTabcontrol with 2 tabs that have a master-detail relationship. The ListView on Tab1 (Master) is bound into FDMemTable, and my toolbar label and memo on Tab2 (Detail) are also bound into FDMemTable. Binding TListView’s Sync property into FDMemTable’s * property ensures that the data stays in sync.

C++ Code:

void __fastcall TForm3::BackClick(TObject *Sender)

{

TabControl1->ActiveTab = master;

}

//—————————————————————————

void __fastcall TForm3::ListView1ChangeRepainted(TObject *Sender)

{

TabControl1->ActiveTab = detail;

}

//—————————————————————————

void __fastcall TForm3::FormCreate(TObject *Sender)

{

BackendQuery1->Execute();

}

Object Pascal Code:

procedure TForm3.BackClick(Sender: TObject);

begin

TabControl1.ActiveTab :=  master;

end;

procedure TForm3.FormCreate(Sender: TObject);

begin

BackendQuery1.Execute;

end;

procedure TForm3.ListView1ChangeRepainted(Sender: TObject);

begin

TabControl1.ActiveTab := detail;

end;

When it comes to mobile UI design, there are several key design paradigms. I covered the different mobile UI design patterns in my recent C++ Mobile Day session.

App Home Screen Navigation Key Features

• Images arranged in a grid like layout
• Images can be annotated with text
• May span over multiple screens (you can use a TTabControl for that)

 

To create the user interface shown in the screenshot above, you will first need to create a new mobile application. Add a TToolbar, align it to the Top, and parent a TLabel to it. Next, drop a TGridPanelLayout component onto your form and align it to the client. By default, two columns (0,1) and two rows (0,1) are set up.

 

Note: Since you are going to set up event handlers for each graphic on the home screen, I would recommend adding a TTabControl (aligned to Client) with 11 invisible tabs (TabPosition = tpNone). Then add the Toolbar and GridPanelLayout components to Tab1, and link to each of the tabs when the user taps on one of the 10 home screen graphics by setting up on-click events for each graphic.

Define the width of each column, i.e. 50% to have even spacing across both columns.

 

 

For this sample application, we want to have a total of two columns with five rows. To add a row, right click on ‘RowCollection’ and add an item.

 

Each of the five rows should have a value of 20% to ensure even spacing across our grid.

 

Next, drop a total of 10 TImageControls onto your form. You could also use TImage if you want to load different images for different device resolutions (i.e. 1x resolution image, 2x resolution image etc.).Multi-select (shift select) all TImageControls in the Structure pane and change the width and height to 75 px. This ensures spacing between each of the graphics.

 

 

Select each TImageControl and select the row and column you want it to be displayed.

 

Last step is to add the images you want to display and setup on-click events for each graphic to navigate the user to the related content.