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

Introduction

Server code allows you to write custom app code using JavaScript that runs (executes) on the Appery.io server. Any custom app logic (called script) you write is invoked via a simple REST API call. Server code is a good place to run custom app logic such as sorting large amounts of data, or doing calculations.

What are we going to build?

In this tutorial, you’ll learn how to create an app where when the Say Hello button is clicked, the name is sent to the server, a server script is invoked, and it returns a greeting message along with the time.

JQM project (to the left) and Ionic/AngularJS project (to the right)

jQm project (to the left) and Ionic/AngularJS project (to the right).

Below, you will find two different tutorials explaining how to build the Hello World app as a jQuery Mobile and Ionic/AngularJS project.

Before you begin

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

Creating a new app

  1. Create a new app: from the Apps tab, click Create new app.
  2. In a new window, select the project type (jQuery Mobile App or Ionic AngularJS App) and enter HelloWorld for the app name, then click Create. A new app will be loaded into the Appery.io Visual Builder.
  3. Before you can proceed with developing your project, you must write custom logic and create a service to invoke the script.

Writing custom logic

1. Inside the app builder, click Server Code. The Server Code tab opens.

2. Click Create script.

3. The script is now created (with a default basic example). For the Name field, enter helloWorld and click Save:
David

4. Before writing the code, you need to configure the dependency. Go to the Dependencies tab.

5. Check the moment.js 2.1.0 library. This is a list of available out-of-the-box libraries.

You can also easily add 3rd party libraries, and write your own.

6. Switch to the Script tab and replace the default script with the following:

7. Before invoking this script from the client, run it.

8. Switch to  the Script parameters tab and change the Request method to GET.

9. For Param, enter name and click Add. The word name will appear in left-side box. In the right-side box, enter David (or any other name).

A request parameter is created:

10. Switch back to the Run tab and click Save and run to execute the script. You’ll see the script output:

Your custom script works. Now you’ll invoke the script from the app you built earlier.

Invoking server code script

Any script is instantly exposed via the REST API, which makes it easy to invoke from the app.

Creating a REST service

1. Switch to the API information tab. You’ll see the service URL to invoke:

2. Copy this URL.

3. In the Appery.io Visual Builder, click CREATE NEW > Service (leave REST checked). Name the service helloWorld. Click Create Service.

4. For the URL, paste the script URL:

5. The script requires a name parameter, which you’re going to define in the Request tab.

6. Open the Request tab, enter name and click Add.

7. We can test the script here as well. Open the Test tab, enter any name, and click Test:

8. Click Import as Response to define the service’s response structure. Open the Response tab to see the response structure.

Alternatively, you may create a Server Code service: choose CREATE NEW > Server Code Services, select helloWorld from the script list, and then click Import selected services. The new service appears under Services in the Project view.

Now you can define the page UI and bind the service to it.

Query Mobile project

Building the UI

1. Every new app comes with a default first page. Open Pages > startScreen:DefaultStartScreen

2. Click the app header, and then change the label to Hello World in PROPERTIES.

3. Find and drag and drop an Input component to the page. With the input selected, in PROPERTIES, delete its Text, and for the Placeholder input field, type Enter Name.

4. Drag and drop a Button component below the input.

  1. Change its Text to Say Hello.
  2. Check Inline.
  3. Uncheck Corners.

5. Drag and drop the Label component below the button. Delete its default text.

The UI should look like:
hello_world_ui

If you want to change the app theme, go to Project > App settings > General. Select jqm-classic for Theme and B for Swatch. (You may need to add more themes by clicking the appropriate link.) When you go back to the page, it will look like:
hello_world_ui_jqm

You can pick any theme/swatch you want.

Initially, Appery.io JQM apps come with only one predefined flat-ui theme.

Other default themes are available via plug-ins. To learn how to import them, go here.

Binding the service

1. Open startScreen and switch to DATA view.

2. For Add datasource, select Service > helloWorld, and click Add. The service has been added to the page.

3. The system generates two mapping actions  for Before send and Success events by default. Click Mapping for Before send event and create the following mapping (select the Text property and drag it over name):beforeSendMapping

4. Click Save and return.

5. Similarly, create the following mapping by clicking Mapping for Success event:
successMapping

6. Click Save and return.

Invoking the service

  1. Open DESIGN view.
  2. Select the Say Hello button, and open the EVENTS tab.
  3. The component (mobilebutton_x) and the event (Click) should be set. For the Action, select Invoke Service > restservice1, and click Save.

You are ready to test the app!

Testing the app

Click TEST to launch the app in the browser. Enter a name, and click Say Hello.

Ionic/AngularJS project

Building the UI

The app covered below is 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.

1. Every new Ionic/AngularJS app comes with two default pages (index and Screen1). Open Pages > index:

2. Change the Text property of the Header to Hello World under PROPERTIES:

3. Clear the Text field for the Footer.

4. Select Color = balanced for both: Header and Footer.

5. Now, switch to Screen1 and drop a Card component to the page.

6. Clear the Text field for the upper Card item under PROPERTIES.

7. Drag an Input, a Button , and a Text components to the lower Card Item.

8. With the Input selected, for the Placeholder input field, type Enter Name and define: ng-model = user.name:
Input

9. For the Button component, change its Text to Say Hello,  and define the function for ng-click = sayHello().

10. Lastly, define the Text component property Text = {{text}}:
Text

This is how the page should look like:
Looks

Creating a model

1. Now, go to Project > Model to define a model.

2. Type a name for a new model: user and click Add to create it.

3. Now, click the Add button next to the model name to create the following data structure to specify the child field name and type:Model

SCOPE

  1. Switch to the SCOPE view of Screen1 and create two variables: user of user type and text of String type.
  2. Next, create a new function, name it sayHello, then click Edit next to it to open the function editor.
  3. In the editor, click the arrow to filter snippets, select Invoke service, and click Insert snippet:
  4. Delete the text “service_name” in the code and  click CTRL+SPACE to get the drop-down with all the available services. In this case, autocomplete will insert the helloWorld (for the REST service) or helloWorld_service (for the Server Code service).
  5. Now, when the service is added to the function code, you can use mapping to map the service to the page. The click on the upper mapping button defines the service request, the lower one – the service response. First, define the request and click Save & Replace: request
  6. Next, define the response like the following and click Save & Replace:
    response
  7. The resulting sayHello function should look like:

Testing the app

You can quickly test the app in the browser by clicking TEST. Enter a name, and click Say Hello:

To test the app on your mobile device, check TEST > Public. You can also scan the QR code (requires QR reader app) and launch the app on your device.