Using the Camera component

What are we going to build

We will build an app that starts the phone camera on button click. After taking a picture, the picture will be displayed in the app. The app will look like this:

Before you start

Tutorial level: Intermediate

Apache Cordova (PhoneGap)

Apache Cordova (PhoneGap) is automatically included when you create a new project in Tiggzi. The Camera component used in Tiggzi is the camera component from Apache Cordova. To learn more about the component and any other settings and options, please go to the Camera documentation page.

Creating a new app

Create a new app in Tiggzi app builder. From Apps page, enter app name (use any name you want) and click Create. You will see a start page.

Creating the UI

The UI will be pretty simple and will look like this:

Update the image size to 200×200 and rename the Image component to: myImage.

That’s all we need to do.

Adding Camera service to the app

To add the Camera service:

1. From Projects view, Create New > Service > Camera, click Create Service. The service will be listed under Services folder.
2. If you open the service, you will see that everything has been pre-configured:
   

Let’s now bind the service to the page

Binding the Camera service to the page

1. Open the Data tab
2. For datasource, select Device > CameraService > Add. The camera service will be added to the page:
   
3. Click Edit Mapping.
4. As this is a pre-configured service, everything is set in the Request tab:
   
   You can change any of these values later. The best way to learn about these properties is to visit Apache Cordova (PhoneGap) Camera docs page.
5. Open Response tab
6. As we want to display the picture that we just took, create the following mapping:
   
   Note: for imageDataBase64 parameter to return data, destinationType in request parameters must be set to: Data URL.
7. Save.

One more thing we need to do is to open the camera on button click.

Launching the camera

1. Open Design tab
2. Select the button, open Events tab and add the following event:
   mobilebuttonX > Click > Invoke service > mobilecamera1, click Add Event.
3. Save.

Testing the app

As we are invoking a native component (Camera), this app has to be tested as a hybrid app or installed on the device. Testing will not work in the browser. The final app will look like this:

Android

Testing on Android is a little bit simpler as you can install any app rather quickly on your device. These are your options for testing:

1. Use the Tiggzi Mobile Tester app. It’s a small app that allows you to launch any app created in Tiggzi as a hybrid app
2. Build the Android binary and install it your device. When the build is completed, you will 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. There is an option to run the Tiggzi Mobile Tester for iOS. However, it requires building the app and installing on your device.