tildefriends/docs/apps/quickstart.md
2024-05-17 08:21:28 +02:00

54 lines
1.3 KiB
Markdown

# 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
Apps can interact with Tilde Friends using tfrpc.
Read [tfrpc.md](https://dev.tildefriends.net/cory/tildefriends/src/branch/main/docs/apps/tfrpc.md)
TODO: sharing apps