Blog

Wer kleine und mittlere Webanwendungen erstellt, kennt die Situation: Auf die Frage, wie die zu verarbeitenden Daten vorliegen, bekommt man eine Arbeitsmappe im MS Excel-Format. Darin wurden die Daten bislang gepflegt, und das soll auch so bleiben. Gesucht ist also ein Weg, die Spreadsheet-Daten in ein Format zu überführen, das Browser nativ verstehen, und der möglichst wenig Arbeit bereitet, besonders im Hinblick auf spätere Aktualisierungen der Daten. Hier beschreiben wir einen effizienten Weg zu einer JSON (JavaScript Object Notation)-Datei, die man dann in die Anwendung AJAXen kann.

Ausgangspunkt
Als Beispiel nehmen wir einen Produktkatalog(auszug), der Felder wir Produktnummer, Name, Kategorie und für jedes Produkt ein bin vier Varianten mit Bezeichnung und Code enthält. Der Katalog umfasst 500 Zeilen, das erfordert noch keinen Datenbankserver, ist aber definitiv zu viel für reine Handarbeit.

Werkzeuge
Gebraucht wird erstens ein Programm, das Excel-Arbeitsmappen nach CSV exportieren kann. Wir geben LibreOffice Calc den Vorzug, weil es auf Wunsch CSV erzeugt, in dem jeder Zelleninhalt in Anführungszeichen eingeschlossen ist. Für die Weiterverarbeitung ist es wichtig, dass die Inhalte die gleiche Form haben. Mit Microsoft Excel bekommt man das auch hin, aber nur durch Einsatz eines Makros.
Zweitens wird ein Texteditor benötigt, der Suchen und Ersetzen mit regulären Ausdrücken auf einen ganzen Bereich (aber nur einmal in jeder Zeile!) anwenden kann. Wer sich mit Vi Improved anfreunden kann, findet darin ein mächtiges Werkzeug. Wer mit Linux arbeitet, kann einfach sed verwenden. Es empfiehlt sich, die Schreibweise, die das gewählte Werkzeug für reguläre Ausdrücke verwendet, nachzuschlagen. Insbesondere Verweise auf gefundene Teilausdrücke werden unterschiedlich notiert. Die Beispiele hier beziehen sich auf Vi Improved, für sed wäre die Bereichsangabe "1,$" wegzulassen.

Der Auftakt: CSV exportieren
Wie angesprochen, soll das resultierende CSV jeden Zelleninhalt in Anführungszeichen einschließen. Das Trennzeichen ist relativ beliebig, unsere Beispiele beziehen sich auf den bei LibreOffice üblichen senkrechten Strich „|“. Die Zeichenkodierung sollte UTF-8 sein. Die Titelzeile wird aus dem Export entfernt.
Wenn die Arbeitsmappe mehrere Blätter umfasst, können diese in separate CSVs exportiert, getrennt umgebaut und später in eine gemeinsame Datei gepackt werden.

CSV schrittweise zu JSON umbauen
Ein dem Spreadsheet entsprechendes JSON-Objekt enthält ein Array von Objekten, die jeweils die Spaltenköpfe als Schlüssel und die Zellinhalte als Werte enthalten. Da wollen wir also hin. Die Werte sehen nach dem Export schon fast richtig aus, aber die Schlüssel und die Struktur fehlen noch. Hier kommt jetzt Suchen und Ersetzen zum Einsatz. Anfang und Ende der JSON-Notation ergänzen wir zum Schluss, dann müssen wir keine Zeilen von der Bearbeitung ausschließen.

Als Erstes müssen wir uns um einen Spezialfall kümmern: Anführungszeichen, die in den Zellinhalten vorkommen. Der Export hat diese verdoppelt, für JSON müssen sie aber maskiert werden. Als zusätzliche Schwierigkeit können diese doppelten Anführungszeichen direkt benachbart zu einer Feldgrenze auftreten, daher verwenden wir eine ganze Serie von Ersetzungen:

1,$s/"""$/\\""|/
1,$s/"""|/\\""|/
1,$s/^"""/"\\"|/
1,$s/|"""/|"\\"/
1,$s/\([^|\\]\)""/\1\\"/g

Jetzt beginnen den Einbau der Feldschlüssel damit, den Beginn des Objekts und den ersten Feldschlüssel an die Zeilenanfänge zu setzen. Für den Editor formulieren wir das als Ersetzen des Zeilenanfangs, das auf alle Zeilen der Datei angewendet wird:

1,$s/^/ { “prodNummer”: /

Dann kommen die weiteren Felder der Zeile an die Reihe. Da die Werte alle mit Anführungszeichen beginnen und enden und zwischen ihnen Trennzeichen stehen, können wir nach der Sequenz „|” suchen. Hier wird wichtig, dass der Editor die folgende Änderung zwar auf alle Zeilen anwendet, aber nur auf das erste Auftreten in jeder Zeile. Die genannten Werkzeuge machen das so (wenn man sie nicht anders anweist). Also:

1,$s/”|”/”, “prodName”: /

Das können wir nun für jede Spalte wiederholen. Um der Anwendung die Arbeit zu erleichtern, wollen wir aber die bis zu vier Produktvarianten als Array kodieren. Daher schließen wir beim Einfügen der ersten Variantenspalte den Beginn eines Arrays und eines Objekts mit ein:

1,$s/”|”/”, [ { “variantenCode”: /

Und bei der ersten Spalte der zweiten Variante muss zusätzlich das erste Objekt abgeschlossen werden:

1,$s/”|”/” }, { “variantenCode”: /

Wenn nicht alle Produkte die maximale Anzahl von Varianten haben, bleiben in der Zeile Trennzeichen stehen, die von den Ersetzungen nicht erfasst wurden. Die entfernen wir jetzt, bevor die Zeile abgeschlossen wird, denn dann stehen sie leicht adressierbar am Ende:

1,$s/|*$//

In unserem Beispiel kann das Abschließen des letzten Objekts und des Varianten-Arrays mit dem Abschluss der Datenzeile zusammen erfolgen. Hier zielen wir auf das Zeilenende (das abschließende Komma wird benötigt, weil die Datenzeilen ja den Inhalt eines Arrays bilden):

1,$s/$/ } ] },/

Abschließende Änderungen
Jetzt sind alle Zeilen umgebaut, aber noch ist das Ergebnis kein korrektes JSON, was ja genau ein Objekt beschreibt. Daher fügen wir jetzt noch am Anfang und am Ende die große Klammer ein. Vor den Anfang setzen wir:

{ “produktDaten”: [

Indem wir die Daten an einen Schlüssel hängen (anstatt ein anonymes Array als äußerste Struktur zu verwenden), ermöglichen wir, auch noch weitere Datenpakete in dieselbe Datei zu packen, das kommt oft genug vor, um hier vorzusorgen.
Von der letzten Zeile muss noch das abschließende Komma entfernt werden, das ist in JSON, im Gegensatz zu JavaScript, nicht erlaubt:

$s/,$//

Dann wird noch der Schluss von Array und Objekt eingefügt:

] }

Damit ist die Konvertierung abgeschlossen. Der resultierenden Datei sollte man noch die Endung .json geben.

Prüfen kann man das Resultat übrigens einfach, indem man die Datei im Browser öffnet. Der zeigt dann die Objektstruktur an – oder eben eine Fehlermeldung.

Der ganze Prozess liest sich kompliziert, aber jede einzelne Anweisung baut alle Datenzeilen um, in unserem Fall also ein gutes Dutzend Kommandos für 500 Zeilen. Das lohnt sich dann schon, selbst wenn man vielleicht manchen regulären Ausdruck mehrmals testen muss. Es empfiehlt sich, die erfolgreiche Sequenz von Anweisungen zu notieren, denn die nächste Version der Arbeitsmappe kommt bestimmt, und dann geht die Konvertierung schnell von der Hand.

In der heutigen digitalen Ära ist die Entwicklung einer eigenen App zu einem wichtigen Bestandteil der Unternehmensstrategie geworden. Eine App bietet Unternehmen die Möglichkeit, mit ihrer Zielgruppe in Kontakt zu treten, um ihre Markenbekanntheit zu steigern. Doch ist es wichtig zu verstehen, welche Art von App am besten zu Ihren Anforderungen passt. In diesem Artikel werden die Unterschiede, Vor- und Nachteile von Web-Apps, Hybrid-Apps und nativen Apps beleuchtet.

Web-Apps: Eine plattformübergreifende Lösung
Web-Apps sind Anwendungen, die über den Webbrowser aufgerufen und genutzt werden können. Sie werden in der Regel mit Webtechnologien wie HTML, CSS und JavaScript entwickelt und sind unabhängig vom Betriebssystem des Geräts. Der größte Vorteil einer Web-App ist ihre plattformübergreifende Kompatibilität. Da sie im Browser läuft, ist sie sowohl auf Desktops als auch auf mobilen Geräten verfügbar. Dies bedeutet, dass Unternehmen nur eine einzige Codebasis pflegen müssen, was Zeit und Kosten spart.

Ein weiterer Vorteil von Web-Apps ist die einfache Aktualisierung. Da sie zentral gehostet werden, können Änderungen und Updates sofort implementiert werden, ohne dass Benutzer die App aktualisieren müssen. Allerdings haben Web-Apps auch ihre Nachteile. Sie können nicht auf alle Funktionen des Geräts zugreifen, wie zum Beispiel auf Kamera, GPS oder Benachrichtigungen. Darüber hinaus sind Web-Apps in der Regel langsamer als native Apps, da sie von der Netzwerkverbindung abhängig sind. Sie brauchen eine ständige Internetverbindung.

Hybrid-Apps: Die Kombination aus Web und Native
Hybrid-Apps sind eine Mischung aus Web-Apps und native Apps. Sie werden mit Webtechnologien entwickelt und laufen in einer sogenannten WebView, einer abgesicherten Version des Browsers, die in einer native App eingebettet ist. Dadurch haben Hybrid-Apps Zugriff auf bestimmte Funktionen des Geräts, die über Webtechnologien normalerweise nicht verfügbar wären.
Ein großer Vorteil von Hybrid-Apps ist ihre plattformübergreifende Kompatibilität. Wie Web-Apps können sie auf verschiedenen Betriebssystemen laufen und ermöglichen es Unternehmen, Zeit und Kosten zu sparen. Allerdings leiden Hybrid-Apps manchmal unter Performance-Problemen, da sie von der WebView abhängig sind und nicht die volle Leistungsfähigkeit native Apps erreichen können.

Native Apps: Maximale Leistung und Benutzererfahrung
Native Apps sind speziell für ein bestimmtes Betriebssystem (z.B. iOS oder Android) entwickelt. Sie werden in der Sprache des jeweiligen Betriebssystems geschrieben, wie beispielsweise Swift oder Objective-C für iOS und Java oder Kotlin für Android. Der größte Vorteil native Apps liegt in ihrer Leistung und Benutzererfahrung. Sie haben vollen Zugriff auf alle Funktionen des Geräts und bieten eine nahtlose Integration in die jeweilige Plattform.

Durch den Zugriff auf Gerätefunktionen wie Kamera, GPS und Benachrichtigungen ermöglichen native Apps eine breitere Palette von Anwendungsfällen, wie beispielsweise Foto- oder Standort-basierte Apps. Native Apps haben auch die bessere Performance, da sie direkt auf das Betriebssystem und die Hardware des Geräts optimiert sind. Allerdings erfordert die Entwicklung native Apps einiges an mehr Aufwand und Ressourcen, da separate Codebasen für jedes Betriebssystem gepflegt werden müssen.

