Author

Christoph, Jan

ModellierungVeranstaltung

MID Workshop, UML Modellierung

by Christoph, Jan
written by Christoph, Jan

Am Freitag, dem 22.11.2019 fand der Workshop zum Thema UML Modellierung an der Hochschule Pforzheim statt. Geleitet wurde dieser von Andreas Ditze, der von Herrn Prof. Dr. Schuster unterstützt wurde. Andreas Ditze ist Managing Director der MID GmbH und startete pünktlich um 9:45 mit einer Einführung in seine Leidenschaft, die Modellierung.

Nach anschließender Vorstellung seiner Firma und ihrer Software, dem Innovator, startete der praktische Teil der Veranstaltung. Die Studenten wurden in Gruppen eingeteilt und durften sich einen Anwendungsfall überlegen.  Diese Anwendungsfälle wurden dann durch die Gruppen analysiert und mit Hilfe verschiedener Diagramm Arten modelliert.

Jede Gruppe erhielt darauffolgend Feedback zu ihrem Anwendungsfall und deren Modellierungen sowie konstruktive Kritik. So konnten viele Fehler geklärt und beseitigt werden und die Studenten ein besseres Verständnis für das Thema UML und der zugehörigen Modellierung entwickeln.

Abschließend gaben die Teilnehmer ihr Feedback zur Veranstaltung ab.
Für diesen Beitrag standen Melanie Stitzl und Jennifer Gerhardt für ein kurzes Interview bereit.

Was habt ihr im heutigen Workshop gelernt im Bezug auf Modellierung?
Nachdem die meisten Grundlagen vorab bereits bekannt waren, haben wir unter anderem gelernt auf welche speziellen Regeln geachtet werden muss. Ein weiterer wichtiger Punkt war zu verinnerlichen, was wir an unserem Denkprozess verbessern können, um hochwertigere Diagramme und Prozesse zu erstellen.

Was fandet ihr am heutigen Workshop gut?
Super am Workshop war zusätzlich, dass auf jedes Team gezielt und einzeln eingegangen wurde und deshalb keine Fragen offen blieben. Das dennoch kritisches und konstruktives Feedback gegeben wurde und der gesamte Workshop hauptsächlich praktisch ablief und nicht wie eine klassische Vorlesung.

Gab es auch Punkte die ihr gerne verbessert sehen würdet?
Da wir in der letzten Reihe saßen, war es kaum möglich den Zeichnungen von Herrn Ditze am Flipchart zu folgen. Hierfür könnte man z.B. einfach das Paint Programm am Computer nutzen.

0 comment
Veranstaltung

futureLAB auf Reisen: Mit Laura the app auf der Websummit 2019 in Lissabon

by Christoph, Jan
written by Christoph, Jan

Nachdem erfolgreichen präsentieren der Anwendungen (Laura the app) auf dem deutschen Maschinenbaugipfel in Berlin am 15. und 16.10., ging es Anfang November nach Lissabon zur diesjährigen Websummit. An dieser Stelle vielen Dank an Baden-Württemberg International, die dies erst ermöglicht haben.

websummit

Die Websummit wird als eine der größten Messe für Technologien bezeichnet. Sie zieht nicht nur Massen an Menschen an, sondern es tummeln sich dort auch alle führende IT Firmen sowie andere große Unternehmen wie z.B. VW, Porsche und Siemens. Es gab viel zu sehen und viele interessante Gespräche auf der Suche nach Kooperationspartnern und Investoren.

Anbei sind einige Eindrücke der Messe und des Maschinenbaugipfels festgehalten.

0 comment
big_data
Künstliche Intelligenz

Data-Science-Projekt bei Asseco-Kunde: Studenten analysieren Maschinendaten

by Christoph, Jan
written by Christoph, Jan

Welche Konstellationen von Maschinendaten sind für Störungen und Ausfälle einer Anlage typisch?
Und wie lassen sich mit diesem Wissen zukünftige Probleme vorhersagen?

Dies sind Fragen, die häufig im Kontext der vorausschauenden Wartung („Predictive Maintenance“) fallen. Im Rahmen eines Forschungsprojektes am futureLAB untersuchten  Studenten des Bachelor-Studiengangs Wirtschaftsinformatik, Management und IT und ERP-Spezialisten der Firma Asseco Solutions Datensätze eines Asseco-Kunden aus der Aluminiumdruckguss-Branche.

Große Datenmengen die ohne Kontext erfasst werden sind nicht unmittelbar zu nutzen.  Nachdem der Aludruckguss-Spezialist dies realisierte stellte er seine Datensätze dem Hochschulprojekt zur Verfügung.

big_data

Studenten identifizieren fehlertypische Parameterkonstellationen

Im Zentrum des Data-Science-Projekts, das von Prof. Dr. Joachim Schuler sowie Prof. Dr. Thomas Schuster von der Hochschule Pforzheim initiiert worden war, stand das Ziel, die bestehenden Datensätze auszuwerten und so aufzubereiten, dass nutzbare Erkenntnisse daraus abgeleitet werden können. Hierfür analysierte eine Gruppe von neun Studenten die Betriebsdaten zweier Aludruckgussmaschinen und entwickelte eine Methodik. Die Studenten dokumentierten Fehler wie Lufteinschlüsse, unvollständige Ausfüllung der Gussform oder ungenügendes Aushärten des Aluminiums mit den zugehörigen Schussparametern zu synchronisieren. Das Ergebnis war die Identifizierung und Zuordnung von charakteristische Parameterkonstellationen der knapp 30 Fehlertypen.

Grundlage für KI-Analyse geschaffen

Durch ihre Arbeit haben die Studenten die Grundlage für die Realisierung eines geplanten KI-Systems zur Erkennung von Anomalien geschaffen. So nutzen die KI-Experten der Asseco Solutions die identifizierten Parameterkonstellationen aktuell als Trainingsdaten für ein neuronales KI-Netz. Nach erfolgreichen Training soll dieses Netz in der Lage sein, analog zu den bekannten Mustern weitere, bislang unbekannte kritische Parameterkonstellationen zu entdecken. Indem künftig überwacht wird, ob sich Parameter ungewöhnlich entwickeln und einem kritischen Fehlermuster annähern, soll es möglich werden, sowohl Stillstände als auch Ausschussware vorherzusagen und deutlich zu reduzieren.

ki

 

Den ausführlichen Artikel findet ihr hier

0 comment
ModellierungVeranstaltung

MID Workshop zum Thema UML, Modellierung und Versionierung

by Christoph, Jan
written by Christoph, Jan

In Kooperation mit dem futureLAB und Andreas Ditze findet am 22. November 2019 ein Workshop zum Thema UML, Modellierung und Versionierung statt. Mit Hilfe des MID Innovators wird in der Veranstaltung die Modellierung verschiedener Diagrammarten behandelt. Der Workshop findet in Raum W2.2.12 (Gebäude W2 der Hochschule) statt. Der drei Vorlesungsblöcke dauernde Workshop beginnt um 9:45 Uhr. Zur Teilnahme an der Veranstaltung ist eine Anmeldung vorab erforderlich:

Zur Anmeldung

Zur Person

Andreas Ditze

Managing Director

MID GmbH

Auf dieser Veranstaltung werden Bild- und Tonaufnahmen angefertigt. Mit der Anmeldung erklärt der Veranstaltungsteilnehmer sein Einverständnis zu Bild-­ und Tonaufnahmen sowie zur Verwendung und Veröffentlichung der Aufnahmen zum Zwecke der öffentlichen Berichterstattung oder die Bewerbung des Leistungsangebotes der Veranstalter, einschließlich auf Websites und in sozialen Medien.
0 comment
mobilitaet
Allgemein

Team-Mobility stellt Ride-Sharing-App der Hochschule vor

by Christoph, Jan
written by Christoph, Jan

R2R – Ready to Ride?

Am 10.10.2019 findet an der Hochschule Pforzheim die Vorstellung des Forschungsprojekts RideShare (vorläufiger Name), im Zuge des Möbilitätstags statt.

RideSharing App für die Hochschule 

Viele Studierende kennen das: Anreise und vor allem die Parksituation der Hochschule Pforzheim sind schwierig. Die Anbindung durch den ÖPNV ist ausbaufähig und die Parkplätze oft so voll, dass viele Studierende in den nachbarschaftlichen Wohngebieten oder am Tierpark parken. Aus diesem Grund hatte das Forschungsprojekt SeilbahnPF das Ziel diese Situation durch neuartige Konzepte und Angebote zu verbessern. Dabei wurde in den vergangenen Monaten kräftig an der Entwicklung einer hochschuleigenen RideShare-Anwendung gebaut. 

