Assignment 1 objective


The first week assignment consists two phases:

  1. Project Mangment: Get introduced to the basics of web development by building our personal website and customise it. A detailed description should be included in the webpage to illustrate the steps needed to develop the page and upload it to the class archive. Attaching pictures is highly recommended to demonstrate the process of creating and customizing the website.

  2. Principles and Practices: Create a final project page where to plan and sketch the potential final project idea. A detailed description of the final project should be included as well as uploading pictures and sketches on the webpage.


  1. Project Management


  1. Introduction To HTML and CSS :

    During the local session provided by our colleague Eng. Areej, a full introduction about HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets) was provided.
    Basically HTML is a computer language invented to allow website creation. It provides the structure of the page and it can be viewed by anyone connected to the internet.On the other hand CSS is a style sheet language used to describe how HTML are displayed on the screen.
    CSS enables the content (HTML) to be presented in an accessible way where the developer can control the layout, color and fonts.


To learn more about HTML, W3school website helped in providing simple practical examples. As shown the below example explains the general format of HTML documents such as applying:

  • Tile to the website using (title Text /title).
  • Ordered List numbered (ol list of text /ol).
  • Type of heading such as: (h1 Text/h1).

    • The idea behind my final project is to devolop a smart solution to utilize the fablab machines in Safe, controlable and easy way .

    In addition to the photo uploading and size controlling. Below shown a method of how to upload a picture in the website using the (img scr= “Link of Photo”) and photo size controlling by adding (img scr= “Link of Photo” width=”XX” height=”YY”)

      2. Setup GetLab and Git bash :

      Gitlab is a service that provides remote access to Git repositories. The service provides features designed to help manage the software development.

        a. First step was to login to the GetLab account provided by the fabacademy
        b. Then create a new file and follow the steps shown below.


      c. Third step was to download and set up Git bash.
    Basically Git bach is an application for Microsoft Windows environments which provide a linkage between the local server to the public online website. One of the important steps is to generate SSH (secure socket shell) key through Git bash. SSH key can be used to establish a secure connection between gitlan operations and the local machine.


    As shown in the picture below, the steps to extract the SSH key from the local machine


    Once the SSH key is generated, a copy of the key is taken and added to the user GitLab which is achraf.benjamaa. Check below steps



    Completing this previous step will ensure to the user a secure connection between GitLab and the local machine. However a final procedure should be made to create a clone of the git repository in the local folder, in which all the information will be pushed from.

      a.First step was to create a local folder called NEW_WEBSITE.
      b.Second, go to Gitbash apply Cd (change directory command): Cd Desktop/NEW_WEBSITE
      c. Third, Copy the cole as shown below


      d. Fourth, apply Git clone commend in git bash: Git clone "paste the link copied".

      3. Setup Brackets and web development :

      Brackets is an open source software development platform that provides an easy method to edit text and design in the browser. It's crafted from the ground up for web designers and front-end developers. Brackets software is created by Adobe Systems and licensed under the MIT License.
      That being said brackets software have been utilized to develop the fab academy website, since it provides an easy method of web development with a great feature that gives a live preview of all modifications that occurred in the HTML and CSS code.

    After setting up Brackets app, a ready website template was downloaded from the bootstrap website.
    Bootstrap provides a variety of free websites templates ready to be downloaded and easy to modify by the user.
    It is very important to save the downloaded template in the cloned master folder with GitLab, in this case its Cd Desktop/NEW_WEBSITE as shown previously.

      4. Uploading the master file to the gilab :

      The last step to be able to launch the website, is to push the files in the working directory to the repository by using the following commands.

        a. cd your file location (Master) // in my case Cd Desktop/NEW_WEBSITE.
        b. git add -A: this will add all the files in the directory.
        c. git commit -m ”anything” : this command will just add a title for the updating operation.
        d. git push : this command will push all files added in the first command to your GITLab account.



      II. principle and practices


      1. Project Idea
    For the final project, I decided to work on a solution that is relevant to what I am facing in the fablab machines operation and other labs that I have been working in. I want my project to be beneficial to the fablab network and bring an added value to the workspace.
    The idea started when QBIC Fablab instructors faced difficulties tracking the use of machines, especially the CNC and Laser Cutter machine. Some users would access the lab and attempt to use the machines without the permission and supervision of the lab technician.
    According to QBIC fablab rules and regulations, users are not allowed to operate the fabrication machines without the supervision of the lab technicians/instruction, only if the user has a certain level of experience gained through workshops. Commitment to this policy is very crucial since it guarantees the safety of QBIC Fablab members as well as the long life running of machines.

      2. Motivation and Objective
    The goal of this project is to design a Smart Iot device that has the ability to keep track of the use of machines, as well as to give permission to the user to operate the machine based on his membership qualifications.
    The project should solve the problem of the lack of machine operation tracking. As well as increase safety precaution in the workspace. The designed system will record the user information and alerts the fablab technician/instructor in case of not allowed users.In this project, the ability of applying engineering knowledge will be demonstrated by designing a system that will allow the achievement of the goals set. The design will be made by using Solidworks for the 3D modeling and involve fabrication machines as well as programming and electronics design.

      3. Preliminary design and Methodology
    In this section, a detailed description about the preliminary composition of each component in the designed device is presented. Furthermore, in this part the methodology of prototyping the device will be explained. The IoT smart device consists of a different electronics list including Wifi-enabled NodeMCU board, Arduino Nano Board, RFID reader, LCD screen, speaker, 5V USB power cable and Solderable breadboard. as shown in the figure below.


    The initial prototype is estimated to have following items:

    Hardware requirement:

      - Wifi-enabled NodeMCU board: contolong the device through application/software
      - Arduino Nano Board: Microcontroller
      - 3D Printer: Fabricating the device frame
      - RFID reader: Membership scanning
      - LCD screen: Information display
      - Speaker: Alert release
      - Relay: Control machine power (On/Off)
      - 5V USB power cable and Solderable breadboard
    Software requirement:

      - Arduino IDE
      - Blynk android application: IoT use
      - Solidworks: 3D Modeling



    Copyright © Your Website 2019