Cross-plattform Apps mit Electron und React Teil 1

Cross-platform Apps mit React schreiben? Mit ElectronJS und ein paar npm-Paketen ist das kein Problem. In diesem Post möchte ich euch eine Grundlage zeigen, mit der du Anwendungen schreiben kannst, die auch unter Linux gut aussehen.

Mit der Kombination aus Electron und React kann man sehr einfach Desktopanwendungen für Linux, Windows und Mac entwickeln. Die Kombination aus Electron und React ermöglicht einen angenehmen Entwicklungsworkflow, der den meisten anderen GUI-Frameworks weit voraus ist.

Ein Beispiel für eine Anwendung die mit React und Electron entwickelt wurde, ist Alva. Alva ist eine Anwendung um Prototypen für Web-Komponenten zu entwerfen.

Was ist Electron?

Electron ist ein Framework, um Desktop Anwendungen mithilfe von Web-Technologien zu entwickeln. Electron basiert auf dem Chromium-Browser und dem NodeJS-Framework.

Durch die Kombination von Chromium und NodeJS kann man gleichzeitig seine Web-Entwicklungs-Kenntnisse nutzen und trotzdem auf das Dateisystem bzw. die Hardware des Host-Rechners zugreifen.

Bekannte Beispiele für Anwendungen, die mit Electron geschrieben worden sind, sind die Text-Editor Atom und Visual Studio Code, die Desktop-Anwendung von Skype und der Slack Chat-Client. Electron ist vor allem bei Startups aus dem Silicon Valley sehr populär.

Durch die Verwendbarkeit von JavaScript-Bibliotheken kann man bei der Entwicklung von Electron-Apps auf einen riesigen Vorrat an nützlichen Frameworks zurückgreifen. Daher kann man auch React mit Electron verwenden.

Was ist React?

React ist eine JavaScript-Bibliothek zur Entwicklung von Benutzerschnittstellen. React wird von Facebook entwickelt und eignet sich besonders für die Entwicklung von Single-Page-Apps, wie sie häufig mit Electron entwickelt werden.

Das Besondere an der GUI-Entwicklung mit React ist, dass man seine Benutzerschnittstelle deklarativ entwickelt. Das heißt, man muss seine Web-Komponenten nicht selber verändern, wenn sich der zugrundeliegende Zustand der Anwendung verändert. Durch React passen sich die einzelnen Komponenten automatisch dem aktuellen Zustand der Anwendung an.

Dieses reaktive Verhalten ist auch der Namensgeber für React. Darüber hinaus bietet React noch einige interessanten Funktionen zum Zustands-Management, die bei Bedarf auch noch durch weitere Bibliotheken erweitert werden kann.

Warum Electron + React?

Die Kombination aus React und Electron bildet ein GUI-Framework, dass sehr gut dokumentiert ist, sehr Entwickler freundlich ist und auf ein riesiges Ökosystem zurückgreifen kann. Alles Eigenschaften, die die gängigen GUI-Frameworks, speziell unter Linux, so nicht bieten.

Erste Schritte

Im Folgenden gehe ich von grundlegenden JavaScript-Kenntnissen und Basiswissen in der Verwendung von Nodejs aus.

Als Erstes müssen wir Electron mit React aufsetzen. Das geht am leichtesten mit Electron Forge. Electron Forge ist ein Command-Line-Projekt. Mit dem sich Electron Projekte schnell aufsetzen lassen. Es stehen mehrere Templates zur Verfügung um schnell das passende Framework für Electron aufzusetzen. Neben React kann man beispielsweise auch TypeScript oder Angular mit Electron aufsetzen.

Um Electron Forge zu installieren und dann ein neues Electron-React Projekt zu starten, gibst du in einem Terminal folgenden Code ein:

npm install -g electron-forge
electron-forge init electron-react-example --template=react
cd electron-react-example
npm install
electron-forge start

Der Prozess dauert ein wenig, da die komplette Runtime von Electron heruntergeladen wird. Am Ende sollte dic ein Electron Fenster mit einer neuen React-App begrüßen.

Electron-React-Example

Eine weitere beliebte alternative Electron Apps mit React zu erstellen ist das Electron React Boilerplate. Ich habe mich für Electron Forge entschieden, weil die Optionen zur Paketierung der App aus meiner Sicht umfangreicher sind und besser funktionieren. Electron React Boilerplate bietet sehr umfangreiche Voreinstellungen für React, die mir mehr im Weg standen, als sie mir genutzt haben.

Warum kein create-react-app?

Ein Wort noch zu Create React App. Create React App ist das offizielle Tool von Facebook um neue React Apps zu erstellen. Allerdings ist Create React App ganz klar auf „echte“ Web-Applikationen ausgelegt.

So verhindert Create React App die Benutzung von nativen Nodejs-Modulen. Damit degradiert es Electron zu einem einfachen Browser-Fenster. Sodass der eigentliche Sinn von Electron zerstört wird.

Am Ende steht folgende Verzeichnisstruktur:

