-
Notifications
You must be signed in to change notification settings - Fork 310
Clockwork V2 Dev Guide
NOTE: Creating an app requires you to have knowledge of making websites and JSON files.
Apps work by simply embedding a webpage inside Clockwork (which means you need to create a website first before you upload your app!) Once you've created the aforementioned website, you can write an app using JSON using this template:
{
"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": []
}The proper name of your app.
A short description shown in Clockwork and the 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.
The url to the app.
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.
The url to the icon image. Images should be square.
The url to the image for the banner, only shown on your app page in the Store. In development...
The creator of the app. This must be your username if uploading to the Clockwork Store.
The version of your app.
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.
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]
To sideload your new app, you need to first upload the JSON file to a website. Upload it to your website somewhere with a .json file extension.
If you're on a version before beta16 (check in Settings > About Clockwork), paste this URL into your browser bar while on the /os/ page of your instance, replacing url with the URL of the JSON file: javascript:promptInstallApp("url")
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. Once you've turned it on, simply check Settings > Developer Mode for instructions.
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).
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.
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.
- 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.
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:
JSDelivr (through github repo)
- Try purging the cache of the clockwork.js script here if you're using JSDelivr.
- Try removing and re-adding the
scripttag for clockwork.js. - If that doesn't work, ask for help in the Discussions tab or in the Discord.
Clockwork © 2022 Redstone Network