Connect - Employee Relations (Angular Ionic)

Translated from German using DeepL.

Date: December 2021
Reading time: 30 minutes

Foreword

This documentation describes the path from brainstorming to finished application. It is structured as follows.

First, I describe my initial thoughts and explain which idea I will implement. I think about how to extend the app and what can be implemented in this training course.
Then I go into the concept. I analyze the possibilities as well as sensors, databases and development environments. I also design the mockup and the . I then formulate how I set up the project and which sensors and databases I decided to use. In this chapter I show how I will implement this project.
Then I define and execute the test cases.
Finally, I explain how I set up and implemented the project.

Idea

First, I thought about applications that I could implement. There were three ideas on the shortlist.

Customer management

As an employee of a company, it is important to be able to contact customers. However, this is sometimes a little difficult if the contact details cannot be found. That's why an app could provide an overview.

In addition to contact information, you could also store information such as location, date of birth, or favorite restaurants. The possibilities are endless.

Employee management

Employee management would be at least as interesting.
I work in a company with thousands of employees. In St. Gallen alone, there are about 200 people. If I'm looking for a person from a certain department, it can be tedious. That's why an app like this could help.
Every employee could create a personal profile. A user can then see all the people in an overview. They can then use a search field to find the relevant people.

Product management

I would also find product management for sneakers an exciting project. However, you can only store a limited number of images in a DB. That's why I quickly decided against this idea.

Decision

In the end, I decided on employee management because I see added value in such an application. I also like software that solves a problem.
There are also many expansion options that I could implement after this training:

• Photos could be added to the profiles to make the application more personal. These could be selected when creating a profile or captured by the camera.
• Especially because of the current Covid-19 situation, it would be useful to see who is sitting where. This would make it possible to contact the relevant colleagues in case of a positive case.
• For this project I plan to store name, skills (department) and phone number. But you could also store location, floor, hobbies, social networks and much more.

Concept

Possibilities

There are three common types of applications. I have taken a closer look at them here.

Webapp

A web application is not installed locally on the user's device. The data processing takes place on the web server.

Hybrid

A hybrid app is also a browser application. It is based on web technologies, but still has access to the native APIs and functions of the respective operating system. Therefore, it behaves like a native application.

Native

Native applications are developed for a specific operating system. The code is written for a specific processor.

Comparison

Now that I knew what types there were, it was time to compare them. I did this with the help of a table.

Legend: 🟩 = good, 🟨 = medium 🟥 = bad

Conclusion

In this course we have to implement a hybrid application. I am happy about this for the following reason:

• Hybrid came out on top in my comparison.
• I find it an interesting topic because I have often worked with web technologies.

Competition

As I was documenting my idea, I looked around for competing products.

Xing

Xing manages professional contacts. The company is operated by New Work SE.

LinkedIn

LinkedIn is a web-based social network for making and maintaining business contacts. With 660 million users, 24 languages and 193 countries, the California-based software is very popular.

USP

An app I build in 5 days can hardly compete with LinkedIn or Xing.
But what makes my app different? What is my unique selling point?
My app is characterized by the following points:

• It is very simple and therefore quick to learn
• It is free and does not contain any advertising
• It can be adapted to the needs of my teaching company

Business model

There are three basic ways to monetize an app.

Advertising

Companies pay money to have their ads displayed in the app. You could also charge the user money to remove these ads.

Price

Another option would be to charge for the download.

My app

Advertising would look unprofessional and disrupt the workflow. Also, I don't want to charge since the app will be used for internal purposes.

Sensors

I need to talk to a sensor in my app. So I've thought about what sensors are available and how to access them.

Overview

This is an overview of the sensors and actuators that came into question for me.

Plugins

Angular provides 2 plugins for addressing the native APIs.

Decision

I decided to read out the Unique Device Identifier, as I absolutely need this to identify the owner of the data.
Unique Device Id: https://ionicframework.com/docs/native/unique-device-id (opens in a new tab) I also decided to use the Capacitor plugin, as this is recommended by Ionic.

Database

Next, I did some research on different databases.

All of these databases differ slightly from one another. Each offers its own possibilities.
You can find more information about each database on the linked website.

Conclusion

I will use Firebase. I don't like the fact that the database is not relational. However, it seems that this database is easy to set up and use. It is also suggested by the course.

Persistence of data

Firebase supports offline data persistence. It automatically handles the local data and synchronizes it again when a connection is established.
This means that the app can run with all CRUD functions at all times.

Development environment

Before I decided on a framework, I had to weigh up the individual ones.

Mobile Angular

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

Angular is an open-source frontend framework that is primarily used for single-page applications. The logic is written with TS or JS.

In Angular, projects are divided into modules, components and services. Each application has at least one root component and one root module.
The components consist of HTML with an Angular template syntax. This allows data to be received and elements to be rendered.
The unique thing about Angular is the separation of the UI components and the JS logic.

The features include:

• Many features
• Everything is built-in
• TS
• HTML and TS are separated

React

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

React describes itself as a JS frontend library. React is mostly used to develop web and mobile applications.
React is a UI library that does not prescribe a specific structure.
An application consists of elements and components. Elements are more powerful than DOM elements because they are updated efficiently when changes are made. A component is a larger block that can accept inputs and produce elements.

The features include:

• Minimalistic
• Features may need to be searched for in community packages
• It is a library and not a framework
• The JS/JSX code describes what is changed in the DOM
• The same code is responsible for the behavior and UI

Vue

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

Vue is an open source JS framework for creating UIs and single page applications.
Behind Vue is not a company but a former Google employee.

The framework is structured in such a way that the framework is written with HTML and the logic with JS. Components can be created in JS, which can then be used in HTML.

The features include:

• To use Vue, you only need to import the framework
• The framework is simple
• A few important features are built in
• Vanilla JS is used for the logic

Ionic

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

Ionic is a UI toolkit with which you can write hybrid apps and progressive web apps. Once you have installed it, you can use the components. This allows you to create a well-designed application with relatively little effort.
The documentation of the framework is very precise.

Flutter

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

Flutter is a development kit from Google. The instructions are very good. However, this framework is not recommended in this course as the app may not run securely.

Apache Cordova

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

The Cordova framework is recommended in this course because you can write HTML, CSS and JS code.

Solar2D (Corona)

Release: 2009 Developer: Corona Labs Inc (since 2020: Vlad Shcherban) Website: https://solar2d.com (opens in a new tab) Projects: Many private but no well-known

The Solar2d framework, which was originally called Corona, helps you program two-dimensional games.
The documentation is appealing. There is also a long list of sensors that can be addressed.

Conclusion

Before my research, I was familiar with React, Vue and Angular. However, I haven't used any of these frameworks yet.
At work, I deal with JavaScript, SCSS and handlebars in the frontend. That's why I think I would have understood Cordova very quickly. However, as I have always wanted to get to know Angular, I see this training course as an opportunity to do so. Therefore, I will accept the challenge and write the application with Angular Ionic.

I use Visual Studio Code as my development environment, as this is one of my favorite IDEs. Especially since I am now trying out a framework that is unknown to me, I don't want to take on any additional burden. I also know the necessary shortcuts from VSC.

Usability

Usability is about a user achieving a specific goal effectively, efficiently and satisfactorily. To achieve this, developers must pay attention to certain ergonomic standards.

Principles and guidelines of software ergonomics (ISO-9241-10)

Task appropriateness

The software supports the user by providing information and functions in an appropriate form and sequence.

Self-descriptiveness

The dialog steps are understandable thanks to the feedback. If a user does not understand something, it is explained to them on request.

Controllability

Users can start the process and influence the direction and speed in order to reach the goal.

Conformity to expectations

The dialogs are consistent and correspond to the knowledge from other applications.

Error tolerance

It should be possible to undo unintentional errors without great effort. The system must also be able to withstand error inputs.

Customizability

The software should be customizable according to preferences.

Ease of learning

The user is supported in learning the software.

