DreamFactory

DreamFactory is an open core API generation platform capable of generating REST APIs for more than 20 databases including MySQL, PostgreSQL, SQL Server, and Snowflake. Offering support for role-based access controls (RBAC), API key generation and management, and API limiting and logging, DreamFactory is used by thousands of organizations around the globe to generate and manage API infrastructure.

To learn more about DreamFactory head over to https://www.dreamfactory.com/.

Using Adalo's External Collections feature it's very easy to create a DreamFactory-backed mobile application. To demonstrate the integration process we'll use the MySQL Employees sample database to create a company directory application. This database consists of six tables and approximately four million interrelated records. Let's begin by creating the example application.

Creating the Application

Although Adalo's External Collections feature does support the ability to perform CRUD (create, retrieve, update, delete) operations against an external API, our application will serve as a read-only employee directory. Further, we'll focus on building a mobile-only application. To follow along, login to your Adalo account, choose Create New App, and select Mobile Only:

Next, select the Blank Mobile First template:

Finally, define an application name, choose your intended audience, and define a primary and second color:

Press Create and the Adalo App Builder will display the skeleton application which initially consists of the following three screens:

I like to use sites such as Color Combos and Adobe Color to help identify appealing color combinations.

Next we'll add the employees database API to Adalo so we can begin integrating the data into the application.

Adding the Employees API

After adding database credentials to DreamFactory and generating the API, users will typically define a role-based access control (RBAC) and then attach that RBAC to an API key. This API key is passed from the client to DreamFactory within a secure HTTP header. DreamFactory will use this key to both authenticate and authorize the request. Therefore to add this API to Adalo you'll need to retrieve the following information from your DreamFactory instance

• The base URL of the API endpoint

• The API key. This API key will be passed from Adalo using the header X-DreamFactory-API-Key.

Add this information to Adalo by clicking on the Database menu item and then clicking Add Collection:

A modal will popup which looks like this:

Set the Collection Name to any easily recognizable name. I'll use Employees. The API Base URL will point to the collection and will look similar to https://api.example.com/api/v2/mysql/_table/employees. Finally, you'll need to click Add Item, select Header, and then enter the header name and your API key:

After entering this information, press Done and then Next to proceed to the Endpoints screen:

Click the Get All menu item and set the Results Key field to resource. This is critical because DreamFactory returns record collections under a JSON key of the same name. Here is an example:

	
{
  "resource": [
    {
      "emp_no": 112,
      "birth_date": "1953-09-02",
      "first_name": "Eddie",
      "last_name": "Smith",
      "gender": "M",
      "hire_date": "1986-06-26"
    },
    {
      "emp_no": 113,
      "birth_date": "1953-09-02",
      "first_name": "Eddie",
      "last_name": "Smith",
      "gender": "M",
      "hire_date": "1986-06-26"
    },
    ...
    ]
}

After making this change press Done and Next to test API data retrieval:

Finally, press Run Test and if everything is properly configured you should see output like this:

Presuming everything is okay, press Save Collection to finish the addition process.

Adding Employee Data to an Application Screen List

Now that the external API is configured, it's time to retrieve and display the employee data. Open the builder's Components menu and drag a Simple List component to the application Home screen. The screen will look like this once done:

Click on the list to open the list attribute editor and set the "What is this a list of?" field to Employees. Then click Title and then the Magic Text icon and choose first_name:

Then repeat this step, this time choosing last_name after adding a space after first_name. Once done the interface will look like this:

Disable the Subtitle and Left Section attributes, and your Simple List should look like this:

Believe it or not, that's all the steps required to start loading DreamFactory API data into your application. After clicking Preview and creating an account, the home screen loads the employee names into the list:

Creating the Employee Profile Screen

We'll want users to be able to learn more about a specific employee by clicking on the employee name and viewing an employee profile screen. To do this we'll need to create a click action which sends the current employee data (the clicked-upon employee name) to a new screen. Click on the Simple List and in the attributes screen click Add Action and then Link > New Screen:

Assign the new screen a name, and choose Blank Screen. Click Create Screen. Your Click Actions detail widget should look like this:

Finally, build the employee profile user interface. Adalo will pass the current employee data to the new screen meaning all you need to do is drag a text field component onto the screen and use magic text to declare the data:

Once complete, preview your app and you'll see an employee profile screen that looks something like this:

Learning More

DreamFactory is open core, meaning the code is publicly available and you can use many of the fundamenal features at no cost. Here are a few resources to get you started:

• DreamFactory's GitHub repository: The GitHub repository includes the code and links to the Docker and Helm environments, among other useful information.
• DreamFactory documentation: The documentation includes several detailed tutorials explaining how to generate and secure APIs backed by different data sources, including MySQL.