Mobile
Article
By Patrick Catanzariti

How to Submit a Pebble App to the App Store

By Patrick Catanzariti

Earlier this year I wrote an article on Pebble Watch Development with JavaScript. This covered starting Pebble app development from a JavaScript developer’s point of view and I snuck in some C coding at the end as a bonus. I built a wonderful app called “Find Me Starbucks” which combined the Foursquare API and Pebble location API to display the address of the nearest Starbucks underneath the time on my watchface. I then expanded that app in my article on Advanced Pebble Watch Configuration to “Find Me Anything”, adding a configuration screen so the user can choose what keyword to search for.

The next logical step once you’ve got a working and tested app is getting that app into the Pebble Appstore. Whether it’s a JavaScript enabled app or not, the process for getting a basic single app into the Appstore is the same.

Prepare your assets

Take screenshots of your app

  1. Open your terminal application and navigate to the folder you’d like to save your screenshots to.

  2. Run the following command: pebble screenshot --phone IP_ADDRESS_OF_YOUR_PHONE. It’s similar to running the pebble build --phone IP_ADDRESS_OF_YOUR_PHONE command you run when creating your app. Your command line should run like so:

    Running the screenshot command<

  3. Then, in the folder you ran this command from, you’ll get a screenshot of what was visible on your Pebble:

    Screenshot of Find Me Anything

  4. You can have up to five screenshots for your app, so prepare a few.

  5. You could make an animated gif for the main image of your app, that’ll animate on the app store screens to show more of your app while people are searching.

Create a marketing banner

All professional and attractive Pebble apps should have a marketing banner. These are easy to produce as long as you have a tool such as Photoshop that can open the marketing materials pack provided by Pebble.

  1. Download the “Pebble appstore Marketing Materials Kit” from this page. This is a photoshop file which contains assets and the ability to see live previews of what your content will look like in the store!

  2. Extract and open up the psd file.

  3. Scroll to the marketing banner and find it in your Photoshop layers. It should be under Marketing -> Marketing banner.

  4. Double click the thumbnail of that layer to edit the contents (note: my Photoshop screenshots are in Windows, yet my other screenshots are on Mac, this is because I sadly don’t own a Mac version of Photoshop and run it in a VM!):

    Opening marketing banner smart object

  5. Click OK on that popup. It’s reminding you to click File -> Save if you want any of your changes here to remain.

    Clicking OK on that popup

  6. You’ll now see the marketing banner and its available layers:

    The marketing banner screen

  7. Edit the image, ensuring that you’ve got your app title, description and a screenshot of your app on the Pebble visible. You can adjust the font of your text, add new elements (e.g. I’ve added a “Powered by Foursquare”), use a more appropriate background image and so forth. The font used in Pebble’s sample is Helvetica Neue which, if you’re on Windows, isn’t freely available, so you might be forced to use a different font. My end result looks like this:

    My edited marketing banner

  8. Go to File -> Save and save your creation.

  9. You can then switch back to the main psd (don’t close your marketing banner just yet, keep it open) and see your banner in action.

    Live previewing your banner

  10. I found the “Powered by Foursquare” part was covered by the dots, so I adjusted, re-saved and switched back and forth a few times until I was happy with the result.

  11. Once you’re happy with yours, I’d recommend saving a copy separate from this template for your own safe keeping. Switch to the marketing banner and go to File -> Save As and save your file somewhere else as a psd. The default filetype is a psb file, so make sure you change it to a PSD.

    Change the file type to a psd

  12. Next we’ll export the file as a PNG to include in our form. Go to File -> Save for web and devices, choose PNG–24. It should be 720×320 pixels. Save it somewhere you can find it.

    Save as a png

For Pebble apps (not watchfaces)

If you’re adding a Pebble app, rather than a watchface, then you’ll also need two PNG image icons which are used to represent your app in the app store, they are both in the “Pebble appstore Marketing Materials Kit” template:

  • One 144 x 144 PNG
  • One 48 x 48 PNG

With all this sorted, we’re ready to upload.

