Innerhalb des 3ten Semesters haben wir, die Masterklasse Mobile, die Aufgabe ein Gruppenprojekt umzusetzten. Zusammen wurde entschieden, dieses mit Flutter umzusetzen. Eine Flutter Library, welche verschiedene Sensoren auslesen kann und roh oder interpretiert zurückgibt.

https://github.com/hraschan/flutter_sensor_library

Außerdem haben wir uns hier entschieden, dass es eine “Beispiel App” dafür geben soll, die die Anwendung der Library präsentiert.

https://github.com/hraschan/flutter_sensor_library_app

Flutter

Da wir alle zuvor kaum bis gar keine Erfahrung mit Flutter gemacht haben, wurde von Mario und Maximilian ein Workshop vorbereitet, der uns die Grundlagen präsentiert hat und in welchem wir gemeinsam das Setup des Projekts durchführten.

Flutter an sich ist ein Open-Souce-Framework von Google, das zur Erstellung von nativ kompilierten Anwendungen verwendet wird. Bei Flutter gibt es viele Bibliotheken für Standard-UI-Elemente, die bei Android oder iOS benötigt werden. Für Desktop Webanwendungen kann das Framework auch eingesetzt werden.

Das Framework wird also primär für iOS und Android Applikationen verwendet. Für die Entwicklung wird die Programmiersprache “Dart” verwendet, diese wurde ebenfalls von Google entwicklet.

Was kann die Library

Die Library bietet verschiedene Klassen und Methodensammlungen an, um die Sensoren eines Mobilgeräts nutzen zu können. Dabei beruht sie bei den meisten Sensoren auf bereits vorhandenen Librarys, verarbeitet diese und gibt die Daten, wenn gewünscht, gesammelt an eine Flutter App weiter. Zudem bietet die Library auch interpretierte bzw. aus mehreren Sensoren zusammengefasste Daten, wie bspw. die Höhenmeter an, die aus dem aktuellen Luftdruck (Barometer) und dem Luftdruck auf Seehöhe ausgerechnet werden.

Aufgerufen kann die Funktionalität über gewisse Wrapper-Klassen, je nachdem ob Bewegungs-Daten (Movement), Positions-Daten (Position) oder Umgebungs-Daten (Environment) benötigt werden. Außerdem können die nativen Sensoren einzeln aufgerufen werden. Dabei muss immer angegeben werden, in welchem Zeitintervall die jeweilige Klasse Daten zurückliefern soll.

Movement mvmnt = Movement(inMillis: 2000);
mvmnt.getMovementType(true).forEach((element) {print(element.fwd);});

Mit diesem einfachen Code-Beispiel kann alle 2 Sekunden abgefragt werden, ob sich das Gerät in den letzten zwei Sekunden nach vorne bewegt hat. Mit der Übergabe des Boolean (in dem Fall true) kann festgelegt werden, ob die aktuelle Fortbewegung zum Zeitpunkt der Abfrage oder die interpolierten Daten seit der letzten Abfrage wiedergegeben werden sollen.

Die Bespielapplikation

Um die Andwendung der Library zu vereinfachen, wurde ein Beispielapplikation geschaffen, welche die einzelnen Verwendungszwecke zeigen soll. Hier einige Screenshots der Anwendung:

Personal Learnings

Armin

Mein Learning aus dem Gruppenprojekt ist die Einführung in Flutter. Ich habe mit diesem Framework zuvor noch keine Projekte umsetzen können. Ehrlichgesagt finde ich das Framework recht unübersichtlich und ich finde es gibt Frameworks, die um Einiges besser konzipiert sind als Flutter. Dennoch habe ich dieses Learning für die Zukunft mitnehmen können und da Flutter recht bekannt ist, ist auch diese Erfahrung von Wert.

Bettina

Für mich war Flutter vollkommenes Neuland. Bei diesem Projekt konnte ich hier einiges lernen. Von Projektstruktur über Codeaufbau, Widget Aufbau, Verwendung von Libraries sowie die Nutzung verschiedener Simulatoren.

Mario

Die Vertiefung der Kenntnisse in Flutter nach dem gemeinsamen Workshop mit Maximilian ist bestimmt ein großer Lernzugewinn. Die Nutzung der Sprache Dart ist doch etwas ungewohnt, obwohl sie sehr an JavaScript angelehnt ist. Außerdem konnte ich bei der Konzeption einer Library sehr viel dazulernen. Die Erarbeitung einer Library und die Vorstellung anderer Entwicklerinnen als Nutzerinnen des eigenen Programms stellt einen Lerneffekt dar, den man in anderen Projektkontexten so nicht hat.

Maxi

Für mich hat dieses Projekt vor allem einen tieferen Einblick in Flutter ermöglicht. Auch habe ich das aufbauen einer eigenen Library bis jetzt noch nicht in dieser Form kennengelernt. Ich denke jedoch das es noch einiger Zeit bedarf um gute Lösungen mit der Technologie Flutter entwickeln zu können

Thomas

Bis zum Workshop von Mario und Maxi kannte ich weder Flatter noch Dart. Durch den Workshop konnte ich mir ein gutes Grundwissen aneignen und anschließend im Rahmen des Projekts tiefer in die Materie einsteigen. Im Großen und Ganzen habe ich einen guten Überblick über Flutter, Dart und verschiedener Sensoren bekommen.

