Skip to content

2. Project management

The goal for this week was to set-up myself on FabLab GitLab and download important softwares like Git, Visual Studio Code, Python (as i am using default template based on MkDocs provided this year by FabLab) to help me build my repository for the lab and create a web page and document progress.

  • My task was to learn the working of above mentioned softwares in order to build this page. As i am from IT background this was the easiest section for me to work on in fablab. So i targetted to finish it in week 1 itself along with my project sketch idea.

  • My instructor explained me to document each and every step of the process of linking my local repository to online gitlab archive so that when I use a different system to work on, it makes it quite easier for me to follow the below mentioned steps.

  • This year process has been made much simpler from previous year, as by default i got a demo repo pre built in my gitlab account. It’s based on MkDocs which is a fast, simple and downright gorgeous static site generator that’s geared towards building project documentation. Documentation source files are written in Markdown,and configured with a single YAML configuration file. is a using Python based template generator. Though i just wonder why not Node.js as its the industry standard? But i leave that debate for now.

Research

“When i discussed website making in our FabLab AKGEC group, not sure why everyone was scared of building website. So i have tried to capture some acronym to make it easier for my fellow fab lab students by answering some basic questions.

  • What is a website, Website is basically a combination of static files like text, html, images and dynamic content generation language e.g. Javascript

  • Overall website architecture put it simply works on Server, Client architecture. So you have a server where your website is hosted (so its a machine that runs a special program called Web Server, and its purpose is to send what client request which is basically a http request so when you type something like https://www.google.com your webbrowser send your request to DNS (Domain name servers) that converts that to an IP address (every computer, network interface card got one unique address, these can be allocated dynamically but to keep it simple your browser know how to get any webpage based on the DNS name)

  • There are tonns of languages and frameworks by which we can build website like Python, Java, Node.js , Angular.Js there are so many varities that you can build your own. If you are serious learning all about website building i would suggest checking this course out https://www.udemy.com/the-web-developer-bootcamp/ on Udemy.

  • Another key topic discussed was Git, Git has nothing to do with website building because its a version management system. What is version control system. Basically it helps managing your changes history to your codebase. Say 10 people working on various part of the project. This is a very common practice followed in organisation where many developers are working on same project, so if someone changes some code or delete your code then you can get history and revert back. GitHub has fundamentally changed how people work on software. All the open source projects collobration has started becasue of anyone in the world can share his code free of cost using a simple web interface. GitLab is a more paid version but for free version and sharing your code across the world you should check GitHub.

  • CI/CD or a more common term called DevOps you will hear lot of Software people talking about it now a days. Well put it simply once a lot of people start making changes managing that can be overwhelming, what if someone put some code that breaks the website. So thats why concept like CI and CD (CI stands for continuous integration and CD for continuous deployment) emerged. When you open GitLab account you will see pipeline and .yml file that people talk about that help you in automating that. By default this year its managed by Docker based deployment. Again i won’t go into containers now, but its a cool technology for you to understand how companies like Google scale their architecture. Think of millions of people accessing Google it should automatically scale based on load and users that are online. Container are key enabler for that

“With these softwares we are all set, i had all of these already installed on my Laptop but you can simply download and install. I am using Mac which has Python in built, i used HomeBrew to install Git and Visual Studio Code i simply download a .deb file . Let’s see some screenshots to get an understanding on what i am talking about”

Code Example

I am using mac so all instructions are specific to mac operating system.

Setup MkDocs

First thing i needed was MkDocs as that is something introduced this year. All the steps are well documented on the above link how to install.

// pip to install mkdocs (pip is python package manager)
pip install mkdocs

/* I basically ran into various errors of pip install
Its a very common thing in python, my laptop was was missing few packages 
so i manually installed them using pip command. Error screen shot are available 
in gallery section below*/

//required by mkdocs and demo repo to work
pip install msgpack
pip install argparse
pip install mkdocs-material

Setup GitLab

With MkDocs setup next step was to setup GitLab SSH keys. Again all of this is very well documented on On Help Section Of FabAcademy GitLab. Screenshot attached in gallery and code snippet below

//To generate a new SSH key pair, use the following command:
ssh-keygen -t rsa -C "your.email@example.com" -b 4096

//After that copy your public key to clipboard using macos pbcopy command
pbcopy < ~/.ssh/id_rsa.pub

//Now copy that in GitLab profile settings manually

//check whether you can SSH into GitLab
ssh -T git@gitlab.fabcloud.org

Copy Your Repository To Your Machine

//used git clone command to copy repo

git clone https://gitlab.fabcloud.org/academany/fabacademy/2019/labs/akgec/students/rajat-ratewal.git

/*Open folder in visual studio and make changes.
Open a terminal and type below command and go to 
http://127.0.0.1:8080 link to see your changes
mkdocs serve keep refleting your changes as you type
in visual studio*/

//Before this make sure you have studied MkDocs

mkdocs serve 

//I tried using below commands from git

//Add changed files to staging
git add . 

//commit changes in local repo

git commit -m "made my website"

//push changes to gitlab remote repo

git push

//wait for CI/CD pipeline to finish on gitlab
//volla you should have website running on fablab network :)

Missing Packages Error

The screenshot shows the errors that i ran into while installing MkDocs

Setting Up GitLab

Generating RSA Public Key on my Mac

Copying RSA Public Key to Clipboard

Copy from local machine so that you can copy to GitLab account

Copying RSA Public Key to FabLab GitLab Account

Checking whether my laptop can connect to remote repo

Creating Website

How code looks on Visual Studio

Copy GitLab Repo

Mkdocs Serve to check changes locally

Git Changes showcasing stuff i added

Git Commit (make sure that everthing is saved)

Git Push (push the changes to remote GitLab Repo)

Changes visible in GitLab account

Website running on Fab Lab network

My Personal Progress

  • It was one of the easiest section for me and reason for finishing it early was that i want to use my time on more difficult sections like Electronics
  • Personally i am happy with progress made, time is critical in fablab and i hope this one week head start will benefit me in some tough sections.

Learning Outcomes

  • I learned fabacademy gitlab structure
  • Learnt MkDocs which is cool new framework
  • Was a fun week to make some progress