Project Management

The FabAcademy has started and the first assignment concerns documentation and management of projects.

Personal site

I write a static site in HTML to provide documentation.

IDE

I have chosen the commercial IDE JetBrains PhpStorm 2017.3 to develop my site, because I have used it last year and I like product built on JetBrains' IntelliJ IDEA platform.

An interesting feature is the version control systems integrated for Git (and other system) that allowing you to perform actions (commit, merge, diff, etc.) right from the IDE. I have never used it for my projects on Github, because it has a dedicate program with good GUI. But automatically activates the feature to show instantly the difference with online master.

Figure 01

Figure 1. JetBrains PhpStorm

Template

To build the site I didn't use a template, I copied the Android Developer page using Firefox 58 feature to view the pages source code.

Figure 02

Figure 2. Firefox View page source feature

Edits

I deleted any code parts that I didn't need and I moved the footer in ./footer.html and the sidebar (called Navigationdrawer) in./drawer.html. A script load that file and add class selected to right <li> object. So it's faster to make future changes.

<!-- drawer -->
<nav class="dac-nav" id="nav_wrapper">
    <script type="text/javascript">
        $(document).ready(function () {
            $('#nav_wrapper').load('drawer.html', function () {
                <!-- remove // to enable and use right "id" -->
                //document.getElementById("id").classList.add('selected');
            });
        });
    </script>
</nav> <!-- END drawer -->
Figure 03

Figure 3. Example in about_me.html

I found all info on w3schools, HTML5 Rocks and stackoverflow.

Git

To upload my site on gitlab.fabcloud.org I used Windows' Command Prompt.

Prerequisites

I installed Git Bash 2.16 and verified the installation was successful by typing git --version in the terminal:

C:\Users\Paso>git --version
git version 2.16.2.windows.1

Configuration

I configured Git credentials typing git config --global user.name "Paso" and git config --global user.email "[email protected]". I have not received any outputs, but I verified typing type .gitconfig.

C:\Users\Paso>type .gitconfig
[user]
        name = Paso
        email = [email protected]
[filter "lfs"]
        process = git-lfs filter-process
        required = true
        clean = git-lfs clean -- %f
        smudge = git-lfs smudge -- %f

After I generated a SSH key with Git Bash typing ssh-keygen -t rsa -C "[email protected]" -b 4096 and I copied to clipboard the public key to paste it in SSH Keys section on my profile on Gitlab.

Figure 04

Figure 4. Git Bash

I moved in another folder typing cd fabacademy and I cloned my repository here with command git clone <repo>

C:\Users\Paso>cd fabacademy

C:\Users\Paso\FabAcademy>git clone [email protected]:academany/fabacademy/2018/labs/fablabopendot/students/francesco-pasino.git
Cloning into 'francesco-pasino'...
The authenticity of host 'gitlab.fabcloud.org (13.59.248.79)' can't be established.
ECDSA key fingerprint is SHA256:Rphnjz211wPLjTJcyAip0xozt0hOoFgT9hl5eZfxzd0.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'gitlab.fabcloud.org,13.59.248.79' (ECDSA) to the list of known hosts.
Enter passphrase for key '/c/Users/Paso/.ssh/id_rsa':
remote: Counting objects: 3, done.
remote: Total 3 (delta 0), reused 0 (delta 0)
Receiving objects: 100% (3/3), done.

Before I started, I checked that it was correctly cloned looking the folder status.

C:\Users\Paso\FabAcademy>cd francesco-pasino

C:\Users\Paso\FabAcademy\francesco-pasino>git status
On branch master
Your branch is up to date with 'origin/master'.

nothing to commit, working tree clean

Use

I moved my local site folder to git folder and I added .gitignore. file to not sync .idea folder, automatically build by my IDE.
After I added any changed files of directory (all files in this case) to the stage typing git add . and I committed the staged snapshot with command git commit -m "<message>".

C:\Users\Paso\FabAcademy\francesco-pasino>git add .

C:\Users\Paso\FabAcademy\francesco-pasino>git commit -m "Initial commit"
[master 74407a3] Initial commit
 12 files changed, 1000 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 about_me.html
 create mode 100644 assignment_01.html
 create mode 100644 assignments.html
 create mode 100644 favicon.jpg
 create mode 100644 final_project.html
 create mode 100644 index.html
 create mode 100644 nav.html
 create mode 100644 src/01/Screenshot_01.png
 create mode 100644 src/01/Screenshot_02.png
 create mode 100644 src/01/Screenshot_03.png
 create mode 100644 src/01/Screenshot_04.png

I uploaded all commit on repository typing git push

C:\Users\Paso\FabAcademy\francesco-pasino>git push
Enter passphrase for key '/c/Users/Paso/.ssh/id_rsa':
Counting objects: 16, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (14/14), done.
Writing objects: 100% (16/16), 337.29 KiB | 7.50 MiB/s, done.
Total 16 (delta 2), reused 0 (delta 0)
To gitlab.fabcloud.org:academany/fabacademy/2018/labs/fablabopendot/students/francesco-pasino.git
  4edfac4..74407a3  master -> master

Now when I open the git local repository with my IDE, it automatically shows you differences instantly with online master and I can commit and push with integrated feature.

Figure 05

Figure 5. Commit feature

The last step was to add .gitlab-ci.xml. By my Gitlab repo I added a new file, chose the template as shown in the figure 06 and pressed the button Commit changes at the bottom of the page.

Figure 06

Figure 6. Template

Final project

Figure 07

Figure 7. Final project sketch

My final project sketch represent a removable top part of Laura's final project. It is always designed for FABKIT, a project by Global Humanitarian Lab.

My idea is a showcase of design rules reference of the various topics seen. On left part there are a thermal printer and RFID with some leds and/or buttons to print the info, instead on right part there are the finished objects for consultation.