Flutter x Firebase | Extensions

Jackie Moraa
4 min readFeb 7, 2024

--

In the famous words of Jeff Atwood: “The best code is no code at all. Every new line of code you willingly bring into the world is code that has to be debugged, code that has to be read and understood, code that has to be supported. Every time you write new code, you should do so reluctantly, under duress, because you completely exhausted all your other options.”

And Firebase Extensions said: “Hold my beer!”

So what are Firebase Extensions?

Firebase Extensions help you deploy functionality to your app quickly with pre-packaged solutions thus eliminating the need to write these functionalities from scratch. Once installed, a Firebase Extension will perform a specific task or set of tasks in response to HTTPS requests, Cloud Scheduler events, or to triggering events from other Firebase products, like Cloud Firestore or Firebase Cloud Messaging.

Key capabilities of Extensions

  • Reduce time spent on development, maintenance, and growth: Since an extension is a packaged solution, all you do is install and configure the extension.
  • Built to be configurable and reusable: Each installed instance of an extension is unique. You specify configuration values for the extension that are unique for your app, project, or use case.
  • Integrates the Firebase platform: Extensions can respond to events generated by the Firebase products that you already use in your app. A change in one Firebase product can trigger an extension to perform its task, even a task using another product.
  • Security and limited access: The application logic for extensions runs on the backend, using Google Cloud Functions, so the code is fully isolated from the client.
  • Zero maintenance: You never worry about credentials, server configuration, provisioning new servers, or decommissioning old ones.

Getting started with Firebase Extensions.

Choose the extension
Explore the various Extensions available for use in your Firebase project from the Extensions Hub. There are quite a number of extensions to choose from, select one that meets your project’s needs.

Installation and configuration
When you find the extension you require, click install. For our Catsagram project, we’ll go with the Shorten URLs extension. When you click on install, you’ll be required to select the Firebase project to add the extension to. One thing to note: In order to use Firebase Extensions, you must get on a billing plan. So, upgrade from Spark to Blaze. You will only be charged based on your usage of the database, storage, hosting etc. For a demo like ours, we actually won’t be charged at all.

Once upgraded, follow the other steps in the installation guide e.g., enabling additional services.

You can then configure and customise the behaviour of the extension in the next steps e.g., the name of the collection with the Url to be shortened and the name of the particular field with the long Url.

You’ll also require a Bitly access token. Create/log in to your Bitly account and go to the API documentation and scroll down to see where you can generate your access token.

Generate the token and add it to the extension configuration then create a secret which will hide the token. Then install it! It will take a couple of minutes (approx 3–5) to finalise the set-up, so be patient. Once the installation is done, then the extension is ready to use.

Now, let’s modify the UI to post items in Cloud Firestore. On my feed screen, I’ve added a FAB which opens up a dialog box with text fields to capture the image url, breed and description. I’ll not go into detail on this integration. We covered Cloud Firestore and all the CRUD operations in this article. So with that set-up, let’s see the extension in action.

Shortening URL extension at play

How it worked.

The extension listened to the Cloud Firestore collection posts. So, when we added a URL to the field catUrl in any document within that collection, the extension:

  • Shortened the URL.
  • Saved the shortened URL (within seconds) in the shortUrl field of the same document.
{
catUrl: 'https://my.super.long-link.example.com/api/user/profile/-jEHitne10395-k3593085',
shortUrl: 'https://bit.ly/EKDdza',
}

Also, if the original URL in a document is updated, the shortened URL will be automatically updated, too.

There are tons of extensions available to use in your application. So do explore them and select what fits your need! As for URL shortener, that’s it! Let me know if you have any questions or feedback around this.

Look out for yet another article as we continue to work on our app with another Firebase service. Once again, any guesses?

The fastest code is the code which does not run. The code easiest to maintain is the code that was never written.
Robert Galanakis.

As always, thank you for reading! ❤

--

--