Fazit
Die Wahl zwischen Web-Apps, Hybrid-Apps und native Apps hängt von den spezifischen Anforderungen Ihres Unternehmens ab. Letztendlich sollten Sie bei der Entscheidung für eine App-Entwicklungslösung Ihre Zielgruppe, Funktionalitätsanforderungen und das verfügbare Budget berücksichtigen.

In der digitalen Landschaft ist Stagnation gleichbedeutend mit Rückstand. Da sich Technologien und Benutzergewohnheiten ständig weiterentwickeln, verändern sich auch die Webtrends immer wieder. Hier sind einige der neuesten Trends, die das Web in 2023 prägen.

1. Core Web Vitals und Page Experience
Google hat seine Core Web Vitals und die Page Experience zu entscheidenden Ranking-Faktoren erhoben. Websites müssen schnelle Ladezeiten, Interaktivität und visuelle Stabilität bieten, um in den Suchergebnissen weit oben zu stehen. Webmaster optimieren ihre Websites immer mehr, um den Erwartungen von Google und den Nutzern gerecht zu werden.

2. Voice Search und Voice Commerce
Die Nutzung von Sprachsuche und Sprachhandel steigt mit der Verbreitung von Smart Speakern und Sprachassistenten wie Alexa, Siri und Google Assistant. Marken optimieren ihre Websites für die Sprachsuche und nutzen Technologien wie Natural Language Processing und Machine Learning, um die Benutzererfahrung zu verbessern.

3. Erweiterte Realität (AR) und Virtuelle Realität (VR)
AR und VR sind keine neuen Konzepte, aber sie erleben im Web einen Aufschwung. Unternehmen nutzen diese Technologien, um immersive Einkaufserlebnisse zu schaffen, die das Engagement der Nutzer erhöhen. WebVR und WebAR sind neue Webstandards, die es ermöglichen, AR- und VR-Inhalte direkt in einem Webbrowser anzuzeigen, ohne zusätzliche Apps oder Software zu benötigen.

4. Künstliche Intelligenz (KI) und Machine Learning (ML)
KI und ML werden zunehmend genutzt, um personalisierte Benutzererlebnisse zu schaffen. Sie helfen dabei, Benutzerverhalten zu analysieren, Muster zu erkennen und maßgeschneiderte Inhalte und Empfehlungen zu liefern. Chatbots, die KI und ML nutzen, können Kundenservice-Anfragen automatisch beantworten und 24/7 Support bieten.

5. Datenvisualisierung
Da das Datenvolumen weiterhin exponentiell wächst, wird die Datenvisualisierung immer wichtiger. Sie ermöglicht es, komplexe Datenmengen zu vereinfachen und in verständlicher, visueller Form darzustellen. Tools wie D3.js und Three.js werden immer beliebter für die Erstellung interaktiver Grafiken und Datenvisualisierungen.

6. Dark Mode
Der Dark Mode ist ein ästhetischer Trend, der die Augen schont und die Akkulaufzeit von OLED-Displays verbessert. Viele große Marken haben bereits dunkle Themen für ihre Websites eingeführt und es ist zu erwarten, dass dieser Trend weiterhin anhält.

7. Datenschutz und Sicherheit
Mit der wachsenden Besorgnis um die Online-Privatsphäre werden Datenschutz und Sicherheit zu einem Hauptanliegen für Webnutzer. Websites, die klare Datenschutzrichtlinien haben und sich an Standards wie das General Data Protection Regulation (GDPR) und das California Consumer Privacy Act (CCPA) halten, werden von den Nutzern bevorzugt.

Diese Trends prägen das Web im Jahr 2023. Sie spiegeln die wachsenden Erwartungen der Nutzer an schnelle, sichere, personalisierte und immersive Online-Erlebnisse wider. Webentwickler und -designer müssen sich anpassen und diese Trends berücksichtigen, um relevant zu bleiben und den Nutzern das zu bieten, was sie suchen.