DEV Community: Backendless

How To Integrate A FlutterFlow App With A Backendless Backend (Complete Tutorial)

Backendless — Fri, 17 Mar 2023 19:33:37 +0000

In this article, we are going to briefly introduce you to FlutterFlow, a low-code builder for mobile apps with a visual builder that lets you build cross-platform native apps with Flutter.

We will also describe how to add a powerful and scalable Backendless backend to complement a FlutterFlow frontend.

Building a mobile or web app used to be an enormous undertaking. In the past, creating apps, or digital products as they are sometimes called, required lots of technical knowledge and many months – even years – of dedicated development time.

The no-code/low-code movement has changed that. Now, with tools like Backendless and FlutterFlow, non-technical builders can learn and build apps in months or even weeks.

Ready to build beautiful and scalable apps with Backendless and FlutterFlow? Then let’s get started.

Try Backendless For Free To Power Up Your FlutterFlow App

Make your FlutterFlow app more powerful and scalable than ever by adding a Codeless Backendless backend and real-time database.

Start Your 30-Day Free Trial

1. What is FlutterFlow

2. Frontend vs Backend Development – and Why It Matters

3. Benefits of Adding a Backendless Backend and Database

4. How to Integrate a FlutterFlow App with a Backendless Backend

4.1 User Registration with Backendless

4.2 Login with Backendless

4.3 Run a Query in Backendless

4.4 Create a New Object in Backendless

4.5 Edit an Existing Object in Backendless

4.6 Send an Email Using a Template in Backendless

5. Conclusion

What is FlutterFlow?

FlutterFlow is a platform that allows users to easily create and develop mobile apps without coding knowledge. The platform offers a range of pre-built projects, including templates for different types of apps such as travel apps, which users can use as a starting point for their own project.

The app’s canvas provides users with a visual interface to drag and drop widgets to create the desired layout. Users can select from a range of widgets and modify their properties, such as text size and font. FlutterFlow’s widget tree allows users to see the architecture of their app, which can be composed of multiple pages.

FlutterFlow also offers a range of features that make it easy to add functionality to your app. Users can add actions to different items and access third-party databases via API.

The platform also includes an animation editor to add animations to different elements in the app. FlutterFlow’s customization options include setting up themes, selecting language options, and integrating with GitHub and other tools.

Overall, FlutterFlow’s user-friendly interface and variety of features make it a useful platform for anyone looking to create mobile app UIs without coding knowledge.

Frontend vs Backend Development – and Why It Matters

From a high-level perspective, an application’s frontend is what the end user or customer will interact with. This may be an app on their mobile device, an interactive website, or a piece of software. The backend of an application is where long-term data is stored and much of the “heavy lifting” occurs.

An application’s speed and usability, and thus the user experience, is dependent on the processing power of the device where computations occur. Apps built with a beautiful frontend will get little traction if the app is painfully slow.

That is why it is recommended that as much of the logic as possible be stored on the backend. A typical server – including Cloud servers – contains far more processing power than a typical mobile phone, tablet, or laptop.

Similarly, the capabilities of the backend will be essential to growth and scale. Developers should be careful to disregard backend development because that is where the bulk of user experience failures occur.

A solid backend should not only include a database, but should offer the ability to create backend logic, build and access APIs, provide ample storage for files, images, and videos, and support messaging and notification systems.

Benefits of Adding a Backendless Backend and Database

We’ve now established that a successful app requires much more than just an impressive user interface. Most apps will be supported by their backend, including servers (hosting), data storage, user management, and in many cases, logic.

The more capable an app’s backend, the more effective the app and the better the user experience.

FlutterFlow states over 350k creators are utilizing their Flutter-based low-code mobile app development platform, but for all the strengths the platform offers on the frontend, it’s backend capabilities – and particularly database features – are lacking.

FlutterFlow offers fantastic low-code UI development tools. For all the strengths the platform offers on the frontend, however, it’s backend capabilities are limited.

That’s where Backendless comes in.

With a powerful visual database, huge assortment of pre-built APIs and the capability to build your own codeless APIs, Backendless easily fills in all the backend gaps in your FlutterFlow app.

For developers looking to build a long-term product, Backendless is critical. Backendless scales infinitely out of the box, meaning you never need to worry about your server infrastructure holding up under heavy traffic. Additionally, you can host your app on Backendless’ cloud servers in the United States or European Union (perfect for GDPR compliance) or on your own on-premise servers.

From a feature standpoint, Backendless provides the most complete low-code backend capabilities on the market. In this article, we will discuss some of the basics – user authentication (registration and login) and database manipulation. However, that merely scratches the surface of what Backendless has to offer.

Other features your FlutterFlow app will benefit from include:

How to Integrate a FlutterFlow App with a Backendless Backend

From this point on, we will be demonstrating how to integrate FlutterFlow with Backendless. In this article, we’re going to walk you through the process of integrating several basic backend functions into your FlutterFlow app (click to jump to each section):

User Registration
User Login
Query Your Database
Create a New Data Object
Edit or Delete an Existing Object
Send an Email Using a Template

To get started, you will need a FlutterFlow account as well as a Backendless account (register here for free).

Note: The simplest way to access Backendless’ robust backend features is to build your frontend with Backendless as well. Be sure to check out our no-code UI Builder to see how it stacks up to FlutterFlow.

User Registration

Let’s start with User Registration.

User registration opens up the entire set of user management functions in Backendless. These include session management, password management, user roles, and relating users to other data objects.

User registration also opens up user engagement opportunities such as email messaging, push notifications, and in-app messaging.

Firstly, let’s create a new page named Registration. Change the AppBar title text to User Registration so it describes the page logic.

Under the AppBar, add the Column component with two Text Fields (EmailField and PasswordField) and a Button (RegisterButton).

The Widget Tree will look like this:

Toggle the Password Field setting for the PasswordField component:

Also, add the disable options for the RegisterButton so it is inactive when the EmailField or the PasswordField are not filled:

At this point, I’ll skip the description of setting up the components style, alignment, and paddings (you can change these at your own discretion). Finally, the page layout might look like this:

So the UI is ready. Now let’s go to the registration part.

Let’s create a new POST API and name it RegisterUserAPI. Configure it with corresponding URL and headers.

The URL value is https://api.backendless.com/APP_ID/REST_API_KEY/users/register (or https://eu-api.backendless.com/APP_ID/REST_API_KEY/users/register for the EU cluster). Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

Also let’s create two variables – email and password of type String – that would be passed to the body of the Backendless User Registration API:

And then pass these variables to the request body:

Now you’re able to test the RegisterUserAPI from the Response & Test tab:

As you can see, the API works correctly and the registered user object is returned with status 200 as expected.

Now we can move forward to the RegisterButton actions. Create a new On Tap action and configure an Action Chain that looks like:

1. Сall the RegisterUserAPI and pass the email and password values:

The result of the request will be set to the registerUserResult variable.

The email and password values are taken from the corresponding EmailField and PasswordField components:

2. After the RegisterUserAPI is called, we receive its response. It could be successful (3) or failed (4).

3. If the response is successful, an alert with a “User has been registered in Backendless. You can now login.” message is shown:

4. Otherwise, the failure alert is shown with the error text received in the registerUserResult:

We will only display the message from the error, not the whole object. This can be done by using the Custom JSON Path name:

5. Finally, we can clear the EmailField and PasswordField components:

The RegisterButton On Tap action is configured and we can now test how the User Registration works.

Return to the UI Builder page and press the “Run your app in Test Mode” button. Please note that the API won’t work in the Preview mode.

Wait until the test session is loaded, enter an email and password of a new user and click Register:

If the registration was successful, we will receive a message about success:

If an error occurred during registration (for example, an attempt was made to register an existing user), we will receive the following notification:

With that, user registration is complete. Now let’s move to logging in the user.

Login with Backendless

For this section, we’ll skip some of the details that were previously described in the Register User section.

Create a new page named Login and change the AppBar title text to Login so it reflects the page logic.

Also, for this page we need two Input Field components (LoginField and PasswordField) and a LoginButton:

As we did with the Registration page, toggle the Password Field setting for the PasswordField component and add the disabled options for the LoginButton so it is inactive when LoginField or the PasswordField are not filled. These steps were also described in the previous section (Registration page).

Finally, the page layout might look like this:

So the UI is ready. Now let’s go to the login part.

Let’s create a new POST API and name it LoginAPI. Configure it with corresponding URL and headers:

The URL value is https://api.backendless.com/APP_ID/REST_API_KEY/users/login (or https://eu-api.backendless.com/APP_ID/REST_API_KEY/users/login for the EU cluster). Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

Also create two variables – login and password of type String that would be passed to the body of the Backendless Login API:

Pass these variables to the request body:

Now we’re able to test the LoginAPI from the Response & Test tab:

The API works correctly and the logged in user object is returned with status 200 as expected.

Now we can move forward to the LoginButton actions. Create a new On Tap action and configure an Action Chain that looks like this:

1. Call the LoginAPI and pass the login and password values taken from the corresponding LoginField and PasswordField.

The result of the request will be set to the loginResult variable:

2. After the LoginAPI is called we receive its response. It could be successful (3) or failed (4).

3. If the response is successful, an alert with a “User has been logged in to Backendless” message is shown:

4. Otherwise, the failure alert is shown with the error text received in the loginResult:

5. Finally, we can clear the LoginField and PasswordField components:

Now the LoginButton On Tap action is configured and we can test the login.

Return to the UI Builder page and press the “Run your app in Test Mode” button. Please note that the API won’t work in the Preview mode.

Wait until the test session is loaded, enter the login and password values of the user and click Login:

If the login was successful, we will receive a message about success:

If an error occurred (for example, an attempt was made with incorrect password), we will receive the following notification:

Run a Query in Backendless

In this section, let’s walk through how to retrieve data from your database by running a query.

Backendless Database uses a SQL-based querying system. This approach allows you to easily query your data and display exactly what you want the user to see.

We will again create a simple page named DataOperations for demonstration.

Change the AppBar title text to Data Operations so it describes the page logic.

This time, firstly, let’s define a new GET API call to retrieve data from the Backendless Person table:

Name this API PersonFind and сonfigure it with corresponding URL: https://api.backendless.com/APP_ID/REST_API_KEY/data/Person (or https://eu-api.backendless.com/APP_ID/REST_API_KEY/data/Person for the EU cluster). Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

Create a variable – whereClause of type String. Set the default value for this variable: objectId IS NOT NULL. This means that if we want to get all records from the table without any conditions, we’ll pass the objectId IS NOT NULL condition to the query parameters. Otherwise, the specified conditions will be passed:

Pass the whereClause variable to the query Parameter named where:

The API call for the Backendless Data Retrieval is ready to be tested:

If the Person table exists in Backendless and has any records, they will be returned in the response. Otherwise, you’ll receive an error message saying that the corresponding table doesn’t exist. Notice that the whereClause value is set to objectId IS NOT NULL.

Please create the Person table in Backendless with the name (String) and age (Int) columns if it doesn’t exist.

As for our API, it is ready and we can move forward to the UI.

For the DataOperations page, create a new Page Variable personRecords of type List. This can be done from the State Management tab of the page component:

Add the Column component with the ConditionField (TextField), FindButton and a PersonList (ListView):

Now let’s configure the PersonList component. This component will present the Person objects retrieved from Backendless.

In the Generate Dynamic Children tab of the PersonList, set the personList variable with maximum amount of records = 100 (Backendless server sets the maximum allowed value for the page size to 100 objects) and value from the personRecords variable, defined previously (we’ll populate this variable with records a little bit later):

Configure the conditional visibility for the PersonList, so it doesn’t appear when there are no records:

Return to the UI Builder and add a Column with 3 Text components (NameText, AgeText and ObjectIdText) and a Divider in the PersonList:

Configure the NameText, AgeText, and ObjectIdText components, so they represent the values from the PersonList items:

Finally, our UI layout will look like this:

As you can see, there are several rows in the PersonList. Each row will correspond to the record from the personRecords variable.

The text from the ConditionField component will be used as the condition for querying data from Backendless when the FindButton is pressed. So let’s finally add the logic to the FindButton On Tap action:

1. Call the PersonFind API and pass the whereClause value from the ConditionField. The result of the request will be set to the findResult variable:

2. After the PersonFind API is called we receive its response. It could be successful (3) or failed (4).

3. If the response is successful, we set the response array to the personRecords variable:

4. If the server returned an error trying to retrieve objects (e.g. the Person table doesn’t exist), the failure alert is shown with the error text received in the findResult:

Now the FindButton On Tap action is configured and we can move to the tests.

Return to the UI Builder page and press the “Run your app in Test Mode” button. Please note that the API won’t work in the Preview mode.

Wait until the test session is loaded, enter (optionally) the condition value and click Find:

If the API call was successful, we will see a list of records, retrieved from Backendless:

If an error occurred (e.g. using invalid condition), we will receive the following notification:

As the data retrieval is ready, we can now move on to object creation.

Create New Object in Backendless

In this section, we’ll take a look at how to save data into our Backendless Database from FlutterFlow.

Create a new page named PersonPage. This page will contain logic to create (and later, edit) a Person object.

Return to the DataOperations page and add a new IconButton named CreatePersonButton:

This button will navigate us to the PersonPage without any parameters – just for creating a new Person.

Also, we’ll clear a personRecords variable here, so the On Tap action has this behavior:

Let’s go back to the PersonPage and create a Page variable – titleText of type String:

Change the AppBar style to the one that contains the back button (so you can return to the previous page) and set the AppBar title to the titleText variable.

For the page, add an On Page Load action and set the titleText variable value to “Create a new Person” (this title can be different in the future, but we’ll return to it in the following sections):

Also, for this page we need two Input Field components (NameField and AgeField) and a SaveButton:

Modify the disabled state option for the Save button (it should be disabled when the NameField or AgeField is not filled):

Now it’s time to add a new POST API to create a new Person. Configure it as shown below:

The URL value is https://api.backendless.com/APP_ID/REST_API_KEY/data/Person (or https://eu-api.backendless.com/APP_ID/REST_API_KEY/data/Person for the EU cluster). Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

Also create two variables – name of type String and age of type Int – that will be passed to the body of the Backendless Saving Single Object API:

Pass these variables to the request body:

Now the PersonSave API is ready to be tested. Go to the Response & Test tab, enter the test name and age values and run the API:

The API works correctly and the created Person object is returned with status 200 as expected.

Now we can move forward to the SaveButton actions. Create a new On Tap action and configure an Action Chain that looks like this:

1. Call the PersonSave API and pass the name and age values from the NameField and AgeField. The result of the request will be set to the saveResult variable:

2. After the SaveAPI is called we receive its response. It could be successful (3) or failed (5).

3. If the response is successful, we’ll see an alert with a success message “Object was successfully saved in Backendless. You will be redirected to the Data Operations page.”:

4. After the alert is closed, we are automatically redirected back to the Data Operations page.

5. If any error occurred while saving a new Person object, an error alert will appear with the error text received in the saveResult. As usual, we will display only the message from the error (as we did in the previous section), not the whole object. This can be done by using the Custom JSON Path name:

6. Finally, we clear the NameField and AgeField components:

Now the SaveButton On Tap action is configured and we can move to the tests.

Return to the UI Builder, select the DataOperations page, and press the “Run your app in Test Mode” button. Please note that the API won’t work in the Preview mode.

Wait until the test session is loaded, enter the condition, review the records matching the criteria, and click the Add New Person button to open the PersonPage:

Fill the Name and Age in the corresponding fields and click Save:

If everything is ok, the success message will appear:

You can now press the Back button to return to the previous DataOperations page. Enter the condition again and you’ll see a newly created record:

Now when we’ve finished with creating a new object in Backendless, we can move forward to editing the existing objects.

Take a look at the next section to learn how to update or delete an object.

Edit an Existing Object in Backendless

Now that we’ve learned out how to create a new object in Backendless, it will be easier to understand process of object editing. We can use the existing PersonPage for this.

Firstly, let’s add the personObject to the PersonPage parameters:

This parameter will be passed from the Data Operations page and will be used to identify an object we want to update or delete.

Return to the DataOperations page, select the PersonList Column and add the On Tap action:

1. Navigate to the PersonPage. Here we’ll pass the selected PersonList Item as the personObject:

2. Clear the personRecords list:

We’re finished with the DataOperations page and now can work directly with the PersonPage.

On the PersonPage, change the On Page Load action to follow the condition:

1. Check if the personObject is set.

2. If the personObject is set on page, set the titleText value to “Edit Person”:

3. Otherwise, set the titleText value to “Create a new Person”:

For the NameField and AgeField set the Initial Values if the personObject is set:

Also add the Icon Button (DeleteButton) on the PersonPage, so finally the page may look like this:

Now let’s add a new PersonUpdate PUT API call. Configure it as shown below:

The URL value is https://api.backendless.com/APP_ID/REST_API_KEY/data/Person/[objectId] (or https://eu-api.backendless.com/APP_ID/REST_API_KEY/data/Person/[objectId] for the EU cluster). Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

Create an objectId variable of type String that will be passed as a dynamic parameter to the Backendless Update Single Object API url. Also, create two variables – name of type String and age of type Int – that will be passed to the body of the request. These are the parameters we would have an ability to change in the Person object:

Pass the name and age variables to the request body:

Now the PersonUpdate API is ready to be tested. Go to the Response & Test tab, enter test name, age, and objectId values (choose any Person object in your database to test with) and run the API:

The API works correctly and the updated Person object is returned with status 200 as expected. Notice that objectId value is the id of the existing object in Backendless Database.

