Time to add some UI.
Fortunately, I know pretty easy and cool way to visualize API – my old friend Swagger. I used Swagger in one of my projects in ASP.NET and decided to use it for my Node.JS project. I found pretty good article on adding Swagger support:
Just committed first basic Swagger description in my project: https://github.com/alishdev/mongo-explorer-api which will be accessible from http://localhost:4000/api-docs/
Since the goal of the API to connect to any database and explore it the API project cannot store connection information in config file. Instead connection info must be passed with every request.
Initially I was thinking to pass info in the body of the request, but since I have to implement GET requests also (which according to REST is not supposed to have bodies) I had two options:
- put connection info into request parameters (not safe)
- put connection info into request header
The latter solution seems to be the correct and simplest one: I used middleware in Express.js to read header and populate request’s connectionString parameter.
I found couple helpful links for anyone who wants to build API project:
So at this point the API structure I think will be following:
db – get list of all databases
db/:dbname – get, put, post, delete db named as :dbname
db/:dbname/collection – get list of all collections in db named as :dbname
db/:dbname/collection/:colname – get, put, post, delete collection named :colname in db named as :dbname
db/:dbname/collection:colname/doc – get list of all documents in collection named :colname in db named as :dbname
db/:dbname/collection/:colname/doc/:docid – get, put, post, delete document with id :docid in collection named :colname in db named as :dbname
There was some break since I have written anything, but I was not abandoning the project. Instead I took a class provided by MongoDB University:
I also read a book on Node.js:
When reading this book I felt at home first time I started learning web development – probably because I am really a back end developer.
After some consideration I came to conclusion that I need to start with API project first, so I added a new project on Github:
While working on the angular part of the mongo-explorer I came to conclusion that classes I watched are not very helpful. I saw how the application was built, but I still did not understand why the developer chose to use things certain way.
After that I started searching for a book on Angular 2 and found this:
Normally I like printed books, but in case of Angular 2 which is still in development it’s better to have electronic version which is being constantly updated.
Since I am using Visual Studio Code for development I found several useful extensions:
Oops, I did it again. Unfortunately, angular-fullstack generator only supports Angular 1.6 and I need Angular 2.
I searched web again, but was not able to find what I need. So instead I decided to use seed project I downloaded from the course I watched. It took me about an hour to fix all version conflicts, but I am finally able to run a simple MEAN app.
Setting up a MEAN project from scratch is not easy. Fortunately, there are many generators which one can use. I did a little search and found this one:
I generated my project several times and it was always failing to load – displayed LOADING message on start.
Finally, I figured that when I ran install command as recommended:
npm install -g yo gulp-cli generator-angular-fullstack
it installed generator-angular-fullstack v5 alpha 4. I checked their web site and the latest release was 4.1.0, so I had to uninstall generator and install version 4.1.0. Once I did it everything worked. Now I can build my app.
Here is an initial draft of the application I am going to build:
It will be an SPA. On the left I will place a tree control where one can select a data source. On the right I will place a grid control. Although Mongo collections can store documents of different types I guess most collections will contain documents of the same type so it makes sense to present them in grid format. When first displayed I will build grid based on fields found in the first document. Columns can be changed in Fields control (by clicking on hyperlink with the list of columns).
Cmd control is to display a MongoDB command used to get data.
Since I am starting learning the MEAN stack I decided that I need a laptop. And this time I want Apple laptop. I have spent almost half day browsing and comparing different models (I was considering buying a used one). Finally, I decided that most important characteristics for me are:
- Size. I want 13 inch laptop
- Screen resolution. Since 13 inch laptop is pretty small I need Retina display in order to use the laptop with monitor.
Around 5pm I found a good deal on ebay: new Macbook Pro 13 with Retina display for $1029 ($1299 on Apple.com). It’s cheaper than Macbook Air (after adding taxes). Deal was so good, I saw 8 laptops were sold within one hour. I quickly ordered one and it will be delivered in 3-4 days. Woohoo!