Skip to content

1. Project management

Week 1 Tasks Overview

For the first week of the program, we were provided with a checklist of tasks to complete by the end of the week. This checklist was designed to guide us toward acquiring key skills and knowledge, and to help us focus on specific areas. The tasks were as follows:

Build a personal website to showcase ourselves and our final projects. Upload the website to the class archive. Complete a Git tutorial. In the process of completing these tasks, we were introduced to new concepts and tools, which I’ll outline below.

Introduction to GitLab, MkDocs, and HTML

The first session in the FabLab Academy was an introduction to GitLab, where we used it to establish our websites in a markdown format (MkDocs), while some participants also used HTML.

What is GitLab?

GitLab is a platform for managing code and automating tasks such as testing and deployment. It helps teams collaborate efficiently, track issues, and stay organized. GitLab can be used in the cloud or hosted on your own server, making it a powerful tool that speeds up the development process.

What is MkDocs?

MkDocs is an open-source tool that automatically converts Markdown files into a website. Using simple Markdown syntax, MkDocs allows users to easily create and manage documentation. It is a user-friendly option for generating websites without needing extensive coding skills.

What is HTML?

HTML (HyperText Markup Language) is the standard language used to manually create and structure web pages. Unlike MkDocs, which uses simple text, HTML requires more detailed coding. HTML uses tags to structure content such as text, images, and links, allowing web browsers to display web pages correctly.

Why Choose MkDocs?

We chose MkDocs because it is more accessible and user-friendly, especially for non-technical users. MkDocs allows us to create and manage websites using simple text formatting, while HTML requires a deeper understanding of coding to build websites from scratch. MkDocs is a great option for quickly getting a functional website up and running with minimal technical knowledge.

Website Development Steps:

  1. I began the website design process by logging into GitLab, where I found a project file with my name already set up.

  1. Locating the website link in GitLab: On the Sara.Zuhair project page, I navigated to Deploy > Pages, where a link appeared. Clicking on it redirected me to my webpage.

This was the website’s initial appearance

  1. Webpage Costumization From the main project page, I clicked on “Edit” and selected “Web IDE,” which allowed me to edit the multiple files within the project.

This is what the Web IDE interface looks like. The project files are listed in the left-hand column, and by selecting any of them, you can easily edit the text, add images, and customize the webpage theme.

To change anything related to the site’s appearance, I had to click on the mkdocs.yml file in the left-hand column of the Web IDE, as it controls the site’s theme and layout.

page title costumization

To customize the page title and copyright name, I simply clicked on the mkdocs.yml file and replaced the text that said “your name” with my actual name, “Sara Zuhair.” However, these changes wouldn’t take effect until I went to the source control, added a commit message for each change, and then pushed it to the master branch.

In this process: - Commit saves your changes locally, recording them in the version history. - Push uploads your changes to the central repository, making them visible to others and updating the live project.

To check the status of any pushed commit, I would go to the project page, click on Build, and then select Pipelines. There, I could see the commit go through different phases as it gets pushed successfully: from pending to running to passed.

Once the green passed icon appears, it means the changes have been successfully deployed, and you can see the updates reflected on the site.

page color costumization

The same steps outlined above were followed to change the website’s theme color. The only difference was that I followed a link by pressing (Ctrl + Click) to this page https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/, which references different theme styles. From there, I copied the color code I wanted and pasted it into the specific field as instructed on the site. I selected a light green color and placed it in the primary color field, replacing the default indigo preset to better suit my taste.

The following set of pictures illustrates the process in a numbered sequence: - I clicked on the mkdocs.yml file and visited the link to access the theme color options. - I copied the desired color code and replaced the preset color name with my chosen color. - Then, I went to the source control, added a commit message (“color”), and pushed the changes to the master branch.

The status of the pushed commit can also be tracked directly from the top of the project page, without needing to access the Build and Pipelines section. A notification icon appears, indicating the progress of the commit. When the commit is successfully pushed and processed, the notification will update, letting you know whether the push was successful or if there were any issues.

Finally, once the commit has been successfully pushed and the process is complete, you can see the theme color change to light green on the website.

signing the agreement and editing the about page

The previous steps were followed to sign the agreement and edit the text on the “About Me” page. The only difference was that instead of editing the mkdocs.yml, I selected Docs, then About, and clicked on Agreement to make changes to the agreement text. For editing the “About Me” page, I selected the index file to alter the content.

The remaining steps were the same:

I went to Source Control, added a commit message with a title for the changes (e.g., “Updated About Me text” or “Signed Agreement”). I committed the changes and then pushed them to the master branch. I waited for the commit status to update from pending to running and finally to passed, ensuring that the changes were successfully applied.

result:

Adding Images

