Connect - Mitarbeiterverwaltung (Angular Ionic)

Datum: Dezember 2021
Lesedauer: 30 Minuten

Vorwort

Diese Dokumentation beschreibt den Weg von der Ideenfindung bis zur fertigen App. Sie ist folgendermassen strukturiert.

Vorerst beschreibe ich, meine ersten Gedankensprünge und erkläre, welche Idee ich umsetzen werde. Ich überlege mir, wie man die App erweitern kann und was in diesem ÜK umgesetzt werden kann.
Danach gehe ich auf das Konzept ein. Ich analysiere die Möglichkeiten sowie Sensoren, Datenbanken und Entwicklungsumgebungen. Zudem designe ich hier das Mockup und den Anschliessend formuliere ich, wie ich das Projekt aufgesetzt habe, und für welche Sensoren und Datenbanken ich mich entschied. In diesem Kapitel zeige ich auf, wie ich dieses Projekt umsetzen werde.
Nachfolgende definiere ich die Testfälle und führe diese durch.
Zum Schluss erkläre ich, wie ich das Projekt aufgebaut und umgesetzt habe.

Idee

Zu Beginn überlegte ich mir Applikationen, welche ich implementieren könnte. Dabei standen drei Ideen zur engeren Auswahl.

Kundenverwaltung

Als Mitarbeiter eines Unternehmens ist es wichtig, dass man mit den Kunden in Kontakt treten kann. Jedoch ist dies manchmal etwas schwierig, wenn die Kontaktdaten nicht auffindbar sind. Deshalb könnte eine App einen Überblick bieten.
Neben den Kontaktdaten könnte man auch Informationen wie den Standort, das Geburtsdatum oder Lieblingsrestaurants festhalten. Die Möglichkeiten wären fast grenzenlos.

Mitarbeiterverwaltung

Mindestens genau so interessant wäre eine Mitarbeiterverwaltung.
Ich arbeite in einer Firma, welche tausende von Mitarbeitern beschäftigt. Allein in St. Gallen arbeiten ca. 200 Personen. Suche ich eine Person aus einer bestimmten Abteilung so kann das mühsam werden. Deshalb könnte eine solche App Unterstützung bieten.
Jeder Mitarbeiter könnte ein persönliches Profil anlegen. In einer Übersicht sieht dann ein Nutzer alle Personen. Mithilfe eins Suchfeldes kann er dann die entsprechenden Leute finden.

Produktverwaltung

Eine Produktverwaltung für Sneaker fände ich auch ein spannendes Projekt. Jedoch kann man nur eine begrenzte Menge an Bildern in einer DB Speichern. Deshalb entschied ich mich schnell gegen diese Idee.

Entscheidung

Letztendlich entschied ich mich für die Mitarbeiterverwaltung, da ich einen Mehrwert in einer solchen App sehe. Zudem mag ich Software, welche ein Problem löst.
Ausserdem gäbe es viele Erweiterungsmöglichkeiten, die ich nach diesem ÜK umsetzen könnte:

• Die Profile könnten mit Fotos versehen werden, damit die Applikation persönlicher wird. Diese könnten beim Erstellen eines Profils ausgewählt oder durch die Kamera aufgenommen werden.
• Gerade auch wegen der aktuellen Covid-19 Situation wäre es nützlich zu sehen, wer wo sitzt. So könnten die entsprechenden Arbeitskollegen bei einem positiven Fall kontaktiert werden.
• Für diese Projekt habe ich vor, den Namen, die Fähigkeiten (Abteilung) und die Telefonnummer einzuspeichern. Man könnte aber auch den Standort, das Stockwerk, Hobbys, Soziale Netzwerke und vieles mehr speichern.

Konzept

Möglichkeiten

Es gibt drei gängige Arten einer App. Diese habe ich mir hier genauer angeschaut.

Webapp

Eine Webapp ist nicht lokal auf dem Gerät eines Benutzers installiert. Die Datenverarbeitung findet auf dem Webserver statt.

Hybrid

Eine Hybrid-App ist ebenfalls eine Browseranwendung. Sie basiert auf Webtechnologien aber kann trotzdem auf die nativen APIs und Funktionen der jeweiligen Betriebssysteme zugreifen. Deshalb wirkt eine solche Applikation wie eine native App.

Native

Native Apps werden für ein spezifisches Betriebssystem entwickelt. Der Code wird also für einen bestimmten Prozessor geschrieben.

Vergleich

Da ich nun wusste, was es für Typen gibt, war es für mich an der Zeit, diese zu vergleichen. Dies tat ich mithilfe einer tabellarischen Darstellung.

Legende: 🟩 = gut, 🟨 = mittel 🟥 = schlecht

Fazit

