{"id":360,"date":"2019-10-05T13:21:27","date_gmt":"2019-10-05T12:21:27","guid":{"rendered":"https:\/\/willow.systems\/?p=360"},"modified":"2019-10-05T14:37:20","modified_gmt":"2019-10-05T13:37:20","slug":"a-quick-and-dirty-dev-portal-for-the-rebble-app-store","status":"publish","type":"post","link":"https:\/\/willow.systems\/blog\/a-quick-and-dirty-dev-portal-for-the-rebble-app-store\/","title":{"rendered":"A quick and dirty dev portal for the rebble app store"},"content":{"rendered":"\n

The rebble app store <\/a>now accepts new apps, thanks to the hard work of @Joshua<\/a> and co, and he describes the process required to submit an app here<\/a>. Currently though, it’s a bit of a manual process. To fix that, I’ve put together a dev portal of sorts<\/a>, 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<\/a> to get your app on the store.<\/p>\n\n\n\n\n\n\n\n

Instructions for use<\/h2>\n\n\n\n

So you have an app you want to submit? Nice! To get started, head on over to https:\/\/willow.systems\/pebble\/dev-portal\/<\/a>, where you’ll be greeted with any empty form. Read the heading at the top, and maybe glance at the original pebble guidelines<\/a> too. Once you’ve got everything you need, simply start filling in the fields, the function of which are described below:<\/p>\n\n\n\n
Field<\/strong><\/td>Function<\/strong><\/td>Required?<\/td><\/tr>
App Name<\/strong><\/td>The name of your app, used in the store<\/td>Yes<\/td><\/tr>
Website URL<\/strong><\/td>The address of the author’s website, will be displayed in the store<\/td>No<\/td><\/tr>
Source URL<\/strong><\/td>The address of the source code repository, will be displayed in the store<\/td>No<\/td><\/tr>
App Type<\/strong><\/td>Is it a watchface or watch app?<\/td>Yes<\/td><\/tr>
Category<\/strong><\/td>The category the watch app fits into. This is only for watchapps, not faces. See the original pebble guidelines<\/a> for a description of the categories.<\/td>Yes (If watchapp)<\/td><\/tr>
App Description<\/strong><\/td>A description of the app and it’s functions<\/td>Yes<\/td><\/tr>
Release Notes<\/strong><\/td>A description of the changes for this release only<\/td>Yes<\/td><\/tr>
Large Icon<\/strong><\/td>A large app icon, used in the rebble store<\/td>Yes<\/td><\/tr>
Small Icon<\/strong><\/td>A small icon used in the app’s profile<\/td>Yes<\/td><\/tr>
Screenshots<\/strong><\/td>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.<\/td>Yes<\/td><\/tr>
Appstore Banner<\/strong><\/td>The title banner that’s used in the appstore. Currently only 1 is supported.<\/td>Yes
<\/td><\/tr>
The pbw<\/strong><\/td>The .pbw file for the app<\/td>Yes<\/td><\/tr><\/tbody><\/table>\n\n\n\n

Once you’ve filled those out, simply press the button at the bottom to generate a .zip file:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

How it works<\/h2>\n\n\n\n

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<\/a> is the library used to create the zip files, the code is really simple:<\/p>\n\n\n\n

var zip = new JSZip();\n\n zip.file(\"build.yaml\", yaml);\n zip.file(pbwfile, app.pbw, {base64: true})\n\n var ban = zip.folder(\"banners\");\n ban.file(\"Banner.png\", app.header, {base64: true});\n\n...\n\nzip.generateAsync({type:\"blob\"}).then(function(content) {\n    \/\/ see FileSaver.js\n    saveAs(content, app.title.replace(\/\\s\/g,'') + \".zip\");\n});<\/code><\/pre>\n\n\n\n
Filesaver.js<\/a> handles the .zip download and exposes the handy saveAs() function.<\/p>\n\n\n\n
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:<\/p>\n\n\n\n
yaml = yaml + \"pbw_file: \" + pbwfile + \"\\n\"\n  yaml = yaml + \"header: banners\/Banner.png\\n\"\n  yaml = yaml + \"description: |\\n\" + app.description + \"\\n\"\n  yaml = yaml + \"assets:\\n\"\n  yaml = yaml + \"-\\n\"\n  yaml = yaml + \"  name: aplite\\n\"\n  yaml = yaml + \"  screenshots:\\n\"\n  for (var i = 0; i < app.screenshots.aplite.length; i++) {\n    yaml = yaml + \"    - screenshots\/screenshot-aplite-\" + i + \".png\\n\"\n  }\n....<\/code><\/pre>\n\n\n\n
which is a bit gross, but it works. <\/p>\n\n\n\n
The code is available on Github<\/a>, 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.<\/p>\n\n\n\n
Questions on a postcard<\/h2>\n\n\n\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[5],"_links":{"self":[{"href":"https:\/\/willow.systems\/blog\/wp-json\/wp\/v2\/posts\/360"}],"collection":[{"href":"https:\/\/willow.systems\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/willow.systems\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/willow.systems\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/willow.systems\/blog\/wp-json\/wp\/v2\/comments?post=360"}],"version-history":[{"count":21,"href":"https:\/\/willow.systems\/blog\/wp-json\/wp\/v2\/posts\/360\/revisions"}],"predecessor-version":[{"id":412,"href":"https:\/\/willow.systems\/blog\/wp-json\/wp\/v2\/posts\/360\/revisions\/412"}],"wp:attachment":[{"href":"https:\/\/willow.systems\/blog\/wp-json\/wp\/v2\/media?parent=360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/willow.systems\/blog\/wp-json\/wp\/v2\/categories?post=360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/willow.systems\/blog\/wp-json\/wp\/v2\/tags?post=360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}