/
├── LICENSE
├── node_modules
├── package.json
├── src
│ ├── app.jsx
│ ├── index.html
│ └── index.js
└── yarn.lock

Wir werden unsere Änderungen ausschließlich in src machen werden.

Eine Demo-App

Unsere Beispielanwendung wird ein Nachbau der gtk3-demo-application.

gtk3-demo-application

Schließlich wollen wir ja eine Alternative zur GUI-Entwicklung finden.

Du findest den Source-Code für dieses Tutorial auf Github: https://github.com/rockiger/electron-react-example

Eine erste Änderung

Um zu sehen, ob das Hot-Reloading von Electron Forge funktioniert, werden wir eine kleine Änderung an unserer App vornehmen, bevor wir richtig loslegen.

Dafür öffnen wir die Datei app.jsx und ändern den Platzhaltertext ab.

...
<h2>Demo Application</h2>
...

Sobald du die Datei geändert hast und abspeicherst, sollte sich auch der angezeigte Text in der Electron App ändern.

Um aus der Kombination von Electron und React ein richtiges GUI framework zu machen, benötigen wir noch eine weitere Bibliothek: BlueprintJS.

BlueprintJS ist ein UI-Toolkit für React. Es bietet eine große Anzahl an Komponenten, aus denen wir unsere Oberfläche bauen können. Um BlueprintJS zu installieren, geben wir folgenden Code in der Kommandozeile ein:

npm i @blueprintjs/core --save

Danach müssen wir noch die CSS-Datein einbinden. Dazu öffnen wir index.html und fügen folgenden Code ein vor dem </head>-Tag ein:

  <link href="../node_modules/normalize.css/normalize.css" rel="stylesheet" />
  <link href="../node_modules/@blueprintjs/core/lib/css/blueprint.css" rel="stylesheet" />
  <link href="../node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css" rel="stylesheet" />

Wenn du nach der Änderung die Electron neu lädst (<Strg>+R), solltest du eine andere Schriftart sehen.

Um unsere Demoanwendung nachzubauen, werden wir wie folgt vorgehen: Zuerst werden wir die Toolbar nachbauen, dann werden wir ein Textfeld integrieren und abschließend die Statuszeile implementieren.

Der Einfachheit halber werden wir alles in einer Datei entwickeln. Bei einer echten Anwendung würden wir aus Gründen der Übersichtlichkeit die Komponenten in mehrere Dateien aufspalten.

Toolbar

Die Toolbar-Komponente heißt in BlueprintJS Navbar. Sie hat mindestens eine NavbarGroup als Tochter. Diese wiederum kann Buttons und Trenner als Töchter haben.

Um die Demo Applikation nachzubilden haben wir der Navbar 5 Töchter gegeben. Davon sind 4 Buttonn und eine ein Trenner. Den Button mit dem Pfeil nach unten haben wir in ein Popover gepackt, um das Menü zu repräsentieren.

Der Code für unsere App sieht wie folgt aus:

import React from 'react';
import {
  Button,
  Classes,
  Navbar,
  NavbarDivider,
  NavbarGroup,
  Popover,
  Menu,
  MenuItem,
} from '@blueprintjs/core';

export default class App extends React.Component {
  render() {
    return (
      <div id="Layout">
        <Navbar>
          <NavbarGroup>
            <Button className={Classes.MINIMAL} icon="folder-open" />
            <Popover content={<Menu><MenuItem text="File 1" /></Menu>}>
              <Button className={Classes.MINIMAL} icon="chevron-down" />
            </Popover>
            <Button className={Classes.MINIMAL} icon="small-cross" />
            <NavbarDivider />
            <Button className={Classes.MINIMAL} icon="properties" />
          </NavbarGroup>
        </Navbar>
      </div>);
  }
}

Wir importieren zuerst die benötigten Module und erweitern dann die App-Komponente. Jede React Komponenten-Klasse benötigt eine Render-Methode. Das Besondere der Render-Methode ist, dass man dort HTML und Javascript mischen kann. (Es gibt auch noch andere Komponenten. Die Besprechung würde hier aber zu weit fühern. Ich verweise daher auf die React-Dokumentation.)

Um das Verhalten der Toolbar nachzubauen, müssen wir nun den einzelnen Buttons eine onclick-Funktion geben.

import { remote } from 'electron';
const showMessageBox = remote.dialog.showMessageBox;
const app = remote.app;
...
            <Popover content={
              <Menu>
                <MenuItem
                  text="File 1"
                  onClick={() => showMessageBox({
                    type: 'info',
                    message: 'You activated action: "file1"',
                    buttons: ['Close'],
                  })}
                />
              </Menu>}
            >
              <Button className={Classes.MINIMAL} icon="chevron-down" />
            </Popover>
            <Button
              className={Classes.MINIMAL}
              icon="small-cross"
              onClick={() => app.quit()}
            />
            <NavbarDivider />
            <Button
              className={Classes.MINIMAL}
              icon="properties"
              onClick={() => showMessageBox({
                type: 'info',
                message: 'You activated action: "logo"',
                buttons: ['Close'],
              })}
            />
