Diese App ist die Steuerschnittstelle meines maßgeschneiderten Smart Homes.

Ich habe einen Raspberry Pi verwendet, um serielle Signale an mehrere PWM-Servocontroller zu senden. Diese Controller sind mit Transistoren verbunden, die die tatsächliche Helligkeit der LED-Streifen steuern.

Hardware

Wie in der letzten Version meines Smart Homes habe ich zwei Backends geschrieben. Das Haupt-Backend ist ein Python-Skript, das Flask verwendet, um Anfragen zu empfangen und die Lichter zu steuern. Das andere Backend ist eine express.js-App, an die die Steuerungs-App Anfragen sendet. Es kombiniert das Python-Backend auf meinem Smart-Home-Raspberry und ein weiteres Python-Backend auf meinem Heimserver (ebenfalls ein Raspberry Pi). Dadurch kann ich mehrere Informationen wie CPU-Auslastung, RAM-Auslastung und Festplattennutzung beider Rarasperries in einer Anfrage erhalten. Ich habe auch einen Cron-Job hinzugefügt, um eine automatische Lüftersteuerung zu implementieren, um die Raspberries bei Bedarf zu kühlen.

Backend

Das Frontend ist eine mit Flutter geschriebene Android-App. Ich habe es im Google Play Store veröffentlicht, um meinen Eltern, die nur eingeschränkte Kontrolle haben (Rollläden hoch-/runterfahren), automatische Updates bereitzustellen.

Frontend

large_app-1.png

medium_app-1.png

small_app-1.png

thumbnail_app-1.png

app-1.png

large_app-0.png

medium_app-0.png

small_app-0.png

thumbnail_app-0.png

app-0.png

large_app-2.png

medium_app-2.png

small_app-2.png

thumbnail_app-2.png

app-2.png

large_app-3.png

medium_app-3.png

small_app-3.png

thumbnail_app-3.png

app-3.png

large_hardware-wireless-receiver.jpg

medium_hardware-wireless-receiver.jpg

small_hardware-wireless-receiver.jpg

thumbnail_hardware-wireless-receiver.jpg

hardware-wireless-receiver.jpg

large_hardware-wireless-doorbell.jpg

medium_hardware-wireless-doorbell.jpg

small_hardware-wireless-doorbell.jpg

thumbnail_hardware-wireless-doorbell.jpg

hardware-wireless-doorbell.jpg

large_hardware-rack-front.jpg

medium_hardware-rack-front.jpg

small_hardware-rack-front.jpg

thumbnail_hardware-rack-front.jpg

hardware-rack-front.jpg

large_hardware-rack-back.jpg

medium_hardware-rack-back.jpg

small_hardware-rack-back.jpg

thumbnail_hardware-rack-back.jpg

hardware-rack-back.jpg

large_hardware-led-controller.jpg

medium_hardware-led-controller.jpg

small_hardware-led-controller.jpg

thumbnail_hardware-led-controller.jpg

hardware-led-controller.jpg

large_hardware-raspberry.jpg

medium_hardware-raspberry.jpg

small_hardware-raspberry.jpg

thumbnail_hardware-raspberry.jpg

hardware-raspberry.jpg

large_hardware-bed-module.jpg

medium_hardware-bed-module.jpg

small_hardware-bed-module.jpg

thumbnail_hardware-bed-module.jpg

hardware-bed-module.jpg

This app is the control interface of my custom built smart home.

Smarthome (v2)

Dart

Ich habe Dart zusammen mit Flutter gelernt, um nativ mobile Anwendungen zu erstellen.

Flutter

Ich habe Flutter gelernt, um native mobile Anwendungen zu erstellen. Eine Version meines Smarthomes wurde auch als Flutter-App geschrieben. Später habe ich mich entschieden, wieder eine Web-App zu schreiben, da diese unabhängig vom Betriebssystem ist (Flutter Web gab es damals noch nicht)

Python

Zuerst verwendet, um das Backend meines Smart Home zu schreiben. Jetzt verwende ich Python nur noch in kleinen Skripten, z.B. um Informationen über verbundene VPN-Clients in meinem Smart Home zu erhalten.

Während meiner Berufsausbildung habe ich Firmware für Sensoren geschrieben. Aber ich nutze es auch in privaten Projekten, wie meinem Smarthome, um die Firmware für die Mikrocontroller zu schreiben.

Michael Müller

Diese Website wurde in einem Kundenauftrag für Michael Müller erstellt. Er ist als zertifizierter Waldpädagoge im Südwesten von Deutschland, aber auch an anderen Orten tätig.

Als Backend wird Strapi genutzt. Somit wird dem Kunden ermöglicht, die Inhalte auf der Website möglichst einfach selbst zu ändern.

Das Frontend ist eine Next.js App. Das Design wurde mit TailwindCSS implementiert.

large_0.png

medium_0.png

small_0.png

thumbnail_0.png

0.png

large_8.png

medium_8.png

small_8.png

thumbnail_8.png

8.png

large_1.png

medium_1.png

small_1.png

thumbnail_1.png

1.png

large_2.png

medium_2.png

small_2.png

thumbnail_2.png

2.png

large_3.png

medium_3.png

small_3.png

thumbnail_3.png

3.png

large_4.png

medium_4.png

small_4.png

thumbnail_4.png

4.png

large_5.png

medium_5.png

small_5.png

thumbnail_5.png

5.png

large_6.png

medium_6.png

small_6.png

thumbnail_6.png

6.png

large_7.png

medium_7.png

small_7.png

thumbnail_7.png

7.png

