Getting Started with Roku App Development: An Introduction for Developers
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.
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
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:
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.
Functions and Subs are the same, except that they don’t have return types.
The syntax for functions is as follows:
3. If/Else/End if
Using the following syntax, you can conditionally display a video on Roku.
There is no need to mention THEN in this if/else clause, but it is a good practice to do so.
Roku uses FOR looping statements.
The syntax for FOR is,
Functions can return any value using the Return statement.
For any screen to remain visible in Roku while a statement is used, the while parameter has significant importance.
7. Type (value)
The method returns the value’s type, such as invalid, int, boolean, string, or a custom type created by the developer.
This function prints any value to the console.
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.
BrightScript’s invalid type is an essential type for straightforward interpretation. Any value with this type will crash your program if not handled correctly.
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.
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”.
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.
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:
- BrightScript by Roku
- Roku Debug by Roku
- vscode-brightscript-language by Roku
- 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
Create another file with helloworld.xml and copy the code:
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.