...

Da Electron zwischen Haupt- und Render-Prozess unterscheidet, können wir aus einem Render-Prozess ( Das ist immer das, was als Fenster dargestellt wird.) auf den Hauptprozess nur zugreifen, wenn wir das Remote-Modul importieren.

Dies haben wir in den ersten drei Zeilen gemacht: Wir haben das Remote-Modul importiert und dann die Methode ShowMessageBox und das App-Objekt in zwei Konstanten gespeichert.

Die eigentlichen Click-Handler sind sehr einfach gehalten. Aus diesem werden nur die importierten Electron Methoden aufgerufen. Das Ordnersymbol hat übrigens keinen Click-Handler bekommen, weil dies in der Demo App auch so ist. Allerdings könnte es eine gute Übung sein, mit einem Klick auf das Ordnersymbol einen Öffnen-Dialog zu zeigen.

Fertige Toolbar

Textfeld

Als nächstes werden wir das Textfeld einfügen. Hier bedienen wir uns einer HTML-Textarea.

Es muss dazu gesagt werden, dass dies kein vollständiger Text-Editor ist. Eine Textarea hat nur eine eingeschränkte API. Es sind viele Bibliotheken auf dem Markt, um leistungsfähige Editoren in eine Website zu integrieren.

Bekannte Bibliotheken, die gut mit React funktionieren sind draft.js und slate.js. Laut diesem Github-Issue soll eine Lösung auf Basis von draft.js demnächst in Blueprint landen. Allerdings ist dieses Ticket schon relativ alt und ich weiß nicht, wann diese Lösung eingeführt wird.

Um unser Layout wie in der Demo-Application zu halten, müssen wir das CSS für das umschließende Element und den Editor ein wenig abändern. Wir nutzen Flexbox, damit das Textfeld den gesamten freien Raum des Fensters einnimmt.

...
<div id="Layout" style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
...
</Navbar>
<textarea
  id="TextField"
  style={{
    height: '100%',
    flexGrow: 1,
    overflow: 'auto',
    border: 'none',
    resize: 'none',
    outline: 'none',
  }}
/>
...

Statusbar

Abschließend erstellen wir noch unsere Statusbar. Diese stellt uns neben dem eigentlichen Layout, noch vor eine zweite Aufgabe: Wir müssen nämlich die Cursorposition und die Anzahl der Zeichen in der Statusbar anzeigen.

Das Layout ist schnell erstellt. Wir erstellen ein HTML Element, das eine Höhe von 50 Pixel hat und einen leicht grauen Hintergrund. Hierzu verwenden wir vordefinierte Farben von Blueprint und schreiben sie in das Style-Attribut der Statusbar.

...
  Colors,
} from '@blueprintjs/core';
...
<div
  id="StatusBar"
  style={{
    backgroundColor: Colors.LIGHT_GRAY5,
    borderTop: `1px solid ${Colors.LIGHT_GRAY1}`,
    height: '50px',
    padding: 12,
  }}
/>
</div>);
  }
}

Aufwändiger wird es nun, die Statistik über das Textdokument zu erstellen. Hierfür müssen wir Zustand in React einführen. Das Tolle an React ist, das bei Veränderungen des Zustands die betroffenen Komponenten aktualisiert werden. Das erlaubt es ein sehr simples Zustandsmodell der Applikation zu entwerfen. Wer noch gar keine Erfahrung mit React hat, sollte an dieser Stelle mit dem offiziellen Tutorial auseinandersetzen und dann hierher zurückkommen.

Als erstes führen wir eine Zustandsvariable statistic ein und initialisieren diese. Darüber hinaus wollen wir deren Inhalt in der Statusbar darstellen.

Als Erstes legen wir einen Konstruktor für unsere Komponente an, in der wir die Zustandsvariable definieren. Wo wir gerade im Konstruktor sind, binden wir noch eine Methode an das this-Objekt der Komponenten. Die Methode werden wir gleich erstellen.

...
export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      statistic: {
        row: 0,
        col: 0,
        chars: 0,
      },
    };
    this.onInput = this.onInput.bind(this);
  }
...

Als nächstes ergänzen wir das Textfeld um ein onKeyDown-Attribut. Damit wir Nutzer-Eingaben abfangen können. Um die Änderung der Textarea nun von unserer Statusbar darstellen zu können, fügen wir folgenden Text innerhalb des Elements ein.

...
<textarea
  id="TextField"
  style={{
    height: '100%',
    flexGrow: 1,
    overflow: 'auto',
    border: 'none',
    resize: 'none',
    outline: 'none',
  }}
  onKeyDown={this.onInput}
/>
...

Dabei erlaubt uns React mit den geschweiften Klammern direkt auf die Zustandsvariable der Komponente zuzugreifen. Bei jeder Änderung der Zustandsvariablen wird die Komponente aktualisiert.

