Prepare your assets
Take screenshots of your app
Open your terminal application and navigate to the folder you’d like to save your screenshots to.
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_PHONEcommand you run when creating your app. Your command line should run like so:
Then, in the folder you ran this command from, you’ll get a screenshot of what was visible on your Pebble:
You can have up to five screenshots for your app, so prepare a few.
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.
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!
Extract and open up the psd file.
Scroll to the marketing banner and find it in your Photoshop layers. It should be under Marketing -> Marketing banner.
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!):
Click OK on that popup. It’s reminding you to click File -> Save if you want any of your changes here to remain.
You’ll now see the marketing banner and its available layers:
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:
Go to File -> Save and save your creation.
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.
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.
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.
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.
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
Head to https://dev-portal.getpebble.com
Click “Publish a Pebble App”:
Get an account (or log in if you’ve already got one).
When you’ve logged in, you should see a screen with details on each app type and three buttons at the bottom like so:
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.
I’ll be uploading the “Find Me Anything” watchface from my Advanced Pebble Watch Configuration article, so I’m choosing “Create a Watchface”.
Add your app name, description, URL and a link to your code (if you’re willing to share it):
Upload your Pebble app screenshot (or multiple, if you’ve made a few):
Upload your marketing banner:
- Click “Create”
- 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:
- Your app is contained within a PBW file. To find it, go to the folder with your app inside and find the “build” folder.
- Inside this build folder, will be a PBW file with your app’s name as the filename. For example, mine is
- To upload your app, click the “Add a release” button:
- At the next screen, click “Pick File” and upload your PBW file, type in any release notes and then click “Save”:
- 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
- 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:
- Underneath “Owner Actions”, choose “Delete” and then “OK”:
- 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.
- If the submission is okay, go to the release and next to the “details” link, you’ll see a “publish” button. Click that:
- Click the “Make Public” button to change the visibility to public:
- 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):
- 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.
Head to the Appstore, search for your app and feel the exhilaration of seeing your very own app!
Click and check all details are as expected, then install.
- When I installed the app, it replaced my test version automatically which was great:
- We’re all done! If you’ve followed along with your own app, congratulations, you’ve got an app on the appstore.
But… iOS is still waiting for this bundle thing?
- Publishing to the Pebble appstore – Pebble’s official docs on publishing to the appstore
- Tips for Appstore Success – Tips from Pebble on achieving a successful app launch
- Pebble Designer Guide – Includes the “Pebble appstore Marketing Materials Kit” with templates for the marketing header and icons
How to Simulate Mobile Devices with Device Mode in Chrome
By Craig Buckler,
Does your web app work in all devices? Testing is a huge job. Learn how to enable Chrome's useful device mode to emulate dozens of mobile devices.
How to Test Responsive Web Design Cross-Browser Compatibility
By Craig Buckler,
Craig introduces CSS options for setting up a responsive website, including media queries, Flexbox and Grid, and covers tools for testing cross-browser compatibility.
How to Create a QR Code Reader for Your Mobile Website
By Dmitri Lau, Beardscript,
PatCat is the founder of Dev Diner, a site that explores developing for emerging tech such as virtual and augmented reality, the Internet of Things, artificial intelligence and wearables. He is a SitePoint contributing editor for emerging tech, an instructor at SitePoint Premium and O'Reilly, a Meta Pioneer and freelance developer who loves every opportunity to tinker with something new in a tech demo.