Step 3. Making apps in React App Builder



Create apps in the app builder

Open the remote app builder, the one that is online. And click on Create app.

VNr43kNqg6omOB4ZkkrLv3ViNBCJvAgHP4XV6CLp.png

After creating an app, you should enter app name and app id in the fields like in the picture below.

hf8t9vVfONKXQMPKLIWQyJBNg4iICNlnAgkdVc7x.png

After that choose a template, for now, you can choose between 9 templates, but stay tuned, new templates are coming soon. Templates are already created an app with the basic sections (ex: Conference template contains: agenda, the location where the conference is, buy a tickets section, social and etc). You can add or delete a section, it's up to your needs.

hL0owFYhc3kUu3uMnTgaDZRp59A8jfI9wrbp2XKv.png

In the end, you have to choose a layout. For now, there are two layouts (tabs and side). But very soon grid layout will be included.

BK5F4hWqQUUk9JVJLVv7QsU4714k84Qnx4Q3qzES.png

NOTE: If by clicking on Finish button if your newly created app doesn't appear. you will need to make sure that you followed correctly Step 1's Firebase instructions. In most of the cases is incorrect permissions. Pls send us a ticket here with a link to your builder, together with username and password


Manage the app

By clicking on the app, will bring you to your App setup and there you have options to preview your sections, add new sections and change the basics like changing the app images, name, package id.

Sections

If you want to change the order of how the section is listed you can do that by drag and drop the section like in the picture below.

WrAaToX2HlQv40LZiKjY0UiHpLO3hWS3Ey1w91o3.png


Add section

By clicking on Add section you can add the additional section that you need. You have 2 options of sections 

  • Master-detail views - events, shop, food menu, recipe, gallery, radio and general ( the one that you want to customize according to your needs).
  • Specific views - folder section, cart, orders, user profile, user list, map, notifications, scanner, web view, links list.

When you click on the section it should appear an alert that says that new section in successfully added, just like at the picture below.

I74yA19txvlkzhglzdCjsrEySzvTf27vAhvOSkV3.png

Section settings

By clicking on the gear icon in the section, this is the settings icon, it will open a completely new view where you can select different setup for this menu. Look at the picture below.

pRbOvdzW7e41BHddtLK3G8buI1CFOZ2ByLGlEhxJ.png

When you click on the icon it should open a view like this one in the picture below.

mpWLHYBhfcGUDz3ncq9XZ2OC6xl5xiLnlqsUK8Nm.png

Here you can change: 

 - Basic setup:

  • icon
  • show category
  • is this menu root
  • list style
  • name of the menu
  • section

 - Categories setup

 -  Listing setup

 -  Details setup


Section Content

Master-detail views - events, shop, food menu, recipe, gallery, radio and general all have the option to display different content. You can access and manage this content from the "Database" icon on each section.

WFusY1iMgRyf1h2ikcxfxpiRAFjVdmsI0KCoz8z8.png

By clicking on the icon, a new window will appear, where you can add your content.

O3btWfTg23Rpb789zbtbYTjDCbQriIHAjWRQeVlD.jpeg


Clicking on the "Folder" icon will open the categories screen for that section. 

aAjIlcdJelPjMya3SxtKWFycfE7N9NKPWBcLmOoB.png


By clicking on the icon, a new window will appear, where you can add your categories.

E2ijwtz0HWkYPexoQ71h90A8sBFmOcdxFDJ62hej.jpeg


Also, we have dedicated a guide regarding the section content. 



Design setup


By clicking on the Design, there you can setup your app design. You can setup the design of the whole app, so you can make changes into :

  • General - here you can change the color of the app, add a background image, button color, button text and etc.
  • Navigation bar - set up the design of the navigation bar like background color, border color and etc. 
  • List design - set up the list design
  • Side menu colors - choose the color for your side menu

lQl81IBUPrEfz9rjmAywhRbMzBYxmRI6VDsSpM3l.png


Next: Preview on a mobile phone