Das könnte dich auch interessieren: DIY Powerbank mit Spannungsregler und Voltmeter

Montageplanung und Materialwahl

Bevor ich mit dem Bau beginne, überlege ich mir zunächst, wo die Solarpanels montiert werden sollen: Eins am Gartenschuppen, zwei am Balkongeländer,  und eines am Mast der Wetterstation.

Am Gartenschuppen steht eine gerade Holzwand zur Verfügung, was einen flachen Halter erforderlich macht. Das Balkongeländer sowie der Mast hingegen haben jeweils einen Durchmesser von 30 mm – hier ist ein Halter mit Rundung notwendig. Aktuell benötige ich also zwei unterschiedliche Befestigungstypen.

Als Solarpanel verwende ich ein monokristallines 2-Watt-Modul mit etwa 6 V Ausgangsspannung (siehe Bild 1.0.1). Für den elektrischen Anschluss am Panel habe ich mich für eine Standard-Hohlbuchse mit 5,5×2,1 mm entschieden (siehe Bild 1.0.2). Kabel und Schrauben sind in der Darstellung nicht enthalten, da sie je nach Anwendung variieren können. Die Panels sind im Fünfer- oder Zehnerpack bei diversen Onlinehändlern erhältlich. Ihre Abmessungen betragen 120 × 110 mm (Länge × Breite), wobei die Höhe zwischen 1,3 mm und 1,8 mm schwanken kann.

Konstruktion des Gehäuses

Das zentrale Bauteil für die Solarpanelhalterung ist der Rahmen. Er übernimmt sowohl die Stabilität als auch die Dichtfunktion des Gehäuses. Der Rahmen muss verwindungssteif sein, alle notwendigen Gewinde aufnehmen können und dabei dennoch kompakt bleiben. Das Solarpanel wird von hinten mit Leisten in seinen Sitz gepresst, sodass es an der Vorderseite dicht abschließt.
Um einen gleichmäßigen Anpressdruck zu erzeugen, sind mehrere Schrauben notwendig (siehe Bild 2.0.1).

Auf der Rückseite befindet sich ein Deckel (Bild 2.0.2), der zur Stabilität in X-Form verstärkt ist. Dieser Deckel nimmt außerdem die Hohlbuchse (5,5 × 2,1 mm) auf, die später mit einer kleinen Brücke befestigt wird. Eine der insgesamt vier Anpressleisten, die das Panel in den Rahmen drücken, ist in Bild 2.0.3 zu sehen. Zur Befestigung an Geländern oder Wänden kommt der Gelenkhalter (Bild 2.0.4) zum Einsatz. Dieser dient als Aufnahme für den Haltehebel, der das Gehäuse sicher fixiert und eine flexible Ausrichtung ermöglicht.

Auf Bild 2.1.1 ist der Halte Arm zur Geländer Befestigung angezeigt mit einem 30mm Durchmesser am Ende. Das Gegenstück für den Halter sieht man auf Bild 2.1.2. Die Brücke (Bild 2.1.3) zum Befestigen der Hohlbuchse am Deckel.

3D-Druck der Bauteile

Für den 3D-Druck habe ich folgende Druckausrichtungen für den Prusa MK4 gewählt (siehe Bild 3.0.1 und 3.0.2).
Besonders wichtig: Die Leiste muss natürlich viermal gedruckt werden, da sie an allen vier Seiten des Solarpanels zum Einsatz kommt.

Gewindeschneiden

Kommen wir nun zu meiner Lieblingsbeschäftigung: dem Gewindeschneiden. Zugegeben – gerade im Rahmen gibt es einiges zu tun (siehe Bild 3.1.1): Die grünen Markierungen zeigen 12× M3-Gewinde, die gelben 4× M3-Gewinde an.

Für alle, die nicht zu den größten Fans des Gewindeschneidens zählen, gibt es eine alternative Variante des Rahmens. Dieser ist mit Schlitzen zur Aufnahme von normalen M3-Muttern ausgestattet. Die passende Datei trägt den Namen: Deckel110x120_V1-2.stl (siehe Bild 3.1.3).
Die Vertiefungen für die Muttern sind zusätzlich in Bild 3.1.4 und 3.1.5 gut zu erkennen.

Beim Rückendeckel (Bild 3.1.2) lässt sich das Schneiden von Gewinden allerdings kaum vermeiden: Hier sind 3× M3-Gewinde und 2× M2-Gewinde notwendig.
Alternativ können jedoch auch selbstschneidende Schrauben verwendet werden – das spart Werkzeuge und Zeit.

Verlöten und Montage

Wenn alle 3D-Druckteile gereinigt und mit Gewinden versehen sind, kann das Solarpanel angeschlossen und verlötet werden.

Elektrische Anschlüsse

Die erste Hürde besteht darin, herauszufinden, wo sich der Pluspol am Panel befindet.
Auf der Rückseite des Solarpanels befinden sich lediglich zwei Lötlaschen, aber keine Kennzeichnung – also: Plus oder Minus? Um das schnell und eindeutig festzustellen, benötigen wir ein Multimeter. Stellen wir es auf Gleichspannungsmessung (DC) ein, hilft es uns, die Polarität zu erkennen.

Im Bild 4.0.1: Die rote Leitung (Plus) des Multimeters liegt auf einer der Lötlaschen, die schwarze Leitung (Minus) auf der anderen. Erscheint nun im Display ein Minuszeichen vor dem Messwert, bedeutet das, dass die rote Leitung am Minuspol liegt – also ist die gegenüberliegende Lasche der Pluspol des Solarpanels.

Im Bild 4.0.2 sehen wir die umgekehrte Konfiguration: Die rote Leitung liegt auf dem Pluspol des Panels, die schwarze Leitung auf dem Minuspol. In diesem Fall erscheint kein Minuszeichen im Display – die Polarität stimmt,
und wir wissen nun sicher, wo der Pluspol des Solarpanels ist.

Jetzt wird die Hohlbuchse mit dem Solarpanel verlötet. Welche Anschlüsse dabei verbunden werden müssen, zeigt Bild 4.1.1 deutlich.
Im Bild 4.1.2 sieht man die fertige Verlötung im eingebauten Zustand.

Zusätzlich habe ich am Pluspol der Hohlbuchse eine Diode angelötet (siehe Bild 4.1.3).
Diese schützt vor Rückstrom: Sollte am angeschlossenen Verbraucher keine eigene Schutzdiode vorhanden sein, würde das Solarpanel im Dunkeln Energie aus dem Akku ziehen – und ungewollt als Heizung arbeiten.

Ein typisches Beispiel:
Wenn ein Laderegler keine integrierte Diode besitzt, kann der Akku das Panel bei fehlendem Sonnenlicht rückwärts entladen.

Die Einbaurichtung der Diode ist entscheidend, damit der Strom nur in eine Richtung fließen kann.

Montage der Hohlbuchse und Einsetzen des Panels

Die Montage der verlöteten Hohlbuchse an der Haltebrücke ist in Bild 4.2.1 dargestellt.
Dazu wird die Hohlbuchse in die große Öffnung der Haltebrücke geschoben, bis das Gewinde auf der anderen Seite herausragt. Anschließend wird die Mutter auf das Gewinde gesetzt und festgezogen – das Ergebnis zeigt Bild 4.2.2. Nun wird das Solarpanel in den Haltesitz des Rahmens eingesetzt (siehe Bild 4.2.3, roter Rahmen).
Wer die Dichtigkeit erhöhen möchte, kann vor dem Einsetzen des Panels etwas elastischen Kleber gleichmäßig in den Sitz auftragen. Sitzt das Solarpanel korrekt, wird die erste Leiste aufgesetzt und mit einer Schraube in der Mitte leicht angezogen (siehe Bild 4.2.4, magenta Kreis). Zur Veranschaulichung nochmal eine Seitenansicht in Bild 4.2.5.

Befestigung der Leisten und Verschraubung

Nach und nach werden die restlichen Leisten jeweils mit der Schraube in der Mitte angebracht (siehe Bild 4.3.1). Anschließend werden die restlichen Schrauben eingesetzt, aber noch nicht fest angezogen (siehe Bild 4.3.2). Wenn das Solarpanel gleichmäßig sitzt, werden zuerst die mittleren Schrauben jeder Leiste fest angezogen.
Danach werden alle übrigen Schrauben festgezogen und nach einer kurzen Zeit nochmals nachgezogen. Falls das Solarpanel noch Spiel hat, kann man zwischen Solarpanel und Leiste etwas unterlegen, bis es fest sitzt. In Bild 4.3.3 sieht man, wie die Hohlbuchse samt Haltebrücke an der Innenseite des Rückendeckels befestigt wird.
Zum Abschluss wird der Rückendeckel mit vier Schrauben auf den Rahmen geschraubt (siehe Bild 4.3.4).