To add or edit images, you need to go to the project page, click on the docs file, and then select the images folder. From there, you can choose the specific week’s folder where you want to upload the image in order to keep your files organized.

After making sure I had selected the correct week folder, I clicked the plus sign and chose Upload file from the list. I then selected the image, renamed it, and uploaded it.

It’s best to give each image a short, simple name or number because file names are case-sensitive. Even a minor change, like an incorrect capitalization, can cause the image to fail to display when adding the code to embed it on the page.

After uploading the picture, I followed the same steps we’ve used previously to make changes: I navigated to Docs, then About, and selected the index.md file. There, I either added the image code or updated the existing one to display the new image on the site.

The image code format is ![](), where the file path of the image goes inside the parentheses. Since image filenames are case-sensitive, I made sure the code referenced the exact week folder and the correct image name I had uploaded.

After making these edits, I followed the usual process: 1. Committed the changes with a relevant message. 2. Pushed the changes to the master branch. 3. Waited for the commit status to change from pending to running and finally to passed, ensuring the new image was successfully displayed on the website.

offline edditing

After learning the initial steps for editing and personalizing your site, you can start editing it offline using a code editor like Visual Studio Code. This allows you to make changes locally on your computer before syncing them with the online repository, following a similar process to what we’ve already done.

To get started with offline editing, you’ll need to download and set up the following tools:

  • Git Bash: Git Bash is a command-line interface that allows you to use Git commands on your local machine.

  • Visual Studio Code: This is a popular and powerful code editor for web development.

Once you’ve installed both Git Bash and Visual Studio Code, follow these steps: 1. Open Git Bash: Right-click on your desktop and choose “Open Git Bash Here”.

  1. Copy the Clone Link: Go to your project page on GitLab, click Code, and copy the link under “Clone with HTTPS”.

  2. Clone the Repository: In Git Bash, run the following command: bash git clone <repository-url>

  3. Create and Navigate to Project Folder: Use the cd command to navigate into the folder: bash cd your-project-folder

  4. Configure Git: Set your global Git username and email: bash git config --global user.name "Your Name" git config --global user.email "your.email@example.com"

  5. Open Project in Visual Studio Code: Open Visual Studio Code and use the ‘Open Folder’ option to open the cloned project folder.

Now, we’re ready to start editing and syncing our site locally, following the same steps we used in the Web IDE:

  1. Choose the relevant file in Visual Studio Code, such as index.md or mkdocs.yml, and make the necessary changes (e.g., updating text, adding images, or modifying the theme).
  2. Go to Source Control and stage your changes.
  3. Add a commit message to describe the changes.
  4. Push the changes to GitLab.
  5. for the upload to complete, with the status changing from pending to passed on GitLab, confirming the update was successful.

Task 1: Design Thinking

Design thinking is a human-centered problem-solving approach that involves empathizing with users, defining problems, ideating solutions, prototyping, and testing to create innovative and effective solutions.

Project 1

User Need Individuals with dementia who frequently misplace their keys or essential items.
Solution A small, compact device that can be attached to a keychain, synced with a mobile app. This device will send location data and emit sound to help users easily locate their misplaced items.
What Makes It Unique The device is small, lightweight, and flexible, able to be implanted or attached to a variety of personal belongings, offering seamless integration into everyday life.
POV How might we reduce the time and frustration spent searching for misplaced items, offering a sense of comfort and independence to those who struggle with memory loss?
Keywords 1. Bluetooth Low Energy (BLE). 2. Compact Design. 3. Location Tracking. 4. Mobile App Integration. 5. Sound Emission. 6. Waterproof.

Project 2

User Need Individuals looking for an efficient way to manage indoor humidity while benefiting from sustainable plant irrigation.
Solution A humidity extraction system that captures moisture from indoor air and uses it to irrigate aeroponic towers. This system reduces excess humidity in rooms while simultaneously nourishing plants, promoting healthier indoor environments and efficient water use.
What Makes It Unique A hybrid system that integrates aeroponic towers with a dehumidifier.
POV The system integrates two solutions in one—humidity control and sustainable plant irrigation. It’s designed to work in residential or commercial spaces, providing a practical, eco-friendly way to maintain optimal indoor climate while nurturing plants.
Keywords 1. Atmospheric water generation (AWG) 2. Moisture harvesting 3. Aeroponic irrigation system 4. Indoor air quality management 5. Low power moisture collection

Task 2: The Engineering Design Process

Also known as The Engineering Method is a common series of steps that engineers use in creating functional products and processes.

In engineering design, a Function-Means Tree is a method used for breaking down functions and generating concepts. At the top level, the main functions are identified, and underneath each function, a corresponding solution (means) is added. Alternative solutions can also be included.

Last update: November 15, 2024