Roundtrip [The voting story] frontend, backend, and REST#
You will enhance the Plone Conference site with the following behavior:
Talks are submitted. The jury votes for talks to be accepted or rejected.
In this part you will:
build your own Plone add-ons for backend and frontend.
Storing data in annotations
Custom REST API service
Backend package creation with plonecli
Frontend package creation with Volto generator
Create React components to display voting behavior in frontend
The voting story spreads about the next chapters:
- 1. Complex Behaviors [voting story]
- 2. REST API endpoints [voting story]
- 3. Volto Actions and Component State [voting story]
- 4. Permissions [voting story]
Jury members shall vote for talks to be accepted or rejected.
For this we need:
A behavior that stores the vote data in annotations
A REST service for the frontend to communicate with
A frontend component that displays votes and provides the ability to vote
Create a backend package#
plonecli is a tool to generate Plone backend packages and several features of a Plone backend add-on. To install plonecli, run once:
pip install plonecli --user
We use plonecli to create a new package.
plonecli create addon backend/sources/training.votable
We press Enter to all questions except
--> Plone version [6.0.7]: 6.0.7
--> Python version for virtualenv [python3]: python
The new package is created in directory
Integrate package in training setup#
Before we implement our feature, we integrate the add-on by
installing the add-on as a Python package
updating the Zope configuration to load the add-on
restarting the backend
requirements.txt and add your add-on to be installed as Python package.
instance.yml and add the add-on to tell Plone to load your add-on. With this the site administrator can activate the add-on per site.
To apply the changes of the configuration, please build and restart the backend with:
The add-on can now be activated for our site
Please head over to http://localhost:8080/Plone/prefs_install_products_form and activate / install the new add-on.
Create a Volto add-on#
We will use the Volto generator to create an add-on. Please install the tool once with:
npm install -g @plone/generator-volto
Now the frontend add-on can be generated. We call it 'volto-training-votable' to indicate that it is the corresponding part to our recently created backend package.
Choose "volto-training-votable" as name for your add-on.
package.json to include the add-on in your app:
Install and start
We are now ready to implement our voting behavior in our new frontend add-on created in