In diesem ÜK haben wir eine Hybride App zu realisieren. Darüber bin ich aufgrund folgender Dinge froh:

• Hybrid schnitt in meinem Vergleich am besten ab.
• Ich finde es ein interessantes Thema, da ich mich schon oft mit Webtechnologien auseinandergesetzt habe.

Konkurrenz

Als ich meine Idee dokumentiert habe, schaute ich mich nach Konkurrenzprodukten um.

Xing

Xing verwaltet berufliche Kontakte. Betrieben wird die Firma von New Work SE.

LinkedIn

LinkedIn ist ein webbasiertes soziales Netzwerk, welche die Pflegung und Knüpfung von Geschäftskontakten ermöglicht. Mit 660 Millionen Anwendern, 24 Sprache und 193 Ländern ist die kalifornische Software sehr populär.

USP

Eine App, welche ich in 5 Tagen umsetze, kann schwer mit LinkedIn oder Xing mithalten.
Aber was zeichnet jetzt meine App aus? Was ist mein Unique Selling Point (Alleinstellungsmerkmal)?
Mein App zeichnet sich durch folgende Punkte aus:

• Sie ist sehr simple und deshalb schnell erlernbar
• Sie ist kostenlos und enthält keinerlei Werbung
• Sie ist an die Wünsche meines Lehrbetriebs anpassbar

Geschäftsmodel

Es gibt drei grundlegende Varianten, um mit einer App einen Gewinn abzuwerfen.

Werbung

Firmen bezahlen Geld, damit ihre Werbung in der App geschalten wird. Zudem könnte man Geld vom User verlangen, um diese Werbung zu entfernen.

Preis

Eine Möglichkeit wäre auch, einen Preis für den Download festzulegen.

Meine App

Werbung würde unprofessionell wirken und den Workflow stören. Zudem will ich auch kein Geld verlangen, da die App für interne Zwecke verwendet werden sollte.

Sensoren

In meiner App muss ich einen Sensor ansprechen. Deshalb habe ich mir überlegt, welche es gibt und wie ich diese ansprechen kann.

Übersicht

Dies ist eine Übersicht der Sensoren und Aktoren, welche für mich in Frage kamen.

Plugins

Angular stellt 2 Plugins zum Ansprechen der Nativen APIs an.

Entscheidung

Ich entschied mich dazu, den Unique Device Identifier auszulesen, da ich diesen zwingend benötige, um den Besitzer der Daten zu identifizieren.
Unique Device Id: https://ionicframework.com/docs/native/unique-device-id (opens in a new tab)
Zudem entschloss ich, das Capacitor Plugin zu verwenden, da dieses von Ionic empfohlen wird.

Datenbank

Als Nächstes habe ich mich über verschiedene Datenbanken schlau gemacht.

Alle diese Datenbanken unterscheiden sich ein wenig voneinander. Jede bietet eigene Möglichkeiten.
Mehr Informationen über die jeweilige Datenbank findet man auf der verlinkten Webseite.

Fazit

Ich werde Firebase verwenden. Mir gefällt nicht so, dass die Datenbank nicht relational ist. Jedoch scheint es, als wäre diese Datenbank leicht aufzusetzen und zu verwenden. Zudem wird sie vom Kurs vorgeschlagen.

Persistenz der Daten

Firebase unterstützt die Offline-Datenpersistenz. Es handelt die lokalen Daten automatisch und synchronisiert diese wieder, wenn eine Verbindung besteht.
Somit ist die App jederzeit mit allen CRUD Funktionen lauffähig.

Entwicklungsumgebung

Bevor ich mich für ein Framework entschied, musste ich die einzelnen abwägen.

Mobile Angular

Release: 2010
Entwickler: Google
Website: https://angular.io/ (opens in a new tab)
Projekte: Google, Wix, ...

Angular ist ein Open-Source Frontend Framework, welches primär für Single-Page-Applikationen verwendet wird. Dabei wird die Logik mit TS oder JS geschrieben.

In Angular werden Projekte in modules, components und services unterteilt. Jede Applikation hat mindestens eine root component und ein root module.
Die Komponenten bestehen aus HTML mit einer Angular Template Syntax. Somit können Daten empfangen und Elemente gerendert werden.
Das einzigartige an Angular ist die Separierung von den UI Komponenten und der JS Logik.

Zu den Eigenschaften zählen:

• Viele Features
• Alles ist eingebaut
• TS
• HTML und TS ist separiert

React

Release: 2013
Entwickler: Facebook
Website: https://reactjs.org/ (opens in a new tab)
Projekte: Facebook, Instagram, WhatsApp, Uber, ...