Sebastian

Die Zusammenarbeit mit Mario und Maxi während der Ausarbeitung des Backends hat mir einige neue Erkenntnisse gebracht. Sowohl mit Flutter als auch mit Dart hatte ich vor diesem Projekt wenig zu tun gehabt. Daher war es für mich sehr erkenntnisreich, ein Projekt umzusetzen, beziehungsweise daran beteiligt zu sein. Auch der Gedanke eine eigene Library zu erstellen war für mich interessant, da ich diesen Aspekt des Programmierens bis dato nur von der anderen Seite gekannt habe. Ich bin gespannt, ob die Library in irgendeiner Form einen späteren Verwendungszweck finden wird.

The post Sensor Library appeared first on Mobile USTP MKL.

Wir entschieden uns die klassische Fitnesstrackingapp in Richtung Physiotherapie zu erweitern. Mehr zu den Funktionen für Physiotherapeut:innen und dessen Patient:innen werden nachfolgend angeführt. Außerdem konnte unsere Idee die Jury des Creative Pre-Inkubators (CPI) überzeugen und wir wurden im Programm aufgenommen. Derzeit absolvieren wir den CPI mit der App Gymble und erweitern parallel die App.

Die App

Da Maximilian Hraschan und Armin Novacek die App gerne für ihre Masterarbeit verwenden wollten wurde die App um eine Idee reicher. Diese beschränkt sich nun nicht mehr nur auf den Bereich Fitness, sondern möchte auch in der Physiotherapie eine Veränderung bewirken. Somit teilt sich die App in zwei große Teilbereiche auf, einerseits den Fitnesspart, in dem es dem User möglich ist, sein Training zu tracken, den fortschritt einzusehen und sich mit anderen Fitnessbegeisterten zu verbinden. Im zweiten Bereich Physiotherapie soll den Patient:innen eine Therapie Übersicht gegeben werden und den Physiotherapeut:innen eine Administrative Plattform geboten werden. Details zu dem Tracking – und Statistikfunktion gibt es bereits in unseren letzten Beiträgen.  

Beitrag Maximilian Hraschan, Beitrag Armin Novacek

Netzwerk

Das Netzwerk ermöglicht User:innen sich mit anderen Nutzer:innen zu befreunden. Mit diesen Freund:innen können sie Trainingspläne, einzelne Trainings und Übungen teilen. Das Netzwerk dient zu Inspiration und schlägt User:innen beliebte Trainings vor. Neben den beliebtesten Trainings werden User:innen auch die Trainings ihrer Freund:innen gezeigt, welche runtergeladen werden können. Diese können einfach zur eigenen Trainingsroutine hinzugefügt werden. Dieser Bereich ist einerseits für fortgeschritten Kraftsportler:innen von Vorteil, da sie ihre Trainingsroutine abwechslungsreicher gestalten können und andererseits passend für Anfänger:innen, da diese ohne viel Vorerfahrung Zugang zu beliebten Trainings haben und dadurch ein erleichterter Einstieg garantiert ist.

Patienten

Für Patient:innen der Physiotherapie soll die App eine zusätzliche Stütze zur aktiven Therapie bieten. Die Patient:innen bekommen von ihrer persönlichen Physiotherapeut:in eine Therapie zugewiesen in der sich alle Übungen befinden die sie dann zu Hause erneut durchführen können. Eine extra dafür vorgesehene Seite führt die Patient:innen durch die Therapie, erklärt die einzelnen Übungen und ermöglicht es dem User nach jeder abgeschlossenen Übung ein Feedback zu dieser abzugeben. In der Übungsübersicht kann der Patient:in ein Video zu jeder Übung hinzufügen. Dieses kann gemeinsam mit der Physiotherapeut:inn aufgenommen um später beim durchführen der Therapie das Video immer wieder anschauen zu können.

Physiotherapeut:innen

Die Physiotherpeut:innen können in der App Administrative Funktionen durchführen. So haben sie die Möglichkeit neue Patient:innen ihrer Liste hinzuzufügen. Außerdem können sie dann jeder Patient:inn neue Therapien hinzufügen oder diese bearbeiten und löschen. Auch kann der Fortschritt der einzelnen Patent:inn eingesehen werden und zusätzliche Notizen angehängt werden. Außerdem können vorab Vorlagen für Übungen und Therapien erstellt werden.

Kraftsportler:innen

Armin Novacek konzeptioniert im Rahmen seiner Masterarbeit zusätzliche Features, die die Aufgabe haben, User:innen bestmöglich zu motivieren. Im Rahmen der Umsetzung führte er Interviews mit Fitnesstrainer:innen, um die bestmöglichsten Features zu identifizieren. Es wurden insgesamt 4 Features umgesetzt. Ein weiteres Feature befindet sich in der Umsetzung.

Ein Abschlussscreen nach dem Workout

User:innen werden nach dem abgeschlossenen Training über die Zusammenfassung des Trainings informiert. Unter den Informationen befinden sich die Trainingszeit, der Trainingsfortschritt (weiteres neues Feature), das insgesamt bewegte Gewicht und die erreichten Ziele (weiteres neues Feature). Insbesondere die letzten drei Informationen sollen User:innen zum weiterführenden Training anregen.

Zielsetzung in der App

