Entwicklung einer Web App: von der Idee bis zur Evaluation

Web Apps werden immer beliebter auf dem App-Markt. Mit ihnen lassen sich verschiedene Aufgaben, für die in der Vergangenheit fast ausschließlich zu installierende Programme zuständig waren, effizient online erledigen. In diesem Beitrag geht es darum, was eine Web App genau ist, welche Vorteile sie bringt und wie die Webentwicklung abläuft.

Was genau ist eine Web App?

Der Begriff Web App bedeutet Webanwendung. Dabei handelt es sich um eine Applikation, die vollständig innerhalb eines Webbrowsers ausgeführt wird. Im Grunde sind Web Apps Websites mit besonderem Anwendungsfokus. Beim Aufrufen der Website verhält sie sich beispielsweise wie eine App auf dem Smartphone oder Tablet. Um das zu erreichen, blenden Web Apps die Adressleiste, die Vor- und Zurück-Buttons sowie das Browser-Menü aus.

Welche Vorteile bietet eine Web App?

Der größte Vorteil von Web Apps ist, dass sie auf allen Plattformen funktionieren, die einen Browser ausführen können. Egal, ob Computer, Tablet oder Smartphone – alles, was nötig ist, ist ein Internetzugang. Ein Herunterladen der Web App auf dem Endgerät ist dank der browserbasierten Programmierung nicht erforderlich. Nutzer sparen sich dabei im Gegensatz zu nativen Apps auch die Installation. Kompatibilitätsprobleme gibt es bei Web Apps keine, denn alle Nutzer greifen plattformunabhängig auf dieselbe Anwendung zu.

Weiterhin haben Web Apps den Vorteil, dass sie als Website zur Lesezeichenleiste des Browsers hinzugefügt werden können und somit immer schnell erreichbar sind. Außerdem lassen sie sich ebenfalls in der Suchmaschine auffinden oder mit anderen Nutzern über die URL teilen, was eine simple Verbreitung möglich macht.

Entwickler von Web Apps profitieren von geringeren Entwicklungskosten, denn dank der Plattformunabhängigkeit müssen sie nicht für mehrere Betriebssysteme programmiert werden. Neben den Kosteneinsparungen ergibt sich dadurch auch ein reduzierter Entwicklungsaufwand. Sicherheitslücken und Fehler lassen sich somit bei Web Apps schneller beheben. Sie sind perfekt für jene Unternehmen geeignet, denen ein eher geringes Budget zur Verfügung steht.

Wie läuft ein Projekt zur Entwicklung einer Web App ab?

Aber wie läuft ein Projekt von einer einfachen Webanwendung bis hin zu einer komplexeren, dynamischen, interaktiven E-Commerce-Site ab? Die Entwicklung glieder sich in verschiedene Phasen.

Ideenfindungsphase

Die Entwicklung neuer Produkte (NPD) beginnt immer mit der Umwandlung einer Idee in ein praktikables Produkt. Wenn Sie in der Ideenphase des Produktentwicklungszyklus nutzerorientiert, fokussiert, enthusiastisch und flexibel bleiben, schaffen Sie die Voraussetzungen dafür, nicht nur das richtige Produkt zu entwickeln, sondern auch das richtige Produkt zu entwickeln.

