1. Principles and Practices & Project Management

Principles and Practices

Week 1 : To do checklist

• Time planning for FabAcademy activities, and coordinate with FabAcademy nodes (Fablab Kamakura)
• Read, sign, and upload the Student Agreement
• Sketch a potential project plan
• Learn Git and GitLab
  • Git Installations
  • Gitlab and Repositories
  • Edit the page
• Documentations

Assignment (week 1):

• Plan and sketch a potential final project
• work through a git tutorial
• build a personal site in the class archive describing you and your final project

Time Management

This is the first week and the first meeting of Fab Academy with professor Neil. In 2022, together with around 200 people who also attend Fab academy, it feels very happy to be able to interact with Fablab communities around the world. In the first week Professor Neil told the ins and outs of Fablab’s development. How Fablab develops in all corners of the world in order to create innovations. There are many opportunities as well as challenges in developing innovation in Fablab. During Fab academy, students are asked to be able to participate in all activities as the schedule in order to graduate well and Sign up Student Agreement. The most important thing to do is to manage the time management and documentation.

Plan and sketch a potential final project

I plan to make a smart cat house by using wood pellets for pet litter. This house is a place for cats to play as well as on the inside there is a toilet that contains pet litter. After the cat defecates in the toilet, the litter box will rotate and perform automatic filtering, so that the clumps of litter are stuck in the filter and the good litter will pass through the filter. With a certain mechanism, the clumps of cat litter will be disposed of in the disposal chamber, while the good litter will be returned to the toilet. This cat house is made like a house with a wooden arrangement and formed/cut using a CNC router machine.

How the device work :

Inside the pet house, there is a toilet mechanism that will automatically filter and dispose of feces. When a cat enters the toilet and defecates in pellet litter. Some of the litter will be destroyed and some will clump. The machine has a mechanism to filter out good litter and clumps of pet manure. In the chamber litter, sensors will also be provided to monitor the condition of the litter and the room to keep it comfortable and clean.

On the machine, there will be a chamber turning mechanism using a stepper motor. Some of the sensors used include temperature sensors, humidity sensors, peer sensors, gas sensors (ammonia).

Project Management

In this session, we learn about project management techniques while at FabAcademy. My habit of doing things without being recorded and well programmed makes this topic a challenge for me in every activity I do. My instructors from Kamakura (thanks to Rico, Youka, and Georg) always say Document....document!!! This has become my new habit that I have to apply every time I do work (Documentation). “Document what you do, and do what you write.”

First we need to install Python. We can download at : Python Download

Make sure you check Add Python to PATH. this is so that we can use python using the Command Prompt or Powershell.

Then, we need to instal pip

python get-pip.py

Version Control - Git

The first step is to prepare a computer that will be used to manage documents using Gitlab. The concept of GitLab is an open source version control system (VCS) called Git. Git is responsible for everything GitLab related that happens locally on your computer. The operating system that is usually used is UNIX/Linux-based. Even so, Windows-based ones can also be used by first installing git-bash.

the Git documentations can be found :

Book

Git Installations

Steps required to set up git on a window based computer:

• Open Command Prompt (Power Shell)

  • Install the Git using winget

  

  powershell PS C:\Users\DELL> winget search git

  

• Install the Git from C-prompt:

  powershell PS C:\Users\DELL> winget install git.git

• Check Git

PS C:\Users\DELL> git --version

• Open “Git Bash” - cek the version

Git was ready on My Computer

Gitlab and Repositories

In website development, project collaboration systems are very common. The goal is very simple, namely speeding up the completion of digital products. Managing the web directly from the computer as a repository is very beneficial. Having the ability to track changes and versions will help track system changes. Git is capable of that.

The Documentations of GitLab :

GitLab Documentation

Git Cheat Sheet

- Login

We must first login to Git with the following command:

git config --global user.name "Your name here"
git config --global user.email "your_email@example.com"

Cek login with

git config --list