Zielsetzung ist laut den befragten Expert:innen der Schlüssel zu Erfolg im Krafttraining. Dieses Feature orientiert sich an der Arbeitsweise von Fitnesstrainer:innen. Ähnlich wie ein/eine Trainer:in, stellt die App den Nutzer:innen Fragen, in welchen Bereichen sie sich verbessern wollen. Es wird unterschieden zwischen sogenannten Maximalkraftzielen und Trainingszeitzielen. Sind alle Fragen beantwortet worden, ist in der App ein neues Ziel sichtbar. Gymble überprüft ab diesem Zeitpunkt die prozentuelle Erreichung des Ziels. Vorerst ist es nur möglich, die zwei zuvor genannten Arten von Zielen anzulegen. Wählen User:innen ein Maximalkraftziel aus, muss zudem eine Übung gewählt werden, in welcher das Ziel erreicht werden soll. Zuletzt muss das gewünschte Gewicht eingetragen werden und das Ziel kann gesetzt werden. Das Ziel wird erreicht, sobald der/die Sportler:in in der genannten Übung mindestens eine Wiederholung mit dem Zielgewicht geschafft hat. Bei einem Trainingszeitziel muss ausgewählt werden, für welchen Zeitraum das Ziel gelten soll. Der/die Nutzer:in kann zwischen einem zeitlichen Wochen-, Monats-, Jahres- oder Lebensziel auswählen und muss anschließend die gewünschte Trainingszeit eintragen. Die App prüft, ob der/die Sportler:in beispielsweise jede Woche das Trainingszeitziel erreicht hat und benachrichtigt den/die User:in, sobald das Ziel abgeschlossen wurde.

Trainingsfortschritt im Training zeigen

Dieses Feature stellt User:innen eine essenzielle Information zur Leistungsentwicklung zur Verfügung. In den Expert:inneninterviews wurde genannt, dass sehr viele Sportler:innen im Krafttrainingsbereich, Kraftsteigerung als Hauptziel festlegen. Jene Funktion errechnet die Progression anhand der gesammelten Daten der letzten Trainingseinheit. User:innen wird die Information der Kraftsteigerung/Kraftminderung mittels eines eingefärbten Badges übermittelt. Die Progression wird als prozentualer Wert angezeigt. Der Badge ist entweder rot, sobald der Wert negativ ist, grau, sobald, weder eine Steigerung noch Verminderung auftritt und grün, sobald der/die User:in einen Fortschritt verzeichnet. Der Fortschritt wird angesichts des bewältigten Gewichts festgestellt. Die Progressionen werden jeweils für die einzelnen Übungen errechnet und schlussendlich, wird nach dem abgeschlossenen Training eine Gesamtentwicklung bereitgestellt.

Statistik des Übungsfortschritts

Bei diesem Feature handelt es sich um eine Statistik, welche User:innen einen detaillierten Einblick in die persönliche Leistungsentwicklung gewährt. Der/die Nutzer:in kann aufgrund einer gewählten Übung alle bisher festgehaltenen Trainingsdaten bezüglich der Übung auslesen. Sobald die genannte Übung einige Male ausgeführt wurde, kann hinsichtlich des erzeugten Funktionsgrafen eine Steigerung, ein Nachlass oder eine anhaltende Leistung erkannt werden. Die gesammelten Daten werden nicht gelöscht, demnach reicht der Informationsgehalt bis hin zum Zeitpunkt, zu dem der/die Sportler:in das erste Mal die Übung ausgeführt und in der App einträgt. Tippt der/die User:in auf einen Punkt in der Statistik, stellt die App detaillierte Informationen über die durchgeführten Sätze des abgeschlossenen Workouts zur Verfügung. In einer horizontalen ScrollView können User:innen ihre gesamte Übungsentwicklung auslesen.

Armins Beitrag und Erkenntnisse

Ich habe Features für Kraftsportler:innen umgesetzt. Für ein Feature, die Zielsetzung, habe ich mich mit CronJobs auseinandergesetzt, da die Ziele je nach gewähltem Zeitraum zurückgesetzt werden sollen. Weiters habe ich alle neuen Features designed und selbst konzeptioniert. Insgesamt habe ich auch noch sehr viel Zeit in Bugfixing gesteckt und selbst die App beim Training getestet. Letztendlich sind die meisten Fehler beim Testing in der Realität aufgefallen. Auch das ist ein Learning ????

Maximilians Beitrag und Erkenntnisse

Ich habe mich dieses Semester ganz der Umsetzung der Funktionen für Patient:innen und Physiotherapeut:innen gewidmet. Dort habe ich alle Seiten neu designed und eingebaut.

Gelernt habe ich am meisten durch die Implementierung der Video Upload Funktionalität. Ich habe mit dem extra Package „Multer“ die Upload Funktion eingebaut und somit ermöglicht das die User:inn ein Video hochladen kann. Um den Server mit Videomaterial nicht übermäßig zu überlasten, musste ich alle Videos am Server konvertieren, um Speicherplatz zu sparen. Diese habe ich mit dem Package „ffmpeg“ erfolgreich umgesetzt. So wird jedes Hochgeladene Video auf 720x? Pixel umgewandelt, um wertvollen Speicher zu sparen.

The post Gymble appeared first on Mobile USTP MKL.

