Fullstack webová aplikácia na správu filamentov do 3D tlačiarne

Aplikácia umožňuje vytvoriť zoznam filamentov a následne v ňom upravovať, pridávať a odoberať filamenty
Navyše aplikácia generuje pre filamenty štítky s QR kódami, ktoré po naskenovaní umožňujú jednoducho spravovať dané filamenty

Obsah

• Filamenty
  • Použité technológie
  • Požiadavky a spúštanie aplikácie
  • Databáza
    • Štruktúra tabuľky filaments
      • Príklad záznamov
  • API
    • GET http://localhost:5000/api/
    • GET http://localhost:5000/api/filaments/
    • POST http://localhost:5000/api/filaments/
    • GET http://localhost:5000/api/filaments/<int:id>/
    • PUT http://localhost:5000/api/filaments/<int:id>/
    • DELETE http://localhost:5000/api/filaments/<int:id>/
    • GET http://locahost:5000/api/filaments/random/
    • GET http://locahost:5000/api/info/
  • Použité zdroje

• Backend
  • Python - Hlavný programovací jazyk
  • Flask - Webový framework na vytvorenie API a obsluhu požiadaviek
  • SQLite - Databáza na uchovávanie informácií o filamentoch
  • qrcode - Python knižnica na generovanie QR kódov
• Frontend
  • React a JavaScript - Tvorba dynamického používateľského rozhrania
  • Tailwind CSS - CSS framework na vizuálne formátovanie webovej aplikácie
  • Axios - Vykonávanie HTTP požiadaviek
• Ostatné
  • Docker a docker-compose - Kontajnerizácia pre jednoduchšie nasadenie aplikácie

1. Klonovanie Git repozitára
   • Repozitár je verejne dostupný na GitHub
   • Uistite sa, že máte nainštalovaný git, a spustite nasledovný príkaz
     • git clone https://github.com/cyprich/filamenty filamenty
   • Následne sa presuňte do priečinku klonovaného repozitára
     • cd filamenty
2. Inštalácia potrebných balíčkov
   • docker
   • docker-compose
   • Konkrétny príkaz na inštaláciu balíčkov závisí od vašej Linux distribúcie, napr.:
     • sudo apt install docker docker-compose pre Ubunutu-based distribúcie
     • sudo pacman -Syu docker docker-compose pre Arch-based distribúcie
3. Spustenie systémových procesov pre Docker
   • sudo systemctl start docker
   • sudo systemctl enable docker - nepovinné - automaticky spustí proces pri bootovaní zariadenia
4. Pridanie používateľa do skupiny docker
   • sudo usermod -aG docker ${USER}
5. Používateľ sa musí odhlásiť a znova prihlásiť pre aplikovanie zmien
6. Inicializácia pred prvým spustením na novom zariadení
   • Inicializáciu je možné vykonať spustením súboru init.sh príkazom ./init.sh
   • Vykonávajú sa tieto 2 kroky:
     • Nastavenie IP adresy
       • Zistite IP adresu vášho zariadenia cez GUI (v nastaveniach) alebo pomocou príkazu ip -c address
       • IP adresa by mala vyzerať nejak takto: 192.168.1.100
     • Nepovinné - naplnenie databázy počiatočnými hodnotami
       • Pozor! - spustenie súboru vymaže všetky údaje v terajšej databáze bez možnosti návratu!
       • Na spustenie súboru je potrebné mať nainštalovaný balíček python3
7. Spustenie aplikácie pomocou súboru run.sh
   • ./run.sh
8. Príkazový riadok nechajte otvorený
9. Aplikáciu zobrazíte vo webovom prehliadači na adrese http://vaša_IP_adresa:3000 alebo http://localhost:3000
10. Pre zastavenie aplikácie použite klávesovú skratku ctrl + c v príkazovom riadku

• Stĺpec id je primárny kľúč databázy
• Kombinácia stĺpcov vendor, material a color_hex je unikátna (v databáze nemôžu existovať dva filamenty s rovnakým výrobcom, materiálom a farbou)

Base URL: http://localhost:5000/api/

Vráti uvítaciu správu od backendu

Response

{
  "message": "Hello from backend!"
}

Vráti informácie o všetkých filamentoch

Response

