Lovoo Pc App

Web-Anwendungsentwicklung mit HTML5: Der große Praxisleitfaden

Dabei spielt es keine Rolle, ob der Nutzer über Smart-phone, Tablet oder Desktop-PC auf die Lerninhalte zugreift: Mit HTML5 haben wir die Werkzeuge, um alles zu managen. Allerdings sind die vorteilhaften Einsatzmöglichkeiten des Zwei-Mann-Teams HTML5 + JS nicht auf die Präsentation von statischen Inhalten beschränkt. Basierend auf einer grundlegenden Implementierung einer Web-Applikation zeigen wir daher die Möglich-keiten, aber auch die Einschränkungen, HTML5 zur Erstellung von Web-Applikationen einzusetzen.

Vor allem müssen wir uns Gedanken darüber machen, ob und wie wir einen Datenaustausch durchführen wollen und ob die App offline arbeiten soll oder nicht. Der Reiz einer App liegt in den meisten FÃ?llen darin, Informationen von einem zentralen Rechner zu erhalten und anzuzeigen. Egal, ob wir eine "lovoo" oder eine Quiz-App mit einer Highscore-Liste programieren wollen: Wir brauchen immer die Informationen vom Datenserver, mit denen der Benutzer kommunizieren kann.

Für die Übertragung und Anzeige von Informationen gibt es prinzipiell zwei Möglichkeiten: synchron und asynchron. In diesem Fall heißt das synchron, dass der Benutzer Einträge macht und diese an den Datenserver sendet. Die Verarbeitung der Informationen und Antworten erfolgt durch den Bediener mit einem Ende. Fluid ist die asymmetrische Datenübermittlung, bei der die Benutzereingaben an den Bediener übermittelt werden, ohne die Webseite neu zu laden, und die Serverreaktion unmittelbar in die HTML-Struktur der Webseite eingegeben wird.

Damit können Sie die Informationen aus verschiedenen Datenquellen abrufen, und es spielt keine Rolle, ob der Datenserver mit PHP oder einer anderen Sprache des Servers funktioniert und welches Dateiformat er zurückschickt. Web Apps können prinzipiell auch offline abgelegt und ohne Internetverbindung verwendet werden. Das so genannte Cache-Manifest stellt sicher, dass der Webbrowser angewiesen wird, alle angegebenen Dateien vor Ort zu sichern und zu bewahren.

In der Manifestation werden nach der Pflichteinführung "CACHE MANIFEST" alle Dateien, die zwischengespeichert werden sollen, benannt, z.B: Die App arbeitet bereits off-line und ist dabei auch vergleichsweise zuverlässig: Der Befehl des Z3C an die Browser-Entwickler ist es, diese Informationen so lange wie möglich auf dem Gerät zu speichern. Diese Angaben verbleiben in der Regel so lange, bis der Arbeitsspeicher des Webbrowsers erschöpft ist und das System ihn übersteuert, oder der Benutzer alle lokale Dateien des Webbrowsers ausführt.

Für diese Angaben steht Ihnen eine maximale Speicherkapazität von 5 MB zur Auswahl, die in Absprache mit dem Nutzer je nach Webbrowser auf bis zu 10 MB ausgebaut werden kann. Nach der Diskussion, wie man Anwendungen offline zur VerfÃ?gung stellt, möchten wir Ihnen zeigen, was bei der Planung zu berÃ?cksichtigen ist. Prinzipiell ist es immer sinnvoll, alle Informationen, die dezentral abgelegt werden können, vorzuhalten.

Im Falle eines Verbindungsabbruchs sind diese Informationen verfügbar und bieten je nach Programmgestaltung der Web-Applikation auch die Funktionalität, wenn "das Netzwerk" weg ist. Zusätzlich zu den starren SHT-, CSS- und JavaScript-Dateien muss wie im vorangegangenen Abschnitt auch berücksichtigt werden, wie die Datenübertragung zum Datenserver so gestaltet sein muss, dass sie bei Bedarf vorübergehend abgebrochen werden kann.

Dazu gehören beispielsweise Anwendungen, die im Feld eingesetzt werden sollen und die auf der Anlage, zum Beispiel auf der Großbaustelle oder beim Auftraggeber, zur Datenerfassung dienen sollen. Weil nicht garantiert werden kann, dass ein Funknetzwerk an jedem Standort verfügbar ist, ist es in solchen FÃ?llen unabdingbar, alle erforderlichen Informationen dezentral zu Ã?bertragen und zu hinterlegen und vom Benutzer eingegebenen Informationen zur spÃ?teren Synchronisation mit dem Datenserver zu erfassen.

Die technische Umsetzung der lokalen Ablage von Serverbasisdaten wird im Folgenden im Abschnitt localStorage erläutert. Schlussfolgerung: Da die programmiertechnische Gestaltung des Datenmanagements im Wesentlichen von den Erfordernissen der Offline-Verfügbarkeit abhängig ist, müssen diese im ersten Arbeitsschritt der App-Entwicklung festgelegt werden. Beim Entwickeln von Web-Apps ist der vielleicht erste und vielleicht sogar entscheidende Punkt, das Verständnis des Konzepts des Viewerports.

Auf einer nicht optimalen Webseite bedeutet dies, dass der Benutzer nur einen Teil des Images zu sehen bekommt, aber diesen Teil in der vorgesehenen Grösse. Bei der Frage, ob eine Web-App eine nativen App ablösen kann, ist eine wichtige Überlegung für die Web-App auch, wie man eine nativen App startet.

Weniger elegante als bei der originalen App, deren Symbol nach dem Download aus dem App Store in der Web-App steht, ist es in der Web-App, das Symbol auf dem Startbildschirm zu sehen: Der Benutzer muss die Seite als Bookmark abspeichern. Auf alle Einzelheiten von reaktionsschnellen Webseiten wollen wir an dieser Stellen nicht näher eingehen, denn in diesem Beitrag geht es uns vor allem um die Erstellung von Web-Apps, d.h. wir gehen davon aus, dass die Applikation von Anfang an neu konzipiert wird ("mobile first") und nicht eine herkömmliche Desktopsite sein sollte.

Bei der Einrichtung einer Web App sind daher immer die folgenden grundlegenden Regeln zu beachten: Dabei ist es nicht die Pflicht, alles, was Sie in einer Desktop-Anwendung vorfinden, in eine (smartphone-optimierte) Web-App zu pressen. Damit kommen wir aber auch zu einem kleinen technischen Problem: Bei Medienabfragen stellt der Datenserver immer noch den gesamten Inhalt bereit, möglicherweise sogar Inhalte, die nicht für das Handy bestimmt sind.

Man kann es leicht verbergen, aber es wäre viel schöner, es gar nicht erst zu beladen. Wir haben in unserem Beispiel eine Web-App zum Herunterladen, wenn Sie PHP benutzen. Hier wird noch einmal klar, wie notwendig es ist, den Anwendungsbereich der App im ersten Arbeitsschritt genau zu definieren: Wenn die Web-App auch offline arbeiten soll, kommt der Einsatz dieser serverseitigen Technik nicht in Frage.

Dieser Tatsache sollte bei der Erstellung von Web-Apps, die überwiegend auf Smart-Phones mit hoher Pixeldichte ausgeführt werden, dadurch begegnet werden, dass das Gesamtdesign in Doppelgröße erstellt und die Einzelbilder auch in Doppelgröße gespeichert werden. Das Verhältnis zwischen Webkit und Gerät zu Pixel: 2) Was die reale Web-App von einer reaktionsschnellen Webseite abhebt, ist die Möglichkeit, die Vorteile der Gerätehardware von Smart-Phones zu nützen - genau wie eine "echte" App.

Dabei hat der Programmierer eine Vielzahl von, oft unbekannten und wenig genutzten Interaktionsmöglichkeiten, mit denen die Web-App in vielen Use Cases eine nativen App ablösen kann (siehe auch "Vergleich von Web-App und nativer App"). Die Aufnahme von Fotos ist eine der einfachsten Aufgaben für den Web-App-Entwickler, denn das Ganze funktioniert mit einer Kurzlinie:

Damit wird die nativen Foto-App aufgerufen und der Benutzer kann ein Spontanbild in die Web-App aufnehmen. Die Rückgabewerte sind ein Objekte, das nicht nur den Breiten- und Längengrad, sondern auch die Höhenlage, die Schnelligkeit und den Kurs enthält, d.h. alles, was Sie für Ihre eigene Lovoo App benötigen.

Für die Standortbestimmung über die Geolokalisierung werden prinzipiell nur die verfügbaren Informationen herangezogen, d.h. IP-Adressen, Flan- und Mobilfunkspektraldaten. Es ist Teil einer Web-App, wie in der Einführung erwähnt, um die Funktionalität auch dann sicherzustellen, wenn keine mobile Anbindung vorhanden ist, wenn es sich um eine Offline-Speicheranwendung handelt. Es hat sich in der Regel als erfolgreich erwiesen, beim Starten der App zu überprüfen, ob eine Internetverbindung existiert und in diesem Falle alle Informationen vom Datenserver zu beziehen.

Die inzwischen dezentral erfassten Informationen werden in lokalStorage abgelegt und sofort nach dem Wiederherstellen der Internetverbindung aufbereitet. Der Clou an lokalStorage ist, dass man beliebige komplizierte Projekte mit nur einer Codezeile über JSON zuführen kann. stringify: lokalStorage. setItem('ObjectnameImSpeicher', JSON. stringify(objektname)); var obj = JSON.parse(localStorage. gettingItem ('Object nameinMemory')); In den Entwicklerwerkzeugen des Webbrowsers (normalerweise mit dem Befehl W12 zu öffnen) sind die so abgelegten Informationen auf der Registerkarte "Ressourcen" und dort unter "Lokale Speicherung" zu finden: Das Herunterladen der Dateien erfolgt andersherum über lokalStorage. getsItem ist genauso komfortabel.

Die hier vorgestellte Technik, von der dezentralen Datenhaltung über die Geolokalisierung bis hin zur eigenen Aufnahme mit der Web-App, ermöglicht es, komplizierte Anwendungen wie einen Lovoo-Klon zu realisieren.