Blog: Latest Entries (15):


DIY Überwachungskamera Setup

Bei Heise gibt es von Techstage einige Artikel über Sets von Überwachungskameras mit Netzwerk-Recordern und Teilweise mit Monitoren. Einmal fällt auf, dass die Begrifflichkeiten aus einer Zeit zu stammen scheinen in dem noch auf Videobändern aufgezeichnet wurde und andererseits fällt auch auf, dass die Preise mit min. 220 Euro doch schon sehr teuer sind. Gerade das Bild des offenen IP-Recorders von Abus zeigt ganz klar, dass hier sehr wenig "Magic" im Spiel ist, sondern diese Sets meistens nur aus einer Ansammlung von Standard-Komponenten bestehen die mit Standard-Protokollen unter einander kommunizieren.

Gerade das fällt in den Artikeln auf, dass nicht einmal der Begriff ONVIF fällt, der diese ganzen Sets relativ schnell entzaubert, wenn es sich nicht gerade um extrem proberietäre Cloud-Lösungen geht (bei China-Produkten bedeutet der Begriff Cloud meistens einfach nur FTP-Upload). Wenn man nun keine 220 Euro ausgeben kann oder möchte und trotzdem eine gute Lösung haben möchte, kann auf andere Komponenten zurück greifen, die genau so sich über ONVIF verbinden lassen und dabei noch sehr viel günstiger und teilweise hochwertiger sind. Die Einrichtung ist dann auch nicht komplizierter als bei den normalen China-Lösungen.

Wir werden ein Set aus einem "IP-Recorder" und 2 Kameras für weniger als 200 Euro zusammen stellen und dabei 1920x1080 als primäre Auflösung nutzen. Leider gibt es meine präferierte IP-Kamera nicht mehr zu kaufen, aber da WLAN sowie nett zu haben ist, nehmen wir die WLAN-Varianten. WLAN ist sowie so eine eher zu vernachlässigende Sache, wenn man eine Outdoor-Lösung anstrebt. Man muss immer beachten, dass man die Kameras mit Strom versorgen muss.
Die Netzteile sind zumeist nicht wetterfest und man müsste Verlängerungskabel verwenden. Damit man wetterfest bleibt ist die beste Lösung outdoor-CAT6 Kabel für PoE (Power over Ethernet). Wenn man also schon Ethernet-Kabel mit einem PoE-Switch für die Stromversorgung nutzt, ist es kaum Mehraufwand, das ganze mit dem vorhanden Netzwerk zu verbinden und hat damit zu meist auch eine bessere Verbindung als wenn jede Kamera einzeln sich mit dem WLAN verbinden würde. Bei Outdoor ist WLAN als eher optional, falls man irgendwie eine Kameras direkt neben einer Steckdose anbringen kann.

bbcode-image
PoE Hub aus China


Indoor sieht es natürlich ganz anders aus. Hier ist WLAN schon sehr praktisch, weil hier auch keine wetterfeste Stromversorgung von Nöten ist.

Aber egal ob indoor oder outdoor angestrebt ist, der zentrale Punkt bleibt der "IP-Recoder". Aber was ist so ein Recorder überhaupt? Auf der einen Seite ist es ein einfacher Netzwerkspeicher, aber auf der anderen Seite bietet er auch Motion-Detection und übernimmt die Aufzeichnung der Bilder und Videos. Meistens können die Kameras dieses aber schon selber und man braucht nur einen Netzwerkspeicher wie ein NAS oder eine Fritzbox. Eine Fritzbox mit einer externen Festplatte könnte also schon reichen solange die Kameras die Daten per FTP hochladen können. Aber man müsste für die Live-Ansicht jede Kamera direkt ansteuern (P2P-Modus mal ignoriert). Gerade diese Zentralität und Einheitlichkeit in der Konfigurierung, wenn man verschiedene Kameras verwenden sollte, machen so einen Recorder sehr praktisch. Zum Glück muss so ein Recoder nicht teuer sein.

Variante Mini-PC:
Ein Mini-/Tiny-PC von HP oder Lenovo ist nicht teuer und bietet sehr viel Leistung, im vergleich zu den Varianten aus den Sets bei Techstage. Ein i3 mit 4-8GB RAM ist sehr viel leistungsfähiger als ein ARM Singleboard-Computer. Auch kann man hier einfacher eine große HDD oder SSD einbauen und mit externen Festplatten erweitern und spart sich damit ein zusätzliches NAS. Auch haben diese PCs mehrere USB-Anschlüsse für USB-Kameras (was indoor eine gute Alternative zu IP-Kameras sein kein). Wenn eine Windows-Version dabei ist, kann man diese nutzen oder sich ein Linux installieren.
Mit Windows kann man iSpy verwenden, das sehr viele Einstellmöglichkeiten hat und dabei sogar einen viel Arbeit abnimmt, in dem z.B. ONVIF-Kameras fast automatisch gefunden und eingerichtet werden. Die Motion-Detection funktioniert sehr zuverlässig und auch ein zusätzlicher FTP-Upload ist möglich. Der Nachteil ist, dass es eben eine Windows-Programm ist und man somit nicht einfach die Oberfläche auf ein Smartphone holen kann.
Mit Linux hat man die Möglichkeit motionEye zu verwenden, dass man als Package installieren kann. Diese Lösung bietet eine Web-UI an, die sowohl auf Desktops als auch Smartphone gut funktioniert. Man muss aber teilweise RTSP-Urls per Hand eingeben und bekommt alle Einstellmöglichkeiten direkt und ungefiltert präsentiert. Dennoch ist die übersichtliche Ansicht egal ob auf dem Desktop oder dem Smartphone immer sehr gut und leicht und schnell zu bedienen. Wenn man also auch mal von Unterwegs einen Blick auf die Kamera-Stream werfen will, halte ich motionEye für die bessere Lösung.

bbcode-image
Ein Fujitsu Thinclient mit x86-64 Prozessor


Variante ARM-SBC:
Wer einen Raspberry PI oder Orange Pi hat (als Set zwischen 20 und 40 Euro) kann mit einer 32GB SD-Karte und motionEye OS sich eine gleichwertige Lösung in sehr günstiger, kompakter und stromsparender Version zusammen stellen. motionEye OS auf der SD-Karte am PC installieren, dann in den ARM-PC stecken und einschalten. Nach 1-2 Minuten kann man die Web-UI aufrufen und mit der Einrichtung der ersten Kamera beginnen. Die Downloads findet man hier : https://github.com/ccrisan/motioneyeos/releases

bbcode-image
Orange Pi One Kompletset


Egal welche Variante man nimmt sollte der Computer nahe dem Router stehen und benötigt so kein WLAN sondern nur ein kurzes LAN-Kabel. Bei der PC-Variante braucht man noch einen Monitor, eine Tastatur und eine Maus. Bei der ARM-Variante reicht eine SD-Karte, weil die Einrichtung rein über die Web-UI erfolgen kann (SSH ist natürlich auch möglich, aber nicht zwingend nötig).

Da wir nun einen "Recoder" haben, mit dem wir USB- und ONVIF-Kameras bedienen können brauchen wir nur noch die Kameras und etwas Zubehör.

bbcode-image
WLAN Outdoor-Kamera


Outdoor:
2x ieGeek FullHD WLAN (schwarz ist unauffäliger als weiß) = 110 EUR
2x 15m CAT6 Kabel (oder was man eben braucht) = 21 EUR
1x Universal-Netzteil = 13 EUR
1x PoE-Hub = 28 EUR
2x PoE-Adapter = 8 EUR

Wenn man dazu ein Orange PI One Set von AliExpress rechnet ist man sehr genau bei 200 EUR Gesamtpreis. Wenn man PoE-Hub und Adapter auch in China bestellt, kann man dort auch nochmal etwas Geldsparen. Die Kameras können auch direkt per FTP auf das NAS einer Fritzbox schreiben.

Indoor:
2x ieGeek FullHD WLAN (schwarz ist unauffäliger als weiß) = 110 EUR

Indoor muss eine Steckdose in der Nähe sein und man kann sich den ganzen PoE-Part ersparen bzw. einsparen. Aber es ist zu überlegen im Haus kleinere Kameras zu verwenden, die weniger direkt ins Auge stechen, wenn man nicht gerade dadurch einen abschreckenden Effekt erzielen will (in Ladengeschäften sollten Kameras immer gut sichtbar sein).

