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

What are we going to build?

In this tutorial, you’ll learn how to build an app that works with the device’s accelerometer via the PhoneGap Accelerometer API. The app will retrieve accelerometer data with a specified frequency, and display it on the page. The frequency parameter can be changed on the page, and the accelerometer data retrieval can be started or stopped by pressing the button.

The app will look like:
Final

Before you begin

Tutorial level: intermediate.

Apache Cordova (PhoneGap)

Apache Cordova (PhoneGap) is automatically included when you create a new project in Appery.io.

Note: To learn more about this component, and any other settings and options, please go to the accelerometer documentation page.

Creating a new app

Create a new app in the builder. From the Apps page, enter an app’s name and click “Create.” You’ll see a start page.

Creating the UI

Again, the UI will look like:
Final

First, place the Textarea component on the page and rename to acc_info. Clear the Text field:
TextArea

Place the Button component on the page, and rename it to stop_watch_button. Type “Stop watch” into the Text field:
StopWatch

Next, place the Label component, and type “Enter frequency here:” into the Text property.

Lastly, place the Input component on the page, and name it frequency_input. Type a default frequency value into the Text field. In this case, it’s 500:
FrequencyInput

Invoking via JavaScript

The following example shows how to work with the accelerometer via JavaScript (without services).

Creating the JavaScript file

Move the larger part of the code to a separate JavaScript file.

  1. In the Appery.io builder: Create New > JavaScript, enter the name AccelerometerJS, and click “Create JavaScript.” The new JavaScript file will be listed under the JavaScript folder.
  2. Open the AccelerometerJS file, and add the following code:
  3. Save.

Note: Read how to get and set values for the UI components here.

Mapping JavaScript events

Once the JavaScript file is ready, it’s time to map some events. The Textarea component size is small by default. Make it bigger by adding the following event:

  1. Open the DESIGN tab.
  2. Select startScreen (use breadcrumbs), open the EVENTS tab, and add the following event: startScreen > Load > Run JavaScript.
  3. Add the following JavaScript code:
  4. Click “Save”.

Now we need to launch the acceleration data retrieval:

  1. Add the following event: startScreen > Device ready > Run JavaScript.
  2. Add the following JavaScript code:
  3. Click “Save”.

All startScreen events look like:StartScreenEvents

Make the start/stop function:

  1. Select stop_watch_button, and add the following event: stop_watch_button > Click > Run JavaScript.
  2. Add the following code:
  3. Click “Save”.

The app is ready for testing. Please recall that since we’re invoking a native component, the app needs to be tested as a hybrid app, or installed on the device. The Appery.io Mobile Tester is a convenient way to test your apps. You can find the application in the Google Play Store; search for “Appery.io.”

Wrapping into a service

The accelerometer can also be invoked via a service. Appery.io doesn’t have a predefined Accelerometer component; instead, this example uses a generic service.

Note: Don’t use both methods (Invoking via JavaScript and this one) at the same time.

  1. From the builder: Create New > Service > Generic (custom JavaScript implementation), enter name AccelerometerService, and click “Create Service.” The service will be listed under the Services folder.
  2. Open the service, and go to the Request tab. Specify one parameter – frequency:Request
  3. Go to Response tab and add two parameters – accelerometerData and buttonText:Response
  4. Go to the Settings tab and click “Add custom implementation.”
  5. In the dialog box, type “AccelerometerImplementation” for custom JavaScript implementation and click “Create”:
    CreateJSImplementation
  6. Click “Open,” and you’ll see the default implementation. Replace the default code with the following:

Mapping the Accelerometer service

  1. Open the DATA tab.
  2. For datasource, select Service > AccelerometerService > Add. The accelerometer service will be added to the page. Name it accelerometer_serviceaccelerometer_service
  3. Define the following mapping action for Before send event, then click “Save and return”: BSMapping
  4. Define the Success event mapping, and save: SuccessMapping

Launching the service

There are two operations that must be performed before launching the accelerometer service. As with the JavaScript version, the Textarea needs to be a little bigger:

  1. Open the DESIGN tab.
  2. Select startScreen (use breadcrumbs), open the EVENTS tab, and add the following event: startScreen > Load > Run JavaScript.
  3. Add the following JavaScript code:
  4. Click “Save”.

Since the accelerometer implementation (generic service variant) uses local storage to determine when the “watch” must be stopped or started, clearing it upon start-up will guarantee that this check works properly:

  1. Add the following event: startScreen > Device ready > Run JavaScript.
  2. Add the following JavaScript code:
  3. Click “Save”.

Launch the accelerometer service when the device is ready:

  1. Add the following event: startScreen > Device ready > Invoke service > accelerometer_service.
  2. Save.

All the events on startScreen will look like:3StartScreenEvents

To start or stop accelerometer data retrieval by button press:

  1. Select stop_watch_button and add the following event: stop_watch_button > Click > Invoke service > accelerometer_service.
  2. Save. StopWatchButtonEvent

Testing the app

Since we’re invoking a native component, the app needs to be tested as a hybrid app, or installed on the device.

The final app will look like:
Screenshot_2014-12-30-13-49-26

Android

Android testing options:

  1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app.
  2. Build the Android binary and install it your device. When the build is completed, you’ll see a QR code. Scanning the QR code will download the app to your phone. You can also email the app to your device.

iOS

iOS options:

  1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app.
  2. Build the app and install it on your device.