If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

In this tutorial, you’ll learn how to build a mobile app using the Appery.io AngularJS & Bootstrap version. If you are not familiar with these frameworks, we recommend that you read the following documentation about AngularJS and Bootstrap. In this application, a user can view a pizza menu and suggest a new pizza recipe. This app uses the Appery.io databases and shows you an example using AngularJS.

Before you begin

This tutorial assumes you know AngularJS basic principles.

Try it yourself

Attachments

Creating from the backup

You can create this app by following our step-by-step tutorial below or by using the backup.

To create an app from the backup:

  1. Click Create new app.
  2. Type an app name.
  3. Click From backup and select the project backup .zip file.
  4. Click Create.

You still have to create the database manually as described in this section below. If you’ve already created the database, find the X-Appery-Database-Id:database_id_2

And paste it to PizzaDelivery_settings > database_id:database_id1

Creating a new app and pages

Create a new app in the Builder; from the Apps page, click Create new app, select Bootstrap AngularJS App, enter an app name, and click Create:

The app builder opens. The app already has index and Screen1 pages by default. We’re going to create two more pages and a database for the app. Inside the app builder, go to CREATE NEW > Page. Add Details and PizzaCreator pages. Rename Screen1 to Menu:
004-AppPages

Storage and Model

Learn more about Storage and Model via the link.

Go to App Settings > Storage and Model > Model. 

Add the following model items:

Array  – type Array,

Object – type Object:
005-StorageAndModelPreview Changes

Modals

Go to CREATE NEW > Modal. 

Create a new Modal named Modal, and set its property Text to the following value:

006-ModalFooter_Save_Info

Drag a Text component to Modal, set its property Text to the following value:

007-Modal_Text

Creating Routing

Routing is needed to set the page content to be displayed in the ng-view component of index page.

Go to Project > Routing.

Enter pizzaCreator in the Name field and select PizzaCreator as a Page. Click Add. Create the following routing the same way:008-Pages_Routing

For the Details page, pass a parameter id with the following value:

Make sure you set the Menu page as a default route.

Creating an app database

To start creating the app database, click DATABASE in the builder (upper right corner) or simply go to https://appery.io/database.

1. Create a new database; name it PizzaDelivery.

2. Once the database is loaded, create a new collection called Menu.

Instead of creating collections manually, you can download .zip archive and unzip it. There are exported Menu and Ingredients collections as .json files. Just click Import a collection, type its name, and click Choose file to select the previously unzipped files.

3. Add new columns to the Menu collection called name (string), price (number), about (string) and consist (array).

4. Click +Row to add a new pizza to the menu. It should look like:
001-MenuCollection

5. Create a new collection called Ingredients.

6. Add new columns to the Ingredients collection called name (string), price (number) and vol (number).

7. Click +Row to add a new ingredient to the collection. It should look like:
002-IngredientsCollection

8. Create an empty collection called CustomPizza and add columns called name (string), price (number), about (string) and consist (array). It will be used to save custom recipes suggested by app users. It should look like:
003-CustomPizzaCollection

Importing database services

Inside the app builder, go to CREATE NEW > Database Services. Check the following services:

  • Menu collection: read, list
  • Ingredients collection: list
  • CustomPizza collection: create

The added services appear under the Services section:
009-ImportedDatabaseServices

Building an index page

The index page is the main app page that contains components common for all pages.

The other pages’ content will be displayed  in the ng-view component. This can be set via Routing.

Design

Build the following UI:
010-index_Design

  • Drag the Navbar component to the page from PALETTE. Inside the added Navbar, there is a Navs component containing 2 Link components and a DropdownDelete the Dropdown. Change the Text properties of Link components to Menu and Pizza CreatorRemove their properties navigateTo = #body.
    You need to double click a Navbar component to open it on xs-screen.
  • Add a Menu link property ng-click with the following value:
    011-Menu_Link_Properties
    Please read more about ng-click here.
  • Add a Pizza Creator link property ng-click with the following value:
    012-PizzaCreator_Link_Properties

Scope

Switch to the SCOPE tab on the index page.

Add a function goTo(page) with the following code:

Here is how it should look:

Binding

Open BINDING to view the links between variables and properties:
040-Binding_index

Building a Menu page

The Menu page contains a list of pizzas and allows users to view their prices and ingredients.

Design

