RealTime.io App Builder

The RealTime.io App Builder allows you to build web apps directly on the RealTime.io platform. The apps are constructed out of HTML, JavaScript, and CSS. RealTime.io has built-in template apps or custom apps. Template apps are pre-built apps that you can start with and then customize. Custom apps allow you to upload your own files and images without any starter templates. We recommend starting with a template app so you can see how a basic app is formulated, then create a custom app when you are comfortable.

Creating an Application

To create an application, sign into RealTime.io, select the Apps tab, and click on “Create App”. Follow the wizard and select an application type.

Application Types

The App Builder allows you to build two types of apps: Template or Custom.

Template Apps

Template apps are pre-built apps that highlight a feature of RealTime.io enabled device or service. Use a Template App as a starting point and learn how apps are customized and built. Once you create a template app, you can further customize the app by uploading your own graphics, modifying the CSS, or adding your own JavaScript.

Custom Apps

When you create a Custom App, you start with an empty app. You then can upload files and/or create text files such as “index.html” or “styles.css” files. Custom apps are completely open-ended.

Application Settings

RealTime.io Apps have settings that allow you to organize, customize, and secure your apps. After you have created an app, you change the settings by selecting Manage.

Label

The Label is what you call your app. This can be a short title to remind you of what the app does. On the Apps tab inside of RealTime.io, you will see a list of your apps in alphabetical order based on their label.

Description

The Description field is any additional info about the app to future describe the app functionality.

Mask

The Mask is unique identifier for your application. By default, RealTime.io generates a random application mask that uniquely identifies your application.

The application mask is used in the application link, for example:

https://apps.realtime.io/E3cx2qOhkWcJK6Br

The default App Mask is a random alphanumeric string generated automatically. You can customize this mask by clicking on the mask and entering a new mask. The app mask must be 4-64 characters long and be unique.

Here is a custom app mask:

https://apps.realtime.io/myapp

API Key

If your app is based on a template, you will see an API Key field. This field is used to set the API Key that the app should use when loaded up.

Serial Number

If your app is based on a template, you will see a Serial Number field. This field is used to set the Serial Number that the app should use when loaded up.

Status

The Status field allows you to switch between Enabled and Disabled. Enabled allows people to view your app. Disabled stops people from seeing your app, but all of your files are maintained.

Application Replacements

Your application can make use of Replacements that allow you to add data to your app dynamically. Before RealTime.io loads your app, the app replacements get replaced with their dynamic value. The following application replacements are available by default.

  • %%app_label%% – Use this to dynamically insert your Application Label
  • %%app_description%%  – Use this to dynamically insert your Application Description
  • %%app_api_key%% – Use this to dynamically insert your API Key
  • %%app_serial_number%% – Use this to dynamically insert your Serial Number

Example Usage

...
<title>%%app_label%%</title>
...

Application Structure

All RealTime.io apps are created using HTML, JavaScript, and CSS. When you create an application, you must have an “index.html” file in your app. This is where your application starts. If you build a template app type, then the application will automatically create the “index.html” file for you. The application supports many file types, including HTML, CSS, JS, JPG, PNG, and GIF. Think of an application as a webpage that you are able to create directly on the RealTime.io web service.

Typical Application Structure

  • index.html
  • styles.css
  • scripts.js
  • logo.png

Editing Applications

RealTime.io features an in browser text editor to edit your files directly. The editor features line numbers, code coloring, undo/redo, and save notifications.

RealTime.io App Editor

 

Sharing Applications

RealTime.io Apps provide you a unique link / URL that you can send to others to see your application. Each application is identified with a unique ID that we call an “App Mask”. We also generate a QR Code that you can scan with a mobile device. This will open the app on your smart device’s default web browser. Others can only see your app if they know the link to your app and if you have the application enabled. Disabled apps are not displayed.