Gemeinsam mit meinem Studienkollegen Armin Novacek haben wir die Idee einer Fitness App in die Realität umgesetzt. Die Grundidee war es, eine App zu gestalten, die vor allem unseren Ansprüchen gerecht wird. Dabei soll sich die App nicht wie bereits andere auf dem Markt befindliche Produkte an Anfänger richten, sondern an ein fortgeschrittenes Publikum. Den Grundstein für unsere Vorhaben legten wir im Rahmen dieses Projekt in der Masterklasse. Da die Zeit für das gesamte Projekt jedoch zu kurz ist, sind wir stets noch dabei, das Projekt weiter voranzutreiben und programmieren auch in unserer Freizeit weiter an unserer Idee.

Die App

Unsere App lässt sich in drei verschiedene Bereiche aufteilen. Die Trackingfunktion, die Statistik und unsere innovative Idee, welche ich hier noch nicht preisgeben möchte. Im Rahmen unseres Projektes in der Masterklasse haben wir uns auf die ersten beiden Bereiche fokussiert. Die App an sich haben wir mit React Native umgesetzt. Anstatt ganz klassisch mit JavaScript zu arbeiten, haben wir uns gezielt für TypeScript entschieden, da es bessere Übersicht im Projekt und einfacheres Debugging möglich macht. Das Backend wurde Großteils schon im Zuge des ersten Semesters entwickelt und programmiert, es basiert auf Node.js, Express.js und TypeORM.

Tracking

Die Tracking Sektion macht es möglich, den Trainingsfortschritt effizient zu speichern. Dafür kann der User anfänglich ein eigenes Training erstellen. Hierfür wählt er Übungen aus unserer vorgefertigten Liste aus oder erstellt seine ganz Persönlichen. Hat er nun ein Training einmalig erstellt, kann er mit einem Klick das Training starten und seinen Fortschritt ganz bequem speichern. Natürlich hat er immer die Möglichkeit, sein Training zu verändern oder ein neues zu erstellen. Außerdem ist es möglich, Trainings zu archivieren und wirklich nur die Trainings auf der Startseite anzuzeigen, die gerade benötigt werden.

Statistik

Wir der Titel schon andeutet, bietet dieser Bereich eine kompakte Übersicht über die Trainingsfortschritte. Ganz oben befindet sich ein horizontaler Slider, in dem kleine Facts wie etwa die Anzahl der abgeschlossenen Trainings oder Übungen angezeigt werden. Als zweites Feature findet sich ein Kalender, in dem alle abgeschlossenen Trainings im Detail nachvollziehbar sind. Zudem gibt es die Möglichkeit, die abgeschlossenen Trainings über den zeitlichen Verlauf in Wochen, Monaten oder Jahren einzusehen. Zum Schluss gibt es noch eine Übersicht, wie ausgewogen welche Muskelgruppe trainiert wurde.

Mein Beitrag und Erkenntnisse

Meine Arbeit hat sich die meiste Zeit auf die Umsetzung der Trainings und Teile der Statistik beschränkt, dies sowohl im Frontend als auch im Backend. Im Detail bedeutet das, dass ich das Hinzufügen, Bearbeiten, Löschen und Starten eines Trainings implementiert habe und im Statistikbereich den Kalender mit der detaillierten Übersicht über abgeschlossene Trainings programmiert habe.

Zum Start dieses Projektes war mir das Framework React Native zur Gänze unbekannt. Doch über die Zeit habe ich mich immer weiter damit auseinandergesetzt und besitze mittlerweile fortgeschrittene Kenntnisse in diesem Framework. Node.js und Co. kannte ich bereits aus dem ersten Semester und konnte mein bereits bekanntes Wissen festigen und in gewissen Bereichen erweitern.

The post Fitness App Gymble appeared first on Mobile USTP MKL.

Was ändert sich?

Facetime mit 3D-Audio, Porträtmodus und SharePlay

Durch die neue 3D-Audio Funktion ist es in Zukunft möglich, die Stimmen seiner Gesprächspartner während eines FaceTime Anrufes aus der Richtung zu hören aus der die Person gesprochen hat. Dies soll für ein natürlicheres Gefühl beim Gespräch mit den Liebsten führen und die Stimmen räumlicher wirken lassen. Außerdem wird das Gesprochene noch besser von Hintergrundgeräuschen separiert, durch neue Mikrofonmodi. Auch kann der Hintergrund nun weichgezeichnet werden dies tauft Apple den Porträtmodus.

Durch die neue SharePlay Funktion werden demnächst FaceTime Anrufe noch interaktiver. So wird es zukunftig möglich sein während eines Anrufes gemeinsam Songs über Apple Music zu hören, den Bildschirm zu teilen und damit gemeinsam Filme, Videos oder Apps anzuschauen. SharePlay soll auf iPhone, iPad, Mac und Apple TV laufen, FaceTime soll zukünftig auch für Windows verfügbar werden. Leider jedoch wird Apple SharePlay nicht gleich zum Release von IOS 15 verfügbar sein, sondern durch ein weiteres Update nachgeliefert werden. Dies wurde den Entwicklern auf der WWDC21 mitgeteilt.

Neue Nutzer-Einstellungen und Mitteilungsübersicht

