pebble-dev/rebble-store

Pebble app store replacement.

rebble-store's Issues

Add Search to UI

Add search bar to UI

App card layout broken on Android

The app list on index.html, apps.html, featured.html are broken on Android, tested with Firefox 50.1.0

Screenshots:

Create UI

Create a UI with Bootstrap 4 (yes I know its still in Alpha).

• Create Home Page
• Create App Detail Page
• Create Category Page
• Add Search Page

Add Back Button To Vue

1. Add back button on all pages except App's home and Watchface's home.

The back button code is: (Goes inside navbar like in here)

<div class="navbar__items left">
   <a class="float-xs-left back" href="app-details.html"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
</div>

Design Error Page

Generic error page just with different text depending on error

Fix Screenshots

Make Slick Js behave correctly and make the right slider breakpoints.

This might help:
http://kenwheeler.github.io/slick/

Order Main SCSS

• Order scss
• Make variables file
• Add comments
• Separate into files

Backend development work

Before realizing that this work was ongoing here, I started my own project to expose the archive of the pebble store to the internet. I'm not overly fond of Vue.js and the like (and I do enough JS development at work...), but I do have some basic work completed which might interest you all.

So far I have a basic Flask application that allows for full text searches over the current store, and I have begun work on the single-application view page. I've picked PostgreSQL for the ease with which one can implement full-text searches (ala ElasticSearch) using TSVector and TSQuery. Admittedly, I did a straight port of the schema that is present in the ripped JSON files (so categories are singular), but I did drop the "type" field (as it was covered by a category). If there's interest, we should start discussing the level of coupling between the front and back ends and the like.

Create SVG sprite build process within the VUE branche (webpack?)

A build process for importing all the SVG files used on the site within the SvgContainer.vue file and have the ID be the file name of the SVG, like so <svg id="{{filename}}>....</svg>.

Because we're using Webpack it would be nice to implement it within this.

manifest.json not the same

/src/assets/manifest.json is not the same as /static/manifest.json or /dist/static/manifest.json

Design App/Watchface Page

Includes:

• For apps add app icons
• App Banner (Original app store size 720px x 320px)
• Heart rating
• Download Button (Is there any way to integrate it with the Pebble app?).
• Author Name
• Screenshots (At least one for every watch supported grouped by watch type Ex: Pebble 2, Time, Time Round, Maybe time 2). In their original size.
• Watchface description
• Version history
• Support link
• Author website
• Other watchfaces by this author

Add missing companion app details

• Companion app indicator

• Companion OS compatibility

• Companion get button (???)

Move all SVG references to external files

There's a number of repeated inline SVG's on the current vue branch.

These can all be moved to external files to reduce duplication and allow browser caching.

Watchfaces page responsive on mobile

Watchface page needs to be 3 columns on mobile, same as apps.

Possibly using flexbox or my table thing (flexbox preferred)

Add app icon to single card

Show app icon next to the name if there's an icon to show.

• Add icon app icon to single card

Archived Apps

How should an archived app be displayed?

• The same was as normal apps but with a red banner asking for approval from the developer (Rebble Store Ready).
• They should have an archived tag.
• The get button will link with the app's Pebble Store page while its still up.
• The thumbs up button isn't displayed.

Rebble Store Ready program

A developer/app becomes Rebble Store Ready after the developer is verified, creates a Rebble Store developer account, and agrees to give us a redistribution license. After this the archived tag, and red banner will disappear from his apps and the download link will link to his app in our servers. And he will be asked to update the details and tags of all of his apps.
If a developer doesn't agree he will be asked to confirm his action and warned that his apps will be immediately removed from the Rebble Store.

How to identify a developer

Probably by adding a string to the bottom of an app description, but we are open to suggestions.

Rebuild SVGs used on the site with SVGO compressor (for Sketch OSX)

The current SVG files look nice, but have a lot of unnecessary code within them. Saving SVGs from Sketch (OSX only) with the SVGO compressor plugin will strip all the unnecessary code automatically.

Next we need to name the files (with a unique name) which is going to be used to call the SVG files within the site.

PS: I am really picky with SVG code, I don't like unnecessary <g> tags so I am going to remove them.

Bind to the new Pebble app store API reimplementation

See https://github.com/pebble-dev/rebble-appstore-api

TODO:

• App card
• App view
• Author view
• Category view
• Collection view
• App front page
• Wathface frontpage
• Search page (Algolia)
• Add heart to app
• Authentication support (required by the heart system)

Extras:

• App view multi-banner support

Mobile Cards

On small screens only one column is shown, find a way to get at least 2, but 3 would be perfect.

Fix (Re-add) App Screenshots Drag

Re add js script to enable draggable screenshots as seen in the preview.

Add documentation and dependency for Windows (WSL) users

@sGerli has succesfully setup a dev environment in Windows 10 using the Windows Subsystem for Linux (WSL). This required the addition of a patched version of the node-macaddress package.

This package needs to be added to the dev section of package.json, and the README updated to reflect the process for Windows users.

api.rebble.io and docs.rebble.io

It would be nice (at least during the development stages) if we code have the API documentation and the APIs both online and easily accessible. I propose that the domain names both being api.rebble.io and docs.rebble.io.

I have a server that can serve the content of both of those at 23.94.164.141 and can host the services (at the least, during development).

Thought? @afourney, @sGerli, @ishotjr?

app-details/app-version needs title centered, DL SVG fix

Main page, centered:

App-details, not centered

Download button gfx is broken (Firefox 50 on Windows 10)

Algolia search query-parameters not updating results

• Pages don't change according to route
• Search filters require a reload

Order of SVG's in DOM affects rendering

I'm not sure what to make of this. If the iconApp SVG is below any other SVG, it looks broken to varying degrees.

Here's an example with it below iconSearch in the SvgContainer component:

And here it is moved to the top of the SvgContainer component:

Similarly, if the pet rock SVG is included, it looks even more broken 😢

@mvaneijgen Could this possibly be related to #57? Going to assign you on this as well, since you have more domain knowledge.

Add Icons to UI

These icons aren't specific designed for the higher resolutions, but I wanted to provide them anyway, just in case.

SVG's.zip

25px:

64px:

128px:

256px:

Localize all non-dynamic text

Localize non-dynamic text using the same localizations as the Pebble Store.
Add translations for the following locales based on the legacy store translations:

• de_DE
• en_US
• es_ES
• fr_FR
• nl_NL
• pl_PL
• zh_CN
• ZH_TW

Related tasks:

• Add locale to route (/en_US/faces)
• Detect locale from browser (or check if its already stored in local-storage) if user navigated to root (without specifying a locale)

Make UI Work With The Backend

• Fetch watchfaces page

• Fetch watchfaces slider images/categories

• Make watchfaces categories view all button work

• Fetch apps page

• Fetch apps slider images/categories

• Fetch app tags

• Make app categories view all button work

• Make author pages work

• Make search work

• Implement pagination or infinite scroll

• Fetch app/watchface details

• Fetch app versions

All of this has to be done with the rebblestore-api.

Update Packages?

Hi guys, when trying to solve #56, I saw many of the packages in package.json to be out-dated. Some by even 2 major versions. I wanted to ask, if you would like to update.

These packages are not up-to-date according to npm-check-updates:

 vue-router                    ^2.1.1  →          ^3.0.1
 autoprefixer                  ^6.4.0  →          ^7.2.5
 babel-eslint                  ^7.0.0  →          ^8.2.1
 babel-loader                  ^6.0.0  →          ^7.1.2
 chai                          ^3.5.0  →          ^4.1.2
 chalk                         ^1.1.3  →          ^2.3.0
 cross-spawn                   ^4.0.2  →          ^6.0.4
 css-loader                   ^0.25.0  →         ^0.28.9
 eslint                        ^3.7.1  →         ^4.17.0
 eslint-config-standard        ^6.1.0  →  ^11.0.0-beta.0
 eslint-friendly-formatter     ^2.0.5  →          ^3.0.0
 eslint-plugin-html            ^1.3.0  →          ^4.0.2
 eslint-plugin-standard        ^2.0.1  →          ^3.0.1
 extract-text-webpack-plugin   ^1.0.1  →          ^3.0.2
 file-loader                   ^0.9.0  →          ^1.1.6
 inject-loader                 ^2.0.1  →          ^3.0.1
 karma                         ^1.3.0  →          ^2.0.0
 karma-spec-reporter           0.0.26  →          0.0.32
 karma-webpack                 ^1.7.0  →          ^2.0.9
 lolex                         ^1.4.0  →          ^2.3.2
 mocha                         ^3.1.0  →          ^5.0.0
 opn                           ^4.0.2  →          ^5.2.0
 ora                           ^0.3.0  →          ^1.4.0
 sass-loader                   ^4.1.1  →          ^6.0.6
 selenium-server               2.53.1  →           3.8.1
 shelljs                       ^0.7.4  →          ^0.8.1
 sinon                        ^1.17.3  →          ^4.2.2
 url-loader                    ^0.5.7  →          ^0.6.2
 vue-loader                   ^10.0.0  →         ^14.1.1
 vue-style-loader              ^1.0.0  →          ^3.1.2
 webpack                      ^1.14.0  →         ^3.10.0
 webpack-dev-middleware        ^1.8.3  →          ^2.0.4
 webpack-merge                ^0.14.1  →          ^4.1.1

I don't know, whether everything will break, but even if it does, the front-end should be updated before beta release (at least, that's what I am thinking :) ).

Never show blank pages: loaders

Add loaders to dynamically fetched pages to avoid showing blank pages while loading.

• App home page loader
• Watchfaces home page loader
• Collection loader
• App details loader

Make frontend work correctly with boot api

We have to make the frontend understand links provided by the boot API.

"onboarding/get_some_apps": "https://apps.getpebble.com/en_US/onboarding/getsomeapps?platform=android&release_id=4&app_version=4.3&pebble_color=$$pebble_color$$&hardware=$$hardware$$&uid=$$user_id$$&mid=$$phone_id$$&pid=$$pebble_id$$&$$extras$$",
"onboarding/migrate": "https://apps.getpebble.com/en_US/onboarding/migrate?platform=android&release_id=4&app_version=4.3&pebble_color=$$pebble_color$$&hardware=$$hardware$$&uid=$$user_id$$&mid=$$phone_id$$&pid=$$pebble_id$$&$$extras$$",
"onboarding/get_more_info": "http://help.getpebble.com/customer/portal/articles/1422148-migration",
"appstore/watchapps": "https://apps.getpebble.com/en_US/watchapps?platform=android&release_id=4&app_version=4.3&pebble_color=$$pebble_color$$&hardware=$$hardware$$&uid=$$user_id$$&mid=$$phone_id$$&pid=$$pebble_id$$&$$extras$$",
"appstore/watchfaces": "https://apps.getpebble.com/en_US/watchfaces?platform=android&release_id=4&app_version=4.3&pebble_color=$$pebble_color$$&hardware=$$hardware$$&uid=$$user_id$$&mid=$$phone_id$$&pid=$$pebble_id$$&$$extras$$",
"appstore/developer_apps": "https://apps.getpebble.com/en_US/developer/$$id$$?platform=android&release_id=4&app_version=4.3&pebble_color=$$pebble_color$$&hardware=$$hardware$$&uid=$$user_id$$&mid=$$phone_id$$&pid=$$pebble_id$$&$$extras$$",
"appstore/application": "https://apps.getpebble.com/en_US/application/$$id$$?platform=android&release_id=4&app_version=4.3&pebble_color=$$pebble_color$$&hardware=$$hardware$$&uid=$$user_id$$&mid=$$phone_id$$&pid=$$pebble_id$$&$$extras$$",
"appstore/application_changelog": "https://apps.getpebble.com/en_US/changelog/$$id$$?platform=android&release_id=4&app_version=4.3&pebble_color=$$pebble_color$$&hardware=$$hardware$$&uid=$$user_id$$&mid=$$phone_id$$&pid=$$pebble_id$$&$$extras$$",
"appstore/application_share": "https://apps.getpebble.com/applications/$$id$$",
"appstore/search": "https://apps.getpebble.com/en_US/search?platform=android&release_id=4&app_version=4.3&pebble_color=$$pebble_color$$&hardware=$$hardware$$&uid=$$user_id$$&mid=$$phone_id$$&pid=$$pebble_id$$&$$extras$$",
"appstore/search/query": "https://apps.getpebble.com/en_US/search/$$search_type$$?native=true&query=$$query$$&platform=android&release_id=4&app_version=4.3&pebble_color=$$pebble_color$$&hardware=$$hardware$$&uid=$$user_id$$&mid=$$phone_id$$&pid=$$pebble_id$$&$$extras$$",

