In fünf Schritten erfahren Sie, wie Sie Webanwendungen entwickeln

Diese Frage wird oft gestellt und sollte natürlich gestellt werden. Warum muss man als Programmierer davon ausgehen, dass ich weiß, wie man Webanwendungen entwickelt? Auf diese Frage gibt es keine einfache Antwort, und selbst Bildungseinrichtungen haben möglicherweise keine klare Antwort; die Universität, die ich besuchte, bot keine Kurse zu diesem Thema an. Wie die meisten Webentwickler in diesem Bereich habe ich dies einfach dadurch gelernt, dass ich es getan und experimentiert habe. Niemand hat mir gesagt, wie man das macht. Ich begann damit, etwas für mich selbst zu machen, und als Nebenprodukt lernte ich, wie man Webanwendungen entwickelt. Dies ist eine sehr effektive Möglichkeit, jede Sprache zu lernen.

Zu Ihrem Glück werde ich hier über den Hauptprozess bei der Entwicklung einer Webanwendung sprechen. Ich hoffe, das hilft Ihnen beim Einstieg. „

Der Unterschied zwischen Webanwendungen und Websites

Zunächst möchte ich erklären, dass sich die Entwicklung einer Webanwendung von der Entwicklung einer Website unterscheidet. Während es insgesamt große Ähnlichkeiten gibt, gibt es große Unterschiede in der Zeit, die für ihre Entwicklung benötigt wird. Was ist also der Unterschied zwischen Webanwendungen und Websites? Normalerweise kann uns Wikipedia bei der Erklärung dieses Problems helfen. Werfen wir einen Blick darauf, wie Wikipedia Anwendungssoftware definiert:

Anwendungssoftware, oft auch Anwendungen genannt, bezieht sich auf Software, die speziell dafür entwickelt wurde, Benutzern bei der Ausführung eines oder mehrerer Teile zu helfen Computersoftware, die zur Ausführung einer bestimmten Aufgabe entwickelt wurde. Unternehmenssoftware, Buchhaltungssoftware, Büropakete, Zeichensoftware, Mediaplayer usw. fallen alle in diese Softwarekategorie.

Im Gegensatz zu Anwendungssoftware verwalten Systemsoftware und Middleware die Computerleistung und die Integration in den Computer. Normalerweise spiegeln sich diese Aufgaben jedoch nicht direkt in der Ausführung von Aufgaben wider, die den Benutzern zugute kommen. Beispielsweise ist die Beziehung zwischen Anwendungssoftware und Systemsoftware eine nicht sehr treffende physikalische Analogie und ähnelt der Beziehung zwischen einer Glühbirne und einem Kraftwerk. Das Kraftwerk (Systemsoftware) produziert nur Strom und hat keine wirkliche Leistung Zweck, es sei denn, ein Anwendungstool wie eine Glühbirne wird zur Bereitstellung von Diensten für Benutzer verwendet.

Von innen heraus habe ich meine eigene Definition einer Webanwendung zusammengefasst:

Eine Webanwendung ist eine Website, die es Benutzern ermöglicht, bestimmte spezifische Aufgaben auszuführen. Und das Hauptziel einer normalen Website besteht darin, Benutzern Informationen (Blogs, Nachrichten, Anleitungen usw.) bereitzustellen.

Webanwendungsentwicklungsprozess

Da nun die Merkmale geklärt sind, können wir damit beginnen, den gesamten Prozess der Entwicklung einer Webanwendung zu definieren. Abhängig von der Größe des Projekts können natürlich einige Schritte im Prozess klein genug sein, um sie im Kopf zu erledigen, aber es ist immer gut, das Ganze zu sehen. Es ist auch wichtig zu verstehen, dass dieser Artikel keine ausführliche Beschreibung der einzelnen Schritte enthält.

Schritt 1: Analyse

Der erste Schritt bei der Entwicklung einer Webanwendung ist die Analyse Ihrer Bedürfnisse. Sie sollten nun eine möglichst umfassende Liste der Funktionen definieren, die Ihre Anwendung bieten soll. Wenn Sie dies für einen Kunden tun, müssen Sie verstehen, was er will (und sicherstellen, dass Sie beide wissen, wovon der andere spricht). Aus Ihrer Diskussion können Sie die Anforderungen und Softwarespezifikationen zusammenfassen. Auch wenn Sie die Webanwendung selbst entwickeln, empfehle ich Ihnen, die Funktionen aufzuschreiben, die die Webanwendung erfüllen soll.

Schritt 2: Design

Sobald Sie herausgefunden haben, was die Webanwendung tun muss, können Sie mit dem Design beginnen. Dieser Schritt wird normalerweise jedes Mal wiederholt, wenn das Design verfeinert wird. Als Erstes müssen Sie ein Seitenflussdiagramm zeichnen (auf Papier oder verwenden Sie ein Softwaretool, je nachdem, was Sie bevorzugen. Ich verwende gerne Papier, damit ich Änderungen schneller vornehmen kann). Seitenflussdiagramme sind normalerweise sehr abstrakte Schwarz-Weiß-Zeichnungen, die zeigen, wie die Webanwendung, die Sie implementieren, aussehen wird (Sie können etwas Farbe hinzufügen, aber versuchen Sie, es einfach zu halten).

In diesem Schritt erhalten Sie eine Vorstellung davon, wie Ihre Bewerbung am Ende aussehen wird. Im Gegensatz zu dem, was 37signals befürwortet, schlage ich vor, einige Wortbeschreibungen zu verwenden und mäßig detailliert zu sein. Wenn ich eine gute Idee habe oder wie etwas gemacht werden soll, markiere ich sie auf Papier (wenn zum Beispiel auf diese Schaltfläche geklickt wird, sollte sich dadurch ein anderes Element ändern oder ausblenden, schreibe ich dies dabei auf). das Bild).

Wenn Sie mit der erstellten Skizze zufrieden sind, können Sie mit der Erstellung des physischen Modells beginnen.

Das physische Modell ist immer noch ein Muster, aber mit Farbe und Details. Das endgültige Modell sollte wie ein Screenshot der Webanwendung aussehen, die Sie implementieren werden. Wenn Sie für einen Kunden entwickeln, wird er sich diese Dinge ansehen und Ihnen seine Zustimmung geben. Viele Leute überspringen diesen Schritt jedoch gerne (hauptsächlich Nicht-Designer) und gehen lieber direkt zum Web-Prototyp über.

Prototypen werden in HTML entwickelt und mit CSS (und manchmal Javascript) gerendert. Das Seitenlayout muss erstellt werden, Links können angeklickt werden, Farben, Schriftarten und Schriftgrößen müssen festgelegt werden (dies ist einfach, wenn Sie ein physisches Modell erstellen). Dieser Schritt ist sehr wichtig, da alles hier in Ihrer endgültigen Bewerbung verwendet werden kann. Führen Sie nach Möglichkeit einige Usability-Tests an Ihrem Prototyp durch. Dies erspart Ihnen auf lange Sicht viele Fehler.

Am Ende dieses Schritts wissen Sie im Grunde, wie Ihre Webanwendung insgesamt organisiert ist. Was ist die Anmeldeseite und wie gelangt der Benutzer von der Startseite zu den einzelnen Seiten?

Schritt 3: Implementierung

Wählen Sie ein Framework

Da wir nun wissen, was wir entwickeln wollen, müssen wir es umsetzen. Dieser Teil ist eine Menge Arbeit und Sie werden die meiste Zeit damit verbringen. Die erste Entscheidung, die Sie treffen müssen, ist, wie Sie beginnen, welche Technologie und welches Framework Sie verwenden möchten. Sie haben viele Möglichkeiten zur Auswahl und müssen diejenige auswählen, die zu Ihnen passt. Im Folgenden finden Sie eine Liste der am häufigsten verwendeten Frameworks:

ASP.NET

Framework für jeden Prozess auf PHP

Python mit Django

Ruby on Schienen

Es gibt keinen klaren Standard, der besagt, welches Framework das beste ist. Sie sind alle unterschiedlich und jeder hat seine eigenen Stärken. Das Wichtigste, was Sie wissen müssen, ist, dass Sie mit jedem davon nützliche Webanwendungen entwickeln können.

