This Tutorial has been retired.
Please refer to 'Add Data into a Cloud Collections from an App'
Learn RESTful with 'Capture and Upload'
In this Tutorial we show how to use RESTful service to upload assets into a Cloud Collection by building Capture and Upload an app which stores picture and text into a Cloud Collection.
Note that it works the same if the app stores pictures and text into a 3rd party CMS using RESTful.
We use Cloud Collection for convenience but feel free to use other REST web services.
This articles walks you through the development of the Capture and Upload app.
For convenience you can also install Capture and Upload in your Workspace.
Installation of the Training App
- Please go to Dashboard and select 'Tutorial' tab.
- Install the app 'Capture and Upload' in your Workspace.
- You need to have looked at the introduction to EachScape to follow this Tutorial.
- To be able to write in your Cloud Collection you will need to authorize Write access into your Cloud Collection.
Capture and Upload Overview
Capture and Upload lets a user take a photo or select a photo from the photo directory then allow the user to add their name an a text comment before storing the photo and the text into a Cloud Collection.
The App uses the Remote Query Service (RQS) to execute a RESTful call.
It uses 'Select Photo' action to access the camera. The photo is stored in a variable passed as a parameter to the RESTful call.
Step by Step development
There are 3 Blocks in this view:1. Text Block – My Photos
- Part of Header. It is a text Block used to Title view.
- This Image Block is used as a button. The Tap Event of this Image Block trigger the Action “Select a Photo” . When that Action is complete meaning when a photo has been selected either form the Camera or from the user photo library, it triggers a View Level Event 'Select Photo Done ' which we will use to display the selected photo and continue our questions.
- This List Block is used to display the contents of the Cloud Collection associated to this app. Each time we add new photo and text in the Collection we refresh the List.
*You will need to create 2 Layers (described further in this article) first. They are “Data Submit” and “Data Form”
Now lets edit the Camera Button Events to choose a photo.
Right click the Image and choose Edit to bring up the Component Settings for the block. From here choose the Events Tab. Choose the option Tap. Here we will add 4 actions.
1. Action 1: Delete a Variable
- Variable Name = selectedPhoto
- Variable Name = uploadtext
- Variable Name = uploadname
- Selected Photo Key = selectedPhoto
View 2: Image GalleryChoose "New View" from top menu.
Choose Canvas View from the list of options. Name it Image Gallery and hit Create.
You can add a text block, or image, or button block to the top left of the canvas as a navigation button to get back to the previous page.
Next Drag in an Image Gallery Block from the Component Selector, under the tab Blocks.
Then you will need to set your Data Source to your cloud collection. The Image you want to input is photo_original and choose to Fit for your sizing of the image.
Next you can input a caption. This will come from your column Text found in your data source. (Further down in this article you will see how we input this text In the Layers description under Layer 2: Data Form)
Create 3 Layers:
Layer 1: Data Submit LayerThis Layer will display the image you either capture, or upload from your existing photo library on your device, and be set to the variable [[var:selectedPhoto]]. This layer will also overlay the Data Form submission Layer.
1. Drag in from the and "Image Block" from the Component Selector, under the “Blocks” tab.
2. Right click the image block you just dropped into the builder. Click the block from the menu that pops up to begin editing fields for this block in the Component Settings that will slide out from the right (Alternatively you can choose the block from the Navigation Panel on the left from the hierarchy of views and blocks found in your app. Just click the block to have the Component Settings slide out from the right)
Under the General Tab label this block “Captured Image”. The changes made, including naming the block, are saved when you click update at the bottom of the Component Settings.
3. Set image source to [[var:selectedPhoto]]
(All of these changes made under the "Specific Tab" in the Component Settings)
- Click on Edit Image.
- Choose Image Source
- From left column choose expression.
- Type in [[var:selectedPhoto]]
5. Set the image to be 160 from top 0 from the left 0 from the right and 0 from the bottom. This way the Layer we will set up next (Data Form) will be visible so user can input values.
6. You will now have a Custom Block that can be used for input on the Remote Query Layer we will set up later.
This Layer inputs text for the Name of your picture (inputs entered text into your column [Name] in Cloud Collection), creating the variable [[var:uploadname]]
Layer 2: Data Form
This Layer inputs text for the Description of your picture (inputs entered text into your column [Text] in your Cloud Collection), creating the variable [[var:uploadtext]]
This layer also has an image block; in the image below it is a blue UPLOAD image. This image acts as a button, triggering the Event to “Add Layer = Remote Query” (set under the events tab in Component Settings) which will send the text from the Text input blocks to your Cloud Collection.
1. URL to https://builder.eachscape.com/data/api.xml
Before we add tap actions of the camera button, tap on “Edit View” then choose the “EVENTS” Tab. Scroll down to where you see Select Photo Done. Here you will choose to Add Layer and choose the Layer “Data Form”. Add one more action and select Add Layer and choose the Layer “Data Submit”
Layer 3: Remote Query Service
2. Method – set to “POST” so that the app knows to post anything we have selected to our Cloud Collection.
3. Fields = 3
*any column of our data source is input into brackets with the term value before it. Ex: if I had a Column labeled Photos in my cloud collection I would input its Name as – value[Photos] (see image below)
- FIELD # 1:
This tells the builder which column to add our input to
- VALUE = [[var:uploadtext]]
The variable we set up in the “Data Form” View can be accessed here in the Variable option from the left
column when you tap on the Pencil to edit content for this value.
- FIELD # 2:
This tells the builder to add inputted text to our [Name] Column in our Cloud Collection
- VALUE = [[var:uploadname]]
This tells the builder to add inputted text from Data Form
- FIELD # 3:
This is the api we generated to make our Cloud Collection our own and not a shared collection when app is
- VALUE = api key we generated from our Cloud collection
See Link below for how to obtain the api key for this field.
4.IMAGE – The image we called “Captured Image”
5.IMAGE NAME = values[Photo][asset]
- This tells builder as we now know from previous step, to add the image or [asset] to the [Photo] Column of our Cloud Collection.
- Name to give our [asset] (photo we capture or upload from our library to be added to our Cloud Collection)
8.RESPONSE PARSER = XPath
9.STATUS CODE VARIABLE = httpStatus
- This is the variable to use to store the HTTP response code.
- This is the variable that tells us the reason for response from our [[var:httpStatus]] variable and the server.
IMPORTANTThis Remote Query Service Text Upload app is setup with an API key that references a specific Cloud Collection. In order to make the app your own you will need to generate an API from the Cloud Collection attached to the app. This Cloud Collection is called "RQS".
Here is a support document on how to generate an API key: Generating an API key from an EachScape Cloud Collection.
EVENTS FOR THE REMOTE QUERY SERVICE LAYER:
- Show Alert Popup: Text = “Photo is successfully uploaded”
- Refresh Data Source: Choose your data source
- Remove All Layers
- Refresh Block: Refresh the Block on your first view with the List that displays all the content of your Cloud Collection.
- Show Alert Popup: Text = “Upload failed”
- Remove All Layers
- Show Alert Popup: Text = “Server error [[var:httpStatus]] [[var:usedValue]]. Please try again.
1. Use the select photo action and set the photo to a variable.
2. Have an Image block somewhere that is driven by that variable (which needs to be refreshed after the photo is selected).
3. Add the remote query service layer.
The events run Asynchronously, the Remote Query Service layer will be added before the user is done selecting a photo.
The events work like this: Tap event: select a photo. View's Select Photo Done event: Refresh image block; add a layer (layer has rqs in it).
- Authorize Write Access to a Cloud Collection