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.
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
Button component to
takephotobutton. Rename the
Image component to
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.
Binding the camera service
1. Open the
3. Click “Mapping” for
Before send event.
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
imageDataBase64parameter to return data, the destinationType in the
requestparameters must be set to
Launching the camera
- Open the
- Select the button, open the
EVENTStab, and add the following event:
takephotobutton > Click > Invoke service > camera_shot, and click “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.
Testing in Android is relatively simple, since you can quickly install any app on your device.
- 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.
- 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.