Build the following UI:
013-MenuDesign

  • Drag a Grid Layout component to the page from the PALETTE. Add the third cell for it by clicking + to the top right corner of the component:
    plus_symbol
  • Select GridCell1, and, in PROPERTIES, expand the Columns parameter and set the properties: Large = 4, Xtra-Small = 8:
    014-GridCell1_Properties
  • Set the GridCell2 property Xtra-Small = 2:
    015-GridCell2_Properties
  • Set the GridCell3 properties Xtra-Small = 2Large = 4 and Hidden = True for Medium, Small, Xtra-Small:
    016-GridCell3_Properties_
  • Use breadcrumbs to select GridRow1, and set its property ng-repeat to the following value:
    017-GridRow1_Properties
    Please read more about ng-repeat here.
  • Add a ListGroup component to GridCell1.
  • Use breadcrumbs to select ListGroup, if it’s not selected yet. Set its property Linked = True:
    039-Listgroup1_Properties
  • Select the ListGroupItem1 and add a newng-click property  with the following value:
     Set property Text to the following value:
    018-ListgroupItem1_Properties
  • Add a Text component to GridCell2 and set its property Text to the following value:
    019-Text_Properties
  • Add a Text component to GridCell3 and set its property ng-bind to the following value:
    020-Text_Properties
    Please read more about ng-bind here.

Scope

Switch to the SCOPE tab on the Menu page.

Create a function goToDetails(id) with the following code:

Use the following code for the function init():

Binding

Open BINDING to view the links between variables and properties:
041-Binding_Menu

Building a Details page

The Details page allows users to view a pizza description.

Design

The Details page looks like:
021-DetailsDesign

  • Set the Page Header property Text with the following value:
    And clear the Subtext property:
    022-Header_Properties
  • Drag a Panel component to the page from the PALETTE.
  • Remove Panel Footer text, Header text and Text properties:
    023-Panel_Properties
  • Drag a Text component to the Panel and set its property Text to the following value to display additional information:
    024-Text_Properties

Scope

Switch to the SCOPE tab on the Details page.

We need to retrieve the passed id in the function init():

Binding

Open BINDING to view the links between variables and properties:
043-Binding_Details

Building a PizzaCreator page

The PizzaCreator page allows users to create a custom pizza recipe and submit it to an administrator review.

Design

The PizzaCreator page looks like:
025-ConstructorDesign

  • Add a Form and a Table components to the page.
  • Drag the Select component to Form and remove its 2nd option.
  • Remove SelectOption component Text property.
  • Set the Select component property ng-model = selected, and set property ng-options to the following value:
    026-Select_Properties
    Please read more about ng-model here and ng-options here.
  • Drag Button to Form , set its property Text = Add, and set property ng-click the following value:
    027-Button_Properties
  • Set  the Table to contain 2 rows and 3 cols.
  • Set the TableRow1 property Header = True, and set columns Text properties to Name, Price  and Vol.
  • Set the Text property of the first cell in the second row to the following value:
    028-TableColBean3_Properties
  • Set the Text property of the second cell in the second row to the following value:
    029-TableColBean4_Properties
  • Set the Text property of the third cell in the second row to the following value:
    030-TableColBean6_Properties
  • Set TableRowBean2 property ng-repeat to the following value:
    031-TableRowBean2_Properties
  • Add a Text component to the page and set its property Text to the following value:
    032-Text_Properties
  • Add a Button component to the page and set its property Text to the following value:
    Set the ng-click property to the following value:
    033-Button_Properties

Scope

Switch to the SCOPE tab on the PizzaCreator page.

Add a variable customPizza of type Object.

Add a variable customList of type Array.

Use the following code for the function init():

Add a function addItem() with the following code:

Add a function savePizza() with the following code:

Binding

Open BINDING to view the links between variables and properties:
042-Binding_Constructor

Testing the app

It’s time to test the app. Click TEST and the Menu opens:
034-TestMenu

Let’s check how it looks on Large size:
035-TestMenu_Large

Click any pizza to open Details:
036-TestDetails

Navigate to PizzaCreator to create your own pizza:
037-TestPizzaCreator

After your recipe is ready, click the button to send it to the database:
038-TestSavedRecipe

Your pizza app is ready and looks tasty!

Learn more

Learn how to build an advanced Pizza Delivery app using your Pizza app or try other tutorials via the links.