Benachrichtigungen sollen sich in IOS 15 individuell filtern lassen. Die Nutzer können frei entscheiden welche Apps ihnen Benachrichtigungen senden können. Ein Beispiel wäre etwa während der Arbeitszeit. Dafür kann der User neue Homescreen-Seiten anlegen die gewisse Apps ausblenden und den Nutzer weniger ablenken.

Mit der neuen On-Device-Intelligenz sollen Mitteilungen unterschiedlich priorisiert werden. So werden wichtige Nachrichten ganz oben angezeigt und unwichtigere zu einem Zeitpunkt angezeigt an dem es den Nutzer weniger stört. Dringende Nachrichten werden natürlich sofort zugestellt.

Auch werden neue Memojis eingeführt, mit diesen es möglich sein wird individuelle Outfits und Looks vergeben zu können. Weiters werden mehrere Fotos in Mitteilungen jetzt als Collage angezeigt.

Text in Bild erkennen

IOS 15 soll Zukünftig über eine Texterkennung, den Text in Bildern erkennen. Apple nutzt dafür die Kamera-App des jeweiligen Gerätes. Der erkannte Text lässt sich dann ganz einfach kopieren und weiter verwenden. So können etwa die Adresse einer Wohnung oder die Kontaktdaten auf einer Visitenkarte erkannt werden.

Health

Mit den Updates für die Health App hast du jetzt neue Möglichkeiten, Daten mit deinen Lieben zu teilen, einen Messwert, um dein Sturz­risiko einzu­schätzen, und eine Trend­analyse, die dir hilft, Veränderungen deiner Gesundheit zu verstehen.

Neue Apple-Karten

Durch die aktuelle Google Marktdominanz mit Google Maps will Apple seine Karten App verbessern. Es wurden eine deutlich verbesserte und detailreichere Darstellung von Stadtteilen und Gebäuden angekündigt. Das Navigieren soll durch mehr Straßendetails vereinfacht werde und im öffentlichen Verkehr soll das auffinden von Haltestellen leichter geworden sein. Diese Haltestellen können künftig als Erinnerung angelegt werden, um von ihrem iPhone erinnert zu werden, das sie aussteigen sollen

Alles auf einen Blick

Weitere und noch detailliertere Informationen gibt es natürlich auf der Offiziellen Apple Website. Hier geht’s zur genauen Übersicht.

The post Das neue IOS 15 Update appeared first on Mobile USTP MKL.

Einleitung

Native Mobile Apps

React Native

Ionic

Verwendete Testmethoden

Testanwendung

Testszenarios

Ergebnisse

CPU Verbrauch

Arbeitsspeicher verbrauch

Batterie verbrauch

Anwendungs und APK Größe

Analyse

Andere Tests

Fazit

Einleitung

2012 gab es auf der Erde ca.1,06 Milliarden Menschen die im Besitz eines Smartphones waren. Dieser Wert hat sich in den vergangenen 19 Jahren fast vervierfacht. Somit gibt es derzeit ca. 3,8 Milliarden Menschen die ein Smartphone und die derzeit vorhandenen Apps nutzen. (Smartphone Users 2020, o. J.) Dieser Aufsteigende Trend wiederspiegelt sich auch in der  Weltweiten Anzahl an heruntergeladenen Apps. Waren es im Jahre 2016 noch 140,68 Milliarden Downloads sind es jetzt bereits 218 Milliarden heruntergeladene Apps. (Annual Number of Mobile App Downloads Worldwide 2020, o. J.)

Immer mehr Menschen wollen oder müssen ihre eigene App entwickeln. Dies stellt die Entwickler jedoch vor eine Herausforderung. Durch die zwei Betriebssysteme IOS und Android ist es notwendig für jedes Betriebssystem eine eigene App zu entwickeln. Dafür wird für die Entwicklung von Android Apps die Programmiersprachen Java und Kotlin verwendet und für IOS hingegen Swift und Objective-C. Um diesen Prozess zu vereinfachen gibt es die sogenannten Cross-Plattform Apps. Diese dienen dazu eine Programmiersprache zu verwenden und die Apps gleichzeitig für Android und IOS zu Entwickeln.  („Cross-Plattform-Apps entwickeln“, 2019) In diesem Artikel wird aufgeschlüsselt wie sich Cross-Plattform Apps im Performance Vergleich mit Native programmierten Apps schlagen.

Native Mobile Apps

Native Apps werden meist mit einer Programmiersprache entwickelt. Im Vergleich zu anderen Technologien werden Native programmierte Apps meist durchgehende Performance und weniger Fehleranfälligkeit zugeschrieben. Wie oben bereits erwähnt müssen Entwickler für IOS Development die Programmiersprachen Swift und Objective-C verwendet werden. Eine App Native zu programmieren ist für die meisten ein Traum. Die dafür nötigen Aufwände und Kosten sind für viele jedoch nicht aufwandbar. Nicht nur müssen zwei verschiedene eigenstehende Apps entwickelt werden, zusätzlich müssen diese auch separat gewartet werden. Folgend noch zwei Beispiele aus der App Welt, welche Native programmiert wurden: Einerseits die Weltbekannte Karten App Google Maps und andererseits das Business Netzwerk LinkedIn (Sharma, 2020)

React Native