mobilitaetDas Entwickler Team stellt sich vor 

Das Team kümmert sich um die Konzeption, Entwicklung und Veröffentlichung des Ridesharing–Prototypen, der in diesem Wintersemester seinen Testbetrieb aufnimmt. Aktuell sind Moritz, Jan, Nico, Vladislav und David kräftig dabei die Anwendung für Euch fertig zu bauen und bereitzustellen. 

rideshare_team

 

App Technologie 

Wir setzen auf modernste Technologie und sparen und die App-Stores. Warum? Der Kontrolle der großen Informationskonzerne wollen wir uns für eine interne Anwendung der Hochschule nicht unterwerfen.  

Nebeneffekt? Eine hochmoderne Anwendung, eine sogenannte Progressive Web App (PWA). Diese kann jeder einfach über seinen Browser und eine URL starten. Wer es mag, zieht die Anwendung dann auf den Desktop und alles scheint so als ob ihr es aus dem App-Store installiert hätte. 

Um eine benutzerfreundliche, moderne Web Anwendung zu entwickeln haben wir uns dabei OpenSource Technologien fokussiert und für den Einsatz der folgenden Technologien entschieden: 

  • ReactJS 
  • NodeJS 
  • Keycloak 
  • RabbitMQ
  • MongoDB 

Aktueller Stand 

Wir wollen Euch die App ganz regulär im kommenden Sommersemester anbieten. Dazu sind natürlich noch ein paar Vorbereitungen notwendig. Die ersten Hürden wurde bereits gemeistert und die heiße Open Beta Testphase für unsere App steht an, deshalb suchen WIR EUCH!!! 
Einige Early Adopter sind bereits an den Start gegangen. Helft uns (der Umwelt und der Parkplatzsituation) und unterstützt das Testen indem Ihr Fahrten mit Hilfe unserer Anwendung anbietet oder bucht. 

MELDET EUCH HIERFÜR BEI JAN!
jan.christoph@hs-pforzheim.de 

Die Testversion der App ist unter folgendem Link zu finden (Am besten mit dem Smartphone nutzen und zum Startbildschirm hinzufügen, dazu einfach rechts oben auf die 3 Menüpunkte gehen und zum Startbildschirm hinzufügen auswählen):

https://mobility.hs-pforzheim.de

 

 

 

0 comment
Allgemein

AR: Wikitude und Google Maps in Oracle JET

by Christoph, Jan
written by Christoph, Jan

Dieser Blogbeitrag widmet sich dem Thema Augmented Reality im Kontext der Entwicklung von Crossplattfom Applikationen. Am 16.05.2019 findet zum Thema Oracle JET ein Workshop an der Hochschule Pforzheim statt, an dem Sie kostenfrei teilnehmen können.
Weitere Information und die Anmeldung ist hier zu finden.

Die Voraussetzungen und eine Schritt-für-Schritt Anleitung um die Anwendung zu erstellen sind folgende:

Oracle Jet Setup für hybride App-Entwicklung

Nachfolgend werden die Installationsschritte beschrieben, die zur Entwicklung hybrider Apps mit Hilfe von Oracle Jet als Voraussetzung erforderlich sind. Diese können auch direkt in der Oracle Jet Dokumentation nachgelesen werden (siehe hier)

Gemeinsam gehen wir die Schritt durch und zeigen ergänzend zur Oracle Jet Dokumentation  einige Screenshots, welche die Einstellungen für unerfahrene Entwickler erleichtern sollen.

Hybride App-Entwicklung unter Windows 10

Benötigt werden die folgenden Software-Komponenten:

  • Node.js
  • Apache Cordova
  • Android Development Tools

 

Node.js

  1. Auf https://nodejs.org/en/download/ die aktuelle Version herunterladen. Benutzen Sie:
    1. Eine stabile Version (stable) und
    2. Den Windows Installer.
    3. Installieren Sie die Komponente nach dem Herunterladen.
  2. Sie müssen nun noch Ihre Umgebungsvariablen für die Verwendung von npm(node package manager) einrichten. Der Paket-Manager von Node.js ermöglicht es Ihnen danach Bibliotheken zu installieren, die wird zum Beispiel zur Installation von Oracle Jet genutzt.
  3. Drücken Sie die Windows-Taste und suchen Sie nach „Umgebungsvariablen“ 
1

Wählen Sie Systemumgebungsvariablen bearbeiten und klicken Sie anschließend auf Umgebungsvariablen.

2

4. Klicken Sie auf die Schaltfläche im roten Kreis und wählen Sie den Pfad (grüner Kreis, siehe Bild unten)

3

5. Klicken Sie auf Text bearbeiten (blauer Kreis im nachfolgenden Bild) und geben Sie ihren Pfad zu node.js an. In meinem Falle ist dies: C:\Users\jan.christoph\AppData\Roaming\npm

Für Windows 7 kann es nötig sein einen zweiten Pfad anzugeben, den Installationsordner von node.js: 
C:\Program Files\nodejs 

4

ob node korrekt installiert ist. Öffnen Sie die Konsole (Windows-Taste drücken und „cmd“ eingeben) und verwenden Sie die folgenden Befehle:

node -v 

npm -v 

Die Ausgabe sollte folgender ähneln

5

Java SDK

6. Der nächste Schritt ist die Installation der java sdk, die für die Entwicklung der App für Android benötigt wird.
https://www.oracle.com/technetwork/java/javase/downloads/jdk11-downloads-5066655.htmlnutzen Sie diesen Link und akzeptieren Sie das license agreement (der gelbe Kreis im nachfolgenden Bild)

Denken Sie daran, dass Sie keine Anwendungen für iOS unter Windows entwickeln können!!! 

6

und laden Sie die für Ihr System passende Version (64 Bit oder 32 Bit; das finden Sie mit einem Rechtsklick auf Ihr Windows-Symbol in der Taskleiste  –> “System”) herunter.

7

7. Außerdem müssen Sie die Umgebungsvariable JAVA_HOME, wie in der folgenden Abbildung gezeigt einstellen.

8

Um zu prüfe, ob alles korrekt eingerichtet ist führen Sie folgenden Befehl aus:
java -version 

Die Ausgabe sollte folgender ähneln:

9

Android Studio und Android SDK

8. Installieren Sie Android Studio von https://developer.android.com/studio/und folgen Sie den dort angegebenen Anweisungen

9. Nach der Installation gehen Sie zum SDK Manager im Android Studio (siehe Bild unten, rosa Kreis).

10

10. Hier müssen Sie die gewünschten SDK-Plattformen und SDK-Tools installieren und aktualisieren. Es sollte dann ungefähr wie das folgende Bild aussehen:

11

Sie müssen auch den Systemvariablenpfad um den Pfad Ihres Android SDK erweitern (ähnlich wie zuvor bei node.js). Der Pfad für die Android SDK sollte in etwa so aussehen: C:\Users\user.name\AppData\Local\Android\Sdk

Android

Um Ihr Android-Handy zum Testen und App-Bereitstellung zu nutzen, müssen Sie die Entwickleroptionen aktivieren. Dazu müssen Sie in die Einstellungen Ihres Smartphones gehen, die Informationen dazu finden und die build number 7 mal drücken, wie im Bild unten gezeigt:

12

Einige Android-Versionen erfordern möglicherweise unterschiedliche Aktionen (bitte suchen Sie online danach, wenn die oben genannte Methode nicht funktioniert).

Git Installation

Git wird für die Versionskontrolle Ihres Codes verwendet. und sollte immer genutzt werden. Zum Download verfügbar ist es hier:

https://git-scm.com/downloads

Sie können überprüfen, ob Git installiert wurde, indem Sie den folgenden Befehl auf Ihrer Kommandozeile ausführen:

git –version

Wenn Git richtig installiert ist, sehen Sie so etwas wie:

13

Installation von Git benötigen, finden Sie eine hilfreiche Anleitung unter:

https://www.linode.com/docs/development/version-control/how-to-install-git-on-linux-mac-and-windows/

Cordova

Nutzen Sie folgenden Befehl, um Cordova zu installieren:
npm install -g cordova

npm install -g cordova@latest um cordova upzudaten und

cordova –version um zu prüfen, ob die richtige Version installiert wurde.

Mac OS Mojave

XCode

-Installieren Sie XCode aus dem App Store

-Installieren Sie anschließend die Befehlszeilen-Tools von XCode auf dem Terminal mit folgendem Befehl:

xcode-select –install

Wenn bei der Installation der Tools ein Fehler auftritt, sind diese möglicherweise bereits auf Ihrem Gerät installiert!

Node.js and npm

Um den node zu installieren, finden Sie die neueste stable Version unter:
https://nodejs.org/en/download/

