Lesezeit:  8  Minuten

Nach meinem letzten Eintrag, in welchem ich meine App [Athenify] vorgestellt habe, erhielt ich viele Fragen. Die meisten waren Variationen dieser beiden Fragen:

• Wie hast Du Programmieren gelernt?
• Womit hast Du die App gebaut?

In diesem Artikel möchte ich diese Fragen beantworten. Im Wesentlichen geht es also um zwei Aspekte:

1. Wie lernt man überhaupt Programmieren, wenn man es nicht schon an der Uni als Fach hatte?
2. Wie baut man eine Web App? Welche Tools braucht man dafür?

Widmen wir uns zunächst der ersten Frage.

Programmieren lernen: Wo fängt man an?

Ich hatte in der Schule drei Jahre Informatik und es hat mir großen Spaß bereitet. Ich habe, als ich vor einem Jahr für meine Masterarbeit JavaScript gelernt habe, also nicht ganz bei Null angefangen. Allerdings: Zu meiner Schulzeit haben wir mit Delphi programmiert. Das ist eine (veraltete) Programmiersprache, die heute niemand ernsthaft lernen sollte!

Zum Glück gibt es heute im Internet eine Vielzahl an wirklich tollen Materialen – manche kostenlos, manche kostenpflichtig. Mithilfe dieser Materialien ist es sehr gut möglich, aus dem Stand heraus zum Programmierer zu werden. Aus meiner Sicht sind drei Dinge entscheidend, wenn man Programmieren lernen möchte:

1. Die Bereitschaft zu Investieren

Auch wenn es viele gute kostenlose Kurse auf YouTube und anderen Seiten gibt, würde ich empfehlen, direkt von Anfang an einen kostenpflichtigen Kurs zu machen. Das hat mehrere Gründe. Erstens: Ein kostenpflichtiger Kurs stellt ein Investment dar, und die Forschung zeigt, dass man dann eher am Ball bleibt. Zweitens: Kostenpflichtige Kurse sind oft besser gestaltet, d.h. besser strukturiert und umfangreicher ,als kostenlose Kurse. Das ist natürlich nicht immer der Fall, aber tendenziell ist die Qualität von kostenpflichtigen Kursen besser.

Ich habe vor einem Jahr folgendes gemacht. Ich habe mir einen Account auf Udemy erstellt und dort nach den bestbewerteten Kursen für JavaScript gesucht (viele Bewertungen, mehr als 4,5 Sterne). Dann habe ich mir einige Kurse gekauft und mir die Videos angeschaut. Hier ist ein Screenshot meines Udemy-Accounts. In rot umrandet sind die Kurse, die ich für meine erste App benötigt habe, die anderen Kurse mache ich gerade oder plane sie bald zu machen:

2. Googeln können

Jeder, wirklich jeder Programmierer macht es so: Etwas klappt nicht, man kopiert die Fehlermeldung oder Frage in Google und öffnet dann unzählige Tabs von StackOverflow (ein Online-Forum, auf dem sich Programmierer gegenseitig austauschen und helfen).

Kein Programmierer baut in einem Vakuum eine App. In Wirklichkeit gehört hundertfaches Googeln zum Alltag. Will sagen: Wenn Du Programmieren lernst, gehört es zur Tagesordnung, ständig zu Googeln, wie ein Problem gelöst werden kann. Das ist nicht »Cheaten« sondern der ganz normale Prozess.

Wenn man also etwas nicht hinbekommt: Google anwerfen und das Problem suchen. Die Wahrscheinlichkeit ist sehr hoch, dass es im Internet bereits eine Lösung für das Problem, vor dem man steht, gibt. Ich habe mir unzählige Lösungen ergoogelt und die Fähigkeit, richtig Googlen zu können ist zum Programmieren lernen wirklich unerlässlich.

3. Ein echtes Projekt haben, für das man das Programmieren lernt