Bis zur Fertigstellung des Halters sind nur noch wenige Schritte nötig:
Zuerst wird die M6-Mutter in den Gelenkhalter eingepresst (siehe Bild 4.4.1).
Anschließend wird der Halter für das Geländer mit einer M6-Schraube am Gelenkhalter befestigt (siehe Bild 4.4.2).
Der Gelenkhalter wird nun mit drei M3-Schrauben am Rückendeckel verschraubt.
Nicht zu vergessen: Die M3-Muttern müssen in den Gegenhalter eingepresst werden, der später für die Montage am Geländer verwendet wird (siehe Bild 4.4.4).

Explosionszeichnung

Zur besseren Übersicht gibt es eine Explosionszeichnung des Solarpanelhalters in Bild 4.5.1.

Anmerkung

Natürlich gibt es auch alternative Befestigungsmöglichkeiten. So könnte man das Solarpanel beispielsweise im Garten am Blumenbeet anbringen – dort besteht jedoch die Gefahr, dass wachsende Pflanzen es nach und nach verdecken. In diesem Fall bietet sich ein Halter mit Aluminiumrohr und Erdspieß an (siehe Bild 5.0.1).
Auch auf dem Balkon lässt sich das Panel befestigen, etwa an Blumenkästen, die das Geländer verdecken. Hierfür gibt es ebenfalls eine passende Halterung mit Aluminiumrohr (siehe Bild 5.0.2).
Darüber hinaus ist auch eine Montage an einer Wand oder an einem Pfosten vorgesehen (siehe Bild 5.0.3).

Des Weiteren plane ich die Konstruktion eines Solarpanelhalters mit integriertem USB-C-Ausgang.

Das Solarpanel ist eine ideale Ergänzung für meine Kleingeräte und Sensoren im Außenbereich – und das sogar im Winter! Die benötigten Kabel lassen sich je nach Anforderung entweder selbst konfektionieren oder einfach kaufen. Grundsätzlich gilt dabei: je kürzer, desto besser.

Viel Freude beim Nachbauen – oder vielleicht hat dich dieses Projekt sogar inspiriert, selbst kreativ zu werden.

Dateien zum Herunterladen

• Solarpanelhalterung Gehäuse

The post DIY Solarpanelhalterung für 2W Panels appeared first on Nerd Corner.

Das könnte dich ebenfalls interessieren: Docker Images erstellen und auf Dockerhub hochladen

Einen VPS bei Hetzner einrichten

Hetzner bietet oft Empfehlungslinks mit Guthaben-Vorteilen für Neukunden. Selbstverständlich kann man auch andere Anbieter nutzen, aber Hetzner ist preislich attraktiv und bietet solide Leistungen.

Was ist ein VPS?

Ein Virtual Private Server (VPS) ist ein virtueller Server, der auf einer physischen Maschine betrieben wird und als eigenständiger Server agiert. Er bietet mehr Kontrolle als klassisches Shared Hosting und ist eine kostengünstige Alternative zu dedizierten Servern. Der Zugriff erfolgt in der Regel per SSH (Secure Shell), wodurch wir den Server über die Kommandozeile steuern können.

SSH-Zugriff auf den VPS

Nach dem Erstellen eines VPS erfolgt die Verwaltung meist über eine Secure Shell (SSH). SSH ist ein Protokoll, das verschlüsselte Verbindungen zu entfernten Servern ermöglicht. Um sich mit dem Server zu verbinden, nutzt man folgenden Befehl:

ssh root@<IP-Adresse-des-Servers>

Falls ein SSH-Schlüssel hinterlegt wurde, kann die Authentifizierung per Public-Key-Authentifizierung erfolgen, was sicherer als ein Passwort ist.

Server bei Hetzner erstellen

1. Nach der Anmeldung in der Hetzner Cloud navigieren wir zu „Projekte“ und erstellen ein neues Projekt.
2. Danach wählen wir „Server hinzufügen“ und können eine Instanz konfigurieren.
3. Für den Anfang reicht oft das günstigste Modell aus. Ich empfehle jedoch, die Option für eine IPv4-Adresse zu aktivieren, da rein IPv6-basierte Setups oft Kompatibilitätsprobleme verursachen.

Domain einrichten

Um die Anwendung später unter einer eigenen Domain zu erreichen, muss man eine Domain registrieren und mit dem Server verknüpfen.

Domain bei Hetzner beantragen

1. In der Hetzner ConsoleH eine neue Domain registrieren oder eine bestehende Domain hinzufügen.
2. Um DNS-Einträge zu verwalten, müssen wir den DNS-Zugriff aktivieren.

Nameserver setzen

Folgende Nameserver sollten genutzt werden:

helium.ns.hetzner.de. 
hydrogen.ns.hetzner.com. 
oxygen.ns.hetzner.com.

Diese neuen Nameserver bieten bessere Performance und Flexibilität im Vergleich zu den alten Hetzner-Nameservern:

ns1.first-ns.de.
robotns2.second-ns.de.
robotns3.second-ns.com.

Beide Nameserver Varianten sind aber möglich! Die DNS Änderungen brauchen etwas Zeit. Mit Tools wie MXToolbox können wir aber überprüfen, ob die Änderungen bereits stattgefunden haben.

Domain mit dem Server verbinden

Nun muss die IP-Adresse des Servers mit der Domain verknüpft werden:

1. In der Hetzner Cloud zu DNS-Zonen wechseln.
2. Die registrierte Domain auswählen.
3. Einen neuen A-Record erstellen und die IPv4-Adresse des Servers eintragen.
4. Falls vorhanden, den IPv6-Record (AAAA) entfernen, um Kompatibilitätsprobleme zu vermeiden.

Mit MXToolbox kann man auch hier prüfen, ob die DNS-Änderungen bereits übernommen wurden.

Kubernetes einrichten

Kubernetes ist ein leistungsfähiges Orchestrierungstool für Container. Ich verwende k3s, eine schlanke Kubernetes-Variante, die sich besonders gut für kleinere Umgebungen eignet.

K3s auf dem Server installieren

Per SSH auf den Server verbinden und k3s mit folgendem Befehl installieren:

curl -sfL https://get.k3s.io | sh - 

Das Skript installiert k3s und startet den Kubernetes-Dienst. Nach der Installation kann k3s mit folgendem Befehl überprüft werden:

kubectl get nodes

k3s bringt eine eigene kubectl-Version mit, sodass keine separate Installation nötig ist.

YAML-Files für FE, BE, MySQL und Redis erstellen

Für das Deployment unserer Anwendung brauchen wir YAML-Dateien für:

• Frontend (Angular)
• Backend (NestJS)
• Datenbank (MySQL)
• Session-Management (Redis)

Eine Deployment-Datei für das Backend könnte so aussehen:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: backend
  template:
    metadata:
      labels:
        app: backend
    spec:
      containers:
        - name: backend
          image: dockerhub-user/backend:latest
          ports:
            - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: backend-service
spec:
  selector:
    app: backend
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000
  type: ClusterIP

Was sind Deployments und Services?

• Deployments verwalten die Bereitstellung und Skalierung von Containern.
• Services sorgen für eine stabile Netzwerkverbindung zwischen Containern.
• ClusterIP bedeutet, dass der Service nur innerhalb des Kubernetes-Clusters erreichbar ist.

Caddy als Reverse Proxy einrichten

Damit eingehender Traffic richtig verteilt wird, wird ein Reverse Proxy benötigt. K3s bringt standardmäßig Traefik mit, allerdings habe ich mich für eine einfachere Lösung entschieden: Caddy. Ich war echt erstaunt wie wenig Anleitungen bzw. Dokumentation es zu Caddy in Kombination mit Kubernetes gibt.

Warum Kubernetes mit Caddy?

• Automatische Let’s Encrypt SSL-Zertifikate
• Einfache Konfiguration per Caddyfile
• Built-in Load Balancer

Traefik entfernen

kubectl delete helmrelease traefik -n kube-system

Caddy Deployment erstellen

apiVersion: apps/v1
kind: Deployment
metadata:
  name: caddy
spec:
  replicas: 1
  selector:
    matchLabels:
      app: caddy
  template:
    metadata:
      labels:
        app: caddy
    spec:
      containers:
        - name: caddy
          image: caddy
          volumeMounts:
            - name: caddy-config
              mountPath: /etc/caddy/Caddyfile
      volumes:
        - name: caddy-config
          configMap:
            name: caddy-config
---
apiVersion: v1
kind: ConfigMap
metadata:
  name: caddy-config
data:
  Caddyfile: |

    example.com {
        reverse_proxy backend-service:3000
    }

---
apiVersion: v1
kind: Service
metadata:
  name: caddy-service
spec:
  type: LoadBalancer
  selector:
    app: caddy
  ports:
    - port: 80
      targetPort: 80
    - port: 443
      targetPort: 443