1. Eine Idee finden: In dieser Phase geht es nicht darum, narrensichere, umsetzungsreife Ideen zu entwickeln. Konzentrieren Sie sich stattdessen auf Brainstorming-Sitzungen, bei denen das Lösen von Kundenproblemen im Vordergrund steht, und generieren Sie rohe und unbewiesene Ideen, die später in die engere Auswahl kommen können. Der Ansatz zur Lösung von Kundenproblemen beim Brainstorming geht von der Prämisse aus, dass, wenn Sie ein Problem haben, andere vielleicht das gleiche Problem haben. Wenn Sie diesen Schmerzpunkt (das Problem) identifizieren und artikulieren können und wissen, welche Benutzer damit konfrontiert sind, können Sie Produkte zur Lösung dieses Problems brainstormen.
2. Konkurrenz und Zielmarkt recherchieren:Der wichtigste Ausgangspunkt für jedes Produkt ist die Nutzerforschung. Das Team braucht ein echtes und genaues Verständnis des Nutzers, des Nutzerproblems, des Umfangs des Problems (wie viele Menschen mit diesem Problem konfrontiert sind) und der Konkurrenz, die es gibt, um dieses Problem zu lösen. In der Marktforschungsphase helfen die Erkenntnisse über die Nutzer und die Konkurrenz dabei, die technische Ausrichtung der Webanwendung zu bestimmen.
3. Planen Sie die wichtigsten Funktionen und Merkmale der Webanwendung: In der heutigen schnelllebigen Zeit ist Geschwindigkeit wichtig – aber auch die Entwicklung des richtigen Produkts. In dieser Phase sollten wir uns ganz grundsätzlich fragen: Was macht die Webanwendung? Um die wichtigsten Merkmale und Funktionen der Webanwendung zu priorisieren, listen Sie alle Funktionen (Haupt- und Nebenfunktionen) auf, die Sie mit dem MoSCoW-Ansatz benötigen: Mo – Muss Funktionen haben; S – Sollte Funktionen haben; Co – Könnte Funktionen haben; W – Wird keine Funktionen benötigen. Diese Funktionen werden für die spätere Planung, für die Feedback-Phase des Wireframing und das Prototyping und schließlich für das Minimum Viable Product (MVP) verwendet, ein schlankes Produkt mit den grundlegenden Funktionen und Merkmalen, um das Produkt in die Hände der ersten Anwender zu bringen.

Entwurf der UX- und UI-Phase

Das Design der Webanwendung beginnt mit einem Verständnis der Benutzeroberfläche (UI) und der Benutzererfahrung (UX) – einschließlich der Frage, wie sie zusammenhängen und wie sie sich auf die Designentscheidungen in dieser Phase der Webanwendungsentwicklung auswirken.

Die Benutzeroberfläche (UI) befasst sich mit dem Aussehen der Webanwendung und behandelt Designfragen wie Farben, Schriftarten, Platzierung und Gesamtdesign. Das UI-Design konzentriert sich auf die Entwicklung einer Benutzeroberfläche, die für den Benutzer ästhetisch ansprechend ist.

Die Benutzererfahrung (User Experience, UX) steuert die Art und Weise, wie ein Kunde mit der App interagiert, indem er genau versteht, was ein Benutzer wünscht und fühlt. UX-Design ist ergebnisoffen und stellt in jeder Phase die Frage, was ein Benutzer möchte, braucht und fühlt – und wie er sich besser fühlen und die Reibung im Erlebnis verringern kann. Zu den Elementen des UX-Designs gehören Konzepte wie nützlich, wünschenswert, zugänglich, glaubwürdig, auffindbar, benutzbar und wertvoll.

Während sowohl UX als auch UI von Trends beeinflusst werden, geht es bei beiden darum, Fragen über den Nutzer, die User Journey und vor allem über Tests zu stellen.

