Demo: How to Build a No-Code to-Do App With UI Builder
In this step-by-step demo of Backendless UI Builder, we walk you through the creation of a fully Codeless To-Do app. UI Builder is a no-code, drag-and-drop interface for building the frontend of your Backendless app.
Join the DZone community and get the full member experience.Join For Free
With "no-code" tools, anyone can build a mobile or web app faster than ever before. In this step-by-step demo of Backendless UI Builder, we walk you through the creation of a fully Codeless To-Do app.
The Backendless UI Builder is one of our favorite features in Version 6. UI Builder is a no-code, drag-and-drop interface for building the frontend of your app. Whether your app is mobile, web, or both, you can design for all platforms.
In the video demo above, we walk you through building a "To-Do list" app without coding by using Backendless for both the frontend and the backend. You may be asking yourself, "Another To-Do app?"
We chose to do a To-Do app because it can easily showcase all four CRUD operations: create, retrieve, update, and delete. These operations are the four basic functions required for a client application to interact with a database - in this case, Backendless Database.
As we discuss more below, the synergy between front-end and back-end is what sets us apart from other visual app development platforms (VADPs). We want to make it as easy as possible to enable your app to work with your database.
In the above video, Mark will walk you through much of the functionality of UI Builder, such as:
- No-Code Components
- CRUD Operations
- Data Binding
- Codeless Logic
- Mobile And Web Development
No-Code Components in UI Builder
Components are the building blocks of your application's client-side: they are the various elements that make up the user interface for your app. Components include items like text boxes, list containers, checkboxes, buttons, forms, and much more. This video showcases some simple use cases for a number of common components.
UI Builder lets you highly customize every component without code. Thanks to our no-code approach to the platform, changing things like component size, color, position, font, etc. is super easy.
We won't get into every single component in this video as there are quite a few for you to choose from.
As mentioned above, one of the biggest differences between Backendless and other VADPs is how tightly integrated your frontend and backend are with Backendless. Our goal with your backend is to offer you virtually unlimited functionality while making it so simple to start that anyone can do it.
We want to make it possible for even beginning developers with simple apps to be able to easily build interactions with their database. Thus, we have made accessing the CRUD operations extremely easy and intuitive.
In the video, Mark makes sure to cover each element of CRUD, showing how a simple To-Do app still needs all four operations to function:
- Create new to-do list items
- Retrieve items that still need to be completed
- Update items as they are completed
- Delete items that are completed or are no longer necessary to complete
Data Binding in UI Builder
Data binding is a complicated-sounding concept that is both simple yet critical to Backendless apps. It is "the Force" that empowers your UI to impact, and be impacted by, your data.
So what actually is data binding? Data binding is when we map properties from a data object to a UI element. Thus, that element is modified in some way (appearance, behavior) based on the state of a particular property. That state can be changed on the frontend by user actions or on the backend within the database itself.
Below is an example of how to set data binding in UI Builder. In the Logic tab of the component (in this case, an Input box), you will have the option to name the data object that the input box is bound to.
For example, let's say we have a checkbox component. We want to bind that component to the
"DONE" property of the to-do list data object. Thus, when the data is received, it communicates to the component whether
false. That determines whether the checkbox is checked (
true) or not (
This data property can be changed by the user's actions. So in the above example, if the user "checks" an unchecked checkbox, the data property bound to that element (
"DONE") would switch from
Codeless Logic in UI Builder
If there was one thing at the front of mind when we were designing Version 6, it was "how can we make this codeless?" UI Builder is designed to be completely codeless, including the logic. Of course, you can add your own code if you want to.
Not all logic needs to be handled by the backend. There are many instances where you want the user's actions - where they click, where they scroll, data they enter, etc. - to dictate what your app does.
However, you don't want to have to send an API call to the backend for every little action. UI Builder is designed so that all components can have their own individual logic. Not only that but the logic can all be built using our Codeless feature, no code required.
The above example from the video shows how to implement the deletion of a "to-do" item in the database and in the UI. With the Codeless logic shown, we have set up the button so that "On Click", an API call will be sent to the backend to delete
"Row1 data" from the
"Task" table. Additionally, the function will remove the deleted item from the UI by modifying the Dynamic List.
Let's look at another example. Perhaps you want a button in your app to navigate to another page, but that page is dependent on the user's profile preferences. It would not make sense to put this simple logic on the backend (although you could if you wanted). Instead, we can tie this logic to the button in UI Builder. Piece of cake!
Develop For Everywhere
UI Builder was built with all three of the major device types in mind: phone, tablet, and PC/laptop (web). UI Builder lets you easily switch between views. That way, you can ensure that your application looks just as slick on a user's computer as it does on their phone.
As you develop, you will of course want to test across different platforms. UI Builder's preview mode makes it easy to test your app in your laptop's browser while also being super easy to see what it looks like on any phone or tablet.
When you choose to preview for mobile, you will be presented with a QR code. Simply scan this code with the device you want to test with to view the app in your phone's web browser.
This video and article merely scratch the surface of what UI Builder can do. If you have any questions about UI Builder that aren't addressed here, leave a comment. As always, Happy N0-Code Coding!
Opinions expressed by DZone contributors are their own.