Getting Started with Roku App Development: An Introduction for Developers

February 23, 2023 | Shishupal Shakya

As an open-source streaming platform, Roku is open to all developers and publishers. 

With over 30k apps on the Roku App store, it’s growing at a rapid pace, which will soon demand developers’ attention. 

If you are a developer or want to develop Roku apps in the future, this guide will help you. 

Here, we will start with Roku development basics for beginner developers.

Let’s begin. 

What is the Brightscript language for Roku?

BrightScript is a scripting language developed primarily for Roku devices. Although BrightScript is written in C, its syntax differs from C, resembling Python/Ruby/Lua/Basic and more. 

In Roku, BrightScript runs over the engine layer above the kernel layer.

Using Roku BrightScript, you can quickly build media and network applications for embedded devices. As part of BrightScript, all APIs of the platform on which BrightScript is running appear as BrightScript components. 

Moreover, BrightScript has integrated support for BrightScript components, a library of lightweight components. So, you can also create useful applications by implementing BrightScript Component Architectures.

Whenever a script is loaded and run in BrightScript, its code is compiled into bytecode and executed by its interpreter. During the compilation process, no binary files are generated. 

Fundamentals of BrightScript

1. Function

The first step to building any logic is creating a function or a subroutine. We will discuss the Sub in more detail below. 

In syntax, a function looks like this:

Function functionName(parameter1 as type1, parameter2 as type2) as type
returns obj
End Function

Here, each case must end with an END tag. Parameters 1 and 2 are optional. The function returns an object depending on the type declared: String, Integer, Boolean, default, or invalid.

2. Sub

Functions and Subs are the same, except that they don’t have return types.

The syntax for functions is as follows:

Sub functionName(parameter1 as type1, parameter2 as type2)
End Sub

3. If/Else/End if

Using the following syntax, you can conditionally display a video on Roku.

If(condition1) then
else if (condition2)
else
end if

There is no need to mention THEN in this if/else clause, but it is a good practice to do so.

4. For

Roku uses FOR looping statements.

The syntax for FOR is,

For i = 0 to 10<
Print i
i = i + 1
End For

5. Return

Functions can return any value using the Return statement.

6. While

For any screen to remain visible in Roku while a statement is used, the while parameter has significant importance.

While (true)
msg = wait (0, port)
if type(msg) = "anyScreenEvent" then
//do the task
//exit while
end if
end while

7. Type (value)

The method returns the value’s type, such as invalid, int, boolean, string, or a custom type created by the developer.

8. Print

This function prints any value to the console.

Print anyValue

9. m.value (Global)

In BrightScript language, m tags are used to declare global values. These values can be accessed both within and outside brs classes.

10. Invalid

BrightScript’s invalid type is an essential type for straightforward interpretation. Any value with this type will crash your program if not handled correctly. 

if(parameter invalid)
Print "hello, I am not invalid."
End if

11. ParseJson

The function parses a string formatted according to RFC4627 and returns an equivalent Brightscript object. A string that is not syntactically correct is returned as Invalid.

Function ParseJson (jsonString As String) As object
End Function

12. Wait

Waits on Objects that are “writeable” (those with a MessagePort interface). The wait () function returns the message port event object. 

A zero timeout means that “wait” will never end. Otherwise, Wait will return after the timeout milliseconds have passed. If this is the case, Wait returns “invalid”.

function Wait (timeout As Integer, port As Object) As object
End Function

SceneGraph: What is Scenegraph in Roku?

SceneGraph is Roku’s flagship framework for building channels. It’s an XML-based framework used primarily to design channel user interfaces. The framework is based on two key concepts:

  • SceneGraph rendering of the channel screens
  • XML configuration of the SceneGraph screens

With this framework, you can speed up the development of channels by reducing the amount of procedural code you need to write. As an alternative, screen attributes can be set in XML files to define the screen’s appearance. 

With Roku’s SceneGraph components, you can easily select and customize each component’s attributes to match the design of your channel and develop more complex screen displays than were possible with previous Roku firmware due to the coding of much of the appearance and behavior of screen components.

Additionally, the SceneGraph XML programming framework allows you to create a channel’s user interface based on specific screen resolutions and ensure the user interface will display correctly on Roku players that do not support the intended resolution.

Component Architecture

The Roku streaming platform’s modular component architecture makes it easy to build scalable and maintainable applications.

It follows the Model-View-Controller (MVC) pattern, which includes the following:

  • Model: Contains data and business logic.

