Bevor wir starten möchte ich darauf hinweisen, dass ich im Folgenden nicht genauer auf die Thematiken Virtualisierung und Docker eingehen werde. Falls ihr euch unter den beiden Begriffen absolut gar nichts vorstellen könnt, solltet ihr hier unterbrechen und vorher zu den Themen etwas recherchieren.

Auf geht‘s.

Was ist Docker Compose?

Docker Compose ist ein Tool zum einfachen Erstellen und Konfigurieren von Docker-Applikationen, welche aus mehreren Containern bestehen können. Compose verwendet eine YAML Datei um die einzelnen Services einer Applikation zu konfigurieren. Diese Datei kann wiederum mit einfachen Befehlen ausgeführt werden und die einzelnen Docker-Container werden hochgefahren.

Klingt ziemlich cool, oder?

Nur, wozu brauche ich so etwas?

Nehmen wir ein simples Beispiel: WordPress. Um eine WordPress-Seite hosten zu können, benötigen wir grundsätzlich einen PHP-Server (z.B.: Apache oder NGINX) und einen MySQL-Server. Nachdem wir unsere WordPress-Seite nicht direkt auf einem Server entwickeln möchten, die für alle Welt zugänglich ist, setzen wir uns eine lokale Instanz der Webseite auf unserem Laptop oder PC auf. In der Vergangenheit kamen hierbei immer wieder XAMPP oder ähnliche Tools zum Einsatz. Diese Herangehensweise ist auch absolut keine schlechte, dennoch wird es ab dem Moment mühsam, wo ihr eine andere PHP Version braucht, weil Projekt A noch mit PHP 5.6 gebaut wurde, Projekt C aber schon auf PHP 7.1 basiert. Hier kann das Arbeiten mit solchen Tools etwas unangenehm werden.

In 4 Schritten zur virtuellen Entwicklungsumgebung

Greifen wir das WordPress-Beispiel nun auf und probieren den alternativen Weg mit Docker Compose. Ich gehe im Weiteren davon aus, dass ihr Docker bereits auf eurem Arbeitsgerät installiert habt. Wenn ihr das bereits getan habt, ist Docker Compose bereits mit installiert.

Okay. Legen wir los.

Schritt 1: Ein neues Projekt-Directory anlegen
Als erstes starten wir unser Terminal und erstellen per mkdir einen leeren Ordner, in dem wir alle projektspezifischen Dateien und unsere YAML Datei lagern. Wo ihr diesen Ordner speichert und wie ihr ihn benennt, bleibt euch überlassen. Wechselt abschließend in das neue Verzeichnis.

mkdir my_project
cd my_project

Schritt 2: Erstellen der YAML-Datei
Benützt für das Erstellen und Befüllen der Datei den Texteditor eures Vertrauens und speichert die Datei unter dem Namen „docker-compose.yml“. Bitte achtet dabei unbedingt darauf, dass ihr euch im richtigen Verzeichnis befindet.

Die Datei sollte folgendermaßen aussehen:

version: '3.3'

services:
  mysql:
    image: mysql:latest
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  wordpress:
    depends_on:
      - mysql
    image: wordpress:latest
    ports:
      - '8000:80'
    restart: always
    volumes:
      - ./website:/var/www/html
    environment:
      WORDPRESS_DB_HOST: mysql:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
volumes:
  db_data: {}

Schritt 3: Docker-Container starten
Im nächsten und vorletzten Schritt starten wir den Docker-Container mit Hilfe des Compose Tools. Um im ersten Anlauf zu Testen, ob alles geklappt hat und die YAML-Datei richtig konfiguriert wurde, starten und bauen wir die Container mit folgendem Befehl:

docker-compose up

Wenn wir die Terminal-Session nun wieder schließen würden, würde unser Container jedoch wieder herunterfahren. Um das zu verhindern, nutzen wir die Option -d. Dadurch wird der Container im sogenannten “detached mode” gestartet und bleibt im Hintergrund bestehen.

docker-compose up -d

Anmerkung: der erste Startup der Container kann ein paar Minuten in Anspruch nehmen, da dabei jeweils ein Image für unsere Services heruntergeladen werden muss. In unserem Falle MySQL und WordPress.

Schritt 4: Überprüfen ob alles geklappt hat
Sobald alle Container gestartet sind, sollte unsere WordPress-Seite über unseren Browser erreichbar sein. Standardmäßig hört die Docker-Instanz auf den Port 8000. Das bedeutet, dass eure Seite unter localhost:8000 erreichbar sein sollte.

Außerdem befindet sich nun in eurem Verzeichnis ein weiteres Sub-Directory namens “website”. Dabei handelt es sich um einen Shared Folder, der mit eurem WordPress-Container verknüpft ist. In dem Ordner befinden sich alle WordPress-Dateien, die ihr zum Entwickeln benötigt.

Fazit

Wie ihr gesehen habt, sind nur wenige Schritte notwendig, um eine schnelle und abgekapselte Alternative zu XAMPP aufzusetzen. Alle Konfigurationen innerhalb des Containers haben keine Auswirkungen auf euer Betriebssystem. Ihr könnt euch hier also ordentlich austoben, ohne mit gröberen Konsequenzen rechnen zu müssen. Selbstverständlich ist aus auch möglich andere Services miteinander zu verknüpfen. So kann statt des WordPress-Images beispielsweise auch ein Node-Server oder eine Laravel-Installation aufgesetzt werden. Welche Möglichkeiten es hierzu gibt, findet ihr hier.

Weiterführende Quellen

Docker
Docker Compose
Laravel mit Docker Compose

The post Docker Compose: Ein Quick Start Guide appeared first on Mobile USTP MKL.

Was ist Flutter eigentlich?

Flutter ist Open Source und nutzt native Funktionen von Android und iOS, um eine möglichst schnelle Entwicklung von mobilen Applikationen zu ermöglichen. Diese Funktionen können als sogenannte „Packages“ zu einem Projekt hinzugefügt werden. Beispiele dafür sind Clients für Firebase, AWS, GPS-Location oder aber auch diverse Style-Elemente.

Als Programmiersprache für Flutter-Projekte setzt Google auf die eigens entwickelte Sprache „Dart“. Dabei handelt es sich um eine von JavaScript abgewandelte, ECMA-standardisierte Skriptsprache, die einige Probleme von JavaScript beheben soll.

Was sind die Ziele von Flutter?

Google möchte mit dem neuen Framework eine durchaus vorhandene Barriere für Entwickler durchbrechen: wer für Android und iOS effizient und schnell entwickeln möchte, muss mindestens zwei Programmiersprachen beherrschen. Und dieses selbstgesetzte Ziel erfüllt der Technikriese auch.

Darstellung der “Hot Reload”-Funktion von Flutter. Quelle: https://flutter.io/

Mit der „Hot Reload“-Funktion ermöglicht Flutter es, die App schon während der Entwicklung betrachten zu können, so wie es Web-Entwickler bereits aus ihrem täglichen Leben kennen. Anders als bei nativen Programmiersprachen wie Kotlin oder Swift ist ein Kompilieren des Codes nicht notwendig, was enorm viel Zeit sparen kann.

Durch den Einsatz von nativen Funktionen als sogenannte „Widgets“ wird auch für eine jedem Nutzer bzw. jede Nutzerin bekannte User Experience gesorgt. Auch hier kann viel Zeit gespart werden, da auch hier auf bewährte Design Principles zurückgegriffen werden kann.

Google’s wohl wichtigstes Ziel ist das Erreichen einer User Experience, die einer nativen App entspricht. Hier sorgt Flutter auch dafür, dass Gesten wie Scrollen oder Swipen immer plattformspezifisch umgesetzt werden.

Fazit und Zukunftsaussichten

Für Prototypen oder andere Apps, die schnell implementiert werden sollen, ist Flutter bestimmt das ideale Framework. Die bereits verfügbaren Packages bieten so gut wie alles, was das Front-End-Developer-Herz begehrt. Auch die „Hot Reload“-Funktion bietet einen immensen Zeitvorteil, der viele Nerven sparen kann.

Es gibt zahlreiche Gründe, die für den Einsatz von Flutter sprechen. Auch während der diesjährigen Google I/O wird der Eindruck vermittelt, als wäre es Google’s Ziel, Flutter als komplette Alternative zu nativen Programmiersprachen wie Kotlin oder Android Java anzubieten. Dennoch liest man von ein paar Bedenken, die wiederum für native Entwicklungsumgebungen sprechen. So muss man sich beispielsweise wieder auf eine neue Skriptsprache einstellen, die noch nicht weit verbreitet ist. Des Weiteren gibt es noch einige Berichte über die mangelnde Stabilität von Flutter-Apps.

Bleibt Google jedoch bei seinem Vorhaben, stehen die Karten für Flutter wirklich gut und vermutlich können Mobile-Entwickler schon bald auf eine noch bequemere und effizientere Zukunft blicken.

Quellen

https://flutter.io/

https://medium.com/flutter-io

https://t3n.de/news/google-flutter-ui-android-ios-966723/

https://www.dartlang.org/

https://medium.com/@biessek/when-flutter-will-replace-native-development-250bd1f98ac3

The post Flutter – Eine kleine Vorstellung appeared first on Mobile USTP MKL.

Die Handhabung solch eines CMS ist jedoch meist nur dann „schnell“ und „effizient“, wenn die produzierten Inhalte auf einer einzelnen Webseite zur Schau gebracht werden sollen. Sobald man seinen Content auf mehreren Seiten (oder sogar in unterschiedlichen Applikationen) darstellen möchte, stößt man mit klassischen CMS-Lösungen wie WordPress, Drupal oder Wix relativ schnell an die Grenzen des „Machbaren“.

Natürlich, alles ist möglich … aber ob das gut ausgehen wird?

Wo liegt das Problem?

Der durchschnittliche Blogger bzw. die durchschnittliche Bloggerin wird mit einem mächtigen CMS wie WordPress IMMER zufrieden sein. Seine bzw. ihre Nutzung des Systems beschränkt sich in den meisten Fällen wohl nur auf das Eintippen von Texten und Hochladen von Bildern. Dabei steht ihm bzw. ihr alles innerhalb eines monolithischen Systems zur Verfügung:

• Frontend
  Die Besucher der Webseite sehen die Inhalte in einer dem Template des Systems entsprechenden Form
• Datenbank
  Alle dargestellten Inhalte werden in einer zentralisierten Datenbank gespeichert. Zugriffe auf externe Datenbanken erfordern bereits ein wenig Know-How
• Backend
  Die Gestalter erhalten eine bequeme Administrator-Oberfläche, über die sie mit Hilfe von WYSIWYG-Editoren gemütlich gestalten können. Wenn etwas komplexere Funktionalität gewünscht wird, hilft das eine oder andere Plug-In problemlos aus.

Na eben! Das ist doch auch gut so, oder?

Fast! Sobald eine beispielsweise eine WordPress-Seite ihre Inhalte für andere Webseiten zur Verfügung stellen soll, kann es schon problematisch werden. Man ist immer irgendwie an die Eigenheiten des Systems gebunden und ist dabei durchaus eingeschränkt. Sei es allein die Programmiersprache, an die man sich halten muss. Um so unabhängig wie möglich zu sein, bietet sich das Konzept des Headless CMS für umfangreiche CM-Systeme mit unterschiedlichen Bezugsquellen (Webseite, App, Mobile-Webseite oder Desktop-Client) an.

Das kopflose Content Management System

Kurz und knapp: Man nimmt ein herkömmliches CMS (basierend auf einem monolithischen System), trennt das Backend und die Datenbank von dem Frontend und packt eine REST-API zwischen die beiden Abschnitte. Daraus ergibt sich der große Vorteil, dass dem CMS nun egal sein kann von welchem Medium die Daten bezogen werden. Nun soll eine vereinheitlichte Schnittstelle eine reibungslose Kommunikation ermöglichen.

Die Vorteile:

• Unabhängigkeit des Frontends
  • flexible Gestaltung
  • unterschiedliche Endgeräte
• Skalierbarkeit
• Dynamische Daten
• Einsatz unterschiedlicher Programmiersprachen

Wer bietet es an?

• https://headlesscms.org/
• https://www.contentful.com/
• https://www.built.io/products/contentstack/overview

Fazit

Ob auf ein Headless CMS umgesattelt werden soll, hängt natürlich vom jeweiligen System und seinen Anforderungen ab. Wer nur einen kleinen Reiseblog für Freunde und Bekannte zur Verfügung stellen möchte, braucht sich hier nicht zu viel Mühe machen.

Wer jedoch mit längerfristigen Projekten beginnt oder bereits an welchen arbeitet, sollte dieses Konzept nicht einfach überspringen. Gerade Skalierbarkeit und Flexibilität sind das Um und Auf in der heutigen Web-Entwicklung.

Auch wenn es auf den ersten Blink nach einem gewissen Mehraufwand aussieht, bin ich fest davon überzeugt, dass sich die Konzeption und Umsetzung solch eines aufgeteilten Systems früher oder später bezahlt macht.

War etwas unklar oder überhaupt nicht verständlich? Kein Problem, hier ein paar Quellen:

• https://hosting.1und1.de/digitalguide/hosting/cms/headless-cms-was-sind-die-vorteile/
• https://wp-agentur.de/blog/cms-marktanteile-2017-weltweit/
• https://medium.com/tech-tajawal/why-headless-cms-is-becoming-so-popular-57d262b1e096
• https://www.youtube.com/watch?v=U5_H9cD17gA
• https://www.youtube.com/watch?v=YyRwMy59d4M

The post Headless CMS – Haben WordPress & Co ausgedient? appeared first on Mobile USTP MKL.

Das lange Warten hat ein Ende!

qorda ist ein modernes, flexibles und blitzschnelles Bestellsystem, welches in jeder Bar oder jedem Restaurant eingesetzt werden kann. Das System stellt dem Kunden / der Kundin eine digitale Getränke- / Speisekarte über eine mobile Webseite zur Verfügung. Mit Hilfe dieser Applikation kann das nervige Warten auf überlastete Kellner / Kellnerinnen beendet werden. Die Gäste können dabei ihr privates Smartphone nutzen, um binnen weniger Taps zur ihrem Schnitzel oder Long Island Ice Tea zu kommen.

Wie funktioniert qorda für die Gäste?

Der Kunde / die Kundin scannt mit einem Smartphone einen eindeutigen QR-Code, welcher exklusiv auf einen Tisch oder einen Platz in der Bar oder dem Restaurant zur Verfügung gestellt wird. Nach dem erfolgreichen Scann wird man direkt zu der digitalen Speise- bzw. Getränkekarte des Lokals weitergeleitet. Auf der mobil optimierten Webseite kann der Gast nun sein / ihr Lieblingsessen oder ein Glas vom besten Wein des Hauses bestellen und seine / ihre Bestellung per Tap auf den Bestell-Button direkt an die Küche oder den Sommelier senden.

Nachdem die Bestellung aufgegeben wurde, erhält der Kunde bzw. die Kundin von den Mitarbeitern des Lokals eine Bestätigung direkt auf das Smartphone. Somit wird bestätigt, dass das Schnitzel demnächst geklopft wird und es kann eingesehen werden, in welcher Reihenfolge andere Bestellungen eingegangen sind. Durch dieses Feature kann der Kunde bzw. die Kundin abschätzen, wie lange es dauert bis das Essen kommt oder wann der beste Zeitpunkt für die Bestellung des nächsten Bieres ist.

Wie funktioniert qorda für die Lokalbetreiber?

Die Inhaber einer Gaststätte benötigen für den Einsatz von qorda lediglich einen oder mehrere PCs bzw. Tablets, je nach Anzahl der MitarbeiterInnen, und einen Internetzugang mit ausreichender Bandbreite. Durch eine intuitive Verwaltungsoberfläche kann die Speise- bzw. Getränkekarte einfach digitalisiert und den Gästen zur Verfügung gestellt werden. Zusätzlich können mit Hilfe des qorda-Interfaces aktuelle Bestellungen verwaltet und vergangene ausgewertet werden.

Mit welchen Technologien arbeitet qorda?

Das Bestellsystem bietet mehrere Endpunkte, die intelligent miteinander arbeiten. Generell basiert die Applikation auf einer Laravel-App, die mit einer MySQL Datenbank verbunden ist.

Für die Verwaltung der Getränke-/Speisekarte des Lokals wurde auf bekannte PlugIns wie jQuery und vor allem Bootstrap 3 zurückgegriffen. Das Design stammt von einem kostenlosen Admin-Template im Material-Design Stil.

Die mobile Website, auf der die Speisen und Getränke dargestellt werden, wurde mit dem HTML-Framework Ratchet umgesetzt. Dabei handelt es sich um einen kleinen aber feinen HTML-Baukasten für mobile Webseiten, die ganz im Stile von nativen Apps gestaltet werden sollen.

Was nicht ist, kann noch werden!

Grundsätzlich ist das Potenzial von qorda riesig. Da das system noch anonym funktioniert, können beispielsweise Funktionalitäten wie eine Anmeldung der Benutzer implementiert werden. Dadurch eröffnen sich qorda wiederum eine Vielzahl von Features wie zum Beispiel ein Bonussystem. Hier könnten Restaurant-Kunden, die qorda verwenden, für jede bestellte Speise Punkte sammeln und diese gegen einen Rabatt wieder einlösen.

The post “Print-to-Mobile” – qorda appeared first on Mobile USTP MKL.