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 app with the basic sections (ex: Conference template contains: agenda, location where the conference is, buy a tickets section, social and etc). You can add or delete section, it's up to your needs.

hL0owFYhc3kUu3uMnTgaDZRp59A8jfI9wrbp2XKv.png

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

BK5F4hWqQUUk9JVJLVv7QsU4714k84Qnx4Q3qzES.png

NOTE: By clicking on Finish button if your newly created app doesn't appear, run again in your terminal or command line this command

 npm start

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 change the app image, name, package id.

Sections

If you want to change the order of how the section are 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 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 complete 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


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 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

Preview your work

Click on preview, and there you should see something like this.

qtvHQgWxoCj8qkL6bciC3Sqh6Bd2aBq5r5zNtod0.png

First you have to download Expo Client on your phone (iOS or android). When you complete your download, click on preview app and it will open in your browser the app that you should scan from your phone with the app that you already downloaded (Expo Client). 

NOTE: If you are on iOS device and you are not able to scan, open your camera and scan the QR or login into the Expo Client app with this username and password

  • username: mobidonia
  • password: AppPreview

On your phone will open the UniExpo app. And click on the scan  icon next to Choose an app to preview. Look at the picture below.

K7YyUguCT43Vt9uTxidKvwnoGbkFPiRlmxgc73GC.png

After that scan the QR that you already have into your app builder.

hf6vFszuq5fwMvsvvrWogCExQlAGALNMQB8Z7S3X.png

Now you should be able to preview your work. 


Now enjoy making your apps.