Build an App

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.

1. Click the “Create app” button .
2. Set the name of the app to “Weather”.
3. Set the description of the app to “Display local weather from around the world.”
4. Set the app ID to something unique like alices-weather
5. 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.

 https://simple-weather-raydiant-app.vercel.app?location=:location&units=:units

1. Set the URL template of the app to the URL above.

   The :location in the URL template is where the value of your location input will be injected before loading the app in a playlist.

2. Click the add button in the “Inputs” section below “URL Template”.

3. Add a new text input.

4. Set the name of the input to “Location”.

5. Set the input ID to location.

6. Set an initial value of “New York”.

7. 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.

1. Click the add button in the “Inputs” section.
2. Add a new Button Group input.
3. Set the name of the input to “Units”.
4. Set the input ID to units. Remember that this needs to have a corresponding :units in your URL template.
5. Click the add options button next to the “Options” section.
6. Add an option with label “Fahrenheit” and value fahrenheit.
7. Click “Set Default”.
8. Click the add options button again next to the “Options” section.
9. Add an option with label “Celsius” and value celsius.
10. 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.

1. Click “Save” to create your new Weather app.
2. Go to your Library in the Raydiant Dashboard.
3. 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.

We’ll show you how to deploy using Vercel but the source code is available for you to deploy to your preferred host.

1. Sign up for an OpenWeather account.

2. Go to OpenWeather’s API keys section to grab your key.

3. Click this below “Deploy" button to deploy the Weather app to your own Vercel account.

   

4. When prompted for “Environment Variables” set the OPENWEATHERMAP_API_KEY variable 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.

#Next Steps

• 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

---