I’ve played collectible card games (CCGs) for over twenty years and, in that time, have gotten a lot of cards. My collection is a mess of abandoned cataloging implementations so finding any particular card is next to impossible.
Instead of relying on some complex physical storage scheme for my cards, I’m going to make an API to manage the data about my collection and bolt on other applications and products to do stuff with that data. All together, this is my Cardalog.
The application stack
I tried a few combinations of technologies before settling into Blazor WebAssembly for the web GUI, Azure Functions for a serverless API, and MongoDB for storage. By the end of this article, I’ll have installed all the necessary tech and I’ll be ready to start the real implementation.
While this is the stack I’m starting out with, I’m not going to paint myself into a corner with it. I’ve got a lot of ideas bouncing around about other potential front ends and some side projects I can implement once I’ve got a good volume of data.
Unless otherwise noted, I use Visual Studio Code and PowerShell as my primary development tools.
Blazor WebAssembly
Blazor is a framework for building SPAs using C# instead of JavaScript. WebAssembly (Wasm) provides the means for .NET code to run in browsers. A key advantage is, after the initial download of binaries from the server, the application executes as quickly as native applications.
- Get started by installing the .NET Core 3.1 preview SDK
- Install the Blazor Wasm template at the terminal with
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview3.19555.2 - Navigate to the directory you want the project to live in and execute the command
dotnet new blazorwasm -o Cardalog - Run the application from the terminal with
dotnet run
The Blazor Wasm template scaffolds a couple of things for you: a home page, a “counter” app, and a weather app which reads JSON from a local file. Check out the code and the site to see some of the basic concepts available. They’re a decent launchpad into working with Blazor but we’ll throw it all away very soon.
Azure Functions: a serverless API
There’s a lot to say about Functions Apps and serverless tech in general. While I love the managed product, the thing that really brings me back to Functions is that it forces me to think atomically. Instead of god classes and huge services, each Function in a Functions App is meant to serve one purpose. The first one I’ll create, for instance, is meant only to read all of the cards from my database.
- First, install the Azure Functions extension for VS Code.
- Open the command palette in Code (
ctrl+shift+p) and run theAzure Functions: Create New Project...command. It’ll take you through an interactive process for the rest. - Choose your root directory (I chose the same directory the Cardalog GUI lives in) and create a folder called
Cardalog.Api - Choose C# as the language unless you want to translate the API to another language.
- Select
HttpTriggeras the template for your first Function. - Name the Function
ReadCards - Use the namespace
Cardalog.Api - Select
Anonymousfor the access rights
We’ll be throwing out all of the scaffolded code when I go over the read implementation in my next article.
MongoDB
Lastly, install MongoDB Community Server and Compass. The server, by default, listens on port 27017 and requires no authentication. Open Compass and connect to it by filling out the form like so.
After you’ve connected, find the green “CREATE DATABASE” button near the top left of the main window. Name the database cardalog and the first collection cards. Later in the series, we’ll seed the collection with some JSON.
Recap
By now, we’ve got the Blazor front end, Azure Functions API, and MongoDB created. None of the components are talking yet, but it doesn’t take a lot to get there.
Coming up, I’ll seed the database with some test data, write a Function which replies to the caller with those data, and write a new page in the UI to get the card data from the API.