React Native ist ein JavaScript Framework welches dafür entwickelt wurde Native gerenderte Apps für IOS und Android zu entwickeln. Als Basis nutzt dieses Framework die von Facebook entwickelte JavaScript Library React. Web Entwicklern ist es damit möglich echte native Apps zu programmieren. Fast der ganze Code der mit React Native geschrieben wird kann auf beide Plattformen verteilt werden. Ähnlich zu React verwendet auch React Native eine Mischung aus JavaScript und XML Markup, besser bekannt als JSX. Die Brücke zwischen React Native und der fertigen Nativen App ruft dann die nativen Rendering APIs in Objective-C oder Java auf. Somit wird eine React Native App mit echten UI-Komponenten gerendert was sich im Schluss wie jede andere mobile Anwendung anfühlt und aussieht. Zusätzlich wird eine Plattform API zu Verfügung gestellt um auch auf Funktionen wie die Telefonkamera oder das Standort Signal des Gerätes zugreifen zu können.(1. What Is React Native?, o. J.) Einige Beispiele für React Native Apps sind Instagram, Discord, Facebook, Pintrest oder Uber Eats. (React Native, o. J.)

Ionic

Ionic ist ein kostenloses Open-Source SDK Framework welches es erlaubt Mobile Anwendungen in IOS, Android und Windows mit einer Code Basis zu entwickeln. Ionic fällt in die Begrifflichkeit der Hybrid Apps. Ionic verwendet für die Entwicklung ihrer Apps Welt bekannte Webtechnologien wie HTML, CSS, JavaScript, Angular und TypeScript. Weiters stellt Ionic eine Vielzahl an vorgefertigten Komponenten und kann auch teilweise auf Native Funktionen zugreifen. Außerdem kann es mit der mitgelieferten CLI glänzen. Ionic wurde bereits 2013 veröffentlicht und befindet sich momentan in der Version Ionic 5. Folgend noch einige Beispiele für mit Ionic programmierte Apps. Cat, EA, Nasa, Airbus und viele mehr. (Ionic, o. J.)

Verwendete Testmethoden

Im nachfolgenden Absatz dieses Artikels werden die Ergebnisse eines Experimentes, des Master Studenten Filip Asp von der Universitet Linköpings, aufgeschlüsselt und erklärt. Hierzu wurden Ionic, React Native und eine native programmierte Android App verglichen. Um eindeutige Kenntnisse aus diesem Experiment ziehen zu können, wurden dafür fünf verschiedene Messparameter verwendet: Der verbrauchte Arbeitsspeicher der Anwendung, die CPU Belastung, die Projektgröße, die Größe der APK (Android Package Kit) Datei und schlussendlich der Batterie Verbrauch des Gerätes.(Asp, 2018)

Testanwendung

Die Anwendung die für diesen Test verwendet wird basiert auf dem Design der Atten-home App. In der Haus Übersicht der App werden alle im Haus verfügbaren Räume angezeigt. Zusätzlich gibt es dann einen Statistik Reiter in dem entweder die Temperatur oder der Leistungsverbrauch angezeigt werden. Mit klick auf einen Raum werden die verfügbaren Geräte angezeigt. Diese können hier ein und ausgeschalten werden. Auch ist die selbe Statistik Seite wie oben beschrieben hier verfügbar. Mit einem weiteren Klick auf ein Gerät öffnen sich die Einstellungen des ausgewählten Gerätes. Für eine Lampe wären dies zum Beispiel die Möglichkeit die Lampe zu dimmen. Bei einem Heizstrahler wäre es die Stärke des Heizeffektes. (Asp, 2018)

Testszenarios

Um ein möglichst aussagekräftiges Ergebnis von dem Test zu bekommen wurden folgende 5 verschiedene Szenarios getestet. Diese wurden auf einem Sony Xperia X Performance und Samsung Galaxy S7 durchgeführt:

„

1. Expand each graph on the home statistics screen. Wait for 5 seconds.

2. Expand each graph on a room screen. Wait for 5 seconds.

3. Expand each graph on a radiator screen. Wait for 5 seconds.
Rendering the graphs was the most demanding in the application and therefore showed the biggest difference in performance. In each layer, each of the applications fetch more data from the back end, therefore all the possible scenarios with graphs were chosen to be part of the test.

4. Select a lamp. Turn off the lamp. Go back to the room screen. Turn the lamp back on again. Wait for 5 seconds.
A scenario where data was sent to the back end was also needed in order to get coverage. This scenario was the one where the design and functionality did not differ at all, therefore this scenario was chosen.

5. Start the application.
It was early noticed that the startup time of the applications were different. In order to have the other scenarios run at equal pace the startup of the application had to be done in a separate scenario. „ (Asp, 2018)

Ergebnisse

Um diesen Artikel im Rahmen zu halten werden nachfolgend die Ergebnistabellen der Tests nur gezeigt aber nicht im Detail erklärt. Danach folgt eine Kurze Analyse der Tests.

CPU Verbrauch

(Asp, 2018)

Arbeitsspeicher verbrauch

(Asp, 2018)

Batterie verbrauch

(Asp, 2018)

Anwendungs und APK Größe

„

Sony Xperia X Performance:

• React Native: 20.16 MB
• Ionic 2: 5.66 MB
• Android: 2.68 MB

Samsung Galaxy S7:

• React Native: 20.34 MB
• Ionic 2: 5.81 MB
• Android: 2.67 MB

