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 Ionic/AngularJS version. If you are not familiar with these frameworks, we recommend that you read the following documentation about AngularJS and Ionic. 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.

Try it yourself

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

And paste it to PizzaDatabase_settings > database_id:

Before you begin

This tutorial assumes you know AngularJS basic principles.

Creating a new app and pages

Create a new app in the Builder; from the Apps page, click Create new app, select Ionic 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 one more page and a database for the app. Inside the app builder, go to CREATE NEW > Page. Add PizzaCreator page. Rename Screen1 to Menu:
002-Pages

Model

Learn more about Model via the link.

Go to Project > Model.

Add the following model items:

Array  – type Array,

Object – type Object,

List  – type Array (with item of type Object),

Wrapper – type Object (with item of type Object):003-Model

Modal

Go to CREATE NEW > Modal.

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

Add a Button to a Header (square container in the right Header corner – Headerbuttons2), set Icon > Style = ion-close and add property ng-click = modal.hide().

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

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 field Name and select PizzaCreator as a Page. Click Add. Create the following routing the same way:006-Routing

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

Creating an app database

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

1. Create a new database; name it PizzaDatabase.

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

Instead of creating collections manually, you can download the .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) and consist (array).

4. Click +Row to add a new pizza to the menu. It should look like:
007-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:
008-IngredientsCollection

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

Importing database services

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

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

The added services appear under the Services section:

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:
011-index_UI

  • Select Header and set its properties Text = Pizza Delivery, Color = balanced.
  • Select Footer and set its properties Text = Pizza Delivery, Color = balanced.
  • Select index page and set its property Controls Top > Tabs = True.
  • Select Tabs and set its property Color = dark.
  • Select the first TabsItem, set its property Text = Menu and set ng-click to the following value:
  • Select the second TabsItem, set its property Text = Pizza Creator and set ng-click to the following value:

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:013-index_Binding

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:
014-menu_UI

  • Use breadcrumbs to select Content and set its property Scroll = True.
  • Drag a List component to a page from the Palette. It contains three items. Remove two of them.
  • Select a List Item and set its property Type = Linked and set ng-repeat to the following value:
    Please read more about ng-repeat here.
  • Set List Item property Text to the following value:
  • Set List Item property Title to the following value:
  • Set List Item property Heading > Text to the following value:

Scope

Switch to the SCOPE tab on the Menu page.

  • Add a variable list of type List.
  • Open the init() function.
  • In the editor, click the arrow to filter snippets, select Invoke service, and click Insert snippet
  • Click Backspace, then CTRL + Space and select pizzaDatabase_Menu_list_service (you can also enter it manually).
  • Inside of function(success) {} click Mapping.
  • Create the following mapping:
  • Click Save & Replace.
  • Here is the generated code of the function init():

Binding

Open BINDING to view the links between variables and properties:
Menu_binding

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:
016-PizzaCreator_UI

  • Add Form and Grid below the Form to a page.
  • Set Form property Style = Card.
  • Add Select to Form and set its property Text = Ingredients. Double click Options and remove two of them.
  • Select Options and set its property ng-model = selected.item and set ng-options to the following value:
    Please read more about ng-model here and ng-options here.
  • Add a Button under the Select. Set its properties Text = Add, Width = Full, ng-click = addItem(), Color = Positive, Icon > Style = ion-plus-circled.
  • Add the second row to the Grid. Add the third cells to both rows. Set both first cells property Width = 67%.
  • Add Text component to each Grid Cell.
  • The first row is a Grid header, set Text properties to Name, Price and Vol.
  • For the second row set the following Text property values:
  • Select the second row and set its property ng-repeat to the following value:
  • Add a Text component under the Grid and set its property Text to the following value:
  • Add a Button component and set its properties Text = Save, Width = Full, Color = Positive, Icon > Style = ion-upload.
  • Set the ng-click property to the following value:

Scope

Switch to the SCOPE tab on the PizzaCreator page.

  • Add a variable customPizza of type Object.
  • Add a variable customList of type Array.
  • Add a variable list of type List.
  • Add a variable selected of type Wrapper.
  • Open the init() function.
  • Initialize variables:
  • In the editor, click the arrow to filter snippets, select Invoke service, and click Insert snippet.
  • Now, click Backspace, then CTRL + Space and select pizzaDatabase_Ingredients_list_service (you can also enter it manually).
  • Click the second Mapping button and create the following mapping:

  • The first arrow saves ingredients list to the variable list. The second one writes the null array item to selected.item.
  • Click Save & Replace.
  • Here is the generated code of the function init():
  • Add a function addItem() with the following code:
  • Add a function savePizza() and open it.
  • Specify default values:
  • In the editor, click the arrow to filter snippets, select Invoke service, and click Insert snippet
  • Click Backspace, then CTRL + Space and select pizzaDatabase_CustomPizza_create_service (you can also enter it manually).
  • Click the request Mapping button right after the variable requestData and create the following mapping:
  • Click Save & Replace.
  • Set cursor to the function(success) {...} after Mapping button and click OpenModalScreen.
  • Click Backspace, then CTRL + Space, and the name of the only modal Modal is pasted automatically.
  • Before calling modal.show() write a message text:
  • Set the cursor to the function(error) {...} and click OpenModalScreen.
  • Click Backspace, then CTRL + Space, and the name of the only modal Modal is pasted automatically.
  • Before calling modal.show() write the message text:
  • Here is the generated code of the function savePizza():

Binding

Open BINDING to view the links between variables and properties:PizzaCreator_binding

Testing the app

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

Navigate to PizzaCreator to create your own pizza:
019-Test2

Add the ingredients you like:
020-Test3

After your recipe is ready, click the button to send it to the database:
021-Test4

Your pizza app is ready and looks tasty!