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

Create-Read-Update-Delete Sample App

A sample CRUD app.

This sample app demonstrates how to work with objects stored in a database. The app shows how to perform the following actions:

  • Create.
  • Read.
  • Update.
  • Delete.

These actions are usually referred to as CRUD (taking the first letter).

This sample app shows the following features:

  • jQuery Mobile UI.
  • Database.
  • Server Code.

Sample app setup consists of the of following general steps:

  1. Creating a database to store data.
  2. Adding Server Code scripts. Scripts hold the app logic for accessing the database and retrieving data for the app (client).
  3. Adding app UI (as a plug-in) built with jQuery Mobile.
  4. Connecting the app to the mobile backend.
  5. Testing the app.
List page.

List page.

Creating the Database

The database will hold the app data.

  1. From the Database page click to create a new database. Name the database: Crud_db.
  2. From the newly created database create a new collection. Name the collection: Items.
  3. Inside the collection create two columns:
    • name (String type).
    • count (Number type).
  4. Enter one or two sample records into the collection by clicking the +row link. You can enter any random data.

That's all you need to do for the database. You collection should look like this (with sample data):

Collection with sample data.

Collection with sample data.

The next step is to add Server Code scripts.

Server Code Scripts

Server Code scripts provider server-side app logic. The scripts will access the database and make data available for the app. You will create five scripts:

  • List script.
  • Create script.
  • Read script.
  • Update script.
  • Delete script.

All the scripts are small and the setup is identical. Let's start with the script to retrieve all items from the database.

Creating a Script to List All Items

To create the script:

  1. From the Server Code page, click Create script button. The Server Code editor will open.
  2. For script name enter: list_script.
  3. Copy and paste the following code:
var dbApiKey = "database-api-key";
var result = Collection.query(dbApiKey, "Items");
Apperyio.response.success(result, "application/json");

You only need to set the database API key. The database API key can be found on the database you just created Settings tab. After you set the API key you are ready to test the script.

Testing the Script

To test the script, open Run tab (right-hand side). As this script doesn't take any parameters, you an click Save and run button to test the script. You should see the items you added to the database.

Testing the script.

Testing the script.

Creating a Script to Add a New Item

This script will create a new item in the database.

  1. Create a new script and name it: create_script.
  2. Copy and paste the following code:
var dbApiKey = "database-api-key";
var name  = request.get("name");
var count = request.get("count");

var result = Collection.createObject(dbApiKey, "Items", {
  "name": name,
  "count": count
});
var updated = ScriptCall.call("list_script_ID");
Apperyio.response.success(updated.body, "application/json");

There is one more step here and that's setting the ID of the list_script. Once a new item has been added, the script will query the database again and get the updated list to return to the app. With the ScriptCall.call you can easily re-use/invoke an existing script.

To find the ID of the script, open list_script and then open API information tab. There you will see a URL for the script with the ID. Copy that ID and set it into the script above.

Testing the Script

To test this script you first need to create two input parameters. To create the parameters:

  1. Switch to Script parameters tab.
  2. There create two parameters: name and count and enter any sample data for them.
  3. Go back to Run tab and click Save and run button.

A new item will be added to the database and you will see an updated list as the script result.

Creating a Script to Retrieve an Item

This script will allow you to read (retrieve) a particular item. This is needed when editing or deleting an time.

  1. Create a new script and name it: read_script.
  2. Copy and paste the script code:
var dbApiKey = "database-api-key";
var itemId = request.get("itemId");
var result = Collection.retrieveObject(dbApiKey, "Items", itemId);
Apperyio.response.success(result, "application/json");
  1. In this script you only need to set the database API key.

Testing the Script

To test this script you need to create one input parameter called called: itemId. To set sample data, go to the database and copy and value under the _id column.

It's important to test the script and ensure it works before using it in the app.

Creating a Script to Update an Item

This script will allow you to update an item in the database.

  1. Create a new script and name: update_script.
  2. Copy and paste the script code:
var dbApiKey = "database-api-key";
var name = request.get("name");
var count = request.get("count");
var itemId = request.get("itemId");

var result = Collection.updateObject(dbApiKey, "Items", itemId, {"name":name, "count":count});

var updated = ScriptCall.call("list_script_ID");
Apperyio.response.success(updated.body, "application/json");
  1. In this script, you need to set the database API key and set the list_script ID.

Testing the Script

To test this script you need to create three input parameters:

  • name.
  • count.
  • itemId.

It's important to test the script and ensure it works before using it in the app.

The last script is to delete an item.

Creating a Script to Delete an Item

This script will delete an item from the database.

  1. Create a new script and name it: delete_script.
  2. Copy and paste the script code:
var dbApiKey = "database-api-key";
var itemId = request.get("itemId");
Collection.deleteObject(dbApiKey, "Items", itemId);
var updated = ScriptCall.call("list_script_ID");
Apperyio.response.success(updated.body, "application/json");
  1. In this script, you need to set the database API key and set the list_script ID.

Testing the Script

To test this script you need to create one input parameter:

  • itemId.

It's important to test the script and ensure it works before using it in the app.

You are done with the app logic. Next you are going work the app.

Getting the App

The app is available as a plugin which you can quickly import inside the App Builder.

  1. From Apps page click Create new app button.
  2. For app name enter CrudApp.
  3. Select jQuery Mobile tab, then select Blank. Click the Create button.
  4. When the visual editor loads, click Create new > From plugin > Create-Read-Update-Delete App.
  5. Click Import selected plugins button.
  6. On the next screen select List as the start page and click Apply settings.

The app is now imported. The app has all the pages and services pre-configured. The only step that is left is to connect the app to the backend.

Connecting the App with the Backend

The app has five pre-configured services:

  • create_script_service.
  • delete_script_service.
  • update_script_service.
  • list_script_service.
  • read_script_service.
App services.

App services.

When you open a service you will see the the URL (Settings tab) has {server code} placeholder. Replace this placeholder with Server Code script ID. The ID for each script can be found on API information page.

Once you have connected the app with the backend it's time to test the app.

Testing the App

You are now ready to test the app. Click the Test button in the App Builder to launch the app in the browser.

List page.

List page.

Update page.

Update page.

Testing on the Device

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

Create-Read-Update-Delete Sample App


A sample CRUD app.

Suggested Edits are limited on API Reference Pages

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