The APK sizes of the different applications:

• React Native: 8.2 MB
• Ionic 2: 5.6 MB
• Android: 2.2 MB

„ (Asp, 2018)

Analyse

In den meisten Fällen hat React Native im Vergleich zu Ionic nicht so viel Leistung und Speicher verbraucht. Beim Starten der App, also Szenario 5 gab es die meisten unterschiede zu sehen. Dort verbrauchte Ionic mit Abstand am meisten Ressourcen. Jedoch hat die Native Android Anwendung in den meisten Fällen mehr Arbeitsspeicher verbraucht als die anderen Technologien. Das könnte jedoch darauf zurückzuführen sein, dass diese mehr Arbeitsspeicher beanspruchen, um gewisse Aktionen schneller ausführen zu können. Grundsätzlich war der Unterschied in Leistung der einzelnen Entwicklungsmöglichkeiten nur minimal unterschiedlich. (Asp, 2018)

Andere Tests

Bei der Recherche dieses Artikels wurden noch weitere Papers oder Arbeiten gefunden, welche verschiedene Technologien vergleichen. Hier wurden jedoch meist React Native mit dem Google Framework Flutter verglichen. Somit sind diese nicht in diesen Artikel eingeflossen. (Flutter – Beautiful Native Apps in Record Time, o. J.)

Fazit

Die verglichen Technologien nehmen sich in Performance nicht viel. Dahingehend sollte bei der Auswahl solch einer die ausgewählt werden mit der man sich am wohlsten fühlt. Auch anzuführen ist, dass die verwendete Quelle für den Test bereits 3 Jahre alt ist und die 3 verglichenen Technologien bereits vielfach aktualisiert wurden. Demnach müsste der Test wiederholt werden, um noch genauere Ergebnisse zu liefern.

Literaturverzeichnis

1. What Is React Native? – Learning React Native [Book]. (o. J.). Abgerufen 2. Februar 2021, von https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch01.html

Annual number of mobile app downloads worldwide 2020. (o. J.). Statista. Abgerufen 2. Februar 2021, von https://www.statista.com/statistics/271644/worldwide-free-and-paid-mobile-app-store-downloads/

Asp, F. (2018). A comparison of Ionic 2 versus React Native and Android in terms of performance, by comparing the performance of applications. http://urn.kb.se/resolve?urn=urn:nbn:se:liu:diva-147556

Cross-Plattform-Apps entwickeln: React Native, Flutter und Co. (2019, März 20). entwickler.de. https://entwickler.de/online/tools/cross-plattform-apps-579874358.html

Flutter—Beautiful native apps in record time. (o. J.). Abgerufen 4. Februar 2021, von https://flutter.dev/

Ionic. (o. J.). What is Ionic. Ionic Framework. Abgerufen 2. Februar 2021, von https://ionicframework.com/what-is-ionic

React Native. (o. J.). Abgerufen 2. Februar 2021, von https://reactnative.dev/

Sharma, S. (2020, August 9). Native vs Hybrid vs Cross-Platform—What To Choose? Medium. https://medium.com/flutterdevs/native-vs-hybrid-vs-cross-platform-what-to-choose-3221130f7cc5

Smartphone users 2020. (o. J.). Statista. Abgerufen 2. Februar 2021, von https://www.statista.com/statistics/330695/number-of-smartphone-users-worldwide/

The post Performance Vergleich von Ionic vs React Native vs Native Apps appeared first on Mobile USTP MKL.

Bei Laravel handelt es sich um ein PHP Framework welches sich optimal für kleine bis große Projekte eignet. Dieses Framework ist gut skalierbar und dafür konzipiert, individuell erweitert zu werden. Das Framework mit seiner wohl bekannten MVC Struktur kam im Jahre 2011 das erste mal durch den Initiator Taylor Otwell zum Vorschein. Seit her hat sich das Framework stehts weiterentwickelt. Sowohl in seiner Community Größe als auch seiner Features und handhabe. Laravel befindet sich derzeit in der Version 8.

Installation

Um  Laravel für das Locale Development optimal vorzubereiten wird eine Virtuelle Maschine benötigt, welche durch Vagrant verwaltet wird. Weiteres wird die Hauseigene Vagrant Box Homestead und der Package Manager PHP Composer benötigt. All dies lässt sich in der Linkliste am Ende dieses Artikel finden. Dort ist auch die genaue Installationsanleitung zu finden.

Einfacher Weg um ein Login/Registrierung Feature zu implementieren

Der einfachste Weg in Laravel eine Benutzeroberfläche zu entwickeln, ist die Verwendung des von Laravel mitgelieferten Jetstream Plugin. Mit den folgenden Befehlen ist es möglich dieses Plugin in wenigen Minuten zu installieren:

• composer require laravel/jetstream
• php artisan jetstream:install livewire
• npm install && npm run dev
• php artisan migrate

Sobald diese Schritte erfolgreich abgearbeitet wurden. Sind auf der Welcome Page (Standard View welche beim Erstellen des Projektes erstellt wird) ein Login und Register Button angezeigt. Dort habt ihr nun die Möglichkeit einen User zu erstellen/upzudaten oder sich mit diesem einzuloggen. In der dort auffindbaren Dokumentation findet ihr noch weitere Details über alle verfügbaren Features.