Now we can move forward to the SaveButton actions. Edit the existing On Tap action to look like this:

1. Check if the personObject is set.

2. If the personObject is set, call the PersonUpdate API:

Pass the name and age values from the NameField and AgeField (like we did when creating a Person in the previous section). Also, pass the objectId value taken from the personObject:

3. After the PersonUpdate API is called, we receive its response. It could be successful (4) or failed (5).

4. If the response is successful, we’ll see an alert with a success message “Object was successfully updated in Backendless.”:

5. If any error occurred while updating a Person object, an error alert will appear with the error text received in the updateResult. As usual, we will display only the message from the error (as we did in all previous sections):

6. If the personObject is not set, a new object will be created. The steps 6-10 are the same as the saving steps 1-5 from the previous section – we call the PersonSave API to create a new Person and return to the DataOperations page if the creation was successful.

We’ve finished the object update functionality and now it’s time to implement the object deletion.

Add a new DELETE API call called PersonDelete and configure it:

The URL value is https://api.backendless.com/APP_ID/REST_API_KEY/data/Person/[objectId] (or https://eu-api.backendless.com/APP_ID/REST_API_KEY/data/Perso/[objectId] for the EU cluster). Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

To pass the objectId parameter to the URL, add it in the Variables tab:

Go to the Response & Test tab, enter the objectId of the existing Backendless object, and run the API:

The API works correctly and returns the deletion timestamp with status 200 as expected.

Add the On Tap action for the DeleteButton:

1. Firstly a Confirmation Dialog is shown. User is asked if he/she is really want to delete an object:

2. If the user confirms the object deletion, the PersonDelete API (3) is called.

3. Otherwise, the dialog just closes without any further actions.

4. After the PersonDelete API is called, we receive its response. It could be successful (5) or failed (6).

5. If the response is successful, we’ll see an alert with a success message “Object was deleted from Backendless. You will be redirected to the Data Operations page.”.

6. After the alert is closed, we are automatically redirected back to the Data Operations page.

7. Otherwise, an error alert will appear with the error text received in the saveResult.

Now the SaveButton and DeleteButton On Tap actions are configured and we can move to the tests.

Return to the UI Builder, select the DataOperations page, and press the “Run your app in Test Mode” button. Please note that the API won’t work in the Preview mode.

Retrieve the records from Backendless and click on any item:

You will be redirected to the PersonPage. Edit the Person age

and click Save. If everything is fine, you’ll see a corresponding message:

Now click the Delete Button:

and confirm the object deletion.

You’ll receive a message after the object is deleted:

And will be redirected to the Data Operations page.

Sending Email with Template

In the final part of this article, let’s look at sending emails with templates.

Firstly, open Backendless Console and configure the Email Settings to enable the Email Delivery API. Then create a simple Email Template to test the functionality.

Now we can switch back to FlutterFlow.

Create a new Page named EmailTemplate, change the AppBar title and add a column with two TextField components (TemplateNameField and EmailsField) and a Button (SendButton):

So the page layout should look like:

The email addresses can be filled in the corresponding field separated by comma.

Let’s add a new API to send emails and name it SendEmailWithTemplate:

The URL value is https://api.backendless.com/APP_ID/REST_API_KEY/emailtemplate/send (or https://eu-api.backendless.com/APP_ID/REST_API_KEY/emailtemplate/send for the EU cluster). Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

Also let’s create two variables – templateName of type String and addresses of type List that will be passed to the body of the Send Emails with Templates API:

Pass these variables to the request body:

As you might have noticed, the addresses parameter is a List of Strings and the value from the EmailsField is a type of String, so we need the ability to parse the string value to the list.

Let’s create a simple custom code split() function for this:

The split() function takes a String variable named input as a parameter and returns a list, created from this input parameter separated by commas.

Now we can configure the On Tap action for the SendButton.

Add the Button disabled options:

So the button is disabled if any of the input fields are empty.

Now add the On Tap action with the actions chain:

1. Сall the SendEmailWithTemplate API and pass the templateName and addresses values:

The result of the request will be set to the emailResult variable.

As you can see, the addresses parameter value is the value from the EmailsField, split to the array using the split function:

2. After the SendEmailWithTemplate API is called, we receive its response. It could be successful (3) or failed (5).

3. If the response is successful, an alert with an “Email was sent successfully. Please check your email box.” message is shown:

4. After the successful alert is closed both text fields are cleared:

5. Otherwise, the failure alert is shown with the error text received in the emailResult:

The SendButton On Tap action is configured and we can now test how Sending Email with Template works.

Return to the UI Builder page and press the “Run your app in Test Mode” button. Wait until the test session is loaded, enter a template name an email (or emails separated by commas) and click Send:

If the email was sent successfully, we will receive a message about success:

And the email appears in your email inbox:

Otherwise, if the error occurred (e.g. user entered incorrect template name), the error message will appear:

Conclusion

You should now have a basic handle on how to interact with a Backendless backend via FlutterFlow, but this is just the tip of the iceberg. Adding a Backendless backend and database to a FlutterFlow mobile app gives your app incredible flexibility.

With FlutterFlow’s easy frontend interface and Backendless’ many pre-built APIs, your possibilities become endless.

In addition to managing users and data, Backendless gives you access to Cloud Code timers, event handlers, and whatever Codeless logic you can think of on the backend.

Your app is virtually limitless.

Thanks for reading and Happy Codeless Coding!

This article was first published on backendless.com on March 13, 2023.

Join the Free Database Training Course From Backendless

Backendless — Fri, 24 Feb 2023 15:42:51 +0000

Building the perfect database doesn’t have to take months or years. Backendless Database is a robust, powerful, and infinitely scalable database solution perfect for coders and no-coders alike.

In our newest ongoing video course, you will learn all of the ins and outs of our incredibly robust real-time database.

Backendless founder Mark Piller will guide you through all of the powerful functionality of our most innovative feature: Backendless Database. New videos release each week, expanding on new topics as well as addressing your questions and feedback.

Looking for an explanation of a specific element of Backendless Database? Leave a comment below. Be sure to bookmark this post as we will be updating it weekly as new lessons are released.

Whether you’re an experienced coder looking to speed up development dramatically or a no-coder looking for a truly scalable database solution, this course can help you. Watch the intro video above for more information and start the course for free today!

This course is part of the Backendless Learning Path that ends with the opportunity to become a Certified Backendless Engineer.

1. Data Tables, Columns and Records

In this video, we explain the core concepts of a backend database. We go over the basic elements of a database, such as tables, columns, and records. We describe how tables are similar to spreadsheets and how they are used to store data of a specific kind. We also explain that when a table is created in Backendless, it automatically provides an API for adding, retrieving, modifying, and deleting records. Finally, we also briefly introduce data types that we will go over in more detail in future videos.

2. About Data Types

In this video, we discuss the importance of data types in building logic for your application. We explain that data types directly relate to columns and records, and that they are important for both frontend and backend development. We introduce some basic data types, such as text and numbers, and explain the operations that they support. We also explain how to identify the data types for the data that you’re working with, which is done early on in the design stage of your application. Finally, we show how to create a table in Backendless Database for the properties of an entity.

3. Adding Data Records

In this video, we will be discussing different ways to add data to your Backendless Database. One way is through the Management Console, which we briefly covered in a previous video. The other way is by using the API. We will go over the mechanics of what it means to get data into the Backendless Database and how it relates to the database schema. We will also go over how to manually enter data into the database through the Management Console and how to use the API to add data to the database through a REST endpoint URL. We will also be looking at how to use the API with external systems such as UI development systems and how to format the data in JSON format.

4. String and Text Data Types

In this video, we’ll be discussing the string and text data types. Both string and text are data types that can be assigned to columns in your database tables, and they designate that those columns can store string-based information. The operations that are applicable to text include concatenation, searching within text, and checking if a substring or character is present. We’ll also go over some of the configuration parameters and demonstrate how they come into play when storing or updating data in the database. Additionally, we’ll show the difference between using a string and text data type and the effects it has on search speed.

5. Multiple Choice Data Type

In this video, we will be reviewing the multiple choice data type. This data type is special in that it internally uses the string data type, but it provides extra value by making it easier for you to make selections for values and visualize them accordingly in Backendless Console. We will review the configuration options for the multiple choice data type, such as maximum length, default value, and constraints. We will also show how to rearrange values and how to enable or disable colors. Additionally, we will demonstrate how the “use validation” option works and how it can be used to restrict acceptable values for a particular column. Lastly, we will show how to use the values/labels option and how to enable multiple selection for a column.

6. Numeric Data Types

In this video, we’ll be discussing the numeric data types. We’ll take a look at the core numeric data types: int, double, and decimal, and the ranges they support. Int is for whole numbers and supports a large range of data, double is a floating point with double precision and is not recommended for scientific data due to precision, and decimal has a fixed precision and scale. We’ll also take a look at the shortcut, money, which is a decimal with a precision of 10 and scale of 2, making it convenient to represent a fraction of currency. We’ll also show how to define and configure these data types in Backendless Console and demonstrate how to store data in the Data Browser.

7. Auto Number Data Type

In this video, we’re diving into a powerful data type called Auto Number (also known as Auto Increment). This type of data allows for values in a specific column to be automatically assigned and incremented as new records are added to the table. It’s a simple but effective concept, especially when you need to assign unique values that are easy to understand. We demonstrate how to set up an Auto Number column and highlight some key considerations to keep in mind when configuring this type of column. Additionally, we show you how to control the initial value of the column and how the database will adjust it to the next available value if you attempt to go below a previously established threshold.

8. DateTime Data Type

In this video, we will be discussing the datetime data type. We will demonstrate how to create a column of this data type and the data formats that it supports. We will also show you the kind of things that you can do to retrieve data using this data type. We will start with configuring a column, and as an example, we will take a look at the date of birth column. We will also demonstrate some examples of how to query the database with the syntax that we support. Additionally, we will show you how to store data with the datetime information and how the database automatically converts the data to the client’s time zone.

9. Boolean Data Type

In this video, we discuss the Boolean data type in the Backendless Database. Boolean values are traditionally either true or false and they may indicate whether something happened or not, whether there is a certain quality present or not, and so on. In Backendless, there is a third value that a Boolean type may contain and it is null. We will discuss when and why you may want to use this third option. Finally, we also show how to create a Boolean column in Backendless and the different options available for visualization.

10. File Reference Data Type

In this video, we will be discussing the file reference data type. The file reference data type is designed to provide the ability for your data records to reference a file that is stored somewhere, whether that be in the Backendless file storage system or anywhere on the web with a URL. We recommend using the file storage system for any use cases outside of storing JSON files and manipulating the JSON data inside of them. Backendless provides a file system that is a powerful system where you can store files in directories, upload, download, move them, delete files, and get directory listings. In this video, we’ll show how to create a reference to a file in the file storage system and how the data is returned when querying the database.

11. JSON Data Type

In this video, we’re going to be discussing the JSON data type. The database itself is a relational system that provides support for well-structured data where you can describe pretty much any entity by identifying its properties and declaring those properties as columns and the corresponding data tables as a result. However, there are some cases when any given entity may need to have additional description that does not follow a specific structure, and that’s where JSON comes in. We’ll be discussing some use cases and examples of when it makes sense to start using JSON in Backendless. We’ll also demonstrate how to create a JSON column and work with JSON documents in Backendless Console.

12. Money Data Type

In this video, we talk about the money data type available in Backendless Console. Money is a shortcut for the decimal type that is already pre-configured to express currency values with precision 10 and scale 2. That said, additional formatting may be necessary when displaying currency values in the UI, even though the actual numeric value might return from the API without a trailing zero. We’ll be discussing different ways of formatting data in an upcoming video dedicated to UI Builder – stay tuned!

13. Color Data Type

In this video, we discuss the Color data type in Backendless Database. With this data type, you can easily store and display colors for your web and mobile applications with Backendless. The Color data type is a specialized string shortcut that returns a hexadecimal value, making it simple to select and create the exact color you need. We’ll show you how to use the intuitive color selector to quickly assign properties to records or use default values if desired. We’ll also discuss how you’ll be able to use our upcoming Visualization feature to easily see all of your data properties at once.

14. Data Import and API Setup

In this video, we dive into the world of Backendless Database APIs. To start learning, we’ll need some sample data to work with. We’ve prepared a sample schema in the sample database data, which can be downloaded using the link below. In this tutorial, we’ll walk you through the process of importing the sample data into your Backendless database and give you a sneak peek of the actual data import process. By the end of this video, you’ll have a better understanding of how to import data into Backendless and how to visualize your data using the schema visual modeler feature.

15. What is API?

In this video, we are taking you through the basics of Backendless Database APIs. Before diving into the actual API lectures, we want to make sure you have a solid understanding of what APIs are and how they are structured. This will make it easier for you to understand our documentation and make you a better engineer in the process. This video will show you how to run a basic API request and take a look at its structure using REST Console and dev tools. We will also cover the elements of an API request including HTTP method, endpoint, headers, and body. By the end of this video, you will have a good understanding of the structure of API requests and responses.

16. Basic Data Retrieval API

In this video, we’ll be focusing strictly on the basics of data retrieval from the Backendless Database. We’ll be using the product table for demonstration purposes and will go through the REST Console to retrieve data. We’ll also show you how to retrieve the data using the API in an application. We’ll switch to the UI Builder where we’ll create a new page using the template for basic data retrieval. The logic for data retrieval sits on the actual page and we’ll briefly go over the on page enter handler. Finally, we’ll preview the page and see how the data is rendered in the UI.

17. Data Retrieval With Sorting

In this video, we will be discussing data sorting. Data sorting is a simple process that sorts data either in ascending or descending order, regardless of whether it’s numeric, alphanumeric, or alphabetic. The data sorting process is made easy in Backendless with the data retrieval API. We’ll also show you how to sort data from the REST console perspective and in UI Builder, the codeless alternative. The process involves identifying the columns, selecting the property to sort by, and modifying the URL with the sort by parameter. We’ll demonstrate how to sort by multiple columns and how to sort in descending order.

18. Requesting Specific Properties

In this video, we dive into the data retrieval API and explore how to request specific properties when making database queries. We demonstrate the process using both the REST Console and UI Builder, showing how to restrict the data returned to optimize performance and ensure security. We also explain the structure of the REST API and how to specify which properties you want to retrieve. Finally, we cover how this applies to relations and how it works in UI Builder, where you can instruct the backend to return only specific properties for every single object.

19. Excluding Specific Properties

In this video, we learn how to specify which properties should be excluded in a request to Backendless Database. Whether you choose to use inclusion or exclusion, it all depends on your use case. We’ll be using UI Builder to demonstrate the process, which will also work for regular APIs with our SDKs. We’ll be exploring the exclude properties connector. This connector expects a list of properties that should not be returned to the client. And to answer the burning question, what happens if you specify a property in both the property list and the exclude properties list? We’ll run the page and find out.

20. About the Where Clause

In this video, we review the power of the “where clause” in Backendless Database. We’ll discuss the structure of the where clause, starting with the most basic form of identifying a column name, operator, and value. We then cover how the where clause can get more complex by combining conditions for multiple columns using “and” and “or” logical operators. Finally, we also cover how to test and run the where clause in Backendless Console and through REST API.

21. Where Clause Operators and Data Types

In this video, we dive into the available operators for various data types in the where clause structure. From numeric data types like integers and decimals, to text data types like string and text, to datetime data types, and Boolean data types, we cover the different operators you can use to build conditions in your queries. We’ll also show specific examples of how these operators work in practice using Backendless Console.

22. Database Functions

In this video, we go through the powerful mechanism of database functions. We explain how functions can be used to transform data coming from the database and make conditions more precise, elegant, and powerful. We start with a demonstration of basic scenarios before going through a list of all the available functions in Backendless. The video covers two main uses of database functions: data transformation and use in the “where” clause. We also categorize the functions in Backendless into three categories: date-time functions, string functions, and aggregate functions.

23. Data Paging

In this video, we dive into the concept of data paging, an extremely important aspect of backend systems that has direct impact on data retrieval APIs. Data paging allows for the retrieval of larger sets of data in chunks or pages and can be controlled through the use of parameters in the data retrieval API. This technique is implemented for performance reasons, as retrieving all data at once can negatively impact both the user experience and the performance of the application.

24. Retrieve an Object by ID

In this video, we review an API that allows for the retrieval of a specific object by its object ID. The API has additional parameters that can be specified and we walk you through them in detail. We also demonstrate how this functionality can be useful in a product page scenario, where a product is identified by its object ID and displayed on a screen. We take you through the backend section to show what objects are in the data table and how they can be retrieved.

25. Object Update API

In this video, we discuss the Object Update API that enables the modification of one or more properties of an object in the database. It is different from storing a new object because the object is already in the database, with an object ID assigned to it. In Backendless Console, we demonstrate how modifications done in the data browser do not use the API. We then demonstrate how to use the API to update a record and how it can be used with any of our SDKs.

26. Object Delete API

In this video, we talk about the Object Delete API, which is an API designed to delete a specific object in the database. We identify that object with its object ID. Every single object stored in the database has its own unique ID, and that’s the ID we use to identify a specific object that should be deleted. We demonstrate how to use this API with the REST API provided by Backendless, and we also do a demo using Codeless, but it will equally apply to the API available in all of our SDKs.

27. Bulk Create API

In this video, we learn about the Bulk Create API, which allows users to save multiple objects in the database with a single API call. As an example, we’ll explore how this API can benefit users who are working on a to-do app where they need to save multiple tasks. By using the Bulk Create API, fewer API calls to the database are needed which can result in a better user experience.