Wichtig: Da Let’s Encrypt ein Rate-Limit hat, sollten Tests zunächst mit Staging-Zertifikaten erfolgen!

Fazit

Nach diesen Schritten läuft die Anwendung nun in einem Kubernetes-Cluster auf einem Hetzner VPS und ist über eine eigene Domain erreichbar. Als nächstes würde es sich anbieten eine automatische CI/CD-Pipeline einzurichten, um neue Versionen ohne manuellen Aufwand zu deployen.

The post Deployment einer WebApp mit Kubernetes und Caddy appeared first on Nerd Corner.

Das könnte dich ebenfalls interessieren: NestJS auf Vercel hosten

Erstellung der Docker Compose Yml

Mit Docker Compose können alle Komponenten einer Anwendung über eine einzige Konfigurationsdatei definiert und gemeinsam gebuildet bzw. gestartet werden.

version: '3.8'

services:
  frontend:
    build: ./frontend
    ports:
      - "80:80"
    depends_on:
      - backend

  backend:
    build: ./backend
    ports:
      - "3000:3000"
    depends_on:
      - mysql
      - redis
    environment:
      - DATABASE_URL=mysql://user:password@mysql:3306/db
      - SESSION_STORE=redis://redis:6379

  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: db
    ports:
      - "3306:3306"

  redis:
    image: redis:latest
    ports:
      - "6379:6379"

Erstellung der Env Datei

Um Umgebungsvariablen zentral zu verwalten, erstellen wir eine .env Datei:

DATABASE_URL=mysql://user:password@mysql:3306/db 
SESSION_STORE=redis://redis:6379

Wichtig: Alle ENV-Variablen, die im Code verwendet werden, müssen auch in docker-compose.yml vorkommen!

Docker-Image für das Frontend

Das Angular-Frontend muss für die Produktion gebaut werden. Hier ein Beispiel-Dockerfile:

FROM node:20 AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build --prod

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

Da wir für den Build auf nginx angewiesen sind brauchen wir auch eine entsprechende Config Datei:

server {
  listen 80;
  server_name _;

  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

Docker-Image für das Backend

Auch das NestJS-Backend muss gebaut werden. Hier ein optimiertes Dockerfile

# Build stage
FROM node:20 AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

# Production stage
FROM node:20-alpine
WORKDIR /app

COPY --from=build /app/dist ./dist
COPY package.json package-lock.json ./
RUN npm install --only=production
CMD ["node", "dist/main.js"]

Builden der App mit Docker Compose

Nachdem alle Dockerfiles konfiguriert wurden können jetzt die Images gebuildet werden. Mit Docker compose ist das ganze wirklich einfach.

docker compose up -d --build

Anschließend sind die Images fertig, die Container gebaut und die App kann lokal direkt ausgetestet werden! Als letzer Schritt müssen die Images noch auf DockerHub hochgeladen werden, damit sie später leichter für das Deployment auf einem Server genutzt werden können.

Hochladen auf Docker Hub

Das Hochladen wird nachfolgend Schritt für Schritt erklärt:

1. Erstelle einen Account bei Docker Hub.
2. Erstelle ein Repository für das Frontend und Backend (1 privates Repo ist aktuell kostenlos).
3. Baue die Images und tagge sie:

   docker tag <image-id> dockerAccountName/frontend:latest
   docker tag <image-id> dockerAccountName/backend:latest

4. Melde dich an und pushe die Images:

   docker login
   docker push dockerAccountName/frontend:latest
   docker push dockerAccountName/backend:latest

Ausblick: Deployment mit Kubernetes

Da die Images nun auf Docker Hub sind, steht dem Deployment nichts mehr im Wege. Ich habe mich für ein Kubernetes-Cluster auf einem Hetzner-VPS entschieden. Mehr Infos dazu hier.

The post Docker Images erstellen und auf Docker Hub hochladen appeared first on Nerd Corner.

Das könnte dich ebenfalls interessieren: Swagger zu Node Server hinzufügen

Schritt 1: NestJS auf Vercel hosten

Das Wichtigste zuerst: Die Grundeinstellungen für die Bereitstellung auf Vercel. Vercel ist großartig für Serverless, aber die Arbeit mit NestJS benötigt ein paar Anpassungen. Die Hauptsache ist, eine vercel.json-Konfigurationsdatei einzurichten, die Vercel genau sagt, wie die App zu behandeln ist.

Hier ist die Endkonfiguration:

{
  "version": 2,
  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/main.ts",
      "methods": [
        "GET",
        "POST",
        "PUT",
        "PATCH",
        "OPTIONS",
        "DELETE",
        "HEAD",
        "CONNECT",
        "TRACE"
      ]
    }
  ]
}

Ich habe daraufhin in Vercel folgende Fehlermeldung erhalten:

This Serverless Function has crashed. Your connection is working correctly. 
Vercel is working correctly. 500: INTERNAL_SERVER_ERROR 
Code: FUNCTION_INVOCATION_FAILED ID: bom1::sgk4v-1711014022883-1e9ed54f4c37

Bei einem Blick in die Logs stellte ich fest, dass die Datenbankverbindung ein Problem darstellte und außerdem die folgende Logmeldung angezeigt wurde:

No exports found in module "/var/task/app-name/src/main.js".
Did you forget to export a function or a server?

Es stellte sich heraus, dass ich den zweiten Teil der Fehlermeldung ignorieren und mich nur auf die Datenbankverbindung konzentrieren musste.

Schritt 2: Konfigurieren der Datenbank

Für meine Anwendung habe ich eine mysql-Datenbank mit mehreren Schemata verwendet. Ich habe mehrere kostenlose Angebote ausprobiert, aber sie waren nicht mit dem Ansatz mehrerer Schemata kompatibel. Daher habe ich mich für das Hosting bei Google Cloud entschieden. Ich habe es auf einen Preis von 0,01 $ pro Stunde heruntergeschraubt und das 300 $-Einsteigerangebot genutzt.

Um Vercel eine Verbindung zu ermöglichen, musste in der Konfiguration von Google Cloud die IP-Adresse auf 0.0.0.0/0 gesetzt werden, so dass die Datenbank von jeder IP-Adresse aus zugänglich war.

Schritt 3: Umgang mit CORS

Die CORS Fehler haben auch für einige Kopfschmerzen gesorgt. Stelle sicher, dass OPTIONS für CORS Preflight-Anfragen zugelassen wird, da Vercel eine explizite Erlaubnis für Cross-Origin-Anfragen benötigt. Am Ende musste ich eine Menge Header hinzufügen, um sicherzustellen, dass die Anfragen erlaubt waren:

app.enableCors({
    origin: 'domain-name',
    credentials: true,
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
    allowedHeaders: [
      'Origin',
      'X-Requested-With',
      'Content-Type',
      'Accept',
      'Authorization',
    ],
  });

Schritt 4: Umstellung auf express-session und Redis für die Sitzungsverwaltung

Einer der kniffligsten Teile war die Sessions zum Laufen zu bringen. Ich begann mit der cookie-session Bibliothek, aber Vercel ignoriert sie komplett. Nach einem Blick in die Dokumentation und einigem Ausprobieren wechselte ich zur express-session Bibliothek, da sie populärer ist und besser mit Vercels serverloser Umgebung funktioniert.

Aus irgendeinem Grund muss die Import-Syntax genau so aussehen:

import session = require('express-session');

Außerdem musste ich die Sitzungsmiddleware mit aktiviertem Vertrauensproxy konfigurieren, da Vercel Anfragen proxifiziert. So sieht die Einstellung aus:

const expressApp = app.getHttpAdapter().getInstance();
expressApp.set('trust proxy', true);

Auch die Einstellung secure: true und sameSite: ’none‘ war wichtig, um sicherzustellen, dass Cookies über HTTPS und verschiedene Domainanfragen funktionieren!

Beachten, dass mit Vercel mehrere serverlose Instanzen Anfragen bearbeiten können, was bei parallelen Anfragen leider zu Sitzungskonflikten führt. Um dies zu beheben, habe ich meinen Sitzungsspeicher mit einer Redis-Instanz verbunden. Glücklicherweise war das super einfach.

Redis hält die Sitzungsdaten konsistent und vermeidet Konflikte zwischen Anfragen, insbesondere unter Last. Hier der Code:

const expressApp = app.getHttpAdapter().getInstance();
expressApp.set('trust proxy', true);

