Composer Component
Allowing the user to create their post
The first step to creating a miniapp is to define the composer component, which is what displays in the post composer and allows a user to create a post using your miniapp.
After running the ./seam-magic.sh
script in the quickstart, you'll be given a composer component that looks like this:
The job of the Composer Component is to store data in the BlockModel
. Depending on what type of miniapp you are creating, you can create input fields here or even entire full gaming experiences. As the user makes selections, earns a highscore, or composes their song, add the relevant strings to the model. Then, call the done function with your updated model.
Storing User Data
All data gets stored in the BlockModel
which is a key-value store which holds strings. Seam stores the model in our database for you, so you don't have to worry about backends, authentication, or users. Each model is unique per post, and holds all the data necessary to render a post in the feed.
Storing a string is as easy as adding it to the model's data
property:
Make sure not to store any data in here that is too large, for performance reasons. If you want to store images, videos, or other large files, you can use our FileUploader component, and store the URL as a string in the model.
Storing Numbers
To store numbers, you can use the Javascript function toString
, like so:
Storing Arrays
The model only allows strings, so how do you store more complex data types, like arrays? For that, you can use the JSON.stringify()
function, like so:
Again, make sure to not store arrays that are too large in the data model -- that'll cause your posts to render slowly in the feed!
Posting
Once the user is done in your miniapp, call the done function with the updated model. This will automatically advance the composer to the preview step. For example from the Camera miniapp:
Next Steps
Once you have a Composer Component that takes in user choices, saves them to the model, and calls the done function, run yarn start
to see your latest changes live in the example composer. As always, check out other open source miniapps to learn how other people have constructed their miniapps.
Next, it's time to create the Feed Component!
Last updated