Firebase rocks! We devs can create apps faster than ever, not having to worry about setting up and maintaining back end infrastructure.
The challenge I found with Firebase was using the Firebase console to find data. Also adding/modifying data in the console is a bit cumbersome.
To overcome these challenges, I've created FireDrill
Let's check it out!
First we need to connect to our database. The easiest way is to open your Firebase project, then click the Gear and "Project Settings":
Now scroll down and select "Add Firebase to your Web App":
Highlight the section you see below and Ctrl-C (don't use the Copy button)
You will also need to add firedrill-74829.web.app as an Authorized domain. On the left under Develop click Authentication. Then choose "Sign-in Method", then scroll down to "Authorized domains" and click "Add Domain". Enter "firedrill-74829.web.app" as your domain.
Now open FireDrill. On the Connect page click the JSON tab and paste your connection info. The default database type is "Firestore" but you can change this to "Realtime" depending on your database type. When ready click the Connect button.
You are connected! Now you need to sign in. You can use your email or sign in with Google (if you have enabled Google authentication in Firebase). You can skip this step if you haven't secured your data.
OK! We are ready to start drilling!
On the Drill screen you see a "Path" input. Here you can enter a Collection name.
I have a Collection called "shoes". I'll type "shoes" and click "Drill".
Great I found my shoes. Notice the limit at the right of the Drill button is 10. You can adjust the limit to your liking. You may also notice all the values are links. This allows quick filtering. I'll click the Brand "Jordan" on the first result.
So I was able to quickly filter down to only "Jordan" shoes. This is nice for quick filtering, but I want more advanced filtering, like date range or price range. No problem.
Let's open the filters drawer. I'm going to click the "Show Filters" link you see above the results. Now the drawer opens and I can choose a field to filter on.
I'm going the select the "price" field and the "Between" type, then add 100 as the Start and 150 as the End price and click "Apply". Now I see only items within that price range. This also works for date fields.
We can also use "Greater Than", "Less Than" or "Equals" as the Type.
Now I want to see the highest prices first. No problem. On the right click the "Sort" link and click the "price" field. It sorts in ascending order first (notice the icon next to the field). Just click "Sort" again and click the "price" field again. It will now be in descending order. Notice the icon changed pointing downward.
And we can see our results are now sorted by highest price first:
So I've shown how you can use FireDrill to quickly find your data in Firebase. I've also shown how you can use range filters and how you can sort your data. In the next article, I'll show you how you can quickly edit and manage your Firebase data. Stay tuned!
In the meantime, try FireDrill out for yourself. If you encounter any issues, please feel free to report them here: FireDrill Issues. Thanks and happy drilling!
Latest comments (6)
Hey Scott, just stumbled across your project. I was thing to use this in one of my project on a long term basis. but i see no github activity for quite sometime.
Is the project dead?
Hi. It's still alive I just haven't needed to make any changes recently.
Great post, but I think the authentication is a bit broken (seems that the FireDrill website isn't added as a valid redirect URL in your API console).
See the image below:
Hi Edric. You have to authorize the domain in your Firebase settings (from the Firebase console).
Develop > Authentication > Sign-in method > Authorized domains > Add Domain
Oops! Forgot about that! Thanks for responding!
EDIT: I didn't read through the whole article, so I probably skipped the authentication part.
Sure thing. I updated the article as others have asked the same question.