Wie funktioniert so eine App überhaupt?!

Diese Frage wurde mir neulich von einer Hörerin gestellt. Für mich als Entwickler war erstmal eine Rückfrage nötig was sie denn genau damit meint. So in meiner gedanklichen Welt gefangen wäre ich nie auf diese Frage gekommen. Einmal gestellt hat sie mich aber nicht losgelassen.

Ich glaube ein guter Start um das zu erklären ist erstmal den Blick weg von Apps und hin auf Webseiten zu richten. Ich schätze, dass meine Hörer und Leser eher mal mit der Verwaltung einer Webseite zu tun hatten als mit einer App. Aber auch wenn nicht, dann ist es ein guter Moment für Grundlagen.

Wie funktioniert eine Webseite?

Also eine Webseite liegt auf einem Server. Also auf einem Rechner, der an das Internet angeschlossen ist und der weiß, was er machen soll, wenn jemand zum Beispiel „janbrinker.de“ in die Adresszeile eingibt. Dafür benutzt du in der Regel einen sogenannten Hoster. Der ist einfach ein Dienstleister für dich um genau diesen Rechner für dich bereitzustellen und so zu konfigurieren, dass du einfach loslegen kannst. In meinem Fall ist auf diesem Server ein WordPress installiert (eine von vielen Softwares um Webseiten zu verwalten) und das wiederum weiß was zu tun ist, wenn die Startseite angezeigt werden soll, oder wenn in der URL noch was anderes drin steht, wie z.B. „janbrinker.de/applify“.

Dieses WordPress oder eine andere Software erzeugt dann eine Datei und schickt sie zu dir. Dein Browser, also Firefox, Chrome, Safari oder Edge weiß dann wie es mit dieser Datei umzugehen hat. Wie eine PDF. Diese Datei enthält auch irgendwelche Daten und dein PDF Reader weiß einfach wie es diese Datei anzeigen soll, wenn du sie öffnest. Nur mit Webseiten funktioniert das automatisch, wenn du eine Webseite öffnest.

In dieser Datei steht also drin was der Titel der Seite ist, wie das Menu aufgebaut ist, was der Inhalt der Seite ist und enthält auch Informationen für den Browser wie die einzelnen Elemente auszusehen haben. Also Farbe, Schriftart, Hintergrundbilder, Abstände usw. Der Browser weiß was zu tun ist und zeigt die Webseite dann genau so an wie du sie siehst.

Klickst du auf einen Link, dann wird eine neue Seite aufgemacht und das Spiel geht von vorne los. Der Server wird zu dieser spezifischen URL (also Adresse) gefragt, dieser baut sich die Datei zusammen, schickt sie dir zurück und der Browser zeigt sie wieder an.

Am Ende funktioniert also alles über diese Datei, die sagt wie das, was genau jetzt in diesem Moment angezeigt wird, definiert ist. Klickst du also auf einen neuen Link, dann ändert sich rein technisch betrachtet nicht nur der Inhaltsbereich der Seite, sondern auch alles andere wird komplett neu geladen. Also der Header, der Footer, das Menu usw., auch wenn sich visuell nichts verändern soll.

Und wie ist das jetzt mit Apps?

Jetzt ist das bei Programmen, also auch bei Apps ziemlich anders. Das liegt im großen und ganzen an der Art und Weise wie sich die Funktionsweise einer Webseite von einem Programm unterscheidet.

Wie eben beschrieben ist eine Webseite einfach ein Dokument, eine Datei, die von deinem Browser angezeigt wird. Lass es uns mal komplett vereinfachen und sagen, dass die Webseite ein Bild ist. Alles ist genau definiert wie es aussehen soll und wo was wie in welcher Größe mit welchen Abständen usw. platziert ist.

Ein Programm ist kein Bild. Ein Programm ist ein Rezept, eine Anleitung die deinem Rechner oder deinem Smartphone sagt was es tun soll, damit am Ende ein Bild rauspurzelt. Also wenn du eine App auf deinem Smartphone öffnest, dann fängt es an sich die „Zutaten“ beim Gerät zu holen. Zum Beispiel Speicherplatz, damit die App Bilder und Texte laden kann, sodass sie später angezeigt werden können. Dann wird die App Schritt für Schritt die Anleitungen vom Rezept abarbeiten. Das kann zum Beispiel so ablaufen:

• Bitte liebes Smartphone, erstelle mir mal eine leere Seite, damit ich da drauf gleich Sachen anzeigen kann.
• Auf die leere Seite platziere mir bitte eine Navigationsleiste
• Unten drunter möchte ich eine Liste haben, damit ich später die Liste meiner Kontakte anzeigen kann.
• Jetzt lade aus den gespeicherten Daten die Kontakte selber.
• Sortiere zuerst die Kontakte nach dem Alphabet
• Sortiert nach dem Vornamen oder nach dem Nachnamen? Ok, ich sortiere.
• Für jeden Kontakt muss jetzt ein Listeneintrag erzeugt werden, damit diese in der Liste angezeigt werden können.
  • Genau nach folgendem Schema baust du dir jetzt die Anzeigefläche für den Listeneintrag:
    • Wie ist die App eingestellt? „Vorname Nachname“ oder „Nachname, Vorname“?
    • Ach ja, wir benutzen übrigens folgenden Font in jener Größe und dieser Textfarbe und folgende Abstände zu den Seiten
    • Hat der Kontakt auch ein Foto hinterlegt? Dafür haben wir hier einen Platzhalter, der mit dem Bild gefüllt werden kann.
