10 KiB
TimeSafari.app - Crowd-Funder for Time - PWA
Time Safari 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 for current priorities. (Numbers at the beginning of lines are estimated hours. See 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
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).
-
Record what version is currently on production.
-
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_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://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
-
Commit changes. 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.
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:
test/test.sh
NODE_ENV=test-local npm run dev
- Now 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 with the screenshots, use the following:
npx playwright test test-playwright/40-add-contact.spec.ts --trace on
... with the -c playwright.config-local.ts
to get the same results as above.
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.)
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 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 toabout: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 toabout:preferences
and search for "notifications".) - Unregister service worker. (In Chrome, go to
chrome://serviceworker-internals
; in Firefox, go toabout: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!
orEncryption 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
, anddanger
. They are done via notiwind and set up in App.vue. -
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 for the free open-source license
- Máximo Fernández for the 3D code and explanatory post
- Many tools & libraries such as Nodejs.org, IntelliJ Idea, Veramo.io, Vuejs.org, threejs.org
- Bush 3D model
- Forest floor image
- Time Safari logo assisted by DALL-E in ChatGPT
- DiceBear and Avataaars for human-looking identicons
- Some gratitude prompts thanks to Develop Good Habits