What does a user pay attention to?

Our training group jointly collected points that a user pays attention to when using an app.

• Cross platform
• Design
• Memory used
• Functionality
• Price
• Rating in the store
• Usability
• How much access the app needs to the system
• Open source

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

What does a developer look out for?

We then noted down together what a developer must not ignore.

• Effort
• Customer requirements
• Security
• Development costs
• App presentation in the store
• Advertising (none or well placed)
• Customer requirements

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

Target platform

I decided to focus on Android when creating the app. However, as I am developing the app with Ionic, the presentation should also be appealing on iOS.

My app should ultimately serve at least the following versions.

I have a particular focus on devices from the following manufacturers.

• Samsung
• Apple
• Huawei

Tests

Now I've thought about which test procedures I know.

Functional tests

Functional testing is about testing the function of a component. You write a test that must always be passed. After a change in the code, this test can be executed again. You can then see whether the component still meets expectations.

Cypress

Cypress is a tool that enables such a test.

The framework provides functions that make testing easier.

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

Visual tests

Example:
I have a finished website. Now I want to make a small change to the code. However, this should not affect the appearance of the website. After this change, you can carry out such a test. You can then see whether anything has changed.

But you can also see the changes without such a test, can't you?

A test takes pictures of a page and compares them with the reference. The software can detect minimal differences. This also applies to different sizes. You also save time as you don't have to navigate manually over every single page.

Backstop

Backstop can be used to perform such a visual test.

If you run a test, you can see what has been changed.

As these tests are executed with Docker, they deliver the same results on all systems. Docker allows you to run programs in isolation. The environment is comparable to a VM. With Docker, however, an entire environment can be provided and less memory is required.

Usability methods

There are recommended methods that can be used to check the user experience (UX) of a product.

• Best practice analysis
• Card sorting
• Eye tracking
• Questionnaires
• Heuristic evaluation
• Interviews & surveys
• Criteria catalogs
• Personas
• Usability tests
• Walkthrough method

I decided to deliver my prototype for testing and collect feedback via a Microsoft Forms survey.

Manual

In this project, I will mainly test manually due to time constraints. If the project were to take longer than 5 days, scripts would probably be the better choice. In the short term, however, I can save some time this way.
For testing I will mostly use the Android Studio and the Xcode Simulator. However, I will also use the browser view during development.
When the app is finished, I will use Lars' cell phone to test the app.

Publishing

To publish the app, you must follow the steps below.

Google Developer

First you have to create a Google account.

