Webbaserad Husdesign Applikation

En komplett guide för att skapa, rendera och deploya med Docker Compose

Viktiga Insikter och Nyckelpunkter

Frontend, Backend & 3D-rendering: Separat hantering via React, Node.js/Express och Three.js för att fånga användarens input och rendera husmodellen.
Containerisering med Docker Compose: Använd Docker Compose för att orkestrera applikationen med väldefinierade tjänster och nätverk.
Deployment på Linux: Kopiera filerna till din Linux-server och bygg upp applikationen med några enkla kommandon.

Översikt och Projektstruktur

Denna guide beskriver steg för steg hur du skapar en webbaserad applikation för att designa hus exteriört. Användaren kan ange mått, färg och andra designparametrar via ett interaktivt formulär. Applikationen använder sedan dessa parametrar i en 3D-visualisering av huset. Lösningen använder en React-baserad frontend, en Node.js/Express-baserad backend och Three.js för att rendera 3D-modellen av huset. Allt detta körs på en Linux-server med Docker Compose som hanterar de olika tjänsterna.

Översikt av Projektstrukturen

Projektet organiseras enligt följande struktur:

Directory / Fil	Beskrivning
docker-compose.yml	Huvudfilen som orkestrerar applikationstjänsterna.
frontend/	Innehåller React-applikationen och Dockerfile för frontend.
backend/	Innehåller Node.js/Express backend med API för att ta emot designdata samt Dockerfile för backend.
nginx/ (valfritt)	Innehåller Nginx-konfiguration för eventuellt omvänd proxy om du vill samla frontend och backend bakom samma endpoint.

Detaljerad Implementationsguide

Steg 1: Projektplanering och Miljökrav

Innan vi börjar med koden är det viktigt att definiera applikationens krav:

Frontend: Ett interaktivt gränssnitt byggt med React där användaren anger mått (t.ex. bredd, höjd, längd), färgval och andra relevanta parametrar.
Backend: En Node.js/Express-applikation som tar emot användardata från frontend, validerar den och skickar tillbaka en JSON-struktur med de mottagna parametrarna. Här kan logiken också utvidgas för att göra mer avancerad datahantering och eventuellt förbereda data för rendering.
3D-rendering: Använd Three.js i frontend för att rita ut en modell av huset baserat på användarens inmatade värden. Detta kan utvidgas för att inkludera kamerakontroller, texturer och andra visuella förbättringar.
Containerisering: Använd Docker och Docker Compose för att bygga och köra separata containrar för både frontend och backend. Det säkerställer att applikationen är plattformsoberoende och enklare att deploya på en Linux-server.

Steg 2: Skapa Frontend med React och Three.js

Frontend – Projektstart

För att skapa frontend-delen rekommenderas ett standard React-projekt. Du kan börja med att använda Create React App:


# Öppna terminalen och navigera till din projektmapp
npx create-react-app frontend

När projektet är skapat, navigera in i frontend-mappen och installera även Three.js:


cd frontend
npm install three axios

Uppdatera koden i src/App.js

Ersätt innehållet i src/App.js med följande kod. Denna kod skapar ett formulär där användaren kan ange husets dimensioner och färg. Vid formulärsubmittal skickas data till backend och en 3D-modell renderas via Three.js.


// Importera nödvändiga bibliotek
import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import * as THREE from 'three';

// Huvudkomponenten för husdesign
function App() {
  // Tillstånd för dimensioner och färg
  const [dimensions, setDimensions] = useState({
    bredd: 10,
    höjd: 5,
    längd: 15
  });
  const [färg, setFärg] = useState('#FF5733'); // Standardfärg
  const canvasRef = useRef(null);

  // Hantera ändringar i formuläret
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setDimensions(prev => ({
      ...prev,
      [name]: Number(value)
    }));
  };

  const handleColorChange = (e) => {
    setFärg(e.target.value);
  };

  // Skicka designdata till backend vid submit
  const handleSubmit = (e) => {
    e.preventDefault();
    axios.post('http://localhost:5000/render', {
      ...dimensions,
      färg: färg
    })
    .then(response => {
      console.log('Data från backend:', response.data);
    })
    .catch(error => {
      console.error('Fel vid anrop:', error);
    });
  };

  // Three.js: Initiera scenen med husrepresentation
  useEffect(() => {
    const canvas = canvasRef.current;
    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.z = 30;
    
    // Skapa en box som representerar huset baserat på dimensioner och färg
    const geometry = new THREE.BoxGeometry(dimensions.bredd, dimensions.höjd, dimensions.längd);
    const material = new THREE.MeshBasicMaterial({ color: färg });
    const hus = new THREE.Mesh(geometry, material);
    scene.add(hus);
    
    // Enkel animeringsloop
    const animate = function() {
      requestAnimationFrame(animate);
      hus.rotation.y += 0.01;
      renderer.render(scene, camera);
    };
    
    animate();
    
    // Hantera fönsterändringar
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  }, [dimensions, färg]); // Rerender vid ändring av dimensioner eller färg

  return (
    <div>
      <h2 style={{color: "#cc9900"}}>Designa Ditt Hus</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Bredd: </label>
          <input type="number" name="bredd" value={dimensions.bredd} onChange={handleInputChange} />
        </div>
        <div>
          <label>Höjd: </label>
          <input type="number" name="höjd" value={dimensions.höjd} onChange={handleInputChange} />
        </div>
        <div>
          <label>Längd: </label>
          <input type="number" name="längd" value={dimensions.längd} onChange={handleInputChange} />
        </div>
        <div>
          <label>Färg: </label>
          <input type="color" name="färg" value={färg} onChange={handleColorChange} />
        </div>
        <button type="submit">Rendera Hus</button>
      </form>
      <br />
      <canvas ref={canvasRef} style={{border: '1px solid #000'}} />
    </div>
  );
}