Wenn man die Kameras mit dem WLAN verbinden möchte ist die einfachste Einrichtungsart, die Kamera per LAN-Kabel einmal an den Router zu hängen und dann per Web-Browser auf die Kamera zu zugreifen und dort das WLAN einzustellen. Alle anderen Lösungen waren bis jetzt immer umständlicher oder funktionierten garnicht. Ich halte wenig davon die Kameras per Smartphone-App einzurichten, weil man gerade bei der Eingabe von Text und WLAN-Schlüssel mit einer echten Tastatur sehr viel schneller ist.

Wem 960p als Auflösung der Kameras reicht (selbst 720p ist im Indoor-Bereich oft ausreichend) kann bei den Kameras noch so um die 15 EUR pro Stück sparen.

Das wichtigste Werkzeug hier ist die Übersicht der Netzwerk-Geräte und IP-Adressen des Routers oder auch das Programm ONVIF Device Manager.

Während die Installation von motionEye auf einem ARM-SBC und iSpy auf Windows sehr einfach ist, ist die Installation von motionEye auf einem Mini/Tiny PC unter einem Ubuntu-System leicht aufwendiger. Dafür hat man die Vorteile, dass man ein komplettes Linux-System hat und den PC auf für andere Serveraufgaben verwenden kann oder den PC auf direkt mit einem großen Monitor verbinden kann und Live-Streams der Kameras anzeigen kann (localhost im Webbrowser öffnen und man hat seine UI). ARM-SBC können das an sich auch, aber hier sind oft Grafik und Leistung nicht dafür ausgelegt viele Aufgaben auf einmal zu erledigen.

Hier habe ich ein mal zusammen getragen wie man motionEye auf einem Fujitsu Futro S900 installieren kann. Dieser PC kostet um die 30 Euro bei Ebay und mit einer mSATA SSD und einem WLAN-Stick bekommt man extrem flexibelen kleinen und günstigen PC für viele Anwendungszwecke.


sudo apt-get install motion ffmpeg v4l-utils
sudo apt-get install python-pip python-dev curl libssl-dev libcurl4-openssl-dev libjpeg-dev
sudo apt-get install python-setuptools
sudo apt-get update
sudo apt-get upgrade
sudo pip install motioneye
sudo mkdir -p /etc/motioneye
sudo cp /usr/local/share/motioneye/extra/motioneye.conf.sample /etc/motioneye/motioneye.conf
sudo mkdir -p /var/lib/motioneye
sudo cp /usr/local/share/motioneye/extra/motioneye.systemd-unit-local /etc/systemd/system/motioneye.service
sudo systemctl daemon-reload
sudo systemctl enable motioneye
sudo systemctl start motioneye


Danach kann man über den Port 8765 die motionEye Web-UI aufrufen.

Man kann ohne Probleme viele USB- und IP-Kameras anschließen und hat keine Probleme mit Updates und kompatiblen Kameras, was bei Komplettsets schnell passieren kann, weil hier alle ONVIF kompatiblen Kameras funktionieren. Während mein Setup mit dem Futro S900 Thin-Client eine eher eingeschränkte Leistung hat, kann man mit z. B. Lenovo Tiny-PCs und i-Serie CPUs auf kleine Geschäfte oder mittelgroße Gebäude und Gelände überwachen (mit ~10 Kameras).

Um bei ONVIF-Kameras die URL für den Video-Stream heraus zu bekommen hilft der ONVIF Device Manager.

bbcode-image
RTSP-URL einer ONVIF-Kamera in motionEye

Hier sieht man wie eine ONVIF-Kamera per RTSP angebunden wird.

Wer iSpy verwendet, hat den Vorteil, dass auch eingebaute Microphone von Kameras ausgewertet werden können und bei bestimmten Geräuschen ein Alarm ausgelöst werden kann. Plugins für die Erkennung von KFZ-Kennzeichen oder QR-Codes gibt es auch.

Wenn man sich also für eine "Selbstbaulösung" entschiedet, kann man viel Geld sparen und bekommt zusätzlich noch einen sehr viel leistungsfähigere Recorder für einen Bruchteil des Geldes. Bei dem Preis für die Abus-Lösung (siehe den Techstage-Test), bekommt man einen refurbished PC mit i3 oder sogar i5 CPU und mehr Festplattenspeicher und kann sicher trotzdem die selben Kameras verwenden.

