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.
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:
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:
You'll be asked to choose between
Test Mode and
Test Mode allows all logged-in users to access all records.
Locked Mode allows you to specify access control. We'll choose
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
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
Firebase: delete nodes#
Any known node address can be deleted using the
remove method. An address can also be deleted by using
This should all help us write our side-effects.