Routing

Das Routing in Laravel wird benötigt um die richtigen Inhalte an der richtigen URL anzuzeigen und zusätzlich alle verwaltenden HTTP Requests zu verwalten. Zusätzlich können auch alle Routes die für die Verwendung einer mit Laravel erstellten API benötigt werden. Nachstehend findet mal einige Beispiele solcher Routes:

//Route mit Funktion die direkt die Welcome View rendert und auf den Namen 'home' aufzurufen ist
Route::get('/', function () { return view('welcome'); })->name('home');
//Route die von der root url auf die home url redirected mit Http Statuscode
 Route::redirect('/home', '/', 301);
//Route die von der root url auf die home url permanent redirected
Route::permanentRedirect('/home', '/');
//Route die direkt die Welcome View rendert
Route::view('/welcome', 'welcome');
//Http GET Request mit Funktion der die Id eines Users ausgibt
Route::get('user/{id}', function ($id) { return 'User '.$id; });
//Resource Route - Diese erstellt für einen Controller alle nötigen Routes
Route::resource('/posts', PostsController::class);

Der im letzten Beispiel genannte Resource Controller kann über folgenden Command Line Befehl generiert werden:

Php artisan make:model -mcr dein Name

Mit diesem Befehl wird ein Datenbank Model mit dem dazugehörigen Resource Controller erstellt. Mehr dazu später.

Views

Laravel verwendet seine Haus internes Blade Template um HTML Code in Views einfach verwalten zu können. In diesen ist es super simple Daten einzubetten und auch geringfügige Logik wie if-conditions, foreach Schleifen und Switch Case Statements dafür zu verwenden, Daten dynamisch zu generieren. Folgend ein Beispiel mit Posts.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Posts</title>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>

    <h1>Posts</h1>
    {{-- Hier werden wenn vorhanden alle Posts dynamisch ausgegeben  --}}
    @if($posts)
    @foreach($posts as $post)

    <p>{{ $post->title }}</p>
    <p>{{ $post->description }}</p>
    <p>{{ $post->user->name }}</p>
    @endforeach
    @endif
</body>

</body>
</html>

Controller

Der Laravel Controller dient dafür die Daten die für die View benötigt werden bereitzustellen und diese fachgerecht zu verwalten. Wie oben bereits erwähnt eignet sich ein Resource Controller dafür ganz perfekt, da dort bereits vorgefertigte Funktionen wie erstellen, updaten, löschen, details anzeigen ect. bereits erstellt werden.

Auch hier ein Beispiel wie die Daten der oben ausgegebenen Posts verwaltet werden:

class PostsController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //Hier wird auf das Model "Posts" zugegriffen und alle Posts des users in die Variable gespeichert

        $posts = Posts::with('user')->get();
        //Anschließend wird die View gerendert und die variable $posts an diese übergeben

        return view('posts.index')->with('posts',$posts);
    }
}

Models & Datenbank

Auch hier verwendet Laravel wieder ein eigens produziertes Tool. Für das erleichtern von Datenbank abfragen gibt es hierfür den Eloquent ORM. Um eine Datenbank überhaupt verwenden zu können muss diese erst in der .env Datei entsprechend konfiguriert werden.

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=laravel_workshop
DB_USERNAME=admin
DB_PASSWORD=password

Hier können die entsprechenden Daten eingetragen werden. Unterstützt werden gängige Datenbanken wie PostgreSQL, mySQL ect.

Durch das automatisch angelegte Model können nun wie oben im Controller gezeigt ganz einfach Daten aus der Datenbank abgefragt werden. Wenn speziellere Abfragen benötigt werden können diese Direkt im Model implementiert werden.

Fazit

Aus meiner eigenen Erfahrung kann ich sagen das Laravel ein super einfaches Framework ist und beim Development einfach nur Spaß macht. Das meiste ist selbsterklärend bzw. lässt sich durch die gute Dokumentation und große Community super schnell herausfinden. Wie am Anfang erwähnt lassen sich auch große Projekte gut strukturieren. Ich arbeite sehr gerne damit und kann es für Einsteiger in Frameworks herzlichst empfehlen.

Linkliste

Installation

https://laravel.com/docs/8.x/installation

https://laravel.com/docs/8.x/homestead

https://www.virtualbox.org/wiki/Downloads

https://getcomposer.org/download/

https://www.vagrantup.com/downloads

Login/Registrierung

https://jetstream.laravel.com/2.x/introduction.html

https://jetstream.laravel.com/2.x/features/authentication.html

Routing

https://laravel.com/docs/8.x/routing

Views

https://laravel.com/docs/8.x/views

Controller

https://laravel.com/docs/8.x/controllers

https://laravel.com/docs/8.x/queries

Model

https://laravel.com/docs/8.x/eloquent

https://laravel.com/docs/8.x/database

The post Einstieg in Laravel appeared first on Mobile USTP MKL.

Direkt an der Bushaltestelle soll ein Bus Plan mit QR-Code abgebildet sein. Dieser führt zu einer Mobilen Web Anwendung die einerseits die Echtzeit Daten der Buslinie und andererseits die Aktuelle und nachfolgende Haltestellen anzeigt.

http://flock-1575.students.fhstp.ac.at/

The post Citybus – Initialprojekt 2020 appeared first on Mobile USTP MKL.