Blog

Enwicklung von Desktop-Apps mit Angular und Electron

In den letzten Jahren erfuhr die Entwicklung von Webapplikationen mehr und mehr an Bedeutung. Dies liegt vor allem daran, dass sich Anwendungen unabhängig vom Betriebssystem über den Browser nutzen lassen und mehr und mehr Daten und Services in die Cloud wandern.
Der Browser stellt in diesem Fall eine Art zusätzliche Abstraktionsebene dar und sorgt für den plattformübergreifenden Zugriff.
Oft werden trotz allem zusätzlich Desktop-Applikationen gewünscht.

Mit Hilfe des Electron Frameworks [1] lasen sich Webapps zu nativen Anwendungen für verschiedenste Systeme wandeln. So können wir beispielsweise macOS, Windows oder Linux-Applikationen erstellen und müssen nur wenige Codezeilen zu unserem bestehenden Code hinzufügen.
Electron nutzt zu diesem Zweck Node.js [2] und Chromium [3].
Im Prinzip wird eine Instanz des Chromium-Browsers erstellt, der lediglich die Webapplikation darstellt.

In diesem Artikel will ich Ihnen zeigen wie Sie mit Hilfe des Angular Frameworks eine simple Single-Page Applikation erstellen und diese anschließend mit Hilfe des Electron Frameworks als Desktop-Applikation ausliefern.

Installieren der benötigten Frameworks und Generatoren

Voraussetzung für die Durchführung ist die Installation von Node.js und NPM [2].
Anschließend benötigen wir zum schnellen Setup der Webapplikation die Angular-CLI. Diese wird als globales NPM-Modul wie folgt installiert:

npm install -g @angular/cli

Ebenso wollen wir im weiteren Verlauf Electron unter TypeScript verwenden. Dafür benötigen wir noch den TypeScript Compiler (tsc). Um die entsprechenden Angaben zur Typisierung und somit auch Hilfe von unserem Editor zu erhalten, installieren wir noch das typings-Package.
Darüber können wir später die entsprechenden Typings für Electron installieren.

npm install -g tsc typings

Anlegen der Angular App

Im nächsten Schritt erstellen wir die App. Der Nachfolgende Befehl legt einen neuen Ordner ng-electron-example an, erstellt das Grundgerüst für die App (der Präfix für Komponenten lautet in diesem Fall elex) und installiert alle benötigten Abhängigkeiten.

ng new ng-electron-example -p elex
cd ng-electron-example

Wenn wir nun npm start auf der Konsole ausführen und im Browser die URL http://localhost:4200 aufrufen, sollten wir sehen dass die App bereits gestartet wurde und der Text „elex works!“ angezeigt wird.

Installieren der benötigten Frameworks und Tools für die Desktop-Applikation

Um im nächsten Schritt aus der bestehenden Webapp eine Desktopanwendung zu erstellen, benötigen wir ein paar weitere Abhängigkeiten und Hilfsmittel.

Wir installieren diese über den Aufruf von NPM auf der Konsole:

npm install --save-dev copyfiles electron electron-packager rimraf typings

Nachfolgend ein paar kurze Erläuterungen zu den einzelnen Paketen:

Paket Verwendung
copyfiles Zum Kopieren von Dateien zwischen Ordnern
electron Das Electron Framework
electron-packager Ein Tool zum Erzeugen von systemspezifischen Electron Programmpaketen
rimraf Tool zum Löschen von Dateien und Ordnern
typings Ein Manager zur Installation von Typings

Konfiguration von Electron

An dieser Stelle möchte ich Ihnen zeigen, wie Sie das Electron Framework mit TypeScript verwenden.
Dazu legen wir zunächst ein neues Verzeichnis mit dem Namen electron an und öffnen es auf der Konsole:

mkdir electron && cd electron

Im nächsten Schritt wollen wir die von uns benötigten Typings finden. Dazu geben wir auf der Konsole den folgenden Befehl ein:

typings search electron

Uns wird nun eine Liste mit gefunden Typing-Einträgen angezeigt. Wir benötigen die Typings für electron und können diese nun wie folgt installieren:

typings install registry:dt/electron --save --global

Im aktuellen Verzeichnis wird nun ein Ordner typings erstellt, der die entsprechenden Angaben zur Typisierung beinhaltet.
Weiterhin wird die Datei typings.json angelegt, die Informationen zu den aktuell installieren Typings enthält:

{
  "globalDependencies": {
    "electron": "registry:dt/electron#1.4.8+20170316233216"
  }
}

Als nächstes benötigen wir die Konfigurationsdatei für TypeScript mit Angaben für den TypeScript Compiler. Dafür legen wir die Datei tsconfig.json im Verzeichnis electron mit dem folgenden Inhalt an:

{
  "compilerOptions": {
    "target": "es5",
    "outDir": "../dist",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules"
  ]
}

In der Konfiguration haben wir angegeben, dass der TypeScript Compiler uns JavaScript im es5-Standard erzeugen soll, da dieser in fast allen Browsern vollständig implementiert ist. Weiterhin geben wir als Ausgabeverzeichnis für den JavaScript-Code das dist-Verzeichnis an, dass von Angular erzeugt wird, sofern wir die App für den Produktiveinsatz bauen (mehr dazu später).
Weitere Details zu den einzelnen Konfigurationseinstellungen können der offiziellen TypeScript-Dokumentation entnommen werden [4].

Die wichtigsten Vorbereitungen haben wir nun getroffen. Jetzt wollen wir uns dem Quellcode zum Erstellen der Desktop-App zuwenden.
Wir legen dazu im electron-Ordner die Datei electron.js an.
Der benötigte Quellcode für die Erzeugung sieht wie folgt aus:

import { app, BrowserWindow } from 'electron';

class ElectronApp {
  static app: Electron.App;
  static BrowserWindow;
  static mainWindow: Electron.BrowserWindow;

  static main(app: Electron.App, browserWindow: typeof BrowserWindow) {
    ElectronApp.app = app;
    ElectronApp.BrowserWindow = browserWindow;
    ElectronApp.app.on('ready', ElectronApp.onReady);
    ElectronApp.app.on('window-all-closed', ElectronApp.onWindowAllClosed);
    ElectronApp.app.on('activate', ElectronApp.onActivate);
  }

  // call when ready
  private static onReady() {
    // Create the window
    ElectronApp.mainWindow = new BrowserWindow({
      width: 1200,
      height: 800,
      resizable: false,
      titleBarStyle: 'hidden',
      title: 'Angular Electron Example App',
      icon: `${__dirname}/favicon.ico`
    });

    // load index.html
    ElectronApp.mainWindow.loadURL(`file://${__dirname}/index.html`);

    // close the window
    ElectronApp.mainWindow.on('closed', ElectronApp.onClose);
  }

  // Quit after all windows has been closed
  private static onWindowAllClosed() {
    // keep app in application bar on OSX (because it's common)
    if (process.platform !== 'darwin') { ElectronApp.app.quit(); }
  }

  // fires if the window is closed
  private static onClose() {
    // Reset the window object to null
    ElectronApp.mainWindow = null;
  }

  // recreate if activated again
  private static onActivate() {
    if (ElectronApp.mainWindow === null) { ElectronApp.onReady(); }
  }

}

ElectronApp.main(app, BrowserWindow);

Wir rufen die statische main-Methode der Klasse ElectronApp auf und übergeben ihr die beiden imports app und BrowserWindow, die uns Electron bereitstellt. Weiterhin reagieren wir auf eintreffende Events mit den Methoden onReady(), onWindowAllClosed()
bzw. onActivate.
Die onReady-Methode erzeugt zunächst ein neues Fester. Dabei legen wir beispielsweise die Größe, sowie den Titel und ein Icon fest.
Ein Liste aller verfügbaren Optionen kann der offiziellen Dokumentation entnommen werden [5].
Über die Angabe in ElectronApp.mainWindow.loadURL teilen wir der Electron-App den Pfad zur Einstiegsseite mit.
Der letzte Aufruf in der onReady()-Methode wird abgearbeitet wenn das Fenster geschlossen wird.
Die onClose()-Methode überschreibt mainWindow mit dem Wert null.

In der onAllClosed()-Methode geben wir an, was passieren soll, wenn alle Fenster geschlossen werden (in unserem Fall existier nur eines).
Wir prüfen an dieser Stelle ob es sich bei dem System um ein macOS-System handelt und rufen in diesem Fall die ElectronApp.app.quit() auf.
Dies ist eine bekannte Vorgehensweise bei macOS, da ein Schließen der Anwendung diese immer noch in der Application Bar behält. Somit kann diese wieder reaktiviert werden. Dies geschieht in der onActivate()-Methode.

Jetzt wollen wir noch das Template anpassen und den von Electron bereitgestellten Webviewer einbauen:
Dafür passen wir die Datei index.html wie folgt an:

<!doctype html>
<html>
<!-- ... -->
<body>
  <elex-root>Loading...</elex-root>
  <webview src="https://d-koppenhagen.de/blog" autosize style="display:inline-flex; height:705px; width: 1190px;"></webview>
</body>
</html>

Geschafft! unsere App ist nun soweit vorbereitet. Nun müssen wir noch Angular und Electron zusammenführen.

Das Verheiraten von Angular und Electron

