Project Management

This weeks taks was to work through a git tutorial, build a personal site in the class archive and to describe me and my final project.


Git

Git is a free and open source distributed version control system. As I have used it a lot in various project during my studies I was quite familiar with it and had no problems at all, setting it up. For those who are new to git and gitlab I highly recommend this following tutorial, as it helped me a lot the first time I used git:
https://rogerdudler.github.io/git-guide/index.de.html.
Because I'm using Visual Studio Code as my main IDE (integrated development environment) I first installed the gitlab extension pack.
Then I used the command line tool CMD to generate a ne ssh key, which I afterwards added to my gitlab account.
To generate the key I entered the following line in the command line.

        
          $ ssh-keygen -t rsa -b 4096 -C "Put your E-Mail here"
        
      
To add my generated key to my gitlab account I've gone to settings, SSH Key, pasted my key in and gave it a name.

After that I cloned my existing git repository to my computer. I used the git extension Visual Studio Code provides to clone the repository.

      
      $ git clone git@gitlab.fabcloud.org:academany/fabacademy/2021/labs/bottrop/students/jonas-vanhagen.git
      
    

Now I can work on my files, edit and delete them as I like.
When I'm ready I have to stage all of my changes. For that I use the Git Extension in Visual Studio Code:

After staging all of my changes I can commit them and add a commit message, which will describe the actions I've done before. For that I'm using the Git Extension aswell:

Last step is to push everything I've commited to my repository. If I won't specify which branch I want to push to, Visual Studio Code will allways push to origin master.


My Website

For my Website I wanted it to be clean and simple.
I made a quick sketch on what it may look like, just to get an idea:

As I used Bootstrap before I created a simple website based on their Introduction and Examples.
If you want to try out Bootstrap I recommend the tutorial from w3schools.

All of my website will consist out of three essential components:
A Header:

        <header>
          <!--
            I put my title in here
            Then I define the charset as UTF-8
            at last I import javascript files required for bootstrap to work
          -->
        </header>
      

A Body:
        <body>
          <!--
            Here I start with the navigation bar at the top of my website
            Then I put all of my content, my images and everything I want to show in here
          -->
        </body>
      
And a Footer:
        <footer>
          <!--
            Here I only display my Email adress...
            And then license everything under creativecommons license
          -->
        </footer>
      

For the website of this first week it looks like this:
Header:

First part of the body:

And footer:

If you want to see the full code you can allways look at the source code via your browser :)

My final Project

For my final project I want to build a smart cat litter box. I had the idea for quite some time now, so I thought why not use the different things I learn here to realise it.
A picture of my beloved Cats below:

I've made a list of task I want my smart litterbox to fullfill aswell as a small list of optional goals I want to achieve:

Goals

Optional goals

  • Instead of using a ultrasonic sensor I want to use a camera with image recongnition, so the system can differentiate between my two cats. So I could collect individual data for each cat.

  • As addition to the monitor / App system to notify me I consider an open hub integration.

  • Instead of each toilett collecting and processing the data I'd like to use a master - slave system, so that I can have multiple smart litterboxes in my home, which each collect data, send them to a masterdevice, whitch then processes everything and manages the notifications.


  • Note: The first Image was scanned as pdf and converted to png, the second image was scanned as png.