const redisClient = createClient({
    password: process.env.REDIS_PASSWORD,
    socket: {
      host: process.env.REDIS_HOST,
      port: parseInt(process.env.REDIS_PORT, 10),
    },
  });

  redisClient
    .connect()
    .catch((err) =>
      console.log('Could not establish a connection with Redis: ' + err),
    );

  redisClient.on('error', (err) => console.log('Redis error: ' + err));
  redisClient.on('connect', () =>
    console.log('Connected to Redis successfully'),
  );

  app.use(
    session({
      store: new RedisStore({ client: redisClient }),
      secret: process.env.COOKIE_SECRET,
      cookie: {
        secure: process.env.NODE_ENV !== 'development',
        sameSite: process.env.NODE_ENV === 'development' ? 'lax' : 'none',
        maxAge: 86400000,
      },
    }),
  );

Schritt 5: Hinzufügen von withCredentials im Frontend

Dieser Schritt ist nur eine Randnotiz: Damit Session-Cookies zwischen Frontend und Backend funktionieren, muss withCredentials in den HTTP-Anfragen meines Frontends auf true gesetzt werden. Dies ermöglicht die Einbeziehung von Cookies in herkunftsübergreifende Anfragen, was wichtig ist, wenn das Frontend und das Backend getrennt gehostet werden. Ich musste sicherstellen, dass der HTTP-Client von Angular diese Einstellung aktiviert hat.

Schritt 6: Schriftart hinzufügen

Um Schriftdateien in Ihr NestJS-Projekt einzubinden, muss man die CompilerOptions in der nest-cli.json-Datei verwenden, um Assets für die Build-Ausgabe zu definieren, z. B. durch die Angabe von „include“: „**/*.ttf“ und ‚outDir‘: „dist/src“.

{
  "$schema": "https://json.schemastore.org/nest-cli",
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "assets": [
      {
        "include": "**/*.ttf",
        "outDir": "dist/src"
      }
    ],
    "deleteOutDir": true
  }
}

Anschließend kann man nach dem Build die Schriftarten im Code mit path.resolve referenzieren, z. B. path.resolve(__dirname, ‚../fonts/Roboto-Regular.ttf‘). Auf diese Weise wird sichergestellt, dass die Schriftartendateien mit dem Build gebündelt werden und während der Laufzeit zugänglich sind.

Schlussgedanken zum Thema NestJS auf Vercel hosten

Das Deployment meiner NestJS-App auf Vercel war eine wahre Achterbahnfahrt. Manchmal hatte ich das Gefühl, dass ich kurz davor war, alles perfekt zum Laufen zu bringen, nur um dann mit neuen Fehlern konfrontiert zu werden, die mich zurück in den Fehlersuch-Modus schickten. Es gab Momente der Frustration – vor allem im Zusammenhang mit der Sessionverarbeitung und CORS-Problemen. Aber jede Lösung brachte ein neues Hoch, und jeder behobene Fehler fühlte sich wie ein kleiner Sieg an.

Jetzt, wo endlich alles reibungslos funktioniert, kann ich sagen, dass es ein großartiges Gefühl ist. Wenn ich sehe, dass meine Anwendung so funktioniert, wie ich es mir vorgestellt habe, ist das all die Kopfschmerzen wert. Es ist eine große Erleichterung, aber noch mehr freut es mich, zu wissen, dass ich jede Hürde überwunden habe und auf das, was ich gelernt habe, zurückblicken kann. Ich hoffe, dieser Leitfaden kann anderen einige dieser Schwierigkeiten ersparen und helfen, diesen „Es funktioniert einfach“-Moment etwas schneller zu erreichen!

The post Erfahrungen aus der Praxis: NestJS auf Vercel hosten appeared first on Nerd Corner.

Das könnte dich auch interessieren: 3D gedruckte Dupont Steckverbindung für Jumper Kabel

Umsetzung der Dupont Steckverbindung

Wie bei jeder Neuentwicklung oder Änderung eines bestehenden Teils standen auch hier einige Entscheidungen an, jedoch waren in diesem Fall nicht viele notwendig.

• Anzahl der Befestigungslaschen: zwei oder vier
• Durchmesser der Befestigungslöcher: 2,2 mm
• Deckel nach Befestigung abnehmbar: ja

Bei der Anzahl der Befestigungslaschen ist klar, dass eine einzelne Lasche dazu führt, dass sich das Gehäuse um die Schraube dreht, wenn diese nicht fest genug angezogen ist. Beim Ein- oder Ausstecken der Verbindung versucht das Gehäuse sich um die Schraube zu drehen. Mit zwei oder mehr Laschen lässt sich das Ein- und Ausstecken problemlos bewerkstelligen, selbst wenn die Schrauben nicht vollständig festgezogen sind.

Der Durchmesser der Befestigungsbohrungen wurde auf 2,2 mm für M2-Schrauben festgelegt. Größere Schrauben würden die Laschen größer machen als das Gehäuse des Verbinders selbst, und zwei M2-Schrauben bieten bereits ausreichend Haltekraft.

Die Entscheidung, ob der Deckel nach der Befestigung des Verbinders weiterhin abnehmbar sein soll, ergab sich zwangsläufig. Da die Klemmlaschen des Deckels am Gehäuseboden überstehen, mussten die Befestigungslaschen ohnehin erhöht über dem Boden stehen. Wären die Laschen bündig mit dem Gehäuseboden, könnte sich der Deckel beim Anziehen der Schrauben um etwa 0,3 mm anheben. Warum wurden die Befestigungslaschen nicht direkt am Deckel angebracht? Der Deckel ist nicht stabil genug, um die seitlichen Laschen zu tragen. Der Abstand zwischen der Oberfläche und dem Gehäuseboden beträgt im verschraubten Zustand 1,1 mm, was ausreicht, um den Deckel problemlos zu entfernen.

Zu den Befestigungsbohrungen mit einem Durchmesser von 2,2 mm: Der Bohrungsabstand ist immer ein Vielfaches von 2,54 mm, was sinnvoll ist, da auch die DuPont-Stecker eine Breite und Höhe von 2,54 mm haben. Der Bohrungsabstand vergrößert sich proportional zur Anzahl der Pins am Gehäuse. Ein positiver Nebeneffekt: Diese Abstände passen auch zu den Löchern einer Lochrasterplatte. In Bild 1.0.1 habe ich zwei 4-Pin-Stecker auf einer Lochrasterplatte montiert. Für die Befestigung habe ich die passenden Löcher im Abstand der 4-Pin-Stecker verwendet und mit einem M2-Gewindebohrer Gewinde geschnitten. Wie man sehen kann, halten die Schrauben einwandfrei, ohne dass eine Mutter benötigt wird.

Ja, das war’s fast für diesmal – eigentlich wären wir jetzt fertig, aber zwei Dinge sind mir noch wichtig. Erstens möchte ich auf die vielseitige Verwendung der Steckverbinder eingehen. Ich benutze sie seit vier Jahren und entdecke ständig neue Möglichkeiten, diese flexibel einzusetzen. Nachfolgend einige Beispiele mit Variante eins, die bis auf die Anschraubmöglichkeit identisch mit Version 1.1 ist.

In Bild 2.0.1 sieht man einen 10-PIN-Stecker mit einem 200 mm Jumperkabel. Bild 2.0.2 zeigt den Unterschied zwischen einem 10-PIN-Stecker mit einem 100 mm Jumperkabel und einem mit 200 mm.

Bild 2.1.1 zeigt einen 9-PIN-Stecker auf der einen Seite und drei verschiedene Stecker auf der gegenüberliegenden Seite. In Bild 2.1.2 ist diese Seite vergrößert dargestellt. Hier sieht man die drei Stecker: einen 4-PIN-Stecker, daneben einen 3-PIN-Stecker und ganz links einen 2-PIN-Stecker. Addiert man die Pins der drei Stecker, kommt man wieder auf die neun Pins, wie auf der anderen Seite.

Sicherlich ist euch aufgefallen, dass die DuPont-Stecker der drei Verbindungen unterschiedlich sind. Beim 4-PIN-Stecker sind alle Pins männlich, also Stifte. Im Gegensatz dazu sind beim mittleren 3-PIN-Stecker alle Pins weiblich, also Buchsen. Besonders interessant wird es beim 2-PIN-Stecker, der einen Stift und eine Buchse kombiniert. Was hat es damit auf sich? Hier möchte ich die Flexibilität des werkzeuglosen Stecksystems von Nerd-Corner demonstrieren. Mit diesen Steckern kann man, wie beim 2-PIN-Stecker, einen Verpolungsschutz einbauen: Der Stift ist der Pluspol, die Buchse der Minuspol. Am Gegenstecker ist es umgekehrt, wodurch die Verbindung nicht falsch gesteckt werden kann!

Der 2-PIN-Stecker ist das einfachste Beispiel, aber dieses Prinzip lässt sich auf alle Stecker anwenden, sodass sich auch komplexere Schutzsysteme aufbauen lassen.