export default App;

Steg 3: Skapa Backend med Node.js/Express

Backend – Projektuppsättning

Skapa en mapp som heter backend i din projektrot. I den mappen initierar du ett nytt Node.js-projekt och installerar Express.


# Skapa backend-projekt och initiera npm
mkdir backend
cd backend
npm init -y
npm install express cors

Backend – index.js

Skapa en fil med namnet index.js i backend-mappen och lägg in följande kod. Denna kod skapar ett API som tar emot POST-anrop med designdata och svarar med samma värden, vilket kan utvidgas med mer avancerad logik.


// Importera Express och CORS
const express = require('express');
const cors = require('cors');
const app = express();
const port = 5000;

// Middleware för JSON-parsing och CORS-hantering
app.use(express.json());
app.use(cors());

// POST-endpoint för att ta emot designdata
app.post('/render', (req, res) => {
  const { bredd, höjd, längd, färg } = req.body;
  console.log('Mottagen data:', req.body);
  
  // Här kan du lägga till logik för att hantera data, spara i en databas eller förbereda rendering
  const husData = {
    bredd,
    höjd,
    längd,
    färg
  };
  res.json({ status: "success", data: husData });
});

// Starta servern
app.listen(port, () => {
  console.log(`Backend körs på port ${port}`);
});

Steg 4: Skapa Dockerfiler

För att containerisera både frontend och backend skapar vi separata Dockerfiler och en Docker Compose-fil för att hantera tjänsterna.

Dockerfile för Frontend

I mappen frontend skapar du en fil vid namn Dockerfile med följande innehåll:


# Använd officiell Node.js-bild som bas
FROM node:14

# Ställ in arbetskatalog
WORKDIR /app

# Kopiera package.json och package-lock.json
COPY package*.json ./

# Installera beroenden
RUN npm install

# Kopiera resten av applikationskoden
COPY . .

# Bygg React-applikationen
RUN npm run build

# Exponera port 3000
EXPOSE 3000

# Starta applikationen
CMD ["npm", "start"]

Dockerfile för Backend

I mappen backend skapar du en fil med namnet Dockerfile med följande innehåll:


# Använd officiell Node.js-bild
FROM node:14

# Ange arbetskatalog
WORKDIR /app

# Kopiera package.json och package-lock.json
COPY package*.json ./

# Installera nödvändiga beroenden
RUN npm install

# Kopiera backend-koden
COPY . .

# Exponera port 5000
EXPOSE 5000

# Starta backend-servern
CMD ["node", "index.js"]

Steg 5: Skapa och Konfigurera Docker Compose

I projektets rot (samma mapp som innehåller mappen frontend och backend) skapar du en fil som heter docker-compose.yml med följande konfiguration:


version: '3.8'
services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    depends_on:
      - backend

  backend:
    build: ./backend
    ports:
      - "5000:5000"

Docker Compose-konfigurationen definerar två tjänster: frontend och backend. Tjänsten frontend bygger React-applikationen och exponerar port 3000, medan backend bygger Node.js/Express-applikationen och exponerar port 5000.

Steg 6: Deployment på din Linux-server

När alla filer har skapats och placerats i rätt mappstruktur, överför filerna till din Linux-server. På servern navigerar du till projektets rotmapp (där docker-compose.yml finns) och bygg sedan applikationens containrar med följande kommandon:


# Gå till projektmappen
cd /path/till/ditt/projekt

# Bygg och starta applikationen med Docker Compose
docker-compose up --build -d

Efter att kommandot har körts kan du komma åt applikationen i din webbläsare på http://server-ip:3000. När applikationen startar visas React-gränssnittet där användaren kan ange mått, färg och skicka in formuläret för att rendera huset. Backend-processen kommunicerar med frontend och hanterar API-anrop för att bekräfta att datan är mottagen och redo för vidare rendering med Three.js.

