Integrate Firebase

[6twenty]

• All drawings are public, so no need for authentication
• Hitting root URL initiates a blank canvas with a GUID (firebase IDs are quite long, but could have a database key with an incrementing number, which is converted to hexadecimal through hashid)
• Hitting an ID URL, no extension fetches the path data and loads it; can continue editing (anyone can)
• Hitting an ID URL with png extension - unsure how well this will work, but there's a node Canvas package which might allow generating the png on the fly (might need to see if response headers can be defined)
  • Check if a cached image exists in file storage; if not:
  • Retrieve path data from database
  • Render as single canvas (using same code as front-end download.js; ideally same source file)
  • Generate blob and create a file which is uploaded to file storage
  • Either the created file is simultaneously sent to the client (if possible) or we wait and redirect to the stored file
  • The file is stored using a key based on the ID of the drawing and a hash of the path data (so that the image is cached as long as the drawing remains the same)

[6twenty]

Could also set up a function which watches for path data being written to the database and queues a job to create the file - so that when requested later, the file is already there.

https://firebase.googleblog.com/2017/03/how-to-schedule-cron-jobs-with-cloud.html could help - could schedule & manage delayed jobs in the database, and configure a cron task that runs every so often to process jobs.

[6twenty]

Functions support using imagemagick - so doodles could be converted to high DPI (144dpi)

[6twenty]

Not going to be possible to render doodles using Functions as node-canvas requires a couple of other system packages to be installed.

Instead, implement a save button? Doodles could be saved locally automatically, but only pushed to the cloud when hitting save (which renders a png same as hitting download, but sends the file blob to Storage). The Download button would then change to Share and would simply copy the png url to the clipboard. Or redirect to it?

[6twenty]

• Add Firebase
• Automatically create unique path ID
• Use path ID as database key to store path data
• Load path data from database
• Push rendered png to storage for sharing
• Retrieve rendered png from storage by appending .png extension to the unique doodle URL
• Loading existing doodles needs some sort of loading indicator
• Real time path updates - use child_added and child_removed to keep clients synced
  • Animate new paths as if they are being drawn in

[6twenty]

Re "Automatically create unique path ID" and "Use path ID as database key to store path data":

Loading a new doodle

• Use firebase to get a new doodle ID (database child key)
• Use something like node-shorthash to convert this ugly string into a shorter, friendly string (but still unique)
• Persist a special reverse map to the database (under "mappings" or something)
• All database interactions use the real key, not the short hash ID

Loading an existing doodle

• Get the short hash ID from the URL
• Query the database for the mapping to get the real key value
• Query the database for the doodle data using the real key

[6twenty]

• Update child_added to check if the path already exists (by key) - only new paths are added via this method
• Ideally the initial load should use the value handler to populate the paths in one go so that the canvas doesn't get re-drawn
• All 3 handlers shouldn't trigger any changes immediately, but rather add the events into a cache which is handled on each tick - this might mean that the value handler doesn't have to populate the paths, too