Blog: Latest Entries (15):


NodeJS: Development HTTPS Server

Manchmal braucht man schnell und einfach einen HTTPS-Server um z.B. eine App auszuliefern, die auf die Kamera des PC oder Smartphones per WebRTC zugreift. Das geht an sich ganz einfach wenn man weiß, was man alles braucht.

Mit yarn:

yarn build
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
sudo yarn global add http-server
http-server --ssl -c-1 -p 3000 ./build/


Mit npm:

npm run build
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
sudo npm -g install http-server
http-server --ssl -c-1 -p 3000 ./build/


Damit hat man direkt einen HTTPS-Server bei dem man nur noch das unsichere Zertifikat akzeptieren muss.

bbcode-image


Wenn man Windows verwendet muss man über die Bash (WSL) OpenSSL, NodeJS und NPM installieren und dann ist es wie unter Linux.. man befindet sich dann ja auch in einem Linux....

Ryze Tello Drohne: Ein kleiner Test-Bericht

Zeit für das Sommerloch in meinem Blog. Die Wärme, das Haus und alles mögliche benötigen gerade sehr viel Zeit, deswegen gibt es diesmal auch etwas für die Freizeit bevor es dann später wieder mit eher technischen Blog-Posts weiter geht.
Nach dem ich mir letztes Jahr eine günstige Drohne aus China geleistet habe und diese nach ganzen 5 Minuten Flug auch unglaublich warm wurde und sich dann entschied gar nicht mehr an zugehen, war es dieses Jahr mal Zeit für ein etwas besserer Drohne. Ich hatte jetzt nicht vor wirklich viel damit zu machen, weil mir da auch einfach die Zeit und die Ideen gerade fehlen.
Deswegen hielt ich eine günstige Marken-Drohne einfach für viel zu teuer. 300-400 Euro um da mal bei meinen Eltern auf dem Dorf etwas rum zu fliegen und Orte meiner Kindheit und Jugend mal von oben zu sehen sind einfach doch zu viel, gerade wenn man das Geld auch in das Haus oder eine Nintendo Switch investieren kann. Meine wundervolle Ehefrau schenkte mir dann zu Weihnachten eine Ryze Tello Drohne. Diese soll auf DJI und Intel Technoligie aufbauen, aber deckt eine Zielgruppe als die normalen DJI-Drohnen ab. Mit knapp 100 EUR auch wirklich günstig. Es ist mehr ein Spielzeug mit einer brauchbaren kleinen Kamera und es gibt ein SDK, falls man sich auch mal mit der Programmierung der Drohne beschäftigen möchte. Die Drohne ist natürlich auch eher klein und leicht.
Sie kann einen ruhig auf den Kopf fallen ohne dass man Angst vor Verletzungen haben muss und deswegen auch rechtlich einfacher ist als teurere und schwerere Drohnen.

bbcode-image


Aber erst einmal zur Ausstattung. Es gibt die Drohne, einen Akku und ein Micro-USB Kabel. Mehr nicht. Die Steuerung geschieht über das Smartphone per WLAN und App. Man soll auch Game-Controller verwenden können aber da war ich jetzt weniger motiviert das auszuprobieren. Ich habe das USB-Kabel durch ein altes Netzteil des Samsung Wave 1 (das mit OLED und Bada 2.1!) ersetzt und erst einmal den Akku lange geladen. Der Akku lädt lange und soll dann so 10-15min halten. Ich kann 5-10 Minuten bestätigen. Danach muss man wieder laaaaange laden. Also wer die Drohne auf einen Ausflug oder einen Besuch mitnehmen möchte, sollte sich ein paar Zusatzakkus und vielleicht ein zusätzliches Ladegerät dazu kaufen. Günstige Drohne aber das Zubehör ist mehr als optional!

Die App kann sich einfach über den Playstore installieren und das Smartphone verbindet sich schnell mit dem WLAN der Drohne. Alles ganz einfach. Dann kam der Start. Die alte und jetzt defekte China-Drohne machte viel Krach, stieg auf, eierte rum bis sie sich stabilisierte und flog dann recht schwerfällig und ungenau. Die Tell-Drohne wartete auf den Start-Befehl, stieg gerade nach oben und hielt sich stabil in der Luft. Die Steuerung ist auch auf dem Touchscreen sehr gut, so dass man Drehen und Bewegen mit beiden Daumen gut koordinieren kann.
Wenn man die Drohne einmal ausgerichtet hat, bleibt sie stabil, wobei bei meinen Tests jetzt nicht so viel Wind war.

