We are excited to announce the release of our first-ever Masterclass for Backendless’ UI Builder. With this free course, you will learn how to take your no-code app to the next level!
Recently, we released our introductory course designed to teach you the basics of our new UI Builder. The introductory course explains many of the components you will use in UI Builder to create your app.
With over six hours of instruction, the Masterclass dives much deeper into the functionality of UI Builder. You will get first-hand experience working with tons of features in Backendless, ranging from simple to complex.
The course is focused on building no-code apps with Backendless’ Codeless technology. As such, we will discuss both the practical uses and the principles behind codeless programming.
We will discuss things like variables, loops, and conditions as well as some of the debugging elements available in Backendless. While this course will not cover a lot of backend topics, you will get a good introduction to some backend concepts.
Then, you can complete our backend course (coming soon) to fill in any gaps. Much of what you learn in this Masterclass will be applicable to backend tasks such as creating API Services.
The Masterclass also explores User Management in a big way. You will learn how to implement user registration, user login, and “remember login” functionality.
Following this Masterclass, you will be well-versed in UI Builder, including:
Codeless Programming,
Database Integration,
Image Component,
Google Maps Component,
and more.
In this article, we are going to walk you through a brief description of the lessons you’ll be learning.
All videos in this course should be watched in the order in which they appear.
Many of the lessons build upon previous lessons, meaning you’ll want to follow along in order. Once you’ve completed the course, you’ll be ready to build virtually any app you can imagine!
First Steps – Developing a No-Code App With Database Integration
If a tutorial doesn’t start with the Hello World, it must not be a serious one, right? Maybe not, but still, let’s keep the tradition going and start our learning experience by saying “Hello Codeless World!”
In the first two videos, we explore the basics of database integration. You will build a basic app that retrieves data from the database and renders it in the user interface.
Configure the Container component to have the “Dynamic List Behavior”;
Add the Text component to Container;
Use data binding with the Text component’s value;
Retrieve data from the database;
Set the retrieved database data as the data source for Container;
Use sorting parameters in the database query;
Retrieve related data objects and display them in the UI.
Developing the “Playground Page”
The “Playground page” is used throughout this Masterclass. It is a page containing layout and logic that helps us see how the program runs.
The Playground page consists of two areas: the work area and the log output. There is logic in the page that makes it easier for you to add logging messages and see them right on the page.
In the second part of the lecture, we will make improvements to the Playground page to make it more developer-friendly.
Now that you’re familiar with creating a layout in UI Builder, it’s time to jump into Codeless programming. Over this nine-video segment of the Masterclass, you will get in-depth instruction on building no-code logic in your Backendless project.
Let’s briefly walk through the purpose of each of the topics in this series.
Discuss what conditional statements are and how to use them in Codeless programming. We will build a basic calculator application using the conditional block.
Explore collections (similar to arrays and lists in other frameworks). We define collections as any time data are grouped together logically. In Codeless, the List block allows you to work with collections.
Errors are inevitable, so the more prepared your app is to handle errors, the more stable your app will be. Backendless Codeless includes a special block specifically designed to add error handling logic.
Learn to track down and eliminate bugs in your application. This is a challenge unique to no-code apps as you cannot read through the code. Our preferred approach: Logging.
User Management
If your app features user registration and login functionality – and anymore, what app doesn’t? – then this section is for you. We walk you through how to set up your user registration, user login, and “remember me” functionality.
Oh, and of course, all of these items are implemented without coding.
Perhaps the #1 benefit of using Backendless over building your frontend and backend separately is that you get automatic, easy database integration. In this section of the course, we illustrate some of those key benefits.
Dive deep into the data retrieval process within Codeless. In this video, we show you how you can retrieve data objects from your database and the multitude of ways you can modify the retrieval query to fit your needs.
The Image component is very dynamic because the image to be displayed can be set in your backend. That means that you can easily replace images – for example, short-term discounts – without having to update the entire app.
Rendering Images From Backendless File Storage (watch)
In this video, you get to see how to use the Files API to populate your app with images from your File Storage.
About The Maps Component
Earlier this year, we completely reimagined our Geolocation approach. Now, all of your geopoints are stored in your database just like any other data object, making them much easier to work with.
In this three-part section, we take a look at the Map component and explain how you can customize it to fit your needs. As always, our no-code demos can be completed with Codeless logic.
Explore the Map component, including a quick overview of the setup required. Backendless uses Google Maps for the component, which means you must get an API key from Google.
Once the map is in place, you will walk through many of the configuration options for the map. Finally, you will learn how to center the map on a specified location using Codeless logic.
This video demonstrates how you can control the zoom level on your Google Maps component using Codeless logic.
Query Database For Geopoints on Pan and Zoom (watch)
With the Map component, you can display all applicable geopoints to the user as they zoom in and out. If there are too many points, you can easily add logic to create groups of points or to hide and show only certain points.
Obtaining User’s Location And Rendering It On The Map (watch)
Learn to programmatically obtain a user’s location (with permission from the user) and then display that data on a map.
Think you’ve got what it takes to Master UI Builder?
Learn the ins and outs of Backendless Database, our robust and scalable visual relational DB, with this free video course from Backendless CEO Mark Piller. New videos released weekly, so leave your feedback to shape future parts!
FlutterFlow is a low-code mobile app builder utilizing Flutter as its foundation. When you integrate a feature-rich Backendless backend with your FlutterFlow app, you get a visual relational database, user management, bulletproof security, highly-scalable serverless hosting, and much more.
A snackbar or “toast” element is a message displayed to the user, usually on a temporary basis over a few seconds. It’s great for alerting the user to something without requiring any action. Think of a success message, a confirmation, or an error alert of some kind.
