This tutorial will walk you through the basics of building a Raydiant app. We’ll use the Weather app to set up its inputs and preview the app in the Raydiant Dashboard.
You won’t need to write any code but there are instructions for deploying the weather app at the end of the tutorial if you’d like to use it as a starting point for building your own app.
1. Before We Start
Before you can create your first app you will need to create an account to access the Developer Portal and the Raydiant Dashboard.
Once you have an account, sign in to the Developer Portal to begin the tutorial.
2. Create the App
From the Apps section, we’ll start by creating the Weather app and adding an icon and thumbnail.
- Click the “Create app” button .
- Set the name of the app to “Weather”.
- Set the description of the app to “Display local weather from around the world.”
- Set the app ID to something unique like
- Upload this thumbnail and icon to the “Assets” section.
3. Add a Location Input
Next, let’s set up your app’s URL template and a location input to allow users to type in their city.
Set the URL template of the app to the URL above.
:locationin the URL template is where the value of your location input will be injected before loading the app in a playlist.
Click the add button in the “Inputs” section below “URL Template”.
Add a new text input.
Set the name of the input to “Location”.
Set the input ID to
Set an initial value of “New York”.
Click the “Close” button at the top right of the input.
4. Add a Units Input
Now that we’ve added the location input let’s add a units input to allow users to swap between Fahrenheit and Celsius.
- Click the add button in the “Inputs” section.
- Add a new Button Group input.
- Set the name of the input to “Units”.
- Set the input ID to
units. Remember that this needs to have a corresponding
:unitsin your URL template.
- Click the add options button next to the “Options” section.
- Add an option with label “Fahrenheit” and value
- Click “Set Default”.
- Click the add options button again next to the “Options” section.
- Add an option with label “Celsius” and value
- Click the “Close” button at the top right of the input.
5. Save & Preview
Now we’re ready to preview your Weather app in the Raydiant Dashboard.
- Click “Save” to create your new Weather app.
- Go to your Library in the Raydiant Dashboard.
- Click Weather” app to open the presentation builder.
Congrats, you just built a Raydiant app!
You can save new versions of your app in the Developer Portal and any changes will show up in the Raydiant Dashboard’s presentation builder after you refresh the page.
Bonus step: Add some helper text to the Location input to provide some examples of cities.
6. Deploy Your Own
Deploying your own version of the Weather app is optional but we’ve made it easy for you to use it as a starting point.
Go to OpenWeather’s API keys section to grab your key.
Click this below “Deploy" button to deploy the Weather app to your own Vercel account.
When prompted for “Environment Variables” set the
OPENWEATHERMAP_API_KEYvariable to the API key from step 2.
After Vercel finishes deploying you will have your very own app URL you can use when following this tutorial.
- How to develop locally and test your app
- Browse the available input types
- Learn how Raydiant apps work when running in a playlist
- Check out our collection of sample apps