Let’s start by understanding some of the features Firebase provides.<\/p>\n
What is Firebase?<\/h2>\n
Firebase is a service offered by Google for developing and scaling mobile, web, and desktop applications.<\/strong> It originally launched in 2011, with a single service, the Realtime Database, which as the name suggests, is a real-time, NoSQL database that allows storing and syncing of data between users.<\/p>\n Now, Firebase is much more than just a NoSQL database. Let’s look at some of the features it offers:<\/p>\n There are various client libraries for different programming languages, including .NET, that allow us to interact and develop applications with Firebase. There is a great list of the available libraries on GitHub<\/a>, a few of which we’ll explore in this article. To start, let’s create a new web application using the Visual Studio Project Wizard or the\u00a0 To kick things off, we need a Firebase project. A<\/strong> Firebase project is a top-level entity that we use to manage the various services<\/strong> on offer. We create Firebase projects from the Firebase console<\/a>, so let’s start with that.<\/p>\n With our project created, let’s retrieve the Project ID as we’ll need this later on for interacting with various services.<\/p>\n To retrieve this ID, from the project overview, navigate to\u00a0Project settings<\/strong>:<\/p>\n From here, we’ll see the project details, including the Project ID:<\/p>\n Depending on the name of the project, the ID may be different. Take note of this for use later on.<\/p>\n With our new Firebase project created, we need to configure our authentication. Firebase handles authentication with service accounts, which allows us to authenticate with multiple Firebase features programmatically.<\/strong><\/p>\n Firebase automatically creates a service account for us when we create a project, so to retrieve the credentials, we navigate to Project settings<\/strong>, then\u00a0Service<\/strong> accounts,<\/strong> and generate a new private key:<\/p>\n This downloads a JSON configuration file with the required credentials. Keep a record of where this is saved as we’ll use this next.<\/p>\n There are a couple of different methods to authenticate with the service account credentials. The simplest method is to set the Let’s do this in our Here, we use the\u00a0 With our authentication configured, let’s take a look at the first of the Firebase services we’ll cover, Firestore.<\/p>\n Firestore<\/a> is the newer version of Firebase’s low-latency, real-time databases that allows us to store JSON documents.<\/strong><\/p>\n First, let’s add the Firestore NuGet packages to our project:<\/p>\n For our project, we’ll create a shoe website, so let’s create a class to model our domain:<\/p>\n Firestore is a document database and our entities will be saved as JSON, so let’s create a JSON-friendly version of our This time, we define the same properties, but decorate them with the Furthermore, we decorate the class with the Note here that we define the Next, let’s create a service for interacting with Firestore:<\/p>\n Here, we start by defining our Next, we define two methods.\u00a0The The Let’s register this service with the DI framework in the We add the Now that we’ve configured our First, let’s create a page for displaying all our shoes in Firestore:<\/p>\n Here, we have a very basic table view of all the shoes in our Firestore database. Let’s retrieve these from the store whenever we navigate to the page:<\/p>\n In our This is great, but we don’t have any shoes yet, so let’s add a page for creating shoes:<\/p>\n Here we create a very simple form for creating shoes. In our code-behind, we create the shoe when submitting our form:<\/p>\n In the We use a DTO<\/a> as our Before we test this out, we need to enable the Firestore API for our project. To do so, let’s navigate to the Firebase console and select the Firestore Database service:<\/p>\n Next, we create a new database:<\/p>\n We’ll choose\u00a0Start in Test Mode<\/strong> for the rules configuration, and choose a suitable location. Test Mode is fine for our purposes, but in production environments, we’d strongly recommend Production Mode<\/strong>.<\/p>\n Now we’re ready to add some shoes! Running our application, let’s navigate to This will create a new document in Firestore, and redirect us to Notice that we have an auto-generated Id for the shoe, which Firestore created for us.<\/p>\n So far we’ve explored the Firestore database service. Now, let’s take a look at another storage service, Firebase Cloud Storage<\/a>. This allows us to store unstructured blob data, such as images and files.<\/strong> Let’s use it to store images of the shoes we save to Firestore.<\/p>\n We’ll start by adding another NuGet package:<\/p>\n As we did with Firestore, we need to set up Cloud Storage in the Firebase console. Navigate to Storage<\/strong> from the menu:<\/p>\n And click\u00a0Get Started<\/strong>. Once again, we’ll choose the\u00a0Start in Test Mode<\/strong> option, and choose a suitable location.<\/p>\n Now it’s time to create a new service to interact with Cloud Storage:<\/p>\n To start, we define some private fields. First, we have an instance of Secondly, we have We define a single method, Then, we read our Finally, we want to return the link to our newly uploaded image so we can display it, which we do by using the Next, we need to register the service in the Here, we register a singleton instance of our service, using the With the logic for uploading files to Cloud Storage implemented, let’s add the ability to upload photos when creating a new shoe.<\/p>\n First, in our Next, let’s add the functionality to our shoe creation form:<\/p>\n Here, we inject our Also, we need to update our Back on our shoe list page, we can add a new column to display our image:<\/p>\n Before testing this out, we need to allow anonymous access to our bucket so unauthenticated users can render our image. To do this, we need to navigate to the Google Cloud Console<\/a>\u00a0and locate our bucket:<\/p>\n Navigating into our bucket, we navigate to the\u00a0Permissions<\/strong> tab and click Grant Access<\/strong>:<\/p>\n\n
Create Firebase Project<\/strong><\/h2>\n
dotnet new webapp<\/code> command.<\/p>\n![\"firebase](\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/06\/firebase-project-settings-1.png\")
<\/a><\/p>\n![\"firebase](\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/06\/firebase-project-id-3.png\")
<\/a><\/p>\nAuthenticate With Firebase<\/h2>\n
![\"firebase](\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/06\/generate-private-key-3.png\")
<\/a><\/p>\nGOOGLE_APPLICATION_CREDENTIALS<\/code> environment variable to the file path for the JSON file we just downloaded.\u00a0<\/p>\nProgram<\/code> class:<\/p>\nvar builder = WebApplication.CreateBuilder(args);\r\n\r\nEnvironment.SetEnvironmentVariable(\"GOOGLE_APPLICATION_CREDENTIALS\", @\"<PATH_TO_CREDENTIALS_FILE\");\r\n\r\nvar app = builder.Build();<\/pre>\n
SetEnvironmentVariable()<\/code> method to set up our authentication. Note that we are using the @<\/code> symbol, which allows us to define a verbatim string literal<\/a> for our file path, avoiding the need for any character escaping.<\/p>\nFirestore in .NET<\/h2>\n
Install-Package Google.Cloud.Firestore<\/code><\/p>\npublic class Shoe\r\n{\r\n public required string Id { get; set; }\r\n\r\n public required string Name { get; set; }\r\n\r\n public required string Brand { get; set; }\r\n\r\n public decimal Price { get; set; }\r\n}<\/pre>\nShoe<\/code> class, that we’ll configure to allow Firestore to work with it:<\/p>\n[FirestoreData]\r\npublic class ShoeDocument\r\n{\r\n [FirestoreDocumentId]\r\n public string Id { get; set; }\r\n\r\n [FirestoreProperty]\r\n public required string Name { get; set; }\r\n\r\n [FirestoreProperty]\r\n public required string Brand { get; set; }\r\n\r\n [FirestoreProperty]\r\n public required string Price { get; set; }\r\n}<\/pre>\nFirestoreProperty<\/code> attribute, letting Firestore know we want to save these properties in the store. We use the FirestoreDocumentId<\/code> attribute for the Id<\/code> property, which tells Firestore to populate this property with the document Id.<\/p>\nFirestoreData<\/code> attribute, again letting Firestore know this is a model that will be stored in a database.<\/p>\nPrice<\/code> property as a string<\/code> instead of a decimal. This is because Firestore doesn’t support decimals as one of its data types<\/a>.<\/p>\npublic class FirestoreService : IFirestoreService\r\n{\r\n private readonly FirestoreDb _firestoreDb;\r\n private const string _collectionName = \"Shoes\";\r\n\r\n public FirestoreService(FirestoreDb firestoreDb)\r\n {\r\n \t_firestoreDb = firestoreDb;\r\n }\r\n\r\n public async Task<List<Shoe>> GetAll()\r\n {\r\n \tvar collection = _firestoreDb.Collection(_collectionName);\r\n \tvar snapshot = await collection.GetSnapshotAsync();\r\n \r\n \tvar shoeDocuments = snapshot.Documents.Select(s => s.ConvertTo<ShoeDocument>()).ToList();\r\n\r\n \treturn shoeDocuments.Select(ConvertDocumentToModel).ToList();\r\n }\r\n\r\n public async Task AddAsync(Shoe shoe)\r\n {\r\n var collection = _firestoreDb.Collection(_collectionName);\r\n var shoeDocument = ConvertModelToDocument(shoe);\r\n\r\n await collection.AddAsync(shoeDocument);\r\n }\r\n\r\n private static Shoe ConvertDocumentToModel(ShoeDocument shoeDocument)\r\n {\r\n return new Shoe\r\n {\r\n Id = shoeDocument.Id,\r\n Name = shoeDocument.Name,\r\n Brand = shoeDocument.Brand,\r\n Price = decimal.Parse(shoeDocument.Price)\r\n };\r\n }\r\n\r\n private static ShoeDocument ConvertModelToDocument(Shoe shoe)\r\n {\r\n return new ShoeDocument\r\n {\r\n Id = shoe.Id,\r\n Name = shoe.Name,\r\n Brand = shoe.Brand,\r\n Price = shoe.Price.ToString()\r\n };\r\n }\r\n}<\/pre>\n_collectionName<\/code> and a FirestoreDb<\/code> field, which we use dependency injection<\/a> to inject into the constructor.<\/p>\nGetAll()<\/code> method retrieves a snapshot of the shoe collection, which we then convert to our ShoeDocument<\/code> model using the ConvertTo()<\/code> method. Finally, we use our private ConvertDocumentToModel()<\/code> method to return a List<Shoe><\/code>.<\/p>\nAdd()<\/code> method uses the ConvertModelToDocument()<\/code> method so we use the correct model that Firestore expects, finally calling the AddAsync()<\/code> method to add the new shoe.<\/p>\nProgram<\/code> class:<\/p>\nvar builder = WebApplication.CreateBuilder(args);\r\n\r\n\/\/ code removed for brevity\r\n\r\nbuilder.Services.AddSingleton<IFirestoreService>(s => new FirestoreService(\r\n FirestoreDb.Create(\"<PROJECT_ID>\")\r\n ));\r\n\r\nvar app = builder.Build();<\/pre>\n
FirestoreService<\/code> as a singleton, using the Create()<\/code> method from the FirestoreDb<\/code> class to create our database. Here, we use the Project ID for our Firebase project we took note of earlier.<\/p>\nInteract With Firestore Model<\/h3>\n
FirestoreService<\/code> and required models, let’s create a few Razor Pages<\/a> to interact with the database.<\/p>\n@page\r\n@model Firebase.Pages.Firestore.IndexModel\r\n@{\r\n ViewData[\"Title\"] = \"Shoes\";\r\n}\r\n\r\n<h2>Shoes<\/h2>\r\n<p><a asp-page=\"Create\">Create New<\/a><\/p>\r\n<table class=\"table\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <label>Id<\/label>\r\n <\/th>\r\n <th>\r\n <label>Name<\/label>\r\n <\/th>\r\n <th>\r\n <label>Brand<\/label>\r\n <\/th>\r\n <th>\r\n <label>Price<\/label>\r\n <\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n @foreach (var shoe in Model.Shoes)\r\n {\r\n <tr>\r\n <td>\r\n <label>@shoe.Id<\/label>\r\n <\/td>\r\n <td>\r\n <label>@shoe.Name<\/label>\r\n <\/td>\r\n <td>\r\n <label>@shoe.Brand<\/label>\r\n <\/td>\r\n <td>\r\n <label>@shoe.Price<\/label>\r\n <\/td>\r\n <\/tr>\r\n }\r\n <\/tbody>\r\n<\/table>\r\n<\/pre>\npublic class IndexModel : PageModel\r\n{\r\n private readonly IFirestoreService _firestoreService;\r\n\r\n public List<Shoe>? Shoes;\r\n\r\n public IndexModel(IFirestoreService firestoreService)\r\n {\r\n _firestoreService = firestoreService;\r\n }\r\n\r\n public async Task OnGetAsync()\r\n {\r\n Shoes = await _firestoreService.GetAll();\r\n }\r\n}<\/pre>\nIndexModel<\/code> code-behind, we inject our IFirestoreService<\/code> interface which we use in the OnGetAsync()<\/code> method to retrieve our list of shoes.<\/p>\n@page\r\n@model Firebase.Pages.Firestore.CreateModel\r\n@{\r\n ViewData[\"Title\"] = \"Create Shoe\";\r\n}\r\n\r\n<h2>Create Shoe<\/h2>\r\n\r\n<div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <form method=\"post\">\r\n <div class=\"form-group mb-2\">\r\n <label asp-for=\"@Model.Shoe.Name\" class=\"control-label\"><\/label>\r\n <input asp-for=\"@Model.Shoe.Name\" class=\"form-control\" \/>\r\n <span asp-validation-for=\"@Model.Shoe.Name\" class=\"text-danger\"><\/span>\r\n <\/div>\r\n <div class=\"form-group mb-2\">\r\n <label asp-for=\"@Model.Shoe.Brand\" class=\"control-label\"><\/label>\r\n <input asp-for=\"@Model.Shoe.Brand\" class=\"form-control\" \/>\r\n <span asp-validation-for=\"@Model.Shoe.Brand\" class=\"text-danger\"><\/span>\r\n <\/div>\r\n <div class=\"form-group mb-2\">\r\n <label asp-for=\"@Model.Shoe.Price\" class=\"control-label\"><\/label>\r\n <div\u00a0class=\"input-group\"> \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0class=\"input-group-prepend\"> \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span\u00a0class=\"input-group-text\">\u00a3<\/span> \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div> \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input\u00a0asp-for=\"@Model.Shoe.Price\"\u00a0class=\"form-control\"\u00a0\/> \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\r\n <span asp-validation-for=\"@Model.Shoe.Price\" class=\"text-danger\"><\/span>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <input type=\"submit\" value=\"Create\" class=\"btn btn-primary\" \/>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n<\/div><\/pre>\npublic class CreateModel : PageModel\r\n{\r\n private readonly IFirestoreService _firestoreService;\r\n\r\n [BindProperty]\r\n public ShoeDto Shoe { get; set; }\r\n\r\n public CreateModel(IFirestoreService firestoreService)\r\n {\r\n _firestoreService = firestoreService;\r\n }\r\n\r\n public async Task<IActionResult> OnPostAsync()\r\n {\r\n await _firestoreService.Add(new Shoe\r\n {\r\n Name = Shoe.Name,\r\n Brand = Shoe.Brand,\r\n Price = Shoe.Price\r\n });\r\n\r\n return RedirectToPage(\"Index\");\r\n }\r\n}<\/pre>\nOnPostAsync()<\/code> method, we simply call the Add()<\/code> method of our FirestoreService<\/code>, and then redirect to the Index page.<\/p>\nBindProperty<\/code>, defining some attributes on the properties:<\/p>\npublic class ShoeDto\r\n{\r\n [Required]\r\n public required string Name { get; set;}\r\n\r\n [Required]\r\n public required string Brand { get; set; }\r\n\r\n [Required]\r\n public required decimal Price { get; set; }\r\n}<\/pre>\n![\"firestore](\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/06\/firestore-database.png\")
<\/a><\/p>\n![\"firestore](\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/06\/firestore-create-database-2.png\")
<\/a><\/p>\n\/firestore\/create<\/code> and create a new shoe:<\/p>\n![\"firestore](\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/06\/firestore-create-shoe-1.png\")
<\/a><\/p>\n\/firestore\/index<\/code> to confirm this has been created:<\/p>\n![\"firebase](\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/06\/firestore-shoe-list.png\")
<\/a><\/p>\nFirebase Cloud Storage<\/h2>\n
Install-Package Google.Cloud.Storage.V1<\/code><\/p>\n![\"firebase](\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/06\/cloud-storage-1.png\")
<\/a><\/p>\npublic class FirebaseStorageService : IFirebaseStorageService\r\n{\r\n private readonly StorageClient _storageClient;\r\n private const string BucketName = \"<BUCKET_NAME>\";\r\n\r\n public FirebaseStorageService(StorageClient storageClient)\r\n {\r\n _storageClient = storageClient;\r\n }\r\n\r\n public async Task<Uri> UploadFile(string name, IFormFile file)\r\n {\r\n var randomGuid = Guid.NewGuid();\r\n\r\n using var stream = new MemoryStream();\r\n await file.CopyToAsync(stream);\r\n\r\n var blob = await _storageClient.UploadObjectAsync(BucketName, \r\n $\"{name}-{randomGuid}\", file.ContentType, stream);\r\n var photoUri = new Uri(blob.MediaLink);\r\n\r\n return photoUri;\r\n }\r\n}<\/pre>\nStorageClient<\/code> which is the class for interacting with Cloud Storage, that we’ll inject into our constructor.\u00a0<\/p>\nBucketName<\/code> which is the default bucket that Cloud Storage creates for us. Buckets are containers for files, which can contain subdirectories. By default, the bucket name is a concatenation of our project name, along with appspot.com<\/code>, so for example codemaze-firebase.appspot.com<\/code>.<\/p>\nUploadFile()<\/code> which takes two parameters, name<\/code> and file<\/code>. To avoid naming collisions, we generate a random GUID with the NewGuid()<\/code> method.\u00a0<\/p>\nIFormFile<\/code> content into a MemoryStream<\/a> with the CopyToAsync()<\/code> method. Now we can upload the image to our bucket using the UploadObjectAsync()<\/code> method.<\/p>\nMediaLink<\/code> property.<\/p>\nProgram<\/code> class:<\/p>\nvar builder = WebApplication.CreateBuilder(args);\r\n\r\n\/\/ code removed for brevity\r\n\r\nbuilder.Services.AddSingleton<IFirebaseStorageService>(s => new FirebaseStorageService(StorageClient.Create()));\r\n\r\n\/\/ code removed for brevity\r\n\r\nvar app = builder.Build();<\/pre>\n
Create()<\/code> method to create a new StorageClient<\/code> instance.<\/p>\nUpload Images to Firebase Cloud Storage<\/h3>\n
ShoeDto<\/code> class, we’ll add a new property:<\/p>\npublic class ShoeDto\r\n{\r\n [Required]\r\n public required string Name { get; set;}\r\n\r\n [Required]\r\n public required string Brand { get; set; }\r\n\r\n [Required]\r\n public required decimal Price { get; set; }\r\n\r\n [Required]\r\n public required IFormFile Image { get; set; }\r\n}<\/pre>\npublic class CreateModel : PageModel\r\n{\r\n private readonly IFirestoreService _firestoreService;\r\n private readonly IFirebaseStorageService _storageService;\r\n\r\n [BindProperty]\r\n public ShoeDto Shoe { get; set; }\r\n\r\n public CreateModel(IFirestoreService firestoreService, IFirebaseStorageService storageService)\r\n {\r\n _firestoreService = firestoreService;\r\n _storageService = storageService;\r\n }\r\n\r\n public async Task<IActionResult> OnPostAsync()\r\n {\r\n var photoUri = await _storageService.UploadFile(Shoe.Name, Shoe.Image);\r\n await _firestoreService.Add(new Shoe\r\n {\r\n Name = Shoe.Name,\r\n Brand = Shoe.Brand,\r\n Price = Shoe.Price,\r\n ImageUri = photoUri,\r\n });\r\n\r\n return RedirectToPage(\"Index\");\r\n }\r\n}<\/pre>\nIFirebaseStorageService<\/code> interface into our class constructor. In the OnPostAsync()<\/code> method, we start by calling the UploadFile()<\/code> method, retrieving the link to our newly created image. We use this when creating our shoes in Firestore.<\/p>\nFirestoreService<\/code> to set and retrieve the ImageUri<\/code> property from our document:<\/p>\npublic class FirestoreService : IFirestoreService\r\n{\r\n \/\/ code removed for brevity\r\n\r\n private static Shoe ConvertDocumentToModel(ShoeDocument shoeDocument)\r\n {\r\n return new Shoe\r\n {\r\n Id = shoeDocument.Id,\r\n Name = shoeDocument.Name,\r\n Brand = shoeDocument.Brand,\r\n Price = decimal.Parse(shoeDocument.Price),\r\n ImageUri = new Uri(shoeDocument.ImageUri)\r\n };\r\n }\r\n\r\n private static ShoeDocument ConvertModelToDocument(Shoe shoe)\r\n {\r\n return new ShoeDocument\r\n {\r\n Id = shoe.Id,\r\n Name = shoe.Name,\r\n Brand = shoe.Brand,\r\n Price = shoe.Price.ToString(),\r\n ImageUri = shoe.ImageUri.ToString()\r\n };\r\n }\r\n}<\/pre>\n<td>\r\n <img src=\"@shoe.ImageUri\" alt=\"shoe-image\">\r\n<\/td><\/pre>\n
![\"gcp](\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/06\/gcp-console-buckets.png\")
<\/a><\/p>\n
![\"bucket](\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/06\/bucket-permissions.png\")
<\/a><\/p>\n![\"bucket](\"https:\/\/code-maze.com\/wp-content\/uploads\/2023\/06\/bucket-anonymous-access.png\")
<\/a><\/p>\n