Wir haben nun alle notwendigen Vorbereitungen getroffen um eine Native Desktop-App mit Angular und Electron zu erstellen. Jetzt wollen wir dafür sorgen, dass die App erzeugt und für verschiedene Betriebssysteme bereitgestellt wird.
Dafür passen wir die Datei package.json an und erweitern diese um Scriptangaben und einer Angabe zur Hauptdatei von Electron.

// package.json
{
  // ...
  "scripts": {
    // ...
    "start-el": "npm run build && electron dist",
    "build": "ng build --prod --base-href=. && copyfiles package.json dist && cd electron && tsc",
    "deploy": "rimraf app && npm run build && electron-packager dist --all --electron-version=1.6.2 --overwrite --out=app && rimraf dist",
    "deploy-mac": "rimraf app/*mas* && npm run build && electron-packager dist --platform=mas --arch=all --electron-version=1.6.2 --overwrite --out=app --icon src/assets/icon.icns && rimraf dist",
    "deploy-win": "rimraf app/*windows* && npm run build && electron-packager dist --platform=win32 --arch=all --electron-version=1.6.2 --overwrite --out=app --icon src/assets/icon.ico && rimraf dist",
    "deploy-lin": "rimraf app/*linux* && npm run build && electron-packager dist --platform=linux --arch=all --electron-version=1.6.2 --overwrite --out=app --icon src/assets/icon.ico && rimraf dist",
    // ...
  },
  "main": "electron.js",
  // ...
}

Das Script build erzeugt zunächst die Angular-App in der Produktivversion. Wichtig dabei ist die Angabe der Option --base-href=., damit nach der Erzeugung alle Dateien gefunden werden können. Im nächsten Schritt wird die NPM-Paketkonfigurationsdatei in das dist-Verzeichnis kopiert. Dies ist notwendig, da wir hier nach den Scriptangaben die Startdatei für electron festlegen ("main": "electron.js"). Anschließend wird in das Verzeichnis electron navigiert und der TypeScript Compiler gestartet (tsc).

Das Script start-el ruft nun mittels npm run build das zuvor definierte build-Script auf und startet anschließend electron mit dem Inhalt des dist-Ordners.

Wir können jetzt unsere fertige App betrachten:

Die letzten Scripte sorgen dafür, dass die App als fertiges Bundle für das jeweilige Betriebssystem erzeugt wird. Die icon-Angabe setzt ein Symbol für die entsprechende Startdatei (z.B. .exe unter Windows). Bei der Angabe für macOS ist zu beachten, dass wir ein Icon im icns-Format benötigen:

src/assets/icon.icns

Mit dem Schalter --out legen wir als Ausgabeverzeichnis den Ordner app fest. Über --platform legen wir die jeweilige Zielplattform fest und geben mit --arch die Architektur (z.B. x86 oder x64) an. die Angabe all sorgt dafür, dass die App für mehrere Plattformen bzw. Architekturformen erzeugt wird.

Da unser Verzeichnis unter Versionskontrolle steht sollten wir den App-Ordner noch davon ausschließen. Dazu passen wir die Datei .gitignore an und fügen die folgenden Zeilen hinzu:

# ...
# Deployed Apps
app/

Fertig! Sie haben nun gelernt wie Sie mit Hilfe von Angular und Electron Desktop-Applikationen für verschiedenste Betriebssysteme erzeugen können. Selbstverständlich war dies nur eine kurze Einführung uns Sie können noch viel mehr Funktionalitäten von Angular und Electron nutzen.

Der vollständige Quellcode kann auch auf Github eingesehen werden.

Sind Sie noch unerfahren im Umgang mit Angular? Dann schauen Sie sich doch auch das Einsteigerbuch zu Angular an oder kontaktieren mich für eine persönliche Beratung.

Viel Spaß beim programmieren.

Teilen

Angular — Grundlagen, fortgeschrittene Techniken und Best Practices mit TypeScript

Jetzt zuschlagen und das Buch vorbestellen!

Mit Angular setzen Sie auf ein modernes und modulares Web-Framework. Dieses Buch stellt Ihnen die Bausteine von Angular, viele Best Practices und die notwendigen Werkzeuge vor. Beginnen Sie Ihren Einstieg in die Welt von Angular mit einer praxisnahen Einführung.

