Introduction

In this tutorial, you’ll learn how to build an AngularJS app that displays a list of data from a cloud database. The app communicates with the database via a REST API. You will also see how to add native functionality and build binaries for Android and iOS (.apk and .ipa). At the very end there is a section that describes how to show details on item click (master-detail pattern).

The app covered in this tutorial built with Ionic/AngularJS, but you can make it using the Bootstrap as well. All the steps will be the same, except of slight difference in UI components look.

The final app will look like:

Try it yourself (live demo)

See the live demo of this app here.

Creating from the backup

You can create this app from the backup to see how it’s built. But if this is the first Appery.io app that you’re building, it’s strongly recommended that you create it step-by-step.

To create an app from the backup:

1. Click Create new app.
2. Click From backup and select the project backup .zip file.
3. 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 MerchandiseDB_settings > database_id:

Before you begin

• Tutorial level: beginner; your first mobile app.
• Prerequisites: an Appery.io account.

Creating a new app

Create a new app; from the Apps tab, click Create new app and select Ionic AngularJS App. Name it MerchandiseApp and click Create.

Building the app pages

In this part of the tutorial you are going to design the app pages and the model for pages.

Designing the page

The app UI is designed in the Design tab. This tab will open by default when you open a page.

1. Every new app comes with two default pages: index and Screen1. Open Pages > index:
   
2. Click the app Header, and then change its Text property to In stock in PROPERTIES. Select the Color property (here, balanced is used). Clear the Footer Text property. You may also define the Footer Color property to make the app look consistent:
   
3. Now, switch to Screen1 and, using the cog sign that appears when selecting the page on the list, rename it to List.
4. Using breadcrumbs or OUTLINE, select Content and set its property Scroll = True.
5. From the PALETTE, drag and drop a List component. When the List is inserted into the page, it has three static List items. Remove two of them.
6. Select the remaining List item and set its property Type = Linked and define its ng-repeat value as the following:
   
   1	item in list

   Please read more about ng-repeathere.

7. Set Heading > Text to the following value:
   
   1	{{item.name}}

8. Clear the Text property value.

Here is how your List page should look like:

Since you always start with a mobile web app (HTML5), you can instantly test your app in the browser. Simply click TEST to launch the app in a new window/tab (make sure pop-ups are enabled for the domain “appery.io”).

Creating the page model

The Scope tab holds the model (objects) used by the page.

First, you need to create a model:

1. Go to Project > Model and create the following model:
2. Now, go to the List page and switch to the SCOPE tab.
3. Enter a new variable name: list and click Add. Set its Type to List:
   

Creating a database

Now, you’ll create a new database and a new collection, and populate the collection with sample data.

1. From the app builder, click Database to open the Database page (it opens in a new tab):
   
2. Once the Database tab is open, click Create new database.
3. For the database name, enter: MerchandiseDB and click Create.

When the database is created, you’ll see the page with three predefined collections:

• The Users collection is predefined for user management, such as implementing sign-in and registration.
• The Files collection is predefined for uploading files.
• The Devices collection is predefined for registering and working with devices.

Creating a collection

A collection is like a table in a relational database.

1. Create a new (custom) collection to save data. Click Create new collection. For the name, enter: InStock and click Add. The newly created collection is now listed under Collections.
2. Each collection has a number of built-in columns (such as _id, _createdAt). You are going to create a new column by clicking +Col. For the column name, enter: name (Type = String). Click Create column. You should see the new column listed in the collection.

Populating the collection with data

To populate the collection with sample data, simply click +Row and add any data you want.

An example of the collection with eight objects (rows):

Instead of creating collections manually, you can download the sample MerchandiseDB and unzip it. Just click Import a collection, type its name, and click Choose file to select the previously unzipped file.

Now you’re going to create a REST service to read the data from the database. Notice that every collection has a REST section that displays various REST curl commands. This means that the collection and its data are instantly exposed via REST APIs.

Reading data via REST service

1. In the app builder, select CREATE NEW > Database Services.
2. Select MerchandiseDB from the list. Expand the InStock collection to see all the available methods.
3. Since we only want to display data, check the List service:
   
4. Click Import selected services.
   Under Services, you’ll see two services generated. One is the Settings service that holds the API key for the database, and the other is the REST service that receives data from the database:
   
5. Open the MerchandiseDB_InStock_list_service. You’ll see that it has everything you need: the URL and the request and response parameters:
6. Switch to the Test tab. You can test the service here (same as executing a curl command). Click Test.
   You can see the objects you created in the collection:
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   [     {         "_id":"54bff7fe975a511d0f066e09",         "name":"Hoody",         "_createdAt":"2015-07-29 09:57:40.630",         "_updatedAt":"2015-07-29 09:57:40.630"     }, //...       {         "_id":"54d25b6e975aaa96de09f5f0",         "name":"Blouse",         "_createdAt":"2015-07-29 09:57:40.634",         "_updatedAt":"2015-07-29 09:57:40.634"     } ]

Invoking Services

Now, when you have created the database and imported the database services, you can proceed with invoking the database services:

1. Go to the List page, open the SCOPE view, and click Edit for the init() function.
2. Click Invoke service.
3. Click Backspace, then CTRL + Space and select MerchandiseDB_InStock_list_service (you can also enter it manually):
4. Click  Mapping below function(success) {} and create the following mapping:
5. Click Save & Replace.
6. The init() function should look like:
   

Running the app

Click TEST to launch the app in the browser (when you test the app, it simply runs in the browser, it’s not a simulator).

The page contains a list of items:

Running the app on a device

You can also launch the app on your device by scanning the QR code (you must have a QR app on the device). First, be sure to make the app public by checking Public:

If you don’t have a QR code reader on your phone, you can also email the link (without frame) to your device.

Adding native features

It would also be nice to add some native device capabilities to the app. To keep it simple, you can add a Button, and on clicking the button, you can display some information about the device and the Apache Cordova (PhoneGap) version used.

1. Drag and drop a Button component inside a Footer Button on the index page.
2. Change its text to Device Info:
   
3. Select the Button and provide the following for ng-click:
   
   1	showInfo()

4. Switch to SCOPE and add a new function – showInfo().
5. Define the following code for the function:
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   if (document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1) {     var msg = 'Model: ' + device.model + 'nCordova: ' + device.cordova + 'nPlatform: ' + device.platform;     navigator.notification.alert(         msg,         alertWindowClosed,         'Appery.io App',         'Close'     );     function alertWindowClosed() { // do nothing for now     } } else {     alert('Install app as binary to see the device details!'); }

   Click Save.

As you can see from the code, you must first install the app as binary to see the device details. See here (Android) or here (iOS) how you can do it.

The result:

Publishing for Android

To publish the app for Android, click Export:

Click .apk under the Binary app column to start building for Android. Note, that building the .apk file could take up to 40-50 seconds.

Once the build is completed, the .apk file can be downloaded and you can also see a QR code:

You can scan this QR code to download the file directly on your Android phone and install it.

Publishing for iOS

Since iOS is more demanding in terms of certificates, some additional actions are required to build an .ipa.

Before you can build an iOS binary, you need to sign up for the iOS Developer Program and provide all developer information and certificates below. If you are new to this, this is a good link to get you started: managing your signing and provisioning assets.

Before you build the binary file, make sure you have the:

• Apple certificate (***.p12).
• Apple provision profile (***.provision).
• Bundle ID (com.company.***) – you can find it in your Apple certificate.

1. Go to: Resources > Certificates tab:
   
2. Click Import Certificates > iOS.
3. Click Choose file and select your iOS Distribution .p12 file:
4. Type your password for this certificate and click Import certificate:
   
5. Go to the Appery.io Builder: App Settings > iOS binary.
6. For Bundle ID, type the bundle ID that you provided for the uploaded certificate (you made it when registering the app on the Apple website). For example – io.appery.app.MerchandiseApp:
7. Scroll down the page and under the Distribution certificate section, select the earlier-uploaded .p12 certificate from drop-down menu.
8. Click Change in the Provisioning profile section and upload the .mobileprovision file:
   Click SAVE.
9. To publish the app for iOS, click Export:
   
10. Click .ipa under the Binary app column to start building for iOS. Note, that building the X file could take up to 40-50 seconds.
11. Once the build is completed, the .ipa file can be downloaded and you’ll also see a QR code:
    

You can scan this QR code (use the Qrafter app, for example) to download the file directly on your iOS device and install it.

Using the Appery.io Tester to test native apps

Since this API uses native device features, you cannot test it in the browser. One option is to build the binary again and then update the app on the device. Another (better) option is to test the app with the Appery.io Tester (Android, iOS):

The Appery.io Tester is a native app from which you can test apps built in Appery.io. Since you don’t need to install the app each time a change is made, the Appery.io Tester makes it easy to test native apps. The Appery.io Tester is free, and available for iOS and Android. Both versions are open source.

You can find the app in the Google Play Store and iOS App Store. Once the app is installed, launch it and sign in (use your https://appery.io credentials). Find your app in the list, and tap it to launch it.

Besides, to share your app with non-Appery.io users, you can go to the Apps tab, select the project and scroll down to the  Share via Appery.io Tester app section, then turn the toggle “on”.

Then, follow the instructions provided.

More information on sharing via Appery.io Tester apps  is here.

Publishing as mobile web app

You can also publish your app as a mobile web app on an Appery.io or some custom domain.

Inside the app builder, click CLOSE (upper-left corner) and then choose Back to app list and save to scroll down to the Hosting section:

Enter a domain on which you want to host your app, and click Publish. After a few seconds, your mobile app will be available on name.app.appery.io.

Showing details on item click

It’s an often scenario when advanced info about certain item appears on a click. It’s called “Master-Detail pattern”. You can extend your MerchandiseApp with such functionality by following simple steps:

1. First, you need to add extra info about the items in the database. Go to MerchandiseDB, open InStock collection and click +Col. Type price for a name a select Number as Type.
2. Click Create column.
3. Now, provide values for each item as following:
   
4. As the collection structure has been changed, REST Service response should be changed too. Switch back to the Appery.io Builder and open the MerchandiseDB_InStock_list_service (under Services folder). Click Test on the Test tab:
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   [     {         "_id":"54bff7fe975a511d0f066e09",         "name":"Hoody",         "_createdAt":"2015-07-29 09:57:40.630",         "_updatedAt":"2015-07-29 13:15:37.258",         "price":7.0     }, //...     {         "_id":"54d25b6e975aaa96de09f5f0",         "name":"Blouse",         "_createdAt":"2015-07-29 09:57:40.634",         "_updatedAt":"2015-07-29 13:14:55.306",         "price":7.7     } ]

5. As you can see, now the response contains new fields and values. Click Import as Response and the response structure of this REST Service will be automatically changed basing on the returned data. You can make sure about it by switching to the Response tab.
6. Now, go to the List page, open the DESIGN tab, select the List item component, and add a new attribute: ng-click with the next value:
   
   1	showPrice(item.price)

7. Then, go to the page SCOPE and add a new function: showPrice() with Arguments = price, then insert the following code for the function:
   
   1 2	$scope.price.current = price; Apperyio.navigateTo("Price");

8. Perform: CREATE NEW > Page, enter Price for the name and click Create page.
9. In DESIGN view, drag and drop a Button to the page with Text = Back, select the ion-chevron-left for Icon (Position = left), and pass the following ng-click = goBack();.
10. In SCOPE view, add a new scope function: go Back() with the following code:
    
    1	Apperyio.navigateTo('List');

11. Drag and drop the List component to the page, delete two of the three List items.
12. Now, select the remaining List item and set its Text property to:
    
    1	{{price.current|currency}}

13. Now, add the page to routing: Project > Routing, select the Price page, enter Price for the route name, and click Add: 
14. Lastly, edit the init() function of the index page by adding the following code into the code editor:
    
    1 2 3

    $scope.price = {   current: 0 };

Here is the resulting view of the Price page:

You can now go testing your app.

Alternatively, you can use the backButton directive to store navigation history. Click here to learn about the backButton directive.

Where to go from here

Of course this app isn’t a complete mobile app, but you’ve seen the basics for creating apps via the Appery.io Visual Builder. You may want to extend the app logic with Server Code (code that works on backend) or enable Push Notifications. By using plugins, you can rapidly add 3rd party services (as Facebook or Twilio) support to your app. You can even collaborate with teammates to build an apps with Appery.io.

There are many more helpful Appery.io tutorials here, and all the docs you might need here.

Let support know if you have any issues via the forum or email.