bbcode-image


Fotos kann man über eine Taste machen und sie werden als PNG direkt auf dem Smartphone gespeichert. Belichtung ist bei der Drohne nicht immer ideal, falls Licht und Schatten zu höheren Kontrasten führen. Da muss man etwas durch die Ausrichtung ausgleichen, wie man es auch von der Smartphone Kamera-App gewohnt ist. Die Bildqualität ist natürlich im Vergleich zu einem guten Smartphone oder eine DSLR eher bescheiden, aber die Schärfe und die Farben sind soweit OK, dass man die Bilder für das Web oder Dokumentationen gut gebrauchen kann. Für Aufnahmen von Ferienhäusern und Grundstücken bei EBay-Kleinanzeigen oder kleinen Events reicht die Qualität alle mal und mit etwas Nachbearbeitung sind die Fotos auch für das Fotoalbum/-Verzeichnis ausreichend.

bbcode-image


Die Verzeichnungen an den Rändern sind da, aber für den Weitwinkel bei dem kleinen Objektiv noch recht gering.

Die Videoqualität mit 720p war jetzt nicht so wirklich berauschend. Wenn sie die Drohne bewegt, ist das Video sehr unruhig und wabbert oft etwas hin und her.

Laden ist super damit. Man fliegt den Landepunkt an bis die Drohne nicht mehr weiter runter will. Dann drückt man auf den "Landen"-Knopf und sie landet und schaltet sich ab. Die China-Drohne machte einfach immer eine Bruchlandung.

Aber für den Preis und für den privaten Gebrauch ist die Drohne wirklich sehr spaßig. SDK und EZ-Shot klingen sehr interessant und das Zweite werde ich sicher noch mal ausprobieren. Ich hoffe, dass ich auch insgesamt noch mal mehr Zeit finde mich damit zu beschäftigen :-)

Shopware: kernel.environment bool Fehler mit console

Es kann dazu kommen, dass beim Aufruf der console von Shopware 5 keine kernel.environment gesetzt ist. Bei Webserver Aufrufen wird diese ja zumeist in der conf des Apache gesetzt.

bbcode-image


Um jetzt die Environment (z.B. "production") direkt beim Aufruf der console zu setzen muss man die Option "e" setzen und schon geht alles.

bbcode-image



./bin/console -e production

IE11: Zombies und andere unangenehme Zeitgenossen

Jeder kennt es sicher. Man baut eine Webanwendung, mit ein wenig HTML5, ein wenig JavaScript und was sonst so an CSS und SVG dazugehört. Firefox ist glücklich, Chrome natürlich auch und sogar Safari beschwert sich nicht. Man hat alles geschafft und und will in den Feierabend gehen. Die Sonne lacht, die Laune ist gut und draußen brüllen die Vögel. Man will gerade den PC in den Energiesparmodus versetzen und aufstehen da zieht eine leichte kühle Brise auf. Der Himmel wird dunkel und der Atmen kondensiert direkt vor einem.. Gänsehaut und alle Haare stellen sich auf. Der Geruch von Tod und Verwesung steigen einen in die Nase. Raben krächzen aufgeregt von ihren Plätzen (es ist immer ein Fehler sich ein Büro mit Raben zu teilen....). Das ungute Gefühl übernimmt die Oberhand. Das Ticket des Grauens ploppt auf. Schon der Titel verrät, dass der schlimmste anzunehmende Unfall geschehen ist. Es kommt von der typischen Art von Mitarbeitern, die aus versehen mal einen Dämon beschwören oder das Tor zur Hölle öffnen. Diesmal ist es nur ein Zombie. Gut nicht einfach ein Zombie. Es ist wieder der Zombie, der jedes mal auftaucht in solchen Situationen. Nervig, man mag ihn auch nicht einfach weg schicken. Es ist die Art von Zombie, die in dein Haus eindringen wollen und, obwohl du schon alle Türen offen gelassen hast, immer nur gegen die Außenwand rennt. Um dein Haus hat sich schon eine Traube anderer Zombies gebildet, die dem einen dummen Zombie nur ungläubig dabei zu gucken, wie er immer und immer wieder gegen die Wand rennt.

"Mit dem Internet Explorer geht das nicht...". Du versuchst am Verwesungsgeruch fest zustellen, ob es der IE11 ist oder der Mitarbeiter eine noch ältere Version ausgebuddelt hat. Es ist nur der IE11, aber trotzdem würde ein Surströmming-Deo seinen Geruch schon ungemein verbessern.

Es bleibt nur eins übrig: Den Zombie verscheuchen, dem Mitarbeiter mitteilen, dass man sich morgen gleich als Erstes darum kümmern wird und sich einreden, dass Menschen die noch einen Internet Explorer benutzen es auch verdient haben in Probleme zu laufen.

Shopware: Logger pro Plugin in 5.6

Jeder der ein Plugin verwendet, das viele Daten hin und her schaufelt und dieses auch immer protokolliert, kennt das Problem von zu großen Log-Files. Gerne hätte man schon immer Log-Files für bestimmte Anwendungsfälle geschrieben. Mit 5.6 ist es jetzt möglich wenigstens pro Plugin ein eigenes Log-File zu nutzen.

https://github.com/shopware/shopware/blob/5.6/UPGRADE-5.6.md#plugin-specific-logger

Jetzt muss ich nur noch ausprobieren, wie man dass möglichst einfach auch zu < 5.6 kompatibel hält.

Fritzbox VPN unter Linux

Mit dem doch sehr kompliziert einzustellen openVPN von Linux kann sich leider nicht mit einer Fritzbox verbinden. Dafür braucht man sehr simple Konsolen Programm vpnc, das auch besonders gut ist, wenn man mehrere VPN-Verbindungen managen muss, da man für jede Verbindung eine eigene Conf-Datei anlegen kann und diese auch ohne Probleme zwischen Systemen hin und her kopieren kann.

Erstmal braucht man vpnc


sudo apt-get install vpnc


Danach muss eine Config-Datei mit den Verbindungsdaten angelegt werden:

nano ~/vpn.conf


mit dem Inhalt:

IPSec gateway _myfritz_url_without_port_
IPSec ID _vpn_username_
IPSec secret _ipsec_secret_
Xauth username _vpn_username_
Xauth passwort _vpn_password_


Alle Daten bekommt man nach dem Anlegen eines VPN-Benutzers in der Fritz direkt angezeigt und man sie sich in der Benutzerverwaltung immer wieder anzeigen lassen.

bbcode-image


Der Verbindungsaufbau geschieht auch über die Konsole:

sudo vpnc ~/vpn.conf


Nun befindet man sich, wenn die Zugangsdaten richtig waren, im Netz der Fritzbox und kann auf alles im Netzwerk wie ein NAS oder MotionEye zugreifen.

Das Trennen der Verbindung geht auch sehr einfach:

sudo vpnc-disconnect

Shopware 6: Units zuerst anlegen!

Ich habe gerade die Early Access Version von Shopware 6 installiert und erst einmal einen Hersteller und einen eigenen Artikel angelegt.

Das Problem war, dass ich keine Scale-Unit mit angeben konnte, da ich einfach noch keine angelegt hatte und nicht alle Artikeldaten nochmal neu eingeben wollte habe ich das Feld einfach leer gelassen. Speichern klappte ohne Probleme.

bbcode-image


Die Kategorie funktionierte dann aber nicht mehr.

bbcode-image


Zum Glück war mir das ja direkt aufgefallen, dass ich da was nicht eingeben konnte und habe erst einmal versucht eine Unit anzulegen und zu ergänzen.

bbcode-image


Danach funktionierte es dann auch alles.

bbcode-image


Da muss man also aufpassen, weil fehlende Eingaben noch viel kaputt machen können. Hab da auch gleich ein Issue dafür aufgemacht.

Shopware: ES Config

Hier einmal eine Default-Config für ElasticSearch unter Shopware 5. Gerade mit der Composer-Installation ist es sehr praktisch alle benötigten Felder direkt mal zu sehen.


'shopware.es' => array(
'prefix' => 'sw_shop',
'enabled' => false,
'write_backlog' => true,
'number_of_replicas' => NULL,
'number_of_shards' => NULL,
'total_fields_limit' => NULL,
'max_result_window' => 10000,
'wait_for_status' => 'green',
'dynamic_mapping_enabled' => true,
'batchsize' => 500,
'backend' => array(
'batch_size' => 500,
'write_backlog' => false,
'enabled' => false,
),
'client' => array(
'hosts' => array(
0 => 'localhost:9200',
),
),
'logger' => array(
'level' => 400,
),
'max_expansions' => array(
'name' => 2,
'number' => 2,
),
'debug' => false,
),