This website was created on a customer order for Michael Müller. He works as a certified forest educator in the southwest of Germany, but also in other places.

Isegrim Waldpädagogik

Next.js

Als ich die Hauptvorteile von Next.js sah, z.B den eingebauten Router und SSR/SSG war ich verliebt. Ich habe die meisten meiner privaten Projekte von React auf Next.js umgestellt und angefangen, es in Kundenprojekten zu verwenden.

Strapi

Ich verwende Strapi in Privat- und Kundenprojekten, weil es sehr schnell und einfach zu bedienen ist und sich leicht für eigene Bedürfnisse erweitern lässt.

Tailwind CSS

TailwindCSS ist mein bevorzugtes "Framework" für Kundenprojekte. Es ist super einfach zu bedienen, hält die Benutzeroberfläche konsistent und ist auch sehr kompakt.

TypeScript

Ins kalte Wasser geworfen, als ich eigene VS-Code-Erweiterungen entwickeln wollte, musste ich TypeScript lernen. Jetzt verwende ich es überall wegen seiner Typsicherheit und perfekten Codevervollständigung.

Docker

Tim Bortscheller

Diese Website wurde im Rahmen eines Kundenauftrags für Tim Bortscheller erstellt. Er ist als fachlicher Berater in der Zerspanung zuständig und konnte mit Hilfe der Website sehr schnell wachsen.

Als Backend/CMS wird Strapi verwendet. Das ermöglicht das Einpflegen neuer Inhalte, ohne das Frontend neu bauen zu müssen.

Das Frontend ist zusammen mit TailwindCSS in Next.js implementiert.

This website was created as part of a customer order for Tim Bortscheller. As a technical consultant, he is responsible for machining and was able to grow very quickly with the help of the website.

TBW Werkzeuge

Tobias Wälde

Online gibt es viele Tools für fast alles. Anstatt Lesezeichen für die Tools hinzuzufügen, die ich regelmäßig verwende, habe ich einfach eine kleine WebApp erstellt, mit der ich das alles in einer App tun kann. Siehe unten für weitere Informationen über die Funktionalität.

Der Passwortgenerator hat mehrere Möglichkeiten, den Zeichensatz und die Länge des Passworts zu ändern. Ich habe auch ein Kontrollkästchen hinzugefügt, um schnell eine vordefinierte Voreinstellung zu verwenden. Durch Aktivieren von 'Auto Clipboard' wird das Passwort nach dem Generieren automatisch in die Zwischenablage kopiert.

Passwortgenerator

Im Abschnitt "Bcrypt" können Sie ein Passwort mit Bcrypt verschlüsseln und entschlüsseln.

Bcrypt

Im Abschnitt "Hash" können Sie Hashes mit einigen gängigen Hash-Algorithmen generieren.

Hash

Ich verwende dieses Tool hauptsächlich, um meine Kontaktdaten zu verschlüsseln, um sie auf Webseiten zu verwenden, ohne jeden Tag tausende E-Mails von Spambots zu erhalten.

HTML Entity

large_01.png

medium_01.png

small_01.png

thumbnail_01.png

01.png

large_02.png

medium_02.png

small_02.png

thumbnail_02.png

02.png

large_03.png

medium_03.png

small_03.png

thumbnail_03.png

03.png

large_04.png

medium_04.png

small_04.png

thumbnail_04.png

04.png

large_05.png

medium_05.png

small_05.png

thumbnail_05.png

05.png

large_06.png

medium_06.png

small_06.png

thumbnail_06.png

06.png

large_07.png

medium_07.png

small_07.png

thumbnail_07.png

07.png

large_08.png

medium_08.png

small_08.png

thumbnail_08.png

08.png

There are lots of tools for almost everything online. Instead of adding bookmarks for the tools I use regulary I simply created a small WebApp which allows me to do that all in one app. See below for more information about the functionality.

Password Generator and Tools

React

React war mein erster Kontakt mit moderner Webentwicklung. Im Laufe der Jahre verbrachte ich viel Zeit in mehreren Kursen, um alles darüber zu lernen.

Express.js

Ich habe angefangen, Express.js zu lernen, weil es einfach ist, kleine und größere APIs zu schreiben.

Passwort-Generator und Werkzeuge

Diese Webapp ist die Steuerungsschnittstelle meines maßgeschneiderten Smart Homes.

Als MQTT-Broker habe ich einen Raspberry Pi verwendet. Ich habe Skripte für mehrere NodeMCUs (kleine leistungsstarke Boards mit WiFi) geschrieben, um auf MQTT-Nachrichten zu reagieren. Diese NodeMCUs senden serielle Signale an PWM-Servocontroller. Diese Controller sind mit Transistoren verbunden, die die Farbe und Helligkeit der LED-Streifen steuern und Relais ein- und ausschalten.

In dieser Version meines Smarthomes habe ich nur ein Backend. Das Backend ist für die Authentifizierung zuständig, bündelt Fritz! API und Philips Hue API und verarbeitet MQTT-Nachrichten.

Das Frontend ist wieder eine React Webapp. Es verkürzt die Aktualisierungszeit für meine Eltern und ermöglicht mir so, mein Smarthome von jedem Gerät aus zu steuern.

Spezialisiert auf

App-Entwicklung

Web-Entwicklung

Technische Hilfe

Ausgewählte Projekte

Smarthome (v2)

Isegrim Waldpädagogik

TBW Werkzeuge

Passwort-Generator und Werkzeuge

Smarthome (v3)

Schönenberger Messer

Was meine Kunden über meine Arbeit sagen

Kontaktieren Sie mich

Nachricht senden