Im Terminal, können Sie mit folgenden Befehlen überprüfen, ob alles korrekt konfiguriert ist: node -vand npm -v

Cordova

Um Cordova unter Mac OS zu installieren, können Sie einen weiteren Befehl in Ihrem Terminal ausführen. Dies wird durch den Aufruf erreicht:
sudo npm install –g cordova ionic

Apple ID (Developer Registration)

Registrieren Sie Ihre Apple-ID als Entwickler in Xcode oder erstellen Sie zuerst eine, wenn Sie noch nicht hier sind:

https://developer.apple.com/register/

In Xcode gehen Sie dann zu Einstellungen/Konten und geben Sie Ihre Zugangsdaten ein.

14

iPhone

Wenn Sie Ihr iPhone an Ihren Mac anschließen und alles korrekt eingerichtet ist, wird es automatisch als Entwicklergerät registriert.

 

Integrated Development Environment (IDE)

Da Oracle JET JavaScript, HTML und CSS verwendet, ist die Auswahl der IDE recht einfach, da die meisten IDEs und sogar einfache Texteditoren die Entwicklung mit diesen Webstandards unterstützen. Hier ist eine kleine Liste von Editoren und IDEs, aus denen Sie auswählen können, mit denen Sie entwickeln möchten:

  • Visual Studio Code
  • Netbeans
  • WebStorm
  • Atom

Additional Installation Guides

Android Studio:

https://www.wikihow.tech/Set-up-an-Android-Development-Environment

Xcode:

https://developer.apple.com/xcode/

Oracle Jet installieren

Um Oracle JET nutzen zu können, muss dies erst installiert werden. Dies gelingt mit folgendem Befehl für die Kommandozeile:

npm -g install ojet-cli

 

Erstellen einer hybriden App

Um die gewünschte App zu installieren nutzen wir ein Template. Genauere Informationen des gesamten Prozesses gibt es unter folgendem Link:

https://docs.oracle.com/middleware/jet410/jet/developer/GUID-C75CD8DC-5084-4831-BE1A-FFEE4EA8600C.htm#GUID-76BEF40D-4C41-4B7D-A038-63CC28023D7A

Wir nutzen das ein Template (NavBar), das von Oracle Jet bereitgestellt  und erstellen die hybride App mit folgendem Befehl:

ojet create MySampleApp –hybrid –appname=“Sample NavBar“ –template=navbar –platform=android

 

Erläuterungen: (weitere Details finden Sie auch in der obigen Dokumentation)

Befehlsbestandteil Erklärung
ojet create <Name> Erstellt ein neues Oracle JET Projekt
–hybrid Erstellt eine mobile App die Cordova nutzen kann
–appname=“<Name>“ Hier wird der Name des Projekts definiert
–template=<templateName> Es gibt mehrere verfügbare Templates, diese können in der offiziellen Dokumentation eingesehen werden
–platform=<platformName> Die Plattform-Optionen sind: android|ios|windows. Hierüber deklarieren wir, für welche Plattform die hybride Anwendung entwickelt werden soll.

App testen

ojet build android erlaubt uns die App zu bauen und mit ojet serve android –device lässt sie sich z.B. auf einem Android Testgerät starten.

ojet serve windows -–browser startet die Anwendung im Browser

 

Cordova Plugins

Allgemein können Sie Cordova Plugins in einem Jet Projekt installieren. Dazu öffnen Sie in ihrem Jet-Projekt den Ordner hybrid und weisen dann Cordova an, das Plugin hinzuzufügen:

cordova plugin add <plugin-name>

 

Nachdem das Plugin installiert wurde führen Sie außerem noch

 

cordova build

 

im Ordner hybrid aus. Erst danach ist die Installation abgeschlossen. Unter folgendem Link finden Sie alle bereits offiziell von Oracle getesteten Plugins:

https://www.oracle.com/webfolder/technetwork/jet/globalSupport-Plugins.html

 

Integration von Google Maps

Um die Position des Geräts zu erfassen, benötigt man das geolocation Plugin von Cordova. Um ein Cordova Plugin in einem Oracle Jet Projekt zu installieren, wechselt man in den Ordner hybrid und kann anschließend Cordova anweisen das Plugin zu installieren, auf der Kommandozeile geben Sie ein:

 

cd hybrid

cordova plugin add cordova-plugin-geolocation

 

Nachdem das Plugin installiert wurde führen Sie außerdem noch

 

cordova build 

 

im Ordner hybrid aus. Erst danach ist die Installation abgeschlossen.

Als nächstes ist es erforderlich folgende Zeile in die index.html am Ende des Head-Tags einzufügen:

<script src=“https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY“></script>

Um Google Maps nutzen zu können, benötigen Sie einen Google Maps API-Key. Diesen kann man unten folgendem Link einrichten:

https://developers.google.com/maps/documentation/javascript/get-api-key

Außerdem muss noch die Ausführung von externen Scripten aktiviert werden. Dazu kommentieren Sie Head-Tag der index.html noch folgende Zeile aus:

<meta http-equiv=“Content-Security-Policy“ content=“default-src *; script-src ’self‘ *.oracle.com ‚unsafe-inline‘ ‚unsafe-eval‘; style-src ’self‘ *.oracle.com ‚unsafe-inline‘; img-src * data:“>

(nur für Testzwecke geeignet!)

Damit die Geolocation-Informationen verarbeitet und im Modell aktualisiert werden können, fügen Sie noch folgenden Javascript Code in das ViewModel (js-Datei) ein, das zu der Seite gehört, in der die Google Map genutzt werden soll:

var options = {

enableHighAccuracy: true,

timeout: 5000,

maximumAge: 0

};

 

self.connected = function() {

//Get the current position with the help of the gps sensor

navigator.geolocation.getCurrentPosition(onSuccess, onError,options);

};

 

//After the location was catched successfully process with the onSuccess function

var onSuccess = function(position) {

//Save the latitude and longitude into variables

self.lat = position.coords.latitude;

self.lon = position.coords.longitude;

//Define a variable for the google maps position

var myLatLng = { lat: self.lat, lng: self.lon };

console.log(myLatLng);

createMap(myLatLng);

};

 

//When an error occured while fetching the location data notify the user

var onError = function(err) {

document.getElementById(‚modalDialog1‘).open();

//Set the location to the hs pforzheim coordinates

var myLatLng = { lat: 48.8789268, lng: 8.71788 };

console.log(„Error „+ err,myLatLng);

createMap(myLatLng);

};

 

