Defining custom user sign-up properties in your BaaS enabled apps

Written by Sarina D on Posted in Tutorials

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.

 

Tags: Mobile UI iOS Android REST JSON Object Pascal C++ BaaS Kinvey Parse



About
Gold User, Rank: 5, Points: 558

Check out more tips and tricks in this development video: