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 starts the phone camera on button click. After taking a photo, the photo will be displayed in the app.

The app will look like:
app_view

Here you can see how to upload a taken photo to the Appery.io database.

Before you begin

Tutorial level: intermediate.

Apache Cordova (PhoneGap)

Apache Cordova (PhoneGap) is automatically included when you create a new project in Appery.io. The camera component used in Appery.io is the camera component from Apache Cordova.

To learn more about the component, and any other settings or options, please see the camera documentation page.

Creating a new app

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

Creating the UI

The UI will look like:
UI

Rename the Button component to takephotobutton. Rename the Image component to photopreview.

Adding the camera service

To add the camera service:

From the Appery.io builder: CREATE NEW > Service > Camera, and click “Create Service.” The service will be listed under the Services folder.

If you open the service, you’ll see that everything has been preconfigured:CameraService

Binding the camera service

1. Open the DATA tab.

2. For datasource, select Device > CameraService > Add. The camera service will be added to the page. Name it camera_shot:CameraShot

3. Click “Mapping” for Before send event.

Since this is a preconfigured service, everything is set under Service request:Mapping1

You can change any of these values later. The best way to learn about these properties is to visit the Apache Cordova (PhoneGap) camera documentation page.

4. Click “Mapping” for Success event.

5. Since we want to display the photo we just took, create the following mapping:Mapping2

For the imageDataBase64 parameter to return data, the destinationType in the request parameters must be set to Data URL.

To do it, open the Before send event mapping and configure the destinationType value under Service request:Mapping

6. Save.

Launching the camera

  1. Open the DESIGN tab.
  2. Select the button, open the EVENTS tab, and add the following event:
    takephotobutton > Click > Invoke service > camera_shot, and click “Save”.
  3. Save.

Testing the app

Since we’re invoking a native component, this app has to be tested as a hybrid app, or installed on the device. Testing in the browser won’t work.

Again, the final app will look like:
app_view

Android

Testing in Android is relatively simple, since you can quickly install any app on your device.

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 on 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. Build the app and install it on your device.
  2. You have the option to run the Appery.io Mobile Tester for iOS. However, it requires building the app and installing it on your device.