Timestamp Microservice (FCC Speedrun Project #3)

Day 3 of the FCC Speedrun Challenge. My last two projects — the Tribute Page and the Random Quote Machine — were front-end projects. Today I’m shifting to back-end projects, and for a very practical reason.

If I were to go through the projects in order, the next on my list would be the Local Weather project. For that one, you use an API to get the weather at the user’s location, and then format and display that information. But… I can’t find a keyless weather API. If my website only has a front end, then I have to do everything client-side. Which means that I have to paste the API key directly into my (publicly visible) code. For a learning project it might not matter all that much, but if I skip ahead and learn to do some of the back-end stuff first, I think that I can avoid the problem entirely.

This isn’t something I’ve ever done before, but I think that I can make my Local Weather project work something like this:

• User opens the webpage and provides their location
• The client-side code sends the user’s location to the server
• The server requests the weather information for the user’s location
• When the server hears back, it forwards the information to the user
• The client-side code on the user’s computer formats and displays the local weather info

I haven’t worked out the details. I don’t know yet how to keep track of requests and users and that sort of thing. But most importantly, none of this will work at all without a server. So that’s where I’m starting today.

Project 3 — Timestamp Microservice

A simple app that returns a Unix timestamp and “natural language” version of a date string passed to the app as a parameter in a url. I used Node.js and Express to create this project.

Reflections

Really the big hurdle here was learning how to set up and use an Express server. I won’t pretend that I’ve got it down pat — not after a single simple project! — but it I’m definitely moving in the right direction.

Setting up an Express server:

I started by working through the “Getting Started” guide on expressjs.com. The guide walks you through the process of setting up your own “Hello world” program… which is actually really straight-forward:

My “Hello World” program — copied directly from the Express “Getting Started” guide

That’s is literally the entirety of the code, and when I typed http://localhost:3000 into my browser, it actually worked. The phrase ‘Hello World!’ displayed on my screen.

Sending out an HTML file:

The first challenge came with trying to send an HTML file. Most of the documentation and articles I found use middleware. I went with something a little bit simpler: a ‘sendFile’ method.

In order to use ‘sendFile’, I had to provide an absolute path to the file I wanted to send. I knew what the function was asking for — an address to the file— but I wasn’t sure quite how to provide that. Something like: C:/Users/…/chingu-fcc-speedrun-challenge/backend/api-timestamp/index.html probably would have done the trick, except that the index.html file won’t be living on my computer forever. As soon as I upload that address to GitHub it’s going to be wrong. And I suspect it will be wrong again when I try to actually deploy it.

Fortunately, there’s an easy solution (albeit one that took me forever to figure out):

Providing ‘sendFile’ with an absolute path (first argument)

Node.js contains a “built-in” variable called __dirname which gives you an absolute path to the current directory. Node also provides a path module, which (among other things) allows you to join paths together. In the first two lines of code up above, I’m using the path module and __dirname to get the absolute path to my index.html file.

In the third line of code, I can actually achieve the same effect just using string concatenation (as long as I’m careful to include the correct number of slashes).

This, then, is the section of code responsible for sending out the index.html file:

Again… not too bad.

For me, that was the hardest part of this project. After this, there followed a lot of looking things up, and a fair bit of thinking that Surely there’s a better way — but it all came together. Here’s (part of) the code that replies to the user’s request for timestamp/date information:

Is this the best way to do things? Probably not. But I’m a beginner, and this worked.

Closing Thoughts

I really enjoyed this project. It was fun to create something that is interactive in a whole new way — instead of creating code that the user interacts with on his own computer, I’ve now created code that the user can interact with — sort of, in theory, once it’s deployed — from pretty much anywhere. That’s powerful!

Moving forward — there are a lot of things that I probably can learn to do better. Creating my own modules would be a good thing — it would be nice to have the code for creating and formatting the API response in a different file. There’s so much that I still have to learn!

(No live demo. Code HERE.)

Next up: Request Header Parser Microservice.