Alienware vs neueres Lenovo Y520

Was hat sich eigentlich seit dem Kauf vom Alienware-Notebook (damals gebraucht für 750 EUR über Ebay-Kleinanzeigen) so getan.
Gaming-Notebooks sind meistens vergleichbar mit dem Mobile-Workstations des Herstellers, nur eben mit mehr RGB-LEDs. Das Alienware liefert immer noch gute Dienste bei Arbeit und Spielen. Es wurden nur mal die HDDs gegen eine SSD ausgetauscht.

Ich hab mit mal ein Lenovo Y520 als Vergleichsobjekt raus gesucht.

CPU: Beide haben ein i7 der damals vorletzten Generation.
RAM: Hier liegt das Alienware mit 16GB sogar vorne
GPU: GTX 1050 gegen eine nachgerüstete Quadro 3000K, da sehe ich die GTX 1050 in der gesamt Leistung + Stromverbrauch vorne
HDD/SSD: 128GB M.2 ist nicht viel, aber ok. Das Alienware war für die damalige Zeit auch gut ausgerüstet. Berücksichtig man die Zeit, liegen beide an sich gleich auf
Display: beide gleich, 15,6" halte ich sogar für etwas handlicher
Keyboard: DE gegen UK. Könnte man umbauen, aber ich habe mit UK/US Layouts nie schlechte Erfahrungen gemacht (schon seit Pentium Pro und WinNT-Zeiten)

Garantie: gibt es bei Ebay-Kleinanzeigen nicht.. deswegen musste die Quadro auch auf eigene Kosten nachgerüstet werden

Preis: 600 EUR ist da echt gut, dafür dass es von einem Händler kommt.

Im zeitlichen Kontext war das Alienware günstig und Lenovo Y520 (refurbished) noch günstiger... aber das Alienware funktioniert nicht mehr wie am ersten Tag, sondern durch SSD und Quadro sogar noch viel besser und macht einfach auch jedes Wetter mit.

bbcode-image


Update: Das hier ist gerade auch 600 EUR teuer und gleicht alle Defizite des ersten Models aus. Y520 bekommt man also schon sehr günstig in guten Konfigurationen.. muss nicht immer Alienware/Dell sein.

Vue: Animations einbauen

Mit Vue.js kann man relativ einfach und schnell normale CSS3-Animations mit den State-Übergängen von Elementen verknüpfen.


<transition name="dialogbox">
<div class="overlay-content card" v-if="textDialog.show">
<h4 class="text-center card-header">{{ textDialog.title }}</h4>
<div class="text-field card-body">
{{ textDialog.content }}
</div>
<div class="text-center card-footer">
<button v-on:click="closeDialogs" class="btn btn-dark">close</button>
</div>
</div>
</transition>


Durch die Transition-Tag wird das Element eingeschlossen, dessen Änderung mit der Animation verknüpft werden soll. Der Name ist der der erste Teil des Animationsnamens.


.dialogbox-enter-active {
animation: open 0.8s;
}

.dialogbox-leave-active {
animation: open 0.4s reverse;
}

@keyframes open {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}


die erste Klasse wird beim Anzeigen verwendet und die zweite, wenn das Element aus dem DOM entfernt wird.

Neben v.id geht auch v-show.

Lombok.. nie wieder ohne

Jeder Java-Entwickler kennt es. Properties definieren und dann Setter und Getter erzeugen lassen. Wenn man was ändert, wird es nervig und wenn man was hinzufügt, muss man die fehlenden Methoden neu generieren lassen. Das geht an sich immer schnell, ist aber doch immer nervig.

Lombok übernimmt die Erzeugung dieser Methoden zur Compiling-Zeit. Die IDE benötigt ein Plugin und der Rest wird dann über Maven erledigt.

bbcode-image



<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.4</version>
<scope>provided</scope>
</dependency>


Dadurch spart man Zeit und der Code wird sehr viel übersichtlicher.


package de.hannespries.globalstate;

import lombok.Data;

import java.util.Map;

@Data
public class Action {
private String token;
private String action;
private Map<String, Object> payload;

public Action(){

}

public Action(String action){
this.action = action;
}

public Action(String token, String action){
this.token = token;
this.action = action;
}
}

AngularJS + IE: OnChange mit Input und DataList

