Dive into the Box Platform

Photo by Malek Bee on Unsplash

In this exercise we are taking a real problem and seeing how we can solve it by using the Box Platform. We’ll be using UI Elements, Files & Folders, Tasks, and the Sign APIs to automate a process in a dive center.

You can take a look at the full working web application in this repo.

The Story

Diving is a lot of fun. Discovering underwater ecosystems, observing species in their natural habitat or even feeling like an underwater archeologist when you dive into a wreck.

What is not fun is the paper work.

Invariably the long wait times, early in the morning, for the dive center to check your diving certification, your insurance and sign the traditional waiver, when you just want to make it to the boat and go make some bubbles.

Wouldn’t it be cool if we could send our certification and insurance cards ahead of time and sign the waiver before we get to the dive center?

Dive into the Box

Dive into the Box home page

This hypothetical dive center, does have a very simple web site, where they handle the bookings. The hosting provider has limitations on file storage (both size and price), and since certifications and insurance cards are personal identifiable information (think PII/GDPR), you want these files somewhat more protected than the hosting provider can guarantee. Security is important.

That's problem #1.

In this dive center, each Dive Master is responsible for the paperwork of each diver booked for the dive site. We should find a way to notify them when a new document has been uploaded and have them do a simple go/no go (approve/reject) for the documentation.

That’s problem #2.

The waiver is a necessary legality, and we want to save time and paper (not to mention pens and paper do not react well with salt water).

That’s problem #3.

made at imgflip.com from Imgflip Meme Generator

Problem #1: Hosting, uploading, previewing and manipulating files

We start by allowing the user to upload their diving certification, and insurance card, using the uploader UI Element.

Check out more about Box's UI Elements here.

First the system handles the folder creation based on the booking so all files end up in the right place. Each dive master is responsible for a dive site and the folder structure is some like /bookings/<dive site>/<date>/<diver>.

e.g. creating a folder with Box API

Then, when instantiating the uploader, we point it to the proper folder. We also implement the “complete” event to handle the files once they are uploaded.

e.g. instantiating an Uploader

This will upload the files into the dive site, on the booking date, for the diver folder structure.

It will also store the file_id in the database so it can be used on the previewer.

e.g. handling the upload of a file

Another UI Element, the previewer, can display the files in the app.

e.g. of a booking with the files uploaded and the waiver generated

Problem #2: Notifying the Dive Master and checking the documents

For this we’ll be using the Box Tasks API. Every time a document is uploaded, this creates a task for the divemaster to approve/reject the document.

e.g. assigning a task

The dive master receives a task to approve or reject the documentation.

e.g. of the task inbox

e.g. of approve/reject task assigned to Dive Master

Problem #3: Signing the waiver

Here we’ll be using the Box Sign API to generate a signature request based on a template. Box takes care of all aspects of the flow, from sending an email notification to having the document signed and a signature log.

e.g. triggering the sign request

e.g. of email received by diver

e.g. signing the waiver

Happy Divers, Happy Life

e.g. of happy divers ;-)

Box Platform

• Officially supported SDKs (Java, C#, Python, Node, iOS and Android)
• UI Libraries (iOS, Android, JavaScript/REACT)
• REST API
• CLI (command line interface)

So whether you are a Developer looking to integrate Box into your app, or an Admin looking to automate Box administration tasks, check out our platform.

Get started here.