28. Bulk Delete API

In this video, we will talk about the Bulk Delete API that allows you to delete multiple objects from a table. We will demonstrate how it works using the REST Console and then show an example in UI Builder. In the UI Builder example, we will show how you can select multiple records with checkboxes and delete them at once. We will also discuss the different types of where clauses you can use, including how to use the “in” operator to specify individual object IDs to be deleted.

29. Bulk Update API

In this video, we will be discussing the Bulk Update API, which allows you to update multiple objects with a single API call. You can update a single or multiple properties, and the objects to be updated are identified with the where clause identical to the way it works with the Bulk Delete API. We will be going over some animations with slides to demonstrate the mechanics of how bulk update works. Then, we’ll review that API in REST Console, and finally, there will be a demo with UI Builder and Codeless bulk update.

30. Object Upsert API

In this video, we will be discussing the Upsert API, a special API that allows you to create new objects in the database and update existing ones using the same method. The convenience of this API is huge, and there are many practical applications where you might need to use it. If your system imports data from an external source, for example, you may need to write extra logic to determine if an item already exists in the database before you can update it. With Upsert, this logic is built into the API, so you don’t have to worry about it. Object ID is a required property for both create and update, and the API uses it to determine if the object needs to be created or updated.

Conclusion

This course is the second video in the ideal Backendless learning path. Between the video courses and Backendless Missions, you will have a strong foundation that will allow you to build virtually any type of application with Backendless.

Codeless Fundamentals
Backendless Database Training Course <- You are here
Backendless User Management
UI Builder Intro
UI Builder Masterclass

Complete the path to have the opportunity to become a Backendless Certified Engineer.

Not a Backendless developer yet? Get started for free today!

Redis: What It Is, What It Does, and Why You Should Care

Backendless — Thu, 12 Jan 2023 15:20:38 +0000

Redis is an open source in-memory data store that can be used as a database, cache, or message broker. It’s often used for caching web pages and reducing the load on servers.

Redis also has some features that make it attractive for use as a database, such as support for transactions and publish/subscribe messaging. However, it doesn’t have all the features of a traditional database like MySQL or MongoDB.

In this blog post, we’ll take a look at what Redis is, what it does, and why you might want to consider using it in your next project.

We’ll also take a look at some of the benefits and drawbacks of using Redis for caching.

What is Redis?

Redis is an open source in-memory data store that works really well as a cache or message broker, but it can also be used as a database when you don’t need all the features of a traditional database. It offers excellent performance, with the ability to quickly read and write data to memory. Additionally, Redis supports atomic operations, making it ideal for caching scenarios where you need fast access time.

In-memory database

An in-memory database is a type of database that stores data entirely in main memory (RAM) rather than on disk. In-memory databases are designed to provide fast access to data by leveraging the high speed of main memory, which is several orders of magnitude faster than disk storage.

In-memory databases are commonly used in applications that require fast access to large amounts of data, such as real-time analytics, online gaming, e-commerce, and social media. They are also used in applications that require high performance and scalability, as in-memory databases can handle high volumes of data and transactions without sacrificing performance.

One of the main drawbacks of in-memory databases is that they are more sensitive to data loss in the event of a crash or shutdown, as the data is stored entirely in memory and is not persisted to disk. To address this issue, many in-memory databases, including Redis, provide features such as persistence and replication, which allow data to be saved to disk and replicated across multiple servers to ensure data durability and availability.

Redis persistence

Redis persistence is a feature of the Redis database that allows data to be saved to disk and restored in the event of a crash or shutdown. By default, Redis stores data in memory, which means that it is lost when the Redis server is shut down or restarted. Redis persistence enables data to be saved to disk and restored when the Redis server starts up again, ensuring that data is not lost in the event of a crash or shutdown.

Redis persistence can be configured in several ways, depending on the needs of the application. The simplest form of persistence is snapshotting, which involves periodically saving the entire Redis dataset to disk. This approach is fast and efficient, but it can result in data loss if the Redis server crashes between snapshots.

(Image source: redis.com)

Another form of persistence is append-only file (AOF) persistence, which involves saving each write operation to a log file on disk. This approach provides better durability than snapshotting, as it allows the Redis server to recreate the dataset by replaying the log file in the event of a crash. However, it can be slower and more resource-intensive than snapshotting.

Overall, Redis persistence is a valuable feature that allows data to be saved to disk and restored in the event of a crash or shutdown, ensuring data durability and availability.

What is Redis used for?

Redis is often used for caching web pages, reducing load on servers and improving page loading times. It can also be used as a message broker to facilitate communication between different parts of an application. Additionally, Redis supports transactions, making it possible to execute multiple operations atomically.

Let’s look at some specific Redis use cases:

Real-time analytics: Applications can use Redis to store and process large amounts of data in real-time, allowing organizations to quickly analyze and visualize data to make business decisions.
Online gaming: Gaming software can use Redis to store and manage game state, such as player profiles, game scores, and leaderboards, which allows for fast and seamless gameplay.
E-commerce: Ecommerce apps can use Redis to store and manage data related to online shopping, such as product catalogs, user profiles, and shopping cart contents, which enables fast and efficient shopping experiences for users.
Social media: Social apps can use Redis to store and manage data related to social media interactions, such as user profiles, friend lists, and news feeds, which allows for fast and smooth user experiences.

What are key-value pairs?

In Redis, a key-value pair is a data structure that consists of a unique key, which is used to identify the data, and a value, which is the data itself. Key-value pairs are the most basic data structure in Redis, and they are used to store and manage data in the database.

Redis supports a wide range of data types for keys and values, including strings, hashes, lists, sets, and sorted sets. This allows developers to store and manipulate a variety of data types in Redis, such as text, numbers, arrays, and complex data structures.

Redis provides a rich set of commands for working with key-value pairs, such as SET, GET, and DEL for strings, HSET, HGET, and HDEL for hashes, and LPUSH, LGET, and LREM for lists. These commands enable developers to store, retrieve, and manipulate data in Redis efficiently and easily.

Rich data structures

Data structures in Redis are collections of data that are organized and managed in a specific way to support efficient operations. For example, the string data type in Redis is a sequence of bytes that can be used to store and manipulate text or binary data. The hash data type, on the other hand, is a mapping of field-value pairs that can be used to store and manipulate complex data structures.

Each data structure in Redis has its own unique set of operations that can be performed on it, such as GET, SET, and DELETE for strings, HGET, HSET, and HDEL for hashes, and LPUSH, LPOP, and LRANGE for lists. These operations enable developers to efficiently store, retrieve, and manipulate data in Redis.

Overall, data structures in Redis are an important aspect of the framework, as they provide the underlying foundation for efficient data management and manipulation.

Chat and messaging applications

To support chat and messaging applications, Redis can be used to store and manage data related to conversations, users, and messages. For example, Redis can be used to store information about individual conversations, such as the participants and the latest messages. It can also be used to store information about individual users, such as their profile details and their list of contacts. Finally, Redis can be used to store the actual messages themselves, along with metadata such as the sender, recipient, and timestamp.

In addition to storing data, Redis can also be used to manage messaging operations, such as delivering messages to recipients, broadcasting messages to multiple recipients, and storing messages for offline users. These capabilities make Redis a powerful tool for building chat and messaging applications that are fast, scalable, and reliable.

Session store

Session store is a mechanism for storing user session data in a web application. In a Redis session store, session data is stored in a Redis database, which is a fast, in-memory data structure store that can be used as a cache, database, and message broker.

In a Redis session store, session data is stored in a Redis database as key-value pairs, where the key is a unique identifier for the session and the value is the session data itself, which may include information such as the user’s login status, preferences, and shopping cart contents.

The benefits of using a Redis session store include improved performance and scalability, as Redis can store and retrieve session data quickly and efficiently, even when dealing with large amounts of data. Additionally, Redis allows session data to be shared across multiple servers, which can be useful in a load-balanced environment.

What are the benefits of Redis?

One of the main advantages of using Redis for caching is its fast read and write speeds. Redis can handle millions of operations per second, which allows it to serve webpages faster than traditional databases. It also offers excellent support for transactions, allowing applications to perform multiple operations atomically. Additionally, Redis supports the use of pub/sub channels for fast data sharing between applications.

Redis is also highly scalable and can be deployed across multiple machines for high availability. This makes it ideal for distributed systems that need to quickly process large amounts of data.

For example, Redis can be used to store session information in a distributed system and provide quick access to that data across multiple servers. This makes Redis incredibly powerful gaming applications because it can quickly and efficiently share data across multiple nodes in near real time.

In addition to excellent performance, another advantage of Redis is that it offers a number of features that are not available in traditional databases. These include pub/sub, which allows you to publish messages and subscribe to them, as well as transactions and Lua scripting. These features can be used to build powerful applications that are not possible with traditional databases.

What is Lua scripting?

Lua scripting is a technique for writing and executing scripts in the Lua programming language within a host application. Lua is a lightweight, versatile, and embeddable scripting language that is widely used for writing scripts that can be run within other applications.

In the context of Redis, Lua scripting allows developers to write and execute scripts that manipulate data stored in a Redis database. Redis provides a built-in scripting engine that supports Lua, which allows developers to write scripts that can be executed within the Redis server.

One of the main advantages of Lua scripting in Redis is that it allows developers to write complex operations that can be executed atomically and in a single step. This means that the scripts can manipulate data in Redis without interference from other operations, ensuring data consistency and integrity.

Overall, Lua scripting is a powerful and flexible tool that can be used within Redis to write and execute complex operations on data stored in the database.

What are the drawbacks of using Redis?

Like any technology, Redis has some drawbacks that should be considered when deciding whether to use it in a particular application.

One of the main drawbacks of Redis is that it stores data entirely in memory, which means that it can be sensitive to data loss in the event of a crash or shutdown. To address this issue, Redis provides features such as persistence and replication, which allow data to be saved to disk and replicated across multiple servers. However, these features can add complexity and overhead, which may not be suitable for all applications.

Another drawback of Redis is that it is a single-threaded system, which means that it can only process one command at a time. This can limit the performance and scalability of Redis in applications that require high concurrency and parallelism. To address this issue, Redis provides clustering and sharding features that allow data to be distributed across multiple servers, but these features can be complex to set up and manage.

Closing

Overall, Redis is an excellent tool for caching web pages and reducing server load, but it also has some features that can be used to create powerful distributed applications. It’s fast, scalable, and supports advanced features like Pub/Sub and Lua scripting. However, it does have some drawbacks such as the need for additional memory and the lack of ACID compliance or support for joins. Take all this into consideration before using Redis in your project.

Alternately, Backendless offers Hive. Built on Redis, Hive provides the benefits of Redis with the vast feature set of Backendless. In addition to the advantages of Redis, Hive offers all of the capabilities of a traditional SQL database by integrating with Backendless Database. With Backendless, you are able to work with data in a wide variety of ways to achieve your application’s needs.

Try Backendless Free For 30 Days

Build an app on Redis with Backendless’ Hive. Get started with a free 30-day trial.

Start Free

Frequently Asked Questions

How does Redis compare to other NoSQL database systems?

Redis is a type of NoSQL database, which stands for “not only SQL” and refers to a class of databases that do not use the traditional SQL relational model.

Compared to other NoSQL databases, Redis has several unique characteristics that make it well-suited for certain applications. One of the main advantages of Redis is its in-memory storage, which allows it to provide fast access to data and high performance. This makes Redis well-suited for applications that require fast access to large amounts of data, such as real-time analytics, online gaming, and e-commerce.

Another advantage of Redis is its support for a wide range of data structures, including strings, hashes, lists, sets, and sorted sets. This allows Redis to store and manipulate a variety of data types, making it a versatile and flexible tool for data management.

This article first appeared on Backendless.com on December 9, 2022.

Custom ReactJS UI Components in Backendless UI Builder

Backendless — Tue, 02 Aug 2022 19:13:17 +0000

Custom UI Components are the latest innovation to introduced in UI Builder. This new release offers you the full flexibility of code on the frontend, fully integrated into your Codeless application. Read all about it here!

Hello, I’m Vladimir, team lead of the Backendless JS team and architect of UI Builder. In this article, I’m so excited to introduce you to a brand new feature in UI Builder called Custom UI Components.

Looking at our customers’ and our consulting teams‘ experience in building applications using UI Builder, we can see that many of them anyway face the same limitation: injecting third-party libraries into the UI Builder ecosystem.

Today I’m going to tell you about this revolutionary new part of the UI Builder. At the end of the article, you should have a clear understanding of the basic principles we’ve applied to create this powerful new feature and you will be able to easily build your own custom components.

First of all, this feature requires writing JavaScript code and specifically code using the ReactJS library. To put this new feature to best use, you’ll want to have at least basic knowledge of that programming language and library.

Although it’s not a problem if you are a low-code/no-code developer and you haven’t written any code before, in this article we are going to use simple constructions so I’m a hundred percent sure it won’t be an issue for you.

However, if you would like to know more about ReactJS, you can start your journey from the following article.

1. Set Up Backendless

2. UI Components Location

3. Creating New Custom UI Component

4. Custom Component Logic

5. Styling UI Components

6. Component Properties

7. Component Property With Data Binding

8. Component Event Handlers

9. Component Actions

10. Use Third-Party Libraries

11. Marketplace

12. Closing

Set Up Backendless

Before we get going, let’s make sure you have a Backendless account. If you don’t have one already, just register for a new free account here and create a new Backendless App.

UI Components Location

Next, let’s take a look at the basic structure of an application built with UI Builder, where the UI Components are stored, and how the app imports and uses them.

Each Backendless application can contain an unlimited number of UI Containers, and each UI Container can contain as many components as you need.

This means the UI Components are stored on the UI Container level. You can change any UI Component and not worry that changes may affect other UI Containers.

Let’s consider the following diagram of one UI Container instance:

As you can see, there are four UI Components and four UI Pages. You can see that a particular UI Component (B) can be used in different UI Pages, or the component (D) may not be used on any UI Page yet.

At the same time, a page may use numerous UI Components. Hopefully this clarifies the main vision of the UI Components’ role in a UI Container.

Creating New Custom UI Component

Alright, let’s move to more interesting things and create our first UI Component. To do so, go to the UI Builder designer and open the “Components” section.

On the following screen, you can see all your Custom and Reusable components. We’ll talk about Reusable Components in another article because this is no less important than the Custom Components feature.

In order to start developing your first UI Component, click on the “New Custom Component” button to create a new one.

Once you’re done with the previous step, it immediately opens the component editor where we will actually develop the component.

On the screenshot above, you can see the UI Component editor which is divided into 3 sections:

On the left-hand side, you can see the component files; you can manage your source files here; uploading files using drag-and-drop is supported as well
In the middle section, there are four sub-sections to edit the component “properties/events/actions” and the “TEXT” section for editing a selected file content.
And finally, the last section is a preview of the component “properties/events/actions”

A little bit later, we will touch on each section in more detail, but for now, let’s create a simple component to see how it works on a UI Page.

Select the “src/index.js” and you will see the basic code of the UI Component. At this point, the component doesn’t render anything and if you place the component on a UI Page, it won’t make any difference.

As you recall, I wrote at the beginning of the article that our UI Builder is based on the ReactJS library, so we actually develop a React component and we use everything we can use in a React application.

This means we can use Hooks, create Higher-Order Components, and of course, we are allowed to create components using JSX syntax.

Let’s render a native Input HTML Element to see what it will look like in the UI Builder app.

Copy/paste the following code in the editor and then save the component by clicking on the green “SAVE” button.

export default function MyCustomComponent() {

 return (
   <input type="text" placeholder="input your value here..."/>
 )
}

Once it’s saved, go to the User Interface screen and add the UI Component onto the landing page. You can find all your Custom Components in the components toolbar on the right side.

Now, let’s open the page in preview mode to how it looks.

Congratulations, you made your first custom UI component! Although it doesn’t look pretty at the moment, the main goal was to inject your own component into the UI Builder environment and we did it perfectly. It was easy, wasn’t it?

Custom Component Logic

Next, we are going to expand upon our component by adding its own state and behavior.

Let’s create a greeting form that will show an alert with a greeting message on a button click. Go back to the component editor and select the “src/index.js” file for editing, replace it with the following code, then save the component.

import { useState } from 'react'