Jedes Thema wird zunächst theoretisch behandelt und anschließend anhand einer durchgehenden Beispielanwendung (https://ng-buch.de/app) demonstriert.
Meistern Sie die komponentenorientierte Webentwicklung und lernen Sie zusätzlich einen Weg zur Erstellung mobiler Apps (NativeScript) kennen. Mit der Redux-Architektur beherrschen Sie auch komplexe Anwendungen.
Sie werden als Einsteiger und auch als fortgeschrittener Webentwickler Freude bei der Lektüre dieses Buchs haben.

Diese Themen erwarten Sie:

  • Schnellstart mit Angular & TypeScript
  • Komponenten & Template-Syntax
  • Pipes & Direktiven
  • Lose Kopplung mittels Dependency Injection
  • Formularverarbeitung (Reactive Forms & Template Driven Forms)
  • Coding Guidelines
  • HTTP
  • RxJS (Reactive Extensions)
  • Routing
  • Internationalisierung (i18n)
  • Angular-CLI
  • Debugging mit Augury
  • Unit Testing mit Karma
  • UI Testing mit Protractor
  • Übergang von Entwicklung zum Produktionsbetrieb: JIT- und AOT-Kompilierung
  • Bonus: Einstieg in NativeScript
  • Bonus: Einstieg in die Architektur Redux

Laden Sie sich hier die Gratis Leseprobe herunter.

Über die Autoren

Gregor Woiwode

ist angestellter Softwareentwickler und Trainer bei der Firma co-IT.eu GmbH. Er fokussiert sich auf die Erstellung von Webportalen. Nebenbei engagiert er sich in der Community, indem er Coding-Dojos und Konferenzen an den Standorten Leipzig und Berlin organisiert.

Ferdinand Malcher

arbeitet als selbstständiger Softwareentwickler und Trainer mit Schwerpunkt auf Webanwendungen mit Angular, Node.js und TypeScript. Viele seiner Projekte verbindet er mit seiner Leidenschaft für Fotografie, Film und Medientechnik.

Danny Koppenhagen

ist angestellter Entwickler im Bereich Systems Engineering. Er beschäftigt sich mit der Entwicklung, Anpassung und Integration von Softwarelösungen im Zusammenspiel mit maßgeschneiderten Hardwarekomponenten. Weiterhin arbeitet er leidenschaftlich als freiberuflicher Softwareentwickler für Webapplikationen auf Basis von Angular, Node.js und TypeScript.

Johannes Hoppe

arbeitet als selbstständiger IT-Berater, Softwareentwickler und Trainer für .NET und Angular. Für seine Community-Tätigkeit rund ums Web wurde er mehrfach als Telerik Developer Expert (TDE) ausgezeichnet. Johannes ist Leiter der .NET User Group Rhein-Neckar und unterrichtet als Lehrbeauftragter.

Jetzt das Buch sichern!

Teilen

Angular TagCloudModule

Auf vielen Webseiten findet man sie: Schlagwortwolken (engl. Tag Clouds). Diese Tag Clouds beinhalten oft Links zu Seiten die von Nutzern oft aufgerufen werden, interessante Schlagword, Tags, oder ähnliches.

In diesem Artikel möchte ich das TagCloudModule für Angular vorstellen. Das Modul lässt sich in nur wenigen Schritten in eine Angular-Anwendung (ab Version 2.x) integrieren und generiert eine Schlagwortwolke anhand eines übergebenen Daten-Arrays. Durch die Gewichtung im Daten-Array können Begriffe entsprechend größer oder kleiner dargestellt werden. Weiterhin lassen sich verschiedene Optionale Parameter mit übergeben, die den Style der Schlagwortwolke anpassen und auf Events reagieren.

Das Modul Installieren und in die Anwendung integrieren

Um das TagCloudModule verwenden zu können, installieren wir dieses zunächst über NPM mit dem folgenden Befehl:

npm install --save angular-tag-cloud-module

Anschließend müssen wir das Modul noch in der Angular-Anwendung bekannt machen:

// app.module.ts 
import { TagCloudModule } from 'angular-tag-cloud-module';
 
@NgModule({
  imports: [
    TagCloudModule
  ]
})
export class AppModule { }

Festlegen der Daten und Optionen

Wir haben das Modul in unserer Angular-Anwendung bekannt gemacht. Anschließend bearbeiten wir die Komponente in der wir dieses Modul verwenden wollen. Wir laden uns zunächst das Interfaces CloudOptions aus dem Modul angular-tag-cloud-module. Anschließend definieren wir das Attribut options welches dem CloudOptions-Interface entsprechen soll. Wir legen hier zunächst eine feste Höhe und Breite für die Schlagwortwolke fest. Die Angabe overflow: false verhindert, dass Worte die nicht in den Sichtbereich der Wolke passen (definiert durch Breite und Höhe) ausgeblendet werden.

import { CloudOptions } from 'angular-tag-cloud-module';
// ...
export class MyComponent {
  options: CloudOptions = {
    width : 1000,
    height : 400,
    overflow: false
  }
}

Nun wenden wir uns den Daten zu, die wir in der Schlagwortwolke anzeigen wollen. Dafür wird ebenfalls ein Interface bereitgestellt – das CloudData-Interface.
Dieses Interface definiert einen einzelnen Datensatz, also ein einzelnes Wort für die Schlagwortwolke. Da diese aber eine Vielzahl von Worten entgegen nimmt, typisieren wir das Property data mit Array.
Jedes Element des Arrays muss mindestens das Attribut text besitzen. Über die Angabe weight definieren wir die Gewichtung der einzelnen Elemente. Der Bereich ist hierbei nicht eingeschränkt und relativ zu den jeweils anderen Elementen des Arrays. Lassen wir eine Angabe weg, so wird eine automatische Gewichtung anhand des Mittelwertes vorgenommen. Standardmäßig werden alle Tags in einem Blauton dargestellt. Das Standardverhalten lässt sich zum einen durch ein hinterlegtes Stylesheet ändern (mehr dazu später), zum anderen kann über die Angabe color einzelnen Elementen eine explizite Farbe zugewiesen werden. Hier sind alle Werte valide die auch in einem CSS Styelesheet angegeben werden können (also zum Beispiel #ff0000 oder red).

import { CloudData, CloudOptions } from 'angular-tag-cloud-module';
// ...
export class MyComponent {
  // ...

  data: Array<CloudData> = [
    {
      text: 'Mein Text mit sehr hohem Gewicht',
      weight: 10,
      color: '#ffaaee'
    },
    {
      text: 'Mein Text mit mittlerem Gewicht',
      weight: 5,
    },
    // ggf. weitere Elemente...
  ]
}

Einbinden des Moduls im Template

Nachdem wir nun alle notwenigen Angaben für die Übergabe der Tag Cloud definiert haben, können wir uns dem Template zuwenden. In diesem binden wir die Komponente wie folgt ein:

<angular-tag-cloud
  [data]="data"
  [width]="options.width"
  [height]="options.height"
  [overflow]="options.overflow">
</angular-tag-cloud>

Geschafft! Anschließend sollte ein ähnliches Ergebnis wie das folgende zu sehen sein:

Weitere Optionen und Möglichkeiten

Einfügen von Links

In vielen Fällen wollen wir die Elemente der Tag-Cloud als Links mit einem Ziel darstellen. Dafür geben wir das zusätzliches Attribut link in einem der CloudData-Elemente mit an. Mit der weiteren Angabe external: true erwirken wir, dass der Link beim Anklicken in einem neuen Browsertab geöffnet wird.

data: Array<CloudData> = [
  {
    text: 'Ein interner Link mit explizit festgelegter Farbe',
    link: 'https://google.com',
    color: '#ffaaee'
  },
  {
    text: 'Ein externer Link',
    external: true,
    link: 'https://google.com'
  }
]

Reagieren auf angeklickte Elemente

In manchen fällen möchten wir, dass nach dem Anklicken eines Elements eine Aktion von unserer App durchgeführt wird. Zum Beispiel könnten wir ein Popup-Fenster einblenden. Zu diesem Zweck wird von der Komponente beim Anklicken eines Elementes ein Event emittiert auf das wir reagieren können. Dafür geben wir im Template die Methode an, von der das Event verarbeitet werden soll:

<angular-tag-cloud 
  [data]="data" 
  (clicked)="popup($event)">
</angular-tag-cloud>

Das Event gibt jeweils das gesamte CloudData-Objekt zurück, welches ausgewählt wurde. In unserer Verarbeitungsmethode popup können wir somit beispielsweise die Auswahl in einem Popup-Fenster reflektieren:

export class MyComponent {
  // ...
 
  popup(el: CloudData){
    alert(`Sie haben das Element ${el.text} ausgewählt`);
  } 
}

Flexible Breite

Oft sind die Breiten der Tag Cloud abhängig von den übergeordneten Containern. Wenn wir in solch einem Fall keine Feste Breite für die Tag Cloud angeben wollen, so verwenden wir Einen Wert der kleiner oder gleich 1 ist aber größer 0. In diesem Fall bezieht sich der Wert auf die Relation zum übergeordneten Element. Geben wir Beispielsweise einen Wert von 0.8 an, so nimmt die Komponente 80% des Raumes ein, der ihr durch dem übergeordneten Element zur Verfügung gestellt wird. Im nachfolgenden Beispiel würde die Tag Cloud also eine Breite von 800 Pixel haben.

<div style="width: 1000px">
  <angular-tag-cloud
    [data]="data"
    [width]="0.8"
    [height]="300">
  </angular-tag-cloud>
</div>

Verwendung eines angepassten Stylesheets

Um den gesamten Style der TagCloud anzupassen müssen verschiedene Styles für die einzeln gewichteten Elemente überschreiben. Ein Beispiel zur Anpassung kann in dem folgenden Wiki-Artikel eingesehen werden: https://github.com/d-koppenhagen/angular-tag-cloud-module/wiki/Custom-CSS-Style

Weitere Informationen

Die vollständige Dokumentation zum Modul kann unter dem folgenden Link abgerufen werden: https://www.npmjs.com/package/angular-tag-cloud-module

Viel Spaß beim ausprobieren.

Teilen

Spartakiade 2016

Vom 19.-20. März fand die Spartakiade 2016 in Berlin statt. Es wurden wie immer zahlreiche Workshops angeboten. Im Vordergrund: eine lockere Atmosphäre und die Vernetzung der Teilnehmer.

Deep-Diving statt Schnorcheln

Was die Spartakiade ausmacht sind vor allem die ganztägigen praxisorientierten Workshops. Im Vergleich zu vielen anderen Konferenzen bekommen Teilnehmer die Möglichkeit sich tiefgründig mit einem Thema zu beschäftigen. Bei vielen Workshops steht vor allem die Verknüpfung von Theorie und Praxis im Vordergrund. Es wird Basiswissen zu einem Thema erläutert und anschließend das Wissen in Form von Spielen oder Live-Coding-Sessions angewandt.

Schwarmfinanzierung

Auch bei der Finanzierung der Veranstaltung unterscheidet sich die Spartakiade von vielen kommerziellen Veranstaltungen. Die Spartakiade wird Schwarm-finanziert. Schon beim Kauf der Tickets hat man die Wahl ein „normales“ Ticket zu erwerben oder eines der höher-preisigen Tickets zur besseren Unterstützung der Veranstaltung. Studenten bekommen außerdem einen Rabatt gewährt. Weiterhin gibt es eine Vielzahl von Sponsoren, welche diese Veranstaltung unterstützen und somit dafür sorgen, dass die Tickets bezahlbar bleiben.

Meine Teilnahme

Etappe 1 – „Ab morgen bitte Scrum“ mit

In seinem Workshop setzte Thomas (ganz im Sinne des Themas) auf eine agile Agenda. Dabei wurden zunächst viele Themen, sowie Spiele kurz vorgestellt und im Raum ausgehangen. Anschließend konnten wir als Teilnehmer durch ein Voting bestimmen, welches Thema als nächstes stattfindet. Somit war der Tag voll und ganz durch die Teilnehmer strukturiert worden. Thomas berichtete viel über seine Erfahrungen mit Scrum, was man so alles falsch machen kann, was ein gutes Team ausmacht und vorallem wie wichtig gute und detaillierte Anforderungskriterien und ständige Retrospektiven sind. Viele der Themen brachte er uns anhand interessanter Spiele nahe, welche zum besseren Verständnis beigetragen haben.

Am Abend fand schlussendlich noch ein Jeopardy-Spezial für alle Spartakiade-Teilnehmer statt (natürlich die Informatiker-Variante). Bei ein paar Bierchen und einem regen Austausch der Teilnehmer ließen wir dann den Abend ausklingen.

Detaillierte Inhalte des Workshops beschreibt Thomas in seinem Expertenblog.

Etappe 2 – „Funktionsdesign für Entwicklerdokumentation“ mit

„Dokumentation“ – Das Schlagwort für viele Mitarbeiter doch lieber schnell den nächsten Urlaub zu buchen und sich zu verdrücken. Doch was macht das ganze so schwierig? Wie lässt sich eine Dokumentation gut strukturieren? Warum sollte man nicht einfach drauf los schreiben? Ist überhaupt eine Dokumentation notwendig? Wer wird die Dokumentation lesen? All diese Fragen versuchte Anne uns zu beantworten – wie ich finde: mit Erfolg!
Oft denkt man leider sehr wenig über den Aufbau und die eigentlichen Zielpersonen für eine spezifische Dokumentation nach und schreibt einfach drauf los. Das das schief gehen kann diskutierten wir im Teilnehmerkreis an Beispielen. Anne zeigte uns durch ein Spiel mit Matroschkas welche Schichten Dokumentation haben sollten und wie wichtig eine gute Struktur ist. Es wurden von den Teilnehmern wichtige funktionale Dokumentationselemente identifiziert. Auch wurde bewusst, dass keine Dokumentation perfekt ist – oft finden sich Möglichkeiten die eigene Dokumentation durch simple Formatierungen weiter zu verbessern. Alles in Allem ein Klasse Workshop bei dem ich sehr viel mitgenommen habe.

Spartakiade-Logo

Mein Fazit

Die Spartakiade ist keine Konferenz die als Zielgruppe eine Vielzahl von Mitarbeitern kommerzieller Unternehmen hat. Vielmehr geht es um persönliche Fortbildung der eigenen Fähigkeiten die Vernetzung, Erfahrungsaustausch, Start-Up-Kultur und eine Menge Spaß.

Teilen

Developer Open Space 2015 – Eine (Un)Konferenz

Vom 16.–18. Oktober fand in diesem Jahr der nun bereits neunte Developer Open Space statt. Damals noch als .NET Open Space gestartet, hat sich die Veranstaltung als echte Größe unter den Konferenzen etabliert. Der Open Space beschränkt sich schon lange nicht mehr nur auf die .NET-Community, sondern richtet sich an eine Vielzahl von Entwicklern, die Lust haben sich zu verschiedenen Themen im Bereich der Softwareentwicklung auszutauschen.

Aber Moment mal, kann man das eigentlich als Konferenz bezeichnen? Oder ist es mehr ein gemütliches Beisammensein und Fachgesimpel über Entwickler-Themen? Und was bedeutet eigentlich Open Space? Genau diese Fragen habe ich mir gestellt, als ich in diesem Jahr das erste Mal beim Open Space zu Besuch war.

Der Ablauf

Tag 1 – Workshops

Im Unterschied zu „normalen“ Konferenzen bestimmen die Besucher des DevOpenSpace die Themen. Lediglich am ersten Tag gibt es eine Auswahl an Workshops zu den Fachthemen. Bevor man das Ticket bucht, hat man unterschiedliche Themen zur Auswahl. Jedoch kann man sich jederzeit für einen anderen Workshop umentscheiden. Auch die Referierenden rattern nicht einfach ihre PowerPoint Präsentation herunter, sondern bauen ihre Workshops anhand der Interessenslagen der Teilnehmer auf. Entscheidend ist dabei auch der Austausch untereinander. Egal ob Profi in einem Fachgebiet oder absoluter Anfänger, hier kommt jeder auf seine Kosten. Am Ende lässt man den Tag noch bei ein oder zwei Bierchen im Josef Pub ausklingen.

Tag 2 und 3 – DevSpace

Die Agendaschwerpunkte werden jedes Jahr nach dem gleichen Prinzip festgelegt: Jeder hat die Möglichkeit eigene Themen vorzuschlagen und diese den Teilnehmern kurz vorzustellen, woraufhin jeder sein Interesse per Handzeichen bekunden kann. Im Anschluss werden die ausgewählten Themen in getrennten Räumlichkeiten diskutiert. Hierbei gilt: man kann kommen und gehen wann man möchte. Die einzelnen Sessions können sowohl Fachvorträge als auch Diskussionsrunden, Live-Coding-Sessions oder Sonstiges sein. Am Ende des Tages: natürlich – Ausklang im Pub.

Meine Highlights

In eigener Sache – Angular2

Johannes Hoppe und Gregor Woiwode präsentierten auf dem DevSpace eine Einführung in das zur Zeit noch in Entwicklung stehende Framework Angular2. Zusammen mit Ferdinand Malcher und meiner Wenigkeit werden wir Anfang nächsten Jahres ein Buch zu diesem Thema veröffentlichen – ihr dürft gespannt sein. Eine Aufzeichnung der Angular2-Session könnt ihr euch hier ansehen:

Die entsprechende Präsentation findet ihr hier.

Eine saubere Git Historie

Viele Entwickler nutzen Git, jedoch sehen Historien von Git-Repositorys oft sehr unstrukturiert und chaotisch aus – dutzende Branches und Commits mit den Namen wie: „fixed Bug“, „fixed bug from bugfix before“ und „finally fixed bug“ sind da keine Seltenheit. Alexander Groß erläuterte wie man seine commit-Historie sauber hält, wozu eigentlich git rebase gut ist und wie man mit Git Kirschen pflücken kann. Dabei verfolgt er immer dem Prinzip: Commit often, perfect later, publish once.

Wie organisiert man eine Konferenz

Torsten Weber (Veranstalter des Developer Open Space) berichtete zusammen mit Jan Fellien über seine Erfahrungen bei der Planung von Konferenzen. Von der Planung der Räumlichkeiten über das perfekte Datum bis hin zur Organisation des Caterings wurden alle Tipps und Kniffe erläutert.

Quịntessenz der Veranstaltung

Der Developer Open Space ist eine Konferenz oder Unkonferenz der ganz anderen Art. Keine förmlichen Anreden, keine feste Agenda, viel Platz für Kreativität und gute Chance für jeden neue Kontakte zu knüpfen!
Mein Fazit: Im nächsten Jahr bin ich wieder dabei!
wahl-logo

Der nächste OpenSpace

Teilen

LaTeX-Template für freiberufliche Dienstleistungsabrechnungen

Ist man freiberuflich tätig so, gehört das Rechnungen schreiben zur regelmäßigen Arbeit. Für das Erstellen der Rechnungen nutze ich LaTeX. Dafür habe ich mir ein angepasstes Layout erstellt, welches zum einen die abzurechnenden Leistungen und zum anderen die Kunden- und Rechnungsdaten aus Dateien holt und diese an entsprechenden Stellen der Rechnung einfügt, sowie eine Gesamtsumme der Dienstleistungen aufstellt.

Die Vorlage steht frei zur Verwendung und ist auf GitHub zu finden.

latex-template-freiberufler-rechnung

Teilen

Clubinformationssystem für den HfTL Club

Zur besseren Verwaltung der Mitglieder des HfTL Clubs haben wir uns vor einiger Zeit dazu entschieden eine Webanwendung – das Clubinformationssystem (kurz: CIS) zu entwickeln. Diese Anwendung bietet uns die Möglichkeit automatische Mitgliederlisten zu pflegen. Man hat die Möglichkeit neue Mitglieder mit ihren Stammdaten anzulegen, dieser werden dann in einen LDAP-Baum eingetragen und automatisch für die Nutzung des WLANs im Club freigeschalten. Außerdem hat man die Möglichkeit Administrator Privilegien zu vergeben um somit Mitglieder  entfernen, bearbeiten und hinzufügen zu können. Des weiteren wurde ein Protokolleditor eingebaut, bei dem man in Markdown-Syntax Texte eingeben kann. Diese werden anschließend vom Backend in HTML und PDFs umgewandelt.

Da Projekt kann man auf Github finden.

Teilen

Room-Presence-Service fürs Büro

Wer kennt das nicht, man sitzt im Büro und ständig kommen Leute, und haben Fragen oder wollen einfach mal Hallo sagen. Es gibt jedoch Momente in denen man sehr beschäftigt ist und einfach mal seine Ruhe haben möchte. Im Online-Bereich ist das ganz einfach: Messenger auf Status „beschäftigt“ setzen und gut ist es. So etwas muss doch auch in der Realität funktionieren!

Zusammen mit drei Kommilitonen haben wir Anfang 2015 einen Room Presence Service für unser Büro entwickelt. Dieser zeigt den aktuellen Status der jeweiligen Person über der Tür an. Das ganze wird über ein Webinterface gesteuert, sodass man jederzeit seinen Status anpassen kann.

Hier könnt ihr euch einen kleinen Eindruck von der ersten Version verschaffen, bei der lediglich ein An/Aus Zustand verfügbar war.

Später haben wir das ganze noch ein wenig umgebaut, sodass nun RGB-LEDs eingebaut wurden und man verschiedene Farben hinterlegen kann (Rot: beschäftigt, Gelb: Abwesend, …).Ebenfalls ist es möglich eine individuelle Farbe über einen Color-Picker einzustellen. Das ganze Projekt ist auf Github zu finden.

Teilen

Ein Infoscreen für die eigene Wohnung

Endlich fertig! Mein Info-Monitor für die Wohnung hängt nun. Vor einiger Zeit begann ich mit der Programmierung einer WebApp. Dabei kommt ein Radxa Rock Pro mit Android Betriebssystem und einem angeschlossenen Touchscreen zum Einsatz. Auf dem Monitor sieht man die aktuellen Abfahrtszeiten von Bus- und Bahn, das Wetter der nächsten Tage, eine Galerie, Gästebuch, eine Einkaufsliste, … . Ursprünglich ließ ich mich von einem Freund inspirieren, der sich eine Anzeige für die Bus- und Bahnverbindungen programmierte (Das Projekt ist hier hier zu finden). Anschließend baute ich mir weitere Features dazu. Das Projekt findet man auch unter info.d-koppenhagen.de oder auf Gihub.

Teilen

Infoscreen für den HfTL Club

Vor einiger Zeit begannen ein paar Freunde und ich mit dem programmieren eines Webinterfaces für den HfTL Club in der  Hochschule für Telekommunikation in Leipzig. Das Webinterface läuft im Club auf einem Raspberry Pi und wird über einen Touchscreen bedient. Dies ermöglicht Kunden sich Songs zu wünschen oder Pizza-Bestellungen aufzugeben. Außerdem kann der Screen so eingestellt werden, dass die Aktuelle Barkarte, Nachrichten oder Sonder-Aktionen angezeigt werden.

Das komplette System lässt sich über ein Admin-Interface verwalten, welches eine LDAP Anbindung zur Club-internen Nutzerverwaltung hat. So kann man zum Beispiel gewisse Funktionen (Module) an- und abwählen und auch Freitexte eingeben, löschen und ändern.

Wenn ihr Interesse habt, dann schaut euch den Monitor doch einmal online an!

Das gesamte Projekt ist übrigens auch auf Github.com zu finden.

Teilen
1