Meinung zu Solid

Mal meine Ansichten zu Tim Bernes-Lees Solid. Kurz: Ich halte von der Idee garnichts. Grund: Die Benutzer. Ich mag ja dezentrale Lösungen und selbst Dateien hosten ist oft günstiger als OneDrive oder DropBox. Nur die Idee, dass durch diese Pods die großen Konzerne weniger Datensammeln und nutzen würden halte ich für eine falsche Annahme.

Denn es ist ja nicht so dass Google, Facebook und andere durch das Web ziehen und einfach Daten und Bilder klauen. Diese Daten werden ihen ja von den Nutzern bereit gestellt. Aber die Benutzer bekommen ja auch was dafür. Sie bekommen kostenlosen Zugang zu den Diensten. Es ist ja ein Tausch, den die Menschen eingehen und ich glaube kaum, dass sich da was ändern würde.

- Es beginnt schon beim Anbieter für den Pod-Speicher. Keiner wird dafür zahlen wollen. Deswegen wird am Ende wieder in Daten bezahlt werden.
- Soziale Netzwerke wie Facebook haben ihre AGB, um dabei da mitmachen zu dürfen, muss man diese annehmen. Am Ende ist es denen egal, ob man die Text da schreibt und die Bilder dort hoch lädt oder man denen eine URI übermittelt, wo sie die Inhalte finden
- Suchen und Werbung, wo die meisten Daten gesammelt und ausgewertet werden.. das ist da von gar nicht betroffen

Außerdem werden die Daten per Caching immer bei den Diensten zwischengespeichert, weil kein normaler Benutzer eine entsprechende Internetanbindung hat, um wirklich selbst zu hosten und kaum einer wird einen V-Host administrieren können oder wollen.

Das Argument, dass dezentrale Netzwerke aber sehr gut funktionieren (wie Mastodon), zählt nicht, weil es eben oben schon so funktioniert und man eher untersuchen sollte warum es funktioniert, bevor man etwas entwickelt, was sofort so viele Probleme offenbart, wenn man nur länger als 10min drüber nachdenkt (ind in den News-Foren fallen die Probleme fast allen sofort auf).

Man muss Dinge wie Mastodon cool machen.. dann lösen sich die Probleme von ganz allein.

Docker und wait-for-it

Wer kennt das Problem nicht? Der Java-Appserver ist schon beim hochfahren, während der DB-Server noch Daten importiert und Hibernate fängt an wild Exceptions zu werfen.

Die Lösung ist das Script wait-for-it, das einfach wartet, bis ein Server auf einem bestimmten Port erreichbar ist.


FROM openjdk:12-alpine

RUN apk add --no-cache bash
ADD utils/wait-for-it.sh /wait-for-it.sh
RUN chmod +x /wait-for-it.sh

COPY /build/your-springboot-app.jar /app/

EXPOSE 8080

ENTRYPOINT [ \
"/wait-for-it.sh", "db:3306", "--", \
"java", \
"-noverify", \
"-XX:TieredStopAtLevel=1", \
"-Djav.security.egd=file:/dev/urandom", \
"-Dspring.jmx.enabled=false", \
"-jar", \
"/app/your-springboot-app.jar" \
]


Bargeldloses Bezahlen und die Mentalität einiger Menschen

Ich bin über diese Artikel bei T3N gestolpert, der ein Thema aufgreift, dass mir auch in letzter Zeit öfters auffiel. Es geht um das Bezahlen mit Bargeld. Das letzte mal wurde mir der Konflikt in diesem Bereich zu Weihnachten wieder deutlich, wo man viel Bargeld geschenkt bekommt. Bei der Erzählung, dass man nun ja mal wieder zur Bank müsse, um das ganze Bargeld einzuzahlen, erntete man von verschiedenen Seiten doch sehr ungläubige Blicke.

Wieso sollte man das Geld zur Bank bringen? Man müsse dann doch kurze Zeit später wieder hin und es wieder abheben!

Wenn dann gesagt wurde, man würde ja an sich nur per Karte zahlen, gingen die Gespräche in zwei verschiedene Richtungen:

1) Was ist aber bei den Sachen, wo du Bargeld brauchst?
Bei bestimmten Käufen bräuchte man das Bargeld ja einfach, weil man dort nicht mit Karte zahlen könne. Das stand so im Raum und alle Leute nickten zustimmend. Auf die Frage, wo das dann wäre, fingen alle an nachzudenken und kamen zum Schluss, dass man das nicht wisse. Es klang für alle vollkommen einleuchtend und erst beim genauen betrachten fiel allen auch auf, dass wir nicht mehr 1990 haben, wo es bei einigen Geschäftsbereichen noch "on vogue" war, Kartenzahlungen aufgrund von Preisen oder persönlichen Befinden per se abzulehnen. Aber heute kosten Zahlvorgänge über die klassische Maestro-Karte kaum noch was und die Miete der Geräte ist auch kein Kostenfaktor mehr. Selbst auf Weihnachtsbasaren kann bei den Ständen oft schon mit Karte bezahlen.

2) Dann kannst du aber mal mit Bargeld bezahlen!
Von dieser Gruppe von Menschen wird ein riesiger Unterschied zwischen dem "klassischen" Bezahlen mit Bargeld und dem bargeldlosen Bezahlen gemacht. Zahlen mit Karte wird in Notfällen benutzt, aber auch gerade bei hohen Beträgen, wo viele Angst hätten mit so viel
Bargeld rum zu laufen, wird Bargeld besonders vorgezogen. In deren Darstellung ist einfach der Bezahlvorgang mit Bargeld hochwertiger als bargeldloses bezahlen. Es geht nicht darum, das es Vorteile hätte oder ähnliches, sondern es besteht wirklich die Annahme, dass es einen Unterschied in Qualität des Vorganges gibt, auch wenn die Ergebnisse gleich sind. Das sind auch oft die Leute die Auszüge bei der Bank holen und wichtige Schreiben per Hand aufsetzen (und nicht am PC schreiben und Ausdrucken). Wenn man es genau nimmt sind es diese Leute die somit bewusst auch viel Sicherheit verzichten (Diebstahl von Bargeld.. keine PIN.. alles per Handschreiben.. verschicken und keine Kopie mehr haben, weil es nur ein Original gibt). Da kann man mit Argumenten nichts ausrichten, weil die höhere Qualität inhärent ist und damit keinem Beweis benötigt.
Die Vorstellung wird dann auch oft vorgeschoben, um sich auf keinen Fall mit modernen oder neueren Technologien und Entwicklungen beschäftigen zu müssen, weil diese per se mit einer schlechteren Qualität des Vorgangs gleich gesetzt werden. Lebensmittel online bestellen und damit mehr Freizeit haben? Unsinn... im Laden einzukaufen ist besser und Hochwertiger, auch wenn man am Ende die selben Waren zu hause stehen hat.

Das beschreibt auch oft die Probleme Digitalisierung und Automatisierung, die gerade die Jobs gefährden, die oft solche Ansichten vertreten. Aber da wird keine Problem gesehen, weil direkt damit argumentiert wird, dass die Arbeit des Menschen eine höhere Qualität habe.
Nicht das Ergebnis! Aber der Vorgang der zu dem Ergebnis mit der selben Qualität führt. Daher wären Faktoren wie Kosten und Zeit auch relevant.

Wer jetzt glaubt ich schreibe hier von Menschen ab 50 aufwärts.. nein.. ich habe das genug bei Leuten erlebt die noch nicht 30 sind. Ich bin gespannt, wie lange solche Meinungen noch überdauern können. Wenn man Leute über 60 sieht, die nie ein Smartphone haben wollten, weil es viel zu kompliziert sei. Internet und Homebanking sein ja sowie so unsicher und zu kompliziert. 5 Jahre später wird alles dies von diesen Menschen wie selbst verständlich verwendet und ein Verzicht darauf stünde auch gar nicht mehr zur Diskussion. Die Welt entwickelt sich weiter und das betrifft nicht nur einzelne Generationen sondern immer alle Menschen auf einmal. Alle müssen sich anpassen und keiner kann es in dem Sinne aussitzen (durch wegaltern).

Ein kleiner heißer Blick in die Vergangenheit

