I made an API about myself as a web developer and human

I have really been focusing my efforts on learning web development on backend lately. It is the most interesting to me. I’m not really a fan of creating interfaces and dealing with moving elements of a page a few pixels at a time until it looks right on one of a million different devices. I just like making connections between things and moving data between them. I also rally enjoy making command line apps where I don’t have to worry about a UI, but that is for another post.

Since I have been focusing on backend / API work I figured it would be fun to build an API that could be used as a resource to learn about me and what I have done in my self-taught journey. It would help me learn further and would be a fun talking piece. Plus, I think it would be hilarious if someone asked for a resume and I gave them a URL for them to make a GET request to for the appropriate info.

I started out making a JSON object to describe me as a web developer. I also threw in some fun personal stuff to ensure someone making requests for it that I am indeed a human being. It was both weird and fun to create this data structure that is supposed to represent me. Once I had that mostly complete I installed Express to the project and began building out the routes for the API. This part was pretty simple as I am only supporting making GET requests for this API since I don’t want someone changing data about me unless it is me making the changes.

The necessary data for this API is pretty simplistic and since I don’t need to write new data or update existing via requests I decided that implementing a database like MongoDB would be overkill. Instead I decided on just creating JSON files with the necessary data for each route to return. I have a main route that provides a brief explanation of the API and the available endpoints. I have my resume style object in another JSON file. This way requests made to the appropriate endpoint will quickly return data. I even made a JSON file for custom errors that I require in each route file so that I can give a custom error message when someone attempts a request other than a GET.

Along with providing info about myself I also setup a /fun endpoint to provide info about fun things that can be done with the API. I am saving this part of the project for the silly ideas I have for micro-services to do hilariously “useful” things. The first one is /api/band-names which returns a listing of awesome band names I have created, each with their own id number. You can use /api/band-names/{{id}} to return a specific band name based on its id number. This spawned a separate project to create this object. Since I don’t have a database generating the id numbers for me I needed a way to create them. I keep this list of band names in a sheet in Smartsheet. I used the Auto-Number system column to generate unique five digit numbers for each name. Then I build a script that connects to the sheet and builds out an object with the id numbers and name. This object is then written out to a JSON file that I copied into my data directory along with the other necessary JSON files. Now, as I come up with other fun ideas for micro-services I can place them in as part of this API.

This was a really fun project to make and it helped me learn a lot more about Express and building out the backend of an app. Next up I am going to build out a simple CRUD API that connects to a MongoDB database. This will be a more typical API that handles GET / PUT / POST / DELETE requests. At first I was thinking that I would base it around the ideas of todos for a todo list, but instead I’m going to go with robots. That sounds more fun.

If you are interested in checking out my API about me you can find it here:

https://daveskull.herokuapp.com

And the project can be found on Github here:

https://github.com/daveskull81/daveskull-api

Writing an API about myself for my Github page

All Github users have the option to make a personal page ({username}.github.io) from a repo. I have long had one setup with no content in it whatsoever. To check it out in all of its blank white page awesomeness you can go here, if you really want. I’ve always wanted to use this page to make a simple portfolio for my projects and show off some of the things that I have done in the realm of web development. As I learn more and more about building things for the web I have come to realize that I really enjoy backend processes much more than frontend work, hence my focus on NodeJS. And since Github pages only support frontend things like Javacript, CSS, and HTML I haven’t really put much effort into designing this page.

But, I want to have something fun and interesting. The other day I had a great idea. I will write up a server that will return an object that describes me and the work that I have done. It will be a resume in a JSON object, a kind of API all about me. I can make the main endpoint return the whole thing and set other endpoints to the various sections of it. Then I can build out the page to make AJAX requests to this server. I will host it on Heroku likely, the server that is, and maybe even set a dropdown for the various endpoints with a button to send the request. Then I will display the raw object on the page. This is a project I can get behind and will actually want to build.

I will admit that I have seen this done before by others and I am no way saying that I am doing something unique here, but it will definitely be fun. One in particular I have seen and really like is one by Ashley Williams, who works at NPM. I figure this kind of project will turn out much better than if I just tried to make a fancy looking page to be flashy. I am even thinking of making it text only and I might have it display the raw object. This will speak much more to the kinds of projects I like to work on. As I have been writing this I am thinking about the various sections and how I could have them break down. One section could be for full fledged web apps and another for CLIs that I have made. This will be fun indeed.

