Nach meinem letzten Eintrag, in welchem ich meine App Athenify vorgestellt habe, habe ich viele Fragen erhalten:
- Wie hast Du Programmieren gelernt?
- Womit hast Du die App gebaut?
- Und ähnliche
In diesem Artikel möchte ich diese Fragen beantworten. Im Wesentlichen geht es um drei Aspekte:
- Wie lernt man überhaupt Programmieren, wenn man es nicht schon an der Uni als Fach hatte?
- Wie baut man eine Web App? Welche Tools braucht man dafür?
- Wie lange dauert es?
Programmieren lernen: Wo fängt man an?
Ich hatte in der Schule drei Jahre Informatik und es hat mir großen Spaß gemacht. Ich habe, als ich vor einem Jahr JavaScript gelernt habe, also nicht ganz bei Null angefangen. Allerdings haben wir damals 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. Aus meiner Sicht sind drei Dinge entscheidend, wenn man Programmieren lernen möchte:
Erstens: 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. Ein kostenpflichtiger Kurs stellt ein Investment dar, und die Forschung zeigt, dass man dann eher am Ball bleibt. Kostenpflichtige Kurse sind außerdem günstig und, das ist vielleicht das wichtigste, sehr gut strukturiert.
Ich habe vor einem Jahr folgendes gemacht. Ich habe mir einen Account auf Udemy erstellt und dort nach den bestbewerteten Kursen gesucht. Dann habe ich mir einige gekauft und mir die Videos angeschaut. Hier ist ein Screenshot meines Udemy-Accounts. In rot umrandet sind die Kurse, die ich für die App benötigt habe, die anderen Kurse mache ich gerade oder plane sie bald zu machen:
Zweitens: 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.
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 dafür bereits eine Lösung 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.
Drittens: 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 wie Fahrrad mit Stützrädern fahren. Es ist ähnlich wie richtig Fahrrad fahren, aber nicht dasselbe. Und: 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 sehr sinnvoll, 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.
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.
Ich werde hier die zweite Möglichkeit beschreiben: man baut eine Web-App. 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.
Editor
Um zu Programmieren, braucht man einen Code-Editor (= Word für Programmieren). Ich kann den kostenlosen Editor Visual Studio Code von Microsoft sehr empfehlen.
Paketmanager
Um Frameworks und Libraries zu installieren, braucht man npm und Node (für beides gibt es in jedem Video-Kurs eine Anleitung).
JavaScript Framework
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
Wenn man das Interface der App nicht komplett selbst in CSS gestalten will, kann sollte 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
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.
Authentifizerung
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 entschieden und die Implementierung ist wirklich sehr einfach.
Hosting
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
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
Authentifizerung: 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:
