forked from jsnbuchanan/crowd-funder-for-time-pwa
252 lines
10 KiB
Markdown
252 lines
10 KiB
Markdown
# TimeSafari.app - Crowd-Funder for Time - PWA
|
|
|
|
[Time Safari](https://timesafari.org/) allows people to ease into collaboration: start with expressions of gratitude
|
|
and expand to crowd-fund with time & money, then record and see the impact of contributions.
|
|
|
|
## Roadmap
|
|
|
|
See [project.task.yaml](project.task.yaml) for current priorities.
|
|
(Numbers at the beginning of lines are estimated hours. See [taskyaml.org](https://taskyaml.org/) for details.)
|
|
|
|
## Setup
|
|
|
|
We like pkgx: `sh <(curl https://pkgx.sh) +npm sh`
|
|
|
|
```
|
|
npm install
|
|
```
|
|
|
|
### Compile and hot-reloads for development
|
|
```
|
|
npm run dev
|
|
```
|
|
|
|
See the test locations for "IMAGE_API_SERVER" or "PARTNER_API_SERVER" below, or use http://localhost:3000 for local endorser.ch
|
|
|
|
### Build the test & production app
|
|
```
|
|
npm run serve
|
|
```
|
|
|
|
### Lint and fix files
|
|
```
|
|
npm run lint
|
|
```
|
|
|
|
### Run all UI tests
|
|
|
|
Look below for the "test-all" instructions.
|
|
|
|
|
|
### Compile and minify for test & production
|
|
|
|
* If there are DB changes: before updating the test server, open browser(s) with current version to test DB migrations.
|
|
|
|
* `npx prettier --write ./sw_scripts/`
|
|
|
|
* Update the ClickUp tasks & CHANGELOG.md & the version in package.json, run `npm install`.
|
|
|
|
* Commit everything (since the commit hash is used the app).
|
|
|
|
* Put the commit hash in the changelog (which will help you remember to bump the version later).
|
|
|
|
* Record what version is currently on production in docs.
|
|
|
|
* Run the correct build:
|
|
|
|
* Staging
|
|
|
|
(Let's replace this with a .env.development or .env.staging file.)
|
|
|
|
The test BVC_MEETUPS_PROJECT_CLAIM_ID does not resolve as a URL because it's only in the test DB and the prod redirect won't redirect there.
|
|
|
|
```
|
|
TIME_SAFARI_APP_TITLE="TimeSafari_Test" VITE_APP_SERVER=https://test.timesafari.app VITE_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HWE8FWHQ1YGP7GFZYYPS272F VITE_DEFAULT_ENDORSER_API_SERVER=https://test-api.endorser.ch VITE_DEFAULT_IMAGE_API_SERVER=https://test-image-api.timesafari.app VITE_DEFAULT_PARTNER_API_SERVER=https://test-partner-api.endorser.ch VITE_PASSKEYS_ENABLED=true npm run build
|
|
```
|
|
|
|
* Production
|
|
```
|
|
# This picks up values from .env.production
|
|
npm run build
|
|
```
|
|
|
|
* Get on the server and back up the time-safari/dist folder.
|
|
|
|
* `rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntutest@test.timesafari.app:time-safari`
|
|
|
|
* Record the new hash in the changelog. Edit package.json to increment version & add "-beta", `npm install`, and commit. Also record what version is on production.
|
|
|
|
* Tag with the new version, [online](https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/releases) or `git tag 0.3.36` && `git push origin 0.3.36`.
|
|
|
|
|
|
|
|
|
|
## Tests
|
|
|
|
### Automated
|
|
|
|
Use the locally running Endorser server:
|
|
|
|
* Clone and set up https://github.com/trentlarson/endorser-ch and run the following in that directory:
|
|
```
|
|
npm install
|
|
test/test.sh
|
|
cp .env.local .env
|
|
NODE_ENV=test-local npm run dev
|
|
```
|
|
|
|
If that fails, go to the README.md in the endorser-ch directory and follow the instructions there.
|
|
|
|
* Install playwright browsers:
|
|
```
|
|
npx playwright install
|
|
```
|
|
|
|
* Now you can run the local tests:
|
|
```
|
|
npm run test-all
|
|
```
|
|
|
|
Note that a test will sometimes fail and rerunning may succeed (and repeat if a different test fails).
|
|
|
|
|
|
|
|
|
|
It's possible to use the global test Endorser (ledger) server (but currently the tests don't all succeed):
|
|
`npx playwright test`
|
|
|
|
|
|
|
|
|
|
It's possible to run with a minimal set of data; the following starts with the bare minimum of test data:
|
|
```
|
|
rm ../endorser-ch-test-local.sqlite3
|
|
NODE_ENV=test-local npm run flyway migrate
|
|
NODE_ENV=test-local npm run test test/controller0
|
|
NODE_ENV=test-local npm run dev
|
|
```
|
|
|
|
|
|
To run a single test like above with the screenshots, use the following:
|
|
```
|
|
npx playwright test -c playwright.config-local.ts --trace on test-playwright/40-add-contact.spec.ts
|
|
```
|
|
|
|
|
|
|
|
### Register new user on test server
|
|
|
|
On the test server, User #0 has rights to register others, so you can start
|
|
playing by importing that user and registering others. Import the keys for the test User
|
|
`did:ethr:0x0000694B58C2cC69658993A90D3840C560f2F51F` by importing this seed phrase:
|
|
`rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage`
|
|
(Other test users are found [here](https://github.com/trentlarson/endorser-ch/blob/master/test/util.js).)
|
|
|
|
### Create multiple identifiers
|
|
|
|
Under the "Your Identity" screen, click "Advanced", click "Switch Identity / No Identity", then "Add Another Identity...".
|
|
|
|
### Create keys with alternate tools
|
|
|
|
[This page](openssl_signing_console.rst) is a tool to create a JWT from a locally-generated keypair.
|
|
|
|
### Web-push
|
|
|
|
For your own web-push tests, change the push server URL in Advanced settings on the account page, and install Time Safari & push server on the same domain.
|
|
|
|
### Icons
|
|
|
|
To add an icon, add to main.ts and reference with `fa` element and `icon` attribute with the hyphenated name.
|
|
|
|
### Manual walk-through test
|
|
|
|
- Backup seed & data & get a CSV dump from Endorser Mobile.
|
|
- If there were any DB changes, check that you're on the old version and reload the page and ensure you can still act and haven't lost data (ie. contacts, identities).
|
|
- Use a mobile user as well as a desktop user.
|
|
- Check that the version is updated.
|
|
- Clear the browser data & add identity & import Time Safari contacts and then CSV contacts.
|
|
- Make sure that it's using the test API (under Identity in 'Advanced').
|
|
- Clear the browser data again. (See "Reset" below.)
|
|
- Go to the account page before visiting the home page to see that there is no ID.
|
|
- On the home page:
|
|
- Check that it generated an ID.
|
|
- Check the feed without names.
|
|
- Copy the contact URL.
|
|
- On each page, verify the messaging, and that they cannot take action.
|
|
- On the discovery page, check that they can see projects, and set a search area to see projects nearby.
|
|
- On the contacts page, check that they can add a contact even without their own ID.
|
|
- Install the PWA.
|
|
- As User 0 in another browser on the test API, add a give & a project.
|
|
- Note that some combinations of desktop with mobile emulation stretch the image.
|
|
- Import User 0 with seed: `rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage`
|
|
- Add new user as a contact (which allows them to see User 0).
|
|
- With the new user on the home page, see the feed that shows User 0 in network but without the name.
|
|
- As the new user, import contacts & identifiers.
|
|
- As the new user on the contacts page, add User 0 as a contact.
|
|
- On the home page, see the feed that shows User 0 with a name.
|
|
- Switch back to the generated identifier.
|
|
- On the account page, check that they see messages on limits.
|
|
- As User 0, register the ID.
|
|
- As the new user on the home page, check that they can now record a gift, and record an offer & delivery.
|
|
- On the contacts page, check that they cannot register someone else yet.
|
|
- Walk through the functions on each page.
|
|
- Set and run notifications.
|
|
- Export & import, both seed and contacts & settings.
|
|
- Choose location on the search map.
|
|
- Offer, deliver a give, and confirm. Create a third user and test connections.
|
|
- On mobile, share an image with the app.
|
|
- Switch to "no identifier" to see that things look OK without any ID.
|
|
|
|
### Clear/Reset data & restart
|
|
|
|
* Clear cache for site. (In Chrome, go to `chrome://settings/cookies` and "all site data and permissions"; in Firefox, go to `about:preferences` and search for "cache" then "Manage Data", and also manually remove the IndexedDB data if the DBs still show.)
|
|
* Clear notification permission. (In Chrome, go to `chrome://settings/content/notifications`; in Firefox, go to `about:preferences` and search for "notifications".)
|
|
* Unregister service worker. (In Chrome, go to `chrome://serviceworker-internals`; in Firefox, go to `about:serviceworkers`.)
|
|
* Clear Cache Storage manually, possibly deleting the DB. (In Chrome, in dev tools under Application; in Firefox, in dev tools under Storage.)
|
|
|
|
(If you find more, add them to the HelpNotificationsView.vue file.)
|
|
|
|
|
|
|
|
## Troubleshooting
|
|
|
|
* A problem with `GET http://localhost:8080/web-push/vapid` means the py-push-server is not running
|
|
(and notifications won't work for a local app without special routing from the browser's web push service provider, anyway).
|
|
|
|
* Red errors everywhere with a console message like this:
|
|
`Error: An ID is chosen but there are no keys for it so it cannot be used to talk with the service`
|
|
... has happened on account switching when the current account was erased (or maybe replaced -- once I had a duplicate and I don't know how).
|
|
|
|
* The error `DEXIE ENCRYPT ADDON: Could not decrypt message!` or
|
|
`Encryption key has changed` means that the encryption key is wrong,
|
|
sometimes seen after clearing storage for testing; you can make it happen by clearing localStorage.
|
|
Maybe only part of the storage was cleared out. Unless you got a copy of that password, you'll
|
|
have to erase storage and reload the identifier.
|
|
|
|
|
|
|
|
## Other
|
|
|
|
### Reference Material
|
|
|
|
* Notifications can be type of `toast` (self-dismiss), `info`, `success`, `warning`, and `danger`.
|
|
They are done via [notiwind](https://www.npmjs.com/package/notiwind) and set up in App.vue.
|
|
|
|
* [Customize Vue configuration](https://cli.vuejs.org/config/).
|
|
|
|
* If you are deploying in a subdirectory, add it to `publicPath` in vue.config.js, eg: `publicPath: "/app/time-tracker/",`
|
|
|
|
|
|
### Kudos
|
|
|
|
Gifts make the world go 'round!
|
|
|
|
* [WebStorm by JetBrains](https://www.jetbrains.com/webstorm/) for the free open-source license
|
|
* [Máximo Fernández](https://medium.com/@maxfarenas) for the 3D [code](https://github.com/maxfer03/vue-three-ns) and [explanatory post](https://medium.com/nicasource/building-an-interactive-web-portfolio-with-vue-three-js-part-three-implementing-three-js-452cb375ef80)
|
|
* [Many tools & libraries](https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/src/branch/master/package.json#L10) such as Nodejs.org, IntelliJ Idea, Veramo.io, Vuejs.org, threejs.org
|
|
* [Bush 3D model](https://sketchfab.com/3d-models/lupine-plant-bf30f1110c174d4baedda0ed63778439)
|
|
* [Forest floor image](https://www.goodfreephotos.com/albums/textures/leafy-autumn-forest-floor.jpg)
|
|
* Time Safari logo assisted by [DALL-E in ChatGPT](https://chat.openai.com/g/g-2fkFE8rbu-dall-e)
|
|
* [DiceBear](https://www.dicebear.com/licenses/) and [Avataaars](https://www.dicebear.com/styles/avataaars/#details) for human-looking identicons
|
|
* Some gratitude prompts thanks to [Develop Good Habits](https://www.developgoodhabits.com/gratitude-journal-prompts/)
|