Objective

In this tutorial you'll learn how to build and deploy your first application. To make it easier for you, you won't start from scratch. We've prepared a template to accelerate the process, thanks to pre-built graphs.

Initiate your application from Application Services by clicking Create an application.

Select the template ReactJS - Getting Started from the store. This template produces a complete BI dashboard.

Fill in the different fields as shown in the screenshot below and press Confirm.

Click on Confirm, your app will automatically build and deploy. The process should take a couple of minutes, in the meantime feel free to read through the pre-requisites below.

Requirements

Every previous step of the Getting Started guide must have been completed:

• The API is up and running.
• Queries in the Analytics Manager are properly requesting your data warehouse.
• The Lakehouse Manager shows a properly built logical schema. Virtual attributes are created and tables linked.
• Your Data Processing Engine workflow has been correctly run.

Let's create your first dashboard.

Set up your canvas

Click on the Dashboard menu. In an app, dashboards are its pages.

A first dashboard, Rides Analytics, has been added by default when you selected the template at the beginning. It comes with styles and logos!

Click on the house icon to set it as the default landing page of your app.

Set up a header

Head to the Menus menu. It is the page where you can define items such as header menus and filters for your whole app. It has already been pre-populated with several pages and items due to the template you used to initiate the app.

You should land on the header page. This means every item you add here will be embedded in the header of your app (i.e the upper part). You can switch to the sidebar page (to embed items in the left sidebar of your app) at the top right-hand corner.

Switch back to the header page. Expand tabs to see the container's items. Click on Add an item to add a tab in your header. Select link.

Fill in the fields as shown below. You can also define a logo icon for your app header!

Set up a dynamic parameter

Dynamic parameters are widgets to filter your data on your pages. Here, you will add one dynamic parameter to filter on the date.

Click on Sidebar on the top right-hand corner and create a container.

Drag the new container on top of the footer (which has to be at the bottom).

Open the container then add an item: select Parameters.

Pick the Select box one, then head to the options of the new parameter.

Fill in the options as shown in the screenshot below.

In the Infos tab, give it the following name: select_stations, and press Confirm.

↪ Learn more about dynamic parameters.

Your canvas configuration is now done. With a menu and a filter, you can now create your first graph.

Set up a chart

Go to the Dashboard tab and click on the Edit icon on your Ride Analytics dashboard. You can see that the menu and the filter we've just created are well set up here!

Step 1. Create a panel

Click on the ➕ icon to create a panel (Containers > Panel).

Once it's created, you can resize it so it spans across the screen.

Step 2. Give a title to your chart

Inside your new panel, click on the ➕icon and select Basic UI > HTML.

Name it Rides history and apply the H1 style by clicking on the H button.

Step 3. Generate your chart

Inside your panel, click on the ➕icon and select Chart. Pick the Recharts - Bar type.

Click on Request, and select Query selector to pick the rides_per_month query you've created in the Analytics Manager.

To complete the setup, you have to connect this chart with the filter we've already created. Go to the Infos tab, in the Linked dynamic parameters section, and add select_stations.

You can now test if your filter is properly working. Enter the read-only mode by clicking on the Play icon, and modify dates or holiday type to see how your data is changing. Your first chart is done!

Build and deploy the new version of your app

One last step: put your dashboard into production.

First, don't forget to Save your dashboard to make sure all your edits are consistently saved ( icon in the top middle bar).

Then go back to the Overview tab of the Application Manager.

Changes brought to your application since you first created it must be builded in order to be visible by your end-users. You could stop the currently deployed version to build those changes, but the Platform also allows you to do it without interruption of service.
First, Copy the currently deployed version of the application.

Then you need to name the new version (v2 in the screenshot below).

Now, click on Build, and then Deploy.

Your app is live and can now be accessed online! The link can be obtained in the Overview tab by clicking on Open.

That's it! Your dashboard is live and accessible by your users. Its data is refreshed automatically every day, stored in the cloud and will always be reliable.

You've completed the Platforms' Getting Started tutorial! You're now ready to go live on the platform, explore by yourself and take on your own Projects by yourself.

Obviously, you can come back to this tutorial at any time! We encourage you to check out the rest of the documentation to dive deeper into a specific component of the product when needed.

The next step will consist of discover advanced features of the app builder.

Customize your first app further

Also, don't hesitate to get in touch if you need anything, our support & product team is dedicated to helping you deliver faster any AI applications you have in mind.

Go further

If you need training or technical assistance to implement our solutions, contact your sales representative or click on this link to get a quote and ask our Professional Services experts for a custom analysis of your project.

Ask questions, give your feedback and interact directly with the team building the Data Platform on the dedicated Discord channel.

If you need support with your OVHcloud services, create a request in our Help Centre.

Join our community of users.