React bezeichnet sich selbst als eine JS Frontend Library. Genutzt wird React meistens, um Web und Mobile Applikationen zu entwickeln.
React ist eine UI Library, welche keine spezifische Struktur vorschreibt.
Eine Applikation besteht aus Elementen und Komponenten. Elemente sind mächtiger als DOM-Elemente, da sie bei Änderungen effizient geupdatet werden. Eine Komponente ist ein grösserer Block, welcher Inputs akzeptieren, und Elemente produzieren kann.

Zu den Eigenschaften zählen:

• Minimalistisch
• Features müssen möglicherweise in community packages gesucht werden
• Es ist eine Library und kein Framework
• Der JS/JSX Code beschreibt, was im DOM gerändert wird
• Der gleiche Code ist für das Verhalten und UI zuständig

Vue

Release: 2014
Entwickler: Evan You
Website: https://vuejs.org/ (opens in a new tab)
Projekte: Alibaba, Grammarly, GitLab, ...

Vue ist ein Open-Source JS Framwork zur Erstellung von UI's und single page applications.
Hinter Vue steckt keine Firma sondern ein ehemaliger Google Mitarbeiter.

Das Framework ist so aufgebaut, dass das Gerüst mit HTML und die Logik mit JS geschrieben wird. In JS können Komponenten erstellt werden, welche man dann wiederum im HTML einsetzen kann.

Zu den Eigenschaften zählen:

• Um Vue zu verwenden, muss man das Framework nur importieren
• Das Framework ist simple
• Ein paar wichtige Features sind eingebaut
• Vanilla JS wird für die Logik verwendet

Ionic

Release: 2013
Entwickler: Drifty Co
Website: https://ionicframework.com/ (opens in a new tab)
Projekte: MarketWatch, StockPlan, McLaren, …

Ionic ist ein UI Toolkit, mit welchem man Hybrid-Apps und Progressive-Web-Apps schreiben kann. Hat man es installiert, kann man die Komponenten verwenden. Dadurch kann man mit relativ wenig Aufwand eine gut gestaltete Applikation entwerfen.
Die Dokumentation des Frameworks ist sehr präzise.

Flutter

Release: 2017
Entwickler: Google LLC
Website: https://flutter.dev (opens in a new tab)
Projekte: Google Ads, Klaster Me, Hamilton, …

Flutter ist ein Entwicklungs-Kit von Google. Die Anleitung ist sehr gut. Jedoch wird in diesem Kurs dieses Framework nicht empfohlen, da die App unter Umständen nicht sicher läuft.

Apache Cordova

Release: 2011
Entwickler: Adobe Systems (Nitobi)
Website: https://cordova.apache.org (opens in a new tab)
Projekte: Citigroup, Siemens, ADP, …

Das Cordova Framework wird in diesem Kurs empfohlen, da man HTML, CSS und JS Code schreiben kann.

Solar2D (Corona)

Release: 2009
Entwickler: Corona Labs Inc. (Seit 2020: Vlad Shcherban)
Website: https://solar2d.com (opens in a new tab)
Projekte: Viele private aber keine bekannten

Das Framework Solar2d, welches ursprünglich Corona hiess, hilft einem beim Programmieren von zweidimensionalen Games.
Die Dokumentation ist ansprechend. Zudem gibt es eine lange Liste an Sensoren, welche angesprochen werden können.

Fazit

Vor meiner Recherche kannte ich React, Vue und Angular. Jedoch habe ich noch keines der genannten Frameworks verwendet.
Im Betrieb schlage ich mich im Frontend mit JavaScript, SCSS und Handlebars herum. Deshalb denke ich, dass ich Cordova sehr schnell verstanden hätte. Da ich aber schon immer mal Angular kennenlernen wollte, sehe ich diesen ÜK als Chance dazu. Deshalb werde ich die Herausforderung annehmen und die Applikation mit Angular Ionic schreiben.

Als Entwicklungsumgebung verwende ich Visual Studio Code, da dies eine meiner liebsten IDEs ist. Gerade da ich jetzt mit einem, mir unbekanntem, Framework versuche, will ich sonst keine zusätzliche Laste auf mich nehmen. Zudem kenne ich auch die nötigen Shortcuts von VSC.

Usability

Bei der Usability geht es darum, dass ein Benutzer ein bestimmtes Ziel effektiv, effizient und zufriedenstellend erreicht. Um dies zu erreichen, muss man als Entwickler auf gewisse ergonomische Standards achten.

Grundsätze und Richtlinien der Software-Ergonomie (ISO-9241-10)

Aufgabenangemessenheit

Die Software unterstützt den Nutzer, indem sie Informationen und Funktionen in geeigneter Form und Reihenfolge bietet.

Selbstbeschreibungsfähigkeit

Die Dialogschritte sind durch die Rückmeldungen verständlich. Versteht ein User etwas nicht, so wird es ihm auf Anfrage erklärt.

Steuerbarkeit

Benutzer können den Ablauf starten und die Richtung und Geschwindigkeit beeinflussen, damit er das Ziel erreicht.

Erwartungskonformität

Die Dialoge sind konsistent und entsprechen den Kenntnissen aus anderen Anwendungen.

Fehlertoleranz

Unbeabsichtigtes soll ohne grossen Aufwand rückgängig gemacht werden können. Zudem muss das System Fehlereingaben aushalten.

Individualisierbarkeit

Die Software sollte nach Vorlieben angepasst werden können.

Lernförderlichkeit

Der User wird beim Erlernen der Software unterstützt.

Auf was achtet ein User?

Unsere ÜK-Gruppe hat gemeinsam Punkte gesammelt, auf welche ein User beim Verwenden einer App achtet.

• Cross Plattform
• Design
• Beanspruchter Speicherplatz
• Funktionalität
• Preis
• Bewertung im Store
• Bedienbarkeit
• Wie viel Zugriff die App auf das System braucht
• Open Source

Padlet: https://padlet.com/mheizmann/7o29sf29b99i3342 (opens in a new tab)

Auf was achtet ein Entwickler?

Danach haben wir gemeinsam notiert, was ein Entwickler nicht ausser Acht lassen darf.

• Aufwand
• Kundenwünsche
• Sicherheit
• Entwicklungskosten
• Darstellung der App im Store
• Werbung (keine oder gut platzierte)
• Kundenwünsche

Padlet: https://padlet.com/mheizmann/4wedoedoopav9ods (opens in a new tab)

Zielplattform

Ich entschloss mich dafür, den Fokus bei der Erstellung der App auf Android zu legen. Da ich aber die App mit Ionic entwickle, sollte die Darstellung auch auf iOS ansprechend sein.

Mein App soll schlussendlich mindestens die folgenden Versionen bedienen.

Dabei lege ich einen besonderen Fokus auf die Geräte von folgenden Herstellern.

• Samsung
• Apple
• Huawei

Tests

Nun habe ich mir überlegt, welche Testverfahren ich kenne.

Funktionale Tests

Beim funktionalen Testen geht es darum, die Funktion einer Komponente zu testen. Man schreibt einen Test, der immer bestanden werden muss. Nach einer Änderung im Code, kann dieser Test wieder ausgeführt werden. Dann sieht man, ob die Komponente noch den Erwartungen entspricht.

Cypress

Cypress ist ein Tool, welches einen solchen Test ermöglicht.

Das Framework stellt Funktionen zur Verfügung, welche das Testen erleichtern.

• visit
• .click()
• .dblclick()
• .rightclick()
• .type()
• .clear()
• .check()
• .uncheck()
• .select()
• .trigger()

Visuelle Tests

Beispiel:
Ich habe eine fertige Webseite. Nun will ich eine kleine Änderung im Code vornehmen. Diese soll sich aber nicht auf das Aussehen der Webseite auswirken. Nach dieser Änderung kann man einen solchen Test durchführen. Somit sieht man, ob sich etwas verändert hat.

Aber die Änderungen sieht man doch auch ohne einen solchen Test, oder?

Ein Test macht Bilder einer Seite und gleicht diese mit der Referenz ab. Die Software kann minimale Unterschiede feststellen. Dies auch auf verschiedenen Grössen. Zudem spart man Zeit, da man nicht manuell über jede einzelne Seite navigieren muss.

Backstop

Mit Backstop kann ein solcher Visueller Test ausgeführt werden.

Führt man einen Test aus, so erkennt man, was verändert wurde.

Da diese Tests mit Docker ausgeführt werden, liefern sie auf allen Systemen dieselben Ergebnisse. Mit Docker kann man nämlich Programme isoliert ausführen. Die Umgebung ist mit einer VM zu vergleichen. Mit Docker kann aber eine ganze Umgebung bereitgestellt werden und es wird weniger Speicher benötigt.

Usability Methoden

Es gibt empfohlene Methoden, mit welchen man die User Experience (UX) eines Produktes überprüfen kann.

• Best-Practice-Analyse
• Card Sorting
• Eyetracking
• Fragebögen
• Heuristische Evaluation
• Interviews & Umfragen
• Kriterienkataloge
• Personas
• Usability Tests
• Walkthrough-Verfahren

Ich entschied, dass ich meinen Prototyp zum Testen ausliefere und Feedback über eine Microsoft Forms Umfrage einhole.

Manuell

In diesem Projekt werde ich aus zeitlichen Gründen hauptsächlich manuell testen. Würde das Projekt länger als 5 Tage dauern, wären Scripts wohl die bessere Wahl. Auf kurze Sicht kann ich so aber etwas Zeit einsparen.
Um zu testen werde ich meistens den Android Studio und den Xcode Simulator verwenden. In der Entwicklung werde ich aber auch die Ansicht im Browser verwenden.
Wenn die App fertig ist, werde ich das Handy von Lars verwenden, um die App zu testen.

