My first experience with databases
As a designer/front-end developer databases always sounded very complex, something to let the backend developers handle. So when I started working on a project that needed a database to function I was worried about how difficult it was going to be to set up. Luckily with some help and a lot of good documentation working with databases was a lot better and honestly a lot more fun than I expected.
Even though I used my databases in a very basic way I still learned a lot, and I wanted to document my process so others can see databases aren’t as scary as some people think they are.
The first step, picking a provider
Databases come in many shapes and forms, and there are some major companies offering different types of solutions when looking for a database. The only databases I knew were MySQL and MongoDB, I had never used either of them but I decided to start reading up on these first before making a decision.
MongoDB
I ended up picking MongoDB mostly because of its graphical user interface (GUI), a piece of software to handle the database from. This seemed a lot less daunting them some of the command line-based alternatives.
Creating a collection
After downloading and installing Compass, I created a new collection called driver_data. The plan was to store live race data from all 20 formula 1 drivers. Each driver has multiple data points like their name, position and lap time. I created these data points by hand to make things a bit easier to understand and follow for myself.
The data can be manipulated from the admin page on the web app. Changes to data points for a specific driver are sent to the database once the admin presses submit. Users will then see changes happening live because their page request new data from the database every couple of seconds.
Connecting to the database and altering its data
Connecting to the database and reading its contents is very well documented on the MongoDB website, it might take some time to understand but it is certainly way more doable than I first thought.
See https://docs.mongodb.com/guides/ for more information about connecting the database.
The main feature of my app required the admin to update data in the database, this requires an update function. For this case i decided to use MongoDB’s updateOne() function
Documentation here:(https://docs.mongodb.com/manual/reference/method/db.collection.updateOne/)
This snippet of code shows how I update one driver's data after the admin hits submit. I connect to the database and the specific collection, after that I create a filter. The filter is used to find which driver’s data needs to be altered. For example, the driver_name could be Max Verstappen.
Options is self-explanatory and the updateDriverData is where the magic happens. The URL holds all of the changed information on the admin page, this information is then pulled from the URL to use as the values for position, tire, and lap_time. After setting all of that up I call the UpdateOne function and give it the filter, the data to change, and the options.
After figuring out how this concept worked I knew how to talk and exchange information with the database which opened up a world of possibilities in my head. For my next project, I was actually excited to use a database again.
The second project
After the formula 1 app was done I started working on a completely different project, a step sequencer built in the browser.
Check it out live here! https://beatogether.herokuapp.com/
The database functionality in this case was fairly simple, the ‘pads’ (orange and grey squares) can be turned on and off. After clicking one of these pads the database needs to be updated so it knows which pads are on and off at all times.
Google firebase
Even though MongoDB was working fine, a lot of people were talking about google’s database service called Firebase. I wanted to try this out because presumably, firebase made things even more simple.
Firebase presents its user interface in the browser and it is immediately clear how simple and straightforward this database works. You can very quickly add collection, documents, and fields to the database with a couple of clicks and you can at all times see the higher-level folders, which makes navigating and knowing where you are a lot easier. Firebase also has built-in support for specific data types like booleans, strings, numbers, and even timestamps and geopoints, very impressive. I also noticed setting up the database was way faster this time.
Connecting and reading the data was very similar to how MongoDB works, for documentation go here: https://firebase.google.com/docs
Updating data was again the exciting part, but in the end it was fairly simple to do. After figuring out which pad is clicked I can call the update function and update that specific field. Updating was easier to do this time because the concept was already in my head from the MongoDB database.
Firebase’s biggest strength
The best thing about firebase is the features, especially in the free plan. Not paying for a database obviously means you get restricted in what you can do, MongoDB limits the number of connections for example.
Firebase is very generous on the free plan with a ton of connections per month and a lot of cloud storage.
Closing words
Databases were way less scary than I anticipated and actually a lot of fun to work with. It made me realize how many things I can build now that I couldn’t before, login systems were always out of reach but now they are suddenly doable for example.
I don’t know if databases are going to be part of my daily work, but knowing how they work has at least changed my way of thinking and made a lot of apps and websites make more sense.
