Learn How to Create a User Registration Form with the Appery.io Database and Server Code

The Appery.io platform provides a cloud database for storing any app data. The database also has a built-in user management feature. This means, if your apps needs user login or user registration, this capability is available out-of-the-box.

Screen Shot 2015-12-31 at 12.56.22 PM

Appery.io database built-in user management

The Users collection has two default columns: username and password. In most cases you will also need to store additional users information such as email or address. One option is to create additional custom columns in the Users collection. Another option is to store any user information in a different database collection and then link the Users collection to that collection. In this blog post I’m going to show you how use a separate collection to store user information and how use the Pointer column type to link the two collections.

Setting up the database

The first step is to set up the database.

  1. Create a new database. The Users collection is automatically available in every new database.
  2. Now you need to create a new custom collection where additional user information will be stored. Create a collection called UserProfile.
  3. Add two columns to this collection: email and country, both of type string.
  4. Go back to Users collection and add a column called to_userProfile, set its type to Pointer and select the UserProfile collection.
Screen Shot 2015-12-31 at 1.21.59 PM

UserProfile collection with sample data

That’s all the setup you need to do.

Next you are going to create two Server Code scripts to register a user with additional information and login a user and retrieve the additional information.

Creating the registration script

Using Server Code script allows you to combine all the logic into a single and invoke it via a single REST API request. Doing the same thing from the client would require multiple requests which would slow down the app and in general not recommended.

  1. Create a new Server Code script called registerUser.
  2. Copy and paste the code below into your newly created script.
// Database API key can be found in Settings tab in Database
var databaseId = "your_database_id";
var username = request.get("username");
var password = request.get("password");
var email = request.get("email");
var country = request.get("country");

// create user
var userLoginInfo = DatabaseUser.signUp(databaseId, {
"username": username,
"password": password
});

// create UserProfile
var userProfileInfo = Collection.createObject(databaseId, "UserProfile", {"email":email,"country":country});

// link
DatabaseUser.update(databaseId, userLoginInfo._id,{"to_userProfile":{"collName":"UserProfile", "_id":userProfileInfo._id}},userLoginInfo.sessionToken);

var user = {"username":username,"email":email,"country":country};

response.success(user, "application/json");

Let’s review the code.

  • Line 2 is where you set your database API key. The API key can be found in Settings tab in Database.
  • Line 3-6 is where the information submitted by the user is going to be passed to the script.
  • Line 9 you are using Server Code API to create a user new in the database (in the Users collection).
  • Line 15 you are populating the UserProfile information with email and country data.
  • Line 18 you are linking the newly created user to his/her profile information. You are linking a record in Users collection with a record in UserProfile collection via the Pointer data type.
  • Line 20 you are collecting together all the user information.
  • At the very end, the script returns user information. This is the service (script) response body.

It’s always a good idea to test the script, and that’s easily done.

First, provide script input parameters:

Screen Shot 2015-12-31 at 1.47.10 PM

Script input parameters before testing

Switch to Run tab and click Save and run button to invoke the script.

Every script you create is automatically a REST API service. To find out its URL, simply switch to the REST information tab.

Screen Shot 2015-12-31 at 1.49.17 PM.png

Script REST API information

When you need to use this script in your app, you can quickly set up the service by selecting Create new > Server Code Services > your script.

Screen Shot 2015-12-31 at 1.51.23 PM

Setting up REST API for Server Code script in the App  Builder

One more thing left to do is to create the script to login.

Creating the login script

  1. Create a new script and call it loginUser
  2. Copy and paste the following script code:
// Database API key can be found in Settings tab in Database
var databaseId = "your_database_id";
var username = request.get("username");
var password = request.get("password");

var userLoginInfo = DatabaseUser.login(databaseId, username, password);

var user = DatabaseUser.retrieve(databaseId, userLoginInfo._id,"to_userProfile", userLoginInfo.sessionToken);

response.success(user, "application/json");

The login script is much simpler. You log in and retrieve information from the UserProfile collection in a single request.

  • Line 2 is where you set your database API key. The API key can be found in the Settings tab in Database.
  • Line 3-4 is where you pass login information from the page to this script.
  • Line 6 is where you do the actual user login using Server Code database API.
  • Line 8 is where you get the linked information from UserProfile collection.
  • At the very end the script returns user information. This is the service (script) response body.

To test this script, go to the Script parameters tab. Enter information for an exiting user, switch to the Run tab and test the script.

Summary

Now that you have the user registration script, you can build a page like this and collect all the registration information at once:

Screen Shot 2015-12-31 at 5.25.56 PM

Registration page

You will have created two Server Code scripts. One script for user registration and another script for user login. The reason you are using Server Code to do this is because in a single server-side action, you create a user, save additional user information, and link the Users collection with the UserProfile collection. Doing all this from the client would require at least three separate requests: creating a user, saving user information, and linking. Using Server Code is more elegant and will increase app performance.