Skip to content

Clockwork V2 Dev Guide

LukasExists edited this page Jan 10, 2024 · 5 revisions

Warning: Work in Progress

This page is a work in progress! Info may change or be inaccurate, so be ready.


Creating an App

Apps work by simply embedding a webpage inside Clockwork. Apps are written in JSON and are really easy to make:

{
  "name": "Example",
  "desc": "An example app",
  "longDesc": "A looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong description for my example app. With [b]BBCode![/b]"
  "url": "urlhere.com",
  "encodedUrl": "no",
  "icon": "https://redstone-nw.netlify.app/assets/icon.png",
  "author": "You",
  "version": "v1.0.0",
  "finderTerms": ["term","cool","epic"],
  "permissions": []
}

name (required)

The proper name of your app.

desc (needed to upload to store)

A short description shown in Clockwork and the Store.

longDesc (needed to upload to store)

A longer description shown on your app's page in the Clockwork Store. Not shown in Clockwork itself. Allows [b], [i], [u], [s], [h1-3], [hr] and [br] BBCodes.

url (required)

The url to the app.

encodedUrl (required)

If encoded with ClockworkEncode (found in Settings > Developer Tools) set to true/yes, otherwise set to false/no. If you don't know what this does then just set it to false.

icon (required)

The url to the icon image. Images should be square.

banner

The url to the image for the banner, only shown on your app page in the Store. In development...

author (needed to upload to store)

The creator of the app. This must be your username if uploading to the Clockwork Store.

version

The version of your app.

finderTerms

An array containing alternative searchable text for the Finder tool. Just put an array of alternative names if you don't know what this is.

permissions

Add permissions here. If not given, it will give no permissions. Valid permissions are:

notifications - allow sendNotification(), addPanel(), editPanel(), deletePanel(), getPanels() [IN DEVELOPMENT]

installApp - allow installApp()

installTheme - allow installTheme() [IN DEVELOPMENT]

unsafePermissions - allow unsafeEval(), factoryReset(), installPlugin() [IN DEVELOPMENT]

Sideloading your new app

As of beta16 (UNRELEASED UPDATE), Clockwork now has a developer mode where you can sideload apps and themes, and run Javascript code. To enter developer mode, go to the /os/?dev=true on the Clockwork instance's website. To turn it back off, just replace true with false.

Communicating with Clockwork

Clockwork has lots of cool functions for apps to use, but you might be wondering how you're supposed to be able to use them. Well, we've made a JS library which will hopefully make your life way easier. To add it to your app, put the following code in the <body> element:

<script src="https://cdn.jsdelivr.net/gh/red-stone-network/clockwork@latest/tools/clockwork.js"></script>

To start, you'll need to create a new Clockwork communicator:

const cw = new Clockwork()

Then, you can use all the functions of Clockwork from there (if your app has the permissions for it).

Example: Install an app if embedded, otherwise notify user

const cw = new Clockwork();

if (cw.isEmbedded) {
  cw.installApp("https://example.com/app.json");
} else {
  alert("You aren't using Clockwork!");
};

NOTE: cw.isEmbedded cannot tell if it is embedded in Clockwork or another website.

Example: Send a notification with the contents of a prompt

const cw = new Clockwork();

if (cw.isEmbedded) {
  cw.sendNotification(prompt("Type a message."));
}

There's plenty more you can do with clockwork.js! You can look here for a full documentation.

Best Practices

  • Try to host the icon for your app on the app's website, so users can know if it's blocked without having to download it
  • Make your apps accessible to users! We have users with dyslexia and colorblindness, and having features that make your apps easier to use for these groups does wonders for both your app and Clockwork.
  • Don't host your apps on Replit. Replit is a steaming pile of garbage for Clockwork apps most of the time - use Glitch, Render, Cyclic, Railway, or literally anything else.

Troubleshooting Errors

Failed to fetch or NetworkError when attempting to fetch resource.

The website that you're hosting the .json file of your app on are not giving the correct Content-Type headers. Make sure it's set to application/json, or if you don't know how to do that, try hosting it one one of these services:

Github Pages

Github Gist

JSDelivr (through github repo)

Allgit (through github repo)

General troubleshooting stuff

  • Try purging the cache of the clockwork.js script here if you're using JSDelivr.
  • Try removing and re-adding the script tag for clockwork.js.
  • If that doesn't work, ask for help in the Discussions tab or in the Discord.