We have to login to the Gitlab website (https://gitlab.fabcloud.org/). GitLab and Git have a special relationship, namely Git which acts as a version control system and Gitlab as hosting or as a programming code store.

- Make the Repository

If we are just going to develop a new website in GitLab then we need to create a new Repository in Gitlab. But if we already have a repository or just joined a web that is already running then we just need to clone the repository to a local repository on the computer

At the time the Fab Academy GitLab used at https://gitlab.fabcloud.org/, FabAcademy had created a template so we just had to clone it to the local repository.

- Project Layout

mkdocs.yml    # The site configuration file.
docs/         # All site content/files should be in this folder.
    index.md  # The homepage.
    files/    # Put files you'd like available in your site here (except videos)
    images/   # You can put your images in here
    abc.md... # Other markdown pages and folders

We can adjust the appearance and content of the web by editing directly on GitLab (https://gitlab.fabcloud.org/) by editing directly, then Commit change to Master (Target Branch)

- Building Mkdocs Locally

1. Clone or download this project on your computer

   • Create the Folder to place the “Local Repository”

   

   • Open the folder with Git Bash (Right click)

   

   • Change the Folder to be Repository location

git init

• Find the clone url at the top of your projects “overview” page

• Run clone to local repository : git clone [url]

git clone git@gitlab.fabcloud.org:your/project/path.git`

• We can get the link path from the Gitlab website on our project

1. Install MkDocs on your computer
   • To install MkDocs, run the following command from the command line:

    pip install mkdocs

• Change the directory to the local directory of the Repository

• Preview your project:

mkdocs serve

your site can be accessed under localhost:8000 or 127.0.0.0:8000

When we run the serve on the directory, it will showing “error” message :

We Solved with install the plugin :

    pip install mkdocs-material

    pip install mkdocs-git-revision-date-localized-plugin

1. To add new pages, create the markdown file in the docs/ folder (i.e. touch docs/about.md)

2. Preview the page: (at localhost)

1. After the preview OK then : Push your changes to GitLab to automatically publish your changes

     `git commit -m "Updated site"`
     `git push master`

SSH Key

SSH key is an authentication method that used to access by an encrypted connection between systems and finally use that connection to manage the remote systems.

• make the SSH Key :

ssh-keygen -t rsa

• save the file ssh : withe the name : id-rsa.pub

• leave the passphrase blank, in this example, I made the RSA key Public
• After the RSA key is generated, it’s time to display the RSA key that was created by executing a command like the following

cat id_rsa.pub

• copy the key was displayed, enter to the GitLab (https://gitlab.fabcloud.org/)
• Open the https://gitlab.fabcloud.org/ , login to the account, enter the key on the preference account

Editor & IDE

Markdown is a text-to-HTML conversion tool that can be used when creating web content. By using Markdown we can write HTML content in an easy-to-read and easy-to-write format. There are many editors that can be used to edit MKDoc.

Info

MKdocs = static website generator

Markdown Guide

To edit the source code of MKDoc, you can use the editor. Editor has many kinds, both text-based or IDE (Integrated Development Environment) which is equipped with other features such as GUI (Graphic User interface) or other features. Some examples of popular IDEs used include:

Visual Studio Code

Visual studio Code is a cross platform application that can be used by various operating systems such as Windows, Linux, and Mac OS. VS Code is a lightweight but powerful source editor with desktop. Using various programming languages such as Java, Javascript, Go, C++, and many others.

Link : Visual Studio Code - Code Editing. Redefined

Atom

Atom is a free, open source text and source code editor for macOS, Linux, and Microsoft Windows with support for plug-ins written in JavaScript, and embedded Git Controls. Developed by GitHub, Atom is a desktop application built using web technologies.

Link : Atom Editor

Brackets

With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. It’s crafted from the ground up for web designers and front-end developers.

Link : Bracket Editor

Vim

Vim is a free and open source text editing software for the Unix operating system. This editor is an extension of Bill Joy’s vi text editor..

Link : Vim Editor

- Using Visual Studio Code

Visual Studio Code is a text editor that is popular among web developers because it has many features and extensions that can help and simplify the web creation process.

• Open the local repository file :

• Setting and customize the web : mkdock.yml

• Customize the web by editing the .md files
• The necessary supporting files can be uploaded to the doc folder, according to the file type
• After the changes are made, then a “stage change” is carried out and a “commit” is carried out by filling in a note of the changes made.

• We can preview with mkdoc serve, If the locale web display is correct, it can be synchronized with the web repository
• Save and Sync to the web site.

ATTENTION !!

Don’t forget…BEFORE you push your Local Repository to your Cloud Repository…make sure your images have been compressed to less than 200KB each (note KB not MB).

Custom and update the page

- Project Management page

Create new file, edit/write the page/code and save with .md file

Setyawan B Wibowo - Fab Academy

- Customization the layout and theme

Changing the colors - Material for MkDocs

Images - Material for MkDocs

Tutorial with Git and Gitlab

Another tutorial and tips using Git and Gitlab

- Getting Git Right

- Git cheat sheet

- Learning branch

- Git and GitLab Introduction

Lessons learned (week 1):

• Understand how the Fablab ecosystem is built and gain a worldwide network
• Designing concepts for innovative devices for final project
• Using git for documentation and website updates

---

Last update: February 5, 2022