Week 01. Principles and Practices / Project Management

The first week of Fab Academy! I did a sketch of my project and added it to the Final Project page.

Assignments for this week

  • 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

What I've done this week

  1. Setting up PC enviroments
    • Visual Studio Code (VScode)
    • Git
    • MkDocs
  2. Create a website
  3. Plan a final project

1. Setting up PC enviroments

The First thing I did this week was Setting up my PC enviroment.

Here are the version of tools I use.

  • MacBook Air (M1, 2020)
  • macOS Monterey 12.3.1
  • VSCode 1.74.3
  • zsh 5.8 (x86_64-apple-darwin21.0)
  • Homebrew 3.6.20
  • python 3.10.8 / pip 22.3.1
  • git 2.39.1
  • mkdocs 1.4.2

I changed my mac screenshot setting from the default(PNG) to JPG with the following command.

defaults write com.apple.screencapture type jpg

Choose Text Editor

Text Editors are software where you write your codes in.

I chose VScode for my text editor.

VScode has wide range of extensions that help you code, debug and visualise your work. Here are the extensions I installed for Fab Academy:

  • Git History
  • HTML CSS Support
  • Markdown All in One

Getting started with Git

I followed this tutorial of Git.

Step 1. Download Git.

brew install git

Step 2. Identify user.

git config --global user.name "sosuke"
git config --global user.email "sosuke.kanegae@mat.eng.osaka-u.ac.jp"

Step 3. Check if there is any SSH-Key existing. If not generate SSH-Key.

(check)
cat ~/.ssh/id_rsa.pub

(generate)
ssh-keygen -t rsa -C "sosuke.kaneage@mat.eng.osaka-u.ac.jp"

Step 4. Check the public key you just created.

cat ~/.ssh/id_rsa.pub

Clone my repository from GitLab to a local workspace

Now so that I got Git ready, I prepaired a new directory to store everything I do with Fab Academy.

cd ~/FabAcademy/
mkdir workspace

In new workspace, I first cloned my repo on GitLab

git clone https://gitlab.fabcloud.org/academany/fabacademy/2023/labs/kitakagaya/students/sosuke-kanegae.git

Now, I have a newly cloned directory "sosuke-kaneage" in my workspace. And, I am ready to edit my website.

Setting up MkDocs

Using MkDocs, you can easily create documentatoin websites. You will have to code in HTML, CSS and JavaScript to create a website. However, in MkDocs all you have to edit is Markdowns, which is easy to use.

Step 1. Install MkDocs.

pip install mkdocs

Step 2. Create new Mkdocs project in workspace

cd ~/FabAcademy/workspace
mkdocs new fabacademy-docs

Step 3. Launch test server

mkdocs serve

Now, I have a MkDocs project with the default settings in ~/FabAcademy/workspace/fabacademy-docs. And, I can check how the website will look in my browser(http://127.0.0.1:8000/).

Build, Commit and Push

After editing MkDocs project, I have to convert the markdowns to HTML files.

cd ~/FabAcademy/workspace/fabacademy-docs
mkdocs build

The build commmand creates HTML files in ~/FabAcademy/workspace/fabacademy-docs/site/

To build directly into the git directory, add the following line to ~/FabAcademy/workspace/fabacademy-docs/mkdocs.yml

% mkdocs.yml
site_dir: ../sosuke-kanegae/public/

Finaly commit changes in local git repo and push to remote GitLab repo.

git commit -a -m 'Comments about changes'
git push

Instead of commit and push in the command line, you can also commit and push from the Git tab in VScode.

You can find the Git tab in the left column of the window. Click the tab and you will see a blue "Commit" button. Underneath the button, you can check the changes you made from last time. If you're good with the changes you can just simply press the "Commit" button. Or, you can select "Commit & Push" in the option of the "Commit" button.

commit in VScode

When everything is up to date in your local repo, the blue button will turn into a sync button. The number written on the button indicates how many times you commit since you last push git. To push you can simply press the sync button.

push in VScode

Finally, when you have pushed and everything is up to date, the blue button will return into "Commit" and will be deativated

Warning

An error will sometimes occur when pushed in VScode. So, it might be better to push from command line.

2. Create my website

Choose a style

There are several optional styles available for MkDocs. third party themes

I chose Bootswatch Theme, because the menu interface was very useful.

  • You can access to every page on my website easily.
  • There is a content on every page, so you can jump to any h2 tag.

Customize website

I customize my website by editting ~/FabAcademy/workspace/fabacademy-docs/mkdocs.yml

I add Copyrights by adding the following line.

copyright: Copyright 2023 Sosuke Kanegae - Creative Commons Attribution Non Commercial

I made a link to the source code in GitLab by adding:

repo_url: https://gitlab.fabcloud.org/academany/fabacademy/2023/labs/kitakagaya/students/sosuke-kanegae

3. Plan a final project

A lamp that changes mood depending on sunlight

Final Project Sketch

For my final project I would like to make a lamp that creates several different mood depending on the situation.

Just putting a lamp in a room changes the atmosphere of the room. Every lighting equipment has its own mood.

In the daytime, my favorite lighting equipment is a projector with streaming devices. Streaming devices like AppleTV and Chromecast show pictues and landscape movies when they are at screensaver mode. I love the way pictures and landscape moving slowly on my wall. So, I want to make a lamp with silhouettes moving around the lamp shade.

I love watching candles before bedtime. It makes me relax and feel calm. But, fire is dangerous. especially if you fell asleep with your candels on. I want to make a bedroom lamp that glows and flicker like a candle.

These two are the concept of the lamp I want to make. It's not just I want to make both type of lamps, but I want to make a lamp that switches between the two.

The lamp will change mode like:

  1. Turns ON with sunlight silhouettes (birds, butterflies and flowers) moving around the lampshade. (Senses enviormantal light)
  2. Changes to candle mode at bedtime. (Senses enviormantal light going low)
  3. Turns OFF when everybody is asleep. (Timer or acoustic sensor)

How it would look like:

Daytime: projecting silhouettes on the lamp shade lamp in daytime

Nighttime: glows and flickers like a candle lamp in night time