Wer erinnert sich noch an den FAST- AV-Master? Eine PCI Videograbber-Karte für Win9x, die in voller PAL-Auflösung aufnehmen konnte. Mit Ulead Media Studio Pro konnte man echt gute Videos schneiden. Hardware MJPEG-Encoder.
Nur wenn man damit 30min Video aufgenommen hatte, sollte man aufpassen den hinteren Teil der Karte zu berühren... der war dann extrem heiß. Aber kein Kühlkörper drauf... hätte echt geholfen.

bbcode-image


Den DV-Master habe ich dann doch leider nie benutzt. Eine einfache Firewire-Karte (Miro/Pinnacle DV200) hat gereicht.

JavaScript Values von Sub-Objects per Pfad-String

Wenn man sich generische Componenten in React oder Vue bastelt, wie Lists oder Grids/Tables kommt man schnell zu dem Punkt, wo man Werte aus einem Object extrahieren muss. Z. B. wenn man sich in einer Table eine Column definiert. Man könnte eine function rein reichen, die auf die konkrete Implementierung des Item zugeschnitten ist, aber oft will man nur die vorhandenen Werte im Object zur Anzeige bringen und nicht zu viel schreiben.

Wenn man einen Key hat und auf der ersten/obersten Ebene agiert wie bei item.id ist alles einfach. Bei item.sub.moreSub.verySub.id ist es schon schwieriger.. naja eigentlich nicht und jeder hat so etwas schon mal gebastelt. Hier meine Lösung die vielleicht jemanden 5 Minuten Arbeit ersparen kann :-)


function getObjectValue(obj, path){
let curObj = obj;
const parts = path.split(".");
for(let i = 0; i < parts.length; i++){
if(curOjb[parts] !== undefinded){
curObj = curObj[parts];
}
else {
return undefined;
}
}
return curObj;
}



getObjectValue({sub:{id: 23}}, "sub.id") == 23


React mit Hooks.. echt praktisch

Manchmal hat man bei React trotz besserem Wissens sich Strukturen gebaut, die es schwierig machen, den Datenfluss sauber abzubilden. So passierte es plötzlich, dass in einer Child-Component etwas geändert wurde und diese Änderung es verlangte, dass in einer Geschwister Child-Component eine Liste neu geladen werden sollte. Diese Component lud die Liste von einer REST-API selber und bekam die Liste nicht von der Parent-Component. Doof. Per Callback wurde die Parent-Component von der Änderung unterrichtet, aber diese konnte das Neuladen ja nicht so einfach anstoßen, weil es an sich keine State-Änderung gab.

Man braucht ein Flag, dass sich ändert, wenn ein Refresh der Child-Component nötig wurde. Da reicht ein bool-Flag, das bei jeder Änderung seinen Zustand ändert.

Hier wird es einmal sehr gut erklärt, aber mit den neuen Hooks von React geht es sehr elegant umzusetzen.

Hier der Code aus der Parent-Component:

const[trigger,setTrigger] = useState(false);

return (
<>
<child1 onSubmit={() => {setTrigger(!trigger)}}/>
<child2 refresh={trigger}/>
</>
);


Damit child2 nun was laden kann muss man nicht mehr groß selbst prev-props mit next-props vergleichen sondern kann useEffect() verwenden:


useEffect(() => {reloadList()}, props.refresh);


Schön einfach und kompakt. Das man mit useEffect() direkt auf einzelne props/Änderungen reagieren kann, macht mir React schon sehr viel sympathischer. Erinnert mich an Watcher und Proxies aus Vue, nur sehr viel einfacher zu verwenden.

Minimal Vue + Bootstrap Boilerplate

Für einfaches und schnelles Prototyping ohne viel Struktur oder Komponenten. Z. B. zum Testen von Logik oder REST-API Abfragen.


<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Minimal Vue.js + Bootstrap 4 Boilerplate</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div id="app">
<h1 class="text-center">{{message}}</h1>
</div>
<script>
var app = new Vue({
el: '#app',
created: function () {

},
beforeDestroy: function () {

},
data: {
message: "Hello Web!"
},
methods: {

}
});
</script>
</body>
</html>


An sich für genau das wo für ich immer AngularJS verwendet habe. Werde ich hoffentlich demnächst für PWA erweitern.