{
{
  "filaments": [
    {
      "color_hex": "#111",
      "color_second_hex": null,
      "id": 1,
      "image_url": "http://192.168.1.10:5000/api/images/filaments/1.png",
      "material": "PLA",
      "price": 29.99,
      "temp_bed_max": 65,
      "temp_bed_min": 45,
      "temp_max": 230,
      "temp_min": 190,
      "vendor": "Bambu Lab",
      "weight": 0,
      "weight_orig": 1000,
      "weight_spool": 250
    },
    {
      "color_hex": "#c12e1f",
      "color_second_hex": null,
      "id": 2,
      "image_url": "http://192.168.1.10:5000/api/images/filaments/2.png",
      "material": "PLA",
      "price": 29.99,
      "temp_bed_max": 65,
      "temp_bed_min": 45,
      "temp_max": 230,
      "temp_min": 190,
      "vendor": "Bambu Lab",
      "weight": 290,
      "weight_orig": 1000,
      "weight_spool": 250
    }
  ]
}
}

Pridá nový filament do databázy

Body (form data)

vendor: "ABC"
material: "XYZ"
price: "19.99"
color_hex: "#ffffff"
weight: "500"
weight_orig: "1000"
weight_spool: "250"
temp_min: "200"
temp_max: "220"
temp_bed_min: "50"
temp_bed_max: "60"
image: <file>

Response

{
  "filaments": {
    "color_hex": "#ffffff",
    "color_second_hex": null,
    "id": 3,
    "image_url": "http://192.168.1.10:5000/api/images/filaments/3.png",
    "material": "XYZ",
    "price": 19.99,
    "temp_bed_max": 60,
    "temp_bed_min": 50,
    "temp_max": 220,
    "temp_min": 200,
    "vendor": "ABC",
    "weight": 500,
    "weight_orig": 1000,
    "weight_spool": 250
  }
}

Vráti informácie o konkrétnom filamente na základe id

Response

{
  "filaments": {
    "color_hex": "#73bab5",
    "color_second_hex": null,
    "id": 4,
    "image_url": "http://192.168.1.10:5000/api/images/filaments/4.png",
    "material": "PLA+",
    "price": 23.9,
    "temp_bed_max": null,
    "temp_bed_min": 60,
    "temp_max": 210,
    "temp_min": 190,
    "vendor": "Filament PM",
    "weight": 870,
    "weight_orig": 1000,
    "weight_spool": 216
  }
}

Aktualizuje informáciu o konkrétnom filamente na základe id

Body (JSON)

{
  "key": "weight",
  "value": "199"
}

Response

{
  "filaments": {
    "color_hex": "#111111",
    "color_second_hex": null,
    "id": 1,
    "image_url": "http://192.168.1.10:5000/api/images/filaments/1.png",
    "material": "PLA",
    "price": 29.99,
    "temp_bed_max": 65,
    "temp_bed_min": 45,
    "temp_max": 230,
    "temp_min": 190,
    "vendor": "Bambu Lab",
    "weight": 199,
    "weight_orig": 1000,
    "weight_spool": 250
  }
}

Vymaže konkrétny filament na základe id

Response

{
  "filaments": {
    "color_hex": "#111111",
    "color_second_hex": null,
    "id": 1,
    "image_url": "http://192.168.1.10:5000/api/images/filaments/1.png",
    "material": "PLA",
    "price": 29.99,
    "temp_bed_max": 65,
    "temp_bed_min": 45,
    "temp_max": 230,
    "temp_min": 190,
    "vendor": "Bambu Lab",
    "weight": 199,
    "weight_orig": 1000,
    "weight_spool": 250
  }
}

Vráti informácie o filamente

Response

{
  "filaments": {
    "color_hex": "#111111",
    "color_second_hex": null,
    "id": 1,
    "image_url": "http://192.168.1.10:5000/api/images/filaments/1.png",
    "material": "PLA",
    "price": 29.99,
    "temp_bed_max": 65,
    "temp_bed_min": 45,
    "temp_max": 230,
    "temp_min": 190,
    "vendor": "Bambu Lab",
    "weight": 199,
    "weight_orig": 1000,
    "weight_spool": 250
  }
}

Vráti všeobecné informácie of filamentoch v databáze

Response

{
  "filament_count": 15,
  "ids": [2, 4, 6, 7, 8],
  "invalid_ids": [1, 3, 5]
}

Upozornenie

Tento repozitár obsahuje moje riešenia zadaní, prípadne semestrálnej práce
Kód je zverejnený výhradne na vzdelávacie účely ako inšpirácia pre ostatných
Použitie tohto kódu na odovzdanie ako vlastné riešenie (plagiátorstvo) je prísne zakázané a môže viesť k disciplinárnym opatreniam
Ak si z tohto repozitára beriete inšpiráciu, uistite sa, že rozumiete riešeniam a vytvorte si vlastnú implementáciu
Autor nenesie zodpovednosť za akékoľvek následky vyplývajúce z nesprávneho použitia tohto materiálu, vrátane prípadných obvinení z plagiátorstva