Skip to content

1. Principles and practices, Project management.

1.1. Principles and practices

Modular Hydroponic System for Growing Plants at Home

My idea for the final project is to create a modular hydroponic system designed for growing plants at home. In modern urban life, many people face a lack of time and space to fully interact with nature. This project aims to address this issue by providing the opportunity to grow plants at home with minimal effort.

The automated functions of the system ensure regular care for the plants, including watering, adjusting lighting, and other parameters necessary for their growth and development. This significantly simplifies the process and makes it accessible even for people with no gardening experience. The project aims to create a convenient and effective solution that not only brings nature into urban life but also makes it accessible to those who cannot devote much time to plant care.

Sketch

1.2. Project management

Research

To streamline the work being carried out, it is necessary to document every step in detail. For this, first of all, it is necessary to organize the process of creating a website, which I worked on during the first week. By studying the works of previous years' Fab Academy students, particularly Areg’s, Elen’s and Rudolf’s I started creating my website.

Programs that I used

  • Git Bash It's a command line tool for Microsoft Windows. It provides an interface that allows users to run Git commands and interact with the repository.
  • Visual Studio Code It's a command line tool for Microsoft Windows, Linux и macOS. It provides an interface that allows users to run Git commands and interact with the repository.
  • Python It's a general-purpose programming language that is widely used in web development, software development, data analysis, and machine learning system development.I used it to avoid waiting for my push requests to load on the server for a long time, and to see the changes made immediately.
  • ChatGPT I use it to translate and correct the spelling of my thoughts.
  • Optimizilla I use it to compress JPEG, GIF and PNG images to the smallest possible size while maintaining the required level of quality.

Using AI for documentation

For proper translation in context from Russian to English , I am using ChatGPT for my documentation.

Version control

Version control, also known as source code management, is used to track and manage changes to software code, helping development teams manage changes to source code.

The first steps

The first thing I did was log into gitlab.

Then downloaded and installed git bash. The process is very simple and does not require much time. A similar process for Visual Studio Code.

After installing these programs, I will need to run Git bash in the folder where the site materials will be stored carefully (the folder location does not change in any case).

Right-click on the folder, select "Show more options", and then choose "Open Git Bash here".

After launching the Git Bash terminal, I need to setup it for my GitLab account. To do this, enter these two commands.

    $ git config --global user.name "zhirayr-ghukasyan"
    $ git config --global user.mail "jirayr@gmail.com"

To check the current settings or diagnose unexpected Git actions, use the following command.

    $ git config --list

SSH key generation

It's time to generate an SSH key. By using SSH keys for authentication on a remote GitLab server, you eliminate the need to enter a username and password each time you connect.
I use an ed25519 type SSH key.

First, to generate the key, you need to enter the command in the terminal.

$ ssh-keygen -t ed25519 -C "<comment>"

The generated key is stored in a folder with the name .ssh. I copied it using the following command.

$ cat ~/.ssh/id_ed25519.pub | clip

After that, I will need to visit the GitLab website, find the "SSH" section, and insert the generated key.

Clone repository

First, I copied my GitLab repository. Here's how to clone it.

After that, I need to enter the following command in the terminal and paste the copied link there.

 git clone "Copied-link"

In order for Git to start tracking changes to my site, I need to enter the following command.

    git add .

But because we were given a Julian’s pre-designed website template, all I had to do was download the zip archive, replace the contents of my folder with the pre-downloaded one, and start redesigning.

Visual Studio Code

Now I need to open my repository folder in visual studio code for further work on my website.

How can this be done? left-click on the file > open folder... > choose your folder > and press select folder.

Basic Git commands

Here are some basic Git commands that I will use.

  • Git status - Тo find out about all my changes, it displays the current status of the working directory in Git.
    git status
  • Git add . - Тo track all the changed files and folders in a directory at once.
    git add .
  • Git commit - To add a commit that made it clear what changes had occurred.
    git commit -m "Commit"
  • Git push - Тo transfer the changes made to the remote repository.
    git push

Rendering

Python

Тo immediately see the changes made, download python. Make sure that the "add Python to PATH" checkbox is checked.

After installing python, be sure to check the versions to make sure that everything went well with the Python installation. Here is the command to check the version,

    python --version
    pip --version

Markdown

Markdown is a simple markup language that converts text into structured HTML. It allows us to add basic formatting to the text. MkDocs is a tool for generating static websites based on Markdown files in order to create project documentation. Next, I need to install MKDocs and Material using the terminal command. Install MKDocs and Material using the terminal.

Here is the command for this.

    pip install mkdocs
    pip install mkdocs-material
    pip install mkdocs-Git-revision-date-localized-plugin

And with this command, I can instantly see the changes made on my site, I just need to copy and paste the link below or press Ctrl+Left click on the link.

    mkdocs serve

Website customization

I updated the font, changed the color scheme, and added a dark theme, making the website more modern and user-friendly. The dark mode improves comfort in low-light conditions.

My mkdocs.yml Configuration with Comments

theme:
  name: material  # The theme being used is Material for MkDocs

  palette:  
    # Palette configuration for light mode
    - media: "(prefers-color-scheme: light)"  # Specifies when to apply this palette (when the user prefers light mode)
      scheme: default  # The base color scheme
      primary: green  # The primary color of the interface (e.g., the top bar)
      accent: light green  # The color for accent elements (e.g., buttons)
      toggle:  
        icon: material/brightness-3  # Icon used for switching to dark mode
        name: Switch to dark mode  # Tooltip text for the dark mode toggle button

    # Palette configuration for dark mode
    - media: "(prefers-color-scheme: dark)"  # Specifies when to apply this palette (when the user prefers dark mode)
      scheme: slate  # The color scheme for dark mode
      primary: green  # The primary color of the interface in dark mode
      accent: light green  # The color for accent elements in dark mode
      toggle:  
        icon: material/brightness-1  # Icon used for switching to light mode
        name: Switch to light mode  # Tooltip text for the light mode toggle button

  font:
    # Font configuration
    text: Oswald  # The font used for body text
    code: serif  # The font used for code blocks

  icon:
    logo: material/school  # Logo icon (from Material Icons)

  favicon: images/favicon.svg  # The favicon for the site (the tab icon)

  features:
    - navigation.tabs  # Enables tabbed navigation
    - navigation.instant  # Enables instant page loading (no full page reload)

Explanation of the Configuration

In my mkdocs.yml file, I set up the theme and other elements as follows:

  1. Theme: I chose the Material theme because it offers a clean, modern design.

  2. Palette: I configured different color schemes for both light and dark modes:

    • For light mode, I used green as the primary color and light green for accents.
    • For dark mode, I chose a slate scheme with the same green and light green colors for consistency.

  3. Fonts: I selected the Oswald font for body text and a serif font for code blocks.

  4. Features: I enabled tab navigation and instant page loading for a better user experience.

This setup helps make my site more visually appealing and user-friendly while ensuring smooth navigation between pages.

Conclusion

This week, I learnt into project management principles and essential tools, including version control. I set up GitLab, installed Git Bash and Visual Studio Code, and configured an SSH key for secure communication. I learned to use basic Git commands to track changes and worked with Python to update my site on a local server. Additionally, I explored Markdown for documentation and set up my Fab Academy website.

Since I had no prior experience in website development, the process was both challenging and exciting. Initially, I struggled with where to begin and what steps to take. However, as I experimented with different tools and approaches, everything became clearer and more engaging. This hands-on experience allowed me to grasp the fundamentals of web development and gain valuable skills while building my first project.