Documentation | Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    

Quickstart Tutorial

Using the database quickstart tutorial.

If you are new to Appery.io Database, start with this simple tutorial. In this tutorial, you’ll learn how to build a mobile app (Ionic 4 or JQM) that displays a list of data from the database.

Every mobile app requires a backend (server) to store data or run some logic. Here we will use the database as our backend and so you will start by creating a new database.

Creating New Database

You will start by creating a new database.

  1. Go to the Databases tab.
  2. Click the Create new database button.
  3. Enter a new database name: WarehouseDB. Then click Create.

The next step is to create a new custom collection.

Creating New Collection

Now, you are going to create a new collection to hold the warehouse data.

  1. Click the Create new collection button.
  2. Enter the collection name: Goods and click Add.

The new collection has a number of default columns. You are going to create a new column to hold the actual item.

  1. Click +Col.
  2. Enter the column name: item. Set its Type as String.
  3. Click Create column.

You should see a new column created.

It's very simple to add sample data into the collection.

  1. Click +Row to insert a new row into the collection.
  2. Enter Cold drink as the first item.
  3. Enter two more items: Tea and Coffee.

Collection data.

That's all you need to do on the database side. The next step is to define Server Code to access the database data.

Creating Server Code Script to Access the Database

In this section, you are going to create a Server Code script to access the database and make it available for the app (client).

  1. Go to the Server Code page.
  2. Click Create script to create a new script. The editor will load.
  3. Name the script loadGoodsScript and click the Save button.

📘

Every new script loads a default sample script to try. Go ahead and delete the script.

  1. On the right-hand side, you will see the Snippets tab. Locate a snippet called retrieveAllObjects and click insert to insert it into the script editor. It should look like this:
var result = Collection.query("dbId", "collectionName");

Now, you need to set your dbId and collectionName in this code.

  1. To set the database ID, go back to the database you have just created and then to its Settings tab. There, locate the database ID (API key) and copy it to clipboard:
  1. Paste the key into the script.
  2. Set the collection name to Goods by replacing collectionName by Goods.
  3. Using Snippets again, find the responseSuccess snippet and insert it below the first snippet.

📘

Place the cursor below the first code line before inserting.

  1. Replace {"param1":"value1"} with result and save the script. Your code should look like this:
var result = Collection.query("5eb8e8532e22d729ddf3e3b0", "Goods");
Apperyio.response.success(result, "application/json");

Testing Script

This script accesses the database and retrieves all the objects in the Goods collection. It is always a good idea to test the script before using it in an app.

Testing is very easy. On the right-hand side switch to the Run tab and click the Save and run button to invoke the script. You will see the script response showing the items from the database:

Next, you are going to work on the app UI.

Building App

Now, when you have created the app backend, the next step is to create the app UI (client) which will connect to the backend/database. There are two options in this tutorial:

  • Ionic 4 app;
  • jQuery Mobile app.

You can pick the framework you like or complete both apps.

📘

Want to know more?

You can also check more information about how to work with Database using Server Code scripts in Working with Appery.io Database and Server Code extended guide.

Building an Ionic 4 App

In this section, you are going to create an Ionic 4 app.

New Ionic 4 App

Let's start by creating a new Ionic 4 app.

  1. To create a new app, go to the Apps tab.
  2. Click the Create new app button.
  3. Select Ionic 4 blank.
  4. For the app name, enter: WarehouseIonic4App and click Create.

The next step is to design the app UI.

Designing App UI

  1. Unfold the Pages folder and select the Screen1 page.
  2. Choose the Header Toolbar Title on the page.
  3. Under the PROPERTIES tab, set its Text to My App:

Index page.

  1. From PALETTE on the left, drag & drop the List component to the page.
  2. The list has two static items. As you will be loading the data from the database you only need one of them. So, delete the second List Item by clicking the red X in its upper right corner:

App design.

That's it for the app UI.

Importing Server Code Script

Now, let's import the created script as a service into the app.

  1. Click Create New > Backend Services > Server Code Service.
  2. Select the script you created:
  1. Click the Import selected services button.

The service will be imported and you can quickly test it:.

  1. Open the service located under the Services folder in the App Builder.
  2. Open the Test tab and click the Test button to invoke the service. You should see the items you saved into the database:
  1. There is one step left and it is to set the service response.
    After you have tested the script, click the Import as Response button. This will use the sample JSON response as the response for the service. You can open the Response tab to see how it looks:

Now, let's use the service on the page.

Invoking Service

Now, we need to use these services in our app.

  1. Under the Pages folder, navigate to the Screen1 DATA tab. Here, add the loadGoodsScript_service as a datasource and change the service's generated local name to loadGoodsList:
  1. Then, we need to save the data that is returned from the service. Click the Mapping button next to the service's Success event:
  1. Click the Expand all links on both sides of the mapping editor.
  2. Using drag & drop, create the mapping as shown in the screenshot below.
  3. Now, click the Save & Replace button to save and exit the visual mapping editor:

Binding Page to Scope

The last step is to bind the page to the scope. As we need to load the list of goods on the page load, let's add the required event.

  1. Go back to the DESIGN tab. In the EVENTS panel, for the Page component, add the Before page showing event. Select *Invoke service as the Action and getTasksList service as the Datasource. Click Save:

You are now ready to test the app.

Testing App

To test the app in the browser, click the TEST button in the toolbar. A new browser window will open and launch your app.

Testing the app.

Testing on a Device

You can also easily test the app directly on the device by using the Appery.io Tester App.

Troubleshooting

Some tips on how to troubleshoot the Ionic app.

  • If the list items were displayed in the app but without data, double-check that you have the right bindings (Binding the Page to Scope section).

Building a jQuery Mobile App

If you would rather create a jQuery Mobile app then this section is for you.

Creating New App

To create a new app, go to the Apps tab.

  1. Click Create new app button.
  2. For the app name, enter WarehousejQueryApp.
  3. For the app template and type select jQuery Mobile > Blank, then click the Create button.

Next, you are going to design the app page.

Designing the App UI

Once the visual editor has loaded:

  1. Open the Pages > startScreen page.
  2. Select the header area and in the PROPERTIES panel change the header caption to My App.
  3. On the PALETTE, locate the List component and drag & drop it to the screen.
  4. The List component has three items. As the data will be loaded from the database you just need one item. With the list control selected, in PROPERTIES, set Items to 1.

📘

Use the breadcrumbs to select the List container (not the List item).

  1. You can also remove the list icon. In PROPERTIES, click Buttons Icon and select the No icon button.

That's all for the app UI. This is how your page should look:

App UI.

Importing the Server Code Script

Now you are going to import the script you created as a service into the app.

  1. Click Create New > Backend Services > Server Code Service.
  2. Select the script you created.
  3. Click the Import selected services button.

The service will be imported. You can quickly test the service.

  1. Open the service, you will find it under the Services folder in the App Builder.
  2. Open the Test tab.
  3. Click the Test button to invoke the service. You should see the items you saved into the database.

There is one last step and that's to set the service response. After you have tested the script, click the Import as response button. This will use the sample JSON response as the response for the service. You can open the Response tab to see how it looks.

Next is to use the service on the page.

Mapping the Service to the UI

Now that you imported the service it's time to add the service to the page and map it to the page.

  1. In the startScreen editor, open the DATA view.
  2. For datasource select Service > loadGoodsService and click Add.
  3. It is a good idea to rename the default service name to: loadGoods.
  4. The service doesn't have any inputs thus you don't need to map Before send event (input).
  5. Click Mapping for Success event. This will allow you to map data from the service to the page.
  6. Using drag & drop, create the following mappings:
  • $[i] to mobilelistitem_x.
  • item to Text (under the list item).
  • This mapping maps the collection of all items (goods) to the list. It will automatically list all the items returned by the service. And a particular item is mapped to the list Text property.

Service mapping.

  1. Once the mapping is done, click Save and return.
    The last step is to invoke the service.

Invoking the Service

To invoke the service:

  1. Switch to the DESIGN view.
  2. Select startScreen in the page breadcrumbs.
  3. Open the EVENTS tab.
  4. For Component, select startScreen.
  5. For Event, select Page show.
  6. For Action, select Invoke service > loadGoods.
  7. Click Save to save all the changes.

You are now ready to test the app.

Testing the App

To test the app in the browser, click the TEST button in the toolbar. A new browser window will open and launch your app.

Testing the app.

Testing on a Device

You can also easily test the app directly on the device by using the Appery.io Tester App

Updated 17 days ago

Quickstart Tutorial


Using the database quickstart tutorial.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.