It retrieves and stores data from various sources and performs calculations and data transformations on the data. The Model component is responsible for managing the application’s data and business logic.

  • View: A visual representation of the data. 

A View component displays data to a user and shows a visual representation of the Model. In addition, it can display information on the screen and respond to user interactions, including images, text, and buttons.

  • Controller: Intermediates between Model and View, updating Model and View based on user interactions. A Controller component is used to link the Model and View components. It receives user input from the View, updates the Model, and then updates the View to reflect the changes in the Model.

As a result of Roku’s component architecture, developers can create custom applications in a highly flexible and scalable environment that provides an interactive and dynamic user experience.

Getting Started with Roku Development

Roku Independent Developer Kit (IDK) allows you to develop personal-use applications for your streaming player using a non-commercial development platform.

The IDK includes real-time 3D graphics with OpenGL ES, standard OSS libraries, low-level integration with the Roku OS, and a simplified build process. 

To build innovative projects, developers, enthusiasts, and hobbyists can use C/C++ (or other programming languages). For example, the IDK can create casual, interactive games that can be controlled and monitored by Roku remote controls and smart home apps.

How To Create a Roku Project?

Creating a Roku channel is much easier than developing one for another streaming player, STB (set-top box). Follow these steps to build, test, deploy, and debug a channel. But before that, let’s examine the Specifications required for creating a Roku channel.

  • A Roku player with software version 2.7 or later
  • Computer with Wi-Fi capability
  • A TV to connect with the Roku player
  • A Wi-Fi Connection
  • Roku SDK

You can download the Roku SDK after registering for the Roku Developer Program by visiting the Roku Developer Program website.

How to set up the Roku Application Development environment?

Home 3x, Up 2x, Right, Left, Right, Left, Right

Here is an explanation of the above:

  • Press the home screen button three times.
  • Press the up button two times.
  • Press the right button one time.
  • Press the left button one time.
  • Press the right button one time. 
  • Press the left button one time.
  • Finally, press the right button one time.

Once you have entered the Developer Settings, you can enable developer mode. Upon enabling developer mode, you can access the Application Installer page.

How to configure VS Code for Brightscript

Follow these steps to set up Visual Studio Code (VSCode) for Roku development:

  • First, download the latest version of VSCode from the official website.
  • Add the following extensions to VSCode:
  • Set the IP address of your Roku device in the Roku Debug extension.
  • In VSCode, create a BrightScript project.
  • To test and debug your Roku application, use the built-in debugger.

Note: You must be connected to the same network as your computer and Roku device before you begin.

  • Implementing Hello World!

Create a root folder in the directory and name it ‘sample-project.’

Organize inner folders by component, image, and source names

Make an inner manifest file called manifest (no extension).

Create main.brs inside the ‘source’ folder and copy below given code

sub Main()
    print "in showChannelSGScreen"
    'Indicate this is a Roku SceneGraph application'
    screen = CreateObject("roSGScreen")
    m.port = CreateObject("roMessagePort")
    screen.setMessagePort(m.port)

    'Create a scene and load /components/helloworld.xml'
    scene = screen.CreateScene("HelloWorld")
    screen.show()

    while(true)
        msg = wait(0, m.port)
        msgType = type(msg)
        if msgType = "roSGScreenEvent"
            if msg.isScreenClosed() then return
        end if
    end while
end sub

Create another file with helloworld.xml and copy the code:

<?xml version="1.0" encoding="utf-8" ?>
<component name="HelloWorld" extends="Scene">
 <children>
      <Label id="myLabel"
      text="Hello World!"
      width="1280"
      height="720"
      horizAlign="center"
      vertAlign="center"
      />
    </children>
<!-- BrightScript Portion -->
<script type="text/brightscript" >
<![CDATA[
  '**
  '** Example: Edit a Label size and color with BrightScript
  '**

  function init()
    m.top.setFocus(true)
    m.myLabel = m.top.findNode("myLabel")
   
    'Set the font size
    m.myLabel.font.size=92

    'Set the color to light blue
    m.myLabel.color="0x72D7EEFF"

    '**
    '** The full list of editable attributes can be located at:
    '** http://sdkdocs.roku.com/display/sdkdoc/Label#Label-Fields
    '**
  end function
]]>
</script>
<!-- End of BrightScript Portion -->
</component>

Execute the channel using VS Code's RUN menu.

Conclusion

We hope this guide will help you kick-start your Roku app development journey. Keep practicing, and soon you will be a master at it.