Skip to main content

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.

Video coming soon

Target audience for this tutorial

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.

Note

If you want to learn more about React and TypeScript, explore the following pages:

Duration of the tutorial

It will take about one hour to finish this tutorial and have your app deployed to a Dynatrace tenant.

About this tutorial

Throughout 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 third party APIs to enrich Dynatrace data.
  • Deploy your app to the Dynatrace tenant of your choice 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 how many users are starting and then finishing the booking process considering the price of the user's intended travel. The app will use two states to calculate the information to determine how much money the booking agency loses due to the users who don't complete their booking process.

Additionally, we'll use third-party currency exchange rates to convert the values from United States dollars (USD) to Euros (EUR). And display all this information on six cards based on the SingleValue component.

The app will look like this at the end of the tutorial:

App Screenshot App Screenshot

Still have questions?
Find answers in the Dynatrace Community