Form Generatoren in den verschiedenen Frameworks

Ich hatte in den letzten Tagen etwas mehr mit verschiedenen Formular-Generatoren in verschiedenen JS-Frameworks zu tun. Vorraussetzung bei allen was, dass die JSON-Schema als Schema-Sprache unterstützten. Bis jetzt war keiner dabei der wirklich fehlerlos funktionierte. Ich kann jetzt nicht sagen, ob es nicht doch irgendwie an mir lag, aber falls jemand bestätigen kann, das ein Problem kein generelles Problem dabei ist, wäre ich doch sehr glücklich und würde mich noch mal genauer damit beschäftigen.

Vue:
FormSchema Native: lief erstmal ganz gut, aber wenn sich das Schema oder das Model im State geändert hat, würde die Form nicht neu gerendert. Wenn man eine Form-Component schreibt in die verschiedene Schemas rein gericht werden können zur Laufzeit ist das echt doof. Ansonsten machte es nämlich einen guten Eindruck.

React:
react-jsonschema-form: bis jetzt das Beste nur gibt es leichte Probleme wenn man $schema mit etwas anderen als dem default-Schema rein reicht. Aber ansonsten funktioniert bis jetzt am Besten. Auch mit 3 Forms auf der Seite.

AngularJS
Angular Schema Form: Wenn man nur eine Form auf der Seite braucht funktioniert es perfekt. Wenn ich aber zwei Forms mit zwei unterschiedlichen Schemas verwende, wollte die zweite Form nicht mehr rendern. Aber eine Form allein funktionierte echt super. Leider ist AngularJS aber ja nicht mehr wirklich supported und ich hätte lieber etwas für Vue gehabt, was genau so gut funktioniert.. eben dann auch mit 2-3 Form pro Seite. Edit: Problem hat sich in Luft aufgeloest...

Meine Suche geht weiter, weil ich Vue doch lieber mag als React. Oder am Ende doch selber schreiben oder ein andere auf JSON-Schema anpassen?




c't webdev 2019

bbcode-image


Es waren 3 lange und anstrengende Tage. Aber es gab viel neu oder erneut zu entdeckten. Vieles was man schon kannte und einges was einfach interessant war.

bbcode-image


Gerade die eher nicht technischen Themen wie Mob-Programming bei sipgate, "A Brief History Of the Internet" und UX waren sehr interessant und auch motivierend, selbst mal wieder mehr nach vorne zu gehen. Auch wurde sehr oft erwähnt, dass die Menschen, die Standards, Frameworks und eben die Dinge machen, mit denen man täglich arbeitet, auch nur ganz normale Entwickler sind und auch über jede Idee/Bugifx oder Mithilfe sehr dankbar sind.

bbcode-image


Und man solle nicht alte Fehler wiederholen sondern neue machen. Mehr Zeit für Experimente und keine Idee ist schlecht zu der Zeit der sie entwickelt wird, weil sie immer ein Problem löst. Ob sich die Lösung später als eher schlecht heraus stellt (wie Flash oder Java-Applets) muss sich erst noch zeigen.

Das mit wichtigste Thema war PWA (an sich kaum unterschiedlich zu den OWAs auf Firefox OS nur jetzt mit breiter Unterstützung), um Websites direkt zu Apps machen zu können und eine Interaktion mit dem Device zu erlauben.

Daher wird mein neues Experiment:
- PWA
- Vue.js für das Frontend
- Bootstrap 4 als CSS-Framework
- Fetch-API anstelle von Axios
- Daten werden nur von den momentan Teilnehmenden Devices bereit gestellt
- Die Plattform selbst hat keine klassische Persistenzschicht wie eine DB sondern bildet nur einen State für alle Devices ab
- also gibt es nur Daten-Caching aber keine Langzeitspeicherung
- JWT für den Login auf der Singlepage-App
- Backend mit Meecrowave oder Spring Boot.. da bin ich mir noch unsicher.. aber auf jeden Fall Java

Mal gucken was dabei raus kommt.

Hoffentlich dann nächstes wieder dort hin!

Older posts:

Möchtest Du AdSense-Werbung erlauben und mir damit helfen die laufenden Kosten des Blogs tragen zu können?