Memo-recorder app on persistent OCI backend

I have create a simple web application for recording short notes that I want to save for later processing. Each note consists of a timestamp and location, a label and some text and optionally a file, picture or a live photograph. A note is submitted, assigned a unique identifier and stored in a persistent location where it can later be found.

In this article I describe a memo recorder – a simple HTML + JavaScript static web application. It is hosted on OCI Object Storage and accessed through API Gateway (as described in this article). The notes that are recorded in this application are submitted to API Gateway and written as files in a bucket on Object Storage following the approach described in detail in my previous article Post files to OCI Object Storage Bucket via API Gateway.

Apart from the HTML and JavaScript of the web application, no coding is required. Through the use of Pre Authenticated Requests on the two buckets – one for loading the application assets and one for writing the memos – and appropriate routes in the API Gateway deployment, the backend is completely declaratively constructed.

So the steps necessary to get my little memo recorder app to work are as follows:

• prepare compartment, VCN, API Gateway as described in the earlier articles
• create bucket memo-recorder to host the static web application
• create a read only Pre Authenticated Request for this bucket
• create bucket u0loades to host the submitted notes – including images and other files
• create a writable Pre Authenticated Request for this bucket
• create an API deployment on API Gateway with two routes
• one for path prefix /memo-recorder – associated with the read only PAR for the memo-recorder bucket
• one for path prefix /submit – associated with the write enabled PAR for the uploads bucket
• run the memo-recorder app and make some notes – to demonstrate the files are created as intended in the uploads bucket

Before we get going on these steps, let’s take a brief look at the web application. You will find the code in this GitHub repository. It looks fairly horrible – that is OK, I only want to get proof that it is all working together. Making it look nice is for later.

The memo recorder app consists of a an index.html file and an app.js file. It presents the user with a number if inputs – and provides defaults for location and timestamp. The user can press the lowest button to provide the form with access to the camera and subsequently allow the user to take a picture (a camera capture) and include that in the submission of the memo.

When the user press the Submit Data button, at least one request is sent to the /submit endpoint on API Gateway – with a JSON payload that captures the form fields. If a file has been uploaded, it is submitted in separate call and the same applies to the optional camera capture.

Note: the submission request includes a header file-name that specifies the name that should be used for creating the file with the submitted content in the bucket. The name is created around a UUID – a universally unique identifier – that is calculated using the crypto API (available in newer browser versions):  crypto.randomUUID(). (for use in older browsers the open source library uuidv4 could be used instead).

After the memo has been submitted in one up to three requests, the form is reset and ready for capturing and submitting a new memo. The request is submitted to OCI API Gateway in this section of the code:

The PUT request is submitted to the the URL defined in the constant SUBMIT_ENDPOINT that contains the URL endpoint for the API Gateway deployment. It has three headers – of which X-Client-Secret currently is not used. Header file-name specifies the name for the file to be created from this memo-submission and is used in the API Gateway Deployment.

Of some interest is perhaps the code to get a picture from the camera (that I found on Codepen through StackOverflow).

The result of submitting the form as shown overhead is visible in the OCI Object Storage Bucket:

Checking the files that are created in the Bucket:

I am getting a little bit ahead of myself. Let’s go through the (no code) configuration required to make this work.

Prepare compartment, VCN, API Gateway

as described in   this article  (simple, straightforward, generic)

Create bucket memo-recorder to host the static web application

And add the index.html and app.js files to it.

Create a read only Pre Authenticated Request for this bucket

And record the URL for this PAR to be used in the API Gateway Deployment

Create bucket uploads to host the submitted notes – including images and other files

Straightforward no frills creation of a new bucket.

Create a writable Pre Authenticated Request for this bucket

Just like the creation of the read only PAR – only specify that write is enabled.

and record the URL for this PAR because it is needed in the API Gateway Deployment

Create an API deployment on API Gateway with routes for loading the memo-recorder app and for submission of notes

Two routes are required in the API Gateway deployment definition:

– one for path prefix /memo-recorder – associated with the read only PAR for the memo-recorder bucket

The path is defined as /{object*} which matches any request at /memo-recorder/. The method is GET, the backend type is HTTP and the backend URL is the readonly PAR for the memo-recorder bucket combined with the expression “/${request.path[object]}”. This is an expression that is dynamically replaced with the name (and if applicable the nested directory) of the requested file.

– one for path prefix /submit – associated with the write enabled PAR for the uploads bucket

The most interesting part here is the definition of the URL of the HTTP Backend:

https://idtwlqf2hanz.objectstorage.us-ashburn-1.oci.customer-oci.com/p/XAPEEr_q/n/idtwlqf2hanz/b/uploads/o/${request.headers[file-name]}

It is the write PAR for the uploads bucket followed by the expression ${request.headers[file-name]}, that evolves to the value of the header called file-name.

Once the deployments are ready, we can proceed to test.

Run the memo-recorder app and make some notes

To demonstrate the files are created as intended in the uploads bucket. And this is what I did in the beginning of the article:

Note the location bar: the application is accessed through the API Gateway deployment’s endpoint, the path /memo-recorder and the file /index.html. The file app.js is fetched from a similar endpoint.

After submitting a note with file and camera capture, three files end up in the uploads bucket:

Resources

Code for Memo Recorder static web application on GitHub – https://github.com/lucasjellema/memo-recorder

Article Hosting a simple HTML + JavaScript static web application on OCI Object Storage and accessed through API Gateway  this article

Article Post files to OCI Object Storage Bucket via API Gateway.on how to write a file in a bucket on OCI based on a simple PUT request (no coding required)

The code to get a picture from the camera (that I found on Codepen through StackOverflow).