• Gebe der Liste die Listeneinträge
• OK, für jetzt sind wir erstmal fertig mit dem Anzeigen der Liste.
• Aber bitte liebe Liste, wenn der Benutzer ein Element antippt, dann sage mir bitte Bescheid, weil dann muss ich wieder Sachen machen.

Das heißt während eine Webseite schon „fertig“ definiert hat wie die Webseite aussieht, muss eine App dem Smartphone sagen was wo hin kommt und wie es auszusehen hat. Ähnlich wie man einem Umzugsunternehmen aktiv sagen muss was wo hin kommt, beziehungsweise dem man auch die Baupläne für die einzelnen Möbelstücke geben muss.

Ähnlich ist es auch, wenn der Benutzer auf einen Button oder eine Schaltfläche drückt, also z.B. im Beispiel oben auf ein Listenelement mit einem Kontakt. Die Liste wird irgendwann melden „Element in Zeile 5 wurde gedrückt“.

Dann schaut die App nach welches „Rezept“ dann ausgeführt werden soll. Dieses kann dann wie folgt aussehen:

• Zeile 5… lass uns mal nachschauen welcher Kontakt überhaupt in Zeile 5 genannt wurde.
• Smartphone, bitte öffne mir doch eine neue frische und leere Seite für die Kontaktdetails, animiere den Übergang und füge oben in die Navigationsleiste einen zurück-Button ein.
• Auf die neue Seite platziere mir mal bitte folgende Elemente:
  • Einen Platz wo das Bild vom Kontakt angezeigt werden kann
  • Einen Platz wo der Name rein kommt (mit folgendem Text-Layout)
  • Einen Platz für die Telefonnummer. Ach so, dieser Platz ist auch ein Button: wenn dieser gedrückt wird, dann sage mir bitte Bescheid)
  • Einen Platz für die Email-Adresse, der auch ein Button ist. Auch hier sage mir bitte Bescheid, wenn der Button gedrückt wird.

Programmieren

Genau das ist programmieren. Der Entwickler macht nichts anderes als Abläufe bis auf’s kleinste Detail zu definieren. Nehmen wir doch nochmal das Umzugs-Beispiel zur Hand. Stell dir vor du willst umziehen, du selber und deine Verwandten, Freunde usw. dürfen aber selber keine Hand anlegen und keiner außer die Leute vom Umzugsunternehmen dürfen beim Umzug präsent sein. Alles was dir übrig bleibt ist ganz genau zu beschreiben was wie zu tun ist. Jeden Arbeitsschritt, den du vergisst oder auslässt wird entweder gar nicht getätigt oder die Leute vom Umzugsunternehmen machen eine Sache so wie sie diese Sache sonst auch immer machen. Egal ob das die Art und Weise ist die dir lieb ist. Du hast ja nichts definiert, also wird’s schon OK sein.

Alles was du am Ende siehst ist die neue und fertig eingerichtete und eingeräumte Wohnung. Stehen die Gläser mit dem Rand nach oben oder umgedreht im Schrank? Gehen die Schranktüren überhaupt so auf wie sie sollen, oder blockieren sich die Türen gegenseitig? Oder steht der Schrank vielleicht sogar mit der Vorderseite gegen die Wand? Hättest du das lieber besser beschreiben sollen? So entstehen übrigens auch Bugs und Fehler in Software.

Der gravierende Unterschied in der Funktionsweise zwischen Webseite und Programmen ist auch einer der Gründe warum es keine fertigen Layouts oder Themes gibt, die man einfach mit Inhalt befüllen kann und gut ist. Die App soll ja etwas tun, nicht nur anzeigen. Der Fokus liegt also auf der Funktion und daher ist programmieren auf das Tun fokussiert und nicht auf’s „so sieht es aus“.

Ein Blick zurück auf Webseiten

Jetzt mit den Grundlagen zu „was Softwareentwicklung überhaupt ist“ können wir jetzt auch nochmal einen interessanten Exkurs zurück zu den Webseiten machen. Oben meinte ich, dass ich „WordPress installiert habe“ und dass es „wiederum weiß was zu tun ist“. Fällt dir das Wort tun in’s Auge? WordPress und jede andere Verwaltungssoftware für Webseiten sind Programme. Ganz spezialisierte Programme, die nichts anderes können als dir die ganze Arbeit abzunehmen, damit du dich um das ganze „tun“ nicht kümmern musst. Das funktioniert weil technisch jede Webseite im Endeffekt immer das gleiche macht, nur eben immer anders aussehen und anderen Inhalt haben soll. Aber die Funktion ist immer gleich. Das heißt du bist Anwender der Software und konfigurierst sie nur, damit das Ergebnis so ist wie du willst. Die Anwendung an sich, also das, was am Ende die Arbeit verrichtet und die Webseite für dich nach deiner Konfiguration aufbaut, wird dir in dem Fall bereits gestellt. Das heißt die Anwendung gibt es schon.

In deinem Fall gibt es ja noch nicht mal die Anwendung. Darum geht es ja. Die Anwendung gibt es noch nicht, du siehst den Bedarf für so eine Anwendung und willst sie dann entwickeln lassen. Und ja, damit die Anwendung benutzbar ist brauchst du auch ein Layout zum Anzeigen. Aber der Unterschied zwischen Webseite und App ist eben der, dass es bereits viele spezialisierte Anwendungen gibt um Webseiten zu verwalten und für deinen Anwendungsfall eben nicht.

Daher ist auch die Entwicklung einer App per se deutlich teurer als die einer reinen Webseite. Die Software, die Funktion, muss erst noch entstehen. Man muss erst rausfinden wie man die metaphorischen Umzugshelfer mit Anleitungen versehen muss, damit am Ende alles so abläuft wie du willst.