A quick and dirty dev portal for the rebble app store

The rebble app store now accepts new apps, thanks to the hard work of @Joshua and co, and he describes the process required to submit an app here. Currently though, it’s a bit of a manual process. To fix that, I’ve put together a dev portal of sorts, in which you upload your screenshots, pbw, and more, and the SPA will auto generate the yaml and wrap everything up nicely in a .zip file, which you can then send to @Joshua on the rebble discord to get your app on the store.

Instructions for use

So you have an app you want to submit? Nice! To get started, head on over to https://willow.systems/pebble/dev-portal/, where you’ll be greeted with any empty form. Read the heading at the top, and maybe glance at the original pebble guidelines too. Once you’ve got everything you need, simply start filling in the fields, the function of which are described below:

App NameThe name of your app, used in the storeYes
Website URLThe address of the author’s website, will be displayed in the storeNo
Source URLThe address of the source code repository, will be displayed in the storeNo
App TypeIs it a watchface or watch app?Yes
CategoryThe category the watch app fits into. This is only for watchapps, not faces. See the original pebble guidelines for a description of the categories.Yes (If watchapp)
App DescriptionA description of the app and it’s functionsYes
Release NotesA description of the changes for this release onlyYes
Large IconA large app icon, used in the rebble storeYes
Small IconA small icon used in the app’s profileYes
ScreenshotsAt least one screenshot of the watchapp. By default the same screenshots are used for every platform, but you can use the toggle to provide platform specific screenshots.Yes
Appstore BannerThe title banner that’s used in the appstore. Currently only 1 is supported.Yes
The pbwThe .pbw file for the appYes

Once you’ve filled those out, simply press the button at the bottom to generate a .zip file:

Any missing fields or issues will appear as messages in the button itself, but if everything is there, your browser should download a .zip file with the .yaml file and all the resources, which you should then send to @Joshua to be uploaded the the rebble store.

How it works

I built the dev portal in a couple of hours a few weeks ago, it uses some cool libraries to do all of the generation client side. JSZip is the library used to create the zip files, the code is really simple:

var zip = new JSZip();

 zip.file("build.yaml", yaml);
 zip.file(pbwfile, app.pbw, {base64: true})

 var ban = zip.folder("banners");
 ban.file("Banner.png", app.header, {base64: true});


zip.generateAsync({type:"blob"}).then(function(content) {
    // see FileSaver.js
    saveAs(content, app.title.replace(/\s/g,'') + ".zip");

Filesaver.js handles the .zip download and exposes the handy saveAs() function.

The YAML is generated manually, because I didn’t see the need to add another dependency. If I cared about code readability more maybe I would have used one of the many JSON-to-YAML libraries out there to convert the JSON object directly to YAML. As it stands, the code for the yaml looks like this:

yaml = yaml + "pbw_file: " + pbwfile + "\n"
  yaml = yaml + "header: banners/Banner.png\n"
  yaml = yaml + "description: |\n" + app.description + "\n"
  yaml = yaml + "assets:\n"
  yaml = yaml + "-\n"
  yaml = yaml + "  name: aplite\n"
  yaml = yaml + "  screenshots:\n"
  for (var i = 0; i < app.screenshots.aplite.length; i++) {
    yaml = yaml + "    - screenshots/screenshot-aplite-" + i + ".png\n"

which is a bit gross, but it works.

The code is available on Github, all the good stuff happens in main.js. The bulk of the code is sanity checking. There’s probably a library out there which would avoid all the jquery if statements, but hey.

Questions on a postcard

It’s a somewhat hacky solution, but it removes the need to write YAML by hand so it’s a win in my book. If you run in to any problems, leave a comment below of reach out to me (@Will0) on the rebble discord.

Leave a Reply

Your email address will not be published. Required fields are marked *