Deploying my first app to Heroku

I recently checked off a couple of goals for myself in learning web development, deploying an app to Heroku and building an app that uses the Smartsheet API. I was able to do it with one project, a Smartsheet based quiz game. It has a familiar style and game play to a certain well known and trademarked game show. I originally made this game as a simple HTML page using JQuery to hide and show the questions and answers. It worked for its purpose, but was difficult to maintain since the questions and answers were in the markup. If you wanted to edit the game you had to go into the HTML. I also didn’t have it hosted anywhere so to use it you had to share a folder and open the index.html file.

I started to think how it would be a great project for an app hosted somewhere that could have some kind of database of questions and answers to create a new game board each time you played it. Naturally, I thought it would be great if that collection of questions could be stored in a sheet in Smartsheet. At the time there wasn’t a method to use the Smartsheet API with JavaScript, but I found out that a JavaScript SDK was being built using NodeJS. So, I patiently waited and once it was available started working out ideas for how the app could work.

I took some time to get to know the Smartsheet API and how to work with it in Node. Once I felt comfortable I began working on the app. During this time I also worked on learning how to build apps in Express which I used in the project. It is an Express app built on top of Node with Jade, or I guess I should say Pug now, for the view templates. As I’ve been working on my learning to write code I have come to really enjoy working on back end development work over front end. The more I learn about HTTP requests and piping data into streams the less I am interested in writing click events or the hex values of colors. The process to pull the data from Smartsheet and randomly build the object for the game board was a really fun logic problem to solve.

But, I guess you can’t call yourself a full stack developer if you can’t write some CSS to go along with your POST requests. Once I had the project done and functioning it was time for the fun part of deployment. I chose to put my app up on Heroku. I had a little experience with deploying apps there before, but nothing I built myself, only apps from tutorials. It is really simple to deploy to Heroku as they make it really easy. I published the app and visited the url to see the dreaded “Application Error.” I should note that I attempted to do this deployment on a morning before work. I finished up the functionality and layout of the app the night before. I thought about publishing it then, but in the interest of getting a good night of sleep I chose to not do it. I woke up the next morning with it still on my mind and had the great idea of deploying the app over breakfast. I started troubleshooting the errors and almost forgot to go to work as I got so involved in research. I ended up bringing my laptop to work to finish it up in my free time.

Looking at the app I realized I hadn’t updated my port to the environment variable so that it loads to the assigned port. Instead it was still going to port 3000, which I was using for testing. I adjusted my app.js file and updated the app on Heroku, but still got the error. Looking at some support docs I found some mention of supported versions of Node and since 6.0.0 had just come out my version of 5.x didn’t look to be supported anymore. I updated my version of Node and the app still worked locally, so I pushed that change to Heroku. This allowed me to load the first page, but the game board failed with the same error.

Looking at the app logs I saw it wasn’t finding needed environment variables. I remembered that I am using dotenv to set some environment variables so that I can connect to the Smartsheet API, but keep them out of the files I am pushing up to Github. Call me crazy, but publicly displaying my API access tokens seems like a bad idea. Next, I looked up how to set the environment variables for the server for my access token and everything started working! Once the server could connect to Smartsheet for the data it was able to do everything it needed.

Now the game is up and running. It is awesome to think about how an application I built and designed end to end is on the internet. I definitely learned a lot in regards to Node, Express, and especially Pug (Jade?) since it was my first time using a template language to build out a front end. It also gives me a great idea of where I want to go next in my learning. Now that I’ve got a good understanding of Node and Express I’m looking to start learning Mongo and Angular to complete the rest of the MEAN stack. I’ve joked around with the idea of making apps that work with Smartsheet are like SEAN apps(Smartsheet-Express-Angular-Node). It would be awesome if that became a thing.

If you want to check out the Smartsheet quiz game app you can find it here:

https://smartsheet-quiz-game.herokuapp.com/

And the Github repo is here:

https://github.com/daveskull81/smartsheetQuizGame

I’d totally be interested in any feedback or ideas. I have a list of a few things to add for a next version, but it would be cool to hear what others have to say. Let me know in the comments! 🙂