AngularJS hat beim IE (älter als Edge) ein Problem mit ng-change, wenn ein Input über eine DataList gefüllt wird. Dann wird einfach kein Event ausgelöst. Mit einer kleinen Hilf-Function und $scope.$applyAsync() in der Scope-Function kann man das aber reimplementieren.


function onChangeIE(value){
var ua = window.navigator.userAgent;
if((ua.indexOf('Trident/') > 0 || ua.indexOf('MSIE ') > 0) && ua.indexOf('Edge/') <= 0) {
angular.element(document.getElementById('my-ng-controller-element')).scope().myInputModel = value;
angular.element(document.getElementById('my-ng-controller-element')).scope().myNgChangeFunction();

}
}



<input type="text" list="thelist" oninput="onChangeIE(this.value)" id="input_pattern" ng-model="myInputModel" ng-change="myNgChangeFunction()"/>
<datalist id="thelist"></datalist>


Die beste Lösung wäre solche alten Browser nicht mehr zu supporten und dann vielleicht auch auf Vue.js oder eine aktuelle Angular-Version zu wechseln.

Aber für schnelles Prototypen, wo man wenig Code schreiben will, ist AngularJS noch immer sehr gut. Teilweise ist man so schnell damit, dass man während einer Diskussion die Ideen direkt nebenbei umsetzen und ausprobieren kann. Wenn man erst einmal viele Components schreiben muss, geht es nicht so gut, wie mit den AngularJS Templates und Dingen wie ng-options. Mit Vue.js ist man mit etwas Übung aber auch ähnlich schnell.

Docker: Fehlercode anpassen

Manchmal hat man einfach Scripts von anderen, die mit einem Fehlercode beendet werden und es ist vollkommen ok. Leider bricht bei so einem Fehler dann der Build-Process vom Docker-Image ab. Deswegen muss man den Fehlercode überschreiben.


RUN composer create-project shopware/composer-project my_shop --no-interaction --stability=dev; exit 0


Damit wird der Fehler wegen fehlender .env-Datei übergangen. Da man diese Datei an sich auch nicht braucht.

MinIO: Docker-Compose

Mit Docker-Compose kann man sich einfach eine MinIO-Instanz erzeugen und auch gleich benötigte Buckets erstellen, so dass man das Erzeugen der Buckets nicht im Code der Anwendung erledigen muss.


version: '3.3'

services:

minio:
image: minio/minio:RELEASE.2019-04-23T23-50-36Z
volumes:
- minio_data1:/data
ports:
- "9000:9000"
environment:
MINIO_ACCESS_KEY: minio
MINIO_SECRET_KEY: minioKey123
command: server /data

createbuckets:
image: minio/mc
depends_on:
- minio
entrypoint: >
/bin/sh -c "
/usr/bin/mc config host add myminio http://minio:9000 minio minioKey123;
/usr/bin/mc rm -r --force myminio/testbucket;
/usr/bin/mc mb myminio/testbucket;
/usr/bin/mc policy download myminio/testbucket;
exit 0;
"

volumes:
minio_data1:
driver: local

Docker: PHP Schnelltest

Falls man mal schnell ein PHP-Script testen will, kann man mit Docker-Compose das ganz einfach machen.


version: '3.3'

services:
http:
image: geerlingguy/php-apache:latest
ports:
- 8881:80
volumes:
- ./:/var/www/html:rw,delegated
command: ["/usr/sbin/apache2ctl", "-D", "FOREGROUND"]
restart: always


damit wird das aktuelle Verzeichnis unter localhost:8881 bereit gestellt.

Mit MySQL + Adminer (anstelle von Phpmyadmin) sieht es so aus:


version: '3.3'

services:
mysql:
image: bitnami/mysql:latest
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: test
MYSQL_USER: app
MYSQL_PASSWORD: app
volumes:
- ./devops/sql:/docker-entrypoint-initdb.d
ports:
- 3336:3306

http:
image: geerlingguy/php-apache:latest
ports:
- 8881:80
volumes:
- ./:/var/www/html:rw,delegated
command: ["/usr/sbin/apache2ctl", "-D", "FOREGROUND"]
restart: always
depends_on:
- adminer

adminer:
image: adminer
restart: always
ports:
- 8882:8080
depends_on:
- mysql


wenn man sein SQL-Script unter ./devops/sql/ ablegt wird dieses automatisch in die Datenbank importiert.

Older posts:

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