1. Erstellen Sie eine Karte der User Journey: Die User Journey Map ist eine Visualisierung des Nutzerflusses durch die Web-App im Laufe der Zeit. Sie erzählt die Geschichte der Benutzererfahrung und stellt den Kunden in den Mittelpunkt der Überlegungen. Durch die Darstellung der einzelnen Schritte der User (oder Customer) Journey ist es einfacher, die Motivationen, Bedürfnisse und Herausforderungen der Benutzer zu verstehen – und wie ein besseres UX-Design diese Stolpersteine überwinden kann.
2. Wireframe der App: Wireframes sind digitale, vereinfachte visuelle Konzepte der zukünftigen App. Sie zeigen die Struktur, die Hierarchie und die Beziehungen zwischen den Elementen auf, aus denen das Produkt besteht. Betrachten Sie den Wireframe als „Entwurf“ oder „Plan“ für die App, sowohl für das vordere als auch für das hintere Ende, wie die mobile App aussehen und wie sie funktionieren wird. Der Wireframe-Abschnitt kann die grafische Gestaltung der Back-End-Datenbank beinhalten, um einen visuellen Arbeitsablauf zu haben, auf den man sich bei der Codierung beziehen kann, oder er kann Testabschnitte des Codes beinhalten, um zu sehen, wie sie funktionieren.
3. Erstellen eines klickbaren Prototyps: Durch das Hinzufügen zusätzlicher Interaktivität zu den erstellten Wireframes kann der resultierende Prototyp so aussehen und sich so verhalten, wie es die echte Webanwendung tun würde. Dieser Prototyp kann sowohl gesehen als auch erlebt werden, mit Interaktivität und erweiterten UX-Elementen, die das Benutzererlebnis simulieren und wertvolles Feedback zu Funktionalität, Design und Benutzererfahrung ermöglichen, bevor die vollständige Entwicklung stattgefunden hat.
4. Visuelles Design: Visuelles Design ist eine wichtige Methode zur Gestaltung der Benutzererfahrung, die sich auf die Ästhetik einer Website oder Anwendung konzentriert. In dieser Phase erstellen UI-Designer Mockups, die zeigen, wie die App aussehen wird, und wählen Elemente der Benutzeroberfläche wie Schriftarten, Farbschemata, Symbole, Formen, Schaltflächen, Größen und Proportionen von Bildschirmelementen, Illustrationen und mehr aus. Gegebenenfalls werden auch Motion-Design-Elemente wie Animationen und Bildschirmübergänge berücksichtigt. Aber mehr als der Faktor Look & Feel wird das Design in erster Linie durch den UX-Faktor Benutzerfreundlichkeit und Funktionalität“ vorangetrieben, mit dem Ziel, eine angenehme und nützliche Benutzererfahrung zu schaffen. Entwicklungsphase Nach dem Design und der Validierung folgt die Entwicklung – die Phase, in der größere technische Entscheidungen über die Frameworks und Technologien getroffen werden, die die App unterstützen sollen, sowie die eigentliche Codierung der Web-App.
5. Wählen Sie Ihren Tech-Stack: Ein Tech-Stack ist die Kombination aus Technologiediensten, Frameworks und Sprachen, die das Back-End (wie es funktioniert) und das Front-End (wie es aussieht) bilden. Das Front-End (die Client-Seite) enthält alle Elemente, die in die visuelle Darstellung einfließen, einschließlich der Verwendung von drei Programmiersprachen: HTML, CSS und JavaScript. Das Back-End (Serverseite) bezieht sich auf alles, was auf dem Server läuft; die Funktionsweise oder das Rückgrat der Webanwendung.
6. Entwerfen Sie Ihre Datenbank: Die Datenbank (auch ein Server) ist das Repository für den Code Ihrer Web- oder mobilen Anwendung. Die Datenbank ist auch für das Sammeln, Speichern, Verarbeiten und Verwalten der gesammelten Daten sowie für den sicheren Zugriff auf diese Daten verantwortlich. In diesem Bereich ist die Entscheidung relativ einfach, da der Datenbankmarkt von MySQL nahezu beherrscht wird und weitere Optionen wie MongoDB und PostgreSQL zur Verfügung stehen. Sobald Sie sich für eine Datenbank entschieden haben, erstellen Sie die Architektur, die normalerweise der Model-View-Controller-Architektur (MVC) folgt.
7. Entwickeln Sie Ihr Front-End: Die Frontend-Entwicklung ist die clientseitige Anwendung, die die Webanwendung dem Benutzer im Browser präsentiert. Das Frontend wird mit HTML, CSS und JavaScript entwickelt, wobei verschiedene Frameworks grundlegende Vorlagen und Komponenten bereitstellen. Beliebte Frontend-Frameworks sind Bootstrap, Foundation und reine JavaScript-Frameworks wie React, Angular, Vue und Backbone.
8. Back-End-APIs erstellen: Die Backend-Entwicklung umfasst die Datenbank (siehe oben), den Server und die eigentliche Logik (Code) der Webanwendung. Während es hier viele Möglichkeiten gibt, beginnt das Backend mit der Auswahl von entweder: Mehrseitenanwendung – eine traditionelle Webanwendung, bei der eine neue Seite vom Server angefordert wird, um angezeigt zu werden, wenn Daten hin und her ausgetauscht werden. Single Page Application (SPA) – eine einzelne Seite, die kontinuierlich mit dem Benutzer interagiert, indem sie die aktuelle Seite dynamisch umschreibt, anstatt ganze neue Seiten von einem Server zu laden. Single Page Applications erfordern ein reines API-Framework und haben sich zu der beliebtesten Option für Webanwendungen entwickelt. Da das Back-End recht umfangreich ist (siehe oben), gibt es eine ganze Reihe von Frameworks, die bei der Entwicklung helfen können. Die Wahl des Frameworks richtet sich zum Teil nach der Wahl des Tech-Stacks (wenn man einer beliebten Kombination folgt) oder den verwendeten Programmiersprachen. Beliebte Optionen sind Ruby on Rails, Node.js, Flask, Django, Laravel, Swift und Flutter.
9. Integration von Front-End- mit Back-End-APIs: Der Prozess der API-Integration hilft dabei, das Front-End mit den Back-End-APIs zu verbinden, damit Daten ausgetauscht werden können. Beispiel E-Commerce: Jeder Schritt der Customer Journey beinhaltet eine API-Integration zwischen Front- und Back-End – für die Benutzeranmeldung, den Produktbestand und die Zahlungsabwicklung.
10. Testen Sie Ihre Webanwendung und verbessern Sie sie: Das Markenzeichen der agilen Entwicklung ist das Testen – das ein integrierter und iterativer Teil des Entwicklungsprozesses sein sollte. Testen hilft sicherzustellen, dass die App wie erwartet funktioniert (positives Testen) und dass sie mit unerwarteten Bedingungen umgehen kann (negatives Testen). Das Testen beginnt während der Entwicklung – mit Unit-, Komponenten- und Integrationstests – und setzt sich während der Entwicklung bis hin zum Benutzererlebnis fort, wo das Testen dann spezifisches Benutzerfeedback beinhaltet.

