We needed a drawer that scales down the content page when opened for one of our recently developed apps. We were already using the react-navigation/drawer package, so this should easily be possible by setting some props, right? Unfortunately, the API slightly changed with react-navigation v6, and most of the examples and tutorials online were outdated and did not work. So, to save you some headache, I will show you how to create a content-scaling drawer without any third-party packages, just simple react navigation.

While researching, we found the npm package react-native-scaling-drawer, which you might be happy to use. However, this is the last option if you want to avoid additional third-party packages for features that you might expect are already included in comprehensive packages like react-navigation. So we went on and read our way through the react navigation docs only to find out that the drawerContents' progress property was removed in v6. Instead, the new useDrawerStatus and useDrawerProgress hooks should be used. I will show you an example.

Setup

We will create a blank react native project using Expo for the example project.

$ expo init react-navigation-6-scaling-drawer

We now have a blank app running. Next up, we add the navigation packages and the animation packages.

$ npm install -S @react-navigation/native @react-navigation/drawer 

$ expo install react-native-screens react-native-safe-area-context react-native-reanimated react-native-gesture-handler

We start by adding two simple screen components to simulate the page navigation.

After that, we create our drawer component based on the react-navigation/drawer and place it in the App component.

As intended, this already provides us with the basic drawer functionality. Now we have to adjust the behavior and styling to make it scale.

Scale it!

The key feature of our scaling behavior will be a reusable wrapper component for our plain home and profile screens. The wrapper adds an abstraction layer for the scaling animation to be used with any other (existing) screen component without knowing anything about its implementation details. The screen component does not have to know about the drawer navigator either.

So here’s our animated scaling wrapper using the new useDrawerStatus hook.

As you can see, we use the useDrawerStatus hook to keep track of the open/closed status. We scale the content page to 80% if the drawer is opened to achieve the desired effect. You might want to play around with this value according to the needs of your app.

To use our new behavior component, we wrap it around our content screens.

From here on, it’s just about adjusting the styles of the drawer, like setting a background color and styling the menu entries.

Optional: Dynamic status bar color for dark background drawers

If you want to use a dark background, the status bar color has to be set dynamically based on the open/closed state of the drawer. To achieve this, we first install an additional Expo package.

$ expo install expo-status-bar

We can then use its exported method to dynamically update the status bar color in the ScalableScreen wrapper component.

Wrapping up

And there you have it, a scaling drawer using nothing but React navigation v6! Pretty easy to use as a starting point for your custom implementation. The working example can be found here.

Please note that this is only one possible solution for this effect. Some people also implemented the behavior using useDrawerProgress which might work just as well.

Thank you for reading; hopefully I can help you with this tutorial. Happy coding! 🤓

How to Create a Scaling Drawer Using React Navigation 6 was originally published in the peak lab. on Medium, where people are continuing the conversation by highlighting and responding to this story.

In this post I will show you some of the benefits of using a multi-package repository (“a monorepo”) to structure your large scale frontend projects. I will guide you through a simple example and show you some best practices. We will use Javascript and React in this project, still concepts should be applicable to other project types as well.

I’d love to hear how you do things and what you’ve found works well down in the comments.

Prerequisites

Before reading you should have some fundamental knowledge of the following technologies:

1. Node.js and npm
2. React
3. Yarn
4. Git
5. nwb

The Structure

At first we will need a solid directory structure. We will host multiple packages in different directories. Let’s give our root directory the following name: ACME. It’s the client we’re working for. Our client has two websites: one company website and a shop. For each of these projects we create a subdirectory. All packages will live inside a “packages” directory.

Both shop and website follow the same corporate identity and thus will share one component or another (eg. different Buttons, Selects, Text-Fields and so on). Let’s create a “common” directory for these. Components in this directory will be available for all packages.

The same applies for services, eg. a content service, which connects to a headless CMS. Or think of a twitter service that fetches ACME`s latest tweets (or lame jokes like in the example).

Anyway, we will end up with a folder structure like this:

[acme]                                                                                                                                                                                                                                                          
├── package.json
└── packages
    ├── common
    ├── services
    ├── shop
    └── website

A closer look reveals that we have to deal with two different types of packages: libraries (common, services) and apps (shop, website).

We will use create-react-app to initialize the applications and nwb for the libraries. Both projects have excellent documentation, so I won’t cover the installation process in detail.

After you are done with the installation of all four packages, go ahead and delete all node_modules directories. Why? Well, we’ll learn that in the next part.

The Setup

To setup our packages architecture we’ll use a Yarn feature that’s available from Version 1.0: Workspaces. This feature comes along with some nice benefits. Apart from removing redundancy, it allows you to link packages, which means your packages can depend on each other.

We will use yarn init within the root directory to create a package.json file. Add the following to your freshly created file. We’ll call this directory the “workspace root”. Keep in mind that yarn requires you to set private : true .

[ACME/package.json]

{
  "name": "@acme/core",
  "version": "1.0.0",
  "license": "MIT",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

You define your packages within the workspaces: [] array. In the example above we tell Yarn that all our packages will live under packages/*. Setting the wildcard makes life easy and fun (at least in this scenario).

Next go ahead and give you’re packages a name and a version number. It’s good practice to prepend a prefix. This opens up a namespace to avoid conflicts with other packages you might want to use.

[ACME/packages/common/package.json]

{
  "name": "@acme/common",
  "version": "0.1.0",
  "private": true,
  (...)
}

[ACME/packages/services/package.json]

{
  "name": "@acme/services",
  "version": "0.1.0",
  "private": true,
  (...)
}

Now that we have all our packages named, we can go on and add them as dependencies in packages where we want to use them. The package @acme/shop for instance depends on both @acme/common and @acme/services and thus has them listed as dependencies in its package.json file.

[ACME/packages/shop/package.json]

{
  "name": "@acme/shop",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@acme/common": "0.1.0",
    "@acme/services": "0.1.0",
    ...
  },
  ...
}

The same applies for ACME’s website package.

[ACME/packages/website/package.json]

{
  "name": "@acme/website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@acme/common": "0.1.0",
    "@acme/services": "0.1.0",
    ...
  },
  ...
}

Having all in place we can install dependencies by calling yarn install from within the workspace root. The reason for removing the node_modules directories in the first place was that we wanted to allow Yarn to install all project dependencies together. Yarn uses a hoisting scheme to reduce redundancy. In this process all dependent packages are flattened into a global location (our workspace root).

The Example

It’s time to get your hands dirty. Feel free to clone the project from Github and install its dependencies.

git clone https://github.com/thepeaklab/acme-monorepo.git
cd ./acme-monorepo
yarn install

You will find the following in this repository:

• the monorepo structure described above
• a “HelloWorld”-component in the “common” library
• one service that fetches jokes from David Katz random joke api

Don’t be afraid to fiddle around with it.

Start with running yarn run website. This will build both packages common and services and fire up the website’s development-server. If you want to start the shop call yarn run shop. That’s it.

You should end up with something like this …

… two completely independent projects able to share components and services from the same repository.

Both projects are almost identical and self-explanatory. Both have an instance of “HelloWorld” and both display data fetched from our service. The only difference is the value of the “name” property passed to “HelloWorld”.

Of course you don’t have to stop here. Imagine shared state reducers, reused business logic, maybe an independent storybook package to display your components and so on … possibilities of keeping your code DRY are endless. You will end up with a maintainable structure that encourages reusability.

If you liked this article hit that 👋 button below. Thanks for reading!

How to setup a monorepo for react with yarn workspaces was originally published in the peak lab. on Medium, where people are continuing the conversation by highlighting and responding to this story.

thepeaklab/backend-independent-ui-tests

Have you ever asked yourself how backend independent UI testing in Android works? Yes? Then please continue reading… ;)

As an app developer, from time to time you get the chance to integrate external APIs. When it comes to our customer projects, it is often the customer’s backend from which we are able to retrieve corresponding data.

If we need to implement a new feature, the best-case scenario would be that the API has already been adapted on a staging system, so we’re able to connect to it. The reality, however, is that new features often have to be implemented by the customer, as well. So unfortunately, there is seldom an API version available that reflects the new behaviour.

There are two different approaches to start the development:

1. You have a MockServer that simulates the behaviour of the real server and can simply be extended with the new function (assuming there is an agreement on how the API will be implemented).
2. You mock the data within the app and return it directly during test runtime.

Both options have their advantages & disadvantages:

I am guessing that most of you are familiar with “mocking” or how MockServers work. If not, the web offers a wide variety of articles on this matter. For example, check out the following Wikipedia article on Mock objects.

Since the approach of mocked data within the app is often only described for JUnit-Tests, I would like to explain this option with regard to UI tests in this article.

Dependency Injection & MVVM

The key to all this is Dependency Injection, i.e. the insertion of defined implementations at runtime and the MVVM app architecture. We currently use Dagger to insert dependencies, but the same should apply to koin and other libraries.

The MVVM pattern describes the differentiation between model, view and view model, which makes it possible to test them.

How does it all work now?

We use a custom class that inherits from the application class and thus represents the root context of the app. In this class, Dagger is initialized, so we can inject every dependency from there to the desired places.

JUnit Tests (for comparison)
Within the JUnit tests, the desired injection can simply be overwritten (at setUp()) to provoke a desired behaviour. This way almost all test cases can be mapped.

UI Tests
Unfortunately, the procedure used for the JUnit tests does not work within the UI tests. Because within these tests no mock data (using Mockito-Kotlin) can be created, another variant for the test procedure must be used for the Dagger Dependencies.

However, since we do not have direct access to the application (only after the launch of the activity, at which time the Dagger initialization has already been performed), we must consider another construct.

1. Custom TestApplication Class for UI Tests
First, we have to define our own application class for our test runtime. This is necessary because we can’t initialize a mock as injected dependency, as in the setUp() method shown above.

2. Test runner
In order that the UI test also uses the newly created application (and not the original one), we must write our own small TestRunner. This doesn’t really contain much, but only refers to our TestApplication:

Within the build.gradle (app), we only have to use this runner for our tests:

3. Mocking Data
As described above, we can’t inject a mock, so we must do our own implementation of the interface in order to adapt it to the test runtime.
The mocked implementation could look like this:

The mocked file consists of the expectations and the actual (mock) implementation under service.

By setting an expectation, the return value can be influenced, so we can now also adjust it within the UI test for the test runtime (similar to the unit tests before).

4. TestImplementation of the Dagger initialization in the TestApplication.kt.

Now that we have a test implementation, we have to equip Dagger with it as well. We do this again in the TestApplication:

Ready for UI-Testing

After all these steps, we are finally able to write UI tests that check how the UI behaves even if there is no implementation from the backend yet.

The tests could look like this:

And that’s it! :)

Now we can write UI tests that can simulate the desired response by means of the expectation. Thus, how the UI of the app behaves in different scenarios can now be tested.

It should be said again, however, that this is now a pure UI test and not an integration test, as it is often presented.

Since no real request is sent, the network interface cannot be checked this way, only the possible use cases.

Integration tests are another topic that I will present in a subsequent article.

I hope I was able make the concept a little more understandable. You can find an example app containing this on github:

thepeaklab/backend-independent-ui-tests

Please leave a clap if you want to see more articles like this one, thank you.

The magic of backend independent UI testing in Android was originally published in the peak lab. on Medium, where people are continuing the conversation by highlighting and responding to this story.

Der akademische Hintergrund:

Vorrangig beschäftigt sich das dritte Semester Mediendesign an der
DHBW Ravensburg im Schwerpunkt mit Funktionen und Ausdrucksmöglichkeiten multimedialer Gestaltung. Das Spektrum verläuft zwischen anschaulicher Vermittlung sowie Steuerbarkeit und Vernetzung von Informationen auf der einen Seite, Experiment, Unterhaltung sowie medialer Vielfalt auf der anderen Seite. Typografie, Animation, Interaktion und Informationsvernetzung sollen zu einem stimmigen Ganzen zusammen gebracht werden.

Der Anwendungsfall Landes Jazzfestival:

Das Kultusministerium des Landes Baden-Württemberg hat dem Verein Jazztime Ravensburg die Ausrichtung des Landes Jazzfestival 2019 übertragen. Bei der Veranstaltung, die vom 6. bis 17. November stattfindet, werden musikalische Highlights umrahmt von einem abwechslungsreichen Programm aus den Bereichen Kunst, Film und Literatur.
Die Aufgabe ist es, in einer Gruppe von maximal vier Studenten eine
Website für das Landes Jazzfestival zu konzipieren und zu gestalten.
Die Herausforderung besteht hierbei aus der Balance zwischen
künstlerisch-kreativer Inszenierung des bevorstehenden Events und einer funktional-dienlichen Hilfestellung für die Besucher.
Eckpfeiler gestalterischen Handelns sind neben der medienspezifischen Repräsentation von Orten und Künstlern das visuelle Leitbild.

Die Idee:

Unter der Prämisse einer persönlich eingegrenzten jungen Zielgruppe von Menschen im Alter von 18 bis 40 Jahren soll das Landes Jazzfestival 2019 in neue Sphären aufsteigen. Ein integratives Konzept, das in der Gestaltung grundsätzlich auf der Exploration von Grundformen aufbaut,
soll dazu dienen, das Erlebnis spannend und erfahrbar zu machen.
Jede Veranstaltung des Festivals erhält eine ikonische Form, die sich ferner in Kategorien einordnen lässt. So orientieren sich Musikveranstaltungen an elliptischen Formen, Literatur- und Filmevents erhalten rechteckige Formen, dreieckige Eigenheiten verkörpern Kunstausstellungen. Zusätzlich orientiert sich das Design am Stile des Brutalismus, dessen Eigenschaften der Einfachheit und Beschränktheit einen Kontrast zu der komplexen Verbindung aus Formen und Veranstaltungen schaffen soll. Diese Entscheidung untermalt auch das Farbkonzept, welches sich in der Hierarchie den Formen hintenanstellt und entsprechend schlicht gehalten ist.

Die Gestaltung:

Für die Website ist eine primäre Anforderung die funktionale und intuitive Navigation durch sämtliche Inhalte. Das erarbeitete Konzept orientiert sich an einer globalen Menüführung im Kopfbereich der Website, die jederzeit sichtbar bleibt. Auf den Veranstaltungsseiten erscheint ein Submenü, das zusätzlich durch die jeweilige Veranstaltung navigiert und eine Verbindung aus betreffenden Persönlichkeiten, Veranstaltungsort und Ticketkauf ermöglicht.

Für ein integratives Erleben der Verbindung aus Formen und Veranstaltungen wird auf der Website umfangreich mit Micro-Interactions gearbeitet.
Dem Nutzer wird so unterbewusst eine Verbindung aus beiden Inhalten beigebracht, wobei diese für eine ausreichende Informationsaufnahme nicht zwingend notwendig ist.

Die Aussichten:

Die Fertigstellung ist als interaktiver Prototyp anzusehen und obliegt dem Hintergrund einer studentischen Projektarbeit — dennoch wird in diesem Kontext mit dem Landes Jazzfestival ein realer Anwendungsfall geschaffen.

Weitere Einzelheiten und Details zu der Gestaltung sind hier zu sehen.

Interaktives Festivaldesign was originally published in the peak lab. on Medium, where people are continuing the conversation by highlighting and responding to this story.

By Robin Schu

Der erste Prototyp der Serie “Pulse” stützt sich ausschließlich auf das Einbetten in ein Szenario der dezentralen Stromerzeugung. Dabei geht es um die verbrauchernahe Produktion von Strom mithilfe von Kleinkraftwerken — eine Fortentwicklung, die innovativ und progressiv ist, jedoch von vielen Konsumenten im Energieverbund bislang nicht wahrgenommen wird. Das mehrheitlich angewandte System unserer Zeit stützt sich heute immer noch auf die zentrale Erzeugung und Verteilung von Strom.

Das Interface der Energie soll selbstverständlich in Zusammenhang mit innovativen und zukunftsweisenden Technologien gesetzt werden, doch ist es uns ebenso wichtig einen Beitrag zu gegebenen Rahmenbedingungen zu leisten. Dieser soll insbesondere jene Teile unserer Gesellschaft ansprechen, die sich aus eigenem Interesse bislang eher weniger für die private Energieverwaltung mithilfe eines digitalen Tools interessiert haben. Es gilt daher sich speziell den Anforderungen älterer Menschen und Wenig-Nutzern mit geringer Technikaffinität anzunehmen und eine Anwendung zu entwickeln, die ein hohes Maß an Sensibilität aufweist. Das Konzept des “Universal Design” ist in diesem Zusammenhang besonders wichtig. Warum?

Weil dieser am Menschen orientierte Designansatz nach dem Ziel strebt, die von Menschen für Menschen gestaltete Umwelt für möglichst alle empfänglich zu machen.

Ein besonderer Schwerpunkt unserer Gestaltung ist deshalb die Datenvisualisierung. Welche spezifischen Inhalte sind für die oben genannten Konsumenten interessant und welche Art der Darstellung passend?

Das Bewusstsein der Menschen lässt sich unserer Meinung nach mithilfe zweier Aspekte am besten schärfen: Nachhaltigkeit und monetäre Bilanzierung. Diese beiden Inhalte sind in dem neuen Entwurf von “Pulse” auf zwei verschiedenen Ansichten des Dashboards angeordnet. Eine definiert tagesaktuelle Aspekte, die andere einen Rückblick zu vergangenen Monaten.

Bei Betrachtung der ersten Darstellung wird dem Nutzer eine Uhr gezeigt, auf die mithilfe von Überlagerungen verschiedene Ereignisse projiziert werden. Darunter fallen auch Zeiträume, zu denen die Netzauslastung eine Rolle spielt. Durch diese Visualisierung soll das Bewusstsein für ein zukünftiges dezentrales Szenario geöffnet werden — der neue Prototyp dient also auch als Mittler, der Menschen über neue Technologien und nachhaltiges Energiemanagement aufklärt.

Die Farbwahl der Gestaltung gibt die Bewertung der einzelnen Ereignisse vor — rosa eingefärbte Bereiche unterliegen einer hohen Auslastung des Stromnetzes, blaue Ereignisse hingegen eröffnen Nutzern die Möglichkeit, gewonnene Kapazitäten aus Grünstrom bewusst zu nutzen. Die zweite Ansicht zeigt in einem interaktiven Liniendiagramm einen monetären Trend der Verbräuche. Unter der Berücksichtigung der Mensch-Computer-Interaktion wird besonders auf den Interaktionsstil dieser Darstellung geachtet. Das prägende Leitbild des Screens ist in diesem Fall die Intention der Anwender. Der Nutzer soll zu einer offensichtlichen Interaktion ermutigt werden. Diese soll genau die Erwartungen erfüllen, die der User an sie hat. Eine Objektauswahl ist in dem Liniendiagramm an vier Punkten möglich. Diese beziehen sich jeweils auf eine der vier Wochen des ausgewählten Monats. Sie geben einen Verbrauchstrend und einen monetären Wert der Verbrauchsdaten an, sobald sie durch Tippen angewählt werden.

Wir glauben, dass sich der neue “Pulse 2.0.” Prototyp gut in ein aktuelles Szenario integrieren ließe und dabei neue Zielgruppen als Anwender — wie beispielsweise sogenannte Wenig-Nutzer mit geringer Technikaffinität — einbeziehen würde, um diese für die private Energieverwaltung per App zu sensibilisieren.

Pulse 2.0 was originally published in the peak lab. on Medium, where people are continuing the conversation by highlighting and responding to this story.

By Andy Meinke

Eine Data-Science Artikelserie

Neben dem im Artikel von Moritz Mönning beschriebenen Sichtbarmachen von Daten, können mithilfe der Data Science auch Auffälligkeiten in Datenmengen erkannt und herausgearbeitet werden. Auf Grundlage dieser Auffälligkeiten können im Anschluss gegebenenfalls Handlungsanweisungen erfolgen. So können beispielsweise datengetriebene Anwendungen dank der zugrundeliegenden und mittels der Data Science erarbeiteten Muster, Ereignisse mit einer gewissen Wahrscheinlichkeit vorhersagen.

Um dies zu veranschaulichen, haben wir die Polizeidaten der Stadt New York City analysiert. Die untersuchten Daten beinhalten die Aufzeichnung aller im Zeitraum von Ende 2013 bis Ende 2015 aufgezeichneten Verbrechen in den Bezirken Bronx, Brooklyn, Manhattan, Queens und Staten Island. Die Erhebung ergibt für diesen Zeitraum 1.048.575 Rohdaten, wobei 1.016.158 davon geo-annotiert, das heißt standortspezifisch sind. Nach Bereinigung dieser Daten durch unser the peak lab. Data-Science Team, sprich Entfernen von fehlenden und falschen Werten, sind insgesamt 842.416 Datensätze übrig geblieben, auf die wir zugreifen konnten.

Was wir herausgefunden haben? Auf den ersten Blick wird deutlich, dass Staten Island im untersuchten Zeitraum der Stadtteil mit der geringsten Verbrechensrate ist, nämlich circa 40.000 Straftaten. In Brooklyn hingegen wurde von den Behörden die höchste Anzahl an Verbrechen erfasst. Hier waren es mehr als 250.000.

Teilt man die verschiedenen Verbrechen in Kategorien wie Körperverletzung (Assault), Einbruch (Burglary), Drogendelikte (Dangerous Drugs), schwerer Diebstahl (Grand Larceny), Belästigung (Harrassment) und leichter Diebstahl (Petit Larceny) ein, so ergibt die Analyse, dass leichte Diebstähle in New York City über die Stadtteile verteilt prozentual den größten Anteil ausmachen. Der Besitz von gefährlichen Drogen sowie Einbrüche hingegen den geringsten Anteil.

Doch was bedeutet das nun für unsere Untersuchung? Wie zuvor beschrieben, kann Data Science dazu dienen Ereignisse auf Grundlage von Mustern in Daten vorherzusagen. Somit können also beispielsweise Menschen — in unserem Fallbeispiel etwa die Polizeibehörde von New York — dazu befähigt werden zu reagieren. Unsere Analyse zeigt, dass von allen oben aufgeführten Verbrechen, der Einbruch (Burglary) das einzige Verbrechen ist, das auf eine bestimmte Uhrzeit und einen bestimmten Ort hin vorhergesagt werden kann.

Nachdem wir aus den 1.016.158 aufgezeichneten Verbrechen alle Einbr­üche gefiltert haben, konnten wir nicht nur Gebiete mit besonders hohen Einbruchsraten erkennen, sondern auch feststellen, dass drei Adressen in Brooklyn besonders auffällig sind.

Insgesamt wurde in den Apartmenthäusern an der Adresse im oben genannten Zeitraum 71 Mal eingebrochen. Warum aber waren genau diese Standorte in der Vergangenheit so häufig bevorzugtes Ziel von Einbrechern geworden? Eine Antwort auf diese Frage liefert eine Recherche im Netz: Dank der Geo-Annotation der Daten, konnten wir die Gebäude über Google Maps ausfindig machen. Bei Betrachtung der Häuser über Google Streetview fiel folgendes auf:

Wir konnten erkennen, dass bei allen drei Häusern direkt unter den Feuerleitern ein Zaun installiert war. Es war daher ein Leichtes für Einbrecher, die Feuerleiter mit Hilfe des Zauns zu erreichen. Wir glauben, dass dies einer der entscheidenden Gründe für die hohe Einbruchsrate bei diesen Wohnkomplexen sein kann.

Ausgehend von diesen drei Wohnhäusern, haben wir im nächsten Schritt weitere Faktoren bestimmt: Die bevorzugte Uhrzeit, den bevorzugten Monat, sowie den bevorzugten Wochentag.

Die Analyse zeigt, dass vermehrt zwischen 5 Uhr und 10 Uhr, an Freitagen und primär in den Sommermonaten eingebrochen wurde. Diese drei Beispielinformationen dürfen allerdings nicht getrennt voneinander, sondern nur im Kontext betrachtet werden. Man muss also Wochentage und Uhrzeit miteinander kombinieren, um genauere Vorhersagen treffen zu können.

Wie können solche Erkenntnisse nun der Stadt New York City dabei helfen, Stadtteile sicherer zu machen? Ganz einfach: Um auf den Daten basierend vorherzusagen, wann und wo die Einbruchsgefahr besonders hoch ist, müssen große in mehrere kleine Gebiete geclustert und ähnliche Muster angewendet werden. Auf diese Weise kann die New Yorker Polizeibehörde entsprechende, auf Daten basierende Handlungsanweisungen umsetzen, um beispielsweise Einsätze von Streifenwagen in bestimmten Gebieten zielgerichteter planen und einsetzen zu können, damit Verbrechen möglicherweise bereits im Vorfeld vereitelt werden können.

Natürlich ist dies nur eins von vielen Beispielen, wie Data Science eingesetzt werden können. Ein weiterer interessanter Anwendungsfall für den positiven Einsatz von Data Science in New York ist die Initiative von PASSNYC, einer datengetriebenen non-profit Organisation. Sie hat sich zum Ziel gesetzt, mit Hilfe von Data Science, die Diversität innerhalb des öffentlichen New Yorker Schulsystems zu erhöhen sowie Schulmittel gleichmäßig und gerecht zu verteilen.

Unsere beiden Beispiele von Moritz Mönning und Andy Meinke zeigen, dass Data Science — bestehend aus einem großen Satz an wissenschaftlichen Techniken — nicht nur genutzt werden kann, um in der Theorie Auffälligkeiten und Muster zu erkennen und sichtbar zu machen. Vielmehr kann der richtige Einsatz von Data Science Menschen dazu befähigen ungeahnte Probleme zu erkennen, zu analysieren und zu lösen.

Aus Daten folgen Taten — wie geht das? III was originally published in the peak lab. on Medium, where people are continuing the conversation by highlighting and responding to this story.

By Moritz Mönning

Eine Data Science Artikelserie

Unser erstes Beispiel beschäftigt sich mit dem Thema Waffenmissbrauch in den USA am Beispiel von Bandenkriminalität. Mit Hilfe von Visualisierungstechniken möchten wir aufdecken, welche Informationen und Muster sich in Polizeidaten finden lassen, die sich auf Waffenmissbrauch beziehen. Auf diese Weise wollen wir veranschaulichen, welches oft ungenutzte Potential in großen Datenmengen verborgen liegt.

Trotz über 20.000 existierender Regularien in Bezug auf Waffenbesitz, ist das Recht eine Schusswaffe zu tragen in den USA durch den zweiten Zusatzartikel aus dem Jahr 1791 verfassungsrechtlich geschützt. Darin heißt es:

“Da eine gut ausgebildete Miliz für die Sicherheit eines freien Staates erforderlich ist, darf das Recht des Volkes, Waffen zu besitzen und zu tragen, nicht beeinträchtigt werden.”

Wie hoch der Anteil an Schusswaffen in den USA tatsächlich ist, darüber gibt es keine genauen Zahlen. Eine landesweite Datenbank zur Registrierung von Waffenbesitz gibt es nicht. Verschiedene Umfragen aus dem Jahr 2016/17 besagen laut eines CNN-Artikels, dass zwischen 32 und 42 Prozent der Amerikaner in Haushalten mit Schusswaffen leben. Was jedoch sicher ist: Mit dem Recht Waffen zu besitzen, geht leider auch einher, dass es in den USA regelmäßig zu illegalem Gebrauch von Schusswaffen kommt — oft mit schwerwiegenden Folgen. Wie sich das in Zahlen ausdrücken lässt und welche Auswirkungen das hat, möchten wir im Folgenden zeigen:

Die von uns untersuchten Daten wurden im Zeitraum vom 01. Januar 2014 bis einschließlich 31. Dezember 2017 von den amerikanischen Behörden gesammelt. Unsere Analyse der 225.597 geo-annotierten Datensätze zeigt, dass die Straftaten von Jahr zu Jahr steigen. Während im Jahr 2014 51.854 Waffenmissbräuche registriert wurden, hat sich diese Zahl bis 2017 auf 61.402 erhöht. Ein Anstieg von circa 18,4 Prozent.

Unabhängig von der zeitlichen Perspektive der Daten, ist es besonders für ein so großes Land wie die Vereinigten Staaten interessant, die räumlichen Unterschiede zu betrachten. Wenn man die Häufigkeit der Waffenmissbräuche anhand der einzelnen Bundesstaaten aufschlüsselt, werden deutliche Unterschiede erkennbar: Während im Westen nur in Kalifornien und im Süden in Texas Ballungszentren erkennbar sind, häufen sich die Vorfälle im gesamten Bereich östlich von Texas mit einem Spitzenwert von 17.556 Fällen in Illinois im angegebenen Zeitraum.

Zusätzlich zu der Häufigkeit des illegalen Gebrauchs von Schusswaffen, liefern die untersuchten Polizeidaten Hinweise auf die Charakteristika der Vorfälle. Wir haben diese aufgeschlüsselt und herausgefunden, dass beispielsweise in der Hochburg Illinois neben den für Waffenmissbrauch „gewöhnlichen“ Merkmalen wie etwa unerlaubter Waffenbesitz und Abfeuern von Schüssen unter Drogeneinfluss, Bandenkriminalität einen großen Anteil der Missbräuche ausmacht. Diese Annahme wollen wir im Folgenden genauer betrachten.

Sortiert man alle amerikanischen Städte absteigend nach der Anzahl der Vorfälle mit Einfluss von Gangmitgliedern, so setzen sich klar drei Städte von der Masse ab. Dabei handelt es sich um Chicago in Illinois (1378 Fälle), Portland in Oregon (259 Fälle) und Fresno in Kalifornien (235 Fälle). Um die Entwicklung im Laufe der Zeit besser nachvollziehen zu können, haben wir die Fälle monatsweise aggregiert und als Zeitreihe dargestellt.

Besonders auffällig ist, dass die Gangkriminalität in Chicago scheinbar je nach Jahreszeit unterschiedlich hoch ist. So ist zu den warmen Sommermonaten stets ein rapider Anstieg zu verzeichnen, während die Vorfälle zum Winter hin wieder abnehmen. Der signifikante Abstieg im Jahr 2017 wird später noch genauer unter die Lupe genommen.

Um die verschiedenen Verbrechensmerkmale der drei Städte zu veranschaulichen, haben wir die Städte relativ zueinander dargestellt. Dabei fällt auf, dass jede Stadt eine eigene Struktur aufweist. Während in Fresno und Chicago besonders oft der Waffenbesitz der Gangmitglieder geahndet wurde, macht der Drogeneinfluss ausschließlich in Fresno einen Großteil aus. Der hohe Anteil von sonstigen Merkmalen in Portland ist einer sehr hohen Anzahl an Fällen geschuldet, bei denen zwar geschossen, allerdings niemand verletzt oder getötet wurde.

Bei jedem Vorfall notiert die zuständige Polizeibehörde mit prägnanten Schlagworten besondere Auffälligkeiten. Diese Notizen haben wir mit sogenannten Wordclouds visualisiert. Dabei gibt die Größe der jeweiligen Wörter die Häufigkeit der notierten Schlagworte an.

Chicago ist die Stadt in den USA mit der höchsten Gangkriminalität. Mit 1.378 von den insgesamt 5.395 Fällen in den vereinigten Staaten verzeichneten Vergehen, macht allein Chicago über ein Viertel aller Verbrechen in diesem Zusammenhang aus. Bezieht man das Ganze auf den Staat Illinois, so macht hier Chicago mit 82,91% den Großteil aus.

Um einmal die Entwicklung der Art der Vorfälle nachvollziehen zu können, haben wir die Verbrechensmerkmale quartalsweise ausgewertet und nachfolgend dargestellt.

Die nachfolgende Animation dient dazu die Orte der einzelnen Vorfälle im Laufe der Zeit zu identifizieren. Dabei ist die Darstellung in Quartale unterteilt. Zudem werden neben den Geokoordinaten zwei weitere Attribute berücksichtigt. Während die Größe der Punkte angibt, wie viele Menschen durch den jeweiligen Vorfall verletzt oder getötet wurden, steht die Farbe für das Alter der Opfer. Eine Erläuterung der Farben sowie eine Zuordnung der Opferanzahl (X-Achse) zu der jeweiligen Altersklasse (Y-Achse), findet sich in der Legende unter von der Animation.

Chicago konnte nach einer starken Zunahme der Schießereien bis einschließlich 2016 seit 2017 einen Rückgang verzeichnen. Neben der Anstellung von hochqualifizierten Polizisten und einer starken Fokussierung auf die Themen Waffen- und Gangkriminalität, nutzt das Chicago Police Department seit kurzem auch „Predictive Crime“ Technologien. Dabei werden Taten bereits vorhergesagt bevor sie passieren. Dies geschieht anhand der Analyse von historischen Daten, aufgrund dessen vermutet wird, dass bei einer ähnlichen Parameterkombination auch in Zukunft gewisse Bereiche besonders gefährdet sind.

Daten mit ungeahnten und vor allem ungenutzten Potentialen liegen überall verborgen. Sie werden meistens einfach in einer Datenbank abgelegt und verweilen dort oft ungenutzt für eine lange Zeit. Wir möchten zeigen, dass bereits mit einfachen Analysen und dem Einsatz von Filtern neue Erkenntnisse geschaffen werden können, welche ein besseres Verständnis der Daten ermöglichen. Dank der hohen Anzahl an Datensätzen, können wir die die Analysen beliebig skalieren. So können beispielsweise gesondert voneinander verschiedene Staaten oder gar Städte auf ihre Muster hin untersucht werden. Um euch dies zu demonstrieren, hat mein Kollege Andy Meinke im dritten Teil unserer Artikelreihe die Stadt New York auf ihre Verbrechen hin untersucht und dazu interessante Einblicke erhalten. Stay tuned!

Aus Daten Dinge sichtbar machen — wie geht das? was originally published in the peak lab. on Medium, where people are continuing the conversation by highlighting and responding to this story.

By Jens Läkamp

Eine Data Science Artikelserie

Einleitung: Irgendwas mit Daten

Begriffe wie Big Data oder Data Science sind in aller Munde. Doch was verbirgt sich eigentlich dahinter? Wie funktionieren das Auffinden und Lesen sowie die Deutung von Daten? Welchen wissenschaftlichen, wirtschaftlichen, gesellschaftlichen oder gar politischen Nutzen hat die Datenwissenschaft? Und warum beschäftigt sich ein Unternehmen wie the peak lab. damit?

Diese Fragen haben wir unseren beiden Data Scientisten Andy und Moritz gestellt. Seit zwei Jahren arbeiten sie intensiv daran, unsere the peak lab. Data Science Unit aufzubauen. In Kooperation mit der Universität Oldenburg haben wir in diesem Zusammenhang unter anderem die Projektgruppe www.empowergenerations.de ins Leben gerufen. Gemeinsam mit Kolleginnen und Kollegen unseres Teams entwickeln Studierende mit Hilfe von Data Science und Blockchain Ideen für den Strommarkt, damit Menschen beispielsweise in Zukunft überschüssige Energie selbst handeln können, ohne auf Energieversorger als Zwischenhändler angewiesen zu sein. Eine Idee, die allen Beteiligten viel Geld sparen würde.

Wie so oft jedoch, wenn Experten zu Ihrem Feld befragt werden, fallen die Antworten für Laien nicht immer verständlich aus. Daher haben Andy und Moritz zwei Beispiele herausgesucht, anhand derer sie den Nutzen der Datenwissenschaften verständlich erklären möchten. Die Grundlage ihrer Untersuchung bilden Daten aus öffentlich zugänglichen Polizeidatenbanken der USA. Diese haben sie gesichtet und im Anschluss Daten in Bezug auf Waffenmissbrauch sowie Verbrechen in New York City untersucht. Die Ergebnisse sollen veranschaulichen, welchen Zweck die Analyse großer Datenmengen hat und welche Schlüsse aus Big Data gezogen werden können.

Als interdisziplinäres Wissenschaftsfeld aus Mathematik, Statistik und Informatik, verfügt Data-Science über verschiedene Methoden aus Daten Wissen zu generieren. In unserer Data Science Artikelserie möchten wir anhand von Beispielen zwei Merkmale des Wissenschaftsfelds vorstellen: Zum einen das Generieren von Wissen anhand von Visualisierungen. Ein Prozess, der aus dem so genannten Data Mining entstanden ist. Zum anderen, das Data Mining selbst, wobei versucht wird, Auffälligkeiten in Daten aufzudecken.

Unter Data Mining versteht man in diesem Zusammenhang die systematische Anwendung von statistischen Methoden auf große Mengen von Daten, mit dem Ziel, Verbindungen und Trends zu erkennen. Diese Anwendungen sind aufgrund der großen Datenmengen computergestützt.

Wenn ihr wissen wollt, welches oft ungenutzte Potential in großen Datenmengen verborgen liegt, seid gespannt auf unseren nächsten Artikel. Im zweiten Teil erklärt Moritz euch am Beispiel des illegalen Gebrauchs von Schusswaffen in den USA, wie dank der richtigen Analyse von Daten Informationen sichtbar gemacht werden können.

Aus Daten Wissen generieren — wie geht das? was originally published in the peak lab. on Medium, where people are continuing the conversation by highlighting and responding to this story.

Android Instant Apps are native Android apps that can be used without pre-installation. They always belong to an installable app and can not be released without it.

If there is an Instant App for an installable app available, the Play Store displays a “Try Now” button so that the user can try the Instant App directly without installing the whole app.

Instant apps can be linked to web links via Android App Links. So they can be accessed via a web link directly from other apps (for example, from Google Search app, from shared links in social media and messaging apps, etc.). If the installable app already exists on the user’s device, this app is opened directly (no app selection dialog as usual in Android).

Here’s a short video from Google how Instant Apps look like:

Requirements

• supported by most devices ≥Android 5.0 (many features like Android App Links and several permissions are only available on ≥ Android 6.0)
• Android Studio ≥3.0
• Android SDK build tools ≥ 26.x
• Android SDK Platform Tools ≥25.x
• Android SDK Tools (latest version)
• Instant Apps Development SDK (latest version)
• Support Repository (latest version)
• all dependencies from the Support Repository (latest versions)
• adjust permission handling if necessary (not all permissions are available for Instant Apps)
• the maximum size of an Instant App is 4MB for alpha, beta and production (10MB for internal test)
• if you use Android App Links, these links must be verified

Building a project with Instant App Support

To deploy Instant Apps, the app project must be modularized so that the build process is separated from the app logic. There are at least three modules needed for this. Every Module has its own build.gradle with specific responsibilities.

Base Feature Module

The Base Feature Module is a module that must exist in every Instant App. It can contain the entire code of the app (if it’s small enough) or just the base code that will be included in all other Feature Modules. It will be marked as baseFeature:

apply plugin: 'com.android.feature'

android {

    ...

    baseFeature true

    ...

}

...

APK Module

The APK Module contains only a build.gradle and a Manifest.xml to build the APK of the installable app are needed. It sets the applicationID of the entire app in the build.gradle:

apply plugin: 'com.android.application'

android {

    ...

    defaultConfig {

        applicationID com.thepeaklab.example

    }

    ...

}

...

The package of the installable APK is defined in the Manifest.xml:

<manifest package="com.thepeaklab.example.app" />

Instant App Module

The Instant App Module defines all the modules that this Instant App should contain. It only has a build.gradle where the dependencies are defined:

apply plugin: 'com.android.instantapp'

dependencies {

    implementation project(':base')

    implementation project(':examplefeature')

    ...

}

Further Feature Modules

In addition to the Base Feature Module the project can contain further modules that encapsulate individual features. Although the Base Feature Module may include the entire code of the app, it is best to split the app into separate feature modules. The smaller the binary of a single Instant App, the faster it can be loaded. These modules must apply the feature plugin in the build.gradle:

apply plugin: 'com.android.feature'

...

“Try Now” Button

Use the following filters to define the entry point Activity of the Instant App (if you also use In App Links in your Instant App, you will have to define a default URL described below in the Android App Links Support section):

...

<intent-filter>

    <action android:name="android.intent.action.MAIN" />

    <category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

...

Prepare project for Instant Apps

Create a new app from scratch with Instant App Support

When you create a new project with Android Studio, you can click on “include Instant App support” directly in the wizard. You can also define the desired host and the route for your main activity (see guidance Create an Instant App).

Integrate Instant App support into existing app

If you want to add Instant App support to an existing app, the project must be modularized. As described in the previous section, you have to create a Base Feature Module, an APK Module and an Instant App Module.

First step: move all the existing app logic to the base feature module and create the APK module (see guidance Convert to app to a base feature module).

Second step: create the Instant App Module (see guidance Convert a feature module to an instant app).

Third step: split the base feature module into smaller feature modules. This will be only necessary if your base feature module is too large but recommended for better user experience.

Android App Links Support

If you want your Instant App to be accessed via a web link, you have to integrate the Android App Links (Android 6.0 or higher) and verify them on your website.

An Android App Link is defined as an Intent filter in the Manifest.xml just like a deep link. In addition, a default URL must be specified, which serves as the entry point for the “Try Now” button.

...

<activity android:name=".MainActivity">

    <meta-data android:name="default-url"

               android:value="https://thepeaklab.com/" />

    <intent-filter>

        <data

            android:host="thepeaklab.com"

            android:scheme="https"

            android:pathPrefix="/hello" />

    </intent-filter>

...

</activity>

...

In addition, you have to store a JSON file on the associated website under the URL https://domain.name/.well-known/assetlinks.json. This file verifies that your Instant App is allowed to be opened instead of the website. The file can be generated using the In App Link Assistant in Android Studio.

Instant App API

There is an Instant App API which you can use to check if the user currently uses the Instant App or the installable version. You also have the possibility to show an installation dialog for the entire App whenever you want.

Optimization

To keep the Instant App as small as possible and not to exceed the maximum size of 4MB, there are the following tips:

• use APK Analyzer: Android Studio analyzes and uncovers a selected APK, which consumes the most space
• Code refactoring: remove unnecessary code and outsource as much code as possible to individual modules (right-click on selected files → Refactor → Modularize)
• Resource refactoring: find unused resources with lint (cmd + alt + shift + I → “unused resources”), convert simple images to .svg and more complex images to WebP (right click on image or whole folder → Converting Images to WebP)
• Configuration APKs: different APKs can be defined for individual device types, languages ​​etc.
• Libraries: remove unnecessary libs or make sure that they are only involved in the individual modules, where they are really needed; for larger libraries, which only require small parts, the remainder can be excluded by exclude group in the build.gradle
• ProGuard: use it to shrink, optimize and obfuscate your code

Test

During development, the Instant App can be started on the device directly by building and launching the Instant App module.

In the App Links Assistant in Android Studio, there is the ability to enter URLs and test whether the desired Instant App is called.

With the Statement List Generator and Tester you can enter the URL and the package name of the app and check if Google has verified the url for this package name.

In the Google Play Developer Console, the Instant App can be uploaded as internal test with a specified list of testers. For this, an installable APK version of the app with the same or a higher version code must already have been uploaded.

Distribution

The Instant App is uploaded to the Google Play Console under “Release Management” → “Android Instant Apps”. It is possible to publish the Instant App for an internal test, an alpha, a beta or a production phase. More detailed instructions can be found here.

Miscellaneous

You can find general FAQ page for developing Instant Apps here.

You can also find a good tutorial video from Google Developer Days 2017 in India here.

Conclusion

Instant Apps are a great way to increase traffic in your app. Trying out the app removes the hurdle of installation. By linking to a web link, the Instant App opens directly, providing the ability to run completely native code from a link.

A major disadvantage is that links to Instant Apps are currently not accessible from Google search inside the browser and search results are not marked as an Instant App at the moment. I tried it out with the apps shown in the video above but I wasn’t able to see these special search results. In Google Search app, as well as clicking on a link from GMail or WhatsApp it works fine.

By restricting permissions, apps that need these permissions can not provide Instant Apps (or only features that don’t need them).

As Google pushes the modularization of apps, it’s worth optimizing apps to this scheme. Google has already announced the Android App Bundles (Android Studio 3.2). App Bundles are modular parts of an APK and can be dynamically exchanged without redeploying the entire APK. This means that the entire app does not have to be re-uploaded during an app update and only this part has to be updated on a device. App bundles should also receive Instant App support in the future. This means that an app bundle can be uploaded for updating the entire app as well as an Instant App at the same time.

Android Instant Apps was originally published in the peak lab. on Medium, where people are continuing the conversation by highlighting and responding to this story.

What is enera? The enera project seeks to speed Germany’s transition to a smart grid that encompasses new technologies, new market mechanisms and a more consistent, transparent energy information system. It aims at increasing the integration of distributed and renewable energy sources across Germany and beyond. In a nutshell: enera seeks to revolutionize the energy system. As part of the enera project, the peak lab. will help to create the new “interface of energy.”

But if you consider the enera project solely from a technical point of view, the picture falls short. Instead, I think it is the needs of the consumer that will (help) decide the success or failure of the energy revolution.

We need to ask ourselves: how can we get the consumer to embrace the change? How do we get people on board? My response: Simple. All we need to do is show them how the energy revolution will have a positive effect on their everyday life.

A TRIP TO THE FUTURE.
As a proponent of electromobility, I can often be found riding around Oldenburg on my e-bike. On my journeys, I regularly pass by the windparks which have now become a standard feature of our landscape in northwestern Germany. A thought that has always struck me when I see these: the sleek columns and the spinning turbines look like something off the set of a science fiction film. A self-confessed sci-fi fan, I think there is something to learn from this genre as we integrate new technologies into our lives. That’s why I write this energy transformation blog today not from a purely technical or business perspective, but instead I try to explain just what it is about our enera model region that fascinates me and what the intelligent energy showcase has to offer every one of us.

We have become accustomed to the sight of wind turbines. We don’t even realize anymore how resourceful it really is to use a clean energy source that is available to us here in the North in unlimited quantities and virtually without interruption — and which helps us to be energy self-sufficient. At the moment, we are so preoccupied with technical and economic aspects such as grid expansion, storage management, costs and data security that we are beginning to lose sight of the big picture.

The more we hear about new technologies, systems, software, networks and political conditions, the easier it becomes to turn a blind eye to a crucial factor: acceptance by the user. With enera, we have to avoid this mistake at all costs. We must make it our goal to actively involve every single household in the process. Because it is only when the user is on board with us that the energy transformation can move ahead successfully.

THE FIRST TANGIBLE BENEFITS WILL MAKE THE ENERGY REVOLUTION INTERESTING FOR PEOPLE.
How can the individual be involved in the process? The “smart home” — as it is now known in Germany — presents a great possibility. This is a concept that regularly pops up in discussions about the energy transition and one that everyone believes they know what it means. In my mind, this is a fallacy. Sure, we are all aware of the example of the washing machine that washes our clothes when the wind blows and power is therefore cheap. But this example is old hat by now. In reality, we actually have no idea exactly what people’s requirements for a smart home are. As a design-driven software company, the peak lab. is trying to establish at this point how to understand in different ways the demands for a changing energy system. We want to develop products that users will enjoy using. They have to offer a quantifiable added value. And this is where the potential of the enera project comes in.

It is no secret: the energy transition is still viewed skeptically by most consumers. The benefits are rather abstract and the anticipated extra costs don’t appear to be worthwhile. Discussions about technical details also add to the skepticism and confusion. Today, not everyone wants a smart meter in their home. This would change if consumers knew just how they benefit from having one. One thing is clear: intelligent use of energy with smart grids is being implemented now and will soon become so commonplace it will be like smartphones are today. This is exactly what fascinates me about science fiction: how technologies that to us are new and foreign are taken for granted in these other worlds.

FASCINATION, NOT CONFRONTATION.
Every time a new technology is ready to be launched, there is a challenging initial period. Once this hurdle is overcome, acceptance builds among most users. Today, the smart home is sitting at this point. It doesn’t help that the smart meter was introduced by means of legislation, as this gives consumers the sense that they were forced into it. It would be much better to show consumers how “sexy” a smart meter can be and what the benefits would be. We must design products that are simple and intuitive to use. In today’s world, we must motivate people to support the transition. This is easiest to do if we can offer sustainable products that speak to the future of energy — a future that is already here. To me, this means taking the “fiction” out of science fiction and making tomorrow’s world one that everyone can experience. That’s my motivation and that is what the peak lab. will achieve, together with the partner of the enera project. We are looking forward to it!

For more information on the project’s aims, the model region, and it’s partners, please see: www.energie-vernetzen.de

ENERA, OR WHAT WE CAN LEARN FROM SCIENCE FICTION was originally published in the peak lab. on Medium, where people are continuing the conversation by highlighting and responding to this story.