1. visit the website (https://accounts.google.com (opens in a new tab))
2. create an account
3. fill out the form
4. activate your account

Then you can create a developer account.

1. visit the website (https://play.google.com/apps/publish/signup/ (opens in a new tab))
2. accept terms and conditions
3. enter credit card details
4. enter company details

Sign the app

Now you have to sign the app. To do this, you must obtain the signature from the Google Play Console.
This signature certificate can now be integrated into the app.

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

With Angular, these configurations can be packed into the environment files.

Create app

You can then build an APK export of the app.

Upload build

This file can then be uploaded. A distinction is made between a test and a release.

It is also important to create seven to ten photos in portrait and landscape format beforehand. At least two pictures in tablet format are also crucial. These make the app appealing to the user.

View results

You can now view the data and feedback from the app.

Stores

But what is the Google Play Store and are there alternatives?

Google Play Store

The store has been available for use since October 22, 2008. It was developed by Google.

App Store

The App Store was also published in 2008 as a digital distribution platform for user software. Apple thus also offers a platform for mobile apps.

F-Droid

F-Droid offers an alternative to the App Store. The platform only offers Android software, which is free of charge.

Amazon App Store

The Amazon App Store also offers Android apps. It is characterized by checking the applications before they are accepted.

APK file

The application can also be packaged in an APK file. A user can then unpack the app from this file.

Planning

Project name

The name of my project is Connect Employee Management.
The aim of the app is to enable employees to "connect" with each other.

Description

The app should display all employees with the relevant information. A profile can be set up on each device. This can also be edited and deleted by the creator. The information to be displayed includes

• First name
• Last name
• Job title
• Telephone number

Storyboard

I used the vector graphics editor Figma to create the entire design. I decided to use Figma because I already knew the tool well.

Version 2.0

Title: Connect Employee Management - Storyboard Date: 02.10.2021 Creator: 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)

The idea here is that the design switches to dark when dark mode is activated on the device.

Mockups

My mockups are drawn in the low or middle fidelity level. This is because the images and texts still consist of sample data. However, I want to implement the screens in this way.

Handy Portrait

Version 2.0

Title: Connect Employee Management - Mockup Date: 02.10.2021 Creator: 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 sollten nur dann für die Verwendung mehrerer Ausrichtungen programmiert werden, wenn sie in mehreren Ausrichtungen nützlich sind."
Ich befolge diesen Ratschlag, da ich in diesem Fall keine Vorteile in einer Landscape App sehe.

Tablet Portrait

The target group of my app are cell phone users. Nevertheless, it would be nice if the app could also be used with an iPad. As I am implementing the app with Ionic, this should be the case. However, I do not pay attention to this and do not make any separate adjustments.

Version 2.0

Title: Connect Employee Management - Mockup Date: 02.10.2021 Creator: 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

Landscape mode should also be disabled for the tablet.

System documentation

Setting up the environment

You can see how I have set up my environment using the table below. It is important that you carry out the installations correctly and download the correct version in each case so that there are no conflicts.

Project setup

To use my project, other developers only need to clone my repository. They can do this with the following command: gh repo clone kayjw/connect-employee-management.
Alternatively, you can also download the folder from https://github.com/kayjw/connect-mitarbeiterverwaltung.git (opens in a new tab) and unzip it.

You can then use npm install to install the necessary packages.

Starting the project in the browser

To start the project in the browser, use the following command: npm start

Start the project in the simulator

The project can also be started in the Android simulator.

1. ionic capacitor add android.
2. ionic capacitor copy android
3. select Android Studio: JDK Version 11
4. create new device
5. ionic capacitor open android.
6. press play in Android Studio

In my package.json there is also a command that simplifies these steps:
npm run emulate:android

Sensor/Actuator

The Capacitor Device device API provides internal information about the device, such as the model and operating system version, as well as user information such as unique identifiers.
The package is becoming increasingly popular.

More information can be found in the documentation: https://capacitorjs.com/docs/apis/device (opens in a new tab)

How to use the database

Structure

The structure of my database looks like this:

Access rights

The access rights are defined in such a way that the data can only be changed with an exact path.

So if someone simply wants to get all the data, they will be rejected.

Integration

Firebase can be integrated in eleven steps.

1. visit the website: https://console.firebase.google.com/ (opens in a new tab)
2. create project
3. create app
   
4. assign app name
5. save Firebase configuration
   
6. create a new database under Develop->Database->`Create Database
7. define the rules described in the previous chapter
8. install Firebase in the project
   npm install firebase @angular/fire --save
9. copy the saved configuration under src into the two environment files
10. import Firebase in the necessary files
    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. Initialize the app so that you can work with the DB.
    employees.service.ts

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

How do you ensure data persistence?

As already described, offline data persistence is supported by Firebase. However, I have added a message that informs the user that he is no longer connected to the Internet.

Ways to test the app

I have described the test procedures above. For the reasons noted, I test the app manually in Android Studio.

Simulation environments

I used three simulators during this project.

Operating instructions

Home

When you start the app, you land in the employee area. An overview of all colleagues is displayed there. If necessary, the view can be refreshed with a swipe gesture downwards.

Search field

The search field allows you to filter by first name, surname, job title or telephone number. This allows the desired persons to be found quickly.

Profile

You can switch to your personal profile in the navigation tab.

Add

If you have not yet created a profile, you can add one here. You must enter the following data:

• First name
• Last name
• Job title
• Phone number

Edit

You can use the Edit profile button to change the data you have entered.

Delete

You can also delete your own profile using the same modal.

Test documentation

As described above, I will carry out these tests manually.
Most of the test cases were created before development.
Among other things, I used the Pixel 5 API 30 emulator and a Huawei cell phone.

Software tests

Usability tests

To test the usability, I created a Microsoft Forms survey. I asked my classmates to fill it out after testing my app. They could give it between one and five points. These are the results.

There were also three pieces of feedback:

• "I like the dark design"
• "Elements of the app are familiar to me as I use iOS privately"
• "Easy to navigate"

Implementation

Implementation of the sensor, actuator and problems

Without a unique device identifier, I could not assign a personal profile to each device. That's why I installed the Capacitor Device Plugin.

npm install @capacitor/device
npx cap sync

I can then import this plugin into one of my services.

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

Then the getId() method can be used to read out the ID of the respective device.

Device.getId();

This service can then be used to save the ID in the database. That means that everyone can only create, edit and delete their own profile.

Problems

No problems were encountered during installation or use. Of course, I needed some time to familiarize myself with it. However, the documentation was very accurate.

Database implementation and problems

The database caused me the most problems. I spent a whole training day and the entire weekend on the integration.
At first the setup did not work with the normal Firebase installation nor with the angularfire2 package. I was therefore relieved when I was finally able to manipulate data.

Backup of the database dummy data

{
    "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"
        }
    }
}

Create project

To set up an Angular project, you must execute the following command:

ionic start

More detailed information on further information is described above.

Files

The following table shows which folders contain which files.

Settings

Same-Origin-Policy

The security concept prohibits scripting languages such as JS or CSS from accessing objects that originate from another page.
Since I am doing this work with Ionic, I do not have to and should not overwrite anything here. This is done by Ionic.

Icon

I had to create two files to create the icons.

icon.png

I had to create this icon under resources with the size 1024x1024 pixels.

splash.png

I had to create this icon under resources with the size 2732x2732 pixels.

Script

Then I executed a script which generates the necessary files and stores them in resources.

Scope of the app

But what doesn't my app do now?

My app shows all the people in a company. This provides information about the individual employees.
It also helps to find people. If you have a problem with your laptop and are looking for someone from the ITS department, all you have to do is search for "ITS". Now you have the contact details of the person you are looking for.
If you are new to the company and get to know a person, you can quickly find out what they do thanks to the app.
Every employee at the company has the option of creating a profile. This makes them visible to other people. This profile can be edited and deleted if necessary.

Future prospects

At the moment I use a dummy picture as my profile picture. However, it could also be selected by the user. This would make the app even more personal. The profile can also be expanded. So you could add as much data as you like in future versions, such as location, skills, hobbies, etc.

Program structure

I implement my application on a component basis. A page consists of at least four files.

The structure is shown in the HTML file.
The page is styled in the SCSS file. Sass is a stylesheet language that facilitates the maintenance of large stylesheets through its functions. However, normal CSS can also be written in it.
The spec.ts file can contain a unit test for each component.
The Typescript programming language developed by Microsoft is used in the TS file. It contains the logic of the component.

In addition to pages, there are also models. These contain the structuring of the data.

I have three services. The device-auth service gives you the device ID. The employees service executes the CRUD operations and is-online can issue a toast if there is no internet connection.

Code quality

ESLint

I have ensured the code quality with ESLint. This is documented in the test cases.

Prettier

I used Prettier for formatting.

Conclusion

Since I had never programmed an app before, I was really looking forward to this course. Mobile phones are dominating the market more and more in today's world. That's why I think it's important to target these devices when developing software.
I especially enjoyed programming with Angular Ionic. I learned a lot in those 5 days.
Since I am very familiar with Figma, I found it easy to create mockups and prototypes.
Getting the simulators up and running was a bit harder. The Firebase integration was especially grueling. I spent most of the weekend working on it.

Next time I would do the course again using Angular Ionic. It is more time consuming. But in my opinion it was worth the effort. I learned a lot about Angular, Ionic, npm, development environments, plugins and testing.
I am also amazed at how quickly you can program a simple application.