Publish your app through the Pebble Developer Portal

  1. Head to https://dev-portal.getpebble.com

  2. Click “Publish a Pebble App”: Screenshot of Publish a Pebble App button

  3. Get an account (or log in if you’ve already got one).

  4. When you’ve logged in, you should see a screen with details on each app type and three buttons at the bottom like so:

    Three Appstore types

    I’d assume by this point, you’ve already got an app made. So you likely already know whether it is a watchface, watchapp or companion app. In summary:

    • Watchface – Shows the time and is the app visible on a user’s Pebble most of the day. My “Find Me Starbucks” and “Find Me Anything” apps mentioned above are watchfaces.
    • Watchapp – This is an app a user needs to open up from the Pebble watch menu and use. It could do anything, display pictures of My Little Pony, stats for the ten most recent gorilla sightings, order a pizza with no anchovies. Anything they’re likely to prefer tucked away for particular occasions rather than always available and displayed with the time.
    • Companion app – If you’ve made a companion app, you’d know it. It’s a native iOS or Android app that accompanies a Pebble app to provide more functionality. With the Pebblekit JavaScript framework, these aren’t needed for providing a way for users to choose settings, so only have a companion app if you really need it. It’s a pain to install multiple items just for a single watchface/watchapp.
  5. I’ll be uploading the “Find Me Anything” watchface from my Advanced Pebble Watch Configuration article, so I’m choosing “Create a Watchface”.

  6. Add your app name, description, URL and a link to your code (if you’re willing to share it):

  7. Choosing title and details

  8. Upload your Pebble app screenshot (or multiple, if you’ve made a few):

    Uploading app screenshots

  9. Upload your marketing banner:

  10. Uploading marketing banner

  11. Click “Create”
  12. From this point, your app exists under your account but doesn’t have any app releases. You can see a preview of your appstore entry:
  13. Appstore preview

  14. Your app is contained within a PBW file. To find it, go to the folder with your app inside and find the “build” folder.
  15. Inside this build folder, will be a PBW file with your app’s name as the filename. For example, mine is find_me_anything.pbw.
  16. To upload your app, click the “Add a release” button:
  17. The Add to Release button

  18. At the next screen, click “Pick File” and upload your PBW file, type in any release notes and then click “Save”:
  19. Uploading your PBW file

  20. If you have any validation errors, you’ll need to fix those before resubmitting. My submission failed because the version numbering convention had changed. Pebble now require only major.minor rather than major.minor.bugfix in appinfo.json:
  21. You can remove failed releases if you wish. To do so, go to the releases section of your app info and click the “details” link next to the release you want to remove:
  22. The details link

  23. Underneath “Owner Actions”, choose “Delete” and then “OK”:
  24. Deleting failed releases

  25. You might be able to click “Edit” to resubmit a release, however the method I use is to either delete the failed release, or leave it there, go back to the main app info screen and click “Add a release” again.
  26. If the submission is okay, go to the release and next to the “details” link, you’ll see a “publish” button. Click that:
  27. Publish release button

  28. Click the “Make Public” button to change the visibility to public:
  29. Make it public button

  30. You will be shown the status of your app under the application data (where it previously said “Private”). In this case, my app is now public on Android but it’s still working on getting it onto iOS (I’ll explain the iOS timeframe stuff in a section below):
  31. Visibility public on Android

  32. If all goes well, it’ll publish onto the appstore and you’ll get links that you can share. The Public Web Link is the one you can share on the web and the Deep Link is the one you can link to within Android and iOS applications to go straight into the Pebble Appstore.
  33. Appstore links

  34. Head to the Appstore, search for your app and feel the exhilaration of seeing your very own app!

    Searching for the app

  35. Click and check all details are as expected, then install.

  36. The final app screen

  37. When I installed the app, it replaced my test version automatically which was great:
  38. My Pebble apps installed

  39. We’re all done! If you’ve followed along with your own app, congratulations, you’ve got an app on the appstore.
--ADVERTISEMENT--

But… iOS is still waiting for this bundle thing?

Sadly Pebble needs to bundle each JavaScript file inside the Pebble iOS application before iOS users can install newly submitted JS enabled apps. They send updates to Apple about once every ten days, Pebble explains here:

When you submit a new app that uses JavaScript to the Pebble appstore, this app will not be available immediately to iOS users. Instead of the “ADD” button, they will see a “COMING SOON” button. Approximately once every 10 days, we grab the latest release of all published JavaScript apps and include them in a new release of our iOS app. This new release is then sent to Apple. When this new release is approved by Apple, iOS users will automatically upgrade to this version and will then have access to your app.

Resources

Recommended
Sponsors
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account