Veröffentlichung

Um die App zu veröffentlichen, muss man folgende Schritte befolgen.

Google Developer

Vorerst muss man ein Google Konto erstellen.

1. Webseite besuchen (https://accounts.google.com (opens in a new tab))
2. Konto erstellen
3. Formular ausfüllen
4. Konto aktivieren

Danach kann man ein Developer Konto erstellen.

1. Webseite besuchen (https://play.google.com/apps/publish/signup/ (opens in a new tab))
2. AGBs akzeptieren
3. Kreditkartendaten angeben
4. Unternehmensdaten eingeben

App signieren

Nun muss man die App signieren. Dazu muss man sich die Signatur aus der Google Play Console besorgen.
Dieses Signaturzertifikat kann nun die App integriert werden.

{
    "android": {
        "apk": {
            "keystore": "IhreAPP.keystore",
            "storePassword": "IhrPasswort",
            "alias": "IhreAPP",
            "password": "IhrPasswort",
            "keystoreType": "",
            "packageType": "apk"
        },
        "release": {
            "keystore": "IhreAPP.keystore",
            "storePassword": "IhrPasswort",
            "alias": "IhreAPP",
            "password": " IhrPasswort",
            "keystoreType": "jks",
            "packageType": "bundle"
        }
    }
}

Bei Angular können diese Konfigurationen in die environment Files gepackt werden.

App erstellen

Danach kann man einen APK-Export der App builden.

Build hochladen

Dieses File kann dann hochgeladen werden. Dabei unterscheidet man zwischen einem Test und einem Release.

Ebenfalls noch wichtig ist, dass man zuvor sieben bis zehn Fotos im Hoch- und Querformat erstellt. Entscheidend dabei sind auch die, mindestens zwei, Bilder im Tablet Format. Diese machen die App dem User schmackhaft.

Resultate begutachten

Nun kann man sich die Daten und das Feedback der App ansehen.

Stores

Doch was ist der Google Play Store und gibt es Alternativen?

Google Play Store

Seit dem 22. Oktober 2008 steht die Nutzung des Stores zur Verfügung. Entwickelt wurde dieser von Google.

App Store

Ebenfalls im Jahre 2008 wurde der App Store als digitale Vertriebsplattform für Anwendersoftware veröffentlicht. Apple bietet somit auch eine Plattform für Mobile Apps.

F-Droid

Eine Alternative zum App Store bietet F-Droid. Die Plattform bietet ausschliesslich Android Software an, welche Gratis ist.

Amazon App Store

Auch der Amazon App Store bietet Android Apps an. Er zeichnet sich durch die Prüfung der Anwendungen vor der Aufnahme aus.

APK-Datei

Die Applikation kann auch in eine APK-Datei verpackt werden. Aus dieser kann dann ein User die App entpacken.

Planung

Projektname

Der Name meines Projekts lautet Connect-Mitarbeiterverwaltung.
Das Ziel der App ist es, dass Mitarbeiter untereinander "connecten" können.

Beschreibung

Die App soll alle Mitarbeiter mit den entsprechenden Informationen anzeigen. Auf jedem Device kann ein Profil eingerichtet werden. Dieses kann auch vom Ersteller bearbeitet und gelöscht werden. Zu den anzuzeigenden Informationen gehören:

• Vorname
• Name
• Job Titel
• Telefonnummer

Storyboard

Zur Erstellung des gesamten Designs verwendete ich den Vektorgrafik-Editor Figma. Ich entschied mich für Figma, da ich das Tool schon gut kannte.

Version 2.0

Titel: Connect Mitarbeiterverwaltung - Storyboard
Datum: 02.10.2021
Ersteller: Kay Wild
Display: iPhone 13 (W: 375, H: 812)
Link: https://www.figma.com/file/WSLuXTx5BCzuYU4I1Qi24Q/%C3%9CK?node-id=0%3A1 (opens in a new tab)

Hierbei ist angedacht, dass das Design auf Dunkel umstellt, wenn der Dark Mode auf dem Device aktiviert ist.

Mockups

Meine Mockups sind in der Low oder Middle Fidelity Stufe gezeichnet. Dies liegt daran, dass die Bilder und Texte noch aus Beispieldaten bestehen. Die Screens will ich aber so umsetzen.

Handy Portrait

Version 2.0

Titel: Connect Mitarbeiterverwaltung - Mockup
Datum: 02.10.2021
Ersteller: Kay Wild
Display: iPhone 13 (W: 375, H: 812)
Link: https://www.figma.com/file/WSLuXTx5BCzuYU4I1Qi24Q/%C3%9CK?node-id=0%3A1 (opens in a new tab)

Handy Landscape

"Apps should only be programmed to use multiple orientations if they would be useful in multiple orientations."
Ich befolge diesen Ratschlag, da ich in diesem Fall keine Vorteile in einer Landscape App sehe.

Tablet Portrait

Die Zielgruppe meiner App sind Handy User. Trotzdem wäre es schön, wenn die App auch mit einem iPad bedienbar wäre. Da ich die App mit Ionic umsetze, sollte dies der Fall sein. Jedoch lege ich kein Augenmerk darauf und mache auch keine separaten Anpassungen.

Version 2.0

Titel: Connect Mitarbeiterverwaltung - Mockup
Datum: 02.10.2021
Ersteller: Kay Wild
Display: iPad Pro (W: 834, H: 1194)
Link: https://www.figma.com/file/WSLuXTx5BCzuYU4I1Qi24Q/%C3%9CK?node-id=0%3A1 (opens in a new tab)

Tablet Landscape

Auch beim Tablet sollte der Landscape Modus gesperrt werden.

Systemdokumentation

Umgebung Einrichten

Wie ich meine Umgebung eingerichtet habe, kann man mithilfe der untenstehenden Tabelle ansehen. Dabei ist wichtig, dass man die Installationen sauber durchführt und auch jeweils die korrekte Version herunterlädt, sodass es nicht zu Konflikten kommt.

Projekt Setup

Um mein Projekt zu verwenden, müssen andere Entwickler lediglich mein Repository klonen. Dies können sie mit folgendem Befehl tun: gh repo clone kayjw/connect-mitarbeiterverwaltung
Alternativ kann man auch den Ordner von https://github.com/kayjw/connect-mitarbeiterverwaltung.git (opens in a new tab) herunterladen und entpacken.

Daraufhin kann man mit npm install die nötigen Pakete installieren.

Projekt im Browser starten

Um das Projekt im Browser zu starten, dient folgender Befehl: npm start

Projekt im Simulator starten

Das Projekt kann aber auch im Android Simulator gestartet werden.

1. ionic capacitor add android
2. ionic capacitor copy android
3. Android Studio: JDK Version 11 auswählen
4. Neues Device anlegen
5. ionic capacitor open android
6. In Android Studio auf Play drücken

In meinem package.json befindet sich aber auch ein Befehl, der diese Schritte vereinfacht:
npm run emulate:android

Sensor/Aktor

Die Capacitor Device Geräte-API stellt interne Informationen über das Gerät, wie z. B. das Modell und die Betriebssystemversion, sowie Benutzerinformationen wie eindeutige Kennungen zur Verfügung.
Das Packet wird immer beliebter.

Mehr Informationen findet man in der Dokumentation: https://capacitorjs.com/docs/apis/device (opens in a new tab)

Wie verwendet Sie die Datenbank

Struktur

Die Struktur meiner Datenbank sieht folgendermassen aus:

Zugriffsrechte

Dabei sind die Zugriffsrechte so definiert, dass man die Daten nur mit einem exakten Pfad ändern kann.

Will jemand also einfach alle Daten holen, so wird er abgelehnt.

Einbindung

Firebase kann in elf Schritten eingebunden werden.

1. Webseite besuchen: https://console.firebase.google.com/ (opens in a new tab)
2. Projekt erstellen
3. App erstellen
   
4. App Name vergeben
5. Firebase Konfiguration sichern
   
6. Unter Develop->Database->Create Database eine neue Datenbank erstellen
7. Die im vorherigen Kapitel beschriebenen Regeln definieren
8. Firebase im Projekt installieren
   npm install firebase @angular/fire --save
9. Die gesicherte Konfiguration unter src in die zwei environment Dateien hereinkopieren
10. Firebase in den nötigen Files importieren
    employees.service.ts

    import { FirebaseApp, initializeApp } from 'firebase/app';
    import {
        getDatabase,
        ref,
        onValue,
        push,
        set,
        remove,
        update,
        query,
        equalTo,
        get,
        orderByChild,
        child,
    } from 'firebase/database';
    import {
        Database,
        DatabaseReference,
        DataSnapshot,
        Unsubscribe,
    } from 'firebase/database';
11. Die App initialisieren, damit man mit der DB arbeiten kann.
    employees.service.ts

    this.firebaseApp = initializeApp(environment.firebase);
    this.database = getDatabase(this.firebaseApp);

Wie stellen Sie eine Persistenz der Daten sicher?

Wie bereits beschrieben wird die Offline-Datenpersistenz von Firebase unterstützt. Jedoch habe ich trotzdem eine Meldung eingebaut, welche dem User mitteilt, dass er nicht mehr mit dem Internet verbunden ist.

Möglichkeiten, die App zu testen

Die Testverfahren habe ich weiter oben beschrieben. Aus den notierten Gründen teste ich die App manuell in Android Studio.

Simulationsumgebungen

Ich verwendete während dieses Projektes drei Simulatoren.

Bedienungsanleitung

Home

Startet man die App, so landet man im Mitarbeiter Bereich. Dort windet man eine Übersicht mit allen Arbeitskollegen. Die Ansicht kann bei Bedarf mit einer Wisch Geste nach unten aktualisiert werden.

Suchfeld

Das Suchfeld ermöglich eine Filterung nach Vornamen, Nachname, Job Bezeichnung oder Telefonnummer. Dadurch können die gewünschten Personen schnell gefunden werden.

Profil

In der Tab Navigation kann man zum persönlichen Profil wechseln.

Hinzufügen

Hat man noch kein Profil erstellt, so kann man hier eines hinzufügen. Man muss folgende Daten angeben:

• Vorname
• Nachname
• Job Titel
• Telefonnummer

Editieren

Über den Button Profil bearbeiten kann mein seine eingegebenen Daten ändern.

Löschen

Das eigene Profil kann man über dasselbe Modal auch wieder löschen.

Testdokumentation

Wie weiter oben beschrieben, werde ich diese Tests manuell durchführen.
Die Testfälle wurden grösstenteils vor der Entwicklung erstellt.
Bei der Durchführung verwendete ich unter anderem den Pixel 5 API 30 Emulator und ein Huawei Handy.

Software-Tests

Usability-Tests

Um die Usability zu testen, habe ich eine Microsoft Forms Umfrage erstellt. Ich bat meine Schulkammeraden diese nach dem Testen meiner App auszufüllen. Dabei konnten sie zwischen einem und fünf Punkte vergeben. Dies sind die Ergebnisse.

Zudem gab es drei Feedbacks:

• "Dunkles Design gefällt mir"
• "Elemente der App sind mir bekannt, da ich privat iOS nutze"
• "Gut Navigierbar"

Implementation

Umsetzung des Sensors, Aktors und Probleme

Ohne Unique Device Identifier, könnte ich nicht jedem Gerät ein persönliches Profil zuordnen. Deshalb habe ich das Capacitor Device Plugin installiert.

npm install @capacitor/device
npx cap sync

Dieses Plugin kann ich dann in einem meiner Services importieren.

import { Device } from '@capacitor/device';

Danach kann ich mithilfe der getId() Methode die ID des jeweiligen Gerätes auslesen.

Device.getId();

Diesen Service verwende ich dann, um die ID in die Datenbank zu speichern. So kann jeder nur sein eigenes Profil erstellen, bearbeiten und löschen.

Probleme

Es sind weder bei der Installation noch bei der Verwendung Probleme aufgetreten. Natürlich brauchte ich etwas Zeit, um mich einzulesen. Jedoch war die Dokumentation sehr akkurat.

Umsetzung Datenbank und Probleme

Die Datenbank hat mir am meisten Probleme bereitet. Ich verbrachte einen ganzen ÜK-Tag und das gesamte Wochenende mit der Einbindung.
Vorerst funktioniert das Setup weder mit der normalen Firebase Installation noch mit dem angularfire2 Paket. Deshalb war ich s ehr erleichtert, als ich endlich Daten manipulieren konnte.

Backup der Datenbank Dummy Daten

{
    "employees": {
        "0": {
            "firstName": "Olive",
            "lastName": "Yew",
            "jobTitle": "Senior Frontend Engineer",
            "phoneNumber": "+41 79 000 00 00",
            "profile": "8417fe3e-d2f0-4704-b511-7c2345f0f2v2"
        },
        "1": {
            "firstName": "Aida",
            "lastName": "Bugg",
            "jobTitle": "Talent Manager",
            "phoneNumber": "+41 79 000 00 00",
            "profile": "8417fe3e-d2f0-4704-b511-7c2345f0f2v3"
        },
        "2": {
            "firstName": "Maureen",
            "lastName": "Biologist",
            "jobTitle": "Junior Java Developer",
            "phoneNumber": "+41 79 000 00 00",
            "profile": "8417fe3e-d2f0-4704-b511-7c2345f0f2v4"
        },
        "3": {
            "firstName": "Teri",
            "lastName": "Dactyl",
            "jobTitle": "Senior PHP Developer",
            "phoneNumber": "+41 79 000 00 00",
            "profile": "8417fe3e-d2f0-4704-b511-7c2345f0f2v5"
        },
        "4": {
            "firstName": "Peg",
            "lastName": "Legge",
            "jobTitle": "Social Media Marketing",
            "phoneNumber": "+41 79 000 00 00",
            "profile": "8417fe3e-d2f0-4704-b511-7c2345f0f2v6"
        }
    }
}

Projekt erstellen

Um ein Angular Projekt aufzusetzen, muss man folgenden Befehl ausführen:

ionic start

Genauere Informationen zu den weiteren Informationen sind weiter oben beschrieben.

Dateien

In folgender Tabelle zeige ich, welche Ordner welche Dateien beherbergen.

Einstellungen

Same-Origin-Policy

Das Sicherheitskonzept untersagt Skriptsprachen wie JS oder CSS auf Objekte zuzugreifen, welche von einer anderen Seite stammen.
Da ich diese Arbeit mit Ionic durchführe, muss und sollte ich hier nichts überschreiben. Dies wird von Ionic übernommen.

Icon

Zur Erstellung der Icons musste ich zwei Files anlegen.

icon.png

Dieses Icon musste ich unter resources mit der Grösse 1024x1024 Pixel anlegen.

splash.png

Dieses Icon musste ich unter resources mit der Grösse 2732x2732 Pixel anlegen.

Script

Danach führte ich ein Script aus, welches die nötigen Dateien generiert und in resources ablegt.

Umfang der APP

Doch was keine meine App jetzt?

Meine App zeigt alle Personen eines Betriebs an. Somit können Informationen über die einzelnen Mitarbeiter gewonnen werden.
Zudem hilft sie beim Finden von Personen. Wenn man ein Problem mit dem Laptop hat und jemanden aus ITS-Abteilung sucht, so muss man nur nach "ITS" suchen. Nun hat man die Kontaktdaten der gewünschten Person.
Wenn man neu in der Firma arbeitet und eine Person kennenlernt, so findet man dank der App auch schnell heraus, was die Person macht.
Jede Arbeitskraft der Firma hat die Möglichkeit, ein Profil zu erstellen. Somit wird sie dann von den anderen Personen wahrgenommen. Dieses Profil kann bearbeitet und bei Bedarf auch gelöscht werden.

Zukunftsaussichten

Momentan verwende ich ein Dummy Bild als Profilbild. Dieses könnte aber auch vom User ausgewählt werden können. Somit würde die App noch etwas persönlicher werden. Zudem ist das Profil erweiterbar. Man könnte also in weiteren Versionen beliebig viele Daten, wie z.B. den Standort, die Fähigkeiten, Hobbys, … hinzufügen.

Programmaufbau

Ich setzte meine Applikation komponentenbasiert um. Eine Page besteht jeweils aus mindestens vier Files.

In der HTML-Datei ist die Struktur dargestellt.
Im SCSS File wird die Seite gestyled. Sass ist eine Stylesheet Sprache, welche die Pflege von grossen Stylesheets durch ihre Funktionen erleichtert. Darin kann aber auch normales CSS geschrieben werden.
Die spec.ts Datei kann jeweils einen Unit Test für den Komponenten enthalten.
Die von Microsoft entwickelte Programmiersprache Typescript wird im TS-File verwendet. Darin findet man die Logik der Komponente.

Neben Pages gibt es aber auch noch Models. Diese enthalten die Strukturierung der Daten.

Services habe ich drei. Durch den device-auth Service bekommt man die Geräte ID. Der employees Service führt die CRUD Operationen aus und is-online kann einen Toast ausgeben, wenn keine Internetverbindung besteht.

Codequalität

ESLint

Die Codequalität habe ich mit ESLint sichergestellt. Dies ist in den Testfällen dokumentiert.

Prettier

Zur Formatierung verwendete ich Prettier.

Fazit

Auf diesen ÜK habe ich mich sehr gefreut, da ich noch nie zuvor eine App programmiert habe. Handys dominieren in der heutigen Welt immer mehr den Markt. Deshalb finde ich es wichtig, dass man bei der Softwareentwicklung auf diese Geräte abzielt.
Besonders Spass hat mir das Programmieren mit Angular Ionic gemacht. Denn in diesen 5 Tagen habe ich enorm viel gelernt.
Einfach fand ich die Erstellung der Mockups und Prototypen, da ich mich gut mit Figma auskenne.
Etwas schwieriger fand ich, die Simulatoren zum Laufen zu bringen. Besonders aufreibend war das Einbinden von Firebase. Daran sass ich einen Grossteil meines Wochenendes.

Das nächste Mal würde ich den ÜK wieder mit Angular Ionic absolvieren. Dies ist aufwändiger. Jedoch hat sich der Einsatz, meiner Meinung nach, gelohnt. Denn ich habe viel über Angular, Ionic, npm, Entwicklungsumgebungen, Plugins und Testvarianten gelernt.
Zudem bin ich erstaunt, wie schnell man eine simple App programmieren kann.