This tool provides a number of visual tools for creating apps. The key features of the App Builder are listed below:
- scaffold a new mobile app with a click
- choose from a set of pre-defined templates suitable for various design interfaces as well as app features
- a visual storyboard to manage different screens
- an editor in the web browser to edit the app code generated to your needs
- building and mapping data models that leads to the auto-generation of APIs
- preview app builds with the dashboard
In this post, let's create a custom screen to learn how the majority of these features work, but more importantly, how you can use the visual design tool to implement UI interfaces in real mobile apps.
Scaffolding a new Custom Mobile App with Crowdbotics
To create a new mobile app using Crowdbotics, go the app dashboard screen and click the button
Create App. The process we are going to follow in this section is called Scaffolding and is referred to as generating basic application architecture.
You will be redirected to the Create App screen, where you will see options for naming your app and choosing what type of scaffold to build. Select the option
Build from Scratch in the side menu, then select the type of the app to be
Mobile App. Then enter the name of the app in the input field as shown below:
Click the button
Create App in the above screen. The app's scaffolding process has been started. It might take a few minutes to generate the app. You will be re-directed to the Storyboard Editor. The Storyboard editing tool provides a logical flow to maintain the collection of the app screens.
There are plenty of app modules and templates available to add to the mobile app that you can choose from. Modules are prebuilt app screens that contain a specific design and functionality. For example, the
Article List module is a feed screen that displays a list of posts. This list is vertically scrollable. You may edit this screen and use it as a feed screen for any social media app or informative app.
Along with Modules, there are Templates, which are a collection of multiple modules, arranged in a logical way to provide an end-to-end mobile application. For example, if the app you are building for your business is a learning management system, you can use the template Online Course Management System and modify it to your needs.
For this guide, we are going to create an app screen from scratch. To do so, press the button in the
Add Modules section that says
Create a Module. This is going to generate a new blank screen module.
Each screen module added has at least a minimum of four options. The first option is
Properties, which you can use to modify the screen's name and description. Let's change the name of the screen to
Home Screen and a brief description as to what this screen does. After modifications, click the
Save button for the changes to be stored.
Creating a custom UI with the visual editor
The second option on the
Home Screen is to add or modify the current layout of the screen. Fittingly, the name of the option is
Layout. Clicking that button is going to redirect you to a new page where further design implementations can be performed. Since the screen module we selected is blank, there is not going to be anything initially displayed on the screen as you can see below:
On the left side, you can view the UI elements provided. The
Element Tree drop-down menu is to view what elements are being used for the current app screen and how are they organized in relation to each other. By default, the first element on any app screen or blank screen is going to be a
Elements menu provides a set of UI elements that you can use to build the interface. Let's start building the demo app screen. Select the
Flex element to add a
StyleSheet. Hence, it can be said that
View components are primarily used for styling and the layout of children elements. We are going to add a
Flex component to contain an image component.
To modify the width and height of a UI component like the one above, you must select the element. Upon selection, the right-side menu is activated, where you can make modifications like managing interface styles of a component or providing a more suitable name to the component.
Managing styles also includes the application and manipulation of the Flexbox algorithm. The algorithm itself is designed to provide consistency among different screen sizes. There are different Flexbox properties available:
flexDirectioncontrols the direction of the main axis in which children components are laid out. The main axis in a mobile app by default is the Y-axis.
justifyContentcontrols how the children components are aligned within the main axis of their parent component.
- The value of
alignItemsproperty affects the children components to be aligned along with the cross or the secondary axis inside the parent component.
- The value of the
alignSelfproperty is used to change the alignment of an individual child component by overwriting the value of alignItems set by the parent component.
alignContentproperty aligns the child components across multiple lines on the secondary axis when they are wrapped using the flexWrap property.
The value of all these properties for each new element is set to their own default values. To read more about how to use Flexbox in React Native, and find out the default values of these properties, please refer to the official documentation.
There are various screens sizes available on the selection from the drop-down menu just above the visual screen.
Now, let's add an image component.
You can use your own custom image resources by uploading them. This is done from the third menu item on the left sidebar. Do note that, uploading these image resources as shown below will also add them to the source code of the app as remote assets.
After uploading the image, from the right sidebar, it can be selected as a resource to use for a particular component. In the example below, it is used as the source for the
Image element with a
width property modified.
TextInput element can be used to create an input field. The margin properties can be set to add spacing corresponding to other elements. The placeholder value for the input field can also be set using
Content > Element Properties as shown below:
With Crowdbotics' Visual App Builder, you get advantages in the form of elements such as
Rows, which are pre-defined with flex properties to suit particular use cases. For example, the
Columns element can be used to create a two-grid system as shown below.
Let's add an image with a fixed width and height to the left and right grids. The
Columns element is comprised of Flexbox properties just like any other container element. To align the image to the center of the right column property,
align-self is used from the right side menu. The
height of the
Image element can be set using unit points (
Let's use the
Text element to display the name of the product that the image in the previous step is associated with. Apart from setting up the value of the
Text element, using the visual tool, you can also modify the property values such as font size of the text field, the font family, color, as well as other typography properties.
The visual tool also takes care of adding a default value for spacing using
Before proceeding, make sure to save the progress so far by clicking on the
Save Changes button.
Navigating between different app screens
Button element can be used to add further actions in the app. The properties like border-radius are used to style a button component.
An action on a
Button element can be used to navigate between different screens. So far, the demo app has only one screen module. Let's add another one, and call it
To navigate from
Home Screen to
Details Screen by pressing the button
View More, we need to associate an action with the button. Go to the
Home Screen component, select the
Button element we previously added, and then go to
Content > Actions and click on the button
When adding an action, the type for the action is required. The only action type on a
Button element that is currently available is called
onPress. It detects when a user taps the button on a device's screen and then executes the associated business logic in the form of a function. The visual editor provides a set of common actions.
For example, for navigation from one screen to another, there is an action called
Navigate to. Once this action is selected, the name of the screen to navigate can be specified.
Using a prebuilt module as app screen
We have already discussed the significance of a module in Storyboard. There are verified modules available that are maintained by the Crowdbotics team of engineers.
Another category of modules available is called community modules. To view and use these modules, you can change the selection from the drop-down menu. These modules are created by app developers who are part of the Crowdbotics community. These modules are often based on the same set of React Native API components and other open-source libraries used in Crowdbotics React Native apps.
Let's use a prebuilt module to see how a verified module is added to the application flow. Open the Storyboard screen left-hand navigation bar. Then open
Modules and select the
Sign In screen.
The app screens by default are arranged in the order they are created. To manage the flow from one screen to another, you can link them.
Defining Data Models
Data Models in a RAD Stack app provide a way for you to define a structure of the underlying data that powers the application. Each piece of information is stored inside an object, and each object is stored inside a list of objects. The list of objects is a data model. A data model usually describes what type of data is required in the app, where it is coming from, and how it is stored in form of a table. To view and define custom data models, please open the
Data Models page from the left sidebar.
The Crowdbotics app generates a default set of data models that triggers the communication between the mobile and the backend. A Crowdbotics app uses the Django framework (the "D" in RAD stack) to create backend APIs.
As you can see, the default data models consist of
CustomText, which is a mock piece of data, the
User. For this demonstration's purpose, let's create our own data models. The first one we are going to create is called
Products. You can relate this data model to the list of other data objects.
To create a new data model, select the
Data Models tab from the right-hand side, and then select
Add model. Enter the name of the app, and the data model itself. The app generated with Crowdbotics comes with an admin panel that you can access using the source code of the app. The admin panel provides a way to view and create new data sets using the Django framework. Selecting the
Admin option here is going to enable that.
Next, it is going to prompt for what field types to include. Each data model can have one or multiple fields. Each field is constituted of a specific type. These field types help to define what type of value to expect when the actual data is used to display information in the application.
For example, a field type of name should be a
text field since its value is going to contain characters, and the field type of phone number should be of type
integer since its value is going to have numeric characters. There are various field types available that can be used to define data, and you can find more information about them here.
Add a field type called
Shoes to the data model
Products. The type of this field is going to be
CharField. This field is going to represent a collection (or a list) of data or products.
Save button is going to generate the data model.
Products data model is a collection of other products, let's create a new data model called
Product that contains field types related to an individual product item. It is going to have multiple fields:
nameof the product is of field type
CharFieldand represents the name of the product. It also has an option of maximum length of fo characters set to 256 by default.
priceis of field type
FloatFieldand represents the numeric price value of the product.
imageis of field type
URLFieldsince the image for each product is going to be an URL field of an image hosted in a cloud service.
To connect two different data models, there are three special field types available. These fields are used to connect different objects of information.
ForeignKey references to one-to-many connections. Let's create and connect the
sneakers in the
Products data model to connect it with the
Product data model. A data of type
sneakers is going to have multiple objects and each object has corresponding fields of
Building the application
In the Status page from the left sidebar menu, you can build the application. The
Build Status is the first view that is displayed, and it tells whether the app has been deployed before or not. If the is ready to be deployed, the status will read
Clicking the button
Deploy App will trigger the build process. This process includes the deployment of the backend API and also builds an Android version of the app. The deployment process may take a few minutes.
App Activity below the Build Status view is where you get all the information about the build process with other essentials, like any pull requests to the GitHub repository of the app, GitHub commits, and server logs.
The third view on the right side is where the preview Android app is available after the build process has taken place successfully. The other advantage of building the app leads to access to the
Admin Panel of the backend API. Once the app is built, you can generate the credentials to access the data from the Admin Panel and then view the panel from the Settings page.
Accessing source code via GitHub
So far all the steps described in this post did not require any line of code to be altered. There are chances that to match some of an app's requirements (depending on your app's architecture), you might want to access and modify the existing code.
Any app generated with Crowdbotics App Builder automatically hosts the source code related to that app in a GitHub repository. When a new app is scaffolded, you get an invitation to access the GitHub repo.
You can also access the same repository from Settings > View Code. All the files generated and used to build the mobile application and the backend API are available.
To view or modify the code available in the repository, you can either download the repository or clone it. After having the access to the repository at your local environment, you can use a code editor like VScode and a command-line terminal application to install dependencies and build the app for the iOS or Android platform or the backend API. All the instructions on what steps to take next to build the app are provided in the
README.md file with the source code.
After building the app, you can easily view and test out the functionality in an iOS/Android emulator or a real device.
Now you have a better understanding of how to leverage the Crowdbotics App Builder to build your own app. At Crowdbotics, we offer both the low-code Crowdbotics App Builder and managed app development by expert PMs and engineers. The Crowdbotics App Builder includes automated and drag-n-drop visual scaffolding tools, the pre-built modules and templates, and the complete flexibility to customize and modify source code using GitHub.
This is a great place to start building your app without coding from scratch. Not only does it save a good amount of development hours, but you get an organized structure to follow and customization options with all the integrations of open-source technologies, as well as a setup for backend API.