Section Intro
In this section where we’re going to build a full image upload workflow using Firebase:
This is going to be a complex feature, made of many different moving parts.
In fact, to build this feature in its entirety, we’ll have to learn about:
- Firebase Storage
- Cloud Firestore
- Local emulator
- Cloud Functions
And the reason we’re going to build this feature, is that if we want to create a real eCommerce app with a dynamic product catalog, we should be able to upload images to Firebase, but only if we are an administrator that has the right permissions, while regular users should only have read-only access to this data.
Covered in this section
Here is how we’re going to tackle this:
- I’ll share an updated code snapshot that will contain all the UI screens we will need
- Then we’ll figure out a plan of attack, so that we can work what kind of classes and components we need
- Then we’ll create all these classes one by one, until we get a small working prototype
- Finally, we’ll polish our code and take care of all the small details, so that our feature is robust and works under all edge cases
And as part of this, we’ll learn about:
- How and when to use realtime listeners vs one-time reads with Cloud Firestore
- How to implement basic security rules
- How to add a CORS policy to Firebase storage, so that we can load the product images when we run the app with Flutter web.
And we’ll wrap up this section with some exercises, so you can build your own custom image upload workflows.
Note about role-based authorization
Only admin users should have access to this new functionality.
So if we want to make this feature secure, we need to implement role-based authorization with custom claims, which is something that we will cover in section 6.
And before we do that, we need to learn about Cloud Functions, which is something that we will cover in the next section.
Note about the Firebase Local Emulator
When you develop and test your app locally, it can be worthwhile to use the Firebase Local Emulator, rather than using the production database directly.
We will cover the Firebase local emulator in detail in section 5. But for now, here’s an introduction: