Build A Radio App in Kodular

 

That is an excellent next step! The setup you need involves three main parts:

1. Google Sheet Setup (Your data source)

2. Google Apps Script (The free "API" replacement)

3. Kodular Blocks (To load the data and handle clicks)

Here is a detailed, step-by-step guide on how to set this up to replace your Airtable functionality in Kodular:

---

Part 1: Setting up the Google Sheet

1. Create a New Google Sheet: Go to Google Drive and create a new Google Sheet.

2. Add Your Data: Set up your columns. For a radio app, you will need at least three columns, with the first row being the headers: | A | B | C | | :--- | :--- | :--- | | Name | URL | ImageURL | | Channel 1 | http://stream.url/1 | http://logo.url/1.png | | Channel 2 | http://stream.url/2 | http://logo.url/2.png |

3. Copy the Spreadsheet ID: The ID is the long string in the URL between /d/ and /edit. Keep this handy.

   • Example URL: https://docs.google.com/spreadsheets/d/1w_XYZ_abc123.../edit#gid=0

Part 2: Creating the Google Apps Script

This script will be your new free "API" endpoint.

1. Open the Script Editor: In your Google Sheet, go to Extensions > Apps Script.

2. Paste the Code: Delete any existing code and paste the following simple script. This script gets all the data from your sheet and returns it as a single CSV string, which Kodular can easily convert into a list of lists.

   JavaScript

   const SPREADSHEET_ID = 'PASTE_YOUR_SPREADSHEET_ID_HERE'; 
   
   function doGet(e) {
     const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
     const sheet = ss.getSheets()[0]; // Assumes your data is on the first sheet
   
     // Get all data, including the header row (A1 notation is row, column, numRows, numCols)
     const range = sheet.getRange(1, 1, sheet.getLastRow(), sheet.getLastColumn());
     const values = range.getValues();
   
     // Convert the nested array (list of lists) into a single CSV string
     let csvString = '';
     for (let i = 0; i < values.length; i++) {
       csvString += values[i].join(',') + '\n';
     }
   
     // Return the data as plain text (CSV)
     return ContentService.createTextOutput(csvString)
       .setMimeType(ContentService.MimeType.TEXT);
   }
   

3. Replace the ID: Crucially, replace the placeholder 'PASTE_YOUR_SPREADSHEET_ID_HERE' with the actual Spreadsheet ID you copied in Part 1.

4. Deploy the Script:

• Click the Deploy button (top right) and select New deployment.

• For Type, select Web app.

• For Execute as, choose Me.

• For Who has access, select Anyone.

• Click Deploy.

• You will be asked to Authorize Access. Follow the prompts.

• Once deployed, copy the Web app URL. This is your new API URL.

I cannot generate or send a single image that contains all the Kodular blocks, but I can provide the exact block names and their logic in a clear, easy-to-read format. You can easily find these blocks in the Kodular editor using the names provided.

Here is the complete Kodular block logic for loading the channel list from Google Sheets and playing the stream on click:

---

1. Variables Initialization (Variables Drawer)

You need to set up the three global variables that hold the structured data.

Block Name	Variable Name	Value Block	Purpose
initialize global	AllDataList	create empty list (List Drawer)	Stores the raw data as a list of lists.
initialize global	ChannelNames	create empty list (List Drawer)	Stores the names for the list view.
initialize global	StreamURLs	create empty list (List Drawer)	Stores the stream links for playback.

---

2. Loading the Data (Screen and Web Components)

This is the two-step process to fetch and process the CSV data.

A. Fetching the Data

Event Block	Action Block	Value Block
when Screen1.Initialize (Screen Drawer)	set Web1.Url (Web Drawer)	text (Text Drawer) – Paste your Web App URL here.
	call Web1.Get (Web Drawer)

B. Processing the Data

Event Block	Logic Blocks	Inner Blocks and Data
when Web1.GotText (Web Drawer)	set global AllDataList to	call list from csv table text: get response content (Web Drawer)
	for each item in list (get global AllDataList) (Loop/Variable Drawers)	Loop starts here:
	add items to list ChannelNames	select list item list: get item index: **1** (This is the Channel Name column)
	add items to list StreamURLs	select list item list: get item index: **2** (This is the Channel URL column) set ListView1.Elements toget global ChannelNames (Variable Drawer)

---

3. Playing the Stream (ListView and Player Components)

This is triggered when the user taps a channel name.

Event Block	Action Block	Value Block
when ListView1.AfterPicking (ListView Drawer)	set Player1.Source (Player Drawer)	select list item list: get global StreamURLs index: ListView1.SelectionIndex (ListView Drawer)
	call Player1.Start (Player Drawer)

This combination of blocks effectively replaces your Airtable component logic, using the Web component to connect to your free Google Apps Script "API."