Der Aufbau in Bild 2.2.1 zeigt eine weitere Möglichkeit, einen Kabelbaum zu erstellen. Auf der linken Seite befindet sich ein 10-PIN-Stecker, ganz rechts ein 5-PIN-Stecker, verbunden durch ein 200 mm Jumperkabel. Der orangefarbene 3-PIN-Stecker ist über ein 400 mm Jumperkabel mit dem 10-PIN-Stecker verbunden, ebenso wie der 2-PIN-Stecker, allerdings mit einem 500 mm Jumperkabel. Diese Lösung bietet grenzenlose Flexibilität über die gesamte Steckerfamilie hinweg und das komplett werkzeuglos.

Zusammenbau der Dupont Steckverbindung

Ich erhalte immer wieder Anfragen, Steckergehäuse für 15 oder 22 Pins zu bauen. Leider ist dies mit diesem System zwar nicht unmöglich, aber eine große Herausforderung. Der Aufwand steht in keinem sinnvollen Verhältnis zum Nutzen – zumindest für mich. Eigentlich wollte ich bereits bei der 6-PIN-Variante aufhören, da die Montage schon einiges an Feinmotorik erfordert und die Haltekraft der Laschen nachlässt. Das Problem der Haltekraft konnte ich ab der 7-PIN-Variante durch eine dritte Lasche lösen, aber der Zusammenbau wurde dadurch sehr schwierig.

Es gibt jedoch meist eine Lösung, wie in der Bilderserie 3.0 zu sehen ist.

In Bild 3.0.1 erkennt man, dass eine Buchsenleiste ins Spiel kommt, da wir hier männliche (Stift-)Kabel verwenden. Für weibliche Kabel könnte man stattdessen eine Stiftleiste nutzen.

Der Ablauf für den Zusammenbau mit männlichen Kabeln (Stiften) sieht folgendermaßen aus:

1. Die Kabel in die Buchsenleiste drücken.
2. Die gesteckten DuPont-Gehäuse leicht in den Gehäuseboden des Steckers drücken und die Kabel in die vorgesehenen Mulden pressen (siehe Bild 3.0.1).
3. Die DuPont-Gehäuse vollständig in den Gehäuseboden drücken und zur internen Anschlagleiste schieben. Anschließend die Kabel einzeln nach hinten ziehen – die Buchsenleiste sollte nicht entfernt werden (Bild 3.0.2).
4. Sobald die DuPont-Stecker im Gehäuse fixiert sind, wird der Deckel aufgesetzt und eingerastet (Bild 3.0.3).
5. Zum Abschluss wird die Buchsenleiste entfernt, und der Zusammenbau ist abgeschlossen (Bild 3.0.4).

Dateien zum Herunterladen

• Dupont Steckverbindung 3PIN

The post Dupont Steckverbindung V1.1 appeared first on Nerd Corner.

Das könnte dich auch interessieren: DIY Powerbank mit Spannungsregler und Voltmeter

Liste der Komponenten

Für die Darstellung der Funktion habe ich mich für einen kleinen Testaufbau entschlossen. Für meinen Testaufbau benötige ich folgendes:

• Hohlbuchse 5,5 x 2,1 (1.0.1)
• Voltmeter (1.0.2)
• 5V Netzteil (1.0.3)
• Hohlbuchsen Halter (1.0.4)
• Hohlbuchsen Brücke (1.0.5)
• Diverse Kabel (1.0.6)

Montageanleitung für Halter und Brücke

Der erste Schritt besteht darin, den Halter (1.0.4) und die Brücke (1.0.5) mit dem 3D-Drucker zu drucken. Nach dem Säubern der Druckteile schneide ich in den Halter zwei M2-Gewinde (siehe 2.0.1). Wer lieber mit selbstschneidenden Schrauben arbeitet, kann diesen Schritt überspringen. Danach wird die Hohlbuchse in das große Loch der Brücke geschoben (2.0.2) und mit der Mutter an der Vorderseite der Brücke fest verschraubt (2.0.3). Die Montage der Brücke am Halter ist ebenfalls sehr einfach: Man schiebt die Brücke mit den Aussparungen rechts und links über die beiden Zylinderflächen am Halter (2.0.4) und befestigt sie mit M2-Schrauben (2.0.5). Halter und Brücke mit montierter Hohlbuchse bilden eine sehr stabile Einheit, die große Kräfte aufnehmen kann. Wenn alles korrekt montiert ist, sollte die Hohlbuchse nicht überstehen, sondern 0,3 bis 0,5 mm versenkt sein.

Verkabelung und Verlötung der Hohlbuchse

Kommen wir nun zum Kern dieses Artikels: dem Verkabeln beziehungsweise Verlöten der Hohlbuchse. Hierbei verwende ich vorkonfektionierte Stecker und Buchsen, die bereits verpresste Kabel und eine Zugentlastung enthalten. Die Farbmarkierung der Kabel ist ebenfalls praktisch, da rot für Plus und schwarz für Minus steht (3.0.1).

Die Hohlbuchse mit Schaltfunktion hat in der Regel drei Lötlaschen. Der Minuspol wird immer geschaltet, das heißt, im Bild 3.0.2 entspricht dies der Nummer zwei. Hier wird auch der Minuspol der primären Energieversorgung, wie z.B. Batterie oder Akkumulator, angelötet. Die Lötlasche Nummer eins ist für den gemeinsamen Pluspol vorgesehen; alle Plus-Verbindungen werden hier angelötet. Der Minuspol zu den Verbrauchern im Gerät wird an die Lötlasche Nummer drei gelötet. Im Bild 3.0.3 ist die komplette Verlötung der Hohlbuchse dargestellt.

Montage und Anschluss

Nach der erfolgreichen Verlötung kann nun mit dem restlichen Versuchsaufbau fortgefahren werden. Zuerst wird der Halter mit der verlöteten Hohlbuchse auf eine Holzplatte geschraubt (4.0.1). Anschließend werden die beiden Mini-Voltmeter auf der Holzplatte befestigt (4.0.2). Die Mini-Voltmeter sind eine Kreation von Nerd-Corner. Wer Interesse an solchen Gehäusen hat, kann unter folgendem Link den entsprechenden Artikel lesen und die STL-Dateien herunterladen.

Nun schließe ich die an der Hohlbuchse verlöteten Kabel an die Mini-Voltmeter an (siehe Bild 4.0.2, rosa Rahmen). Als nächstes verbinde ich die primäre Stromquelle mit meinem 5V-Netzteil und schalte es ein (siehe Bild 4.0.3, gelber Rahmen). Nach dem Einschalten des Netzteils liegt an beiden Mini-Voltmetern eine Spannung an: 5,35 Volt am Versorger (roter Kreis) und 5,28 Volt beim Verbraucher (grüner Kreis).

Einbindung der zweiten Stromquelle

Da der Strom sauber über die Hohlbuchse zum Verbraucher fließt, kommt jetzt die zweite Stromquelle ins Spiel. Diese betreibe ich mit 12V, um einen deutlichen Unterschied zur primären Stromversorgung zu haben. Im Bild 4.1.1 ist die zweite Stromversorgung mit 12,2 Volt dargestellt (türkiser Rahmen).

Nun stecke ich die zweite Stromversorgung mit 12 Volt in die Hohlbuchse (Bild 4.1.2, blauer Rahmen). Nach einer kurzen Verzögerung ändert sich der Wert am Mini-Voltmeter des Verbrauchers auf 12 Volt (grüner Rahmen). An der primären Stromversorgung hat sich nichts geändert; sie bleibt eingesteckt und eingeschaltet (roter Rahmen). Der Wert liegt weiterhin bei 5,34 Volt, was zwar 0,01 Volt niedriger ist als vor dem Einstecken der zweiten Stromversorgung, aber dies liegt an den Schwankungen des 5V-Netzteils.

Als letzten Schritt entferne ich das 5 Volt Netzteil vom primären Stromkreis um zu überprüfen, ob wirklich keine Spannung am primären Stromkreis anliegt. Am Bild 4.2.1 im gelben Rahmen bleibt es dunkel und somit war der Versuch erfolgreich!

Dateien zum Herunterladen

• Holstecker Halter und Brücke

The post Hohlbuchse als Schalter verwenden appeared first on Nerd Corner.

Ich sehe leider sehr oft Blogartikel in denen der HTML Code in der Arduino Datei eingebettet wird. Sowas kann man für eine Mini Demonstration zwar machen, ist aber im Alltag völliger Schwachsinn. Es ist viel zu unübersichtlich und sobald das Projekt wächst nicht mehr nutzbar.

Die ordentliche Alternative ist einen Ordner namens „data“ einzurichten und in diesem die Webseiten als html Dateien abzulegen. Zusätzlich wird das Styling als CSS Datei gespeichert und es können sogar Funktionen per JavaScript Datei ausgeführt werden. Also alles 1:1 wie auf einem gewöhnlichem Webserver!

Das könnte dich auch interessieren: WeMos D1 R2 erste Schritte und Wlan Integration

