UI Builder by Backendless is more than just a feature, it’s practically a whole product on its own. UI Builder is our Codeless visual app development tool that lets you create the frontend UX/UI of your app without writing a single line of code.
Visual Studio tools for Xamarin Create rich native apps using.NET across iOS, Android & Windows. Share code across device platforms with.NET Standard. Mobile angular UI is a free hybrid mobile app development tool which allows you to build HTML5 Mobile Apps with Bootstrap and Angular JS. It’s very similar to Sencha Touch and jQuery Mobile. It also provides switches, overlays, sidebars, scrollable areas, and absolute positioned top and bottom navbars that don’t bounce on scroll, and makes. Xamarin development allows you to develop Android, iOS, OS X, and Windows applications using Visual Studio and C#. It allows you to share code between your Android and iOS app and compile it into native code. It also provides the advantages of native UI, native.
To learn UI Builder step-by-step, check out all of our video guides here.
(Updated January 19, 2021.)
UI Builder makes it super easy to create an application for mobile or web. In this article, we are going to dive into some of the features you’ll be working with as you build your Backendless frontend.
Let’s get started!
Why A Visual App Builder?
Since the dawn of time (ok, not quite), one of the greatest barriers to entry for becoming a programmer has been learning to code. Not only is coding a skill that takes years to become good at (does anyone ever really “master” coding?), it’s extremely difficult to get started because:
- There are so many languages – Which do you start with? Oh, and every coder has a different answer based on their experience and personal history. Not only that, but your language choice also depends on your deployment method. Do you want to build a web app? There are languages for that. A mobile app? Yep. An iOS- or Android-only app? Of course. Do you need a database? Backend logic? Public API services? Yes, yes, yes. Which language is right for your app?
- You don’t know what you don’t know – Just getting your development environment set up properly on your computer takes a level of computer expertise that most lack.
- Building an app takes time – Once you’ve settled on a framework for your app, you still need to design, build, test, iterate, build, test… If you’re brand new to programming or choosing to outsource your app development, these stages can be painfully slow. In the latter case, it can also get very expensive very quickly.
- Building an effective user interface is no simple task – Even if you have a clear vision of what you want your app to look like (and there’s no guarantee it’s what your users want), being able to successfully create that look from a blank canvas can be overwhelming. This is especially true if you’re trying to build a professional-looking app from scratch in a coding language you’re just learning.
- Creating UX/UI can become mundane – Sure, the creative side is fun when you’re in the design stage. But when the time comes to actually implement that design in your app, frontend coding can become quite mundane. This is particularly true when you reach the testing stage, where you may spend hours trying to get your app to look and work just right on every device.
- What do you do when the app is “done”? Do you go serverless? What does serverless even mean?
For beginning programmers, even the phrase “build an app” can be intimidating.
Lowering The Barrier
Our goal with UI Builder is to lower that barrier and make it much easier to get started bringing your idea to life. UI Builder addresses all of the above concerns:
- By definition, Codeless means you don’t have to learn any languages. Instead, you simply need to invest some time to learn the functions available in the Codeless library. Then, you can build anything you want visually. Plus, Backendless apps built with UI Builder are all cross-platform, meaning they will work on iOS, Android, and the web automatically. You only need to worry about which platforms to make it available on, not whether or not it will work on that platform.
- You can follow a step-by-step demo, start with an App Blueprint, experiment with our Code Generators, or dive right in. Whatever your preferred method of getting started, we have that option.
- Once you’ve established your design, UI Builder’s visual app development approach lets you quickly put it together. We also give you UI Themes, which give you the ability to add custom CSS/LESS to make every component in your app unique and consistent. Then, testing is as simple as clicking a button to preview the app on your computer or phone. You can make changes, test, and repeat in a matter of seconds.
- In a way, “coding” your frontend is like trying to describe with words what you want your app to do and look like – but in a language you’re brand new to! With Backendless, you build everything visually. You can easily see what the changes and additions you make will look like even before you enter preview mode. This makes testing much easier because you have a good idea of what the app looks like before you hit the Preview button.
- You don’t want to spend all your time building your app, you want to spend your time using and improving it. With our visual app builder, getting from the blank page to a functioning app is fast and easy. Consequently, testing and improving that app is fast and easy, too!
- We strongly recommend serverless for beginning developers because setting up and managing servers is much more work than it’s worth in the early stages of your app’s life. Backendless’s serverless infrastructure can easily scale with your app, or you can eventually graduate to Managed Backendless or Backendless Pro. These services put your app on your own servers, managed by either our team (Managed) or yours (Pro).
How To Build Apps Visually – No Code
With UI Builder, your app essentially consists of three layers: pages, components, and logic. Let’s take a look at how you’ll use each of these.
Pages
Pages are, of course, the pages or screens that the user will be able to visit in your app. When you create your first app in Backendless, there are two pages that will be automatically generated for you to get you started: landing and 404.
The landing page is the page that the user will visit first when they open your app. For some apps, this would be your login/sign-up page. For others, it may be a newsfeed, menu, storefront, etc.
Pages themselves can have their own logic, such as events that trigger when the page is loaded or exited. Logic is discussed more next.
Logic
If pages are the foundation of the UI Builder house, then logic is the frame, plumbing, electrical… the guts that make everything inside work. And of course, since we want to keep things visual, the logic is Codeless as well.
Logic can range from the simple (click button -> go to page) to the complex (check user authentication -> pull specified user data -> update different data in a different table -> …). Virtually any logic you need to create can be done without code.
If you already have code that you want to use, no problem! That can be included in your app, too (by integrating via code-based API services).
Components
Continuing our house-building analogy, Components are the amenities of the app you’re building – sinks, countertops, cabinets, floors, paint. All critically functional, but they’ve got to look good, too!
Components are the multitude of visual elements that exist on the user’s screen. This includes everything from text and images to form fields, buttons, and menus. We are adding more components constantly, so if you have one you want to see, let us know.
Each component can be sized and styled however you see fit. You can easily adjust the way components look – or even have them hidden altogether – based on the user’s display (desktop, mobile, or tablet).
Using Codeless Logic In UI Builder
This is a brief introduction to Codeless. You can learn much more about Codeless by visiting the feature page or checking out this video playlist.
Ios Ui Development With Visual Tools Tutorial
Codeless logic in Backendless is designed basically like a puzzle. With each piece, you can add multiple layers of logic and functionality to allow for more complex functions.
(We recently released the Transactions API, a more advanced tool for building complex functions. It is coming to Codeless soon.)
With Codeless, you basically “snap” pieces of logic together to describe what needs to happen when the user takes a certain action. You can save your Codeless functions for reuse as well, meaning you don’t have to re-do the same work on every component.
Additionally, many (dare we say, most) APIs that a typical application is going to need are available to you in the form of pre-built Codeless puzzle pieces. Every one of the pre-built Backendless APIs can be modified or added to a Codeless function.
Don’t Fear The Data
It’s not uncommon for new programmers to have this reaction when they first try to wrap their head around working with data:
Of course, what truly sets us apart from other visual app builders is that we have been doing the backend thing for years. Your frontend is closely tied to your backend, making it simple to access all of your data. All you have to do is decide how to use it.
Prior to the addition of UI Builder, our number 1 focus was making it as easy as possible for developers to build a backend. As such, we built tools such as Codeless logic and a visual data browser so that non-technical users could easily work with their app data, user data, notifications, messaging, etc.
We have applied that same philosophy to UI Builder. Your Backendless backend and frontend were designed to facilitate a seamless relationship between the two.
It has never been easier to have a frontend and backend that work together harmoniously. The data table component is a perfect example:
Data Table Component
The data table component is one of the coolest components in the library. All you have to do is drag and drop it onto your page, link it to your database, and it will instantly, automatically give you full-blown implementation for interacting with the database.
With the data table component, you are able to create, edit, and delete records, search the table, sort the data, and more. Pagination of data is also automatically implemented to reduce load times.
Whether you want to work with internal data or create an interactive table for your users, bringing that data to the frontend is trivially easy with Backendless.
Preview And Publish Your App
Another significant drawback of coding your frontend is trying to figure out both how to test and how to publish your app. Some new frameworks like Flutter try to make it easier to test on a device, but few can make it easier than we have.
With Backendless, when you want to preview your app, you simply have to click the “Preview” button. For web, your app will open in a new tab, immediately usable as if it were published. For mobile, you are given a QR code that will open your app in your phone’s browser.
When the time comes to publish your app to the world, simply click one button. Your app is automatically compressed and saved to your file storage.
Piece of cake!
External Services
Finally, if you are building for a more mature company that already has APIs, databases, etc., these can easily be accessed by your Backendless app. You can learn more about the Legacy use case here.
UI Builder is just one of the many visual app building tools in Backendless Version 6. You can read about many of the other new features here.
We want to hear from you. What are you going to create with UI Builder? What components would you like to see added? Let us know!
As always, Happy Codeless Coding!
Leave a Reply
Related Articles
Introducing European Union Hosting Cluster in Backendless CloudIos Ui Kit
The Backendless European Union Hosting Cluster is a server cluster located in Europe. This new cluster provides Backendless Cloud developers outside of the United States a faster serverless app hosting alternative. Since the General Data Protection Regulation (GDPR) took effect in May 2018, it has been mandated by the European Union that all EU user…Read MoreEU Data Center, UI Themes, And New Visualization Support - Backendless 6.2 ReleaseThe European Union Cluster, UI Themes, and support for two new visualization data types in Backendless Database are all available now in Backendless. Leading this latest update is a major upgrade for UI Builder called UI Themes. We previewed this feature earlier this month, and now that it has arrived, you can try it for…Read MoreIntroducing Auto-Incremented ColumnsThe newest addition to Backendless Database data types, Auto-Incremented Columns make it easy to automatically assign unique, human-readable IDs to all of your records in a table. Just like we did with Generated Columns, we continue to develop new tools that make your Backendless Database work for you. The latest tool is called Auto-Incremented Columns,…Read More
Edit this Doc The UIAutomation Driver for iOS
Note: This driver is DEPRECATED and should not be used unlessabsolutely necessary. The information in this doc may not keep up to datewith reality, and the driver will be removed in a future version of Appium.To begin iOS automation with Appium today, please use the XCUITestDriver instead.
Appium's former method for iOS app automation was based on
UIAutomation
, anApple-provided framework that shipped with the iOS SDK until iOS 10, when itwas removed. UIAutomation
was one of the tools included in Apple'sInstruments profiling system, and provided a JavaScript API that ransynchronously in the context of a single app. The Appium UIAutomation driverestablished an asynchronous, session-based WebDriver front end for this API.Development of the UIAutomation driver is done at theappium-ios-driver repo.
Requirements and Support
In addition to Appium's general requirements:
- Xcode 7 or lower.
- iOS simulators or devices with version 9.3 or lower.
- All versions of Appium ship with this driver.
- For correct functioning of the driver, see additional setup below.
Usage
The way to start a session using the UIAutomation driver is to set the
platformName
capability in your new session request to thevalue of iOS
. Of course, you must also include appropriate platformVersion
,deviceName
, and app
capabilities, at a minimum.Capabilities
The UIAutomation driver supports a number of standard Appiumcapabilities, but has an additionalset of capabilities that work for this driver only (see the iOSsection of theaforementioned doc).
To automate Safari instead of your own application, leave the
app
capabilityempty and instead set the browserName
capability to Safari
.Commands
To see the various commands Appium supports, and specifically for informationon how the commands map to behaviors for the UIAutomation driver, see the APIReference.
Simulator Setup
(Note that due to limitations of Xcode and the iOS simulator, only onesimulator may be open, and automated, at any given time. For multiple simulatorsupport, you will need to upgrade to the XCUITest driver).
- For best results, launch each simulator you wish to use and ensure the following:
- The soft keyboard is enabled (Command+K in the Simulator app)
- UIAutomation is enabled in the Developer settings menu
- There is not more than one simulator with the same name in Xcode's 'Devices' organizer
Real Device Setup
Running tests on real devices is considerably more complicated due to codesigning and additional workarounds to Apple limitations. The basic process fora successful automation strategy using this driver are as follows:
- Build your app with a Debug configuration, for the specific type of real device you will run the test on, ensuring that the app is also signed for running on your specific device. For example:
xcodebuild -sdk <iphoneos> -target <target_name> -configuration Debug CODE_SIGN_IDENTITY='iPhone Developer: Mister Smith' PROVISIONING_PROFILE='XXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX'
- Install the built app (usually now located in a build directory specified in Xcode) to your test device yourself, ensuring it exists on the device and there are no signing issues. There are a number of methods for installing apps onto devices. One is to just use Xcode itself. Another is to use the
ideviceinstaller
tool provided as part of thelibimobiledevice
suite. A third is to use ios-deploy. Here's an example forideviceinstaller
:```brew install libimobiledeviceideviceinstaller -uReal Device Hybrid / Web Testing
For hybrid and web testing, Appium requires the use of the Remote DebuggingProtocol to send JavaScript to execute inside a web view. For real iOS devices,this protocol is encrypted and access must be facilitated using a 3rd-partytool, provided by Google, calledios-webkit-debug-proxy(IWDP). For information on installing and using IWDP within Appium, check outthe IWDP doc.For web testing, i.e., tests that run in the Safari browser, we have anotherhurdle to jump. On real devices, apps that are not signed by the developercannot be instrumented with UIAutomation. Safari is one such app. Thus we havea helper app calledSafariLauncher
, which can be signed by the developer.Its sole purpose upon launching is to turn around and launch Safari, which canthen be automated via the Remote Debugger in conjunction with IWDP. Unfortunatelyyou cannot, in this case, move into the native context and do any automation ofthe browser itself.For instructions on setting upSafariLauncher
, check out the SafariLauncherdoc.Files generated by iOS test runs
Testing on iOS generates files that can sometimes get large. These includelogs, temporary files, and derived data from Xcode runs. Generally thefollowing locations are where they are found, should they need to be deleted:Running iOS tests using Jenkins
First download thejenkins-cli.jar
and verify that the Mac successfullyconnects to Jenkins master.Next define a LaunchAgent for Jenkins to launch automatically on login.A LaunchDaemon will not work because daemons don't have GUI access. Make surethe plist doesn't contain theSessionCreate
orUser
key as that may preventtests from running. You'll see aFailed to authorize rights
error ifmisconfigured.Finally set the owner, permissions, and then start the agent.