TOMAT TOURISTIC OPEN SOURCE MOBILE APPLICATION TOOLKIT

Transkript

1 TOMAT TOURISTIC OPEN SOURCE MOBILE APPLICATION TOOLKIT NUTZER-HANDBUCH 09 June 2015

2 TOMAT wurde im Rahmen des INTERREG IVC-Projekts e-create entwickelt und steht auf der Projektwebsite kostenfrei zum Download zur Verfügung. 09 June /17

3 INHALTSVERZEICHNIS 1 Einleitung Allgemeine Prinzipien Aufbau Administration Interface («Back-end») Die Smartphone App Back-end-Funktionen Inhalt der Anwendung Erstellen von Artikeln Menü Datatypes Erstellen einer Liste von Sehenswürdigkeiten Anleitung zum Erstellen Automatisches Erstellen Soziales Netzwerk Erstellen einer Kunden-App Testen Sie die App! Mobile Entwicklung Aufbau Konfiguration Personalisierung Entwicklung (nur für fortgeschrittene Nutzung) Mobile Funktionen Geolokation und Karten Filter Soziale Netzwerke und Sharing Nutzerdaten und Offlinemodus Push QR Codes June /17

4 1 Einleitung Dieses Handbuch richtet sich an Nutzer, die eine App oder eine mobile Webseite für Smartphones erstellen oder konfigurieren wollen. Voraussetzung ist die Verfügbarkeit eines TOMAT-Servers, sowie die nötigen Fähigkeiten solche Apps und mobilen Webseiten zu erstellen und anzuwenden. Beide Prozesse sind entsprechend auf der TOMAT github Webseite und im TOMAT Nutzer Interface dokumentiert. 2 Allgemeine Prinzipien 2.1 Aufbau TOMAT basiert auf drei autonomen Komponenten: Einem Datenserver, der alle, für andere Komponenten inklusive Bilder, benötigten Daten speichert, archiviert und bereitstellt. Ein CMS-Style-Nutzer-Interface, welches die Konfiguration der Inhalte der erstellten Apps (Artikel, News, Sehenswürdigkeiten, Menüs, ) sowie den Import von Daten aus externen Quellen erlaubt. Ein Grundgerüst für Apps und Webseiten, das den Zugang zu den Daten der Server ermöglicht und diese für den Offline-Gebrauch speichert. Außerdem erlaubt es die Anzeige verschiedener Daten in ad-hoc-schnittstellen (Listen, Details, Karten, News, ). Dieses Grundgerüst kann durch Plugins für den Zugang zu anderen Funktionen des Telefons erweitert werden. (QR-Code, Kamera, GPS, Push, ) 2.2 Administration Interface («Back-end») Bild 1: Homepage 09 June /17

5 Dies ist die Hauptkomponente, die in diesem Dokument behandelt wird. Das ist der Teil, der das Konfigurieren und Testen (im Web-Modus) der App ermöglicht. 2.3 Die Smartphone App Einige wenige Dateien müssen bearbeitet werden um die App in Bezug auf den persönlichen Bedarf zu konfigurieren. Obwohl dies kein Entwickler-Handbuch ist, werden wir die grundlegenden Instruktionen zur Personalisierung und weiterer Modifizierung der App behandeln. Für den Fall, dass weitere detaillierte Instruktionen benötigt werden, empfehlen wir, sich die Tools, die für die Erstellung der App benutzt wurden, anzusehen; insbesondere Ionic, was die Grundlage der Anwendung ist. 3 Back-end-Funktionen Dieser Teil bezieht sich auf die verschiedenen Back-end-Funktionen von TOMAT. 3.1 Inhalt der Anwendung Dieser Teil der App ermöglicht den Zugang zu zwei zentralen Funktionen von TOMAT: Die Konfiguration des Hauptmenüs, und das Erstellen von Artikeln, die untereinander oder mit dem Hauptmenü verlinkt werden können Erstellen von Artikeln Bild 2 Fenster zur Bearbeitung und Erstellung von Artikeln 09 June /17

6 Das Fenster ermöglicht es neue Artikel zu erstellen oder bestehende Artikel zu löschen oder zu modifizieren. Es beinhaltet einen umfangreichen Text-Editor, mit dessen Hilfe man die Inhalte der Artikel sowie die Liste der bereits bestehenden Artikel bearbeiten kann. Des Weiteren bietet es ein kleines Vorschau-Feld um einen Eindruck davon zu bekommen, wie der jeweilige Artikel in der App aussehen wird. Nach dem Erstellen (abhängig von der Browser-Konfiguration, ist ein erneutes Laden der Seite nötig), hat jeder Artikel eine eigene ID und URL. Diese Adresse wird dann genutzt um die Artikel mit dem Menü oder anderen Artikeln zu verlinken (die Navigation in der App funktioniert genau wie die Navigation auf der Webseite). Der Rest des Interfaces sollte selbst-erklärend sein. Noch zwei nennenswerte Funktionen des Editors sind: Der letzte Button in der Button-Leiste erlaubt es Ihnen den Artikel als eigentliches HTML-Dokument anzusehen, und ermöglicht so die Feinabstimmung des Layouts. Des Weiteren gibt es eine Funktion, mit der man Youtube Videos einfügen kann. Dazu benötigt man nur die ID des Videos von der Youtube Seite. Dies ist sehr praktisch wenn man Videos zu seinen Webseiten hinzufügen möchte ohne sich mit bestimmten Hosting-Problemen rumschlagen zu müssen. (Natürlich kann man auch eigene Videos auf der Seite einfügen. Es ist jedoch zu beachten, dass keine mobile Plattform mehr den Flash Player unterstützt. Stellen Sie also sicher, dass Sie HTML5-Videos verwenden) Menü 09 June /17

7 Diese Seite ermöglicht es Ihnen den Inhalt des Hauptmenüs sowie weiterer untergeordneter Menüs zu konfigurieren. Es gibt vier Hauptmenütitel, die Sie natürlich nach Ihren eigenen Vorstellungen gestalten können. Jeder einzelne kann so viele Menüitems beinhalten wie Ihnen beliebt. Jedes Menü besteht aus einer Beschriftung, einer spezifischen CSS-Kategorie (die nur für benutzerdefinierte Darstellung des Menüs benötigt wird), einer Symbol-Kategorie, welche es Ihnen erlaubt Ihr eigenes Menüsymbol aus einer großen Anzahl gegebener Möglichkeiten auszuwählen oder eine eigene Kategorie zu definieren, und dem Menütitel zu dem es gehört. Und zuletzt ermöglichen zwei Kontrollkästchen ein spezifisches Menü Item anzuzeigen oder auszublenden und es als kleines Symbol auf der Webseite darzustellen oder nicht (Es können nur eine begrenzte Anzahl von Items pro Titel auf der Hauptseite angezeigt werden). Es gibt drei Arten von URLs: Links zu Artikeln (mit der Form #/discover/<article-id>), Links zu Listen der Sehenswürdigkeiten (mit der Form #/pois/<poi-type>) und Links zu bestimmten Funktionen der App (Favoriten, Reset, ), die den erstellten Seiten in der App selbst entsprechen. 3.2 Datatypes 09 June /17

8 Dieser Teil ermöglicht es die Datentypen der Sehenswürdigkeiten zu definieren und zu modifizieren. Standard- Datentypen werden durch die App erstellt, aber Sie wollen diese höchstwahrscheinlich bearbeiten oder neue Typen erstellen. Beachten Sie, falls Sie neue Datentypen mit unterschiedlichen Bereichen erstellen wollen, müssen Sie außerdem die entsprechende Seite in der App erstellen. Ein Datentyp wird zur Bestimmung der in den vorgegebenen Sehenswürdigkeits-Typen gespeicherten Daten genutzt. Restaurants zum Beispiel werden Informationen zu Ort, Preis und Kategorie bereitstellen, während für Strecken die Startpositionen, Länge, Schwierigkeit und die durchschnittlich benötigte Zeit angegeben werden. Jeder Datentyp besteht aus mehreren Informationen: Der Name, der für die Identifikation innerhalb der App sowie für dessen Abruf aus den Menüs genutzt wird Sein Dokumentenpfad, Markersymbol- und Farbe, welcher in der App wiederverwendet wird Felder. Jedes Feld ist ein Wert eines Datentyps, welcher entweder per Hand eingefügt wird oder aus einer externen Quelle importiert wird. Jedes Feld hat einen Namen, einen Typ und einen Pfad. Der Name ist nötig um das Feld zu identifizieren, der Pfad für den Zugang innerhalb des App-Dokuments und der Typ definiert die Art der Daten, die zu erwarten sind (Text, Anzahl, Daten, URL, Position, ). Anfangs ist es ratsam mit einem einfachen Datentyp zu beginnen um sich mit der App vertraut zu machen und später weiter auszubauen. Bitte beachten Sie, dass Sie im Falle einer Modifizierung von Standard- Datentypen möglicherweise auch die Standard-Dokumentvorlagen in der App bearbeiten müssen. 3.3 Erstellen einer Liste von Sehenswürdigkeiten Dieser Teil zeigt Ihnen wie Sie eine Liste geographischer Sehenswürdigkeiten für die Nutzer erstellen können. Sie können diese entweder manuell einfügen oder mit einer externen Datenquelle verbinden. 09 June /17

9 3.3.1 Anleitung zum Erstellen Dieses Fenster ermöglicht das manuelle Erstellen von Sehenswürdigkeiten oder das Bearbeiten schon bestehender. Um eine gegebene Sehenswürdigkeit zu bearbeiten, müssen Sie diese nur anklicken. Danach können Sie den Typ auswählen, was natürlich auch die Felder, die ausgefüllt werden müssen verändert, und das entsprechende Informationsfeld für die Sehenswürdigkeit ausfüllen. Das Anzeigefenster ist mit einer Karte verbunden, in der Sie einfach die Position der Sehenswürdigkeit bestimmen können. Und schließlich hat jede Sehenswürdigkeit ein an/aus-button, mit dem Sie festlegen können, ob sie in der App angezeigt oder für den späteren Nutzen gespeichert wird. 09 June /17

10 3.3.2 Automatisches Erstellen Dieses Fenster wird für den Import von Daten aus externen Datenquellen genutzt. Für jede Datei oder URL muss eine neue Datenquelle erstellt werden, selbst wenn diese Datei Daten desselben Typs beinhaltet. Umgekehrt, beinhaltet dieselbe Datei mehrere Arten von Sehenswürdigkeiten, muss diese auch mehrere Male importiert werden. Die Hauptkomponente einer Datenquelle ist entweder ein URL, der die XML Daten beinhaltet, oder eine Datei. Jede Datenquelle muss außerdem einen Namen für künftige Verweise haben und um die Art der Sehenswürdigkeit zu definieren, in welche die Datenquelle importiert. Der refresh -Button ist sehr hilfreich um sicher zu gehen, dass Sie die neuste Version des Typs verwenden. Der Rest des Dokuments wird aus XPath-Ausdrücken zusammengestellt. Die Funktionsweise von XPath zu erklären, würde über den Umfang dieses Handbuchs hinausgehen (aktuelle links über XPath finden Sie auch in dem Anzeigefenster). Hier sind dennoch die Grundlagen: Das Grundelement muss den Pfad zum dem XML Inhalt aufweisen, der einer Sehenswürdigkeit entspricht. Zum Bespiel, für den Fall, dass all Ihre Hotels innerhalb der <hotel></hotel> Elemente sind, könnte das Grundelement //hotel sein. 09 June /17

11 Danach muss jedes Feld den Pfad zu seinem Wert beinhalten, unabhängig davon ob es sich um ein Element oder um ein Attribut handelt. Zum Beispiel, beinhaltet jedes Hotel-Element ein <position lat= 45 Ing= 3,3 /> Element, wäre der Pfad für lat und der für Ing Aber falls sich der Bild URL innerhalb eins <illustration> Elements befindet (wie z.b. <illustration> wäre der Pfad //illustration. Wenn alle verschiedenen Felder ausgefüllt worden sind, können Sie den preview -Button anklicken um die ersten Items Ihrer Datei anzuzeigen. So können Sie überprüfen ob alles ordnungsgemäß konfiguriert wurde. Danach können Sie durch Anklicken des save -Buttons die Daten auf den Server übertragen. 3.4 Soziales Netzwerk Das sollte selbst-erklärend sein. Es wird benötigt, falls Sie erweiterte Soziale-Netzwerk-Funktionen anstreben oder wenn Sie die Anwendung mit der App eines Sozialen Netzwerkes verlinken wollen. Die grundlegenden Funktionen sind in der Kunden-App enthalten. 3.5 Erstellen einer Kunden-App Es ermöglicht Ihnen die Quellen für die Kunden-App (welche außerdem auf github zu finden sind) herunterzuladen sowie den Zugriff auf Instruktionen bezüglich der Installation und der Erstellung. Es beinhaltet außerdem Links zu allen relevanten Entwicklerdaten der verwendeten Komponenten. 3.6 Testen Sie die App! Wenn Sie eine Mobile Web App erstellen, verweist dies zu einem Link, der es erlaubt die App in Echt-Zeit zu testen. 4 Mobile Entwicklung Die einfache Installation und Verwendung der Mobile-App wird schon in TOMAT beschrieben. Dieser Teil des Dokuments konzentriert sich darauf den Aufbau der App zu beschreiben und zeigt auf, welche Dateien und Teile bearbeitet werden sollten um die App individuell anzupassen. Bitte beachten Sie, dass hier möglicherweise einiges an Wissen bezüglich HTML, CSS, Javascript und Mobile- App-Entwicklung nötig ist, abhängig davon welche Funktionen Sie anstreben. Die Beschreibung dieser Fähigkeiten geht über den Umfang dieses Dokuments hinaus. 09 June /17

12 4.1 Aufbau Bevor Sie sich in die Personalisierung der App stürzen, empfehlen wir dringend einige Minuten mit dem Überfliegen der Ionic-Unterlagen zu verbringen. Das wird Ihnen einen guten Eindruck über die grundlegende Funktionsweise und die Einsatzmöglichkeiten von TOMAT vermitteln. Für das meiste Ihrer Personalisierung sollte Sie nur der Ordner App interessieren, welcher die HTML, CSS und Javascript der App enthält. Die verschiedenen Ordernamen sollten für sich sprechen, doch für dokumentarische Zwecke ist hier eine kurze Erklärung: der Ordner Assests enthält less -Dateien (die CSS generieren). Der Ordner fonts enthält die Schriftzeichen-Dateien, die Sie in der App nutzen. Der Ordner I18n enthält die Internationalisierungsdatei für Ihre App. In image finden Sie die in der App verwendeten Bilder. Der Ordner scripts beinhaltet alle Javascript Dateien, die die App definieren. Insbesondere beinhaltet er zwei sehr interessante Dateien mit den Namen config.js und routes.js, auf die wir später noch einmal zurückkommen. Der Ordner styles enthält die zusammengestellten CSS-Dateien. Diese sollten Sie nicht bearbeiten, es sei denn Sie haben less compilation für Testzwecke deaktiviert (Änderungen werden überschrieben). Und zuletzt, der Ordner templates beinhaltet alle HTML-Dateien der App. 4.2 Konfiguration Die Konfiguration der App wird hauptsächlich in der Datei config.js dokumentiert. Diese Datei wird die Liste aller Sehenswürdigkeiten, den URL des TOMAT-Servers auf den die App zugreift und das Nachrichtenverzeichnis enthalten, die die App anzeigen kann. Die HTML-Datei dient dazu, verschiedene Arten von Sehenswürdigkeiten anzuzeigen. Außer den URL des TOMAT-Servers, welcher zuerst für Testzwecke bearbeitet werden sollte, und dem Produktionsserver, sollten Sie die anderen Daten unberührt lassen. Nachdem sie einen neuen Sehenswürdigkeit-Typ hinzugefügt haben, sollten Sie diesen zur config_poi-liste mit der jeweiligen Adresse des Verzeichnisses hinzufügen. Die anderen Konfigurationsoptionen sollten Sie nur im Falle einer Entwicklung benutzen. 09 June /17

13 4.3 Personalisierung Für die Personalisierung der App sind hauptsächlich zwei Dateien notwendig: Die Dateien im Ordner assets/less, die genutzt werden um die CSS der App zu bearbeiten. Wir raten Ihnen dringend dazu die App im Web-Modus zu testen um die Änderungen in Echtzeit verfolgen zu können. Die HTML im Order templates. Die Hauptnavigationsseiten für die App befinden sich in root und die Vorlagen für die einzelnen Sehenswürdigkeiten in einem Unterordner. Die Datei bedient sich einiger Ionic-Komponenten, es kann also sein, dass Sie ein wenig herumexperimentieren müssen um den Look&Feel zu erhalten, den Sie anstreben. Wenn es um CSS geht, empfehlen wir dringend das Testen im Web-Modus. 4.4 Entwicklung (nur für fortgeschrittene Nutzung) Die Ursprungscodes für die verschiedenen Plugins können im Pluginverzeichnis gefunden und bearbeitet werden. Das erlaubt Ihnen auf die APIs des Telefons im Ursprungslevel zuzugreifen, abhängig von der Funktion, die Sie hinzufügen oder bearbeiten wollen. Weitere Informationen über Plugin-Wartung und Entwicklung finden Sie im Phonegap/Cordova-Handbuch. 09 June /17

14 5 Mobile Funktionen In diesem Teil werfen wir einen Blick auf die bestehenden Mobile-Funktionen von TOMAT und wie man diese nutzt. Nochmals, einige Abschnitte setzen gewisse Kenntnisse bezüglich Web- und Mobile- Entwicklung voraus. 5.1 Geolokation und Karten Dies ist eine Grundfunktion von TOMAT; jede Sehenswürdigkeit wird automatisch lokalisiert, sofern man es nicht anders festlegt. Die relevanten Vorlagen finden Sie im Order POI der Web-App, obwohl für die meisten Zwecke die Voreinstellungen genügen sollten. 09 June /17

15 5.2 Filter TOMAT enthält ein erweitertes Filtersystem, das zum Durchsuchen der Sehenswürdigkeiten genutzt werden kann. Falls Sie diese Filter individuell anpassen oder modifizieren wollen, finden Sie die relevanten Dateien in dem Verzeichnis /<poi-name>/filter.html und in der Javascript- Datei list.js. 5.3 Soziale Netzwerke und Sharing Soziale Netzwerk-und Sharing-Funktionen sind standardmäßig in der App aktiviert. Falls Sie die Funktionen deaktivieren wollen, müssen Sie nur den share -Button aus den relevanten Vorlagen zu entfernen. Die Nachrichten und Inhalte können direkt in der Datei config.js bearbeitet werden. 09 June /17

16 5.4 Nutzerdaten und Offlinemodus Zu den Grundfunktionen von TOMAT zählt unter anderem, dass jeder Nutzer einen Account erstellen kann, was ihm/ihr ermöglicht Favoriten und Nutzerdaten zu verwalten und außerdem eine Liste der persönlichen Daten aller Nutzer bereitstellt. Eine weitere Grundfunktion ist das lokale Speichern von allen Daten. Dies gewährleistet, dass die App auch genutzt werden kann, wenn keine Internetverbindung besteht. Offline-Daten können jederzeit mit einem Klick aktualisiert werden, sobald eine Interverbindung vorliegt. 5.5 Push Um push zu aktivieren, müssen Sie TOMAT die IDs für Ihre push -Accounts der verschiedenen Anbieter bereitstellen. Sie können außerdem die «push»-bezeichnungen nutzen um andere Daten in Ihre Nutzerbasis zu verschieben. Bitte beachten Sie, dass push immer noch als sehr aufdringliche Funktion gesehen wird, die man nicht zu oft verwenden sollte. 5.6 QR Codes Mit Hilfe eines einfachen Plugins kann ein QR Code Scanner überall in der App genutzt werden. Die so erhaltenen Daten können zum Beispiel für das Erstellen einer individuell angepassten Navigationsseite benutzt werden. 09 June /17

17 09 June /17