Liste der Komponenten

• Arduino IDE (Entwicklungsumgebung)
• WeMos D1 R2

Das Einrichten des Dateisystems (offiziell SPIFFS) geschieht einmalig und ist kinderleicht:

(Zunächst sollte man die grundlegende Einrichtung aus dem ersten Teil abgeschlossen haben!)

1. Auf GitHub eine Kopie der Datei „ESP8266FS-0.2.0.zip“ herunterladen und entpacken
2. Die Datei esp8266fs.jar im Arduino-Tool-Verzeichnis ablegen. Der Pfad sieht etwa so aus: [home_dir]\Arduino\tools\ESP8266FS\tool\esp8266fs.jar (Siehe Bild) Ich musste den Pfadteil tools\ESP8266FS\tool\ im Arduino Ordner selbst erstellen.
3. Die Arduino IDE neustarten.

Das wars auch schon! Man kann jetzt in der Arduino DIE unter Tools den neuen Punkt „ESP8266 Sketch Data Upload“ sehen.

Wie kann man das neue Dateisystem jetzt nutzen?

1. Erstellen Sie in ihrem aktuellen WeMos Projekt Ordner einen zusätzlichen Ordner mit dem Namen „data“. So wie in dem nachfolgendem Bild

2. Legen Sie die Dateien, die Sie hochladen möchten, in das ‚data‘-Verzeichnis
3. Wählen Sie in der Arduino IDE im Menü ‚Tools‘ den WeMos aus und wählen Sie eine Größe bei ‚Flash Size‘
4. Das Dialogfeld für den seriellen Monitor schließen!
5. Wählen Sie aus dem Menü ‚Tools‘ die Option ‚ESP8266 Sketch Data Upload‘.

Sobald der Upload abgeschlossen ist zeigt das Nachrichtenfenster der Arduino IDE 100% Upload an.

WeMos Beispielprogramm zum Ein- und Ausschalten der OnBoard LED

Ähnlich wie im ersten Teil wird der Webserver die OnBoard LED steuern. Als Basis dient ebenfalls der Code aus dem ersten Teil. Der überarbeitete Code sieht so aus:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

ESP8266WebServer server(80);

void setup() {
  Serial.begin(115200); //Baudrate
  Serial.println("ESP starts");

  WiFi.begin("NerdCornerWiFi","NerdCornerPassword");


  Serial.print("Connecting...");

  while(WiFi.status()!=WL_CONNECTED){ //Loop which makes a point every 500ms until the connection process has finished

    delay(500);
    Serial.print(".");
  }
  Serial.println();

  Serial.print("Connected! IP-Address: ");
  Serial.println(WiFi.localIP()); //Displaying the IP Address

  if (MDNS.begin("nerd-corner")) {
    Serial.println("DNS started, available with: ");
    Serial.println("http://nerd-corner.local/");
  }

  server.serveStatic("/", SPIFFS, "/", "max-age=86400");
  SPIFFS.begin();

  server.onNotFound([](){ 
    server.send(404, "text/plain", "Landing page not found! Don't forget to name your landing page 'index.html'!");  
  });
 
  server.on("/led", HTTP_POST, []() {    
     
    const String ledState = server.arg("ledstate");
    if(ledState=="on"){
      switchLedOn();
    }
    else if(ledState=="off"){
      switchLedOff();
    }
    server.send(200, "text/json", "{\"result\":\"ok\"}");
  });

  server.begin();
  // initialize digital pin LED_BUILTIN as an output.
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  server.handleClient();
  MDNS.update();

}

void switchLedOff(){ 
  digitalWrite(LED_BUILTIN, HIGH);   // turn the D1 LED off 
}

void switchLedOn(){ 
  digitalWrite(LED_BUILTIN, LOW);    // turn the LED on 
}

Auf ein paar Besonderheiten möchte ich dabei hinweisen. Wir haben beispielsweise folgendes hinzugefügt:

server.serveStatic("/", SPIFFS, "/", "max-age=86400"); 
SPIFFS.begin();

Ohne die beiden Zeilen wäre der Zugriff auf die Dateien im „data“ Ordner nicht möglich. Bitte beachten, dass der Name „index.html“ als default für die Landing Page eingestellt ist. Wenn man unbedingt möchte kann man das aber auch ändern.

server.on("/led", HTTP_POST, []() {    
     
    const String ledState = server.arg("ledstate");
    if(ledState=="on"){
      switchLedOn();
    }
    else if(ledState=="off"){
      switchLedOff();
      }
      server.send(200, "text/json", "{\"result\":\"ok\"}");
  });

Der „/led“ Endpoint empfängt die Befehle vom Webserver. Lautet der Befehl „on“ wird die LED eingeschaltet und bei „off“ wird die LED ausgeschaltet.

Wemos Webseite zum Ein- und Ausschalten der WeMos OnBoard LED

Die Beispielwebseite ist ganz einfach aufgebaut. Sie besteht in erster Linie aus 2 Buttons zum Ein- und Ausschalten der LED.

Die Ordnerstruktur der Webseite ist sehr übersichtlich gehalten. Es gibt eine Hauptseite mit dem Namen „index.html“ Dieser Name ist weltweit üblich für die Hauptseiten und wird auch automatisch vom WeMos entsprechend erkannt. Darüber hinaus einen „CSS“ Ordner fürs Styling und einen „JS“ Ordner für Funktionen.

Im Header Bereich der Webseite verlinken wir die Styles. Da wäre zum einen ein Standard Bootstrap, der alles automatisch bischen schöner macht und zusätzlich eine custom Styles Datei mit meinen eigenen Anpassungen. Außerdem werden im Header Bereich auch die Funktionen der Webseite verlinkt. Ich benutze den jQuery Standard um von der Webseite Requests an den WeMos zu senden. Meine eigenen custom Funktionen liegen in der „index.js“.

Bitte beachten, dass die jQuery Datei VOR der eigenen Datei eingebunden werden muss, sonst können keine jQuery Befehle im eigenen Code benutzt werden! Die eigenen Funktionen werden anschließend von den Buttons verwendet. Der HTML Code der Seite sieht insgesamt folgendermaßen aus:

<!DOCTYPE html>
<html lang="en"></html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/custom-style.css" />
    <title>D1 Webserver</title>
  </head>
  <body>
    <h1>D1 Webserver with filesystem</h1>
    <p>
      This is an example for a WeMos Webserver with a filesystem. You can easily
      create webpages with html, css and js!
    </p>

    <h3>Example to turn on and off the built in LED</h3>
    <button class="button-style" onclick="changeLEDState('on')">Turn on</button>
    <button class="button-style" onclick="changeLEDState('off')">
      Turn off
    </button>

    <h3>Example to demo a JS function</h3>
    <button class="button-style" onclick="showAlert()">Show alert</button>
  </body>
</html>

Besonderes Augenmerk gilt der JavaScript Funktion „changeLEDState(value)“

function changeLEDState(value) {
  $.post("/led", { ledstate: value });
}

Dadurch, dass jQuery genutzt wird für die Kommunikation mit dem WeMos, reicht ein einfaches Dollarzeichen mit dem entsprechendem Request Befehl. Bei diesem POST Request wird ebenfalls ein Wert mit geschickt, welcher entweder „on“ oder „off“ ist zum ein- und ausschalten der LED.

Die Webseite kann nachfolgend als zip Datei heruntergeladen werden.

Dateien zum Herunterladen

• Wemos example webserver to control OnBoard LED

The post WeMos D1 R2 – Ganze Webseite mit html, css & js hosten appeared first on Nerd Corner.

Mein naiver Gedanke war, dass Tensorflow automatisch die GPU benutzen würde. Man muss allerdings erst die nachfolgende Schritt für Schritt Anleitung befolgen, damit Tensorflow die GPU überhaupt erkennt und nutzt.

Das könnte dich auch interessieren: Tensorflow.js oder Tensorflow (Python) nutzen?

DISCLAIMER: Ab Version 2.11 unterstütz Tensorflow keine GPUs mehr unter Windows! Entweder wechselt man das Betriebssystem oder downgraded Tensorflow auf Version 2.10. Außerdem wird eine Grafikkarte von NVIDIA benötigt!

1. Überprüfen der gewünschten CUDA und cuDNN Versionen

Zunächst sollte man herausfinden welche CUDA und cuDNN Version von TensorFlow benötigt wird. Auf der Webseite werden alle Versionen von Tensorflow und die gewünschte CUDA Versionen bzw. cuDNN Versionen aufgelistet: https://www.tensorflow.org/install/source_windows#gpu

2. Überprüfen der eigenen Grafikkarte