Entwicklung

Sobald Sie wissen, wie man sich entwickelt, ist es Zeit, anzufangen. Man kann davon ausgehen, dass diese Entwicklungsarbeit aus vielen Teilen besteht, aber letzten Endes handelt es sich hierbei um Standardprogrammieraktivitäten. Hinter den Kulissen erstellen Sie Klassen, Objekte, Dienste, Prozeduren und Persistenzschichten, um diese Objekte in der Datenbank zu speichern. Der Hintergrund ist der Kern der gesamten Anwendung. Für jede Anwendung unterscheidet er sich nicht von der normalen Programmierung. Als nächstes folgt die Entwicklung des Front Desks. Der Code, den Sie jetzt schreiben, ist die eigentliche Bedienoberfläche für Benutzer. Sie integrieren das Hintergrundprogramm und die Prototypenschnittstelle und integrieren alle Teile des Systems miteinander. Sie können JavaScript auch verwenden, um einige coole kleine Funktionen zu implementieren, die Ihnen während des Entwicklungsprozesses einfallen.

Auch hier gibt es viele Möglichkeiten, ein Hintergrundprogramm zu implementieren. Es wird empfohlen, dass Sie die Informationen zum Framework Ihrer Wahl lesen, um herauszufinden, wie Sie diesen Teil der Arbeit umsetzen können. Typischerweise beziehen sich diese Kenntnisse auf objektorientierte Programmierung, einige Frameworks bewegen sich jedoch langsam in Richtung domänengesteuertes Design.

Schritt 4: Polieren

Jetzt wurde die Anwendung entwickelt und die unabhängigen Module miteinander integriert. Sie müssen testen, um sicherzustellen, dass die Anforderungen und Softwarespezifikationen, die Sie in Schritt 1 definiert haben, umgesetzt werden (diese Frage sollte während des gesamten Entwicklungsprozesses berücksichtigt werden). Sie möchten sicherstellen, dass dumme Benutzer Ihre Anwendung nicht beschädigen können, indem sie versuchen, etwas zu tun, das Sie noch nicht implementiert haben. Sie müssen außerdem sicherstellen, dass Ihr Programm in verschiedenen Browsern (hoffentlich nicht IE6) korrekt ausgeführt werden kann.

Jetzt ist es auch an der Zeit, ein paar kleine Optimierungen vorzunehmen, um das Erscheinungsbild Ihrer App zu verbessern und sie perfekt zu machen.

Schritt 5: Veröffentlichung und Nachbereitung

Dieser letzte Schritt (aber nicht das Ende) besteht darin, Ihre Anwendung zu veröffentlichen, damit Benutzer sie tatsächlich verwenden können (sofern es sich bei dieser Anwendung um eine öffentliche Entwicklung handelt). Bewerbung, Pressewerbung nicht vergessen). Wenn Sie möchten, veröffentlichen Sie zuerst eine Beta-Version, damit nur eine kleine Anzahl von Benutzern große Probleme in Ihrer Anwendung finden kann (da es definitiv Fehler in Ihrem Programm geben wird), und sie Ihnen dabei helfen, die Qualität des Programms zu verbessern. Beeilen Sie sich nicht mit dem Hinzufügen von Funktionen, sondern konzentrieren Sie sich darauf, Ihr aktuelles Programm solide zu machen.

Wenn Sie die Beta-Phase durchlaufen haben und Ihre Anwendung sehr stabil geworden ist, hören Sie sich das Feedback der Benutzer an und testen Sie Ihre Anwendung selbst. Sie können beginnen, darüber nachzudenken, wie Sie die Anwendung verbessern können. Finden Sie die nicht übereinstimmenden Bereiche und beseitigen Sie sie. Jede weitere Iteration durchläuft die oben genannten fünf Schritte, aber wie ich eingangs sagte, haben Sie jetzt eine funktionierende Anwendung und es ist einfach, diese Schritte direkt im Kopf auszuführen und direkt mit der nächsten Iteration fortzufahren. Testen Sie Ihre Funktionalität im Code .