1. What is Preset Embedded

Imagine bringing your data to life by embedding stunning dashboards directly into your application. That’s exactly what Preset Embedded lets you do, making it easy to integrate Apache Superset’s rich visualizations into your product or tools. Whether you're enhancing your users’ experience or showcasing insights in real-time, Preset Embedded is a powerful solution for delivering seamless, data-driven experiences.

To make things even simpler, this tutorial comes with a ready-to-go Flask app that’s already set up to work with Preset Embedded. We’ll guide you through every step: from configuring the app, to securely providing your credentials, to connecting your own dashboards. This way, you can focus on exploring and testing instead of wrestling with setup.

If you’re curious about embedded analytics or eager to see your dashboards in action within a real application, you’re in the right place. By the end of this guide, you’ll have a fully functioning Flask app with Preset Embedded, ready to bring your data vision to life. Let’s get started and make something amazing together!

2. Tools needed for this tutorial

To follow the tutorial for setting up a development environment on macOS to work with the embedded-example repository, you'll need to install the following programs:

1. Visual Studio Code (VSCode)
   A code editor that supports multiple programming languages and includes features such as syntax highlighting, Git integration, debugging, and IntelliSense code completion.

2. Python
   The programming language required to run the Flask application. Make sure to install Python 3.x and add it to the system PATH during installation.

3. Git
   A version control system that allows you to track changes in your code and collaborate with others. It's also necessary for cloning the GitHub repository.

4. Flask
   A micro web framework written in Python. It is not a standalone program but a Python library. You'll install Flask inside a Python virtual environment using pip, which is the package installer for Python and comes with Python.

5. Python Virtual Environment (venv)
   A tool within Python to create isolated Python environments. It's part of the Python standard library, so no separate installation is required beyond Python itself.

6. pip (Python Package Installer)
   The tool for installing Python packages from the Python Package Index (PyPI). It comes pre-installed with Python versions 3.4 and above.

7. A Web Browser
   To view and interact with the Flask web application. Common choices include Google Chrome, Mozilla Firefox, or Microsoft Edge.

3. Setting up your environment

Step 1: Install Homebrew

As we said, Homebrew is a package manager for MacOS that makes it easy to install applications and tools.

1. Open the Terminal application on your Mac. You can find it using Spotlight (Cmd + Space and type "Terminal").

2. Execute the following command to install Homebrew:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

3. Follow the on-screen instructions to complete the installation.

4. After you install it, remember to add it to your PATH. If you are using an Apple Silicon Mac:

echo 'export PATH="/opt/homebrew/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

5. Verify Homebrew in PATH

which brew

Step 2: Install Visual Studio Code

Visual Studio Code (VSCode) is a powerful code editor that we'll use to write and manage our code.

1. In Terminal, type the following command to install VSCode using Homebrew:

brew install --cask visual-studio-code

2. Once installed, you can open VSCode by typing code in the Terminal or by finding it in your Applications folder.

Step 3: Install Python

Python is the programming language we'll use to run the Flask application.

1. Install Python using Homebrew:

brew install python

2. After installation, restart the terminal, and check if Python is installed by typing:

python3 --version

Step 4: Install Git

Git is a version control system which will allow us to manage the project's code.

1. Install Git with Homebrew:

brew install git

2. Close and re-open Terminal and verify the installation by typing:

git --version

Step 5: Set Up the Project

Now we'll download the Preset project code from GitHub.

1. Prepare a folder where you want to download the project. For instance, here we created the empty folder named Embedded_Testing inside “Documents”:

2. In Terminal, navigate to the folder where you want to set up the project:

3. Clone the repository (which means downloading the project into this directory):

4. Navigate into the project directory (which is named embedded-example):

Step 6: Install and Set Up Python Virtual Environment

Virtual environments in Python help us manage project-specific dependencies. They allow you to create isolated environments for different projects.

1. Create a virtual environment:

2. Activate the virtual environment:

Step 7: Install Project Dependencies

We need to install libraries that the Flask application depends on.

1. Ensure pip is up-to-date:

2. Install all the dependencies listed in the requirements.txt file:

You will need to wait for a while until all dependencies get installed.

3. Ensure this library is installed by executing this command:

pip install pyjwt

Step 8: Set Up Environment Variables

The Preset Embedded-example Flask application uses a .env file for configuration. So we will use the sample file that comes inside the project and we will edit it accordingly:

1. Copy the .env-example file to a new file named .env

2. Edit .env with VSCode (the following command will open it):

When you execute the code .env command, the file .env will be opened showing this:

3. Fill in your details in place of the placeholders.

A. API_TOKEN and API_SECRET

To create these two parameters you need to log into your Preset account and then click on “Manage User Settings”:

After this, you will see the option to generate an API Key. Click on it:

Assign a name and a description to your API Key:

Save your API Token and API secret in a secure place:

These two are the parameters you are looking for, so you can paste them into the .env file that we mentioned:

B. DASHBOARD_ID, SUPERSET_DOMAIN, PRESET_TEAM, and WORKSPACE_SLUG parameters

To get all these parameters quickly, you need to activate the embedded feature inside your dashboard:

And here you have all the other parameters you were looking for. Copy and paste them into the .env file as you did previously:

Finally, save the changes, close VS Code and continue with the next step.

C. KEY_ID

Using a private PEM key

Now, the only parameter we need is the KEY_ID. To get there is a good explanation here. We will use the private PEM Key method.

You can use the openssl software library to generate the private/public PEM keys. Use below commands after installing it:

To create the private key:

openssl genpkey -algorithm RSA -out $private_key_name.pem -pkeyopt rsa_keygen_bits:2048

Replace $private_key_name with the name that should be used to store the private key.

To create a public key for the private key:

openssl rsa -pubout -in $private_key_name.pem -out $public_key_name.pem

Replace:

• $private_key_name with the same name used in the previous command.
• $public_key_name with the desired name to store the public key.

To copy the public key content:

pbcopy < $public_key_name.pem

This command reads the contents of the file MyPublicKeyForTutorial.pem and copies it to the clipboard using pbcopy.

Lastly, a Team Admin needs to add this public key to the Workspace Settings. To do so:

1. Access Preset Manager.

2. Click on the three ellipses for the desired Workspace > Edit Workspace Settings.

3. Navigate to the Embedded tab. Paste the key (the one you got from the pbcopy < $public_key_name.pem command) and click on ADD.

4. Copy the Key Id and click on SAVE.

5. Paste the Key ID in your .env file:

Step 9: Run the Flask Application

Let's start the web application.

1. In Terminal, with the virtual environment activated, start the Flask application:

2. Open a browser and visit http://localhost:8080. You should see the running application:

4. Final Thoughts

If you’ve made it to this point, congratulations! You now have a fully functional embedded environment interacting in real-time with your own dashboards. This setup not only demonstrates how Preset Embedded works but also provides you with a solid foundation for further experimentation and development.

Embedded analytics can be a game-changer, allowing you to bring valuable insights to your users directly within the context of your application. With this quick-start tutorial, you’ve seen just how easy it is to get started and prototype using a ready-to-go Flask app.

From here, you can explore additional possibilities:

• Customize the embedded environment to fit your application’s needs.
• Experiment with advanced Preset Embedded features, such as user roles or filtering data for specific audiences.
• Begin integrating this prototype into your production environment for seamless user experiences.

We’d love to hear how you’re using Preset Embedded! If you have questions, feedback, or want to share your project, don’t hesitate to reach out to us or explore more in the Preset Documentation.

Thank you for following along—now it’s your turn to take embedded analytics to the next level!