var createMap = function(pos){

//Get the Map container of the HTML code

var element = document.getElementById(„googleMap“);

var map;

//Add the maps properties to a variable

var mapProp = {

center: pos,

zoom: 14,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

//Create a new map and hand it the previous collected data + add a marker at curren location

map = new google.maps.Map(element, mapProp);

var marker = new google.maps.Marker({

position: pos,

map: map

});

}

Die entsprechende HTML Datei benötigt noch folgenden Code, über den die Map dann anschließend dargestellt werden kann:

<div id=“googleMap“ style=“width:500px;height:380px;“>

Wikitude Dokumentation

Die Dokumentation von Wikitude ist sehr umfangreich, enthält viele Beispiele und Erläuterungen der Möglichkeiten sowie die nachfolgend beschriebene Integration über ein Cordova Plugin. Die Dokumentation ist hier zu finden:

https://www.wikitude.com/external/doc/documentation/latest/phonegap/setupguidecordovacli.html#setup-guide-cordova-cli

 

Integration des Wikitude Plugins

Man kann das Wikitude Cordova Plugin direkt auf der Wikitude-Seite herunterladen, siehe dazu:
https://www.wikitude.com/download-wikitude-sdk-for-cordova/

Das Plugin muss zur Benutzung mit einem Schlüssel (Serial Key) versehen werden. Für eine Anwendung kann man sich diesen kostenlos erstellen lassen. Dazu ist lediglich dieses Formular auszufüllen:

https://signup.wikitude.com/?download=CordovaDownloadButton

Der Schlüssel muss später im Wikitude Plugin eingetragen werden.

Schritt für Schritt Anleitung

1. Aus dem Basisordner der eigenen Anwendung in den Ordner

hybrid

wechseln. Nun lässt sich das Cordova Plugin im Projekt integrieren. Hierzu auf der Konsole folgendes eingeben:

cordova plugin add com.wikitude.phonegap.wikitudeplugin

Alternativ ist auch folgender Befehl möglich:

cordova plugin add https://github.com/Wikitude/wikitude-cordova-plugin.git

2. Nun die Datei:

/android/platform_www/plugins/com.wikitude.phonegap.WikitudePlugin/www/WikitudePlugin.js

anpassen, um den Wikitude Schlüssel einzutragen. Der Schlüssel wird in Zeile 14 (this._sdkKey) eingetragen.

3. Nachdem das Plugin installiert wurde

cordova build

im Ordner hybrid ausführen.

4. Unter https://github.com/Wikitude/wikitude-sdk-samplesfindet man einige Beispielanwendungen für das Framework. Um diese zu nutzen, erstellt man am besten einen neuen Ordner unterhalb des Verzeichnisses src und nennt diesen wikitude. Je nachdem, ob man einzelne Beispiele (etwa 03_MultipleTargets) oder alle ausprobieren möchte, kann man das gesamte Repository oder auch nur Teile davon herunterladen (oder mit git clone abrufen). Die Beispiele (Projekte) die man testen möchte kopiert man anschließend einfach in den soeben erstellten Ordner wikitude. Im oben genannten Repository ist außerdem die Datei js zu finden, diesesollte ebenfalls in das wikitude Verzeichnis eingefügt werden.

Der folgenden Beispiel-Code kann innerhalb des ControllerViewModels (js-Datei) eingefügt werden, um mit dem Plugin zu arbeiten, wobei die Zeile self.arExperienceUrl definiert welches Projekt genutzt werden soll (In diesem Fall das ImageTracking):

//Wikitude Setup

// Url/Path to the augmented reality experience you would like to load

self.arExperienceUrl = „assets/www/wikitude/01_ImageTracking_1_ImageOnTarget/index.html“;

 

// The features your augmented reality experience requires, only define the ones you really need

self.requiredFeatures = [„image_tracking“];

// Represents the device capability of launching augmented reality experiences with specific features

self.isDeviceSupported = false;

// Additional startup settings, for now the only setting available is camera_position (back|front)

self.startupConfiguration = {

„camera_position“: „back“,

„camera_resolution“: „auto“

};

// Application Constructor

self.initialiseWikitude = function () {

 

self.wikitudePlugin = cordova.require(„com.wikitude.phonegap.WikitudePlugin.WikitudePlugin“);

 

self.wikitudePlugin.isDeviceSupported(self.onDeviceSupported, self.onDeviceNotSupported, self.requiredFeatures);

};

 

// Callback if the device supports all required features

self.onDeviceSupported = function () {

console.log(„wikitude: onDeviceSupported“);

 

self.wikitudePlugin.loadARchitectWorld(

self.onARExperienceLoadedSuccessful,

self.onARExperienceLoadError,

self.arExperienceUrl,

self.requiredFeatures,

self.startupConfiguration

);

 

};

// Callback if the device does not support all required features

self.onDeviceNotSupported = function (errorMessage) {

alert(errorMessage);

console.log(„wikitude: onDeviceNotSupported“);

};

// Callback if your AR experience loaded successful

self.onARExperienceLoadedSuccessful = function (loadedURL) {

/* Respond to successful augmented reality experience loading if you need to */

console.log(„wikitude: onARExperienceLoadedSuccessful“);

};

5. In der entsprechenden HTML Datei in der Wikitude genutzt werden soll fügen Sie folgenden Code ein:

<div>

<button id=“button“ data-bind=“click: buttonClick, ojComponent: { component: ‚ojButton‘, label: ‚Launch AR Experience‘ }“>

Start AR

</button>

</div>

6. Im zugehörigen Javascript Code wird folgende Funktion beim klicken des Buttons aufgerufen:

self.buttonClick = function (data, event) {

app.initialiseWikitude();

return true;

};

7. Um die Funktionalität des Wikitude Plugins zu testen, kann man zum Beispiel Bilder im assetOrdner auswählen und diese dann augmentiert anzeigen lassen. Das Plugin kann auch (und das wäre für Ihr Projekt ebenfalls interessant) genutzt werden, um Bilder wieder zu erkennen.

Diese Anleitung wurde in folgender Umgebung durchgeführt:

 

Betriebssystem Win 10 Pro Version: 10.0.17134 Build 17134
Node.js v10.13.0
Cordova 9.0.0 (cordova-lib@9.0.1)
Oracle Jet 6.0.0

 

Als mobiles Endgerät wurde erfolgreich eingesetzt:

  • OnePlus 6

Um die Anwendung zu testen, ist es nötig das Bild des Surfers im Order:
wikitude-sdk-samples-master\01_ImageTracking_1_ImageOnTarget\assets

zu öffnen oder auszudrucken und dann anschließend mit der laufen App zu „scannen“.
Wenn alles richtig gemacht wurde, ist ein virtuelles Surfbrett neben dem Original zu sehen.

0 comment
laura_the_app
Wettbewerb

futureLAB beim Startup-BW: Laura the App

by Christoph, Jan
written by Christoph, Jan

Nachdem wir im vorletzten Blogeintrag das Startup Laura the App kennenlernen durften, wollten wir uns ihren Auftritt beim Start-up BW Elevator Pitch in Pforzheim nicht entgehen lassen. Der Pitchraum im Creative Space der Hochschule Pforzheim war bis zum letzten Platz mit Teilnehmern, möglichen Investoren, Schülern, Studenten, Professoren, dem Team des Start-up BWs und Interessierten gefüllt.

startup_bw_group

Das Team von Laura the App kam in voller Montur und war offensichtlich nicht nur gut ausgerüstet, sondern auch bereit für den Pitch. Ein riesiger orangefarbener Reisekoffer, beklebt mit allen Ländern, die Projektleiter Christian Mogck bereits bereist hat war mit dabei. Außerdem eine Präsentation und ein Werbevideo, die beide in Dauerschleife am Stand liefen sowie ein großer Bohrhammer und ein Arbeitshelm durften natürlich nicht fehlen.

startup_bw_stand

Im Arbeitsdress, wie auch auf der Baustelle an der Maschine wurde selbstverständlich präsentiert. Digitale Medien waren in diesem Pitchformat nicht erlaubt, deshalb wurde auf eine Weltkarte, verschiedene Werkzeuge und ein Spielzeughandy zurückgegriffen. Dies kam nicht nur beim Publikum, sondern auch bei der Jury gut an, die sich wie folgt zusammensetzte:

  • Daniel Kern, Volksbank Pforzheim:
  • Stefanie Pranjic, Sparkasse Pforzheim Calw
  • David Fischer, Robert SCHÜTT Witwe
  • Tim Dibjick, Membratech GmbH
  • Alexander Ruoff, Elektrotechnik A. Ruoff
startup_bw_chris

Nachdem die Jury sich ausführliche beraten hatte und die Ergebnisse bekanntgegeben wurden waren alle Teams gespannt wie sie abgeschnitten hatten.

Den ersten Platz konnte sich das Team von heat_it sichern.

Den zweiten Platz erreichte die Geschäftsidee Quicky24.

Der erfolgt blieb für das Team von Laura the App dennoch nicht aus, sie konnten sich gegen die restlichen Teams durchsetzen und erreichten damit einen soliden dritten Platz.

  • startup_bw_win2

Der am Anfang erwähnte Werbespot ist hier zu sehen:

Sonstige Informationen zu Laura the App

Homepage: https://lauratheapp.com/

Video Pitch Startup – The Future: https://youtu.be/s7vnIpWrH0M

Facebook: https://www.facebook.com/lauratheapp

Instagram: https://www.instagram.com/lauratheapp/

0 comment
laura_the_app
Allgemein

Laura the App – futureLAB unterstützt

by Christoph, Jan
written by Christoph, Jan

Was ist laura the app?

Auf der Homepage des Startups finden sich folgende Informationen:

„Hallo, ich bin Laura, deine persönliche Assistentin!

Mit momentan rund 29.000 Begriffen und 5.000 Bildern helfe ich Dir bei deiner täglichen Arbeit. Ich spreche Deutsch und Englisch, um Sprachbarrieren einfach und schnell zu umgehen.

Kostenlos und auch ohne Internet bin ich stets für Dich da, denn gemeinsam haben wir das im Griff!“

Demnach ist Laura the App eine kostenlose und schnelle Übersetzungshilfe mit Schwerpunkt auf technischen Gebieten, die aber auch alltägliche Situationen erfasst – und das Ganze funktioniert immer und überall auf deinem Smartphone.

An wen richtet sich laura the app bzw. wer ist die Zielgruppe?

Hierzu äußert sich Christian Mogck, Ideengeber und Projektleiter mit einem einfachen Problem aus der Praxis, dem er auf seinen Geschäftsreisen regelmäßig über den Weg läuft:

„Haben Sie schon einmal versucht in China, an der Grenze zur Mongolei oder in der Türkei an der syrischen Grenze, in einer Produktionshalle ohne Internet ein Abgleichpotentiometer zu organisieren?

-Nein?

Ich schon und meistens können die lokalen Fachkräfte weder englisch noch deutsch.

Sehen Sie und hier kommt Laura the App ins Spiel. Mit ihrer Hilfe können Sie das entsprechende Werkzeug oder den entsprechenden Begriff ihrem Gegenüber bildlich veranschaulichen.

Das spart nicht nur Ihre Nerven, sondern hilft auch Kosten zu reduzieren!“

 

Daraus kann man folglich einige Zielgruppen definieren:

  • Reisende Fachkräfte (Inbetriebnehmer, Mechaniker usw.)
  • Werkzeughersteller (laura the app macht Werbung vor Ort)
  • Industriefirmen die mit Maschinen, Maschinenteilen oder sonstigen Ersatz- bzw. Spezialteilen handeln

Seit wann läuft das Projekt und wie begann alles?

Die ist Idee ist auf einer Montagereise 2014 in Südamerika entstanden, als ich das oben bereits geschilderte Problem hatte und mir gedacht habe, dass es doch eine einfache Möglichkeit geben musste dies zu lösen. Zuerst nutzte ich eine Excel Liste. Da Bilder nekanntlicherweise mehr als 1000 Worte aussagen und zudem universell einsetzbar sind, musste etwas Anderes her. Also setzte ich mich 2016 mit Jan Christoph zusammen, der mich bei der Entwicklung eines Prototyps tatkräftig unterstützte. Seitdem ist das Team kontinuierlich gewachsen und die Idee hat sich langsam zu etwas Greifbaren entwickelt.

Gab es bereits Erfolge?

Ja, 2018 waren wir auf der Startup:CON in Köln und haben für Aufsehen gesorgt.

laura_startupcon

Kurz darauf belegten wir den 2. Platz beim Startup Live der VDMA und nominierten uns dadurch für die diesjährige Start Up – The Future

laura_best_idea

Beim Startup – The Future durften wir dann vor ausgewählten Unternehmern unsere Idee präsentieren und sind bereits mit möglichen Werbepartnern ins Gespräch gekommen. An dieser Stelle bedanken wir uns beim Startup – The Future-Team für die Nominierung und das ausgezeichnet organisierte Event.

laura_startup_thefuture

Der nächste große Schritt ist die Suche von Werbepartnern, Investoren und Kunden die eine spezielle Version unserer App für ihr Unternehmen nutzen möchten. Die Individualisierung von Laura the App auf eigene Maschinen, Werkzeuge und Ersatzteile ist dabei eines der künftigen Kernthemen, welches das Start Up anstrebt.

Schon bald steht ein weiteres Event in Form des Start-up BW Elevator Pitchs in Pforzheim an:

https://www.startupbw.de/wettbewerbe/elevatorpitch/wettbewerb/pforzheim1819/

Regional Cup Pforzheim/Nordschwarzwald

Donnerstag, 11. April 2019 | 14:00 Uhr
Creative Space der Hochschule Pforzheim (Raum G2.1.07)
Östliche Karl-Friedrich-Straße 24 | 75175 Pforzheim

Über ein Voting für unsere Idee (zu finden im Link oben) würde sich das Team von laura the app freuen.

Sonstige Informationen:

laura_team
Homepage: https://lauratheapp.com/
Video Pitch Startup – The Future: https://youtu.be/s7vnIpWrH0M
Facebook: https://www.facebook.com/lauratheapp
Instagram: https://www.instagram.com/lauratheapp/
Werbespot: https://www.youtube.com/watch?v=mnttleqrNkw

.

1 comment
futurelab
Allgemein

Beitragsreihe zu Web Komponenten: 1. Grundlagen

by Christoph, Jan
written by Christoph, Jan

Um was geht es in dieser Beitragsreihe?

Diese Blog Reihe widmet sich der Entwicklung von Web Komponenten.

Dazu beschreibt dieser Post die Grundlagen bei der Entwicklung der Web Komponenten, wie sie entstanden sind und welche Prinzipien zum Einsatz kommen.

Die folgenden Posts werden wir dann einzelne Web Technologien aufgreifen, mit deren Hilfe eine oder mehrere Web Komponenten erstellen und diese dann anschließend in verschiedene Web Technologien integrieren.

Komponentenorientierte Softwareentwicklung

Web Komponenten lassen sich auf die sogenannten Komponentenorientierte Softwareentwicklung (CBSE) zurückführen. Hierbei kann man folgende Definition, 2003 von Andersen geschrieben, betrachten:

„Eine Software-Komponente ist ein eigenständiges Artefakt eines Software-Systems, welche über spezifisches Wissen verfügt und gemäß ihrer Spezifikation über eine oder mehrere Schnittstellen mit anderen Software-Komponenten und -Systemen kommunizieren kann. Das Wissen einer Software-Komponente repräsentiert ein Konzept eines Geschäftsfeldes. Eine Komponente kann verpackt und unter Berücksichtigung eines Komponenten-Modells als autonome, wiederverwendbare Einheit verteilt werden.“ [1]

Aus dieser Definition lassen sich folgende Eigenschaften bildlich darstellen:

merkmalte_einer_komponente

Web Komponenten

Als Webkomponenten werden eine Reihe von Webplattform-APIs bezeichnet, mit welchen es möglich ist neue benutzerdefinierte, wiederverwendbare, gekapselte HTML-Tags für die Verwendung in Webseiten und Webanwendungen erstellen zu können. Sie basieren auf den Web-Component-Standards, funktionieren mit modernen Browsern und können mit jeder JavaScript-Bibliothek oder jedem Framework verwendet werden, das mit HTML arbeitet. Webkomponenten basieren auf bestehenden Webstandards. Funktionen zur Unterstützung von Webkomponenten werden derzeit zu den HTML- und Document Object Model (DOM)-Spezifikationen hinzugefügt, so dass Webentwickler HTML problemlos um neue Elemente mit gekapseltem Styling und benutzerdefiniertem Verhalten erweitern können.

Es existieren vier Hauptspezifikationen auf welchen Webkomponenten basieren, welche im folgenden Abschnitt erläutert sind [2].

Templates

Die HTML-Template-Element-Spezifikation ermöglicht es, Fragmente bzw. Markup-Vorlagen zu deklarieren, die beim Laden der Seite unbenutzt bleiben. Sie bilden die Grundlage für die Struktur eines benutzerdefinierten Elements, welches später zur Laufzeit instanziiert wird. Das zugehörige DOM-Interface ist HTMLTemplateElement [3-5].

Diese Elemente werden, wie im folgenden Codebeispiel zu sehen eingesetzt.

listing1

Shadow DOM

Die Shadow DOM ist eine API, welche die Möglichkeit bietet einen gekapselten „Schatten“-DOM-Baum an ein Element anzuhängen, welcher separat vom Hauptdokument DOM gerendert wird. Auf diese Weise können ist es möglich, die Eigenschaften eines Elements privat zu halten, so dass sie keine Auswirkungen auf den umgebenden Code haben. Das bedeutet z.B., dass CSS innerhalb eines Shadow DOM genutzt werden können, ohne Auswirkungen auf Elemente innerhalb der normalen DOM zu haben [5].

Um eine Shadow DOM anzuhängen, muss folgender Code, gezeigt in Listing 2, genutzt werden.

listing2

Anschließend beim Aufrufen von Listing 3,

listing3

wird Folgendes im Browser, der in Listing 4 gezeigte Code gerendert.

listing4

Custom Elements

Mithilfe von Custom Elements ist es möglich, neue Typen von DOM-Elementen zu definieren und zu verwenden. Ein Paar Grundregeln sind bei der Erstellung zu beachten:

  • Der Name des benutzerdefinierten Elements muss einen Bindestrich (-) enthalten. Dies ist notwendig, damit der HTML-Parser unterscheiden kann, ob es sich um ein benutzerdefiniertes Element oder ein eingebautes HTML-Element handelt.
  • Elemente die durch einen Benutzer erstellt wurden, können nur einmal registriert werden, da ansonsten ein DOMException-Fehler ausgelöst wird.
  • Benutzerdefinierte Elemente dürfen nicht selbstschließend sein.

Benutzerdefinierte Elemente sind mit der Browser-API-Methode customElements.define() und einer Klasse zu erstellen, die HTMLElemente in JavaScript, wie in Listing 5 zu sehen, erweitern [6].

listing5

HTML Imports

HTML Imports bieten die Möglichkeit HTML Dokumente sowie Custom Elements in anderen HTML Dokumenten wiederzuverwenden. Eine Implementierung kann, wie in Listing 6 dargestellt, aussehen [2,5].

listing6

Es werden folgende 5 Technologien betrachtet:

  • vue

Quellen:

[1]: A. Andresen, Komponentenbasierte Softwareentwicklung mit MDA, UML und XML, 1. Aufl. München: Hanser Fachbuch, 2003.

[2]: https://www.webcomponents.org/introduction

[3]: https://www.webcomponents.org/introduction#html-template

[4]: https://www.w3schools.com/tags/tag_template.asp

[5]: https://developer.mozilla.org/en-US/docs/Web/Web_Components

[6]: https://auth0.com/blog/web-components-how-to-craft-your-own-custom-components

0 comment
Allgemein

futureLAB auf Reisen: Smart City Days Pforzheim

by Christoph, Jan
written by Christoph, Jan

Am 28.11.2018 eröffnete Oberbürgermeister Peter Boch die ersten Smart City Days der Stadt Pforzheim im Innotec Gebäude. Die Smart City Days werden unter anderem unterstützt von:

  • dem neu gegründete Digitalisierungsbeirat,
  • der Wirtschaftsförderung Nordschwarzwald,
  • der Handwerkskammer,
  • der Industrie- und Handelskammer,
  • derMedien-/ IT-Initiative,
  • dem Hebel-Gymnasium Pforzheim,
  • Campus X,
  • dem Leo-Club und natürlich
  • der Hochschule Pforzheim.

Am 29.11. hat das futureLAB, im Zuge der Smart City Days, Prof. Dr. Thomas Schuster bei seinem Besuch am Hebel-Gymnasium begleitet.

Schüler des neuen Profilfachs IMP (Informatik Mathematik und Physik), der Klassen 10 und der Kursstufe 1 besuchten den Vortrag. Die Schulleitung (Bernhard Steger und Stefan Bäuerlein) eröffnete die Veranstaltung und begrüßten die ca. 140 Schüler und die restlichen Anwesenden. Anschließend erläuterte Kevin Lindauer (Netzwerk IT + Medien und Koordinator des neuen Digitalisierungsrates) das Konzept der Smart City Days. Anschließend waren natürlich alle auf den Vortrag von Prof. Dr. Thomas Schuster gespannt!

Was ist die Digitale Transformation?

Seinen 90-minütigen Vortrag startete Prof. Dr. Schuster mit der Frage: „Was ist die Digitale Transformation eigentlich“?

Jedenfalls besteht sie nicht nur aus dem begriff der Datenautobahn, welcher häufig in der Politik und den Medien zu hören ist, sondern lässt sich in 3 Stufen unterteilen:

IoT
  • Stufe 1 – Substitution
    Analoge Prozesse werden digitalisiert und optimiert
  • Stufe 2 – Erweiterung
    Neue digitale Ansätze (Prozesse, Produkte etc.) werden entwickelt, aber das Geschäftsmodell ist identisch
  • Stufe 3 – Durchbruch
    Neue Geschäftsmodelle und neue Märkte entstehen, die bisherige Geschäftsmodelle ergänzen oder ersetzen

Zahlreiche Firmen liefern gute Beispiele für dieses Modell, beispielweise Amazon:

  • Stufe 1: Buchhändler geht online – keine weitere Änderung am Geschäftsmodell.
  • Stufe 2: Digitale Erweiterungen, z.B. automatisierte Bücherempfehlungen (und später allgemein Produktempfehlungen) werden integriert.
  • Stufe 3: Andere, neuartige Produkte und Services werden verkauft und neue Märkte erschlossen (Amazon Prime oder Amazon Web Services kurz AWS).

Auf Stufe 3 beobachten wir heute viele Firmen mit neuartigen Ansätzen in unterschiedlichen Branchen (z.B. Netflix, Spotify, Uber, Didi, airbnb und viele weitere). Besonders durch diese Ansätze gibt natürlich auch den entgegengesetzten Fall (Disruption). Gut zu verdeutlichen lässt sich das beispielsweise an Kodak oder Nokia. Nokia entschied sich viel zu spät dazu auf den Touchscreen zu setzen und gefährdete damit die Existenz des gesamten Unternehmens. Seit 1998 war Nokia der weltgrößte und erfolgreichste Mobiltelefonhersteller. 2007 reagierte Nokia jedoch zu spät auf das iPhone und damit den Siegeszug der Smartphones, weshalb sie 2013 die gesamte Mobiltelefonsparte an Microsoft verkauften (und inzwischen wieder am Neustart arbeiten). Wichtiger Treiber der digitalen Transformation sind 3+1 Technologien:

  • Künstliche Intelligenz (KI)
  • Cloud-Computing
  • Internet of Things (IoT)

Nummer 4 ist Big Data, das hauptsächlich durch den Einsatz von Cloud Computing und IoT resultiert. Die Datenmengen und Informationen die wir produzieren steigen exponentiell und wir benötigen geeignete Methoden, um diese zu verarbeiten. Unter diesen geeigneten Methoden befindet sich auch der Einsatz von KI, wie z.B. IBM-Watson.

Wie wird unsere Zukunft aussehen?

ai

Künstliche Intelligenz wird uns nach und nach in verschiedenen Aspekten ablösen. In ca. 125 Jahren wird laut Vorhersagen die menschliche Arbeit komplett von Maschinen und Computern übernommen (siehe Bild). Auch andere Bereiche des Lebens werden betroffen sein, z.B. Mobilität durch autonomes Fahren, Sport durch verbesserte Analysen, Pflege und Gesundheit mit Hilfe von Sensoren und medizinischen Verbesserungen und selbst Kunst wird in Zukunft immer häufiger von künstlicher Intelligenz gefertigt.

Eines sollte man bedenken, je mehr Daten wir produzieren desto mehr geben wir von uns Preis. Es ist daher zu erwarten, das wir in Zukunft immer mehr mit und für unsere Privatsphäre bezahlen werden.

0 comment
react-native
Allgemein

Beitragsreihe zu Cross-Plattform: 5. React-Native

by Christoph, Jan
written by Christoph, Jan
react-native

Was ist React-Native – Wie entstand es?

React-Native ist ein von Facebook entwickeltes Open-Source-Framework auf Basis von React, womit native Android- und iOS-Apps vollständig in JavaScript entwickelt werden können. React wurde bereits 2013 veröffentlicht. Damit bietet React-Native eine Alternative zu HTML-basierten Cross-Platform-Frameworks.

Es werden keine Hybriden Apps gebaut wie mit Ionic/Cordova, deshalb ist die Performance besser und eine native Darstellung möglich.

Wie funktioniert React-Native und was bietet es?

React ist eine JavaScript-Bibliothek, um UI-Komponenten zu entwickeln. Es gibt zwei Varianten, mit deren Hilfe Komponenten gebaut werden können: „Funktionale Komponenten“ und „Klassen-Komponenten“.

Komponenten bei React-Native weisen eine ähnliche Struktur wie normale React-Komponenten auf. Der einzige Unterschied sind die verwendbaren Basis-Tags. Die Tags „<div>“ und „<p>“ z.B.  sind nur im Browser vorhanden. Auf nativen Plattformen ist jedoch kein HTML-DOM verfügbar.

Aus diesem Grund müssen die eigenen Komponenten aus anderen Grund-Komponenten hergestellt werden. Die beiden wichtigsten sind „View“ und „Text“.

Folgende Unternehmen setzen auf React-Native:

react-native-companies

Demo-App

In diesem Abschnitt wollen wir zusammen eine kleine Demo App entwickeln und ein paar native Funktionen einbinden.
Als IDE wird Atom von GitHub genutzt, da sie übersichtlich ist und sich sehr gut personalisieren lässt.
https://atom.io/
Eine weitere gute Wahl ist Visual Studio Code.
https://code.visualstudio.com/download

Voraussetzung ist die Installation von Node.js (https://nodejs.org/en/)

Danach sollte man Npm auf eine geeignete Version bringen (die neusten Versionen sind nicht immer kompatibel).

Danach muss npm install -g create-react-native-app  ausgesführt werden, um React Native zu installieren.

Zusätzlich sollte die Expo IDE und die Expo App auf dem Test Device installiert werden.

Mit dem Befehl: create-react-native-app AwesomeProject lässt sich das erste Projekt erstellen.

npm start startet das Projekt.

Alternativ kann man auch eine Start App via Expo IDE erstellen lassen. Hierbei ist zu beachten, dass es einige Funktionen gibt, die dann anders aufgerufen werden müssen.
Zusätzlich muss das projekt ejected werden, wenn man an bestimmen stellen auf die nativen Plattformen zugreifen möchte.

In der Abbildung Projekt-Struktur ist der Aufbau von React Native zu sehen:

  • tests_: Hier werden alle Tests integriert.
  • _universe: Einige Projekt Konfigurationen
  • .expo: Einstellungen der Expo IDE
  • git: Git Version Integration
  • api: Benötigt um die Verbindung mit der Expo IDE herzustellen
  • assets: Hier findet man alle Bilder und Icons (Hier können auch Fonts wie z.B. Font-Awesome eingebunden werden)
  • components: Ordner für diverse Komponenten
  • constants: Ordner für Konstanten z.B. für Farben, URL’s oder das Layout
  • navigation: App Navigation wird hier abgewickelt
  • node_modules: Ordner die alle node_modules enthalten
  • screens: Die einzelnen Seiten der App
  • App.js: Start Punkt der App
  • app.json: Konfiguration
  • package.json: Konfiguration

Unter: https://facebook.github.io/react-native/docs/getting-started.html lassen sich alle notwenigen Informationen rund um React Native finden.

Projekt Struktur

Clock

Da wir unsere Demo App mit Hilfe der Expo IDE erstellt haben und das Template Tabs gewählt haben, müssen wir lediglich, wie in der Abbildung tabs zu sehen, die Icons anpassen.

Die zugehörigen Icons bzw. values kann man wie schon bei Ionic ebenfalls von
https://ionicframework.com/docs/ionicons/ nehmen.

tab_icons

Ein großer Unterschied zu den meisten anderen Frameworks ist, das Logik, UI und auch das Styling der Seiten immer in ein und derselben File erledigt werden.
Der Übersicht halber sind die Bilder hier trotzdem in dieser Ordnung getrennt und beschrieben.

Im render() wird immer die UI bearbeitet. In diesem Fall nutzen wir eine ScrollView die als weitere Unterelemente diverse View Komponenten enthält.

time_ui

Die Konstante styles in Zusammenhang mit StyleSheet.create enthält alle nötigen Informationen zur Gestaltung der einzelnen Komponenten.

time_style

Im Logik Teil deklarieren wir Variablen als state für Stunden, Minuten und Sekunden.
Um die Uhr zum Laufen zu bringen, lassen wir die getTheTime Methode im ComponentDidMount in einer Schleife laufen, in dem wir sie jede Sekunde selbst neu aufrufen.
Die offizielle Dokumentation zu Typescript zum Nachschlagen findet ihr hier:
https://www.w3schools.com/js/js_date_methods.asp

time_logic

GPS

Im render() wird immer die UI bearbeitet. In diesem Fall nutzen wir eine ScrollView die als weitere Unterelemente diverse View Komponenten enthält.

location_ui

Die Konstante styles in Zusammenhang mit StyleSheet.create enthält alle nötigen Informationen zur Gestaltung der einzelnen Komponenten.

location_style

Im Gegensatz zu Ionic ist das Bestimmen der aktuellen Position mittels GPS bereits integriert und muss auch nicht im Konstruktor injected werden.

Nachdem die momentane Position mit navigator.geolocation.getCurrentPosition ausgelesen wurde, werden die Variablen im this.setState gesetzt, um ein Databinding zu ermöglichen.

location_logic

Kamera

Wenn die nötigen Berechtigungen vorliegen wird die View der Kamera erstellt. Falls keine Berechtigungen vorliegen wird das als Text angezeigt.

Um eigene Buttons zu erstellen wird TouchableOpacitiy benutzt. Weitere Informationen dazu findet ihr unter: https://facebook.github.io/react-native/docs/touchableopacity.html

camera_ui

Die Konstante styles in Zusammenhang mit StyleSheet.create enthält alle nötigen Informationen zur Gestaltung der einzelnen Komponenten.

camera_style

Zuerst müssen Kamera und Berechtigungen importiert werden. Im state legen wir fest, dass die Rückkamera genutzt werden soll. Im ComponentDidMount wird die nötige Berechtigung eingeholt und um ein Bild zu schießen greifen wir mit takePictureAsync() auf die Kamera zu.

camera_logic

Die Dokumentation zur Expo Kamera findet ihr unter:

https://docs.expo.io/versions/latest/sdk/camera.html

Außerdem gibt es gutes Tutorial zur Nutzung der Kamera unter:

Tutorial: https://github.com/expo/camerja

 

Hier findet ihr alle Screens der fertigen App.

  • Screenshot_20180220-101117
  • Screenshot_20180220-101153
  • Screenshot_20180220-101158

Das fertige Projekt findet ihr hier:

https://github.com/futureLABHsPforzheim/react_blog_prototype

Quellen:

0 comment
Ionic Framework
Cross-Plattform

Beitragsreihe zu Cross-Platform: 4. Ionic

by Christoph, Jan
written by Christoph, Jan
ionic

Allgemeines

Was ist Ionic – Wie entstand es?

Entwickelt wurde es im Jahr 2012 von Drifty. Das Gründerteam besteht aus Max Lynch und Ben Sperry, den Gründern von Drifty, sowie Adam Bradley. Im März 2014 unterstützte „Arthur Ventures“ Ionic mit einem Startkapital in Höhe von 1 Million Us-Dollar. Ende November 2013 erschien die Alpha-Veröffentlichung und am 7. Mai 2014 wurde die Ionic Version 1.0 Beta 4 veröffentlich, diese Version war bis zu diesem Zeitpunkt das größte Update. Kurz darauf, am 12. Mai 2015 wurde die Version v1.0.0 „uranium-unicorn freigegeben.

Ionic 2 wurde am 25. Januar 2017 freigegeben und stellte zu diesem Zeitpunkt auch von AngularJS auf Angular (Angular 2) um. In diesem Zuge erfolgte auch ein Umstieg von JavaScript zu TypeScript.

Die Version 3 des Frameworks erschien am 1. April 2017. Die größten Änderungen waren die Unterstützung von Angular 4 und den neusten TypeScript Versionen. Am 1. April 2017 erschien Version 3 des Frameworks. Dabei wurde auch die Versionsnummerierung geändert.

Wie funktioniert Ionic und was bietet es?

Ionic bietet die Möglichkeit Webapps, aber auch native Crossplatform-Apps zu entwickeln und stellt damit einen hybriden Einsatz dar. Ionic emuliert eine native App UI und benutzt hierzu native SDKs. Außerdem nutzt Ionic Cordova-Plugins, um plattformspezifische Funktionen zu nutzen. Das Framework ist frei als Open Source erhältlich, wobei der Hersteller auch für die Zukunft verspricht, das Produkt als Open-Source-Produkt zu vertreiben. Die Programmierung erfolgt mittels Angular, JavaScript bzw. TypeScript sowie HTML5. Mittels Angular ist es möglich UI-Komponenten mittels direktiven und verschiedenen Services zu nutzen. Im Bereich der Webentwicklung hat sich Angular bereits bewährt und ist durch eine hohe Nutzeranzahl gekennzeichnet, zumal es die HTML-Funktionen erweitert.

Das Ionic-Framework wird in über 200 Ländern von 5 Millionen Nutzern verwendet. Mit über 100 MeetUp-Groups sowie 32.200 GitHub-Sternen und 30.000 Fragen stellt Ionic eines der größten Communities im Bereich der Cross-Plattform-Entwicklung dar. Vertreten ist Ionic auf den Plattformen: Slack, Ionic Community Forum, StackOverflow sowie GitHub. Außerdem wird Ionic bereits von vielen namenhaften Firmen genutzt und gewürdigt.

Test App

In diesem Abschnitt wollen wir zusammen eine kleine Test App entwickeln und ein paar native Funktionen einbinden. Als IDE wird Atom von GitHub genutzt, da sie übersichtlich ist und sich sehr gut personalisieren lässt: https://atom.io/. Eine weitere gute Wahl ist Visual Studio Code: https://code.visualstudio.com/download. Voraussetzung ist die Installation von Node.js (https://nodejs.org/en/). Außerdem muss in der Console mit dem Befehl:

npm install -g ionic@latest

die neuste Ionic Version installiert werden. Der Befehl: ionic info zeigt, ob alle notwendige Komponenten verfügbar sind. Abbildung 1 zeigt euch, wie ihr ein neues Projekt mittels Ionic aufsetzen könnt. Zunächst navigiert ihr in das gewünschte Ablegeverzeichnis: z.B. cd C:\Users\jan.christoph\Documents\Ionic Im Anschluss könnt ihr das Projekt erstellen lassen:

console_start_app
Abbildung 1: Neues Projekt anlegen

In Abbildung 2 ist die Projektstruktur zu sehen:

  • .git:  Versions Kontrolle
  • node_modules: Hier sind alle installierten Module und Plugins zu finden (z.B. für die Kamera)
  • resources: Hier sind die Dateien für die angesprochenen Plattformen hinterlegt (hier Android und iOs)
  • src: Hier liegt der eigentliche Code der App (Für die Implementierung wird hauptsächlich hier gearbeitet)
  • app: Hier liegt die „Basis“. In app.modules.ts z.B. werden alle neuen Seiten, Provider, Services, Module und Plugins registriert. In der app.scss können globale Styles festgelegt werden und die app.component.ts ist der Startpunkt
  • Assets: Hier findet man alle Bilder und Icons (Hier können auch Fonts wie z.B. Font-Awesome eingebunden werden)
  • pages: Hier liegen die einzelnen Views (html, ts und scss file)
  • theme: Hier sind globale Variable festgelegt, z.B. Primäre und sekundäre Farben

In der index.html werden wie bei einer Homepage Scripts eingebunden und meta tags genutzt. Im manifest.json sind allgemeine Informationen zur App festgelegt (start url, app logo, usw.). In seltenen Fällen müssen auch die config.xml (für App name, Größe der Icons) und package.json (installierte module) bearbeitet werden. Nachdem die App erstellt wurde, muss in ihr Verzeichnis navigiert werden, um die Anwendung mittels ionic serve zu starten. Möchte man die App mit Cordova Plugins nutzen ist der Befehl ionic cordova run [<platform>] auszuführen. Als Plattform stehen ios, android, uwp und browser zur Verfügung. Um einen Emulator zu nutzen muss dieser vorher installiert werden, z.B. via Android Studio (AVD Manager). Die App wird automatisch auf dem laufenden Emulator deployed. JDK und JRE müssen installiert sein, um die Android Plattform zu nutzen, dazu müssen auch die Umgebungsvariablen entsprechend gesetzt sein. Weitere Optionen beim Ausführen der App sind unter https://ionicframework.com/docs/cli/cordova/run/ zu finden.

atom_folder_structure
Abbildung 2: Porjektordnerstruktur

Für die Generierung unserer Test App haben wir das Tabs Template genutzt, da wir eine App mit 3 Tabs erstellen möchten, die 3 unterschiedliche Funktionen anbietet. Der Startbildschirm dieser Basis-App ist in Abbildung 3 zu sehen.
Der erste Tab wird die aktuelle Systemzeit des Geräts anzeigen, der zweite Tab die aktuellen GPS Koordinaten und der letzte Tab wird eine Kamera und Galeriefunktion unterstützen. Außer dem Tabs-Template bietet Ionic weitere vorgefertigte Muster wie die blank App, sidenmenu App und super App, um sich alle Möglichkeiten anzeigen zu lassen, kann man den Konsolenbefehl: ionic start –list ausführen. Mehr Informationen erlangt ihr direkt unter der Ionic-Doku: https://ionicframework.com/docs/cli/start/

start_screen
Abbildung 3: Start Bildschirm

Systemuhrzeit

Für die Implementierung der Uhrzeit werden zunächst die Icons angepasst (siehe Abbildung 4). In der offiziellen Dokumentation von Ionic können alle verfügbaren Icons eingesehen werden: https://ionicframework.com/docs/ionicons/. Um unserer Uhr ein geeignetes Layout zu geben, bietet es sich an, ion-grid zu nutzen:

tabs_1
Abbildung 4: tabs.html_clock

In Abbildung 5 ist der zugehörige Code der html-Datei zu sehen. Erwähnenswert ist das Databinding, wie z.B. [(ngModel)]=“hours“. Dadurch wird sichergestellt, dass die UI Änderungen der Werte innerhalb der vergebenen Variablen erkennt und übernimmt. Weitere nützliche Informationen zu Databinding gibt es hier:
https://coursetro.com/posts/code/58/Angular-4-Property-Binding-Tutorial

clock_html
Abbildung 5: clock_html

In der scss File, siehe Abbildung 6, definieren wir die Darstellung von visuellen Elementen, wie z.B. align-content in ion-content, um die Uhr mittig auszurichten. Damit sie nicht am Bildschirmrand klebt, setzen wir einen margin. Außerdem legen wir im ion-input eine größere Schriftgröße fest. Weitere nützliche Informationen und Erklärungen bezüglich CSS, SASS und SCSS findet ihr hier: http://www.peterkropff.de/site/scss/scss.htm.

clock_scss
Abbildung 6: clock_scss

In der TS-Datei (Abbildung 7) deklarieren wir Variablen für die Stunden, Minuten und Sekunden.
Um die Uhr zum Laufen zu bringen, lassen wir die getTheTime Methode in einer Schleife laufen, in dem wir sie jede Sekunde selbst neu aufrufen.
Die offizielle Dokumentation zu Typescript findet ihr hier:
https://www.typescriptlang.org/docs/handbook/basic-types.html

clock_ts
Abbildung 7: clock_ts

GPS

Zuerst wird wie zuvor die tabs.html-File, wie in Abbildung 8 zu sehen, angepasst. Um GPS nutzen zu können müssen wir den Anweisungen unter: https://ionicframework.com/docs/native/geolocation/ folgen und das Cordova Plugin Geolocation in unser Projekt integrieren. Eine weitere Hilfe wie Plugins eingebunden werden findet ihr hier: https://ionicframework.com/docs/native/#Add_Plugins_to_Your_App_Module

tabs_2
Abbildung 8: tabs.html_gps

Um das Plugin nutzen zu können, muss es als Provider in der app.module.ts file eingetragen und aus dem entsprechenden module import werden.
Als nächstes bauen wir die Oberfläche in der zugehörigen html Datei (siehe Abbildung 9):

location_html
Abbildung 9: location.html

In der scss-File wird nicht viel geändert, wie in Abbildung 10 zu erkennen ist:

location_scss
Abbildung 10: location.scss

In der location.ts importieren wir die Geolocation und deklarieren die benötigten Variablen. Im Konstruktor wird die Geolocation injected und die getThePosition-Methode aufgerufen. Mehr Details zur Dependency Injection findet ihr unter: https://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html
Die getThePosition-Methode greift sich die aktuellen Koordinaten und rundet sie auf 2 Nachkommastellen, wie in Abbildung 11 zu sehen.

location_ts
Abbildung 11: location.ts

Kamera

Als erstes folgen wir den Anweisung unter: https://ionicframework.com/docs/native/camera/ und integrieren das Plugin, wie auch schon zuvor bei der Geolocation in unserer app.module.ts-Datei und fügen es als Provider hinzu.  Außerdem bearbeiten wir die tab.html erneut (Abbildung 12):

tabs_3

Im HTML Code nehmen wir ein Ionic Icon und fügen ihm ein click Event hinzu.
Außerdem wollen wir das Bild auch anzeigen lassen, dazu nehmen wir ein img-Element und verknüpfen die Bildpfad-Variable damit. Abbildung 13 veranschaulicht dies:

camera_html
Abbildung 13: camera.html

Im Stylesheet färben wir das Icon ein und zentrieren es, wie in Abbildung 14 gezeigt. Das Bild wird groß dargestellt:

camera_scss

In der Typescript-Datei importieren wir die Kamera, die Kameraoptionen und den Encoding-Typ (Base64ToGallery), welche wir dann im Konstruktor auch injecten. Wir definieren den Bild Pfad als Variable und auch die Kameraoptionen, zu sehen in Abbildung 15:

camera_ts_1
Abbildung 15: camera.ts_1

Wie in Abbildung 16 zu sehen erstellen wir eine addPic-Methode, in der wir mittels einem AlertController zuerst erfragen, ob ein Bild geschossen oder eines aus der Galerie angezeigt werden soll. Sobald das Bild erfolgreich aufgenommen wurde, erscheint eine Erfolgsbestätigung als Benachrichtigung.

camera_ts_2

Die saveImgToGallery-Methode ermöglicht eine persistente Speicherung der Bilder in der Gallery. Etwaige Fehler oder eine erfolgreiche Speicherung werden geloggt und lassen sich in der Konsole anzeigen:

camera_ts_3
Abbildung 17: camera.ts_3

Anbei findet ihr die fertigen Screens unserer Test App. Von links nach rechts seht ihr im ersten Screen den Kamera-Tab. Hierbei wurde bereits ein Foto aufgenommen und wird nun in der Oberfläche angezeigt. Im Zweiten Tab habe wir eine Anfrage der aktuellen Position gestartet und im letzten Tab wird die Systemzeit des Smartphones angezeigt.

  • screen_tab_3
  • screen_tab_2
  • screen_tab_1

Das fertige Projekt sowie den kompletten Quellcode findet ihr hier:

https://github.com/futureLABHsPforzheim/ionic_blog_prototype

0 comment
Newer Posts
Older Posts