Part 5: Store image files in collections

Fix it Fast Scenario: Table of Contents

Before You Begin

Purpose

In this part of the tutorial, you use built-in MCS platform APIs to provide functionality that is commonly required to store data remotely for mobile applications.

The Storage API provides a flexible storage system that enables mobile application developers to store, update, and delete data on the cloud from the mobile application. This data is stored in collections.

By creating a storage collection in a mobile backend, a mobile application developer enables different users to share the data that the mobile application sends or updates, and allows multiple devices owned by a single user to share mobile application metadata. A mobile backend uses one or more collections to store and organize the application's objects and resources. You can create a new collection, or choose from existing collections.

Within a mobile backend, collections store the data that is manipulated by the mobile application's read or write requests. Similar to a table, a collection manages a group of various data objects, such as JSON payloads, text files, or images. These data objects are opaque, meaning that they are stored and retrieved from within a collection by using a key, a user- or system-generated GUID (generated unique ID). The Storage API's primary role is enabling mobile applications to interact with their data. As such, it's not intended to act as a database-as-a-service (DBaaS) solution by storing business data used by external systems, nor is it intended to host HTML 5 applications as a content management system (CMS) would.

Step 1: Create a shared storage collection

In this section, you create a storage collection for technicians to load photos of the broken appliance.

Log on to your MCS instance and click the Development button.
In the Developer Portal, click the Mobile Backends icon.
In the Filter property, enter the two unique characters that you used when creating the mobile backend (_xx). You should see your mobile backend in the list.

Select the mobile backend and then click the Open button on the right side.
Click the Storage icon on the left. You are creating a collection to be used in this mobile backend, so click the New Collection button.
In the New Collection dialog box, create the collection by using the following values:

Collection Name: FIF_TechUserData_xx (where xx is two unique characters).

This collection will be used to store user preferences and images that the user attaches to incident reports. The collection name is used to form the resource identifier (URI) for the collection. For example, an API call to a collection would be of the form: {baseURI}/storage/collections/{collection}

Collection Type: Shared

When you use Shared, you enable all users to access all of the objects in a collection. By selecting User Isolated, you restrict the READ and WRITE access to specified roles. Keep in mind that you can't change the scope of the collection after you've set it. If you designate the collection as isolated, for example, then you can't change it to a shared collection.

Short Description: Images uploaded by technicians.

Then click the Create button.
You navigate to the collection properties, where you can specify user access to the collection.

Set the Read-Only permission to use your FIF_Staff_xx role.

Then, set the Read-Write permission to use your FIF_Technician_xx role..

Step 2: Upload image files to the storage collection

In this part of the tutorial, you upload some images to the collection that you just created.

Click the Content tab under the breadcrumbs for your collection.

Then click the Upload Files button.
When the file browser opens, select the DishWasher.png appliance image from the /LabFiles/images directory.

Then click Open.
The image is loaded into your storage collection.
From here, click the Upload button and repeat the process and upload the Refrigerator.png image.

Step 3: Test the collection by using the MAF MCS Tester Application

In this section, you test the collection by using the MAF MCS Tester Application.

Just as you did before, navigate back to the MAF MCS Tester Application.

If you logged off or exited the MAF MCS tester application, then start it up an log on as joe_xx .
Click MCS Storage API.
On the Storage page, notice that the collection you just created is displayed at the bottom of the page.
Click the collection to open it.

You will see all of the objects in the collection.
Click the edit icon next to the first object in the collection.

This opens the collection details and shows you all the details of the object and allows you to change some of the attributes.
Click Collection Details to navigate back to the Collection Details page.
On the Collection Details page, click the download icon next to the first object in the collection.
Scroll down if necessary and click Download Object.

This will download the image (or whatever the object is) and display it on a page.
Click Done.
Click Collection Details and then Storage Home to return to the Storage Home page.

Step 4: Create a user isolated storage collection

Earlier, you created a storage collection that everyone can access. Now, create a new user isolated storage collection that only staff users can access.

Access the Developer Portal, select the Mobile Backends icon, and find your mobile backend.
Click the Storage icon on the left and then click the New Collection button.
Next, create a collection to store images. We'll test the collection by loading an image from the lab file zip you downloaded earlier, but the image could just as easily be loaded from a mobile device.

In the New Collection dialog, enter the following values:

Collection Name: FIF_IsolatedData_xx (where xx is two unique characters).
Collection Type: User Isolated
Short Description: Isolated storage collection.

Then click the Create button.

When you create the collection, you will navigate to the collection properties, where you can specify user access to the collection.
Set access to the storage collection to be Read-Write for FIF_Staff_xx. Set the Read-Write (All Users) to FIF_Technician_xx. Use the drop-down list and filter to find and set the role.
To upload some images, click the Content tab and then click the Upload Files button.
Unlike with the shared collection, you are prompted and must enter a username.

Leave the Realm set to Default and then select jean_xx as the Username value.

Then click OK.
In the Open dialog box, navigate to the /LabFiles/Images/ directory. Then, select the Oven.png to upload and click Open.
The image is uploaded and included in the storage collection.

Next, you'll add another image to the isolated collection, but this time you will add it as another user.
Click Upload to add another image.
Just like with the shared collection, you are prompted to enter a username.

Leave the Realm set to Default and then select joe_xx as the Username value.

Then click OK.
In the Open dialog box, navigate to the /LabFiles/Images/ directory. Then, select the Dryer.png to upload and click Open.
The image is uploaded and included in the storage collection. Notice the User ID associated with the Dryer image.
Click the Oven image and notice the User ID is different.

Step 5: Test the isolated collection by using the MAF MCS Tester Application

In this section, you test the isolated collection that you just created and populated. You use the MAF MCS Tester Application.

Just as you did before, open the MAF MCS Tester Application and click Logout.
Log in as joe_xx.
Click MCS Storage API.
On the Storage page, notice that the isolated collection you just created is displayed at the bottom of the page.
Click the Isolated storage collection to open it. You see only the objects that you created.
Click Storage Home to go back to the list of collections.
Click the switch to Include other user objects (isolated collections). This will allow you to see all user objects in an isolated collection if you have the proper role assigned.
As you did before, click the Isolated storage collection and notice that you now see the objects from all the users of the isolated collection.

That shows that if you have the Read-Write (all users) permission, you can see other user objects within the isolated collection.

You have now completed this tutorial.