Ytterligare Förbättringar och Funktionalitet

Integrera Nginx som Revers Proxy (Valfritt)

För att samla både frontend och backend under samma domän med en omvänd proxy kan du använda Nginx. Skapa en mapp vid namn nginx i din projektrot och skapa en fil nginx.conf med följande innehåll:


events {
    worker_connections 1024;
}

http {
    upstream frontend {
        server frontend:3000;
    }

    upstream backend {
        server backend:5000;
    }

    server {
        listen 80;

        location / {
            proxy_pass http://frontend;
        }
        
        location /api {
            proxy_pass http://backend;
        }
    }
}

Om du vill inkludera Nginx i Docker Compose kan du lägga till en extra tjänst i docker-compose.yml:


  nginx:
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
    depends_on:
      - frontend
      - backend

Detta är särskilt användbart om du vill att din lösning ska vara åtkomlig via standardporten 80 och om du vill hantera HTTPS, lastbalansering, säkerhetsrutiner med mera.

Utökade Funktioner och Anpassningar

Det finns flera sätt att utöka funktionaliteten i din applikation:

Spara designhistorik: Du kan integrera en databas (t.ex. PostgreSQL eller MySQL) för att spara användardesign och möjliggöra återanvändning eller analys.
Anpassade 3D-renderingsalternativ: Utveckla mer avancerade 3D-miljöer med Three.js, inklusive texturer, ljussättning och kamerarörelser för att skapa en realistisk rendering av huset.
Användarautentisering: Implementera inloggning och sessionshantering för att låta användare spara och ladda sina designprojekt.
Responsiv design: Säkerställ att applikationen fungerar på olika enheter genom att optimera användargränssnittet med responsiva layouter och anpassade CSS-stilar.

Översikt av Filer och Mappstruktur

För att tydliggöra fil- och mappstrukturen för projektet har vi sammanställt en översikt nedan:

Fil/Mapp	Beskrivning
docker-compose.yml	Orkestrerar samtliga tjänster: frontend, backend (och eventuellt nginx).
frontend/	Innehåller React-applikationen med: Dockerfile package.json src/App.js (huvudkomponenten för husdesignen)
backend/	Innehåller Node.js/Express API med: Dockerfile package.json index.js
nginx/	(Valfritt) Innehåller Nginx-konfigurationsfilen för omvänd proxy.

Testning och Felsökning

Hur man testar applikationen

När du har byggt och deployat applikationen med Docker Compose på din Linux-server gör du följande:

Frontend-test: Navigera till http://server-ip:3000 (om du inte använder Nginx) eller http://server-ip (om Nginx används via port 80) för att se din React-applikation.
Formulärfunktion: Ange husets mått och färg och klicka på knappen "Rendera Hus". Kontrollera webbläsarens konsol för meddelanden om att data skickats till backend.
Backend-logg: Logga in på din Linux-server och kör docker-compose logs backend för att verifiera att backend mottog och bearbetade anropet.

Genom att kombinera loggkontroller och webbläsarbaserad feedback säkerställer du att komponenterna kommunicerar korrekt.

Avancerade Anpassningar

Utvidgning av Rendering med Three.js

För att öka realism och interaktivitet i den 3D-rendering som görs med Three.js kan du överväga:

Lägga till ljussättning och skuggor med THREE.DirectionalLight, THREE.AmbientLight och andra ljuskällor.
Implementera kamerakontroller med THREE.OrbitControls för att låta användare rotera och zooma in på husmodellen.
Integrera texturer och material för att ge husets ytor en realistisk känsla.
Lägg till möjligheten att spara och återanvända designdata, antingen via lokal lagring eller genom en databas bakom backend.

Konklusion

Sammanfattningsvis har vi genom denna guide skapat en heltäckande webbaserad applikation för design av hus exteriört. Applikationen tillåter användaren att mata in dimensioner, färg och andra designattribut. Dessa parametrar skickas via ett formulär till en backend byggd med Node.js/Express, och en 3D-modell renderas dynamiskt med Three.js i en React-applikation. Lösningen har containeriserats med Docker och orkestrerats med Docker Compose för enkel deployment på en Linux-server.

Instruktionerna inkluderar en detaljerad projektstruktur där frontend- och backend-komponenterna hanteras separat, vilket möjliggör framtida utvidgningar som databasintegration, förbättrad 3D-rendering och säkerhetsfunktioner som autentisering. Även en valfri Nginx-konfiguration beskrivs för att hantera omvänd proxy och sammanföra tjänsterna under en enda domän.

Genom att följa denna guide bör du kunna bygga, testa och deploya din applikation med relativt enkelhet. Varje sektion har noggrant strukturerats för att tydliggöra implementationen och ge möjligheter till framtida utbyggnader.