Wie bereits im Disclaimer erwähnt muss die Grafikkarte von NVIDIA sein. Auf der Webseite https://developer.nvidia.com/cuda-gpus kann man seine eigene GPU suchen und die „Compute Capability“ überprüfen. Mindestvoraussetzung für Tensorflow ist ein Wert von 3.5, der aber von allen aktuellen Grafikkarten erfüllt wird.

3. Installieren der neusten NVIDIA-Treiber

Um die GPU für TensorFlow zu aktivieren, müssen die neuesten NVIDIA-Treiber installiert sein. Einfach auf die NVIDIA-Website gehen den neuesten Treiber die eigene Grafikkarte herunterladen.

4. Installieren von Visual Studio (optional)

In TensorFlow wurden einige Teile der Bibliothek in C++ geschrieben, um die Leistung zu maximieren. Daher kann die Installation von Visual Studio dazu beitragen, die Kompatibilität und Leistung von TensorFlow zu verbessern: https://visualstudio.microsoft.com/de/vs/

Es reicht hier einzelne Komponenten auszuwählen. Ich habe hier alles mit C++ in „Compiler, Buildtools und Runtimes“ ausgewählt und zusätzlich noch MS Build, was wiederum ein paar weitere Komponenten automatisch installiert. Insgesamt aber trotzdem über 25 GB!

5. Installieren von CUDA-Toolkit

Das CUDA-Toolkit ist ein Toolkit für die Entwicklung von CUDA-Anwendungen, das von NVIDIA bereitgestellt wird. TensorFlow benötigt CUDA, um auf der GPU ausgeführt zu werden. Die in Schritt 1 verlangte Version des CUDA-Toolkits einfach von der NVIDIA-Website herunterladen und installieren: https://developer.nvidia.com/cuda-downloads

6. Installieren der cuDNN-Bibliotheken

cuDNN ist eine Bibliothek von Deep-Learning-Primitiven, die von NVIDIA bereitgestellt wird. TensorFlow benötigt zusätzlich cuDNN, um auf der GPU ausgeführt zu werden. cuDNN ist kostenlos, aber man muss einen Account als NVIDIA Developer erstellen: https://developer.nvidia.com/rdp/cudnn-download

Nach dem Download muss der Inhalt entpackt werden. Der Inhalt wirdin dem Programme Ordner in „NVIDIA GPU Computing Toolkit“ hinein verschoben. Nach dem Verschieben den Dateipfad des „bin“ Ordners kopieren.

7. PATH Variable setzen

Öffne die Umgebungsvariablen in dem du den Begriff einfach in die Windows Suche eingibst. Dann die Systemvariable „path“ bearbeiten und einen neuen Eintrag hinzufügen mit dem Dateipfad des „bin“ Ordners aus dem vorherigem Schritt.

8. Erstellen einer virtuellen Umgebung

Es wird empfohlen, TensorFlow in einer virtuellen Umgebung zu installieren, um Konflikte mit anderen Python-Paketen zu vermeiden. Idealerweise mittels Anaconda. Einfach hier downloaden und installieren: https://www.anaconda.com/download

Anschließend den Anaconda Navigator starten. Unter Environments > Create  neue Umgebung erstellen. Danach wieder auf Home klicken und eine vorhandene Python IDE von hier aus launchen. Es sollten auch zusätzliche IDEs wie PyCharm nach dem Download automatisch hier angezeigt werden.

9. Verifizieren der Tensorflow GPU Unterstützung

Um zu überprüfen, ob die TensorFlow GPU Unterstützung erfolgreich erkannt wurde, sollte zunächst in der Python IDE das Tensorflow Package installiert werden. Aber dabei beachten unter Windows wird die GPU nur bis Version 2.10 erkannt! In den nachfolgenden Versionen nicht mehr! Es muss also Tensorflow 2.10 installiert werden.

Anschließend folgenden Code laufen lassen um eine liste der verfügbaren GPUs anzuzeigen:

import tensorflow as tf

tf.config.list_physical_devices('GPU')

The post Tensorflow GPU aktivieren unter Windows appeared first on Nerd Corner.

Die Taschenlampe konnte man nicht ordentlich positionieren und sie blendete. Aus diesem Grund kam mir die Idee eine eigene blendfreie Lampe zu entwickeln, die man einfach auf das Heizbett stellen kann und nicht blendet. Am besten kabellos mit einer Powerbank. Ich hatte bereits eine eigene Powerbank mit dem Battery Shield V3 gebaut, welche ich dieses Mal als Basis genutzt habe.

Das könnte dich auch interessieren: Eigene Powerbank mit dem Battery Shield V3

Liste der Komponenten

• 1 x Hohlbuchse 5,5×2,1
• 1 x Battery Shield V3
• 1 x LiPo 18650 3500mAh
• 1 x Wippschalter 250V/3A Einbaumaß 15×10,5mm
• 4 x Zylinderkopfschrauben mit Innensechkant M2 x6
• 6 x Linsensenkkopfschrauben M2 x 20
• 17 x 5V SMD2835 LED Streifen
• 5 x Jumperkabel

Wahl der LED

Da das Grundgehäuse der Powerbank mit dem Battery shield V3 bereits fertig war, musste ich mir hauptsächlich Gedanken über die Beleuchtung machen. Als Leuchtmittel sollten LEDs mit 5V oder 3V genutzt werden, da das Battery shield V3 entweder 5V oder 3V bereitstellt. Für meine Zwecke reicht ein geringerer Lumen Wert. Nach kurzer Recherche fand ich passende LED-Strips.

Die Lichttemperatur meines LED Streifens beträgt 6500K auch kaltweiß genannt. Dieses Licht beinhaltet sehr viel Blauanteil, wodurch sich gut arbeiten lässt und Details schnell sichtbar werden. Da das Battery shield V3 drei zusätzliche 5V und einen USB A Ausgang besitzt, ist die Versorgung der LEDs kein Problem. 

Bei den LEDs für die blendfreie Lampe handelt es sich um SMD2835. Diese sind 2,5 mm breit und 3,5 mm lang und haben eine etwas geringere Leuchtkraft als ein SMD5050. Wieviel die LEDs verbrauchen ist entscheidend für die Leuchtdauer der Lampe, da die Energiezufuhr über den Akku beschränkt ist.  

Konstruktion des Deckels und Zwischendeckels

Wie bereits im vorherigem Abschnitt erwähnt wird das Grundgehäuse der Powerbank nicht verändert. Die LEDs werden stattdessen auf einen Zwischendeckel aufgeklebt. Der Zwischendeckel dient auch als Träger der Hohlbuchse für den 3V Ausgang. Weiterhin wurde ein Durchbruch kontruiert um die Kabel vom Ein-Aus-Schalter durchzuführen. Die schrägen Öffnungen des Zwischendeckels sollen helfen bei Bedarf nachträglich noch von hinten Kleber an den LED Streifen anzubringen.

Bei der Oberseite (dem Deckel, wo das Licht durchscheint) wurde es ein wenig komplexer. Einerseits soll genügend Licht durchscheinen, andererseits darf es nicht blenden! Natürlich wäre ein glasklarer Deckel für die Lichtausbeute ideal, doch wie gesagt, dann würde es womöglich blenden. Um einen Ausgleich zu schaffen zwischen effektiver Lichtausbeute und Blendfreiheit sind mehrere Faktoren zu berücksichtigen:

• Materialauswahl (Filament)
• Abstand zum Leuchtmittel
• Stärke der Scheibe
• Druckstrategie

Bei der Materialauswahl für die blendfreie Lampe fiel die Wahl auf „Elfenbein“. Der Abstand zum Leuchtmittel beträgt 10,5 mm und die Scheibendicke (Materialstärke) 1 mm. Die Schichthöhe beträgt 0,25 mm, sprich bei einem Millimeter ergibt das vier Schichten, wobei die erste Schicht 45° nach links und die zweite Schicht 45° nach rechts aufgetragen wird. Durch die verschiedenen Richtungen der Schichten wird das Licht immer wieder gebrochen und blendfrei. Es handelt sich dabei um eine subjektive Wahrnehmung und die Bezeichnung blendfrei gilt daher nicht für alle Menschen.

Zusammenbau

• Verlöten der Teile mit den Jumperkabeln:

• Schneiden und ankleben der LED Streifen: Der LED Streifen wird in zweimal 6 LEDs und einmal 5 LEDs getrennt und auf den Zwischendeckel geklebt. Der Kabeldurchbruch am Deckel für den Stecker muss frei bleiben:

• Anbringen der Hohlbuchse am Zwischendeckel:

• Einschrauben des Battery shield in das Gehäuse nachdem die zehn Gewinde zuvor in das Gehäuse geschnitten worden sind.

• Wippschalter in den Deckel eindrücken:

• LiPo 18650 in die Aufnahme drücken

• Kabel verbinden und einschalten:

• Falls alle LED’s leuchten, Zwischendeckel auf Gehäuse stecken und danach den Deckel auf den Zwischendeckel stecken und verschrauben:

Blendfreie Lampe CAD Design

Für die Gewinde sind die Bohrungen auf Kernlochdurchmesser konstruiert, d.h. bei M2 auf den Durchmesser 1,6 mm. Man kann das Gewinde mit dem Gewindebohrer schneiden oder mit einer Schraube formen (eindrücken). Ich persönlich bevorzuge das Gewindeschneiden. Wo an dem Gehäuse die Gewinde geschnitten werden müssen zeigen die beiden Grafiken.

Weitere Anmerkungen

Mancher wird sich fragen, warum der Wippschalter aus dem Deckel ragt und nicht versenkt wurde. Die Lampe lässt sich dadurch besser ein- und ausschalten.  Meistens hat man nur eine Hand frei und kann nicht richtig in die Versenkung greifen, wenn der Wippschalter aber hervorsteht ist es leichter ihn zu bedienen. Trotzdem habe ich auch eine Variante mit versenktem Wippschalter konstruiert, die man im Download-Bereich herunterladen kann!

Die Leistung der Lampe liegt bei ca. 1,4 Watt. Bei 5,05 V beträgt die Stromstärke daher 0,27 A, was kein Problem  für das Battery Shield V3 und den LiPo darstellt. Die Leuchtdauer der Lampe beträgt ca. 5 Stunden im Dauerbetrieb. Für diese Daten habe ich einen Samsung 18650 mit 3500 mAh verwendet. Die Powerbank kann parallel zum Betrieb der Lampe genutzt werden. Die gesamte Stromstärke sollte allerdings nicht über 3A liegen.

Ich benutze diese Lampe nicht nur für meinen 3D Drucker, sondern auch beim Löten, lesen oder als Nachtlicht. Die Powerbank ist zudem extrem leicht mit 127g.

Datei zum Herunterladen

• STL Dateien der blendfreien Lampe

The post Blendfreie Lampe und Powerbank appeared first on Nerd Corner.

Auch sollte der Fokus stehts auf clean Code legen und dieser ordentlich dokumentiert sein, besonders wenn ein Projekt größer wird zahlt sich ordentlich dokumentierte Arbeit aus. Um beispielsweise REST Endpunkte zu dokumentieren empfiehlt es sich Swagger zu benutzen. Die Swagger API Dokumentation bietet eine Übersicht über alle Endpunkte und sogar die Möglichkeit mit diesen zu interagieren.

Das könnte Sie auch interessieren: Angular Form SVG mit clickbaren Elementen

Liste der Komponenten

• Entwicklungsumgebung (z.B. VS Code)
• Node.js

Dokumentation mit Swagger

Obwohl Swagger recht bekannt ist, konnte ich keine detaillierte Anleitung für die Implementation finden. Ich möchte daher 2 Wege zur Implementierung von Swagger in einen bestehenden Node Server erklären. Die erste Möglichkeit besteht darin direkt zu jedem Endpunkt Swagger Parameter hinzuzufügen. Das ist wohl die schnellere Variante, kann allerdings abhängig von der Anzahl der Endpunkte unübersichtlich werden. In der zweiten Variante wird eine „swagger.json“ Datei erstellt, die die  Parameter der Endpunkte zusammenfasst.

Um Swagger nutzen zu können wird folgende Bibliothek bzw. deren Typerweiterung genutzt:

npm install --save  swagger-ui-express
npm install --save-dev @types/swagger-ui-express

Swagger erstellt eine Dokumentation der Endpunkte:

Diese können geöffnet werden und man sieht einen beispielhaften Request und einen beispielhaften Response:

Über den Button „Try it out“ kann direkt mit dem Endpunkt interagiert werden.

Swagger API Dokumentation mit Parametern

Diese Variante empfiehlt sich eher für kleinere Projekte. Zunächst müssen diese beiden Swagger Bibliotheken in das Projekt eingebunden werden:

npm install --save-dev @types/swagger-jsdoc 
npm install --save swagger-jsdoc

Die Bibliotheken werden in app.ts bzw. für nicht Typescript Nutzer app.js konfiguriert. Aufgrund der hier festgelegten Konfiguration befindet sich die Dokumentation unter „/api-docs“:

import express from "express";
import bodyParser from "body-parser";
import exampleRoutes from "./routes/example-route";
import swaggerJSDoc from "swagger-jsdoc";
import swaggerUi from "swagger-ui-express";

const app = express();

const options = {
  definition: {
    openapi: "3.0.1",
    info: {
      title: "REST API for Swagger Documentation",
      version: "1.0.0",
    },
    schemes: ["http", "https"],
    servers: [{ url: "http://localhost:3000/" }],
  },
  apis: [
    `${__dirname}/routes/example-route.ts`,
    "./dist/routes/example-route.js",
  ],
};

const swaggerSpec = swaggerJSDoc(options);

app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerSpec));
app.use(bodyParser.json());
app.use(exampleRoutes);

app.listen(3000);

Der Endpunkt wird mit den Parametern folgendermaßen beschrieben:

import { Router } from "express";
import { exampleFunction } from "../controller/example";

const router = Router();

/**
 * @swagger
 * /example:
 *      post:
 *          summary: Send the text to the server
 *          tags:
 *              - ExampleEndpoints
 *          description: Send a message to the server and get a response added to the original text.
 *          requestBody:
 *              required: true
 *              content:
 *                  application/json:
 *                      schema:
 *                          type: object
 *                          properties:
 *                              responseText:
 *                                  type: string
 *                                  example: This is some example string! This is an endpoint
 *          responses:
 *              201:
 *                  description: Success
 *                  content:
 *                      application/json:
 *                          schema:
 *                              type: object
 *                              properties:
 *                                  text:
 *                                      type: string
 *                                      example: This is some example string!
 *              404:
 *                  description: Not found
 *              500:
 *                  description: Internal server error
 */
router.post("/example", exampleFunction);

export default router;

Swagger API Dokumentation mit swagger.json

Um eine bessere Übersicht zu haben und um die Dokumentation nicht mit dem eigentlichen Code zu vermischen empfiehlt sich die Nutzung einer, oder gar mehrerer json Dateien. Bei der Nutzung von TypeScript muss die Swagger.json Datei in die rootDirectory:

Auch hier wirdzunächst die Konfiguration in app.ts bzw. für nicht Typescript Nutzer in app.js festgelegt. Hier wird ebenfalls der Domainpfad „/api-docs“ für die Dokumentation gewählt:

import express from "express";
import bodyParser from "body-parser";
import exampleRoutes from "./routes/example-route";
import swaggerUi from "swagger-ui-express";

import * as swaggerDocument from "./swagger.json";

const app = express();

app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerDocument));

app.use(bodyParser.json());

app.use(exampleRoutes);

app.listen(3000);

Wichtiger Hinweis: Um JSON Dateien in ein Typescript Projekt zu importieren muss dies in der tsconfig.json erlaubt werden. Außerdem muss die JSON Datei sich in der root directory befinden:

{
  "compilerOptions": {
    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "module": "commonjs" /* Specify what module code is generated. */,
    "rootDir": "./src" /* Specify the root folder within your source files. */,
    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
    "resolveJsonModule": true /* Enable importing .json files. */,
    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
    "strict": true /* Enable all strict type-checking options. */,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  }
}

Die vorherige Swagger Dokumentation mit Parametern würde somit in der swagger.json folgendermaßen aussehen:

{
  "openapi": "3.0.1",
  "info": {
    "title": "REST API for Swagger Documentation",
    "version": "1.0.0"
  },
  "schemes": ["http"],
  "servers": [{ "url": "http://localhost:3000/" }],
  "paths": {
    "/example": {
      "post": {
        "tags": ["ExampleEndpoints"],
        "summary": "Send a text to the server",
        "description": "Send a message to the server and get a response added to the original text.",
        "requestBody": {
          "required": true,
          "content": {
            "application/json": {
              "schema": {
                "$ref": "#/components/schemas/ExampleSchemaHeader"
              }
            }
          }
        },
        "responses": {
          "201": {
            "description": "Success",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ExampleSchemaBody"
                }
              }
            }
          },
          "404": { "description": "Not found" },
          "500": { "description": "Internal server error" }
        }
      }
    }
  },
  "components": {
    "schemas": {
      "ExampleSchemaBody": {
        "properties": {
          "responseText": {
            "type": "string",
            "example": "This is some example string! This is an endpoint"
          }
        }
      },
      "ExampleSchemaHeader": {
        "required": ["text"],
        "properties": {
          "text": {
            "type": "string",
            "example": "This is some example string!"
          }
        }
      }
    }
  }
}

Dateien zum Herunterladen

• Github Beispielprojekt für swagger Parameter
• Github Beispielprojekt für swagger.json

The post Swagger Api Doku zu Node Server hinzufügen appeared first on Nerd Corner.