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:

Field	Function	Required?
App Name	The name of your app, used in the store	Yes
Website URL	The address of the author’s website, will be displayed in the store	No
Source URL	The address of the source code repository, will be displayed in the store	No
App Type	Is it a watchface or watch app?	Yes
Category	The 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 Description	A description of the app and it’s functions	Yes
Release Notes	A description of the changes for this release only	Yes
Large Icon	A large app icon, used in the rebble store	Yes
Small Icon	A small icon used in the app’s profile	Yes
Screenshots	At 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 Banner	The title banner that’s used in the appstore. Currently only 1 is supported.	Yes
The pbw	The .pbw file for the app	Yes

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.