Im ersten Punkt schreibe ich, dass man einen bezahlten Kurs folgen soll. Das ist für den Anfang gut und wichtig (start small). Aber: Programmieren nur nach Tutorial, das ist wie Fahrrad mit Stützrädern fahren: Es ist ähnlich wie richtig Fahrrad fahren, aber nicht dasselbe. Wenn man die Tour de France fahren möchte, muss man die Stützräder ablegen.

In Wahrheit lernt man wirklich programmieren nur dann, wenn man echte Probleme für eine echte App lösen muss. Folgt man nur Tutorials wird diese immens wichtige Kompetenz überhaupt nicht trainiert. Deshalb ist es ungemein wichtig, so früh wie möglich von den Tutorials zu einer echten App zu springen.

Wann dieser Sprung gemacht werden sollte ist sehr schwer zu sagen. Macht man ihn zu früh, ist es zu schwer, denn man besitzt noch nicht die richtigen Fähigkeiten. Macht man ihn zu spät, verliert man Lernzeit. Aus meiner Sicht macht demnach folgendes Sinn:

• Am Anfang so viel Wissen wie möglich aufsaugen, Tutorial für Tutorial schauen.
• Als nächstes dann kleinere eigene Experimente wagen, viel Googeln.
• Gezielt Tutorials anschauen für bestimmte Techniken.
• Und dann irgendwann lässt man die Stützräder komplett weg, baut an einem eigenen Projekt und googelt was das Zeug hält.

Das sind aus meiner Sicht die drei wichtigsten Schritte. Schön und gut, aber womit genau baut man nun eine App. Im nachfolgenden skizziere ich den sogenannten "Stack", den ich für mein App-Projekt verwendet habe. Mit Stack meint ein Programmierer einfach die Sammlung an Werkzeugen, Bibliotheken und Hilfsmitteln, die zum Programmieren verwendet wird. Es ist sozusagen die Ausrüstung des Programmierers. Ein Programmierer kann, wie ein Handwerker, je nach Projekt unterschiedliche Tools verwenden. Es gibt keinen "richtigen" oder "falschen" Stack. Aber: je nach Projekt eigenen sich verschiedene Tools besser oder schlechter.

Tatsache ist aber auch, dass es heute ein ungeheure Vielzahl an Tools gibt. Als Anfänger fällt es da oft schwer, wo man den nun anfangen soll. Daher soll die folgende Liste als Inspiration dienen.

Was ist ein möglicher Stack, um eine App zu bauen?

Wenn man eine App bauen möchte, gibt es zwei große Möglichkeiten: Man baut eine native App, zum Beispiel mit Java bei Android, Swift bei iOS oder etwas vergleichbarem für Windows oder Mac. Eine native App wird nativ für das Endgerät kompiliert.

Oder man baut eine Web-App.

Ich werde hier die zweite Möglichkeit beschreiben. Eine WebApp nutzt Webtechnologien wie HTML, CSS und JavaScript und läuft auf jedem Endgerät, das einen Browser besitzt. Die Grenzen zwischen App und Webseite verschwinden zunehmend. Zuletzt hat SpaceX eine Rakete ins All geschickt, die mit JavaScript ausgestattet ist. Im nachfolgenden zähle ich die Tools auf, die ich verwendet habe.

Editor: Hiermit schreibt man den Code Um zu Programmieren, braucht man einen Code-Editor (= Word für Programmieren). Ich kann den kostenlosen Editor Visual Studio Code von Microsoft sehr empfehlen.

Versions-Management: Hier verwaltet und speichert man den Code Jeder kennt es: "Presentation_V3_Final_last-change_Sent.pptx". Dieses Problem ist bei der Software-Entwicklung dank Versionsmanagement wie Subversion oder Git mittlerweile gelöst. Ich empfehle jedem, Github zu verwenden. Über 50.000.000 Entwickler verwenden es, hier läuft der** Code der Menscheit**. Auf Github lädt man den Quelltext der App und kann dort die verschiedenen Versionen organisieren. Es dauert ein paar Stunden, Github zu lernen, aber es ist ein sehr, sehr wichtiges Investment.

