Create Graphics

In this chapter, we will integrate Reframe and Firebase to save the graphic "entity". This is analogous to a POST request with a traditional REST API.

Create graphics#

Canva helps you design posters, logos, social media posts etc. In our domain, we are going to call these products "graphics". A graphic has multiple entities attached to it: a name, a creation time, an owner, and the JSON representation of the graphic.

To build the editor, we are going to rely on Fabric. Fabric is an HTML Canvas manipulation library that we'll use to create graphics. The created graphic will be stored in the Firebase database in JSON format.

In this chapter, our focus will be on the creative aspect of the graphic entity. The actual editing will be handled in a future chapter.

We want the home page (/graphics) to show a grid of all graphics and a call to action to create a new graphic:

Graphics Page Wireframe

While building the login system, we created the UI first, followed by the integration. For this chapter, we'll flip the process and build the integration first. We'll then use the REPL to manually test the integration.

Set up Firebase Database#

Firebase provides us a real-time NoSQL database that can be accessed via the SDK. Interacting with Firebase DB is conceptually similar to interacting with an API.

To get the ball rolling, we need to create a database. Log in to the Firebase console, select your application, and create a new database in the Realtime Database section:

Create New Database

You'll be asked to choose between Test Mode and Locked Mode. Test Mode allows all logged-in users to access all records. Locked Mode allows you to specify access control. We'll choose Locked Mode:

Select Locked Mode

When done, you'll be redirected to the database page.

In Firebase DB, objects are stored in a tree shape. You can create nodes like /graphics/$graphicId. Database rules let certain users access certain nodes. For our use case, we want a user to be able to access all graphics created by her. So, we'll save graphics under /graphics/$userId/$graphicId node and set a rule to let $userId = x access all nodes under /graphics/x. Click on the rules tab and replace the existing JSON with:

The configuration restricts the read and write of all child nodes of /graphics/userId to the logged-in user whose id is userId. Every user's id is maintained by Firebase Auth.

If you'd like to learn more about Firebase permissions, we recommend reading this StackOverflow question and the official docs. In-depth knowledge of how Firebase permissions work is not required for this course.

Firebase: add a node#

Firebase DB can be visualized as a tree, with the root node being /. To write to any node, we can use the set function:

In the example above, we wrote a JS object to /graphics/134/523. If a node doesn't exist, it will be created.

Firebase: add an item to collection#

Assume our use case where a user can have multiple graphics. For the rules to work we need to make sure that all user-related graphics are stored under /graphics/$userId. When we want to create a new graphic, we need Firebase to generate an id for us. This can be done using the push method:

Firebase: delete nodes#

Any known node address can be deleted using the remove method. An address can also be deleted by using set with null:

This should all help us write our side-effects.

Creating graphics#

 

This page is a preview of Tinycanva: Clojure for React Developers

Please select a discussion on the left.