Build an App

This tutorial will walk you through the basics of building a Raydiant app. We’ll use the WeatherExternal Link 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 PortalExternal Link to begin the tutorial.

2. Create the App

From the AppsExternal Link 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 DashboardExternal Link.
  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 VercelExternal Link but the source codeExternal Link is available for you to deploy to your preferred host.

  1. Sign up for an OpenWeather accountExternal Link.

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

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

    Deploy with Vercel
  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


Was this article helpful to you?
GitHubProvide feedback

Last edited on January 03, 2023.
GitHubEdit this page