export default function MyCustomComponent() {
 const \[name, setName\] = useState('')

 const sayHi = () => {
   alert(\`Hello ${name}\`)
 }

 return ( 
   <div>
     <h4>Greeting!</h4>

     <input 
       value={ name } 
       placeholder="input your name here..."
       onChange={ e => setName(e.target.value) }
     />

     <button onClick={ sayHi }>Say Hi</button>
   </div>
 )
}

We gave the component its own state by using the useState hook from the React library to create a controlled input component and use the value in the “sayHi” handler. That’s it, let’s switch to the preview and refresh the browser page.

Type any text into the input and click on the “Say Hi” button. You should see an alert as it’s shown on the screenshot below:

Amazing, right? In a few minutes, we have created a new custom component, typed a couple of lines of code and boom, it works like a charm.

Can you imagine how many cases it can cover and how many problems it can solve? This very powerful feature, wouldn’t you say?

Styling UI Components

The default UI Containers have their own HTML element and can be decorated to look more attractive. That’s why we included the ability to add styles for every single component. You can use CSS but LESS is supported as well.

On top of that, each UI Container has a Theme and App Extensions where styles can be made available globally for all pages and UI Components, so you can decorate your component according to the applied theme by using LESS variables.

Back to our project, let’s customize our greeting component from the previous part.

Open the component editor and select the “src/index.js” file for editing and add a “greeting-form” class name to the root div to create a CSS scope for the component.

export default function MyCustomComponent() {
  …


  return ( 
    <div className="greeting-form">
    …

    </div>
  )
}

Next, open the “styles/index.less” file for editing after the following content:

// you can use LESS variables from the current Theme and app extensions of the UI-Container

Add the following code:

.greeting-form {
  input {
    width: 360px;
    background: #fff;
    color: #a3a3a3;
    font: inherit;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0 , .1);
    border: 1px solid rgba(51, 51, 51, 0.06);
    outline: 0;
    padding: 22px 18px;
    padding-right: 100px;
  }

  button {
    display: inline-block;
    font: inherit;
    border: 0;
    outline: 0;
    padding: 0;
    transition: all 200ms ease-in;
    cursor: pointer;
    margin-left: -96px;
    background: #7f8ff4;
    color: #fff;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .1);
    border-radius: 2px;
    padding: 12px 36px;

    &:hover {
      background: #5e6fd8;
    }

    &:active {
      background: #5e6fd8;
      box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, .2);
    }
  }
}

Save it and check this out on the preview page, you will be definitely surprised!

Component Properties

Now it’s time to start increasing the functionality of the component. The first one I am going to teach you is to add a couple of properties to the component and show you how you can use it with Codeless.

Let’s add a new property for configuring the “placeholder” value of the input inside our component because frequently your component will be used on different pages/places and you will need to configure each instance of the component.

For that, open the component editor and open the “Properties” tab and click on the “Add New” button and fill inputs as it’s shown on the screenshot below.

Let’s examine each filled input in more detail:

Reference In Code: we typed “placeholder” to define the property in the component definition to be able to use the property in the component code
Setting Label: we typed “Placeholder” to display the setting in the component settings toolbar; if you take a look on the 3rd panel, you can see what it will look like
Value Type: in our case, it’s “text”; in the select, you can see the different types available now with more added as they become available
Default Value: this is a default value of the property which each use of the component will have

Now open the “src/index.js” file and let’s apply the property to the Input component.

export default function MyCustomComponent({ component }) {
  …

  return ( 
    <div className="greeting-form">
      …

      <input 
        …
          placeholder={ component.placeholder }
        …
      />

      …
    </div>
  )
}

As you can see, the interface is quite simple. We just define the “component” argument and then use a particular property where we need it.

Save the component and open the UI section to see how the settings for our component were changed. There should be a new property “Placeholder” with default value.

If you open the current page in the preview you can see the input has the new “type your name…” instead of “input your name here…”

You can go to the UI and play with the property to see how it’s changed.

Let’s move forward and enable LogicHandler to control the value using Codeless. Just specify the “Logic Handler ID” value and optionally set the “Handler Label” value.

As a result, you can see it in the handlers preview.

After saving these changes, go to the UI and select the component. You will see that it’s possible to add Logic for the component.

Let’s add logic for the component and return a simple message. Of course, the logic can get much more complicated, but for this example, it will be quite enough to return plain text.

As you can see it displays the provided message instead of the default one:

Component Property With Data Binding

Ok, we have learned how to specify new properties for a Custom Component, however, there is one more important option, this is Data Binding.

You have probably already used data binding when developing your application. Data binding is an extremely useful tool in built-in components, so naturally we implemented this mechanism for the Custom Components as well.

You can learn more about data binding by watching our videos here and here.

Let’s create a new property to control the Input value and bind the property to the DataModel to retranslate the value in another built-in Input component.

Modify the “src/index.js” code with the following code:

export default function MyCustomComponent({ component }) {
  const onInputChange = e => {
    component.value = e.target.value
  }

  const sayHi = () => {
    alert(\`Hello ${component.value}\`)
  }

  return ( 
    <div className="greeting-form">
      <h4>Greeting!</h4>

      <input 
        value={ component.value } 
        placeholder={ component.placeholder }
        onChange={ onInputChange }
      />

      <button onClick={ sayHi }>Say Hi</button>
    </div>
  )
}

Notice that we do not need the useState hook anymore. Save the component and make sure it still works in preview mode.

Now add a built-in Input component to the page.

Open logic and create a data binding between these two input components using the PageData model:

Open the page view preview and play with both inputs, you will see they both are changing synchronously.

Component Event Handlers

Sometimes your component may fire an event and you need to add Codeless logic for the event of the component instance. In this section, I am going to show you how to specify event handlers and use them on a page.

Let’s consider a case where we need to know when a user clicked on the “Say Hi” button and what was typed in the input. For that, let’s register a new Event Handler with one context block “Name”.

Then, open the “src/index.js” file and modify the current code.

export default function MyCustomComponent({ component, eventHandlers }) {
  …

  const sayHi = () => {
    eventHandlers.onSayHiClick({ name: component.value })
  }

  return ( 
    <div className="greeting-form">
      …
    </div>
  )
}

Save the component and add logic for the event of component instance.

Now if you refresh your preview, type any value into the input and click on the button you will the following message:

Component Actions

Custom component actions can be helpful when you need to affect the component outside of the component.

Let’s say you want to clear the input value by clicking on the built-in Button component using a Codeless block. For that, there is the “Actions” editor section which allows us to register actions for Custom Components.

Just add a new action, and you can see how the block will look in the actions preview panel.

“Action ID” is a required field and we will use it in the component code to define what exactly should happen when we run the action. So, open the “src/index.js” file and modify the current code.

export default function MyCustomComponent({ component, eventHandlers }) {
  component.resetValue = () => {
    component.value = ''
  }

  …

Now that you’ve added the code:

Save the component
Go to the UI screen
Add an id for the custom component, because otherwise you won’t be able to see the component actions in the Codeless Toolbar
Add a built-in Button component to the page
Add “OnClick” handler for the button
and use the action codeless block

Everything is done, open the page in preview and check out how it works.

Use Third-Party Libraries

Creating your own components is a very useful feature, however, sometimes there is an already-implemented module that you want to use in your UI Builder application.

Next, I am going to show you how to use a third-party library in a Custom Component.

For example, let’s create a new custom component to use the SignaturePad module. Download the component file: https://unpkg.com/signature_pad@4.0.5/dist/signature_pad.umd.min.js and then upload it into your “src/lib/” folder.

Then, open the “src/index.js” file and replace the current code with the following:

import { useEffect, useRef } from 'react';

import SignaturePad from './lib/signature\_pad.umd.min';

export default function SignaturePadComponent() {
  const canvasRef = useRef(null);
  const signaturePadRef = useRef(null);

  const savePNG = () => {
    const fileDataURL = signaturePadRef.current.toDataURL();

    download(fileDataURL, 'signature.png')
  }

  useEffect(() => {
    signaturePadRef.current = new SignaturePad(canvasRef.current, {
      backgroundColor: 'rgb(255, 255, 255)',
    });

    window.addEventListener('resize', () => {
      resizeCanvas(canvasRef.current, signaturePadRef.current);
    });

    resizeCanvas(canvasRef.current, signaturePadRef.current);
  }, \[\]);

  return (
    <div className="my-customComponent-signature-pad">
      <div className="pad-body">
        <canvas ref={ canvasRef }/>
      </div>

      <div className="pad-controls">
        <button onClick={ savePNG }>save as PNG</button>
      </div>
  </div>
  );
}

function resizeCanvas(canvas, signaturePad) {
  const ratio = Math.max(window.devicePixelRatio || 1, 1);

  canvas.width = canvas.offsetWidth \* ratio;
  canvas.height = canvas.offsetHeight \* ratio;
  canvas.getContext('2d').scale(ratio, ratio);

  signaturePad.clear();
}

async function download(dataURL, filename) {
  const a = document.createElement('a');

  a.href = dataURL;
  a.download = filename;

  a.click();
}

Next, specify styles in the “styles/index.less” file:

.my-customComponent-signature-pad {
  .pad-body {
    width: 400px;
    height: 200px;
    position: relative;
    border: 1px solid red;
    border-radius: 4px
    overflow: hidden;

  canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

  .pad-controls {
    margin-top: 5px;
  }
}

Save all the changes, place the component in a page and open it in preview.

There you go, in less than a minute you integrated a module from NPM into your UI Builder application! This is amazing, isn’t it?

Marketplace

If you’re not familiar with JavaScript or React, don’t fret. Right now, we are working on numerous components that will be accessible using our Marketplace.

For instance, the SignaturePad above has already been implemented and it’s going to be released very soon. You can follow up on this Git Repository to check how we build our components.

Closing

In this guide, we touched on the new Custom UI Components feature and learned how to build your own component with and without external libraries.

We also learned how to register a component’s properties, events and actions, and how to use it with Codeless.

Of course, we are still adding to the feature and in the near future you will see some exciting improvements and additions.

I hope you enjoyed this article, if you have any questions please leave comments here or contact us on our support forum or our Slack channel. Thanks for reading and Happy Codeless Coding!

2FA Login Plugin Featuring TOTP

Backendless — Fri, 08 Apr 2022 16:25:08 +0000

The 2FA Login plugin enables applications built with Backendless to provide an authentication option where a user can log in using the TOTP (Time-based One Time Password) form of two-factor authentication (2FA).

With this approach, users of your Backendless-powered app can use a TOTP authenticator app such as Google Authenticator, Twilio’s Authy, and Microsoft Authenticator apps to login with a password generated by those apps. The 2FA Login plugin introduces a workflow with the APIs to coordinate the login process, which you can explore further in the docs.

2FA provides one more layer of security for your app, and the plugin is a powerful additional to our comprehensive suite of User Management tools.

What is 2-Factor Authentication (2FA)?

Two-factor authentication (2FA) is an authentication process that requires two factors to login: something you know (like a password) and something you have (like a phone or security token).

2-factor authentication is a designed to improve app data security. Adding 2FA support to your app can help protect your data from unauthorized access in case a user’s login identity (username, email, etc.) and password are compromised.

What is TOTP?

TOTP is a method of authentication that uses an app on the user’s mobile device to confirm the user’s login before allowing access to their account. TOTP can be used to protect accounts that hold sensitive information, such as bank accounts, cloud storage accounts, and email accounts.

TOTP is a type of two-factor authentication that uses a six-digit code (or one-time passcode, OTP) or one-time tokens generated by an authenticator app. The code changes every 30 seconds, so it’s unique for each login attempt.

How Does TOTP Work?

TOTP is based on the time and a secret key, so the server can generate the same code as the authenticator app. To complete the login process, the user manually enters the time-based code from the authenticator app into the app built with Backendless, which confirms the code before authenticating the user.

Codes generated by the authentication process become inactive after the time lapses, acting as an additional layer of security.

There are multiple TOTP apps in both the Google Play (Android) and Apple App Store (iOS). Some examples of these are Google Authenticator, Microsoft Authenticator, and Twilio Authy.

Using an authenticator app along with TOTP further enables Backendless developers to restrict access to sensitive data, making Backendless even more secure for enterprise-level applications.

How to Enable 2FA in Your Backendless App

To enable two-factor authentication in your application, you’ll need to use the 2FA Login plugin and its APIs. You can add the plugin for free by visiting Backend > Marketplace > API SERVICES > All Services in your Backendless app.

To verify the installation, visit the Cloud Code section of your backend and you should see the TOTP service in your list of API services.

The 2FA plugin supports 2FA at the individual user level. You can enable 2FA for the entire app or individual users can individually enable it (through your app).

Implementing TOTP With 2FA

In a TOTP app, the user needs to scan a QR code or enter a “secret” code to add your application to the TOTP app. The 2FA plugin in Backendless provides both a QR code as well as a “secret” code as a part of the user registration process.

The API supported by the 2FA Login plugin can be used either via REST, using a Backendless SDK, or with Codeless. Supported frontend languages include:

Android/Java
JavaScript
Objective-C
Swift
Flutter
.NET

You can generate the client-side library for the API using the Code Generator as shown below. This will enable you to use the API with the corresponding SDK.

If your frontend language is not available, you can access the plugin via REST API.

Comparing Top Authenticator App Providers

1. Google Authenticator

Google Authenticator is a popular two-factor authentication app that’s available on both Android and iOS.

The technology behind Google Authenticator began as an open-source project, but when Google created a proprietary version, it became known as the familiar and simple alternative to newer 2FA systems. For individuals who use the Google suite of services, Google Authenticator has become a popular choice.

Google Authenticator is available for free on the Google Play Store and Apple App Store.

2. Microsoft Authenticator

Microsoft Authenticator is another popular two-factor authentication app that’s available on both Android and iOS. It supports a wide range of applications, most notably including the complete Microsoft suite of products such as Office 365, Azure AD, and many more.

Microsoft Authenticator supports PIN and biometric authentication like TouchID tied to the user’s device, adding an additional layer of security to the login process.

Microsoft Authenticator is available for free on the Google Play Store and Apple App Store.

3. Twilio Authy

Twilio Authy is a popular two-factor authentication app that’s available on both Android and iOS. While Authy may not connect with as many third-party apps as Google Authenticator, it supports many devices other than Android and iOS devices. Authy also works with Apple Watches and desktop computers running Windows, Linux, or macOS. It is easy to set up since one account easily links to multiple devices.

Like Microsoft Authenticator, Authy also supports PIN and biometric authentication, providing addition security compared to Google Authenticator.

Twilio Authy is available for free on the Google Play Store and Apple App Store.

Closing

The 2FA Login plugin from Backendless is a great way to enable two-factor authentication for your app by enabling you to interact with a variety of authenticator apps.

The plugin enables 2FA via TOTP for increased data and account security. It is just one more tool from Backendless to protect yourself and your uses from unauthorized account access.

Download and install the plugin for free from the Marketplace section of your Backendless backend today!

FAQs

What is TOTP Authenticator?

A TOTP authenticator is an app used for user authentication to allow access to a secure account. The authenticator uses a phone app which receives and validates a code generated by a server before allowing access to the account.

For example, Google Authenticator is a TOTP app that can be used to protect a Google account including Google drive, Google email, etc.

How Do I Set Up TOTP?

To set up TOTP for your Backendless app using the 2FA Login plugin, follow the instructions laid out in the plugin’s documentation.

HOTP vs. TOTP

HOTP stands for HMAC-based One-Time Password. It is the original standard that TOTP was based on. One of the inputs to both methods is a secret key, but TOTP uses the system time for the other input, whereas HOTP utilizes a counter that increments with each new validation. Both parties increment the counter and use it to compute one-time passwords using HOTP.

Does the 2FA Plugin support push notifications with the TOTP code?

Many authenticator apps provide features such as one-tap push authentication for easier access. These notifications originate from the authenticator app, not Backendless itself.

Many authenticator apps also include cloud backup for your accounts via platforms such as Google Drive. This is also controlled by the authenticator service, not hosted within Backendless.

This article was originally published on backendless.com on April 4th, 2022.

How To Integrate A Bubble App With A Backendless Backend

Backendless — Mon, 21 Mar 2022 15:47:29 +0000

Bubble.io is one of the most popular no-code app builders on the market. When you integrate a feature-rich no-code Backendless backend with your Bubble app, you get a visual relational database, user management, bulletproof security, highly-scalable serverless hosting, and much more.

Building a mobile or web app used to be an enormous undertaking. Creating apps, or digital products as they are sometimes called, required lots of technical knowledge and many months – even years – of dedicated development time.

The no-code movement has changed that. Now, with no-code tools like Backendless and Bubble.io, non-technical builders can learn and build apps in months or even weeks. Those with technical knowledge can turn a six month project into a six week project.

In this article, we are going to briefly introduce you to Bubble.io, a leading no-code development platform that provides a robust toolkit for building apps visually. Then, we will describe how to add a powerful and scalable Backendless backend to complement a Bubble frontend.

Contents

1. What is Bubble.io?

2. Frontend vs backend development – and why it matters

3. Benefits of adding a Backendless backend and database

4. How to integrate a Bubble app with a Backendless backend

4.1 Bubble app user registration and authentication via Backendless

4.2 User login in Bubble via Backendless

4.3 Saving data from Bubble into Backendless Database

4.4 Querying Backendless Database from Bubble

5. Conclusion

What is Bubble.io?

Bubble.io, previously bubble.is, is a platform for building web apps visually using a drag-and-drop interface and workflow builder. Bubble offers wide user interface design capabilities without code, and comes complete with its own database.

Bubble provides an excellent toolkit for building relatively simple applications, and thus greatly appeals to new developers with little or no coding experience. With the platform, users can build functioning apps very quickly and easily iterate with new features over time.

Because of these capabilities, Bubble is a popular choice for so-called “citizen developers”. Many such users include non-technical entrepreneurs with app-based business ideas and technical startup founders seeking to quickly build a minimum viable product (MVP).

Bubble’s simplicity can be easily complemented with it’s variety of integrations. Users can develop their early project with Bubble, then add additional tools to increase their app’s capabilities.

Frontend vs backend development – and why it matters

That is why it is recommended that as much of the logic as possible be stored on the backend. A typical server – include Cloud servers – contains far more processing power than a typical mobile phone, tablet, or laptop.

Benefits of adding a Backendless backend and database

The more capable an app’s backend, the more effective the app and the better the user experience.

Bubble.io has taken the no-code development world by storm, but for all the strengths the platform offers on the frontend, it’s backend capabilities are lacking.

Bubble apps come with a built-in database that is adequate for an early stage business, but will struggle mightily if you intend to scale. The database is build for simplicity, not scalability, and will commonly slow down as the number of records being processed increases.

When it comes to server-side logic, a Bubble backend will likely leave you wanting as well.

To make up for these shortcomings, Bubble offers an API Connector plugin to facilitate working with a third-party backend and database.

That’s where Backendless comes in

With a powerful visual database, huge assortment of pre-built APIs and the capability to build your own codeless APIs, Backendless easily fills in all the backend gaps in your Bubble app.

From a feature standpoint, Backendless provides the most complete no-code backend capabilities on the market. In this article, we will discuss some of the basics – user authentication (registration and login) and database manipulation. However, that merely scratches the surface of what Backendless has to offer.

Other features your Bubble app will benefit from include:

How to integrate a Bubble app with a Backendless backend

From this point on, we will be demonstrating how to integrate Bubble with Backendless. In this article, we’re going to walk you through the process of integrating several basic backend functions into your Bubble app (click to jump to each section):

User Registration
User Login
Save Data
Query Your Database

To get started, you will need a Bubble account as well as a Backendless account (register here for free).

Bubble app user registration and authentication via Backendless

User registration, authentication and login are critical components of any app seeking to personalize its user’s experience. In addition to a registration API, Backendless offers a wide array of third-party login options such as Google, Facebook, Twitter, and many others. You can read more about our OAuth 2.0 login support here.

User login opens up the entire set of user management functions in Backendless. These include session management, password management, user roles, and relating user to other data objects.

User registration also opens up user engagement opportunities such as email messaging, push notifications, and in-app messaging.

Let’s dive in. To get started, we are going to connect user registration in our Bubble app with our Backendless Database. Users registered by API will appear in the Users table.

First, let’s create a registration page. We will need two Input components with identifiers Input Email (content format: Email) and Input Password (content format: Password), a button with ID Button Register User and an Alert with ID Registration Result Alert:

For integration between the platforms, we will use REST requests, which we will create using the API Connector plugin.

You can install this plugin immediately after creating a new application, or later through the Assistant. To add a connector, go to the Plugins -> Add plugins tab and add the API Connector:

Let’s create an API called Backendless and add the RegisterUser method with the url required for registration (https://api.backendless.com/APP_ID/REST_API_KEY/users/register). NOTE: Be sure to add your own APP_ID and REST_API_KEY. Both can be found on your Backendless dashboard.

We also need the email and password parameters (read the user registration API docs here).

We specified the parameters email: test@test.com and password: 111 as test data. Press Initialize / Reinitialize call to verify the request:

If everything is correct, we will get a response from Backendless with a registered user object:

Click Save to save the RegisterUser method, and then clear the values of the email and password parameters from the corresponding inputs:

Let’s return to the register page in order to add some more logic. Select the button Register User -> Start / Edit Workflow:

Our workflow consists of 4 steps:

1. Verify that the user entered values in the email and password fields

Otherwise, we will display a message that these fields must be filled.

To do this, choose Click here to add an action, select Element Actions -> Show Message:

Next, select Registration Result Alert as the displayed element, enter an error message and put a filter that will trigger this action only when one or both of the input fields is not filled:

2. Call the Backendless user registration method directly

Click Click here to add an action -> Plugins -> Backendless – RegisterUser:

We indicate that the data for the parameters of the RegisterUser method must be taken from the Input Email and Input Password fields. The call should only be triggered if the values of these fields are not empty:

3. Display a message about successful registration

Once the request returns successfully in Step 2, we move to displaying a message. To do this, similar to the first step, add a Registration Result Alert call and configure it as follows:

Select Registration Result Alert as the displayed element and enter a message about successful registration. Then, use the Insert Dynamic Data button to send the registered user’s email received in step 2.

We display this message only if we have a field in the response in step 2 objectId for the user.

4. Clear the Input Login and Input Password values

To do this, click Click here to add action, select Element Actions -> Reset inputs:

The logic is ready. In the upper right corner, click on the Preview button, enter the email and password of the new user and click Register User:

If registration was successful, we will receive a message about successful registration:

If an error occurs during registration (for example, user tries to register an already-registered email address), then we will receive the following notification:

You can use the list of response error codes to set up specific error messages for your users, or simply display the error message received from the backend.

User login in Bubble via Backendless

Now that we have registration set up, let’s build our Login page.

On the page, we will need two Input components with identifiers Input Login (content format: Text) and Input Password (content format: Password), a button Button Login and Alert Login Result Alert:

In the API call to Backendless, add the Login method with the url required for the login https://api.backendless.com/APP_ID/REST_API_KEY/users/login (replace with your own APP_ID and REST_API_KEY).

Per the docs, we will need the login and password parameters. As test data, we specified the parameters login: test@test.com and password: 111. Press Initialize / Reinitialize call to verify the request:

If everything is correct, we will get a response from Backendless with a logged-in user object:

Click Save to save the Login method, after which we clear the values of the login and password parameters from the corresponding inputs:

Let’s return to the main page in order to write some additional logic. Select the Login -> Start / Edit Workflow button.

Again, our workflow consists of 4 steps:

1. Verify that the user has entered values in the Bubble app’s login and password fields

Otherwise, we will display a message that these fields must be filled.

To do this, click Click here to add an action, select Element Actions -> Show Message:

Next, select Login Result Alert as the displayed element and enter an error message. Put a filter that will trigger this action only when one or both of the input fields is not filled:

2. Calling the user’s login method directly in Backendless

Click Click here to add an action -> Plugins -> Backendless – Login:

We indicate that the data for the parameters of the Login method must be taken from the Input Login and Input Password fields, and the call should be triggered only if the values of these fields are not empty:

3. Display a message about a successful login

Once we’ve gotten a successful result in step 2, we can move on to this step. To display the message, similarly to the first step, add a Login Result Alert call and configure it as follows:

Select Login Result Alert as the displayed element and enter a message about a successful login. Then, use the Insert Dynamic Data button to send the email of the logged in user received in step 2.

We display this message only if we receive the logged-in user’s objectId field in the response from step 2.

4. Clear the Login Input and Password Input values

To do this, click Click here to add an action, select Element Actions -> Reset inputs:

The logic is now ready. In the upper right corner, click on the Preview button, enter the user login and password, and click Login:

If the login was successful, we will receive a message about a successful login:

If an error occurred during registration (for example, the user does not exist), then we will receive the following notification:

Saving data from Bubble into Backendless Database

Bubble offers a built-in database that can be adequate for simple projects or MVP-level applications. When it comes time to scale, and you have tens of thousands of records to store and retrieve, a Bubble database can become a liability.

Backendless Database is what sets Backendless apart from every other no-code platform out there. Your database can store a wide range of data types (including spatial/geo data and JSON objects) and makes it trivially easy to create relations between objects. Plus, a Backendless database can scale infinitely out of the box.

Backendless Database uses a SQL-based querying system. (We will touch on that more in the next section.) This approach allows you to easily query your data and display exactly what you want the user to see.

To start working with our data, let’s first take a look at how to save data into our Backendless Database from our Bubble app. Let’s build a simple new page to try it out.

On the page, we will need two Input components with identifiers Input Name (content format: Text) and Input Age (content format: Text (numbers only)), a button Button Save and an alert Save Result Alert:

We will save a new object to a table called Person.

In the API call to Backendless, add the SaveObject method with the url required to save the object https://api.backendless.com/APP_ID/REST_API_KEY/data/Person (replace with your own APP_ID and REST_API_KEY).

Per the docs, we’ll also need the name and age parameters. Let’s specify the parameters name: Bob and age: 30 as test data. Press Initialize / Reinitialize call to verify the request:

If everything is correct, we will get a response from Backendless with a saved object:

Click Save to save the SaveObject method, after which we clear the values of the name and age parameters from the corresponding inputs:

Let’s return to the main page to add more logic. Select the Save object -> Start / Edit Workflow button.

Once more, our workflow consists of 4 steps:

1. Calling the method for saving a new object in Backendless

Click Click here to add an action -> Plugins -> Backendless – SaveObject:

We indicate that the data for the parameters of the SaveObject method must be taken from the Input Name and Input Age fields:

Once we’ve confirmed that this executed properly, we can move on to the next step.

2. Display a message about successful saving

To do this, add a Save Result Alert call and configure it as follows:

Select Save Result Alert as the displayed item and enter a message about successful saving. Use the Insert Dynamic Data button to transfer the objectId of the saved object obtained in step 1 to the message.

We will display this message only if we receive the objectId of the stored object in the request response.

3. Clear the Input Name and Input Age values

To do this, click Click here to add an action, select Element Actions -> Reset inputs:

Finally, the logic is ready. In the upper right corner, click on the Preview button, enter name and age and click Save object:

If the save is successful, we will receive the message:

Querying Backendless Database from Bubble

Finally, let’s walk through how to retrieve data from your database by running a query. We will again create a simple page for demonstration.

For this example, on the main page, we only need one Input component with the Input Where Clause identifier (content format: Text), a Button Find button, and a component called Repeating Group with ID Find Result Repeating Group to display the search results:

We will be querying our previously-created Person table.

In the API call to Backendless, add the Find method with the urls required for fetching https://api.backendless.com/APP_ID/REST_API_KEY/data/Person (replace with your own APP_ID and REST_API_KEY) and an optional where parameter (read the docs).

Press Initialize / Reinitialize call to validate the request:

If everything is correct, we will get a response from Backendless with an array of selected objects:

Click Save to save the Find method and return to the main page where we’ll add further logic.

Let’s select the button Find -> Start / Edit Workflow.

In this case, our workflow consists of 3 steps:

1. Calling the method for fetching objects from Backendless

Click Click here to add an action -> Plugins -> Backendless – Find:

The data for the where parameter of the Find method should be taken from the Input Where Clause field:

Once the request completes successfully, we can move on to step 2.

2. Make the Find Result Repeating Group element visible

Select Click here to add an action -> Show an element.

Next, select the element Find Result Repeating Group:

3. Transfer the data obtained in step 1 to Find Result Repeating Group

Let’s return to the main screen to complete the settings. Let’s configure Find Result Repeating Group as follows:

Set the Type of content to Find – this component will display the data received as a result of a Find request. The Layout style will be Full list – the number of cells in the component will change dynamically depending on the number of objects received in the response.

This element is visible on page load should be left unchecked – when loading the page, we will not display the Repeatable Group component; we will display it only when we load data from the server.

Next, let’s add a Text component to the Find Result Repeating Group cell:

Since we have specified the Find Result Repeating Group type as the result of the Find query, we can now configure it to display the name and age fields of objects retrieved from the Person table. To do this, use the Insert dynamic data button:

The logic is now ready. Click on the Preview button, then optionally enter a where clause and click Find:

As a result of a query with the whereClause of age> 25, we receive a list of Person table objects with age greater than 25. If we execute a Find query without specifying a whereClause, we get a list of all objects:

Conclusion

You should now have a basic handle on how to interact with a Backendless backend via a Bubble app, but this is just the tip of the iceberg. Adding a Backendless backend and database to a Bubble app gives your app incredible flexibility and infinite scalability.

With Bubble’s easy frontend interface and Backendless’ feature-rich backend and many pre-built APIs, your possibilities become endless.

In addition to managing users and data, Backendless gives you access to timers, event handlers, and whatever Codeless logic you can think of on the backend.

Your app is virtually limitless.

Thanks for reading and Happy Codeless Coding!

*This article was first published on backendless.com on December 2, 2021.

Backend and Real-Time Database For Flutter Web And Mobile

Backendless — Mon, 07 Mar 2022 22:06:22 +0000

The Backendless SDK for Flutter provides backend support for Flutter web applications as well as Android and iOS mobile apps. Now, your Flutter app can enjoy all the functions and features of a Backendless backend on both web and mobile.

Flutter is a popular frontend development framework from Google that enables developers to build beautiful frontends for any screen. Flutter is designed to streamline cross-platform app development while maintaining a consistent user experience.

In fact, Flutter is now the most-used cross-platform mobile framework in the world, according to Statista. This is based on a 2021 developer survey of software developers.

Because of its versatility, Flutter is an excellent solution for coders seeking to deploy to multiple platforms – web, mobile, even tablet – from a single codebase.

In particular, Flutter allows frontend developers to complete multi-platform projects much faster and with much less redundant development. Not only does a single codebase mean less work, it also means much less room for errors or inconsistencies.

What is Flutter?

Flutter is an open-source UI toolkit originally launched for mobile app development. The Flutter framework has since expanded to include web app development support.

Flutter code compiles into multiple client-side machine code languages. To put it simply, this means that the Flutter codebase you develop will look virtually pixel-perfect on any screen or device.

Flutter also boasts the ability to iterate quickly. Changes to your Flutter code compile and become visible almost instantly, making development and testing incredibly streamlined.

As we’ve mentioned, Flutter is a framework specifically designed for the frontend. As such, there is no “default” backend for a Flutter application. Backendless was among the first no-code/low-code backend services to support a Flutter frontend.

What is Flutter Web?

Per Flutter’s website:

Flutter’s web support delivers the same experiences on the web as on mobile. Building on the portability of Dart, the power of the web platform and the flexibility of the Flutter framework, you can now build apps for iOS, Android, and the browser from the same codebase. You can compile existing Flutter code written in Dart into a web experience because it is exactly the same Flutter framework and web is just another device target for your app.

Flutter web support lets you use the same Flutter codebase to build progressive web apps (PWAs) and complex single page apps. The Backendless Flutter SDK supports both Flutter web apps and mobile apps, allowing you to build cross-platform applications with a single Backendless backend.

Existing Flutter mobile apps can easily be repurposed for web browsers, making them available on desktop as well as mobile devices. Flutter web development is practically identical to Flutter mobile development.

If you’re a web developer looking for a web platform that can easily be compiled for mobile as well, Flutter is an excellent option.

What is No-code / Low-code app development?

No-code, or Codeless as we like to call it, development is app development that does not require the developer to manually write code. Using visual Codeless blocks, you are able to design logic and APIs visually.

Codeless development can save up to 90% on development costs by speeding up processes and reducing developer hours for a project. For developers looking at a framework like Flutter, speed is key.

Low-code development typically means that the developer has the capability to include some coded elements in the process. With Backendless, for example, you can add Java or JavaScript (Node.js to be specific) code to your backend.

While low-code development may have a steeper learning curve, it also provides additional flexibility for the developer by removing some constraints.

Why is Backendless the best backend for Flutter web app development?

Backendless’ Flutter SDK, like all Backendless SDKs, works across platforms and device types out of the box. As a Flutter developer, one of your top priorities is serving the same UI and UX to all users, regardless of device type. You need a backend that will not hinder this goal.

Also as a Flutter developer, getting your project built quickly, and having the ability to iterate quickly, are key. The less effort you have to expend bouncing between your frontend development and backend, the better. Backendless provides a secure, stable backend that you can practically set and forget.

From a feature standpoint, Backendless provides everything a Flutter backend needs:

Real-time database – As your Flutter app instantly reloads during development, you’ll want to ensure the data you’re working with is kept up-to-date at all times as well. Once you launch, your users will benefit from always seeing the latest data.
User management – Easily implement user authentication, registration, and login for your Flutter app. Plus, once you’ve launched, you can manage all users visually, including setting and modifying user roles and permissions.
Push notifications – Critical to user engagement, as well as many key business practices, push notifications can be invaluable – but also a hassle to implement. Backendless provides an easy-to-use push console for creating and sending custom Flutter push notifications to iOS and Android devices.
Codeless logic – Developers choose Flutter not only for development speed but for processing speed as well. Flutter apps can run incredibly fast on most devices, so why bog the app down with excessive frontend logic? Moving logic to the backend – and building it without code – lets you speed up development even more and improve performance at the same time.

All of the above features, and many others, come standard with Backendless.

Finally, Backendless offers an inexpensive and highly scalable hosting solution (both serverless and on-premise) for Flutter developers. With Backendless Cloud, you may choose to host in the U.S. or, for the GDPR-conscious, in the E.U.

Backendless SDK support for Flutter Web

When Flutter first launched, it was only suited for mobile platforms. Eventually, the Flutter framework expanded to include web apps as well, and now Flutter works on virtually any screen.

Similarly, our Flutter SDK initially only supported a Flutter backend on mobile platforms (Android and iOS). As Flutter has grown in popularity, particularly relative to similar frameworks like React Native, a lot of users began asking for Web support, and we were happy to oblige. Our SDK for Flutter supports Flutter Web as well as Flutter mobile, and is available now on GitHub.

From the official Flutter website:

With web support, you can compile existing Flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server. You can use all the features of Flutter, and you don’t need a browser plug-in.

Now, you can implement cross-platform solutions for both mobile and web platforms using our SDK for Flutter Web. To get started with your Flutter web development, simply follow the instructions on our GitHub.

Example Flutter Web backend using Backendless

We have created a sample project to demonstrate how the Backendless SDK works with Flutter Web. You can find the example on GitHub here: https://github.com/4lfant/backendless_web_example

In this example, you will see how to set up a Flutter web project, save a data object from the client-side to your Backendless Database, and subscribe to and test a messaging channel.

This example showcases how to integrate a Flutter frontend with a Backendless database as well as how to utilize our pub/sub messaging system with a Flutter client-side.

How to get started with the Backendless SDK for Flutter Web

New to Flutter and want to give it a try first? Check out our Quick Start Guide for Flutter to see how to set up your first Flutter project.

Be sure you check out our Flutter chat app demo here and our guide to setting up push notifications for Flutter here. Additionally, you can learn how to connect your Flutter app to our real-time database here.

If you have an existing mobile app built with Flutter, you can easily add the web SDK to your project to allow make your app accessible on web as well.

Are you looking to test a specific feature? Then try out our Flutter templates in Code Generation.

Ready to start building your Flutter backend? Start your free trial of Backendless today – we can’t wait to see what you’ll build!

Happy Coding!

This article first appeared on backendless.com on November 30, 2021.

Backend and Real-Time Database For React JS

Backendless — Wed, 02 Mar 2022 20:41:33 +0000

Backendless offers a simple way to connect frontend components to backend services through our SDKs. With the SDK for JavaScript, developers can get all of the benefits of a Codeless backend and database for the React.js websites and web apps.

React JS is one of the most popular frontend frameworks for web developers around the world. In fact, according to Statista, React is the #1 most used web framework among developers worldwide in 2021, with over 40% of the market share.

The framework can be connected to a backend for additional business logic, user management, and database integration to make websites more interactive and to personalize the user experience.

While many React application developers have experience with the full development stack, many prefer frontend app development over backend development. That’s why a tool such as backend as a service can greatly speed up the development process.

In this article, we talk a bit about what React is and how it works, then dive into backend frameworks that can support a React application by providing an API backend, database, and backend login.

What is React.js?

ReactJS is an open source library developed by Facebook in 2013. It was created as a replacement for the Flux pattern to help improve development speed and reduce bugs. React uses HTML and CSS to create reusable components and manage state. These components are then rendered on the screen or used to generate other content.

The core concepts behind React JS include:

Components – A component is a self-contained piece of functionality that can be reused across multiple pages.
State Management – React manages changes to data within a component’s view. This helps increase performance because it only updates what needs updating instead of refreshing the entire page.
Views – View refers to the visual representation of a component.
Props – Props are passed from parent components to child components. They allow child components to change the appearance of the parent component.
Events – Events are triggered when something happens. In React, events are handled by listeners attached to elements.

Advantages of React

React has a ton of positives that make it very popular for coders, especially those with relatively limited development experience. These advantages include:

Easy to learn – React is easy to understand and use.
Fast – React has been proven to be faster than other similar technologies such as AngularJS and jQuery.
Flexible – React is flexible and customizable. Developers can choose how they want to structure their application.
Simple – React makes building complex interfaces easier.
Reusable – React components can be reused throughout your app.
Scalable – React is a scalable frontend, allowing you to easily add new features as needed.

Limitations of React

While React has many advantages, there are some drawbacks as well. For example:

Not supported everywhere – React isn’t supported on every browser. Some browsers don’t support the latest version of React. If this is the case, you will need to use older versions of React.
Occasional speed issues – React is not always the fastest solution. When developing large projects, it may take longer than expected to render views.
No default backend – Express JS is a common backend runtime environment used with React, but for frontend developers, having to write backend code can be a major added cost, both in terms of time and money.

Why would a React app need a backend?

A React JS app doesn’t have any backend unless you decide to implement one. However, if you do decide to go down that path, there are many benefits to doing so. Here are some reasons why you might consider adding a backend to your React app:

Increase security – Many people prefer to keep their personal information private. By implementing a backend, you can ensure that no unauthorized users get access to sensitive information.
Manage data storage – You can store all the data associated with your website or mobile app on a server rather than storing it locally. This allows you to scale up your project without having to worry about running out of space.
Reduce load times – A backend can provide static files (images, videos, etc.) that can be cached. Caching these files reduces the amount of time it takes to load your site.

Applications with backend support tend to be more stable and scalable than those without.

How does Backendless work?

Backendless includes a set of tools that make it easy to build an app with a robust and powerful backend. It also includes a variety of APIs that let you interact with your backend in a simple way. As a backend technology, Backendless can support anything from a single-page app to mobile applications.

Backendless is a backend app that helps you build and manage your app backend.

The Backendless SDK for JavaScript gives you everything you need to create a backend for your React JS app. You can connect to a real-time database and manage user accounts. You can even send push notifications to your users.

Connecting with a Backendless backend also gives you access to Cloud Code, which is logic stored on the backend. This logic can be created using Java, JavaScript, or using Codeless programming blocks. Logic on the backend can be triggered via API, event handlers, or timers.

What is Codeless programming?

Codeless programming refers to visually creating logic that’s independent of the platform it runs on. With Codeless programming, you build the logic with blocks that are then converted to code automatically. The system transforms the logic to the appropriate code for the user’s platform.

Additionally, with Codeless you can create code that works across multiple platforms including iOS, Android, desktop browsers, and more.

Developing with Codeless or low-code platforms can save up to 90% on the cost of app development by speeding up processes and reducing developer manhours.

Why is Backendless the best option for React backend development?

Backendless is well suited to be a backend for React JS web development. It offers built-in features such as a real-time database (RDBMS), user management system, Codeless logic and event handlers, API service management, and many other features.

Backendless has been used by thousands of companies to build high-performance, scalable applications. The Backendless SDK for JavaScript is a fast and easy way to connect your React app to the cloud. It’s designed to work seamlessly with the React ecosystem for easy server-side development.

From a core feature standpoint, Backendless provides everything a React backend needs:

Real-time database – Keep your data up-to-date at all times during the development and testing process. Once you launch, your users will benefit from always seeing the latest data.
User management – Easily implement user authentication, registration, and login for your React app. Plus, once you’ve launched, you can manage all users visually. Management includes setting and modifying user roles and permissions.
Push notifications – Critical to user engagement, push notifications often used for key business practices. They can be invaluable, but they can also be a hassle to implement. Backendless provides a simple way to create and send custom JavaScript push notifications to iOS and Android devices.
Codeless logic – Moving logic to the backend – and building it without code – lets you speed up development even more. This will improve performance at the same time. By integrating a Backendless backend, you instantly get access to dozens of pre-built APIs. You also gain the ability to create logic quickly without code.

All of the above features, and many others, come standard with Backendless.

Finally, Backendless offers an inexpensive and highly scalable hosting solution (both serverless and on-premise) for React developers. With Backendless Cloud, you may choose to host in the U.S. or, for the GDPR-conscious, in the E.U.

How to get started with the Backendless SDK for JavaScript (for ReactJS)

To start building applications with Backendless, you must first install the Backendless SDK. This will allow you to interact with our RESTful APIs from within your application. After installing the SDK, you must then configure it by creating a Backendless App. Once this is done, you can begin developing your app.

We have a variety of resources for helping you get started building your React project with a Backendless backend.

To test a specific Backendless feature, try out our demo apps using Code Generation for JavaScript.

Also, be sure to check out all of our React Native resources:

Conclusion

If you’re looking to build a website or app with React JS, Backendless can greatly speed up your application development. Backendess provides valuable resources to make your app run more smoothly and more secure.

You can try Backendless free to 30 days to learn all of its benefits and see if it’s a good fit for your React project.

This article was first published on backendless.com on February 22, 2022.

Create Impeccable Docs With API Documentation Tools

Backendless — Wed, 16 Feb 2022 20:57:43 +0000

API documentation is an important part of any API service. It can be the difference between a successful API and one that languishes in obscurity. Good API documentation can help developers understand how to use your API, while bad API documentation can lead to frustration and confusion.

Fortunately, there are a number of tools out there that can help you create beautiful, user-friendly API documentation. In this article, we’ll take a look at some of the best ones.

Contents

1. What is API documentation?

1.1 What are API methods and parameters?

1.2 What are API definitions?

2. Why API documentation matters

2.1 Great community engagement

2.2 Better search rankings

2.3 Fewer support requests

3. What are API documentation tools?

4. 7 Best API Documentation Tools

4.1 Backendless

4.2 Stoplight

4.3 ReDoc

4.4 Postman

4.5 OpenAPI Generator

4.6 DapperDox

4.7 Swagger UI

What is API documentation?

API documentation is a set of instructions that explain how to use, or program against an API. In other words, it’s the reference manual for your API.

In many ways, API documentation is similar to an ordinary user manual. So if you’re familiar with how manuals for a consumer product like a washing machine is written, you’ll be able to effectively create API documentation too.

Good API documentation should contain:

An introduction explaining what the API does and why you should use it
A summary of all the methods exposed by the API along with examples of input and output for each method
Detailed technical information about each method such as parameters and return values
Usage guides that show how to call each method in code snippets written in as many programming languages as possible
A changelog that documents any changes to the API and the date of those changes
Version information such as the current version of the API
Getting started guides that show developers how to install, setup and use your API
A troubleshooting guide that lists common problems and how to solve them
A list of related resources, such as user forums or documentation created by other developers

What are API methods and parameters?

For no-coders and those new to APIs and API calls, some of these terms – methods, parameters, etc. – may be foreign to you. We’ll break them down so you can understand how they work.

Methods are the different actions an API can perform, such as updating a database record or sending an email. They are usually exposed through HTTP requests. For instance, if you need to update the status of a ticket in your helpdesk system then you would send a PUT request to the API containing the ticket number and new status code.

Parameters are pieces of data that you provide to an API method to tell it how you want it to be performed. They are added as URL query string values or POST body parameters. For example, if you’re sending a PUT request then your website will need to contain one or more of the following parameters:

ticket_number – The ID of the ticket you’re updating
status – The new status code of the ticket
from_address – Who the ticket is coming from. This can be either an email address or a user ID
to_address – Who the message should be sent to. This can also be either an email address or a user ID.

The primary methods for an API are GET, PUT, POST, and DELETE. Generally speaking, the usage of these methods are pretty straightforward.

GET – Retrieves data from a database
PUT – Updates data in a database
POST – Creates new data (also called “resources”)
DELETE – Deletes resources from a database. Check to make sure you really want to delete the resource before sending this request!

For GET and DELETE requests, parameters are passed as query string or cookie values. For PUT and POST requests, they are passed as either URL query string or POST body parameters.

There are other less common methods too, such as head, trace, options and connect. There are also secondary HTTP request types like OPTIONS. Those are more advanced than we will cover here.

What are API definitions?

An API definition is a set of instructions that allow software to understand and interact with your programmatic interface. The most commonly used API definition format for defining an API is the OpenAPI Specification (formerly called Swagger) along with its JSON and YAML variants such as RAML (RESTful API Modeling Language).

Each object in an OpenAPI specification describes a resource, which represents a piece of data found in your programmatic interface such as a ticket, user profile, etc. Each resource has one or more methods like GET and POST that can be used to interact with it.

You can give resources and the API as a whole metadata tags like name and version if you want to. When you generate human-readable documentation for your API, this metadata is used to give your API a title, description and version number.

Why API documentation matters

Building a great API is important. However, it’s not enough to just build it and put it out there.

To enjoy the benefits of an active developer community around your API, you need to create amazing API docs to go with it.

A successful API can make developers’ lives easier by enabling them to use cool new technologies in their projects. By providing clear instructions for how to use your API, you are practically guaranteeing that API consumers will be able to do this quickly and easily.

We discuss some more reasons why good documentation matters next.

Great community engagement

APIs only thrive when there’s a thriving developer community behind them. Good documentation helps developers get up and running with your API quickly, leading to better engagement with the platform.

Better search rankings

If a developer is searching for a solution to a problem on Google, and your documentation appears first in the search results, chances are they’ll read more of your docs. If you have clear, helpful documentation that gives them what they’re looking for quickly, it’s more likely that you will get their business.

Fewer support requests

Your products might be great but if people can’t figure out how to use them effectively because there’s no proper documentation, developers will reach out for help. Providing good API docs means fewer questions from frustrated developers who just want to do their jobs.

What are API documentation tools?

An API documentation tool is an application that you can use to build, manage and host your API documentation.

There are several types of API documentation generators – some focus on generating beautiful human-readable output for developers who want to browse your documentation online. Others focus on automatically producing machine-comprehensible code snippets in a range of programming languages which developers can use in their apps.

So which type should you choose? Most API Documentation tools are hybrids, so you can probably find something that suits your needs. However, here are some things to think about when selecting one:

Which programming languages do you want to support?
What features do you need? For example, if you want to automatically produce code samples for your documentation, you’ll need a tool that supports this feature.
Do you want it hosted as part of an existing product? Or do you want to download and install it yourself? This is especially relevant if you’re looking at Open Source options – if don’t have many resources available, or you just want to start fast, it might be more convenient to deploy an existing product.
How much do you want to spend? Most API Documentation tools are either Open Source or offer a free option. Be sure to check the costs before selecting an option – some require payment plans for certain features, while others offer tiered pricing based on usage limits.

7 Best API Documentation Tools

Now that you understand what API Documentation tools are, and the types of features that they offer, let’s take a look at some of your options for generating documentation.

Backendless

Backendless allows you to generate API documentation for your API Services in a matter of minutes. Docs are accessible through a URL or as a downloadable file, and Backendless supports several doc types including Swagger and OpenAPI 3.0. Your API documents can be utilized to automate the client-server connection process by streamlining it with external management tools for your Backendless-managed APIs.

Features include:

External service management – Backendless generates API documentation that other external service management tools and API providers can read, making your APIs discoverable.
Multiple doc formats – Backendless creates API documentation in seven different formats for every API Service. Whether you’re using Swagger, OpenAPI 3.0, or API Blueprints, integrating with your API services is a breeze.
No-Code app builder API integration – Backendless allows you to integrate with your No-Code app builder through the API. Easily add rich APIs and documentation to your applications without any need for technical coding skills.

Stoplight

Stoplight is a complete API documentation tool that allows you to create, organize and share your APIs. Stoplight automatically generates SDKs for any language in minutes – there’s no need to write code or deal with complex build tools.

Features include:

API design guides – Stoplight provides a simple way to manage all of your API designs from a single place. You can quickly change parameters, add error handling and parameter samples, then generate the new specification into an OpenAPI 3.0 model where it can be used for mock testing and generating SDKs in multiple languages.
Crowd tested integrations – Stoplight ensures that your APIs work with more than 1,200 libraries so developers don’t have to manually test them themselves. It also includes API design guidelines for 30+ popular services to help you achieve the best coverage.
Mock server – Stoplight allows you to create a mock server in minutes using an OpenAPI 3.0 specification (or Swagger definition). You can then share it with other team members or automate testing by publishing the URL so that your CI/CD tools can connect with it.

ReDoc

ReDoc is an Open Source API documentation tool. It produces beautiful, human-readable docs in seconds, with support for both HTML and Markdown formats. You can host them wherever you like or download ReDoc’s official web app to view your documentation on the go.

Features include:

Markdown support – ReDoc lets you write your docs in Markdown format, making it simple to create elegant looking pages using a regular text editor. The tool also includes Markdown syntax highlighting and code block rendering (with language specific font selection).
Server side rendering – ReDoc renders the client side website locally on your development machine before deploying it, so it works even if there are no internet connections available when you’re building apps that need to work offline.
Offline support – By using service workers, ReDoc is able to keep working offline once it’s been downloaded for the first time, including after updates have been applied.
Dynamic data – You can use ReDoc to create extensive documentation with dynamic data. This allows you to alter your docs based on environment variables or other conditions so that developers can test different data sets without having to rebuild their docs each time.

Postman

Postman is a complete API development environment that allows you to manage APIs and build requests. You can share collections privately with other members of your team, add comments to requests, and use shared environments to test how changes will affect existing code without breaking it.

Features include:

Environment management – Postman supports multiple environments so you can easily create different versions of the same API service and switch between them. This helps you define different test procedures and production data sets within the same collection, making it easy to ensure everything is working as expected before deploying updates.
Documentation & sharing – Postman stores all of your documentation in a single place where you can access it from any device or location that has an internet connection. You can also publish collections anonymously so that your friends and colleagues can try out new features without having to sign up, or share them privately with an unlimited number of users.
API mocking – You can test your APIs throughout the development process by creating mock servers for them using Postman’s mock server tool. This lets you check how they’re working before deploying updates onto your production server, which makes it ideal for testing against different data sets and scenarios.

OpenAPI Generator

OpenAPI Generator is an Open Source code generation tool that helps you create APIs from a Swagger/OpenAPI 2.0 or 3.0 definition and automatically update them as needed so you can keep all of your documentation and code in sync at all times.

Features include:

Code generator – OpenAPI Generator makes it simple to generate server stubs using the code generator, which you can then compile into your preferred language or framework. You can also use it to dynamically generate documentation based on your definitions for services that support OAuth2 and more complex authentication methods like tokens.
Generator templates – There are currently over 100 generator templates available for languages such as C# (.Net Core), Java (for Spring Boot & Dropwizard), PHP (Lumen, Slim, Symfony), Python (Flask), and Ruby (Rails) that make it easy to create common API services.
OpenAPI 3 support – OpenAPI Generator is fully compatible with all version 3 features like security schemes, response objects, input/output object, and more.

DapperDox

DapperDox is a free documentation generator for .Net Core and ASP.NET Core applications that helps you create clean API reference docs from Swagger or RAML files, including OpenAPI Specification (OAS) files.

Features include:

RAML support – DapperDox supports the open source library for easily generating API documentation from RAML definitions which can be hosted on GitHub pages. Once installed, it allows you to save your Swagger/OAS file as an HTML webpage complete with hyperlinks so users can navigate throughout your API using their browser.
Markdown options – In addition to creating API documentation websites, DapperDox also provides a number of other formatting options that make it easy to generate Markdown (.md) files that can be used as a foundation for other documentation. This lets you quickly create API reference documents without having to install any additional tools on your computer.

Swagger UI

Swagger UI is an interactive API documentation generator that renders your Swagger/OAS files in human- and machine-readable formats so your users can explore them without having to install any special software.

Features include:

Mobile support – Swagger UI provides a number of options for customizing the user interface, making it easy to view your APIs on devices with small screens that require different formatting. It also supports apps like NativeScript that allow you to create mobile applications using JavaScript, which makes it ideal for creating cross-platform documentation.
Authentication & CORS – Swagger UI allows you to control both authentication and Cross Origin Resource Sharing (CORS) settings directly from the website interface, which means you don’t have to make changes to your code or create new pages to implement them.
Templates & localization – There are several pre-configured templates included with Swagger UI that can easily be imported into an existing project, and it also supports localization so you can display all of the documentation in different languages.

Closing

API documentation tools can help you quickly create, manage, and distribute your APIs so they are easier to use. While some have limited capabilities, there are many open source options available that will work with any application or framework.

This article was first published on backendless.com on February 4th, 2022.

Workflow Automation With Zapier and Backendless (Part 2)

Backendless — Thu, 10 Feb 2022 21:16:15 +0000

Zapier lets you automate workflows by using trigger events to initiate actions. In this demo, we show you how to automate sending an email in response to an object being created in your Backendless database.

To make this demonstration easier to consume, we have broken it into two parts. In the main part, you will see how to take a form created in Backendless and automate, using Zapier, two potential outcomes when that form is submitted.

To view a live example of the completed form, click here.

In this part, we take a detailed walk through the building of the form itself. We will get into the weeds of all components and logic included in this form so that you can easily follow along and recreate the form itself in its entirety.

We will also go through the setup of the approval page. When we’re done, you will have all of the setup in place to complete the automation using the other article.

To start, let’s revisit the workflow scenario that this demo will be working through.

Workflow scenario

We will consider automating the workflow of ordering office supplies.

In this scenario, if it is necessary to order office supplies, an employee fills out an order form and sends it for approval. If the order value is less than or equal to the specified limit (in our example 200), then the order is approved automatically.

However, if the order value exceeds the specified limit, then an email is automatically sent to the manager. The email will contain a link to a web page where the manager can see all the details of the order and then approve or reject it.

The decision made by the manager is displayed for the employee who made the order, and can also be displayed for other interested employees (for example, employees of the purchasing department).

Backendless Setup

Database tables

Our app has two tables. The first table PurchaseRequest stores information about the purchase request.

The request column stores information about the purchase request and is an array of objects in JSON format. This column does not have to be JSON, however. In our opinion, in a proper data model for an app of this type, this column would include a relation to a separate table referencing ordered supplies.

The Column isApproved will contain true if the order is approved and false if the order is rejected.

The column manager contains a relation to the second table Employees. The Employees table contains information about managers.

From the email column, we will take the email address for submitting the purchase request.

Order Page

The user interface is shown below. We will be creating this interface using UI Builder in Backendless.

To see a live example, click here.

What the employee making a purchase request sees:

What you see in UI Builder:

The user interface consists of a purchase order form in which the user can add, remove and select the required items as well as their quantity. The total price is calculated automatically.

The user interface includes a “form container” Block, which is a dynamic list. This dynamic list contains the following elements:

checkbox – this element allows you to select the items you want to delete. The logic is implemented so that when selecting items to delete, the last remaining item cannot be selected. The “Checked State Logic” property of this element has the following data binding: (Learn more about data binding here.)
select (“Select item”) – this element allows you to select the desired item. To set the items in a select dropdown, click on the CHANGE button under options: The “Value Logic” property of this element has the following data binding:
select (“Select quantity”) – this element allows you to select the desired number of items (in this example, 15 items are available for simplicity). The “Value Logic” property of this element has the following data binding:
textarea (“Enter a description”) – this element allows you to add a justification for the purchase. The “Value Logic” property of this element has the following data binding:
button (“Add Item”) – this element allows you to add an item to a purchase order.

The user interface also contains the following text elements:

“Total price” – which displays the total price of the order and has the following data binding:
“Status value” – which displays the current status of the order sending and has the following data binding:

Also the user interface contains two buttons: “Delete all selected items” and “Submit Purchase Request”. We will go over those buttons’ logic later.

The Codeless logic that is triggered when entering the page is shown below.

In this logic, we initialize an object (“Set Property “prices” in Page Data) with the values representing the prices for each item type. We then set the initial values for the elements “Total price” (0) and “Status” (Not saved).

Then we create a list with the initial object to the dynamic list. The only item in this list is a “None” item with price of 0 and quantity of 1; this item will excluded in the logic for submitting the order. This initial object includes the same properties (Value Logic and Check State Logic described above) of the elements in the dynamic list.

At the end of this block of logic, we load from the table “manager” the data of the manager who will approve the order (in this example, For simplicity, the first record from the table is loaded).

Let’s consider how the logic of individual elements of the UI works.

“Add Item” button

The logic “on Click Event” of the button is shown below. This button is used to add an item to the purchase list. This demo does not include logic that would prevent a user from adding the same item type more than once.

When you click on this button, a new item is added to the dynamic list (by creating a data object) and the “Status value” is changed to “Not saved”. Adding a new object to the dynamic list leads to corresponding changes in the UI.

The “Visibility Logic” logic for this button is shown below.

This logic hides the “Add Item” button on all items in the list except for the first (None) item. This will prevent the user from accidentally double-adding an item that they already added to the list.

“Delete all selected items” button

The logic “on Click Event” of the button is shown below. The purpose of this button is to remove all items from the purchase order list that the user has selected using the checkboxes.

A filter is used to delete items. From all objects of the existing dynamic list, the filter returns only those objects for which the value checkboxState = false (checkboxes without ticks).

Then, using the Map element, we create an array of new objects (clones) and assign it to the dynamic list.

Also in this block of logic, the “Status value” is changed to “Not saved” and the “Total price” is recalculated.

To recalculate the “Total price” function getTotalPrice is used, the logic of which is shown below.

“Checkbox”

The “Disabled State Logic” of the checkbox is shown below. This logic is designed to prevent the user from completely deleting all items.

It is arranged in such a way that if only one unchecked checkbox remains, then the disabled property of this checkbox is assigned the value true and the user cannot select this item for deletion.

To do this, in this block of logic, for each checkbox with the property checkboxState = false, we check whether it is a single checkbox with checkboxState = false. If so, then we make it disabled.

“Select item”

The “On Change Event Logic” of the select item select component is shown below. The purpose of this logic is to temporarily store in page data the item name, price, and total cost based on the quantity already selected. This temporary data can then be added to the item list when the “Add Item” button is clicked.

This logic writes the itemPrice property (the price of one item) to a dynamic list, depending on which item the user has selected. For this, the “prices” property from the “Page Data” is used, which is created when entering the page (in a real application, this data could be loaded from a separate database table). For the logic to work correctly, the names of the properties of the “prices” object and the values of the “Select item” are the same.

Also in this block of logic, the “Status value” is changed to “Not saved” and the “Total price” is recalculated.

“Select quantity”

The “On Change Event Logic” of the select quantity select component is shown below. This logic changes the “Status” value to “Not saved” and recalculates the “Total price”.

“Enter a description” (Text area)

The “On Change Event Logic” of the text area is shown below. This logic only changes the “Status value” to “Not saved” when text is entered in the text area.

“Submit Purchase Request ” button

When the user clicks the “Submit Purchase Request” button, the Submit event handler is launched. This logic checks that all required fields are filled, then submits the purchase request (stores it in the database). It will also inform the employee if the purchase order is automatically accepted.

The Submit event handler logic consists of three main blocks:

1) Validation

This block of logic checks that the user has selected an item and filled in the Description field. If the user has not filled in all these fields, then the message “Please fill in all fields” will be displayed in the Status and the logic will not be executed further.

2) Saving a purchase request to a database table

In this block of logic, we disable the “Submit Purchase Request” button, and then we take the data from the form and save it in the PurchaseRequest table. The creation of a new object in the PurchaseRequest table will be a signal (trigger) that will start the operation of Zapier.

After saving the data to the PurchaseRequest table, the server will return the ID of the saved object. We use this ID to establish a relation to the “Employee” table.

And at the end of this block of logic, we change the message in Status to “Your request has been submitted”.

3) Using logic in “RT Date Update Listener”

After a decision on the purchase order is made (automatically or by a manager), the isApproved field of the PurchaseRequest table will be changed to true (if approved) or false (if rejected). Updating the object in the table triggers the logic in the “RT Data Update Listener”.

The “RT Data Update Listener” logic will output to Status “Request has been approved” if isApproved is true or “Request has been rejected” if isApproved is false. The logic then unlocks the “Submit Purchase Request” button.

Approval Page

The user interface is shown below.

What the manager sees:

What you see in UI Builder:

The user interface includes a “container” Block, which is a dynamic list. This list will automatically be populated with the items added to the purchase order (see the On Page Enter logic below).

A dynamic list contains text elements that output information from the database table to the UI.

First, let’s look at the data binding for each of the text elements. This is done with “Content Logic” as follows:

Text element displaying “Item name”

Text element displaying “Item price”

Text element displaying “Quantity”

Text element displaying “Description”

Finally, the user interface contains a text element that displays the “Total price”:

Now let’s look at what happens when the user enters the page. When you enter the page, the data of the purchase request is loaded from the table using the ID obtained through the URL parameters. Then this data is output to the UI.

When you click on the “Approve” button, the isApproved property of the object is saved to the PurchaseRequest table with the value true.

Then the message “The purchase request was approved!” is displayed in the UI.

The “Reject” button works the same as the “Approve” button, except that the value false is stored in the table and the message “The purchase request was rejected!” is displayed in the user interface.

To Be Continued… With Zapier Integration

From this point, we will jump into the details of the automation itself, starting with setting up an email template in Backendless. To continue on with this workflow, head over to the main article.

Be sure to check out our other Zapier demo articles:

Thanks for reading, and as always, Happy Codeless Coding!

This article was originally published on backendless.com on February 1st, 2022.

Workflow Automation With Zapier and Backendless (Part 1)

Backendless — Thu, 10 Feb 2022 21:15:57 +0000

Zapier lets you automate workflows by using trigger events to initiate actions. In this article, we show you how to automate sending an email in response to an object being created in your Backendless database.

Backendless gives you the ability to create incredibly complex software, such as your own CRM system. With the help of Zapier, you can easily automate that system to initiate specific actions based on activities performed in your application.

Zapier can connect you with a variety of automation tools. These tools make it easy to automate time-consuming and time sensitive processes. In this article, we will create a workflow that has multiple outcomes based on the value of the items included.

The focus of this article is the automation using Zapier and Backendless Email Templates. We will only lightly touch on the construction of the form itself.

We have created a separate article that walks you through the building of the form in Backendless in full detail. If you are new to Backendless or app development in general, we suggest you start there.

Before we get into the process, let’s define the scenario that this workflow will be automating.

Workflow scenario

We will consider automating the workflow of ordering office supplies.

The decision made by the manager is displayed for the employee who made the order, and can also be displayed for other interested employees (for example, employees of the purchasing department).

Backendless Setup

Database tables

Our app has two tables. The first table, PurchaseRequest, stores information about the purchase request.

The Column isApproved will contain true if the order is approved and false if the order is rejected.

The column manager contains a relation to the second table Employees. The Employees table contains information about managers.

From the email column, we will take the email address for submitting the purchase request.

Order Page

The user interface is shown below. We will be creating this interface using UI Builder in Backendless.

To see a live example, click here. To go through a detailed walkthrough of building this page, click here.

The order form will have the following items available for request with the associated prices:

Pencils = 1
Pens = 2
Paper = 10
Staplers = 20
Monitor = 500
Computer = 1000

The Codeless logic that is triggered when entering the page is shown below. This logic establishes the items available, their prices, and creates an empty purchase request object that will be populated by the employee’s selections using the form.

In this logic, we initialize an object (Set Property “prices” in Page Data) with the values representing the prices for each item type. We then set the initial values for the elements “Total price” (0) and “Status” (Not saved).

Then we create a list with the initial object to the dynamic list. The only item in this list is a “None” item with price of 0 and quantity of 1; this item will be excluded in the logic for submitting the order. This initial object includes the properties that make up the purchase request JSON object we discusses previously.

At the end of this block of logic, we load from the table “manager” the data of the manager who will approve the order (in this example, for simplicity, the first record from the table is loaded).

“Submit Purchase Request ” Logic

When the employee clicks the “Submit Purchase Request” button, the Submit event handler is launched. This logic checks that all required fields are filled, then submits the purchase request (stores it in the database). It will also inform the employee if the purchase order is automatically accepted.

The Submit event handler logic consists of three main blocks:

1) Validation

2) Saving a purchase request to a database table

After saving the data to the PurchaseRequest table, the server will return the ID of the saved object. We use this ID to establish a relation to the “Employee” table.

And at the end of this block of logic, we change the message in Status to “Your request has been submitted”.

3) Using logic in “RT Date Update Listener”

Approval Page

The user interface that the manage will see is shown below. For a more detailed walkthrough of building this page, click here.

Let’s look at what happens when the manager enters the page. When you enter the page, the data of the purchase request is loaded from the table using the ID obtained through the URL parameters. Then this data is output to the UI.

When the manager clicks on the “Approve” button, the isApproved property of the object is saved to the PurchaseRequest table with the value true.

Then the message “The purchase request was approved!” is displayed in the UI.

Email template

Now that we have the UI ready, we also need to prepare an email template that will be sent to the manager for approval.

To do this, go to the Messaging tab in the Backend section of Backendless Console. Select the Emails tab. Create a new template as shown below.

The email template must contain a link to the approval page. In the parameters of this link, you should specify the ID of the saved object with the purchase request data.

The objectId will be assigned to the prepared template {id} in “Zapier”. This objectId will be needed to load the order data on the approval page.

Also, before using the automatic email sending feature, you need to configure the email settings: Backend –> Manage –> Email

You can find out more about setting up email here:

Zapier Workflow Setup

Now let’s move to the Zapier side. If you don’t have an account with Zapier, you will first need to register and log into your Zapier account. A free account is all you will need for this demo.

Creating automation with Zapier will consist of three steps. Let’s jump right in.

Step 1 – Define a trigger

The first thing we need to do is to define a Trigger. Triggers are actions Zapier uses to start performing an action. In our case, saving the purchase request (data object) to the database will act as a trigger.

In the “App Event” field, select Backendless.

In the “Trigger Event” drop-down list, select “Object Created” and click the “Continue” button.

Next, you will need to enter your credentials with which you log into Backendless Console and click the continue button.

If you used a social account to register with Backendless, you will need to add a password for your account. To add a password, visit your developer profile here:

In the trigger settings, you need to select the name of your Backendless app and the name of the table into which the object is saved, then click the continue button.

Then we need to test our trigger.

If the test is successful, the purchase request (data object) that was saved to the table will be displayed.

Step 2 – Set up a workflow trigger action

Now that we have Zapier set up to recognize the trigger, we need to define what action will be taken when the trigger occurs. In this case, we will need to identify the appropriate manager to contact.

If you look at the purchase request data that loaded during testing at the first step, you can see that there is no manager column there. This column contains a relation to the Employee table, from which we need to get the manager’s email. We will get this data in the second step.

Select the “Backendless” application from the drop-down list and select “Find Object” from the “Action Event” list. Click the continue button.

Then select your Backendless account and fill in the fields as shown below.

Please note that when filling in the “Where Clause” field, you must use single quotes ' as shown in the figure. Click the continue button.

Perform testing. If the test is successful, then we will receive an object with a purchase request along with information about the manager.

Step 3 – Defining a conditional action

Finally, we need to determine whether the new purchase order requires a manager’s approval or not, using our $200 limit. If the request does not require manager approval, we will update it as approved in the database. If it does require approval, we will set up an automation to send the manager an email with a link to the approval page.

This third step will have two branches. The first branch will be executed when the order value is equal to or less than 200 (in this case, the approval of the purchase order will be performed automatically). The second branch will be executed if the order value exceeds 200 (in this case, an email will be sent to the manager for approval).

First Branch

Let’s set the name “Price <= 200” and the rule for the first branch:

Note: At time of publication, Zapier does not provide the “less or equal” option; therefore, in order for the logic to work correctly, we set the value 200.01.

Next, you need to set the action that will be performed for this condition. In our case, it will be “Object update”.

Click the “Сontinue” button and then select the Backendless account.

Set up the action as shown below:

Here we save in the isApproved field of the PurchaseRequest table the value true.

Perform testing. If the test is successful, the true value will be saved in the isApproved field (during testing, the “Price <= 200” condition is not checked).

Second Branch

Now you need to configure the second branch of the workflow that will be executed on the “Price > 200” condition.

In order to proceed to editing the second branch, you can use the menu at the top left.

Let’s set the name “Price>200” and the rule for the second branch:

Next, you need to set the action that will be performed for this condition. In this case, the action is sending an email to the manager. We will use Backendless to send email.

Click the “Сontinue” button and then select the Backendless account.

Set up the action as shown below:

Note that here we select the template that was previously created in Section 2 of this article, “Email template”. Also, in the id template created in that section, we pass the value ObjectId.

Perform testing. If testing is successful, an email will be sent with a link to the approval page.

Now all settings in “Zapier” are done. Click the “Turn on Zap” button and you’re ready to go! Your Zapier workflow is now up and running.

View the finished product: Live demo

Be sure to check out our other Zapier demo articles:

Thanks for reading, and as always, Happy Codeless Coding!

This article was first published on backendless.com on February 1, 2022.

Flutter vs. React Native: Which is Better in 2022

Backendless — Wed, 02 Feb 2022 20:44:44 +0000

As mobile app development continues to grow in popularity, businesses are looking for ways to create cross-platform apps that can be used on a variety of devices.

When we say cross-platform, we of course refer to Android and iOS. Per Statista:

Android maintained its position as the leading mobile operating system worldwide in June 2021, controlling the mobile OS market with a close to 73 percent share. Google’s Android and Apple’s iOS jointly possess over 99 percent of the global market share.

In this article, we will compare two popular frameworks for cross-platform development: Flutter and React Native. We will look at the pros and cons of each framework and discuss which one is better suited for use in 2022.

Contents

1. Why is mobile app development so popular?

2. What is cross-platform app development?

3. The history of Flutter and React Native

4. How Flutter and React Native compare

5. How cross-platform development frameworks work

6. Building mobile apps is fun again

7. Pros and cons of Flutter and React Native Apps

8. Is Flutter or React Native easier to learn?

9. The Best Backend for Flutter

10. The Best Backend for React Native

11. Flutter vs. React Native in 2022

12. Closing

13. FAQs

Why is mobile app development so popular?

Developing mobile applications is a steadily growing business niche. Virtually all people on the planet have mobile phones, which means a nearly unlimited number of potential users. Consequently, there are apps for almost everything nowadays.

You can choose many ways to design and build an app. You can either use native methods, e.g. Swift and Objective-C for creating iOS apps and Java for Android apps. These are the official Apple / Google software programming languages, respectively, which provides support and frequently updated features.

Alternately, you may use cross-platform frameworks such as Flutter or React Native.

What is cross-platform app development?

Before we begin, let’s define the term “cross-platform app development” and divide it into two categories: Hybrid Development and Native Development.

Cross-platform apps are apps that can be developed using a single codebase and function virtually identically on both iOS and Android operating systems. (In this article, we are focusing on mobile app development; we talk more about web and desktop apps here.)

Hybrid Development

Hybrid apps are developed with a combination of web technologies such as HTML5, CSS and JavaScript. This means that hybrid apps share some code across platforms (e.g. the HTML/CSS/JS code) and this shared code runs in a webview on the target platform.

WebView apps are hybrid apps that use embedded webviews to render their user interface, within which you can use HTML5, CSS and JavaScript for customization.

WebView apps will have some limitations in accessing the device API out of the box, requiring additional effort to achieve some of the same functionality as native apps. The trade-off is that these apps are cross-platform out of the box, which can be a significant time saver.

Hybrid apps may look the same on both platforms but behave differently, depending on platform-specific APIs available to them. E.g. a weather app would check the API of the current location’s weather service on both platforms and return different data according to what is available on each platform.

Native Development

Native apps are developed with the native SDKs of their target platforms (e.g. Android or iOS). This means that they do not share any code across platforms and this shared code is written only for the targeted platform, whereas the UI is implemented using platform-specific widgets and libraries.

Native apps provide a better user experience than Hybrid apps and also look more native on each platform, but they cost more to develop and take longer to release new features due to the time needed for developers to learn the APIs of the target platforms.

In general, it is ideal to develop your app using the native development tool of their target platforms (e.g. Android Studio or Xcode).

Flutter and React Native: Cross-Platform Frameworks

Both Flutter and React Native are among the best cross-platform development frameworks available today. They both use native widgets to deliver a highly customizable, responsive UI while sharing code across different platforms.

The Flutter framework is developed by Google while the React Native framework is developed by Facebook, so these tech giants have very large teams dealing with everything from the platform’s SDKs to its documentation, support, etc.

While Flutter and React Native apps are both native, they are advantageous over traditional native app development because they can share a significant proportion of their codebase across platforms.

According to Instagram, the amount of code shared between iOS and Android via their React Native features was over 90%.

The history of Flutter and React Native

Flutter was announced at the Dart Developer Summit in October of 2016. The main idea behind this cross-platform mobile app development framework is to give developers tools to build native apps for iOS and Android using one single codebase written in Google’s own Dart programming language.

The first stable release (1.0) of Flutter came out on February 16, 2018.

React Native started a little bit earlier than Flutter, having its first beta version released on March 2015, however it didn’t manage to leave the beta phase until March 2017. On September 5, 2017 React Native reached version 1.0 with huge support from tech giant Facebook.

As you can see both technologies are relatively new, but don’t let that fool you. React Native is already used by big players like Facebook, Instagram, Airbnb and Uber.

Flutter doesn’t boast the same big names, but has already been embraced by BMW, Toyota, eBay and, of course, Google’s own Google Pay.

How Flutter and React Native compare

The main difference between Flutter and React Native is that React Native does not compile into a native mobile language (Java, Swift, Objective-C), but rather simply runs its JavaScript code. Flutter, on the other hand, compiles its Dart language into native, which can impact performance (discussed later).

Another big difference is that vanilla JavaScript (besides JSX) is used for writing components on React Native. Facebook developers recommend using Flow or TypeScript when with React due to its dynamic nature. For Flutter, Google recommends using Dart for writing code as well because of its static typing system.

In our opinion, the decision on which of these 2 technologies to choose should be based more on your preferences rather than on their actual features and capabilities.

Of course it’s good to know all programming paradigms so you can easily pick up new languages and frameworks even if they’re not written in a language you’re familiar with.

Programmers who are already familiar with JavaScript (ES2015+) or TypeScript/Flow will find it much easier to start working with React Native. This is particularly true of developers that have used React for the web, as there is a great deal of overlap between React and React Native.

JavaScript still has a significant market share in the mobile development space, and because both React Native and Flutter allow you to choose your favorite programming language, it’s hard to say which one will be more popular in 2022.

There are also other important factors that might influence this decision, such as:

– Companies’ preference toward a specific technology stack

– Developer’s familiarity with a given language/framework

– Availability of developers with skills necessary for using a specific technology

As we have already pointed out, React Native and Flutter are both going to be significant players in 2022, so it’s up to you to choose which is the best option for your long term goals.

How cross-platform development frameworks work

Although cross-platform mobile development frameworks share many concepts and features, they’re each created with different goals in mind.

React Native was designed to provide native code performance combined with the ease of development that React web brings into the table. The idea is not to use a single set of shared components between iOS and Android but instead to have completely separate UI’s wrapped into a single JavaScript bundle, allowing you to ship almost half of the app’s code in a single place.

Flutter was created mainly to fulfill Google’s needs for… Google. In other words, another attempt at marrying fast development cycles with native code performance and building reusable UI components that can be shared between iOS and Android apps. This is why Google’s Flutter is so much faster than React Native.

Flutter was also designed with the idea of making app development easier and more accessible because it allows writing code using Dart, a language that can be learned in a weekend and mastered in days or even hours depending on the developer’s skillset.

This is why we believe that Flutter will be the mobile development framework of choice for companies that need to create lots of native mobile apps very quickly without sacrificing performance or features.

Building mobile apps is fun again

When Google announced Flutter, developers were stunned by how well it performs in practice compared to other technologies developed specifically for the purpose of building cross-platform mobile applications.

React Native’s philosophy of sharing UI code between iOS and Android was a great initiative, but due to React Native’s inherent limitations, the resulting apps cannot perform as well as native ones.

Flutter comes with a lot of goodies that you will not find in any other tool today. Dart is an impressive language that has been built from the ground up for the purpose of creating mobile apps.

Dart is currently the fastest language available for building Android and iOS apps, makes it easier to build performant UI components, has great IDE (integrated development environment) support with powerful autocompletion features, allows doing live coding prototyping without losing app state, and finally embraces object-oriented programming by making it mandatory.

Having an opinionated framework means that Google will be able to make many important decisions for you, allowing the community to focus on what’s truly important – building apps.

Flutter came with a complete toolchain and a beautiful Material Design-like set of widgets that developers can reuse in their apps. Google has also created a number of integrations with 3rd party libraries such as image-processing libraries for handling images in an efficient way, SQL databases (made accessible through abstractions), and text editors.

All of this is presented to developers as a cohesive package that has been designed with speed, ease of use, productivity, and performance in mind.

Pros and cons of Flutter and React Native Apps

Apps created with Flutter are indistinguishable from native ones. They come with the same performance and the same look & feel (apart from some platform-specific stylistic aspects).

The main issues that people usually complain about when building apps using React Native are related to its runtime environment, which is heavier than managing separate processes for each architecture. This means that you will not be able to pull off a pure native app performance using React Native, although you can get close.

Flutter does not come with the same benefits as React Native in terms of supporting existing JavaScript codebases and allowing reuse of some components shared between apps for iOS and Android.

Now, let’s dive a little deeper into the technical pros and cons of these two frameworks.

Pros and cons in terms of native performance

React Native comes with an improved JavaScript virtual machine that is faster than V8 thanks to its JIT compiler. It also benefits from being an ahead-of-time compiled framework, which means that you are free to ship whatever codebase you need because it will be compiled into a native executable.

In practice, React Native is as fast as pure native apps because it can achieve the same performance of an iOS app without requiring any changes to the iOS build settings.

Flutter comes with its own Ahead-of-time compiler that will emit optimized code for both iOS and Android once you have built your project. You get native performance without having to ship the whole codebase in your application binary just like with React Native.

Pros and cons in terms of app size

React Native apps usually come with a JavaScript runtime that weighs about 300kb gzipped, although it is possible to reduce this number by tweaking some options such as Bypass filling (which will force React Native to skip a process of filling its virtual DOM with the result of diffing it against the native UI) as well as by setting useDeveloperMode to true (which will resize images in memory and reduce their quality).

Flutter comes with an ahead-of-time compiler that allows developers to ship only the codebase needed for the app they are building without having to bundle anything with it.

It is possible to run Flutter inside an existing JavaScript VM if you want to, which will allow you to save on the space needed for your app.

Pros and cons in terms of minimal required SDK version

React Native can usually be built against any iOS 9+ or Android 5.0+ SDK without any problem, but it goes without saying that to achieve the best performance you should target the latest SDK versions available at the time of your release.

In practice, React Native apps can be built against older iOS and Android SDKs with a limited set of features being available at runtime, although to get all the features you should still target the latest SDK versions available.

Flutter apps can be built against Android version 21 (Lollipop) and newer, although it is recommended to build against the latest SDK versions available for best performance.

Flutter can be run on iOS 8 or newer but calling some APIs may result in runtime crashes given that Apple has deprecated most of the APIs that Flutter uses.

Pros and cons in terms of UI development

Flutter comes with its own set of widgets for rendering the UI, which means that you can reuse existing iOS or Android code when building Flutter apps.

Some third party libraries are available for making it easier to reuse existing native components, although this is still a work in progress as it is not easy to map Flutter widgets to existing iOS and Android UI components.

React Native comes with a bridge that allows you to reuse existing iOS and Android code as JavaScript modules as well as exposing some APIs for manually creating the bridge between your native UI components and the JavaScript code that will handle rendering them.

Pros and cons in terms of debugging

React Native comes with its own debugger that can be attached to your running app on iOS and Android, which provides developers with a preview of the current state of the JavaScript virtual machine along with various tools for inspecting memory usage or tweaking some options on the fly.

Flutter comes with its own debugger as well, which can be attached to your running app on iOS and Android providing developers with a preview of the current state of the rendering engine as well as various tools for inspecting memory usage or tweaking some options on the fly.

Pros and cons in terms of code reuse between mobile platforms

React Native comes with its own set of APIs that can be used when developing both iOS and Android. Although most companies using React Native will develop their apps on one platform first (usually iOS) before porting them to the other platform, it is also possible to write shared components between your iOS and Android applications if you so wish.

Flutter apps are built with code that is platform specific, so it is not possible to share any code between your iOS and Android application. However, third party libraries are available for making it easier to reuse existing native components.

Is Flutter or React Native easier to learn?

Both React Native and Flutter are equally easy to learn (in terms of APIs), although this will depend on the expertise of the developer. Both have a large and engaged developer community that can help new developers and is consistently creating new tools and components.

For a brand new developer with little or no coding experience, we would probably recommend starting with React Native as it comes with a set of predefined components that can be used to build iOS and Android apps, which means that you can learn one thing at a time without having to worry about learning all the APIs used for rendering views.

However, we would probably recommend to choose Flutter over React Native for a developer with some coding experience, as the APIs offered by Flutter are closer to what you can find in both iOS and Android.

In addition, the team behind Flutter is focusing greatly on ensuring that the development experience offered by Flutter can compete with the development experience offered by the other SDKs out there (including React Native).

The Best Backend for Flutter

It may seem that a Backend as a Service (BaaS) like Google’s own Firebase would be the best choice for supporting a Flutter app, but the reality is quite different.

Backendless provides a much more complete and affordable backend solution for Flutter apps. The Backendless Flutter SDK enables you to interact not only with Flutter mobile apps, but also with Flutter Web, designed for web and desktop apps.

Backendless includes all of the elements necessary for a complete and scalable backend. These features include:

The Best Backend for React Native

Unlink Flutter, there is no “on brand” backend for React Native. Similar to Flutter, however, React Native apps integrate very effectively with BaaS platforms like Backendless.

The same features Backendless provides for Flutter developers are available for React Native developers to include as well. For a React Native developer looking to maximize their development efficiency, BaaS solutions can take a large portion of backend development tasks off of your hands, allowing you to focus on producing the best UI and UX possible.

Flutter vs. React Native in 2022

React Native came out in 2015 and since then it has been used by many companies. The JavaScript world changes very fast so React Native has also evolved over time to include new features thanks to the contributions of the open source community.

Flutter is a much newer technology that can feel quite alien if you are coming from the Android or iOS world. Google has put a lot of effort on making it extremely easy to learn, so most people that are familiar with iOS or Android development should be able to pick it up in no time.

Closing

Flutter and React Native are both excellent choices for cross-platform application development. While they share some similarities, there are also some key differences that you should be aware of before deciding which one to use.

Choosing the right cross-platform framework for your business application or startup app idea depends largely on your development experience, development team, and which native elements your project needs to access.

We hope this article will help you make an informed decision about which framework is right for your next project.

Frequently Asked Questions

What is the difference between web development and mobile development?

Web development and mobile development both create online and offline applications, but they do it in different ways. Mobile apps require a mobile operating system such as iOS or Android to run whereas web apps can run on any device with a web browser.

What is Flutter?

Flutter is an open source mobile application development framework created by Google. It allows developers to build native mobile apps for Android and iOS from a single codebase.

What is React Native?

React Native is an open source mobile app development framework created by Facebook. It allows developers to build native mobile apps for Android and iOS from a single codebase.

Can React Native be used to develop apps for the web?

No, React Native is a framework for creating native mobile apps
only. However, React Native is the mobile equivalent of ReactJs, which is a popular framework for creating web applications. This article compares the two in detail.

Can Flutter be used to develop apps for the web?

Yes. Flutter supports the use of standards-based web technologies such as HTML, CSS, and JavaScript to generate web content. With the web support, you may compile existing Flutter code written in Dart into a browser client experience that is hosted on any website and deployed to any web server.

This article was originally published on backendless.com on January 25, 2022.

DEV Community: Backendless

How To Integrate A FlutterFlow App With A Backendless Backend (Complete Tutorial)

Try Backendless For Free To Power Up Your FlutterFlow App

Table of Contents

What is FlutterFlow?

Frontend vs Backend Development – and Why It Matters

Benefits of Adding a Backendless Backend and Database

How to Integrate a FlutterFlow App with a Backendless Backend

User Registration

Login with Backendless

Run a Query in Backendless

Create New Object in Backendless

Edit an Existing Object in Backendless

Sending Email with Template

Conclusion

Join the Free Database Training Course From Backendless

1. Data Tables, Columns and Records

2. About Data Types

3. Adding Data Records

4. String and Text Data Types

5. Multiple Choice Data Type

6. Numeric Data Types

7. Auto Number Data Type

8. DateTime Data Type

9. Boolean Data Type

10. File Reference Data Type

11. JSON Data Type

12. Money Data Type

13. Color Data Type

14. Data Import and API Setup

15. What is API?

16. Basic Data Retrieval API

17. Data Retrieval With Sorting

18. Requesting Specific Properties

19. Excluding Specific Properties

20. About the Where Clause

21. Where Clause Operators and Data Types

22. Database Functions

23. Data Paging

24. Retrieve an Object by ID

25. Object Update API

26. Object Delete API

27. Bulk Create API

28. Bulk Delete API

29. Bulk Update API

30. Object Upsert API

Conclusion

More Videos Coming Weekly

Redis: What It Is, What It Does, and Why You Should Care

What is Redis?

In-memory database

Redis persistence

What is Redis used for?

What are key-value pairs?

Rich data structures

Chat and messaging applications

Session store

What are the benefits of Redis?

What is Lua scripting?

What are the drawbacks of using Redis?

Closing

Try Backendless Free For 30 Days

Frequently Asked Questions

How does Redis compare to other NoSQL database systems?

Custom ReactJS UI Components in Backendless UI Builder

Table of Contents

Set Up Backendless

UI Components Location

Creating New Custom UI Component

Custom Component Logic

Styling UI Components

Component Properties

Component Property With Data Binding

Component Event Handlers

Component Actions

Use Third-Party Libraries

Marketplace

Closing

2FA Login Plugin Featuring TOTP

What is 2-Factor Authentication (2FA)?

1. Verify that the user entered values in the email and password fields

1. Verify that the user has entered values in the Bubble app’s login and password fields