<div
  id="StatusBar"
  style={{
    backgroundColor: Colors.LIGHT_GRAY5,
    borderTop: `1px solid ${Colors.LIGHT_GRAY1}`,
    height: '50px',
    padding: 12,
  }}
>
  Cursor at row {this.state.statistic.row} column  
  {this.state.statistic.col} - 
  {this.state.statistic.chars} chars in document
</div>

Zu guter Letzt schreiben wir noch eine einen Event-Handler für Nutzer-Eingaben. Dieser passt den Zustand der Komponente der aktuellen Cursorposition des Textfeldes an. Achtung: Der Event-Handler berücksichtigt nicht die typische Vorgehensweise in React. Er dient nur zur Veranschaulichung des reaktiven Charakters von React. Ich möchte an dieser Stelle nicht noch weitere React-Konzepte wie Referenzen oder Props einführen.

...
  onInput() {
    const textField = document.querySelector('#TextField');
    const textBeforCaret = textField.value.slice(0, textField.selectionStart);
    const rows = textBeforCaret.split('\n');
    const row = rows.length;
    const col = rows.pop().length;

    this.setState({ statistic: {
      row,
      col,
      chars: textField.value.length,
    } });
  }

  render() {
...

Wenn er nun unsere Anwendung anschauen ist diese der Beispielanwendung von GTK sehr ähnlich. 

Fertige Electron-React-Demo-Application

Im nächsten Teil, werden wir die Optik der App anpassen, um das Feeling der App noch „nativer“ erscheinen zu lassen. Später werden wir noch das Menü entsprechend abändern, dass es die gleiche Funktionalität umfasst wie in der gtk3-demo-application.

Created with Dictandu


Akiee 0.0.4

Akiee Welcome-Screen

Ich habe Akiee Version 0.0.4 veröffentlicht. Dieses Release verbessert die User-Experience in einigen Details.

So wurden die Ansichten für den Source-Code der Markdown-Datei und für die Gesamtübersicht (Board-View) in das Menü verlegt, weil ich sie selbst kaum benutzt habe und sie aus meiner Sicht nicht so oft benutzt werden sollten.

Wiederholende Aufgaben werden nun wieder auf TODO gesetzt, wenn sie abgeschloßen wurden. Beendete Aufgaben bekommen ein Erledigungsdatum, damit man nachschauen kann, wann eine Aufgabe beendet wurde. Dies gilt auch für sich wiederholende Aufgaben, sie bekommen als Erledigungsdatum das Datum der letzten Erledigung.

In der DONE-Ansicht werden nun alle erledigten Aufgaben in chronologischer Folge angezeigt, da man so besser nachschauen kann, was man in letzter Zeit erledigt hat.

Um den Backlog besser zu ordnen, kann man nun einzelne Aufgaben an das Ende oder den Anfang verschieben.

Wer seine Aufgaben über Cloud-Storage-Dienste wie Dropbox, OwnCloud oder Syncthing abgleichen möchte, kann dies nun tun. Man wählt einfach ein synchronisiertes Verzeichnis als Ort zum Speichern der Aufgaben an.

Zusätzlich habe ich Akiee deutlich schneller gemacht. Zum einen läuft Akiee nun auf Electron und zum anderen wurde die Darstellung überarbeitet, damit sie schneller angezeigt wird. Dank Electron gibt es jetzt Downloads für jegliche erdenkliche Plattform und in jedem erdenklichen Paketformat.

Die User Storys für Akiee 0.0.3

  • Port from Node-Webkit to Electron.
  • As a (kanban) user I want to have the DONE state ordered by time in reverse, that I can see what I finished last.
  • When I am ordering my backlog, I want to put Tasks from the end of the backlog to the top.
  • Dropbox support.
  • Refactoring – Speedup
  • Move to electron for better toolkit and faster user interface.
  • Test Section aus dem Reagent Cookbook durcharbeiten und auf Akiee anwenden – Make Akiee ready for mobile.
  • Try to speed up akiee with cursors.
  • When I „done“ a repeating task, I want that it is put to TODO again, but I want to see it in the DONE view.
  • Move Code-View and Board View to Menu, because it is almost never used.

Geplante Features

  • Mobile App to View task and add new ones.
  • Zim integration.
  • Markdown mode for zim.
  • When I enter a new task, I want to able to add more information to it without leaving my current view.
  • When I am scanning through a list in Akiee, I want to be able to use arrow-, page-, end- and pos1 keys.
  • When I am using Akiee a lot, I want to be able to donate somthing to the author, that I can help with / influence the development of Akiee.
  • When I am ordering my tasks, I want to be able to move them by drag&drap, because it is much faster, than using the arrow-buttons.
  • When I have larger tasks/stories (like writing a test article), I want to be able to divide it in sub-tasks.

Downloads

Releases für weitere Platformen findet ihr im Release-Repo auf GitHub.


Akiee 0.0.3 veroeffentlicht

Release 0.0.3 ist ein großer Schritt für Akiee. Ich habe Akiee von reinenm Javascript zu Clojurescript und Reagent, einem Wrapper für Facebook's React, migriert. Weiterhin wurde Akiee's Oberfläche überarbeitet, damit es sich besser in die unterstützten Desktopumgebungen einfügt. 

Auf funktionaler Ebene ist es jetzt möglich weitere Informationen zu einzelnen Aufgaben hinzuzufügen oder zu bearbeiten; wie z.B. geplanntes Datum, Wiederholungen, Tags, etc.

Die User Storys für Akiee 0.0.3 waren:

  • Merge rakiee repository with akiee
  • When I look over my task, I want to set/change an attribute so that I can change it to my needs.
  • improvement: Mac: Alias Ctrl shortcuts to Cmd
  • fix: Mac: Rename "node-webkit" in the menubar to Akiee
  • As A User I want to see the details of a task when I click on it, that I can see notes I did to finish it.
  • As a user, I want better integration, that the app feels more native to me.
  • As a developer I want to explore the options of using Clojurescript for Akiee, that I can leverage Lisp for competitive advantage

Um eine Kopie von Akiee zu bekommen, lade einen der folgenden Downloads herunter. Ich freue mich über jegliche Rückmeldungen.

Die nächsten Features

Was ist für Akiee 0.0.4. geplant?

  • As a (kanban) user I want to have the DONE state ordered by time in reverse, that I can see what I finished last.
  • When I make a mistake, I want to go back to the last state, so that I can start over.
  • As a User I want to order my task via Drag & Drop, that I can order my task more efficient.
  • When the markdown file of my tasks get to big, I want to export tasks that I done, so that I only have tasks in the file that are still relevant to me.
  • As a User I want to synchronize my tasks via Dropbox and similar services, that I can add tasks from every computer I have access to.
  • As a user I want to keep notes (not tasks), that I want to keep for future reference, that I can remember important information. 

Akiee 0.0.2

Als Erstes starte ich mit einem Bild. Oder, ladet euch die neueste Version einfach runter und seht selbst.

Akiee Version 0.0.2 mit Kanban-Board

Akiee ist schneller geworden und es sind einige Funktionen dazugekommen. Zusätzlich gab es noch ein paar Optimierungen.

Was ist neu?

  • Es gibt jetzt eine Suche, mit der man die aktuelle Ansicht filtern kann.
  • Die All-Ansicht wurde in Board umbenannt und entspricht jetzt einem einfachen Kanban-Board (siehe Screenshot). Mit dem Board kann man sich wunderbar einen Überblick über alle Task verschaffen und so besser priorisieren und planen.
  • In den einzelnen Tasks wird jetzt angezeigt, zu welchem Projekt sie gehören. Projekte sind im Editor nichts anderes als Überschriften erster Ordnung (#), die ihr ganz einfach hinzufügen könnt.
  • Der Willkommensbildschirm ist jetzt weniger verspielt, sondern erklärt Einsteigern ganz nüchtern, wie sie mit Akiee starten können.
  • Das Button-Layout wurde überarbeitet, der Editor hat ein Icon bekommen und ist jetzt nicht mehr auf einer Ebene mit dem Ansichten, sondern wurde zu den Funktionen auf die rechte Seite verschoben. Das ist aus meiner Sicht sinnvoller.
  • Die Startzeit wurde verringert, indem die Unit-Tests in der Produktivversion rausgenommen wurden.
  • Die Datenstrukturen und die Speicherung wurden refactored.
  • Mittlerweile werden auch Deadlines angezeigt; eingeben kann man sie allerdings nur, indem sie mit dem DEADLINE-Keyword im Editor eingibt: DEADLINE: <2013-8-24> einfach unter die Überschrift eines Tasks schreiben und die Deadline wird angezeigt.
  • Es gibt jetzt ein Waffle-Board zu Akiee, mit dem User-Storys geplant werden. Dort kann man sich die Reihenfolge der Features anschauen. Wenn ihr Featurewünsche habt, könnt ihr auf Github einen neue Issue anlegen oder kommentieren – ich freue mich über jede Anregung.

Was ist geplant?

Für die nächsten Versionen sind folgende Features geplant:

  • Umstieg auf Clojurescript und React, um nicht mehr mit Javascript arbeiten zu müssen.
  • Drag & Drop-Support, damit man effektiver die Reihenfolge der Aufgaben ändern kann.
  • Eine bessere Integration in die einzelnen Betriebssysteme, damit der Eindruck einer nativen App entsteht. Webei Gnome das wichtigste Zielsystem ist.
  • Die Done-Spalte soll nicht mehr nach RANK geordnet sein, damit man sehen kann, was man als letztes erledigt hat.
  • Eine Detailansicht der einzelnen Aufgaben, damit man Task auch ohne Markdown-Kenntnisse editieren kann.
  • Synchronisation mit Dropbox oder Ähnlichem
  • Notizenfunktion, weil Aufgaben und Notizen eng zusammenhängen.
  • Eine mobile Version
  • Ein Plugin-System
  • Pakete für Arch und Ubuntu

Weitere Features findet ihr auf dem Waffle-Board zu Akiee. Ich freue mich auf eure Kommentare und Anregungen.

Installation

Wer jetzt Lust bekommen hat Akiee auszuprobieren, findet hier den Akiee-Download.

Einfach das Archiv entpacken und entweder auf akiee (Linux) oder Akiee (Mac/Windows) klicken. Linux-Nutzer müssen eventuell noch festlegen, dass Skripte vom Dateimanager gestartet werden und nicht im Text-Editor geöffnet werden.

Nautilus configuration

Akiee ist in der Version 0.0.2; es ist das zweite Beta-Release. Ich selbst benutze Akiee aber schon seit einigen Monaten und würde mich freuen, wenn ihr eine Testfahrt mit Akiee macht.


Projektvorstellung: Akiee – eine neuartige Todo-Liste und Aufgabenverwaltung für Linux, Mac und Windows

Akiee ist eine Aufgabenverwaltung, die ich in den letzten Monaten geschrieben habe. Akiee ist der Versuch, das Thema Todo-Liste ein wenig anderes anzugehen.

Was unterscheidet Akiee von anderen Aufgabenverwaltungen:

  • Die Reihenfolge der Aufgaben soll einfach zu ändern sein. Mit Akiee kann man die Reihenfolge der Aufgaben ganz einfach per Mausklick ändern. Bei anderen Todo-Listen habe ich oft versucht, mit einer Mischung aus Prioritäten und Fälligkeiten meine Aufgaben zu sortieren. Mit Akiee weiß ich immer genau was als nächstes ansteht.

  • Akiee speichert meine Aufgaben in einer Markdown-Datei! Man kann seine Todo's mit jeden Texteditor auf diesen Planeten bearbeiten. Die Aufgaben werden nicht in einer Datenbank abgespeichert, die nur von Akiee gelesen werden kann. Wenn man seine Aufgabendatei mit seinem Dropbox-Ordner verlinkt, kann man auf seine Aufgaben ohne Probleme im Internet erreichen.

  • Aufgaben haben in Akiee drei Zustände: Todo, Doing, Done! Die Funktionsweise von Akiee ist an agile Methoden wie Kanban und Scrum angelehnt. Die Aufgaben haben deswegen drei Zustände: Todo – für alles was getan werden muss; DOING – für das was jetzt gerade getan wird; DONE – für die Dinge die schon erledigt wurden.

Akiee ist aus meiner Arbeit als Product Owner in einem Scrum-Team entstanden. Bevor ich Akiee hatte, habe ich den wunderbaren Org-Mode benutzt, von dem auch die Idee kam, Aufgaben in einer Datei zu speichern. Tatsächlich habe ich große Teile der Org-Mode-Syntax in Akiee eingebaut.

Technisch basiert Akiee auf Node-Webkit, die Oberfläche ist auf das Gnome3-Theme Adwaita zugeschnitten.

Video

Installation

Wer jetzt Lust bekommen hat Akiee mal auszuprobieren, kann das mit diesen Binarys tun:

Einfach das Archiv entpacken und entweder auf akiee (Linux) oder Akiee (Mac/Windows) klicken.

Akiee ist in der Version 0.0.1; es ist das erste Beta-Release. Ich selbst benutze Akiee aber schon seit einigen Monaten und würde mich freuen, wenn ihr eine Testfahrt mit Akiee wagt. Ich freue auf Anregungen und Fragen von euch. Die Sourcen findet ihr unter: https://github.com/rockiger/akiee


Wie man am besten Programmieren lernt

In diesem Artikel möchte ich die Erfahrungen und Fehler, die ich beim Programmierenlernen gemacht habe, teilen. Um eins von vornherein klarzustellen, ich bin kein top Programmierer, der in ein paar Nächten ein neues Betriebssystem zusammenhackt. Ich beherrsche ein wenig Webprogrammierung, kann Plugins und kleine GUIs schreiben. Als ich mit dem Programmieren angefangen habe, habe ich einige Fehler gemacht. Diese könnten für andere Programmieranfänger vielleicht interessant sein und können die vielen Expertentips ergänzen.

Meine Fehler

  1. C als erste Sprache

    Wie jeder Teenager wollte ich natürlich lernen wie man Spiele programmiert. Es wurde einem immer gesagt, dafür müsse man C lernen. Ich habs versucht und bin gescheitert. Punkt.
  2. Wing Commander als erstes Projekt 🙂

    Wie ich schon sagte, wollte ich Spiele programmieren, die ich selbst gespielt habe. Natürlich habe ich nie was zu Stande gebracht.
  3. Nicht gezielt genug

    Ich habe mich nie auf ein bestimmtes Projekt konzentriert. Ich habe mein Pläne, was ich als nächstes lernen sollte, immer geändert.

Was habe ich auf dem Weg gelernt?

  1. Lernt mit einer Skriptsprache programmieren!

    Ich kann jedem nur empfehlen mit einer Skriptsprache Programmieren zu lernen. Damit meine ich Python, Ruby, PHP, Perl und JavaScript. Der große Vorteil von Skriptsprachen sind unmittelbare Resultate, die einen weiter motiveren. Gebt print "Hello World" ein und ihr habt euer wichtiges Hello World Programm. Wenn man das mal mit Hello World in Java vergleicht: class HalloWorld { public static void main(String[] args) { String message="Hallo World!"; System.out.println(message); } } Java hat sogar die ganzen ergeizigen BWLer-Kommilitionen an meiner Uni zur verzweiflung gebracht. Ich persönlich empfehle Python als erste Programmiersprache. Python hat eine sehr klare Syntax und man kann eigentlich alles, von GUIs bis zu Webprogrammierung, mit Python machten. Wenn ihr euch auf Webprogrammierung konzentrieren wollt sind viellicht PHP oder JavaScript die bessere Wahl für euch (schneller erste Resultate). Später solltet ihr dann auch mal Scheme/Lisp lernen, es lehrt einen eine andere Denkweise und sollte euch zu einem besseren Programmierer machen. Deswegen wird es auch von vielen Einführungsbüchern an Universitäten verwendet. Danach solltet ihr, wenn ihr die wichtigesten Programmierkonzepte verstanden habt, auch noch C lernen. Denn C ist die Programmiersprache in der alle nennenswerten Betriebsysteme geschrieben sind und somit die Mutter aller Programmiersprachen.
  2. Arbeitet erstmal an kleinen Projekten.

    Das ist eigentlich selbstverständlich, aber ich hab mich nicht dran gehalten. Deswegen erwähne ich es hier trotzdem. Wenn ihr schnelle Resultate wollt, finde ich einfache Webprogrammierung ganz interessant und lohnend.
  3. Nur auf ein Projekt konzentrieren

    Fangt nicht mit mehrern Projekten gleichzeitig an. Das endet nur damit, dass ihr keins so richtig bearbeitet.

Ich hoffe meine Gedanken helfen euch auf eurem Weg Programmieren zu lernen und dabei motiviert zu bleiben. Falls jemand noch weitere Punkte hat oder anderer Meinung ist. Bitte teil dein Wissen mit mir.


Link Tipps: Zeitlupe, SICP, Automatisierung, Google Maps Alternative

slowmoVideo

 


Timelapse retiming (slow motion)
from Simon A. Eugster.

 

slowmoVideo ist eine Software, die aus normalen Videos Zeitlupen berechnet. Der Clou: die Viedeos sehen aus, als ob sie mit einer Hochgeschwindigkeitskamera geschossen wurden. Selbst bei wirklich langsamen Zeitlupen kommt es nicht zu einem Ruckeln der Videos.

Installation

sudo add-apt-repository ppa:brousselle/slowmovideo
sudo apt-get update
sudo apt-get install slowmovideo

slomoVideo Website

Einführung in die Informatik am MIT

Diese OpenCourseWare des MIT wird von vielen als die beste Einführung in die Informatik gehalten, die es gibt. Allerdings muss man sagen, dass das Material sehr anspruchsvoll ist! Die Videos machen es etwas leichter, als nur mit dem Buch zu arbeiten.

 


 

Structure and Interpretation of Computer Programs

Actionaz

Actionaz ist ein Automatisierungswerkzeug für Linux und Windows. Mit ihm kann man wiederkehrende Tätigkeiten automatisieren, ohne dass man Programmierkenntnisse benötigt.Actionaz Ubuntu


Actionaz simuliert Mausklicks und Tastenanschläge; zusätzlich kann es weitere Systemfunktionen wie Dialoge und Töne aktivieren.

Installiert

sudo add-apt-repository ppa:nilarimogard/webupd8
sudo apt-get update
sudo apt-get install actionaz

Google Maps Alternative

Skobbler ist eine Google Maps Alternative, die auf OpenStreetMap basiert und auch einen guten Routenplaner mitbringt. Wer also nicht möchte, dass seine Reisedaten an Google übermittelt werden, der findet hier eine gute Alternative.

Skobbler Maps


Neue Udacity Kurse

Die Online-Universität Udacity bietet im nächsten Semester neue Kurse an:

Entrepreneurship: The Lean LaunchPad – Wie man ein Startup aufbaut. (EP245)

Wie man das Risiko eines Start-ups minimiert und die besten Voraussetzungen für einen Erfolg legt. Silicon Valley Guru Steve Blank zeigt, wie man eine Geschäftsidee pr üft, indem man Kontakt mit potenziellen Kunden aufnimmt und sich vom Kunden bei der Weiterentwicklung seiner Geschäftsidee lässt. Ein Kurs, der auch für alle Open-Source-Projekte interessant ist, egal ob man Gelder einsammeln will oder einfach nur möglichst viele Anwender haben will.

Making Math Matter: Differential Equations in Action (CS222)

Dieser Kurs wird sich mit Problemen aus dem echten Leben. Beispiele sind die Rettung der Apollo 13 Crew oder wie man Epidemien eindämmt.

Software Debugging: Automating the Boring Tasks (CS259)

Hier lernt ihr, wie ihr systematisch Fehler in euren Programmen findet und den Debugging-Prozess automatisiert.

Intro to Theoretical Computer Science: Dealing with Challenging Problems (CS313)

Dieser Kurs lehrt euch die Konzepte der theorethischen Informatik und wie man schwierige algorithmische Problem löst.

Alle weiteren Kurse von Udacity findet ihr auf der Kursübersicht. Die meisten Kurse drehen sich um die Informatik.

Udacity arbeitet an der Aufwertung der Udacity-Kurse

Eine interessante Entwicklung bei Udacity ist, dass Sie versuchen die Online-Abschlüsse verwertbar zu machen:

  1. Ihr könnt einen Lebenslauf bei Udacity einstellen und Udacity versucht, für euch als Jobvermittler aufzutreten. Allerdings sind die Jobs momentan hauptsächlich in Kalifornien.

  2. Es werden momentan externe Prüfungen entwickelt, ähnlich wie das bei der Fernuni Hagen der Fall ist. Dies soll das Vertrauen in die Udacity-Abschlüsse erhöhen, da man nicht mehr so einfach betrügen kann.


Udacity

Die Online-Universität Udacity startet heute ins zweite Hexamester (= Semester, die 2 Monate lang sind). Die Vorlesungen sind für jeden interessant, der nicht Informatik studiert hat und entweder Informatik von Grund auf lernen will oder seine theoretische Basis ausbauen will.

Kurse

Momentan werden 5 Vorlesungen angeboten:

  • CS101 – Building a Search Engine (David Evans, Professor University of Virginia)
  • CS212 – Design of Computer Programs (Peter Norvig!!!, Director of Research Google)
  • CS253 – Web Application Engineering (Steve Huffman, Co-Founder Reddit)
  • CS262 – Programming Languages (Westley Weimer, Professor Professor University of Virginia)
  • CS373 – Programming A Robotic Car (Sebastian Thrun, Professor Stanford University)
  • CS387 – Applied Cryptography (David Evans, Professor University of Virginia)

Einführung in die Informatik – CS101

Ich habe im letzten Semester schon CS101 belegt und möchte ein wenig über meine Erfahrungen berichten:

Prof. David Evans trägt die Inhalte ähnlich wie mein alter Mathe-Prof auf seinem Overhead-Projektor vor. Die Konzepte werden handschriftlich vorgeführt, dabei werden sie von Grund auf entwickelt – das macht es leicht den Inhalten zu folgen.

Vorlesung Udacity

Zwischen den kurzen Videos werden, wie in amerikanischen Universitäten üblich, immer wieder kleine "Quizzes" eingestreut. Die Quizzes können entweder Multiple-Choice-Aufgaben, Ergebnis-Abfragen und auch richtige Programmieraufgaben sein, für die sich ein Python-Fenster öffnet. Sich von der Vorlesung einfach berieseln zu lassen ist also nicht – man muss schon die ganze Zeit mitarbeiten.

Am Ende jeder Vorlesung gibt es Hausaufgaben, die nach einer Woche abgeliefert werden müssen. Einmal darf man sie auslassen – ohne dass das Auswirkungen auf die Note hat. Ja ihr habt richtig gehört, es gibt Noten.

Zum Abschluss der Vorlesung gibt es eine Abschlussklausur, die einen größeren Einfluss auf die Note hat, als die einzelnen Hausaufgaben.

Udacity wertet die Aufgaben mittels Computer aus, so werden die Hunderttausenden von Ergebnissen korrigiert. Das hat 1 Nachteil: Richtige Lösungswege mit falschem Ergebnis sind genauso falsch wie völlig falsche Ansätze! Es gibt keine Teilpunkte.

Wer jetzt Lust auf Udacity bekommen hat, sollte sich sofort unter http://www.udacity.com einschreiben. Die Kurse haben am 17. April angefangen und können bis 25.April belegt werden – allerdings ist das auch der Abgabe-Termin für die erste Hausaufgabe. Es ist also Eile geboten.

Unendliche Möglichkeiten

Udacity ist meiner Meinung nach ein richtiger Game-Changer. Es ist jetzt möglich eine universitäre Ausbildung zu bekommen, egal wo man wohnt, wie viel Geld man besitzt oder welchen Abschluss man in der Tasche hat. Das Einzige was man braucht, ist ein Internetanschluss. Das macht den Lehrauftrag von Universitäten praktisch obsolet. Bitte den letzten Satz nochmal auf der Zunge zergehen lassen: Man braucht keine Universitäten mehr! Zumindest was die Lehre angeht.

Was Udacity (noch) nicht bieten kann:

  • einen Abschluß
  • Forschungsleistungen
  • ein betrugssicheres Prüfungsumfeld
  • ein Studentenleben

Ihr lernt also nur für euch, aber der Lohn sind Superkräfte. Ihr bekommt die Werkzeuge, um alles mit dem Computer zu machen, was Ihr euch vorstellen könnt; die Grenzen sind eure Vorstellungskraft.