So entstand die Bielefeld 360 Grad App der Neuen Westfälischen

Screenshot 360 Grad Bielefeld App

Screenshot 360 Grad Bielefeld App

Am Anfang eines jeden neuen Projektes steht die richtige Team-Zusammenstellung. Bei unseren CMS-Projekten werden die Teams vor allem nach der verwendeten CMS-Technologie wie Sitecore oder FirstSpirit zusammen gesetzt. Im Fall der 360 Grad Bielefeld App-Entwicklung setzte sich das Kernteam nach den Anforderungen der Neuen Westfälischen aus drei Personen zusammen, die besonders gut zum Bereich Web-Anwendungsentwicklung passen:

John Gibbon als Web-Entwickler, Daniel Blomeyer als Frontend-Entwickler und Markus Plauschinn war der verantwortliche Projektmanager.

Die App selber können Sie hier für 1,79 EUR herunterladen:

Wer macht was?

Kurz gesagt: WebEntwickler_innen bauen die eigentliche App auf – die Anwendung eben. Frontend-Entwickler_innen sorgen dafür, dass die App gut aussieht und vor allem gut benutzt werden kann und Projekt-Manager_innen sind die Schnittstelle zwischen Kunde und comspace. Sie sorgen für die Abstimmung der Anforderungen, geben Lösungsansätze die durch Entwickler_innen erarbeitet werden an die Kunden zurück, erstellen den Projektplan und behalten ein Auge auf die Einhaltung von Terminen.

Ausführlich können Sie sich in diesem Artikel über die Berufsportraits informieren

Das heißt im Falle der Bielefeld 360 Grad App

Stefan Gerold von der Neuen Westfälischen stellte uns einen ersten Entwurf als Ausgangslage für den Aufbau der App vor. Diese bestand aus einer Webseite, die die grundsätzlichen Funktionen und erste Panorama-Fotos enthielt. Auf dieser Basis entstand eine technische Konzeption, die das spätere Endprodukt zum 800 Jahre Jubiläum der Stadt Bielefeld beschrieb.

Die technische Konzeption ließ uns die besonderen Herausforderungen erkennen, für die wir individuelle Lösungen entwickeln mussten:

  • Ansicht und Navigation durch Panorama-Bilder
  • lange Ladezeiten durch große Panoramas vermeiden – Zielgröße der App kleiner als 50MB
  • Bielefeld 360 Grad soll in verschiedenen Größen in Hoch- und Querformat dargestellt werden (auf Smartphones und Tablets verschiedener Größen)

Neben den Basisanforderungen wie Menü-Steuerung, Hilfe- und Infoseiten haben wir aus der vorliegenden Lösungsskizze die genauen Anforderungen rückwärts abgeleitet (re-engineered). Dann wurde zunächst einmal eine Web-Anwendung erstellt, die auf stationären Rechnern entwickelt wurde. Begonnen wurde mit dem Rahmen und der Navigation. Dann folgten die ersten Bielefeld-Panoramen um die App benutzbar zu machen. Die mobile Anwendung wurde zunächst einmal nur simuliert. Aus dieser Entwicklung entstanden dann die einzelnen Lösungsansätze, mit denen wir die Darstellung der großen Bielefeld-Panoramas ermöglichten:

  • Wir zerschnitten die Panoramas in Einzelbilder, die später in der App wieder zusammen gesetzt dargestellt werden, wie man es bsw. von Google Maps kennt
  • Um eine flexible Darstellung auf unterschiedlichen Bildschirmgrößen zu ermöglichen wurden die Markierungen neu gesetzt, mit deren Hilfe sich Benutzer_innen auf ihrem Bielefeld-Rundgang durch die einzelnen Panoramas navigieren
  • Bildergalerien und Zusatzinformationen wurden den Orten im Panorama zugeordnet und über eine Menüfunktion zugänglich gemacht
  • Radio Bielefeld steuerte Tonspuren bei, die automatisch abgespielt werden sollen, wenn ein Panorama angeklickt wird. Hierzu benötigte die App eine eigene  Abspielfunktion für Audiodateien
  • Das führte zu einem zusätzlichen Button um den Ton schnell an und aus zu schalten

Nachdem die erste funktionierende Web-App mit entsprechenden Funktionen stand, fütterten wir das Cordova-Framework mit dem Projektergebnis. Dieser Werkzeugkasten zur Webentwicklung, der mittlerweile zu Adobe gehört, hält den Aufwand gering, um aus einer Web-Anwendung eine lauffähige App für verschiedenste Smartphone-Systeme zu erzeugen.

Danach ging eigentlich alles ganz schnell: Der erste Stand wurde durch uns präsentiert und in mehreren Feedbackrunden nah am Kunden wurde mit der NW die App fertig entwickelt. Dabei wurden vor allem viele kleine Änderungen Schritt für Schritt durchgeführt, wie die Gestaltung des App-Icons, Testinstallationen auf verschiedenen Geräten usw.

Wie kommt die App in den Store?

Hier kommt das eigentlich aus dem voran gegangenen Absatz zum Tragen, denn von der Fertigstellung der App, der Freigabe durch den Kunden bis zur tatsächlichen Verfügbarkeit im Appstore (besonders bei Apple) vergehen gerne einmal zwei bis drei Wochen. Sollte Ihre App also zeitkritisch sein – bsw. für eine Messe oder ein Jubiläum, planen sie ausreichend Zeit für das Einstellen in die App-Stores ein. Mittlerweile ist es sowohl im Apple wie auch im Android Store möglich, eine automatische Veröffentlichung nach Freigabe zu deaktivieren. So lässt sich ein gleichzeitiger Launch verschiedener Versionen realisieren.

Weitere Einblicke in die Entstehung der Bielefeld 360 Grad App erhalten Sie in den kommenden Tagen zu folgenden Themen:

  • Wie entstand die Idee zur App – Interview mit Stefan Gerold von der NW
  • Panorama Fotografie was ist das eigentlich – Fotograf Andreas Frücht erklärt
  • Die Berufe hinter der App: Anwendungsentwickler, Frontent-Developer, Projektmanager
  • Elsa-Brändström-Straße 2-4:  Eines der Panoramas über den Dächern Bielefelds entstand auf dem Dach von comspace

Über Alex Kahl

Alex Kahl arbeitet bei comspace derzeit als freier Mitarbeiter für Social Media Marketing. Neben der Betreuung dieses Blogs in den Bereichen Redaktion und Vernetzung steht er uns in Kundenprojekten beratend in Sachen Social Web zur Seite. Mehr über Alex erfahren Sie in seinem Blog zu automobilen Lifestyle Der-Probefahrer.de, auf Facebook, Twitter, und XING
Artikel teilen:

Verwandte Themen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.