Assignments

Principles and Practices (part 1 of 2):
-Plan and sketch a potential final project

Project Management (part 2 of 2)
-Read, sign (add your name to) the student agreement and commit it to your repo.
-Work through a git tutorial.
-Build a personal website in the class archive describing yourself and your final project. Refer to the lecture material for examples.
-Upload parts 1 and 2, to the class archive.

Week 1. Principles and Practices, Project Management

Student Agreement

# Jhonatan Estiven Cortes Ceron - Fab Academy Documentation

Welcome to my Fab Academy documentation! Here, I will document my journey, projects, and learnings throughout the Fab Academy program.

Visit [fabacademy.org](https://fabacademy.org/) for class and other information.

Learn more about GitLab Pages at [GitLab Pages](https://pages.gitlab.io) and the official documentation [GitLab Pages Docs](https://docs.gitlab.com/ce/user/project/pages/).

---

## Add Your Files

To get started with your documentation, follow these steps:

1. **Create or Upload Files**: - [Create a file](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) directly in the repository. - [Upload a file](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) to your repository.

2. **Add Files Using the Command Line**: - If you prefer using the command line, you can add files by running the following commands: ```bash git clone cd # Add or modify files git add . git commit -m "Add initial files" git push origin main ``` - Alternatively, you can push an existing Git repository to GitLab.

---

## GitLab CI

This project's static Pages are built by [GitLab CI][ci], following the steps defined in [`.gitlab-ci.yml`](.gitlab-ci.yml).

The current setup expects all your HTML files to be placed in the `public/` directory. Make sure to organize your files accordingly to ensure the Pages are generated correctly.

---

## About Me

Hi! I'm **Jhonatan Estiven Cortes Ceron**, a Fab Academy student passionate about digital fabrication, electronics, and innovation. Through this documentation, I aim to share my progress, challenges, and successes as I explore the world of digital manufacturing and creative technology.

---

Feel free to explore my documentation and follow my journey through Fab Academy!

Project Description: IoT Security Device (FabSafe)


What is it?

The project consists of an IoT security device designed to block the activation of dangerous machinery in a FabLab. It only allows access through fingerprint recognition or an administrator command sent via interface. This device reduces accident risks by preventing unauthorized personnel from operating equipment. It additionally requires periodic confirmations to ensure machines aren't left unsupervised, and includes a notification system that alerts administrators when machines are activated, enabling real-time control and emergency lockdown capabilities.

Device Components

  • ESP32: Controls the relay system that blocks machine activation
  • Relay: Interrupts electrical power to the machine
  • LED Display: Shows current system status
  • Fingerprint Reader: Enables authorized access
  • WiFi Antenna: Enables communication with admin interface
  • Buzzer: Emits audible alerts
  • Protective Case: Houses all internal components
  • Custom PCB: Organizes electrical connections
  • Vinyl Signage: Displays proper usage instructions
  • Laser-Cut Acrylic Screen Protector: Provides durable display protection

Who Will Use It?

Primarily designed for FabLab administrative and operational staff, the device serves two key purposes:

  • Enhances safety by ensuring only trained personnel operate machinery
  • Prevents unauthorized activation by any lab visitors

Importance and Benefits

Importance:

  • Safety: Reduces risks with dangerous equipment
  • Control: Enables effective usage monitoring
  • Prevention: Blocks unauthorized access

Benefits:

  • Personnel Protection: Ensures only certified operators
  • Real-Time Alerts: Instant admin notifications
  • User-Friendly: Intuitive fingerprint interface
  • Customizable: Adapts to various machines

This project not only improves FabLab safety but sets a new standard for responsible management of hazardous equipment in educational and manufacturing environments.



Website Development Justification

As a Systems Engineer and Developer, I created this website to showcase my weekly progress in the FabAcademy program. Using an HTML template with Bootstrap, CSS, and JavaScript allowed me to accelerate development while maintaining professional standards. My workflow was optimized through Visual Studio Code with preconfigured extensions and code snippets, enabling efficient content updates and version control integration.


Step-by-Step Website Setup Guide

1. Development Environment Setup

Tools: Visual Studio Code (VSCode) as primary editor
Productivity Boosters: Preconfigured code snippets -+nd extensions

2. Git Installation

  1. Launch VSCode and navigate to Version Control panel
  2. Follow prompts to install Git for 64-bit systems
  3. Complete installation and restart VSCode
    4. STEP 1
    STEP 2.1
    STEP 2.2
    STEP 3

3. Repository Cloning

  1. Select "Clone Repository" in the version control section, or use the easier option of cloning directly from your repository on GitLab.
  2. Access the FabLab Git repository by logging in with your FabLab credentials.
  3. Generate access token in Git account settings

    4. STEP 4
    STEP 5
    STEP 6

4. Access Token Configuration

  1. Create new token with read/write permissions.
  2. Go to your GitLab profile, click on the dropdown menu, and select "Clone" using HTTPS to avoid network blocks.
  3. Select the local folder where you want to clone the repository in VSCode.
  4. When prompted to authenticate, use your FabLab username and the previously generated token (created for this PC) to complete the process.
    5. STEP 7
    STEP 8
    STEP 9
    STEP 10

5. Final Setup

  1. I accepted the authors and verified that all files were cloned correctly.
  2. I opened the cloned HTML file to view the webpage.
  3. I verified the website's functionality and ensured everything was working as expected.
  4. I implemented modifications to the HTML template as needed.
  5. I configured custom code snippets to speed up development.
    6. STEP 11
    STEP 12
    STEP 13
    STEP 14
    STEP 15

6. Upload Changes to the Repository

  1. I staged the changes using git add . in the terminal or through VSCode's Source Control interface.
  2. I committed the changes with a descriptive message using git commit -m "Descriptive message here".
  3. I pushed the changes to the remote repository using git push origin main (replacing main with my branch name when necessary).
  4. I verified on GitLab that the changes were successfully uploaded.
    5. STEP 16
    STEP 17
    STEP 18
    STEP 19

Personal conclusions from this week

This week, I learned a lot by reinforcing several key skills—from cloning a repository and properly structuring a project to generating web pages using HTML, CSS, and JavaScript. Getting into the rhythm of the Fab Academy was a real challenge for me. Due to personal reasons, I initially started with complex templates, which slowed down my progress. However, as the days went by, I refined that template until I created a base that truly convinced me. Here are some tips that could have made my work easier from the beginning:

1)Choose a simpler template, preferably one based on Bootstrap. This allows for faster and more efficient page layout and structure.

2)Study Bootstrap (or any similar framework). It streamlines development so you can focus more on the weekly assignment than on web development itself.

3)Define a clear roadmap for how you will develop and document each week's assignment. In my case, the following structure helped me a lot:

3.1)Review the assignments in detail and understand the requirements and recommendations from the Fab Academy website.
3.2)Explore what previous students have done in other years and nodes.
3.3)Once I have all that input, I define what I need to do and how I can approach it. Then, I set my own objectives.
3.4)As I complete each objective, I document it in real time. Documentation is the most important part—trying to recall steps later is the worst.
3.5)Upload and update your website as soon as each goal is completed. It may seem like it slows down the process, but it's the best way to keep your documentation up to date and catch any issues early on.
3.6)Ask for feedback and support from your tutors. This will help you improve your work and ensure your page reflects your best version.

Some of these tips I discovered in later weeks. But as I mentioned in the last one—there’s always room for improvement, and that’s why I decided to enhance this week’s work.