SketchUp-materiaaliluettelo - BOM

HUOM: Tämä sivu on vielä pahasti keskeneräinen. Yritämme löytää aikaa sen viimeistelyyn. Pahoittelut :(

Kun piirtää rakennusrakenteiden malleja SketchUpilla, valintojen kustannusten selvittäminen vaatii yleensä yhden tai useamman manuaalisen vaiheen. Sitä ei tehdä piirtämisen aikana, vaan se jää jälkikäteen mietittäväksi. Kustannuserittelyn tai yhteenvedon saaminen on vaivalloista. Siksi päätimme rakentaa verkkokäyttöliittymän, taustajärjestelmän ja SketchUp-lisäosan, jotka automatisoivat materiaaliluettelon (BOM) luomisen SketchUp-malleista.

Haaste

Ratkaistavana oli:

• miten piirretty muoto yhdistetään tuotetyyppiin
• miten materiaalitiedot saadaan haettua
• miten valitaan, mitkä tuotteet otetaan mukaan materiaaliluetteloon ja mitkä jätetään pois
• miten materiaaliluettelo esitetään käyttäjälle
• miten käyttäjä voi valita, mitä materiaalilähteitä käytetään
• miten käyttäjä voi rakentaa omia materiaalilähteitä ja jakaa ne muiden käyttäjien kanssa
• miten materiaaliluettelo saadaan sujuvasti muutettua ostoslistaksi

Toteutus

Palapelin osat:

• Tekoälytyökalut:

  • Claude Code eri malleilla
  • Claude Design ja Google Sketch käyttöliittymäsuunnitteluun

• SketchUp-lisäosa:

  • Seuraa mallin muutoksia
  • Lähettää muutostapahtumat taustajärjestelmän rajapintaan
  • Vastaanottaa materiaaliluettelon tiedot
  • Näyttää materiaaliluettelon yhteenvedon SketchUp-ikkunassa

• BOM-taustajärjestelmä:

  • Node-sovellus
  • REST-rajapinta, OpenAPI.yaml julkaistu
  • Tallennus, tunnistautuminen ja käyttöoikeudet Supabasesta

• BOM-käyttöliittymä:

  • React-sovellus
  • Reaaliaikainen yhteys aktiiviseen SketchUp-malliin
  • Näyttää mallin tunnistetut osat, niiden hintatiedot, mitat jne.
  • Mahdollisuus luoda omia materiaalimäärityksiä ja hintatietoja
  • Ylläpitäjien hallintakäyttöliittymä

• Ympäristöt, ajoympäristö ja laadunvarmistus:

  • Lähdekoodi GitHubissa
  • Kontti: monivaiheinen Docker-build, node:24-alpine
  • Tehtävät GitHub-issueina
  • Tekoälyagentin integraatio GitHub-issueihin
  • CI/CD: GitHub Actions
  • Hosting Fly.io:ssa (tuotanto, staging ja PR-ympäristöt)
  • Paikallinen kehitys: OrbStack (Docker)
  • Tietokanta Supabasessa
  • Testit: Vitest ja Playwright E2E
  • Dokumentaatiosivusto luodaan automaattisesti määrittelyjen ja automaattitestien pohjalta

Tulokset

Materiaaliluettelon muuttuminen reaaliajassa piirtämisen aikana on todella hienoa ja koukuttavaa. Materiaalilähteitä voi vaihtaa ja kustannuksia vertailla. Ostoslistan voi luoda ja ottaa mukaan puhelimella tai tulostaa vanhaan tapaan paperille.

Projekti on käytännössä loputon uusien ideoiden lähde, ja jätämme kymmeniä ominaisuuspyyntöjä tekoälyn muutettaviksi pull requesteiksi! Odotamme innolla valmiin tuotteen julkaisemista yksityiskohtineen!