We can change those links but we have to work with those URL variables.

Because these ones are displayed in the app inside a webview we can hide the navbar and the download .pbw button.

More info about boot API https://github.com/pebble-dev/wiki/wiki/Mobile-Application-URI-Bootstrap

Migrate to Bootstrap 4 alpha 6

• Fix Navbar

• Fix App Cards

• Fix Carousel Images Loosing proportions when browser resized

• Fix Tags Not Inline

• Fix App-Details and Versions page styles

Use http://store.rebble.io as reference.

Better way of including SASS variables. Now they need to be included in all components using @import './static/css/_variables.scss';

I had a lot of trouble getting the SASS variables in the site. The only way I found is adding @import './static/css/_variables.scss'; at the top of the <style> tag in each compontent. There must be a better way, but may Google-fu wasn't their today.

Transition current frontend to VueJS

@sGerli and I are going to begin transitioning the current work on the frontend to integrate with the VueJS framework. This will allow us to easily integrate the upcoming REST API when that comes, and present a functional proof of concept in the meantime.

This work will involve moving all of the pages into single-file templates, and further consolidating redundant visual components into actual re-usable modules.

Design Featured/Author page

A page in where you can see al apps in featured section or all apps made by an author.

Transition to new backend repo

sGerli has setup a new backend repo exclusively for API work.

This will serve to clean up the commit tree and make it simpler for new developers to jump into the area of development relevant to their domain.

Rename Repository

Rename the repository to the new store name "Rebble Store", preferably "RebbleStore".

Cannot add watchfaces after watch reset

Steps to reproduce:

1. Add watchface from store
2. Factory reset watch
3. Remove pebble app and re-download and enable rebble
4. Setup watch
5. Go to store

Expected: should be able to download same watchface as before

Actual: watchface displays 'added' and cannot press to add

Expected: should be able to add any watchface

Actual: added watchfaces display as added but previously compatible are not compatible

I am not a pebble Dev so if I would need more info please also include steps on how to obtain said info.

Thankyou - awesome what you guys are doing, breathing life into beloved pebble, keep up the great work!

Fix faces/apps menu display

It would be better if faces/apps menu will not overlay search and other elements.

At least hide the menu on page change or move elements lower.

Preview (is) was dead

We need to put this gh-pages in a subdomain like store.rebble.io to fix preview URL issues. I'm going to revert and will not make the changes until this is done.

Design Home Page

Design a home page for the app store

Bind selected platform throughout the page

Move Sass to component files instead of giant global file

Currently we're using main.css in the vue branch. This was compiled from the work done by @sGerli.

This needs to be split into smaller chunks that live inside of the components that the rules actually effect.

Change the App Cards to Flexbox

Change the app cards to Flexbox and make them work on all display sizes with 3-4 columns.

Add Screenshots

Add screenshots to the App Detail Page.
Must be like the screenshot slider from the Pebble App Store.
Must have no background color and must be mobile friendly.

Dynamic page titles

Add dynamic page titles depending on the data loaded from backend and the context.

App-Versions Styles Broken

App-versions styles should be exactly the same ones of app-details. I don't know if it possible but maybe even a subview. Currently it has no styles.

The only change is in the cards below app title container.

Create Backend

Includes:

• Decide Backend Language.
• Connection to app, category, screenshots, author DB.
• Make a new dev-portal in which authors can upload .pbw, screenshots, app/watchface banners, app icons, descriptions, and manage their app versions.
• Add moderators that can moderate the App Store and its submissions.
• Check that .pbw aren't masked viruses.
• Rest API
• Probably there are more things that I forgot.

Backend Language: Go Lang

Extra Info:

• App banners have to be 720px x 320px (Original app store size).
• App Screenshots also have to be of their original size.
• Frontend will be single page with VUE JS

Search results are all for non-round pebble (round app exists)

If I use the app store search feature (in the Pebble Android app), then try to install a resulting app, I get a pop-up saying "Sorry! This app is not compatible with your Pebble smartwatch" and it shows pictures of square screen watches (I have Time Round). However, if I manually browse to the same app (e.g. Timer, or Timer+) not using the search feature, then it installs fine.

Maybe the search feature is returning the wrong edition of the results for Time Round watches?

Change Nav-Buttons State

Change nav App and Watchface buttons state to active depending on last visited page and default watchfaces.