Paketmanager: Hiermit lädt man Erweiterungen runter Um Frameworks und Libraries zu installieren, braucht man npmund Node (für beides gibt es in jedem Video-Kurs eine Anleitung).

JavaScript Framework: Hilft dabei, ein User Interface zu bauen Wenn man eine Web-App baut, dann nutzt man fast immer ein sogenanntes JavaScript-Framework. Dabei handelt es sich um eine Sammlung von Code, die es einfach macht, mit JavaScript zu arbeiten (man könnte auch ohne Framework starten, das nennt man dann »Vanilla JavaScript«).  Bei den Frameworks gibt es drei Hauptmöglichkeiten (Reihenfolge gibt ungefähr die Popularität wieder):

• React, das von Facebook entwickelt wird
• Vue, das von einer Gruppe von Programmieren um Evan Vue entwickelt wird
• Angular, das von Google entwickelt wird

Ich habe mich für Vue entschieden. Es ist aus meiner Sicht sehr einsteigerfreundlich. Fakt ist: Mit allen drei Frameworks kann man tolle Web-Apps bauen.

CSS-Library: Ist für das optische Styling von Webseiten und Apps verantwortlich Wenn man das Interface der App nicht komplett selbst in CSS gestalten will (und das sollte man als Anfänger definitiv nicht tun), kann man ein CSS-Framework verwenden. Das bekannteste ist Bootstrap (habe ich für meine Masterarbeit verwendet). Für meine App habe ich **Bulma **verwendet, um genau zu sein die Vue-Implementierung von Bulma, die buefy heißt.

Datenbank: Hier werden die Daten, die in der App verwendet werden, gespeichert Wenn man in einer App Daten speichern möchte, braucht man eine Datenbank. Hier bieten sich MongoDB,

Firebase oder, wenn man relationale Daten hat, eine SQL-Implementierung an. Ich habe Firebase verwendet.

Authentifizierung: Hiermit lassen sich User-Accounts mit Passwort etc. verwalten Wenn die App verschiedene Nutzer unterstützten soll (mit E-Mail, Passwort etc.) braucht man eine Auth-Lösung. Ich habe mich auch hier für Firebase Auth entschieden und die Implementierung ist wirklich sehr einfach.

Hosting: Ort, wo die App gehostet wird (ein Server, den man mietet) Die Web-App muss natürlich irgendwo gehostet werden. Wenn man den Code ohnehin auf Github hat, bietet sich Netlify an. Netlify ist für die meisten Use Cases kostenlos und sehr einfach einzurichten.

Domain: URL-Adresse, über die die App erreichbar ist Wenn man eine eigene Domain will, muss man diese kaufen. Ich habe Athenify auf Strato gekauft. Die Domain verweist dann auf meine App, die bei Netlify gehostet ist.  Hier eine Zusammenfassung meines Stacks:

• Code-Editor: Visual Studio Code
• Versions-Management: Github
• Paket-Manager: npm
• JavaScript-Framework: Vue
• CSS-Framework: buefy (Bulma)
• Datenbank: Firestore von Firebase
• Authentifizierung: Firebase Auth
• Hosting: Netlify
• Domain: Strato

Wie lange dauert es?

Wie man der obigen Liste entnehmen kann, muss man einige Tools beherrschen. Das lernt man nicht an einem Tag. In der unten stehenden Übersicht habe ich alle Zeiten (wochenweise) erfasst, die ich für meine Masterarbeit aufgewendet habe.

Insgesamt habe ich die Programmierung meiner Masterarbeit in weniger als 200 Stunden erreicht. Das scheint mir ein guter Richtwert. Ein mögliches Szenario wäre also: Jeden Tag abends eine Stunde programmieren. Dann kann man in sich in etwas mehr als einem halben Jahr sehr solide Kenntnisse aneignen. Natürlich ist man dann noch kein Experte (man denke an die Gladwell'sche 10.000-Stunden-Hypothese), aber man ist dann in der Lage, Software deutlich besser einschätzen zu können.