Einführungsphase

Die letzte Phase der Entwicklung ist die Freigabe der fertigen Webanwendung – die Auswahl eines Ortes, an dem sie gehostet wird, und die Bereitstellung für echte Benutzer.

1. Hosten Sie Ihre Webanwendung: Das Anwendungshosting ermöglicht es, die Webanwendung über die Cloud verfügbar zu machen, so dass ein sofortiger Zugriff auf die Webanwendung von überall auf der Welt möglich ist. Die Wahl des Servers kann sich an der Wahl Ihres Tech-Stacks orientieren oder eine Frage der Vorliebe sein. Beliebte Cloud-Hosting-Anbieter sind Amazon, MS Azure und Google Cloud.
2. Bereitstellen Ihrer Webanwendung: In diesem letzten Schritt wird die Webanwendung aus der Versionskontrolle auf den oben gewählten Cloud-Hosting-Anbieter übertragen. Wie in vielen anderen Bereichen der Entwicklung gibt es auch hier Tools wie GitLab, Bitbucket und Jenkins, die dabei helfen.

Obwohl das ultimative Ziel jeder Produktentwicklung die Bereitstellung ist, implizieren die Agile- und DevOps-Prinzipien, dass die Bereitstellung kein einmaliger Schritt ist, sondern vielmehr der Beginn eines Prozesses mit kontinuierlichem Feedback, Verfeinerung und Bereitstellung, um sicherzustellen, dass immer neue Funktionen und Verbesserungen veröffentlicht werden.

Sobald die Entwicklung der Web App abgeschlossen ist, kann sie in Form einer Website im Internet zur Verfügung gestellt und anschließend von Nutzern verwendet werden.

Hilfe vom Experten

Web Apps bieten viele Vorteile für Entwickler und Nutzer zugleich. Sie sind plattformübergreifend und somit günstiger als native Apps. Außerdem haben sie einen geringeren Entwicklungsaufwand. Für Nutzer sind Web Apps besonders bequem: Sie benötigen lediglich einen Internetzugang, um auf sie zugreifen zu können und sparen sich Zeit und Speicherplatz für die Installation. Bei der Umsetzung unterstützen Programmier- und IT-Experten wie das Team von bellmatec Ihre Kunden.

Bilder: creativeart/freepik ; fullvektor/freepik