Get started with the Dynatrace platform
Learn the essentials of Dynatrace App development by building a fully functional app using the main capabilities of the Dynatrace platform.
Who is this tutorial for?
This tutorial is for users new to app development on the Dynatrace platform, with or without prior knowledge of React or TypeScript. We've kept the tutorial simple and explained the React or TypeScript concepts where required.
If you want to learn more about React and TypeScript, explore the following pages:
How long does it take?
It will take you approximately one hour to finish this tutorial and have your app deployed to a Dynatrace tenant of your choice.
About this tutorial
Throughout the duration of this tutorial, we will build a simple app that will use the main capabilities of the Dynatrace platform. By the end of this tutorial, you should be able to:
- Create a new project with the help of the Dynatrace App Toolkit.
- Learn more about the Strato design system and use some of its UI components.
- Fetch data from Dynatrace and display it in the UI.
- Fetch data from 3rd party APIs to enrich Dynatrace data.
- Deploy your app to the Dynatrace tenant of your choice by using the Dynatrace App Toolkit.
Our use case scenario for this tutorial
During this tutorial, you'll build a small analytics app on top of fictional business events. Think about a fictional travel booking web app that generates events during a user's booking process through the booking platform.
The app aggregates these events showing us how many users are starting and then finishing the booking process taking into account the given price of the user's intended travel. Using these two states, the information is calculated to work out how much money is being potentially lost due to the users who don't complete their booking process.
Additionally, third-party currency exchange rates will be used to convert the values from United States dollars (USD) to Euros (EUR).
All this information will be displayed in six cards based on the SingleValue component.
The app will look like this at the end of the tutorial:
