2024-05-11 17:39:34 -04:00
|
|
|
# Writing Tilde Friends applications7
|
|
|
|
|
|
|
|
|
|
TODO
|
|
|
|
|
|
|
|
|
|
## Creating your environment
|
|
|
|
|
|
|
|
|
|
1. Open an existing application (ie: `identity`);
|
|
|
|
|
2. Open the editing panel;
|
|
|
|
|
3. Save the app under a new name (ie `/~YOUR_USERNAME/my-app/`);
|
|
|
|
|
4. Go back to the main menu and open your new app;
|
|
|
|
|
5. You can now edit your app, save it and see changes in the real time.
|
|
|
|
|
|
|
|
|
|
## Project structure
|
|
|
|
|
|
|
|
|
|
An application has a `app.js` file that gets run when a user enters the app.
|
|
|
|
|
This file contains a function (typically called `main()`) that's considered the entry point.
|
|
|
|
|
|
|
|
|
|
Paste this in `app.js`:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
async function main() {
|
|
|
|
|
let ids = await ssb.getIdentities();
|
|
|
|
|
await app.setDocument(`
|
|
|
|
|
<body style="font-family: sans-serif; color: white">
|
|
|
|
|
<h1>Hello world!</h1>
|
|
|
|
|
</body>
|
|
|
|
|
</body>`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
main();
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Save the app, and you should now be seeing `Hello world!` on the screen.
|
|
|
|
|
|
|
|
|
|
## Components
|
|
|
|
|
|
|
|
|
|
Once your app grows to a certain size, you'll want to introduce components.
|
|
|
|
|
In Tilde Friends, the de facto standard is [Lit](TODO).
|
|
|
|
|
Althogh you an use any framework you want, you're encouraged to use Lit as you can reuse
|
|
|
|
|
|
|
|
|
|
First, add lit-all-min.js into your project.
|
|
|
|
|
|
|
|
|
|
TODO
|
|
|
|
|
|
|
|
|
|
<!-- mention shadow dom -->
|
|
|
|
|
|
|
|
|
|
TODO: tfrpc
|
|
|
|
|
|
2024-05-12 04:59:26 -04:00
|
|
|
Apps can interact with Tilde Friends using tfrpc.
|
|
|
|
|
|
2024-05-17 02:16:38 -04:00
|
|
|
Read [tfrpc.md](https://dev.tildefriends.net/cory/tildefriends/src/branch/main/docs/apps/tfrpc.md)
|
2024-05-12 04:59:26 -04:00
|
|
|
|
2024-05-11 17:39:34 -04:00
|
|
|
TODO: sharing apps
|
